@dcl/react-ecs 7.8.13-15763545320.commit-a99dfdf → 7.8.13-15848547771.commit-db2ca6f
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 -5
- package/dist/components/Input/index.js +2 -5
- package/dist/components/Label/index.js +3 -8
- package/dist/components/Label/types.d.ts +0 -4
- package/dist/components/listeners/types.d.ts +0 -6
- package/dist/components/listeners/types.js +1 -4
- 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 +0 -3
- package/dist/reconciler/index.d.ts +3 -4
- package/dist/reconciler/index.js +3 -27
- package/dist/reconciler/utils.js +0 -3
- 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,10 +42,7 @@ export function Dropdown(props) {
|
|
|
42
42
|
onMouseDown,
|
|
43
43
|
onMouseUp,
|
|
44
44
|
onMouseEnter,
|
|
45
|
-
onMouseLeave
|
|
46
|
-
onMouseDrag,
|
|
47
|
-
onMouseDragLocked,
|
|
48
|
-
onMouseDragEnd
|
|
45
|
+
onMouseLeave
|
|
49
46
|
});
|
|
50
47
|
return ReactEcs.createElement("entity", { ...commonProps, uiDropdown: dropdownProps });
|
|
51
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,10 +43,7 @@ export function Input(props) {
|
|
|
43
43
|
onMouseDown,
|
|
44
44
|
onMouseUp,
|
|
45
45
|
onMouseEnter,
|
|
46
|
-
onMouseLeave
|
|
47
|
-
onMouseDrag,
|
|
48
|
-
onMouseDragLocked,
|
|
49
|
-
onMouseDragEnd
|
|
46
|
+
onMouseLeave
|
|
50
47
|
});
|
|
51
48
|
return ReactEcs.createElement("entity", { ...commonProps, uiInput: inputProps });
|
|
52
49
|
}
|
|
@@ -16,17 +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
|
|
26
|
+
onMouseLeave
|
|
30
27
|
});
|
|
31
28
|
const { font, textAlign, fontSize, textWrap, ...textProps } = uiTextProps;
|
|
32
29
|
const uiText = {
|
|
@@ -34,9 +31,7 @@ export function Label(props) {
|
|
|
34
31
|
...getFont(font),
|
|
35
32
|
...getTextAlign(textAlign),
|
|
36
33
|
...getFontSize(fontSize),
|
|
37
|
-
...getTextWrap(textWrap)
|
|
38
|
-
outlineWidth: props.outlineWidth,
|
|
39
|
-
outlineColor: props.outlineColor
|
|
34
|
+
...getTextWrap(textWrap)
|
|
40
35
|
};
|
|
41
36
|
return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
|
|
42
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
|
}
|
|
@@ -16,10 +16,4 @@ export type Listeners = {
|
|
|
16
16
|
onMouseEnter?: Callback;
|
|
17
17
|
/** triggered on mouse leave event */
|
|
18
18
|
onMouseLeave?: Callback;
|
|
19
|
-
/** triggered on mouse drag event */
|
|
20
|
-
onMouseDrag?: Callback;
|
|
21
|
-
/** triggered on mouse drag event */
|
|
22
|
-
onMouseDragLocked?: Callback;
|
|
23
|
-
/** triggered on mouse drag event */
|
|
24
|
-
onMouseDragEnd?: Callback;
|
|
25
19
|
};
|
|
@@ -2,10 +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
|
|
5
|
+
onMouseLeave: undefined
|
|
9
6
|
};
|
|
10
7
|
const listenersKey = Object.keys(listeners);
|
|
11
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,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
|
@@ -8,14 +8,11 @@ function getPointerEnum(pointerKey) {
|
|
|
8
8
|
onMouseDown: 1 /* PointerEventType.PET_DOWN */,
|
|
9
9
|
onMouseUp: 0 /* PointerEventType.PET_UP */,
|
|
10
10
|
onMouseEnter: 2 /* PointerEventType.PET_HOVER_ENTER */,
|
|
11
|
-
onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE
|
|
12
|
-
onMouseDrag: 5 /* PointerEventType.PET_DRAG */,
|
|
13
|
-
onMouseDragLocked: 4 /* PointerEventType.PET_DRAG_LOCKED */,
|
|
14
|
-
onMouseDragEnd: 6 /* PointerEventType.PET_DRAG_END */
|
|
11
|
+
onMouseLeave: 3 /* PointerEventType.PET_HOVER_LEAVE */
|
|
15
12
|
};
|
|
16
13
|
return pointers[pointerKey];
|
|
17
14
|
}
|
|
18
|
-
export function createReconciler(engine, pointerEvents
|
|
15
|
+
export function createReconciler(engine, pointerEvents) {
|
|
19
16
|
// Store all the entities so when we destroy the UI we can also destroy them
|
|
20
17
|
const entities = new Set();
|
|
21
18
|
// Store the onChange callbacks to be runned every time a Result has changed
|
|
@@ -29,8 +26,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
29
26
|
const UiInputResult = components.UiInputResult(engine);
|
|
30
27
|
const UiDropdown = components.UiDropdown(engine);
|
|
31
28
|
const UiDropdownResult = components.UiDropdownResult(engine);
|
|
32
|
-
const UiScrollResult = components.UiScrollResult(engine);
|
|
33
|
-
const Transform = components.Transform(engine);
|
|
34
29
|
// Component ID Helper
|
|
35
30
|
const getComponentId = {
|
|
36
31
|
uiTransform: UiTransform.componentId,
|
|
@@ -63,15 +58,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
63
58
|
else if (update.component === 'onMouseLeave') {
|
|
64
59
|
pointerEvents.removeOnPointerHoverLeave(instance.entity);
|
|
65
60
|
}
|
|
66
|
-
else if (update.component === 'onMouseDrag') {
|
|
67
|
-
pointerEvents.removeOnPointerDrag(instance.entity);
|
|
68
|
-
}
|
|
69
|
-
else if (update.component === 'onMouseDragLocked') {
|
|
70
|
-
pointerEvents.removeOnPointerDragLocked(instance.entity);
|
|
71
|
-
}
|
|
72
|
-
else if (update.component === 'onMouseDragEnd') {
|
|
73
|
-
pointerEvents.removeOnPointerDragEnd(instance.entity);
|
|
74
|
-
}
|
|
75
61
|
return;
|
|
76
62
|
}
|
|
77
63
|
if (update.props) {
|
|
@@ -87,13 +73,7 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
87
73
|
? pointerEvents.onPointerUp
|
|
88
74
|
: update.component === 'onMouseEnter'
|
|
89
75
|
? pointerEvents.onPointerHoverEnter
|
|
90
|
-
: update.component === 'onMouseLeave'
|
|
91
|
-
? pointerEvents.onPointerHoverLeave
|
|
92
|
-
: update.component === 'onMouseDrag'
|
|
93
|
-
? pointerEvents.onPointerDrag
|
|
94
|
-
: update.component === 'onMouseDragLocked'
|
|
95
|
-
? pointerEvents.onPointerDragLocked
|
|
96
|
-
: update.component === 'onMouseDragEnd' && pointerEvents.onPointerDragEnd;
|
|
76
|
+
: update.component === 'onMouseLeave' && pointerEvents.onPointerHoverLeave;
|
|
97
77
|
if (pointerEventSystem) {
|
|
98
78
|
pointerEventSystem({
|
|
99
79
|
entity: instance.entity,
|
|
@@ -213,10 +193,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
213
193
|
...noopConfig,
|
|
214
194
|
createInstance(type, props) {
|
|
215
195
|
const entity = engine.addEntity();
|
|
216
|
-
// set root
|
|
217
|
-
if (rootEntity !== undefined) {
|
|
218
|
-
Transform.createOrReplace(entity, { parent: rootEntity });
|
|
219
|
-
}
|
|
220
196
|
entities.add(entity);
|
|
221
197
|
const instance = {
|
|
222
198
|
entity,
|
package/dist/reconciler/utils.js
CHANGED
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
|
@@ -3,15 +3,11 @@ import { createReconciler } from './reconciler';
|
|
|
3
3
|
* @public
|
|
4
4
|
*/
|
|
5
5
|
export function createReactBasedUiSystem(engine, pointerSystem) {
|
|
6
|
-
const renderer = createReconciler(engine, pointerSystem
|
|
6
|
+
const renderer = createReconciler(engine, pointerSystem);
|
|
7
7
|
let uiComponent = undefined;
|
|
8
|
-
const textureRenderersAndUis = [];
|
|
9
8
|
function ReactBasedUiSystem() {
|
|
10
9
|
if (uiComponent)
|
|
11
10
|
renderer.update(uiComponent());
|
|
12
|
-
for (const [textureRenderer, ui] of textureRenderersAndUis) {
|
|
13
|
-
textureRenderer.update(ui());
|
|
14
|
-
}
|
|
15
11
|
}
|
|
16
12
|
engine.addSystem(ReactBasedUiSystem, 100e3, '@dcl/react-ecs');
|
|
17
13
|
return {
|
|
@@ -20,20 +16,9 @@ export function createReactBasedUiSystem(engine, pointerSystem) {
|
|
|
20
16
|
for (const entity of renderer.getEntities()) {
|
|
21
17
|
engine.removeEntity(entity);
|
|
22
18
|
}
|
|
23
|
-
for (const [textureRenderer, _] of textureRenderersAndUis) {
|
|
24
|
-
for (const entity of textureRenderer.getEntities()) {
|
|
25
|
-
engine.removeEntity(entity);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
for (const entity of renderer.getEntities()) {
|
|
29
|
-
engine.removeEntity(entity);
|
|
30
|
-
}
|
|
31
19
|
},
|
|
32
20
|
setUiRenderer(ui) {
|
|
33
21
|
uiComponent = ui;
|
|
34
|
-
},
|
|
35
|
-
setTextureRenderer(entity, ui) {
|
|
36
|
-
textureRenderersAndUis.push([createReconciler(engine, pointerSystem, entity), ui]);
|
|
37
22
|
}
|
|
38
23
|
};
|
|
39
24
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dcl/react-ecs",
|
|
3
3
|
"description": "Decentraland ECS",
|
|
4
|
-
"version": "7.8.13-
|
|
4
|
+
"version": "7.8.13-15848547771.commit-db2ca6f",
|
|
5
5
|
"author": "DCL",
|
|
6
6
|
"bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@dcl/ecs": "7.8.13-
|
|
8
|
+
"@dcl/ecs": "7.8.13-15848547771.commit-db2ca6f",
|
|
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": "db2ca6f93d5a3da3671c73dc7c9821e137dd294d"
|
|
44
44
|
}
|