@shapediver/viewer.features.drawing-tools 3.1.0

package/src/business/implementation/managers/interaction/handlers/MidPointInteractionHandler.ts

@@ -0,0 +1,127 @@
+import { DrawingToolsManager } from '../../../DrawingToolsManager';
+import { GeometryMathManager } from '../../geometry/GeometryMathManager';
+import { GeometryState } from '../../geometry/GeometryState';
+import { InteractionManager } from '../InteractionManager';
+import { IRay } from '@shapediver/viewer.features.interaction';
+import { MATERIAL_INDEX } from '../../../../interfaces/IDrawingToolsManager';
+import { vec3 } from 'gl-matrix';
+
+export class MidPointInteractionHandler {
+    // #region Properties (5)
+
+    readonly #drawingToolsManager: DrawingToolsManager;
+    readonly #geometryMathManager: GeometryMathManager;
+    readonly #geometryState: GeometryState;
+
+    #midPointInsertionActive: boolean = false;
+    #midPointInsertionIndex: number = -1;
+
+    // #endregion Properties (5)
+
+    // #region Constructors (1)
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    constructor(drawingToolsManager: DrawingToolsManager, interactionManager: InteractionManager) {
+        this.#drawingToolsManager = drawingToolsManager;
+
+        this.#geometryState = drawingToolsManager.geometryState;
+        this.#geometryMathManager = drawingToolsManager.geometryMathManager;
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (2)
+
+    public get midPointInsertionActive(): boolean {
+        return this.#midPointInsertionActive;
+    }
+
+    public get midPointInsertionIndex(): number {
+        return this.#midPointInsertionIndex;
+    }
+
+    // #endregion Public Getters And Setters (2)
+
+    // #region Public Methods (3)
+
+    public finishMidPointInsertion(distances: {
+        index: number;
+        distance: number;
+    }[] | undefined): void {
+        if (this.#midPointInsertionActive === true) {
+            if (distances) {
+                // finish mid point insertion if it is the current index
+                if (distances[0].index === this.#midPointInsertionIndex) {
+                    this.#geometryState.makePointPersistent(this.#midPointInsertionIndex, false);
+                    this.#midPointInsertionActive = false;
+                    this.#midPointInsertionIndex = -1;
+                }
+            }
+        }
+    }
+
+    public onMove(ray: IRay, hoveredPoint?: number): void {
+        if (this.#midPointInsertionActive === true && hoveredPoint === this.#midPointInsertionIndex) {
+            // we are just waiting for a mouse click to finish the mid point insertion
+        } else if (hoveredPoint === undefined && this.#geometryState.canAddPoint()) {
+            // check if there is a line close to the ray and add a mid point to it
+            const lineDistances = this.#geometryMathManager.checkLineDistances(ray);
+            if (lineDistances) {
+                let firstIndex = lineDistances[0].index[0];
+                let secondIndex = lineDistances[0].index[1];
+
+                if (this.#midPointInsertionActive === true && firstIndex !== this.#midPointInsertionIndex && secondIndex !== this.#midPointInsertionIndex) {
+                    // remove last added point
+                    this.#drawingToolsManager.removePointTemporary(this.#midPointInsertionIndex);
+                    this.#midPointInsertionActive = false;
+                    this.#midPointInsertionIndex = -1;
+
+                    // move indices one back if they are after the removal index
+                    if (firstIndex > this.#midPointInsertionIndex) {
+                        firstIndex--;
+
+                        if (firstIndex < 0)
+                            firstIndex = this.#geometryState.getPointCount() - 1;
+                    }
+
+                    // move indices one back if they are after the removal index
+                    if (secondIndex > this.#midPointInsertionIndex || secondIndex === 0) {
+                        secondIndex--;
+
+                        if (secondIndex < 0)
+                            secondIndex = this.#geometryState.getPointCount() - 1;
+                    }
+                }
+
+                if (this.#midPointInsertionActive === false) {
+                    const firstPoint = this.#geometryState.getPosition(firstIndex);
+                    const secondPoint = this.#geometryState.getPosition(secondIndex);
+                    const midPoint = vec3.add(vec3.create(), firstPoint, secondPoint);
+                    vec3.scale(midPoint, midPoint, 0.5);
+
+                    this.#midPointInsertionIndex = secondIndex;
+
+                    this.#drawingToolsManager.addPointTemporary(secondIndex, midPoint);
+                    this.#drawingToolsManager.updateMaterialIndex(secondIndex, MATERIAL_INDEX.INSERTION);
+
+                    this.#midPointInsertionActive = true;
+                }
+            } else {
+                this.stopMidPointInsertion();
+            }
+        } else {
+            this.stopMidPointInsertion();
+        }
+    }
+
+    public stopMidPointInsertion(): void {
+        if (this.#midPointInsertionActive === true) {
+            // remove last added point
+            this.#drawingToolsManager.removePointTemporary(this.#midPointInsertionIndex);
+            this.#midPointInsertionActive = false;
+            this.#midPointInsertionIndex = -1;
+        }
+    }
+
+    // #endregion Public Methods (3)
+}

package/src/business/implementation/managers/interaction/helpers/InteractionManagerHelper.ts

@@ -0,0 +1,411 @@
+import { addListener } from '@shapediver/viewer';
+import { DrawingToolsManager } from '../../../DrawingToolsManager';
+import { EventEngine, EVENTTYPE_DRAWING_TOOLS } from '@shapediver/viewer.shared.services';
+import { GeometryMathManager } from '../../geometry/GeometryMathManager';
+import { GeometryState } from '../../geometry/GeometryState';
+import { InteractionManager } from '../InteractionManager';
+import { IRay } from '@shapediver/viewer.features.interaction';
+import { MATERIAL_INDEX, Settings } from '../../../../interfaces/IDrawingToolsManager';
+import { vec3 } from 'gl-matrix';
+
+export class InteractionManagerHelper {
+    // #region Properties (17)
+
+    readonly #drawingToolsManager: DrawingToolsManager;
+    readonly #eventEngine = EventEngine.instance;
+    readonly #geometryMathManager: GeometryMathManager;
+    readonly #geometryState: GeometryState;
+    readonly #interactionManager: InteractionManager;
+    readonly #settings: Settings;
+
+    #draggedPoint?: number;
+    #draggedPointPosition: vec3 = vec3.create();
+    #dragging: boolean = false;
+    #hoveredPoint?: number;
+    #justSelected: boolean = false;
+    #lastRay: IRay | undefined;
+    #midPointInserted: boolean = false;
+    #moving: boolean = false;
+    #selectedMovedPointPositions: vec3[] = [];
+    #selectedPointIndices: number[] = [];
+    #selectedPointPositions: vec3[] = [];
+
+    // #endregion Properties (17)
+
+    // #region Constructors (1)
+
+    constructor(drawingToolsManager: DrawingToolsManager, interactionManager: InteractionManager) {
+        this.#drawingToolsManager = drawingToolsManager;
+        this.#interactionManager = interactionManager;
+        this.#geometryState = this.#drawingToolsManager.geometryState;
+        this.#geometryMathManager = this.#drawingToolsManager.geometryMathManager;
+        this.#settings = this.#drawingToolsManager.settings;
+
+        addListener(EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED, () => {
+            this.removeAllSelectedPoints();
+        });
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (7)
+
+    public get dragging(): boolean {
+        return this.#dragging;
+    }
+
+    public get hoveredPoint(): number | undefined {
+        return this.#hoveredPoint;
+    }
+
+    public get midPointInserted(): boolean {
+        return this.#midPointInserted;
+    }
+
+    public set midPointInserted(value: boolean) {
+        this.#midPointInserted = value;
+    }
+
+    public get moving(): boolean {
+        return this.#moving;
+    }
+
+    public set moving(value: boolean) {
+        this.#moving = value;
+    }
+
+    public get selectedPointIndices(): number[] {
+        return this.#selectedPointIndices;
+    }
+
+    // #endregion Public Getters And Setters (7)
+
+    // #region Public Methods (10)
+
+    /**
+     * A point was added so we have to move the selected indices one forward if they are after the insertion index
+     * 
+     * @param insertionIndex 
+     */
+    public addPoint(insertionIndex: number): void {
+        // move index if it is the hovered index
+        if (this.#hoveredPoint !== undefined && this.#hoveredPoint >= insertionIndex) {
+            if (this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.SELECTED);
+            } else if (this.#interactionManager.midPointInteractionHandler.midPointInsertionIndex === insertionIndex) {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION);
+            } else {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.DEFAULT);
+            }
+
+            this.#hoveredPoint++;
+
+            if (this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.SELECTED_HOVERED);
+            } else if (this.#interactionManager.midPointInteractionHandler.midPointInsertionIndex === this.#hoveredPoint) {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION_HOVERED);
+            } else {
+                this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.HOVERED);
+            }
+        }
+
+        // move selected indices one forward if they are after the insertion index
+        this.#selectedPointIndices.forEach((element, i) => {
+            this.#selectedPointIndices[i] = element >= insertionIndex ? element + 1 : element;
+        });
+    }
+
+    /**
+     * Check if there is a point close to the ray and update the hovered point
+     * 
+     * @param event 
+     * @param ray 
+     * @returns 
+     */
+    public checkHover(distances?: { index: number; distance: number; }[], ray?: IRay): void {
+        if (!ray && !this.#lastRay) return;
+        if (!ray) ray = this.#lastRay!;
+        this.#lastRay = ray;
+
+        // check if there is a point close to the ray
+        if (distances) {
+            // add the id if it is not already in the array
+            // remove it if it is in the array
+            const index = distances[0].index;
+
+            if (this.#hoveredPoint !== undefined && this.#hoveredPoint === index) return;
+            if (this.#hoveredPoint !== undefined) {
+                if (this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.SELECTED);
+                } else if (this.#interactionManager.midPointInteractionHandler.midPointInsertionIndex === index) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION);
+                } else if (this.#interactionManager.insertionInteractionHandler.insertionActive === true && this.#interactionManager.insertionInteractionHandler.alreadyInserted === true && this.#hoveredPoint === this.#geometryState.getPointCount() - 1) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION);
+                } else {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.DEFAULT);
+                }
+            }
+
+            if (this.#selectedPointIndices.includes(index)) {
+                this.#drawingToolsManager.updateMaterialIndex(index, MATERIAL_INDEX.SELECTED_HOVERED);
+            } else if (this.#interactionManager.midPointInteractionHandler.midPointInsertionIndex === index) {
+                this.#drawingToolsManager.updateMaterialIndex(index, MATERIAL_INDEX.INSERTION_HOVERED);
+            } else if (this.#interactionManager.insertionInteractionHandler.insertionActive === true && this.#interactionManager.insertionInteractionHandler.alreadyInserted === true && index === this.#geometryState.getPointCount() - 1) {
+                this.#drawingToolsManager.updateMaterialIndex(index, MATERIAL_INDEX.INSERTION_HOVERED);
+            } else {
+                this.#drawingToolsManager.updateMaterialIndex(index, MATERIAL_INDEX.HOVERED);
+            }
+
+            this.#hoveredPoint = index;
+        } else {
+            // remove the hovered point if there is no point close to the ray
+            if (this.#hoveredPoint !== undefined) {
+                if (this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.SELECTED);
+                } else if (this.#interactionManager.midPointInteractionHandler.midPointInsertionIndex === this.#hoveredPoint) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION);
+                } else if (this.#interactionManager.insertionInteractionHandler.insertionActive === true && this.#interactionManager.insertionInteractionHandler.alreadyInserted === true && this.#hoveredPoint === this.#geometryState.getPointCount() - 1) {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.INSERTION_HOVERED);
+                } else {
+                    this.#drawingToolsManager.updateMaterialIndex(this.#hoveredPoint, MATERIAL_INDEX.DEFAULT);
+                }
+            }
+            this.#hoveredPoint = undefined;
+        }
+    }
+
+    public close(): void {
+        this.#selectedPointIndices = [];
+        this.#hoveredPoint = undefined;
+        this.#draggedPoint = undefined;
+        this.#dragging = false;
+        this.#selectedPointPositions = [];
+        this.#selectedMovedPointPositions = [];
+        this.#draggedPointPosition = vec3.create();
+    }
+
+    public moveSelectedPoints(ray: IRay): void {
+        if (this.#selectedPointIndices.length > 0 && this.#dragging) {
+            this.#drawingToolsManager.restrictionManager.showRestrictionVisualization = true;
+
+            const intersectionPoint = this.#drawingToolsManager.restrictionManager.rayTrace(ray, {
+                index: this.#draggedPoint!,
+                referencePoint: this.#draggedPointPosition
+            });
+
+            if (intersectionPoint) {
+                const differenceToIntersected = vec3.sub(vec3.create(), intersectionPoint, this.#draggedPointPosition);
+
+                for (let i = 0; i < this.#selectedPointIndices.length; i++) {
+                    const isLastPoint = this.#selectedPointIndices.length === 1 && this.#selectedPointIndices[0] === this.#geometryState.getPointCount() - 1;
+                    const canBeClosed = this.#geometryState.getPointCount() > 3 && this.#geometryState.checkNumberOfPoints(this.#geometryState.getPointCount() - 1);
+                    const shouldBeClosed = this.#settings.geometry.close === true && this.#geometryState.closeLoop === false && this.#settings.geometry.autoClose === false;
+
+                    if (isLastPoint && canBeClosed && shouldBeClosed) {
+                        // if restricted point is close to the first point, remove the current insertion point and draw a line to the first point
+                        const firstPoint = this.#geometryState.getPosition(0);
+                        const lastPoint = intersectionPoint;
+
+                        if (lastPoint && this.#geometryMathManager.screenSpaceDistanceCheck(firstPoint, lastPoint, this.#settings.visualization.points.size_0! * this.#settings.visualization.distanceMultiplicationFactor).check === true) {
+                            // close the geometry
+                            this.#selectedMovedPointPositions[i] = vec3.clone(firstPoint);
+                            this.#drawingToolsManager.movePointTemporary(this.#selectedPointIndices[i], firstPoint);
+                        } else {
+                            // not close enough to close the geometry
+                            this.#selectedMovedPointPositions[i] = vec3.add(vec3.create(), differenceToIntersected, this.#selectedPointPositions[i]);
+                            this.#drawingToolsManager.movePointTemporary(this.#selectedPointIndices[i], this.#selectedMovedPointPositions[i]);
+                        }
+                    } else {
+                        // add difference to selected point
+                        this.#selectedMovedPointPositions[i] = vec3.add(vec3.create(), differenceToIntersected, this.#selectedPointPositions[i]);
+                        this.#drawingToolsManager.movePointTemporary(this.#selectedPointIndices[i], this.#selectedMovedPointPositions[i]);
+                    }
+                }
+
+                this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.DRAG_MOVE, { viewportId: this.#drawingToolsManager.viewport.id, drawingToolsId: this.#drawingToolsManager.uuid });
+            }
+        }
+    }
+
+    public onOut(): void {
+        if (this.#dragging === true) {
+            // reset all selected points to their original position
+            this.#selectedPointIndices.forEach((element, i) => {
+                this.#drawingToolsManager.movePointTemporary(element, this.#selectedPointPositions[i]);
+            });
+
+            // reset the dragged point position
+            this.#drawingToolsManager.movePointTemporary(this.#draggedPoint!, this.#draggedPointPosition);
+        }
+
+        // remove the hovered point and the selected points
+        this.removeAllSelectedPoints();
+    }
+
+    public onUp(): void {
+        if (this.#moving === true && this.#dragging === true) {
+            const selectedPointIndices = this.#selectedPointIndices.slice();
+            for (let i = 0; i < this.#selectedPointIndices.length; i++)
+                this.#geometryState.makePointPersistent(this.#selectedPointIndices[i], false);
+
+            /**
+             * Check if the geometry should be closed
+             */
+            const isLastPoint = selectedPointIndices.length === 1 && selectedPointIndices[0] === this.#geometryState.getPointCount() - 1;
+            const canBeClosed = this.#geometryState.getPointCount() > 3 && this.#geometryState.checkNumberOfPoints(this.#geometryState.getPointCount() - 1);
+            const shouldBeClosed = this.#settings.geometry.close === true && this.#geometryState.closeLoop === false && this.#settings.geometry.autoClose === false;
+
+            if (isLastPoint && canBeClosed && shouldBeClosed) {
+                // if restricted point is close to the first point, remove the current insertion point and draw a line to the first point
+                const firstPoint = this.#geometryState.getPosition(0);
+                const lastPoint = this.#selectedMovedPointPositions[0];
+
+                if (lastPoint && this.#geometryMathManager.screenSpaceDistanceCheck(firstPoint, lastPoint, this.#settings.visualization.points.size_0! * this.#settings.visualization.distanceMultiplicationFactor).check === true) {
+                    // close the geometry          
+                    this.#geometryState.closeLoop = true;
+                    this.#drawingToolsManager.removePoint(selectedPointIndices[0]);
+                }
+            }
+            this.removeAllSelectedPoints();
+
+            this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED, {
+                points: this.#geometryState.getPointsData(),
+                temporary: false,
+                fromHistory: false
+            });
+
+            this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.DRAG_END, { viewportId: this.#drawingToolsManager.viewport.id, drawingToolsId: this.#drawingToolsManager.uuid });
+        } else if (this.#hoveredPoint !== undefined && this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+            if (this.#justSelected === this.#moving)
+                this.toggleSelection(this.#hoveredPoint);
+
+            if (this.#midPointInserted) {
+                /**
+                 * SPECIAL CASE:
+                 * - A MIDPOINT WAS ADDED, BUT NOT DRAGGED
+                 * - HAS TO BE ADDED TO THE HISTORY NOW
+                 */
+                this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.GEOMETRY_CHANGED, {
+                    points: this.#geometryState.getPointsData(),
+                    temporary: false
+                });
+            }
+        }
+    }
+
+    /**
+     * A point was removed so we have to move the selected indices one back if they are after the removal index
+     * 
+     * @param removalIndex 
+     */
+    public removePoint(removalIndex: number): void {
+        // remove index if it is the hovered index
+        if (this.#hoveredPoint === removalIndex) {
+            this.#hoveredPoint = undefined;
+        }
+
+        if (this.#hoveredPoint !== undefined && this.#hoveredPoint > removalIndex) {
+            this.#hoveredPoint--;
+        }
+
+        // remove index from selected indices
+        const indexInArray = this.#selectedPointIndices.indexOf(removalIndex);
+        if (indexInArray !== -1) {
+            this.#selectedPointIndices.splice(indexInArray, 1);
+        }
+
+        // move selected indices one back if they are after the removal index
+        this.#selectedPointIndices.forEach((element, i) => {
+            this.#selectedPointIndices[i] = element > removalIndex ? element - 1 : element;
+        });
+    }
+
+    public reset(): void {
+        this.#justSelected = false;
+        this.#midPointInserted = false;
+        this.#moving = false;
+        this.#dragging = false;
+        this.#selectedPointPositions = [];
+        this.#selectedMovedPointPositions = [];
+    }
+
+    public selectPoint(distances: {
+        index: number;
+        distance: number;
+    }[] | undefined): void {
+        if (distances) {
+            // add the id if it is not already in the array
+            // remove it if it is in the array
+            if (!this.#selectedPointIndices.includes(distances[0].index)) {
+                this.toggleSelection(distances[0].index);
+                this.#justSelected = true;
+            }
+        }
+    }
+
+    public startDragging(ray: IRay): boolean {
+        if (this.#selectedPointIndices.length > 0 && this.#hoveredPoint !== undefined && this.#selectedPointIndices.includes(this.#hoveredPoint)) {
+            const draggedPoint = this.#geometryState.getPosition(this.#hoveredPoint);
+
+            // store drag start
+            const intersectionPoint = this.#drawingToolsManager.restrictionManager.rayTrace(ray, {
+                index: this.#hoveredPoint,
+                referencePoint: draggedPoint
+            });
+
+            if (intersectionPoint) {
+                // store selected point positions
+                this.#selectedPointIndices.forEach(element =>
+                    this.#selectedPointPositions.push(this.#geometryState.getPosition(element))
+                );
+
+                // copy values into selected moved point positions
+                this.#selectedMovedPointPositions = this.#selectedPointPositions.map(element => vec3.clone(element));
+
+                this.#draggedPointPosition = this.#geometryState.getPosition(this.#hoveredPoint);
+
+                this.#draggedPoint = this.#hoveredPoint;
+
+                this.#dragging = true;
+                this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.DRAG_START, { viewportId: this.#drawingToolsManager.viewport.id, drawingToolsId: this.#drawingToolsManager.uuid });
+
+                return true;
+            }
+        }
+        return false;
+    }
+
+    // #endregion Public Methods (10)
+
+    // #region Private Methods (2)
+
+    /**
+     * Remove all selected points
+     */
+    private removeAllSelectedPoints(): void {
+        while (this.#selectedPointIndices.length > 0)
+            this.toggleSelection(this.#selectedPointIndices[0]);
+    }
+
+    /**
+     * Select a point, deselect it if it is already selected
+     * 
+     * @param index 
+     */
+    private toggleSelection(index: number): void {
+        // add the id if it is not already in the array
+        // remove it if it is in the array
+        const indexInArray = this.#selectedPointIndices.indexOf(index);
+        if (indexInArray === -1) {
+            this.#selectedPointIndices.push(index);
+            this.#drawingToolsManager.updateMaterialIndex(index, this.#hoveredPoint === index ? MATERIAL_INDEX.SELECTED_HOVERED : MATERIAL_INDEX.SELECTED);
+            this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.SELECTED, { viewportId: this.#drawingToolsManager.viewport.id, drawingToolsId: this.#drawingToolsManager.uuid, index });
+        } else {
+            this.#selectedPointIndices.splice(indexInArray, 1);
+            this.#drawingToolsManager.updateMaterialIndex(index, this.#hoveredPoint === index ? MATERIAL_INDEX.HOVERED : MATERIAL_INDEX.DEFAULT);
+            this.#eventEngine.emitEvent(EVENTTYPE_DRAWING_TOOLS.DESELECTED, { viewportId: this.#drawingToolsManager.viewport.id, drawingToolsId: this.#drawingToolsManager.uuid, index });
+        }
+    }
+
+    // #endregion Private Methods (2)
+}

package/src/business/implementation/managers/interaction/restrictions/AbstractRestriction.ts

@@ -0,0 +1,99 @@
+import * as THREE from 'three';
+import { DrawingToolsManager } from '../../../DrawingToolsManager';
+import { IRestrictionBase } from '../../../../interfaces/IRestrictionBase';
+import { ITreeNode, TreeNode } from '@shapediver/viewer.shared.node-tree';
+import { IViewportApi } from '@shapediver/viewer';
+import { ThreejsData } from '@shapediver/viewer.rendering-engine.rendering-engine-threejs';
+
+export abstract class AbstractRestriction implements IRestrictionBase {
+    // #region Properties (8)
+
+    readonly #id: string;
+    readonly #parentNode: ITreeNode;
+    readonly #viewport: IViewportApi;
+    readonly #visualizationNode: TreeNode = new TreeNode('RestrictionVisualizationNode');
+
+    #showVisualization: boolean = false;
+
+    protected _enabled: boolean = true;
+    protected _enabledEditable: boolean = true;
+    protected _object3D!: THREE.Object3D;
+
+    // #endregion Properties (8)
+
+    // #region Constructors (1)
+
+    constructor(drawingToolsManager: DrawingToolsManager, id: string) {
+        this.#parentNode = drawingToolsManager.parentNode;
+        this.#viewport = drawingToolsManager.viewport;
+        this.#id = id;
+        this.createGridHelperObject();
+    }
+
+    // #endregion Constructors (1)
+
+    // #region Public Getters And Setters (5)
+
+    public get enabled(): boolean {
+        return this._enabled;
+    }
+
+    public set enabled(value: boolean) {
+        if (this._enabledEditable === false) return;
+
+        this._enabled = value;
+        this.visibilityChanged(this._object3D.visible);
+    }
+
+    public get id(): string {
+        return this.#id;
+    }
+
+    public get showVisualization(): boolean {
+        return this.#showVisualization;
+    }
+
+    public set showVisualization(value: boolean) {
+        this.#showVisualization = value;
+        this._object3D.visible = value;
+        this.visibilityChanged(this._object3D.visible);
+    }
+
+    // #endregion Public Getters And Setters (5)
+
+    // #region Public Methods (1)
+
+    public removeVisualization(): void {
+        this.#parentNode.removeChild(this.#visualizationNode);
+        this.#parentNode.updateVersion(false, false);
+        this.#viewport.updateNode(this.#parentNode);
+    }
+
+    // #endregion Public Methods (1)
+
+    // #region Protected Abstract Methods (1)
+
+    protected abstract visibilityChanged(visible: boolean): void;
+
+    // #endregion Protected Abstract Methods (1)
+
+    // #region Private Methods (2)
+
+    private createGridHelperObject(): void {
+        this._object3D = new THREE.Object3D();
+        this._object3D.visible = false;
+
+        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);
+    }
+
+    // #endregion Private Methods (2)
+}