angular-three 4.0.0-next.105 → 4.0.0-next.107

package/fesm2022/angular-three.mjs

@@ -468,34 +468,34 @@ function prepare(object, type, instanceState) {
             ...rest,
         };
     }
-    Object.defineProperty(instance.__ngt__, 'setPointerEvent', {
-        value: (eventName, callback) => {
-            const iS = getInstanceState(instance);
-            if (!iS.handlers)
-                iS.handlers = {};
-            // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
-            const previousHandler = iS.handlers[eventName];
-            // readjust the callback
-            const updatedCallback = (event) => {
-                if (previousHandler)
-                    previousHandler(event);
-                callback(event);
-            };
-            Object.assign(iS.handlers, { [eventName]: updatedCallback });
-            // increment the count everytime
-            iS.eventCount += 1;
-            // clean up the event listener by removing the target from the interaction array
-            return () => {
+    Object.defineProperties(instance.__ngt__, {
+        setPointerEvent: {
+            value: (eventName, callback) => {
                 const iS = getInstanceState(instance);
-                if (iS) {
-                    iS.handlers && delete iS.handlers[eventName];
-                    iS.eventCount -= 1;
-                }
-            };
+                if (!iS.handlers)
+                    iS.handlers = {};
+                // try to get the previous handler. compound might have one, the THREE object might also have one with the same name
+                const previousHandler = iS.handlers[eventName];
+                // readjust the callback
+                const updatedCallback = (event) => {
+                    if (previousHandler)
+                        previousHandler(event);
+                    callback(event);
+                };
+                Object.assign(iS.handlers, { [eventName]: updatedCallback });
+                // increment the count everytime
+                iS.eventCount += 1;
+                // clean up the event listener by removing the target from the interaction array
+                return () => {
+                    const iS = getInstanceState(instance);
+                    if (iS) {
+                        iS.handlers && delete iS.handlers[eventName];
+                        iS.eventCount -= 1;
+                    }
+                };
+            },
+            configurable: true,
         },
-        configurable: true,
-    });
-    Object.defineProperties(instance.__ngt__, {
         addInteraction: {
             value: (store) => {
                 if (!store)
@@ -888,8 +888,12 @@ function createEvents(store) {
         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++) {
+        // Skip work if there are no event objects
+        if (eventsObjects.length === 0)
+            return intersections;
+        // Reset all raycaster cameras to undefined - use for loop for better performance
+        const eventsObjectsLen = eventsObjects.length;
+        for (let i = 0; i < eventsObjectsLen; i++) {
             const objectRootState = getInstanceState(eventsObjects[i])?.store?.snapshot;
             if (objectRootState) {
                 objectRootState.raycaster.camera = undefined;
@@ -899,6 +903,8 @@ function createEvents(store) {
             // Make sure root-level pointer and ray are set up
             state.events.compute?.(event, store, null);
         }
+        // Pre-allocate array to avoid garbage collection
+        const raycastResults = [];
         function handleRaycast(obj) {
             const objStore = getInstanceState(obj)?.store;
             const objState = objStore?.snapshot;
@@ -916,31 +922,40 @@ function createEvents(store) {
             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) => {
+        for (let i = 0; i < eventsObjectsLen; i++) {
+            const objResults = handleRaycast(eventsObjects[i]);
+            if (objResults.length <= 0)
+                continue;
+            for (let j = 0; j < objResults.length; j++) {
+                raycastResults.push(objResults[j]);
+            }
+        }
+        // Sort by event priority and distance
+        raycastResults.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) => {
+        });
+        // Filter out duplicates - more efficient than chaining
+        let hits = [];
+        for (let i = 0; i < raycastResults.length; i++) {
+            const item = raycastResults[i];
             const id = makeId(item);
             if (duplicates.has(id))
-                return false;
+                continue;
             duplicates.add(id);
-            return true;
-        });
+            hits.push(item);
+        }
         // 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) {
+        const hitsLen = hits.length;
+        for (let i = 0; i < hitsLen; i++) {
+            const hit = hits[i];
             let eventObject = hit.object;
             // bubble event up
             while (eventObject) {
@@ -951,9 +966,11 @@ function createEvents(store) {
         }
         // 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);
+            const captures = state.internal.capturedMap.get(event.pointerId);
+            for (const captureData of captures.values()) {
+                if (duplicates.has(makeId(captureData.intersection)))
+                    continue;
+                intersections.push(captureData.intersection);
             }
         }
         return intersections;
@@ -1088,29 +1105,29 @@ function createEvents(store) {
         }
     }
     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([]);
-                            }
-                        });
-                    }
-                };
+        // Handle common cancelation events
+        if (name === 'pointerleave' || name === 'pointercancel') {
+            return () => cancelPointer([]);
+        }
+        if (name === '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([]);
+                        }
+                    });
+                }
+            };
         }
+        // Cache these values since they're used in the closure
         const isPointerMove = name === 'pointermove';
         const isClickEvent = name === 'click' || name === 'contextmenu' || name === 'dblclick';
         const filter = isPointerMove ? filterPointerEvents : undefined;
@@ -1119,62 +1136,52 @@ function createEvents(store) {
             // NOTE: __pointerMissed$ on NgtStore is private subject since we only expose the Observable
             const pointerMissed$ = store['__pointerMissed$'];
             const internal = store.snapshot.internal;
-            // prepareRay(event)
+            // Cache the event
             internal.lastEvent.nativeElement = event;
             // Get fresh intersects
             const hits = intersect(event, filter);
+            // Only calculate distance for click events to avoid unnecessary math
             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);
-                }
+            // Handle click miss events - early return optimization for better performance
+            if (isClickEvent && hits.length === 0 && delta <= 2) {
+                pointerMissed(event, internal.interaction);
+                pointerMissed$.next(event);
+                return; // Early return if nothing was hit
             }
-            // Take care of unhover
+            // Take care of unhover for pointer moves
             if (isPointerMove)
                 cancelPointer(hits);
+            // Define onIntersect handler - locally cache common properties for better performance
             function onIntersect(data) {
                 const eventObject = data.eventObject;
                 const instance = getInstanceState(eventObject);
-                const handlers = instance?.handlers;
-                // Check presence of handlers
+                // Early return if no instance or event count
                 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
-          }
-        }*/
+                const handlers = instance.handlers;
+                if (!handlers)
+                    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
+                    // Handle pointer move events
+                    const hasPointerOverHandlers = !!(handlers.pointerover ||
+                        handlers.pointerenter ||
+                        handlers.pointerout ||
+                        handlers.pointerleave);
+                    if (hasPointerOverHandlers) {
                         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);
+                            if (handlers.pointerover)
+                                handlers.pointerover(data);
+                            if (handlers.pointerenter)
+                                handlers.pointerenter(data);
                         }
                         else if (hoveredItem.stopped) {
                             // If the object was previously hovered and stopped, we shouldn't allow other items to proceed
@@ -1182,30 +1189,40 @@ function createEvents(store) {
                         }
                     }
                     // Call mouse move
-                    handlers?.pointermove?.(data);
+                    if (handlers.pointermove)
+                        handlers.pointermove(data);
                 }
                 else {
                     // All other events ...
-                    const handler = handlers?.[name];
+                    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)));
+                            // Get objects not in initialHits for pointer missed - avoid creating new arrays if possible
+                            const missedObjects = internal.interaction.filter((object) => !internal.initialHits.includes(object));
+                            // Call pointerMissed only if we have objects to notify
+                            if (missedObjects.length > 0) {
+                                pointerMissed(event, missedObjects);
+                            }
                             // Now call the handler
                             handler(data);
                         }
                     }
-                    else {
+                    else if (isClickEvent && internal.initialHits.includes(eventObject)) {
                         // 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)));
+                        const missedObjects = internal.interaction.filter((object) => !internal.initialHits.includes(object));
+                        // Call pointerMissed only if we have objects to notify
+                        if (missedObjects.length > 0) {
+                            pointerMissed(event, missedObjects);
                         }
                     }
                 }
             }
-            handleIntersects(hits, event, delta, onIntersect);
+            // Process all intersections
+            if (hits.length > 0) {
+                handleIntersects(hits, event, delta, onIntersect);
+            }
         };
     }
     return { handlePointer };
@@ -1977,9 +1994,8 @@ class NgtRenderer2 {
             }
             const cleanup = iS.setPointerEvent?.(eventName, callback) || (() => { });
             // this means the object has already been attached to the parent and has its store propagated
-            if (iS.store) {
+            if (iS.store)
                 iS.addInteraction?.(iS.store);
-            }
             return cleanup;
         }
         return this.delegateRenderer.listen(target, eventName, callback);
@@ -2782,7 +2798,6 @@ class NgtPortalContent {
     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;
@@ -2861,7 +2876,8 @@ class NgtPortalImpl {
                 this.portalViewRef.detectChanges();
                 return;
             }
-            this.portalViewRef = anchor.createEmbeddedView(content, { injector: this.injector }, { injector: this.injector });
+            const portalViewContext = { injector: this.injector };
+            this.portalViewRef = anchor.createEmbeddedView(content, portalViewContext, portalViewContext);
             this.portalViewRef.detectChanges();
             this.portalContentRendered.set(true);
         });