robossembler/webstudio
7
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

scene manger separated scene builder

Browse source
This commit is contained in:
IDONTSUDO 2024-10-01 13:43:07 +03:00
parent da883edb64
commit 15930c5f85
36 changed files with 691 additions and 608 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ui/src/core/model/point_model.ts
View file

@ -4,8 +4,8 @@ import { SceneModelsTypes } from "./scene_models_type";
import { Instance } from "./scene_asset";
import { CoreThreeRepository } from "../repository/core_three_repository";
import { Type } from "class-transformer";
import { SceneItems, SceneMangerStore } from "../../features/scene_manager/presentation/scene_manager_store";
import { Pose } from "../../features/behavior_tree_builder/presentation/ui/forms/move_to_pose/move_to_pose_robot_model";
import { SceneBuilderStore, SceneItems } from "../../features/scene_builder/presentation/scene_builder_store";
export class PointModel implements Instance {
type = SceneModelsTypes.POINT;
@ -27,7 +27,7 @@ export class PointModel implements Instance {
this.color,
this.size
);
toSceneItems = (sceneMangerStore: SceneMangerStore): SceneItems => {
toSceneItems = (sceneMangerStore: SceneBuilderStore): SceneItems => {
return {
fn: () => {},
name: this.name,

4
ui/src/core/model/robot_model.ts
View file

@ -5,7 +5,7 @@ import { Instance } from "./scene_asset";
import { CoreThreeRepository } from "../repository/core_three_repository";
import { Type } from "class-transformer";
import { URDFRobot } from "urdf-loader";
import { SceneItems, SceneMangerStore } from "../../features/scene_manager/presentation/scene_manager_store";
import { SceneBuilderStore, SceneItems } from "../../features/scene_builder/presentation/scene_builder_store";
export enum ToolTypes {
RBS_GRIPPER = "RBS_GRIPPER",
@ -48,7 +48,7 @@ export class RobotModel implements Instance {
this.jointPosition = jointPosition;
}
icon: string = "Robot";
toSceneItems = (sceneMangerStore: SceneMangerStore): SceneItems => {
toSceneItems = (sceneBuilderStore: SceneBuilderStore): SceneItems => {
return {
fn: () => {},
name: this.name,

2
ui/src/core/model/scene_asset.ts
View file

@ -9,7 +9,7 @@ import { ZoneModel } from "./zone_model";
import { CoreThreeRepository } from "../repository/core_three_repository";
import { LightModel } from "./light_model";
import { Vector3 } from "three";
import { SceneItems } from "../../features/scene_manager/presentation/scene_manager_store";
import { SceneItems } from "../../features/scene_builder/presentation/scene_builder_store";
export abstract class Instance {
type: string;

2
ui/src/core/model/solid_model.ts
View file

@ -3,8 +3,8 @@ import { SceneModelsTypes } from "./scene_models_type";
import { Instance } from "./scene_asset";
import { CoreThreeRepository } from "../repository/core_three_repository";
import { Type } from "class-transformer";
import { SceneItems } from "../../features/scene_manager/presentation/scene_manager_store";
import { Parts } from "../../features/details/details_http_repository";
import { SceneItems } from "../../features/scene_builder/presentation/scene_builder_store";
export class SolidModel implements Instance {
icon: string = "Solid";

2
ui/src/core/repository/core_three_repository.ts
View file

@ -33,13 +33,13 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TransformControls } from "three/examples/jsm/controls/TransformControls";
import { SceneMode } from "../../features/scene_manager/model/scene_view";
import { UrdfTransforms, coordsToQuaternion } from "../../features/simulations/tranforms_model";
import { SceneItems } from "../../features/scene_manager/presentation/scene_manager_store";
import { SolidModel } from "../model/solid_model";
import { Instance, SceneAsset } from "../model/scene_asset";
import { ZoneModel } from "../model/zone_model";
import { TypedEvent } from "../helper/typed_event";
import { Result } from "../helper/result";
import { RobotModel } from "../model/robot_model";
import { SceneItems } from "../../features/scene_builder/presentation/scene_builder_store";
Object3D.DEFAULT_UP = new Vector3(0, 0, 1);

5
ui/src/core/routers/routers.tsx
View file

@ -19,6 +19,7 @@ import { TopicsScreen, TopicsScreenPath } from "../../features/topics/topics_scr
import { SkillsScreen, SkillsScreenPath } from "../../features/skills/skills_screen";
import { CalculationsTemplateScreenPath } from "../../features/calculations_template/calculations_template_screen";
import { BehaviorTreeManagerScreen, BehaviorTreeManagerScreenPath } from "../../features/behavior_tree_manager/behavior_tree_manager_screen";
import { SceneBuilderScreenPath, SceneBuilderScreen } from "../../features/scene_builder/presentation/scene_builder_screen";
const idURL = ":id";
export const router = createBrowserRouter([
@ -26,6 +27,10 @@ export const router = createBrowserRouter([
path: AllProjectScreenPath,
element: <AllProjectScreen />,
},
{
path:SceneBuilderScreenPath + idURL,
element:<SceneBuilderScreen/>
},
{
path: SceneManagerPath + idURL,
element: <SceneManger />,

6
ui/src/features/scene_builder/data/scene_builder_repository.ts Normal file
View file

@ -0,0 +1,6 @@
import { SceneAsset } from "../../../core/model/scene_asset";
import { CoreHttpRepository, HttpMethod } from "../../../core/repository/core_http_repository";
export class SceneBuilderHttpRepository extends CoreHttpRepository {
editScene = (scene: SceneAsset) => this._jsonRequest(HttpMethod.PUT, "/scenes", scene);
}

10
ui/src/features/scene_manager/presentation/forms/camera/camera_form.tsx → ui/src/features/scene_builder/forms/camera/camera_form.tsx
View file

@ -1,12 +1,12 @@
import React from "react";
import { CoreButton } from "../../../../../core/ui/button/button";
import { CoreButton } from "../../../../core/ui/button/button";
import { IDefaultSceneManagerFormProps, isPreviewMode } from "../scene_manager_forms";
import { CoreInput } from "../../../../../core/ui/input/input";
import { CoreText, CoreTextType } from "../../../../../core/ui/text/text";
import { CoreSelect } from "../../../../../core/ui/select/select";
import { CoreInput } from "../../../../core/ui/input/input";
import { CoreText, CoreTextType } from "../../../../core/ui/text/text";
import { CoreSelect } from "../../../../core/ui/select/select";
import { CameraFormStore } from "./camera_store";
import { observer } from "mobx-react-lite";
import { CameraTypes } from "../../../../../core/model/camera_model";
import { CameraTypes } from "../../../../core/model/camera_model";
export const CameraForm = observer((props: IDefaultSceneManagerFormProps) => {
const [store] = React.useState(() => new CameraFormStore(props.store));

26
ui/src/features/scene_manager/presentation/forms/camera/camera_store.tsx → ui/src/features/scene_builder/forms/camera/camera_store.tsx
View file

@ -1,39 +1,39 @@
import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { SceneMangerStore } from "../../scene_manager_store";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { isPreviewMode } from "../scene_manager_forms";
import { CameraModel } from "../../../../../core/model/camera_model";
import { CameraModel } from "../../../../core/model/camera_model";
import { message } from "antd";
import { SceneBuilderStore } from "../../presentation/scene_builder_store";
export class CameraFormStore extends FormState<CameraModel, CoreError> {
viewModel: CameraModel = CameraModel.empty();
sceneMangerStore: SceneMangerStore;
sceneBuilderStore: SceneBuilderStore;
type?: string;
constructor(sceneMangerStore: SceneMangerStore) {
constructor(sceneBuilderStore: SceneBuilderStore) {
super();
makeAutoObservable(this);
this.sceneMangerStore = sceneMangerStore;
this.sceneBuilderStore = sceneBuilderStore;
}
errorHandingStrategy = (error: CoreError) => {};
updateCameraScene = () =>
this.type?.isNotEmptyR().map(() => this.viewModel.toWebGl(this.sceneMangerStore.coreThreeRepository!));
this.type?.isNotEmptyR().map(() => this.viewModel.toWebGl(this.sceneBuilderStore.coreThreeRepository!));
clickNewCamera = () =>
this.viewModel.validate().fold(
(model) => {
this.sceneMangerStore.addNewCamera(model);
this.sceneMangerStore.activeFormType = undefined;
this.sceneMangerStore.visibleSaveButton()
this.sceneBuilderStore.addNewCamera(model);
this.sceneBuilderStore.activeFormType = undefined;
this.sceneBuilderStore.visibleSaveButton()
},
(error) => message.error(error)
);
init = async (navigate?: NavigateFunction | undefined) => {
isPreviewMode(this.sceneMangerStore.activeFormDependency).map(() =>
this.sceneMangerStore.scene
.rFind<CameraModel>((el) => el.name.isEqual(this.sceneMangerStore.selectedItemName ?? ""))
isPreviewMode(this.sceneBuilderStore.activeFormDependency).map(() =>
this.sceneBuilderStore.scene
.rFind<CameraModel>((el) => el.name.isEqual(this.sceneBuilderStore.selectedItemName ?? ""))
.fold(
(cameraModel) => {
this.loadDependency(cameraModel);

0
ui/src/features/scene_manager/presentation/forms/light/light_form.tsx → ui/src/features/scene_builder/forms/light/light_form.tsx
View file

4
ui/src/features/scene_manager/presentation/forms/light/light_store.tsx → ui/src/features/scene_builder/forms/light/light_store.tsx
View file

@ -1,6 +1,6 @@
import { NavigateFunction } from "react-router-dom";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { LightModel } from "../../../../../core/model/light_model";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { LightModel } from "../../../../core/model/light_model";
export class LightStore extends FormState<LightModel, CoreError> {
viewModel: LightModel = LightModel.empty();

10
ui/src/features/scene_manager/presentation/forms/point/point_form.tsx → ui/src/features/scene_builder/forms/point/point_form.tsx
View file

@ -2,12 +2,12 @@ import React from "react";
import { observer } from "mobx-react-lite";
import { PointStore, PointStoreType } from "./point_store";
import { IDefaultSceneManagerFormProps } from "../scene_manager_forms";
import { CoreText, CoreTextType } from "../../../../../core/ui/text/text";
import { CoreInput } from "../../../../../core/ui/input/input";
import { CoreButton } from "../../../../../core/ui/button/button";
import { CoreText, CoreTextType } from "../../../../core/ui/text/text";
import { CoreInput } from "../../../../core/ui/input/input";
import { CoreButton } from "../../../../core/ui/button/button";
import { match } from "ts-pattern";
import { SpawnPositionTypesForm } from "../../components/spawn_position_types";
import { CoordsForm } from "../../components/coords_form";
import { SpawnPositionTypesForm } from "../../presentation/components/spawn_position_types";
import { CoordsForm } from "../../presentation/components/coords_form";
export const PointForm = observer((props: IDefaultSceneManagerFormProps) => {
const [store] = React.useState(() => new PointStore(props.store));

38
ui/src/features/scene_manager/presentation/forms/point/point_store.ts → ui/src/features/scene_builder/forms/point/point_store.ts
View file

@ -1,10 +1,10 @@
import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { PointModel } from "../../../../../core/model/point_model";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { SpawnPositionTypes } from "../../../../../core/model/spawn_position_types";
import { PointModel } from "../../../../core/model/point_model";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { SpawnPositionTypes } from "../../../../core/model/spawn_position_types";
import { isPreviewMode } from "../scene_manager_forms";
import { SceneMangerStore } from "../../scene_manager_store";
import { SceneBuilderStore } from "../../presentation/scene_builder_store";
export enum PointStoreType {
makeSceneSolidAndEditPosition = "makeSceneSolidAndEditPosition",
@ -17,26 +17,26 @@ export class PointStore extends FormState<PointModel, CoreError> {
viewModel: PointModel = PointModel.empty();
storeType: PointStoreType = PointStoreType.initNewPoint;
spawnPositionTypes: SpawnPositionTypes;
sceneMangerStore: SceneMangerStore;
sceneBuilderStore: SceneBuilderStore;
listener: Function;
constructor(sceneMangerStore: SceneMangerStore) {
constructor(sceneBuilderStore: SceneBuilderStore) {
super();
makeAutoObservable(this);
this.sceneMangerStore = sceneMangerStore;
this.sceneBuilderStore = sceneBuilderStore;
}
clickLister = (event: MouseEvent) =>
this.storeType.isEqualR(PointStoreType.awaitClick).map(() =>
this.sceneMangerStore!.clickScene(event, this.sceneMangerStore!.canvasOffsetX).map((vector3) => {
this.sceneBuilderStore!.clickScene(event, this.sceneBuilderStore!.canvasOffsetX).map((vector3) => {
this.viewModel.position = vector3;
this.viewModel.orientation = [0, 0, 0, 1];
this.viewModel.toWebGl(this.sceneMangerStore.coreThreeRepository!);
this.sceneMangerStore.activeFormType = undefined;
this.sceneMangerStore.sceneItems.push(this.viewModel.toSceneItems(this.sceneMangerStore));
this.sceneMangerStore.scene.push(this.viewModel);
this.viewModel.toWebGl(this.sceneBuilderStore.coreThreeRepository!);
this.sceneBuilderStore.activeFormType = undefined;
this.sceneBuilderStore.sceneItems.push(this.viewModel.toSceneItems(this.sceneBuilderStore));
this.sceneBuilderStore.scene.push(this.viewModel);
window.removeEventListener("click", this.clickLister);
this.sceneMangerStore.visibleSaveButton();
this.sceneBuilderStore.visibleSaveButton();
})
);
@ -49,14 +49,14 @@ export class PointStore extends FormState<PointModel, CoreError> {
updateWebGl = () =>
this.storeType
.isEqualR(PointStoreType.previewPoint)
.map(() => this.sceneMangerStore.coreThreeRepository!.updateInstance(this.viewModel));
.map(() => this.sceneBuilderStore.coreThreeRepository!.updateInstance(this.viewModel));
onClickNext = (pointStoreType: PointStoreType) => (this.storeType = pointStoreType);
errorHandingStrategy = (error: CoreError) => {};
init = async (navigate?: NavigateFunction | undefined) =>
isPreviewMode(this.sceneMangerStore.activeFormDependency).map(() =>
this.sceneMangerStore.scene
.rFind<PointModel>((el) => el.name.isEqual(this.sceneMangerStore.selectedItemName ?? ""))
isPreviewMode(this.sceneBuilderStore.activeFormDependency).map(() =>
this.sceneBuilderStore.scene
.rFind<PointModel>((el) => el.name.isEqual(this.sceneBuilderStore.selectedItemName ?? ""))
.fold(
(solidBodyModel) => {
this.loadDependency(solidBodyModel);
@ -64,8 +64,8 @@ export class PointStore extends FormState<PointModel, CoreError> {
},
() =>
console.log(
`Unknown FormType ${this.sceneMangerStore.selectedItemName} : ${JSON.stringify(
this.sceneMangerStore.scene
`Unknown FormType ${this.sceneBuilderStore.selectedItemName} : ${JSON.stringify(
this.sceneBuilderStore.scene
)}`
)
)

16
ui/src/features/scene_manager/presentation/forms/robot_form/robot_form.tsx → ui/src/features/scene_builder/forms/robot_form/robot_form.tsx
View file

@ -2,15 +2,15 @@ import React from "react";
import { observer } from "mobx-react-lite";
import { RobotFormStore, RobotStoreType } from "./robot_form_store";
import { IDefaultSceneManagerFormProps } from "../scene_manager_forms";
import { CoreText, CoreTextType } from "../../../../../core/ui/text/text";
import { CoreInputNumber } from "../../../../../core/ui/inputNumber/input_number";
import { CoreInput, CoreInputType } from "../../../../../core/ui/input/input";
import { CoreText, CoreTextType } from "../../../../core/ui/text/text";
import { CoreInputNumber } from "../../../../core/ui/inputNumber/input_number";
import { CoreInput, CoreInputType } from "../../../../core/ui/input/input";
import { match } from "ts-pattern";
import { CoreSelect } from "../../../../../core/ui/select/select";
import { ToolTypes } from "../../../../../core/model/robot_model";
import { CoreButton } from "../../../../../core/ui/button/button";
import { SpawnPositionTypesForm } from "../../components/spawn_position_types";
import { CoordsForm } from "../../components/coords_form";
import { CoreSelect } from "../../../../core/ui/select/select";
import { ToolTypes } from "../../../../core/model/robot_model";
import { CoreButton } from "../../../../core/ui/button/button";
import { SpawnPositionTypesForm } from "../../presentation/components/spawn_position_types";
import { CoordsForm } from "../../presentation/components/coords_form";
export const RobotForm = observer((props: IDefaultSceneManagerFormProps) => {
const [store] = React.useState(() => new RobotFormStore(props.store));

4
ui/src/features/scene_manager/presentation/forms/robot_form/robot_form_http_repository.ts → ui/src/features/scene_builder/forms/robot_form/robot_form_http_repository.ts
View file

@ -1,5 +1,5 @@
import { RobotModel } from "../../../../../core/model/robot_model";
import { HttpMethod, HttpRepository } from "../../../../../core/repository/core_http_repository";
import { RobotModel } from "../../../../core/model/robot_model";
import { HttpMethod, HttpRepository } from "../../../../core/repository/core_http_repository";
export interface RobotURL {
robotUrl: string;
}

38
ui/src/features/scene_manager/presentation/forms/robot_form/robot_form_store.ts → ui/src/features/scene_builder/forms/robot_form/robot_form_store.ts
View file

@ -1,11 +1,11 @@
import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { RobotFormHttpRepository } from "./robot_form_http_repository";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { RobotModel } from "../../../../../core/model/robot_model";
import { SceneMangerStore } from "../../scene_manager_store";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { RobotModel } from "../../../../core/model/robot_model";
import { isPreviewMode } from "../scene_manager_forms";
import { message } from "antd";
import { SceneBuilderStore } from "../../presentation/scene_builder_store";
export enum RobotStoreType {
previewRobot = "previewRobot",
@ -14,7 +14,7 @@ export enum RobotStoreType {
awaitMouseClick = "awaitMouseClick",
}
export class RobotFormStore extends FormState<RobotModel, CoreError> {
sceneMangerStore: SceneMangerStore;
sceneBuilderStore: SceneBuilderStore;
storeType: RobotStoreType = RobotStoreType.initNewRobot;
viewModel: RobotModel = RobotModel.empty();
robotFormHttpRepository: RobotFormHttpRepository = new RobotFormHttpRepository();
@ -22,14 +22,14 @@ export class RobotFormStore extends FormState<RobotModel, CoreError> {
listener: Function;
clickLister = (event: MouseEvent) =>
this.storeType.isEqualR(RobotStoreType.awaitMouseClick).map(() =>
this.sceneMangerStore!.clickScene(event, this.sceneMangerStore!.canvasOffsetX).map((vector3) => {
this.sceneBuilderStore!.clickScene(event, this.sceneBuilderStore!.canvasOffsetX).map((vector3) => {
this.viewModel.position = vector3;
this.viewModel.toWebGl(this.sceneMangerStore.coreThreeRepository!);
this.sceneMangerStore.activeFormType = undefined;
this.sceneMangerStore.sceneItems.push(this.viewModel.toSceneItems(this.sceneMangerStore));
this.sceneMangerStore.scene.push(this.viewModel);
this.viewModel.toWebGl(this.sceneBuilderStore.coreThreeRepository!);
this.sceneBuilderStore.activeFormType = undefined;
this.sceneBuilderStore.sceneItems.push(this.viewModel.toSceneItems(this.sceneBuilderStore));
this.sceneBuilderStore.scene.push(this.viewModel);
window.removeEventListener("click", this.clickLister);
this.sceneMangerStore.visibleSaveButton();
this.sceneBuilderStore.visibleSaveButton();
})
);
@ -41,18 +41,18 @@ export class RobotFormStore extends FormState<RobotModel, CoreError> {
dispose = (): void => {
window.removeEventListener("click", this.clickLister);
};
constructor(sceneMangerStore: SceneMangerStore) {
constructor(sceneBuilderStore: SceneBuilderStore) {
super();
makeAutoObservable(this);
this.sceneMangerStore = sceneMangerStore;
this.sceneBuilderStore = sceneBuilderStore;
}
updateScene = () =>
this.storeType
.isEqualR(RobotStoreType.previewRobot)
.map(
() => (
this.viewModel.update(this.sceneMangerStore.coreThreeRepository!),
this.sceneMangerStore.visibleSaveButton()
this.viewModel.update(this.sceneBuilderStore.coreThreeRepository!),
this.sceneBuilderStore.visibleSaveButton()
)
);
createNewRobot = () =>
@ -71,9 +71,9 @@ export class RobotFormStore extends FormState<RobotModel, CoreError> {
);
errorHandingStrategy = (error: CoreError) => {};
init = async (navigate?: NavigateFunction | undefined) =>
isPreviewMode(this.sceneMangerStore.activeFormDependency).map(() =>
this.sceneMangerStore.scene
.rFind<RobotModel>((el) => el.name.isEqual(this.sceneMangerStore.selectedItemName ?? ""))
isPreviewMode(this.sceneBuilderStore.activeFormDependency).map(() =>
this.sceneBuilderStore.scene
.rFind<RobotModel>((el) => el.name.isEqual(this.sceneBuilderStore.selectedItemName ?? ""))
.fold(
(solidBodyModel) => {
this.loadDependency(solidBodyModel);
@ -81,8 +81,8 @@ export class RobotFormStore extends FormState<RobotModel, CoreError> {
},
() =>
console.log(
`Unknown FormType ${this.sceneMangerStore.selectedItemName} : ${JSON.stringify(
this.sceneMangerStore.scene
`Unknown FormType ${this.sceneBuilderStore.selectedItemName} : ${JSON.stringify(
this.sceneBuilderStore.scene
)}`
)
)

9
ui/src/features/scene_manager/presentation/forms/scene_manager_forms.tsx → ui/src/features/scene_builder/forms/scene_manager_forms.tsx
View file

@ -1,5 +1,6 @@
import { Result } from "../../../../core/helper/result";
import { SceneMangerStore } from "../scene_manager_store";
import { Result } from "../../../core/helper/result";
import { SceneBuilderStore } from "../presentation/scene_builder_store";
import { SceneMangerStore } from "../../scene_manager/presentation/scene_manager_store";
import { CameraForm } from "./camera/camera_form";
import { LightForm } from "./light/light_form";
import { PointForm } from "./point/point_form";
@ -25,13 +26,13 @@ interface IForms {
}
export interface IDefaultSceneManagerFormProps {
dependency: Object;
store: SceneMangerStore;
store: SceneBuilderStore;
}
export const isPreviewMode = (dependency: Object): Result<void, void> => {
if (Object.hasOwn(dependency, "type")) return Result.ok();
return Result.error(undefined);
};
export const sceneManagerForms = (props: Object, store: SceneMangerStore): IForms[] => [
export const sceneManagerForms = (props: Object, store: SceneBuilderStore): IForms[] => [
{ name: SceneManagerForms.camera, component: <CameraForm dependency={props} store={store} /> },
{ name: SceneManagerForms.robot, component: <RobotForm dependency={props} store={store} /> },
{ name: SceneManagerForms.solidBody, component: <SolidBodyForm dependency={props} store={store} /> },

10
ui/src/features/scene_manager/presentation/forms/solid_body/solid_body_form.tsx → ui/src/features/scene_builder/forms/solid_body/solid_body_form.tsx
View file

@ -1,13 +1,13 @@
import React from "react";
import { CoreText, CoreTextType } from "../../../../../core/ui/text/text";
import { CoreText, CoreTextType } from "../../../../core/ui/text/text";
import { IDefaultSceneManagerFormProps } from "../scene_manager_forms";
import { SolidBodyStore, SolidBodyStoreType } from "./solid_body_store";
import { observer } from "mobx-react-lite";
import { CoreButton } from "../../../../../core/ui/button/button";
import { CoreButton } from "../../../../core/ui/button/button";
import { match } from "ts-pattern";
import { SpawnPositionTypesForm } from "../../components/spawn_position_types";
import { CoreInput } from "../../../../../core/ui/input/input";
import { CoordsForm } from "../../components/coords_form";
import { SpawnPositionTypesForm } from "../../presentation/components/spawn_position_types";
import { CoreInput } from "../../../../core/ui/input/input";
import { CoordsForm } from "../../presentation/components/coords_form";
export const SolidBodyForm = observer((props: IDefaultSceneManagerFormProps) => {
const [store] = React.useState(() => new SolidBodyStore(props.store));

42
ui/src/features/scene_manager/presentation/forms/solid_body/solid_body_store.tsx → ui/src/features/scene_builder/forms/solid_body/solid_body_store.tsx
View file

@ -1,12 +1,12 @@
import makeAutoObservable from "mobx-store-inheritance";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { CoreHttpRepository } from "../../../../../core/repository/core_http_repository";
import { Parts } from "../../../../details/details_http_repository";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { CoreHttpRepository } from "../../../../core/repository/core_http_repository";
import { Parts } from "../../../details/details_http_repository";
import { Vector2 } from "three";
import { SceneMangerStore } from "../../scene_manager_store";
import { SpawnPositionTypes } from "../../../../../core/model/spawn_position_types";
import { SpawnPositionTypes } from "../../../../core/model/spawn_position_types";
import { isPreviewMode } from "../scene_manager_forms";
import { SolidModel } from "../../../../../core/model/solid_model";
import { SolidModel } from "../../../../core/model/solid_model";
import { SceneBuilderStore } from "../../presentation/scene_builder_store";
export enum SolidBodyStoreType {
selectBody = "selectBody",
@ -23,18 +23,18 @@ export class SolidBodyStore extends FormState<SolidModel, CoreError> {
solidBodyStoreType: SolidBodyStoreType = SolidBodyStoreType.selectBody;
selectBody: Parts;
spawnType: string;
sceneMangerStore: SceneMangerStore;
sceneBuilderStore: SceneBuilderStore;
vector2d?: Vector2;
constructor(sceneMangerStore: SceneMangerStore) {
constructor(sceneBuilderStore: SceneBuilderStore) {
super();
this.sceneMangerStore = sceneMangerStore;
this.sceneBuilderStore = sceneBuilderStore;
makeAutoObservable(this);
}
init = async () => {
isPreviewMode(this.sceneMangerStore.activeFormDependency).map(() =>
this.sceneMangerStore.scene
.rFind<SolidModel>((el) => el.name.isEqual(this.sceneMangerStore.selectedItemName ?? ""))
isPreviewMode(this.sceneBuilderStore.activeFormDependency).map(() =>
this.sceneBuilderStore.scene
.rFind<SolidModel>((el) => el.name.isEqual(this.sceneBuilderStore.selectedItemName ?? ""))
.fold(
(solidBodyModel) => {
this.loadDependency(solidBodyModel);
@ -42,8 +42,8 @@ export class SolidBodyStore extends FormState<SolidModel, CoreError> {
},
() =>
console.log(
`Unknown FormType ${this.sceneMangerStore.selectedItemName} : ${JSON.stringify(
this.sceneMangerStore.scene
`Unknown FormType ${this.sceneBuilderStore.selectedItemName} : ${JSON.stringify(
this.sceneBuilderStore.scene
)}`
)
)
@ -62,21 +62,21 @@ export class SolidBodyStore extends FormState<SolidModel, CoreError> {
};
clickLister = (event: MouseEvent) =>
this.solidBodyStoreType.isEqualR(SolidBodyStoreType.spawn2DVector).map(() =>
this.sceneMangerStore!.clickScene(event, this.sceneMangerStore!.canvasOffsetX).map((vector3) => {
this.sceneBuilderStore!.clickScene(event, this.sceneBuilderStore!.canvasOffsetX).map((vector3) => {
this.viewModel.position = vector3;
this.viewModel.spawnType = "BoundBox";
this.viewModel.toWebGl(this.sceneMangerStore.coreThreeRepository!);
this.sceneMangerStore.sceneItems.push(this.viewModel.toSceneItems());
this.sceneMangerStore.scene.push(this.viewModel);
this.viewModel.toWebGl(this.sceneBuilderStore.coreThreeRepository!);
this.sceneBuilderStore.sceneItems.push(this.viewModel.toSceneItems());
this.sceneBuilderStore.scene.push(this.viewModel);
window.removeEventListener("click", this.clickLister);
this.sceneMangerStore.activeFormType = undefined;
this.sceneMangerStore.visibleSaveButton()
this.sceneBuilderStore.activeFormType = undefined;
this.sceneBuilderStore.visibleSaveButton()
})
);
updateBodySimulation = () =>
this.solidBodyStoreType
.isEqualR(SolidBodyStoreType.previewSolid)
.map(() => this.viewModel.update(this.sceneMangerStore.coreThreeRepository!));
.map(() => this.viewModel.update(this.sceneBuilderStore.coreThreeRepository!));
clickSelectBody = (el: Parts) => {
this.selectBody = el;
this.solidBodyStoreType = SolidBodyStoreType.selectSpawnPositionType;

0
ui/src/features/scene_manager/presentation/forms/trajectory/trajectory_form.tsx → ui/src/features/scene_builder/forms/trajectory/trajectory_form.tsx
View file

3
ui/src/features/scene_builder/forms/trajectory/trajectory_http_repository.ts Normal file
View file

@ -0,0 +1,3 @@
import { HttpRepository } from "../../../../core/repository/core_http_repository";
export class TrajectoryHttpRepository extends HttpRepository {}

2
ui/src/features/scene_manager/presentation/forms/trajectory/trajectory_store.ts → ui/src/features/scene_builder/forms/trajectory/trajectory_store.ts
View file

@ -2,7 +2,7 @@ import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { TrajectoryViewModel } from "./trajectory_view_model";
import { TrajectoryHttpRepository } from "./trajectory_http_repository";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { FormState, CoreError } from "../../../../core/store/base_store";
export class TrajectoryStore extends FormState<TrajectoryViewModel, CoreError> {
constructor() {

2
ui/src/features/scene_manager/presentation/forms/trajectory/trajectory_view_model.ts → ui/src/features/scene_builder/forms/trajectory/trajectory_view_model.ts
View file

@ -1,4 +1,4 @@
import { Result } from "../../../../../core/helper/result";
import { Result } from "../../../../core/helper/result";
export class TrajectoryViewModel {

4
ui/src/features/scene_manager/presentation/forms/zone/zone_form.tsx → ui/src/features/scene_builder/forms/zone/zone_form.tsx
View file

@ -2,8 +2,8 @@ import React from "react";
import { observer } from "mobx-react-lite";
import { ZoneStore } from "./zone_store";
import { IDefaultSceneManagerFormProps } from "../scene_manager_forms";
import { CoreText, CoreTextType } from "../../../../../core/ui/text/text";
import { CoreInput } from "../../../../../core/ui/input/input";
import { CoreText, CoreTextType } from "../../../../core/ui/text/text";
import { CoreInput } from "../../../../core/ui/input/input";
export const ZoneForm = observer((props: IDefaultSceneManagerFormProps) => {
const [store] = React.useState(() => new ZoneStore(props.store));

44
ui/src/features/scene_builder/forms/zone/zone_store.ts Normal file
View file

@ -0,0 +1,44 @@
import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { ZoneModel } from "../../../../core/model/zone_model";
import { FormState, CoreError } from "../../../../core/store/base_store";
import { isPreviewMode } from "../scene_manager_forms";
import { SceneMangerStore } from "../../../scene_manager/presentation/scene_manager_store";
import { SceneBuilderStore } from "../../presentation/scene_builder_store";
export enum ZoneStoreType {
preview = "preview",
}
export class ZoneStore extends FormState<ZoneModel, CoreError> {
constructor(sceneBuilderStore: SceneBuilderStore) {
super();
this.sceneBuilderStore = sceneBuilderStore;
makeAutoObservable(this);
}
storeType: ZoneStoreType;
sceneBuilderStore: SceneBuilderStore;
viewModel: ZoneModel = ZoneModel.empty();
errorHandingStrategy = (_error: CoreError) => {};
init = async (_navigate?: NavigateFunction | undefined) => {
isPreviewMode(this.sceneBuilderStore.activeFormDependency).map(() =>
this.sceneBuilderStore.scene
.rFind<ZoneModel>((el) => el.name.isEqual(this.sceneBuilderStore.selectedItemName ?? ""))
.fold(
(zoneModel) => {
this.loadDependency(zoneModel);
this.storeType = ZoneStoreType.preview;
},
() =>
console.log(
`Unknown FormType ${this.sceneBuilderStore.selectedItemName} : ${JSON.stringify(
this.sceneBuilderStore.scene
)}`
)
)
);
};
updateWebGl = () =>
this.storeType
.isEqualR(ZoneStoreType.preview)
.map(() => this.sceneBuilderStore.coreThreeRepository!.updateInstance(this.viewModel));
}

0
ui/src/features/scene_manager/presentation/components/coords_form.tsx → ui/src/features/scene_builder/presentation/components/coords_form.tsx
View file

0
ui/src/features/scene_manager/presentation/components/scene_menu.tsx → ui/src/features/scene_builder/presentation/components/scene_menu.tsx
View file

0
ui/src/features/scene_manager/presentation/components/scene_widget.tsx → ui/src/features/scene_builder/presentation/components/scene_widget.tsx
View file

0
ui/src/features/scene_manager/presentation/components/spawn_position_types.tsx → ui/src/features/scene_builder/presentation/components/spawn_position_types.tsx
View file

167
ui/src/features/scene_builder/presentation/scene_builder_screen.tsx Normal file
View file

@ -0,0 +1,167 @@
import React from "react";
import { observer } from "mobx-react-lite";
import { SceneBuilderStore } from "./scene_builder_store";
import { useStore } from "../../../core/helper/use_store";
import { useParams } from "react-router-dom";
import { Popover } from "antd";
import { CoreButton } from "../../../core/ui/button/button";
import { Icon } from "../../../core/ui/icons/icons";
import { MainPage } from "../../../core/ui/pages/main_page";
import { CoreText, CoreTextType } from "../../../core/ui/text/text";
import { SceneMode } from "../../scene_manager/model/scene_view";
import { sceneManagerForms } from "../forms/scene_manager_forms";
export const SceneBuilderScreenPath = "/scene/builder/";
export const SceneBuilderScreen = observer(() => {
const store = useStore(SceneBuilderStore);
const canvasRef = React.useRef<HTMLCanvasElement>(null);
const id = useParams().id as string;
store.initParam(id);
React.useEffect(() => {
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 key={i} onClick={() => el.fn()}>
<CoreText text={el.name} type={CoreTextType.medium} color="white" />
</div>
))}
</div>
}
>
<span>
<CoreButton text="Добавить" filled={true} />
</span>
</Popover>
<div style={{ position: "relative" }}>
<div style={{ position: "absolute" }}>
<div style={{ position: "relative", left: 20 }}>
{store.sceneHelperInstruments.map((el, i) => (
<div
key={i}
onClick={() => el.onClick()}
style={{
marginTop: 4,
width: 50,
height: 50,
backgroundColor: el.isSelected ? "rgba(160, 132, 255, 1)" : "rgba(99, 81, 159, 1)",
border: "1px solid",
borderRadius: 5,
}}
>
<Icon type={el.icon} />
</div>
))}
{store.isVisibleSaveButton ? (
<>
<div
onClick={() => store.sceneSave()}
style={{
marginTop: 4,
width: 50,
height: 50,
backgroundColor: "rgba(99, 81, 159, 1)",
border: "1px solid",
borderRadius: 5,
}}
>
<Icon type={SceneMode.Save} />
</div>
</>
) : null}
</div>
</div>
</div>
</div>
<div style={{ height: 10 }} />
<div
style={{
borderRadius: 7,
height: 200,
width: "-webkit-fill-available",
backgroundColor: "white",
overflowX: "auto",
}}
>
{store.sceneItems.map((el, index) => (
<div
key={index}
style={{
display: "flex",
backgroundColor: el.isSelected
? "rgba(104, 80, 164, 0.47)"
: index.isEven()
? "rgba(217, 217, 217, 0.27)"
: "",
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
}}
onClick={() => store.selectSceneItems(el.name, index, !el.isSelected, el.icon)}
>
<Icon width={13} height={13} type={el.icon} style={{ marginLeft: 10 }} />
<div style={{ width: 10 }} />
<CoreText text={el.name} type={CoreTextType.small} />
<Icon
type="DeleteCircle"
width={13}
isNeedStopPropagation={true}
height={13}
onClick={() => store.deleteSceneItem(el)}
style={{ marginRight: 10 }}
/>
</div>
))}
</div>
</div>
<div style={{ height: 20 }} />
<div
style={{
width: "-webkit-fill-available",
height: "60%",
borderRadius: 7,
backgroundColor: "white",
margin: 10,
}}
>
{sceneManagerForms(store.activeFormDependency ?? {}, store).map((el, i) =>
el.name.isEqualR(store.activeFormType ?? "").fold(
() => <span key={i}>{el.component}</span>,
() => <span key={i}></span>
)
)}
</div>
</div>
</>
}
bodyChildren={
<>
<>
<canvas ref={canvasRef} style={{ overflow: "hidden" }} />
</>
</>
}
/>
);
});

262
ui/src/features/scene_builder/presentation/scene_builder_store.ts Normal file
View file

@ -0,0 +1,262 @@
import { message } from "antd";
import makeAutoObservable from "mobx-store-inheritance";
import { Vector2, Vector3, Object3D } from "three";
import { CameraModel } from "../../../core/model/camera_model";
import { PointModel } from "../../../core/model/point_model";
import { RobotModel } from "../../../core/model/robot_model";
import { SceneAsset, Instance } from "../../../core/model/scene_asset";
import { SolidModel } from "../../../core/model/solid_model";
import { UiBaseError } from "../../../core/model/ui_base_error";
import { ZoneModel } from "../../../core/model/zone_model";
import { HttpError } from "../../../core/repository/core_http_repository";
import { CoreThreeRepository } from "../../../core/repository/core_three_repository";
import { SceneModel } from "../../scene_manager/model/scene_model";
import { SceneMode } from "../../scene_manager/model/scene_view";
import { SceneViewModel } from "../../scene_manager/model/scene_view_model";
import { SceneManagerForms } from "../forms/scene_manager_forms";
import { FormState } from "../../../core/store/base_store";
import { Result } from "../../../core/helper/result";
import { SceneBuilderHttpRepository } from "../data/scene_builder_repository";
import { SceneModelsTypes } from "../../../core/model/scene_models_type";
export enum StoreMode {
sceneInstance = "sceneInstance",
allScenes = "allScenes",
}
export interface ISpawnHelper {
url: string;
spawn: SceneModelsTypes;
name: string;
isFinished: boolean;
type: string;
}
export interface IPopoverItem {
name: string;
fn: Function;
}
export interface SceneItems {
fn: Function;
name: string;
isSelected: boolean;
icon: string;
}
export class SceneBuilderStore extends FormState<SceneViewModel, HttpError> {
activeFormType?: string;
activeSceneId: string = "";
selectedItemName?: string;
activeFormDependency: Object = {};
viewModel: SceneViewModel = SceneViewModel.empty();
sceneMode: SceneMode;
sceneItems: SceneItems[] = [];
isVisibleSaveButton: boolean = false;
coreThreeRepository: null | CoreThreeRepository = null;
sceneBuilderHttpRepository: SceneBuilderHttpRepository;
isSceneMenuShow = false;
robossemblerAssets?: SceneAsset;
objectForMagnetism: string;
objectMagnetism: string;
scenes: SceneModel[] = [];
canvasRef?: HTMLCanvasElement;
mousePosition?: Vector2;
spawnHelper?: ISpawnHelper;
selectSceneObject?: Object;
isLoadingForm: boolean = false;
scene: (Instance | SolidModel | CameraModel | RobotModel | PointModel | ZoneModel)[] = [];
sceneHelperInstruments: {
icon: string;
onClick: Function;
isSelected: boolean;
}[] = [
{ icon: SceneMode.Select, onClick: () => this.setMode(SceneMode.Select), isSelected: false },
{ icon: SceneMode.Move, onClick: () => this.setMode(SceneMode.Move), isSelected: false },
{ icon: SceneMode.Rotate, onClick: () => this.setMode(SceneMode.Rotate), isSelected: false },
];
popoverItems: IPopoverItem[] = [
{ name: "Камера", fn: () => this.createNewForm(SceneManagerForms.camera, true) },
{ name: "Твердое тело", fn: () => this.createNewForm(SceneManagerForms.solidBody, true) },
{ name: "Источник света", fn: () => this.createNewForm(SceneManagerForms.light, true) },
{ name: "Робот", fn: () => this.createNewForm(SceneManagerForms.robot, true) },
{ name: "Точка", fn: () => this.createNewForm(SceneManagerForms.point, true) },
{ name: "Траектория", fn: () => this.createNewForm(SceneManagerForms.trajectory, true) },
{ name: "Зона", fn: () => this.createNewForm(SceneManagerForms.zone, true) },
{ name: "Точки захвата", fn: () => this.createNewForm(SceneManagerForms.capturePoints, true) },
];
canvasOffsetX?: number;
sceneName?: string;
constructor() {
super();
makeAutoObservable(this);
this.sceneBuilderHttpRepository = new SceneBuilderHttpRepository();
this.sceneMode = SceneMode.Select;
}
sceneSave = () =>
this.messageHttp(this.sceneBuilderHttpRepository.editScene(SceneAsset.newScene(this.scene, this.sceneName ?? "")), {
successMessage: "Сцена сохранена",
}).then(() => (this.isVisibleSaveButton = false));
iconToSceneManagerForm = (icon: string): SceneManagerForms => {
if (icon.isEqual("Camera")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.camera;
}
if (icon.isEqual("Zone")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.zone;
}
if (icon.isEqual("Robot")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.robot;
}
if (icon.isEqual("Point")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.point;
}
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.solidBody;
};
selectSceneItems = (name: string, index: number, selected: boolean, icon: string) => {
this.sceneItems.map((el) => {
el.isSelected = false;
return el;
});
this.sceneItems.map((el, i) => i.isEqualR(index).map(() => (el.isSelected = selected)));
if (selected) {
this.createNewForm(this.iconToSceneManagerForm(icon));
this.selectedItemName = name;
}
if (!selected) {
this.createNewForm(undefined);
this.selectedItemName = undefined;
}
};
setMode = (mode: SceneMode) => {
this.sceneHelperInstruments.map((el) => {
el.isSelected = false;
el.icon.isEqualR(mode).map(() => (el.isSelected = true));
return el;
});
this.sceneMode = mode;
this.coreThreeRepository?.setTransformMode(this.sceneMode);
};
createNewForm = (formType: SceneManagerForms | undefined, isNeedClearDependency?: boolean) => {
this.activeFormDependency = Object.assign(this.activeFormDependency, { store: this });
if (isNeedClearDependency) this.activeFormDependency = { store: this };
this.activeFormType = formType;
};
deleteSceneItem = (item: SceneItems) => {
this.sceneItems = this.sceneItems.filter((el) => !el.name.isEqual(item.name));
this.coreThreeRepository?.deleteSceneItem(item);
this.visibleSaveButton();
};
visibleSaveButton = () => {
this.isVisibleSaveButton = true;
};
addNewCamera = (model: CameraModel) => {
model.position = this.coreThreeRepository!.camera.position;
model.orientation = this.coreThreeRepository!.camera.quaternion.toArray();
model.aspect = this.coreThreeRepository!.camera.aspect;
this.sceneItems.push({ name: model.name, icon: "Camera", fn: () => {}, isSelected: false });
this.scene.push(model);
model.toWebGl(this.coreThreeRepository!);
this.visibleSaveButton();
};
hiddenMenu = () => (this.isSceneMenuShow = false);
init = async () => {};
initParam = (id: string | undefined) => {
if (id) this.activeSceneId = id;
};
errorHandingStrategy = (error: HttpError) =>
error.status.isEqualR(404).map(() => this.errors.push(new UiBaseError(`not found to project`)));
loadScene = (canvasRef: HTMLCanvasElement) => {
this.canvasRef = canvasRef;
this.loadWebGl(canvasRef);
};
loadWebGl = async (canvasRef: HTMLCanvasElement): Promise<void> => {
this.coreThreeRepository = new CoreThreeRepository(canvasRef as HTMLCanvasElement, this.watcherSceneEditorObject);
this.coreThreeRepository.render();
this.canvasOffsetX = canvasRef.getBoundingClientRect().x;
canvasRef.addEventListener("click", (event) => this.clickLister(event, canvasRef.getBoundingClientRect().x));
(await this.sceneBuilderHttpRepository.getSceneAsset(this.activeSceneId ?? "")).fold(
(sceneAssets) => {
this.sceneName = sceneAssets.name;
this.coreThreeRepository?.loadScene(sceneAssets);
this.sceneItems = sceneAssets.toSceneItems();
this.scene = sceneAssets.scene;
},
() => {}
);
};
clickScene = (event: MouseEvent, offset: number = 0): Result<void, Vector3> => {
const vector = new Vector2();
const boundingRect = this.canvasRef!.getBoundingClientRect();
vector.x = ((event.clientX - offset) / boundingRect.width) * 2 - 1;
vector.y = -(event.clientY / boundingRect.height) * 2 + 1;
return this.coreThreeRepository!.setRayCastAndGetFirstObjectAndPointToObject(vector);
};
clickLister = (event: MouseEvent, offset: number = 0) => {
const vector = new Vector2();
const boundingRect = this.canvasRef!.getBoundingClientRect();
vector.x = ((event.clientX - offset) / boundingRect.width) * 2 - 1;
vector.y = -(event.clientY / boundingRect.height) * 2 + 1;
if (this.sceneMode.isEqual(SceneMode.Select)) {
return;
}
if (this.sceneMode.isEqualMany([SceneMode.Move, SceneMode.Rotate])) {
this.transformContollsCall(vector);
}
};
watcherSceneEditorObject = (mesh: Object3D) => (
(this.scene = this.scene.map((el) =>
el.name.isEqualR(mesh.name).fold(
() => {
el.position = mesh.position;
el.orientation = mesh.quaternion.toArray();
return el;
},
() => el
)
)),
this.visibleSaveButton()
);
transformContollsCall = (vector: Vector2) =>
// @ts-ignore
this.coreThreeRepository?.setRayCastAndGetFirstObject(vector).fold(
(object) => this.coreThreeRepository?.setTransformControlsAttach(object),
(_) => this.coreThreeRepository?.disposeTransformControlsMode()
);
dispose = () => {
window.removeEventListener("click", this.clickLister);
};
}

2
ui/src/features/scene_manager/data/scene_http_repository.ts
View file

@ -2,10 +2,8 @@ import { Result } from "../../../core/helper/result";
import { HttpMethod, CoreHttpRepository } from "../../../core/repository/core_http_repository";
import { CoreError } from "../../../core/store/base_store";
import { SceneViewModel } from "../model/scene_view_model";
import { SceneAsset } from "../../../core/model/scene_asset";
export class SceneHttpRepository extends CoreHttpRepository {
editScene = (scene: SceneAsset) => this._jsonRequest(HttpMethod.PUT, "/scenes", scene);
deleteScene = (sceneId:string) => this._jsonRequest(HttpMethod.DELETE, '/scenes', )
newScene = (sceneViewModel: SceneViewModel) =>
this._jsonRequest(HttpMethod.POST, "/scenes", sceneViewModel) as unknown as Promise<Result<CoreError, void>>;

3
ui/src/features/scene_manager/presentation/forms/trajectory/trajectory_http_repository.ts
View file

@ -1,3 +0,0 @@
import { HttpRepository } from "../../../../../core/repository/core_http_repository";
export class TrajectoryHttpRepository extends HttpRepository {}

43
ui/src/features/scene_manager/presentation/forms/zone/zone_store.ts
View file

@ -1,43 +0,0 @@
import makeAutoObservable from "mobx-store-inheritance";
import { NavigateFunction } from "react-router-dom";
import { ZoneModel } from "../../../../../core/model/zone_model";
import { FormState, CoreError } from "../../../../../core/store/base_store";
import { isPreviewMode } from "../scene_manager_forms";
import { SceneMangerStore } from "../../scene_manager_store";
export enum ZoneStoreType {
preview = "preview",
}
export class ZoneStore extends FormState<ZoneModel, CoreError> {
constructor(sceneMangerStore: SceneMangerStore) {
super();
this.sceneMangerStore = sceneMangerStore;
makeAutoObservable(this);
}
storeType: ZoneStoreType;
sceneMangerStore: SceneMangerStore;
viewModel: ZoneModel = ZoneModel.empty();
errorHandingStrategy = (_error: CoreError) => {};
init = async (_navigate?: NavigateFunction | undefined) => {
isPreviewMode(this.sceneMangerStore.activeFormDependency).map(() =>
this.sceneMangerStore.scene
.rFind<ZoneModel>((el) => el.name.isEqual(this.sceneMangerStore.selectedItemName ?? ""))
.fold(
(zoneModel) => {
this.loadDependency(zoneModel);
this.storeType = ZoneStoreType.preview;
},
() =>
console.log(
`Unknown FormType ${this.sceneMangerStore.selectedItemName} : ${JSON.stringify(
this.sceneMangerStore.scene
)}`
)
)
);
};
updateWebGl = () =>
this.storeType
.isEqualR(ZoneStoreType.preview)
.map(() => this.sceneMangerStore.coreThreeRepository!.updateInstance(this.viewModel));
}

313
ui/src/features/scene_manager/presentation/scene_manager.tsx
View file

@ -1,5 +1,5 @@
import * as React from "react";
import { DrawersSceneManager, SceneMangerStore, StoreMode } from "./scene_manager_store";
import { DrawersSceneManager, SceneMangerStore } from "./scene_manager_store";
import { observer } from "mobx-react-lite";
import { Drawer, Popover } from "antd";
import { useNavigate, useParams } from "react-router-dom";
@ -9,258 +9,113 @@ import { CoreButton } from "../../../core/ui/button/button";
import { CoreInput } from "../../../core/ui/input/input";
import { DrawersDataset } from "../../dataset/dataset_store";
import { Icon } from "../../../core/ui/icons/icons";
import { sceneManagerForms } from "./forms/scene_manager_forms";
import { sceneManagerForms } from "../../scene_builder/forms/scene_manager_forms";
import { SceneMode } from "../model/scene_view";
import { useStore } from "../../../core/helper/use_store";
import { SceneBuilderScreenPath } from "../../scene_builder/presentation/scene_builder_screen";
export const SceneManagerPath = "/scene/manager/";
export const SceneManger = observer(() => {
const canvasRef = React.useRef<HTMLCanvasElement>(null);
const store = useStore(SceneMangerStore);
const id = useParams().id as string;
const navigate = useNavigate();
store.initParam(id);
React.useEffect(() => {
store.loadScene(canvasRef.current!);
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = "scroll";
store.dispose();
};
}, [id, store]);
return (
<MainPage
page={"Сцена"}
panelStyle={{
display: store.storeMode.isEqualR(StoreMode.sceneInstance).fold(
() => "",
() => "none"
),
display: "none",
}}
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 key={i} onClick={() => el.fn()}>
<CoreText text={el.name} type={CoreTextType.medium} color="white" />
</div>
))}
</div>
}
>
<span>
<CoreButton text="Добавить" filled={true} />
</span>
</Popover>
<div style={{ position: "relative" }}>
<div style={{ position: "absolute" }}>
<div style={{ position: "relative", left: 20 }}>
{store.sceneHelperInstruments.map((el, i) => (
<div
key={i}
onClick={() => el.onClick()}
style={{
marginTop: 4,
width: 50,
height: 50,
backgroundColor: el.isSelected ? "rgba(160, 132, 255, 1)" : "rgba(99, 81, 159, 1)",
border: "1px solid",
borderRadius: 5,
}}
>
<Icon type={el.icon} />
</div>
))}
{store.isVisibleSaveButton ? (
<>
<div
onClick={() => store.sceneSave()}
style={{
marginTop: 4,
width: 50,
height: 50,
backgroundColor: "rgba(99, 81, 159, 1)",
border: "1px solid",
borderRadius: 5,
}}
>
<Icon type={SceneMode.Save} />
</div>
</>
) : null}
</div>
</div>
</div>
</div>
<div style={{ height: 10 }} />
<div
style={{
borderRadius: 7,
height: 200,
width: "-webkit-fill-available",
backgroundColor: "white",
overflowX: "auto",
}}
>
{store.sceneItems.map((el, index) => (
<div
key={index}
style={{
display: "flex",
backgroundColor: el.isSelected
? "rgba(104, 80, 164, 0.47)"
: index.isEven()
? "rgba(217, 217, 217, 0.27)"
: "",
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
}}
onClick={() => store.selectSceneItems(el.name, index, !el.isSelected, el.icon)}
>
<Icon width={13} height={13} type={el.icon} style={{ marginLeft: 10 }} />
<div style={{ width: 10 }} />
<CoreText text={el.name} type={CoreTextType.small} />
<Icon
type="DeleteCircle"
width={13}
isNeedStopPropagation={true}
height={13}
onClick={() => store.deleteSceneItem(el)}
style={{ marginRight: 10 }}
/>
</div>
))}
</div>
</div>
<div style={{ height: 20 }} />
<div
style={{
width: "-webkit-fill-available",
height: "60%",
borderRadius: 7,
backgroundColor: "white",
margin: 10,
}}
>
{sceneManagerForms(store.activeFormDependency ?? {}, store).map((el, i) =>
el.name.isEqualR(store.activeFormType ?? "").fold(
() => <span key={i}>{el.component}</span>,
() => <span key={i}></span>
)
)}
</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" />
<div style={{ display: "flex", alignItems: "center", marginLeft: 10, marginRight: 10 }}>
<CoreButton
text="Перейти"
onClick={() => navigate(`${SceneBuilderScreenPath}${el._id}`)}
textStyle={{ color: "black", textAlign: "center" }}
style={{ marginRight: 10, backgroundColor: "white", width: 126 }}
/>
<Icon style={{ height: 20 }} type={"DeleteCircle"} color="red" />
</div>
</div>
))}
</div>
</div>
<div></div>
</div>
<div
style={{
width: "100%",
height: "100vh",
background: "rgba(246, 242, 249, 1)",
padding: 50,
paddingLeft: 70,
paddingRight: 70,
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={{ 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" />
<div style={{ display: "flex", alignItems: "center", marginLeft: 10, marginRight: 10 }}>
<CoreButton
text="Перейти"
onClick={() => {
navigate(`${SceneManagerPath}${el._id}`);
}}
textStyle={{ color: "black", textAlign: "center" }}
style={{ marginRight: 10, backgroundColor: "white", width: 126 }}
/>
<Icon style={{ height: 20 }} type={"DeleteCircle"} color="red" />
</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}
style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}
>
<div
style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}
>
<CoreInput
value={store.viewModel.name}
label={"Имя сцены"}
onChange={(text) => store.updateForm({ name: text })}
/>
<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 style={{ display: "flex" }}>
<CoreButton text="Сохранить" filled={true} onClick={() => store.createNewScene()} />
<div style={{ width: 10 }} />
<CoreButton text="Отмена" onClick={() => store.editDrawer(DrawersDataset.NewDataset, false)} />
</div>
</Drawer>
</div>
)}
</div>
</Drawer>
</div>
</>
}
/>

222
ui/src/features/scene_manager/presentation/scene_manager_store.ts
View file

@ -1,57 +1,30 @@
import makeAutoObservable from "mobx-store-inheritance";
import { Object3D, Vector2, Vector3 } from "three";
import { Vector2 } from "three";
import { message } from "antd";
import { CoreThreeRepository } from "../../../core/repository/core_three_repository";
import { HttpError } from "../../../core/repository/core_http_repository";
import { UiDrawerFormState } from "../../../core/store/base_store";
import { UiBaseError } from "../../../core/model/ui_base_error";
import { SceneMode } from "../model/scene_view";
import { SceneHttpRepository } from "../data/scene_http_repository";
import { Instance, SceneAsset } from "../../../core/model/scene_asset";
import { SceneViewModel } from "../model/scene_view_model";
import { SceneModel } from "../model/scene_model";
import { SceneManagerForms } from "./forms/scene_manager_forms";
import { CameraModel } from "../../../core/model/camera_model";
import { SolidModel } from "../../../core/model/solid_model";
import { PointModel } from "../../../core/model/point_model";
import { RobotModel } from "../../../core/model/robot_model";
import { ZoneModel } from "../../../core/model/zone_model";
import { SceneModelsTypes } from "../../../core/model/scene_models_type";
import { Result } from "../../../core/helper/result";
export enum DrawersSceneManager {
NewScene = "Новая сцена",
}
export enum StoreMode {
sceneInstance = "sceneInstance",
allScenes = "allScenes",
}
export interface ISpawnHelper {
url: string;
spawn: SceneModelsTypes;
name: string;
isFinished: boolean;
type: string;
}
interface IPopoverItem {
name: string;
fn: Function;
}
export interface SceneItems {
fn: Function;
name: string;
isSelected: boolean;
icon: string;
}
export class SceneMangerStore extends UiDrawerFormState<SceneViewModel, HttpError> {
activeFormType?: string;
activeSceneId: string = "";
selectedItemName?: string;
activeFormDependency: Object = {};
viewModel: SceneViewModel = SceneViewModel.empty();
sceneMode: SceneMode;
sceneItems: SceneItems[] = [];
isVisibleSaveButton: boolean = false;
coreThreeRepository: null | CoreThreeRepository = null;
sceneHttpRepository: SceneHttpRepository;
@ -60,33 +33,12 @@ export class SceneMangerStore extends UiDrawerFormState<SceneViewModel, HttpErro
objectForMagnetism: string;
objectMagnetism: string;
scenes: SceneModel[] = [];
storeMode: StoreMode;
canvasRef?: HTMLCanvasElement;
mousePosition?: Vector2;
spawnHelper?: ISpawnHelper;
selectSceneObject?: Object;
isLoadingForm: boolean = false;
scene: (Instance | SolidModel | CameraModel | RobotModel | PointModel | ZoneModel)[] = [];
sceneHelperInstruments: {
icon: string;
onClick: Function;
isSelected: boolean;
}[] = [
{ icon: SceneMode.Select, onClick: () => this.setMode(SceneMode.Select), isSelected: false },
{ icon: SceneMode.Move, onClick: () => this.setMode(SceneMode.Move), isSelected: false },
{ icon: SceneMode.Rotate, onClick: () => this.setMode(SceneMode.Rotate), isSelected: false },
];
popoverItems: IPopoverItem[] = [
{ name: "Камера", fn: () => this.createNewForm(SceneManagerForms.camera, true) },
{ name: "Твердое тело", fn: () => this.createNewForm(SceneManagerForms.solidBody, true) },
{ name: "Источник света", fn: () => this.createNewForm(SceneManagerForms.light, true) },
{ name: "Робот", fn: () => this.createNewForm(SceneManagerForms.robot, true) },
{ name: "Точка", fn: () => this.createNewForm(SceneManagerForms.point, true) },
{ name: "Траектория", fn: () => this.createNewForm(SceneManagerForms.trajectory, true) },
{ name: "Зона", fn: () => this.createNewForm(SceneManagerForms.zone, true) },
{ name: "Точки захвата", fn: () => this.createNewForm(SceneManagerForms.capturePoints, true) },
];
canvasOffsetX?: number;
sceneName?: string;
constructor() {
@ -94,75 +46,9 @@ export class SceneMangerStore extends UiDrawerFormState<SceneViewModel, HttpErro
makeAutoObservable(this);
this.sceneHttpRepository = new SceneHttpRepository();
this.sceneMode = SceneMode.Select;
}
sceneSave = () =>
this.messageHttp(this.sceneHttpRepository.editScene(SceneAsset.newScene(this.scene, this.sceneName ?? "")), {
successMessage: "Сцена сохранена",
}).then(() => (this.isVisibleSaveButton = false));
iconToSceneManagerForm = (icon: string): SceneManagerForms => {
if (icon.isEqual("Camera")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.camera;
}
if (icon.isEqual("Zone")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.zone;
}
if (icon.isEqual("Robot")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.robot;
}
if (icon.isEqual("Point")) {
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.point;
}
this.activeFormDependency = {
type: "Preview",
};
return SceneManagerForms.solidBody;
};
selectSceneItems = (name: string, index: number, selected: boolean, icon: string) => {
this.sceneItems.map((el) => {
el.isSelected = false;
return el;
});
this.sceneItems.map((el, i) => i.isEqualR(index).map(() => (el.isSelected = selected)));
if (selected) {
this.createNewForm(this.iconToSceneManagerForm(icon));
this.selectedItemName = name;
}
if (!selected) {
this.createNewForm(undefined);
this.selectedItemName = undefined;
}
};
setMode = (mode: SceneMode) => {
this.sceneHelperInstruments.map((el) => {
el.isSelected = false;
el.icon.isEqualR(mode).map(() => (el.isSelected = true));
return el;
});
this.sceneMode = mode;
this.coreThreeRepository?.setTransformMode(this.sceneMode);
};
createNewForm = (formType: SceneManagerForms | undefined, isNeedClearDependency?: boolean) => {
this.activeFormDependency = Object.assign(this.activeFormDependency, { store: this });
if (isNeedClearDependency) this.activeFormDependency = { store: this };
this.activeFormType = formType;
};
createNewScene = () =>
this.viewModel.valid().fold(
async (s) => {
@ -173,42 +59,16 @@ export class SceneMangerStore extends UiDrawerFormState<SceneViewModel, HttpErro
async (e) => message.error(e)
);
deleteSceneItem = (item: SceneItems) => {
this.sceneItems = this.sceneItems.filter((el) => !el.name.isEqual(item.name));
this.coreThreeRepository?.deleteSceneItem(item);
this.visibleSaveButton();
};
visibleSaveButton = () => {
this.isVisibleSaveButton = true;
};
addNewCamera = (model: CameraModel) => {
model.position = this.coreThreeRepository!.camera.position;
model.orientation = this.coreThreeRepository!.camera.quaternion.toArray();
model.aspect = this.coreThreeRepository!.camera.aspect;
this.sceneItems.push({ name: model.name, icon: "Camera", fn: () => {}, isSelected: false });
this.scene.push(model);
model.toWebGl(this.coreThreeRepository!);
this.visibleSaveButton();
};
hiddenMenu = () => (this.isSceneMenuShow = false);
init = async () => {
this.storeMode
.isEqualR(StoreMode.allScenes)
.map(() => this.mapOk("scenes", this.sceneHttpRepository.getAllScenes()));
};
initParam = (id: string | undefined) => {
if (id) {
this.activeSceneId = id;
this.storeMode = StoreMode.sceneInstance;
} else {
this.storeMode = StoreMode.allScenes;
}
this.mapOk("scenes", this.sceneHttpRepository.getAllScenes());
};
errorHandingStrategy = (error: HttpError) =>
error.status.isEqualR(404).map(() => this.errors.push(new UiBaseError(`not found to project`)));
@ -218,76 +78,4 @@ export class SceneMangerStore extends UiDrawerFormState<SceneViewModel, HttpErro
});
this.mapOk("scenes", this.sceneHttpRepository.getAllScenes());
};
loadScene = (canvasRef: HTMLCanvasElement) => {
this.canvasRef = canvasRef;
this.storeMode.isEqualR(StoreMode.sceneInstance).map(() => this.loadWebGl(canvasRef));
};
loadWebGl = async (canvasRef: HTMLCanvasElement): Promise<void> => {
this.coreThreeRepository = new CoreThreeRepository(canvasRef as HTMLCanvasElement, this.watcherSceneEditorObject);
this.coreThreeRepository.render();
this.canvasOffsetX = canvasRef.getBoundingClientRect().x;
canvasRef.addEventListener("click", (event) => this.clickLister(event, canvasRef.getBoundingClientRect().x));
(await this.sceneHttpRepository.getSceneAsset(this.activeSceneId ?? "")).fold(
(sceneAssets) => {
this.sceneName = sceneAssets.name;
this.coreThreeRepository?.loadScene(sceneAssets);
this.sceneItems = sceneAssets.toSceneItems();
this.scene = sceneAssets.scene;
},
() => {}
);
};
clickScene = (event: MouseEvent, offset: number = 0): Result<void, Vector3> => {
const vector = new Vector2();
const boundingRect = this.canvasRef!.getBoundingClientRect();
vector.x = ((event.clientX - offset) / boundingRect.width) * 2 - 1;
vector.y = -(event.clientY / boundingRect.height) * 2 + 1;
return this.coreThreeRepository!.setRayCastAndGetFirstObjectAndPointToObject(vector);
};
clickLister = (event: MouseEvent, offset: number = 0) => {
const vector = new Vector2();
const boundingRect = this.canvasRef!.getBoundingClientRect();
vector.x = ((event.clientX - offset) / boundingRect.width) * 2 - 1;
vector.y = -(event.clientY / boundingRect.height) * 2 + 1;
if (this.sceneMode.isEqual(SceneMode.Select)) {
return;
}
if (this.sceneMode.isEqualMany([SceneMode.Move, SceneMode.Rotate])) {
this.transformContollsCall(vector);
}
};
watcherSceneEditorObject = (mesh: Object3D) => (
(this.scene = this.scene.map((el) =>
el.name.isEqualR(mesh.name).fold(
() => {
el.position = mesh.position;
el.orientation = mesh.quaternion.toArray();
return el;
},
() => el
)
)),
this.visibleSaveButton()
);
transformContollsCall = (vector: Vector2) =>
// @ts-ignore
this.coreThreeRepository?.setRayCastAndGetFirstObject(vector).fold(
(object) => this.coreThreeRepository?.setTransformControlsAttach(object),
(_) => this.coreThreeRepository?.disposeTransformControlsMode()
);
dispose = () => {
window.removeEventListener("click", this.clickLister);
};
}