dcl-ui-toolkit/dist/ui-entities/CenterImage/index.js

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

import ReactEcs, { UiEntity } from '@dcl/sdk/react-ecs';
import { DelayedHidingUIObject } from '../UIObject';
import { getImageAtlasMapping } from '../../utils/imageUtils';
const centerImageInitialConfig = {
    image: '',
    duration: 0,
    startHidden: true,
    width: 512,
    height: 512,
    xOffset: 0,
    yOffset: 0,
};
export class CenterImage extends DelayedHidingUIObject {
    constructor({ startHidden = centerImageInitialConfig.startHidden, image = centerImageInitialConfig.image, duration = centerImageInitialConfig.duration, width = centerImageInitialConfig.width, height = centerImageInitialConfig.height, xOffset = centerImageInitialConfig.xOffset, yOffset = centerImageInitialConfig.yOffset, section, }) {
        super({ startHidden, duration });
        this.image = image;
        this.width = width;
        this.height = height;
        this.xOffset = xOffset;
        this.yOffset = yOffset;
        if (section)
            this.section = section;
        this.imageElement = {
            uiTransform: {
                positionType: 'absolute',
                position: { top: '50%', left: '50%' },
            },
            uiBackground: {
                textureMode: 'stretch',
            },
        };
    }
    render(key) {
        return (ReactEcs.createElement(UiEntity, { key: key, ...this.imageElement, uiTransform: {
                ...this.imageElement.uiTransform,
                display: this.visible ? 'flex' : 'none',
                width: this.width,
                height: this.height,
                margin: { top: this.yOffset * -1 - this.height / 2, left: this.xOffset - this.width / 2 },
            }, uiBackground: {
                ...this.imageElement.uiBackground,
                texture: {
                    src: this.image,
                },
                uvs: getImageAtlasMapping(this.section),
            } }));
    }
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvQ2VudGVySW1hZ2UvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUE7QUFHdkQsT0FBTyxFQUFFLHFCQUFxQixFQUErQixNQUFNLGFBQWEsQ0FBQTtBQUVoRixPQUFPLEVBQUUsb0JBQW9CLEVBQWtCLE1BQU0sd0JBQXdCLENBQUE7QUFvQjdFLE1BQU0sd0JBQXdCLEdBQWlEO0lBQzdFLEtBQUssRUFBRSxFQUFFO0lBQ1QsUUFBUSxFQUFFLENBQUM7SUFDWCxXQUFXLEVBQUUsSUFBSTtJQUNqQixLQUFLLEVBQUUsR0FBRztJQUNWLE1BQU0sRUFBRSxHQUFHO0lBQ1gsT0FBTyxFQUFFLENBQUM7SUFDVixPQUFPLEVBQUUsQ0FBQztDQUNGLENBQUE7QUFlVixNQUFNLE9BQU8sV0FBWSxTQUFRLHFCQUFxQjtJQVVwRCxZQUFZLEVBQ1YsV0FBVyxHQUFHLHdCQUF3QixDQUFDLFdBQVcsRUFDbEQsS0FBSyxHQUFHLHdCQUF3QixDQUFDLEtBQUssRUFDdEMsUUFBUSxHQUFHLHdCQUF3QixDQUFDLFFBQVEsRUFDNUMsS0FBSyxHQUFHLHdCQUF3QixDQUFDLEtBQUssRUFDdEMsTUFBTSxHQUFHLHdCQUF3QixDQUFDLE1BQU0sRUFDeEMsT0FBTyxHQUFHLHdCQUF3QixDQUFDLE9BQU8sRUFDMUMsT0FBTyxHQUFHLHdCQUF3QixDQUFDLE9BQU8sRUFDMUMsT0FBTyxHQUNXO1FBQ2xCLEtBQUssQ0FBQyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFBO1FBRWhDLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO1FBQ2xCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO1FBQ2xCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO1FBQ3BCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksT0FBTztZQUFFLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBRW5DLElBQUksQ0FBQyxZQUFZLEdBQUc7WUFDbEIsV0FBVyxFQUFFO2dCQUNYLFlBQVksRUFBRSxVQUFVO2dCQUN4QixRQUFRLEVBQUUsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUU7YUFDdEM7WUFDRCxZQUFZLEVBQUU7Z0JBQ1osV0FBVyxFQUFFLFNBQVM7YUFDdkI7U0FDRixDQUFBO0lBQ0gsQ0FBQztJQUVNLE1BQU0sQ0FBQyxHQUFZO1FBQ3hCLE9BQU8sQ0FDTCx1QkFBQyxRQUFRLElBQ1AsR0FBRyxFQUFFLEdBQUcsS0FDSixJQUFJLENBQUMsWUFBWSxFQUNyQixXQUFXLEVBQUU7Z0JBQ1gsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVc7Z0JBQ2hDLE9BQU8sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07Z0JBQ3ZDLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSztnQkFDakIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNO2dCQUNuQixNQUFNLEVBQUUsRUFBRSxHQUFHLEVBQUUsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBRTthQUMxRixFQUNELFlBQVksRUFBRTtnQkFDWixHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsWUFBWTtnQkFDakMsT0FBTyxFQUFFO29CQUNQLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSztpQkFDaEI7Z0JBQ0QsR0FBRyxFQUFFLG9CQUFvQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUM7YUFDeEMsR0FDRCxDQUNILENBQUE7SUFDSCxDQUFDO0NBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3RFY3MsIHsgVWlFbnRpdHkgfSBmcm9tICdAZGNsL3Nkay9yZWFjdC1lY3MnXG5pbXBvcnQgeyBFbnRpdHlQcm9wVHlwZXMgfSBmcm9tICdAZGNsL3JlYWN0LWVjcy9kaXN0L2NvbXBvbmVudHMvdHlwZXMnXG5cbmltcG9ydCB7IERlbGF5ZWRIaWRpbmdVSU9iamVjdCwgRGVsYXllZEhpZGluZ1VJT2JqZWN0Q29uZmlnIH0gZnJvbSAnLi4vVUlPYmplY3QnXG5cbmltcG9ydCB7IGdldEltYWdlQXRsYXNNYXBwaW5nLCBJbWFnZUF0bGFzRGF0YSB9IGZyb20gJy4uLy4uL3V0aWxzL2ltYWdlVXRpbHMnXG5cbmV4cG9ydCB0eXBlIENlbnRlckltYWdlSW1hZ2VFbGVtZW50ID0gT21pdDxFbnRpdHlQcm9wVHlwZXMsICd1aVRyYW5zZm9ybScgfCAndWlCYWNrZ3JvdW5kJz4gJiB7XG4gIHVpVHJhbnNmb3JtPzogT21pdDxcbiAgICBOb25OdWxsYWJsZTxFbnRpdHlQcm9wVHlwZXNbJ3VpVHJhbnNmb3JtJ10+LFxuICAgICdkaXNwbGF5JyB8ICd3aWR0aCcgfCAnaGVpZ2h0JyB8ICdtYXJnaW4nXG4gID5cbiAgdWlCYWNrZ3JvdW5kPzogT21pdDxOb25OdWxsYWJsZTxFbnRpdHlQcm9wVHlwZXNbJ3VpQmFja2dyb3VuZCddPiwgJ3RleHR1cmUnIHwgJ3V2cyc+XG59XG5cbnR5cGUgQ2VudGVySW1hZ2VDb25maWcgPSBEZWxheWVkSGlkaW5nVUlPYmplY3RDb25maWcgJiB7XG4gIGltYWdlOiBzdHJpbmdcbiAgZHVyYXRpb246IG51bWJlclxuICB3aWR0aD86IG51bWJlclxuICBoZWlnaHQ/OiBudW1iZXJcbiAgeE9mZnNldD86IG51bWJlclxuICB5T2Zmc2V0PzogbnVtYmVyXG4gIHNlY3Rpb24/OiBJbWFnZUF0bGFzRGF0YVxufVxuXG5jb25zdCBjZW50ZXJJbWFnZUluaXRpYWxDb25maWc6IE9taXQ8UmVxdWlyZWQ8Q2VudGVySW1hZ2VDb25maWc+LCAnc2VjdGlvbic+ID0ge1xuICBpbWFnZTogJycsXG4gIGR1cmF0aW9uOiAwLFxuICBzdGFydEhpZGRlbjogdHJ1ZSxcbiAgd2lkdGg6IDUxMixcbiAgaGVpZ2h0OiA1MTIsXG4gIHhPZmZzZXQ6IDAsXG4gIHlPZmZzZXQ6IDAsXG59IGFzIGNvbnN0XG5cbi8qKlxuICogRGlzcGxheXMgYW4gaW1hZ2Ugb2YgNTEyeDUxMiBpbiB0aGUgY2VudGVyIG9mIHRoZSBzY3JlZW4gZm9yIGxpbWl0ZWQgdGltZS5cbiAqXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj10cnVlXSBzdGFydGluZyBoaWRkZW5cbiAqIEBwYXJhbSB7c3RyaW5nfSBpbWFnZSBwYXRoIHRvIGltYWdlIGZpbGVcbiAqIEBwYXJhbSB7bnVtYmVyfSBbZHVyYXRpb249MF0gZHVyYXRpb24gdGltZSB0byBrZWVwIHRoZSBpbWFnZSB2aXNpYmxlIChpbiBzZWNvbmRzKSBpZiBzdGFydGluZyB2aXNpYmxlXG4gKiBAcGFyYW0ge251bWJlcn0gW3hPZmZzZXQ9MF0gb2Zmc2V0IG9uIFhcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeU9mZnNldD0wXSBvZmZzZXQgb24gWVxuICogQHBhcmFtIHtudW1iZXJ9IFt3aWR0aD01MTJdIGltYWdlIHdpZHRoXG4gKiBAcGFyYW0ge251bWJlcn0gW2hlaWdodD01MTJdIGltYWdlIGhlaWdodFxuICogQHBhcmFtIHtJbWFnZUF0bGFzRGF0YX0gc2VjdGlvbiBjdXQgb3V0IGEgc2VjdGlvbiBvZiB0aGUgaW1hZ2UsIGFzIGFuIG9iamVjdCBzcGVjaWZ5aW5nIGF0bGFzV2lkdGgsIGF0bGFzSGVpZ2h0LCBzb3VyY2VMZWZ0LCBzb3VyY2VUb3AsIHNvdXJjZVdpZHRoIGFuZCBzb3VyY2VIZWlnaHRcbiAqXG4gKi9cbmV4cG9ydCBjbGFzcyBDZW50ZXJJbWFnZSBleHRlbmRzIERlbGF5ZWRIaWRpbmdVSU9iamVjdCB7XG4gIHB1YmxpYyBpbWFnZUVsZW1lbnQ6IENlbnRlckltYWdlSW1hZ2VFbGVtZW50XG5cbiAgcHVibGljIGltYWdlOiBzdHJpbmdcbiAgcHVibGljIHdpZHRoOiBudW1iZXJcbiAgcHVibGljIGhlaWdodDogbnVtYmVyXG4gIHB1YmxpYyB4T2Zmc2V0OiBudW1iZXJcbiAgcHVibGljIHlPZmZzZXQ6IG51bWJlclxuICBwdWJsaWMgc2VjdGlvbjogSW1hZ2VBdGxhc0RhdGEgfCB1bmRlZmluZWRcblxuICBjb25zdHJ1Y3Rvcih7XG4gICAgc3RhcnRIaWRkZW4gPSBjZW50ZXJJbWFnZUluaXRpYWxDb25maWcuc3RhcnRIaWRkZW4sXG4gICAgaW1hZ2UgPSBjZW50ZXJJbWFnZUluaXRpYWxDb25maWcuaW1hZ2UsXG4gICAgZHVyYXRpb24gPSBjZW50ZXJJbWFnZUluaXRpYWxDb25maWcuZHVyYXRpb24sXG4gICAgd2lkdGggPSBjZW50ZXJJbWFnZUluaXRpYWxDb25maWcud2lkdGgsXG4gICAgaGVpZ2h0ID0gY2VudGVySW1hZ2VJbml0aWFsQ29uZmlnLmhlaWdodCxcbiAgICB4T2Zmc2V0ID0gY2VudGVySW1hZ2VJbml0aWFsQ29uZmlnLnhPZmZzZXQsXG4gICAgeU9mZnNldCA9IGNlbnRlckltYWdlSW5pdGlhbENvbmZpZy55T2Zmc2V0LFxuICAgIHNlY3Rpb24sXG4gIH06IENlbnRlckltYWdlQ29uZmlnKSB7XG4gICAgc3VwZXIoeyBzdGFydEhpZGRlbiwgZHVyYXRpb24gfSlcblxuICAgIHRoaXMuaW1hZ2UgPSBpbWFnZVxuICAgIHRoaXMud2lkdGggPSB3aWR0aFxuICAgIHRoaXMuaGVpZ2h0ID0gaGVpZ2h0XG4gICAgdGhpcy54T2Zmc2V0ID0geE9mZnNldFxuICAgIHRoaXMueU9mZnNldCA9IHlPZmZzZXRcbiAgICBpZiAoc2VjdGlvbikgdGhpcy5zZWN0aW9uID0gc2VjdGlvblxuXG4gICAgdGhpcy5pbWFnZUVsZW1lbnQgPSB7XG4gICAgICB1aVRyYW5zZm9ybToge1xuICAgICAgICBwb3NpdGlvblR5cGU6ICdhYnNvbHV0ZScsXG4gICAgICAgIHBvc2l0aW9uOiB7IHRvcDogJzUwJScsIGxlZnQ6ICc1MCUnIH0sXG4gICAgICB9LFxuICAgICAgdWlCYWNrZ3JvdW5kOiB7XG4gICAgICAgIHRleHR1cmVNb2RlOiAnc3RyZXRjaCcsXG4gICAgICB9LFxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyByZW5kZXIoa2V5Pzogc3RyaW5nKTogUmVhY3RFY3MuSlNYLkVsZW1lbnQge1xuICAgIHJldHVybiAoXG4gICAgICA8VWlFbnRpdHlcbiAgICAgICAga2V5PXtrZXl9XG4gICAgICAgIHsuLi50aGlzLmltYWdlRWxlbWVudH1cbiAgICAgICAgdWlUcmFuc2Zvcm09e3tcbiAgICAgICAgICAuLi50aGlzLmltYWdlRWxlbWVudC51aVRyYW5zZm9ybSxcbiAgICAgICAgICBkaXNwbGF5OiB0aGlzLnZpc2libGUgPyAnZmxleCcgOiAnbm9uZScsXG4gICAgICAgICAgd2lkdGg6IHRoaXMud2lkdGgsXG4gICAgICAgICAgaGVpZ2h0OiB0aGlzLmhlaWdodCxcbiAgICAgICAgICBtYXJnaW46IHsgdG9wOiB0aGlzLnlPZmZzZXQgKiAtMSAtIHRoaXMuaGVpZ2h0IC8gMiwgbGVmdDogdGhpcy54T2Zmc2V0IC0gdGhpcy53aWR0aCAvIDIgfSxcbiAgICAgICAgfX1cbiAgICAgICAgdWlCYWNrZ3JvdW5kPXt7XG4gICAgICAgICAgLi4udGhpcy5pbWFnZUVsZW1lbnQudWlCYWNrZ3JvdW5kLFxuICAgICAgICAgIHRleHR1cmU6IHtcbiAgICAgICAgICAgIHNyYzogdGhpcy5pbWFnZSxcbiAgICAgICAgICB9LFxuICAgICAgICAgIHV2czogZ2V0SW1hZ2VBdGxhc01hcHBpbmcodGhpcy5zZWN0aW9uKSxcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgKVxuICB9XG59XG4iXX0=