Scene builder: прилипание добавляемого объекта к сетке и другим объектам

ui/src/features/scene_manager/presentation/scene_manager.tsx

@@ -13,22 +13,24 @@ export const SceneManagerPath = "/scene/manager/";
 
 export const SceneManger = observer(() => {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
-  const [sceneMangerStore] = React.useState(() => new SceneMangerStore());
+  const [store] = React.useState(() => new SceneMangerStore());
   const id = useParams().id as string;
 
   React.useEffect(() => {
-    sceneMangerStore.init();
-    sceneMangerStore.loadScene(id, canvasRef.current!);
+    store.init();
+    store.loadScene(id, canvasRef.current!);
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = "scroll";
-      sceneMangerStore.dispose();
+      store.dispose();
     };
-  }, [id, sceneMangerStore]);
+  }, [id, store]);
 
-  const sceneIcons: SceneManagerView[] = [SceneMode.ROTATE, SceneMode.MOVING, SceneMode.ADD_CAMERA].map((el) => {
-    return { name: el, clickHandel: () => sceneMangerStore.setSceneMode(el) };
-  });
+  const sceneIcons: SceneManagerView[] = Object.values(SceneMode)
+    .filter((el) => el !== SceneMode.EMPTY)
+    .map((el) => {
+      return { name: el, clickHandel: () => store.setSceneMode(el as SceneMode) };
+    });
 
   return (
     <div>
@@ -48,8 +50,7 @@ export const SceneManger = observer(() => {
             return (
               <div
                 style={{
-                  backgroundColor: sceneMangerStore.sceneMode === el.name ? "aqua" : "ActiveBorder",
-                  width: "100px",
+                  backgroundColor: store.sceneMode === el.name ? "aqua" : "ActiveBorder",
                 }}
                 onClick={() => {
                   el.clickHandel();
@@ -70,25 +71,25 @@ export const SceneManger = observer(() => {
             }}
           >
             <div style={{ color: "white" }}>Scene manager</div>
-            {sceneMangerStore.isVisibleSaveButton ? (
+            {store.isVisibleSaveButton ? (
               <>
-                <Button onClick={() => sceneMangerStore.onTapSave()}>Save</Button>
+                <Button onClick={() => store.onTapSave()}>Save</Button>
               </>
             ) : (
               <></>
             )}
-            {sceneMangerStore.isLoading ? <>Loading...</> : <></>}
-            {sceneMangerStore.sceneMode === SceneMode.ADD_CAMERA ? (
+            {store.isLoading ? <>Loading...</> : <></>}
+            {store.sceneMode === SceneMode.ADD_CAMERA ? (
               <div>
                 <Formik
                   initialValues={CameraViewModel.empty()}
                   onSubmit={async (model, actions) => {
-                    sceneMangerStore.addNewCamera(model);
+                    store.addNewCamera(model);
                     actions.setSubmitting(false);
                     actions.resetForm();
                   }}
                   validate={(model) => {
-                    return model.validate(sceneMangerStore.getCameraLinkNames());
+                    return model.validate(store.getCameraLinkNames());
                   }}
                   render={() => (
                     <Form>
@@ -115,19 +116,19 @@ export const SceneManger = observer(() => {
             ) : (
               <></>
             )}
-            {sceneMangerStore.sceneMode === SceneMode.MOVING || SceneMode.ROTATE ? (
+            {store.sceneMode === SceneMode.MOVING || SceneMode.ROTATE ? (
               <>
-                {sceneMangerStore.robossemblerAssets?.assets.map((el) => {
+                {store.robossemblerAssets?.assets.map((el) => {
                   return (
                     <div>
                       <div style={{ color: "white", marginLeft: "10px", marginRight: "10px", display: "contents" }}>
                         {el.name}
-                        {sceneMangerStore.isRenderedAsset(el.name) ? (
+                        {store.isRenderedAsset(el.name) ? (
                           <></>
                         ) : (
                           <Button
                             onClick={() => {
-                              sceneMangerStore.loadSceneRobossemblerAsset(el.name);
+                              store.loadSceneRobossemblerAsset(el.name);
                             }}
                           >
                             add scene
@@ -144,18 +145,28 @@ export const SceneManger = observer(() => {
           </div>
         </div>
         <div>
-          {sceneMangerStore.sceneModels.map((el) => {
-            return <StaticAssetModelView onTap={() => sceneMangerStore.deleteSceneItem(el)} model={el} />;
+          {store.sceneModels.map((el) => {
+            return <StaticAssetModelView onTap={() => store.deleteSceneItem(el)} model={el} />;
           })}
         </div>
 
-        {/* {sceneMangerStore.sceneMenuIsShow ? (
+        {store.sceneMode === SceneMode.MAGNETISM_MARKING ? (
           <>
-            <SceneMenu x={sceneMangerStore.sceneMenu.x} y={sceneMangerStore.sceneMenu.y} />
+            <div style={{ backgroundColor: "white" }}>
+              <div>completion of objects</div>
+              <div>
+                {store.objectMagnetism ? (
+                  <>{store.objectMagnetism}</>
+                ) : (
+                  <Button>Selects an object for magnetism</Button>
+                )}
+                {store.objectForMagnetism ? <>{store.objectForMagnetism}</> : <Button>Selects an object magnet</Button>}
+              </div>
+            </div>
           </>
         ) : (
           <></>
-        )} */}
+        )}
       </div>
     </div>
   );