diff --git a/server/package.json b/server/package.json index d062c30..3e5895a 100644 --- a/server/package.json +++ b/server/package.json @@ -7,7 +7,8 @@ "test:dev": "NODE_ENV=test_dev tsc-watch --onSuccess 'ts-node ./build/test/test.js'", "test:unit": "NODE_ENV=unit tsc-watch --onSuccess 'ts-node ./build/test/test.js'", "test:e2e": "NODE_ENV=e2e tsc-watch --onSuccess 'ts-node ./build/test/test.js'", - "dev": "NODE_ENV=dev tsc-watch --onSuccess 'ts-node ./build/src/main.js'" + "dev": "NODE_ENV=dev tsc-watch --onSuccess 'ts-node ./build/src/main.js'", + "build:stand": " " }, "author": "IDONTSUDO", "devDependencies": { @@ -27,7 +28,9 @@ "source-map-support": "latest", "ts-node": "^10.9.1", "tslint": "latest", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "node-watch": "^0.7.4", + "nodemon": "^3.0.1" }, "dependencies": { "@grpc/grpc-js": "^1.9.0", @@ -42,14 +45,13 @@ "md5": "^2.3.0", "mongoose": "^7.6.2", "mongoose-autopopulate": "^1.1.0", - "node-watch": "^0.7.4", - "nodemon": "^3.0.1", "reflect-metadata": "^0.1.13", "socket.io": "^4.7.2", "socket.io-client": "^4.7.2", "spark-md5": "^3.0.2", "ts-md5": "^1.3.1", "tsc-watch": "^6.0.4", - "uuid": "^9.0.1" + "uuid": "^9.0.1", + "pm2": "^5.3.1" } } diff --git a/ui/package.json b/ui/package.json index 630e95c..1f6c183 100644 --- a/ui/package.json +++ b/ui/package.json @@ -21,14 +21,21 @@ "mobx-react-lite": "^4.0.4", "mobx-store-inheritance": "^1.0.6", "react": "^18.2.0", + "react-accessible-treeview": "^2.8.3", + "react-dnd": "^16.0.1", + "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-i18next": "^13.3.1", "react-infinite-scroll-component": "^6.1.0", "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "reflect-metadata": "^0.1.13", + "rete-connection-plugin": "^2.0.0", + "rete-react-plugin": "^2.0.4", + "rete-render-utils": "^2.0.1", "sass": "^1.66.1", "socket.io-client": "^4.7.2", + "styled-components": "^6.1.8", "three": "^0.159.0", "three-stdlib": "^2.28.9", "three-transform-controls": "^1.0.4", diff --git a/ui/src/core/extensions/extensions.ts b/ui/src/core/extensions/extensions.ts index 57a9789..c21cb5b 100644 --- a/ui/src/core/extensions/extensions.ts +++ b/ui/src/core/extensions/extensions.ts @@ -4,6 +4,7 @@ import { StringExtensions } from "./string"; export type CallBackVoidFunction = (value: T) => void; export type CallBackStringVoidFunction = (value: string) => void; +export type CallBackEventTarget = (value: EventTarget) => void; declare global { interface Array { diff --git a/ui/src/core/repository/core_three_repository.ts b/ui/src/core/repository/core_three_repository.ts index 5034b57..c240b48 100644 --- a/ui/src/core/repository/core_three_repository.ts +++ b/ui/src/core/repository/core_three_repository.ts @@ -19,6 +19,8 @@ import { GridHelper, CameraHelper, Quaternion, + MeshBasicMaterial, + PlaneGeometry, } from "three"; import { TypedEvent } from "../helper/typed_event"; import { Result } from "../helper/result"; @@ -244,6 +246,14 @@ export class CoreThreeRepository extends TypedEvent { floor.userData = {}; floor.userData[UserData.cameraInitialization] = true; this.scene.add(floor); + + const planeMesh = new Mesh( + new PlaneGeometry(10, 10, 10, 10), + new MeshBasicMaterial({ color: 0x808080, wireframe: true }) + ); + planeMesh.userData[UserData.selectedObject] = true; + planeMesh.rotation.x = -Math.PI / 2; + this.scene.add(planeMesh); } render() { diff --git a/ui/src/core/store/base_store.ts b/ui/src/core/store/base_store.ts index f771f62..7260dac 100644 --- a/ui/src/core/store/base_store.ts +++ b/ui/src/core/store/base_store.ts @@ -1,5 +1,3 @@ -// TODO(IDONTSUDO): нужно переписать все запросы под BaseStore - import { NavigateFunction } from "react-router-dom"; import { Result } from "../helper/result"; import { UiBaseError } from "../model/ui_base_error"; diff --git a/ui/src/core/ui/text/text.tsx b/ui/src/core/ui/text/text.tsx new file mode 100644 index 0000000..3b455e6 --- /dev/null +++ b/ui/src/core/ui/text/text.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +export enum CoreTextType { + header, +} + +export interface ITextProps { + text: string; + type: CoreTextType; +} + +export function CoreText(props: ITextProps) { + if (props.type === CoreTextType.header) return
{props.text}
; + return
{props.text}
; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_screen.tsx b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_screen.tsx new file mode 100644 index 0000000..a85c764 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_screen.tsx @@ -0,0 +1,106 @@ +import * as React from "react"; +import { CoreText, CoreTextType } from "../../../core/ui/text/text"; + +import { useRete } from "rete-react-plugin"; +import { createEditor } from "./ui/editor/editor"; +import { SkillTree } from "./ui/skill_tree/skill_tree"; +import { BehaviorTreeBuilderStore } from "./behavior_tree_builder_store"; + +export const behaviorTreeBuilderScreenPath = "behavior/tree/screen/path"; + +const skills = { + name: "", + children: [ + { + name: "arm", + children: [{ name: "move to", interface: "Vector3", out: "vo" }], + }, + { + name: "image", + children: [ + { + name: "object detection", + interface: "image", + out: "BoundBox", + }, + { name: "people detection", interface: "image", out: "BoundBox" }, + ], + }, + ], +}; +export const behaviorTreeBuilderStore = new BehaviorTreeBuilderStore(); + +export function BehaviorTreeBuilderScreen() { + const [store] = React.useState(behaviorTreeBuilderStore); + const [ref] = useRete(createEditor); + React.useEffect(() => { + store.init(); + + store.dragZoneSetOffset( + // @ts-expect-error + ref.current.offsetTop, + // @ts-expect-error + ref.current.offsetLeft, + // @ts-expect-error + Number(String(ref.current.style.width).replaceAll("px", "")), + // @ts-expect-error + Number(String(ref.current.style.height).replaceAll("px", "")) + ); + + return () => { + store.dispose(); + }; + }, [store, ref]); + + return ( +
+
+ +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+ ); +} diff --git a/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx new file mode 100644 index 0000000..8a2439b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/behavior_tree_builder_store.tsx @@ -0,0 +1,61 @@ +import makeAutoObservable from "mobx-store-inheritance"; + +import { HttpError } from "../../../core/repository/http_repository"; +import { UiErrorState } from "../../../core/store/base_store"; +import { BtNodeView } from "./ui/editor/editor_view"; +interface I2DArea { + x: number; + y: number; + w: number; + h: number; +} +export class BehaviorTreeBuilderStore extends UiErrorState { + area?: I2DArea; + errorHandingStrategy: (error: HttpError) => void; + btNodeView: BtNodeView = new BtNodeView(); + constructor() { + super(); + makeAutoObservable(this); + } + canRun = true; + draw() {} + dragEnd = (e: EventTarget) => { + if (this.canRun) { + //@ts-expect-error + this.drawSkillCheck(e.x as number, e.y as number, e.target.innerText as string); + this.canRun = false; + setTimeout(() => { + this.canRun = true; + }, 1000); + } + }; + drawSkillCheck(x: number, y: number, name: string) { + const drawPoint = { x: x, y: y, w: 1, h: 1 }; + + if ( + drawPoint.x < this.area!.x + this.area!.w && + drawPoint.x + drawPoint.w > this.area!.x && + drawPoint.y < this.area!.y + this.area!.h && + drawPoint.y + drawPoint.h > this.area!.y + ) { + this.drawSkill(x, y - (this.area!.y + this.area!.h / 2), name); + } + } + drawSkill(x: number, y: number, name: string) { + this.btNodeView.emit({ + x: x, + y: y, + name: name, + }); + } + async init(): Promise {} + dragZoneSetOffset(offsetTop: number, offsetWidth: number, width: number, height: number) { + this.area = { + x: offsetTop, + y: offsetWidth, + w: width, + h: height, + }; + } + dispose() {} +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css b/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css new file mode 100644 index 0000000..6db054b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/background.css @@ -0,0 +1,19 @@ +.fill-area { + display: table; + z-index: -1; + position: absolute; + top: -320000px; + left: -320000px; + width: 640000px; + height: 640000px; +} + +.background { + background-color: #ffffff; + opacity: 1; + background-image: linear-gradient(#f1f1f1 3.2px, transparent 3.2px), + linear-gradient(90deg, #f1f1f1 3.2px, transparent 3.2px), linear-gradient(#f1f1f1 1.6px, transparent 1.6px), + linear-gradient(90deg, #f1f1f1 1.6px, #ffffff 1.6px); + background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; + background-position: -3.2px -3.2px, -3.2px -3.2px, -1.6px -1.6px, -1.6px -1.6px; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_background.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_background.tsx new file mode 100644 index 0000000..a3aaab0 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_background.tsx @@ -0,0 +1,11 @@ +import { BaseSchemes } from "rete"; +import { AreaPlugin } from "rete-area-plugin"; + +export function addCustomBackground(area: AreaPlugin) { + const background = document.createElement("div"); + + background.classList.add("background"); + background.classList.add("fill-area"); + + area.area.content.add(background); +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_connection.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_connection.tsx new file mode 100644 index 0000000..a5696af --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_connection.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import styled from "styled-components"; +import { ClassicScheme, Presets } from "rete-react-plugin"; + +const { useConnection } = Presets.classic; + +const Svg = styled.svg` + overflow: visible !important; + position: absolute; + pointer-events: none; + width: 9999px; + height: 9999px; +`; + +const Path = styled.path<{ styles?: (props: any) => any }>` + fill: none; + stroke-width: 5px; + stroke: black; + pointer-events: auto; + ${(props) => props.styles && props.styles(props)} +`; + +export function CustomConnection(props: { + data: ClassicScheme["Connection"] & { isLoop?: boolean }; + styles?: () => any; +}) { + const { path } = useConnection(); + + if (!path) return null; + + return ( + + + + ); +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx new file mode 100644 index 0000000..b651623 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_node.tsx @@ -0,0 +1,164 @@ +import * as React from "react"; +import { ClassicScheme, RenderEmit, Presets } from "rete-react-plugin"; +import styled, { css } from "styled-components"; +import { $nodewidth, $socketmargin, $socketsize } from "./vars"; + +const { RefSocket, RefControl } = Presets.classic; + +type NodeExtraData = { width?: number; height?: number }; + +export const NodeStyles = styled.div any }>` + background: black; + border: 2px solid grey; + border-radius: 10px; + cursor: pointer; + box-sizing: border-box; + width: ${(props) => (Number.isFinite(props.width) ? `${props.width}px` : `${$nodewidth}px`)}; + height: ${(props) => (Number.isFinite(props.height) ? `${props.height}px` : "auto")}; + padding-bottom: 6px; + position: relative; + user-select: none; + &:hover { + background: #333; + } + ${(props) => + props.selected && + css` + border-color: red; + `} + .title { + color: white; + font-family: sans-serif; + font-size: 18px; + padding: 8px; + } + .output { + text-align: right; + } + .input { + text-align: left; + } + .output-socket { + text-align: right; + margin-right: -1px; + display: inline-block; + } + .input-socket { + text-align: left; + margin-left: -1px; + display: inline-block; + } + .input-title, + .output-title { + vertical-align: middle; + color: white; + display: inline-block; + font-family: sans-serif; + font-size: 14px; + margin: ${$socketmargin}px; + line-height: ${$socketsize}px; + } + .input-control { + z-index: 1; + width: calc(100% - ${$socketsize + 2 * $socketmargin}px); + vertical-align: middle; + display: inline-block; + } + .control { + display: block; + padding: ${$socketmargin}px ${$socketsize / 2 + $socketmargin}px; + } + ${(props) => props.styles && props.styles(props)} +`; + +function sortByIndex(entries: T) { + entries.sort((a, b) => { + const ai = a[1]?.index || 0; + const bi = b[1]?.index || 0; + + return ai - bi; + }); +} + +type Props = { + data: S["Node"] & NodeExtraData; + styles?: () => any; + emit: RenderEmit; +}; +export type NodeComponent = (props: Props) => JSX.Element; + +export function CustomNode(props: Props) { + const inputs = Object.entries(props.data.inputs); + const outputs = Object.entries(props.data.outputs); + const controls = Object.entries(props.data.controls); + const selected = props.data.selected || false; + const { id, label, width, height } = props.data; + + sortByIndex(inputs); + sortByIndex(outputs); + sortByIndex(controls); + + return ( + +
{ + e.stopPropagation(); + console.log(">>>"); + }} + className="title" + data-testid="title" + > + {label} +
+ + {outputs.map( + ([key, output]) => + output && ( +
+
BODY
+
+ {output?.label} +
+ +
+ ) + )} + + {controls.map(([key, control]) => { + return control ? : null; + })} + {inputs.map( + ([key, input]) => + input && ( +
+ + {input && (!input.control || !input.showControl) && ( +
+ {input?.label} +
+ )} + {input?.control && input?.showControl && ( + + + + )} +
+ ) + )} + + ); +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_socket.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_socket.tsx new file mode 100644 index 0000000..fbbc456 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/custom_socket.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { ClassicPreset } from "rete"; +import styled from "styled-components"; +import { $socketsize } from "./vars"; + +const Styles = styled.div` + display: inline-block; + cursor: pointer; + border: 1px solid grey; + width: ${$socketsize}px; + height: ${$socketsize * 2}px; + vertical-align: middle; + background: #fff; + z-index: 2; + box-sizing: border-box; + &:hover { + background: #ddd; + } +`; + +export function CustomSocket(props: { data: T }) { + return ; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor.tsx new file mode 100644 index 0000000..f7ae73b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor.tsx @@ -0,0 +1,88 @@ +import { createRoot } from "react-dom/client"; +import { NodeEditor, GetSchemes, ClassicPreset } from "rete"; +import { AreaPlugin, AreaExtensions } from "rete-area-plugin"; +import { ConnectionPlugin, Presets as ConnectionPresets } from "rete-connection-plugin"; +import { ReactPlugin, Presets, ReactArea2D } from "rete-react-plugin"; +import { CustomNode } from "./custom_node"; +import { CustomSocket } from "./custom_socket"; +import { CustomConnection } from "./custom_connection"; +import { addCustomBackground } from "./custom_background"; +import { StyledNode } from "./style_node"; +import { behaviorTreeBuilderStore } from "../../behavior_tree_builder_screen"; + +type Schemes = GetSchemes>; +type AreaExtra = ReactArea2D; + +export async function createEditor(container: HTMLElement) { + const socket = new ClassicPreset.Socket("socket"); + + behaviorTreeBuilderStore.btNodeView.on(async (event) => { + setTimeout(async () => { + const node = new ClassicPreset.Node(event.name); + const { x, y } = areaContainer.area.pointer; + await editor.addNode(node); + await areaContainer.translate(node.id, { x, y }); + }, 50); + }); + const editor = new NodeEditor(); + const areaContainer = new AreaPlugin(container); + const connection = new ConnectionPlugin(); + const render = new ReactPlugin({ createRoot }); + + AreaExtensions.selectableNodes(areaContainer, AreaExtensions.selector(), { + accumulating: AreaExtensions.accumulateOnCtrl(), + }); + + render.addPreset( + Presets.classic.setup({ + customize: { + node(context) { + if (context.payload.label === "Fully customized") { + return CustomNode; + } + if (context.payload.label === "Override styles") { + return StyledNode; + } + return Presets.classic.Node; + }, + socket(_context) { + return CustomSocket; + }, + connection(_context) { + return CustomConnection; + }, + }, + }) + ); + + connection.addPreset(ConnectionPresets.classic.setup()); + + addCustomBackground(areaContainer); + + editor.use(areaContainer); + areaContainer.use(connection); + areaContainer.use(render); + + AreaExtensions.simpleNodesOrder(areaContainer); + + const a = new ClassicPreset.Node("Override styles"); + + a.addOutput("a", new ClassicPreset.Output(socket)); + a.addInput("a", new ClassicPreset.Input(socket)); + await editor.addNode(a); + + const b = new ClassicPreset.Node("Fully customized"); + b.addOutput("a", new ClassicPreset.Output(socket)); + b.addInput("a", new ClassicPreset.Input(socket)); + await editor.addNode(b); + + await editor.addConnection(new ClassicPreset.Connection(a, "a", b, "a")); + + setTimeout(() => { + AreaExtensions.zoomAt(areaContainer, editor.getNodes()); + }, 100); + + return { + destroy: () => areaContainer.destroy(), + }; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts new file mode 100644 index 0000000..027105b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/editor_view.ts @@ -0,0 +1,7 @@ +import { TypedEvent } from "../../../../../core/helper/typed_event"; +export interface BtDrawView { + x: number; + y: number; + name: string; +} +export class BtNodeView extends TypedEvent {} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx new file mode 100644 index 0000000..f0cb56b --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/style_node.tsx @@ -0,0 +1,30 @@ +import { Presets } from "rete-react-plugin"; +import { css } from "styled-components"; +import "./background.css"; + +const styles = css<{ selected?: boolean }>` + background: #ebebeb; + border-color: #646464; + .title { + color: #646464; + } + &:hover { + background: #f2f2f2; + } + .output-socket { + margin-right: -1px; + } + .input-socket { + margin-left: -1px; + } + ${(props) => + props.selected && + css` + border-color: red; + `} +`; + +export function StyledNode(props: any) { + // eslint-disable-next-line react/jsx-pascal-case + return styles} {...props} />; +} diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx new file mode 100644 index 0000000..c79b882 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/editor/vars.tsx @@ -0,0 +1,3 @@ +export const $nodewidth = 200; +export const $socketmargin = 6; +export const $socketsize = 16; diff --git a/ui/src/features/behavior_tree_builder/presentation/ui/skill_tree/skill_tree.tsx b/ui/src/features/behavior_tree_builder/presentation/ui/skill_tree/skill_tree.tsx new file mode 100644 index 0000000..0acb353 --- /dev/null +++ b/ui/src/features/behavior_tree_builder/presentation/ui/skill_tree/skill_tree.tsx @@ -0,0 +1,69 @@ +import * as React from "react"; +import TreeView, { EventCallback, IBranchProps, INode, LeafProps, flattenTree } from "react-accessible-treeview"; +import { IFlatMetadata } from "react-accessible-treeview/dist/TreeView/utils"; +import { CallBackEventTarget } from "../../../../../core/extensions/extensions"; +export interface ISkillTreeProps { + skills: any; + dragEnd: CallBackEventTarget; +} + +interface IRefListerProps { + element: INode; + getNodeProps: (args?: { onClick?: EventCallback }) => IBranchProps | LeafProps; + handleExpand: EventCallback; + handleSelect: EventCallback; + dragEnd: CallBackEventTarget; +} + +export const RefListener = (props: IRefListerProps) => { + const canvasRef = React.useRef(null); + React.useEffect(() => { + if (canvasRef.current) { + canvasRef.current.addEventListener("dragend", (e) => { + // @ts-expect-error + if (e.target.innerHTML) { + // @ts-expect-error + props.dragEnd(e); + } + }); + } + }, [canvasRef, props]); + + return ( +
+
{ + props.handleSelect(e); + }} + /> + + {props.element.name} + +
+ ); +}; +export function SkillTree(props: ISkillTreeProps) { + return ( +
+ {}} + multiSelect + defaultExpandedIds={[1, 2]} + nodeAction="check" + nodeRenderer={({ element, getNodeProps, handleSelect, handleExpand }) => { + return ( + + ); + }} + /> +
+ ); +} diff --git a/ui/src/features/p.tsx b/ui/src/features/p.tsx deleted file mode 100644 index 81853f1..0000000 --- a/ui/src/features/p.tsx +++ /dev/null @@ -1,68 +0,0 @@ -export {}; -// import React from "react"; -// import { CoreError, UiErrorState } from "../core/store/base_store"; -// import { SelectProjectStore } from "./select_project/presentation/select_project_store"; - -// export declare type ClassConstructor = { -// new (...args: any[]): T; -// }; -// interface MobxReactComponentProps, ClassConstructor> { -// store: ClassConstructor; -// children: (element: T) => React.ReactElement; -// } - -// class UiStateErrorComponent, K> extends React.Component< -// MobxReactComponentProps, -// { store: T | undefined } -// > { -// async componentDidMount(): Promise { -// const store = this.props.store as ClassConstructor; -// console.log(store); -// const s = new store(); -// this.setState({ store: s }); -// if (this.state !== null) { -// await this.state.store?.init(); -// } -// } -// componentWillUnmount(): void { -// if (this.state.store !== undefined) { -// this.state.store.dispose(); -// } -// } - -// render() { -// if (this.state !== null) { -// if (this.state.store?.isLoading) { -// return <>Loading; -// } -// if (this.state.store !== undefined) { -// return this.props.children(this.state.store); -// } -// } - -// return ( -//
-// <>{this.props.children} -//
-// ); -// } -// } - -// export const ExampleScreen: React.FC = () => { -// return ( -//
-// store={SelectProjectStore}> -// {(store) => { -// console.log(store); -// return ( -//
-// {store.projects.map((el) => { -// return <>{el}; -// })} -//
-// ); -// }} -// -//
-// ); -// }; diff --git a/ui/src/features/scene_manager/model/scene_view.ts b/ui/src/features/scene_manager/model/scene_view.ts index 2265a58..d282fc7 100644 --- a/ui/src/features/scene_manager/model/scene_view.ts +++ b/ui/src/features/scene_manager/model/scene_view.ts @@ -24,4 +24,5 @@ export enum SceneMode { MOVING = "Moving", EMPTY = "Empty", ADD_CAMERA = "Add camera", + MAGNETISM_MARKING = "magnetism_marking", } diff --git a/ui/src/features/scene_manager/presentation/scene_manager.tsx b/ui/src/features/scene_manager/presentation/scene_manager.tsx index bb774c3..db927ed 100644 --- a/ui/src/features/scene_manager/presentation/scene_manager.tsx +++ b/ui/src/features/scene_manager/presentation/scene_manager.tsx @@ -26,8 +26,8 @@ export const SceneManger = observer(() => { }; }, [id, sceneMangerStore]); - const sceneIcons: SceneManagerView[] = [SceneMode.ROTATE, SceneMode.MOVING, SceneMode.ADD_CAMERA].map((el) => { - return { name: el, clickHandel: () => sceneMangerStore.setSceneMode(el) }; + const sceneIcons: SceneManagerView[] = Object.values(SceneMode).map((el) => { + return { name: el, clickHandel: () => sceneMangerStore.setSceneMode(el as SceneMode) }; }); return ( @@ -148,14 +148,7 @@ export const SceneManger = observer(() => { return sceneMangerStore.deleteSceneItem(el)} model={el} />; })}
- - {/* {sceneMangerStore.sceneMenuIsShow ? ( - <> - - - ) : ( - <> - )} */} +
{sceneMangerStore.sceneMode === SceneMode.MAGNETISM_MARKING ? <> : <>}
); diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 574c7f8..cb9bf12 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -9,6 +9,7 @@ import { SocketLister } from "./features/socket_lister/socket_lister"; import { RouterProvider } from "react-router-dom"; import { router } from "./core/routers/routers"; import { SceneManger } from "./features/scene_manager/presentation/scene_manager"; +import { BehaviorTreeBuilderScreen } from "./features/behavior_tree_builder/presentation/behavior_tree_builder_screen"; extensions(); const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); @@ -21,6 +22,8 @@ root.render( {/* */} <> + + {/* */} );