@dcl/react-ecs 0.0.1-3548419522.commit-ddcf4b7 → 7.0.0

package/dist/components/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactEcs } from '../react-ecs';
+import { CommonProps, EntityPropTypes } from './types';
+import { CANVAS_ROOT_ENTITY } from './uiTransform';
+export * from './types';
+export { CANVAS_ROOT_ENTITY };
+export * from './uiTransform/types';
+export * from './listeners/types';
+/**
+ * @public
+ */
+export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
+export declare type ContainerPropTypes = Partial<CommonProps> & EntityPropTypes['uiTransform'];
+export declare function Container({ width, height, children }: ContainerPropTypes): ReactEcs.JSX.Element;

package/dist/components/index.js

@@ -0,0 +1,17 @@
+import { ReactEcs } from '../react-ecs';
+import { parseUiTransform, CANVAS_ROOT_ENTITY } from './uiTransform';
+export * from './types';
+export { CANVAS_ROOT_ENTITY };
+export * from './uiTransform/types';
+export * from './listeners/types';
+/**
+ * @public
+ */
+export function UiEntity(props) {
+    const { uiTransform, ...otherProps } = props;
+    const uiTransformProps = parseUiTransform(uiTransform);
+    return ReactEcs.createElement("entity", { uiTransform: uiTransformProps, ...otherProps });
+}
+export function Container({ width, height, children }) {
+    return (ReactEcs.createElement(UiEntity, { uiTransform: { width, height, display: 0 /* YGDisplay.YGD_FLEX */ } }, children));
+}

package/dist/components/listeners/types.d.ts

@@ -0,0 +1,5 @@
+import type { EventSystemCallback } from '@dcl/ecs';
+export declare type Listeners = {
+    onClick?: EventSystemCallback;
+};
+export declare const isListener: (key: string) => key is "onClick";

package/dist/components/listeners/types.js

@@ -0,0 +1,5 @@
+const listeners = {
+    onClick: undefined
+};
+const listenersKey = Object.keys(listeners);
+export const isListener = (key) => listenersKey.includes(key);

package/dist/components/types.d.ts

@@ -0,0 +1,16 @@
+import { PBUiBackground, PBUiText } from '@dcl/ecs/dist/components';
+import { UiTransformProps } from './uiTransform/types';
+/**
+ * @public
+ */
+export declare type EntityPropTypes = {
+    uiTransform?: UiTransformProps;
+    uiText?: PBUiText;
+    uiBackground?: PBUiBackground;
+};
+export declare type Key = number | string;
+export declare type Children = any;
+export declare type CommonProps = {
+    key: Key;
+    children: Children;
+};

package/dist/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uiTransform/index.d.ts

@@ -0,0 +1,7 @@
+import { UiTransformProps } from './types';
+import { PBUiTransform } from '@dcl/ecs/dist/components';
+export declare const CANVAS_ROOT_ENTITY = 0;
+/**
+ * @public
+ */
+export declare function parseUiTransform(props?: UiTransformProps): PBUiTransform;

package/dist/components/uiTransform/index.js

@@ -0,0 +1,70 @@
+import { parsePosition, parseSize } from './utils';
+export const CANVAS_ROOT_ENTITY = 0;
+/**
+ * @public
+ */
+export function parseUiTransform(props = {}) {
+    const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
+    return {
+        ...defaultUiTransform,
+        ...otherProps,
+        ...parsePosition(position, 'position'),
+        ...parsePosition(margin, 'margin'),
+        ...parsePosition(padding, 'padding'),
+        ...parseSize(height, 'height'),
+        ...parseSize(minHeight, 'minHeight'),
+        ...parseSize(maxHeight, 'maxHeight'),
+        ...parseSize(width, 'width'),
+        ...parseSize(minWidth, 'minWidth'),
+        ...parseSize(maxWidth, 'maxWidth')
+    };
+}
+const defaultUiTransform = {
+    parent: CANVAS_ROOT_ENTITY,
+    rightOf: 0,
+    display: 0 /* YGDisplay.YGD_FLEX */,
+    flexBasis: 0,
+    width: 0,
+    height: 0,
+    minWidth: 0,
+    minHeight: 0,
+    maxWidth: 0,
+    maxHeight: 0,
+    justifyContent: 0 /* YGJustify.YGJ_FLEX_START */,
+    alignSelf: 0 /* YGAlign.YGA_AUTO */,
+    flexDirection: 0 /* YGFlexDirection.YGFD_ROW */,
+    positionType: 0 /* YGPositionType.YGPT_RELATIVE */,
+    flexGrow: 0,
+    marginBottom: 0,
+    marginBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    marginLeft: 0,
+    marginLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    marginRight: 0,
+    marginRightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    marginTop: 0,
+    marginTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    maxHeightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    maxWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    minHeightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    minWidthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    overflow: 0 /* YGOverflow.YGO_VISIBLE */,
+    paddingBottom: 0,
+    paddingBottomUnit: 2 /* YGUnit.YGU_PERCENT */,
+    paddingLeft: 0,
+    paddingLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    paddingTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    paddingRight: 0,
+    paddingRightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    paddingTop: 0,
+    positionBottom: 0,
+    positionBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    positionLeft: 0,
+    positionLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    positionRight: 0,
+    positionRightUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    positionTop: 0,
+    positionTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    flexBasisUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    widthUnit: 0 /* YGUnit.YGU_UNDEFINED */,
+    heightUnit: 0 /* YGUnit.YGU_UNDEFINED */
+};

package/dist/components/uiTransform/types.d.ts

@@ -0,0 +1,38 @@
+import { YGAlign, YGDisplay, YGFlexDirection, YGJustify, YGOverflow, YGPositionType, YGWrap } from '@dcl/ecs/dist/runtime/types';
+export declare type PositionUnit = `${number}px` | `${number}%` | number;
+/**
+ * @public
+ */
+export declare type Position = {
+    top: PositionUnit;
+    right: PositionUnit;
+    bottom: PositionUnit;
+    left: PositionUnit;
+};
+/**
+ * @public
+ */
+export interface UiTransformProps {
+    display?: YGDisplay;
+    flex?: number;
+    justifyContent?: YGJustify;
+    positionType?: YGPositionType;
+    alignItems?: YGAlign;
+    alignSelf?: YGAlign;
+    alignContent?: YGAlign;
+    flexDirection?: YGFlexDirection;
+    position?: Partial<Position>;
+    padding?: Partial<Position>;
+    margin?: Partial<Position>;
+    width?: PositionUnit;
+    height?: PositionUnit;
+    minWidth?: PositionUnit;
+    maxWidth?: PositionUnit;
+    minHeight?: PositionUnit;
+    maxHeight?: PositionUnit;
+    flexWrap?: YGWrap;
+    flexBasis?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    overflow?: YGOverflow;
+}

package/dist/components/uiTransform/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/uiTransform/utils.d.ts

@@ -0,0 +1,21 @@
+import { YGUnit } from '@dcl/ecs';
+import { Position, PositionUnit } from './types';
+declare type PropName = 'position' | 'margin' | 'padding';
+declare type PropKey = `${PropName}${Capitalize<keyof Position>}`;
+declare type PropKeyUnit = `${PropName}${Capitalize<keyof Position>}Unit`;
+declare type PositionParsed = {
+    [key in PropKey]?: number;
+} & {
+    [key in PropKeyUnit]?: YGUnit;
+};
+export declare function parsePosition<T extends PropName>(position: Partial<Position> | undefined, prop: T): Partial<PositionParsed>;
+declare type HeightWidth = 'height' | 'width';
+declare type SizePropName = HeightWidth | `max${Capitalize<HeightWidth>}` | `min${Capitalize<HeightWidth>}`;
+declare type SizePropKeyUnit = `${SizePropName}Unit`;
+declare type SizeReturnType = {
+    [key in SizePropName]: number;
+} & {
+    [key in SizePropKeyUnit]: YGUnit;
+};
+export declare function parseSize(val: PositionUnit | undefined, key: SizePropName): Partial<SizeReturnType>;
+export {};

package/dist/components/uiTransform/utils.js

@@ -0,0 +1,52 @@
+function capitalize(value) {
+    return `${value[0].toUpperCase()}${value.slice(1, value.length)}`;
+}
+function isPercent(val) {
+    return typeof val === 'string' && val.endsWith('%');
+}
+function isPoint(val) {
+    return typeof val === 'string' && val.endsWith('px');
+}
+function parsePositionUnit(val) {
+    function getValue(key, value) {
+        return Number(value.slice(0, value.indexOf(key)));
+    }
+    if (val === undefined || val === null) {
+        return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
+    }
+    if (typeof val === 'number') {
+        return [Number(val), 1 /* YGUnit.YGU_POINT */];
+    }
+    if (isPercent(val)) {
+        return [getValue('%', val), 2 /* YGUnit.YGU_PERCENT */];
+    }
+    if (isPoint(val)) {
+        return [getValue('px', val), 1 /* YGUnit.YGU_POINT */];
+    }
+    return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
+}
+// position: { top: '1px' } => { positionTop: 1, positionTopUnit: YGUnit.YGU_Point }
+export function parsePosition(position = {}, prop) {
+    const obj = {};
+    for (const key in position) {
+        const typedKey = key;
+        const propKey = `${prop}${capitalize(typedKey)}`;
+        const propKeyUnit = `${prop}${capitalize(typedKey)}Unit`;
+        const [value, unit] = parsePositionUnit(position[typedKey]);
+        if (value === undefined)
+            continue;
+        obj[propKeyUnit] = unit;
+        obj[propKey] = value;
+    }
+    return obj;
+}
+export function parseSize(val, key) {
+    const unitKey = `${key}Unit`;
+    const [value, unit] = parsePositionUnit(val);
+    if (value === undefined)
+        return {};
+    return {
+        [key]: value,
+        [unitKey]: unit
+    };
+}

package/dist/index.d.ts

@@ -1,417 +1,6 @@
-
-
-export declare type Children = any;
-
-export declare interface Color3 {
-    r: number;
-    g: number;
-    b: number;
-}
-
-export declare interface Color4 {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-}
-
-export declare type CommonProps = {
-    key: Key;
-    children: Children;
-};
-
-export declare function Container({ width, height, children }: ContainerPropTypes): ReactEcs.JSX.Element;
-
-export declare type ContainerPropTypes = Partial<CommonProps> & EntityPropTypes['uiTransform'];
-
-export declare type EcsElements = {
-    entity: Partial<Omit<EntityComponents, 'onClick'> & CommonProps>;
-};
-
-/**
- * @public
- */
-declare type Entity = number & {
-    [entitySymbol]: true;
-};
-
-export declare type EntityComponents = {
-    uiTransform: PBUiTransform;
-    uiText: UiTextProps;
-    uiBackground: UiBackgroundProps;
-    onClick: OnClick;
-};
-
-/**
- * @public
- */
-export declare type EntityPropTypes = {
-    uiTransform?: UiTransformProps;
-    uiText?: UiTextProps;
-    uiBackground?: UiBackgroundProps;
-};
-
-declare const entitySymbol: unique symbol;
-
-declare type EventsSystem = typeof EventsSystem;
-
-declare namespace EventsSystem {
-    type Callback = (event: PBPointerEventsResult_PointerCommand) => void | Promise<void>;
-    type Options = {
-        button?: InputAction;
-        hoverText?: string;
-        maxDistance?: number;
-    };
-    /**
-     * @public
-     * Remove the callback for onPointerDown event
-     * @param entity Entity where the callback was attached
-     */
-    function removeOnPointerDown(entity: Entity): void;
-    /**
-     * @public
-     * Remove the callback for onPointerUp event
-     * @param entity Entity where the callback was attached
-     */
-    function removeOnPointerUp(entity: Entity): void;
-    /**
-     * @public
-     * Execute callback when the user press the InputButton pointing at the entity
-     * @param entity Entity to attach the callback
-     * @param cb Function to execute when click fires
-     * @param opts Opts to trigger Feedback and Button
-     */
-    function onPointerDown(entity: Entity, cb: Callback, opts?: Options): void;
-    /**
-     * @public
-     * Execute callback when the user releases the InputButton pointing at the entity
-     * @param entity Entity to attach the callback
-     * @param cb Function to execute when click fires
-     * @param opts Opts to trigger Feedback and Button
-     */
-    function onPointerUp(entity: Entity, cb: Callback, opts?: Options): void;
-}
-
-export declare enum Font {
-    F_LIBERATION_SANS = 0,
-    F_SANS_SERIF = 1,
-    UNRECOGNIZED = -1
-}
-
-declare const enum InputAction {
-    IA_POINTER = 0,
-    IA_PRIMARY = 1,
-    IA_SECONDARY = 2,
-    IA_ANY = 3,
-    IA_FORWARD = 4,
-    IA_BACKWARD = 5,
-    IA_RIGHT = 6,
-    IA_LEFT = 7,
-    IA_JUMP = 8,
-    IA_WALK = 9,
-    IA_ACTION_3 = 10,
-    IA_ACTION_4 = 11,
-    IA_ACTION_5 = 12,
-    IA_ACTION_6 = 13
-}
-
-export declare const isListener: (key: string) => key is "onClick";
-
-export declare namespace JSX {
-    export interface Element {
-    }
-    export type IntrinsicElements = EcsElements;
-    export interface Component {
-    }
-}
-
-export declare type Key = number | string;
-
-export declare type Listeners = {
-    onClick?: OnClick;
-};
-
-export declare type OnClick = EventsSystem.Callback;
-
-/** this message represents a pointer event, used both for UP and DOWN actions */
-declare interface PBPointerEventsResult_PointerCommand {
-    /** identifier of the input */
-    button: InputAction;
-    hit: RaycastHit | undefined;
-    state: PointerEventType;
-    /** could be a Lamport timestamp */
-    timestamp: number;
-    /** if the input is analog then we store it here */
-    analog?: number | undefined;
-}
-
-export declare interface PBUiBackground {
-    /** default=(0.0, 0.0, 0.0, 0.0) */
-    backgroundColor?: Color4 | undefined;
-}
-
-export declare interface PBUiText {
-    value: string;
-    /** default=(1.0,1.0,1.0,1.0) */
-    color?: Color4 | undefined;
-    /** default='center' */
-    textAlign?: TextAlignMode | undefined;
-    /** default=0 */
-    font?: Font | undefined;
-    /** default=10 */
-    fontSize?: number | undefined;
-}
-
-export declare interface PBUiTransform {
-    parent: number;
-    rightOf: number;
-    /** default: YGAlign.YGA_FLEX_START */
-    alignContent?: YGAlign | undefined;
-    /** default: YGAlign.YGA_STRETCH */
-    alignItems?: YGAlign | undefined;
-    /** default: YGWrap.YGW_WRAP */
-    flexWrap?: YGWrap | undefined;
-    /** default: 1 */
-    flexShrink?: number | undefined;
-    /** YGPositionType.YGPT_RELATIVE */
-    positionType: YGPositionType;
-    /** YGAlign.YGA_AUTO */
-    alignSelf: YGAlign;
-    /** YGFlexDirection.YGFD_ROW */
-    flexDirection: YGFlexDirection;
-    /** YGJustify.YGJ_FLEX_START */
-    justifyContent: YGJustify;
-    /** YGOverflow.YGO_VISIBLE */
-    overflow: YGOverflow;
-    /** YGDisplay.YGD_FLEX */
-    display: YGDisplay;
-    /** YGUnit.YGU_UNDEFINED */
-    flexBasisUnit: YGUnit;
-    flexBasis: number;
-    flexGrow: number;
-    /** YGUnit.YGU_UNDEFINED */
-    widthUnit: YGUnit;
-    width: number;
-    /** YGUnit.YGU_UNDEFINED */
-    heightUnit: YGUnit;
-    height: number;
-    /** YGUnit.YGU_UNDEFINED */
-    minWidthUnit: YGUnit;
-    minWidth: number;
-    /** YGUnit.YGU_UNDEFINED */
-    minHeightUnit: YGUnit;
-    minHeight: number;
-    /** YGUnit.YGU_UNDEFINED */
-    maxWidthUnit: YGUnit;
-    maxWidth: number;
-    /** YGUnit.YGU_UNDEFINED */
-    maxHeightUnit: YGUnit;
-    maxHeight: number;
-    /** YGUnit.YGU_UNDEFINED */
-    positionLeftUnit: YGUnit;
-    positionLeft: number;
-    /** YGUnit.YGU_UNDEFINED */
-    positionTopUnit: YGUnit;
-    positionTop: number;
-    /** YGUnit.YGU_UNDEFINED */
-    positionRightUnit: YGUnit;
-    positionRight: number;
-    /** YGUnit.YGU_UNDEFINED */
-    positionBottomUnit: YGUnit;
-    positionBottom: number;
-    /** YGUnit.YGU_UNDEFINED */
-    marginLeftUnit: YGUnit;
-    marginLeft: number;
-    /** YGUnit.YGU_UNDEFINED */
-    marginTopUnit: YGUnit;
-    marginTop: number;
-    /** YGUnit.YGU_UNDEFINED */
-    marginRightUnit: YGUnit;
-    marginRight: number;
-    /** YGUnit.YGU_UNDEFINED */
-    marginBottomUnit: YGUnit;
-    marginBottom: number;
-    /** YGUnit.YGU_UNDEFINED */
-    paddingLeftUnit: YGUnit;
-    paddingLeft: number;
-    /** YGUnit.YGU_UNDEFINED */
-    paddingTopUnit: YGUnit;
-    paddingTop: number;
-    /** YGUnit.YGU_UNDEFINED */
-    paddingRightUnit: YGUnit;
-    paddingRight: number;
-    /** YGUnit.YGU_UNDEFINED */
-    paddingBottomUnit: YGUnit;
-    paddingBottom: number;
-}
-
-declare interface PBVector3 {
-    x: number;
-    y: number;
-    z: number;
-}
-
-declare const enum PointerEventType {
-    PET_UP = 0,
-    PET_DOWN = 1,
-    PET_HOVER_ENTER = 2,
-    PET_HOVER_LEAVE = 3
-}
-
-/**
- * @public
- */
-export declare type Position = {
-    top: PositionUnit;
-    right: PositionUnit;
-    bottom: PositionUnit;
-    left: PositionUnit;
-};
-
-export declare type PositionUnit = `${number}px` | `${number}%` | number;
-
-/** Position will be relative to the scene */
-declare interface RaycastHit {
-    position: PBVector3 | undefined;
-    origin: PBVector3 | undefined;
-    direction: PBVector3 | undefined;
-    normalHit: PBVector3 | undefined;
-    length: number;
-    meshName?: string | undefined;
-    entityId?: number | undefined;
-}
-
-declare namespace ReactEcs {
-    namespace JSX {
-        interface Element {
-        }
-        type IntrinsicElements = EcsElements;
-        interface Component {
-        }
-    }
-    const createElement: any;
-}
-export { ReactEcs }
-export default ReactEcs;
-
-export declare function removeUi(index: number): void;
-
-export declare function renderUi(ui: UiComponent): number;
-
-export declare enum TextAlignMode {
-    TAM_TOP_LEFT = 0,
-    TAM_TOP_CENTER = 1,
-    TAM_TOP_RIGHT = 2,
-    TAM_MIDDLE_LEFT = 3,
-    TAM_MIDDLE_CENTER = 4,
-    TAM_MIDDLE_RIGHT = 5,
-    TAM_BOTTOM_LEFT = 6,
-    TAM_BOTTOM_CENTER = 7,
-    TAM_BOTTOM_RIGHT = 8,
-    UNRECOGNIZED = -1
-}
-
-export declare type UiBackgroundProps = PBUiBackground;
-
-export declare type UiComponent = () => JSX.Element;
-
-/**
- * @public
- */
-export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
-
-export declare type UiTextProps = PBUiText;
-
-/**
- * @public
- */
-export declare interface UiTransformProps {
-    display?: YGDisplay;
-    flex?: number;
-    justifyContent?: YGJustify;
-    positionType?: YGPositionType;
-    alignItems?: YGAlign;
-    alignSelf?: YGAlign;
-    alignContent?: YGAlign;
-    flexDirection?: YGFlexDirection;
-    position?: Partial<Position>;
-    padding?: Partial<Position>;
-    margin?: Partial<Position>;
-    width?: PositionUnit;
-    height?: PositionUnit;
-    minWidth?: PositionUnit;
-    maxWidth?: PositionUnit;
-    minHeight?: PositionUnit;
-    maxHeight?: PositionUnit;
-    flexWrap?: YGWrap;
-    flexBasis?: number;
-    flexGrow?: number;
-    flexShrink?: number;
-    overflow?: YGOverflow;
-}
-
-export declare enum YGAlign {
-    YGA_AUTO = 0,
-    YGA_FLEX_START = 1,
-    YGA_CENTER = 2,
-    YGA_FLEX_END = 3,
-    YGA_STRETCH = 4,
-    YGA_BASELINE = 5,
-    YGA_SPACE_BETWEEN = 6,
-    YGA_SPACE_AROUND = 7,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGDisplay {
-    YGD_FLEX = 0,
-    YGD_NONE = 1,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGFlexDirection {
-    YGFD_ROW = 0,
-    YGFD_COLUMN = 1,
-    YGFD_COLUMN_REVERSE = 2,
-    YGFD_ROW_REVERSE = 3,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGJustify {
-    YGJ_FLEX_START = 0,
-    YGJ_CENTER = 1,
-    YGJ_FLEX_END = 2,
-    YGJ_SPACE_BETWEEN = 3,
-    YGJ_SPACE_AROUND = 4,
-    YGJ_SPACE_EVENLY = 5,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGOverflow {
-    YGO_VISIBLE = 0,
-    YGO_HIDDEN = 1,
-    YGO_SCROLL = 2,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGPositionType {
-    YGPT_RELATIVE = 0,
-    YGPT_ABSOLUTE = 1,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGUnit {
-    YGU_UNDEFINED = 0,
-    YGU_POINT = 1,
-    YGU_PERCENT = 2,
-    YGU_AUTO = 3,
-    UNRECOGNIZED = -1
-}
-
-export declare enum YGWrap {
-    YGW_NO_WRAP = 0,
-    YGW_WRAP = 1,
-    YGW_WRAP_REVERSE = 2,
-    UNRECOGNIZED = -1
-}
-
-export { }
+import { ReactEcs } from './react-ecs';
+export * from './components';
+export * from './system';
+export * from './react-ecs';
+export declare const ReactEcsRenderer: import("./system").ReactBasedUiSystem;
+export default ReactEcs;