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

import * as React from "react";
import { DrawersSceneManager, SceneMangerStore, StoreMode } from "./scene_manager_store";
import { observer } from "mobx-react-lite";
import { useNavigate, useParams } from "react-router-dom";
import { MainPage } from "../../../core/ui/pages/main_page";
import { CoreText, CoreTextType } from "../../../core/ui/text/text";
import { Drawer } from "antd";
import { CoreButton } from "../../../core/ui/button/button";
import { CoreInput } from "../../../core/ui/input/input";
import { DrawersDataset } from "../../dataset/dataset_store";
import { Popover } from "antd";
import { Icon } from "../../../core/ui/icons/icons";
import { sceneManagerForms } from "./forms/scene_manager_forms";

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;
  const navigate = useNavigate();
  store.initParam(id);

  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={"Сцена"}
      panelChildren={
        <div style={{ width: "100%", height: "100%" }}>
          <div style={{ height: 260, width: "100%", padding: 10 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <CoreText text="Сцена" type={CoreTextType.large} />
              <Popover
                placement="bottom"
                color="rgba(104, 80, 164, 1)"
                content={
                  <div>
                    {store.popoverItems.map((el, i) => (
                      <div onClick={() => el.fn()}>
                        <CoreText key={i} text={el.name} type={CoreTextType.medium} color="white" />
                      </div>
                    ))}
                  </div>
                }
              >
                <span>
                  <CoreButton text="Добавить" filled={true} />
                </span>
              </Popover>
            </div>
            <div style={{ height: 10 }} />
            <div
              style={{
                borderRadius: 22,
                height: 200,
                width: "-webkit-fill-available",
                backgroundColor: "white",
                overflowX: "auto",
              }}
            >
              {store.sceneItems.map((el, index) => (
                <div
                  key={index}
                  style={{
                    paddingLeft: 20,
                    display: "flex",
                    backgroundColor: index.isEven() ? "rgba(217, 217, 217, 0.27)" : "",
                    alignItems: "center",
                  }}
                >
                  <Icon type={el.icon} />
                  <div style={{ width: 10 }} />
                  <CoreText text={el.name} type={CoreTextType.small} />
                </div>
              ))}
            </div>
          </div>
          <div style={{ height: 20 }} />
          <div
            style={{
              width: "-webkit-fill-available",
              height: "100%",
              borderRadius: 7,
              backgroundColor: "white",
              margin: 10,
            
            }}
          >
            {sceneManagerForms(store.activeFormDependency ?? {}, store).map((el) => {
              if (el.name.isEqual(store.activeFormType ?? "")) {
                return <>{el.component}</>;
              }
              return <></>;
            })}
          </div>
        </div>
      }
      bodyChildren={
        <>
          {store.storeMode.isEqual(StoreMode.sceneInstance) ? (
            <>
              <canvas ref={canvasRef} style={{ overflow: "hidden" }} />
            </>
          ) : (
            <div
              style={{
                width: "100%",
                height: "100vh",
                background: "rgba(246, 242, 249, 1)",
                padding: 50,
                paddingLeft: 70,
                paddingRight: 70,
              }}
            >
              <div style={{ width: "100%", height: "100%", background: "white" }}>
                <div style={{ width: "100%", textAlign: "center" }}>
                  <CoreText text="Сцены" type={CoreTextType.big} />
                  <CoreText
                    text="Создать новую сцену?"
                    onClick={() => store.editDrawer(DrawersSceneManager.NewScene, true)}
                    type={CoreTextType.small}
                    color="rgba(68, 142, 247, 1)"
                    style={{ cursor: "pointer" }}
                  />

                  <div>
                    {store.scenes.map((el, i) => (
                      <div
                        key={i}
                        style={{
                          border: "1px solid #CAC4D0",
                          margin: 10,
                          height: 60,
                          alignItems: "center",
                          borderRadius: 7,
                          display: "flex",
                          justifyContent: "space-between",
                          backgroundColor: "rgba(104, 80, 164, 1)",
                          color: "white",
                          paddingLeft: 10,
                        }}
                      >
                        <CoreText text={el.name} type={CoreTextType.large} color="white" />
                        <CoreButton
                          text="Перейти"
                          onClick={() => {
                            navigate(`${SceneManagerPath}${el._id}`);
                          }}
                          textStyle={{ color: "black", textAlign: "center" }}
                          style={{ marginRight: 10, backgroundColor: "white", width: 126 }}
                        />
                      </div>
                    ))}
                  </div>
                </div>
                <div></div>
              </div>
              <canvas ref={canvasRef} style={{ overflow: "hidden" }} />
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignContent: "center",
                  justifyContent: "space-between",
                  position: "absolute",
                  width: "100vw",
                }}
              />
              <Drawer
                title={store.titleDrawer}
                destroyOnClose={true}
                onClose={() => store.editDrawer(DrawersSceneManager.NewScene, false)}
                open={store.drawers.find((el) => el.name === DrawersSceneManager.NewScene)?.status}
              >
                <div
                  style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}
                >
                  <CoreInput
                    value={store.viewModel.name}
                    label={"Имя сцены"}
                    onChange={(text) => store.updateForm({ name: text })}
                  />

                  <div style={{ display: "flex" }}>
                    <CoreButton text="Сохранить" filled={true} onClick={() => store.createNewScene()} />
                    <div style={{ width: 10 }} />
                    <CoreButton text="Отмена" onClick={() => store.editDrawer(DrawersDataset.NewDataset, false)} />
                  </div>
                </div>
              </Drawer>
            </div>
          )}
        </>
      }
    />
  );
});