Merge pull request #14 from RyugaRyuzaki/develop

add logic draw

package.json

@@ -42,6 +42,7 @@
         "three": "^0.163.0",
         "three-mesh-bvh": "^0.7.4",
         "three-stdlib": "^2.29.6",
+        "uuid": "^9.0.1",
         "web-ifc": "^0.0.54"
     },
     "devDependencies": {

src/BimModel/index.ts

@@ -1,13 +1,14 @@
 import {
   Components,
-  CubeMapComponent,
   disposeSignals,
+  CubeMapComponent,
   MaterialComponent,
   ModelingComponent,
   PropertyComponent,
   RendererComponent,
   StructureComponent,
   ProjectComponent,
+  SystemComponent,
 } from "./src";
 
 export class BimModel {
@@ -47,6 +48,8 @@ export class BimModel {
     propertyComponent.enabled = true;
     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

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import {Component, Disposable} from "../types";
+import {Disposable} from "../types";
 import {ToolComponent} from "../Tool";
 import {
   acceleratedRaycast,
@@ -8,6 +8,7 @@ import {
 } from "three-mesh-bvh";
 import {effect} from "@preact/signals-react";
 import {appTheme} from "@signals/theme";
+import {isModelingSignal, isOrthoSignal, keyboardSignal} from "../Signals";
 /**
  * The entry point of Open BIM Components.
  * It contains the basic items to create a BIM 3D scene based on Three.js, as
@@ -32,21 +33,26 @@ export class Components implements Disposable {
   set setupEvent(enabled: boolean) {
     if (enabled) {
       window.addEventListener("resize", this.onResize);
+      document.addEventListener("keydown", this.onKeyDown);
+      document.addEventListener("keyup", this.onKeyUp);
     } else {
       window.removeEventListener("resize", this.onResize);
+      document.removeEventListener("keydown", this.onKeyDown);
+      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;
     effect(() => {
-      this.scene.background = appTheme.value === "dark" ? sceneBG : null;
+      this.scene.background = appTheme.value === "dark" ? null : sceneBG;
     });
   }
   async dispose() {
@@ -78,6 +84,16 @@ export class Components implements Disposable {
       }
     }
   };
+  private onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && isModelingSignal.value)
+      isModelingSignal.value = false;
+    if (e.key === "F8") isOrthoSignal.value = !isOrthoSignal.value;
+    keyboardSignal.value = e.key;
+  };
+  private onKeyUp = (_e: KeyboardEvent) => {
+    keyboardSignal.value = null;
+  };
+
   private initClock() {
     const clock = new THREE.Clock();
     clock.start();

src/BimModel/src/CubeMapComponent/index.ts

@@ -98,6 +98,17 @@ export class CubeMapComponent
     if (!this.container) throw new Error("Not Initialized!");
     return this.container.getBoundingClientRect();
   }
+  private _visible = false;
+  set visible(visible: boolean) {
+    if (!this.container || !this.components.container) return;
+    if (this._visible === visible) return;
+    this._visible = visible;
+    if (visible) {
+      this.components.container.appendChild(this.container);
+    } else {
+      this.container.remove();
+    }
+  }
   /**
    *
    */
@@ -159,7 +170,7 @@ export class CubeMapComponent
     this.container.style.position = "absolute";
     this.container.style.zIndex = "20";
     this.container.appendChild(this.canvas);
-    container.appendChild(this.container);
+    this.visible = true;
     this.align = "top-right";
   }
 

src/BimModel/src/MaterialComponent/index.ts

@@ -1,15 +1,25 @@
 import * as THREE from "three";
+import {LineMaterial} from "three/examples/jsm/lines/LineMaterial";
 import {Components} from "../Components";
 import {ToolComponent} from "../Tool";
-import {Component, Disposable, UUID} from "../types";
-export class MaterialComponent extends Component<string> implements Disposable {
+import {Component, Disposable, Updateable, UUID} from "../types";
+import {effect} from "@preact/signals-react";
+import {clippingPlanesSignal, lineTypeSignal} from "../Signals";
+
+export class MaterialComponent
+  extends Component<string>
+  implements Disposable, Updateable
+{
   static readonly uuid = UUID.MaterialComponent;
+  static readonly exclude = ["LocationMaterial"];
   enabled = false;
   listMaterial: Map<
     string,
-    THREE.MeshLambertMaterial | THREE.MeshBasicMaterial
+    THREE.MeshLambertMaterial | THREE.MeshBasicMaterial | LineMaterial
   > = new Map();
-
+  get LocationMaterial() {
+    return this.listMaterial.get("LocationMaterial");
+  }
   get() {
     return MaterialComponent.uuid;
   }
@@ -19,6 +29,34 @@ export class MaterialComponent extends Component<string> implements Disposable {
   constructor(components: Components) {
     super(components);
     this.components.tools.add(MaterialComponent.uuid, this);
+    this.addMaterial(
+      "LocationMaterial",
+      new LineMaterial({
+        linewidth: 1, // in world units with size attenuation, pixels otherwise
+        vertexColors: true,
+        color: 0xfcb603,
+        alphaToCoverage: true,
+        dashed: false,
+        dashScale: 1,
+        dashSize: 1,
+        gapSize: 1,
+        depthTest: false,
+      })
+    );
+    effect(() => {
+      for (const [name, mat] of this.listMaterial) {
+        if (MaterialComponent.exclude.includes(name)) continue;
+        mat.clippingPlanes = clippingPlanesSignal.value;
+      }
+    });
+    effect(() => {
+      (this.LocationMaterial as LineMaterial).linewidth =
+        lineTypeSignal.value === "thin" ? 0.5 : 3;
+    });
+  }
+  update(_delta?: number): void {
+    const {width, height} = this.components.rect;
+    (this.LocationMaterial as LineMaterial)?.resolution.set(width, height);
   }
   async dispose() {
     for (const [_, mat] of this.listMaterial) {
@@ -29,7 +67,7 @@ export class MaterialComponent extends Component<string> implements Disposable {
 
   addMaterial(
     name: string,
-    mat: THREE.MeshLambertMaterial | THREE.MeshBasicMaterial
+    mat: THREE.MeshLambertMaterial | THREE.MeshBasicMaterial | LineMaterial
   ) {
     if (this.listMaterial.has(name))
       throw new Error("Material's name is existed!");

src/BimModel/src/ModelingComponent/index.ts

@@ -11,6 +11,7 @@ export class ModelingComponent extends Component<any> implements Disposable {
   get ProjectComponent(): ProjectComponent {
     return this.components.tools.get(ProjectComponent);
   }
+
   /**
    *
    */
@@ -22,6 +23,7 @@ export class ModelingComponent extends Component<any> implements Disposable {
     this.modelingContainer?.remove();
     this.optionContainer?.remove();
     (this.modelingContainer as any) = null;
+    (this.optionContainer as any) = null;
   }
   get() {
     throw new Error("Method not implemented.");
@@ -33,4 +35,5 @@ export class ModelingComponent extends Component<any> implements Disposable {
     option.appendChild(this.optionContainer);
   }
 }
+//
 ToolComponent.libraryUUIDs.add(ModelingComponent.uuid);

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

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

src/BimModel/src/ModelingComponent/src/LineOption/LineOption.tsx

@@ -0,0 +1,35 @@
+import React, {memo} from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@components/ui/select";
+import {lineTypeSignal, ListLineTypes} from "@BimModel/src/Signals";
+import {ILineType} from "@BimModel/src/ProjectComponent/types";
+const LineOption = () => {
+  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={lineTypeSignal.value}
+        onValueChange={(value: ILineType) => (lineTypeSignal.value = value)}
+      >
+        <SelectTrigger className="w-[130px] h-[80%] my-auto mx-1">
+          <SelectValue placeholder="Unit" />
+        </SelectTrigger>
+        <SelectContent>
+          {ListLineTypes.map((unit: ILineType, index: number) => (
+            <SelectItem key={`${unit}-${index}`} value={unit}>
+              {unit}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};
+
+export default memo(LineOption);

src/BimModel/src/ModelingComponent/src/Modeling/ContentModeling.tsx

@@ -1,5 +1,5 @@
 import React, {FC, useState} from "react";
-import {IModeling, ITool} from "@BimModel/src/types";
+import {IModeling, ITool} from "@ModelingComponent/types";
 import ModelingButton from "./ModelingButton";
 import {useSignalEffect} from "@preact/signals-react";
 import {modelingSignal} from "@BimModel/src/Signals";

src/BimModel/src/ModelingComponent/src/Modeling/FileTabs.tsx

@@ -8,8 +8,7 @@ import {CiSaveDown2 as Save} from "react-icons/ci";
 import dotbim from "@assets/dotbim.png";
 import gltf from "@assets/gltf-icon.png";
 import ifc from "@assets/ifc-icon.png";
-import revit from "@assets/revit-256.png";
-import {ITool} from "@BimModel/src/types";
+import {ITool} from "@ModelingComponent/types";
 import {
   Tooltip,
   TooltipContent,

src/BimModel/src/ModelingComponent/src/Modeling/ModelingButton.tsx

@@ -1,18 +1,19 @@
 import React, {FC} from "react";
-import {ITool} from "@BimModel/src/types";
+import {ITool} from "@ModelingComponent/types";
 import {Button} from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {modelingSignal} from "@BimModel/src/Signals";
+import {isModelingSignal, modelingSignal} from "@BimModel/src/Signals";
 import {useComputed} from "@preact/signals-react";
 
 const ModelingButton: FC<Props> = ({type, discipline}) => {
   const handleModeling = (type: string) => {
     modelingSignal.value = {discipline, type};
+    isModelingSignal.value = true;
   };
   const disabled = useComputed(() => {
     return (
@@ -24,6 +25,7 @@ const ModelingButton: FC<Props> = ({type, discipline}) => {
       modelingSignal.value !== null && modelingSignal.value.type === type.type
     );
   });
+
   return (
     <TooltipProvider delayDuration={10}>
       <Tooltip>

src/BimModel/src/ModelingComponent/src/Modeling/ModelingTabs.tsx

@@ -1,7 +1,7 @@
 import React, {memo} from "react";
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
 import {ModelingTools} from "../constants";
-import {IModelingToolTabs} from "@BimModel/src/types";
+import {IModelingToolTabs} from "@ModelingComponent/types";
 import ContentModeling from "./ContentModeling";
 import {
   disciplineSignal,
@@ -28,9 +28,8 @@ const ModelingTabs = () => {
             value={tab.discipline}
             className="mx-1 select-none"
             disabled={
-              !projectSignal.value ||
-              (modelingSignal.value !== null &&
-                modelingSignal.value.discipline !== tab.discipline)
+              modelingSignal.value !== null &&
+              modelingSignal.value.discipline !== tab.discipline
             }
           >
             {tab.discipline}

src/BimModel/src/ModelingComponent/src/Modeling/ToolButton.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from "react";
-import {IModeling} from "@BimModel/src/types";
+import {IModeling} from "@ModelingComponent/types";
 import {Button} from "@/components/ui/button";
 import {
   Tooltip,

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

@@ -7,15 +7,16 @@ import {
   SelectValue,
 } from "@components/ui/select";
 import {ListUnits, unitSignal} from "@BimModel/src/Signals";
-import {IUnit} from "@BimModel/src/types";
+import {IUnit} from "@BimModel/src/ProjectComponent/types";
 const Units = () => {
   return (
-    <div className="relative h-full flex justify-center items-center mr-[20px]">
+    <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)}
       >
-        <SelectTrigger className="w-[130px] h-[80%] my-auto">
+        <SelectTrigger className="w-[130px] h-[80%] my-auto mx-1">
           <SelectValue placeholder="Unit" />
         </SelectTrigger>
         <SelectContent>