ui-lit
Version:
UI Elements on LIT
190 lines (189 loc) • 7.36 kB
JavaScript
import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { property, customElement, query, state } from 'lit/decorators.js';
import { scrollbar } from '../styles/scrollbar';
import { grid } from './styles';
let LitLayoutGrid = class LitLayoutGrid extends LitElement {
constructor() {
super(...arguments);
this.cellSize = 20;
this.isMoving = false;
this.isResizing = false;
this.layoutElementData = null;
this.shadowX = 0;
this.shadowY = 0;
this.shadowWidth = 0;
this.shadowHeight = 0;
this._maxIndex = 2;
this._onEndMove = (e) => {
var _a, _b;
if (this.isMoving) {
this.isMoving = false;
(_a = this.layoutElementData) === null || _a === void 0 ? void 0 : _a.element.setPosition(this.shadowX, this.shadowY);
}
else if (this.isResizing) {
this.isResizing = false;
(_b = this.layoutElementData) === null || _b === void 0 ? void 0 : _b.element.setSize(this.shadowWidth, this.shadowHeight);
}
this.layoutElementData = null;
this.shadowX = 0;
this.shadowY = 0;
this.shadowWidth = 0;
this.shadowHeight = 0;
this.querySelectorAll('lit-layout').forEach(el => (el.classList.remove('move'), el.classList.remove('resize')));
document.removeEventListener('mouseup', this._onEndMove);
};
}
shadowTemplate() {
var _a, _b, _c, _d;
const width = this.shadowWidth || ((_a = this.layoutElementData) === null || _a === void 0 ? void 0 : _a.element.width) || 0;
const height = this.shadowHeight || ((_b = this.layoutElementData) === null || _b === void 0 ? void 0 : _b.element.height) || 0;
const top = this.shadowY || ((_c = this.layoutElementData) === null || _c === void 0 ? void 0 : _c.element.top) || 0;
const left = this.shadowX || ((_d = this.layoutElementData) === null || _d === void 0 ? void 0 : _d.element.left) || 0;
return html `
<div class = "shadow ${this.isMoving || this.isResizing ? 'show' : ''}"
style = "z-index: ${this._maxIndex - 1}; width: ${width}px; height: ${height}px; left: ${left}px; top: ${top}px"></div>`;
}
render() {
return html `
<div class = "wrapper ff-scrollbar ${this.isMoving ? 'move' : ''} "
= "${this._onRaize}"
= "${this._onStartMove}"
= "${this._onStartResize}"
= "${this._onMove}">
<slot></slot>
${this.shadowTemplate()}
</div>`;
}
_raize(node) {
this._maxIndex = this._getMaxZIndex() + 1;
node.zIndex = this._maxIndex;
}
_onRaize(e) {
this._raize(e.detail);
}
_onStart(e) {
this.layoutElementData = e.detail;
this._normalize();
this._raize(this.layoutElementData.element);
this.shadowX = this.layoutElementData.element.left;
this.shadowY = this.layoutElementData.element.top;
document.addEventListener('mouseup', this._onEndMove);
}
_onStartMove(e) {
this._onStart(e);
this.isMoving = true;
this.querySelectorAll('lit-layout').forEach(el => el.classList.add('move'));
}
_onStartResize(e) {
this._onStart(e);
this.isResizing = true;
this.querySelectorAll('lit-layout').forEach(el => el.classList.add('resize'));
}
_onMove(e) {
if (!this.layoutElementData)
return;
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
requestAnimationFrame(() => {
if (this.isResizing) {
this.setSize(e.pageX, e.pageY);
}
else if (this.isMoving) {
this.setPosition(e.pageX, e.pageY);
}
});
}
getNewPosition(value) {
const dv = value % this.cellSize;
const _dv = dv > this.cellSize / 2 ? (this.cellSize - dv) : -dv;
return Math.round(value + _dv);
}
showShadow(data) {
if (data.x && data.y) {
this.shadowX = this.getNewPosition(data.x);
this.shadowY = this.getNewPosition(data.y);
}
if (data.width && data.height) {
this.shadowWidth = this.getNewPosition(data.width);
this.shadowHeight = this.getNewPosition(data.height);
}
}
setSize(x, y) {
if (!this.layoutElementData)
return;
const rect = this.getBoundingClientRect();
x = x - this.layoutElementData.element.left - rect.x + this.wrapper.scrollLeft;
y = y - this.layoutElementData.element.top - rect.y + this.wrapper.scrollTop;
const width = Math.min(Math.max(this.layoutElementData.element.minWidth, x), this.layoutElementData.element.maxWidth);
const height = Math.min(Math.max(this.layoutElementData.element.minHeight, y), this.layoutElementData.element.maxHeight);
this.layoutElementData.element.setSize(width, height);
this.showShadow({ width, height });
}
setPosition(x, y) {
if (!this.layoutElementData)
return;
x = (x - this.layoutElementData.layerX); // - rect.x;
y = (y - this.layoutElementData.layerY); // - rect.y;
this.layoutElementData.element.setPosition(x, y);
this.showShadow({ x, y });
}
_normalize() {
[...this.querySelectorAll("lit-layout")]
.map(n => ({ name: n.name, zIndex: n.zIndex, node: n }))
.sort((a, b) => {
if (a.zIndex > b.zIndex)
return 1;
if (a.zIndex < b.zIndex)
return -1;
return 0;
})
.forEach((it, i) => it.node.zIndex = i);
}
_getMaxZIndex() {
return Math.max(...Object.values(this.getPositions()).map(it => it.zIndex));
}
getPositions() {
const data = {};
this.querySelectorAll("lit-layout").forEach(el => {
data[el.name] = el.getPosition();
});
return data;
}
};
LitLayoutGrid.styles = [grid, scrollbar];
__decorate([
query(".shadow")
], LitLayoutGrid.prototype, "shadow", void 0);
__decorate([
query(".wrapper ")
], LitLayoutGrid.prototype, "wrapper", void 0);
__decorate([
property({ type: Number })
], LitLayoutGrid.prototype, "cellSize", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "isMoving", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "isResizing", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "layoutElementData", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "shadowX", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "shadowY", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "shadowWidth", void 0);
__decorate([
state()
], LitLayoutGrid.prototype, "shadowHeight", void 0);
LitLayoutGrid = __decorate([
customElement("lit-layout-grid")
], LitLayoutGrid);
export { LitLayoutGrid };