ui-lit/layout/element.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '../icon';
import { element } from './styles';
let LitLayout = class LitLayout extends LitElement {
    constructor() {
        super(...arguments);
        this.minWidth = 240;
        this.maxWidth = 520;
        this.minHeight = 240;
        this.maxHeight = 520;
        this.height = 400;
        this.width = 320;
        this.top = 0;
        this.left = 0;
        this.zIndex = 1;
        this.name = '';
        this._onClick = () => {
            this.dispatchEvent(new CustomEvent("raise", {
                bubbles: true,
                detail: this
            }));
        };
    }
    connectedCallback() {
        super.connectedCallback();
        this.width = this.parentElement.getNewPosition(this.width);
        this.height = this.parentElement.getNewPosition(this.height);
        this.addEventListener('click', this._onClick);
    }
    disconnectedCallback() {
        this.removeEventListener('click', this._onClick);
        super.disconnectedCallback();
    }
    willUpdate() {
        this._setStyleValue('--width', this.width);
        this._setStyleValue('--height', this.height);
        this._setStyleValue('--left', this.left);
        this._setStyleValue('--top', this.top);
        this._setStyleValue('--z-index', this.zIndex);
    }
    render() {
        return html `
    <div class = "wrapper">
      <slot></slot>
    </div>
    <lit-icon 
        @pointerdown = "${this._onStartMove}" 
        class = "move" 
        icon = "move"></lit-icon>
    <lit-icon 
        @pointerdown = "${this._onResize}"
        class = "resize" 
        icon = "resize"></lit-icon>
    `;
    }
    /** Events */
    _onResize(e) {
        this.dispatchEvent(new CustomEvent("startResize", {
            detail: {
                element: this,
                layerX: e.pageX - this.left,
                layerY: e.pageY - this.top,
            },
            bubbles: true
        }));
    }
    _onStartMove(e) {
        this.dispatchEvent(new CustomEvent("startmove", {
            detail: {
                element: this,
                layerX: e.pageX - this.left,
                layerY: e.pageY - this.top,
            },
            bubbles: true
        }));
    }
    /** Actions */
    getPosition() {
        const data = {
            width: this.width,
            height: this.height,
            minWidth: this.minWidth,
            minHeight: this.minHeight,
            maxWidth: this.maxWidth,
            maxHeight: this.maxHeight,
            zIndex: this.zIndex,
            top: this.top,
            left: this.left
        };
        return data;
    }
    setPosition(x, y) {
        if (x !== this.left || y !== this.top) {
            this.top = y;
            this.left = x;
        }
    }
    setSize(width, height) {
        if (width < this.minWidth || height < this.minHeight)
            return;
        this.width = width;
        this.height = height;
    }
    _setStyleValue(valueName, value) {
        const currentValue = this.style.getPropertyValue(valueName);
        if (currentValue != value + "px") {
            this.style.setProperty(valueName, value + (valueName.includes('index') ? '' : "px"));
        }
    }
};
LitLayout.styles = element;
__decorate([
    property({ type: Number })
], LitLayout.prototype, "minWidth", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "maxWidth", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "minHeight", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "maxHeight", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "height", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "width", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "top", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "left", void 0);
__decorate([
    property({ type: Number })
], LitLayout.prototype, "zIndex", void 0);
__decorate([
    property({ type: String })
], LitLayout.prototype, "name", void 0);
LitLayout = __decorate([
    customElement("lit-layout")
], LitLayout);
export { LitLayout };