UNPKG

dcl-ui-toolkit

Version:

A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.

40 lines 7.55 kB
import { Color4 } from '@dcl/sdk/math'; import ReactEcs, { Label } from '@dcl/sdk/react-ecs'; import { UIObject } from '../UIObject'; import { defaultFont } from '../../constants/font'; const cornerLabelInitialConfig = { startHidden: true, value: '', xOffset: -40, yOffset: 70, color: Color4.White(), size: 25, }; export class CornerLabel extends UIObject { constructor({ startHidden = cornerLabelInitialConfig.startHidden, value = cornerLabelInitialConfig.value, xOffset = cornerLabelInitialConfig.xOffset, yOffset = cornerLabelInitialConfig.yOffset, color = cornerLabelInitialConfig.color, size = cornerLabelInitialConfig.size, }) { super({ startHidden }); this.xOffset = xOffset; this.yOffset = yOffset; this.color = color; this.size = size; this._value = value; this.textElement = { textAlign: 'bottom-right', font: defaultFont, uiTransform: { positionType: 'absolute', }, }; } set(newValue = '') { this._value = newValue; } render(key) { return (ReactEcs.createElement(Label, { key: key, ...this.textElement, color: this.color, fontSize: this.size, value: String(this._value), uiTransform: { ...this.textElement.uiTransform, display: this.visible ? 'flex' : 'none', position: { bottom: this.yOffset, right: this.xOffset * -1 }, } })); } } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvQ29ybmVyTGFiZWwvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFDdEMsT0FBTyxRQUFRLEVBQUUsRUFBRSxLQUFLLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUlwRCxPQUFPLEVBQUUsUUFBUSxFQUFrQixNQUFNLGFBQWEsQ0FBQTtBQUV0RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFlbEQsTUFBTSx3QkFBd0IsR0FBZ0M7SUFDNUQsV0FBVyxFQUFFLElBQUk7SUFDakIsS0FBSyxFQUFFLEVBQUU7SUFDVCxPQUFPLEVBQUUsQ0FBQyxFQUFFO0lBQ1osT0FBTyxFQUFFLEVBQUU7SUFDWCxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFBRTtJQUNyQixJQUFJLEVBQUUsRUFBRTtDQUNBLENBQUE7QUFhVixNQUFNLE9BQU8sV0FBWSxTQUFRLFFBQVE7SUFVdkMsWUFBWSxFQUNWLFdBQVcsR0FBRyx3QkFBd0IsQ0FBQyxXQUFXLEVBQ2xELEtBQUssR0FBRyx3QkFBd0IsQ0FBQyxLQUFLLEVBQ3RDLE9BQU8sR0FBRyx3QkFBd0IsQ0FBQyxPQUFPLEVBQzFDLE9BQU8sR0FBRyx3QkFBd0IsQ0FBQyxPQUFPLEVBQzFDLEtBQUssR0FBRyx3QkFBd0IsQ0FBQyxLQUFLLEVBQ3RDLElBQUksR0FBRyx3QkFBd0IsQ0FBQyxJQUFJLEdBQ2xCO1FBQ2xCLEtBQUssQ0FBQyxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUE7UUFFdEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUE7UUFDdEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUE7UUFDdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUE7UUFDbEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUE7UUFFaEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUE7UUFFbkIsSUFBSSxDQUFDLFdBQVcsR0FBRztZQUNqQixTQUFTLEVBQUUsY0FBYztZQUN6QixJQUFJLEVBQUUsV0FBVztZQUNqQixXQUFXLEVBQUU7Z0JBQ1gsWUFBWSxFQUFFLFVBQVU7YUFDekI7U0FDRixDQUFBO0lBQ0gsQ0FBQztJQVFNLEdBQUcsQ0FBQyxXQUE0QixFQUFFO1FBQ3ZDLElBQUksQ0FBQyxNQUFNLEdBQUcsUUFBUSxDQUFBO0lBQ3hCLENBQUM7SUFFTSxNQUFNLENBQUMsR0FBWTtRQUN4QixPQUFPLENBQ0wsdUJBQUMsS0FBSyxJQUNKLEdBQUcsRUFBRSxHQUFHLEtBQ0osSUFBSSxDQUFDLFdBQVcsRUFDcEIsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLEVBQ2pCLFFBQVEsRUFBRSxJQUFJLENBQUMsSUFBSSxFQUNuQixLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsRUFDMUIsV0FBVyxFQUFFO2dCQUNYLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXO2dCQUMvQixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO2dCQUN2QyxRQUFRLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUMsRUFBRTthQUM3RCxHQUNELENBQ0gsQ0FBQTtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yNCB9IGZyb20gJ0BkY2wvc2RrL21hdGgnXG5pbXBvcnQgUmVhY3RFY3MsIHsgTGFiZWwgfSBmcm9tICdAZGNsL3Nkay9yZWFjdC1lY3MnXG5pbXBvcnQgeyBFbnRpdHlQcm9wVHlwZXMgfSBmcm9tICdAZGNsL3JlYWN0LWVjcy9kaXN0L2NvbXBvbmVudHMvdHlwZXMnXG5pbXBvcnQgeyBVaUxhYmVsUHJvcHMgfSBmcm9tICdAZGNsL3JlYWN0LWVjcy9kaXN0L2NvbXBvbmVudHMvTGFiZWwvdHlwZXMnXG5cbmltcG9ydCB7IFVJT2JqZWN0LCBVSU9iamVjdENvbmZpZyB9IGZyb20gJy4uL1VJT2JqZWN0J1xuXG5pbXBvcnQgeyBkZWZhdWx0Rm9udCB9IGZyb20gJy4uLy4uL2NvbnN0YW50cy9mb250J1xuXG5leHBvcnQgdHlwZSBDb3JuZXJMYWJlbFRleHRFbGVtZW50ID0gT21pdDxVaUxhYmVsUHJvcHMsICd2YWx1ZScgfCAnZm9udFNpemUnIHwgJ2NvbG9yJz4gJlxuICBPbWl0PEVudGl0eVByb3BUeXBlcywgJ3VpVHJhbnNmb3JtJz4gJiB7XG4gICAgdWlUcmFuc2Zvcm0/OiBPbWl0PE5vbk51bGxhYmxlPEVudGl0eVByb3BUeXBlc1sndWlUcmFuc2Zvcm0nXT4sICdkaXNwbGF5JyB8ICdwb3NpdGlvbic+XG4gIH1cblxuZXhwb3J0IHR5cGUgQ29ybmVyTGFiZWxDb25maWcgPSBVSU9iamVjdENvbmZpZyAmIHtcbiAgdmFsdWU6IHN0cmluZyB8IG51bWJlclxuICB4T2Zmc2V0PzogbnVtYmVyXG4gIHlPZmZzZXQ/OiBudW1iZXJcbiAgY29sb3I/OiBDb2xvcjRcbiAgc2l6ZT86IG51bWJlclxufVxuXG5jb25zdCBjb3JuZXJMYWJlbEluaXRpYWxDb25maWc6IFJlcXVpcmVkPENvcm5lckxhYmVsQ29uZmlnPiA9IHtcbiAgc3RhcnRIaWRkZW46IHRydWUsXG4gIHZhbHVlOiAnJyxcbiAgeE9mZnNldDogLTQwLFxuICB5T2Zmc2V0OiA3MCxcbiAgY29sb3I6IENvbG9yNC5XaGl0ZSgpLFxuICBzaXplOiAyNSxcbn0gYXMgY29uc3RcblxuLyoqXG4gKiBEaXNwbGF5cyBhIHRleHQgb24gY2VudGVyIG9mIHRoZSBVSS5cbiAqXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj10cnVlXSBzdGFydGluZyBoaWRkZW5cbiAqIEBwYXJhbSB7c3RyaW5nIHwgbnVtYmVyfSBbdmFsdWU9JyddIHN0YXJ0aW5nIHZhbHVlXG4gKiBAcGFyYW0ge251bWJlcn0gW3hPZmZzZXQ9LTQwXSBvZmZzZXQgb24gWFxuICogQHBhcmFtIHtudW1iZXJ9IFt5T2Zmc2V0PTcwXSBvZmZzZXQgb24gWVxuICogQHBhcmFtIHtDb2xvcjR9IFtjb2xvcj1Db2xvcjQuV2hpdGUoKV0gdGV4dCBjb2xvclxuICogQHBhcmFtIHtudW1iZXJ9IFtzaXplPTI1XSB0ZXh0IHNpemVcbiAqXG4gKi9cbmV4cG9ydCBjbGFzcyBDb3JuZXJMYWJlbCBleHRlbmRzIFVJT2JqZWN0IHtcbiAgcHVibGljIHRleHRFbGVtZW50OiBDb3JuZXJMYWJlbFRleHRFbGVtZW50XG5cbiAgcHVibGljIHhPZmZzZXQ6IG51bWJlclxuICBwdWJsaWMgeU9mZnNldDogbnVtYmVyXG4gIHB1YmxpYyBjb2xvcjogQ29sb3I0XG4gIHB1YmxpYyBzaXplOiBudW1iZXJcblxuICBwcml2YXRlIF92YWx1ZTogc3RyaW5nIHwgbnVtYmVyXG5cbiAgY29uc3RydWN0b3Ioe1xuICAgIHN0YXJ0SGlkZGVuID0gY29ybmVyTGFiZWxJbml0aWFsQ29uZmlnLnN0YXJ0SGlkZGVuLFxuICAgIHZhbHVlID0gY29ybmVyTGFiZWxJbml0aWFsQ29uZmlnLnZhbHVlLFxuICAgIHhPZmZzZXQgPSBjb3JuZXJMYWJlbEluaXRpYWxDb25maWcueE9mZnNldCxcbiAgICB5T2Zmc2V0ID0gY29ybmVyTGFiZWxJbml0aWFsQ29uZmlnLnlPZmZzZXQsXG4gICAgY29sb3IgPSBjb3JuZXJMYWJlbEluaXRpYWxDb25maWcuY29sb3IsXG4gICAgc2l6ZSA9IGNvcm5lckxhYmVsSW5pdGlhbENvbmZpZy5zaXplLFxuICB9OiBDb3JuZXJMYWJlbENvbmZpZykge1xuICAgIHN1cGVyKHsgc3RhcnRIaWRkZW4gfSlcblxuICAgIHRoaXMueE9mZnNldCA9IHhPZmZzZXRcbiAgICB0aGlzLnlPZmZzZXQgPSB5T2Zmc2V0XG4gICAgdGhpcy5jb2xvciA9IGNvbG9yXG4gICAgdGhpcy5zaXplID0gc2l6ZVxuXG4gICAgdGhpcy5fdmFsdWUgPSB2YWx1ZVxuXG4gICAgdGhpcy50ZXh0RWxlbWVudCA9IHtcbiAgICAgIHRleHRBbGlnbjogJ2JvdHRvbS1yaWdodCcsXG4gICAgICBmb250OiBkZWZhdWx0Rm9udCxcbiAgICAgIHVpVHJhbnNmb3JtOiB7XG4gICAgICAgIHBvc2l0aW9uVHlwZTogJ2Fic29sdXRlJyxcbiAgICAgIH0sXG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGxhYmVsJ3MgdmFsdWUgdG8gYSBuZXcgc3RyaW5nLlxuICAgKlxuICAgKiBAcGFyYW0ge3N0cmluZyB8IG51bWJlcn0gW25ld1ZhbHVlPScnXSBOZXcgdmFsdWUgZm9yIHRoZSBsYWJlbFxuICAgKlxuICAgKi9cbiAgcHVibGljIHNldChuZXdWYWx1ZTogc3RyaW5nIHwgbnVtYmVyID0gJycpOiB2b2lkIHtcbiAgICB0aGlzLl92YWx1ZSA9IG5ld1ZhbHVlXG4gIH1cblxuICBwdWJsaWMgcmVuZGVyKGtleT86IHN0cmluZyk6IFJlYWN0RWNzLkpTWC5FbGVtZW50IHtcbiAgICByZXR1cm4gKFxuICAgICAgPExhYmVsXG4gICAgICAgIGtleT17a2V5fVxuICAgICAgICB7Li4udGhpcy50ZXh0RWxlbWVudH1cbiAgICAgICAgY29sb3I9e3RoaXMuY29sb3J9XG4gICAgICAgIGZvbnRTaXplPXt0aGlzLnNpemV9XG4gICAgICAgIHZhbHVlPXtTdHJpbmcodGhpcy5fdmFsdWUpfVxuICAgICAgICB1aVRyYW5zZm9ybT17e1xuICAgICAgICAgIC4uLnRoaXMudGV4dEVsZW1lbnQudWlUcmFuc2Zvcm0sXG4gICAgICAgICAgZGlzcGxheTogdGhpcy52aXNpYmxlID8gJ2ZsZXgnIDogJ25vbmUnLFxuICAgICAgICAgIHBvc2l0aW9uOiB7IGJvdHRvbTogdGhpcy55T2Zmc2V0LCByaWdodDogdGhpcy54T2Zmc2V0ICogLTEgfSxcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0=