fix #160

pmndrs · Feb 26, 2025 · 319a4fb · 319a4fb
1 parent bf752c9
commit 319a4fb
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 17 deletions.
diff --git a/packages/uikit/src/caret.ts b/packages/uikit/src/caret.ts
@@ -73,7 +73,13 @@ export function createCaret(
   panelGroupManager: PanelGroupManager,
   initializers: Initializers,
 ) {
-  const orderInfo = computedOrderInfo(undefined, ElementType.Panel, defaultPanelDependencies, parentOrderInfo)
+  const orderInfo = computedOrderInfo(
+    undefined,
+    'zIndexOffset',
+    ElementType.Panel,
+    defaultPanelDependencies,
+    parentOrderInfo,
+  )
   const blinkingCaretPosition = signal<Vector3Tuple | undefined>(undefined)
   initializers.push(() =>
     effect(() => {

diff --git a/packages/uikit/src/components/container.ts b/packages/uikit/src/components/container.ts
@@ -106,7 +106,13 @@ export function createContainer<EM extends ThreeEventMap = ThreeEventMap>(
 
   //instanced panel
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const orderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const orderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,

diff --git a/packages/uikit/src/components/content.ts b/packages/uikit/src/components/content.ts
@@ -114,7 +114,13 @@ export function createContent<EM extends ThreeEventMap = ThreeEventMap>(
 
   //instanced panel
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const backgroundorderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const backgroundorderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,
@@ -132,7 +138,7 @@ export function createContent<EM extends ThreeEventMap = ThreeEventMap>(
     ),
   )
 
-  const orderInfo = computedOrderInfo(undefined, ElementType.Object, undefined, backgroundorderInfo)
+  const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Object, undefined, backgroundorderInfo)
 
   const interactionPanel = createInteractionPanel(
     backgroundorderInfo,

diff --git a/packages/uikit/src/components/custom.ts b/packages/uikit/src/components/custom.ts
@@ -88,7 +88,13 @@ export function createCustomContainer<EM extends ThreeEventMap = ThreeEventMap>(
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
   //instanced panel
-  const orderInfo = computedOrderInfo(mergedProperties, ElementType.Custom, undefined, parentCtx.orderInfo)
+  const orderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Custom,
+    undefined,
+    parentCtx.orderInfo,
+  )
   const clippingPlanes = createGlobalClippingPlanes(parentCtx.root, parentCtx.clippingRect)
 
   initializers.push((subscriptions) => {

diff --git a/packages/uikit/src/components/icon.ts b/packages/uikit/src/components/icon.ts
@@ -105,7 +105,13 @@ export function createIcon<EM extends ThreeEventMap = ThreeEventMap>(
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const backgroundOrderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const backgroundOrderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,
@@ -123,7 +129,7 @@ export function createIcon<EM extends ThreeEventMap = ThreeEventMap>(
     ),
   )
 
-  const orderInfo = computedOrderInfo(undefined, ElementType.Svg, undefined, backgroundOrderInfo)
+  const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Svg, undefined, backgroundOrderInfo)
 
   const clippingPlanes = createGlobalClippingPlanes(parentCtx.root, parentCtx.clippingRect)
   const iconGroup = createIconGroup(

diff --git a/packages/uikit/src/components/image.ts b/packages/uikit/src/components/image.ts
@@ -164,7 +164,13 @@ export function createImage<EM extends ThreeEventMap = ThreeEventMap>(
 
   const isVisible = computedIsVisible(flexState, isHidden, mergedProperties)
 
-  const orderInfo = computedOrderInfo(mergedProperties, ElementType.Image, undefined, parentCtx.orderInfo)
+  const orderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Image,
+    undefined,
+    parentCtx.orderInfo,
+  )
 
   const scrollPosition = createScrollPosition()
   applyScrollPosition(childrenContainer, scrollPosition, parentCtx.root.pixelSize, initializers)

diff --git a/packages/uikit/src/components/input.ts b/packages/uikit/src/components/input.ts
@@ -160,7 +160,13 @@ export function createInput<EM extends ThreeEventMap = ThreeEventMap>(
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const backgroundOrderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const backgroundOrderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,
@@ -206,6 +212,7 @@ export function createInput<EM extends ThreeEventMap = ThreeEventMap>(
   const fontSignal = computedFont(mergedProperties, fontFamilies, parentCtx.root.renderer, initializers)
   const orderInfo = computedOrderInfo(
     undefined,
+    'zIndexOffset',
     ElementType.Text,
     computedGylphGroupDependencies(fontSignal),
     selectionOrderInfo,

diff --git a/packages/uikit/src/components/root.ts b/packages/uikit/src/components/root.ts
@@ -145,7 +145,7 @@ export function createRoot<EM extends ThreeEventMap = ThreeEventMap>(
   applyTransform(ctx, object, globalMatrix, initializers)
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
 
-  const orderInfo = computedOrderInfo(undefined, ElementType.Panel, groupDeps, undefined)
+  const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Panel, groupDeps, undefined)
 
   const panelGroupManager = new PanelGroupManager(pixelSize, ctx, object, initializers)
 

diff --git a/packages/uikit/src/components/svg.ts b/packages/uikit/src/components/svg.ts
@@ -134,7 +134,13 @@ export function createSvg<EM extends ThreeEventMap = ThreeEventMap>(
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const backgroundOrderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const backgroundOrderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,
@@ -152,7 +158,7 @@ export function createSvg<EM extends ThreeEventMap = ThreeEventMap>(
     ),
   )
 
-  const orderInfo = computedOrderInfo(undefined, ElementType.Svg, undefined, backgroundOrderInfo)
+  const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Svg, undefined, backgroundOrderInfo)
 
   const src = computed(() => readReactive(style.value?.src) ?? readReactive(properties.value?.src))
   const svgObject = signal<Object3D | undefined>(undefined)

diff --git a/packages/uikit/src/components/text.ts b/packages/uikit/src/components/text.ts
@@ -99,7 +99,13 @@ export function createText<EM extends ThreeEventMap = ThreeEventMap>(
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
   const groupDeps = computedPanelGroupDependencies(mergedProperties)
-  const backgroundOrderInfo = computedOrderInfo(mergedProperties, ElementType.Panel, groupDeps, parentCtx.orderInfo)
+  const backgroundOrderInfo = computedOrderInfo(
+    mergedProperties,
+    'zIndexOffset',
+    ElementType.Panel,
+    groupDeps,
+    parentCtx.orderInfo,
+  )
   initializers.push((subscriptions) =>
     createInstancedPanel(
       mergedProperties,
@@ -120,6 +126,7 @@ export function createText<EM extends ThreeEventMap = ThreeEventMap>(
   const fontSignal = computedFont(mergedProperties, fontFamilies, parentCtx.root.renderer, initializers)
   const orderInfo = computedOrderInfo(
     undefined,
+    'zIndexOffset',
     ElementType.Text,
     computedGylphGroupDependencies(fontSignal),
     backgroundOrderInfo,

diff --git a/packages/uikit/src/order.ts b/packages/uikit/src/order.ts
@@ -70,14 +70,15 @@ export type ZIndexOffset = { major?: number; minor?: number } | number
 
 export function computedOrderInfo(
   propertiesSignal: Signal<MergedProperties> | undefined,
+  zIndexOffsetKey: string,
   type: ElementType,
   instancedGroupDependencies: Signal<Record<string, any>> | Record<string, any> | undefined,
   parentOrderInfoSignal: Signal<OrderInfo | undefined> | undefined,
 ): Signal<OrderInfo | undefined> {
   const zIndexOffset =
     propertiesSignal == null
       ? undefined
-      : computedInheritableProperty<ZIndexOffset | undefined>(propertiesSignal, 'zIndexOffset', undefined)
+      : computedInheritableProperty<ZIndexOffset | undefined>(propertiesSignal, zIndexOffsetKey, undefined)
   return computed(() => {
     let parentOrderInfo: OrderInfo | undefined
     if (parentOrderInfoSignal == null) {

diff --git a/packages/uikit/src/scroll.ts b/packages/uikit/src/scroll.ts
@@ -5,7 +5,7 @@ import { ColorRepresentation, Initializers, computedBorderInset } from './utils.
 import { ClippingRect } from './clipping.js'
 import { clamp } from 'three/src/math/MathUtils.js'
 import { PanelProperties, createInstancedPanel } from './panel/instanced-panel.js'
-import { ElementType, OrderInfo, computedOrderInfo } from './order.js'
+import { ElementType, OrderInfo, ZIndexOffset, computedOrderInfo } from './order.js'
 import { MergedProperties } from './properties/merged.js'
 import { PanelMaterialConfig, createPanelMaterialConfig } from './panel/panel-material.js'
 import { PanelGroupManager, defaultPanelDependencies } from './panel/instanced-panel-group.js'
@@ -362,6 +362,7 @@ export type ScrollbarBorderSizeProperties = {
 export type ScrollbarProperties = {
   scrollbarOpacity?: number
   scrollbarColor?: ColorRepresentation
+  scrollbarZIndexOffset?: ZIndexOffset
 } & ScrollbarWidthProperties &
   ScrollbarBorderSizeProperties & {
     [Key in Exclude<
@@ -389,7 +390,13 @@ export function createScrollbars(
   scrollbarWidth: Signal<number>,
   initializers: Initializers,
 ): void {
-  const scrollbarOrderInfo = computedOrderInfo(undefined, ElementType.Panel, defaultPanelDependencies, orderInfo)
+  const scrollbarOrderInfo = computedOrderInfo(
+    undefined,
+    'scrollbarZIndexOffset',
+    ElementType.Panel,
+    defaultPanelDependencies,
+    orderInfo,
+  )
 
   const borderInset = computedBorderInset(propertiesSignal, scrollbarBorderPropertyKeys)
   createScrollbar(

diff --git a/packages/uikit/src/selection.ts b/packages/uikit/src/selection.ts
@@ -81,7 +81,13 @@ export function createSelection(
     offset: Signal<Vector2Tuple>
     panelSubscriptions: Subscriptions
   }> = []
-  const orderInfo = computedOrderInfo(undefined, ElementType.Panel, defaultPanelDependencies, prevOrderInfo)
+  const orderInfo = computedOrderInfo(
+    undefined,
+    'zIndexOffset',
+    ElementType.Panel,
+    defaultPanelDependencies,
+    prevOrderInfo,
+  )
   const borderInset = computedBorderInset(propertiesSignal, selectionBorderKeys)
 
   initializers.push(