@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.
@@ -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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
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, onMouseDrag: onMouseDrag, onMouseDragLocked: onMouseDragLocked, onMouseDragEnd: onMouseDragEnd, uiTransform: uiTransformProps, uiText: textProps, uiBackground: uiBackgroundProps }));
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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...otherProps } = props;
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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, ...uiTextProps } = props;
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, Entity } from '@dcl/ecs';
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,5 +1,5 @@
1
- import { PBUiTransform } from '@dcl/ecs/dist/components';
2
1
  import { UiTransformProps } from './types';
2
+ import { PBUiTransform } from '@dcl/ecs/dist/components';
3
3
  /**
4
4
  * @public
5
5
  */
@@ -1,4 +1,4 @@
1
- import { getAlign, getDisplay, getFlexDirection, getFlexWrap, getJustify, getOverflow, getPointerFilter, getPositionType, parseBorderColor, parseBorderRadius, parseBorderWidth, getScrollPosition, getScrollVisible, parsePosition, parseSize } from './utils';
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 { scrollPosition, scrollVisible, height, minHeight, maxHeight, width, minWidth, maxWidth, alignItems, alignContent, flexWrap, borderRadius, borderWidth, borderColor, zIndex, ...otherProps } = props;
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
- }
@@ -22,9 +22,6 @@ export type EntityComponents = {
22
22
  onMouseUp: Callback;
23
23
  onMouseEnter: Callback;
24
24
  onMouseLeave: Callback;
25
- onMouseDrag: Callback;
26
- onMouseDragLocked: Callback;
27
- onMouseDragEnd: Callback;
28
25
  };
29
26
  /**
30
27
  * @hidden
@@ -1,7 +1,6 @@
1
1
  import { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
2
2
  import { ReactEcs } from '../react-ecs';
3
- export interface DclReconciler {
4
- update: (component: ReactEcs.JSX.ReactNode) => void;
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
+ };
@@ -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, rootEntity) {
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,
@@ -35,9 +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
38
  uiInput: undefined,
42
39
  uiDropdown: undefined
43
40
  };
package/dist/system.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { Entity, IEngine, PointerEventsSystem } from '@dcl/ecs';
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, undefined);
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-15763545320.commit-a99dfdf",
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-15763545320.commit-a99dfdf",
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": "a99dfdf7ac08a6dc4789fcfa87088a1bc0d387ec"
43
+ "commit": "db2ca6f93d5a3da3671c73dc7c9821e137dd294d"
44
44
  }