@dcl/react-ecs 7.4.3-7935604720.commit-e16c799 → 7.4.3-7976826769.commit-bfde8e1

package/dist/components/Button/index.js

@@ -1,5 +1,5 @@
 import { ReactEcs } from '../../react-ecs';
-import { getFont, getTextAlign } from '../Label/utils';
+import { getFont, getFontSize, getTextAlign } from '../Label/utils';
 import { parseUiBackground } from '../uiBackground';
 import { parseUiTransform } from '../uiTransform';
 function getButtonProps(props) {
@@ -35,12 +35,13 @@ export function Button(props) {
         ...buttonProps.uiBackground,
         ...uiBackground
     });
-    const { font, textAlign, ...uiTexProps } = otherProps;
+    const { font, textAlign, fontSize, ...uiTexProps } = otherProps;
     const textProps = {
         ...buttonProps.uiText,
         ...uiTexProps,
         ...getFont(font),
-        ...getTextAlign(textAlign)
+        ...getTextAlign(textAlign),
+        ...getFontSize(fontSize)
     };
     const uiTransformProps = parseUiTransform({
         height: 36,

package/dist/components/Dropdown/index.js

@@ -1,8 +1,8 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
-import { getFont, getTextAlign } from '../Label/utils';
+import { getFont, getFontSize, getTextAlign } from '../Label/utils';
 function parseUiDropdown(props) {
-    const { textAlign, font, ...otherProps } = props;
+    const { textAlign, font, fontSize, ...otherProps } = props;
     return {
         acceptEmpty: false,
         options: [],
@@ -10,7 +10,8 @@ function parseUiDropdown(props) {
         disabled: false,
         ...otherProps,
         ...getTextAlign(textAlign),
-        ...getFont(font)
+        ...getFont(font),
+        ...getFontSize(fontSize)
     };
 }
 /**

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

@@ -1,12 +1,13 @@
 import { PBUiDropdown } from '@dcl/ecs';
 import { TextAlignType, UiFontType } from '../Label/types';
-import { EntityPropTypes } from '../types';
+import { EntityPropTypes, ScaleUnit } from '../types';
 /**
  * @public
  * Dropdown Props
  */
-export interface UiDropdownProps extends EntityPropTypes, Omit<Partial<PBUiDropdown>, 'textAlign' | 'font'> {
+export interface UiDropdownProps extends EntityPropTypes, Omit<Partial<PBUiDropdown>, 'textAlign' | 'font' | 'fontSize'> {
     onChange?(value: number): void;
     font?: UiFontType;
     textAlign?: TextAlignType;
+    fontSize?: ScaleUnit;
 }

package/dist/components/Input/index.js

@@ -1,14 +1,15 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
-import { getTextAlign, getFont } from '../Label/utils';
+import { getTextAlign, getFont, getFontSize } from '../Label/utils';
 function parseUiInput(props) {
-    const { textAlign, font, ...otherProps } = props;
+    const { textAlign, font, fontSize, ...otherProps } = props;
     return {
         disabled: false,
         placeholder: '',
         ...otherProps,
         ...getTextAlign(textAlign),
-        ...getFont(font)
+        ...getFont(font),
+        ...getFontSize(fontSize)
     };
 }
 /**

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

@@ -1,13 +1,15 @@
 import { PBUiInput } from '@dcl/ecs';
 import { TextAlignType, UiFontType } from '../Label/types';
+import { ScaleUnit } from '../types';
 /**
  * @public
  */
-export interface UiInputProps extends Omit<PBUiInput, 'font' | 'textAlign'> {
+export interface UiInputProps extends Omit<PBUiInput, 'font' | 'textAlign' | 'fontSize'> {
     /** function to be called on value change  */
     onChange?(value: string): void;
     /** function to be called on text field submit  */
     onSubmit?(value: string): void;
     font?: UiFontType;
     textAlign?: TextAlignType;
+    fontSize?: ScaleUnit;
 }

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

@@ -1,6 +1,7 @@
 import { ReactEcs } from '../../react-ecs';
 import { EntityPropTypes } from '../types';
 import { UiLabelProps } from './types';
+export { scaleFontSize } from './utils';
 /**
  *
  * @public

package/dist/components/Label/index.js

@@ -1,6 +1,7 @@
 import { parseProps } from '../utils';
 import { ReactEcs } from '../../react-ecs';
-import { getFont, getTextAlign } from './utils';
+import { getFont, getFontSize, getTextAlign } from './utils';
+export { scaleFontSize } from './utils';
 /**
  *
  * @public
@@ -22,11 +23,12 @@ export function Label(props) {
         onMouseDown,
         onMouseUp
     });
-    const { font, textAlign, ...textProps } = uiTextProps;
+    const { font, textAlign, fontSize, ...textProps } = uiTextProps;
     const uiText = {
         ...textProps,
         ...getFont(font),
-        ...getTextAlign(textAlign)
+        ...getTextAlign(textAlign),
+        ...getFontSize(fontSize)
     };
     return ReactEcs.createElement("entity", { ...commonProps, uiText: uiText });
 }

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

@@ -1,4 +1,5 @@
 import { Color4 } from '@dcl/ecs/dist/components/generated/pb/decentraland/common/colors.gen';
+import { ScaleUnit } from '../types';
 /**
  * Label component props
  * @public
@@ -9,7 +10,7 @@ export interface UiLabelProps {
     /** Color of the label. @defaultValue `{ r: 1, g: 1, b: 1, a: 1 }` */
     color?: Color4 | undefined;
     /** Label font size. @defaultValue 10 */
-    fontSize?: number | undefined;
+    fontSize?: ScaleUnit | undefined;
     /** Label align position. @defaultValue 'middle-center' */
     textAlign?: TextAlignType | undefined;
     /** Label font type. @defaultValue 'sans-serif' */

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

@@ -1 +1,11 @@
-export {};
+import { ScaleContext, ScaleUnit } from '../types';
+/**
+ * Scales a font size depending on a context's width/height
+ * @param {number} fontSize size of the font to scale
+ * @param {ScaleUnit} [scaleUnit=0.39] the scaling unit (uses "width" as unit if a number is supplied)
+ * @param {ScaleContext} [ctx=viewport] the context where to apply the scaling
+ * @returns {number} the fontSize scaled
+ * @see https://matthewjamestaylor.com/responsive-font-size#fluid
+ * @public
+ */
+export declare function scaleFontSize(fontSize: number, scaleUnit?: ScaleUnit, ctx?: ScaleContext | undefined): number;

package/dist/components/Label/utils.js

@@ -1,3 +1,4 @@
+import { calcOnViewport, getScaleCtx } from '../utils';
 const parseFont = {
     'sans-serif': 0 /* Font.F_SANS_SERIF */,
     serif: 1 /* Font.F_SERIF */,
@@ -30,3 +31,27 @@ export function getTextAlign(textAlign) {
         return undefined;
     return { textAlign: parseTextAlign[textAlign] };
 }
+/**
+ * @internal
+ */
+export function getFontSize(fontSize) {
+    if (!fontSize)
+        return undefined;
+    if (typeof fontSize === 'string')
+        return { fontSize: calcOnViewport(fontSize) };
+    return { fontSize };
+}
+/**
+ * Scales a font size depending on a context's width/height
+ * @param {number} fontSize size of the font to scale
+ * @param {ScaleUnit} [scaleUnit=0.39] the scaling unit (uses "width" as unit if a number is supplied)
+ * @param {ScaleContext} [ctx=viewport] the context where to apply the scaling
+ * @returns {number} the fontSize scaled
+ * @see https://matthewjamestaylor.com/responsive-font-size#fluid
+ * @public
+ */
+export function scaleFontSize(fontSize, scaleUnit = 0.39, ctx = getScaleCtx()) {
+    if (!ctx)
+        return fontSize;
+    return fontSize + calcOnViewport(scaleUnit, ctx);
+}

package/dist/components/index.d.ts

@@ -11,7 +11,7 @@ export * from './Label/types';
 export * from './Button/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
-export { Label } from './Label';
+export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
 /**
  * @public

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import { ReactEcs } from '../react-ecs';
-import { getFont, getTextAlign } from './Label/utils';
+import { getFont, getFontSize, getTextAlign } from './Label/utils';
 import { parseProps } from './utils';
 export * from './types';
 export * from './uiTransform/types';
@@ -11,7 +11,7 @@ export * from './Label/types';
 export * from './Button/types';
 export { Dropdown } from './Dropdown';
 export { Input } from './Input';
-export { Label } from './Label';
+export { Label, scaleFontSize } from './Label';
 export { Button } from './Button';
 /**
  * @public
@@ -23,7 +23,8 @@ export function UiEntity(props) {
         uiText: {
             ...props.uiText,
             ...getFont(props.uiText.font),
-            ...getTextAlign(props.uiText.textAlign)
+            ...getTextAlign(props.uiText.textAlign),
+            ...getFontSize(props.uiText.fontSize)
         }
     };
     return ReactEcs.createElement("entity", { ...parseProps(props), ...uiText });

package/dist/components/types.d.ts

@@ -20,3 +20,22 @@ export interface EntityPropTypes extends Listeners {
  */
 export type Key = number | string;
 export type Children = unknown;
+/**
+ * unit value type. i.e. 'vw' || 'vh'
+ * @public
+ */
+export type ScaleUnits = 'vw' | 'vh';
+/**
+ * unit value specified. i.e. 10 || '10vw' || '10vh'
+ * @public
+ */
+export type ScaleUnit = `${number}${ScaleUnits}` | number;
+/**
+ * context for applying a scale
+ * @public
+ */
+export type ScaleContext = {
+    width: number;
+    height: number;
+    ratio: number;
+};

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

@@ -1,8 +1,9 @@
+import { ScaleUnit } from '../types';
 /**
- * unit value specified. i.e. 1 || '100%' || '1px'
+ * unit value specified. i.e. 1 || '100%' || '1px' || '10vw'
  * @public
  */
-export type PositionUnit = `${number}px` | `${number}%` | number | `${number}`;
+export type PositionUnit = `${number}px` | `${number}%` | number | `${number}` | ScaleUnit;
 /**
  * The values are in clockwise order, beginning at the top: top, right, bottom, then left
 

package/dist/components/uiTransform/utils.js

@@ -1,3 +1,4 @@
+import { calcOnViewport } from '../utils';
 function capitalize(value) {
     return `${value[0].toUpperCase()}${value.slice(1, value.length)}`;
 }
@@ -7,6 +8,12 @@ function isPercent(val) {
 function isPoint(val) {
     return typeof val === 'string' && val.endsWith('px');
 }
+function isVw(val) {
+    return typeof val === 'string' && val.endsWith('vw');
+}
+function isVh(val) {
+    return typeof val === 'string' && val.endsWith('vh');
+}
 function parsePositionUnit(val) {
     function getValue(key, value) {
         return Number(value.slice(0, value.indexOf(key)));
@@ -26,6 +33,9 @@ function parsePositionUnit(val) {
     if (isPoint(val)) {
         return [getValue('px', val), 1 /* YGUnit.YGU_POINT */];
     }
+    if (isVw(val) || isVh(val)) {
+        return [calcOnViewport(val), 1 /* YGUnit.YGU_POINT */];
+    }
     return [undefined, 0 /* YGUnit.YGU_UNDEFINED */];
 }
 export function parsePosition(position = {}, prop) {

package/dist/components/utils.js

@@ -1,3 +1,4 @@
+import { engine, UiCanvasInformation as engineUiCanvasInformation } from '@dcl/ecs';
 import { parseUiBackground } from './uiBackground';
 import { parseUiTransform } from './uiTransform';
 /**
@@ -13,3 +14,47 @@ export function parseProps(props) {
         ...uiBackgroundProps
     };
 }
+/**
+ * @internal
+ */
+export function getScaleAndUnit(scaleUnit) {
+    if (typeof scaleUnit === 'number') {
+        return [scaleUnit, 'vw'];
+    }
+    const value = Number(scaleUnit.slice(0, -2));
+    if (scaleUnit.endsWith('vh'))
+        return [value, 'vh'];
+    if (scaleUnit.endsWith('vw'))
+        return [value, 'vw'];
+    return [NaN, 'vw'];
+}
+/**
+ * @internal
+ */
+export function scaleOnDim(scale, dim, pxRatio) {
+    return (dim / 100) * (scale / pxRatio);
+}
+/**
+ * @internal
+ */
+export function getScaleCtx(_engine = engine) {
+    const UiCanvasInformation = _engine.getComponent(engineUiCanvasInformation.componentId);
+    const canvasInfo = UiCanvasInformation.getOrNull(_engine.RootEntity);
+    if (!canvasInfo)
+        return undefined;
+    const { width, height, devicePixelRatio } = canvasInfo;
+    return { width, height, ratio: devicePixelRatio };
+}
+/**
+ * @internal
+ */
+export function calcOnViewport(value, ctx = getScaleCtx()) {
+    const [scale, unit] = getScaleAndUnit(value);
+    if (!ctx)
+        return scale;
+    const { height, width, ratio } = ctx;
+    if (unit === 'vh')
+        return scaleOnDim(scale, height, ratio);
+    // by default, we scale by 'vw' (width)
+    return scaleOnDim(scale, width, ratio);
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dcl/react-ecs",
   "description": "Decentraland ECS",
-  "version": "7.4.3-7935604720.commit-e16c799",
+  "version": "7.4.3-7976826769.commit-bfde8e1",
   "author": "DCL",
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
-    "@dcl/ecs": "7.4.3-7935604720.commit-e16c799",
+    "@dcl/ecs": "7.4.3-7976826769.commit-bfde8e1",
     "react": "^18.2.0",
     "react-reconciler": "^0.29.0"
   },
@@ -39,5 +39,5 @@
     "tsconfig": "./tsconfig.json"
   },
   "types": "./dist/index.d.ts",
-  "commit": "e16c7990a84c14a83e410262a8912cf478229b6f"
+  "commit": "bfde8e1d46e4becfa46148c293f74be9daabf1a3"
 }