✨ feat: add IViewGizmo interface

Author: xiangechen

packages/chili-core/src/visual/index.ts

@@ -11,6 +11,7 @@ export * from "./meshExporter";
 export * from "./textGenerator";
 export * from "./view";
 export * from "./viewport";
+export * from "./viewGizmo";
 export * from "./visual";
 export * from "./visualContext";
 export * from "./visualFactory";

packages/chili-core/src/visual/viewGizmo.ts

@@ -0,0 +1,8 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export interface IViewGizmo {
+    update(): void;
+    setDom(dom: HTMLElement): void;
+    dispose(): void;
+}

packages/chili-three/src/threeView.ts

@@ -11,6 +11,7 @@ import {
     IShapeFilter,
     ISubShape,
     IView,
+    IViewGizmo,
     IVisualObject,
     Matrix4,
     MultiShapeNode,
@@ -57,14 +58,15 @@ import { ViewGizmo } from "./viewGizmo";
 
 export class ThreeView extends Observable implements IView {
     private _dom?: HTMLElement;
-    private readonly _resizeObserver: ResizeObserver;
+    private _needsUpdate: boolean = false;
 
     private readonly _scene: Scene;
     private readonly _renderer: WebGLRenderer;
     private readonly _cssRenderer: CSS2DRenderer;
     private readonly _workplane: Plane;
-    private _needsUpdate: boolean = false;
-    private readonly _gizmo: ViewGizmo;
+    private readonly _gizmo: IViewGizmo;
+    private readonly _resizeObserver: ResizeObserver;
+
     readonly cameraController: CameraController;
     readonly dynamicLight = new DirectionalLight(0xffffff, 2);
 
@@ -114,7 +116,7 @@ export class ThreeView extends Observable implements IView {
         this._renderer = this.initRenderer();
         this._cssRenderer = this.initCssRenderer();
         this._scene.add(this.dynamicLight);
-        this._gizmo = new ViewGizmo(this);
+        this._gizmo = this.initGizmo();
         this.setPrivateValue("mode", ViewMode.solidAndWireframe);
         this.camera.layers.enableAll();
         this.document.application.views.push(this);
@@ -123,6 +125,7 @@ export class ThreeView extends Observable implements IView {
 
     override disposeInternal(): void {
         super.disposeInternal();
+        this._gizmo.dispose();
         this._resizeObserver.disconnect();
     }
 
@@ -163,18 +166,21 @@ export class ThreeView extends Observable implements IView {
         return renderer;
     }
 
-    private initCssRenderer() {
+    protected initCssRenderer() {
         let renderer = new CSS2DRenderer();
         return renderer;
     }
 
+    protected initGizmo(): IViewGizmo {
+        return new ViewGizmo(this);
+    }
+
     setDom(element: HTMLElement) {
         if (this._dom) {
             this._resizeObserver.unobserve(this._dom);
         }
         this._dom = element;
-        this._gizmo?.remove();
-        element.appendChild(this._gizmo);
+        this._gizmo.setDom(element);
 
         this._renderer.domElement.remove();
         this._renderer.domElement.style.userSelect = "none";

packages/chili-three/src/viewGizmo.ts

@@ -5,6 +5,7 @@ import { XYZ } from "chili-core";
 import { Matrix4, Vector3 } from "three";
 import { CameraController } from "./cameraController";
 import { ThreeView } from "./threeView";
+import { IViewGizmo } from "chili-core/src/visual/viewGizmo";
 
 const MOUSE_LEFT = 1;
 
@@ -36,7 +37,7 @@ export interface Axis {
     label?: string;
 }
 
-export class ViewGizmo extends HTMLElement {
+export class ViewGizmo extends HTMLElement implements IViewGizmo {
     private readonly _axes: Axis[];
     private readonly _center: Vector3;
     private readonly _canvas: HTMLCanvasElement;
@@ -55,6 +56,14 @@ export class ViewGizmo extends HTMLElement {
         this._context = this._canvas.getContext("2d")!;
         this._initStyle();
     }
+    setDom(dom: HTMLElement): void {
+        this.remove();
+        dom.appendChild(this);
+    }
+
+    dispose(): void {
+        this.remove();
+    }
 
     private _initStyle() {
         this.style.zIndex = "999";