@dcl/playground-assets 7.0.6-3942933325.commit-70f967f → 7.0.6-3987590195.commit-4fc1536

package/dist/index.bundled.d.ts

@@ -1,5 +1,10 @@
 import _m0 from 'protobufjs/minimal';
 
+/**
+ * @public
+ */
+export declare type AlignType = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around';
+
 export declare const AMOUNT_VERSION_AVAILABLE: number;
 
 export declare const Animator: AnimatorComponentDefinitionExtended;
@@ -1235,6 +1240,11 @@ export declare type DeleteEntityMessageBody = {
     entityId: Entity;
 };
 
+/**
+ * @public
+ */
+export declare type DisplayType = 'flex' | 'none';
+
 /**
  * @public
  */
@@ -1357,6 +1367,16 @@ export declare type ExcludeUndefined<T> = {
  */
 export declare const executeTask: (task: Task<unknown>) => void;
 
+/**
+ * @public
+ */
+export declare type FlexDirectionType = 'row' | 'column' | 'column-reverse' | 'row-reverse';
+
+/**
+ * @public
+ */
+export declare type FlexWrapType = 'wrap' | 'nowrap' | 'wrap-reverse';
+
 /** @public */
 export declare type FloatArray = number[];
 
@@ -1798,12 +1818,17 @@ export declare namespace JSX {
     }
 }
 
+/**
+ * @public
+ */
+export declare type JustifyType = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+
 export declare type Key = number | string;
 
 /**
  * @public
  */
-export declare function Label(props: EntityPropTypes & UiTextProps): ReactEcs.JSX.Element;
+export declare function Label(props: EntityPropTypes & UiLabelProps): ReactEcs.JSX.Element;
 
 export declare type Listeners = {
     onMouseDown?: Callback;
@@ -2853,6 +2878,11 @@ export declare const onVideoEvent: Observable<{
     totalVideoLength: number;
 }>;
 
+/**
+ * @public
+ */
+export declare type OverflowType = 'hidden' | 'scroll' | 'visible';
+
 export declare interface PBAnimationState {
     name: string;
     clip: string;
@@ -3881,6 +3911,11 @@ export declare type Position = {
     left: PositionUnit;
 };
 
+/**
+ * @public
+ */
+export declare type PositionType = 'absolute' | 'relative';
+
 export declare type PositionUnit = `${number}px` | `${number}%` | number;
 
 export declare type PutComponentMessage = CrdtMessageHeader & PutComponentMessageBody;
@@ -4505,6 +4540,11 @@ export declare const enum TextAlignMode {
     TAM_BOTTOM_RIGHT = 8
 }
 
+/**
+ * @public
+ */
+export declare type TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
 /** @public */
 export declare const TextShape: ComponentDefinition<PBTextShape>;
 
@@ -4530,6 +4570,11 @@ export declare const enum TextureFilterMode {
     TFM_TRILINEAR = 2
 }
 
+/**
+ * @public
+ */
+export declare type TextureFilterType = 'point' | 'bi-linear' | 'tri-linear';
+
 /**
  * @public
  */
@@ -4544,6 +4589,22 @@ export declare type TextureHelper = {
     Avatar: (avatarTexture: AvatarTexture) => TextureUnion;
 };
 
+/**
+ * @public
+ * NINE_SLICES - https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html (Slicing section)
+ * https://forum.unity.com/threads/how-does-slicing-in-ui-tookkit-works.1235863/
+ * https://docs.unity3d.com/Manual/9SliceSprites.html
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
+
+ * CENTER - CENTER enables the texture to be rendered centered in relation to the
+ * element. If the element is smaller than the texture then the background
+ * should use the element as stencil to cut off the out-of-bounds area
+
+ * STRETCH - STRETCH enables the texture to cover all the area of the container,
+ * adopting its aspect ratio.
+ */
+export declare type TextureMode = 'nine-slices' | 'center' | 'stretch';
+
 export declare interface TextureUnion {
     tex?: {
         $case: "texture";
@@ -4569,6 +4630,11 @@ export declare const enum TextureWrapMode {
     TWM_MIRROR_ONCE = 3
 }
 
+/**
+ * @public
+ */
+export declare type TextureWrapType = 'repeat' | 'clamp' | 'mirror' | 'mirror-once';
+
 /**
  * Constant used to convert a value to gamma space
  * @public
@@ -4638,7 +4704,11 @@ export declare type TransportMessage = Omit<ReceiveMessage, 'data'>;
  * @public
  */
 export declare type UiAvatarTexture = {
-    avatarTexture?: AvatarTexture;
+    avatarTexture?: {
+        userId: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
 
 /** @public */
@@ -4647,12 +4717,17 @@ export declare const UiBackground: ComponentDefinition<PBUiBackground>;
 /**
  * @public
  */
-export declare type UiBackgroundProps = Partial<Omit<PBUiBackground, 'texture'>> & UiTextureUnion;
+export declare type UiBackgroundProps = {
+    color?: PBColor4 | undefined;
+    textureMode?: TextureMode;
+    textureSlices?: BorderRect | undefined;
+    uvs?: number[];
+} & UiTextureUnion;
 
 /**
  * @public
  */
-export declare type UiButtonProps = PBUiText & {
+export declare type UiButtonProps = UiLabelProps & {
     type?: 'primary' | 'secondary';
 };
 
@@ -4664,8 +4739,10 @@ export declare const UiDropdown: ComponentDefinition<PBUiDropdown>;
 /**
  * @public
  */
-export declare type UiDropdownProps = Partial<PBUiDropdown> & {
+export declare type UiDropdownProps = Partial<Omit<PBUiDropdown, 'textAlign' | 'font'>> & {
     onChange?(value: number): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };
 
 /** @public */
@@ -4676,19 +4753,36 @@ export declare const UiDropdownResult: ComponentDefinition<PBUiDropdownResult>;
  */
 export declare function UiEntity(props: EntityPropTypes & Partial<CommonProps>): ReactEcs.JSX.Element;
 
+/**
+ * @public
+ */
+export declare type UiFontType = 'sans-serif' | 'serif' | 'monospace';
+
 /** @public */
 export declare const UiInput: ComponentDefinition<PBUiInput>;
 
 /**
  * @public
  */
-export declare type UiInputProps = PBUiInput & {
+export declare type UiInputProps = Omit<PBUiInput, 'font' | 'textAlign'> & {
     onChange?(value: string): void;
+    font?: UiFontType;
+    textAlign?: TextAlignType;
 };
 
 /** @public */
 export declare const UiInputResult: ComponentDefinition<PBUiInputResult>;
 
+/**
+ * @public
+ */
+export declare type UiLabelProps = Omit<PBUiText, 'textAlign' | 'font'> & {
+    /** default='middle-center' */
+    textAlign?: TextAlignType | undefined;
+    /** default='sans-serif' */
+    font?: UiFontType | undefined;
+};
+
 export declare type Uint32 = number;
 
 /**
@@ -4699,16 +4793,15 @@ export declare type uint32 = number;
 /** @public */
 export declare const UiText: ComponentDefinition<PBUiText>;
 
-/**
- * @public
- */
-export declare type UiTextProps = PBUiText;
-
 /**
  * @public
  */
 export declare type UiTexture = {
-    texture?: Texture;
+    texture?: {
+        src: string;
+        wrapMode?: TextureWrapType;
+        filterMode?: TextureFilterType;
+    };
 };
 
 /**
@@ -4723,14 +4816,14 @@ export declare const UiTransform: ComponentDefinition<PBUiTransform>;
  * @public
  */
 export declare interface UiTransformProps {
-    display?: YGDisplay;
+    display?: DisplayType;
     flex?: number;
-    justifyContent?: YGJustify;
-    positionType?: YGPositionType;
-    alignItems?: YGAlign;
-    alignSelf?: YGAlign;
-    alignContent?: YGAlign;
-    flexDirection?: YGFlexDirection;
+    justifyContent?: JustifyType;
+    positionType?: PositionType;
+    alignItems?: AlignType;
+    alignSelf?: AlignType;
+    alignContent?: AlignType;
+    flexDirection?: FlexDirectionType;
     position?: Partial<Position>;
     padding?: Partial<Position>;
     margin?: Partial<Position>;
@@ -4740,11 +4833,11 @@ export declare interface UiTransformProps {
     maxWidth?: PositionUnit;
     minHeight?: PositionUnit;
     maxHeight?: PositionUnit;
-    flexWrap?: YGWrap;
+    flexWrap?: FlexWrapType;
     flexBasis?: number;
     flexGrow?: number;
     flexShrink?: number;
-    overflow?: YGOverflow;
+    overflow?: OverflowType;
 }
 
 /**

package/dist/index.js

@@ -40696,12 +40696,110 @@
             [unitKey]: unit
         };
     }
+    /**
+     * @internal
+     */
+    function getDisplay(display) {
+        const value = display ? parseDisplay[display] : 0 /* YGDisplay.YGD_FLEX */;
+        return { display: value };
+    }
+    const parseDisplay = {
+        flex: 0 /* YGDisplay.YGD_FLEX */,
+        none: 1 /* YGDisplay.YGD_NONE */
+    };
+    /**
+     * @internal
+     */
+    function getJustify(justify) {
+        const value = justify
+            ? parseJustify[justify]
+            : 0 /* YGJustify.YGJ_FLEX_START */;
+        return { justifyContent: value };
+    }
+    const parseJustify = {
+        center: 1 /* YGJustify.YGJ_CENTER */,
+        'flex-end': 2 /* YGJustify.YGJ_FLEX_END */,
+        'flex-start': 0 /* YGJustify.YGJ_FLEX_START */,
+        'space-around': 4 /* YGJustify.YGJ_SPACE_AROUND */,
+        'space-between': 3 /* YGJustify.YGJ_SPACE_BETWEEN */,
+        'space-evenly': 5 /* YGJustify.YGJ_SPACE_EVENLY */
+    };
+    /**
+     * @internal
+     */
+    function getAlign(prop, align, defaultValue) {
+        const value = align ? parseAligns[align] : defaultValue;
+        return { [prop]: value };
+    }
+    const parseAligns = {
+        auto: 0 /* YGAlign.YGA_AUTO */,
+        baseline: 5 /* YGAlign.YGA_BASELINE */,
+        center: 2 /* YGAlign.YGA_CENTER */,
+        'flex-end': 3 /* YGAlign.YGA_FLEX_END */,
+        'flex-start': 1 /* YGAlign.YGA_FLEX_START */,
+        stretch: 4 /* YGAlign.YGA_STRETCH */,
+        'space-between': 6 /* YGAlign.YGA_SPACE_BETWEEN */,
+        'space-around': 7 /* YGAlign.YGA_SPACE_AROUND */
+    };
+    /**
+     * @internal
+     */
+    function getFlexDirection(flexDirection) {
+        const value = flexDirection
+            ? parseFlexDirection[flexDirection]
+            : 0 /* YGFlexDirection.YGFD_ROW */;
+        return { flexDirection: value };
+    }
+    const parseFlexDirection = {
+        row: 0 /* YGFlexDirection.YGFD_ROW */,
+        column: 1 /* YGFlexDirection.YGFD_COLUMN */,
+        'row-reverse': 3 /* YGFlexDirection.YGFD_ROW_REVERSE */,
+        'column-reverse': 2 /* YGFlexDirection.YGFD_COLUMN_REVERSE */
+    };
+    /**
+     * @internal
+     */
+    function getFlexWrap(flexWrap) {
+        const value = flexWrap ? parseFlexWrap[flexWrap] : 1 /* YGWrap.YGW_WRAP */;
+        return { flexWrap: value };
+    }
+    const parseFlexWrap = {
+        wrap: 1 /* YGWrap.YGW_WRAP */,
+        nowrap: 0 /* YGWrap.YGW_NO_WRAP */,
+        'wrap-reverse': 2 /* YGWrap.YGW_WRAP_REVERSE */
+    };
+    /**
+     * @internal
+     */
+    function getOverflow(overflow) {
+        const value = overflow
+            ? parseOverflow[overflow]
+            : 0 /* YGOverflow.YGO_VISIBLE */;
+        return { overflow: value };
+    }
+    const parseOverflow = {
+        visible: 0 /* YGOverflow.YGO_VISIBLE */,
+        scroll: 2 /* YGOverflow.YGO_SCROLL */,
+        hidden: 1 /* YGOverflow.YGO_HIDDEN */
+    };
+    /**
+     * @internal
+     */
+    function getPoistionType(position) {
+        const value = position
+            ? parsePositionType[position]
+            : 0 /* YGPositionType.YGPT_RELATIVE */;
+        return { positionType: value };
+    }
+    const parsePositionType = {
+        relative: 0 /* YGPositionType.YGPT_RELATIVE */,
+        absolute: 1 /* YGPositionType.YGPT_ABSOLUTE */
+    };
 
     const CANVAS_ROOT_ENTITY = 0;
     const defaultUiTransform = {
         parent: CANVAS_ROOT_ENTITY,
         rightOf: 0,
-        display: 0 /* YGDisplay.YGD_FLEX */,
         flexBasis: 0,
         width: 0,
         height: 0,
@@ -40709,10 +40807,6 @@
         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 */,
@@ -40726,9 +40820,8 @@
         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 */,
+        paddingBottomUnit: 0 /* YGUnit.YGU_UNDEFINED */,
         paddingLeft: 0,
         paddingLeftUnit: 0 /* YGUnit.YGU_UNDEFINED */,
         paddingTopUnit: 0 /* YGUnit.YGU_UNDEFINED */,
@@ -40752,34 +40845,60 @@
      */
 
     function parseUiTransform(props = {}) {
-        const { position, padding, margin, height, minHeight, maxHeight, width, maxWidth, minWidth, ...otherProps } = props;
+        const { height, minHeight, maxHeight, width, minWidth, maxWidth, ...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')
+            ...parsePosition(props.position, 'position'),
+            ...parsePosition(props.margin, 'margin'),
+            ...parsePosition(props.padding, 'padding'),
+            ...parseSize(props.height, 'height'),
+            ...parseSize(props.minHeight, 'minHeight'),
+            ...parseSize(props.maxHeight, 'maxHeight'),
+            ...parseSize(props.width, 'width'),
+            ...parseSize(props.minWidth, 'minWidth'),
+            ...parseSize(props.maxWidth, 'maxWidth'),
+            ...getDisplay(props.display),
+            ...getAlign('alignContent', props.alignContent, 1 /* YGAlign.YGA_FLEX_START */),
+            ...getAlign('alignSelf', props.alignSelf, 1 /* YGAlign.YGA_FLEX_START */),
+            ...getAlign('alignItems', props.alignItems, 1 /* YGAlign.YGA_FLEX_START */),
+            ...getJustify(props.justifyContent),
+            ...getFlexDirection(props.flexDirection),
+            ...getFlexWrap(props.flexWrap),
+            ...getOverflow(props.overflow),
+            ...getPoistionType(props.positionType)
         };
     }
 
+    const parseTextureMode = {
+        'nine-slices': 0 /* BackgroundTextureMode.NINE_SLICES */,
+        center: 1 /* BackgroundTextureMode.CENTER */,
+        stretch: 2 /* BackgroundTextureMode.STRETCH */
+    };
+    /**
+     * @internal
+     */
+    function getTextureMode(mode) {
+        const value = mode
+            ? parseTextureMode[mode]
+            : 1 /* BackgroundTextureMode.CENTER */;
+        return { textureMode: value };
+    }
     function isAvatarTexture(props) {
         return !!props.avatarTexture;
     }
     function isTexture(props) {
         return !!props.texture;
     }
+    /**
+     * @internal
+     */
     function getTexture(props) {
         if (isTexture(props) && props.texture) {
             return {
                 tex: {
                     $case: 'texture',
-                    texture: props.texture
+                    texture: parseTexture(props.texture)
                 }
             };
         }
@@ -40787,12 +40906,31 @@
             return {
                 tex: {
                     $case: 'avatarTexture',
-                    avatarTexture: props.avatarTexture
+                    avatarTexture: parseTexture(props.avatarTexture)
                 }
             };
         }
         return undefined;
     }
+    function parseTexture(texture) {
+        return {
+            ...texture,
+            wrapMode: texture.wrapMode ? parseWrap[texture.wrapMode] : undefined,
+            filterMode: texture.filterMode ? parseFilter[texture.filterMode] : undefined
+        };
+    }
+    const parseWrap = {
+        repeat: 0 /* TextureWrapMode.TWM_REPEAT */,
+        clamp: 1 /* TextureWrapMode.TWM_CLAMP */,
+        mirror: 2 /* TextureWrapMode.TWM_MIRROR */,
+        'mirror-once': 3 /* TextureWrapMode.TWM_MIRROR_ONCE */
+    };
+    const parseFilter = {
+        point: 0 /* TextureFilterMode.TFM_POINT */,
+        'bi-linear': 1 /* TextureFilterMode.TFM_BILINEAR */,
+        'tri-linear': 2 /* TextureFilterMode.TFM_TRILINEAR */
+    };
+
     /**
      * @public
      */
@@ -40803,9 +40941,9 @@
         const texture = getTexture(props);
         return {
             ...props,
+            ...getTextureMode(props.textureMode),
             uvs: props.uvs ?? [],
-            texture,
-            textureMode: props.textureMode ?? 1 /* BackgroundTextureMode.CENTER */
+            texture
         };
     }
 
@@ -40832,13 +40970,49 @@
     const listenersKey = Object.keys(listeners);
     const isListener = (key) => listenersKey.includes(key);
 
+    const parseFont = {
+        'sans-serif': 0 /* Font.F_SANS_SERIF */,
+        serif: 1 /* Font.F_SERIF */,
+        monospace: 2 /* Font.F_MONOSPACE */
+    };
+    /**
+     * @internal
+     */
+    function getFont(font) {
+        if (!font)
+            return undefined;
+        return { font: parseFont[font] };
+    }
+    const parseTextAlign = {
+        'top-left': 0 /* TextAlignMode.TAM_TOP_LEFT */,
+        'top-center': 1 /* TextAlignMode.TAM_TOP_CENTER */,
+        'top-right': 2 /* TextAlignMode.TAM_TOP_RIGHT */,
+        'middle-left': 3 /* TextAlignMode.TAM_MIDDLE_LEFT */,
+        'middle-center': 4 /* TextAlignMode.TAM_MIDDLE_CENTER */,
+        'middle-right': 5 /* TextAlignMode.TAM_MIDDLE_RIGHT */,
+        'bottom-left': 6 /* TextAlignMode.TAM_BOTTOM_LEFT */,
+        'bottom-center': 7 /* TextAlignMode.TAM_BOTTOM_CENTER */,
+        'bottom-right': 8 /* TextAlignMode.TAM_BOTTOM_RIGHT */
+    };
+    /**
+     * @internal
+     */
+    function getTextAlign(textAlign) {
+        if (!textAlign)
+            return undefined;
+        return { textAlign: parseTextAlign[textAlign] };
+    }
+
     function parseUiDropdown(props) {
+        const { textAlign, font, ...otherProps } = props;
         return {
             acceptEmpty: false,
             options: [],
             selectedIndex: props.acceptEmpty ? -1 : 0,
             disabled: false,
-            ...props
+            ...otherProps,
+            ...getTextAlign(textAlign),
+            ...getFont(font)
         };
     }
     /**
@@ -40858,10 +41032,13 @@
     }
 
     function parseUiInput(props) {
+        const { textAlign, font, ...otherProps } = props;
         return {
             disabled: false,
             placeholder: '',
-            ...props
+            ...otherProps,
+            ...getTextAlign(textAlign),
+            ...getFont(font)
         };
     }
     /**
@@ -40892,7 +41069,13 @@
             onMouseDown,
             onMouseUp
         });
-        return ReactEcs$1.createElement("entity", { ...commonProps, uiText: uiTextProps });
+        const { font, textAlign, ...textProps } = uiTextProps;
+        const uiText = {
+            ...textProps,
+            ...getFont(font),
+            ...getTextAlign(textAlign)
+        };
+        return ReactEcs$1.createElement("entity", { ...commonProps, uiText: uiText });
     }
 
     function getButtonProps(props) {
@@ -40915,15 +41098,18 @@
      */
 
     function Button(props) {
-        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...uiTextProps } = props;
+        const { uiTransform, uiBackground, onMouseDown, onMouseUp, ...otherProps } = props;
         const buttonProps = getButtonProps(props);
         const uiBackgroundProps = parseUiBackground({
             ...buttonProps.uiBackground,
             ...uiBackground
         });
+        const { font, textAlign, ...uiTexProps } = otherProps;
         const textProps = {
             ...buttonProps.uiText,
-            ...uiTextProps
+            ...uiTexProps,
+            ...getFont(font),
+            ...getTextAlign(textAlign)
         };
         const uiTransformProps = parseUiTransform({
             height: 36,