Skip to content

Commit f74e7e1

Browse files
bbohlenderbbohlender
committed
fix #220: use addUnsafe in instanced panel group; upgrade node version; fix adding internal listeners through properties so they could be overwritten
1 parent 02c6946 commit f74e7e1

File tree

11 files changed

+151
-183
lines changed

11 files changed

+151
-183
lines changed

‎.github/workflows/packages.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jobs:
2020
- name: Setup Node
2121
uses: actions/setup-node@v3
2222
with:
23-
node-version: 20
23+
node-version: 22
2424

2525
- uses: pnpm/action-setup@v2
2626
name: Install pnpm

‎.github/workflows/static.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ jobs:
3131
- name: Setup Node
3232
uses: actions/setup-node@v3
3333
with:
34-
node-version: 20
34+
node-version: 22
3535

3636
- uses: pnpm/action-setup@v2
3737
name: Install pnpm
@@ -115,7 +115,7 @@ jobs:
115115
- name: Setup Node
116116
uses: actions/setup-node@v3
117117
with:
118-
node-version: 20
118+
node-version: 22
119119

120120
- uses: pnpm/action-setup@v2
121121
name: Install pnpm

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This project uses [semantic commits](https://conventionalcommits.org) and [semver](https://semver.org).
44

5-
To get started, make sure you have [Node](https://nodejs.org) and [PNPM](https://pnpm.io/) verson 10 installed. Install dependencies, generate files, and build the libraries with:
5+
To get started, make sure you have [Node](https://nodejs.org) version 22 and [PNPM](https://pnpm.io/) verson 10 installed. Install dependencies, generate files, and build the libraries with:
66

77
```bash
88
pnpm i

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ We provide multiple kits containing **themable pre-styled components**.
6868
| <h3>default</h3> _based on [Shadcn](https://github.com/shadcn-ui/ui)_ | <h3>horizon-kit</h3> _based on [RLDS](https://www.figma.com/de-de/community/file/1509641173090552632/meta-horizon-os-ui-set)_ |
6969
| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
7070
| ![Overview over all default components](./docs/getting-started/default-overview.jpg) | ![Overview over all horizon components](./docs/getting-started/horizon-overview.png) |
71-
| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion) | [View All Components](https://docs.pmnd.rs/uikit/default-kit/avatar) |
71+
| [View All Components](https://docs.pmnd.rs/uikit/default-kit/accordion) | [View All Components](https://docs.pmnd.rs/uikit/horizon-kit/avatar) |
7272
| install via `@react-three/uikit-default` or `@pmndrs/uikit-default` | install via `@react-three/uikit-horizon` or `@pmndrs/uikit-horizon` |
7373

7474
## Migration guides

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"react-dom": "^19",
3434
"three": "0.175.0",
3535
"ts-node": "^10.9.2",
36-
"typescript": "^5.4.5",
36+
"typescript": "^5.7.3",
3737
"typescript-json-schema": "^0.65.1",
3838
"vercel": "^34.1.8",
3939
"vite": "^5.4.14"

‎packages/kits/default/core/src/dialog/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,23 @@ export class Dialog extends Container<DialogOutProperties> {
2828
'*': {
2929
borderColor: colors.border,
3030
},
31-
onPointerMove: (e: any) => e.stopPropagation(),
32-
onPointerEnter: (e: any) => e.stopPropagation(),
33-
onPointerLeave: (e: any) => e.stopPropagation(),
34-
onWheel: (e: any) => e.stopPropagation(),
3531
positionType: 'absolute',
3632
display: computed(() => (this.currentSignal.value ? 'flex' : 'none')),
3733
inset: 0,
3834
zIndex: 50,
3935
backgroundColor: withOpacity('black', 0.8),
4036
alignItems: 'center',
4137
justifyContent: 'center',
42-
onClick: () => {
43-
this.setOpen(false)
44-
},
4538
...config?.defaultOverrides,
4639
},
4740
})
41+
42+
const stopPropagationListener = (e: any) => e.stopPropagation()
43+
this.addEventListener('pointermove', stopPropagationListener)
44+
this.addEventListener('pointerenter', stopPropagationListener)
45+
this.addEventListener('pointerleave', stopPropagationListener)
46+
this.addEventListener('wheel', stopPropagationListener)
47+
this.addEventListener('click', () => this.setOpen(false))
4848
}
4949

5050
setOpen(open: boolean) {

‎packages/kits/default/core/src/slider/index.ts‎

Lines changed: 44 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Container, InProperties, BaseOutProperties, RenderContext } from '@pmndrs/uikit'
1+
import { Container, InProperties, BaseOutProperties, RenderContext, abortableEffect } from '@pmndrs/uikit'
22
import { signal, computed } from '@preact/signals-core'
33
import { colors, componentDefaults } from '../theme.js'
44
import { Object3DEventMap, Vector3 } from 'three'
@@ -49,54 +49,53 @@ export class Slider extends Container<SliderOutProperties> {
4949
height: 8,
5050
width: '100%',
5151
alignItems: 'center',
52-
onPointerDown: computed(() => {
53-
const disabled = this.properties.value.disabled ?? false
54-
return disabled
55-
? undefined
56-
: (e: Object3DEventMap['pointerdown']) => {
57-
if (this.downPointerId != null) {
58-
return
59-
}
60-
this.downPointerId = e.pointerId
61-
this.handleSetValue(e)
62-
if (
63-
'target' in e &&
64-
e.target != null &&
65-
typeof e.target === 'object' &&
66-
'setPointerCapture' in e.target &&
67-
typeof e.target.setPointerCapture === 'function'
68-
) {
69-
e.target.setPointerCapture(e.pointerId)
70-
}
71-
}
72-
}),
73-
onPointerMove: computed(() => {
74-
const disabled = this.properties.value.disabled ?? false
75-
return disabled
76-
? undefined
77-
: (e: Object3DEventMap['pointermove']) => {
78-
if (this.downPointerId != e.pointerId) {
79-
return
80-
}
81-
this.handleSetValue(e)
82-
}
83-
}),
84-
onPointerUp: computed(() => {
85-
const disabled = this.properties.value.disabled ?? false
86-
return disabled
87-
? undefined
88-
: (e: Object3DEventMap['pointerup']) => {
89-
if (this.downPointerId == null) {
90-
return
91-
}
92-
this.downPointerId = undefined
93-
e.stopPropagation?.()
94-
}
95-
}),
9652
...config?.defaultOverrides,
9753
},
9854
})
9955

56+
abortableEffect(() => {
57+
if (this.properties.value.disabled ?? false) {
58+
return
59+
}
60+
const pointerUpListener = (e: Object3DEventMap['pointerup']) => {
61+
if (this.downPointerId == null) {
62+
return
63+
}
64+
this.downPointerId = undefined
65+
e.stopPropagation?.()
66+
}
67+
const pointerDownListener = (e: Object3DEventMap['pointerdown']) => {
68+
if (this.downPointerId != null) {
69+
return
70+
}
71+
this.downPointerId = e.pointerId
72+
this.handleSetValue(e)
73+
if (
74+
'target' in e &&
75+
e.target != null &&
76+
typeof e.target === 'object' &&
77+
'setPointerCapture' in e.target &&
78+
typeof e.target.setPointerCapture === 'function'
79+
) {
80+
e.target.setPointerCapture(e.pointerId)
81+
}
82+
}
83+
const pointerMoveListener = (e: Object3DEventMap['pointermove']) => {
84+
if (this.downPointerId != e.pointerId) {
85+
return
86+
}
87+
this.handleSetValue(e)
88+
}
89+
this.addEventListener('pointermove', pointerMoveListener)
90+
this.addEventListener('pointerup', pointerUpListener)
91+
this.addEventListener('pointerdown', pointerDownListener)
92+
return () => {
93+
this.removeEventListener('pointermove', pointerMoveListener)
94+
this.removeEventListener('pointerup', pointerUpListener)
95+
this.removeEventListener('pointerdown', pointerDownListener)
96+
}
97+
}, this.abortSignal)
98+
10099
const percentage = computed(() => {
101100
const min = this.properties.value.min ?? 0
102101
const max = this.properties.value.max ?? 100

‎packages/kits/default/core/src/video/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,13 @@ export class Video extends Container<VideoOutProperties> {
4242
borderColor: colors.border,
4343
},
4444
positionType: 'relative',
45-
onPointerMove: () => this.onInteract(),
46-
onPointerDown: () => this.onInteract(),
4745
...config?.defaultOverrides,
4846
},
4947
})
5048

49+
this.addEventListener('pointermove', this.onInteract.bind(this))
50+
this.addEventListener('pointerdown', this.onInteract.bind(this))
51+
5152
super.add(
5253
(this.video = new VideoImpl(undefined, undefined, {
5354
defaults: imageDefaults,

‎packages/kits/horizon/core/src/slider/index.ts‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -90,39 +90,40 @@ export class Slider extends Container<SliderOutProperties> {
9090
defaultOverrides: {
9191
width: '100%',
9292
flexDirection: 'column',
93-
//TODO: why does it not work when putting the following listeners on the touch target?
94-
onPointerDown: (e) => {
95-
if (this.downPointerId != null) {
96-
return
97-
}
98-
this.downPointerId = e.pointerId
99-
this.handleSetValue(e)
100-
if (
101-
'target' in e &&
102-
e.target != null &&
103-
typeof e.target === 'object' &&
104-
'setPointerCapture' in e.target &&
105-
typeof e.target.setPointerCapture === 'function'
106-
) {
107-
e.target.setPointerCapture(e.pointerId)
108-
}
109-
},
110-
onPointerMove: (e) => {
111-
if (this.downPointerId != e.pointerId) {
112-
return
113-
}
114-
this.handleSetValue(e)
115-
},
116-
onPointerUp: (e) => {
117-
if (this.downPointerId == null) {
118-
return
119-
}
120-
this.downPointerId = undefined
121-
e.stopPropagation?.()
122-
},
12393
...config?.defaultOverrides,
12494
},
12595
})
96+
//TODO: why does it not work when putting the following listeners on the touch target?
97+
this.addEventListener('pointerdown', (e) => {
98+
if (this.downPointerId != null) {
99+
return
100+
}
101+
this.downPointerId = e.pointerId
102+
this.handleSetValue(e)
103+
if (
104+
'target' in e &&
105+
e.target != null &&
106+
typeof e.target === 'object' &&
107+
'setPointerCapture' in e.target &&
108+
typeof e.target.setPointerCapture === 'function'
109+
) {
110+
e.target.setPointerCapture(e.pointerId)
111+
}
112+
})
113+
this.addEventListener('pointermove', (e) => {
114+
if (this.downPointerId != e.pointerId) {
115+
return
116+
}
117+
this.handleSetValue(e)
118+
})
119+
120+
this.addEventListener('pointerup', (e) => {
121+
if (this.downPointerId == null) {
122+
return
123+
}
124+
this.downPointerId = undefined
125+
e.stopPropagation?.()
126+
})
126127

127128
const format = computed(() => {
128129
let format = this.properties.value.valueFormat ?? 'percentage'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ export class InstancedPanelGroup {
346346
this.mesh.material = this.instanceMaterial
347347
this.mesh.receiveShadow = this.panelGroupProperties.receiveShadow
348348
this.mesh.castShadow = this.panelGroupProperties.castShadow
349-
this.object.add(this.mesh)
349+
this.object.addUnsafe(this.mesh)
350350
}
351351

352352
destroy() {

0 commit comments

Comments
 (0)