architwin 1.12.5 → 1.13.1

package/lib/atwinui/helpers.js

@@ -0,0 +1,49 @@
+export function waitForChange(...args) {
+    const maybeOptions = args[args.length - 1];
+    const options = typeof maybeOptions === 'object' && ('interval' in maybeOptions || 'timeout' in maybeOptions)
+        ? maybeOptions
+        : {};
+    const getters = (maybeOptions === options ? args.slice(0, -1) : args);
+    const { interval = 100, timeout = 5000 } = options;
+    const initial = getters.map(fn => fn());
+    const start = Date.now();
+    return new Promise((resolve, reject) => {
+        const check = () => {
+            const current = getters.map(fn => fn());
+            const hasChanged = current.some((val, i) => val !== initial[i] && val != null);
+            if (hasChanged) {
+                resolve(getters.length === 1 ? current[0] : current);
+            }
+            else if (Date.now() - start >= timeout) {
+                reject(new Error('Timeout: Values did not change'));
+            }
+            else {
+                setTimeout(check, interval);
+            }
+        };
+        check();
+    });
+}
+/**
+ * Binds an input element's value to a target object's property using input and mutation observers.
+ * @param input The input HTML element to observe
+ * @param getTarget A function returning the target object (like _selectedPipeCategory)
+ * @param key The key of the target object to update
+ */
+export function observeInputToUpdate(input, getTarget, key) {
+    if (!input)
+        return;
+    const update = () => {
+        const target = getTarget();
+        if (target) {
+            target[key] = input.value;
+        }
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(input, {
+        attributes: true,
+        attributeFilter: ['value'],
+    });
+    input.addEventListener('input', update);
+    console.log("observer ==>", input);
+}

package/lib/atwinui/index.js

@@ -37,6 +37,8 @@ const sidebarPaneBtnIds = [
     'at-cancel-theme-btn',
     'at-save-customization-btn',
     'at-draw-room-btn',
+    // 'at-cancel-pipe-btn',
+    // 'at-save-pipe-btn'
 ];
 //'at-cancel-add-object-form-btn',
 function initToolbarUI(payload) {

package/lib/loaders/curosrMarkerLoader.d.ts

@@ -0,0 +1,25 @@
+import { MpSdk } from "../../bundle/sdk";
+import * as THREE from "three";
+import { IMPConfig } from "../types";
+declare class CursorMarkerLoader {
+    inputs: {
+        pointerIntersection: MpSdk.Pointer.Intersection;
+        markerTexture: string;
+        visible: boolean;
+        offset: number;
+        scale: number;
+    };
+    outputs: Record<string, unknown> & MpSdk.Scene.PredefinedOutputs;
+    context: MpSdk.Scene.IComponentContext;
+    mesh: THREE.Mesh;
+    material: THREE.Material;
+    geometry: THREE.PlaneGeometry;
+    texture: THREE.Texture;
+    constructor(mpConfig: IMPConfig);
+    onInit: () => void;
+    onInputsUpdated: () => void;
+    onDestroy: () => void;
+}
+export declare const cursorMarkerType = "mp.cursorMarker";
+export declare const cursorMarkerFactory: () => CursorMarkerLoader;
+export {};

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;