fix issues

examples/uikit/src/App.tsx

@@ -35,7 +35,7 @@ export default function App() {
   const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()
 
   useEffect(() => {
-    const x = input?.element.peek()
+    const x = input?.element
     if (x == null) {
       return
     }

packages/uikit/src/caret.ts

@@ -1,14 +1,14 @@
-import { Signal, computed, signal } from '@preact/signals-core'
+import { ReadonlySignal, Signal, computed, signal } from '@preact/signals-core'
 import { Matrix4, Vector2Tuple } from 'three'
 import { ClippingRect } from './clipping.js'
 import { computedOrderInfo, ElementType, OrderInfo } from './order.js'
 import { PanelProperties, setupInstancedPanel } from './panel/instanced-panel.js'
 import { abortableEffect, ColorRepresentation, computedBorderInset } from './utils.js'
 import {
   PanelGroupManager,
+  PanelGroupProperties,
   PanelMaterialConfig,
   createPanelMaterialConfig,
-  defaultPanelDependencies,
 } from './panel/index.js'
 import { MergedProperties, computedInheritableProperty } from './properties/index.js'
 
@@ -74,17 +74,12 @@ export function createCaret(
   caretTransformation: Signal<CaretTransformation | undefined>,
   isVisible: Signal<boolean>,
   parentOrderInfo: Signal<OrderInfo | undefined>,
+  parentGroupDeps: ReadonlySignal<Required<PanelGroupProperties>>,
   parentClippingRect: Signal<ClippingRect | undefined> | undefined,
   panelGroupManager: PanelGroupManager,
   abortSignal: AbortSignal,
 ) {
-  const orderInfo = computedOrderInfo(
-    undefined,
-    'zIndexOffset',
-    ElementType.Panel,
-    defaultPanelDependencies,
-    parentOrderInfo,
-  )
+  const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Panel, parentGroupDeps, parentOrderInfo)
   const blinkingCaretTransformation = signal<CaretTransformation | undefined>(undefined)
   abortableEffect(() => {
     const pos = caretTransformation.value
@@ -104,7 +99,7 @@ export function createCaret(
   setupInstancedPanel(
     propertiesSignal,
     orderInfo,
-    undefined,
+    parentGroupDeps,
     panelGroupManager,
     matrix,
     computed(() => {

packages/uikit/src/components/container.ts

@@ -178,6 +178,7 @@ export function setupContainer<EM extends ThreeEventMap = ThreeEventMap>(
     state.isVisible,
     parentCtx.clippingRect,
     state.orderInfo,
+    state.groupDeps,
     state.root.panelGroupManager,
     state.scrollbarWidth,
     abortSignal,

packages/uikit/src/components/content.ts

@@ -195,6 +195,7 @@ export function setupContent<EM extends ThreeEventMap = ThreeEventMap>(
   setupInteractionPanel(state.interactionPanel, state.root, state.globalMatrix, state.size, abortSignal)
 
   setupContentContainer(
+    state.remeasureContent,
     state.measuredSize,
     state.measuredCenter,
     state.mergedProperties,
@@ -209,6 +210,7 @@ export function setupContent<EM extends ThreeEventMap = ThreeEventMap>(
 const vectorHelper = new Vector3()
 
 function setupContentContainer(
+  measureContent: () => void,
   measuredSize: Vector3,
   measuredCenter: Vector3,
   propertiesSignal: Signal<MergedProperties>,
@@ -218,6 +220,7 @@ function setupContentContainer(
   contentContainer: Object3D,
   abortSignal: AbortSignal,
 ) {
+  measureContent()
   const depthAlign = computedInheritableProperty(propertiesSignal, 'depthAlign', defaultDepthAlign)
   const keepAspectRatio = computedInheritableProperty(propertiesSignal, 'keepAspectRatio', true)
   abortableEffect(() => {
@@ -318,7 +321,6 @@ function createMeasureContent(
     box3Helper.getCenter(measuredCenter)
     root.requestRender()
   }
-  measureContent()
   return () => {
     const properties = propertiesSignal.peek()
     updateRenderProperties(

packages/uikit/src/components/image.ts

@@ -26,6 +26,7 @@ import {
   panelGeometry,
   PanelProperties,
   PanelMaterialConfig,
+  computedPanelGroupDependencies,
 } from '../panel/index.js'
 import { WithAllAliases } from '../properties/alias.js'
 import { AllOptionalProperties, WithClasses, WithReactive } from '../properties/default.js'
@@ -181,6 +182,7 @@ export function createImageState<EM extends ThreeEventMap = ThreeEventMap>(
     isHidden,
     isVisible,
     orderInfo,
+    groupDeps: computedPanelGroupDependencies(mergedProperties),
     scrollPosition,
     scrollbarWidth,
     childrenMatrix,
@@ -199,12 +201,7 @@ export function createImageState<EM extends ThreeEventMap = ThreeEventMap>(
     handlers,
     ancestorsHaveListeners,
     interactionPanel: createImageMesh(globalMatrix, parentCtx, orderInfo, parentCtx.root),
-    clippingRect: computedClippingRect(
-      componentState.globalMatrix,
-      componentState,
-      parentCtx.root.pixelSize,
-      parentCtx.clippingRect,
-    ),
+    clippingRect: computedClippingRect(globalMatrix, componentState, parentCtx.root.pixelSize, parentCtx.clippingRect),
   }) satisfies ParentContext
 }
 
@@ -234,6 +231,7 @@ export function setupImage<EM extends ThreeEventMap = ThreeEventMap>(
     state.isVisible,
     parentCtx.clippingRect,
     state.orderInfo,
+    state.groupDeps,
     parentCtx.root.panelGroupManager,
     state.scrollbarWidth,
     abortSignal,
@@ -297,6 +295,7 @@ function createImageMesh(
   const mesh = Object.assign(new Mesh<PlaneGeometry, MeshBasicMaterial>(panelGeometry), {
     boundingSphere: new Sphere(),
   })
+  mesh.frustumCulled = false
   mesh.matrixAutoUpdate = false
   mesh.raycast = makeClippedCast(
     mesh,

packages/uikit/src/components/input.ts

@@ -151,12 +151,12 @@ export function createInputState<EM extends ThreeEventMap = ThreeEventMap>(
   const isClipped = computedIsClipped(parentCtx.clippingRect, globalMatrix, flexState.size, parentCtx.root.pixelSize)
   const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
 
-  const groupDeps = computedPanelGroupDependencies(mergedProperties)
+  const backgroundGroupDeps = computedPanelGroupDependencies(mergedProperties)
   const backgroundOrderInfo = computedOrderInfo(
     mergedProperties,
     'zIndexOffset',
     ElementType.Panel,
-    groupDeps,
+    backgroundGroupDeps,
     parentCtx.orderInfo,
   )
 
@@ -230,7 +230,7 @@ export function createInputState<EM extends ThreeEventMap = ThreeEventMap>(
     globalMatrix,
     isClipped,
     isVisible,
-    groupDeps,
+    backgroundGroupDeps,
     backgroundOrderInfo,
     orderInfo,
     selectionTransformations,
@@ -278,7 +278,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
   setupInstancedPanel(
     state.mergedProperties,
     state.backgroundOrderInfo,
-    state.groupDeps,
+    state.backgroundGroupDeps,
     parentCtx.root.panelGroupManager,
     state.globalMatrix,
     state.size,
@@ -296,6 +296,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
     state.caretTransformation,
     state.isVisible,
     state.backgroundOrderInfo,
+    state.backgroundGroupDeps,
     parentCtx.clippingRect,
     parentCtx.root.panelGroupManager,
     abortSignal,
@@ -307,6 +308,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
     state.selectionTransformations,
     state.isVisible,
     state.backgroundOrderInfo,
+    state.backgroundGroupDeps,
     parentCtx.clippingRect,
     parentCtx.root.panelGroupManager,
     abortSignal,

packages/uikit/src/components/root.ts

@@ -18,6 +18,7 @@ import {
   computedScrollHandlers,
   createScrollState,
   setupScroll,
+  computedGlobalScrollMatrix,
 } from '../scroll.js'
 import { TransformProperties, setupObjectTransform, computedTransformMatrix } from '../transform.js'
 import { alignmentXMap, alignmentYMap, readReactive } from '../utils.js'
@@ -78,8 +79,6 @@ export const DEFAULT_PIXEL_SIZE = 0.01
 const vectorHelper = new Vector3()
 const planeHelper = new Plane()
 
-const identityMatrix = signal(new Matrix4())
-
 export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
   objectRef: { current?: Object3D | null },
   pixelSize: Signal<number>,
@@ -130,7 +129,7 @@ export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
 
   const isVisible = computedIsVisible(flexState, undefined, mergedProperties)
   const scrollPosition = createScrollPosition()
-  const childrenMatrix = computed(() => identityMatrix.value)
+  const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, globalMatrix, pixelSize)
   const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
 
   const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false)
@@ -177,7 +176,7 @@ export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
   const ancestorsHaveListeners = computedAncestorsHaveListeners(undefined, handlers)
 
   return Object.assign(componentState, {
-    clippingRect: computedClippingRect(identityMatrix, componentState, ctx.pixelSize, undefined),
+    clippingRect: computedClippingRect(globalMatrix, componentState, ctx.pixelSize, undefined),
     handlers,
     ancestorsHaveListeners,
   }) satisfies ParentContext
@@ -217,7 +216,7 @@ export function setupRoot<EM extends ThreeEventMap = ThreeEventMap>(
     state.orderInfo,
     state.groupDeps,
     state.root.panelGroupManager,
-    identityMatrix,
+    state.globalMatrix,
     state.size,
     undefined,
     state.borderInset,
@@ -232,10 +231,11 @@ export function setupRoot<EM extends ThreeEventMap = ThreeEventMap>(
     state.mergedProperties,
     state.scrollPosition,
     state,
-    identityMatrix,
+    state.globalMatrix,
     state.isVisible,
     undefined,
     state.orderInfo,
+    state.groupDeps,
     state.root.panelGroupManager,
     state.scrollbarWidth,
     abortSignal,

packages/uikit/src/components/svg.ts

@@ -237,6 +237,7 @@ export function setupSvg<EM extends ThreeEventMap = ThreeEventMap>(
     state.isVisible,
     parentCtx.clippingRect,
     state.orderInfo,
+    state.groupDeps,
     parentCtx.root.panelGroupManager,
     state.scrollbarWidth,
     abortSignal,

packages/uikit/src/panel/instanced-panel-group.ts

@@ -44,15 +44,6 @@ export function computedPanelGroupDependencies(propertiesSignal: Signal<MergedPr
   })
 }
 
-export const defaultPanelDependencies: Required<PanelGroupProperties> = {
-  panelMaterialClass: MeshBasicMaterial,
-  castShadow: false,
-  receiveShadow: false,
-  depthWrite: false,
-  depthTest: true,
-  renderOrder: 0,
-}
-
 export class PanelGroupManager {
   private map = new Map<MaterialClass, Map<string, InstancedPanelGroup>>()
 
@@ -79,7 +70,7 @@ export class PanelGroupManager {
     }
   }
 
-  getGroup(majorIndex: number, properties: Required<PanelGroupProperties> = defaultPanelDependencies) {
+  getGroup(majorIndex: number, properties: Required<PanelGroupProperties>) {
     let groups = this.map.get(properties.panelMaterialClass)
     if (groups == null) {
       this.map.set(properties.panelMaterialClass, (groups = new Map()))

packages/uikit/src/panel/instanced-panel.ts

@@ -25,7 +25,7 @@ export type PanelProperties = {
 export function setupInstancedPanel(
   propertiesSignal: Signal<MergedProperties>,
   orderInfo: Signal<OrderInfo | undefined>,
-  panelGroupDependencies: Signal<Required<PanelGroupProperties>> | undefined,
+  panelGroupDependencies: Signal<Required<PanelGroupProperties>>,
   panelGroupManager: PanelGroupManager,
   matrix: Signal<Matrix4 | undefined>,
   size: Signal<Vector2Tuple | undefined>,
@@ -41,7 +41,7 @@ export function setupInstancedPanel(
       return
     }
     const innerAbortController = new AbortController()
-    const group = panelGroupManager.getGroup(orderInfo.value.majorIndex, panelGroupDependencies?.value)
+    const group = panelGroupManager.getGroup(orderInfo.value.majorIndex, panelGroupDependencies.value)
     new InstancedPanel(
       propertiesSignal,
       group,

packages/uikit/src/scroll.ts

@@ -8,7 +8,11 @@ import { PanelProperties, setupInstancedPanel } from './panel/instanced-panel.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'
+import {
+  computedPanelGroupDependencies,
+  PanelGroupManager,
+  PanelGroupProperties,
+} from './panel/instanced-panel-group.js'
 import { ParentContext, RootContext } from './context.js'
 import { ScrollListeners } from './listeners.js'
 import { EventHandlers, ThreeMouseEvent, ThreePointerEvent } from './events.js'
@@ -404,7 +408,8 @@ export function setupScrollbars(
   globalMatrix: Signal<Matrix4 | undefined>,
   isVisible: Signal<boolean>,
   parentClippingRect: Signal<ClippingRect | undefined> | undefined,
-  orderInfo: Signal<OrderInfo | undefined>,
+  prevOrderInfo: Signal<OrderInfo | undefined>,
+  prevPanelDeps: ReadonlySignal<Required<PanelGroupProperties>>,
   panelGroupManager: PanelGroupManager,
   scrollbarWidth: Signal<number>,
   abortSignal: AbortSignal,
@@ -413,8 +418,8 @@ export function setupScrollbars(
     undefined,
     'scrollbarZIndexOffset',
     ElementType.Panel,
-    defaultPanelDependencies,
-    orderInfo,
+    prevPanelDeps,
+    prevOrderInfo,
   )
 
   const borderInset = computedBorderInset(propertiesSignal, scrollbarBorderPropertyKeys)
@@ -427,6 +432,7 @@ export function setupScrollbars(
     isVisible,
     parentClippingRect,
     scrollbarOrderInfo,
+    prevPanelDeps,
     panelGroupManager,
     scrollbarWidth,
     borderInset,
@@ -441,6 +447,7 @@ export function setupScrollbars(
     isVisible,
     parentClippingRect,
     scrollbarOrderInfo,
+    prevPanelDeps,
     panelGroupManager,
     scrollbarWidth,
     borderInset,
@@ -479,6 +486,7 @@ function setupScrollbar(
   isVisible: Signal<boolean>,
   parentClippingRect: Signal<ClippingRect | undefined> | undefined,
   orderInfo: Signal<OrderInfo | undefined>,
+  groupDeps: ReadonlySignal<Required<PanelGroupProperties>>,
   panelGroupManager: PanelGroupManager,
   scrollbarWidth: Signal<number>,
   borderSize: ReadonlySignal<Inset>,
@@ -500,7 +508,7 @@ function setupScrollbar(
   setupInstancedPanel(
     propertiesSignal,
     orderInfo,
-    undefined,
+    groupDeps,
     panelGroupManager,
     globalMatrix,
     scrollbarSize,