@dcl/react-ecs 7.12.3-19272644543.commit-c9229e1 → 7.12.3-19323828833.commit-7df9c30

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, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...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, onInputDown: !!props.disabled ? undefined : onInputDown, onInputUp: !!props.disabled ? undefined : onInputUp, onInputDrag: onInputDrag, onInputDragLocked: onInputDragLocked, onInputDragEnd: onInputDragEnd, 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, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...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,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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...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,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, onMouseDrag, onMouseDragLocked, onMouseDragEnd, onInputDown, onInputUp, onInputDrag, onInputDragLocked, onInputDragEnd, ...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,
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
- * legacy Callback function
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 MultiCallback = Partial<Record<InputAction, EventSystemCallback>>;
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?: EventSystemCallback;
12
+ onMouseDown?: Callback;
28
13
  /** triggered on mouse up event */
29
- onMouseUp?: EventSystemCallback;
14
+ onMouseUp?: Callback;
30
15
  /** triggered on mouse hover event */
31
- onMouseEnter?: EventSystemCallback;
16
+ onMouseEnter?: Callback;
32
17
  /** triggered on mouse leave event */
33
- onMouseLeave?: EventSystemCallback;
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, 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
- }
@@ -1,5 +1,5 @@
1
- import { PBUiBackground, PBUiText, PBUiTransform, PBUiInput, PBUiDropdown, EventSystemCallback } from '@dcl/ecs';
2
- import { Key, MultiCallback } from './components';
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: EventSystemCallback;
22
- onMouseUp: EventSystemCallback;
23
- onMouseEnter: EventSystemCallback;
24
- onMouseLeave: EventSystemCallback;
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 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
+ };
@@ -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
- export function createReconciler(engine, pointerEvents, rootEntity) {
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
- if (update.component === 'onMouseDown' || update.component === 'onInputDown') {
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' || update.component === 'onInputUp') {
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 pointerEventSystem = update.component === 'onMouseDown' || update.component === 'onInputDown'
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' || update.component === 'onInputUp'
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
- if (typeof update.props === 'function') {
74
- pointerEventSystem({
75
- entity: instance.entity,
76
- opts: {
77
- button: 0 /* InputAction.IA_POINTER */,
78
- // We add this showFeedBack so the pointerEventSystem creates a PointerEvent component with our entity
79
- // This is needed for the renderer to know which entities are clickeables
80
- showFeedback: true
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
- if (props[keyTyped] !== undefined) {
223
- upsertListener(instance, {
224
- type: 'add',
225
- props: props[keyTyped],
226
- component: keyTyped
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);
@@ -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 { 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
@@ -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, undefined);
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.12.3-19272644543.commit-c9229e1",
4
+ "version": "7.12.3-19323828833.commit-7df9c30",
5
5
  "author": "DCL",
6
6
  "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
7
7
  "dependencies": {
8
- "@dcl/ecs": "7.12.3-19272644543.commit-c9229e1",
8
+ "@dcl/ecs": "7.12.3-19323828833.commit-7df9c30",
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": "c9229e1cc22b0e2e668e40f0bf51de1f442308c7"
43
+ "commit": "7df9c3029b7e9d824a41fdecdd9f63024b16e25b"
44
44
  }