architwin 1.12.5 → 1.13.0

package/lib/loaders/curosrMarkerLoader.js

@@ -0,0 +1,86 @@
+import { _mpConfig } from "../architwin";
+// Default asset path (overridden if bundlePath is present in config)
+let _staticAssetPath = '../';
+class CursorMarkerLoader {
+    constructor(mpConfig) {
+        // === Inputs ===
+        this.inputs = {
+            pointerIntersection: null,
+            markerTexture: null,
+            visible: true,
+            offset: 0.05,
+            scale: 1 // Marker scale multiplier
+        };
+        // === Initialization ===
+        this.onInit = () => {
+            console.log('🛠️ CursorMarkerLoader on init', this.inputs.pointerIntersection);
+            const THREE = this.context.three;
+            if (!this.inputs.pointerIntersection)
+                return;
+            // Extract position and surface normal from intersection data
+            const { position: coord, normal: _normal } = this.inputs.pointerIntersection;
+            // Normalize the surface normal
+            const normal = new THREE.Vector3(_normal.x, _normal.y, _normal.z).normalize();
+            // === Generate rotation quaternion to align marker with surface ===
+            // Build a tangent-bitangent-normal (TBN) basis from surface normal
+            const up = new THREE.Vector3(0, 0, 1);
+            const tangent = new THREE.Vector3().crossVectors(new THREE.Vector3(1, 0, 0), normal).normalize();
+            const bitangent = new THREE.Vector3().crossVectors(normal, tangent).normalize();
+            const matrix = new THREE.Matrix4().makeBasis(tangent, bitangent, normal);
+            // Create quaternion from basis matrix and align Z-up to normal
+            const quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);
+            quaternion.setFromUnitVectors(up, normal);
+            // Convert to Euler angles for use with Three.js transforms
+            const euler = new THREE.Euler().setFromQuaternion(quaternion);
+            // Apply offset to position to move slightly off the surface
+            const adjustedPosition = new THREE.Vector3(coord.x + normal.x * this.inputs.offset, coord.y + normal.y * this.inputs.offset, coord.z + normal.z * this.inputs.offset);
+            // Marker texture fallback
+            const markerUrl = this.inputs.markerTexture || `${_staticAssetPath}static/objective.png`;
+            // === Load texture and build the marker plane ===
+            const loader = new THREE.TextureLoader();
+            loader.load(markerUrl, (texture) => {
+                this.texture = texture;
+                // Define geometry and material for the flat marker plane
+                this.geometry = new THREE.PlaneGeometry(0.1, 0.1);
+                this.material = new THREE.MeshBasicMaterial({
+                    map: texture,
+                    transparent: false,
+                    opacity: 1,
+                    side: THREE.DoubleSide,
+                });
+                // Create the mesh
+                this.mesh = new THREE.Mesh(this.geometry, this.material);
+                this.mesh.position.copy(adjustedPosition);
+                this.mesh.rotation.set(euler.x, euler.y, euler.z);
+                this.mesh.name = 'cursorMarker';
+                this.mesh.visible = this.inputs.visible;
+                // Register output so it can be used as a collider/interactable object
+                this.outputs.objectRoot = this.mesh;
+                this.outputs.collider = this.mesh;
+                console.log('🛠️ CursorMarkerLoader on loader.load', texture);
+            });
+        };
+        // === Triggered when inputs change ===
+        this.onInputsUpdated = () => {
+            console.log('🛠️ CursorMarkerLoader inputupdated');
+            this.onInit();
+        };
+        // === Cleanup for memory management ===
+        this.onDestroy = () => {
+            var _a, _b, _c;
+            console.log('🛠️ CursorMarkerLoader destroy');
+            (_a = this.geometry) === null || _a === void 0 ? void 0 : _a.dispose();
+            (_b = this.material) === null || _b === void 0 ? void 0 : _b.dispose();
+            (_c = this.texture) === null || _c === void 0 ? void 0 : _c.dispose();
+        };
+        console.log('🛠️ CursorMarkerLoader constructor called');
+        this.outputs = {};
+        // Override static asset path if deployed via CDN
+        if ('bundlePath' in mpConfig) {
+            _staticAssetPath = 'https://cdn.jsdelivr.net/npm/architwin@latest/';
+        }
+    }
+}
+// === Factory and Component Type ===
+export const cursorMarkerType = 'mp.cursorMarker';
+export const cursorMarkerFactory = () => new CursorMarkerLoader(_mpConfig);

package/lib/loaders/index.d.ts

@@ -9,4 +9,5 @@ import { sweepPuckType, puckBackgroundFactory } from "./sweepPuckLoader";
 import { viewpointType, viewpointFactory } from "./viewpointLoader";
 import { tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry } from "./polydrawerLoader";
 import { fbxType, fbxFactory } from "./fbxLoader";
-export { planeType, planeFactory, planeTypeImage, planeTypeVideo, planeTypePdf, setHudState, planeImageFactory, planeVideoFactory, planePdfFactory, gltfType, gltfFactory, boxType, boxFactory, textType, textFactory, css3DType, css3DFactory, hudType, hudFactory, sweepPuckType, puckBackgroundFactory, viewpointType, viewpointFactory, tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry, fbxType, fbxFactory };
+import { pathPointType, pathPointFactory, pathLineType, pathLineFactory } from "./pathLoader";
+export { planeType, planeFactory, planeTypeImage, planeTypeVideo, planeTypePdf, setHudState, planeImageFactory, planeVideoFactory, planePdfFactory, gltfType, gltfFactory, boxType, boxFactory, textType, textFactory, css3DType, css3DFactory, hudType, hudFactory, sweepPuckType, puckBackgroundFactory, viewpointType, viewpointFactory, tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry, fbxType, fbxFactory, pathPointType, pathPointFactory, pathLineType, pathLineFactory };

package/lib/loaders/index.js

@@ -9,6 +9,7 @@ import { sweepPuckType, puckBackgroundFactory } from "./sweepPuckLoader";
 import { viewpointType, viewpointFactory } from "./viewpointLoader";
 import { tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry } from "./polydrawerLoader";
 import { fbxType, fbxFactory } from "./fbxLoader";
+import { pathPointType, pathPointFactory, pathLineType, pathLineFactory } from "./pathLoader";
 export { 
 // planeType,planeFactory,
-planeType, planeFactory, planeTypeImage, planeTypeVideo, planeTypePdf, setHudState, planeImageFactory, planeVideoFactory, planePdfFactory, gltfType, gltfFactory, boxType, boxFactory, textType, textFactory, css3DType, css3DFactory, hudType, hudFactory, sweepPuckType, puckBackgroundFactory, viewpointType, viewpointFactory, tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry, fbxType, fbxFactory };
+planeType, planeFactory, planeTypeImage, planeTypeVideo, planeTypePdf, setHudState, planeImageFactory, planeVideoFactory, planePdfFactory, gltfType, gltfFactory, boxType, boxFactory, textType, textFactory, css3DType, css3DFactory, hudType, hudFactory, sweepPuckType, puckBackgroundFactory, viewpointType, viewpointFactory, tubeLineType, tubeLineFactory, verticeType, verticeFactory, bufferGeometryType, bufferGeometry, fbxType, fbxFactory, pathPointType, pathPointFactory, pathLineType, pathLineFactory };

package/lib/loaders/pathLoader.d.ts

@@ -0,0 +1,99 @@
+import { MpSdk } from "../../bundle/sdk";
+import { Pane } from 'tweakpane';
+export declare class PathLine {
+    mpSdk: MpSdk;
+    mesh: THREE.Mesh;
+    material: THREE.Material;
+    geometry: THREE.BufferGeometry;
+    texture: THREE.CanvasTexture;
+    tubeGeometry: THREE.TubeGeometry;
+    time: number;
+    closed: boolean;
+    panel: Pane;
+    billboard: string;
+    hovered: boolean;
+    length: number;
+    groupedMesh: THREE.Group;
+    constructor(mpSdk: MpSdk);
+    inputs: {
+        name: string;
+        label: string;
+        description: string;
+        node: any;
+        tubes: any;
+        path: any;
+        enabled: boolean;
+        active: boolean;
+        editMode: boolean;
+        direction: number;
+        curveType: string;
+        opacity: number;
+        tubularSegments: number;
+        radialSegments: number;
+        fillColor: string;
+        textColor: string;
+        text: string;
+        font: string;
+        radius: number;
+        scrollSpeed: number;
+        collider: boolean;
+        visible: boolean;
+        pathOptions: any;
+    };
+    outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
+    context: MpSdk.Scene.IComponentContext;
+    emits: {
+        active: boolean;
+        destroyed: boolean;
+    };
+    events: {
+        'INTERACTION.CLICK': boolean;
+        'INTERACTION.HOVER': boolean;
+    };
+    onInit: () => void;
+    onInputsUpdated: (prevInputs: any) => void;
+    renderPathLine: () => void;
+    setBillboard: (value: any) => void;
+    onEvent(eventType: any, data: any): void;
+    onTick(tickDelta: any): void;
+    renderGUI: () => void;
+    onDestroy(): void;
+}
+export declare const pathLineType = "pathLine";
+export declare const pathLineFactory: (mpSdk: MpSdk) => () => PathLine;
+export declare class PathPoint {
+    mpSdk: MpSdk;
+    mesh: THREE.Mesh;
+    material: THREE.Material;
+    geometry: THREE.BufferGeometry;
+    texture: THREE.CanvasTexture;
+    pointerSub: MpSdk.ISubscription;
+    pointerIntersection: MpSdk.Pointer.Intersection;
+    constructor(mpSdk: MpSdk);
+    inputs: {
+        index: any;
+        radius: number;
+        position: any;
+        fillColor: string;
+        hoverColor: string;
+        ringVisibility: boolean;
+    };
+    outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
+    context: MpSdk.Scene.IComponentContext;
+    emits: {
+        active: boolean;
+        changed: boolean;
+    };
+    events: {
+        'INTERACTION.DRAG': boolean;
+        'INTERACTION.DRAG_BEGIN': boolean;
+        'INTERACTION.DRAG_END': boolean;
+        'INTERACTION.HOVER': boolean;
+    };
+    onInputsUpdated: (prevInputs: any) => void;
+    onEvent(eventType: any, data: any): void;
+    onInit: () => void;
+    renderVertice: (hovered?: boolean) => void;
+}
+export declare const pathPointType = "pathPoint";
+export declare const pathPointFactory: (mpSdk: any) => () => PathPoint;

package/lib/loaders/pathLoader.js

@@ -0,0 +1,451 @@
+import { Pane } from 'tweakpane';
+import { dispatchSpaceEvent } from "../architwin";
+import { SPACE_EVENTS } from "../types";
+export class PathLine {
+    constructor(mpSdk) {
+        this.time = 0;
+        this.closed = false;
+        this.billboard = undefined;
+        this.hovered = false;
+        this.length = 0;
+        this.inputs = {
+            name: '',
+            label: 'Path Line',
+            description: '',
+            node: null,
+            tubes: null,
+            path: null,
+            enabled: true,
+            active: false,
+            editMode: false,
+            direction: -1,
+            curveType: 'catmullrom',
+            opacity: 0.3,
+            tubularSegments: 100,
+            radialSegments: 20,
+            fillColor: 'none',
+            textColor: 'rgb(255,255,255)',
+            text: '➡︎',
+            font: '48px sans-serif',
+            radius: 0.05,
+            scrollSpeed: 1.35,
+            collider: true,
+            visible: true,
+            pathOptions: null
+        };
+        //@ts-expect-error
+        this.outputs = {
+            length: 0,
+            gui: {},
+        };
+        this.emits = {
+            active: true,
+            destroyed: true,
+        };
+        this.events = {
+            'INTERACTION.CLICK': true,
+            'INTERACTION.HOVER': false,
+        };
+        this.onInit = () => {
+            const THREE = this.context.three;
+            this.groupedMesh = new THREE.Group();
+            if (this.inputs.active) {
+                //this.renderGUI();
+            }
+            if (this.inputs.path.length > 1) {
+                this.renderPathLine();
+            }
+        };
+        this.onInputsUpdated = (prevInputs) => {
+            if (this.inputs !== prevInputs) {
+                const THREE = this.context.three;
+                this.groupedMesh = new THREE.Group();
+                if (!this.inputs.active && this.panel) {
+                    this.panel.dispose();
+                    //@ts-expect-error
+                    this.panel = false;
+                }
+                else {
+                    if (!this.panel || this.inputs.label !== prevInputs.label) {
+                        //console.log('Rendering GUI...');
+                        // this.renderGUI();
+                    }
+                }
+                if (this.inputs.pathOptions) {
+                    const excludedKeys = ['id', 'pathOptions'];
+                    for (let key in this.inputs) {
+                        if (!excludedKeys.includes(key)) {
+                            if (this.inputs.pathOptions[key]) {
+                                this.inputs[key] = this.inputs.pathOptions[key];
+                            }
+                        }
+                    }
+                }
+                if (this.inputs.path.length > 1) {
+                    this.renderPathLine();
+                    console.log("paths ", this.inputs.path);
+                }
+            }
+        };
+        this.renderPathLine = () => {
+            const THREE = this.context.three;
+            // Find Length
+            let sections = this.inputs.path.length - 1;
+            this.length = 0;
+            for (let i = 0; i < sections; i++) {
+                const start = new THREE.Vector3(this.inputs.path[i].x, this.inputs.path[i].y, this.inputs.path[i].z);
+                const end = new THREE.Vector3(this.inputs.path[i + 1].x, this.inputs.path[i + 1].y, this.inputs.path[i + 1].z);
+                this.length += start.distanceTo(end);
+            }
+            const ctx = document.createElement('canvas').getContext('2d');
+            if (!ctx) {
+                return;
+            }
+            ctx.canvas.width = 64;
+            ctx.canvas.height = 64;
+            if (this.inputs.fillColor == 'none') {
+                ctx.clearRect(0, 0, 64, 64);
+            }
+            else {
+                // background
+                let fillColorRGBA = this.inputs.fillColor.replace(/rgb/i, 'rgba');
+                fillColorRGBA = fillColorRGBA.replace(/\)/i, ',' + (this.hovered ? 0.9 : this.inputs.opacity) + ')');
+                ctx.fillStyle = fillColorRGBA;
+                ctx.fillRect(0, 0, 64, 64);
+            }
+            // render out text measurement in the rendered line
+            ctx.translate(32, 32);
+            ctx.fillStyle = this.inputs.textColor;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.font = this.inputs.font;
+            ctx.fillText(this.inputs.text, 0, 0);
+            this.texture = new THREE.CanvasTexture(ctx.canvas);
+            this.texture.wrapS = THREE.RepeatWrapping;
+            this.texture.wrapT = THREE.RepeatWrapping;
+            this.texture.repeat.set(this.length, 3);
+            this.material = new THREE.MeshBasicMaterial({
+                map: this.texture,
+                side: THREE.DoubleSide,
+                depthWrite: false,
+                depthTest: true,
+                transparent: true,
+                //@ts-expect-error
+                flatShading: true,
+                emissive: 0x072534,
+            });
+            if (this.inputs.path !== null) {
+                this.tubeGeometry && this.tubeGeometry.dispose();
+                this.tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(this.inputs.path, false, 
+                //@ts-expect-error
+                this.inputs.curveType, this.inputs.curveType == 'catmullrom' ? 0.25 : 0), this.inputs.tubularSegments, // tubularSegments
+                this.inputs.radius, this.inputs.radialSegments, // radialSegments
+                this.closed // closed
+                );
+                this.mesh = new THREE.Mesh(this.tubeGeometry, this.material);
+            }
+            this.mesh.name = this.inputs.name;
+            this.outputs.length = this.length;
+            this.groupedMesh.add(this.mesh);
+            this.mesh.visible = this.inputs.visible;
+            if (this.inputs.enabled) {
+                this.outputs.objectRoot = this.mesh;
+                this.outputs.collider = this.inputs.collider ? this.mesh : null;
+            }
+            else {
+                this.outputs.objectRoot = null;
+                this.outputs.collider = null;
+            }
+            if (this.panel) {
+                this.panel.refresh();
+            }
+            dispatchSpaceEvent(SPACE_EVENTS.PATH_UPDATED, {
+                path: this.inputs.path,
+                textColor: this.inputs.textColor
+            });
+        };
+        this.setBillboard = (value) => {
+            this.billboard = value;
+        };
+        //This is just a temp gui I need for debugging and experimentation purposes. Will be commented out once I am done
+        this.renderGUI = () => {
+            if (this.panel) {
+                this.panel.dispose();
+            }
+            this.panel = new Pane({
+                //width: 260,
+                title: 'Scrolling Tube Creator',
+                container: document.getElementById('objgui'),
+            });
+            const tab = this.panel.addTab({
+                pages: [{ title: 'Edit' }, { title: 'All Drawings' }],
+            });
+            const folder1 = tab.pages[0].addFolder({ title: 'Inputs' });
+            folder1.addBinding(this.inputs, 'name');
+            folder1.addBinding(this.inputs, 'label');
+            folder1.addBinding(this.inputs, 'description', {
+                readonly: false,
+                multiline: true,
+                rows: 5,
+            });
+            folder1.addBinding(this.inputs, 'text', {
+                options: { ' ': ' ', '➡︎': '➡︎', '✳': '✳', '☠': '☠' },
+            });
+            folder1.addBinding(this.inputs, 'textColor');
+            folder1.addBinding(this.inputs, 'fillColor');
+            folder1.addBinding(this.inputs, 'direction', {
+                options: { 'Left to Right': -1, 'Right to Left': 1 },
+            });
+            folder1.addBinding(this.outputs, 'length', {
+                readonly: true,
+            });
+            // If the node was passed as an input, we can run node.destroy();
+            if (this.inputs.node) {
+                const remove = folder1.addButton({ title: 'Remove', label: 'Remove' });
+                remove.on('click', () => {
+                    //@ts-expect-error
+                    this.notify('destroyed');
+                    this.panel.dispose();
+                    //@ts-expect-error
+                    this.panel = false;
+                    this.inputs.active = false;
+                    this.inputs.node.stop();
+                });
+            }
+            const folder2 = tab.pages[0].addFolder({
+                title: 'Advanced',
+                expanded: true,
+            });
+            folder2.addBinding(this.inputs, 'enabled');
+            folder2.addBinding(this.inputs, 'opacity', { min: 0, max: 1, step: 0.05 });
+            folder2.addBinding(this.inputs, 'radius', {
+                min: 0.01,
+                max: 1,
+                step: 0.01,
+            });
+            folder2.addBinding(this.inputs, 'scrollSpeed', {
+                min: 0,
+                max: 5,
+                step: 0.05,
+            });
+            folder2.addBinding(this.inputs, 'tubularSegments', {
+                min: 1,
+                max: 100,
+                step: 1,
+            });
+            folder2.addBinding(this.inputs, 'radialSegments', {
+                min: 1,
+                max: 20,
+                step: 1,
+            });
+            folder2.addBinding(this.inputs, 'collider');
+            if (this.inputs.tubes !== null) {
+                const nodeIterator = this.inputs.tubes.nodeIterator();
+                let nodes = nodeIterator.next();
+                while (!nodes.done) {
+                    const componentIterator = nodes.value.componentIterator();
+                    let component = componentIterator.next();
+                    nodes = nodeIterator.next();
+                    const button = tab.pages[1].addButton({
+                        title: component.value.inputs.label,
+                        label: '=',
+                    });
+                    button.on('click', (data) => {
+                        // This needs to be reviewed
+                        if (!component.value.inputs.active) {
+                            //@ts-expect-error
+                            this.notify('active', { component: component.value });
+                        }
+                    });
+                }
+            }
+        };
+        this.mpSdk = mpSdk;
+    }
+    onEvent(eventType, data) {
+        if (eventType === 'INTERACTION.CLICK') {
+            //@ts-expect-error
+            this.notify('active', { component: this });
+            // Show a Tag Billboard with the info of this tube
+            if (!this.billboard) {
+                // Allow access to these variables within then callbacks.
+                var mpSdk = this.mpSdk;
+                mpSdk.Tag.toggleNavControls(false);
+                mpSdk.Tag.add({
+                    label: this.inputs.label,
+                    description: this.inputs.description +
+                        ' - ' +
+                        Math.round(this.length * 1000) / 1000 +
+                        'm',
+                    anchorPosition: {
+                        x: data.point.x,
+                        y: data.point.y,
+                        z: data.point.z,
+                    },
+                    stemVector: {
+                        x: 0,
+                        y: 0,
+                        z: 0,
+                    },
+                }).then((tags) => {
+                    this.setBillboard(tags[0]);
+                    mpSdk.Tag.allowAction(tags[0], {
+                        opening: true,
+                        navigating: true,
+                    });
+                    mpSdk.Tag.editOpacity(tags[0], 0);
+                    mpSdk.Tag.open(tags[0]).then(() => {
+                        let tagDestroyer = mpSdk.Tag.openTags.subscribe((newState) => {
+                            if (newState.selected.size == 0) {
+                                let thisTag = newState.selected;
+                                //@ts-expect-error
+                                if (thisTag != tags[0]) {
+                                    mpSdk.Tag.remove(tags[0]);
+                                    tagDestroyer.cancel();
+                                    this.setBillboard(false);
+                                    mpSdk.Tag.toggleNavControls(true);
+                                }
+                            }
+                        });
+                    });
+                });
+            }
+        }
+    }
+    onTick(tickDelta) {
+        if (this.inputs.scrollSpeed > 0) {
+            this.time += tickDelta;
+            if (this.texture) {
+                this.texture.offset.x =
+                    (this.inputs.direction *
+                        ((this.inputs.scrollSpeed * this.time) / 1000)) %
+                        1;
+            }
+        }
+    }
+    onDestroy() {
+        this.texture.dispose();
+        if (this.panel) {
+            this.panel.dispose();
+            //@ts-expect-error
+            this.panel = false;
+        }
+        if (this.billboard) {
+            this.mpSdk.Tag.remove(this.billboard);
+            console.log('Nav Controls On');
+            this.mpSdk.Tag.toggleNavControls(true);
+        }
+    }
+}
+export const pathLineType = 'pathLine';
+export const pathLineFactory = function (mpSdk) {
+    return function () {
+        return new PathLine(mpSdk);
+    };
+};
+export class PathPoint {
+    constructor(mpSdk) {
+        this.inputs = {
+            index: null,
+            radius: 0.05,
+            position: null,
+            fillColor: 'rgb(11,57,72)',
+            hoverColor: 'rgb(255,0,0)',
+            ringVisibility: false
+        };
+        this.emits = {
+            active: true,
+            changed: true,
+        };
+        this.events = {
+            'INTERACTION.DRAG': true,
+            'INTERACTION.DRAG_BEGIN': true,
+            'INTERACTION.DRAG_END': true,
+            'INTERACTION.HOVER': true,
+        };
+        this.onInputsUpdated = (prevInputs) => {
+            this.renderVertice(false);
+        };
+        this.onInit = () => {
+            this.renderVertice();
+        };
+        this.renderVertice = (hovered = false) => {
+            const THREE = this.context.three;
+            const group = new THREE.Group();
+            //This is just a visual marker so that the user can see the points they have already marked
+            this.geometry = new THREE.SphereGeometry(this.inputs.radius, 16, 16);
+            this.material = new THREE.MeshBasicMaterial({
+                color: (hovered ? this.inputs.hoverColor : this.inputs.fillColor),
+                transparent: true,
+                opacity: 0.6,
+            });
+            this.mesh = new THREE.Mesh(this.geometry, this.material);
+            this.mesh.position.set(this.inputs.position.x, this.inputs.position.y, this.inputs.position.z);
+            this.outputs.objectRoot = this.mesh;
+            this.outputs.collider = this.mesh;
+        };
+        this.mpSdk = mpSdk;
+    }
+    onEvent(eventType, data) {
+        var _a;
+        if (eventType === 'INTERACTION.DRAG') {
+            //this.pointerIntersection.object  === 'intersectedobject.model'
+            //this.pointerIntersection.object
+            console.log("group this.pointerIntersection ", this.pointerIntersection);
+            if (this.pointerIntersection.object === 'intersectedobject.model') {
+                let e = Object.assign({}, this.pointerIntersection.position);
+                this.mesh.position.set(e.x, e.y, e.z);
+                //this.mesh.children[0].position.set(e.x, e.y, e.z)
+                //@ts-expect-error
+                this.notify('changed', {
+                    index: this.inputs.index,
+                    position: this.mesh.position,
+                    collider: null,
+                });
+            }
+        }
+        if (eventType === 'INTERACTION.DRAG_BEGIN') {
+            this.mpSdk.Pointer.setVisible(false);
+            //@ts-expect-error
+            this.mesh.material.opacity = 0.5;
+            //this.mesh.children[0].material.opacity = 0.5
+            // will make it smaller later. Setting this to 0.5 to make it easier to see in the space
+            this.mesh.scale.set(0.5, 0.5, 0.5);
+            if (this.pointerSub == null) {
+                this.pointerSub = this.mpSdk.Pointer.intersection.subscribe((data) => {
+                    this.pointerIntersection = data;
+                });
+            }
+            //@ts-expect-error
+            this.notify('changed', {
+                index: this.inputs.index,
+                position: this.mesh.position,
+                collider: false,
+            });
+        }
+        if (eventType === 'INTERACTION.DRAG_END') {
+            //@ts-expect-error
+            this.mesh.material.opacity = 1;
+            this.mesh.scale.set(1, 1, 1);
+            this.mpSdk.Pointer.setVisible(true);
+            (_a = this.pointerSub) === null || _a === void 0 ? void 0 : _a.cancel();
+            //renderPolygonFromPath()
+            //@ts-expect-error
+            this.notify('changed', {
+                index: this.inputs.index,
+                position: this.mesh.position,
+                collider: false,
+            });
+            dispatchSpaceEvent(SPACE_EVENTS.VERTEX_DRAG_END, {
+                index: this.inputs.index,
+                position: this.mesh.position
+            });
+        }
+    }
+}
+export const pathPointType = 'pathPoint';
+export const pathPointFactory = function (mpSdk) {
+    return function () {
+        return new PathPoint(mpSdk);
+    };
+};