@needle-tools/engine 4.10.2-next.298bf98 → 4.10.2-next.a199092

package/lib/engine-components/timeline/TimelineModels.d.ts

@@ -130,6 +130,6 @@ export declare class SignalMarkerModel extends MarkerModel {
  * @category Animation and Sequencing
 */
 export type ScrollMarkerModel = MarkerModel & {
-    name: string;
+    name?: string;
 };
 export {};

package/lib/engine-components/web/ScrollFollow.d.ts

@@ -33,6 +33,12 @@ type ScrollFollowEvent = {
  * 2. Add a ScrollFollow component to the same GameObject or another GameObject in the scene.
  * 3. Assign the PlayableDirector component to the ScrollFollow's target property.
  * 4. The timeline will now scrub based on the scroll position of the page.
+ * 5. (Optional) Add ScrollMarker markers to your HTML to define specific points in the timeline that correspond to elements on the page. For example:
+ *   ```html
+ *   <div data-timeline-marker="0.0">Start of Timeline</div>
+ *   <div data-timeline-marker="0.5">Middle of Timeline</div>
+ *   <div data-timeline-marker="1.0">End of Timeline</div>
+ * ```
  *
  * @category Web
  * @group Components

package/lib/engine-components/web/ScrollFollow.js

@@ -42,6 +42,12 @@ const debug = getParam("debugscroll");
  * 2. Add a ScrollFollow component to the same GameObject or another GameObject in the scene.
  * 3. Assign the PlayableDirector component to the ScrollFollow's target property.
  * 4. The timeline will now scrub based on the scroll position of the page.
+ * 5. (Optional) Add ScrollMarker markers to your HTML to define specific points in the timeline that correspond to elements on the page. For example:
+ *   ```html
+ *   <div data-timeline-marker="0.0">Start of Timeline</div>
+ *   <div data-timeline-marker="0.5">Middle of Timeline</div>
+ *   <div data-timeline-marker="1.0">End of Timeline</div>
+ * ```
  *
  * @category Web
  * @group Components
@@ -242,57 +248,67 @@ export class ScrollFollow extends Behaviour {
     }
     handleTimelineTarget(director, value) {
         const duration = director.duration;
-        let scrollRegionStart = Infinity;
-        let scrollRegionEnd = 0;
-        markersArray.length = 0;
-        // querySelectorResults.length = 0;
-        let markerIndex = 0;
-        // https://scroll-driven-animations.style/tools/view-timeline/ranges
-        for (const marker of director.foreachMarker("ScrollMarker")) {
-            const index = markerIndex++;
-            // Get marker elements from DOM
-            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);
-                    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;
+        let markersArray = timelineMarkerArrays.get(director);
+        // Create markers array
+        if (!markersArray) {
+            markersArray = [];
+            timelineMarkerArrays.set(director, markersArray);
+            let markerIndex = 0;
+            for (const marker of director.foreachMarker("ScrollMarker")) {
+                const index = markerIndex++;
+                // Get marker elements from DOM
+                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);
+                        if (debug)
+                            console.debug(`ScrollMarker #${index} (${marker.time.toFixed(2)}) found`, marker.element);
+                        if (!marker.element) {
+                            if (debug || isDevEnvironment())
+                                console.warn(`No HTML element found for ScrollMarker: ${marker.name} (index ${index})`);
+                            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.name + "\n", error);
                     }
                 }
-                catch (error) {
-                    marker.element = null;
-                    console.error("ScrollMarker selector is not valid: " + marker.name + "\n", error);
-                }
+                // skip markers without element (e.g. if the selector didn't return any element)
+                if (!marker.element)
+                    continue;
+                markersArray.push(marker);
             }
-            // skip markers without element (e.g. if the selector didn't return any element)
-            if (!marker.element)
-                continue;
-            markersArray.push(marker);
-            const top = marker.element.offsetTop;
-            const height = marker.element.offsetHeight;
-            const bottom = top + height;
-            if (top < scrollRegionStart) {
-                scrollRegionStart = top;
+            // If the timeline has no markers defined we can use timeline-marker elements in the DOM. These must define times then
+            if (markersArray.length <= 0) {
+                const markers = document.querySelectorAll(`[data-timeline-marker]`);
+                markers.forEach((element) => {
+                    const value = element.getAttribute("data-timeline-marker");
+                    const time = parseFloat(value || ("NaN"));
+                    if (!isNaN(time)) {
+                        markersArray.push({
+                            time,
+                            element: element,
+                        });
+                    }
+                    else if (isDevEnvironment() || debug) {
+                        console.warn("[ScrollFollow] data-timeline-marker attribute is not a valid number. Supported are numbers only (e.g. <div data-timeline-marker=\"0.5\">)");
+                    }
+                });
             }
-            if (bottom > scrollRegionEnd) {
-                scrollRegionEnd = bottom;
+            // Init ViewTimeline for markers
+            for (const marker of markersArray) {
+                if (marker.element) {
+                    // https://scroll-driven-animations.style/tools/view-timeline/ranges
+                    /** @ts-ignore */
+                    marker.timeline = new ViewTimeline({
+                        subject: marker.element,
+                        axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
+                    });
+                }
             }
         }
-        const currentTop = this._scrollValue;
-        const currentBottom = currentTop + this._scrollContainerHeight;
         weightsArray.length = 0;
         let sum = 0;
         const oneFrameTime = 1 / 60;
@@ -312,7 +328,7 @@ 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}`;
+                const name = `marker${i}`;
                 if (time01 > 0 && time01 <= 1) {
                     const lerpTime = marker.time + (nextTime - marker.time) * time01;
                     weightsArray.push({ name, time: lerpTime, weight: weight });
@@ -329,33 +345,6 @@ export class ScrollFollow extends Behaviour {
                     sum += 1;
                 }
             }
-            continue;
-            // if(this.context.time.frame % 10 === 0) console.log(marker.element?.className, timeline, calculateTimelinePositionNormalized(timeline!));
-            // const top = marker.element.offsetTop - this._scrollContainerHeight;
-            // const height = marker.element.offsetHeight + this._scrollContainerHeight;
-            // const bottom = top + height;
-            // let overlap = 0;
-            // // TODO: if we have two marker sections where no HTML overlaps (vor example because some large section is between them) we probably want to still virtually interpolate between them slowly in that region
-            // if (bottom < currentTop) {
-            //     // marker is above scroll region
-            //     overlap = 0;
-            // }
-            // else if (top > currentBottom) {
-            //     // marker is below scroll region
-            //     overlap = 0;
-            // }
-            // else {
-            //     // calculate overlap in pixels
-            //     const overlapTop = Math.max(top, currentTop);
-            //     const overlapBottom = Math.min(bottom, currentBottom);
-            //     const height = Math.max(1, currentBottom - currentTop);
-            //     overlap = Math.max(0, overlapBottom - overlapTop);
-            // }
-            // // if(this.context.time.frame % 20 === 0) console.log(overlap)
-            // if (overlap > 0) {
-            //     weightsArray.push({ time: marker.time, weight: overlap });
-            //     sum += overlap;
-            // }
         }
         if (weightsArray.length <= 0 && markerCount <= 0) {
             director.time = value * duration;
@@ -402,8 +391,8 @@ __decorate([
 __decorate([
     serializable(EventList)
 ], ScrollFollow.prototype, "changed", void 0);
+const timelineMarkerArrays = new WeakMap();
 const weightsArray = [];
-const markersArray = [];
 // type SelectorCache = {
 //     /** The selector used to query the *elements */
 //     selector: string,
@@ -411,41 +400,22 @@ const markersArray = [];
 //     usedElementCount: number,
 // }
 // const querySelectorResults: Array<SelectorCache> = [];
-const needleScrollMarkerIndexCache = new Map();
-const needleScrollMarkerNameCache = new Map();
+const needleScrollMarkerCache = new Array();
 let needsScrollMarkerRefresh = true;
-function tryGetElementsForSelector(index, name, _cycle = 0) {
+function tryGetElementsForSelector(index) {
     if (!needsScrollMarkerRefresh) {
-        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;
+        const element = needleScrollMarkerCache[index] || null;
+        if (element)
+            return element;
     }
     needsScrollMarkerRefresh = false;
-    needleScrollMarkerIndexCache.clear();
+    needleScrollMarkerCache.length = 0;
     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);
+        needleScrollMarkerCache[i] = m;
     });
     needsScrollMarkerRefresh = false;
-    return tryGetElementsForSelector(index, name);
+    return tryGetElementsForSelector(index);
 }
 // #region ScrollTimeline
 function calculateTimelinePositionNormalized(timeline) {

package/lib/engine-components/web/ScrollFollow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/ScrollFollow.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollFollow.js","sourceRoot":"","sources":["../../../src/engine-components/web/ScrollFollow.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/engine",
-  "version": "4.10.2-next.298bf98",
+  "version": "4.10.2-next.a199092",
   "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.",
   "main": "dist/needle-engine.min.js",
   "exports": {

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

@@ -134,4 +134,4 @@ export declare class SignalMarkerModel extends MarkerModel {
  * @link [Example Project using ScrollMarker](https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/)
  * @category Animation and Sequencing
 */
-export type ScrollMarkerModel = MarkerModel & { name: string };
+export type ScrollMarkerModel = MarkerModel & { name?: string };

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

@@ -53,6 +53,12 @@ type ScrollFollowEvent = {
  * 2. Add a ScrollFollow component to the same GameObject or another GameObject in the scene.
  * 3. Assign the PlayableDirector component to the ScrollFollow's target property.
  * 4. The timeline will now scrub based on the scroll position of the page.
+ * 5. (Optional) Add ScrollMarker markers to your HTML to define specific points in the timeline that correspond to elements on the page. For example:
+ *   ```html
+ *   <div data-timeline-marker="0.0">Start of Timeline</div>
+ *   <div data-timeline-marker="0.5">Middle of Timeline</div>
+ *   <div data-timeline-marker="1.0">End of Timeline</div>
+ * ```
  * 
  * @category Web
  * @group Components
@@ -291,67 +297,75 @@ export class ScrollFollow extends Behaviour {
     private handleTimelineTarget(director: PlayableDirector, value: number) {
 
         const duration = director.duration;
-
-
-        let scrollRegionStart = Infinity;
-        let scrollRegionEnd = 0;
-        markersArray.length = 0;
-
-        // 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.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 #${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;
+        let markersArray = timelineMarkerArrays.get(director);
+
+        // Create markers array
+        if (!markersArray) {
+            markersArray = [];
+            timelineMarkerArrays.set(director, markersArray);
+
+            let markerIndex = 0;
+
+            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.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) as HTMLElement | null;
+                        if (debug) console.debug(`ScrollMarker #${index} (${marker.time.toFixed(2)}) found`, marker.element);
+                        if (!marker.element) {
+                            if (debug || isDevEnvironment()) console.warn(`No HTML element found for ScrollMarker: ${marker.name} (index ${index})`);
+                            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.name + "\n", error);
                     }
                 }
-                catch (error) {
-                    marker.element = null;
-                    console.error("ScrollMarker selector is not valid: " + marker.name + "\n", error);
-                }
-            }
 
-            // skip markers without element (e.g. if the selector didn't return any element)
-            if (!marker.element) continue;
+                // skip markers without element (e.g. if the selector didn't return any element)
+                if (!marker.element) continue;
 
-            markersArray.push(marker);
+                markersArray.push(marker);
+            }
 
-            const top = marker.element.offsetTop;
-            const height = marker.element.offsetHeight;
-            const bottom = top + height;
-            if (top < scrollRegionStart) {
-                scrollRegionStart = top;
+            // If the timeline has no markers defined we can use timeline-marker elements in the DOM. These must define times then
+            if (markersArray.length <= 0) {
+                const markers = document.querySelectorAll(`[data-timeline-marker]`);
+                markers.forEach((element) => {
+                    const value = element.getAttribute("data-timeline-marker");
+                    const time = parseFloat(value || ("NaN"));
+                    if (!isNaN(time)) {
+                        markersArray!.push({
+                            time,
+                            element: element as HTMLElement,
+                        });
+                    }
+                    else if (isDevEnvironment() || debug) {
+                        console.warn("[ScrollFollow] data-timeline-marker attribute is not a valid number. Supported are numbers only (e.g. <div data-timeline-marker=\"0.5\">)");
+                    }
+                });
             }
-            if (bottom > scrollRegionEnd) {
-                scrollRegionEnd = bottom;
+
+            // Init ViewTimeline for markers
+            for (const marker of markersArray) {
+                if (marker.element) {
+                    // https://scroll-driven-animations.style/tools/view-timeline/ranges
+                    /** @ts-ignore */
+                    marker.timeline = new ViewTimeline({
+                        subject: marker.element,
+                        axis: 'block', // https://drafts.csswg.org/scroll-animations/#scroll-notation
+                    });
+                }
             }
         }
 
 
-
-        const currentTop = this._scrollValue;
-        const currentBottom = currentTop + this._scrollContainerHeight;
-
         weightsArray.length = 0;
         let sum = 0;
         const oneFrameTime = 1 / 60;
@@ -374,7 +388,7 @@ 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}`;
+                const name = `marker${i}`;
                 if (time01 > 0 && time01 <= 1) {
                     const lerpTime = marker.time + (nextTime - marker.time) * time01;
                     weightsArray.push({ name, time: lerpTime, weight: weight });
@@ -391,38 +405,6 @@ export class ScrollFollow extends Behaviour {
                     sum += 1;
                 }
             }
-            continue;
-            // if(this.context.time.frame % 10 === 0) console.log(marker.element?.className, timeline, calculateTimelinePositionNormalized(timeline!));
-
-            // const top = marker.element.offsetTop - this._scrollContainerHeight;
-            // const height = marker.element.offsetHeight + this._scrollContainerHeight;
-            // const bottom = top + height;
-            // let overlap = 0;
-
-            // // TODO: if we have two marker sections where no HTML overlaps (vor example because some large section is between them) we probably want to still virtually interpolate between them slowly in that region
-
-            // if (bottom < currentTop) {
-            //     // marker is above scroll region
-            //     overlap = 0;
-            // }
-            // else if (top > currentBottom) {
-            //     // marker is below scroll region
-            //     overlap = 0;
-            // }
-            // else {
-            //     // calculate overlap in pixels
-            //     const overlapTop = Math.max(top, currentTop);
-            //     const overlapBottom = Math.min(bottom, currentBottom);
-            //     const height = Math.max(1, currentBottom - currentTop);
-            //     overlap = Math.max(0, overlapBottom - overlapTop);
-            // }
-
-            // // if(this.context.time.frame % 20 === 0) console.log(overlap)
-
-            // if (overlap > 0) {
-            //     weightsArray.push({ time: marker.time, weight: overlap });
-            //     sum += overlap;
-            // }
         }
 
         if (weightsArray.length <= 0 && markerCount <= 0) {
@@ -456,12 +438,14 @@ export class ScrollFollow extends Behaviour {
 }
 
 
+const timelineMarkerArrays: WeakMap<PlayableDirector,
+    Array<{
+        time: number,
+        element?: HTMLElement | null | undefined,
+        timeline?: ViewTimeline,
+    }>
+> = new WeakMap();
 
-const weightsArray: OverlapInfo[] = [];
-const markersArray: Array<ScrollMarkerModel & {
-    element?: HTMLElement | null,
-    timeline?: ViewTimeline,
-}> = [];
 
 type OverlapInfo = {
     name: string,
@@ -471,6 +455,8 @@ type OverlapInfo = {
     weight: number,
 }
 
+const weightsArray: OverlapInfo[] = [];
+
 
 // type SelectorCache = {
 //     /** The selector used to query the *elements */
@@ -480,41 +466,23 @@ type OverlapInfo = {
 // }
 // const querySelectorResults: Array<SelectorCache> = [];
 
-const needleScrollMarkerIndexCache = new Map<number, Element | null>();
-const needleScrollMarkerNameCache = new Map<string, Element | null>();
+const needleScrollMarkerCache = new Array<Element>();
 let needsScrollMarkerRefresh = true;
 
-function tryGetElementsForSelector(index: number, name: string, _cycle: number = 0): Element | null {
+function tryGetElementsForSelector(index: number): Element | null {
 
     if (!needsScrollMarkerRefresh) {
-        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;
+        const element = needleScrollMarkerCache[index] || null;
+        if (element) return element;
     }
     needsScrollMarkerRefresh = false;
-    needleScrollMarkerIndexCache.clear();
+    needleScrollMarkerCache.length = 0;
     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);
+        needleScrollMarkerCache[i] = m;
     });
     needsScrollMarkerRefresh = false;
-    return tryGetElementsForSelector(index, name);
+    return tryGetElementsForSelector(index);
 }