update drawing

.env

@@ -1,4 +1,4 @@
-PORT=3006
+PORT=5001
 VITE_API_URL_DEV="http://localhost:3000"
 VITE_API_URL_PROD="localhost:3000"
 VITE_API_S3_PATH="https://s3.cloudfly.vn"

package.json

@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "@preact/signals-react": "^1.3.7",
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^2.0.0",
@@ -39,9 +40,11 @@
         "react-toastify": "^10.0.5",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-animated": "^1.0.1",
         "three": "^0.163.0",
         "three-mesh-bvh": "^0.7.4",
         "three-stdlib": "^2.29.6",
+        "vaul": "^0.9.1",
         "web-ifc": "^0.0.54"
     },
     "devDependencies": {
@@ -60,6 +63,8 @@
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.0.2",
-        "vite": "^4.3.9"
+        "vite": "^4.3.9",
+        "vite-plugin-glsl": "^1.3.0",
+        "vite-plugin-svgr": "^3.3.0"
     }
 }

src/BimModel/index.ts

@@ -6,6 +6,7 @@ import {
   ModelingComponent,
   PropertyComponent,
   RendererComponent,
+  RaycasterComponent,
   StructureComponent,
   ProjectComponent,
   SystemComponent,
@@ -33,22 +34,41 @@ export class BimModel {
 
   private init() {
     this.components = new Components(this.container);
+
+    /* =====MaterialComponent===== */
     const materialManager = this.components.tools.get(MaterialComponent);
     materialManager.enabled = true;
+
+    /* =====ProjectComponent===== */
     const projectComponent = this.components.tools.get(ProjectComponent);
     projectComponent.enabled = true;
+
+    /* =====RendererComponent===== */
     const renderer = this.components.tools.get(RendererComponent);
     renderer.enabled = true;
+
+    /* =====RaycasterComponent===== */
+    const raycasterComponent = this.components.tools.get(RaycasterComponent);
+    raycasterComponent.enabled = true;
+
+    /* =====CubeMapComponent===== */
     const cubeMapComponent = this.components.tools.get(CubeMapComponent);
     cubeMapComponent.enabled = true;
+
+    /* =====ModelingComponent===== */
     const modelingComponent = this.components.tools.get(ModelingComponent);
     modelingComponent.enabled = true;
     modelingComponent.init(this.modeling, this.option);
+
+    /* =====PropertyComponent===== */
     const propertyComponent = this.components.tools.get(PropertyComponent);
     propertyComponent.enabled = true;
+
+    /* =====StructureComponent===== */
     const structureComponent = this.components.tools.get(StructureComponent);
     structureComponent.enabled = true;
     structureComponent.init(this.structure);
+
     new SystemComponent(this.components);
     this.components.gameLoop();
   }

src/BimModel/src/Components/index.ts

@@ -8,7 +8,14 @@ import {
 } from "three-mesh-bvh";
 import {effect} from "@preact/signals-react";
 import {appTheme} from "@signals/theme";
-import {isModelingSignal, isOrthoSignal, keyboardSignal} from "../Signals";
+import {
+  isModelingSignal,
+  isOrthoSignal,
+  keyboardSignal,
+  visibilityStateSignal,
+} from "../Signals";
+import {RendererComponent} from "../RendererComponent";
+import {SceneBuilder} from "./types";
 /**
  * The entry point of Open BIM Components.
  * It contains the basic items to create a BIM 3D scene based on Three.js, as
@@ -28,8 +35,21 @@ export class Components implements Disposable {
 
   enabled = true;
   public scene = new THREE.Scene();
+  public modelScene = new SceneBuilder();
+  public annotationScene = new SceneBuilder();
   public canvas!: HTMLCanvasElement;
   private clock!: THREE.Clock;
+  get rect(): DOMRect {
+    if (!this.container) throw new Error("Not Initialized!");
+    return this.container.getBoundingClientRect();
+  }
+
+  set ctrlKey(enabled: boolean) {
+    const mouseButtons =
+      this.tools.get(RendererComponent)!.camera.cameraControls.mouseButtons;
+    if (!mouseButtons) return;
+    mouseButtons.left = visibilityStateSignal.value === "3D" && enabled ? 1 : 0;
+  }
   set setupEvent(enabled: boolean) {
     if (enabled) {
       window.addEventListener("resize", this.onResize);
@@ -41,16 +61,14 @@ export class Components implements Disposable {
       document.removeEventListener("keyup", this.onKeyUp);
     }
   }
-  get rect(): DOMRect {
-    if (!this.container) throw new Error("Not Initialized!");
-    return this.container.getBoundingClientRect();
-  }
 
   constructor(public container: HTMLDivElement) {
     this.init();
     this.setupBVH();
     this.tools = new ToolComponent(this);
     this.setupEvent = true;
+    this.scene.add(this.modelScene);
+    this.scene.add(this.annotationScene);
     effect(() => {
       this.scene.background = appTheme.value === "dark" ? null : sceneBG;
     });
@@ -60,6 +78,13 @@ export class Components implements Disposable {
     this.setupEvent = false;
     this.canvas?.remove();
     (this.canvas as any) = null;
+    this.modelScene.dispose();
+    this.modelScene.removeFromParent();
+    (this.modelScene as any) = null;
+    this.annotationScene.dispose();
+    this.annotationScene.removeFromParent();
+    (this.annotationScene as any) = null;
+    (this.scene as any) = null;
     await this.tools.dispose();
   }
   async init() {
@@ -89,9 +114,11 @@ export class Components implements Disposable {
       isModelingSignal.value = false;
     if (e.key === "F8") isOrthoSignal.value = !isOrthoSignal.value;
     keyboardSignal.value = e.key;
+    this.ctrlKey = e.key === "Control";
   };
   private onKeyUp = (_e: KeyboardEvent) => {
     keyboardSignal.value = null;
+    this.ctrlKey = false;
   };
 
   private initClock() {

src/BimModel/src/Components/types.ts

@@ -0,0 +1,18 @@
+/**
+ * @module Components
+ */
+import * as THREE from "three";
+import {Disposable} from "@BimModel/src/types";
+
+export class SceneBuilder extends THREE.Scene implements Disposable {
+  get meshes() {
+    return this.children;
+  }
+  /**
+   *
+   */
+  constructor() {
+    super();
+  }
+  async dispose() {}
+}

src/BimModel/src/MaterialComponent/index.ts

@@ -11,14 +11,17 @@ export class MaterialComponent
   implements Disposable, Updateable
 {
   static readonly uuid = UUID.MaterialComponent;
-  static readonly exclude = ["LocationMaterial"];
+  static readonly exclude = ["LocationMaterial", "DimensionMaterial"];
   enabled = false;
   listMaterial: Map<
     string,
     THREE.MeshLambertMaterial | THREE.MeshBasicMaterial | LineMaterial
   > = new Map();
-  get LocationMaterial() {
-    return this.listMaterial.get("LocationMaterial");
+  get LocationMaterial(): LineMaterial {
+    return this.listMaterial.get("LocationMaterial") as LineMaterial;
+  }
+  get DimensionMaterial(): LineMaterial {
+    return this.listMaterial.get("DimensionMaterial") as LineMaterial;
   }
   get() {
     return MaterialComponent.uuid;
@@ -34,12 +37,18 @@ export class MaterialComponent
       new LineMaterial({
         linewidth: 1, // in world units with size attenuation, pixels otherwise
         vertexColors: true,
-        color: 0xfcb603,
+        color: 0xeb1405,
+        alphaToCoverage: true,
+        depthTest: false,
+      })
+    );
+    this.addMaterial(
+      "DimensionMaterial",
+      new LineMaterial({
+        linewidth: 0.5, // in world units with size attenuation, pixels otherwise
+        vertexColors: true,
+        color: 0x0303fc,
         alphaToCoverage: true,
-        dashed: false,
-        dashScale: 1,
-        dashSize: 1,
-        gapSize: 1,
         depthTest: false,
       })
     );
@@ -51,12 +60,13 @@ export class MaterialComponent
     });
     effect(() => {
       (this.LocationMaterial as LineMaterial).linewidth =
-        lineTypeSignal.value === "thin" ? 0.5 : 3;
+        lineTypeSignal.value === "thin" ? 2 : 6;
     });
   }
   update(_delta?: number): void {
     const {width, height} = this.components.rect;
     (this.LocationMaterial as LineMaterial)?.resolution.set(width, height);
+    (this.DimensionMaterial as LineMaterial)?.resolution.set(width, height);
   }
   async dispose() {
     for (const [_, mat] of this.listMaterial) {

src/BimModel/src/ModelingComponent/index.ts

@@ -1,8 +1,18 @@
+/**
+ * @module ModelingComponent
+ */
+
 import {Components} from "../Components";
 import {ProjectComponent} from "../ProjectComponent";
 import {ToolComponent} from "../Tool";
 import {Component, Disposable, UUID} from "../types";
 import {createModelingContainer, createOptionContainer} from "./src";
+
+export {ModelingTools} from "./src/constants";
+
+/**
+ *
+ */
 export class ModelingComponent extends Component<any> implements Disposable {
   static readonly uuid = UUID.ModelingComponent;
   enabled = false;
@@ -21,8 +31,8 @@ export class ModelingComponent extends Component<any> implements Disposable {
   }
   async dispose() {
     this.modelingContainer?.remove();
-    this.optionContainer?.remove();
     (this.modelingContainer as any) = null;
+    this.optionContainer?.remove();
     (this.optionContainer as any) = null;
   }
   get() {

src/BimModel/src/ModelingComponent/src/InitComponents.tsx

@@ -8,6 +8,7 @@ import Units from "./Units/Units";
 import NewProject from "./Project/NewProject";
 import VisibilityOption from "./VisibilityOption/VisibilityOption";
 import LineOption from "./LineOption/LineOption";
+import WorkPlaneOption from "./WorkPlaneOption/WorkPlaneOption";
 
 export function createModelingContainer(modeling: ModelingComponent) {
   const div = document.createElement("div");
@@ -29,6 +30,7 @@ export function createOptionContainer(_modeling: ModelingComponent) {
       <ModelingOption />
       <div className="relative h-full flex justify-end">
         <VisibilityOption />
+        <WorkPlaneOption />
         <LineOption />
         <Units />
       </div>

src/BimModel/src/ModelingComponent/src/ModelingOption/ModelingOption.tsx

@@ -1,10 +1,9 @@
-import React from "react";
+import React, {useState} from "react";
 
 const ModelingOption = () => {
+  const [open, setOpen] = useState<boolean>(false);
   return (
-    <div className="relative h-full flex justify-start items-center">
-      ModelingOption
-    </div>
+    <div className="relative h-full flex justify-start items-center"></div>
   );
 };
 

src/BimModel/src/ModelingComponent/src/Units/Units.tsx

@@ -6,21 +6,21 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/ui/select";
-import {ListUnits, unitSignal} from "@BimModel/src/Signals";
-import {IUnit} from "@BimModel/src/ProjectComponent/types";
+import {ListUnits, unitSymbolSignal} from "@BimModel/src/Signals";
+import {IUnitSymbol} from "@BimModel/src/ProjectComponent/types";
 const Units = () => {
   return (
     <div className="relative h-full flex justify-center items-center">
       <div className="h-[80%] w-[1px] dark:bg-white bg-black my-auto"></div>
       <Select
-        value={unitSignal.value}
-        onValueChange={(value: IUnit) => (unitSignal.value = value)}
+        value={unitSymbolSignal.value}
+        onValueChange={(value: IUnitSymbol) => (unitSymbolSignal.value = value)}
       >
         <SelectTrigger className="w-[130px] h-[80%] my-auto mx-1">
           <SelectValue placeholder="Unit" />
         </SelectTrigger>
         <SelectContent>
-          {ListUnits.map((unit: IUnit, index: number) => (
+          {ListUnits.map((unit: IUnitSymbol, index: number) => (
             <SelectItem key={`${unit}-${index}`} value={unit}>
               {unit}
             </SelectItem>

src/BimModel/src/ModelingComponent/src/WorkPlaneOption/WorkPlaneOption.tsx

@@ -1,11 +1,47 @@
-import React, {memo} from "react";
+import React, {memo, useState} from "react";
+import {MdGridOff, MdGridOn} from "react-icons/md";
+import {Button} from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {showWorkPlaneSignal} from "@BimModel/src/Signals";
+import {iConClassName} from "../constants";
+import {useSignalEffect} from "@preact/signals-react";
 
 const WorkPlaneOption = () => {
+  const [tooltip, setTooltip] = useState<string>("Show WorkPlane");
+  const onChangeVisibility = () => {
+    showWorkPlaneSignal.value = !showWorkPlaneSignal.value;
+  };
+  useSignalEffect(() => {
+    setTooltip(showWorkPlaneSignal.value ? "Hide" : "Show" + " WorkPlane");
+  });
   return (
-    <div className="relative h-full flex justify-center items-center mr-[20px]">
-      <div className="h-[80%] w-[1px] dark:bg-white bg-black  my-auto"></div>
-
+    <div className="relative h-full flex justify-center items-center mx-2">
       <div className="h-[80%] w-[1px] dark:bg-white bg-black  my-auto"></div>
+      <TooltipProvider delayDuration={10}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="outline"
+              className={`h-[90%] p-1 my-auto mx-1 hover:bg-green-400 disabled:cursor-none`}
+              onClick={onChangeVisibility}
+            >
+              {showWorkPlaneSignal.value ? (
+                <MdGridOff className={iConClassName} />
+              ) : (
+                <MdGridOn className={iConClassName} />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </div>
   );
 };