@dcl/react-ecs 7.6.8-12529128672.commit-d6adcb3 → 7.6.8-12599004043.commit-8eaa4e2
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/Label/index.js +1 -3
- package/dist/components/Label/types.d.ts +0 -4
- package/dist/components/uiTransform/index.d.ts +1 -1
- package/dist/components/uiTransform/index.js +4 -9
- package/dist/components/uiTransform/types.d.ts +0 -16
- package/dist/components/uiTransform/utils.js +0 -37
- package/dist/reconciler/index.d.ts +3 -4
- package/dist/reconciler/index.js +1 -9
- package/dist/system.d.ts +0 -2
- package/dist/system.js +1 -16
- package/package.json +3 -3
|
@@ -31,9 +31,7 @@ export function Label(props) {
|
|
|
31
31
|
...getFont(font),
|
|
32
32
|
...getTextAlign(textAlign),
|
|
33
33
|
...getFontSize(fontSize),
|
|
34
|
-
...getTextWrap(textWrap)
|
|
35
|
-
outlineWidth: props.outlineWidth,
|
|
36
|
-
outlineColor: props.outlineColor
|
|
34
|
+
...getTextWrap(textWrap)
|
|
37
35
|
};
|
|
38
36
|
return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
|
|
39
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,4 +1,4 @@
|
|
|
1
|
-
import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType,
|
|
1
|
+
import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parsePosition, parseSize } from './utils';
|
|
2
2
|
/**
|
|
3
3
|
* @internal
|
|
4
4
|
*/
|
|
@@ -51,16 +51,14 @@ const defaultUiTransform = {
|
|
|
51
51
|
flexBasisUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
52
52
|
widthUnit: 3 /* YGUnit.YGU_AUTO */,
|
|
53
53
|
heightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
|
|
54
|
-
pointerFilter: 0 /* PointerFilterMode.PFM_NONE
|
|
55
|
-
opacity: 1,
|
|
56
|
-
zIndex: 0
|
|
54
|
+
pointerFilter: 0 /* PointerFilterMode.PFM_NONE */
|
|
57
55
|
};
|
|
58
56
|
/**
|
|
59
57
|
* @public
|
|
60
58
|
*/
|
|
61
59
|
/* @__PURE__ */
|
|
62
60
|
export function parseUiTransform(props = {}) {
|
|
63
|
-
const {
|
|
61
|
+
const { height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, ...otherProps } = props;
|
|
64
62
|
return {
|
|
65
63
|
...defaultUiTransform,
|
|
66
64
|
...otherProps,
|
|
@@ -83,9 +81,6 @@ export function parseUiTransform(props = {}) {
|
|
|
83
81
|
// Optional values
|
|
84
82
|
...(alignContent && getAlign('alignContent', alignContent)),
|
|
85
83
|
...(alignItems && getAlign('alignItems', alignItems)),
|
|
86
|
-
...(flexWrap && getFlexWrap(flexWrap))
|
|
87
|
-
...(scrollPosition && getScrollPosition(scrollPosition)),
|
|
88
|
-
...(scrollVisible && getScrollVisible(scrollVisible)),
|
|
89
|
-
...(zIndex && { zIndex })
|
|
84
|
+
...(flexWrap && getFlexWrap(flexWrap))
|
|
90
85
|
};
|
|
91
86
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Vector2 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/vectors.gen';
|
|
2
1
|
import { ScaleUnit } from '../types';
|
|
3
2
|
/**
|
|
4
3
|
* unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
|
|
@@ -63,11 +62,6 @@ export type PositionType = 'absolute' | 'relative';
|
|
|
63
62
|
* 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)
|
|
64
63
|
*/
|
|
65
64
|
export type PointerFilterType = 'none' | 'block';
|
|
66
|
-
/**
|
|
67
|
-
* @public
|
|
68
|
-
* The scroll-visible determines if the scrollbars are shown when the scroll overflow is enabled
|
|
69
|
-
*/
|
|
70
|
-
export type ScrollVisibleType = 'horizontal' | 'vertical' | 'both' | 'hidden';
|
|
71
65
|
/**
|
|
72
66
|
* Layout props to position things in the canvas
|
|
73
67
|
* @public
|
|
@@ -119,14 +113,4 @@ export interface UiTransformProps {
|
|
|
119
113
|
overflow?: OverflowType;
|
|
120
114
|
/** 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) **/
|
|
121
115
|
pointerFilter?: PointerFilterType;
|
|
122
|
-
/** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
|
|
123
|
-
opacity?: number;
|
|
124
|
-
/** A reference value to identify the element, default empty */
|
|
125
|
-
elementId?: string;
|
|
126
|
-
/** default position=(0,0) if it aplies, a vector or a reference-id */
|
|
127
|
-
scrollPosition?: Vector2 | string;
|
|
128
|
-
/** default ShowScrollBar.SSB_BOTH */
|
|
129
|
-
scrollVisible?: ScrollVisibleType;
|
|
130
|
-
/** default 0 */
|
|
131
|
-
zIndex?: number;
|
|
132
116
|
}
|
|
@@ -184,40 +184,3 @@ const parsePointerFilter = {
|
|
|
184
184
|
none: 0 /* PointerFilterMode.PFM_NONE */,
|
|
185
185
|
block: 1 /* PointerFilterMode.PFM_BLOCK */
|
|
186
186
|
};
|
|
187
|
-
/**
|
|
188
|
-
* @internal
|
|
189
|
-
*/
|
|
190
|
-
export function getScrollPosition(scrollPosition) {
|
|
191
|
-
if (typeof scrollPosition === 'string') {
|
|
192
|
-
return {
|
|
193
|
-
scrollPosition: {
|
|
194
|
-
value: {
|
|
195
|
-
$case: 'reference',
|
|
196
|
-
reference: scrollPosition
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
}
|
|
201
|
-
else {
|
|
202
|
-
return {
|
|
203
|
-
scrollPosition: {
|
|
204
|
-
value: {
|
|
205
|
-
$case: 'position',
|
|
206
|
-
position: scrollPosition
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
const parseScrollVisible = {
|
|
213
|
-
both: 0 /* ShowScrollBar.SSB_BOTH */,
|
|
214
|
-
hidden: 3 /* ShowScrollBar.SSB_HIDDEN */,
|
|
215
|
-
horizontal: 2 /* ShowScrollBar.SSB_ONLY_HORIZONTAL */,
|
|
216
|
-
vertical: 1 /* ShowScrollBar.SSB_ONLY_VERTICAL */
|
|
217
|
-
};
|
|
218
|
-
/**
|
|
219
|
-
* @internal
|
|
220
|
-
*/
|
|
221
|
-
export function getScrollVisible(scrollVisible) {
|
|
222
|
-
return { scrollVisible: parseScrollVisible[scrollVisible] };
|
|
223
|
-
}
|
|
@@ -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
|
@@ -12,7 +12,7 @@ function getPointerEnum(pointerKey) {
|
|
|
12
12
|
};
|
|
13
13
|
return pointers[pointerKey];
|
|
14
14
|
}
|
|
15
|
-
export function createReconciler(engine, pointerEvents
|
|
15
|
+
export function createReconciler(engine, pointerEvents) {
|
|
16
16
|
// Store all the entities so when we destroy the UI we can also destroy them
|
|
17
17
|
const entities = new Set();
|
|
18
18
|
// Store the onChange callbacks to be runned every time a Result has changed
|
|
@@ -26,8 +26,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
26
26
|
const UiInputResult = components.UiInputResult(engine);
|
|
27
27
|
const UiDropdown = components.UiDropdown(engine);
|
|
28
28
|
const UiDropdownResult = components.UiDropdownResult(engine);
|
|
29
|
-
const UiScrollResult = components.UiScrollResult(engine);
|
|
30
|
-
const Transform = components.Transform(engine);
|
|
31
29
|
// Component ID Helper
|
|
32
30
|
const getComponentId = {
|
|
33
31
|
uiTransform: UiTransform.componentId,
|
|
@@ -184,10 +182,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
184
182
|
...noopConfig,
|
|
185
183
|
createInstance(type, props) {
|
|
186
184
|
const entity = engine.addEntity();
|
|
187
|
-
// set root
|
|
188
|
-
if (rootEntity !== undefined) {
|
|
189
|
-
Transform.createOrReplace(entity, { parent: rootEntity });
|
|
190
|
-
}
|
|
191
185
|
entities.add(entity);
|
|
192
186
|
const instance = {
|
|
193
187
|
entity,
|
|
@@ -282,8 +276,6 @@ export function createReconciler(engine, pointerEvents, rootEntity) {
|
|
|
282
276
|
if (changeEvents.size) {
|
|
283
277
|
handleOnChange(UiInput.componentId, UiInputResult);
|
|
284
278
|
handleOnChange(UiDropdown.componentId, UiDropdownResult);
|
|
285
|
-
// TODO: maybe as componentId could be a virtual id since the scroll input doesn't exist
|
|
286
|
-
handleOnChange(UiTransform.componentId, UiScrollResult);
|
|
287
279
|
}
|
|
288
280
|
return reconciler.updateContainer(component, root, null);
|
|
289
281
|
},
|
package/dist/system.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { Entity } from '@dcl/ecs';
|
|
2
1
|
import type { ReactEcs } from './react-ecs';
|
|
3
2
|
/**
|
|
4
3
|
* @public
|
|
@@ -10,5 +9,4 @@ export type UiComponent = () => ReactEcs.JSX.ReactNode;
|
|
|
10
9
|
export interface ReactBasedUiSystem {
|
|
11
10
|
destroy(): void;
|
|
12
11
|
setUiRenderer(ui: UiComponent): void;
|
|
13
|
-
setTextureRenderer(entity: Entity, ui: UiComponent): void;
|
|
14
12
|
}
|
package/dist/system.js
CHANGED
|
@@ -3,15 +3,11 @@ import { createReconciler } from './reconciler';
|
|
|
3
3
|
* @internal
|
|
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.6.8-
|
|
4
|
+
"version": "7.6.8-12599004043.commit-8eaa4e2",
|
|
5
5
|
"author": "DCL",
|
|
6
6
|
"bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@dcl/ecs": "7.6.8-
|
|
8
|
+
"@dcl/ecs": "7.6.8-12599004043.commit-8eaa4e2",
|
|
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": "8eaa4e2f457136e20bd11d2449d90210d1bd9cce"
|
|
44
44
|
}
|