@shapediver/viewer.features.drawing-tools 3.1.0

package/src/business/implementation/managers/HistoryManager.ts

@@ -0,0 +1,101 @@
+import { addListener, EVENTTYPE_DRAWING_TOOLS, IEvent } from '@shapediver/viewer';
+import { DrawingToolsEventResponseMapping } from '../../interfaces/events/EventResponseMapping';
+import { DrawingToolsManager } from '../DrawingToolsManager';
+import { IManager } from '../../interfaces/IManager';
+import { PointsData } from '../../interfaces/IDrawingToolsManager';
+
+// #region Type aliases (1)
+
+export type HistoryState = {
+    points: PointsData;
+};
+
+// #endregion Type aliases (1)
+
+// #region Classes (1)
+
+export class HistoryManager implements IManager {
+    // #region Properties (3)
+
+    #currentStateIndex: number = -1;
+    #drawingToolsManager: DrawingToolsManager;
+    #history: HistoryState[] = [];
+
+    // #endregion Properties (3)
+
+    // #region Constructors (1)
+
+    constructor(drawingToolsManager: DrawingToolsManager) {
+        this.#drawingToolsManager = drawingToolsManager;
+
+        addListener(EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED, (e: IEvent) => {
+            const event = e as DrawingToolsEventResponseMapping[EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED];
+            if (event.temporary === false && event.points !== undefined && event.fromHistory !== true && event.recordHistory !== false) {
+                /**
+                 * DO SOME CHECKS TO ENSURE THAT THE STATE IS CORRECT
+                 */
+                // 1. within number of points
+                if (this.#drawingToolsManager.geometryState.checkNumberOfPoints(event.points.length) === false) return;
+                // 2. closed loop if it should be closed
+                if (this.#drawingToolsManager.settings.geometry.close === true && this.#drawingToolsManager.geometryState.closeLoop === false && this.#drawingToolsManager.settings.geometry.autoClose === false) return;
+
+                this.recordState({
+                    points: event.points
+                });
+            }
+        });
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Methods (8)
+
+    public applyState(state: HistoryState): void {
+        this.#drawingToolsManager.geometryState.updateDataFromHistory(state.points);
+    }
+
+    public canRedo(): boolean {
+        return this.#currentStateIndex < this.#history.length - 1;
+    }
+
+    public canUndo(): boolean {
+        return this.#currentStateIndex > 0;
+    }
+
+    public close(): void {
+        this.#currentStateIndex = -1;
+        this.#history = [];
+    }
+
+    public getState(): HistoryState {
+        return this.#history[this.#currentStateIndex];
+    }
+
+    public recordState(state: HistoryState): void {
+        this.#history = this.#history.slice(0, this.#currentStateIndex + 1);
+        this.#history.push(state);
+        this.#currentStateIndex = this.#history.length - 1;
+    }
+
+    public redo(): void {
+        if (!this.canRedo()) return;
+
+        if (this.#currentStateIndex < this.#history.length - 1)
+            this.#currentStateIndex++;
+
+        this.applyState(this.#history[this.#currentStateIndex]);
+    }
+
+    public undo(): void {
+        if (!this.canUndo()) return;
+
+        if (this.#currentStateIndex > 0)
+            this.#currentStateIndex--;
+
+        this.applyState(this.#history[this.#currentStateIndex]);
+    }
+
+    // #endregion Public Methods (8)
+}
+
+// #endregion Classes (1)

package/src/business/implementation/managers/TextVisualizationManager.ts

@@ -0,0 +1,245 @@
+import * as THREE from 'three';
+import {
+    addListener,
+    EVENTTYPE_DRAWING_TOOLS,
+    ITreeNode,
+    IViewportApi,
+    ThreejsData,
+    TreeNode
+} from '@shapediver/viewer';
+import { CSS2DObject, CSS2DRenderer } from '../../../three/CSS2DRenderer';
+import { DrawingToolsManager } from '../DrawingToolsManager';
+import { IManager } from '../../interfaces/IManager';
+import { numberCleaner } from '../utils/numberCleaner';
+import { Settings } from '../../interfaces/IDrawingToolsManager';
+import { vec3 } from 'gl-matrix';
+
+export class TextVisualizationManager implements IManager {
+    // #region Properties (11)
+
+    readonly #drawingToolsManager: DrawingToolsManager;
+    readonly #labelRenderer: CSS2DRenderer;
+    readonly #parentNode: ITreeNode;
+    readonly #settings: Settings;
+    readonly #viewport: IViewportApi;
+    readonly #visualizationNode: TreeNode = new TreeNode('TextVisualizationNode');
+
+    #distanceObject3D: THREE.Object3D;
+    #object3D: THREE.Object3D;
+    #positionObject3D: THREE.Object3D;
+    #showDistanceLabels: boolean = true;
+    #showPointLabels: boolean = true;
+
+    #prevWidth: number = 0;
+    #prevHeight: number = 0;
+
+    // #endregion Properties (11)
+
+    // #region Constructors (1)
+
+    constructor(drawingToolsManager: DrawingToolsManager) {
+        this.#drawingToolsManager = drawingToolsManager;
+        this.#viewport = drawingToolsManager.viewport;
+        this.#settings = drawingToolsManager.settings;
+        this.#parentNode = drawingToolsManager.parentNode;
+
+        this.#labelRenderer = new CSS2DRenderer();
+        this.#labelRenderer.setSize(this.#viewport.canvas.clientWidth, this.#viewport.canvas.clientHeight);
+        this.#labelRenderer.domElement.style.userSelect = 'none';
+        this.#labelRenderer.domElement.style.cursor = 'default';
+        this.#labelRenderer.domElement.style.pointerEvents = 'none';
+        this.#labelRenderer.domElement.style.overflow = 'hidden';
+        this.#labelRenderer.domElement.style.position = 'absolute';
+        this.#labelRenderer.domElement.style.width = '100%';
+        this.#labelRenderer.domElement.style.height = '100%';
+        this.#labelRenderer.domElement.style.left = '0%';
+        this.#labelRenderer.domElement.style.top = '0%';
+        this.#viewport.canvas.parentElement!.appendChild(this.#labelRenderer.domElement);
+
+        this.#viewport.postRenderingCallback = (renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera) => {
+            if(this.#prevWidth !== renderer.domElement.clientWidth || this.#prevHeight !== renderer.domElement.clientHeight) {
+                this.#prevWidth = renderer.domElement.clientWidth;
+                this.#prevHeight = renderer.domElement.clientHeight;
+                this.#labelRenderer.setSize(renderer.domElement.clientWidth, renderer.domElement.clientHeight);
+            }
+
+            if (this.#labelRenderer.domElement.clientWidth !== renderer.domElement.clientWidth || this.#labelRenderer.domElement.clientHeight !== renderer.domElement.clientHeight) {
+                this.#labelRenderer.setSize(renderer.domElement.clientWidth, renderer.domElement.clientHeight);
+            }
+            this.#labelRenderer.render(scene, camera);
+        };
+
+        this.#object3D = new THREE.Object3D();
+        this.#positionObject3D = new THREE.Object3D();
+        this.#positionObject3D.visible = this.#settings.visualization.pointLabels;
+        this.#distanceObject3D = new THREE.Object3D();
+        this.#distanceObject3D.visible = this.#settings.visualization.distanceLabels;
+
+        this.#object3D.add(this.#positionObject3D);
+        this.#object3D.add(this.#distanceObject3D);
+
+        this.#showPointLabels = this.#settings.visualization.pointLabels;
+        this.#showDistanceLabels = this.#settings.visualization.distanceLabels;
+
+        const node = new TreeNode('ThreeJsDataNode');
+
+        const data = new ThreejsData(this.#object3D);
+        node.addData(data);
+
+        this.#visualizationNode.addChild(node);
+        this.#visualizationNode.updateVersion();
+        this.#parentNode.addChild(this.#visualizationNode);
+        this.#parentNode.updateVersion(false, false);
+        this.#viewport.updateNode(this.#parentNode);
+
+        this.createPointLabels();
+        this.createDistanceLabels();
+
+        addListener(EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED, () => {
+            this.createPointLabels();
+            this.createDistanceLabels();
+        });
+
+        addListener(EVENTTYPE_DRAWING_TOOLS.MOVED, () => {
+            this.createPointLabels();
+            this.createDistanceLabels();
+        });
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (4)
+
+    public get showDistanceLabels(): boolean {
+        return this.#distanceObject3D.visible;
+    }
+
+    public set showDistanceLabels(value: boolean) {
+        this.#showDistanceLabels = value;
+        if (this.#showDistanceLabels) {
+            this.createDistanceLabels();
+        } else {
+            this.#distanceObject3D.remove(...this.#distanceObject3D.children);
+        }
+    }
+
+    public get showPointLabels(): boolean {
+        return this.#showPointLabels;
+    }
+
+    public set showPointLabels(value: boolean) {
+        this.#showPointLabels = value;
+        if (this.#showPointLabels) {
+            this.createPointLabels();
+        } else {
+            this.#positionObject3D.remove(...this.#positionObject3D.children);
+        }
+    }
+
+    // #endregion Public Getters And Setters (4)
+
+    // #region Public Methods (3)
+
+    public close(): void {
+        this.#positionObject3D.remove(...this.#positionObject3D.children);
+        this.#distanceObject3D.remove(...this.#distanceObject3D.children);
+    }
+
+    public createDistanceLabels(): void {
+        if (!this.#showDistanceLabels) return;
+        this.#distanceObject3D.remove(...this.#distanceObject3D.children);
+
+        const positionArray = this.#drawingToolsManager.positionArray;
+        const indicesArrayLines = this.#drawingToolsManager.indicesArrayLines;
+
+        if (!indicesArrayLines || positionArray.length <= 3) return;
+
+        for (let i = 0; i < indicesArrayLines.length; i += 2) {
+            // calculate the midpoint of the line
+            const firstIndex = indicesArrayLines[i];
+            const secondIndex = indicesArrayLines[i + 1];
+            const firstPoint = vec3.fromValues(
+                positionArray.at(firstIndex * 3)!,
+                positionArray.at(firstIndex * 3 + 1)!,
+                positionArray.at(firstIndex * 3 + 2)!
+            );
+            const secondPoint = vec3.fromValues(
+                positionArray.at(secondIndex * 3)!,
+                positionArray.at(secondIndex * 3 + 1)!,
+                positionArray.at(secondIndex * 3 + 2)!
+            );
+            const midPoint = vec3.add(vec3.create(), firstPoint, secondPoint);
+            vec3.scale(midPoint, midPoint, 0.5);
+
+            const text = document.createElement('div');
+            text.className = 'label';
+            text.style.marginTop = '1em';
+            
+            const child = document.createElement('div');
+            child.className = 'distance-label';
+
+            const style = document.createElement('style');
+            style.textContent = `
+                .distance-label {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: white;
+                    background-color: ${this.#settings.visualization.points.color_1}80;
+                    border-radius: 5px;
+                    font-size: 16px;
+                    text-align: center;
+                    padding: 0px 2px;
+                }
+            `;
+            document.head.appendChild(style);
+            
+            child.textContent = `${numberCleaner(vec3.distance(firstPoint, secondPoint))}${this.#settings.general.displayUnit}`;
+            text.appendChild(child);
+
+            const label = new CSS2DObject(text);
+            label.position.set(midPoint[0], midPoint[1], midPoint[2]);
+            this.#distanceObject3D.add(label);
+        }
+    }
+
+    public createPointLabels(): void {
+        if (!this.#showPointLabels) return;
+        this.#positionObject3D.remove(...this.#positionObject3D.children);
+
+        const positionArray = this.#drawingToolsManager.positionArray;
+        for (let i = 0; i < positionArray.length; i += 3) {
+            const text = document.createElement('div');
+            text.className = 'label';
+            text.style.marginTop = '1em';
+            
+            const child = document.createElement('div');
+            child.className = 'point-label';
+
+            const style = document.createElement('style');
+            style.textContent = `
+                .point-label {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: white;
+                    background-color: ${this.#settings.visualization.points.color_1}80;
+                    border-radius: 5px;
+                    font-size: 16px;
+                    text-align: center;
+                    padding: 0px 2px;
+                }
+            `;
+            document.head.appendChild(style);
+
+            child.textContent = `[${numberCleaner(positionArray[i])}${this.#settings.general.displayUnit}, ${numberCleaner(positionArray[i + 1])}${this.#settings.general.displayUnit}, ${numberCleaner(positionArray[i + 2])}${this.#settings.general.displayUnit}]`;
+            text.appendChild(child);
+
+            const label = new CSS2DObject(text);
+            label.position.set(positionArray[i], positionArray[i + 1], positionArray[i + 2]);
+            this.#positionObject3D.add(label);
+        }
+    }
+
+    // #endregion Public Methods (3)
+}

package/src/business/implementation/managers/geometry/GeometryManager.ts

@@ -0,0 +1,95 @@
+import { DrawingToolsManager } from '../../DrawingToolsManager';
+import { GeometryManagerHelper } from './helpers/GeometryManagerHelper';
+import { GeometryState } from './GeometryState';
+import { IManager } from '../../../interfaces/IManager';
+import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree';
+import { MATERIAL_INDEX } from '../../../interfaces/IDrawingToolsManager';
+import { vec3 } from 'gl-matrix';
+
+export class GeometryManager implements IManager {
+    // #region Properties (4)
+
+    readonly #geometryState: GeometryState;
+    readonly #originalParentNode: ITreeNode;
+    readonly #parentNode: ITreeNode;
+
+    #geometryManagerHelper: GeometryManagerHelper;
+
+    // #endregion Properties (4)
+
+    // #region Constructors (1)
+
+    constructor(drawingToolsManager: DrawingToolsManager) {
+        this.#originalParentNode = drawingToolsManager.parentNode;
+
+        // create a new node with the geometry data
+        const parentNode = new TreeNode('DrawingToolsGeometry');
+        this.#originalParentNode.addChild(parentNode);
+
+        this.#parentNode = parentNode;
+
+        this.#geometryState = new GeometryState(drawingToolsManager, this);
+        this.#geometryManagerHelper = new GeometryManagerHelper(drawingToolsManager, this, this.#geometryState);
+        this.#geometryState.init();
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (2)
+
+    public get geometryState(): GeometryState {
+        return this.#geometryState;
+    }
+
+    public get parentNode(): ITreeNode {
+        return this.#parentNode;
+    }
+
+    // #endregion Public Getters And Setters (2)
+
+    // #region Public Methods (10)
+
+    public addPoint(index: number, position?: vec3, temporary = false): void {
+        this.#geometryManagerHelper.addPoint(index, position, temporary);
+    }
+
+    public canAddPoint(): boolean {
+        return this.#geometryState.canAddPoint();
+    }
+
+    public canRemovePoint(): boolean {
+        return this.#geometryState.canRemovePoint();
+    }
+
+    public close(): void {
+        this.#geometryState.close();
+        this.#originalParentNode.removeChild(this.#parentNode);
+        this.#originalParentNode.updateVersion();
+    }
+
+    public createLineIndices(loop: boolean): void {
+        this.#geometryState.createLineIndices(loop);
+    }
+
+    public movePoint(index: number, position: vec3, temporary = false): void {
+        this.#geometryManagerHelper.movePoint(index, position, temporary);
+    }
+
+    public removePoint(removalIndex: number, temporary = false): void {
+        this.#geometryManagerHelper.removePoint(removalIndex, temporary);
+    }
+
+    public removePoints(removalIndices: number[]): void {
+        this.#geometryManagerHelper.removePoints(removalIndices);
+    }
+
+    public resetMaterialIndices(): void {
+        this.#geometryManagerHelper.resetMaterialIndices();
+    }
+
+    public updateMaterialIndex(index: number, materialIndex: MATERIAL_INDEX): void {
+        this.#geometryManagerHelper.updateMaterialIndex(index, materialIndex);
+    }
+
+    // #endregion Public Methods (10)
+}