@needle-tools/engine 4.10.0-beta.3 → 4.10.0-beta.5

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 { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Mathf } from "../../engine/engine_math.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { getBoundingBox, setVisibleInCustomShadowRendering } from "../../engine/engine_three_utils.js";
@@ -174,8 +174,8 @@ export class ScrollFollow extends Behaviour {
 
                 const value = this.invert ? 1 - this._current_value : this._current_value;
 
-                const height = this._rangeEndValue - this._rangeStartValue;
-                const pixelValue = this._rangeStartValue + value * height;
+                // const height = this._rangeEndValue - this._rangeStartValue;
+                // const pixelValue = this._rangeStartValue + value * height;
 
                 // apply scroll to target(s)
                 if (Array.isArray(this.target)) {
@@ -186,7 +186,7 @@ export class ScrollFollow extends Behaviour {
                 }
 
                 if (debug && this.context.time.frame % 30 === 0) {
-                    console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%`);
+                    console.debug(`[ScrollFollow] ${this._current_value.toFixed(5)} — ${(this._target_value * 100).toFixed(0)}%, targets [${Array.isArray(this.target) ? this.target.length : 1}]`);
                 }
             }
         }
@@ -304,13 +304,15 @@ export class ScrollFollow extends Behaviour {
             const index = markerIndex++;
 
             // Get marker elements from DOM
-            if ((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 && !marker.element?.parentNode))) {
                 marker.needsUpdate = false;
                 try {
+                    // TODO: with this it's currently not possible to remap markers from HTML. For example if I have two sections and I want to now use the marker["center"] multiple times to stay at that marker for a longer time
                     marker.element = tryGetElementsForSelector(index, marker.name) as HTMLElement | null;
-                    if (debug) console.debug("ScrollMarker found on page", marker.element, marker.name);
+                    if (debug) console.debug(`ScrollMarker #${index} "${marker.name}" (${marker.time.toFixed(2)}) found`, marker.element);
                     if (!marker.element) {
                         marker.timeline = undefined;
+                        if (debug || isDevEnvironment()) console.warn(`No HTML element found for ScrollMarker: ${marker.name} (index ${index})`);
                         continue;
                     }
                     else {
@@ -370,19 +372,20 @@ export class ScrollFollow extends Behaviour {
                 const time01 = calculateTimelinePositionNormalized(timeline);
                 // remap 0-1 to 0 - 1 - 0 (full weight at center)
                 const weight = 1 - Math.abs(time01 - 0.5) * 2;
+                const name = marker.name || `marker${i}`;
                 if (time01 > 0 && time01 <= 1) {
                     const lerpTime = marker.time + (nextTime - marker.time) * time01;
-                    weightsArray.push({ time: lerpTime, weight: weight });
+                    weightsArray.push({ name, time: lerpTime, weight: weight });
                     sum += weight;
                 }
                 // Before the first marker is reached
                 else if (i === 0 && time01 <= 0) {
-                    weightsArray.push({ time: 0, weight: 1 });
+                    weightsArray.push({ name, time: 0, weight: 1 });
                     sum += 1;
                 }
                 // After the last marker is reached
                 else if (i === markersArray.length - 1 && time01 >= 1) {
-                    weightsArray.push({ time: duration, weight: 1 });
+                    weightsArray.push({ name, time: duration, weight: 1 });
                     sum += 1;
                 }
             }
@@ -435,13 +438,16 @@ export class ScrollFollow extends Behaviour {
                     time += diff * weight;
                 }
             }
-            if (debug && this.context.time.frame % 20 === 0) console.log(time.toFixed(3), [...weightsArray])
             if (this.damping <= 0) {
                 director.time = time;
             }
             else {
                 director.time = Mathf.lerp(director.time, time, this.context.time.deltaTime / this.damping);
             }
+
+            if (debug && this.context.time.frame % 30 === 0) {
+                console.log(`[ScrollFollow ] Timeline ${director.name}: ${time.toFixed(3)}`, weightsArray.map(w => `[${w.name} ${(w.weight * 100).toFixed(0)}%]`).join(", "));
+            }
         }
     }
 
@@ -450,9 +456,13 @@ export class ScrollFollow extends Behaviour {
 
 
 const weightsArray: OverlapInfo[] = [];
-const markersArray: (ScrollMarkerModel & { element?: HTMLElement | null, timeline?: ViewTimeline })[] = [];
+const markersArray: Array<ScrollMarkerModel & {
+    element?: HTMLElement | null,
+    timeline?: ViewTimeline,
+}> = [];
 
 type OverlapInfo = {
+    name: string,
     /** Marker time */
     time: number,
     /** Overlap in pixels */
@@ -468,17 +478,29 @@ type OverlapInfo = {
 // }
 // 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 {
+function tryGetElementsForSelector(index: number, name: string, _cycle: number = 0): Element | null {
 
     if (!needsScrollMarkerRefresh) {
-        let element = name?.length ? needleScrollMarkerNameCache.get(name) : null;
-        if (element) return element;
-        element = needleScrollMarkerIndexCache.get(index) || null;
+        if (name?.length) {
+            const element = needleScrollMarkerNameCache.get(name) || null;
+            if (element) return element;
+            // const isNumber = !isNaN(Number(name));
+            // if (!isNumber) {
+            // }
+        }
+        const element = needleScrollMarkerIndexCache.get(index) || null;
+        const value = element?.getAttribute("data-timeline-marker");
+        // if (value?.length) {
+        //     if (cycle === 0) {
+        //         // if the HTML marker we found by index does define a different marker name we try to find the correct HTML element by name
+        //         return tryGetElementsForSelector(index, value, 1);
+        //     }
+        //     if (isDevEnvironment()) console.warn(`ScrollMarker name mismatch: expected "${name}", got "${value}"`);
+        // }
         return element;
     }
     needsScrollMarkerRefresh = false;
@@ -489,26 +511,8 @@ function tryGetElementsForSelector(index: number, name: string): Element | null
         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;
+    needsScrollMarkerRefresh = false;
+    return tryGetElementsForSelector(index, name);
 }
 
 

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

@@ -1,54 +1,66 @@
-import { Camera, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { Camera, PerspectiveCamera, Quaternion, Scene, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/debug.js";
 import { Gizmos } from "../../engine/engine_gizmos.js";
 import { serializable } from "../../engine/engine_serialization_decorator.js";
-import { getTempQuaternion, getTempVector } from "../../engine/engine_three_utils.js";
+import { getTempVector } from "../../engine/engine_three_utils.js";
 import { registerType } from "../../engine/engine_typestore.js";
 import { getParam } from "../../engine/engine_utils.js";
+import { RGBAColor } from "../../engine/js-extensions/RGBAColor.js";
 import { Behaviour } from "../Component.js";
 
+
 const debugParam = getParam("debugviewbox");
+const disabledGizmoColor = new RGBAColor(.5, .5, .5, .5);
 
+/**
+ * This component can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.  
+ * 
+ * Add the ViewBox to an object into your scene
+ */
 @registerType
 export class ViewBox extends Behaviour {
 
-    static instances: ViewBox[] = [];
+    static readonly instances: ViewBox[] = [];
 
+    /**
+     * The reference field of view is used to calculate the box size. This should usually be the same as your camera's fov.
+     * @default undefined (meaning it will use the camera fov on the first frame)
+     */
     @serializable()
-    referenceFieldOfView: number = 60;
+    referenceFieldOfView: number | undefined = undefined;
 
+    /**
+     * Enable debug logs and rendering for this component instance
+     */
     @serializable()
     debug: boolean = false;
 
-    // awake() {
-    //     // this.referenceFieldOfView = (this.context.mainCamera as PerspectiveCamera)?.fov || 60;
-    //     setInterval(()=>{
-    //         if(Math.random() > .5)
-    //         this.enabled = !this.enabled
-    //     }, 1000)
-    // }
-    
     onEnable(): void {
         if (debugParam || this.debug || isDevEnvironment()) console.debug("[ViewBox] Using camera fov:", this.referenceFieldOfView);
+        // register instance
         ViewBox.instances.push(this);
     }
 
     onDisable(): void {
         if (debugParam || this.debug) console.debug("[ViewBox] Disabled");
+        // unregister instance
         const idx = ViewBox.instances.indexOf(this);
         if (idx !== -1) ViewBox.instances.splice(idx, 1);
         this._projectedBoxElement?.remove();
     }
 
-    onBeforeRender() {
+    onBeforeRender(): void {
         if (this.context.isInXR) return;
+        if (this.destroyed) return;
         const isActive = ViewBox.instances[ViewBox.instances.length - 1] === this;
         if (!isActive) {
-            if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0x333333);
+            if (debugParam || this.debug) {
+                Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, disabledGizmoColor);
+            }
             return;
         }
-        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00);
+        if (debugParam || this.debug) Gizmos.DrawWireBox(this.gameObject.worldPosition, this.gameObject.worldScale, 0xdddd00, 0, true, this.gameObject.worldQuaternion);
 
         // calculate box size to fit the camera frustrum size at the current position (just scale)
         const camera = this.context.mainCamera;
@@ -58,6 +70,10 @@ export class ViewBox extends Behaviour {
             return;
         }
 
+        if (this.referenceFieldOfView === undefined) {
+            this.referenceFieldOfView = camera.fov;
+        }
+
         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;
@@ -94,6 +110,7 @@ export class ViewBox extends Behaviour {
         camera.fov = this.referenceFieldOfView;
         camera.updateProjectionMatrix();
 
+
         const boxPosition = this.gameObject.worldPosition;
         const boxScale = this.gameObject.worldScale;
 
@@ -138,7 +155,7 @@ export class ViewBox extends Behaviour {
         const height = 2 * Math.tan(vFOV / 2) * distance; // visible height
         const width = height * camera.aspect; // visible width
 
-        const projectedBox = this.projectBoxIntoCamera(boxPosition, boxScale, camera, 1);
+        const projectedBox = this.projectBoxIntoCamera(camera, 1);
         // return
         const boxWidth = (projectedBox.maxX - projectedBox.minX);
         const boxHeight = (projectedBox.maxY - projectedBox.minY);
@@ -189,18 +206,18 @@ export class ViewBox extends Behaviour {
 
 
 
-    private projectBoxIntoCamera(position: Vector3, scale: Vector3, camera: Camera, _factor: number) {
+    private projectBoxIntoCamera(camera: Camera, _factor: number) {
         const factor = .5 * _factor;
 
         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),
+            getTempVector(-factor, -factor, -factor),
+            getTempVector(factor, -factor, -factor),
+            getTempVector(-factor, factor, -factor),
+            getTempVector(factor, factor, -factor),
+            getTempVector(-factor, -factor, factor),
+            getTempVector(factor, -factor, factor),
+            getTempVector(-factor, factor, factor),
+            getTempVector(factor, factor, factor),
         ];
         let minX = Number.POSITIVE_INFINITY;
         let maxX = Number.NEGATIVE_INFINITY;
@@ -208,7 +225,7 @@ export class ViewBox extends Behaviour {
         let maxY = Number.NEGATIVE_INFINITY;
         for (let i = 0; i < corners.length; i++) {
             const c = corners[i];
-            c.add(position);
+            c.applyMatrix4(this.gameObject.matrixWorld);
             c.project(camera);
             if (c.x < minX) minX = c.x;
             if (c.x > maxX) maxX = c.x;
@@ -223,7 +240,8 @@ export class ViewBox extends Behaviour {
             if (this._projectedBoxElement.parentElement !== this.context.domElement)
                 this.context.domElement.appendChild(this._projectedBoxElement);
             this._projectedBoxElement.style.position = "fixed";
-            this._projectedBoxElement.style.outline = "5px dotted red";
+            // dotted but with larger gaps
+            this._projectedBoxElement.style.outline = "2px dashed rgba(255,0,0,.5)";
             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";

package/src/engine-components-experimental/Presentation.ts

@@ -1,6 +1,7 @@
 import type { KeyCode } from "../engine/engine_input.js";
 import { Behaviour } from "../engine-components/Component.js";
 
+/** @internal */
 export class PresentationMode extends Behaviour {
 
     toggleKey: KeyCode = "KeyP";