@needle-tools/engine 4.10.0-next.f0ec242 → 4.10.0

package/src/engine/engine_utils.ts

@@ -381,6 +381,14 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
     }
     return uri;
 }
+
+export function toSourceId(src: string | null): SourceIdentifier | undefined {
+    if (!src) return undefined;
+    src = src.trim();
+    src = src.split("?")[0]?.split("#")[0];
+    return src;
+}
+
 // export function getPath(glbLocation: SourceIdentifier | undefined, path: string) {
 //     if (path && glbLocation && !path.includes("/")) {
 //         // get directory of glb and prepend it to the audio file path
@@ -793,6 +801,7 @@ const mutationObserverMap = new WeakMap<HTMLElement, HtmlElementExtra>();
 /** 
  * Register a callback when an {@link HTMLElement} attribute changes.   
  * This is used, for example, by the Skybox component to watch for changes to the environment-* and skybox-* attributes.
+ * @returns A function that can be used to unregister the callback
 */
 export function addAttributeChangeCallback(domElement: HTMLElement, name: string, callback: AttributeChangeCallback) {
     if (!mutationObserverMap.get(domElement)) {
@@ -811,6 +820,9 @@ export function addAttributeChangeCallback(domElement: HTMLElement, name: string
         listeners.set(name, []);
     }
     listeners.get(name)!.push(callback);
+    return () => {
+        removeAttributeChangeCallback(domElement, name, callback);
+    }
 };
 
 /** 

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -107,7 +107,7 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
 
     private resolveTexture(entry: LightmapInfo, res: any) {
         const tex: Texture = res as unknown as Texture;
-        if (debug) console.log("Lightmap loaded:", tex);
+        if (debug) console.log("Light Texture loaded:", tex);
         if (tex?.isTexture) {
             if (!this.registry)
                 console.log(LightmapType[entry.type], entry.pointer, tex);

package/src/engine/extensions/extension_utils.ts

@@ -89,7 +89,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParserWithCache, o
                 for (let i = 0; i < val.length; i++) {
                     const entry = val[i];
                     const ext = resolveExtension(parser, entry);
-                    if (ext !== null) {
+                    if (ext !== null && ext !== undefined) {
                         if (typeof ext.then === "function")
                             promises.push(ext.then(res => val[i] = res));
                         else val[i] = ext;

package/src/engine/webcomponents/logo-element.ts

@@ -32,10 +32,22 @@ export class NeedleLogoElement extends HTMLElement {
             cursor: pointer;
         }
         img {
-            width: 95px;
             height: 100%;
             align-self: end;
             margin-left: 0.6rem;
+            transition: transform 0.2s;
+        }
+        img.with-text {
+            width: 11.5ch;
+            &:hover {
+                transform: scale(1.02);
+            }
+        }
+        img.compact {
+            width: 1.7em;
+            &:hover {
+                transform: scale(1.1);
+            }
         }
         span {
             font-size: 1rem;
@@ -43,12 +55,14 @@ export class NeedleLogoElement extends HTMLElement {
         }
         </style>
         <div class="wrapper">
-            <img class="logo" src=${needleLogoSVG} />
+            <img class="logo with-text" src=${needleLogoSVG} />
         </div>
         `;
         this._root.appendChild(template.content.cloneNode(true));
         this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
         this._root.appendChild(this.wrapper);
+        this.logoElement = this._root.querySelector("img.logo") as HTMLImageElement;
+
         // this.wrapper.classList.add("wrapper");
 
         // this.wrapper.appendChild(this.logoElement);
@@ -67,13 +81,24 @@ export class NeedleLogoElement extends HTMLElement {
 
     private readonly _root: ShadowRoot;
     private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement = document.createElement("img");
-    private readonly textElement: HTMLSpanElement = document.createElement("span");
+    private readonly logoElement: HTMLImageElement;
 
     setLogoVisible(val: boolean) {
         this.logoElement.style.display = val ? "block" : "none";
     }
 
+    setType(type: "full" | "compact") {
+        if (type === "full") {
+            this.logoElement.src = needleLogoSVG;
+            this.logoElement.classList.remove("with-text");
+            this.logoElement.classList.remove("compact");
+        } else {
+            this.logoElement.src = needleLogoOnlySVG;
+            this.logoElement.classList.add("with-text");
+            this.logoElement.classList.add("compact");
+        }
+    }
+
 }
 if (!customElements.get(elementName))
     customElements.define(elementName, NeedleLogoElement);

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -459,7 +459,7 @@ export class NeedleMenuElement extends HTMLElement {
 
         .logo {
             cursor: pointer;
-            padding-left: 0.6rem;
+            padding-left: 0.0rem;
             padding-bottom: .02rem;
             margin-right: 0.5rem;
         }
@@ -664,8 +664,8 @@ export class NeedleMenuElement extends HTMLElement {
                         <slot name="end"></slot>
                     </div>
                 </div>
-                <div style="user-select:none" class="logo">
-                    <span class="madewith notranslate">powered by</span>
+                <div style="user-select:none;" class="logo">
+                    <span class="madewith notranslate" style="display:none;">powered by</span>
                 </div>
             </div>
             <button class="compact-menu-button">
@@ -698,6 +698,7 @@ export class NeedleMenuElement extends HTMLElement {
         this.wrapper.classList.add("wrapper");
 
         const logo = NeedleLogoElement.create();
+        logo.setType("compact");
         logo.style.minHeight = "1rem";
         this.logoContainer.append(logo);
         this.logoContainer.addEventListener("click", () => {

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -374,40 +374,40 @@ export class EngineLoadingView implements ILoadingViewHandler {
         //     }
         // }
 
-        this.handleRuntimeLicense(this._loadingElement);
+        // this.handleRuntimeLicense(this._loadingElement);
 
         return this._loadingElement;
     }
 
-    private async handleRuntimeLicense(loadingElement: HTMLElement) {
-        // First check if we have a commercial license
-        let commercialLicense = hasCommercialLicense();
-        // if it's the case then we don't need to perform a runtime check
-        if (commercialLicense) return;
-
-        // If we don't have a commercial license, then we need to display our message
-        if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
-        const nonCommercialContainer = document.createElement("div");
-        nonCommercialContainer.style.paddingTop = ".6em";
-        nonCommercialContainer.style.fontSize = ".8em";
-        nonCommercialContainer.style.textTransform = "uppercase";
-        nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
-        nonCommercialContainer.style.cursor = "pointer";
-        nonCommercialContainer.style.userSelect = "none";
-        nonCommercialContainer.style.textAlign = "center";
-        nonCommercialContainer.style.pointerEvents = "all";
-        nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
-        nonCommercialContainer.style.opacity = "0";
-        loadingElement.appendChild(nonCommercialContainer);
-
-        // Use the runtime license check
-        if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
-            if (debugLicense) console.log("Waiting for runtime license check");
-            await runtimeLicenseCheckPromise;
-            commercialLicense = hasCommercialLicense();
-        }
-        if (commercialLicense) return;
-        nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
-        nonCommercialContainer.style.opacity = "1";
-    }
+    // private async handleRuntimeLicense(loadingElement: HTMLElement) {
+    //     // First check if we have a commercial license
+    //     let commercialLicense = hasCommercialLicense();
+    //     // if it's the case then we don't need to perform a runtime check
+    //     if (commercialLicense) return;
+
+    //     // If we don't have a commercial license, then we need to display our message
+    //     if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
+    //     const nonCommercialContainer = document.createElement("div");
+    //     nonCommercialContainer.style.paddingTop = ".6em";
+    //     nonCommercialContainer.style.fontSize = ".8em";
+    //     nonCommercialContainer.style.textTransform = "uppercase";
+    //     nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
+    //     nonCommercialContainer.style.cursor = "pointer";
+    //     nonCommercialContainer.style.userSelect = "none";
+    //     nonCommercialContainer.style.textAlign = "center";
+    //     nonCommercialContainer.style.pointerEvents = "all";
+    //     nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
+    //     nonCommercialContainer.style.opacity = "0";
+    //     loadingElement.appendChild(nonCommercialContainer);
+
+    //     // Use the runtime license check
+    //     if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
+    //         if (debugLicense) console.log("Waiting for runtime license check");
+    //         await runtimeLicenseCheckPromise;
+    //         commercialLicense = hasCommercialLicense();
+    //     }
+    //     if (commercialLicense) return;
+    //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
+    //     nonCommercialContainer.style.opacity = "1";
+    // }
 }

package/src/engine/webcomponents/needle-engine.ts

@@ -38,14 +38,18 @@ const observedAttributes = [
     "loadstart",
     "progress",
     "loadfinished",
+
     "dracoDecoderPath",
     "dracoDecoderType",
     "ktx2DecoderPath",
+
     "tone-mapping",
     "tone-mapping-exposure",
     "background-blurriness",
     "background-color",
     "environment-intensity",
+
+    "focus-rect",
 ]
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
@@ -95,7 +99,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         if (value === null) this.removeAttribute("camera-controls");
         else this.setAttribute("camera-controls", value ? "true" : "false");
     }
-    
+
 
     /**
      * Get the current context for this web component instance. The context is created when the src attribute is set and the loading has finished.  
@@ -331,17 +335,17 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 if (debug) console.log("ktx2DecoderPath", newValue);
                 setKtx2TranscoderPath(newValue);
                 break;
-                
+
             case "tonemapping":
             case "tone-mapping":
             case "tone-mapping-exposure":
             case "background-blurriness":
             case "background-color":
             case "environment-intensity":
-            {
-                this.applyAttributes();
-                break;
-            }
+                {
+                    this.applyAttributes();
+                    break;
+                }
             case "public-key": {
                 if (newValue != PUBLIC_KEY)
                     this.setPublicKey();
@@ -352,6 +356,25 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                     this.setVersion();
                 break;
             }
+
+            case "focus-rect":
+                {
+                    const focus_rect = this.getAttribute("focus-rect") as HTMLElement | string | null;
+                    if (focus_rect && this._context) {
+                        if (focus_rect === null) {
+                            this._context.setCameraFocusRect(null);
+                        }
+                        else if (typeof focus_rect === "string" && focus_rect.length > 0) {
+                            const element = document.querySelector(focus_rect);
+                            this._context.setCameraFocusRect(element instanceof HTMLElement ? element : null);
+                        }
+                        else if (focus_rect instanceof HTMLElement) {
+                            this._context.setCameraFocusRect(focus_rect);
+                        }
+
+                    }
+                }
+                break;
         }
     }
 
@@ -570,6 +593,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
+            // HACK: if we set background-color to a color and then back to null we want the background-image attribute to re-apply
+            else if (this.getAttribute("background-image")) {
+                this.setAttribute("background-image", this.getAttribute("background-image")!);
+            }
         }
     }
 

package/src/engine/xr/NeedleXRController.ts

@@ -23,10 +23,10 @@ const debugCustomGesture = getParam("debugcustomgesture");
 // let _didReceiveSelectStartEvent = false;
 
 // https://github.com/immersive-web/webxr-input-profiles/blob/4484a05e30bcd43fe86bb4e06b7a707861a26796/packages/registry/profiles/meta/meta-quest-touch-plus.json
-declare type ControllerAxes = "xr-standard-thumbstick";
-declare type StickName = "xr-standard-thumbstick";
+declare type ControllerAxes = "xr-standard-thumbstick" | "xr-standard-touchpad";
+declare type StickName = "xr-standard-thumbstick" | "xr-standard-touchpad";
 declare type Mapping = "xr-standard";
-declare type ComponentType = "button" | "thumbstick" | "squeeze";
+declare type ComponentType = "button" | "thumbstick" | "squeeze" | "touchpad";
 declare type GamepadKey = "button" | "xAxis" | "yAxis";
 
 declare type NeedleXRControllerButtonName = ButtonName | "primary-button" | "primary";
@@ -407,6 +407,16 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
             gamepadStr += "\n[axes " + gp.axes.length + "]: " + gp.axes.map(a => a.toPrecision(1)).join(",");
             debugStr += "\n" + gamepadStr;
         }
+        if (this._layout) {
+            debugStr += "\nLayout: ";
+            for (const component of Object.keys(this._layout.components || {})) {
+                const val = this.getStick(component as StickName);
+                const indices = this._layout.components[component]?.gamepadIndices;
+                const indicesAsString = indices ? Object.entries(indices).map(e => e[0][0].toUpperCase() + e[0].slice(1) + "=" + e[1]).join(",") : "";
+                debugStr += `\n  ${component}: ${this._layout.components[component]?.type} [${indicesAsString}] (${val.x.toPrecision(2)},${val.y.toPrecision(2)})`;
+            }
+        }
+        
         Gizmos.DrawLabel(debugLabelPosition, debugStr, .006);
     }
 
@@ -730,6 +740,7 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         if (componentModel?.gamepadIndices) {
             switch (componentModel.type) {
                 case "thumbstick":
+                case "touchpad":
                     if (this.inputSource.gamepad) {
                         const xIndex = componentModel.gamepadIndices!.xAxis!;
                         const yIndex = componentModel.gamepadIndices!.yAxis!;
@@ -760,7 +771,11 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
         this._isMetaQuestTouchController = this.profiles.includes("meta-quest-touch-plus") || this.profiles.includes("oculus-touch-v3");
 
         // Proper profile starting with v69 and browser 35.1
-        this._isMxInk = this.profiles.includes("logitech-mx-ink")
+        this._isMxInk = this.profiles.includes("logitech-mx-ink");
+
+        // For debugging to see ALL available profiles
+        /** @ts-ignore */
+        // fetchProfilesList(DEFAULT_PROFILES_PATH).then(list => console.log("Available controller profiles", list));
 
         if (!this._layout) {
             // Ignore transient-pointer since we likely don't want to spawn a controller visual just for a temporary pointer.
@@ -780,6 +795,8 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                     res.assetPath || ""
                 );
 
+                // const overrideProfile = await fetch(DEFAULT_PROFILES_PATH + "/htc-vive-focus-3/profile.json").then(r => r.json());
+
                 const profile = res.profile as InputDeviceProfile;
                 const layout = profile.layouts[this.inputSource.handedness];
                 this._layout = layout;
@@ -791,6 +808,21 @@ C:${this.connected ? "x" : "-"} T:${this.isTracking ? "x" : "-"} Hand:${this.inp
                             this._layout.gamepad[component.gamepadIndices!.button!] = key as XRControllerButtonName;
                         }
                     }
+
+                    // If we have 4 axes and no thumbstick defined, we define thumbstick for axis 3+4
+                    // This is a workaround for HTC Vive Focus 3 controllers, which have the profile for Vive Focus Plus...
+                    // This workaround fixes it for HTC Vive Focus 3 but does not change anything for Vive Focus Plus controllers
+                    if (this.profiles.length >= 1 && this.profiles[0] === "htc-vive-focus-plus") {
+                        if (this.inputSource.gamepad && this.inputSource.gamepad.axes.length === 4 && !this._layout.components["xr-standard-thumbstick"]) {
+                            this._layout.components["xr-standard-thumbstick"] = {
+                                type: "thumbstick",
+                                gamepadIndices: {
+                                    xAxis: 2,
+                                    yAxis: 3,
+                                }
+                            }
+                        }
+                    }
                 }
                 // if (debug) console.log(this._layout, this.inputSource);
                 // debugger;

package/src/engine-components/CameraUtils.ts

@@ -122,7 +122,7 @@ function createDefaultCameraControls(context: IContext, cam?: ICamera) {
         orbit.autoRotate = autoRotate != "0" && autoRotate?.toLowerCase() != "false";
         const autoRotateSpeed = Number.parseFloat(autoRotate || ".5");
         orbit.autoRotateSpeed = !isNaN(autoRotateSpeed) ? autoRotateSpeed : .5;
-        console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
+        if(debug) console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
         const autoFit = context.domElement.getAttribute("auto-fit");
         orbit.autoFit = autoFit !== "0" && autoFit?.toLowerCase() != "false";
         orbit.autoTarget = true;

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 = [];
@@ -725,6 +728,8 @@ export class Renderer extends Behaviour implements IRenderer {
                 // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
                 if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
                     mat.envMap = this.context.scene.environment;
+                    mat.envMapIntensity = this.context.scene.environmentIntensity;
+                    mat.envMapRotation = this.context.scene.environmentRotation;
                 }
             }
         }

package/src/engine-components/Skybox.ts

@@ -8,7 +8,7 @@ import { syncField } from "../engine/engine_networking_auto.js";
 import { loadPMREM } from "../engine/engine_pmrem.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
-import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback } from "../engine/engine_utils.js";
+import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback, toSourceId } from "../engine/engine_utils.js";
 import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
@@ -27,15 +27,34 @@ function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boo
     }
 
     const remote = new RemoteSkybox();
+    remote.sourceId = toSourceId(url);
     remote.allowDrop = false;
     remote.allowNetworking = false;
     remote.background = skybox;
     remote.environment = environment;
     GameObject.addComponent(context.scene, remote);
     const urlChanged = newValue => {
-        if (typeof newValue !== "string") return;
-        if (debug) console.log(attribute, "CHANGED TO", newValue)
-        remote.setSkybox(newValue);
+        if (debug) console.log(attribute, "CHANGED TO", newValue);
+        if (newValue) {
+            if (typeof newValue !== "string") {
+                console.warn("Invalid attribute value for " + attribute);
+                return;
+            }
+            remote.setSkybox(newValue);
+        }
+        else {
+            if (remote.sourceId) {
+                if (environment) {
+                    if (!context.sceneLighting.internalEnableReflection(remote.sourceId)) {
+                        context.scene.environment = null;
+                    }
+                }
+                if (skybox) {
+                    const skybox = context.lightmaps.tryGetSkybox(remote.sourceId);
+                    context.scene.background = skybox;
+                }
+            }
+        }
     };
     addAttributeChangeCallback(context.domElement, attribute, urlChanged);
     remote.addEventListener("destroy", () => {
@@ -50,7 +69,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
     const backgroundImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
-    
+
     if (backgroundImage) {
         if (debug) console.log("Creating RemoteSkybox to load background " + backgroundImage);
         // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
@@ -246,8 +265,8 @@ export class RemoteSkybox extends Behaviour {
             envMap.needsUpdate = true;
         }
 
-        if(this.destroyed) return;
-        if(!this.context) {
+        if (this.destroyed) return;
+        if (!this.context) {
             console.warn("RemoteSkybox: Context is not available - can not apply skybox.");
             return;
         }

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/debug/LogStats.ts

@@ -4,6 +4,7 @@ import { Behaviour } from "../../engine-components/Component.js";
 
 const debug = getParam("logstats");
 
+/** @internal */
 export class LogStats extends Behaviour {
 
     onEnable(): void {

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;
 
@@ -106,7 +115,7 @@ export class PlayableDirector extends Behaviour {
     /** @internal */
     awake(): void {
         if (debug)
-            console.log(this, this.playableAsset?.tracks);
+            console.log(this, this.playableAsset);
 
         this.rebuildGraph();
 

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

@@ -92,4 +92,14 @@ 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>
+ * ```
+ * 
+ * @link [Example Project using ScrollMarker](https://scrollytelling-bike-z23hmxb2gnu5a.needle.run/)
+ */
+export type ScrollMarkerModel = MarkerModel & { name: string };