@pacem/pacem-2d 1.0.0-abel

package/dist/esm/rect.js

@@ -0,0 +1,174 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemRectElement_1;
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//namespace Pacem.Components.Drawing {
+/*
+ r="4"   // every corner has a rx equalt o ry equal to 8 units
+ r="4,8 cut" // every corner has a rx equal to 4px and a ry equal to 8px (cut corners)
+ r="4,8 cut 5,6 3,20% round 50%,4" // top-left corner has a rx equal to 4px and a ry equal to 8px (cut corner), top-right corner has a rx equal to 5px and a ry equal to 6px,
+                      // bottom-right corner has a rx equal to 3px and a ry equal to 20% the height,
+                      // bottom-left corner has a rx equal to 50% the width and a ry equal to 4px.
+
+ */
+function parseCornerRadius(radius) {
+    const rx = radius[2], ry = radius[4] ?? rx, type = radius[6] === 'cut' ? CornerType.Cut : CornerType.Rounded;
+    return { rx: parseCornerRadiusComponent(rx), ry: parseCornerRadiusComponent(ry), type };
+}
+function parseCornerRadiusComponent(radius) {
+    const val = parseFloat(radius);
+    return { value: val, unit: radius.endsWith('%') ? 'pct' : 'u' };
+}
+function stringifyCornerRadiusComponent(radius) {
+    return `${radius.value}${radius.unit === 'pct' ? '%' : ''}`;
+}
+const CORNERS_PATTERN = /(([\d\.]+%?)(\s*,?\s*([\d\.]+%?))?(\s+(cut|round))?)/g;
+function parseCornerRadii(radii) {
+    let numbers;
+    const acc = [];
+    while (numbers = CORNERS_PATTERN.exec(radii)) {
+        acc.push(numbers);
+    }
+    switch (acc.length) {
+        case 1:
+            const single = parseCornerRadius(acc[0]);
+            return [single, single, single, single];
+        case 4:
+            const topLeft = parseCornerRadius(acc[0]);
+            const topRight = parseCornerRadius(acc[1]);
+            const bottomRight = parseCornerRadius(acc[2]);
+            const bottomLeft = parseCornerRadius(acc[3]);
+            return [topLeft, topRight, bottomRight, bottomLeft];
+        default:
+            return null;
+    }
+}
+function stringifyCornerRadii(radii) {
+    const topLeft = radii[0], topRight = radii[1], bottomRight = radii[2], bottomLeft = radii[3];
+    const tlX = stringifyCornerRadiusComponent(topLeft.rx), tlY = stringifyCornerRadiusComponent(topLeft.ry);
+    const trX = stringifyCornerRadiusComponent(topRight.rx), trY = stringifyCornerRadiusComponent(topRight.ry);
+    const brX = stringifyCornerRadiusComponent(bottomRight.rx), brY = stringifyCornerRadiusComponent(bottomRight.ry);
+    const blX = stringifyCornerRadiusComponent(bottomLeft.rx), blY = stringifyCornerRadiusComponent(bottomLeft.ry);
+    return `${tlX},${tlY} ${trX},${trY} ${brX},${brY} ${blX},${blY}`;
+}
+export var CornerType;
+(function (CornerType) {
+    CornerType["Rounded"] = "rounded";
+    CornerType["Cut"] = "cut";
+})(CornerType || (CornerType = {}));
+let PacemRectElement = PacemRectElement_1 = class PacemRectElement extends ShapeElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!first && (name === 'x' || name === 'y' || name === 'w' || name === 'h' || name === 'r' || name === 'cornerType')) {
+            this.recomputeShape();
+        }
+    }
+    getPathData() {
+        const x = this.x, y = this.y, w = this.w, h = this.h;
+        let r = this.r ?? { rx: { value: 0 }, ry: { value: 0 }, type: CornerType.Rounded };
+        if (!Utils.isArray(r)) {
+            r = [r, r, r, r];
+        }
+        // forgiving behavior
+        r = r.map(i => { return typeof i === 'number' ? { rx: { value: i }, ry: { value: i }, type: this.cornerType } : i; });
+        if (!Utils.isNull(x) && !Utils.isNull(y) && !Utils.isNull(w) && !Utils.isNull(h)) {
+            return PacemRectElement_1.getPathData(x, y, w, h, r);
+        }
+        return null;
+    }
+    getShapeGeometry() {
+        const x = this.x, y = this.y, x1 = x + this.w, y1 = y + this.h;
+        return {
+            pathData: this.getPathData(), vertices: [{ x, y }, { x: x1, y }, { x: x1, y: y1 }, { x, y: y1 }], boundingRect: { x, y, width: this.w, height: this.h }
+        };
+    }
+    static getPathData(x = NaN, y = NaN, w = NaN, h = NaN, r = null) {
+        if (!r) {
+            return `M ${x} ${y} h ${w} v ${h} h ${-w} z`;
+        }
+        if (!Utils.isArray(r)) {
+            r = [r, r, r, r];
+        }
+        const tl = r[0], tr = r[1], br = r[2], bl = r[3];
+        const vx = (rx) => rx.unit === 'pct' ? rx.value * .01 * w : rx.value;
+        const vy = (ry) => ry.unit === 'pct' ? ry.value * .01 * h : ry.value;
+        const tlX = vx(tl.rx), tlY = vy(tl.ry);
+        const trX = vx(tr.rx), trY = vy(tr.ry);
+        const brX = vx(br.rx), brY = vy(br.ry);
+        const blX = vx(bl.rx), blY = vy(bl.ry);
+        let retval = `M ${x},${y + tlY}`;
+        // top-left
+        switch (tl.type) {
+            case 'cut':
+                retval += ` l ${tlX},${-tlY}`;
+                break;
+            default:
+                retval += ` a ${tlX} ${tlY} 0 0 1 ${tlX} ${-tlY}`;
+                break;
+        }
+        retval += ` h ${w - tlX - trX}`;
+        // top-right
+        switch (tr.type) {
+            case 'cut':
+                retval += ` l ${trX},${trY}`;
+                break;
+            default:
+                retval += ` a ${trX} ${trY} 0 0 1 ${trX} ${trY}`;
+                break;
+        }
+        retval += ` v ${h - trY - brY}`;
+        // bottom-right
+        switch (br.type) {
+            case 'cut':
+                retval += ` l ${-brX},${brY}`;
+                break;
+            default:
+                retval += ` a ${brX} ${brY} 0 0 1 ${-brX} ${brY}`;
+                break;
+        }
+        retval += ` h ${-(w - brX - blX)}`;
+        // bottom-left
+        switch (bl.type) {
+            case 'cut':
+                retval += ` l ${-blX},${-blY}`;
+                break;
+            default:
+                retval += ` a ${blX} ${blY} 0 0 1 ${-blX} ${-blY}`;
+                break;
+        }
+        return retval + ' z';
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemRectElement.prototype, "x", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemRectElement.prototype, "y", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemRectElement.prototype, "w", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemRectElement.prototype, "h", void 0);
+__decorate([
+    Watch({
+        emit: false, converter: {
+            convert: attr => parseCornerRadii(attr),
+            convertBack: (radii) => stringifyCornerRadii(radii)
+        }
+    })
+], PacemRectElement.prototype, "r", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemRectElement.prototype, "cornerType", void 0);
+PacemRectElement = PacemRectElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-rect' })
+], PacemRectElement);
+export { PacemRectElement };

package/dist/esm/stage-abstractions.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/stage.js

@@ -0,0 +1,366 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CustomElement, Watch, ViewChild, Debounce, PCSS, P, Utils, PropertyConverters, PropertyChangeEvent, CustomEventUtils, avoidHandler, EventKeyModifier, Components } from '@pacem/pacem-core';
+import { Rect, Matrix2D } from '@pacem/pacem-foundation';
+import { TAG_MIDDLE_NAME } from './constants';
+import { DrawableElement } from './drawable-element';
+import { isGroup } from './drawing';
+//namespace Pacem.Components.Drawing {
+// group [1] := align x,[3] := align y,[6] := slice
+const ASPECTRATIO_PATTERN = /^\s*[xX]\s*([Mm](in|ax|id))\s*[yY]\s*([Mm](in|ax|id))(\s+(none|slice|meet))?\s*$/;
+const aspectRatioPropertyConverter = {
+    convert: (attr) => {
+        const regArr = ASPECTRATIO_PATTERN.exec(attr);
+        if (regArr && regArr.length >= 4) {
+            return {
+                x: regArr[1].toLowerCase(),
+                y: regArr[3].toLowerCase(),
+                slice: regArr[6] === 'slice'
+            };
+        }
+        return 'none';
+    },
+    convertBack: (val) => {
+        if (Utils.isNull(val) || typeof val === 'string') {
+            return 'none';
+        }
+        return `xM${(val.x.substring(1))}YM${(val.y.substring(1))} ${(val.slice ? 'slice' : 'meet')}`;
+    }
+};
+const DEFAULT_STAGE_OPTIONS = {
+    panControl: true,
+    zoomControl: true,
+    panModifiers: [EventKeyModifier.AltKey],
+    zoomModifiers: [EventKeyModifier.AltKey],
+    clickModifiers: []
+};
+export function getStageOptions(stage) {
+    const options = stage instanceof Pacem2DElement ? stage.options : {};
+    return Utils.extend({}, DEFAULT_STAGE_OPTIONS, options);
+}
+let Pacem2DElement = class Pacem2DElement extends Components.PacemItemsContainerElement {
+    constructor() {
+        super(...arguments);
+        this.#transformMatrix = Matrix2D.identity;
+        this.#options = DEFAULT_STAGE_OPTIONS;
+        this._resizeHandler = (evt) => {
+            this.#size = { x: evt.detail.left, y: evt.detail.top, width: evt.detail.width, height: evt.detail.height };
+            const adapter = this.adapter;
+            if (!Utils.isNull(adapter)) {
+                this._invalidateSize();
+            }
+        };
+        this._zoomHandler = (evt) => {
+            // only trusted ui interaction
+            if (!evt.isTrusted) {
+                return;
+            }
+            const opts = this.#options;
+            if (opts.zoomControl && CustomEventUtils.matchModifiers(evt, opts.zoomModifiers)) {
+                // prevent anything
+                avoidHandler(evt);
+                const zoomingOut = evt.deltaY < 0;
+                // center change?
+                const factor = .1, sign = zoomingOut ? -1 : 1, factorWSign = factor * sign, scale = 1 + factorWSign;
+                const stageRect = Utils.offsetRect(evt.currentTarget), pt = { x: evt.clientX, y: evt.clientY };
+                this._zoom(scale, stageRect, pt);
+            }
+        };
+        this._panHandler = (evt) => {
+            const state = this.#panningStart, actual = this._getPanPoint(evt);
+            if (!Utils.isNullOrEmpty(state && state.point) && !Utils.isNull(actual)) {
+                avoidHandler(evt);
+                const factor = state.factor, vbox = state.box, start = state.point;
+                this.viewbox = {
+                    x: vbox.x - factor * (actual.x - start.x),
+                    y: vbox.y - factor * (actual.y - start.y),
+                    width: vbox.width,
+                    height: vbox.height
+                };
+            }
+        };
+        this._panStartHandler = (evt) => {
+            const opts = this.#options;
+            if (!opts.panControl) {
+                return;
+            }
+            // only trusted ui interaction
+            if (!evt.isTrusted) {
+                return;
+            }
+            const size = this.#size, vbox = this.viewbox || { x: 0, y: 0, width: size.width, height: size.height }, start = this._getPanPoint(evt);
+            if (start) {
+                avoidHandler(evt);
+                this._stage.style.pointerEvents = 'none';
+                const aspectRatio = this._getActualAspectRatio();
+                const wBased = vbox.width / size.width, hBased = vbox.height / size.height, factor = aspectRatio.slice ? Math.min(wBased, hBased) : Math.max(wBased, hBased);
+                this.#panningStart = { point: start, box: vbox, factor };
+            }
+        };
+        this._panEndHandler = (evt) => {
+            this._stage.style.pointerEvents = '';
+            this.#panningStart = null;
+        };
+    }
+    get stage() {
+        return this._stage;
+    }
+    snapshot(bgColor, type, quality) {
+        const adapter = this.adapter;
+        if (Utils.isNull(adapter)) {
+            return Promise.resolve(null);
+        }
+        return adapter.snapshot(this, bgColor, type, quality);
+    }
+    #originalViewBox;
+    #transformMatrix;
+    get transformMatrix() {
+        return this.#transformMatrix;
+    }
+    _transformMatrixScale() {
+        const sizeObj = this.#size || Utils.offsetRect(this._stage);
+        var origVbox = this.#originalViewBox || sizeObj;
+        const vbox = this.viewbox || origVbox;
+        const aspectRatio = this.aspectRatio || 'none';
+        const mode = aspectRatio === 'none' ? 'stretch' : (aspectRatio.slice ? 'cover' : 'contain');
+        const actual = Rect.findTransform(vbox, origVbox, mode);
+        return actual.a;
+    }
+    validate(item) {
+        return item instanceof DrawableElement && /* only direct items */ Utils.isNull(item.parent);
+    }
+    draw(item, redraw = false) {
+        const adapter = this.adapter;
+        if (!this.disabled && !Utils.isNull(adapter)) {
+            let cancelable = new CustomEvent('predraw', { cancelable: true });
+            this.dispatchEvent(cancelable);
+            if (!cancelable.defaultPrevented) {
+                adapter.draw(this, item, redraw);
+                this.dispatchEvent(new CustomEvent('draw'));
+            }
+        }
+    }
+    _drawDebounced(item, force = false) {
+        if (!Utils.isNull(item) && isGroup(item)) {
+            this.draw(item, force);
+        }
+        else {
+            this.draw(item);
+        }
+    }
+    requestDraw(item, redraw = false) {
+        this._drawDebounced(item, redraw);
+    }
+    _buildUpDatasourceFromDOM() {
+        this.datasource = (this.items || []).slice();
+    }
+    #options;
+    #size;
+    _getActualAspectRatio() {
+        const aspectRatio = this.aspectRatio || 'none';
+        const alignmentX = aspectRatio === 'none' ? 'mid' : aspectRatio.x;
+        const alignmentY = aspectRatio === 'none' ? 'mid' : aspectRatio.y;
+        const slice = aspectRatio === 'none' ? false : aspectRatio.slice;
+        return { x: alignmentX, y: alignmentY, slice };
+    }
+    _zoomFromValue(scale) {
+        const sizeObj = this.#size;
+        if (Utils.isNull(sizeObj)) {
+            return;
+        }
+        const sizeRect = sizeObj;
+        const origVbox = this.#originalViewBox || sizeRect, vbox = this.viewbox || origVbox;
+        const aspectRatio = this.aspectRatio || 'none';
+        const mode = aspectRatio === 'none' ? 'stretch' : (aspectRatio.slice ? 'cover' : 'contain');
+        const actual = Rect.findTransform(vbox, sizeRect, mode);
+        const original = Rect.findTransform(origVbox, sizeRect, mode);
+        const actualScale = actual.a;
+        const origScale = original.a;
+        const targetScale = origScale * scale;
+        const incrementalInverseScale = actualScale / targetScale;
+        this._zoom(incrementalInverseScale);
+    }
+    _zoom(scale, stageRect, pt) {
+        if (Utils.isNull(stageRect)) {
+            stageRect = Utils.offsetRect(this._stage);
+        }
+        if (Utils.isNull(pt)) {
+            pt = { x: stageRect.x + stageRect.width * .5, y: stageRect.y + stageRect.height * .5 };
+        }
+        const sizeObj = this.#size, vbox = this.viewbox || sizeObj;
+        const vsize = Math.min(vbox.width, vbox.height), targetWidth = vsize * scale, targetHeight = vsize * scale;
+        if (targetWidth > 0 && targetHeight > 0) {
+            const aspectRatio = this._getActualAspectRatio();
+            const alignmentX = aspectRatio.x;
+            const alignmentY = aspectRatio.y;
+            const slice = aspectRatio.slice;
+            // offset
+            const vboxRatio = vbox.width / vbox.height, size = slice ? Math.max(stageRect.width, stageRect.height) : Math.min(stageRect.width, stageRect.height);
+            let 
+            // to be adjusted based on aspectRatio
+            adjX, adjY;
+            ;
+            switch (alignmentX) {
+                case 'mid':
+                    adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x - .5 * (stageRect.width - size)) / (size * vboxRatio);
+                    break;
+                case 'max':
+                    adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x - (stageRect.width - size)) / (size * vboxRatio);
+                    break;
+                default:
+                    adjX = (targetWidth - vbox.width) * (pt.x - stageRect.x) / (size * vboxRatio);
+                    break;
+            }
+            switch (alignmentY) {
+                case 'mid':
+                    adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y - .5 * (stageRect.height - size)) / (size * vboxRatio);
+                    break;
+                case 'max':
+                    adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y - (stageRect.height - size)) / (size * vboxRatio);
+                    break;
+                default:
+                    adjY = (targetHeight - vbox.height) * (pt.y - stageRect.y) / (size * vboxRatio);
+                    break;
+            }
+            const targetX = vbox.x - adjX, targetY = vbox.y - adjY;
+            this.viewbox = { x: targetX, y: targetY, width: targetWidth, height: targetHeight };
+        }
+    }
+    _getPanPoint(evt) {
+        const opts = this.#options;
+        if (evt instanceof MouseEvent && CustomEventUtils.matchModifiers(evt, opts.panModifiers)) {
+            return CustomEventUtils.getEventCoordinates(evt).page;
+        }
+        return null;
+    }
+    #panningStart;
+    _invalidateSize() {
+        this.adapter.invalidateSize(this, this.#size);
+        const prevTransformMatrix = this.#transformMatrix;
+        this.#transformMatrix = this.adapter.getTransformMatrix(this);
+        this.dispatchEvent(new PropertyChangeEvent({ propertyName: 'transformMatrix', currentValue: this.#transformMatrix, oldValue: prevTransformMatrix }));
+        this.zoom = this._transformMatrixScale();
+        this.dispatchEvent(new Components.ResizeEvent(this.#size));
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        const adapter = this.adapter;
+        if (!Utils.isNull(adapter)) {
+            adapter.initialize(this);
+            this._invalidateSize();
+            // request draw right away
+            this._drawDebounced();
+        }
+        const resize = this._resize;
+        resize.addEventListener(Components.ResizeEventName, this._resizeHandler, false);
+        const stage = this._stage;
+        resize.target = stage;
+        const options = { capture: false, passive: true };
+        // zooming
+        stage.addEventListener('wheel', this._zoomHandler, false);
+        // panning
+        stage.addEventListener('mousedown', this._panStartHandler, false);
+        stage.addEventListener('touchstart', this._panStartHandler, options);
+        window.addEventListener('mousemove', this._panHandler, false);
+        window.addEventListener('mouseup', this._panEndHandler, false);
+        window.addEventListener('touchmove', this._panHandler, options);
+        window.addEventListener('touchend', this._panEndHandler, options);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'adapter':
+                if (!Utils.isNull(old)) {
+                    old.dispose(this);
+                }
+                if (!Utils.isNull(val)) {
+                    val.initialize(this);
+                    this._invalidateSize();
+                    this._drawDebounced();
+                }
+                break;
+            case 'aspectRatio':
+                if (!Utils.isNull(this.adapter)) {
+                    this._invalidateSize();
+                }
+                break;
+            case 'viewbox':
+                if (!Utils.isNull(this.adapter)) {
+                    this._invalidateSize();
+                }
+                this.#originalViewBox ??= (this.viewbox || null);
+                break;
+            case 'items':
+                this._buildUpDatasourceFromDOM();
+                break;
+            case 'zoom':
+                if (val !== this._transformMatrixScale()) {
+                    this._zoomFromValue(val);
+                }
+                break;
+            case 'options':
+                this.#options = getStageOptions(this); // Utils.extend({}, DEFAULT_STAGE_OPTIONS, val || {});
+                break;
+            case 'disabled':
+            case 'datasource':
+                this._drawDebounced();
+                break;
+        }
+    }
+    disconnectedCallback() {
+        const resizer = this._resize, stage = this._stage;
+        if (!Utils.isNull(resizer)) {
+            resizer.removeEventListener(Components.ResizeEventName, this._resizeHandler, false);
+        }
+        if (!Utils.isNull(stage)) {
+            // zooming
+            stage.removeEventListener('wheel', this._zoomHandler, false);
+            // panning
+            stage.removeEventListener('mousedown', this._panStartHandler, false);
+            stage.removeEventListener('touchstart', this._panStartHandler);
+            window.removeEventListener('mousemove', this._panHandler, false);
+            window.removeEventListener('mouseup', this._panEndHandler, false);
+            window.removeEventListener('touchmove', this._panHandler);
+            window.removeEventListener('touchend', this._panEndHandler);
+        }
+        if (!Utils.isNull(this.adapter)) {
+            this.adapter.dispose(this);
+        }
+        super.disconnectedCallback();
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Element })
+], Pacem2DElement.prototype, "adapter", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.Rect })
+], Pacem2DElement.prototype, "viewbox", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: aspectRatioPropertyConverter })
+], Pacem2DElement.prototype, "aspectRatio", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem2DElement.prototype, "datasource", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], Pacem2DElement.prototype, "options", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], Pacem2DElement.prototype, "zoom", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-2d')
+], Pacem2DElement.prototype, "_stage", void 0);
+__decorate([
+    ViewChild(P + '-resize')
+], Pacem2DElement.prototype, "_resize", void 0);
+__decorate([
+    Debounce(true)
+], Pacem2DElement.prototype, "_drawDebounced", null);
+Pacem2DElement = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME, shadow: true, template: `<${P}-resize watch-position="true"></${P}-resize><div class="${PCSS}-2d" part="container"></div><slot></slot>` })
+], Pacem2DElement);
+export { Pacem2DElement };

package/dist/esm/text.js

@@ -0,0 +1,57 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { UiElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//namespace Pacem.Components.Drawing {
+let PacemTextElement = class PacemTextElement extends UiElement {
+    propertyChangedCallback(name, old, val, first) {
+        if (!first) {
+            switch (name) {
+                case 'text':
+                case 'color':
+                case 'fontFamily':
+                case 'fontSize':
+                case 'fontWeight':
+                case 'fontStyle':
+                case 'anchor':
+                    if (!Utils.isNull(this.stage)) {
+                        this.stage.draw(this);
+                    }
+                    break;
+            }
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "text", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "color", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "fontFamily", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemTextElement.prototype, "fontSize", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "fontWeight", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "fontStyle", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemTextElement.prototype, "anchor", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemTextElement.prototype, "textAnchor", void 0);
+PacemTextElement = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-text' })
+], PacemTextElement);
+export { PacemTextElement };