feat: write ancestorsHaveListeners onto interaction panel for the eve…

…nt system when skipping over uikit elements
pmndrs · Nov 5, 2024 · 193b9ce · 193b9ce
1 parent cad0f11
commit 193b9ce
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 144 deletions.
diff --git a/packages/uikit/src/components/container.ts b/packages/uikit/src/components/container.ts
@@ -36,9 +36,9 @@ import { Initializers } from '../utils.js'
 import { darkPropertyTransformers } from '../dark.js'
 import { getDefaultPanelMaterialConfig } from '../panel/index.js'
 import {
+  computeAnyAncestorsHaveListeners,
   computedInheritableProperty,
-  computeOutgoingDefaultProperties,
-  setupInteractableDecendant,
+  computeDefaultProperties,
   setupPointerEvents,
   UpdateMatrixWorldProperties,
 } from '../internals.js'
@@ -66,7 +66,7 @@ export function createContainer(
   parentCtx: ParentContext,
   style: Signal<ContainerProperties | undefined>,
   properties: Signal<ContainerProperties | undefined>,
-  incommingDefaultProperties: Signal<AllOptionalProperties | undefined>,
+  defaultProperties: Signal<AllOptionalProperties | undefined>,
   object: Object3DRef,
   childrenContainer: Object3DRef,
 ) {
@@ -79,7 +79,7 @@ export function createContainer(
   setupCursorCleanup(hoveredSignal, initializers)
 
   //properties
-  const mergedProperties = computedMergedProperties(style, properties, incommingDefaultProperties, {
+  const mergedProperties = computedMergedProperties(style, properties, defaultProperties, {
     ...darkPropertyTransformers,
     ...createResponsivePropertyTransformers(parentCtx.root.size),
     ...createHoverPropertyTransformers(hoveredSignal),
@@ -136,16 +136,6 @@ export function createContainer(
     scrollbarWidth,
     initializers,
   )
-  const interactionPanel = createInteractionPanel(
-    orderInfo,
-    parentCtx.root,
-    parentCtx.clippingRect,
-    flexState.size,
-    globalMatrix,
-    initializers,
-  )
-  setupPointerEvents(mergedProperties, interactionPanel, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, interactionPanel, initializers)
   const scrollHandlers = computedScrollHandlers(
     scrollPosition,
     parentCtx.anyAncestorScrollable,
@@ -157,6 +147,19 @@ export function createContainer(
     initializers,
   )
 
+  const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers)
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+
+  const interactionPanel = createInteractionPanel(
+    orderInfo,
+    parentCtx.root,
+    parentCtx.clippingRect,
+    flexState.size,
+    globalMatrix,
+    initializers,
+  )
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, interactionPanel, initializers, false)
+
   const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false)
   setupMatrixWorldUpdate(updateMatrixWorld, false, object, parentCtx.root, globalMatrix, initializers, false)
   setupMatrixWorldUpdate(updateMatrixWorld, false, interactionPanel, parentCtx.root, globalMatrix, initializers, true)
@@ -165,7 +168,8 @@ export function createContainer(
   setupClippedListeners(style, properties, isClipped, initializers)
 
   return Object.assign(flexState, {
-    defaultProperties: computeOutgoingDefaultProperties(mergedProperties),
+    ancestorsHaveListeners,
+    defaultProperties: computeDefaultProperties(mergedProperties),
     globalMatrix,
     isClipped,
     isVisible,
@@ -178,14 +182,7 @@ export function createContainer(
     root: parentCtx.root,
     scrollPosition,
     interactionPanel,
-    handlers: computedHandlers(
-      style,
-      properties,
-      incommingDefaultProperties,
-      hoveredSignal,
-      activeSignal,
-      scrollHandlers,
-    ),
+    handlers,
     initializers,
-  })
+  }) satisfies ParentContext
 }
diff --git a/packages/uikit/src/components/content.ts b/packages/uikit/src/components/content.ts
@@ -13,13 +13,13 @@ import { Signal, computed, effect, signal, untracked } from '@preact/signals-cor
 import {
   VisibilityProperties,
   WithConditionals,
+  computeAnyAncestorsHaveListeners,
   computedGlobalMatrix,
   computedHandlers,
   computedIsVisible,
   computedMergedProperties,
   createNode,
   keepAspectRatioPropertyTransformer,
-  setupInteractableDecendant,
   setupMatrixWorldUpdate,
   setupPointerEvents,
 } from './utils.js'
@@ -140,8 +140,10 @@ export function createContent(
   )
 
   setupMatrixWorldUpdate(true, true, object, parentCtx.root, globalMatrix, initializers, false)
-  setupPointerEvents(mergedProperties, object, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, object, initializers)
+
+  const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal)
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, object, initializers, true)
 
   setupLayoutListeners(style, properties, flexState.size, initializers)
   setupClippedListeners(style, properties, isClipped, initializers)
@@ -163,7 +165,7 @@ export function createContent(
       initializers,
     ),
     interactionPanel,
-    handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal),
+    handlers,
     initializers,
   })
 }

diff --git a/packages/uikit/src/components/custom.ts b/packages/uikit/src/components/custom.ts
@@ -13,15 +13,14 @@ import { Signal, effect, signal } from '@preact/signals-core'
 import {
   VisibilityProperties,
   WithConditionals,
+  computeAnyAncestorsHaveListeners,
   computedGlobalMatrix,
   computedHandlers,
   computedIsVisible,
   computedMergedProperties,
   createNode,
   setupMatrixWorldUpdate,
-  setupInteractableDecendant,
   setupPointerEvents,
-  computeOutgoingDefaultProperties,
 } from './utils.js'
 import { Initializers } from '../utils.js'
 import { Listeners, setupLayoutListeners, setupClippedListeners } from '../listeners.js'
@@ -147,8 +146,9 @@ export function createCustomContainer(
 
   setupMatrixWorldUpdate(true, true, object, parentCtx.root, globalMatrix, initializers, false)
 
-  setupPointerEvents(mergedProperties, object, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, object, initializers)
+  const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal)
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, object, initializers, true)
 
   setupLayoutListeners(style, properties, flexState.size, initializers)
   setupClippedListeners(style, properties, isClipped, initializers)
@@ -159,7 +159,7 @@ export function createCustomContainer(
     isVisible,
     mergedProperties,
     root: parentCtx.root,
-    handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal),
+    handlers,
     initializers,
   })
 }
diff --git a/packages/uikit/src/components/icon.ts b/packages/uikit/src/components/icon.ts
@@ -1,8 +1,8 @@
 import { Signal, effect, signal } from '@preact/signals-core'
-import { BufferGeometry, Color, Group, Material, Mesh, MeshBasicMaterial, Plane, ShapeGeometry } from 'three'
+import { BufferGeometry, Group, Material, Mesh, MeshBasicMaterial, Plane, ShapeGeometry } from 'three'
 import { Listeners } from '../index.js'
 import { Object3DRef, ParentContext } from '../context.js'
-import { FlexNode, FlexNodeState, YogaProperties, createFlexNodeState } from '../flex/index.js'
+import { FlexNodeState, YogaProperties, createFlexNodeState } from '../flex/index.js'
 import { ElementType, OrderInfo, ZIndexProperties, computedOrderInfo, setupRenderOrder } from '../order.js'
 import { PanelProperties, createInstancedPanel } from '../panel/instanced-panel.js'
 import { WithAllAliases } from '../properties/alias.js'
@@ -13,18 +13,17 @@ import {
   VisibilityProperties,
   WithConditionals,
   applyAppearancePropertiesToGroup,
-  computeOutgoingDefaultProperties,
+  computeAnyAncestorsHaveListeners,
   computedGlobalMatrix,
   computedHandlers,
   computedIsVisible,
   computedMergedProperties,
   createNode,
   keepAspectRatioPropertyTransformer,
-  setupInteractableDecendant,
   setupMatrixWorldUpdate,
   setupPointerEvents,
 } from './utils.js'
-import { Initializers, Subscriptions, fitNormalizedContentInside } from '../utils.js'
+import { Initializers, fitNormalizedContentInside } from '../utils.js'
 import { makeClippedCast } from '../panel/interaction-panel-mesh.js'
 import { computedIsClipped, createGlobalClippingPlanes } from '../clipping.js'
 import { setupLayoutListeners, setupClippedListeners } from '../listeners.js'
@@ -36,7 +35,7 @@ import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js'
 import { AppearanceProperties } from './svg.js'
 import { PanelGroupProperties, computedPanelGroupDependencies, getDefaultPanelMaterialConfig } from '../panel/index.js'
 import { darkPropertyTransformers } from '../dark.js'
-import { computedInheritableProperty, MergedProperties } from '../properties/index.js'
+import { MergedProperties } from '../properties/index.js'
 
 export type InheritableIconProperties = WithClasses<
   WithConditionals<
@@ -138,8 +137,9 @@ export function createIcon(
 
   setupMatrixWorldUpdate(true, true, object, parentCtx.root, globalMatrix, initializers, false)
 
-  setupPointerEvents(mergedProperties, object, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, object, initializers)
+  const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal)
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, object, initializers, false)
 
   setupLayoutListeners(style, properties, flexState.size, initializers)
   setupClippedListeners(style, properties, isClipped, initializers)
@@ -151,7 +151,7 @@ export function createIcon(
     mergedProperties,
     initializers,
     iconGroup,
-    handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal),
+    handlers,
     interactionPanel: createInteractionPanel(
       orderInfo,
       parentCtx.root,

diff --git a/packages/uikit/src/components/image.ts b/packages/uikit/src/components/image.ts
@@ -41,15 +41,15 @@ import {
   UpdateMatrixWorldProperties,
   VisibilityProperties,
   WithConditionals,
-  computeOutgoingDefaultProperties,
+  computeAnyAncestorsHaveListeners,
+  computeDefaultProperties,
   computedGlobalMatrix,
   computedHandlers,
   computedIsVisible,
   computedMergedProperties,
   createNode,
   keepAspectRatioPropertyTransformer,
   loadResourceWithParams,
-  setupInteractableDecendant,
   setupMatrixWorldUpdate,
   setupPointerEvents,
 } from './utils.js'
@@ -176,6 +176,17 @@ export function createImage(
     scrollbarWidth,
     initializers,
   )
+  const scrollHandlers = computedScrollHandlers(
+    scrollPosition,
+    parentCtx.anyAncestorScrollable,
+    flexState,
+    object,
+    scrollbarWidth,
+    properties,
+    parentCtx.root,
+    initializers,
+  )
+
   const imageMesh = createImageMesh(
     mergedProperties,
     texture,
@@ -188,18 +199,9 @@ export function createImage(
     initializers,
   )
 
-  setupPointerEvents(mergedProperties, imageMesh, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, imageMesh, initializers)
-  const scrollHandlers = computedScrollHandlers(
-    scrollPosition,
-    parentCtx.anyAncestorScrollable,
-    flexState,
-    object,
-    scrollbarWidth,
-    properties,
-    parentCtx.root,
-    initializers,
-  )
+  const handlers = computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers)
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, imageMesh, initializers, false)
 
   const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false)
   setupMatrixWorldUpdate(updateMatrixWorld, false, object, parentCtx.root, globalMatrix, initializers, false)
@@ -209,22 +211,23 @@ export function createImage(
   setupClippedListeners(style, properties, isClipped, initializers)
 
   return Object.assign(flexState, {
-    defaultProperties: computeOutgoingDefaultProperties(mergedProperties),
+    ancestorsHaveListeners,
+    defaultProperties: computeDefaultProperties(mergedProperties),
     globalMatrix,
     scrollPosition,
     isClipped,
     isVisible,
     mergedProperties,
     anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentCtx.anyAncestorScrollable),
     initializers,
-    handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers),
+    handlers,
     interactionPanel: imageMesh,
     clippingRect: computedClippingRect(globalMatrix, flexState, parentCtx.root.pixelSize, parentCtx.clippingRect),
     childrenMatrix,
     node,
     orderInfo,
     root: parentCtx.root,
-  })
+  }) satisfies ParentContext
 }
 
 let imageMaterialConfig: PanelMaterialConfig | undefined

diff --git a/packages/uikit/src/components/input.ts b/packages/uikit/src/components/input.ts
@@ -21,13 +21,12 @@ import {
   UpdateMatrixWorldProperties,
   VisibilityProperties,
   WithConditionals,
-  computeOutgoingDefaultProperties,
+  computeAnyAncestorsHaveListeners,
   computedGlobalMatrix,
   computedHandlers,
   computedIsVisible,
   computedMergedProperties,
   createNode,
-  setupInteractableDecendant,
   setupMatrixWorldUpdate,
   setupPointerEvents,
 } from './utils.js'
@@ -250,9 +249,6 @@ export function createInput(
     initializers,
   )
 
-  setupPointerEvents(mergedProperties, interactionPanel, initializers)
-  setupInteractableDecendant(mergedProperties, parentCtx.root, interactionPanel, initializers)
-
   const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false)
   setupMatrixWorldUpdate(updateMatrixWorld, false, object, parentCtx.root, globalMatrix, initializers, false)
   setupMatrixWorldUpdate(updateMatrixWorld, false, interactionPanel, parentCtx.root, globalMatrix, initializers, true)
@@ -305,6 +301,18 @@ export function createInput(
   })
   const selectionHandlers = computedSelectionHandlers(type, valueSignal, flexState, instancedTextRef, focus, disabled)
 
+  const handlers = computedHandlers(
+    style,
+    properties,
+    defaultProperties,
+    hoveredSignal,
+    activeSignal,
+    selectionHandlers,
+    'text',
+  )
+  const ancestorsHaveListeners = computeAnyAncestorsHaveListeners(parentCtx, handlers)
+  setupPointerEvents(mergedProperties, ancestorsHaveListeners, parentCtx.root, interactionPanel, initializers, false)
+
   return Object.assign(flexState, {
     globalMatrix,
     isClipped,
@@ -317,15 +325,7 @@ export function createInput(
     element,
     node: nodeSignal,
     interactionPanel,
-    handlers: computedHandlers(
-      style,
-      properties,
-      defaultProperties,
-      hoveredSignal,
-      activeSignal,
-      selectionHandlers,
-      'text',
-    ),
+    handlers,
     initializers,
   })
 }