Skip to content

Commit 98aa455

Browse files
bbohlenderbbohlender
committed
fix issues
1 parent 440e672 commit 98aa455

File tree

12 files changed

+49
-56
lines changed

12 files changed

+49
-56
lines changed

‎examples/uikit/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function App() {
3535
const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()
3636

3737
useEffect(() => {
38-
const x = input?.element.peek()
38+
const x = input?.element
3939
if (x == null) {
4040
return
4141
}

‎packages/uikit/src/caret.ts

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { Signal, computed, signal } from '@preact/signals-core'
1+
import { ReadonlySignal, Signal, computed, signal } from '@preact/signals-core'
22
import { Matrix4, Vector2Tuple } from 'three'
33
import { ClippingRect } from './clipping.js'
44
import { computedOrderInfo, ElementType, OrderInfo } from './order.js'
55
import { PanelProperties, setupInstancedPanel } from './panel/instanced-panel.js'
66
import { abortableEffect, ColorRepresentation, computedBorderInset } from './utils.js'
77
import {
88
PanelGroupManager,
9+
PanelGroupProperties,
910
PanelMaterialConfig,
1011
createPanelMaterialConfig,
11-
defaultPanelDependencies,
1212
} from './panel/index.js'
1313
import { MergedProperties, computedInheritableProperty } from './properties/index.js'
1414

@@ -74,17 +74,12 @@ export function createCaret(
7474
caretTransformation: Signal<CaretTransformation | undefined>,
7575
isVisible: Signal<boolean>,
7676
parentOrderInfo: Signal<OrderInfo | undefined>,
77+
parentGroupDeps: ReadonlySignal<Required<PanelGroupProperties>>,
7778
parentClippingRect: Signal<ClippingRect | undefined> | undefined,
7879
panelGroupManager: PanelGroupManager,
7980
abortSignal: AbortSignal,
8081
) {
81-
const orderInfo = computedOrderInfo(
82-
undefined,
83-
'zIndexOffset',
84-
ElementType.Panel,
85-
defaultPanelDependencies,
86-
parentOrderInfo,
87-
)
82+
const orderInfo = computedOrderInfo(undefined, 'zIndexOffset', ElementType.Panel, parentGroupDeps, parentOrderInfo)
8883
const blinkingCaretTransformation = signal<CaretTransformation | undefined>(undefined)
8984
abortableEffect(() => {
9085
const pos = caretTransformation.value
@@ -104,7 +99,7 @@ export function createCaret(
10499
setupInstancedPanel(
105100
propertiesSignal,
106101
orderInfo,
107-
undefined,
102+
parentGroupDeps,
108103
panelGroupManager,
109104
matrix,
110105
computed(() => {

‎packages/uikit/src/components/container.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ export function setupContainer<EM extends ThreeEventMap = ThreeEventMap>(
178178
state.isVisible,
179179
parentCtx.clippingRect,
180180
state.orderInfo,
181+
state.groupDeps,
181182
state.root.panelGroupManager,
182183
state.scrollbarWidth,
183184
abortSignal,

‎packages/uikit/src/components/content.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ export function setupContent<EM extends ThreeEventMap = ThreeEventMap>(
195195
setupInteractionPanel(state.interactionPanel, state.root, state.globalMatrix, state.size, abortSignal)
196196

197197
setupContentContainer(
198+
state.remeasureContent,
198199
state.measuredSize,
199200
state.measuredCenter,
200201
state.mergedProperties,
@@ -209,6 +210,7 @@ export function setupContent<EM extends ThreeEventMap = ThreeEventMap>(
209210
const vectorHelper = new Vector3()
210211

211212
function setupContentContainer(
213+
measureContent: () => void,
212214
measuredSize: Vector3,
213215
measuredCenter: Vector3,
214216
propertiesSignal: Signal<MergedProperties>,
@@ -218,6 +220,7 @@ function setupContentContainer(
218220
contentContainer: Object3D,
219221
abortSignal: AbortSignal,
220222
) {
223+
measureContent()
221224
const depthAlign = computedInheritableProperty(propertiesSignal, 'depthAlign', defaultDepthAlign)
222225
const keepAspectRatio = computedInheritableProperty(propertiesSignal, 'keepAspectRatio', true)
223226
abortableEffect(() => {
@@ -318,7 +321,6 @@ function createMeasureContent(
318321
box3Helper.getCenter(measuredCenter)
319322
root.requestRender()
320323
}
321-
measureContent()
322324
return () => {
323325
const properties = propertiesSignal.peek()
324326
updateRenderProperties(

‎packages/uikit/src/components/image.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
panelGeometry,
2727
PanelProperties,
2828
PanelMaterialConfig,
29+
computedPanelGroupDependencies,
2930
} from '../panel/index.js'
3031
import { WithAllAliases } from '../properties/alias.js'
3132
import { AllOptionalProperties, WithClasses, WithReactive } from '../properties/default.js'
@@ -181,6 +182,7 @@ export function createImageState<EM extends ThreeEventMap = ThreeEventMap>(
181182
isHidden,
182183
isVisible,
183184
orderInfo,
185+
groupDeps: computedPanelGroupDependencies(mergedProperties),
184186
scrollPosition,
185187
scrollbarWidth,
186188
childrenMatrix,
@@ -199,12 +201,7 @@ export function createImageState<EM extends ThreeEventMap = ThreeEventMap>(
199201
handlers,
200202
ancestorsHaveListeners,
201203
interactionPanel: createImageMesh(globalMatrix, parentCtx, orderInfo, parentCtx.root),
202-
clippingRect: computedClippingRect(
203-
componentState.globalMatrix,
204-
componentState,
205-
parentCtx.root.pixelSize,
206-
parentCtx.clippingRect,
207-
),
204+
clippingRect: computedClippingRect(globalMatrix, componentState, parentCtx.root.pixelSize, parentCtx.clippingRect),
208205
}) satisfies ParentContext
209206
}
210207

@@ -234,6 +231,7 @@ export function setupImage<EM extends ThreeEventMap = ThreeEventMap>(
234231
state.isVisible,
235232
parentCtx.clippingRect,
236233
state.orderInfo,
234+
state.groupDeps,
237235
parentCtx.root.panelGroupManager,
238236
state.scrollbarWidth,
239237
abortSignal,
@@ -297,6 +295,7 @@ function createImageMesh(
297295
const mesh = Object.assign(new Mesh<PlaneGeometry, MeshBasicMaterial>(panelGeometry), {
298296
boundingSphere: new Sphere(),
299297
})
298+
mesh.frustumCulled = false
300299
mesh.matrixAutoUpdate = false
301300
mesh.raycast = makeClippedCast(
302301
mesh,

‎packages/uikit/src/components/input.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,12 +151,12 @@ export function createInputState<EM extends ThreeEventMap = ThreeEventMap>(
151151
const isClipped = computedIsClipped(parentCtx.clippingRect, globalMatrix, flexState.size, parentCtx.root.pixelSize)
152152
const isVisible = computedIsVisible(flexState, isClipped, mergedProperties)
153153

154-
const groupDeps = computedPanelGroupDependencies(mergedProperties)
154+
const backgroundGroupDeps = computedPanelGroupDependencies(mergedProperties)
155155
const backgroundOrderInfo = computedOrderInfo(
156156
mergedProperties,
157157
'zIndexOffset',
158158
ElementType.Panel,
159-
groupDeps,
159+
backgroundGroupDeps,
160160
parentCtx.orderInfo,
161161
)
162162

@@ -230,7 +230,7 @@ export function createInputState<EM extends ThreeEventMap = ThreeEventMap>(
230230
globalMatrix,
231231
isClipped,
232232
isVisible,
233-
groupDeps,
233+
backgroundGroupDeps,
234234
backgroundOrderInfo,
235235
orderInfo,
236236
selectionTransformations,
@@ -278,7 +278,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
278278
setupInstancedPanel(
279279
state.mergedProperties,
280280
state.backgroundOrderInfo,
281-
state.groupDeps,
281+
state.backgroundGroupDeps,
282282
parentCtx.root.panelGroupManager,
283283
state.globalMatrix,
284284
state.size,
@@ -296,6 +296,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
296296
state.caretTransformation,
297297
state.isVisible,
298298
state.backgroundOrderInfo,
299+
state.backgroundGroupDeps,
299300
parentCtx.clippingRect,
300301
parentCtx.root.panelGroupManager,
301302
abortSignal,
@@ -307,6 +308,7 @@ export function setupInput<EM extends ThreeEventMap = ThreeEventMap>(
307308
state.selectionTransformations,
308309
state.isVisible,
309310
state.backgroundOrderInfo,
311+
state.backgroundGroupDeps,
310312
parentCtx.clippingRect,
311313
parentCtx.root.panelGroupManager,
312314
abortSignal,

‎packages/uikit/src/components/root.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
computedScrollHandlers,
1919
createScrollState,
2020
setupScroll,
21+
computedGlobalScrollMatrix,
2122
} from '../scroll.js'
2223
import { TransformProperties, setupObjectTransform, computedTransformMatrix } from '../transform.js'
2324
import { alignmentXMap, alignmentYMap, readReactive } from '../utils.js'
@@ -78,8 +79,6 @@ export const DEFAULT_PIXEL_SIZE = 0.01
7879
const vectorHelper = new Vector3()
7980
const planeHelper = new Plane()
8081

81-
const identityMatrix = signal(new Matrix4())
82-
8382
export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
8483
objectRef: { current?: Object3D | null },
8584
pixelSize: Signal<number>,
@@ -130,7 +129,7 @@ export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
130129

131130
const isVisible = computedIsVisible(flexState, undefined, mergedProperties)
132131
const scrollPosition = createScrollPosition()
133-
const childrenMatrix = computed(() => identityMatrix.value)
132+
const childrenMatrix = computedGlobalScrollMatrix(scrollPosition, globalMatrix, pixelSize)
134133
const scrollbarWidth = computedInheritableProperty(mergedProperties, 'scrollbarWidth', 10)
135134

136135
const updateMatrixWorld = computedInheritableProperty(mergedProperties, 'updateMatrixWorld', false)
@@ -177,7 +176,7 @@ export function createRootState<EM extends ThreeEventMap = ThreeEventMap>(
177176
const ancestorsHaveListeners = computedAncestorsHaveListeners(undefined, handlers)
178177

179178
return Object.assign(componentState, {
180-
clippingRect: computedClippingRect(identityMatrix, componentState, ctx.pixelSize, undefined),
179+
clippingRect: computedClippingRect(globalMatrix, componentState, ctx.pixelSize, undefined),
181180
handlers,
182181
ancestorsHaveListeners,
183182
}) satisfies ParentContext
@@ -217,7 +216,7 @@ export function setupRoot<EM extends ThreeEventMap = ThreeEventMap>(
217216
state.orderInfo,
218217
state.groupDeps,
219218
state.root.panelGroupManager,
220-
identityMatrix,
219+
state.globalMatrix,
221220
state.size,
222221
undefined,
223222
state.borderInset,
@@ -232,10 +231,11 @@ export function setupRoot<EM extends ThreeEventMap = ThreeEventMap>(
232231
state.mergedProperties,
233232
state.scrollPosition,
234233
state,
235-
identityMatrix,
234+
state.globalMatrix,
236235
state.isVisible,
237236
undefined,
238237
state.orderInfo,
238+
state.groupDeps,
239239
state.root.panelGroupManager,
240240
state.scrollbarWidth,
241241
abortSignal,

‎packages/uikit/src/components/svg.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ export function setupSvg<EM extends ThreeEventMap = ThreeEventMap>(
237237
state.isVisible,
238238
parentCtx.clippingRect,
239239
state.orderInfo,
240+
state.groupDeps,
240241
parentCtx.root.panelGroupManager,
241242
state.scrollbarWidth,
242243
abortSignal,

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,6 @@ export function computedPanelGroupDependencies(propertiesSignal: Signal<MergedPr
4444
})
4545
}
4646

47-
export const defaultPanelDependencies: Required<PanelGroupProperties> = {
48-
panelMaterialClass: MeshBasicMaterial,
49-
castShadow: false,
50-
receiveShadow: false,
51-
depthWrite: false,
52-
depthTest: true,
53-
renderOrder: 0,
54-
}
55-
5647
export class PanelGroupManager {
5748
private map = new Map<MaterialClass, Map<string, InstancedPanelGroup>>()
5849

@@ -79,7 +70,7 @@ export class PanelGroupManager {
7970
}
8071
}
8172

82-
getGroup(majorIndex: number, properties: Required<PanelGroupProperties> = defaultPanelDependencies) {
73+
getGroup(majorIndex: number, properties: Required<PanelGroupProperties>) {
8374
let groups = this.map.get(properties.panelMaterialClass)
8475
if (groups == null) {
8576
this.map.set(properties.panelMaterialClass, (groups = new Map()))

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export type PanelProperties = {
2525
export function setupInstancedPanel(
2626
propertiesSignal: Signal<MergedProperties>,
2727
orderInfo: Signal<OrderInfo | undefined>,
28-
panelGroupDependencies: Signal<Required<PanelGroupProperties>> | undefined,
28+
panelGroupDependencies: Signal<Required<PanelGroupProperties>>,
2929
panelGroupManager: PanelGroupManager,
3030
matrix: Signal<Matrix4 | undefined>,
3131
size: Signal<Vector2Tuple | undefined>,
@@ -41,7 +41,7 @@ export function setupInstancedPanel(
4141
return
4242
}
4343
const innerAbortController = new AbortController()
44-
const group = panelGroupManager.getGroup(orderInfo.value.majorIndex, panelGroupDependencies?.value)
44+
const group = panelGroupManager.getGroup(orderInfo.value.majorIndex, panelGroupDependencies.value)
4545
new InstancedPanel(
4646
propertiesSignal,
4747
group,

0 commit comments

Comments
 (0)