@dcl/react-ecs 7.12.3-19272644543.commit-c9229e1 → 7.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Button/index.js +2 -2
- package/dist/components/Dropdown/index.js +2 -10
- package/dist/components/Input/index.js +2 -10
- package/dist/components/Label/index.js +3 -13
- package/dist/components/Label/types.d.ts +0 -4
- package/dist/components/listeners/types.d.ts +6 -37
- package/dist/components/listeners/types.js +1 -9
- package/dist/components/uiBackground/types.d.ts +1 -12
- package/dist/components/uiBackground/utils.js +0 -8
- package/dist/components/uiTransform/index.d.ts +1 -1
- package/dist/components/uiTransform/index.js +3 -6
- package/dist/components/uiTransform/types.d.ts +0 -12
- package/dist/components/uiTransform/utils.js +0 -37
- package/dist/react-ecs.d.ts +6 -14
- package/dist/reconciler/index.d.ts +3 -4
- package/dist/reconciler/index.js +44 -59
- package/dist/reconciler/utils.js +0 -8
- package/dist/system.d.ts +1 -2
- package/dist/system.js +1 -16
- package/package.json +3 -3
|
@@ -29,7 +29,7 @@ function getButtonProps(props) {
|
|
|
29
29
|
*/
|
|
30
30
|
/* @__PURE__ */
|
|
31
31
|
export function Button(props) {
|
|
32
|
-
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave,
|
|
32
|
+
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
|
|
33
33
|
const buttonProps = getButtonProps(props);
|
|
34
34
|
const uiBackgroundProps = parseUiBackground({
|
|
35
35
|
...buttonProps.uiBackground,
|
|
@@ -54,5 +54,5 @@ export function Button(props) {
|
|
|
54
54
|
if (uiBackgroundProps && uiBackgroundProps.color)
|
|
55
55
|
uiBackgroundProps.color.a /= 2;
|
|
56
56
|
}
|
|
57
|
-
return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave,
|
|
57
|
+
return (ReactEcs.createElement("entity", { onMouseDown: !!props.disabled ? undefined : onMouseDown, onMouseUp: !!props.disabled ? undefined : onMouseUp, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
|
|
58
58
|
}
|
|
@@ -34,7 +34,7 @@ function parseUiDropdown(props) {
|
|
|
34
34
|
*/
|
|
35
35
|
/* @__PURE__ */
|
|
36
36
|
export function Dropdown(props) {
|
|
37
|
-
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave,
|
|
37
|
+
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
|
|
38
38
|
const dropdownProps = parseUiDropdown(otherProps);
|
|
39
39
|
const commonProps = parseProps({
|
|
40
40
|
uiTransform,
|
|
@@ -42,15 +42,7 @@ export function Dropdown(props) {
|
|
|
42
42
|
onMouseDown,
|
|
43
43
|
onMouseUp,
|
|
44
44
|
onMouseEnter,
|
|
45
|
-
onMouseLeave
|
|
46
|
-
onMouseDrag,
|
|
47
|
-
onMouseDragLocked,
|
|
48
|
-
onMouseDragEnd,
|
|
49
|
-
onInputDown,
|
|
50
|
-
onInputUp,
|
|
51
|
-
onInputDrag,
|
|
52
|
-
onInputDragLocked,
|
|
53
|
-
onInputDragEnd
|
|
45
|
+
onMouseLeave
|
|
54
46
|
});
|
|
55
47
|
return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
|
|
56
48
|
}
|
|
@@ -35,7 +35,7 @@ function parseUiInput(props) {
|
|
|
35
35
|
* @category Component
|
|
36
36
|
*/ /* @__PURE__ */
|
|
37
37
|
export function Input(props) {
|
|
38
|
-
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave,
|
|
38
|
+
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...otherProps } = props;
|
|
39
39
|
const inputProps = parseUiInput(otherProps);
|
|
40
40
|
const commonProps = parseProps({
|
|
41
41
|
uiTransform,
|
|
@@ -43,15 +43,7 @@ export function Input(props) {
|
|
|
43
43
|
onMouseDown,
|
|
44
44
|
onMouseUp,
|
|
45
45
|
onMouseEnter,
|
|
46
|
-
onMouseLeave
|
|
47
|
-
onMouseDrag,
|
|
48
|
-
onMouseDragLocked,
|
|
49
|
-
onMouseDragEnd,
|
|
50
|
-
onInputDown,
|
|
51
|
-
onInputUp,
|
|
52
|
-
onInputDrag,
|
|
53
|
-
onInputDragLocked,
|
|
54
|
-
onInputDragEnd
|
|
46
|
+
onMouseLeave
|
|
55
47
|
});
|
|
56
48
|
return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
|
|
57
49
|
}
|
|
@@ -16,22 +16,14 @@ export { scaleFontSize } from './utils';
|
|
|
16
16
|
*/
|
|
17
17
|
/* @__PURE__ */
|
|
18
18
|
export function Label(props) {
|
|
19
|
-
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave,
|
|
19
|
+
const { uiTransform, uiBackground, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, ...uiTextProps } = props;
|
|
20
20
|
const commonProps = parseProps({
|
|
21
21
|
uiTransform,
|
|
22
22
|
uiBackground,
|
|
23
23
|
onMouseDown,
|
|
24
24
|
onMouseUp,
|
|
25
25
|
onMouseEnter,
|
|
26
|
-
onMouseLeave
|
|
27
|
-
onMouseDrag,
|
|
28
|
-
onMouseDragLocked,
|
|
29
|
-
onMouseDragEnd,
|
|
30
|
-
onInputDown,
|
|
31
|
-
onInputUp,
|
|
32
|
-
onInputDrag,
|
|
33
|
-
onInputDragLocked,
|
|
34
|
-
onInputDragEnd
|
|
26
|
+
onMouseLeave
|
|
35
27
|
});
|
|
36
28
|
const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
|
|
37
29
|
const uiText = {
|
|
@@ -39,9 +31,7 @@ export function Label(props) {
|
|
|
39
31
|
...getFont(font),
|
|
40
32
|
...getTextAlign(textAlign),
|
|
41
33
|
...getFontSize(fontSize),
|
|
42
|
-
...getTextWrap(textWrap)
|
|
43
|
-
outlineWidth: props.outlineWidth,
|
|
44
|
-
outlineColor: props.outlineColor
|
|
34
|
+
...getTextWrap(textWrap)
|
|
45
35
|
};
|
|
46
36
|
return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
|
|
47
37
|
}
|
|
@@ -15,10 +15,6 @@ export interface UiLabelProps {
|
|
|
15
15
|
textAlign?: TextAlignType | undefined;
|
|
16
16
|
/** Label font type. @defaultValue 'sans-serif' */
|
|
17
17
|
font?: UiFontType | undefined;
|
|
18
|
-
/** Outline width of the text. @defaultValue 0 */
|
|
19
|
-
outlineWidth?: number | undefined;
|
|
20
|
-
/** Outline color of the text. @defaultValue `{ r: 0, g: 0, b: 0, a: 1 }` */
|
|
21
|
-
outlineColor?: Color4 | undefined;
|
|
22
18
|
/** Behaviour when text reached. @defaultValue 'wrap' */
|
|
23
19
|
textWrap?: UiTextWrapType | undefined;
|
|
24
20
|
}
|
|
@@ -1,50 +1,19 @@
|
|
|
1
|
-
import { EventSystemCallback, InputAction } from '@dcl/ecs';
|
|
2
1
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* @public @deprecated This type is no longer used in the sdk api, EventSystemCallback is
|
|
6
|
-
* used for listeners instead
|
|
7
|
-
*/
|
|
8
|
-
export type Callback = () => void;
|
|
9
|
-
/**
|
|
10
|
-
* a record object mapping `InputAction`s to functions.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* onInputDown={{
|
|
14
|
-
* [InputAction.IA_PRIMARY]: (eventData) => { console.log("primary") },
|
|
15
|
-
* [InputAction.IA_SECONDARY]: () => { console.log("secondary") },
|
|
16
|
-
* }}
|
|
17
|
-
*
|
|
2
|
+
* Callback function to be triggered on a specified event
|
|
18
3
|
* @public
|
|
19
4
|
*/
|
|
20
|
-
export type
|
|
5
|
+
export type Callback = () => void;
|
|
21
6
|
/**
|
|
22
7
|
* User key event Listeners
|
|
23
8
|
* @public
|
|
24
9
|
*/
|
|
25
10
|
export type Listeners = {
|
|
26
11
|
/** triggered on mouse down event */
|
|
27
|
-
onMouseDown?:
|
|
12
|
+
onMouseDown?: Callback;
|
|
28
13
|
/** triggered on mouse up event */
|
|
29
|
-
onMouseUp?:
|
|
14
|
+
onMouseUp?: Callback;
|
|
30
15
|
/** triggered on mouse hover event */
|
|
31
|
-
onMouseEnter?:
|
|
16
|
+
onMouseEnter?: Callback;
|
|
32
17
|
/** triggered on mouse leave event */
|
|
33
|
-
onMouseLeave?:
|
|
34
|
-
/** triggered on mouse drag event */
|
|
35
|
-
onMouseDrag?: EventSystemCallback;
|
|
36
|
-
/** triggered on mouse drag event */
|
|
37
|
-
onMouseDragLocked?: EventSystemCallback;
|
|
38
|
-
/** triggered on mouse drag event */
|
|
39
|
-
onMouseDragEnd?: EventSystemCallback;
|
|
40
|
-
/** triggered on input down event */
|
|
41
|
-
onInputDown?: MultiCallback;
|
|
42
|
-
/** triggered on input up event */
|
|
43
|
-
onInputUp?: MultiCallback;
|
|
44
|
-
/** triggered on input drag event */
|
|
45
|
-
onInputDrag?: MultiCallback;
|
|
46
|
-
/** triggered on input drag event */
|
|
47
|
-
onInputDragLocked?: MultiCallback;
|
|
48
|
-
/** triggered on input drag event */
|
|
49
|
-
onInputDragEnd?: MultiCallback;
|
|
18
|
+
onMouseLeave?: Callback;
|
|
50
19
|
};
|
|
@@ -2,15 +2,7 @@ const listeners = {
|
|
|
2
2
|
onMouseDown: undefined,
|
|
3
3
|
onMouseUp: undefined,
|
|
4
4
|
onMouseEnter: undefined,
|
|
5
|
-
onMouseLeave: undefined
|
|
6
|
-
onMouseDrag: undefined,
|
|
7
|
-
onMouseDragLocked: undefined,
|
|
8
|
-
onMouseDragEnd: undefined,
|
|
9
|
-
onInputDown: undefined,
|
|
10
|
-
onInputUp: undefined,
|
|
11
|
-
onInputDrag: undefined,
|
|
12
|
-
onInputDragLocked: undefined,
|
|
13
|
-
onInputDragEnd: undefined
|
|
5
|
+
onMouseLeave: undefined
|
|
14
6
|
};
|
|
15
7
|
const listenersKey = Object.keys(listeners);
|
|
16
8
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BorderRect
|
|
1
|
+
import { BorderRect } from '@dcl/ecs';
|
|
2
2
|
import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
|
|
3
3
|
/**
|
|
4
4
|
* @public
|
|
@@ -15,8 +15,6 @@ export interface UiBackgroundProps {
|
|
|
15
15
|
uvs?: number[];
|
|
16
16
|
/** AvatarTexture for the background */
|
|
17
17
|
avatarTexture?: UiAvatarTexture;
|
|
18
|
-
/** VideoTexture for the background */
|
|
19
|
-
videoTexture?: UiVideoTexture;
|
|
20
18
|
/** Texture for the background */
|
|
21
19
|
texture?: UiTexture;
|
|
22
20
|
}
|
|
@@ -29,15 +27,6 @@ export interface UiAvatarTexture {
|
|
|
29
27
|
wrapMode?: TextureWrapType;
|
|
30
28
|
filterMode?: TextureFilterType;
|
|
31
29
|
}
|
|
32
|
-
/**
|
|
33
|
-
* Texture
|
|
34
|
-
* @public
|
|
35
|
-
*/
|
|
36
|
-
export interface UiVideoTexture {
|
|
37
|
-
videoPlayerEntity: Entity;
|
|
38
|
-
wrapMode?: TextureWrapType;
|
|
39
|
-
filterMode?: TextureFilterType;
|
|
40
|
-
}
|
|
41
30
|
/**
|
|
42
31
|
* Texture
|
|
43
32
|
* @public
|
|
@@ -30,14 +30,6 @@ export function getTexture(props) {
|
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
if (props.videoTexture) {
|
|
34
|
-
return {
|
|
35
|
-
tex: {
|
|
36
|
-
$case: 'videoTexture',
|
|
37
|
-
videoTexture: parseTexture(props.videoTexture)
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
33
|
return undefined;
|
|
42
34
|
}
|
|
43
35
|
function parseTexture(texture) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth,
|
|
1
|
+
import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, parsePosition, parseSize } from './utils';
|
|
2
2
|
/**
|
|
3
3
|
* @internal
|
|
4
4
|
*/
|
|
@@ -60,7 +60,7 @@ const defaultUiTransform = {
|
|
|
60
60
|
*/
|
|
61
61
|
/* @__PURE__ */
|
|
62
62
|
export function parseUiTransform(props = {}) {
|
|
63
|
-
const {
|
|
63
|
+
const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, ...otherProps } = props;
|
|
64
64
|
return {
|
|
65
65
|
...defaultUiTransform,
|
|
66
66
|
...otherProps,
|
|
@@ -86,9 +86,6 @@ export function parseUiTransform(props = {}) {
|
|
|
86
86
|
...(flexWrap && getFlexWrap(flexWrap)),
|
|
87
87
|
...(borderRadius && parseBorderRadius(borderRadius)),
|
|
88
88
|
...(borderWidth && parseBorderWidth(borderWidth)),
|
|
89
|
-
...(borderColor && parseBorderColor(borderColor))
|
|
90
|
-
...(scrollPosition && getScrollPosition(scrollPosition)),
|
|
91
|
-
...(scrollVisible && getScrollVisible(scrollVisible)),
|
|
92
|
-
...(zIndex && { zIndex })
|
|
89
|
+
...(borderColor && parseBorderColor(borderColor))
|
|
93
90
|
};
|
|
94
91
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
|
|
2
|
-
import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen';
|
|
3
2
|
import { ScaleUnit } from '../types';
|
|
4
3
|
/**
|
|
5
4
|
* unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
|
|
@@ -74,11 +73,6 @@ export type PositionType = 'absolute' | 'relative';
|
|
|
74
73
|
* The pointer filter property determines if the ui element blocks the pointer or not (elements with pointer events always block the pointer regardless of this property)
|
|
75
74
|
*/
|
|
76
75
|
export type PointerFilterType = 'none' | 'block';
|
|
77
|
-
/**
|
|
78
|
-
* @public
|
|
79
|
-
* The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
|
|
80
|
-
*/
|
|
81
|
-
export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';
|
|
82
76
|
/**
|
|
83
77
|
* Layout props to position things in the canvas
|
|
84
78
|
* @public
|
|
@@ -135,12 +129,6 @@ export interface UiTransformProps {
|
|
|
135
129
|
borderWidth?: Partial<Position> | PositionUnit;
|
|
136
130
|
/** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
|
|
137
131
|
opacity?: number;
|
|
138
|
-
/** A reference value to identify the element, default empty */
|
|
139
|
-
elementId?: string;
|
|
140
|
-
/** default position=(0,0) if it aplies, a vector or a reference-id */
|
|
141
|
-
scrollPosition?: Vector2 | string;
|
|
142
|
-
/** default ShowScrollBar.SSB_BOTH */
|
|
143
|
-
scrollVisible?: ScrollVisibleType;
|
|
144
132
|
/** default 0 */
|
|
145
133
|
zIndex?: number;
|
|
146
134
|
}
|
|
@@ -241,40 +241,3 @@ const parsePointerFilter = {
|
|
|
241
241
|
none: 0 /* PointerFilterMode.PFM_NONE */,
|
|
242
242
|
block: 1 /* PointerFilterMode.PFM_BLOCK */
|
|
243
243
|
};
|
|
244
|
-
/**
|
|
245
|
-
* @internal
|
|
246
|
-
*/
|
|
247
|
-
export function getScrollPosition(scrollPosition) {
|
|
248
|
-
if (typeof scrollPosition === 'string') {
|
|
249
|
-
return {
|
|
250
|
-
scrollPosition: {
|
|
251
|
-
value: {
|
|
252
|
-
$case: 'reference',
|
|
253
|
-
reference: scrollPosition
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
};
|
|
257
|
-
}
|
|
258
|
-
else {
|
|
259
|
-
return {
|
|
260
|
-
scrollPosition: {
|
|
261
|
-
value: {
|
|
262
|
-
$case: 'position',
|
|
263
|
-
position: scrollPosition
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
};
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
const parseScrollVisible = {
|
|
270
|
-
both: 0 /* ShowScrollBar.SSB_BOTH */,
|
|
271
|
-
hidden: 3 /* ShowScrollBar.SSB_HIDDEN */,
|
|
272
|
-
horizontal: 2 /* ShowScrollBar.SSB_ONLY_HORIZONTAL */,
|
|
273
|
-
vertical: 1 /* ShowScrollBar.SSB_ONLY_VERTICAL */
|
|
274
|
-
};
|
|
275
|
-
/**
|
|
276
|
-
* @internal
|
|
277
|
-
*/
|
|
278
|
-
export function getScrollVisible(scrollVisible) {
|
|
279
|
-
return { scrollVisible: parseScrollVisible[scrollVisible] };
|
|
280
|
-
}
|
package/dist/react-ecs.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown
|
|
2
|
-
import {
|
|
1
|
+
import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown } from '@dcl/ecs';
|
|
2
|
+
import { Callback, Key } from './components';
|
|
3
3
|
/**
|
|
4
4
|
* @public
|
|
5
5
|
*/
|
|
@@ -18,18 +18,10 @@ export type EntityComponents = {
|
|
|
18
18
|
uiBackground: PBUiBackground;
|
|
19
19
|
uiInput: PBUiInput;
|
|
20
20
|
uiDropdown: PBUiDropdown;
|
|
21
|
-
onMouseDown:
|
|
22
|
-
onMouseUp:
|
|
23
|
-
onMouseEnter:
|
|
24
|
-
onMouseLeave:
|
|
25
|
-
onMouseDrag: EventSystemCallback;
|
|
26
|
-
onMouseDragLocked: EventSystemCallback;
|
|
27
|
-
onMouseDragEnd: EventSystemCallback;
|
|
28
|
-
onInputDown: MultiCallback;
|
|
29
|
-
onInputUp: MultiCallback;
|
|
30
|
-
onInputDrag: MultiCallback;
|
|
31
|
-
onInputDragLocked: MultiCallback;
|
|
32
|
-
onInputDragEnd: MultiCallback;
|
|
21
|
+
onMouseDown: Callback;
|
|
22
|
+
onMouseUp: Callback;
|
|
23
|
+
onMouseEnter: Callback;
|
|
24
|
+
onMouseLeave: Callback;
|
|
33
25
|
};
|
|
34
26
|
/**
|
|
35
27
|
* @hidden
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
|
|
2
2
|
import { ReactEcs } from '../react-ecs';
|
|
3
|
-
export
|
|
4
|
-
update: (component: ReactEcs.JSX.ReactNode) =>
|
|
3
|
+
export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem): {
|
|
4
|
+
update: (component: ReactEcs.JSX.ReactNode) => number;
|
|
5
5
|
getEntities: () => Entity[];
|
|
6
|
-
}
|
|
7
|
-
export declare function createReconciler(engine: Pick<IEngine, 'getComponent' | 'addEntity' | 'removeEntity' | 'defineComponentFromSchema' | 'getEntitiesWith'>, pointerEvents: PointerEventsSystem, rootEntity: Entity | undefined): DclReconciler;
|
|
6
|
+
};
|
package/dist/reconciler/index.js
CHANGED
|
@@ -3,11 +3,21 @@ import Reconciler from 'react-reconciler';
|
|
|
3
3
|
import { isListener } from '../components';
|
|
4
4
|
import { CANVAS_ROOT_ENTITY } from '../components/uiTransform';
|
|
5
5
|
import { componentKeys, isNotUndefined, noopConfig, propsChanged } from './utils';
|
|
6
|
-
|
|
6
|
+
function getPointerEnum(pointerKey) {
|
|
7
|
+
const pointers = {
|
|
8
|
+
onMouseDown: 1 /* PointerEventType.PET_DOWN */,
|
|
9
|
+
onMouseUp: 0 /* PointerEventType.PET_UP */,
|
|
10
|
+
onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
|
|
11
|
+
onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
|
|
12
|
+
};
|
|
13
|
+
return pointers[pointerKey];
|
|
14
|
+
}
|
|
15
|
+
export function createReconciler(engine, pointerEvents) {
|
|
7
16
|
// Store all the entities so when we destroy the UI we can also destroy them
|
|
8
17
|
const entities = new Set();
|
|
9
18
|
// Store the onChange callbacks to be runned every time a Result has changed
|
|
10
19
|
const changeEvents = new Map();
|
|
20
|
+
const clickEvents = new Map();
|
|
11
21
|
// Initialize components
|
|
12
22
|
const UiTransform = components.UiTransform(engine);
|
|
13
23
|
const UiText = components.UiText(engine);
|
|
@@ -16,8 +26,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
16
26
|
const UiInputResult = components.UiInputResult(engine);
|
|
17
27
|
const UiDropdown = components.UiDropdown(engine);
|
|
18
28
|
const UiDropdownResult = components.UiDropdownResult(engine);
|
|
19
|
-
const UiScrollResult = components.UiScrollResult(engine);
|
|
20
|
-
const Transform = components.Transform(engine);
|
|
21
29
|
// Component ID Helper
|
|
22
30
|
const getComponentId = {
|
|
23
31
|
uiTransform: UiTransform.componentId,
|
|
@@ -26,15 +34,22 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
26
34
|
uiInput: UiInput.componentId,
|
|
27
35
|
uiDropdown: UiDropdown.componentId
|
|
28
36
|
};
|
|
37
|
+
function pointerEventCallback(entity, pointerEvent) {
|
|
38
|
+
const callback = clickEvents.get(entity)?.get(pointerEvent);
|
|
39
|
+
if (callback)
|
|
40
|
+
callback();
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
29
43
|
function updateTree(instance, props) {
|
|
30
44
|
upsertComponent(instance, props, 'uiTransform');
|
|
31
45
|
}
|
|
32
46
|
function upsertListener(instance, update) {
|
|
33
47
|
if (update.type === 'delete' || !update.props) {
|
|
34
|
-
|
|
48
|
+
clickEvents.get(instance.entity)?.delete(getPointerEnum(update.component));
|
|
49
|
+
if (update.component === 'onMouseDown') {
|
|
35
50
|
pointerEvents.removeOnPointerDown(instance.entity);
|
|
36
51
|
}
|
|
37
|
-
else if (update.component === 'onMouseUp'
|
|
52
|
+
else if (update.component === 'onMouseUp') {
|
|
38
53
|
pointerEvents.removeOnPointerUp(instance.entity);
|
|
39
54
|
}
|
|
40
55
|
else if (update.component === 'onMouseEnter') {
|
|
@@ -43,57 +58,32 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
43
58
|
else if (update.component === 'onMouseLeave') {
|
|
44
59
|
pointerEvents.removeOnPointerHoverLeave(instance.entity);
|
|
45
60
|
}
|
|
46
|
-
else if (update.component === 'onMouseDrag' || update.component === 'onInputDrag') {
|
|
47
|
-
pointerEvents.removeOnPointerDrag(instance.entity);
|
|
48
|
-
}
|
|
49
|
-
else if (update.component === 'onMouseDragLocked' || update.component === 'onInputDragLocked') {
|
|
50
|
-
pointerEvents.removeOnPointerDragLocked(instance.entity);
|
|
51
|
-
}
|
|
52
|
-
else if (update.component === 'onMouseDragEnd' || update.component === 'onInputDragEnd') {
|
|
53
|
-
pointerEvents.removeOnPointerDragEnd(instance.entity);
|
|
54
|
-
}
|
|
55
61
|
return;
|
|
56
62
|
}
|
|
57
63
|
if (update.props) {
|
|
58
|
-
const
|
|
64
|
+
const pointerEvent = getPointerEnum(update.component);
|
|
65
|
+
const entityEvent = clickEvents.get(instance.entity) || clickEvents.set(instance.entity, new Map()).get(instance.entity);
|
|
66
|
+
const alreadyHasPointerEvent = entityEvent.get(pointerEvent);
|
|
67
|
+
entityEvent.set(pointerEvent, update.props);
|
|
68
|
+
if (alreadyHasPointerEvent)
|
|
69
|
+
return;
|
|
70
|
+
const pointerEventSystem = update.component === 'onMouseDown'
|
|
59
71
|
? pointerEvents.onPointerDown
|
|
60
|
-
: update.component === 'onMouseUp'
|
|
72
|
+
: update.component === 'onMouseUp'
|
|
61
73
|
? pointerEvents.onPointerUp
|
|
62
74
|
: update.component === 'onMouseEnter'
|
|
63
75
|
? pointerEvents.onPointerHoverEnter
|
|
64
|
-
: update.component === 'onMouseLeave'
|
|
65
|
-
? pointerEvents.onPointerHoverLeave
|
|
66
|
-
: update.component === 'onMouseDrag' || update.component === 'onInputDrag'
|
|
67
|
-
? pointerEvents.onPointerDrag
|
|
68
|
-
: update.component === 'onMouseDragLocked' || update.component === 'onInputDragLocked'
|
|
69
|
-
? pointerEvents.onPointerDragLocked
|
|
70
|
-
: (update.component === 'onMouseDragEnd' || update.component === 'onInputDragEnd') &&
|
|
71
|
-
pointerEvents.onPointerDragEnd;
|
|
76
|
+
: update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
|
|
72
77
|
if (pointerEventSystem) {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}, update.props);
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
// force the right overload (the single arg version doesn't exist for onPointerHoverEnter or onPointerHoverLeave,
|
|
86
|
-
// but we don't have onInputXXX components for those)
|
|
87
|
-
;
|
|
88
|
-
pointerEventSystem({
|
|
89
|
-
entity: instance.entity,
|
|
90
|
-
optsList: Object.entries(update.props).map(([button, cb]) => ({
|
|
91
|
-
button: Number(button),
|
|
92
|
-
showFeedback: true,
|
|
93
|
-
cb
|
|
94
|
-
}))
|
|
95
|
-
});
|
|
96
|
-
}
|
|
78
|
+
pointerEventSystem({
|
|
79
|
+
entity: instance.entity,
|
|
80
|
+
opts: {
|
|
81
|
+
button: 0 /* InputAction.IA_POINTER */,
|
|
82
|
+
// We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
|
|
83
|
+
// This is needed for the renderer to know which entities are clickeables
|
|
84
|
+
showFeedback: true
|
|
85
|
+
}
|
|
86
|
+
}, () => pointerEventCallback(instance.entity, pointerEvent));
|
|
97
87
|
}
|
|
98
88
|
}
|
|
99
89
|
}
|
|
@@ -134,6 +124,7 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
134
124
|
}
|
|
135
125
|
function removeChildEntity(instance) {
|
|
136
126
|
changeEvents.delete(instance.entity);
|
|
127
|
+
clickEvents.delete(instance.entity);
|
|
137
128
|
engine.removeEntity(instance.entity);
|
|
138
129
|
for (const child of instance._child) {
|
|
139
130
|
removeChildEntity(child);
|
|
@@ -202,10 +193,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
202
193
|
...noopConfig,
|
|
203
194
|
createInstance(type, props) {
|
|
204
195
|
const entity = engine.addEntity();
|
|
205
|
-
// set root
|
|
206
|
-
if (rootEntity !== undefined) {
|
|
207
|
-
Transform.createOrReplace(entity, { parent: rootEntity });
|
|
208
|
-
}
|
|
209
196
|
entities.add(entity);
|
|
210
197
|
const instance = {
|
|
211
198
|
entity,
|
|
@@ -219,13 +206,11 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
219
206
|
continue;
|
|
220
207
|
}
|
|
221
208
|
if (isListener(keyTyped)) {
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
});
|
|
228
|
-
}
|
|
209
|
+
upsertListener(instance, {
|
|
210
|
+
type: 'add',
|
|
211
|
+
props: props[keyTyped],
|
|
212
|
+
component: keyTyped
|
|
213
|
+
});
|
|
229
214
|
}
|
|
230
215
|
else {
|
|
231
216
|
upsertComponent(instance, props[keyTyped], keyTyped);
|
package/dist/reconciler/utils.js
CHANGED
|
@@ -35,14 +35,6 @@ const entityComponent = {
|
|
|
35
35
|
onMouseUp: undefined,
|
|
36
36
|
onMouseEnter: undefined,
|
|
37
37
|
onMouseLeave: undefined,
|
|
38
|
-
onMouseDrag: undefined,
|
|
39
|
-
onMouseDragLocked: undefined,
|
|
40
|
-
onMouseDragEnd: undefined,
|
|
41
|
-
onInputDown: undefined,
|
|
42
|
-
onInputUp: undefined,
|
|
43
|
-
onInputDrag: undefined,
|
|
44
|
-
onInputDragLocked: undefined,
|
|
45
|
-
onInputDragEnd: undefined,
|
|
46
38
|
uiInput: undefined,
|
|
47
39
|
uiDropdown: undefined
|
|
48
40
|
};
|
package/dist/system.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { IEngine, PointerEventsSystem } from '@dcl/ecs';
|
|
2
2
|
import type { ReactEcs } from './react-ecs';
|
|
3
3
|
/**
|
|
4
4
|
* @public
|
|
@@ -10,7 +10,6 @@ export type UiComponent = () => ReactEcs.JSX.ReactNode;
|
|
|
10
10
|
export interface ReactBasedUiSystem {
|
|
11
11
|
destroy(): void;
|
|
12
12
|
setUiRenderer(ui: UiComponent): void;
|
|
13
|
-
setTextureRenderer(entity: Entity, ui: UiComponent): void;
|
|
14
13
|
}
|
|
15
14
|
/**
|
|
16
15
|
* @public
|
package/dist/system.js
CHANGED
|
@@ -4,15 +4,11 @@ import { createReconciler } from './reconciler';
|
|
|
4
4
|
* @public
|
|
5
5
|
*/
|
|
6
6
|
export function createReactBasedUiSystem(engine, pointerSystem) {
|
|
7
|
-
const renderer = createReconciler(engine, pointerSystem
|
|
7
|
+
const renderer = createReconciler(engine, pointerSystem);
|
|
8
8
|
let uiComponent = undefined;
|
|
9
|
-
const textureRenderersAndUis = [];
|
|
10
9
|
function ReactBasedUiSystem() {
|
|
11
10
|
if (uiComponent)
|
|
12
11
|
renderer.update(React.createElement(uiComponent));
|
|
13
|
-
for (const [textureRenderer, ui] of textureRenderersAndUis) {
|
|
14
|
-
textureRenderer.update(React.createElement(ui()));
|
|
15
|
-
}
|
|
16
12
|
}
|
|
17
13
|
engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
|
|
18
14
|
return {
|
|
@@ -21,20 +17,9 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
|
|
|
21
17
|
for (const entity of renderer.getEntities()) {
|
|
22
18
|
engine.removeEntity(entity);
|
|
23
19
|
}
|
|
24
|
-
for (const [textureRenderer, _] of textureRenderersAndUis) {
|
|
25
|
-
for (const entity of textureRenderer.getEntities()) {
|
|
26
|
-
engine.removeEntity(entity);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
for (const entity of renderer.getEntities()) {
|
|
30
|
-
engine.removeEntity(entity);
|
|
31
|
-
}
|
|
32
20
|
},
|
|
33
21
|
setUiRenderer(ui) {
|
|
34
22
|
uiComponent = ui;
|
|
35
|
-
},
|
|
36
|
-
setTextureRenderer(entity, ui) {
|
|
37
|
-
textureRenderersAndUis.push([createReconciler(engine, pointerSystem, entity), ui]);
|
|
38
23
|
}
|
|
39
24
|
};
|
|
40
25
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/react-ecs",
|
|
3
3
|
"description": "Decentraland ECS",
|
|
4
|
-
"version": "7.
|
|
4
|
+
"version": "7.13.0",
|
|
5
5
|
"author": "DCL",
|
|
6
6
|
"bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@dcl/ecs": "7.
|
|
8
|
+
"@dcl/ecs": "7.13.0",
|
|
9
9
|
"react": "^18.2.0",
|
|
10
10
|
"react-reconciler": "^0.29.0"
|
|
11
11
|
},
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"tsconfig": "./tsconfig.json"
|
|
41
41
|
},
|
|
42
42
|
"types": "./dist/index.d.ts",
|
|
43
|
-
"commit": "
|
|
43
|
+
"commit": "7df9c3029b7e9d824a41fdecdd9f63024b16e25b"
|
|
44
44
|
}
|