dcl-ui-toolkit
Version:
A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.
53 lines • 9.72 kB
JavaScript
import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs';
import { InPromptUIObject } from '../../InPromptUIObject';
import { getImageAtlasMapping } from '../../../../../utils/imageUtils';
const promptIconInitialConfig = {
startHidden: false,
image: '',
width: 128,
height: 128,
xPosition: 0,
yPosition: 0,
};
export class PromptIcon extends InPromptUIObject {
constructor({ section, parent, startHidden = promptIconInitialConfig.startHidden, image = promptIconInitialConfig.image, width = promptIconInitialConfig.width, height = promptIconInitialConfig.height, xPosition = promptIconInitialConfig.xPosition, yPosition = promptIconInitialConfig.yPosition, }) {
super({
startHidden,
parent,
});
this.width = width;
this.height = height;
this.xPosition = xPosition;
this.yPosition = yPosition;
this.image = image;
if (section)
this.section = section;
this.imageElement = {
uiTransform: {
positionType: 'absolute',
},
uiBackground: {
textureMode: 'stretch',
},
};
}
render(key) {
this._xPosition = this.promptWidth / -2 + this.width / 2 + this.xPosition;
this._yPosition = this.promptHeight / 2 + this.height / -2 + this.yPosition;
return (ReactEcs.createElement(UiEntity, { key: key, ...this.imageElement, uiBackground: {
...this.imageElement.uiBackground,
texture: {
...this.imageElement.uiBackground?.texture,
src: this.image,
},
uvs: getImageAtlasMapping(this.section),
}, uiTransform: {
...this.imageElement.uiTransform,
display: this.visible ? 'flex' : 'none',
position: { bottom: this._yPosition, right: this._xPosition * -1 },
width: this.width,
height: this.height,
} }));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvcHJvbXB0cy9Qcm9tcHQvY29tcG9uZW50cy9JY29uL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFFBQVEsRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBR3ZELE9BQU8sRUFBRSxnQkFBZ0IsRUFBMEIsTUFBTSx3QkFBd0IsQ0FBQTtBQUVqRixPQUFPLEVBQUUsb0JBQW9CLEVBQWtCLE1BQU0saUNBQWlDLENBQUE7QUFxQnRGLE1BQU0sdUJBQXVCLEdBQTJEO0lBQ3RGLFdBQVcsRUFBRSxLQUFLO0lBQ2xCLEtBQUssRUFBRSxFQUFFO0lBQ1QsS0FBSyxFQUFFLEdBQUc7SUFDVixNQUFNLEVBQUUsR0FBRztJQUNYLFNBQVMsRUFBRSxDQUFDO0lBQ1osU0FBUyxFQUFFLENBQUM7Q0FDSixDQUFBO0FBYVYsTUFBTSxPQUFPLFVBQVcsU0FBUSxnQkFBZ0I7SUFhOUMsWUFBWSxFQUNWLE9BQU8sRUFDUCxNQUFNLEVBQ04sV0FBVyxHQUFHLHVCQUF1QixDQUFDLFdBQVcsRUFDakQsS0FBSyxHQUFHLHVCQUF1QixDQUFDLEtBQUssRUFDckMsS0FBSyxHQUFHLHVCQUF1QixDQUFDLEtBQUssRUFDckMsTUFBTSxHQUFHLHVCQUF1QixDQUFDLE1BQU0sRUFDdkMsU0FBUyxHQUFHLHVCQUF1QixDQUFDLFNBQVMsRUFDN0MsU0FBUyxHQUFHLHVCQUF1QixDQUFDLFNBQVMsR0FDNUI7UUFDakIsS0FBSyxDQUFDO1lBQ0osV0FBVztZQUNYLE1BQU07U0FDUCxDQUFDLENBQUE7UUFFRixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQTtRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtRQUNwQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQTtRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQTtRQUMxQixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQTtRQUNsQixJQUFJLE9BQU87WUFBRSxJQUFJLENBQUMsT0FBTyxHQUFHLE9BQU8sQ0FBQTtRQUVuQyxJQUFJLENBQUMsWUFBWSxHQUFHO1lBQ2xCLFdBQVcsRUFBRTtnQkFDWCxZQUFZLEVBQUUsVUFBVTthQUN6QjtZQUNELFlBQVksRUFBRTtnQkFDWixXQUFXLEVBQUUsU0FBUzthQUN2QjtTQUNGLENBQUE7SUFDSCxDQUFDO0lBRU0sTUFBTSxDQUFDLEdBQVk7UUFDeEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUE7UUFDekUsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUE7UUFFM0UsT0FBTyxDQUNMLHVCQUFDLFFBQVEsSUFDUCxHQUFHLEVBQUUsR0FBRyxLQUNKLElBQUksQ0FBQyxZQUFZLEVBQ3JCLFlBQVksRUFBRTtnQkFDWixHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsWUFBWTtnQkFDakMsT0FBTyxFQUFFO29CQUNQLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZLEVBQUUsT0FBTztvQkFDMUMsR0FBRyxFQUFFLElBQUksQ0FBQyxLQUFLO2lCQUNoQjtnQkFDRCxHQUFHLEVBQUUsb0JBQW9CLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQzthQUN4QyxFQUNELFdBQVcsRUFBRTtnQkFDWCxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVztnQkFDaEMsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTTtnQkFDdkMsUUFBUSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFDLEVBQUU7Z0JBQ2xFLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztnQkFDakIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO2FBQ3BCLEdBQ0QsQ0FDSCxDQUFBO0lBQ0gsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0RWNzLCB7IFVpRW50aXR5IH0gZnJvbSAnQGRjbC9zZGsvcmVhY3QtZWNzJ1xuaW1wb3J0IHsgRW50aXR5UHJvcFR5cGVzIH0gZnJvbSAnQGRjbC9yZWFjdC1lY3MvZGlzdC9jb21wb25lbnRzL3R5cGVzJ1xuXG5pbXBvcnQgeyBJblByb21wdFVJT2JqZWN0LCBJblByb21wdFVJT2JqZWN0Q29uZmlnIH0gZnJvbSAnLi4vLi4vSW5Qcm9tcHRVSU9iamVjdCdcblxuaW1wb3J0IHsgZ2V0SW1hZ2VBdGxhc01hcHBpbmcsIEltYWdlQXRsYXNEYXRhIH0gZnJvbSAnLi4vLi4vLi4vLi4vLi4vdXRpbHMvaW1hZ2VVdGlscydcblxuZXhwb3J0IHR5cGUgUHJvbXB0SWNvbkltYWdlRWxlbWVudFByb3BzID0gT21pdDxFbnRpdHlQcm9wVHlwZXMsICd1aVRyYW5zZm9ybScgfCAndWlCYWNrZ3JvdW5kJz4gJiB7XG4gIHVpVHJhbnNmb3JtPzogT21pdDxcbiAgICBOb25OdWxsYWJsZTxFbnRpdHlQcm9wVHlwZXNbJ3VpVHJhbnNmb3JtJ10+LFxuICAgICd3aWR0aCcgfCAnaGVpZ2h0JyB8ICdwb3NpdGlvbicgfCAnZGlzcGxheSdcbiAgPlxuICB1aUJhY2tncm91bmQ/OiBPbWl0PE5vbk51bGxhYmxlPEVudGl0eVByb3BUeXBlc1sndWlCYWNrZ3JvdW5kJ10+LCAndXZzJz4gJiB7XG4gICAgdGV4dHVyZT86IE9taXQ8Tm9uTnVsbGFibGU8Tm9uTnVsbGFibGU8RW50aXR5UHJvcFR5cGVzWyd1aUJhY2tncm91bmQnXT5bJ3RleHR1cmUnXT4sICdzcmMnPlxuICB9XG59XG5cbmV4cG9ydCB0eXBlIFByb21wdEljb25Db25maWcgPSBJblByb21wdFVJT2JqZWN0Q29uZmlnICYge1xuICBpbWFnZTogc3RyaW5nXG4gIHdpZHRoPzogbnVtYmVyXG4gIGhlaWdodD86IG51bWJlclxuICB4UG9zaXRpb24/OiBudW1iZXJcbiAgeVBvc2l0aW9uPzogbnVtYmVyXG4gIHNlY3Rpb24/OiBJbWFnZUF0bGFzRGF0YVxufVxuXG5jb25zdCBwcm9tcHRJY29uSW5pdGlhbENvbmZpZzogT21pdDxSZXF1aXJlZDxQcm9tcHRJY29uQ29uZmlnPiwgJ3NlY3Rpb24nIHwgJ3BhcmVudCc+ID0ge1xuICBzdGFydEhpZGRlbjogZmFsc2UsXG4gIGltYWdlOiAnJyxcbiAgd2lkdGg6IDEyOCxcbiAgaGVpZ2h0OiAxMjgsXG4gIHhQb3NpdGlvbjogMCxcbiAgeVBvc2l0aW9uOiAwLFxufSBhcyBjb25zdFxuXG4vKipcbiAqIFByb21wdCBpY29uXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj1mYWxzZV0gc3RhcnRpbmcgaGlkZGVuXG4gKiBAcGFyYW0ge3N0cmluZ30gaW1hZ2UgcGF0aCB0byBpbWFnZSBmaWxlXG4gKiBAcGFyYW0ge251bWJlcn0gW3dpZHRoPTEyOF0gaW1hZ2Ugd2lkdGhcbiAqIEBwYXJhbSB7bnVtYmVyfSBbaGVpZ2h0PTEyOF0gaW1hZ2UgaGVpZ2h0XG4gKiBAcGFyYW0ge251bWJlcn0gW3hQb3NpdGlvbj0wXSBQb3NpdGlvbiBvbiBYIG9uIHRoZSBwcm9tcHQsIGNvdW50aW5nIGZyb20gdGhlIGNlbnRlciBvZiB0aGUgcHJvbXB0XG4gKiBAcGFyYW0ge251bWJlcn0gW3lQb3NpdGlvbj0wXSBQb3NpdGlvbiBvbiBZIG9uIHRoZSBwcm9tcHQsIGNvdW50aW5nIGZyb20gdGhlIGNlbnRlciBvZiB0aGUgcHJvbXB0XG4gKiBAcGFyYW0ge0ltYWdlQXRsYXNEYXRhfSBzZWN0aW9uIGN1dCBvdXQgYSBzZWN0aW9uIG9mIHRoZSBpbWFnZSwgYXMgYW4gb2JqZWN0IHNwZWNpZnlpbmcgYXRsYXNXaWR0aCwgYXRsYXNIZWlnaHQsIHNvdXJjZUxlZnQsIHNvdXJjZVRvcCwgc291cmNlV2lkdGggYW5kIHNvdXJjZUhlaWdodFxuICpcbiAqL1xuZXhwb3J0IGNsYXNzIFByb21wdEljb24gZXh0ZW5kcyBJblByb21wdFVJT2JqZWN0IHtcbiAgcHVibGljIGltYWdlRWxlbWVudDogUHJvbXB0SWNvbkltYWdlRWxlbWVudFByb3BzXG5cbiAgcHVibGljIGltYWdlOiBzdHJpbmdcbiAgcHVibGljIHdpZHRoOiBudW1iZXJcbiAgcHVibGljIGhlaWdodDogbnVtYmVyXG4gIHB1YmxpYyB4UG9zaXRpb246IG51bWJlclxuICBwdWJsaWMgeVBvc2l0aW9uOiBudW1iZXJcbiAgcHVibGljIHNlY3Rpb246IEltYWdlQXRsYXNEYXRhIHwgdW5kZWZpbmVkXG5cbiAgcHJpdmF0ZSBfeFBvc2l0aW9uOiBudW1iZXIgfCB1bmRlZmluZWRcbiAgcHJpdmF0ZSBfeVBvc2l0aW9uOiBudW1iZXIgfCB1bmRlZmluZWRcblxuICBjb25zdHJ1Y3Rvcih7XG4gICAgc2VjdGlvbixcbiAgICBwYXJlbnQsXG4gICAgc3RhcnRIaWRkZW4gPSBwcm9tcHRJY29uSW5pdGlhbENvbmZpZy5zdGFydEhpZGRlbixcbiAgICBpbWFnZSA9IHByb21wdEljb25Jbml0aWFsQ29uZmlnLmltYWdlLFxuICAgIHdpZHRoID0gcHJvbXB0SWNvbkluaXRpYWxDb25maWcud2lkdGgsXG4gICAgaGVpZ2h0ID0gcHJvbXB0SWNvbkluaXRpYWxDb25maWcuaGVpZ2h0LFxuICAgIHhQb3NpdGlvbiA9IHByb21wdEljb25Jbml0aWFsQ29uZmlnLnhQb3NpdGlvbixcbiAgICB5UG9zaXRpb24gPSBwcm9tcHRJY29uSW5pdGlhbENvbmZpZy55UG9zaXRpb24sXG4gIH06IFByb21wdEljb25Db25maWcpIHtcbiAgICBzdXBlcih7XG4gICAgICBzdGFydEhpZGRlbixcbiAgICAgIHBhcmVudCxcbiAgICB9KVxuXG4gICAgdGhpcy53aWR0aCA9IHdpZHRoXG4gICAgdGhpcy5oZWlnaHQgPSBoZWlnaHRcbiAgICB0aGlzLnhQb3NpdGlvbiA9IHhQb3NpdGlvblxuICAgIHRoaXMueVBvc2l0aW9uID0geVBvc2l0aW9uXG4gICAgdGhpcy5pbWFnZSA9IGltYWdlXG4gICAgaWYgKHNlY3Rpb24pIHRoaXMuc2VjdGlvbiA9IHNlY3Rpb25cblxuICAgIHRoaXMuaW1hZ2VFbGVtZW50ID0ge1xuICAgICAgdWlUcmFuc2Zvcm06IHtcbiAgICAgICAgcG9zaXRpb25UeXBlOiAnYWJzb2x1dGUnLFxuICAgICAgfSxcbiAgICAgIHVpQmFja2dyb3VuZDoge1xuICAgICAgICB0ZXh0dXJlTW9kZTogJ3N0cmV0Y2gnLFxuICAgICAgfSxcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgcmVuZGVyKGtleT86IHN0cmluZyk6IFJlYWN0RWNzLkpTWC5FbGVtZW50IHtcbiAgICB0aGlzLl94UG9zaXRpb24gPSB0aGlzLnByb21wdFdpZHRoIC8gLTIgKyB0aGlzLndpZHRoIC8gMiArIHRoaXMueFBvc2l0aW9uXG4gICAgdGhpcy5feVBvc2l0aW9uID0gdGhpcy5wcm9tcHRIZWlnaHQgLyAyICsgdGhpcy5oZWlnaHQgLyAtMiArIHRoaXMueVBvc2l0aW9uXG5cbiAgICByZXR1cm4gKFxuICAgICAgPFVpRW50aXR5XG4gICAgICAgIGtleT17a2V5fVxuICAgICAgICB7Li4udGhpcy5pbWFnZUVsZW1lbnR9XG4gICAgICAgIHVpQmFja2dyb3VuZD17e1xuICAgICAgICAgIC4uLnRoaXMuaW1hZ2VFbGVtZW50LnVpQmFja2dyb3VuZCxcbiAgICAgICAgICB0ZXh0dXJlOiB7XG4gICAgICAgICAgICAuLi50aGlzLmltYWdlRWxlbWVudC51aUJhY2tncm91bmQ/LnRleHR1cmUsXG4gICAgICAgICAgICBzcmM6IHRoaXMuaW1hZ2UsXG4gICAgICAgICAgfSxcbiAgICAgICAgICB1dnM6IGdldEltYWdlQXRsYXNNYXBwaW5nKHRoaXMuc2VjdGlvbiksXG4gICAgICAgIH19XG4gICAgICAgIHVpVHJhbnNmb3JtPXt7XG4gICAgICAgICAgLi4udGhpcy5pbWFnZUVsZW1lbnQudWlUcmFuc2Zvcm0sXG4gICAgICAgICAgZGlzcGxheTogdGhpcy52aXNpYmxlID8gJ2ZsZXgnIDogJ25vbmUnLFxuICAgICAgICAgIHBvc2l0aW9uOiB7IGJvdHRvbTogdGhpcy5feVBvc2l0aW9uLCByaWdodDogdGhpcy5feFBvc2l0aW9uICogLTEgfSxcbiAgICAgICAgICB3aWR0aDogdGhpcy53aWR0aCxcbiAgICAgICAgICBoZWlnaHQ6IHRoaXMuaGVpZ2h0LFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICApXG4gIH1cbn1cbiJdfQ==