fix: updated annotation components (#254)

src/annotation/ArrowAnnotation/index.ts

@@ -5,28 +5,31 @@ import { SVGArrow } from "../SVGArrow";
 import { DrawManager } from "../DrawManager";
 
 export class ArrowAnnotation extends BaseSVGAnnotation {
-  name: string = "ArrowAnnotation";
+  readonly name: string = "ArrowAnnotation";
   canvas: HTMLCanvasElement | null = null;
   uiElement = new UIElement<{ main: Button }>();
 
   private _previewElement: SVGArrow;
 
-  constructor(components: Components, drawManager?: DrawManager) {
+  constructor(components: Components) {
     super(components);
     this._previewElement = new SVGArrow(components);
-    this.drawManager = drawManager;
+    const drawManager = this.components.tools.get(DrawManager);
+    if (components.uiEnabled) {
+      this.setUI();
+    }
+    drawManager.addDrawingTool(this.name, this);
+  }
 
-    const main = new Button(components);
-    this.uiElement.set({ main });
+  private setUI() {
+    const drawManager = this.components.tools.get(DrawManager);
+    const main = new Button(this.components);
     main.label = "Arrow";
     main.materialIcon = "north_east";
     main.onClick.add(() => {
-      if (this.drawManager) {
-        this.drawManager.activateTool(this);
-      } else {
-        this.enabled = !this.enabled;
-      }
+      drawManager.activateTool(this);
     });
+    this.uiElement.set({ main });
   }
 
   async dispose() {
@@ -45,24 +48,25 @@ export class ArrowAnnotation extends BaseSVGAnnotation {
 
   start = (event: MouseEvent) => {
     if (!this.canDraw) {
-      return undefined;
+      return null;
     }
+    const drawManager = this.components.tools.get(DrawManager);
     if (!this._isDrawing) {
       this._isDrawing = true;
-      this._previewElement.setStyle(this.drawManager?.viewport.config);
+      this._previewElement.setStyle(drawManager.viewport.config);
       this._previewElement.x1 = event.clientX;
       this._previewElement.y1 = event.clientY;
       this._previewElement.x2 = event.clientX;
       this._previewElement.y2 = event.clientY;
       this.svgViewport?.append(this._previewElement.get());
     } else {
       const arrow = this._previewElement.clone();
-      arrow.setStyle(this.drawManager?.viewport.config);
+      arrow.setStyle(drawManager.viewport.config);
       this.svgViewport?.append(arrow.get());
       this.cancel();
       return arrow;
     }
-    return undefined;
+    return null;
   };
 
   draw = (e: MouseEvent) => {

src/annotation/CircleAnnotation/index.ts

@@ -6,29 +6,32 @@ import { DrawManager } from "../DrawManager";
 import { SVGCircle } from "../SVGCircle";
 
 export class CircleAnnotation extends BaseSVGAnnotation {
-  name: string = "CircleAnnotation";
+  readonly name: string = "CircleAnnotation";
   canvas: HTMLCanvasElement | null = null;
   uiElement = new UIElement<{ main: Button }>();
 
   private _previewElement: SVGCircle;
   private _cursorPosition: Vector2 = new Vector2();
 
-  constructor(components: Components, drawManager?: DrawManager) {
+  constructor(components: Components) {
     super(components);
     this._previewElement = new SVGCircle(components);
-    this.drawManager = drawManager;
+    const drawManager = this.components.tools.get(DrawManager);
+    if (components.uiEnabled) {
+      this.setUI();
+    }
+    drawManager.addDrawingTool("circle_annotation", this);
+  }
 
-    const main = new Button(components);
-    this.uiElement.set({ main });
+  private setUI() {
+    const drawManager = this.components.tools.get(DrawManager);
+    const main = new Button(this.components);
     main.label = "Circle";
     main.materialIcon = "radio_button_unchecked";
     main.onClick.add(() => {
-      if (this.drawManager) {
-        this.drawManager.activateTool(this);
-      } else {
-        this.enabled = !this.enabled;
-      }
+      drawManager.activateTool(this);
     });
+    this.uiElement.set({ main });
   }
 
   async dispose() {
@@ -38,22 +41,23 @@ export class CircleAnnotation extends BaseSVGAnnotation {
 
   start = (e: MouseEvent) => {
     if (!this.canDraw) {
-      return undefined;
+      return null;
     }
+    const drawManager = this.components.tools.get(DrawManager);
     if (!this._isDrawing) {
       this._isDrawing = true;
-      this._previewElement.setStyle(this.drawManager?.viewport.config);
+      this._previewElement.setStyle(drawManager.viewport.config);
       this._previewElement.cx = e.clientX;
       this._previewElement.cy = e.clientY;
       this.svgViewport?.append(this._previewElement.get());
     } else {
       const circle = this._previewElement.clone();
-      circle.setStyle(this.drawManager?.viewport.config);
+      circle.setStyle(drawManager.viewport.config);
       this.svgViewport?.append(circle.get());
       this.cancel();
       return circle;
     }
-    return undefined;
+    return null;
   };
 
   cancel = () => {

src/annotation/DrawManager/index.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="../../../resources/styles.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="icon" type="image/x-icon" href="../../../resources/favicon.ico">
+  <title>Tools Component</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    .full-screen {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+<div class="full-screen" id="container"></div>
+<script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/[email protected]/build/three.module.js",
+        "openbim-components": "../../../resources/openbim-components.js"
+      }
+    }
+</script>
+<script type="module">
+
+  // Set up scene (see SimpleScene tutorial)
+
+  import * as THREE from 'three';
+  import * as OBC from 'openbim-components';
+
+  const container = document.getElementById('container');
+
+  const components = new OBC.Components();
+
+  components.scene = new OBC.SimpleScene(components);
+  components.renderer = new OBC.PostproductionRenderer(components, container);
+  components.camera = new OBC.SimpleCamera(components);
+  components.raycaster = new OBC.SimpleRaycaster(components);
+
+  components.init();
+
+  components.renderer.postproduction.enabled = true;
+
+  const scene = components.scene.get();
+
+  components.camera.controls.setLookAt(12, 6, 8, 0, 0, -10);
+
+  components.scene.setup();
+
+  const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
+  const customEffects = components.renderer.postproduction.customEffects;
+  customEffects.excludedMeshes.push(grid.get());
+
+  // Tutorial starts here
+  const drawManager = new OBC.DrawManager(components)
+  const arrowAnnotation = new OBC.ArrowAnnotation(components)
+  const circleAnnotation = new OBC.CircleAnnotation(components)
+  const rectangleAnnotation = new OBC.RectangleAnnotation(components)
+  const textAnnotation = new OBC.TextAnnotation(components)
+
+  const mainToolbar = new OBC.Toolbar(components)
+  mainToolbar.addChild(
+    drawManager.uiElement.get("main")
+  )
+
+  components.ui.addToolbar(mainToolbar)
+
+</script>
+</body>
+</html>

src/annotation/DrawManager/index.ts

@@ -1,15 +1,17 @@
 import {
-  Component,
   UI,
   BaseSVGAnnotation,
   Disposable,
   UIElement,
   Event,
 } from "../../base-types";
-import { Components, SimpleSVGViewport } from "../../core";
-import { Button, Toolbar } from "../../ui";
+import { Component } from "../../base-types/component";
+import { Components } from "../../core/Components";
+import { SimpleSVGViewport } from "../../core/SimpleSVGViewport";
+import { Button } from "../../ui/ButtonComponent";
+import { Toolbar } from "../../ui/ToolbarComponent";
 
-export class DrawManager extends Component<string> implements UI, Disposable {
+export class DrawManager extends Component<null> implements UI, Disposable {
   static readonly uuid = "4ab8b0f4-665d-4ea2-8f6e-66c98ed04392";
   name: string = "DrawManager";
 
@@ -42,8 +44,10 @@ export class DrawManager extends Component<string> implements UI, Disposable {
 
   set enabled(value: boolean) {
     this._enabled = value;
-    this.uiElement.get("main").active = value;
-    this.uiElement.get("drawingTools").visible = value;
+    if (this.components.uiEnabled) {
+      this.uiElement.get("main").active = value;
+      this.uiElement.get("drawingTools").visible = value;
+    }
     this.viewport.enabled = value;
   }
 
@@ -88,15 +92,27 @@ export class DrawManager extends Component<string> implements UI, Disposable {
   addDrawingTool(name: string, tool: BaseSVGAnnotation) {
     const existingTool = this.drawingTools[name];
     if (!existingTool) {
-      const main = this.uiElement.get("main");
-      this.uiElement.get("drawingTools").addChild(main);
+      if (this.components.uiEnabled) {
+        const main = tool.uiElement.get("main");
+        this.uiElement.get("drawingTools").addChild(main);
+      }
+      tool.svgViewport = this.viewport.get();
       this.drawingTools[name] = tool;
     }
   }
 
   activateTool(tool: BaseSVGAnnotation) {
-    const drawingTools = Object.values(this.drawingTools);
-    drawingTools.forEach((tool) => (tool.enabled = false));
+    const tools = Object.values(this.drawingTools);
+    const existingTool = tools.find((t) => t === tool);
+    if (!existingTool) {
+      console.warn(
+        "DrawManager: Tried to activate a drawing tool that is not registered yet."
+      );
+      return;
+    }
+    for (const t of tools) {
+      t.enabled = false;
+    }
     tool.enabled = true;
   }
 
@@ -106,15 +122,21 @@ export class DrawManager extends Component<string> implements UI, Disposable {
   }
 
   private setUI() {
+    const viewportToolbar = this.viewport.uiElement.get<Toolbar>("toolbar");
     const drawingTools = new Toolbar(this.components, { position: "top" });
+    setTimeout(() => {
+      drawingTools.visible = false;
+      viewportToolbar.visible = false;
+    }, 0.001);
     this.components.ui.addToolbar(drawingTools);
+    this.components.ui.addToolbar(viewportToolbar);
     const main = new Button(this.components);
     main.materialIcon = "gesture";
     main.onClick.add(() => (this.enabled = !this.enabled));
     this.uiElement.set({ drawingTools, main });
   }
 
-  get(): string {
-    throw new Error("Method not implemented.");
+  get() {
+    return null;
   }
 }

src/annotation/RectangleAnnotation/index.ts

@@ -6,29 +6,32 @@ import { DrawManager } from "../DrawManager";
 import { SVGRectangle } from "../SVGRectangle";
 
 export class RectangleAnnotation extends BaseSVGAnnotation {
-  name: string = "RectangleAnnotation";
+  readonly name: string = "RectangleAnnotation";
   canvas: HTMLCanvasElement | null = null;
   uiElement = new UIElement<{ main: Button }>();
 
   private _previewElement: SVGRectangle;
   private _startPoint: Vector2 = new Vector2();
 
-  constructor(components: Components, drawManager?: DrawManager) {
+  constructor(components: Components) {
     super(components);
     this._previewElement = new SVGRectangle(components);
-    this.drawManager = drawManager;
+    const drawManager = this.components.tools.get(DrawManager);
+    if (components.uiEnabled) {
+      this.setUI();
+    }
+    drawManager.addDrawingTool(this.name, this);
+  }
 
-    const main = new Button(components);
-    this.uiElement.set({ main });
+  private setUI() {
+    const drawManager = this.components.tools.get(DrawManager);
+    const main = new Button(this.components);
     main.label = "Rectangle";
     main.materialIcon = "crop_square";
     main.onClick.add(() => {
-      if (this.drawManager) {
-        this.drawManager.activateTool(this);
-      } else {
-        this.enabled = !this.enabled;
-      }
+      drawManager.activateTool(this);
     });
+    this.uiElement.set({ main });
   }
 
   async dispose() {
@@ -38,21 +41,22 @@ export class RectangleAnnotation extends BaseSVGAnnotation {
 
   start = (e: MouseEvent) => {
     if (!this.canDraw) {
-      return undefined;
+      return null;
     }
+    const drawManager = this.components.tools.get(DrawManager);
     if (!this._isDrawing) {
       this._isDrawing = true;
-      this._previewElement.setStyle(this.drawManager?.viewport.config);
+      this._previewElement.setStyle(drawManager.viewport.config);
       this._startPoint.set(e.clientX, e.clientY);
       this.svgViewport?.append(this._previewElement.get());
     } else {
       const rectangle = this._previewElement.clone();
-      rectangle.setStyle(this.drawManager?.viewport.config);
+      rectangle.setStyle(drawManager.viewport.config);
       this.svgViewport?.append(rectangle.get());
       this.cancel();
       return rectangle;
     }
-    return undefined;
+    return null;
   };
 
   cancel = () => {