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

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 [store] = React.useState(() => new SceneMangerStore());
  const id = useParams().id as string;

  React.useEffect(() => {
    store.init();
    store.loadScene(canvasRef.current!);
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "scroll";
      store.dispose();
    };
  }, [id, store]);

  const sceneIcons: SceneManagerView[] = Object.values(SceneMode)
    .filter((el) => el !== SceneMode.EMPTY)
    .map((el) => {
      return { name: el, clickHandel: () => store.setSceneMode(el as SceneMode) };
    });

  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: store.sceneMode === el.name ? "aqua" : "ActiveBorder",
                }}
                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>
            {store.isVisibleSaveButton ? (
              <>
                <Button onClick={() => store.onTapSave()}>Save</Button>
              </>
            ) : (
              <></>
            )}
            {store.isLoading ? <>Loading...</> : <></>}
            {store.sceneMode === SceneMode.ADD_CAMERA ? (
              <div>
                <Formik
                  initialValues={CameraViewModel.empty()}
                  onSubmit={async (model, actions) => {
                    store.addNewCamera(model);
                    actions.setSubmitting(false);
                    actions.resetForm();
                  }}
                  validate={(model) => {
                    return model.validate(store.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>
            ) : (
              <></>
            )}
            {store.sceneMode === SceneMode.MOVING || SceneMode.ROTATE ? (
              <>
                {store.robossemblerAssets?.assets.map((el) => {
                  return (
                    <div>
                      <div style={{ color: "white", marginLeft: "10px", marginRight: "10px", display: "contents" }}>
                        {el.name}
                        {store.isRenderedAsset(el.name) ? (
                          <></>
                        ) : (
                          <Button
                            onClick={() => {
                              store.loadSceneRobossemblerAsset(el.name);
                            }}
                          >
                            add scene
                          </Button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </>
            ) : (
              <></>
            )}
          </div>
        </div>
        <div>
          {store.sceneModels.map((el) => {
            return <StaticAssetModelView onTap={() => store.deleteSceneItem(el)} model={el} />;
          })}
        </div>

        {store.sceneMode === SceneMode.MAGNETISM_MARKING ? (
          <>
            <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>
  );
});