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 { useParams } from "react-router-dom";
import { MainPage } from "../../../core/ui/pages/main_page";

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]);

  return (
    <MainPage
      page={"Сцена"}
      bodyChildren={
        <>
          <canvas ref={canvasRef} style={{ 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> */}
        </>
      }
    />
  );
});