@pacem/pacem-2d 1.0.0-abel

package/dist/browser/pacem-2d.js

@@ -0,0 +1,2750 @@
+(function (pacemFoundation, pacemCore) {
+    'use strict';
+
+    const TAG_MIDDLE_NAME = "2d";
+
+    function isDrawable(object) {
+        return !pacemCore.Utils.isNull(object) && 'stage' in object;
+    }
+    function isUiObject(object) {
+        return /*'transformMatrix' in object &&*/ isDrawable(object);
+    }
+    function isGradient(object) {
+        return 'stops' in object && pacemCore.Utils.isArray(object.stops);
+    }
+    function isLinearGradient(object) {
+        return isGradient(object) && 'start' in object && pacemFoundation.Point.isPoint(object.start)
+            && 'end' in object && pacemFoundation.Point.isPoint(object.end);
+    }
+    function isRadialGradient(object) {
+        return isGradient(object) && 'center' in object && pacemFoundation.Point.isPoint(object.center)
+            && 'radius' in object && typeof object.radius === 'number';
+    }
+    class PresentationState {
+        static combine(lhs, rhs, precomputedMatrix = null) {
+            return {
+                opacity: (lhs.opacity ?? 1) * (rhs.opacity ?? 1),
+                transformMatrix: precomputedMatrix ?? pacemFoundation.Matrix2D.multiply(rhs.transformMatrix, lhs.transformMatrix),
+                dashArray: lhs.dashArray ?? rhs.dashArray,
+                fill: lhs.fill ?? rhs.fill,
+                lineCap: lhs.lineCap ?? rhs.lineCap,
+                lineJoin: lhs.lineJoin ?? rhs.lineJoin,
+                lineWidth: lhs.lineWidth ?? rhs.lineWidth,
+                stroke: lhs.stroke ?? rhs.stroke
+            };
+        }
+    }
+    function isPresentationObject(object) {
+        return isUiObject(object)
+            && ('fill' in object
+                || 'transformMatrix' in object
+                || 'stroke' in object
+                || 'lineJoin' in object
+                || 'dashArray' in object
+                || 'lineWidth' in object
+                || 'opacity' in object
+                || 'lineCap' in object);
+    }
+    function isShape(object) {
+        return isUiObject(object) && 'pathData' in object;
+    }
+    function isGroup(object) {
+        return isUiObject(object) && 'childDrawables' in object && !pacemCore.Utils.isNullOrEmpty(object['childDrawables']);
+    }
+    function isText(object) {
+        return isUiObject(object) && 'text' in object && typeof object['text'] === 'string';
+    }
+    function isImage(object) {
+        return isUiObject(object) && 'src' in object && typeof object['src'] === 'string';
+    }
+    class UI2DEvent extends pacemCore.CustomUIEvent {
+        constructor(type, eventInit, originalEvent, transformMatrix) {
+            super(type, eventInit, originalEvent);
+            this.#transformMatrix = transformMatrix;
+        }
+        #transformMatrix;
+        /** Gets the screen transform matrix. */
+        get transformMatrix() {
+            return this.#transformMatrix;
+        }
+        project(pt = { x: this.screenX, y: this.screenY }) {
+            return pacemFoundation.Matrix2D.multiply(pt, this.#transformMatrix);
+        }
+    }
+    class Shape {
+        static empty() {
+            return { pathData: '', vertices: [], boundingRect: { x: 0, y: 0, width: 0, height: 0 } };
+        }
+    }
+    class DragEvent extends UI2DEvent {
+    }
+    class DrawableEvent extends UI2DEvent {
+        constructor(type, args, originalEvent, m) {
+            super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+        }
+    }
+    class StageEvent extends UI2DEvent {
+        constructor(type, args, originalEvent, m = args.transformMatrix) {
+            super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+        }
+    }
+
+    var drawing = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        DragEvent: DragEvent,
+        DrawableEvent: DrawableEvent,
+        PresentationState: PresentationState,
+        Shape: Shape,
+        StageEvent: StageEvent,
+        UI2DEvent: UI2DEvent,
+        isDrawable: isDrawable,
+        isGroup: isGroup,
+        isImage: isImage,
+        isLinearGradient: isLinearGradient,
+        isPresentationObject: isPresentationObject,
+        isRadialGradient: isRadialGradient,
+        isShape: isShape,
+        isText: isText,
+        isUiObject: isUiObject
+    });
+
+    var __decorate$d = (undefined && undefined.__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;
+    };
+    //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 (pacemCore.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: [pacemCore.EventKeyModifier.AltKey],
+        zoomModifiers: [pacemCore.EventKeyModifier.AltKey],
+        clickModifiers: []
+    };
+    function getStageOptions(stage) {
+        const options = stage instanceof Pacem2DElement ? stage.options : {};
+        return pacemCore.Utils.extend({}, DEFAULT_STAGE_OPTIONS, options);
+    }
+    let Pacem2DElement = class Pacem2DElement extends pacemCore.Components.PacemItemsContainerElement {
+        constructor() {
+            super(...arguments);
+            this.#transformMatrix = pacemFoundation.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 (!pacemCore.Utils.isNull(adapter)) {
+                    this._invalidateSize();
+                }
+            };
+            this._zoomHandler = (evt) => {
+                // only trusted ui interaction
+                if (!evt.isTrusted) {
+                    return;
+                }
+                const opts = this.#options;
+                if (opts.zoomControl && pacemCore.CustomEventUtils.matchModifiers(evt, opts.zoomModifiers)) {
+                    // prevent anything
+                    pacemCore.avoidHandler(evt);
+                    const zoomingOut = evt.deltaY < 0;
+                    // center change?
+                    const factor = .1, sign = zoomingOut ? -1 : 1, factorWSign = factor * sign, scale = 1 + factorWSign;
+                    const stageRect = pacemCore.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 (!pacemCore.Utils.isNullOrEmpty(state && state.point) && !pacemCore.Utils.isNull(actual)) {
+                    pacemCore.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) {
+                    pacemCore.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 (pacemCore.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 || pacemCore.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 = pacemFoundation.Rect.findTransform(vbox, origVbox, mode);
+            return actual.a;
+        }
+        validate(item) {
+            return item instanceof DrawableElement && /* only direct items */ pacemCore.Utils.isNull(item.parent);
+        }
+        draw(item, redraw = false) {
+            const adapter = this.adapter;
+            if (!this.disabled && !pacemCore.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 (!pacemCore.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 (pacemCore.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 = pacemFoundation.Rect.findTransform(vbox, sizeRect, mode);
+            const original = pacemFoundation.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 (pacemCore.Utils.isNull(stageRect)) {
+                stageRect = pacemCore.Utils.offsetRect(this._stage);
+            }
+            if (pacemCore.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 && pacemCore.CustomEventUtils.matchModifiers(evt, opts.panModifiers)) {
+                return pacemCore.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 pacemCore.PropertyChangeEvent({ propertyName: 'transformMatrix', currentValue: this.#transformMatrix, oldValue: prevTransformMatrix }));
+            this.zoom = this._transformMatrixScale();
+            this.dispatchEvent(new pacemCore.Components.ResizeEvent(this.#size));
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            const adapter = this.adapter;
+            if (!pacemCore.Utils.isNull(adapter)) {
+                adapter.initialize(this);
+                this._invalidateSize();
+                // request draw right away
+                this._drawDebounced();
+            }
+            const resize = this._resize;
+            resize.addEventListener(pacemCore.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 (!pacemCore.Utils.isNull(old)) {
+                        old.dispose(this);
+                    }
+                    if (!pacemCore.Utils.isNull(val)) {
+                        val.initialize(this);
+                        this._invalidateSize();
+                        this._drawDebounced();
+                    }
+                    break;
+                case 'aspectRatio':
+                    if (!pacemCore.Utils.isNull(this.adapter)) {
+                        this._invalidateSize();
+                    }
+                    break;
+                case 'viewbox':
+                    if (!pacemCore.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 (!pacemCore.Utils.isNull(resizer)) {
+                resizer.removeEventListener(pacemCore.Components.ResizeEventName, this._resizeHandler, false);
+            }
+            if (!pacemCore.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 (!pacemCore.Utils.isNull(this.adapter)) {
+                this.adapter.dispose(this);
+            }
+            super.disconnectedCallback();
+        }
+    };
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Element })
+    ], Pacem2DElement.prototype, "adapter", void 0);
+    __decorate$d([
+        pacemCore.Watch({ reflectBack: true, converter: pacemCore.PropertyConverters.Rect })
+    ], Pacem2DElement.prototype, "viewbox", void 0);
+    __decorate$d([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: aspectRatioPropertyConverter })
+    ], Pacem2DElement.prototype, "aspectRatio", void 0);
+    __decorate$d([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], Pacem2DElement.prototype, "datasource", void 0);
+    __decorate$d([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
+    ], Pacem2DElement.prototype, "options", void 0);
+    __decorate$d([
+        pacemCore.Watch({ converter: pacemCore.PropertyConverters.Number })
+    ], Pacem2DElement.prototype, "zoom", void 0);
+    __decorate$d([
+        pacemCore.ViewChild('.' + pacemCore.PCSS + '-2d')
+    ], Pacem2DElement.prototype, "_stage", void 0);
+    __decorate$d([
+        pacemCore.ViewChild(pacemCore.P + '-resize')
+    ], Pacem2DElement.prototype, "_resize", void 0);
+    __decorate$d([
+        pacemCore.Debounce(true)
+    ], Pacem2DElement.prototype, "_drawDebounced", null);
+    Pacem2DElement = __decorate$d([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME, shadow: true, template: `<${pacemCore.P}-resize watch-position="true"></${pacemCore.P}-resize><div class="${pacemCore.PCSS}-2d" part="container"></div><slot></slot>` })
+    ], Pacem2DElement);
+
+    var __decorate$c = (undefined && undefined.__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;
+    };
+    class DrawableElement extends pacemCore.Components.PacemCrossItemsContainerElement {
+        validate(_) {
+            // by default no children allowed (Group will except)
+            return false;
+        }
+        findContainer() {
+            // override
+            return this.parent || this.stage;
+        }
+        get stage() {
+            return this['_scene'] = this['_scene'] || pacemCore.CustomElementUtils.findAncestorOfType(this, Pacem2DElement);
+        }
+        get parent() {
+            return this['_drawableParent'] = this['_drawableParent'] || pacemCore.CustomElementUtils.findAncestor(this, i => i instanceof DrawableElement);
+        }
+        disconnectedCallback() {
+            delete this['_scene'];
+            delete this['_drawableParent'];
+            super.disconnectedCallback();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'hide':
+                        this.stage?.draw(this);
+                        break;
+                }
+            }
+        }
+    }
+    __decorate$c([
+        pacemCore.Watch({ emit: false, reflectBack: true, converter: pacemCore.PropertyConverters.String })
+    ], DrawableElement.prototype, "tag", void 0);
+    __decorate$c([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], DrawableElement.prototype, "inert", void 0);
+
+    var __decorate$b = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    const DEG2RAD = Math.PI / 180.0;
+    class UiElement extends DrawableElement {
+        #transformMatrix = pacemFoundation.Matrix2D.identity;
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this._updateTransformMatrix();
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'rotate':
+                    case 'scaleX':
+                    case 'scaleY':
+                    case 'translateX':
+                    case 'translateY':
+                        this._updateTransformMatrix();
+                    // flow down
+                    case 'opacity':
+                        this.stage?.draw(this);
+                        break;
+                }
+            }
+        }
+        _updateTransformMatrix() {
+            let rotation = DEG2RAD * (this.rotate ?? 0), cos = Math.cos(rotation), sin = Math.sin(rotation), a = (this.scaleX ?? 1) * cos, b = -sin, c = sin, d = (this.scaleY ?? 1) * cos, e = this.translateX ?? 0, f = this.translateY ?? 0;
+            this.#transformMatrix = { a, b, c, d, e, f };
+        }
+        /** @internal */
+        get transformMatrix() {
+            const m = this.#transformMatrix;
+            return { a: m.a, b: m.b, c: m.c, d: m.d, e: m.e, f: m.f };
+        }
+    }
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "rotate", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "scaleX", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "scaleY", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "translateX", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "translateY", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], UiElement.prototype, "opacity", void 0);
+    class PresentationElement extends UiElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'stroke':
+                    case 'lineWidth':
+                    case 'lineJoin':
+                    case 'lineCap':
+                    case 'dashArray':
+                    case 'fill':
+                        if (!pacemCore.Utils.isNull(this.stage)) {
+                            this.stage.draw(this);
+                        }
+                        break;
+                }
+            }
+        }
+    }
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PresentationElement.prototype, "stroke", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PresentationElement.prototype, "fill", void 0);
+    __decorate$b([
+        pacemCore.Watch({
+            emit: false, converter: {
+                convert: (attr) => attr?.split(',').map(i => parseInt(i)).filter(i => !Number.isNaN(i)),
+                convertBack: (prop) => prop?.join(',')
+            }
+        })
+    ], PresentationElement.prototype, "dashArray", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PresentationElement.prototype, "lineWidth", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PresentationElement.prototype, "lineJoin", void 0);
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PresentationElement.prototype, "lineCap", void 0);
+    class ShapeElement extends PresentationElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'data':
+                        this.stage?.draw(this);
+                        break;
+                }
+            }
+        }
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            this.recomputeShape();
+        }
+        recomputeShape() {
+            const { pathData, vertices, boundingRect } = this.getShapeGeometry();
+            this.#vertices = vertices;
+            this.#boundingRect = boundingRect;
+            this.data = pathData;
+        }
+        get pathData() {
+            return this.data;
+        }
+        #boundingRect;
+        get boundingRect() {
+            return this.#boundingRect;
+        }
+        #vertices;
+        get vertices() {
+            return this.#vertices;
+        }
+    }
+    __decorate$b([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], ShapeElement.prototype, "data", void 0);
+
+    var __decorate$a = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    let PacemGroupElement = class PacemGroupElement extends PresentationElement {
+        validate(item) {
+            return item instanceof DrawableElement && item.parent === this;
+        }
+        #children = [];
+        get childDrawables() {
+            return this.#children;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            switch (name) {
+                case 'items':
+                case 'datasource':
+                    this.#children = (val || []);
+                    const scene = this.stage;
+                    if (!pacemCore.Utils.isNull(scene)) {
+                        scene.draw(this, true);
+                    }
+                    break;
+            }
+        }
+    };
+    __decorate$a([
+        pacemCore.Watch({ emit: false })
+    ], PacemGroupElement.prototype, "datasource", void 0);
+    PacemGroupElement = __decorate$a([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-group' })
+    ], PacemGroupElement);
+
+    var __decorate$9 = (undefined && undefined.__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 PacemEllipseElement_1, PacemCircleElement_1;
+    //namespace Pacem.Components.Drawing {
+    function full(c, rx, ry) {
+        const d = 2 * rx, cx = c.x, cy = c.y;
+        return {
+            pathData: `M ${cx} ${cy} m ${-rx},0 a ${rx},${ry} 0 1,1 ${d},0 a ${rx},${ry} 0 1,1 ${-d},0`,
+            vertices: [],
+            boundingRect: { x: cx - rx, y: cy - ry, width: 2 * rx, height: 2 * ry }
+        };
+    }
+    function sect(c, rx, ry, start, end) {
+        const degToRad = Math.PI / 180;
+        const s = degToRad * start, e = degToRad * end;
+        //
+        const polar = (theta) => rx * ry / Math.sqrt(Math.pow(Math.cos(theta) * ry, 2) + Math.pow(Math.sin(theta) * rx, 2));
+        const rhoStart = polar(s), rhoEnd = polar(e);
+        const cartesian = (rho, theta) => {
+            return { x: rho * Math.cos(theta), y: rho * Math.sin(theta) };
+        };
+        const cartStart = cartesian(rhoStart, s), cartEnd = cartesian(rhoEnd, e);
+        const p0 = { x: c.x + cartStart.x, y: c.y + cartStart.y }, p1 = { x: c.x + cartEnd.x, y: c.y + cartEnd.y };
+        let boundingRect = pacemFoundation.Rect.expand(c, p0, p1);
+        if (end < start)
+            end += 360;
+        if (start <= 0 && end > 0 || end >= 360) {
+            boundingRect = pacemFoundation.Rect.expand(boundingRect, { x: c.x + rx, y: c.y });
+        }
+        if (start <= 90 && end > 90 || end >= 450) {
+            boundingRect = pacemFoundation.Rect.expand(boundingRect, { x: c.x, y: c.y + ry });
+        }
+        if (start <= 180 && end > 180 || end >= 540) {
+            boundingRect = pacemFoundation.Rect.expand(boundingRect, { x: c.x - rx, y: c.y });
+        }
+        if (start <= 270 && end > 270 || end >= 630) {
+            boundingRect = pacemFoundation.Rect.expand(boundingRect, { x: c.x, y: c.y - ry });
+        }
+        const flag = e - s > Math.PI ? '1' : '0';
+        return {
+            pathData: `M ${p0.x} ${p0.y} A ${rx},${ry} 0 ${flag},1 ${p1.x},${p1.y} L ${c.x},${c.y} Z`, vertices: [p0, p1], boundingRect
+        };
+    }
+    function getShapeGeometry(c, rx, ry, start, end) {
+        start ??= 0, end ??= 0;
+        start %= 360;
+        end %= 360;
+        while (start < 0)
+            start += 360;
+        while (end < start)
+            end += 360;
+        const threesixty = (start - end).isCloseTo(0);
+        return threesixty ? full(c, rx, ry) : sect(c, rx, ry, start, end);
+    }
+    let PacemEllipseElement = PacemEllipseElement_1 = class PacemEllipseElement extends ShapeElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'center':
+                    case 'rx':
+                    case 'ry':
+                    case 'start':
+                    case 'end':
+                        this.recomputeShape();
+                        break;
+                }
+            }
+        }
+        getPathData() {
+            const a = this.rx, b = this.ry, c = this.center, s = this.start ?? 0, e = this.end ?? 0;
+            if (!pacemCore.Utils.isNull(c) && !pacemCore.Utils.isNull(a) && !pacemCore.Utils.isNull(b)) {
+                return PacemEllipseElement_1.getPathData(c, a, b, s, e);
+            }
+            return null;
+        }
+        getShapeGeometry() {
+            const center = this.center ?? { x: 0, y: 0 };
+            const a = this.rx ?? 0, b = this.ry ?? 0;
+            return getShapeGeometry(center, a, b, this.start, this.end);
+        }
+        static getPathData(c = { x: NaN, y: NaN }, rx = NaN, ry = NaN, start, end) {
+            const { pathData } = getShapeGeometry(c, rx, ry, start, end);
+            return pathData;
+        }
+    };
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemEllipseElement.prototype, "center", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEllipseElement.prototype, "rx", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEllipseElement.prototype, "ry", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEllipseElement.prototype, "start", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemEllipseElement.prototype, "end", void 0);
+    PacemEllipseElement = PacemEllipseElement_1 = __decorate$9([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-ellipse' })
+    ], PacemEllipseElement);
+    let PacemCircleElement = PacemCircleElement_1 = class PacemCircleElement extends ShapeElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'center':
+                    case 'radius':
+                    case 'start':
+                    case 'end':
+                        this.recomputeShape();
+                        break;
+                }
+            }
+        }
+        getPathData() {
+            const r = this.radius, c = this.center;
+            if (!pacemCore.Utils.isNull(c) && !pacemCore.Utils.isNull(r)) {
+                return PacemCircleElement_1.getPathData(c, r, this.start, this.end);
+            }
+            return null;
+        }
+        getShapeGeometry() {
+            const center = this.center ?? { x: 0, y: 0 };
+            const r = this.radius ?? 0;
+            return getShapeGeometry(center, r, r, this.start, this.end);
+        }
+        static getPathData(c = { x: NaN, y: NaN }, r = NaN, start, end) {
+            return PacemEllipseElement.getPathData(c, r, r, start, end);
+        }
+    };
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemCircleElement.prototype, "center", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemCircleElement.prototype, "radius", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemCircleElement.prototype, "start", void 0);
+    __decorate$9([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemCircleElement.prototype, "end", void 0);
+    PacemCircleElement = PacemCircleElement_1 = __decorate$9([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-circle' })
+    ], PacemCircleElement);
+
+    var __decorate$8 = (undefined && undefined.__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;
+    //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}`;
+    }
+    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 (!pacemCore.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 (!pacemCore.Utils.isNull(x) && !pacemCore.Utils.isNull(y) && !pacemCore.Utils.isNull(w) && !pacemCore.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 (!pacemCore.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$8([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemRectElement.prototype, "x", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemRectElement.prototype, "y", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemRectElement.prototype, "w", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemRectElement.prototype, "h", void 0);
+    __decorate$8([
+        pacemCore.Watch({
+            emit: false, converter: {
+                convert: attr => parseCornerRadii(attr),
+                convertBack: (radii) => stringifyCornerRadii(radii)
+            }
+        })
+    ], PacemRectElement.prototype, "r", void 0);
+    __decorate$8([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemRectElement.prototype, "cornerType", void 0);
+    PacemRectElement = PacemRectElement_1 = __decorate$8([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-rect' })
+    ], PacemRectElement);
+
+    var __decorate$7 = (undefined && undefined.__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 PacemLineElement_1;
+    //namespace Pacem.Components.Drawing {
+    let PacemLineElement = PacemLineElement_1 = class PacemLineElement extends ShapeElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'from':
+                    case 'to':
+                        this.recomputeShape();
+                        break;
+                }
+            }
+        }
+        getShapeGeometry() {
+            const from = this.from, to = this.to;
+            if (pacemCore.Utils.isNull(from) || pacemCore.Utils.isNull(to)) {
+                return Shape.empty();
+            }
+            const x0 = from.x, y0 = from.y, x1 = to.x, y1 = to.y;
+            const boundingRect = { x: Math.min(x0, x1), y: Math.min(y0, y1), width: Math.abs(x0 - x1), height: Math.abs(y0 - y1) };
+            return { pathData: this.getPathData(), vertices: [from, to], boundingRect };
+        }
+        getPathData() {
+            const from = this.from, to = this.to;
+            if (!pacemCore.Utils.isNull(from) && !pacemCore.Utils.isNull(to)) {
+                return PacemLineElement_1.getPathData(from, to);
+            }
+            return null;
+        }
+        static getPathData(from = { x: NaN, y: NaN }, to = { x: NaN, y: NaN }) {
+            const x0 = from.x, y0 = from.y, x1 = to.x, y1 = to.y;
+            return `M ${x0} ${y0} L ${x1} ${y1}`;
+        }
+    };
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemLineElement.prototype, "from", void 0);
+    __decorate$7([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemLineElement.prototype, "to", void 0);
+    PacemLineElement = PacemLineElement_1 = __decorate$7([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-line' })
+    ], PacemLineElement);
+
+    var __decorate$6 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    let PacemPathElement = class PacemPathElement extends ShapeElement {
+        constructor() {
+            super(...arguments);
+            this.getPathData = () => this.d;
+        }
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (name === 'd' && !first) {
+                this.recomputeShape();
+            }
+        }
+        getShapeGeometry() {
+            return { pathData: this.getPathData(), /* TODO: parse d */ boundingRect: null, vertices: [] };
+        }
+    };
+    __decorate$6([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemPathElement.prototype, "d", void 0);
+    PacemPathElement = __decorate$6([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-path' })
+    ], PacemPathElement);
+
+    var __decorate$5 = (undefined && undefined.__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 PacemPolygonElement_1;
+    //namespace Pacem.Components.Drawing {
+    let PacemPolygonElement = PacemPolygonElement_1 = class PacemPolygonElement extends ShapeElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'radius':
+                    case 'starIndent':
+                    case 'sides':
+                        this.recomputeShape();
+                        break;
+                }
+            }
+        }
+        getPathData() {
+            const sides = this.sides, radius = this.radius, center = this.center;
+            if (!pacemCore.Utils.isNull(sides) && !pacemCore.Utils.isNull(radius)) {
+                return PacemPolygonElement_1.getPathData(center, radius, sides, this.starIndent);
+            }
+            return null;
+        }
+        getShapeGeometry() {
+            const c = this.center ?? { x: 0, y: 0 }, r = this.radius ?? 0, sides = this.sides ?? 3, si = this.starIndent;
+            if (sides < 3) {
+                return Shape.empty();
+            }
+            return PacemPolygonElement_1.getShapeGeometry(c, r, sides, si);
+        }
+        static getShapeGeometry(center, radius, sides, starIndent = .0) {
+            const p0 = { x: center.x, y: center.y - radius };
+            let retval = `M ${p0.x} ${(p0.y)}`;
+            const vertices = [p0];
+            const theta = 2 * Math.PI / sides, theta2 = .5 * theta, isStar = starIndent > 0, apothem = radius * Math.cos(theta2);
+            for (let j = 1; j < sides; j++) {
+                const angle = j * theta, x = center.x + Math.sin(angle) * radius, y = center.y - Math.cos(angle) * radius;
+                if (isStar) {
+                    const innerRadius = apothem * (1.0 - starIndent);
+                    const angle2 = angle - theta2, x1 = center.x + Math.sin(angle2) * innerRadius, y1 = center.y - Math.cos(angle2) * innerRadius;
+                    retval += ` L ${x1} ${y1} L ${x} ${y}`;
+                    vertices.push({ x: x1, y: y1 });
+                }
+                else {
+                    retval += ` L ${x} ${y}`;
+                }
+                vertices.push({ x, y });
+            }
+            if (isStar) {
+                const innerRadius = apothem * (1.0 - starIndent);
+                const angle2 = 2 * Math.PI - theta2, x1 = center.x + Math.sin(angle2) * innerRadius, y1 = center.y - Math.cos(angle2) * innerRadius;
+                retval += ` L ${x1} ${y1}`;
+                vertices.push({ x: x1, y: y1 });
+            }
+            vertices.push(p0);
+            const width = radius * 2;
+            return {
+                pathData: retval + ' Z', vertices, boundingRect: { x: p0.x - radius, y: p0.y, width, height: width }
+            };
+        }
+        static getPathData(center, radius, sides, starIndent = .0) {
+            const { pathData } = PacemPolygonElement_1.getShapeGeometry(center, radius, sides, starIndent);
+            return pathData;
+        }
+    };
+    __decorate$5([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemPolygonElement.prototype, "sides", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemPolygonElement.prototype, "radius", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemPolygonElement.prototype, "center", void 0);
+    __decorate$5([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemPolygonElement.prototype, "starIndent", void 0);
+    PacemPolygonElement = PacemPolygonElement_1 = __decorate$5([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-polygon' })
+    ], PacemPolygonElement);
+
+    var __decorate$4 = (undefined && undefined.__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 PacemPolylineElement_1;
+    //namespace Pacem.Components.Drawing {
+    const PointArrayOrJsonConverter = {
+        convert: (attr) => {
+            const arr = pacemFoundation.parseAsNumericalArray(attr);
+            if (arr.length % 2 === 0) {
+                const retval = [];
+                for (let j = 0; j < arr.length; j += 2) {
+                    retval.push({ x: arr[j], y: arr[j + 1] });
+                }
+                return retval;
+            }
+            return JSON.parse(attr);
+        },
+        convertBack: (prop) => JSON.stringify(prop)
+    };
+    let PacemPolylineElement = PacemPolylineElement_1 = class PacemPolylineElement extends ShapeElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'points':
+                    case 'closed':
+                        this.recomputeShape();
+                        break;
+                }
+            }
+        }
+        static getShapeGeometry(points, closed) {
+            if (pacemCore.Utils.isNullOrEmpty(points)) {
+                return Shape.empty();
+            }
+            let d = '';
+            let xmin = Number.MAX_VALUE, ymin = Number.MAX_VALUE, xmax = Number.MIN_VALUE, ymax = Number.MIN_VALUE;
+            for (let j = 0; j < points.length; j++) {
+                const { x, y } = points[j];
+                d += `${(j === 0 ? 'M' : 'L')} ${x} ${y} `;
+                xmin = Math.min(xmin, x);
+                xmax = Math.max(xmax, x);
+                ymin = Math.min(ymin, y);
+                ymax = Math.max(ymax, y);
+            }
+            const boundingRect = { x: xmin, y: ymin, width: xmax - xmin, height: ymax - ymin };
+            if (closed) {
+                d += 'Z';
+            }
+            return { pathData: d, vertices: points, boundingRect };
+        }
+        getShapeGeometry() {
+            return PacemPolylineElement_1.getShapeGeometry(this.points, this.closed);
+        }
+        getPathData() {
+            const { pathData } = this.getShapeGeometry();
+            return pathData;
+        }
+        static getPathData(points, closed) {
+            const { pathData } = PacemPolylineElement_1.getShapeGeometry(points, closed);
+            return pathData;
+        }
+    };
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: PointArrayOrJsonConverter })
+    ], PacemPolylineElement.prototype, "points", void 0);
+    __decorate$4([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
+    ], PacemPolylineElement.prototype, "closed", void 0);
+    PacemPolylineElement = PacemPolylineElement_1 = __decorate$4([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-polyline' })
+    ], PacemPolylineElement);
+
+    var __decorate$3 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    let PacemImageElement = class PacemImageElement extends UiElement {
+        propertyChangedCallback(name, old, val, first) {
+            super.propertyChangedCallback(name, old, val, first);
+            if (!first) {
+                switch (name) {
+                    case 'src':
+                    case 'x':
+                    case 'y':
+                    case 'width':
+                    case 'height':
+                        this.stage?.draw(this);
+                        break;
+                }
+            }
+        }
+    };
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemImageElement.prototype, "src", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemImageElement.prototype, "x", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemImageElement.prototype, "y", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemImageElement.prototype, "width", void 0);
+    __decorate$3([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemImageElement.prototype, "height", void 0);
+    PacemImageElement = __decorate$3([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-image' })
+    ], PacemImageElement);
+
+    var __decorate$2 = (undefined && undefined.__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;
+    };
+    //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 (!pacemCore.Utils.isNull(this.stage)) {
+                            this.stage.draw(this);
+                        }
+                        break;
+                }
+            }
+        }
+    };
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "text", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "color", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "fontFamily", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Number })
+    ], PacemTextElement.prototype, "fontSize", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "fontWeight", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "fontStyle", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Point })
+    ], PacemTextElement.prototype, "anchor", void 0);
+    __decorate$2([
+        pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
+    ], PacemTextElement.prototype, "textAnchor", void 0);
+    PacemTextElement = __decorate$2([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-text' })
+    ], PacemTextElement);
+
+    //namespace Pacem.Components.Drawing {
+    class AdapterUtils {
+        static stageDispatch(stage, type, evt) {
+            if (stage instanceof EventTarget) {
+                stage.dispatchEvent(new StageEvent('stage' + type, stage, evt, stage.transformMatrix));
+            }
+        }
+        static isValidViewbox(viewbox) {
+            return !pacemCore.Utils.isNullOrEmpty(viewbox) && pacemFoundation.Rect.isRect(viewbox) && Number.isFinite(viewbox.x) // isFinite includes NaN check
+                && Number.isFinite(viewbox.y) && Number.isFinite(viewbox.width) && Number.isFinite(viewbox.height);
+        }
+        static itemDispatch(target, type, offset) {
+            if (pacemCore.Utils.isNull(target?.stage)) {
+                return false;
+            }
+            var dragArgs, originalEvent, evtType;
+            if (offset instanceof Event) {
+                originalEvent = offset;
+            }
+            else {
+                dragArgs = { item: target, offset: offset };
+            }
+            if (typeof type === 'string') {
+                evtType = type;
+            }
+            else {
+                evtType = type.type;
+                originalEvent = type.originalEvent;
+            }
+            const m = target.stage.transformMatrix;
+            const evt = () => offset instanceof Event
+                ? new DrawableEvent(evtType, target, originalEvent, m)
+                : new DragEvent(evtType, { detail: dragArgs, cancelable: evtType === pacemCore.UI.DragDropEventType.Init || evtType === pacemCore.UI.DragDropEventType.Drag }, originalEvent, m);
+            const itemevt = offset instanceof Event
+                ? new DrawableEvent('item' + evtType, target, originalEvent, m)
+                : new DragEvent('item' + evtType, { detail: dragArgs, cancelable: evtType === pacemCore.UI.DragDropEventType.Init || evtType === pacemCore.UI.DragDropEventType.Drag }, originalEvent, m);
+            var prevent = false;
+            if (target instanceof EventTarget) {
+                const evnt = evt();
+                target.dispatchEvent(evnt);
+                prevent = evnt.defaultPrevented;
+            }
+            target.stage.dispatchEvent(itemevt);
+            // was the event (in one of its forms) rejected?
+            return prevent || itemevt.defaultPrevented;
+        }
+    }
+
+    const JPEG_QUALITY = .9;
+    class Pacem2DAdapterElement extends pacemCore.PacemEventTarget {
+        constructor() {
+            super(...arguments);
+            this.DefaultShapeValues = {
+                stroke: "#000",
+                lineWidth: 1,
+                fill: "#fff"
+            };
+        }
+        snapshotElement(element, bgColor, type, quality) {
+            const jpeg = !pacemCore.Utils.isNullOrEmpty(bgColor), mime = type ?? (jpeg ? 'image/jpeg' : null), compression = quality ?? (jpeg ? JPEG_QUALITY : null);
+            return pacemCore.Utils.snapshotElement(element, bgColor, mime, compression);
+        }
+    }
+
+    var __decorate$1 = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    const CANVAS_SCENE_VAR = 'pacem:2d-canvas-scene';
+    const PARENT_MATRIX_VAR = 'pacem:2d-parent-matrix';
+    const WORLD_MATRIX_VAR = 'pacem:2d-world-matrix';
+    const SETVAR$1 = pacemCore.CustomElementUtils.setAttachedPropertyValue, GETVAR$1 = pacemCore.CustomElementUtils.getAttachedPropertyValue;
+    function isNone(fillOrStroke) {
+        return fillOrStroke === 'none' || pacemCore.Utils.isNullOrEmpty(fillOrStroke);
+    }
+    function fallback$1(v, f) {
+        return pacemCore.Utils.isNull(v) ? f : v;
+    }
+    /** Implementation postponed. Focus on SVG adapter. */
+    let PacemCanvasAdapterElement = class PacemCanvasAdapterElement extends Pacem2DAdapterElement {
+        constructor() {
+            super(...arguments);
+            this._pointer = {
+                page: { x: Number.NaN, y: Number.NaN }, screen: { x: Number.NaN, y: Number.NaN }, client: { x: Number.NaN, y: Number.NaN }
+            };
+            this._dragInitHandler = (evt) => {
+                const hitTarget = this._hitTarget;
+                if (pacemCore.Utils.isNull(hitTarget) || !isUiObject(hitTarget) || !hitTarget.draggable) {
+                    evt.preventDefault();
+                    return;
+                }
+                const args = evt.detail, drawable = hitTarget, initialMatrix = hitTarget.transformMatrix ?? pacemFoundation.Matrix2D.identity, parentMatrix = GETVAR$1(hitTarget, PARENT_MATRIX_VAR, pacemFoundation.Matrix2D.identity);
+                args.data = {
+                    item: drawable,
+                    initialTransformMatrix: initialMatrix,
+                    parentMatrix
+                };
+                const reject = AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
+                if (reject) {
+                    // reject dragging
+                    evt.preventDefault();
+                }
+            };
+            this._draggingHandler = (evt) => {
+                pacemCore.avoidHandler(evt);
+                this._dragging = true;
+                const args = evt.detail;
+                const data = args.data;
+                const screenOffset = { x: args.currentPosition.x - args.origin.x, y: args.currentPosition.y - args.origin.y };
+                const offset = {
+                    x: screenOffset.x * data.parentMatrix.a + data.initialTransformMatrix.e,
+                    y: screenOffset.y * data.parentMatrix.d + data.initialTransformMatrix.f
+                };
+                //console.log(`current pos: ${args.currentPosition.x},${args.currentPosition.y}`);
+                //console.log(`origin pos: ${args.origin.x},${args.origin.y}`);
+                //console.log(`screen offset: ${screenOffset.x},${screenOffset.y}`);
+                //console.log(`offset: ${offset.x},${offset.y}`);
+                //console.log(data.item.transformMatrix);
+                //console.log(GETVAR(data.item, PARENT_MATRIX_VAR));
+                //console.log(GETVAR(data.item, WORLD_MATRIX_VAR));
+                //console.log(data.initialTransformMatrix);
+                const stageTransformMatrix = data.item.stage.transformMatrix;
+                const rejected = AdapterUtils.itemDispatch(data.item, evt, { x: screenOffset.x * stageTransformMatrix.a + stageTransformMatrix.e, y: screenOffset.y * stageTransformMatrix.d + stageTransformMatrix.f });
+                if (!rejected) {
+                    if (data.item instanceof UiElement) {
+                        data.item.translateX = offset.x;
+                        data.item.translateY = offset.y;
+                    }
+                    else {
+                        const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+                        pacemCore.Utils.extend(data.item, { transformMatrix: actual });
+                    }
+                    // console.log(data.item.transformMatrix);
+                }
+            };
+            this._dragEndHandler = (evt) => {
+                this._dragging = false;
+                const args = evt.detail, data = args.data, transform = data.item.transformMatrix;
+                AdapterUtils.itemDispatch(data.item, evt, { x: transform.e, y: transform.f });
+            };
+            // #endregion
+            this._mouseleaveHandler = (evt) => {
+                if (this._dragging) {
+                    return;
+                }
+                const hitTarget = this._hitTarget;
+                if (pacemCore.Utils.isNull(hitTarget)) {
+                    return;
+                }
+                this._scopeEvent = evt;
+                const nap = { x: Number.NaN, y: Number.NaN };
+                this._pointer = { page: nap, screen: nap, client: nap };
+                const canvas = evt.srcElement;
+                const stage = GETVAR$1(canvas, CANVAS_SCENE_VAR);
+                this._requestDraw(stage);
+            };
+            this._mousemoveHandler = (evt) => {
+                this._scopeEvent = evt;
+                this._pointer = pacemCore.CustomEventUtils.getEventCoordinates(evt);
+                const canvas = evt.srcElement;
+                const stage = GETVAR$1(canvas, CANVAS_SCENE_VAR);
+                this._requestDraw(stage);
+                if (!this._dragging) {
+                    if (!pacemCore.Utils.isNull(this._hitTarget)) {
+                        AdapterUtils.stageDispatch(stage, 'move', evt);
+                    }
+                }
+            };
+            this._mouseDownUpHandler = (evt) => {
+                this._scopeEvent = evt;
+                this._pointer = pacemCore.CustomEventUtils.getEventCoordinates(evt);
+                const canvas = evt.target;
+                if (canvas instanceof HTMLCanvasElement) {
+                    const stage = GETVAR$1(canvas, CANVAS_SCENE_VAR), hitTarget = this._hitTarget;
+                    const type = evt.type.replace(/^(mouse|touch)/, ''), fineType = type === 'end' ? 'click' : type;
+                    const opts = getStageOptions(stage);
+                    if (pacemCore.CustomEventUtils.matchModifiers(evt, opts.clickModifiers)) {
+                        if (!pacemCore.Utils.isNull(hitTarget) && hitTarget.stage === stage) {
+                            AdapterUtils.itemDispatch(hitTarget, fineType, evt);
+                        }
+                        else {
+                            AdapterUtils.stageDispatch(stage, fineType, evt);
+                        }
+                    }
+                }
+            };
+            this._scenes = new WeakMap();
+            this._handles = new WeakMap();
+        }
+        snapshot(stage, backgroundColor, type, quality) {
+            const scenes = this._scenes;
+            if (scenes.has(stage)) {
+                const ctx2d = scenes.get(stage).context, srcCanvas = ctx2d.canvas;
+                return this.snapshotElement(srcCanvas, backgroundColor, type, quality);
+            }
+            else {
+                return Promise.resolve(null);
+            }
+        }
+        getCanvas(stage) {
+            const scenes = this._scenes;
+            if (scenes.has(stage)) {
+                const ctx2d = scenes.get(stage).context;
+                return ctx2d.canvas;
+            }
+            else {
+                return null;
+            }
+        }
+        _getScreenInverseMatrix(m, offset) {
+            return pacemFoundation.Matrix2D.invert({ a: m.a, b: m.b, c: m.c, d: m.d, e: m.e + offset.x, f: m.f + offset.y });
+        }
+        getTransformMatrix(scene) {
+            const scenes = this._scenes;
+            if (scenes.has(scene)) {
+                return scenes.get(scene).screenInverseMatrix;
+            }
+            return pacemFoundation.Matrix2D.identity;
+        }
+        #dragger;
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            const dragDrop = this.#dragger = document.createElement(pacemCore.P + '-drag-drop');
+            dragDrop.mode = pacemCore.UI.DragDataMode.Copy;
+            dragDrop.dropBehavior = pacemCore.UI.DropBehavior.None;
+            dragDrop.spillBehavior = pacemCore.UI.DropTargetMissedBehavior.None;
+            const floater = document.createElement('div');
+            floater.hidden = true;
+            dragDrop.floater = floater;
+            // append
+            const shell = pacemCore.CustomElementUtils.findAncestorShell(this);
+            shell.appendChild(dragDrop);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Init, this._dragInitHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Drag, this._draggingHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.End, this._dragEndHandler, false);
+        }
+        disconnectedCallback() {
+            const dragger = this.#dragger;
+            if (!pacemCore.Utils.isNull(dragger)) {
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.Init, this._dragInitHandler, false);
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.Drag, this._draggingHandler, false);
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.End, this._dragEndHandler, false);
+                dragger.remove();
+            }
+            super.disconnectedCallback();
+        }
+        invalidateSize(scene, size) {
+            const scenes = this._scenes;
+            if (!pacemCore.Utils.isNull(scene) && !pacemCore.Utils.isNullOrEmpty(size)) {
+                if (scenes.has(scene)) {
+                    const tuple = scenes.get(scene), ctx = tuple.context;
+                    ctx.canvas.width = size.width;
+                    ctx.canvas.height = size.height;
+                    const offset = tuple.offset = pacemCore.Utils.offsetRect(ctx.canvas);
+                    // transform matrix
+                    const stage = { x: 0, y: 0, width: size.width, height: size.height }, aspectRatio = scene.aspectRatio, viewbox = scene.viewbox;
+                    if (AdapterUtils.isValidViewbox(viewbox)) {
+                        // defaults to the equivalent of SVG's xMidYMid meet
+                        let mode = 'contain', align = 'center', valign = 'middle';
+                        if (typeof aspectRatio === 'object') {
+                            mode = aspectRatio.slice ? 'cover' : 'contain';
+                            switch (aspectRatio.x) {
+                                case 'min':
+                                    align = 'left';
+                                    break;
+                                case 'max':
+                                    align = 'right';
+                                    break;
+                            }
+                            switch (aspectRatio.y) {
+                                case 'min':
+                                    valign = 'top';
+                                    break;
+                                case 'max':
+                                    valign = 'bottom';
+                                    break;
+                            }
+                        }
+                        // mimic svg viewbox
+                        const mscale = pacemFoundation.Rect.findTransform({ x: 0, y: 0, width: viewbox.width, height: viewbox.height }, stage, mode, align, valign);
+                        const m = pacemFoundation.Matrix2D.translate(mscale, { x: -mscale.a * viewbox.x, y: -mscale.a * viewbox.y });
+                        tuple.transformMatrix = m;
+                        tuple.screenInverseMatrix = this._getScreenInverseMatrix(m, offset);
+                    }
+                    else {
+                        tuple.transformMatrix = pacemFoundation.Matrix2D.identity;
+                    }
+                }
+            }
+            this._requestDraw(scene);
+        }
+        getHitTarget(stage) {
+            const target = this._hitTarget;
+            if (!pacemCore.Utils.isNull(target) && target.stage === stage) {
+                return target;
+            }
+            return null;
+        }
+        initialize(scene) {
+            if (pacemCore.Utils.isNull(scene)) {
+                throw 'Provided scene is null or undefined.';
+            }
+            const scenes = this._scenes;
+            const dragger = this.#dragger;
+            // already in the store?
+            if (scenes.has(scene)) {
+                const canvas = scenes.get(scene).context.canvas;
+                if (!pacemCore.Utils.isNull(dragger)) {
+                    dragger.register(canvas);
+                }
+                return canvas;
+            }
+            const stage = scene.stage;
+            // empty stage DOM
+            stage.innerHTML = '';
+            const canvas = document.createElement('canvas');
+            canvas.setAttribute('part', 'stage');
+            SETVAR$1(canvas, CANVAS_SCENE_VAR, scene);
+            const context = canvas.getContext('2d');
+            canvas.addEventListener('mousemove', this._mousemoveHandler, false);
+            canvas.addEventListener('mouseleave', this._mouseleaveHandler, false);
+            canvas.addEventListener('touchstart', this._mouseDownUpHandler, { passive: true });
+            canvas.addEventListener('touchmove', this._mouseDownUpHandler, { passive: true });
+            canvas.addEventListener('touchend', this._mouseDownUpHandler, { passive: true });
+            canvas.addEventListener('click', this._mouseDownUpHandler, false);
+            canvas.addEventListener('mousedown', this._mouseDownUpHandler, false);
+            canvas.addEventListener('mouseup', this._mouseDownUpHandler, false);
+            stage.appendChild(canvas);
+            scenes.set(scene, { context, transformMatrix: pacemFoundation.Matrix2D.identity, offset: pacemCore.Utils.offsetRect(canvas), screenInverseMatrix: pacemFoundation.Matrix2D.identity });
+            if (!pacemCore.Utils.isNull(dragger)) {
+                dragger.register(canvas);
+            }
+            return canvas;
+        }
+        dispose(scene) {
+            const scenes = this._scenes;
+            if (scenes.has(scene)) {
+                var tuple = scenes.get(scene), context = tuple.context, canvas = context.canvas;
+                const dragger = this.#dragger;
+                if (!pacemCore.Utils.isNull(dragger)) {
+                    dragger.unregister(canvas);
+                }
+                canvas.removeEventListener('click', this._mouseDownUpHandler, false);
+                canvas.removeEventListener('touchend', this._mouseDownUpHandler, false);
+                canvas.removeEventListener('mousedown', this._mouseDownUpHandler, false);
+                canvas.removeEventListener('mouseup', this._mouseDownUpHandler, false);
+                // canvas.removeEventListener('touchmove', this._mouseDownUpHandler);
+                canvas.removeEventListener('touchstart', this._mouseDownUpHandler);
+                canvas.removeEventListener('mouseleave', this._mouseleaveHandler, false);
+                canvas.removeEventListener('mousemove', this._mousemoveHandler, false);
+                // remove
+                canvas.remove();
+                scenes.delete(scene);
+            }
+        }
+        _requestDraw(scene) {
+            const handles = this._handles;
+            if (handles.has(scene)) {
+                cancelAnimationFrame(handles.get(scene));
+            }
+            const throttle = () => {
+                this.draw(scene);
+                return requestAnimationFrame(() => { });
+            };
+            handles.set(scene, throttle());
+        }
+        #canvasCssStyle;
+        draw(scene) {
+            const scenes = this._scenes, handles = this._handles;
+            if (!pacemCore.Utils.isNull(scene)) {
+                if (scene.adapter !== this) {
+                    // not a pertinent stage anymore
+                    if (scenes.has(scene)) {
+                        scenes.delete(scene);
+                        handles.get(scene);
+                    }
+                    return;
+                }
+                if (!scenes.has(scene)) {
+                    // forgiving behavior (call initialize() if it's the case)
+                    this.initialize(scene);
+                    return;
+                }
+                if (handles.has(scene)) {
+                    // already in the drawing loop, reset
+                    cancelAnimationFrame(handles.get(scene));
+                }
+                const formerHitTarget = this._hitTarget;
+                const items = scene.datasource || [];
+                // reset hit target
+                this._hitTarget = null;
+                // clear stage
+                const tuple = scenes.get(scene), context = tuple.context, canvas = context.canvas;
+                this.#canvasCssStyle = getComputedStyle(canvas);
+                context.resetTransform();
+                context.clearRect(0, 0, canvas.width, canvas.height);
+                // viewbox
+                const m = tuple.transformMatrix;
+                context.setTransform(m);
+                // hit test
+                const pointer = this._pointer, offset = tuple.offset, point = Number.isNaN(pointer.page.x) || Number.isNaN(pointer.page.y) ? null : { x: pointer.page.x - offset.x, y: pointer.page.y - offset.y };
+                // draw recursively
+                for (let drawable of items) {
+                    this._draw(scene, context, drawable, { transformMatrix: m }, point);
+                }
+                // check hit target
+                const currentHitTarget = this._hitTarget;
+                if (currentHitTarget != formerHitTarget) {
+                    if (!pacemCore.Utils.isNull(formerHitTarget)) {
+                        if (formerHitTarget instanceof Element) {
+                            formerHitTarget.dispatchEvent(new DrawableEvent('out', formerHitTarget, this._scopeEvent, m));
+                        }
+                        scene.dispatchEvent(new DrawableEvent('itemout', formerHitTarget, this._scopeEvent, m));
+                    }
+                    if (!pacemCore.Utils.isNull(currentHitTarget)) {
+                        if (currentHitTarget instanceof Element) {
+                            currentHitTarget.dispatchEvent(new DrawableEvent('over', currentHitTarget, this._scopeEvent, m));
+                        }
+                        scene.dispatchEvent(new DrawableEvent('itemover', currentHitTarget, this._scopeEvent, m));
+                    }
+                }
+                // do not loop
+                // this._requestDraw(scene);
+            }
+        }
+        _draw(scene, ctx, item, state, point) {
+            item.stage ??= scene;
+            if (isDrawable(item)) {
+                if (item.hide) {
+                    return;
+                }
+            }
+            // store parent matrix value for dragging purposes
+            if (isUiObject(item) && item.draggable && !item.hide && !item.inert) {
+                SETVAR$1(item, PARENT_MATRIX_VAR, ctx.getTransform().inverse());
+            }
+            let t;
+            if (isUiObject(item)) {
+                t = item.transformMatrix;
+                if (!pacemCore.Utils.isNull(t) && !pacemFoundation.Matrix2D.isIdentity(t)) {
+                    ctx.transform(t.a, t.b, t.c, t.d, t.e, t.f);
+                }
+            }
+            let contextPresentationState = state;
+            if (isPresentationObject(item)) {
+                //const stateWithWorldTransformMatrix = Utils.extend({}, state, { transformMatrix: ctx.getTransform() });
+                contextPresentationState = PresentationState.combine(item, state, ctx.getTransform());
+                // set presentation state
+                this._setPresentationState(ctx, contextPresentationState);
+            }
+            if (isShape(item) || item instanceof ShapeElement) {
+                this._drawShape(ctx, item, point);
+            }
+            else if (isText(item) || item instanceof PacemTextElement) {
+                this._drawText(ctx, item, point);
+            }
+            else if (isImage(item) || item instanceof PacemImageElement) {
+                this._drawImage(ctx, item, point);
+            }
+            else if (isGroup(item) || item instanceof PacemGroupElement) {
+                for (let child of item.childDrawables || []) {
+                    this._draw(scene, ctx, child, contextPresentationState, point);
+                }
+            }
+            // store global matrix value for debugging purposes
+            if (isUiObject(item) && item.draggable && !item.hide && !item.inert) {
+                SETVAR$1(item, WORLD_MATRIX_VAR, ctx.getTransform().inverse());
+            }
+            // reset presentation state
+            this._setPresentationState(ctx, state);
+        }
+        _setPresentationState(ctx, item) {
+            ctx.setTransform(item.transformMatrix);
+            if (!pacemCore.Utils.isNullOrEmpty(item.stroke) && !isNone(item.stroke)) {
+                ctx.strokeStyle = item.stroke;
+            }
+            else {
+                ctx.strokeStyle = 'transparent';
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(item.lineWidth)) {
+                ctx.lineWidth = item.lineWidth;
+            }
+            else {
+                ctx.lineWidth = 0;
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(item.dashArray)) {
+                ctx.setLineDash(item.dashArray);
+            }
+            else {
+                ctx.setLineDash([]);
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(item.lineCap)) {
+                ctx.lineCap = item.lineCap;
+            }
+            else {
+                ctx.lineCap = 'butt';
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(item.lineJoin)) {
+                ctx.lineJoin = item.lineJoin;
+            }
+            else {
+                ctx.lineJoin = 'miter';
+            }
+            if (typeof item.fill === 'object' && !pacemCore.Utils.isNullOrEmpty(item.fill)) {
+                const { stops } = item.fill;
+                let gradient;
+                if (isLinearGradient(item.fill)) {
+                    // linear gradient
+                    const { start, end } = item.fill;
+                    gradient = ctx.createLinearGradient(start.x, start.y, end.x, end.y);
+                }
+                else if (isRadialGradient(item.fill)) {
+                    // radial gradient
+                    const { center, radius } = item.fill;
+                    gradient = ctx.createRadialGradient(center.x, center.y, radius, center.x, center.y, radius);
+                }
+                else {
+                    throw new Error('Unmanaged gradient type.');
+                }
+                for (let stop of stops) {
+                    gradient.addColorStop(stop.offset, stop.color);
+                }
+                ctx.fillStyle = gradient;
+            }
+            else if (!pacemCore.Utils.isNullOrEmpty(item.fill) && typeof item.fill === 'string' && !isNone(item.fill)) {
+                ctx.fillStyle = item.fill;
+            }
+            else {
+                ctx.fillStyle = 'transparent';
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(item.opacity)) {
+                ctx.globalAlpha = item.opacity;
+            }
+            else {
+                ctx.globalAlpha = 1.0;
+            }
+        }
+        _drawImage(ctx, item, point) {
+            const CANVAS_IMAGESOURCE_VAR = 'pacem:2d-canvas-imagesrc';
+            let img = GETVAR$1(item, CANVAS_IMAGESOURCE_VAR);
+            const imgLoadHandler = () => {
+                let dw = img.naturalWidth, dh = img.naturalHeight, w = item.width, h = item.height;
+                if (w > 0 && h > 0) ;
+                else if (w > 0) {
+                    h = dh * w / dw;
+                }
+                else if (h > 0) {
+                    w = dw * h / dh;
+                }
+                else {
+                    w = dw;
+                    h = dh;
+                }
+                if (!this._dragging
+                    && !item.inert /* is hit-test visible? */
+                    && !pacemCore.Utils.isNull(point)) {
+                    const path2D = new Path2D(`M ${item.x} ${item.y} h ${w} v ${h} H ${item.x} Z`);
+                    if (ctx.isPointInPath(path2D, point.x, point.y)) {
+                        // overwrite current hit-target (last one wins)
+                        this._hitTarget = item;
+                    }
+                }
+                ctx.globalAlpha = fallback$1(item.opacity, 1);
+                ctx.drawImage(img, item.x, item.y, w, h);
+            };
+            if (pacemCore.Utils.isNull(img)) {
+                img = new Image();
+                img.src = item.src;
+                img.onload = () => {
+                    SETVAR$1(item, CANVAS_IMAGESOURCE_VAR, img);
+                    imgLoadHandler();
+                };
+            }
+            else {
+                imgLoadHandler();
+            }
+        }
+        _drawText(ctx, item, point) {
+            const defaults = this.DefaultShapeValues;
+            const color = ctx.fillStyle = fallback$1(item.color, defaults.stroke);
+            ctx.getTransform(); const fontSize = item.fontSize > 0 ? `${item.fontSize}px` : this.#canvasCssStyle.fontSize, fontStyle = item.fontStyle || this.#canvasCssStyle.fontStyle, fontWeight = item.fontWeight || this.#canvasCssStyle.fontWeight;
+            ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${(item.fontFamily ?? this.#canvasCssStyle.fontFamily)}`;
+            ctx.textAlign = item.textAnchor === 'middle' ? 'center' : item.textAnchor;
+            ctx.fillText(item.text, item.anchor.x, item.anchor.y);
+            ctx.globalAlpha = fallback$1(item.opacity, 1);
+            const hasColor = !isNone(color);
+            if (!this._dragging
+                && !item.inert /* is hit-test visible? */
+                && !pacemCore.Utils.isNull(point)) {
+                const bbox = ctx.measureText(item.text);
+                const width = bbox.width, height = bbox.actualBoundingBoxAscent + bbox.actualBoundingBoxDescent, x = item.anchor.x - bbox.actualBoundingBoxLeft, y = item.anchor.y - bbox.actualBoundingBoxAscent;
+                const path2D = new Path2D(`M ${x} ${y} h ${width} v ${height} H ${x} z`);
+                if (hasColor && ctx.isPointInPath(path2D, point.x, point.y)) {
+                    // overwrite current hit-target (last one wins)
+                    this._hitTarget = item;
+                }
+            }
+        }
+        _drawShape(ctx, item, point) {
+            if (pacemCore.Utils.isNullOrEmpty(item?.pathData)) {
+                return;
+            }
+            ctx.beginPath();
+            // Path2D
+            const hasFill = typeof ctx.fillStyle !== 'string' || !isNone(ctx.fillStyle), hasStroke = typeof ctx.strokeStyle !== 'string' || !isNone(ctx.strokeStyle);
+            var path2D = new Path2D(item.pathData);
+            if (!this._dragging
+                && !item.inert /* is hit-test visible? */
+                && !pacemCore.Utils.isNull(point)) {
+                if ((hasFill && ctx.isPointInPath(path2D, point.x, point.y))
+                    || (hasStroke && ctx.isPointInStroke(path2D, point.x, point.y))) {
+                    // overwrite current hit-target (last one wins)
+                    this._hitTarget = item;
+                }
+            }
+            if (hasStroke) {
+                ctx.stroke(path2D);
+            }
+            if (hasFill) {
+                ctx.fill(path2D);
+            }
+            const hasEnoughVertices = !pacemCore.Utils.isNullOrEmpty(item.vertices) && item.vertices.length > 1, hasMarkerEnd = !pacemCore.Utils.isNull(item.markerEnd), hasMarkerStart = !pacemCore.Utils.isNull(item.markerStart), hasMarkerMid = !pacemCore.Utils.isNull(item.markerMid);
+            if (hasMarkerEnd || hasMarkerMid || hasMarkerStart) {
+                if (!hasEnoughVertices) {
+                    this.log(pacemCore.Logging.LogLevel.Warn, "Not enough vertices were explicited in order to make markers renderable.");
+                }
+            }
+            // WebGL: we can render markers only if vertices are explicit
+            if (hasEnoughVertices) {
+                const matrix = ctx.getTransform();
+                if (hasMarkerStart) {
+                    const marker = item.markerEnd, from = item.vertices[1], to = item.vertices[0];
+                    const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+                    this._drawMarker(ctx, marker, to, orientation);
+                }
+                if (hasMarkerMid) {
+                    const marker = item.markerEnd;
+                    for (let j = 1; j < item.vertices.length - 1; j++) {
+                        // reset transform, just in case
+                        ctx.setTransform(matrix);
+                        const from = item.vertices[j], to = item.vertices[j + 1];
+                        const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+                        this._drawMarker(ctx, marker, to, orientation);
+                    }
+                }
+                if (hasMarkerEnd) {
+                    // reset transform, just in case
+                    ctx.setTransform(matrix);
+                    const marker = item.markerEnd, from = item.vertices[item.vertices.length - 2], to = item.vertices[item.vertices.length - 1];
+                    const orientation = Math.atan2(to.y - from.y, to.x - from.x);
+                    this._drawMarker(ctx, marker, to, orientation);
+                }
+            }
+        }
+        _drawMarker(ctx, marker, point, orientation) {
+            const defaults = this.DefaultShapeValues;
+            const refX = marker.ref?.x || 0, refY = marker.ref?.y || 0;
+            const width = (marker.width || 1) * ctx.lineWidth, height = (marker.width || 1) * ctx.lineWidth;
+            let viewbox = marker.viewbox, stage = { x: 0, y: 0, width: width, height: height };
+            if (pacemCore.Utils.isNull(viewbox)) {
+                viewbox = stage;
+            }
+            // prepare
+            const mscale = { a: stage.width / viewbox.width, d: stage.height / viewbox.height }; // Rect.findTransform({ x: 0, y: 0, width: viewbox.width, height: viewbox.height }, stage, 'stretch', 'left', 'top');
+            // execute
+            ctx.translate(point.x, point.y);
+            ctx.rotate(orientation);
+            ctx.scale(mscale.a, mscale.d);
+            ctx.translate(-refX, -refY);
+            ctx.fillStyle = fallback$1(marker.fill, defaults.fill);
+            ctx.strokeStyle = fallback$1(marker.stroke, defaults.stroke);
+            // Path2D
+            const hasMarkerFill = !isNone(marker.fill), hasMarkerStroke = !isNone(marker.stroke);
+            var markerPath2D = new Path2D(marker.pathData);
+            if (hasMarkerFill) {
+                ctx.fill(markerPath2D);
+            }
+            if (hasMarkerStroke) {
+                ctx.stroke(markerPath2D);
+            }
+        }
+    };
+    PacemCanvasAdapterElement = __decorate$1([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-canvas-adapter' })
+    ], PacemCanvasAdapterElement);
+
+    var __decorate = (undefined && undefined.__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;
+    };
+    //namespace Pacem.Components.Drawing {
+    const SVG_NS = 'http://www.w3.org/2000/svg', DRAWABLE_VAR = 'pacem:2-svg-drawable', STAGE_VAR = 'pacem:2d-svg-stage', GETVAR = pacemCore.CustomElementUtils.getAttachedPropertyValue, SETVAR = pacemCore.CustomElementUtils.setAttachedPropertyValue, DELVAR = pacemCore.CustomElementUtils.deleteAttachedPropertyValue;
+    function fallback(v, f) {
+        return pacemCore.Utils.isNull(v) ? f : v;
+    }
+    function replaceChildAt(parent, newChild, targetIndex) {
+        if (targetIndex >= parent.children.length) {
+            parent.appendChild(newChild);
+            return null;
+        }
+        else {
+            return parent.replaceChild(newChild, parent.children.item(targetIndex));
+        }
+    }
+    let PacemSvgAdapterElement = class PacemSvgAdapterElement extends Pacem2DAdapterElement {
+        constructor() {
+            super(...arguments);
+            this._hitTarget = null;
+            this._dragInitHandler = (evt) => {
+                const args = evt.detail, el = args.element, drawable = GETVAR(el, DRAWABLE_VAR), stageTransformMatrix = drawable.stage.transformMatrix, initialMatrix = drawable.transformMatrix ?? pacemFoundation.Matrix2D.identity;
+                args.data = {
+                    stageTransformMatrix, item: drawable,
+                    initialTransformMatrix: initialMatrix
+                };
+                const reject = AdapterUtils.itemDispatch(drawable, evt, { x: 0, y: 0 });
+                if (reject) {
+                    // reject dragging
+                    evt.preventDefault();
+                }
+            };
+            this._draggingHandler = (evt) => {
+                pacemCore.avoidHandler(evt);
+                this.#dragging = true;
+                const el = evt.detail.element;
+                const data = evt.detail.data;
+                const args = evt.detail;
+                const screenOffset = { x: (args.currentPosition.x - args.origin.x) * data.stageTransformMatrix.a, y: (args.currentPosition.y - args.origin.y) * data.stageTransformMatrix.d };
+                const offset = {
+                    x: screenOffset.x + data.initialTransformMatrix.e,
+                    y: screenOffset.y + data.initialTransformMatrix.f
+                }, 
+                // this is not correct when item or any of its parents have been rotated!
+                stageOffset = {
+                    x: screenOffset.x + data.stageTransformMatrix.e,
+                    y: screenOffset.y + data.stageTransformMatrix.f
+                };
+                //console.log(`current pos: ${args.currentPosition.x},${args.currentPosition.y}`);
+                //console.log(`origin pos: ${args.origin.x},${args.origin.y}`);
+                //console.log(`offset: ${offset.x},${offset.y}`);
+                //console.log(data.stageTransformMatrix);
+                //console.log(el.style.transform); console.log(data.initialTransformMatrix);
+                const rejected = AdapterUtils.itemDispatch(data.item, evt, stageOffset);
+                if (!rejected) {
+                    const init = data.initialTransformMatrix;
+                    el.style.transform = `matrix(${init.a},${init.b},${init.c},${init.d},${offset.x},${offset.y})`;
+                }
+            };
+            this._dragEndHandler = (evt) => {
+                this.#dragging = false;
+                const args = evt.detail, el = args.element, data = args.data, transform = pacemCore.Utils.deserializeTransform(el.style);
+                // store transform
+                const offset = { x: transform.e, y: transform.f };
+                if (data.item instanceof UiElement) {
+                    data.item.translateX = offset.x;
+                    data.item.translateY = offset.y;
+                }
+                else {
+                    const init = data.initialTransformMatrix, actual = { a: init.a, b: init.b, c: init.c, d: init.d, e: offset.x, f: offset.y };
+                    pacemCore.Utils.extend(data.item, { transformMatrix: actual });
+                }
+                el.style.transform = '';
+                AdapterUtils.itemDispatch(data.item, evt, offset);
+            };
+            this._mouseleaveHandler = (evt) => {
+                if (this.#dragging) {
+                    return;
+                }
+                const hitTarget = this._hitTarget;
+                if (pacemCore.Utils.isNull(hitTarget)) {
+                    return;
+                }
+                this._hitTarget = null;
+                if (!pacemCore.Utils.isNull(hitTarget)) {
+                    this.#dragger.unregister(this._items.get(hitTarget));
+                    AdapterUtils.itemDispatch(hitTarget, 'out', evt);
+                }
+            };
+            this._mousemoveHandler = (evt) => {
+                var pt = pacemCore.CustomEventUtils.getEventCoordinates(evt).client;
+                if (!this.#dragging) {
+                    // not dragging around
+                    var d = null;
+                    const root = evt.target.getRootNode();
+                    root.elementsFromPoint(pt.x, pt.y).find(i => {
+                        d = GETVAR(i, DRAWABLE_VAR);
+                        return d && !d.inert;
+                    });
+                    var old = this._hitTarget, val = d;
+                    if (pacemCore.Utils.isNull(d && d.stage) || !this._scenes.has(d.stage) || d.inert) {
+                        val = null;
+                    }
+                    const hitTarget = this._hitTarget = val;
+                    if (val !== old) {
+                        if (!pacemCore.Utils.isNull(old)) {
+                            this.#dragger.unregister(this._items.get(old));
+                            AdapterUtils.itemDispatch(old, 'out', evt);
+                        }
+                        if (!pacemCore.Utils.isNull(val)) {
+                            if (val.draggable) {
+                                this.#dragger.register(this._items.get(val));
+                            }
+                            AdapterUtils.itemDispatch(val, 'over', evt);
+                        }
+                    }
+                    if (pacemCore.Utils.isNull(hitTarget)) {
+                        // dispatch only if no hit target
+                        const svg = evt.currentTarget;
+                        const stage = GETVAR(svg, STAGE_VAR);
+                        if (!pacemCore.Utils.isNull(stage)) {
+                            AdapterUtils.stageDispatch(stage, 'move', evt);
+                        }
+                    }
+                }
+            };
+            this._mouseDownUpHandler = (evt) => {
+                const svg = evt.currentTarget;
+                if (svg instanceof SVGSVGElement) {
+                    const stage = GETVAR(svg, STAGE_VAR), hitTarget = this._hitTarget;
+                    const type = evt.type.replace(/^mouse/, '');
+                    const opts = getStageOptions(stage);
+                    if (pacemCore.CustomEventUtils.matchModifiers(evt, opts.clickModifiers)) {
+                        if (!pacemCore.Utils.isNull(hitTarget) && hitTarget.stage === stage) {
+                            AdapterUtils.itemDispatch(hitTarget, type, evt);
+                        }
+                        else {
+                            AdapterUtils.stageDispatch(stage, type, evt);
+                        }
+                    }
+                }
+            };
+            this._scenes = new WeakMap();
+            this._markers = new WeakMap();
+            this._gradients = new WeakMap();
+            this._items = new WeakMap();
+        }
+        snapshot(stage, background, type, quality) {
+            if (this._scenes.has(stage)) {
+                const svg = this._scenes.get(stage);
+                return this.snapshotElement(svg, background, type, quality);
+            }
+            else {
+                return Promise.resolve(null);
+            }
+        }
+        getTransformMatrix(scene) {
+            const scenes = this._scenes;
+            if (scenes.has(scene)) {
+                return scenes.get(scene).getScreenCTM().inverse();
+            }
+            return pacemFoundation.Matrix2D.identity;
+        }
+        #dragger;
+        viewActivatedCallback() {
+            super.viewActivatedCallback();
+            const dragDrop = this.#dragger = document.createElement(pacemCore.P + '-drag-drop');
+            dragDrop.mode = pacemCore.UI.DragDataMode.Self;
+            // append
+            const shell = pacemCore.CustomElementUtils.findAncestorShell(this);
+            shell.appendChild(dragDrop);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Init, this._dragInitHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.Drag, this._draggingHandler, false);
+            dragDrop.addEventListener(pacemCore.UI.DragDropEventType.End, this._dragEndHandler, false);
+        }
+        disconnectedCallback() {
+            const dragger = this.#dragger;
+            if (!pacemCore.Utils.isNull(dragger)) {
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.Init, this._dragInitHandler, false);
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.Drag, this._draggingHandler, false);
+                dragger.removeEventListener(pacemCore.UI.DragDropEventType.End, this._dragEndHandler, false);
+                dragger.remove();
+            }
+            super.disconnectedCallback();
+        }
+        invalidateSize(scene, size) {
+            const scenes = this._scenes;
+            if (!pacemCore.Utils.isNull(scene) && !pacemCore.Utils.isNullOrEmpty(size)) {
+                if (scenes.has(scene)) {
+                    var svg = scenes.get(scene);
+                    svg.setAttribute('width', size.width + '');
+                    svg.setAttribute('height', size.height + '');
+                    const rect = scene.viewbox, aspectRatio = scene.aspectRatio;
+                    if (AdapterUtils.isValidViewbox(rect)) {
+                        svg.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
+                    }
+                    else {
+                        svg.removeAttribute('viewBox');
+                    }
+                    if (pacemCore.Utils.isNullOrEmpty(aspectRatio) || typeof aspectRatio === 'string') {
+                        svg.removeAttribute('preserveAspectRatio');
+                    }
+                    else {
+                        svg.setAttribute('preserveAspectRatio', `xM${aspectRatio.x.substring(1)}YM${aspectRatio.y.substring(1)} ${(aspectRatio.slice ? 'slice' : 'meet')}`);
+                    }
+                }
+            }
+        }
+        initialize(scene) {
+            if (pacemCore.Utils.isNull(scene)) {
+                throw 'Provided scene is null or undefined.';
+            }
+            const scenes = this._scenes;
+            // already in the store?
+            if (scenes.has(scene)) {
+                return scenes.get(scene);
+            }
+            const stage = scene.stage;
+            // empty stage DOM and clear dictionary
+            stage.innerHTML = '';
+            this._items = new WeakMap();
+            var svg = document.createElementNS(SVG_NS, 'svg');
+            svg.setAttribute('part', 'stage');
+            SETVAR(svg, STAGE_VAR, scene);
+            stage.appendChild(svg);
+            scenes.set(scene, svg);
+            svg.addEventListener('mousemove', this._mousemoveHandler, false);
+            svg.addEventListener('click', this._mouseDownUpHandler, false);
+            svg.addEventListener('mousedown', this._mouseDownUpHandler, false);
+            svg.addEventListener('mouseup', this._mouseDownUpHandler, false);
+            svg.addEventListener('mouseleave', this._mouseleaveHandler, false);
+            // draw right away
+            // this.draw(scene);
+            return svg;
+        }
+        dispose(scene) {
+            const scenes = this._scenes;
+            if (scenes.has(scene)) {
+                var svg = scenes.get(scene);
+                svg.removeEventListener('mousemove', this._mousemoveHandler);
+                svg.removeEventListener('click', this._mouseDownUpHandler);
+                svg.removeEventListener('mousedown', this._mouseDownUpHandler);
+                svg.removeEventListener('mouseup', this._mouseDownUpHandler);
+                svg.removeEventListener('mouseleave', this._mouseleaveHandler);
+                // remove
+                DELVAR(svg, STAGE_VAR);
+                svg.remove();
+                scenes.delete(scene);
+            }
+        }
+        getHitTarget(scene) {
+            return this._hitTarget;
+        }
+        draw(scene, item, deepRedraw = false) {
+            const scenes = this._scenes, dict = this._items;
+            if (!pacemCore.Utils.isNull(scene)) {
+                if (scene.adapter === this) {
+                    if (!scenes.has(scene)) {
+                        // forgiving behavior (call initialize() if it's the case)
+                        this.initialize(scene);
+                    }
+                }
+                else {
+                    if (scenes.has(scene)) {
+                        scenes.delete(scene);
+                    }
+                    return;
+                }
+            }
+            else {
+                return;
+            }
+            var items = scene.datasource, flow = true, parent = scenes.get(scene);
+            // item provided?
+            if (!pacemCore.Utils.isNull(item) && dict.has(item)) {
+                items = [item];
+                parent = dict.get(item).parentNode;
+                flow = false;
+            }
+            if (flow) {
+                // sweep everything, quick and dirty
+                parent.innerHTML = '<defs></defs>';
+                this._markers = new WeakMap();
+            }
+            this._draw(scene, parent, items || [], flow, deepRedraw);
+        }
+        #dragging;
+        _hasItems(object) {
+            return isGroup(object);
+        }
+        _disposeSvg(el) {
+            if (!pacemCore.Utils.isNull(el)) {
+                var drawable = GETVAR(el, DRAWABLE_VAR);
+                DELVAR(el, DRAWABLE_VAR);
+                this._items.delete(drawable);
+            }
+        }
+        _draw(scene, parent, items, flow, deepRedraw) {
+            const dict = this._items;
+            // children counter
+            let j = 0;
+            if (parent.firstElementChild instanceof SVGDefsElement) {
+                j++;
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(items)) {
+                for (let item of items) {
+                    item.stage ??= scene;
+                    let el;
+                    if (!dict.has(item)) {
+                        el = this._buildSVGElement(item);
+                        SETVAR(el, DRAWABLE_VAR, item);
+                        this._disposeSvg(replaceChildAt(parent, el, j));
+                        dict.set(item, el);
+                    }
+                    else {
+                        el = dict.get(item);
+                        if (el.parentNode !== parent) {
+                            this._disposeSvg(replaceChildAt(parent, el, j));
+                        }
+                    }
+                    if (isDrawable(item)) {
+                        if (item.hide) {
+                            el.setAttribute('display', 'none');
+                        }
+                        else {
+                            el.removeAttribute('display');
+                        }
+                        el.style.transform = '';
+                    }
+                    if (isShape(item)) {
+                        const path = el;
+                        path.setAttribute('d', fallback(item.pathData, 'M0,0'));
+                        // markers
+                        for (let { marker, suffix } of [{ marker: item.markerStart, suffix: 'start' }, { marker: item.markerEnd, suffix: 'end' }, { marker: item.markerMid, suffix: 'mid' }]) {
+                            if (marker) {
+                                const markerSvg = this._ensureMarker(parent, marker);
+                                path.setAttribute('marker-' + suffix, `url(#${markerSvg.id})`);
+                            }
+                            else {
+                                path.removeAttribute('marker-' + suffix);
+                            }
+                        }
+                    }
+                    else if (isText(item)) {
+                        const text = el;
+                        text.textContent = item.text;
+                        text.style.fill = pacemCore.Utils.isNullOrEmpty(item.color) ? '' : item.color;
+                        text.style.fontFamily = pacemCore.Utils.isNullOrEmpty(item.fontFamily) ? '' : item.fontFamily;
+                        //if (item.fontSize > 0) {
+                        //    text.setAttribute('font-size', item.fontSize.toString());
+                        //} else {
+                        //    text.removeAttribute('font-size');
+                        //}
+                        text.style.fontSize = pacemCore.Utils.isNull(item.fontSize) ? '' : item.fontSize + 'px';
+                        if (!pacemCore.Utils.isNullOrEmpty(item.fontWeight)) {
+                            text.style.fontWeight = item.fontWeight;
+                        }
+                        if (!pacemCore.Utils.isNullOrEmpty(item.fontStyle)) {
+                            text.style.fontStyle = item.fontStyle;
+                        }
+                        text.setAttribute('text-anchor', fallback(item.textAnchor, 'start'));
+                        if (!pacemCore.Utils.isNull(item.anchor)) {
+                            text.setAttribute('x', item.anchor.x.toString());
+                            text.setAttribute('y', item.anchor.y.toString());
+                        }
+                        else {
+                            text.removeAttribute('x');
+                            text.removeAttribute('y');
+                        }
+                    }
+                    else if (isImage(item)) {
+                        const img = el;
+                        img.setAttribute('href', item.src);
+                        img.setAttribute('preserveAspectRatio', 'none');
+                        if (item.width > 0) {
+                            img.setAttribute('width', '' + item.width);
+                        }
+                        else {
+                            img.removeAttribute('width');
+                        }
+                        if (item.height > 0) {
+                            img.setAttribute('height', '' + item.height);
+                        }
+                        else {
+                            img.removeAttribute('height');
+                        }
+                        if (!pacemCore.Utils.isNull(item.x)) {
+                            img.setAttribute('x', '' + item.x);
+                        }
+                        else {
+                            img.removeAttribute('x');
+                        }
+                        if (!pacemCore.Utils.isNull(item.y)) {
+                            img.setAttribute('y', '' + item.y);
+                        }
+                        else {
+                            img.removeAttribute('y');
+                        }
+                    }
+                    if (isUiObject(item)) {
+                        const t = item.transformMatrix;
+                        if (pacemCore.Utils.isNull(t) || pacemFoundation.Matrix2D.isIdentity(t)) {
+                            el.removeAttribute('transform');
+                        }
+                        else {
+                            el.setAttribute('transform', `matrix(${t.a} ${t.b} ${t.c} ${t.d} ${t.e} ${t.f})`);
+                        }
+                        const opacity = fallback(item.opacity, 1);
+                        if (opacity === 1) {
+                            el.removeAttribute('opacity');
+                        }
+                        else {
+                            el.setAttribute('opacity', '' + opacity);
+                        }
+                    }
+                    if (isPresentationObject(item)) {
+                        if (pacemCore.Utils.isNullOrEmpty(item.fill)) {
+                            el.removeAttribute('fill');
+                        }
+                        else if (typeof item.fill === 'string') {
+                            el.setAttribute('fill', item.fill);
+                        }
+                        else {
+                            const grad = this._ensureGradient(parent, item.fill);
+                            el.setAttribute('fill', `url(#${grad.id})`);
+                        }
+                        if (pacemCore.Utils.isNullOrEmpty(item.stroke)) {
+                            el.removeAttribute('stroke');
+                        }
+                        else {
+                            el.setAttribute('stroke', item.stroke);
+                        }
+                        if (pacemCore.Utils.isNullOrEmpty(item.dashArray)) {
+                            el.removeAttribute('stroke-dasharray');
+                        }
+                        else {
+                            el.setAttribute('stroke-dasharray', item.dashArray.join(' '));
+                        }
+                        if (pacemCore.Utils.isNullOrEmpty(item.lineCap)) {
+                            el.removeAttribute('stroke-linecap');
+                        }
+                        else {
+                            el.setAttribute('stroke-linecap', item.lineCap);
+                        }
+                        if (pacemCore.Utils.isNullOrEmpty(item.lineJoin)) {
+                            el.removeAttribute('stroke-linejoin');
+                        }
+                        else {
+                            el.setAttribute('stroke-linejoin', item.lineJoin);
+                        }
+                        if (pacemCore.Utils.isNullOrEmpty(item.lineWidth)) {
+                            el.removeAttribute('stroke-width');
+                        }
+                        else {
+                            el.setAttribute('stroke-width', '' + item.lineWidth);
+                        }
+                        //let css = '';
+                        //if (!Utils.isNullOrEmpty(item.dashArray)) {
+                        //    css += `stroke-dasharray: ${item.dashArray.join(',')};`;
+                        //}
+                        //if (!Utils.isNullOrEmpty(item.lineCap)) {
+                        //    css += `stroke-linecap: ${item.lineCap};`;
+                        //}
+                        //if (!Utils.isNullOrEmpty(item.lineJoin)) {
+                        //    css += `stroke-linejoin: ${item.lineJoin};`;
+                        //}
+                        //el.style.cssText = css;
+                        //el.setAttribute('stroke-width', '' + fallback(item.lineWidth, defaults.lineWidth));
+                    }
+                    // hit test visibility
+                    if (item.inert) {
+                        el.style.pointerEvents = 'none';
+                    }
+                    else {
+                        el.style.pointerEvents = '';
+                    }
+                    if ((flow || deepRedraw) && this._hasItems(item)) {
+                        // recursion
+                        this._draw(scene, el, item.childDrawables, true, deepRedraw);
+                    }
+                    j++;
+                }
+            }
+            if (flow) {
+                // remove exceeding children (except defs)
+                for (let k = parent.children.length - 1; k >= j; k--) {
+                    const el = parent.children.item(k);
+                    this._disposeSvg(el);
+                    el.remove();
+                }
+            }
+        }
+        _buildSVGElement(item) {
+            if (isShape(item) || item instanceof ShapeElement) {
+                return document.createElementNS(SVG_NS, 'path');
+            }
+            if (isText(item) || item instanceof PacemTextElement) {
+                return document.createElementNS(SVG_NS, 'text');
+            }
+            if (isImage(item) || item instanceof PacemImageElement) {
+                return document.createElementNS(SVG_NS, 'image');
+            }
+            return document.createElementNS(SVG_NS, 'g');
+        }
+        _ensureGradient(parent, gradient) {
+            const store = this._gradients;
+            if (!store.has(parent)) {
+                store.set(parent, new WeakMap());
+            }
+            const map = store.get(parent);
+            // linear or radial?
+            const isLinear = isLinearGradient(gradient), isRadial = isRadialGradient(gradient);
+            if (map.has(gradient)) {
+                const current = map.get(gradient);
+                if ((isLinear && current instanceof SVGLinearGradientElement)
+                    || (isRadial && current instanceof SVGRadialGradientElement)) {
+                    // remove from DOM
+                    current.remove();
+                    // remove from memoizer
+                    map.delete(gradient);
+                }
+            }
+            if (!map.has(gradient)) {
+                // <defs>
+                let defsContainer = parent;
+                let defs;
+                while (pacemCore.Utils.isNull(defs = defsContainer.querySelector(':scope > defs'))) {
+                    const parent1 = defsContainer.parentElement;
+                    if (parent1 instanceof SVGElement) {
+                        defsContainer = parent1;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (pacemCore.Utils.isNull(defs)) {
+                    throw new Error('Must provide a <defs> element.');
+                }
+                var gradientSvg = null;
+                if (isLinear) {
+                    // create linear gradient node
+                    gradientSvg = document.createElementNS(SVG_NS, 'linearGradient');
+                }
+                else if (isRadialGradient(gradient)) {
+                    // create radial gradient node
+                    gradientSvg = document.createElementNS(SVG_NS, 'radialGradient');
+                }
+                else {
+                    throw new Error('Unmanaged gradient type.');
+                }
+                gradientSvg.setAttribute('gradientUnits', 'userSpaceOnUse');
+                gradientSvg.setAttribute('id', `grad-${pacemCore.Utils.uniqueCode()}`);
+                defs.appendChild(gradientSvg);
+                map.set(gradient, gradientSvg);
+            }
+            const retval = map.get(gradient);
+            if (isLinear) {
+                // linear
+                retval.setAttribute('x1', gradient.start.x.toString());
+                retval.setAttribute('y1', gradient.start.y.toString());
+                retval.setAttribute('x2', gradient.end.x.toString());
+                retval.setAttribute('y2', gradient.end.y.toString());
+            }
+            else if (isRadial) {
+                retval.setAttribute('cx', gradient.center.x.toString());
+                retval.setAttribute('cy', gradient.center.y.toString());
+                retval.setAttribute('r', gradient.radius.toString());
+            }
+            // stops
+            let j = 0;
+            for (let stop of gradient.stops) {
+                while (retval.children.length <= j) {
+                    const stopSvgAdd = document.createElementNS(SVG_NS, 'stop');
+                    retval.appendChild(stopSvgAdd);
+                }
+                const stopSvg = retval.children.item(j);
+                stopSvg.setAttribute('offset', (stop.offset * 100) + '%');
+                stopSvg.setAttribute('stop-color', stop.color);
+                if (!pacemCore.Utils.isNull(stop.opacity)) {
+                    stopSvg.setAttribute('stop-opacity', stop.opacity.toString());
+                }
+                j++;
+            }
+            while (retval.children.length > gradient.stops.length) {
+                const lastChild = retval.children.item(retval.children.length - 1);
+                retval.removeChild(lastChild);
+            }
+            return retval;
+        }
+        _ensureMarker(parent, marker) {
+            const store = this._markers;
+            if (!store.has(parent)) {
+                store.set(parent, new WeakMap());
+            }
+            const map = store.get(parent);
+            if (!map.has(marker)) {
+                const markerSvg = document.createElementNS(SVG_NS, 'marker');
+                map.set(marker, markerSvg);
+                const markerPath = document.createElementNS(SVG_NS, 'path');
+                markerSvg.appendChild(markerPath);
+                markerSvg.setAttribute('id', 'mark' + pacemCore.Utils.uniqueCode());
+                let defsContainer = parent;
+                let defs;
+                while (pacemCore.Utils.isNull(defs = defsContainer.querySelector(':scope > defs'))) {
+                    const parent1 = defsContainer.parentElement;
+                    if (parent1 instanceof SVGElement) {
+                        defsContainer = parent1;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                if (pacemCore.Utils.isNull(defs)) {
+                    throw new Error('Must provide a <defs> element.');
+                }
+                defs.appendChild(markerSvg);
+            }
+            const markerSvg = map.get(marker), markerPath = markerSvg.firstElementChild;
+            // marker attributes
+            markerSvg.setAttribute('orient', 'auto-start-reverse');
+            if (!pacemCore.Utils.isNullOrEmpty(marker.viewbox)) {
+                markerSvg.setAttribute('viewBox', `${marker.viewbox.x} ${marker.viewbox.y} ${marker.viewbox.width} ${marker.viewbox.height}`);
+            }
+            else {
+                markerSvg.removeAttribute('viewBox');
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(marker.ref)) {
+                markerSvg.setAttribute('refX', marker.ref.x.toString());
+                markerSvg.setAttribute('refY', marker.ref.y.toString());
+            }
+            else {
+                markerSvg.removeAttribute('refX');
+                markerSvg.removeAttribute('refY');
+            }
+            if (marker.height > 0) {
+                markerSvg.setAttribute('markerHeight', marker.height.toString());
+            }
+            else {
+                markerSvg.removeAttribute('markerHeight');
+            }
+            if (marker.width > 0) {
+                markerSvg.setAttribute('markerWidth', marker.width.toString());
+            }
+            else {
+                markerSvg.removeAttribute('markerWidth');
+            }
+            // path attributes
+            markerPath.setAttribute('d', marker.pathData);
+            if (!pacemCore.Utils.isNullOrEmpty(marker.fill)) {
+                markerPath.setAttribute('fill', marker.fill);
+            }
+            else {
+                markerPath.removeAttribute('fill');
+            }
+            if (!pacemCore.Utils.isNullOrEmpty(marker.stroke)) {
+                markerPath.setAttribute('stroke', marker.stroke);
+            }
+            else {
+                markerPath.removeAttribute('stroke');
+            }
+            return markerSvg;
+        }
+    };
+    PacemSvgAdapterElement = __decorate([
+        pacemCore.CustomElement({ tagName: pacemCore.P + '-' + TAG_MIDDLE_NAME + '-svg-adapter' })
+    ], PacemSvgAdapterElement);
+
+    var indexComponentsDrawing = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        AdapterUtils: AdapterUtils,
+        get CornerType () { return CornerType; },
+        DrawableElement: DrawableElement,
+        get Pacem2DElement () { return Pacem2DElement; },
+        get PacemCanvasAdapterElement () { return PacemCanvasAdapterElement; },
+        get PacemCircleElement () { return PacemCircleElement; },
+        get PacemEllipseElement () { return PacemEllipseElement; },
+        get PacemGroupElement () { return PacemGroupElement; },
+        get PacemImageElement () { return PacemImageElement; },
+        get PacemLineElement () { return PacemLineElement; },
+        get PacemPathElement () { return PacemPathElement; },
+        get PacemPolygonElement () { return PacemPolygonElement; },
+        get PacemPolylineElement () { return PacemPolylineElement; },
+        get PacemRectElement () { return PacemRectElement; },
+        get PacemSvgAdapterElement () { return PacemSvgAdapterElement; },
+        get PacemTextElement () { return PacemTextElement; },
+        PresentationElement: PresentationElement,
+        ShapeElement: ShapeElement,
+        UiElement: UiElement,
+        getStageOptions: getStageOptions
+    });
+
+    var indexComponents = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Drawing: indexComponentsDrawing
+    });
+
+    var Output = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Components: indexComponents,
+        Drawing: drawing
+    });
+
+    pacemFoundation.DeepMerger.merge(Output);
+
+})(Pacem, Pacem);
+//# sourceMappingURL=pacem-2d.js.map