@needle-tools/engine 4.10.0-beta → 4.10.0-beta.1

package/src/engine-components/OrbitControls.ts

@@ -993,11 +993,50 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
     // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
+
     /** 
      * Fits the camera to show the objects provided (defaults to the scene if no objects are passed in) 
+     * @param options The options for fitting the camera. Use to provide objects to fit to, fit direction and size and other settings.
     */
-    fitCamera(options?: OrbitFitCameraOptions): void {
+    fitCamera(options?: OrbitFitCameraOptions);
+    /** @deprecated Use fitCamera(options) */
+    fitCamera(objects?: Object3D | Array<Object3D>, options?: Omit<OrbitFitCameraOptions, "objects">);    
+    fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | OrbitFitCameraOptions, options?: OrbitFitCameraOptions): void {
+
+
+        let objects: Object3D | Array<Object3D> | undefined = undefined;
+        // If the user passed in an array as first argument
+        if (Array.isArray(objectsOrOptions)) {
+            objects = objectsOrOptions;
+        }
+        // If the user passed in an object as first argument
+        else if (objectsOrOptions && "type" in objectsOrOptions) {
+            objects = objectsOrOptions;
+        }
+        // If the user passed in an object as first argument and options as second argument
+        else if (objectsOrOptions && typeof objectsOrOptions === "object") {
+            if (!(objectsOrOptions instanceof Object3D) && !Array.isArray(objectsOrOptions)) {
+                options = objectsOrOptions;
+                objects = options.objects;
+            }
+        }
+        // Ensure objects are setup correctly
+        if (objects && !Array.isArray(objects)) {
+            objects = [objects];
+        }
+        if (!Array.isArray(objects) || objects && objects.length <= 0) {
+            objects = this.context.scene.children;
+        }
+
+        // Make sure there's anything to fit to
+        if (!Array.isArray(objects) || objects.length <= 0) {
+            console.warn("No objects to fit camera to...");
+            return;
+        }
+
+
         const res = fitCamera({
+            objects: [...objects],
             ...options,
             autoApply: false,
             context: this.context,

package/src/engine-components/Renderer.ts

@@ -358,8 +358,11 @@ export class Renderer extends Behaviour implements IRenderer {
     //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
 
+        // @ts-ignore (original materials will be set during deserialization)
+        if(this._originalMaterials === undefined) return null;
+
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
-        if (!this.__didAwake) return null;
+        if (this.__isDeserializing === true) return null;
 
         if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
             if (!this._originalMaterials) this._originalMaterials = [];

package/src/engine-components/codegen/components.ts

@@ -208,6 +208,7 @@ export { ClickThrough } from "../web/Clickthrough.js";
 export { CursorFollow } from "../web/CursorFollow.js";
 export { HoverAnimation } from "../web/HoverAnimation.js";
 export { ScrollFollow } from "../web/ScrollFollow.js";
+export { ViewBox } from "../web/ViewBox.js";
 export { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";
 export { XRControllerModel } from "../webxr/controllers/XRControllerModel.js";

package/src/engine-components/timeline/PlayableDirector.ts

@@ -66,10 +66,19 @@ export class PlayableDirector extends Behaviour {
         this.createTrackFunctions[type] = fn;
     }
 
+    /**
+     * The timeline asset that is played by this director.
+     */
     playableAsset?: Models.TimelineAssetModel;
+
     /** Set to true to start playing the timeline when the scene starts */
     @serializable()
     playOnAwake?: boolean;
+
+    /**
+     * Determines how the timeline behaves when it reaches the end of its duration.
+     * @default DirectorWrapMode.Loop
+     */
     @serializable()
     extrapolationMode: DirectorWrapMode = DirectorWrapMode.Loop;
 

package/src/engine-components/timeline/TimelineModels.ts

@@ -92,4 +92,12 @@ export declare class SignalMarkerModel extends MarkerModel {
     asset: string;
 }
 
-export type ScrollMarkerModel = MarkerModel & { selector: string };
+/**
+ * Marker with a name, used for scroll-driven timelines. It is used together with elements in your HTML to define what time in the timeline should be active when the element is in the scroll view.
+ * 
+ * @example Mark html elements to define scroll positions 
+ * ```html
+ * <div data-timeline-marker>...</div>
+ * ```
+ */
+export type ScrollMarkerModel = MarkerModel & { name: string };

package/src/engine-components/timeline/TimelineTracks.ts

@@ -175,8 +175,10 @@ export class AnimationTrackHandler extends TrackHandler {
     // which means we want to notify the object that it's not animated anymore
     // and the animator can then take over
     onStateChanged() {
-        if (this._animator)
-            setObjectAnimated(this._animator.gameObject, this, this.director.isPlaying);
+        if (this._animator) {
+            // We can not check the *isPlaying* state here because the timeline might be paused and evaluated by e.g. ScrollFollow
+            setObjectAnimated(this._animator.gameObject, this, this.director.enabled && this.director.weight > 0);
+        }
     }
 
     createHooks(clipModel: Models.AnimationClipModel, clip) {

package/src/engine-components/utils/LookAt.ts

@@ -6,6 +6,7 @@ import { type UsdzBehaviour } from "../../engine-components/export/usdz/extensio
 import { ActionBuilder, BehaviorModel, TriggerBuilder, USDVec3 } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
 import { USDObject } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
 import { Behaviour } from "../Component.js";
+import { isDevEnvironment } from "../../engine/debug/index.js";
 
 /**
  * LookAt behaviour makes the object look at a target object or the camera.  
@@ -42,7 +43,10 @@ export class LookAt extends Behaviour implements UsdzBehaviour {
     /** @internal */
     onBeforeRender(): void {
         let target: Object3D | null | undefined = this.target;
-        if (!target) target = this.context.mainCamera;
+        if (!target) {
+            target = this.context.mainCamera;
+            if (isDevEnvironment()) console.warn(`[LookAt] No target set on ${this.name}, using main camera as target.`);
+        }
         if (!target) return;
 
         let copyTargetRotation = this.copyTargetRotation;

package/src/engine-components/web/Clickthrough.ts

@@ -1,12 +1,21 @@
 import { NEPointerEvent } from "../../engine/engine_input.js";
 import { onStart } from "../../engine/engine_lifecycle_api.js";
+import { addAttributeChangeCallback } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
 
 // Automatically add ClickThrough component if "clickthrough" attribute is present on the needle-engine element
 onStart(ctx => {
     const attribute = ctx.domElement.getAttribute("clickthrough");
-    if (attribute !== null && attribute !== "0" && attribute !== "false") {
-        ctx.scene.addComponent(ClickThrough);
+    if (clickthroughEnabled(attribute)) {
+        const comp = ctx.scene.addComponent(ClickThrough);
+        addAttributeChangeCallback(ctx.domElement, "clickthrough", () => {
+            const attribute = ctx.domElement.getAttribute("clickthrough");
+            comp.enabled = clickthroughEnabled(attribute);
+        });
+    }
+
+    function clickthroughEnabled(val: string | null) {
+        return val !== null && val !== "0" && val !== "false";
     }
 });
 

package/src/engine-components/web/ScrollFollow.ts

@@ -1,7 +1,7 @@
 import { Box3, Object3D } from "three";
 import { element } from "three/src/nodes/TSL.js";
-import { Context } from "../../engine/engine_context.js";
 
+import { Context } from "../../engine/engine_context.js";
 import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { getBoundingBox } from "../../engine/engine_three_utils.js";
@@ -150,7 +150,8 @@ export class ScrollFollow extends Behaviour {
             }
         }
 
-        if (this._current_value !== this._appliedValue) {
+        // if (this._current_value !== this._appliedValue) 
+        {
             this._appliedValue = this._current_value;
 
             let defaultPrevented = false;
@@ -242,7 +243,8 @@ export class ScrollFollow extends Behaviour {
 
         if (target instanceof PlayableDirector) {
             this.handleTimelineTarget(target, value);
-            if (!target.isPlaying) target.evaluate();
+            if (target.isPlaying) target.pause();
+            target.evaluate();
         }
         else if (target instanceof Animator) {
             target.setFloat("scroll", value);
@@ -292,18 +294,35 @@ export class ScrollFollow extends Behaviour {
         let scrollRegionEnd = 0;
         markersArray.length = 0;
 
-        for (const marker of director.foreachMarker<ScrollMarkerModel & { element?: HTMLElement | null, needsUpdate?: boolean }>("ScrollMarker")) {
+        // querySelectorResults.length = 0;
+        let markerIndex = 0;
+
+        // https://scroll-driven-animations.style/tools/view-timeline/ranges
+        for (const marker of director.foreachMarker<ScrollMarkerModel & { element?: HTMLElement | null, needsUpdate?: boolean, timeline?: ViewTimeline }>("ScrollMarker")) {
+
+            const index = markerIndex++;
 
             // Get marker elements from DOM
-            if (marker.selector?.length && (marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (!marker.element?.parentNode))) {
+            if ((marker.element === undefined || marker.needsUpdate === true || /** element is not in DOM anymore? */ (!marker.element?.parentNode))) {
                 marker.needsUpdate = false;
                 try {
-                    marker.element = document.querySelector<HTMLElement>(marker.selector) || null;
-                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.selector);
+                    marker.element = tryGetElementsForSelector(index, marker.name) as HTMLElement | null;
+                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.name);
+                    // if (!marker.element) {
+                    //     marker.timeline = undefined;
+                    //     continue;
+                    // }
+                    // else {
+                    //     /** @ts-ignore */
+                    //     marker.timeline = new ViewTimeline({
+                    //         subject: marker.element,
+                    //         axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
+                    //     });
+                    // }
                 }
                 catch (error) {
                     marker.element = null;
-                    console.error("ScrollMarker selector is not valid: " + marker.selector + "\n", error);
+                    console.error("ScrollMarker selector is not valid: " + marker.name + "\n", error);
                 }
             }
 
@@ -331,11 +350,28 @@ export class ScrollFollow extends Behaviour {
         weightsArray.length = 0;
         let sum = 0;
 
+        // We keep a separate count here in case there are some markers that could not be resolved so point to *invalid* elements - the timeline should fallback to 0-1 scroll behaviour then
         let markerCount = 0;
         for (const marker of markersArray) {
 
             if (!marker.element) continue;
 
+            markerCount += 1;
+
+            // const timeline = marker.timeline;
+            // if (timeline) {
+            //     const time01 = calculateTimelinePositionNormalized(timeline);
+            //     if (time01 > 0 && time01 <= 1) {
+            //         const overlap = calculateTimelinePositionNormalized(timeline!);
+            //         const weight = overlap;
+            //         // console.log(marker.element.className, time01)
+            //         weightsArray.push({ time: marker.time, weight: weight });
+            //         sum += weight;
+            //     }
+            // }
+            // continue;
+            // if(this.context.time.frame % 10 === 0) console.log(marker.element?.className, timeline, calculateTimelinePositionNormalized(timeline!));
+
             const top = marker.element.offsetTop;
             const height = marker.element.offsetHeight;
             const bottom = top + height;
@@ -356,7 +392,6 @@ export class ScrollFollow extends Behaviour {
                 const overlapTop = Math.max(top, currentTop);
                 const overlapBottom = Math.min(bottom, currentBottom);
                 overlap = Math.max(0, overlapBottom - overlapTop);
-                // console.log(marker.element.className, overlap)
             }
 
             markerCount += 1;
@@ -372,25 +407,124 @@ export class ScrollFollow extends Behaviour {
         }
         else if (weightsArray.length > 0) {
             // normalize and calculate weighted time
-            let time = weightsArray[0].time;
-            for (const o of weightsArray) {
-                const weight = o.weight / Math.max(0.00001, sum);
+            let time = 0;
+            for (const entry of weightsArray) {
+                const weight = entry.weight / Math.max(0.00001, sum);
+                // console.log(weight.toFixed(2))
                 // lerp time based on weight
-                const diff = Math.abs(o.time - time);
+                const diff = Math.abs(entry.time - time);
                 time += diff * weight;
             }
-            director.time = time;
+            // console.log(time.toFixed(2), [...weightsArray])
+            if (this.damping <= 0)
+                director.time = time;
+            else
+                director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
         }
     }
 
 }
 
+
+
 const weightsArray: OverlapInfo[] = [];
-const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null })[] = [];
+const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null, timeline?: ViewTimeline })[] = [];
 
 type OverlapInfo = {
     /** Marker time */
     time: number,
     /** Overlap in pixels */
     weight: number,
+}
+
+
+// type SelectorCache = {
+//     /** The selector used to query the *elements */
+//     selector: string,
+//     elements: Element[] | null,
+//     usedElementCount: number,
+// }
+// const querySelectorResults: Array<SelectorCache> = [];
+
+const needleScrollMarkerCacheKey = "data-timeline-marker";
+const needleScrollMarkerIndexCache = new Map<number, Element | null>();
+const needleScrollMarkerNameCache = new Map<string, Element | null>();
+let needsScrollMarkerRefresh = true;
+
+function tryGetElementsForSelector(index: number, name: string): Element | null {
+
+    if (!needsScrollMarkerRefresh) {
+        let element = name?.length ? needleScrollMarkerNameCache.get(name) : null;
+        if (element) return element;
+        element = needleScrollMarkerIndexCache.get(index) || null;
+        return element;
+    }
+    needsScrollMarkerRefresh = false;
+    needleScrollMarkerIndexCache.clear();
+    const markers = document.querySelectorAll(`[data-timeline-marker]`);
+    markers.forEach((m, i) => {
+        needleScrollMarkerIndexCache.set(i, m);
+        const name = m.getAttribute("data-timeline-marker");
+        if (name?.length) needleScrollMarkerNameCache.set(name, m);
+    });
+    const element = needleScrollMarkerIndexCache.get(index) || null;
+    return element;
+
+
+    /* e.g. 
+    <div class="section behind start" data-needle-scroll-marker>
+    */
+    // console.log(index, element)
+    if (element) return element;
+
+    // for (const entry of querySelectorResults) {
+    //     if (entry.selector === selector) {
+    //         const index = entry.usedElementCount++;
+    //         return entry.elements && index < entry.elements.length ? entry.elements[index] : null;
+    //     }
+    // }
+    // const elements = document.querySelectorAll(selector);
+    // querySelectorResults.push({ selector, elements: Array.from(elements), usedElementCount: 1 });
+    // if (elements.length > 0) return elements[0];
+    return null;
+}
+
+
+// #region ScrollTimeline
+
+function calculateTimelinePositionNormalized(timeline: ViewTimeline) {
+    if (!timeline.source) return 0;
+    const currentTime = timeline.currentTime;
+    const duration = timeline.duration;
+    let durationValue = 1;
+    if (duration.unit === "seconds") {
+        durationValue = duration.value;
+    }
+    else if (duration.unit === "percent") {
+        durationValue = duration.value;
+    }
+    const t01 = currentTime.unit === "seconds" ? (currentTime.value / durationValue) : (currentTime.value / 100);
+    return t01;
+}
+function calculateNormalizedOverlap(timeline: ViewTimeline) {
+    if (!timeline.source) return 0;
+    const start = timeline.startOffset;
+    const end = timeline.endOffset;
+    const total = start.value + end.value;
+    if (total <= 0) return 1;
+    const startNorm = start.value / total;
+    const endNorm = end.value / total;
+    return 1 - (startNorm + endNorm);
+}
+
+
+declare global {
+    interface ViewTimeline {
+        axis: 'block' | 'inline';
+        currentTime: { unit: 'seconds' | 'percent', value: number };
+        duration: { unit: 'seconds' | 'percent', value: number };
+        source: Element | null;
+        startOffset: { unit: 'px', value: number };
+        endOffset: { unit: 'px', value: number };
+    }
 }

package/src/engine-components/web/ViewBox.ts

@@ -0,0 +1,199 @@
+import { Camera, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { serializable } from "../../engine/engine_serialization_decorator.js";
+import { registerType } from "../../engine/engine_typestore.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
+import { Behaviour } from "../Component.js";
+import { isDevEnvironment } from "../../engine/debug/debug.js";
+import { getParam } from "../../engine/engine_utils.js";
+
+const debugParam = getParam("debugviewbox");
+
+@registerType
+export class ViewBox extends Behaviour {
+
+    static instances: ViewBox[] = [];
+
+    @serializable()
+    referenceFieldOfView: number = 60;
+
+    @serializable()
+    debug: boolean = false;
+
+    awake() {
+        // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
+        // setInterval(()=>{
+        //     this.enabled = !this.enabled
+        // }, 1000)
+    }
+    onEnable(): void {
+        if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
+        ViewBox.instances.push(this);
+    }
+
+    onDisable(): void {
+        const idx = ViewBox.instances.indexOf(this);
+        if (idx !== -1) ViewBox.instances.splice(idx, 1);
+    }
+
+    onBeforeRender() {
+        if (this.context.isInXR) return;
+        const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
+        if (!isActive) return;
+
+        // calculate box size to fit the camera frustrum size at the current position (just scale)
+        const camera = this.context.mainCamera;
+        if (!camera) return;
+        if (!(camera instanceof PerspectiveCamera)) {
+            // TODO: support orthographic camera
+            return;
+        }
+
+        if (this.referenceFieldOfView === undefined || this.referenceFieldOfView <= 0) {
+            if (debugParam || this.debug) console.warn("[ViewBox] No valid referenceFieldOfView set, cannot adjust box size:", this.referenceFieldOfView);
+            return;
+        }
+
+        const domRect = this.context.domElement.getBoundingClientRect();
+        const domX = domRect.x;
+        const domY = domRect.y;
+        const domWidth = domRect.width;
+        const domHeight = domRect.height;
+
+        let rectPosX = 0;
+        let rectPosY = 0;
+        let rectWidth = domWidth;
+        let rectHeight = domHeight;
+        let diffWidth = 1;
+        let diffHeight = 1;
+        // use focus rect if available
+        const focusRectSize = this.context.focusRectSize;
+        if (focusRectSize) {
+            // console.log(focusRectSize)
+            rectPosX = focusRectSize.x;
+            rectPosY = focusRectSize.y;
+            rectWidth = focusRectSize.width;
+            rectHeight = focusRectSize.height;
+            diffWidth = domWidth / rectWidth;
+            diffHeight = domHeight / rectHeight;
+        }
+
+        // const view = camera.view;
+        const view = camera.view;
+        const zoom = camera.zoom;
+        const aspect = camera.aspect;
+        const fov = camera.fov;
+        camera.view = null;
+        camera.zoom = 1;
+        // camera.aspect = rectWidth / rectHeight;
+        camera.fov = this.referenceFieldOfView;
+        camera.updateProjectionMatrix();
+
+        const boxPosition = this.gameObject.worldPosition;
+        const boxScale = this.gameObject.worldScale;
+
+
+
+        // const fov = this.referenceFieldOfView
+        const distance = camera.worldPosition.distanceTo(boxPosition);
+        const vFOV = this.referenceFieldOfView * Math.PI / 180; // convert vertical fov to radians
+        const height = 2 * Math.tan(vFOV / 2) * distance; // visible height
+        const width = height * camera.aspect; // visible width
+
+        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, height * .5);
+        const boxWidth = (projectedBox.maxX - projectedBox.minX);
+        const boxHeight = (projectedBox.maxY - projectedBox.minY);
+
+        // TODO: take the rect size different into account
+        const scale = this.fit(
+            boxWidth * camera.aspect,
+            boxHeight,
+            width / diffWidth,
+            height / diffHeight
+        );
+        const vec = getTempVector(boxPosition);
+        vec.project(camera);
+        this.context.focusRectSettings.offsetX = vec.x;
+        this.context.focusRectSettings.offsetY = vec.y;
+        this.context.focusRectSettings.zoom = scale;
+        // if we don't have a focus rect yet, set it to the dom element
+        if (!this.context.focusRect) this.context.setCameraFocusRect(this.context.domElement);
+
+        // Reset values
+        camera.view = view;
+        camera.zoom = zoom;
+        camera.aspect = aspect;
+        camera.fov = fov;
+        // camera.updateProjectionMatrix();
+
+
+        // BACKLOG: some code for box scale of an object (different component)
+        // this.gameObject.worldScale = getTempVector(width, height, worldscale.z);
+        // this.gameObject.scale.multiplyScalar(.98)
+        // const minscale = Math.min(width, height);
+        // console.log(width, height);
+        // this.gameObject.worldScale = getTempVector(scale, scale, scale);
+    }
+
+
+    /**
+     * Cover fit
+     */
+    private fit(width1: number, height1: number, width2: number, height2: number) {
+        const scaleX = width2 / width1;
+        const scaleY = height2 / height1;
+        return Math.min(scaleX, scaleY);
+    }
+
+
+
+    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, diff: number) {
+
+        const factor = .5 * diff;
+
+        const corners = [
+            getTempVector(-scale.x * factor, -scale.y * factor, -scale.z * factor),
+            getTempVector(scale.x * factor, -scale.y * factor, -scale.z * factor),
+            getTempVector(-scale.x * factor, scale.y * factor, -scale.z * factor),
+            getTempVector(scale.x * factor, scale.y * factor, -scale.z * factor),
+            getTempVector(-scale.x * factor, -scale.y * factor, scale.z * factor),
+            getTempVector(scale.x * factor, -scale.y * factor, scale.z * factor),
+            getTempVector(-scale.x * factor, scale.y * factor, scale.z * factor),
+            getTempVector(scale.x * factor, scale.y * factor, scale.z * factor),
+        ];
+        let minX = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < corners.length; i++) {
+            const c = corners[i];
+            c.add(position);
+            c.project(camera);
+            if (c.x < minX) minX = c.x;
+            if (c.x > maxX) maxX = c.x;
+            if (c.y < minY) minY = c.y;
+            if (c.y > maxY) maxY = c.y;
+        }
+
+        // if(!this._projectedBoxElement) {
+        //     this._projectedBoxElement = document.createElement("div");
+        // this.context.domElement.appendChild(this._projectedBoxElement);
+        // }
+        // this._projectedBoxElement.style.position = "fixed";
+        // this._projectedBoxElement.style.outline = "10px solid red";
+        // this._projectedBoxElement.style.left = ((minX * .5 + .5) * this.context.domWidth) + "px";
+        // this._projectedBoxElement.style.top = ((-maxY * .5 + .5) * this.context.domHeight) + "px";
+        // this._projectedBoxElement.style.width = ((maxX - minX) * .5 * this.context.domWidth) + "px";
+        // this._projectedBoxElement.style.height = ((maxY - minY) * .5 * this.context.domHeight) + "px";
+        // this._projectedBoxElement.style.pointerEvents = "none";
+        // this._projectedBoxElement.style.zIndex = "1000";
+
+
+        return { minX, maxX, minY, maxY };
+
+    }
+    private _projectedBoxElement: HTMLElement | null = null;
+
+
+
+
+}

package/src/engine-components/web/index.ts

@@ -1,4 +1,5 @@
 export * from "./Clickthrough.js";
 export * from "./CursorFollow.js";
 export * from "./HoverAnimation.js";
-export * from "./ScrollFollow.js";
+export * from "./ScrollFollow.js";
+export * from "./ViewBox.js";