angular-three 4.0.0-next.96 → 4.0.0-next.98

package/fesm2022/angular-three.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, TemplateRef, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, ElementRef, booleanAttribute, Pipe, numberAttribute, contentChild, SkipSelf, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Injectable, output, model, Renderer2 } from '@angular/core';
+import { inject, ViewContainerRef, TemplateRef, Injector, effect, DestroyRef, Directive, input, linkedSignal, computed, InjectionToken, untracked, isSignal, signal, ElementRef, booleanAttribute, resource, Pipe, numberAttribute, contentChild, SkipSelf, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Injectable, output, model, Renderer2 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subject, filter } from 'rxjs';
 import * as THREE from 'three';
@@ -903,880 +903,978 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }], ctorParameters: () => [] });
 const NgtSelection = [NgtSelectionApi, NgtSelect];
 
-var _a;
-//
-const NGT_HTML_DOM_ELEMENT = new InjectionToken('NGT_HTML_DOM_ELEMENT');
-function provideHTMLDomElement(...args) {
-    if (args.length === 0) {
-        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
-    }
-    if (args.length === 1) {
-        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
-    }
-    return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
-}
-class NgtHTML {
-    static { _a = NGT_HTML_FLAG; }
-    static { this[_a] = true; }
-    constructor() {
-        this.domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
-        const host = inject(ElementRef);
-        const store = injectStore();
-        if (this.domElement === 'gl') {
-            Object.assign(host.nativeElement, {
-                [NGT_DOM_PARENT_FLAG]: store.snapshot.gl.domElement.parentElement,
-            });
-        }
-        else if (this.domElement) {
-            Object.assign(host.nativeElement, { [NGT_DOM_PARENT_FLAG]: this.domElement });
+/**
+ * Release pointer captures.
+ * This is called by releasePointerCapture in the API, and when an object is removed.
+ */
+function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
+    const captureData = captures.get(obj);
+    if (captureData) {
+        captures.delete(obj);
+        // If this was the last capturing object for this pointer
+        if (captures.size === 0) {
+            capturedMap.delete(pointerId);
+            captureData.target.releasePointerCapture(pointerId);
         }
-        inject(DestroyRef).onDestroy(() => {
-            host.nativeElement[NGT_DOM_PARENT_FLAG] = null;
-            delete host.nativeElement[NGT_DOM_PARENT_FLAG];
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHTML, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [] });
-
-const cached = new Map();
-const memoizedLoaders = new WeakMap();
-function normalizeInputs(input) {
-    let urls = [];
-    if (Array.isArray(input)) {
-        urls = input;
     }
-    else if (typeof input === 'string') {
-        urls = [input];
-    }
-    else {
-        urls = Object.values(input);
-    }
-    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
 }
-function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
-    return () => {
-        const urls = normalizeInputs(inputs());
-        let loader = memoizedLoaders.get(loaderConstructorFactory(urls));
-        if (!loader) {
-            loader = new (loaderConstructorFactory(urls))();
-            memoizedLoaders.set(loaderConstructorFactory(urls), loader);
+function removeInteractivity(store, object) {
+    const { internal } = store.snapshot;
+    // Removes every trace of an object from the data store
+    internal.interaction = internal.interaction.filter((o) => o !== object);
+    internal.initialHits = internal.initialHits.filter((o) => o !== object);
+    internal.hovered.forEach((value, key) => {
+        if (value.eventObject === object || value.object === object) {
+            // Clear out intersects, they are outdated by now
+            internal.hovered.delete(key);
         }
-        if (extensions)
-            extensions(loader);
-        return urls.map((url) => {
-            if (url === '')
-                return Promise.resolve(null);
-            if (!cached.has(url)) {
-                cached.set(url, new Promise((resolve, reject) => {
-                    loader.load(url, (data) => {
-                        if ('scene' in data) {
-                            Object.assign(data, makeObjectGraph(data['scene']));
-                        }
-                        if (onLoad) {
-                            onLoad(data);
-                        }
-                        resolve(data);
-                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
-                }));
-            }
-            return cached.get(url);
-        });
-    };
-}
-function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgress, onLoad, injector, } = {}) {
-    return assertInjector(_injectLoader, injector, () => {
-        const response = signal(null);
-        const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
-            extensions,
-            onProgress,
-            onLoad: onLoad,
-        });
-        effect(() => {
-            const originalUrls = inputs();
-            const cachedResultPromises = cachedResultPromisesEffect();
-            Promise.all(cachedResultPromises).then((results) => {
-                response.update(() => {
-                    if (Array.isArray(originalUrls))
-                        return results;
-                    if (typeof originalUrls === 'string')
-                        return results[0];
-                    const keys = Object.keys(originalUrls);
-                    return keys.reduce((result, key) => {
-                        // @ts-ignore
-                        result[key] = results[keys.indexOf(key)];
-                        return result;
-                    }, {});
-                });
-            });
-        });
-        return response.asReadonly();
+    });
+    internal.capturedMap.forEach((captures, pointerId) => {
+        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
     });
 }
-_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad) => {
-    const effects = load(loaderConstructorFactory, inputs, { extensions, onLoad })();
-    if (effects) {
-        void Promise.all(effects);
+function createEvents(store) {
+    /** Calculates delta */
+    function calculateDistance(event) {
+        const internal = store.snapshot.internal;
+        const dx = event.offsetX - internal.initialClick[0];
+        const dy = event.offsetY - internal.initialClick[1];
+        return Math.round(Math.sqrt(dx * dx + dy * dy));
     }
-};
-_injectLoader.destroy = () => {
-    cached.clear();
-};
-_injectLoader.clear = (urls) => {
-    const urlToClear = Array.isArray(urls) ? urls : [urls];
-    urlToClear.forEach((url) => {
-        cached.delete(url);
-    });
-};
-const injectLoader = _injectLoader;
-
-const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
-const DEFAULT_COLOR = 0x000000;
-class NgtHexify {
-    constructor() {
-        this.document = inject(DOCUMENT, { optional: true });
-        this.cache = {};
+    /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
+    function filterPointerEvents(objects) {
+        return objects.filter((obj) => ['move', 'over', 'enter', 'out', 'leave'].some((name) => {
+            const eventName = `pointer${name}`;
+            return getInstanceState(obj)?.handlers?.[eventName];
+        }));
     }
-    /**
-     * transforms a:
-     * - hex string to a hex number
-     * - rgb string to a hex number
-     * - rgba string to a hex number
-     * - css color string to a hex number
-     *
-     * always default to black if failed
-     * @param value
-     */
-    transform(value) {
-        if (value == null)
-            return DEFAULT_COLOR;
-        if (value.startsWith('#')) {
-            if (!this.cache[value]) {
-                this.cache[value] = this.hexStringToNumber(value);
+    function intersect(event, filter) {
+        const state = store.snapshot;
+        const duplicates = new Set();
+        const intersections = [];
+        // Allow callers to eliminate event objects
+        const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
+        // Reset all raycaster cameras to undefined
+        for (let i = 0; i < eventsObjects.length; i++) {
+            const objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
+            if (objectRootState) {
+                objectRootState.raycaster.camera = undefined;
             }
-            return this.cache[value];
         }
-        if (!this.ctx) {
-            this.ctx = this.document?.createElement('canvas').getContext('2d');
-        }
-        if (!this.ctx) {
-            console.warn('[NGT] hexify: canvas context is not available');
-            return DEFAULT_COLOR;
+        if (!state.previousRoot) {
+            // Make sure root-level pointer and ray are set up
+            state.events.compute?.(event, store, null);
         }
-        this.ctx.fillStyle = value;
-        const computedValue = this.ctx.fillStyle;
-        if (computedValue.startsWith('#')) {
-            if (!this.cache[computedValue]) {
-                this.cache[computedValue] = this.hexStringToNumber(computedValue);
+        function handleRaycast(obj) {
+            const objStore = getInstanceState(obj)?.store;
+            const objState = objStore?.snapshot;
+            // Skip event handling when noEvents is set, or when the raycasters camera is null
+            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
+                return [];
+            // When the camera is undefined we have to call the event layers update function
+            if (objState.raycaster.camera === undefined) {
+                objState.events.compute?.(event, objStore, objState.previousRoot);
+                // If the camera is still undefined we have to skip this layer entirely
+                if (objState.raycaster.camera === undefined)
+                    objState.raycaster.camera = null;
             }
-            return this.cache[computedValue];
+            // Intersect object by object
+            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
         }
-        if (!computedValue.startsWith('rgba')) {
-            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
-            return DEFAULT_COLOR;
+        // Collect events
+        let hits = eventsObjects
+            // Intersect objects
+            .flatMap(handleRaycast)
+            // Sort by event priority and distance
+            .sort((a, b) => {
+            const aState = getInstanceState(a.object)?.store?.snapshot;
+            const bState = getInstanceState(b.object)?.store?.snapshot;
+            if (!aState || !bState)
+                return a.distance - b.distance;
+            return bState.events.priority - aState.events.priority || a.distance - b.distance;
+        })
+            // Filter out duplicates
+            .filter((item) => {
+            const id = makeId(item);
+            if (duplicates.has(id))
+                return false;
+            duplicates.add(id);
+            return true;
+        });
+        // https://github.com/mrdoob/three.js/issues/16031
+        // Allow custom userland intersect sort order, this likely only makes sense on the root filter
+        if (state.events.filter)
+            hits = state.events.filter(hits, store);
+        // Bubble up the events, find the event source (eventObject)
+        for (const hit of hits) {
+            let eventObject = hit.object;
+            // bubble event up
+            while (eventObject) {
+                if (getInstanceState(eventObject)?.eventCount)
+                    intersections.push({ ...hit, eventObject });
+                eventObject = eventObject.parent;
+            }
         }
-        const match = computedValue.match(RGBA_REGEX);
-        if (!match) {
-            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
-            return DEFAULT_COLOR;
-        }
-        const r = parseInt(match[1], 10);
-        const g = parseInt(match[2], 10);
-        const b = parseInt(match[3], 10);
-        const a = match[4] ? parseFloat(match[4]) : 1.0;
-        const cacheKey = `${r}:${g}:${b}:${a}`;
-        // check result from cache
-        if (!this.cache[cacheKey]) {
-            // Convert the components to hex strings
-            const hexR = this.componentToHex(r);
-            const hexG = this.componentToHex(g);
-            const hexB = this.componentToHex(b);
-            const hexA = this.componentToHex(Math.round(a * 255));
-            // Combine the hex components into a single hex string
-            const hex = `#${hexR}${hexG}${hexB}${hexA}`;
-            this.cache[cacheKey] = this.hexStringToNumber(hex);
+        // If the interaction is captured, make all capturing targets part of the intersect.
+        if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+            for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
+                if (!duplicates.has(makeId(captureData.intersection)))
+                    intersections.push(captureData.intersection);
+            }
         }
-        return this.cache[cacheKey];
-    }
-    hexStringToNumber(hexString) {
-        return parseInt(hexString.replace('#', ''), 16);
+        return intersections;
     }
-    componentToHex(component) {
-        const hex = component.toString(16);
-        return hex.length === 1 ? '0' + hex : hex;
+    /**  Handles intersections by forwarding them to handlers */
+    function handleIntersects(intersections, event, delta, callback) {
+        const rootState = store.snapshot;
+        // If anything has been found, forward it to the event listeners
+        if (intersections.length) {
+            const localState = { stopped: false };
+            for (const hit of intersections) {
+                let instanceState = getInstanceState(hit.object);
+                // If the object is not managed by NGT, it might be parented to an element which is.
+                // Traverse upwards until we find a managed parent and use its state instead.
+                if (!instanceState) {
+                    hit.object.traverseAncestors((ancestor) => {
+                        const parentInstanceState = getInstanceState(ancestor);
+                        if (parentInstanceState) {
+                            instanceState = parentInstanceState;
+                            return false;
+                        }
+                        return;
+                    });
+                }
+                const { raycaster, pointer, camera, internal } = instanceState?.store?.snapshot || rootState;
+                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
+                const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
+                const setPointerCapture = (id) => {
+                    const captureData = { intersection: hit, target: event.target };
+                    if (internal.capturedMap.has(id)) {
+                        // if the pointerId was previously captured, we add the hit to the
+                        // event capturedMap.
+                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
+                    }
+                    else {
+                        // if the pointerId was not previously captured, we create a map
+                        // containing the hitObject, and the hit. hitObject is used for
+                        // faster access.
+                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
+                    }
+                    // Call the original event now
+                    event.target.setPointerCapture(id);
+                };
+                const releasePointerCapture = (id) => {
+                    const captures = internal.capturedMap.get(id);
+                    if (captures) {
+                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
+                    }
+                };
+                // Add native event props
+                const extractEventProps = {};
+                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
+                for (const prop in event) {
+                    const property = event[prop];
+                    // Only copy over atomics, leave functions alone as these should be
+                    // called as event.nativeEvent.fn()
+                    if (typeof property !== 'function')
+                        extractEventProps[prop] = property;
+                }
+                const raycastEvent = {
+                    ...hit,
+                    ...extractEventProps,
+                    pointer,
+                    intersections,
+                    stopped: localState.stopped,
+                    delta,
+                    unprojectedPoint,
+                    ray: raycaster.ray,
+                    camera,
+                    // Hijack stopPropagation, which just sets a flag
+                    stopPropagation() {
+                        // https://github.com/pmndrs/react-three-fiber/issues/596
+                        // Events are not allowed to stop propagation if the pointer has been captured
+                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
+                        // We only authorize stopPropagation...
+                        if (
+                        // ...if this pointer hasn't been captured
+                        !capturesForPointer ||
+                            // ... or if the hit object is capturing the pointer
+                            capturesForPointer.has(hit.eventObject)) {
+                            raycastEvent.stopped = localState.stopped = true;
+                            // Propagation is stopped, remove all other hover records
+                            // An event handler is only allowed to flush other handlers if it is hovered itself
+                            if (internal.hovered.size &&
+                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
+                                // Objects cannot flush out higher up objects that have already caught the event
+                                const higher = intersections.slice(0, intersections.indexOf(hit));
+                                cancelPointer([...higher, hit]);
+                            }
+                        }
+                    },
+                    // there should be a distinction between target and currentTarget
+                    target: { hasPointerCapture, setPointerCapture, releasePointerCapture },
+                    currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture },
+                    nativeEvent: event,
+                };
+                // Call subscribers
+                callback(raycastEvent);
+                // Event bubbling may be interrupted by stopPropagation
+                if (localState.stopped)
+                    break;
+            }
+        }
+        return intersections;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, decorators: [{
-            type: Pipe,
-            args: [{ name: 'hexify', pure: true }]
-        }] });
-
-const catalogue = {};
-function extend(objects) {
-    Object.assign(catalogue, objects);
-}
-const NGT_CATALOGUE = new InjectionToken('NGT_CATALOGUE', { factory: () => catalogue });
-function injectCatalogue() {
-    return inject(NGT_CATALOGUE);
-}
-
-function omit(objFn, keysToOmit, equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
-    return computed(() => {
-        const obj = objFn();
-        const result = {};
-        for (const key of Object.keys(obj)) {
-            if (keysToOmit.includes(key))
-                continue;
-            Object.assign(result, { [key]: obj[key] });
+    function cancelPointer(intersections) {
+        const internal = store.snapshot.internal;
+        for (const hoveredObj of internal.hovered.values()) {
+            // When no objects were hit or the the hovered object wasn't found underneath the cursor
+            // we call onPointerOut and delete the object from the hovered-elements map
+            if (!intersections.length ||
+                !intersections.find((hit) => hit.object === hoveredObj.object &&
+                    hit.index === hoveredObj.index &&
+                    hit.instanceId === hoveredObj.instanceId)) {
+                const eventObject = hoveredObj.eventObject;
+                const instance = getInstanceState(eventObject);
+                const handlers = instance?.handlers;
+                internal.hovered.delete(makeId(hoveredObj));
+                if (instance?.eventCount) {
+                    // Clear out intersects, they are outdated by now
+                    const data = { ...hoveredObj, intersections };
+                    handlers?.pointerout?.(data);
+                    handlers?.pointerleave?.(data);
+                }
+            }
         }
-        return result;
-    }, { equal });
-}
-function pick(objFn, keyOrKeys, equal) {
-    if (Array.isArray(keyOrKeys)) {
-        if (!equal) {
-            equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' });
+    }
+    function pointerMissed(event, objects) {
+        for (let i = 0; i < objects.length; i++) {
+            const instance = getInstanceState(objects[i]);
+            instance?.handlers.pointermissed?.(event);
         }
-        return computed(() => {
-            const obj = objFn();
-            const result = {};
-            for (const key of keyOrKeys) {
-                if (!(key in obj))
-                    continue;
-                Object.assign(result, { [key]: obj[key] });
-            }
-            return result;
-        }, { equal });
     }
-    return computed(() => objFn()[keyOrKeys], { equal });
-}
-function merge(objFn, toMerge, mode = 'override', equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
-    if (mode === 'override')
-        return computed(() => ({ ...objFn(), ...toMerge }), { equal });
-    return computed(() => ({ ...toMerge, ...objFn() }), { equal });
-}
-function createVectorComputed(vectorCtor) {
-    return ((inputOrOptions, keyOrKeepUndefined, keepUndefined) => {
-        if (typeof keyOrKeepUndefined === 'undefined' || typeof keyOrKeepUndefined === 'boolean') {
-            keepUndefined = !!keyOrKeepUndefined;
-            const input = inputOrOptions;
-            return computed(() => {
-                const value = input();
-                if (keepUndefined && value == undefined)
-                    return undefined;
-                if (typeof value === 'number')
-                    return new vectorCtor().setScalar(value);
-                else if (Array.isArray(value))
-                    return new vectorCtor(...value);
-                else if (value)
-                    return value;
-                else
-                    return new vectorCtor();
-            }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+    function handlePointer(name) {
+        // Deal with cancelation
+        switch (name) {
+            case 'pointerleave':
+            case 'pointercancel':
+                return () => cancelPointer([]);
+            case 'lostpointercapture':
+                return (event) => {
+                    const { internal } = store.snapshot;
+                    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+                        // If the object event interface had lostpointercapture, we'd call it here on every
+                        // object that's getting removed. We call it on the next frame because lostpointercapture
+                        // fires before pointerup. Otherwise pointerUp would never be called if the event didn't
+                        // happen in the object it originated from, leaving components in a in-between state.
+                        requestAnimationFrame(() => {
+                            // Only release if pointer-up didn't do it already
+                            if (internal.capturedMap.has(event.pointerId)) {
+                                internal.capturedMap.delete(event.pointerId);
+                                cancelPointer([]);
+                            }
+                        });
+                    }
+                };
         }
-        const options = inputOrOptions;
-        const key = keyOrKeepUndefined;
-        return computed(() => {
-            const value = options()[key];
-            if (keepUndefined && value == undefined)
-                return undefined;
-            if (typeof value === 'number')
-                return new vectorCtor().setScalar(value);
-            else if (Array.isArray(value))
-                return new vectorCtor(...value);
-            else if (value)
-                return value;
-            else
-                return new vectorCtor();
-        }, { equal: (a, b) => !!a && !!b && a.equals(b) });
-    });
-}
-const vector2 = createVectorComputed(THREE.Vector2);
-const vector3 = createVectorComputed(THREE.Vector3);
-const vector4 = createVectorComputed(THREE.Vector4);
+        // Any other pointer goes here ...
+        return function handleEvent(event) {
+            // NOTE: __pointerMissed$ on NgtStore is private subject since we only expose the Observable
+            const pointerMissed$ = store['__pointerMissed$'];
+            const internal = store.snapshot.internal;
+            // prepareRay(event)
+            internal.lastEvent.nativeElement = event;
+            // Get fresh intersects
+            const isPointerMove = name === 'pointermove';
+            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
+            const filter = isPointerMove ? filterPointerEvents : undefined;
+            const hits = intersect(event, filter);
+            const delta = isClickEvent ? calculateDistance(event) : 0;
+            // Save initial coordinates on pointer-down
+            if (name === 'pointerdown') {
+                internal.initialClick = [event.offsetX, event.offsetY];
+                internal.initialHits = hits.map((hit) => hit.eventObject);
+            }
+            // If a click yields no results, pass it back to the user as a miss
+            // Missed events have to come first in order to establish user-land side-effect clean up
+            if (isClickEvent && !hits.length) {
+                if (delta <= 2) {
+                    pointerMissed(event, internal.interaction);
+                    pointerMissed$.next(event);
+                }
+            }
+            // Take care of unhover
+            if (isPointerMove)
+                cancelPointer(hits);
+            function onIntersect(data) {
+                const eventObject = data.eventObject;
+                const instance = getInstanceState(eventObject);
+                const handlers = instance?.handlers;
+                // Check presence of handlers
+                if (!instance?.eventCount)
+                    return;
+                /*
+        MAYBE TODO, DELETE IF NOT:
+          Check if the object is captured, captured events should not have intersects running in parallel
+          But wouldn't it be better to just replace capturedMap with a single entry?
+          Also, are we OK with straight up making picking up multiple objects impossible?
 
-class NgtPortalAutoRender {
-    constructor() {
-        this.portalStore = injectStore({ host: true });
-        this.parentStore = injectStore({ skipSelf: true });
-        this.portal = inject(NgtPortalImpl, { host: true });
-        this.renderPriority = input(1, { alias: 'autoRender', transform: (value) => numberAttribute(value, 1) });
-        effect(() => {
-            // this.portalStore.update((state) => ({ events: { ...state.events, priority: this.renderPriority() + 1 } }));
-        });
-        effect((onCleanup) => {
-            const portalRendered = this.portal.portalRendered();
-            if (!portalRendered)
-                return;
-            // track state
-            const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore()];
-            let oldClean;
-            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
-                const [parentScene, parentCamera] = [
-                    this.parentStore.snapshot.scene,
-                    this.parentStore.snapshot.camera,
-                ];
-                oldClean = gl.autoClear;
-                if (renderPriority === 1) {
-                    // clear scene and render with default
-                    gl.autoClear = true;
-                    gl.render(parentScene, parentCamera);
+        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
+        if (pointerId !== undefined) {
+          const capturedMeshSet = internal.capturedMap.get(pointerId)
+          if (capturedMeshSet) {
+            const captured = capturedMeshSet.get(eventObject)
+            if (captured && captured.localState.stopped) return
+          }
+        }*/
+                if (isPointerMove) {
+                    // Move event ...
+                    if (handlers?.pointerover ||
+                        handlers?.pointerenter ||
+                        handlers?.pointerout ||
+                        handlers?.pointerleave) {
+                        // When enter or out is present take care of hover-state
+                        const id = makeId(data);
+                        const hoveredItem = internal.hovered.get(id);
+                        if (!hoveredItem) {
+                            // If the object wasn't previously hovered, book it and call its handler
+                            internal.hovered.set(id, data);
+                            handlers.pointerover?.(data);
+                            handlers.pointerenter?.(data);
+                        }
+                        else if (hoveredItem.stopped) {
+                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
+                            data.stopPropagation();
+                        }
+                    }
+                    // Call mouse move
+                    handlers?.pointermove?.(data);
+                }
+                else {
+                    // All other events ...
+                    const handler = handlers?.[name];
+                    if (handler) {
+                        // Forward all events back to their respective handlers with the exception of click events,
+                        // which must use the initial target
+                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
+                            // Missed events have to come first
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                            // Now call the handler
+                            handler(data);
+                        }
+                    }
+                    else {
+                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
+                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
+                        }
+                    }
                 }
-                // disable cleaning
-                gl.autoClear = false;
-                gl.clearDepth();
-                gl.render(scene, camera);
-                // restore
-                gl.autoClear = oldClean;
-            }, renderPriority, this.portalStore);
-            onCleanup(() => cleanup());
-        });
+            }
+            handleIntersects(hits, event, delta, onIntersect);
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    return { handlePointer };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ngt-portal[autoRender]' }]
-        }], ctorParameters: () => [] });
-class NgtPortalContent {
-    static ngTemplateContextGuard(_, ctx) {
-        return true;
+
+var _a;
+//
+const NGT_HTML_DOM_ELEMENT = new InjectionToken('NGT_HTML_DOM_ELEMENT');
+function provideHTMLDomElement(...args) {
+    if (args.length === 0) {
+        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
+    }
+    if (args.length === 1) {
+        return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args[0] };
     }
+    return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
+}
+class NgtHTML {
+    static { _a = NGT_HTML_FLAG; }
+    static { this[_a] = true; }
     constructor() {
-        const host = inject(ElementRef, { skipSelf: true });
-        const { element } = inject(ViewContainerRef);
-        const injector = inject(Injector);
-        const commentNode = element.nativeElement;
+        this.domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
+        const host = inject(ElementRef);
         const store = injectStore();
-        commentNode.data = NGT_PORTAL_CONTENT_FLAG;
-        commentNode[NGT_PORTAL_CONTENT_FLAG] = store;
-        commentNode[NGT_DOM_PARENT_FLAG] = host.nativeElement;
-        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
-            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('portal', injector);
-            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
+        if (this.domElement === 'gl') {
+            Object.assign(host.nativeElement, {
+                [NGT_DOM_PARENT_FLAG]: store.snapshot.gl.domElement.parentElement,
+            });
+        }
+        else if (this.domElement) {
+            Object.assign(host.nativeElement, { [NGT_DOM_PARENT_FLAG]: this.domElement });
         }
+        inject(DestroyRef).onDestroy(() => {
+            host.nativeElement[NGT_DOM_PARENT_FLAG] = null;
+            delete host.nativeElement[NGT_DOM_PARENT_FLAG];
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHTML, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NgtHTML, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalContent, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[portalContent]' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHTML, decorators: [{
+            type: Directive
         }], ctorParameters: () => [] });
-function mergeState(previousRoot, store, container, pointer, raycaster, events, size) {
-    // we never want to spread the id
-    const { id: _, ...previousState } = previousRoot.snapshot;
-    const state = store.snapshot;
-    let viewport = undefined;
-    if (state.camera && size) {
-        const camera = state.camera;
-        // calculate the override viewport, if present
-        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
-        // update the portal camera, if it differs from the previous layer
-        if (camera !== previousState.camera)
-            updateCamera(camera, size);
+
+const cached$1 = new Map();
+const memoizedLoaders$1 = new WeakMap();
+function normalizeInputs$1(input) {
+    let urls = [];
+    if (Array.isArray(input)) {
+        urls = input;
     }
-    return {
-        // the intersect consists of the previous root state
-        ...previousState,
-        ...state,
-        // portals have their own scene, which forms the root, a raycaster and a pointer
-        scene: container,
-        pointer,
-        raycaster,
-        // their previous root is the layer before it
-        previousRoot,
-        events: { ...previousState.events, ...state.events, ...events },
-        size: { ...previousState.size, ...size },
-        viewport: { ...previousState.viewport, ...viewport },
-        // layers are allowed to override events
-        setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
-    };
+    else if (typeof input === 'string') {
+        urls = [input];
+    }
+    else {
+        urls = Object.values(input);
+    }
+    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
 }
-class NgtPortalImpl {
-    constructor() {
-        this.container = input.required();
-        this.state = input({});
-        this.contentRef = contentChild.required(NgtPortalContent, { read: TemplateRef });
-        this.anchorRef = contentChild.required(NgtPortalContent, { read: ViewContainerRef });
-        this.previousStore = injectStore({ skipSelf: true });
-        this.portalStore = injectStore();
-        this.injector = inject(Injector);
-        this.size = pick(this.state, 'size');
-        this.events = pick(this.state, 'events');
-        this.restState = omit(this.state, ['size', 'events']);
-        this.portalContentRendered = signal(false);
-        this.portalRendered = this.portalContentRendered.asReadonly();
-        extend({ Group });
-        effect(() => {
-            let [container, anchor, content] = [
-                this.container(),
-                this.anchorRef(),
-                this.contentRef(),
-                this.previousStore(),
-            ];
-            const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
-            if (!is.instance(container)) {
-                container = prepare(container, 'ngt-portal', { store: this.portalStore });
-            }
-            const instanceState = getInstanceState(container);
-            if (instanceState && instanceState.store !== this.portalStore) {
-                instanceState.store = this.portalStore;
-            }
-            this.portalStore.update(restState, mergeState(this.previousStore, this.portalStore, container, this.portalStore.snapshot.pointer, this.portalStore.snapshot.raycaster, events, size));
-            if (this.portalViewRef) {
-                this.portalViewRef.detectChanges();
-                return;
+function load(loaderConstructorFactory, inputs, { extensions, onLoad, onProgress, } = {}) {
+    return () => {
+        const urls = normalizeInputs$1(inputs());
+        let loader = memoizedLoaders$1.get(loaderConstructorFactory(urls));
+        if (!loader) {
+            loader = new (loaderConstructorFactory(urls))();
+            memoizedLoaders$1.set(loaderConstructorFactory(urls), loader);
+        }
+        if (extensions)
+            extensions(loader);
+        return urls.map((url) => {
+            if (url === '')
+                return Promise.resolve(null);
+            if (!cached$1.has(url)) {
+                cached$1.set(url, new Promise((resolve, reject) => {
+                    loader.load(url, (data) => {
+                        if ('scene' in data) {
+                            Object.assign(data, makeObjectGraph(data['scene']));
+                        }
+                        if (onLoad) {
+                            onLoad(data);
+                        }
+                        resolve(data);
+                    }, onProgress, (error) => reject(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
+                }));
             }
-            this.portalViewRef = anchor.createEmbeddedView(content, { injector: this.injector }, { injector: this.injector });
-            this.portalViewRef.detectChanges();
-            this.portalContentRendered.set(true);
+            return cached$1.get(url);
         });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: NgtPortalImpl, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NGT_STORE,
-                useFactory: (previousStore) => {
-                    const pointer = new THREE.Vector2();
-                    const raycaster = new THREE.Raycaster();
-                    const { id: _skipId, ...previousState } = previousStore.snapshot;
-                    const store = signalState({
-                        id: makeId(),
-                        ...previousState,
-                        scene: null,
-                        previousRoot: previousStore,
-                        pointer,
-                        raycaster,
-                    });
-                    store.update(mergeState(previousStore, store, null, pointer, raycaster));
-                    return store;
-                },
-                deps: [[new SkipSelf(), NGT_STORE]],
-            },
-        ], queries: [{ propertyName: "contentRef", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "anchorRef", first: true, predicate: NgtPortalContent, descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
-		@if (portalRendered()) {
-			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
-			<ngt-group (pointerover)="(undefined)" attach="none" />
-		}
-	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalImpl, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngt-portal',
-                    template: `
-		@if (portalRendered()) {
-			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
-			<ngt-group (pointerover)="(undefined)" attach="none" />
-		}
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: NGT_STORE,
-                            useFactory: (previousStore) => {
-                                const pointer = new THREE.Vector2();
-                                const raycaster = new THREE.Raycaster();
-                                const { id: _skipId, ...previousState } = previousStore.snapshot;
-                                const store = signalState({
-                                    id: makeId(),
-                                    ...previousState,
-                                    scene: null,
-                                    previousRoot: previousStore,
-                                    pointer,
-                                    raycaster,
-                                });
-                                store.update(mergeState(previousStore, store, null, pointer, raycaster));
-                                return store;
-                            },
-                            deps: [[new SkipSelf(), NGT_STORE]],
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [] });
-const NgtPortal = [NgtPortalImpl, NgtPortalContent];
-
 /**
- * Release pointer captures.
- * This is called by releasePointerCapture in the API, and when an object is removed.
+ * @deprecated Use loaderResource instead. Will be removed in v5.0.0
+ * @since v4.0.0~
+ */
+function _injectLoader(loaderConstructorFactory, inputs, { extensions, onProgress, onLoad, injector, } = {}) {
+    return assertInjector(_injectLoader, injector, () => {
+        const response = signal(null);
+        const cachedResultPromisesEffect = load(loaderConstructorFactory, inputs, {
+            extensions,
+            onProgress,
+            onLoad: onLoad,
+        });
+        effect(() => {
+            const originalUrls = inputs();
+            const cachedResultPromises = cachedResultPromisesEffect();
+            Promise.all(cachedResultPromises).then((results) => {
+                response.update(() => {
+                    if (Array.isArray(originalUrls))
+                        return results;
+                    if (typeof originalUrls === 'string')
+                        return results[0];
+                    const keys = Object.keys(originalUrls);
+                    return keys.reduce((result, key) => {
+                        // @ts-ignore
+                        result[key] = results[keys.indexOf(key)];
+                        return result;
+                    }, {});
+                });
+            });
+        });
+        return response.asReadonly();
+    });
+}
+_injectLoader.preload = (loaderConstructorFactory, inputs, extensions, onLoad) => {
+    const effects = load(loaderConstructorFactory, inputs, { extensions, onLoad })();
+    if (effects) {
+        void Promise.all(effects);
+    }
+};
+_injectLoader.destroy = () => {
+    cached$1.clear();
+};
+_injectLoader.clear = (urls) => {
+    const urlToClear = Array.isArray(urls) ? urls : [urls];
+    urlToClear.forEach((url) => {
+        cached$1.delete(url);
+    });
+};
+/**
+ * @deprecated Use loaderResource instead. Will be removed in v5.0.0
+ * @since v4.0.0~
  */
-function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
-    const captureData = captures.get(obj);
-    if (captureData) {
-        captures.delete(obj);
-        // If this was the last capturing object for this pointer
-        if (captures.size === 0) {
-            capturedMap.delete(pointerId);
-            captureData.target.releasePointerCapture(pointerId);
-        }
+const injectLoader = _injectLoader;
+
+function normalizeInputs(input) {
+    let urls = [];
+    if (Array.isArray(input)) {
+        urls = input;
     }
-}
-function removeInteractivity(store, object) {
-    const { internal } = store.snapshot;
-    // Removes every trace of an object from the data store
-    internal.interaction = internal.interaction.filter((o) => o !== object);
-    internal.initialHits = internal.initialHits.filter((o) => o !== object);
-    internal.hovered.forEach((value, key) => {
-        if (value.eventObject === object || value.object === object) {
-            // Clear out intersects, they are outdated by now
-            internal.hovered.delete(key);
-        }
-    });
-    internal.capturedMap.forEach((captures, pointerId) => {
-        releaseInternalPointerCapture(internal.capturedMap, object, captures, pointerId);
-    });
-}
-function createEvents(store) {
-    /** Calculates delta */
-    function calculateDistance(event) {
-        const internal = store.snapshot.internal;
-        const dx = event.offsetX - internal.initialClick[0];
-        const dy = event.offsetY - internal.initialClick[1];
-        return Math.round(Math.sqrt(dx * dx + dy * dy));
+    else if (typeof input === 'string') {
+        urls = [input];
     }
-    /** Returns true if an instance has a valid pointer-event registered, this excludes scroll, clicks etc */
-    function filterPointerEvents(objects) {
-        return objects.filter((obj) => ['move', 'over', 'enter', 'out', 'leave'].some((name) => {
-            const eventName = `pointer${name}`;
-            return getInstanceState(obj)?.handlers?.[eventName];
-        }));
+    else {
+        urls = Object.values(input);
     }
-    function intersect(event, filter) {
-        const state = store.snapshot;
-        const duplicates = new Set();
-        const intersections = [];
-        // Allow callers to eliminate event objects
-        const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction;
-        // Reset all raycaster cameras to undefined
-        for (let i = 0; i < eventsObjects.length; i++) {
-            const objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
-            if (objectRootState) {
-                objectRootState.raycaster.camera = undefined;
-            }
-        }
-        if (!state.previousRoot) {
-            // Make sure root-level pointer and ray are set up
-            state.events.compute?.(event, store, null);
-        }
-        function handleRaycast(obj) {
-            const objStore = getInstanceState(obj)?.store;
-            const objState = objStore?.snapshot;
-            // Skip event handling when noEvents is set, or when the raycasters camera is null
-            if (!objState || !objState.events.enabled || objState.raycaster.camera === null)
-                return [];
-            // When the camera is undefined we have to call the event layers update function
-            if (objState.raycaster.camera === undefined) {
-                objState.events.compute?.(event, objStore, objState.previousRoot);
-                // If the camera is still undefined we have to skip this layer entirely
-                if (objState.raycaster.camera === undefined)
-                    objState.raycaster.camera = null;
-            }
-            // Intersect object by object
-            return objState.raycaster.camera ? objState.raycaster.intersectObject(obj, true) : [];
-        }
-        // Collect events
-        let hits = eventsObjects
-            // Intersect objects
-            .flatMap(handleRaycast)
-            // Sort by event priority and distance
-            .sort((a, b) => {
-            const aState = getInstanceState(a.object)?.store?.snapshot;
-            const bState = getInstanceState(b.object)?.store?.snapshot;
-            if (!aState || !bState)
-                return a.distance - b.distance;
-            return bState.events.priority - aState.events.priority || a.distance - b.distance;
-        })
-            // Filter out duplicates
-            .filter((item) => {
-            const id = makeId(item);
-            if (duplicates.has(id))
-                return false;
-            duplicates.add(id);
-            return true;
+    return urls.map((url) => (url.includes('undefined') || url.includes('null') || !url ? '' : url));
+}
+const cached = new Map();
+const memoizedLoaders = new WeakMap();
+function getLoaderRequestParams(input, loaderConstructorFactory, extensions) {
+    const urls = input();
+    const LoaderConstructor = loaderConstructorFactory(urls);
+    const normalizedUrls = normalizeInputs(urls);
+    let loader = memoizedLoaders.get(LoaderConstructor);
+    if (!loader) {
+        loader = new LoaderConstructor();
+        memoizedLoaders.set(LoaderConstructor, loader);
+    }
+    if (extensions)
+        extensions(loader);
+    return { urls, normalizedUrls, loader };
+}
+function getLoaderPromises(request, onProgress) {
+    return request.normalizedUrls.map((url) => {
+        if (url === '')
+            return Promise.resolve(null);
+        const cachedPromise = cached.get(url);
+        if (cachedPromise)
+            return cachedPromise;
+        const promise = new Promise((res, rej) => {
+            request.loader.load(url, (data) => {
+                if ('scene' in data) {
+                    Object.assign(data, makeObjectGraph(data['scene']));
+                }
+                res(data);
+            }, onProgress, (error) => rej(new Error(`[NGT] Could not load ${url}: ${error?.message}`)));
         });
-        // https://github.com/mrdoob/three.js/issues/16031
-        // Allow custom userland intersect sort order, this likely only makes sense on the root filter
-        if (state.events.filter)
-            hits = state.events.filter(hits, store);
-        // Bubble up the events, find the event source (eventObject)
-        for (const hit of hits) {
-            let eventObject = hit.object;
-            // bubble event up
-            while (eventObject) {
-                if (getInstanceState(eventObject)?.eventCount)
-                    intersections.push({ ...hit, eventObject });
-                eventObject = eventObject.parent;
-            }
-        }
-        // If the interaction is captured, make all capturing targets part of the intersect.
-        if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
-            for (const captureData of state.internal.capturedMap.get(event.pointerId).values()) {
-                if (!duplicates.has(makeId(captureData.intersection)))
-                    intersections.push(captureData.intersection);
-            }
-        }
-        return intersections;
-    }
-    /**  Handles intersections by forwarding them to handlers */
-    function handleIntersects(intersections, event, delta, callback) {
-        const rootState = store.snapshot;
-        // If anything has been found, forward it to the event listeners
-        if (intersections.length) {
-            const localState = { stopped: false };
-            for (const hit of intersections) {
-                let instanceState = getInstanceState(hit.object);
-                // If the object is not managed by NGT, it might be parented to an element which is.
-                // Traverse upwards until we find a managed parent and use its state instead.
-                if (!instanceState) {
-                    hit.object.traverseAncestors((ancestor) => {
-                        const parentInstanceState = getInstanceState(ancestor);
-                        if (parentInstanceState) {
-                            instanceState = parentInstanceState;
-                            return false;
-                        }
-                        return;
-                    });
+        cached.set(url, promise);
+        return promise;
+    });
+}
+function loaderResource(loaderConstructorFactory, input, { extensions, onLoad, onProgress, injector, } = {}) {
+    return assertInjector(loaderResource, injector, () => {
+        return resource({
+            request: () => getLoaderRequestParams(input, loaderConstructorFactory, extensions),
+            loader: async ({ request }) => {
+                const loadedResults = await Promise.all(getLoaderPromises(request, onProgress));
+                let results;
+                if (Array.isArray(request.urls)) {
+                    results = loadedResults;
                 }
-                const { raycaster, pointer, camera, internal } = instanceState?.store?.snapshot || rootState;
-                const unprojectedPoint = new THREE.Vector3(pointer.x, pointer.y, 0).unproject(camera);
-                const hasPointerCapture = (id) => internal.capturedMap.get(id)?.has(hit.eventObject) ?? false;
-                const setPointerCapture = (id) => {
-                    const captureData = { intersection: hit, target: event.target };
-                    if (internal.capturedMap.has(id)) {
-                        // if the pointerId was previously captured, we add the hit to the
-                        // event capturedMap.
-                        internal.capturedMap.get(id).set(hit.eventObject, captureData);
-                    }
-                    else {
-                        // if the pointerId was not previously captured, we create a map
-                        // containing the hitObject, and the hit. hitObject is used for
-                        // faster access.
-                        internal.capturedMap.set(id, new Map([[hit.eventObject, captureData]]));
-                    }
-                    // Call the original event now
-                    event.target.setPointerCapture(id);
-                };
-                const releasePointerCapture = (id) => {
-                    const captures = internal.capturedMap.get(id);
-                    if (captures) {
-                        releaseInternalPointerCapture(internal.capturedMap, hit.eventObject, captures, id);
-                    }
-                };
-                // Add native event props
-                const extractEventProps = {};
-                // This iterates over the event's properties including the inherited ones. Native PointerEvents have most of their props as getters which are inherited, but polyfilled PointerEvents have them all as their own properties (i.e. not inherited). We can't use Object.keys() or Object.entries() as they only return "own" properties; nor Object.getPrototypeOf(event) as that *doesn't* return "own" properties, only inherited ones.
-                for (const prop in event) {
-                    const property = event[prop];
-                    // Only copy over atomics, leave functions alone as these should be
-                    // called as event.nativeEvent.fn()
-                    if (typeof property !== 'function')
-                        extractEventProps[prop] = property;
+                else if (typeof request.urls === 'string') {
+                    results = loadedResults[0];
                 }
-                const raycastEvent = {
-                    ...hit,
-                    ...extractEventProps,
-                    pointer,
-                    intersections,
-                    stopped: localState.stopped,
-                    delta,
-                    unprojectedPoint,
-                    ray: raycaster.ray,
-                    camera,
-                    // Hijack stopPropagation, which just sets a flag
-                    stopPropagation() {
-                        // https://github.com/pmndrs/react-three-fiber/issues/596
-                        // Events are not allowed to stop propagation if the pointer has been captured
-                        const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId);
-                        // We only authorize stopPropagation...
-                        if (
-                        // ...if this pointer hasn't been captured
-                        !capturesForPointer ||
-                            // ... or if the hit object is capturing the pointer
-                            capturesForPointer.has(hit.eventObject)) {
-                            raycastEvent.stopped = localState.stopped = true;
-                            // Propagation is stopped, remove all other hover records
-                            // An event handler is only allowed to flush other handlers if it is hovered itself
-                            if (internal.hovered.size &&
-                                Array.from(internal.hovered.values()).find((i) => i.eventObject === hit.eventObject)) {
-                                // Objects cannot flush out higher up objects that have already caught the event
-                                const higher = intersections.slice(0, intersections.indexOf(hit));
-                                cancelPointer([...higher, hit]);
-                            }
-                        }
-                    },
-                    // there should be a distinction between target and currentTarget
-                    target: { hasPointerCapture, setPointerCapture, releasePointerCapture },
-                    currentTarget: { hasPointerCapture, setPointerCapture, releasePointerCapture },
-                    nativeEvent: event,
-                };
-                // Call subscribers
-                callback(raycastEvent);
-                // Event bubbling may be interrupted by stopPropagation
-                if (localState.stopped)
-                    break;
+                else {
+                    const keys = Object.keys(request.urls);
+                    results = keys.reduce((result, key) => {
+                        // @ts-ignore
+                        result[key] = loadedResults[keys.indexOf(key)];
+                        return result;
+                    }, {});
+                }
+                if (onLoad) {
+                    onLoad(results);
+                }
+                return results;
+            },
+        });
+    });
+}
+loaderResource.preload = (loaderConstructor, inputs, extensions) => {
+    const params = getLoaderRequestParams(() => inputs, () => loaderConstructor, extensions);
+    void Promise.all(getLoaderPromises(params));
+};
+loaderResource.destroy = () => {
+    cached.clear();
+};
+loaderResource.clear = (urls) => {
+    const urlToClear = Array.isArray(urls) ? urls : [urls];
+    urlToClear.forEach((url) => {
+        cached.delete(url);
+    });
+};
+
+const RGBA_REGEX = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*\.?\d+)?\)/;
+const DEFAULT_COLOR = 0x000000;
+class NgtHexify {
+    constructor() {
+        this.document = inject(DOCUMENT, { optional: true });
+        this.cache = {};
+    }
+    /**
+     * transforms a:
+     * - hex string to a hex number
+     * - rgb string to a hex number
+     * - rgba string to a hex number
+     * - css color string to a hex number
+     *
+     * always default to black if failed
+     * @param value
+     */
+    transform(value) {
+        if (value == null)
+            return DEFAULT_COLOR;
+        if (value.startsWith('#')) {
+            if (!this.cache[value]) {
+                this.cache[value] = this.hexStringToNumber(value);
             }
+            return this.cache[value];
         }
-        return intersections;
-    }
-    function cancelPointer(intersections) {
-        const internal = store.snapshot.internal;
-        for (const hoveredObj of internal.hovered.values()) {
-            // When no objects were hit or the the hovered object wasn't found underneath the cursor
-            // we call onPointerOut and delete the object from the hovered-elements map
-            if (!intersections.length ||
-                !intersections.find((hit) => hit.object === hoveredObj.object &&
-                    hit.index === hoveredObj.index &&
-                    hit.instanceId === hoveredObj.instanceId)) {
-                const eventObject = hoveredObj.eventObject;
-                const instance = getInstanceState(eventObject);
-                const handlers = instance?.handlers;
-                internal.hovered.delete(makeId(hoveredObj));
-                if (instance?.eventCount) {
-                    // Clear out intersects, they are outdated by now
-                    const data = { ...hoveredObj, intersections };
-                    handlers?.pointerout?.(data);
-                    handlers?.pointerleave?.(data);
-                }
+        if (!this.ctx) {
+            this.ctx = this.document?.createElement('canvas').getContext('2d');
+        }
+        if (!this.ctx) {
+            console.warn('[NGT] hexify: canvas context is not available');
+            return DEFAULT_COLOR;
+        }
+        this.ctx.fillStyle = value;
+        const computedValue = this.ctx.fillStyle;
+        if (computedValue.startsWith('#')) {
+            if (!this.cache[computedValue]) {
+                this.cache[computedValue] = this.hexStringToNumber(computedValue);
             }
+            return this.cache[computedValue];
+        }
+        if (!computedValue.startsWith('rgba')) {
+            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
+            return DEFAULT_COLOR;
+        }
+        const match = computedValue.match(RGBA_REGEX);
+        if (!match) {
+            console.warn(`[NGT] hexify: invalid color format. Expected rgba or hex, receive: ${computedValue}`);
+            return DEFAULT_COLOR;
+        }
+        const r = parseInt(match[1], 10);
+        const g = parseInt(match[2], 10);
+        const b = parseInt(match[3], 10);
+        const a = match[4] ? parseFloat(match[4]) : 1.0;
+        const cacheKey = `${r}:${g}:${b}:${a}`;
+        // check result from cache
+        if (!this.cache[cacheKey]) {
+            // Convert the components to hex strings
+            const hexR = this.componentToHex(r);
+            const hexG = this.componentToHex(g);
+            const hexB = this.componentToHex(b);
+            const hexA = this.componentToHex(Math.round(a * 255));
+            // Combine the hex components into a single hex string
+            const hex = `#${hexR}${hexG}${hexB}${hexA}`;
+            this.cache[cacheKey] = this.hexStringToNumber(hex);
         }
+        return this.cache[cacheKey];
     }
-    function pointerMissed(event, objects) {
-        for (let i = 0; i < objects.length; i++) {
-            const instance = getInstanceState(objects[i]);
-            instance?.handlers.pointermissed?.(event);
+    hexStringToNumber(hexString) {
+        return parseInt(hexString.replace('#', ''), 16);
+    }
+    componentToHex(component) {
+        const hex = component.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, isStandalone: true, name: "hexify" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtHexify, decorators: [{
+            type: Pipe,
+            args: [{ name: 'hexify', pure: true }]
+        }] });
+
+const catalogue = {};
+function extend(objects) {
+    Object.assign(catalogue, objects);
+}
+const NGT_CATALOGUE = new InjectionToken('NGT_CATALOGUE', { factory: () => catalogue });
+function injectCatalogue() {
+    return inject(NGT_CATALOGUE);
+}
+
+function omit(objFn, keysToOmit, equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
+    return computed(() => {
+        const obj = objFn();
+        const result = {};
+        for (const key of Object.keys(obj)) {
+            if (keysToOmit.includes(key))
+                continue;
+            Object.assign(result, { [key]: obj[key] });
+        }
+        return result;
+    }, { equal });
+}
+function pick(objFn, keyOrKeys, equal) {
+    if (Array.isArray(keyOrKeys)) {
+        if (!equal) {
+            equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' });
         }
+        return computed(() => {
+            const obj = objFn();
+            const result = {};
+            for (const key of keyOrKeys) {
+                if (!(key in obj))
+                    continue;
+                Object.assign(result, { [key]: obj[key] });
+            }
+            return result;
+        }, { equal });
     }
-    function handlePointer(name) {
-        // Deal with cancelation
-        switch (name) {
-            case 'pointerleave':
-            case 'pointercancel':
-                return () => cancelPointer([]);
-            case 'lostpointercapture':
-                return (event) => {
-                    const { internal } = store.snapshot;
-                    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-                        // If the object event interface had lostpointercapture, we'd call it here on every
-                        // object that's getting removed. We call it on the next frame because lostpointercapture
-                        // fires before pointerup. Otherwise pointerUp would never be called if the event didn't
-                        // happen in the object it originated from, leaving components in a in-between state.
-                        requestAnimationFrame(() => {
-                            // Only release if pointer-up didn't do it already
-                            if (internal.capturedMap.has(event.pointerId)) {
-                                internal.capturedMap.delete(event.pointerId);
-                                cancelPointer([]);
-                            }
-                        });
-                    }
-                };
+    return computed(() => objFn()[keyOrKeys], { equal });
+}
+function merge(objFn, toMerge, mode = 'override', equal = (a, b) => is.equ(a, b, { objects: 'shallow', arrays: 'shallow' })) {
+    if (mode === 'override')
+        return computed(() => ({ ...objFn(), ...toMerge }), { equal });
+    return computed(() => ({ ...toMerge, ...objFn() }), { equal });
+}
+function createVectorComputed(vectorCtor) {
+    return ((inputOrOptions, keyOrKeepUndefined, keepUndefined) => {
+        if (typeof keyOrKeepUndefined === 'undefined' || typeof keyOrKeepUndefined === 'boolean') {
+            keepUndefined = !!keyOrKeepUndefined;
+            const input = inputOrOptions;
+            return computed(() => {
+                const value = input();
+                if (keepUndefined && value == undefined)
+                    return undefined;
+                if (typeof value === 'number')
+                    return new vectorCtor().setScalar(value);
+                else if (Array.isArray(value))
+                    return new vectorCtor(...value);
+                else if (value)
+                    return value;
+                else
+                    return new vectorCtor();
+            }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+        }
+        const options = inputOrOptions;
+        const key = keyOrKeepUndefined;
+        return computed(() => {
+            const value = options()[key];
+            if (keepUndefined && value == undefined)
+                return undefined;
+            if (typeof value === 'number')
+                return new vectorCtor().setScalar(value);
+            else if (Array.isArray(value))
+                return new vectorCtor(...value);
+            else if (value)
+                return value;
+            else
+                return new vectorCtor();
+        }, { equal: (a, b) => !!a && !!b && a.equals(b) });
+    });
+}
+const vector2 = createVectorComputed(THREE.Vector2);
+const vector3 = createVectorComputed(THREE.Vector3);
+const vector4 = createVectorComputed(THREE.Vector4);
+
+class NgtPortalAutoRender {
+    constructor() {
+        this.portalStore = injectStore({ host: true });
+        this.parentStore = injectStore({ skipSelf: true });
+        this.portal = inject(NgtPortalImpl, { host: true });
+        this.renderPriority = input(1, { alias: 'autoRender', transform: (value) => numberAttribute(value, 1) });
+        effect(() => {
+            // this.portalStore.update((state) => ({ events: { ...state.events, priority: this.renderPriority() + 1 } }));
+        });
+        effect((onCleanup) => {
+            const portalRendered = this.portal.portalRendered();
+            if (!portalRendered)
+                return;
+            // track state
+            const [renderPriority, { internal }] = [this.renderPriority(), this.portalStore()];
+            let oldClean;
+            const cleanup = internal.subscribe(({ gl, scene, camera }) => {
+                const [parentScene, parentCamera] = [
+                    this.parentStore.snapshot.scene,
+                    this.parentStore.snapshot.camera,
+                ];
+                oldClean = gl.autoClear;
+                if (renderPriority === 1) {
+                    // clear scene and render with default
+                    gl.autoClear = true;
+                    gl.render(parentScene, parentCamera);
+                }
+                // disable cleaning
+                gl.autoClear = false;
+                gl.clearDepth();
+                gl.render(scene, camera);
+                // restore
+                gl.autoClear = oldClean;
+            }, renderPriority, this.portalStore);
+            onCleanup(() => cleanup());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalAutoRender, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: NgtPortalAutoRender, isStandalone: true, selector: "ngt-portal[autoRender]", inputs: { renderPriority: { classPropertyName: "renderPriority", publicName: "autoRender", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalAutoRender, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngt-portal[autoRender]' }]
+        }], ctorParameters: () => [] });
+class NgtPortalContent {
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
+    }
+    constructor() {
+        const host = inject(ElementRef, { skipSelf: true });
+        const { element } = inject(ViewContainerRef);
+        const injector = inject(Injector);
+        const commentNode = element.nativeElement;
+        const store = injectStore();
+        commentNode.data = NGT_PORTAL_CONTENT_FLAG;
+        commentNode[NGT_PORTAL_CONTENT_FLAG] = store;
+        commentNode[NGT_DOM_PARENT_FLAG] = host.nativeElement;
+        if (commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]) {
+            commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG]('portal', injector);
+            delete commentNode[NGT_INTERNAL_ADD_COMMENT_FLAG];
         }
-        // Any other pointer goes here ...
-        return function handleEvent(event) {
-            // NOTE: __pointerMissed$ on NgtStore is private subject since we only expose the Observable
-            const pointerMissed$ = store['__pointerMissed$'];
-            const internal = store.snapshot.internal;
-            // prepareRay(event)
-            internal.lastEvent.nativeElement = event;
-            // Get fresh intersects
-            const isPointerMove = name === 'pointermove';
-            const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
-            const filter = isPointerMove ? filterPointerEvents : undefined;
-            const hits = intersect(event, filter);
-            const delta = isClickEvent ? calculateDistance(event) : 0;
-            // Save initial coordinates on pointer-down
-            if (name === 'pointerdown') {
-                internal.initialClick = [event.offsetX, event.offsetY];
-                internal.initialHits = hits.map((hit) => hit.eventObject);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: NgtPortalContent, isStandalone: true, selector: "ng-template[portalContent]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalContent, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[portalContent]' }]
+        }], ctorParameters: () => [] });
+function mergeState(previousRoot, store, container, pointer, raycaster, events, size) {
+    // we never want to spread the id
+    const { id: _, ...previousState } = previousRoot.snapshot;
+    const state = store.snapshot;
+    let viewport = undefined;
+    if (state.camera && size) {
+        const camera = state.camera;
+        // calculate the override viewport, if present
+        viewport = previousState.viewport.getCurrentViewport(camera, new THREE.Vector3(), size);
+        // update the portal camera, if it differs from the previous layer
+        if (camera !== previousState.camera)
+            updateCamera(camera, size);
+    }
+    return {
+        // the intersect consists of the previous root state
+        ...previousState,
+        ...state,
+        // portals have their own scene, which forms the root, a raycaster and a pointer
+        scene: container,
+        pointer,
+        raycaster,
+        // their previous root is the layer before it
+        previousRoot,
+        events: { ...previousState.events, ...state.events, ...events },
+        size: { ...previousState.size, ...size },
+        viewport: { ...previousState.viewport, ...viewport },
+        // layers are allowed to override events
+        setEvents: (events) => store.update((state) => ({ ...state, events: { ...state.events, ...events } })),
+    };
+}
+class NgtPortalImpl {
+    constructor() {
+        this.container = input.required();
+        this.state = input({});
+        this.contentRef = contentChild.required(NgtPortalContent, { read: TemplateRef });
+        this.anchorRef = contentChild.required(NgtPortalContent, { read: ViewContainerRef });
+        this.previousStore = injectStore({ skipSelf: true });
+        this.portalStore = injectStore();
+        this.injector = inject(Injector);
+        this.size = pick(this.state, 'size');
+        this.events = pick(this.state, 'events');
+        this.restState = omit(this.state, ['size', 'events']);
+        this.portalContentRendered = signal(false);
+        this.portalRendered = this.portalContentRendered.asReadonly();
+        extend({ Group });
+        effect(() => {
+            let [container, anchor, content] = [
+                this.container(),
+                this.anchorRef(),
+                this.contentRef(),
+                this.previousStore(),
+            ];
+            const [size, events, restState] = [untracked(this.size), untracked(this.events), untracked(this.restState)];
+            if (!is.instance(container)) {
+                container = prepare(container, 'ngt-portal', { store: this.portalStore });
             }
-            // If a click yields no results, pass it back to the user as a miss
-            // Missed events have to come first in order to establish user-land side-effect clean up
-            if (isClickEvent && !hits.length) {
-                if (delta <= 2) {
-                    pointerMissed(event, internal.interaction);
-                    pointerMissed$.next(event);
-                }
+            const instanceState = getInstanceState(container);
+            if (instanceState && instanceState.store !== this.portalStore) {
+                instanceState.store = this.portalStore;
             }
-            // Take care of unhover
-            if (isPointerMove)
-                cancelPointer(hits);
-            function onIntersect(data) {
-                const eventObject = data.eventObject;
-                const instance = getInstanceState(eventObject);
-                const handlers = instance?.handlers;
-                // Check presence of handlers
-                if (!instance?.eventCount)
-                    return;
-                /*
-        MAYBE TODO, DELETE IF NOT:
-          Check if the object is captured, captured events should not have intersects running in parallel
-          But wouldn't it be better to just replace capturedMap with a single entry?
-          Also, are we OK with straight up making picking up multiple objects impossible?
-
-        const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
-        if (pointerId !== undefined) {
-          const capturedMeshSet = internal.capturedMap.get(pointerId)
-          if (capturedMeshSet) {
-            const captured = capturedMeshSet.get(eventObject)
-            if (captured && captured.localState.stopped) return
-          }
-        }*/
-                if (isPointerMove) {
-                    // Move event ...
-                    if (handlers?.pointerover ||
-                        handlers?.pointerenter ||
-                        handlers?.pointerout ||
-                        handlers?.pointerleave) {
-                        // When enter or out is present take care of hover-state
-                        const id = makeId(data);
-                        const hoveredItem = internal.hovered.get(id);
-                        if (!hoveredItem) {
-                            // If the object wasn't previously hovered, book it and call its handler
-                            internal.hovered.set(id, data);
-                            handlers.pointerover?.(data);
-                            handlers.pointerenter?.(data);
-                        }
-                        else if (hoveredItem.stopped) {
-                            // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
-                            data.stopPropagation();
-                        }
-                    }
-                    // Call mouse move
-                    handlers?.pointermove?.(data);
-                }
-                else {
-                    // All other events ...
-                    const handler = handlers?.[name];
-                    if (handler) {
-                        // Forward all events back to their respective handlers with the exception of click events,
-                        // which must use the initial target
-                        if (!isClickEvent || internal.initialHits.includes(eventObject)) {
-                            // Missed events have to come first
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                            // Now call the handler
-                            handler(data);
-                        }
-                    }
-                    else {
-                        // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
-                        if (isClickEvent && internal.initialHits.includes(eventObject)) {
-                            pointerMissed(event, internal.interaction.filter((object) => !internal.initialHits.includes(object)));
-                        }
-                    }
-                }
+            this.portalStore.update(restState, mergeState(this.previousStore, this.portalStore, container, this.portalStore.snapshot.pointer, this.portalStore.snapshot.raycaster, events, size));
+            if (this.portalViewRef) {
+                this.portalViewRef.detectChanges();
+                return;
             }
-            handleIntersects(hits, event, delta, onIntersect);
-        };
+            this.portalViewRef = anchor.createEmbeddedView(content, { injector: this.injector }, { injector: this.injector });
+            this.portalViewRef.detectChanges();
+            this.portalContentRendered.set(true);
+        });
     }
-    return { handlePointer };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalImpl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: NgtPortalImpl, isStandalone: true, selector: "ngt-portal", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NGT_STORE,
+                useFactory: (previousStore) => {
+                    const pointer = new THREE.Vector2();
+                    const raycaster = new THREE.Raycaster();
+                    const { id: _skipId, ...previousState } = previousStore.snapshot;
+                    const store = signalState({
+                        id: makeId(),
+                        ...previousState,
+                        scene: null,
+                        previousRoot: previousStore,
+                        pointer,
+                        raycaster,
+                    });
+                    store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                    return store;
+                },
+                deps: [[new SkipSelf(), NGT_STORE]],
+            },
+        ], queries: [{ propertyName: "contentRef", first: true, predicate: NgtPortalContent, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "anchorRef", first: true, predicate: NgtPortalContent, descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		@if (portalRendered()) {
+			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+			<ngt-group (pointerover)="(undefined)" attach="none" />
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NgtPortalImpl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngt-portal',
+                    template: `
+		@if (portalRendered()) {
+			<!-- Without an element that receives pointer events state.pointer will always be 0/0 -->
+			<ngt-group (pointerover)="(undefined)" attach="none" />
+		}
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NGT_STORE,
+                            useFactory: (previousStore) => {
+                                const pointer = new THREE.Vector2();
+                                const raycaster = new THREE.Raycaster();
+                                const { id: _skipId, ...previousState } = previousStore.snapshot;
+                                const store = signalState({
+                                    id: makeId(),
+                                    ...previousState,
+                                    scene: null,
+                                    previousRoot: previousStore,
+                                    pointer,
+                                    raycaster,
+                                });
+                                store.update(mergeState(previousStore, store, null, pointer, raycaster));
+                                return store;
+                            },
+                            deps: [[new SkipSelf(), NGT_STORE]],
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [] });
+const NgtPortal = [NgtPortalImpl, NgtPortalContent];
 
 // This function prepares a set of changes to be applied to the instance
 function diffProps(instance, props) {
@@ -2775,8 +2873,8 @@ class NgtRenderer2 {
 }
 
 const shallowLoose = { objects: 'shallow', strict: false };
-function injectCanvasRootInitializer(injector) {
-    return assertInjector(injectCanvasRootInitializer, injector, () => {
+function canvasRootInitializer(injector) {
+    return assertInjector(canvasRootInitializer, injector, () => {
         const injectedStore = injectStore();
         const loop = injectLoop();
         return (canvas) => {
@@ -3080,9 +3178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  * )
  * ```
  */
-function injectBeforeRender(cb, { priority = 0, injector } = {}) {
+function beforeRender(cb, { priority = 0, injector } = {}) {
     if (typeof priority === 'function') {
-        const effectRef = assertInjector(injectBeforeRender, injector, () => {
+        const effectRef = assertInjector(beforeRender, injector, () => {
             const store = injectStore();
             const ref = effect((onCleanup) => {
                 const p = priority();
@@ -3094,13 +3192,18 @@ function injectBeforeRender(cb, { priority = 0, injector } = {}) {
         });
         return effectRef.destroy.bind(effectRef);
     }
-    return assertInjector(injectBeforeRender, injector, () => {
+    return assertInjector(beforeRender, injector, () => {
         const store = injectStore();
         const sub = store.snapshot.internal.subscribe(cb, priority, store);
         inject(DestroyRef).onDestroy(() => void sub());
         return sub;
     });
 }
+/**
+ * @deprecated Use `beforeRender` instead. Will be removed in v5.0.0
+ * @since v4.0.0
+ */
+const injectBeforeRender = beforeRender;
 
 /**
  * As host directive:
@@ -3146,7 +3249,7 @@ class NgtObjectEvents {
                 return ngtObject();
             return ngtObject;
         });
-        injectObjectEvents(obj, {
+        objectEvents(obj, {
             click: this.emitEvent('click'),
             dblclick: this.emitEvent('dblclick'),
             contextmenu: this.emitEvent('contextmenu'),
@@ -3172,8 +3275,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             type: Directive,
             args: [{ selector: '[ngtObjectEvents]' }]
         }], ctorParameters: () => [] });
-function injectObjectEvents(target, events, { injector } = {}) {
-    return assertInjector(injectObjectEvents, injector, () => {
+/**
+ * @deprecated use objectEvents instead. Will be removed in v5.0.0
+ * @since v4.0.0
+ */
+const injectObjectEvents = objectEvents;
+function objectEvents(target, events, { injector } = {}) {
+    return assertInjector(objectEvents, injector, () => {
         const renderer = inject(Renderer2);
         const cleanUps = [];
         effect((onCleanup) => {
@@ -3207,5 +3315,5 @@ function hasListener(...emitterRefs) {
  * Generated bundle index. Do not edit.
  */
 
-export { NGT_APPLY_PROPS, NGT_ARGS_FLAG, NGT_CANVAS_CONTENT_FLAG, NGT_CATALOGUE, NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG, NGT_DOM_PARENT_FLAG, NGT_GET_NODE_ATTRIBUTE_FLAG, NGT_HTML_FLAG, NGT_INTERNAL_ADD_COMMENT_FLAG, NGT_INTERNAL_SET_PARENT_COMMENT_FLAG, NGT_LOOP, NGT_PARENT_FLAG, NGT_PORTAL_CONTENT_FLAG, NGT_RENDERER_NODE_FLAG, NGT_RENDERER_OPTIONS, NGT_STORE, NgtArgs, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalImpl, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, NgtSelectionApi, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, extend, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCanvasRootInitializer, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, omit, pick, prepare, provideHTMLDomElement, removeInteractivity, resolveInstanceKey, resolveRef, roots, signalState, storeFactory, updateCamera, vector2, vector3, vector4 };
+export { NGT_APPLY_PROPS, NGT_ARGS_FLAG, NGT_CANVAS_CONTENT_FLAG, NGT_CATALOGUE, NGT_DELEGATE_RENDERER_DESTROY_NODE_PATCHED_FLAG, NGT_DOM_PARENT_FLAG, NGT_GET_NODE_ATTRIBUTE_FLAG, NGT_HTML_FLAG, NGT_INTERNAL_ADD_COMMENT_FLAG, NGT_INTERNAL_SET_PARENT_COMMENT_FLAG, NGT_LOOP, NGT_PARENT_FLAG, NGT_PORTAL_CONTENT_FLAG, NGT_RENDERER_NODE_FLAG, NGT_RENDERER_OPTIONS, NGT_STORE, NgtArgs, NgtHTML, NgtHexify, NgtObjectEvents, NgtParent, NgtPortal, NgtPortalAutoRender, NgtPortalContent, NgtPortalImpl, NgtRenderer2, NgtRendererFactory2, NgtRoutedScene, NgtSelect, NgtSelection, NgtSelectionApi, THREE_NATIVE_EVENTS, addAfterEffect, addEffect, addTail, applyProps, attach, beforeRender, canvasRootInitializer, checkNeedsUpdate, checkUpdate, createAttachFunction, createEvents, detach, dispose, extend, flushGlobalEffects, getEmitter, getInstanceState, getLocalState, hasListener, injectBeforeRender, injectCatalogue, injectLoader, injectLoop, injectObjectEvents, injectStore, invalidateInstance, is, loaderResource, makeCameraInstance, makeDpr, makeId, makeObjectGraph, makeRendererInstance, merge, objectEvents, omit, pick, prepare, provideHTMLDomElement, removeInteractivity, resolveInstanceKey, resolveRef, roots, signalState, storeFactory, updateCamera, vector2, vector3, vector4 };
 //# sourceMappingURL=angular-three.mjs.map