details preview

ui/src/core/extensions/array.ts

@@ -3,7 +3,6 @@ import { Result } from "../helper/result";
 /* eslint-disable @typescript-eslint/no-this-alias */
 export const ArrayExtensions = () => {
   if ([].equals === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.equals = function (array, strict = true) {
       if (!array) return false;
 
@@ -24,7 +23,6 @@ export const ArrayExtensions = () => {
     };
   }
   if ([].lastElement === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.lastElement = function () {
       const instanceCheck = this;
       if (instanceCheck === undefined) {
@@ -36,31 +34,26 @@ export const ArrayExtensions = () => {
     };
   }
   if ([].isEmpty === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.isEmpty = function () {
       return this.length === 0;
     };
   }
   if ([].isNotEmpty === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.isNotEmpty = function () {
       return this.length !== 0;
     };
   }
   if ([].hasIncludeElement === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.hasIncludeElement = function (element) {
       return this.indexOf(element) !== -1;
     };
   }
   if ([].repeat === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.repeat = function (quantity) {
       return Array(quantity).fill(this).flat(1);
     };
   }
   if ([].rFind === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.rFind = function (predicate) {
       const result = this.find(predicate as any);
       if (result === undefined) {
@@ -70,7 +63,6 @@ export const ArrayExtensions = () => {
     };
   }
   if ([].maxLength === undefined) {
-    // eslint-disable-next-line no-extend-native
     Array.prototype.maxLength = function (length) {
       if (this.length > length) {
         return this;

ui/src/core/extensions/extensions.ts

@@ -42,6 +42,7 @@ declare global {
     isEqualMany(str: string[]): boolean;
     hasPattern(pattern: string): boolean;
     hasNoPattern(pattern: string): boolean;
+    divideByIndex(index: number): string[]
   }
 
   interface Map<K, V> {

ui/src/core/extensions/map.ts

@@ -1,6 +1,5 @@
 export const MapExtensions = () => {
   if (Map.prototype.addValueOrMakeCallback === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.addValueOrMakeCallback = function (key, value, fn) {
       if (this.has(key)) {
         this.set(key, value);
@@ -12,7 +11,6 @@ export const MapExtensions = () => {
     };
   }
   if (Map.prototype.getKeyFromValueIsExists === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.getKeyFromValueIsExists = function (value) {
       let result;
       this.forEach((el, key) => {
@@ -24,7 +22,6 @@ export const MapExtensions = () => {
     };
   }
   if (Map.prototype.overrideValue === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.overrideValue = function (key, value) {
       const result = this.get(key);
 
@@ -32,7 +29,6 @@ export const MapExtensions = () => {
     };
   }
   if (Map.prototype.keysToJson === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.keysToJson = function () {
       const result: any[] = [];
       this.forEach((el) => result.push(el));
@@ -40,13 +36,11 @@ export const MapExtensions = () => {
     };
   }
   if (Map.prototype.toArray === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.toArray = function () {
       return Array.from(this.values());
     };
   }
   if (Map.prototype.getPredicateValue === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.getPredicateValue = function (callBack) {
       const result: any[] = [];
       this.forEach((el, key) => {
@@ -59,7 +53,6 @@ export const MapExtensions = () => {
     };
   }
   if (Map.prototype.incrementValue === undefined) {
-    // eslint-disable-next-line no-extend-native
     Map.prototype.incrementValue = function (key) {
       if (this.get(key)) {
         this.set(key, this.get(key) + 1);

ui/src/core/extensions/number.ts

@@ -1,45 +1,39 @@
 export const NumberExtensions = () => {
   if (Number().fromArray === undefined) {
-    // eslint-disable-next-line no-extend-native
     Number.prototype.fromArray = function () {
       return Array.from(this.toString()).map((el) => Number(el));
     };
   }
   if (Number().toPx === undefined) {
-    // eslint-disable-next-line no-extend-native
     Number.prototype.toPx = function () {
       return String(this) + "px";
     };
   }
   if (Number().unixFromDate === undefined) {
-    // eslint-disable-next-line no-extend-native
     Number.prototype.unixFromDate = function () {
       const date = new Date(Number(this) * 1000);
       return `${date.getUTCFullYear()}.${date.getMonth()}.${date.getDay()}  ${date.getHours()}:${date.getMinutes()}`;
     };
   }
   if (Number().isValid === undefined) {
-    // eslint-disable-next-line no-extend-native
     Number.prototype.isValid = function (str: string) {
       return !isNaN(Number(str));
     };
   }
-  if (Number().randRange === undefined) {
-    // eslint-disable-next-line no-extend-native
+   if (Number().randRange === undefined) {
     Number.prototype.randRange = function (min, max) {
       return Math.random() * (max - min) + min;
     };
   }
   if (Number().isPositive === undefined) {
-    // eslint-disable-next-line no-extend-native
     Number.prototype.isPositive = function () {
       return Math.sign(Number(this)) === 1;
     };
   }
   if(Number().isNegative === undefined){
-    // eslint-disable-next-line no-extend-native
     Number.prototype.isNegative = function (){
       return !this.isPositive()
     }
   }
 };
+ 

ui/src/core/extensions/string.ts

@@ -1,13 +1,11 @@
 /* eslint-disable no-extend-native */
 export const StringExtensions = () => {
   if ("".isEmpty === undefined) {
-    // eslint-disable-next-line no-extend-native
     String.prototype.isEmpty = function () {
       return this.length === 0;
     };
   }
   if ("".isNotEmpty === undefined) {
-    // eslint-disable-next-line no-extend-native
     String.prototype.isNotEmpty = function () {
       return this.length !== 0;
     };
@@ -46,4 +44,13 @@ export const StringExtensions = () => {
       return !this.hasPattern(pattern);
     };
   }
+  if (''.divideByIndex === undefined) {
+    String.prototype.divideByIndex = function (index) {
+      if (this.at(index) === undefined) {
+        return []
+      }
+
+      return [this.slice(0, index), this.slice(index+1, this.length)]
+    }
+  }
 };

ui/src/core/helper/typed_event.ts

@@ -40,3 +40,5 @@ export class TypedEvent<T> {
     return this.on((e) => te.emit(e));
   };
 }
+
+

ui/src/core/repository/babylon_repository.ts

@@ -1,37 +1,36 @@
 import { Scene, Engine, MeshBuilder, FreeCamera, HemisphericLight, Vector3, SceneLoader } from 'babylonjs';
-import { GLTFFileLoader, STLFileLoader } from 'babylonjs-loaders';
+import { GLTFFileLoader } from 'babylonjs-loaders';
+
 
- 
 export class BabylonRepository {
     engine: Engine;
     canvas: HTMLCanvasElement;
     scene: Scene;
+    sceneLoader: SceneLoader
     constructor(canvas: HTMLCanvasElement) {
+        this.sceneLoader = new SceneLoader();
         this.engine = new Engine(canvas, true);
-        this.scene = this.CreateScene();
+        this.scene = new Scene(this.engine);
         this.engine.runRenderLoop(() => {
             this.scene.render();
         });
-        const Camera = new FreeCamera("camera", new Vector3(0, 1, -5), this.scene);
-        Camera.attachControl();
-        const light = new HemisphericLight("light", new Vector3(0, 1, 0), this.scene);
-        light.intensity = 0.5;
-        //3D Object
-        // const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, this.scene);
-        // const sphereball = MeshBuilder.CreateSphere("sphereball", { diameter: 1 }, this.scene);
-        // sphereball.position = new Vector3(0, 1, 0)
-
+        this.scene.createDefaultCameraOrLight(true, true, true);
+        new HemisphericLight("hemiLight", new Vector3(0, 1, 0));
         SceneLoader.RegisterPlugin(new GLTFFileLoader())
-        SceneLoader.RegisterPlugin(new STLFileLoader());
+        SceneLoader.ImportMeshAsync("",
+            "http://localhost:4001/1dfc4e1a-9c1a-4fa2-96b2-19c86acb6ea4/assets/libs/objects/",
+            "sol_gear.glb", this.scene)
 
     }
-    CreateScene(): Scene {
-        const scene = new Scene(this.engine);
-        return scene;
-    }
-    load = (url: string) => {
+    deleteAllObjectsScene = () => this.scene.meshes.forEach((el) => this.scene.removeMesh(el, true))
 
-        SceneLoader.LoadAssetContainer(url)
+    loadHttp = (url: string) => {
+        const divide = url.divideByIndex(url.lastIndexOf('/'))
+
+        SceneLoader.ImportMeshAsync("",
+            `${divide.at(0)}/`,
+            `${divide.at(1)}`, this.scene).then((frame) => {
+            });
 
     }
 }

ui/src/core/repository/core_three_repository.ts

@@ -20,9 +20,7 @@ import {
   CameraHelper,
   Quaternion,
   MeshBasicMaterial,
-  PlaneGeometry,
   BoxGeometry,
-  AxesHelper,
   MeshStandardMaterial
 } from "three";
 import { TypedEvent } from "../helper/typed_event";
@@ -37,8 +35,9 @@ import { SceneMode } from "../../features/scene_manager/model/scene_view";
 import { throttle } from "../helper/throttle";
 import { Asset, InstanceRgbCamera, RobossemblerAssets, SceneSimpleObject } from "../model/robossembler_assets";
 import { LoadingManager } from 'three';
-import URDFLoader, { URDFLink } from 'urdf-loader';
 import { UrdfTransforms, coordsToQuaternion } from "../../features/simulations/tranforms_model";
+import URDFLoader, { URDFLink } from 'urdf-loader';
+
 
 Object3D.DEFAULT_UP = new Vector3(0, 0, 1);
 
@@ -46,6 +45,7 @@ export enum UserData {
   selectedObject = "selected_object",
   cameraInitialization = "camera_initialization",
   objectForMagnetism = "object_for_magnetism",
+  loadObject = 'load_object'
 }
 
 interface IEventDraggingChange {
@@ -104,16 +104,26 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
 
     this.scene.add(this.transformControls);
     this.orbitControls = new OrbitControls(this.camera, this.htmlCanvasRef);
-    this.scene.background = new Color("black");
+    this.scene.background = new Color("white");
 
     this.init();
   }
+
+  deleteAllObjectsScene = () => {
+
+
+    this.getAllSceneNameModels().forEach((el) => this.scene.remove(this.scene.getObjectByName(el) as Object3D<Object3DEventMap>))
+  }
+
   drawPoint(point: Vector3): Mesh<BoxGeometry, MeshBasicMaterial, Object3DEventMap> {
     var cube = new Mesh(new BoxGeometry(0.5, 0.5, 0.5), new MeshBasicMaterial({ color: 0x0095dd }));
     cube.position.add(point);
     this.scene.add(cube);
     return cube;
   }
+  getCenterPoint = (object: Object3D<Object3DEventMap>) => object.getWorldPosition(new Box3().setFromObject(object).getCenter(object.position));
+
+
   makeCube(inc: number, vector?: Vector3, color?: string, size?: number) {
     const cube = new Mesh(
       new BoxGeometry(size ?? 10, size ?? 10, size ?? 10),
@@ -128,6 +138,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
     }
     this.scene.add(cube);
   }
+
   makePoint(vector?: Vector3, color?: string, size?: number) {
     const cube = new Mesh(
       new BoxGeometry(size ?? 10, size ?? 10, size ?? 10),
@@ -152,7 +163,6 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
       robot => {
 
         this.scene.add(robot)
-        console.log(robot)
         // @ts-expect-error
         this.sceneFrame = robot.frames
 
@@ -188,14 +198,18 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
       new Quaternion(0, 0, 0, 0)
     );
   }
-  load(path: string, name: string, loadCallback?: Function) {
-    
-    this.loader(
-      'http://localhost:4001/1dfc4e1a-9c1a-4fa2-96b2-19c86acb6ea4/assets/libs/objects/untitled.glb',
-      loadCallback ? loadCallback : () => { },
-      name,
+  loadHttpAndPreview(path: string, name: string, loadCallback?: Function) {
 
+    this.loader(
+      path,
+      () => {
+        // this.fitCameraToCenteredObject([name])
+        // this.scene.getObjectByName(name)
+      },
+      name,
+      new Vector3(0, 0, 0)
     );
+
   }
 
   setTransformMode(mode?: SceneMode) {
@@ -324,6 +338,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
     floor.userData = {};
     floor.userData[UserData.cameraInitialization] = true;
     floor.up.copy(new Vector3(0, 0, 1))
+
     this.scene.add(floor);
   }
 
@@ -351,7 +366,6 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
 
   loader(url: string, callBack: Function, name: string, position?: Vector3, quaternion?: Quaternion) {
     const ext = url.split(/\./g).pop()!.toLowerCase();
-
     switch (ext) {
       case "gltf":
       case "glb":
@@ -359,7 +373,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
           url,
           (result) => {
             this.scene.add(result.scene)
-             
+            callBack()
           },
           (err) => { }
         );
@@ -378,6 +392,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
 
               this.emit(new StaticAssetItemModel(el.name, el.position, el.quaternion));
               this.scene.add(el);
+              callBack()
             });
           },
           (err) => { }
@@ -396,6 +411,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
         this.stlLoader.load(
           url,
           (result) => {
+
             const material = new MeshStandardMaterial({
               color: 'red',
               metalness: 0.35,
@@ -404,9 +420,20 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
               transparent: false,
             });
 
-            const mesh = new Mesh(result, material);
-            this.scene.add(mesh);
 
+            const mesh = new Mesh(result, material);
+            mesh.name = name;
+
+
+
+
+            // var geometry = mesh.geometry;
+            // geometry.computeBoundingBox(); // Вычисляем ограничивающий параллелепипед для геометрии
+
+            if (position) mesh.position.copy(position)
+
+            this.scene.add(mesh);
+            callBack()
           },
 
           (err) => { }
@@ -500,8 +527,7 @@ export class CoreThreeRepository extends TypedEvent<BaseSceneItemModel> {
     urdfTransforms.transforms.forEach((transform) => {
       if (this.sceneFrame) {
         const currentLink = this.sceneFrame[transform?.child_frame_id ?? ""]
-        const currentLinkParrent = this.sceneFrame[transform?.header.frame_id ?? ""]
-        // currentLink.position.copy(coordsToVector(transform.transform.translation))
+
         currentLink.quaternion.copy(coordsToQuaternion(transform.transform.rotation))
       }
     })

ui/src/core/repository/http_repository.ts

@@ -1,5 +1,7 @@
 import { ClassConstructor, plainToInstance } from "class-transformer";
 import { Result } from "../helper/result";
+import { Parts } from "../../features/details/details_http_repository";
+import { UUID } from "../../features/all_projects/data/project_repository";
 
 export enum HttpMethod {
   GET = "GET",
@@ -16,7 +18,6 @@ export class HttpError extends Error {
     this.status = status;
   }
 }
-
 export class HttpRepository {
   private server = "http://localhost:4001";
   public async _formDataRequest<T>(method: HttpMethod, url: string, data?: any): Promise<Result<HttpError, T>> {
@@ -96,5 +97,13 @@ export class HttpRepository {
       return Result.error(new HttpError(error, 0));
     }
   }
-  
+}
+
+export class CoreHttpRepository extends HttpRepository {
+  getAssetsActiveProject = async (): Promise<Result<HttpError, Parts[]>> => {
+    return this._jsonRequest<Parts[]>(HttpMethod.GET, "/projects/assets");
+  };
+  async getActiveProjectId() {
+    return this._jsonRequest<UUID>(HttpMethod.GET, "/projects/get/active/project/id");
+  }
 }

ui/src/core/ui/pages/main_page.tsx

@@ -27,15 +27,17 @@ const Block = (props: IBlockProps) => {
         style={
           props.isActive
             ? {
-                textAlignLast: "center",
-                height: 32,
-                backgroundColor: "rgba(232, 222, 248, 1)",
-                marginLeft: 5,
-                marginRight: 5,
-                alignContent: "center",
-                borderRadius: 12,
-              }
-            : { textAlignLast: "center", alignContent: "center" }
+              textAlignLast: "center",
+              height: 32,
+              backgroundColor: "rgba(232, 222, 248, 1)",
+              marginLeft: 5,
+              marginRight: 5,
+              alignContent: "center",
+              borderRadius: 12,
+            }
+            : {
+              textAlignLast: "center", alignContent: "center", height: 32,
+            }
         }
       >
         <Icon type={props.icon ?? ""} />