progress scene builder
This commit is contained in:
IDONTSUDO
parent
0a4eea19c5
commit
50d0c4c12b
64 changed files with 858 additions and 1315 deletions
|
|
@ -1,8 +1,16 @@
|
|||
import * as React from "react";
|
||||
import { SceneMangerStore } from "./scene_manager_store";
|
||||
import { DrawersSceneManager, SceneMangerStore, StoreMode } from "./scene_manager_store";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useParams } from "react-router-dom";
|
||||
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/";
|
||||
|
||||
|
|
@ -10,6 +18,8 @@ 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();
|
||||
|
|
@ -24,146 +34,171 @@ export const SceneManger = observer(() => {
|
|||
return (
|
||||
<MainPage
|
||||
page={"Сцена"}
|
||||
bodyChildren={
|
||||
<>
|
||||
<canvas ref={canvasRef} style={{ overflow: "hidden" }} />
|
||||
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={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
justifyContent: "space-between",
|
||||
position: "absolute",
|
||||
width: "100vw",
|
||||
width: "-webkit-fill-available",
|
||||
height: "100%",
|
||||
borderRadius: 7,
|
||||
backgroundColor: "white",
|
||||
margin: 10,
|
||||
|
||||
}}
|
||||
/>
|
||||
{/* <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" />
|
||||
>
|
||||
{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" }}
|
||||
/>
|
||||
|
||||
<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>
|
||||
)}
|
||||
{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>
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue