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 [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>
  );
});