added scene manager

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

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { SceneMangerStore } from "./scene_manager_store";
+import { observer } from "mobx-react-lite";
+import { StaticAssetModelView } from "./components/static_asset_item_view";
+import { useParams } from "react-router-dom";
+import { SceneManagerView, SceneMode } from "../model/scene_view";
+import { Button } from "antd";
+import { Form, Input, ResetButton, SubmitButton } from "formik-antd";
+import { Formik } from "formik";
+import { CameraViewModel } from "../model/scene_assets";
+
+export const SceneManagerPath = "/scene/manager/";
+
+export const SceneManger = observer(() => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const [sceneMangerStore] = React.useState(() => new SceneMangerStore());
+  const id = useParams().id as string;
+
+  React.useEffect(() => {
+    sceneMangerStore.init();
+    sceneMangerStore.loadScene(id, canvasRef.current!);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "scroll";
+      sceneMangerStore.dispose();
+    };
+  }, [id, sceneMangerStore]);
+
+  const sceneIcons: SceneManagerView[] = [SceneMode.ROTATE, SceneMode.MOVING, SceneMode.ADD_CAMERA].map((el) => {
+    return { name: el, clickHandel: () => sceneMangerStore.setSceneMode(el) };
+  });
+
+  return (
+    <div>
+      <canvas ref={canvasRef} style={{ position: "absolute", overflow: "hidden" }} />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignContent: "center",
+          justifyContent: "space-between",
+          position: "absolute",
+          width: "100vw",
+        }}
+      >
+        <div>
+          {sceneIcons.map((el) => {
+            return (
+              <div
+                style={{
+                  backgroundColor: sceneMangerStore.sceneMode === el.name ? "aqua" : "ActiveBorder",
+                  width: "100px",
+                }}
+                onClick={() => {
+                  el.clickHandel();
+                }}
+              >
+                {el.name}
+              </div>
+            );
+          })}
+          <div
+            style={{
+              marginTop: "10px",
+              backgroundColor: "GrayText",
+              border: "solid",
+              borderRadius: "10px",
+              padding: "8px",
+              borderColor: "white",
+            }}
+          >
+            <div style={{ color: "white" }}>Scene manager</div>
+            {sceneMangerStore.isVisibleSaveButton ? (
+              <>
+                <Button onClick={() => sceneMangerStore.onTapSave()}>Save</Button>
+              </>
+            ) : (
+              <></>
+            )}
+            {sceneMangerStore.isLoading ? <>Loading...</> : <></>}
+            {sceneMangerStore.sceneMode === SceneMode.ADD_CAMERA ? (
+              <div>
+                <Formik
+                  initialValues={CameraViewModel.empty()}
+                  onSubmit={async (model, actions) => {
+                    sceneMangerStore.addNewCamera(model);
+                    actions.setSubmitting(false);
+                    actions.resetForm();
+                  }}
+                  validate={(model) => {
+                    return model.validate(sceneMangerStore.getCameraLinkNames());
+                  }}
+                  render={() => (
+                    <Form>
+                      <div
+                        style={{
+                          background: "white",
+                          flex: 1,
+                          padding: 40,
+                          width: "400px",
+                        }}
+                      >
+                        <Input name="cameraLink" placeholder="Camera link" />
+                        <Input name="topicImage" placeholder="Topic Image" />
+                        <Input name="topicCameraInfo" placeholder="Topic Camera Info" />
+                        <Input name="topicDepth" placeholder="Topic Depth" />
+
+                        <ResetButton>Reset</ResetButton>
+                        <SubmitButton>Submit</SubmitButton>
+                      </div>
+                    </Form>
+                  )}
+                />
+              </div>
+            ) : (
+              <></>
+            )}
+            {sceneMangerStore.sceneMode === SceneMode.MOVING || SceneMode.ROTATE ? (
+              <>
+                {sceneMangerStore.robossemblerAssets?.assets.map((el) => {
+                  return (
+                    <div>
+                      <div style={{ color: "white", marginLeft: "10px", marginRight: "10px", display: "contents" }}>
+                        {el.name}
+                        {sceneMangerStore.isRenderedAsset(el.name) ? (
+                          <></>
+                        ) : (
+                          <Button
+                            onClick={() => {
+                              sceneMangerStore.loadSceneRobossemblerAsset(el.name);
+                            }}
+                          >
+                            add scene
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+        <div>
+          {sceneMangerStore.sceneModels.map((el) => {
+            return <StaticAssetModelView onTap={() => sceneMangerStore.deleteSceneItem(el)} model={el} />;
+          })}
+        </div>
+
+        {/* {sceneMangerStore.sceneMenuIsShow ? (
+          <>
+            <SceneMenu x={sceneMangerStore.sceneMenu.x} y={sceneMangerStore.sceneMenu.y} />
+          </>
+        ) : (
+          <></>
+        )} */}
+      </div>
+    </div>
+  );
+});