@pacem/pacem-2d 1.0.0-abel

package/dist/esm/drawing.js

@@ -0,0 +1,87 @@
+import { Utils, CustomUIEvent } from '@pacem/pacem-core';
+import { Point, Matrix2D } from '@pacem/pacem-foundation';
+export function isDrawable(object) {
+    return !Utils.isNull(object) && 'stage' in object;
+}
+export function isUiObject(object) {
+    return /*'transformMatrix' in object &&*/ isDrawable(object);
+}
+function isGradient(object) {
+    return 'stops' in object && Utils.isArray(object.stops);
+}
+export function isLinearGradient(object) {
+    return isGradient(object) && 'start' in object && Point.isPoint(object.start)
+        && 'end' in object && Point.isPoint(object.end);
+}
+export function isRadialGradient(object) {
+    return isGradient(object) && 'center' in object && Point.isPoint(object.center)
+        && 'radius' in object && typeof object.radius === 'number';
+}
+export class PresentationState {
+    static combine(lhs, rhs, precomputedMatrix = null) {
+        return {
+            opacity: (lhs.opacity ?? 1) * (rhs.opacity ?? 1),
+            transformMatrix: precomputedMatrix ?? 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
+        };
+    }
+}
+export 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);
+}
+export function isShape(object) {
+    return isUiObject(object) && 'pathData' in object;
+}
+export function isGroup(object) {
+    return isUiObject(object) && 'childDrawables' in object && !Utils.isNullOrEmpty(object['childDrawables']);
+}
+export function isText(object) {
+    return isUiObject(object) && 'text' in object && typeof object['text'] === 'string';
+}
+export function isImage(object) {
+    return isUiObject(object) && 'src' in object && typeof object['src'] === 'string';
+}
+export class UI2DEvent extends 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 Matrix2D.multiply(pt, this.#transformMatrix);
+    }
+}
+export class Shape {
+    static empty() {
+        return { pathData: '', vertices: [], boundingRect: { x: 0, y: 0, width: 0, height: 0 } };
+    }
+}
+export class DragEvent extends UI2DEvent {
+}
+export class DrawableEvent extends UI2DEvent {
+    constructor(type, args, originalEvent, m) {
+        super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+    }
+}
+export class StageEvent extends UI2DEvent {
+    constructor(type, args, originalEvent, m = args.transformMatrix) {
+        super(type, { detail: args, bubbles: true, cancelable: true }, originalEvent, m);
+    }
+}

package/dist/esm/ellipse.js

@@ -0,0 +1,159 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemEllipseElement_1, PacemCircleElement_1;
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { Rect } from '@pacem/pacem-foundation';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//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 = Rect.expand(c, p0, p1);
+    if (end < start)
+        end += 360;
+    if (start <= 0 && end > 0 || end >= 360) {
+        boundingRect = Rect.expand(boundingRect, { x: c.x + rx, y: c.y });
+    }
+    if (start <= 90 && end > 90 || end >= 450) {
+        boundingRect = Rect.expand(boundingRect, { x: c.x, y: c.y + ry });
+    }
+    if (start <= 180 && end > 180 || end >= 540) {
+        boundingRect = Rect.expand(boundingRect, { x: c.x - rx, y: c.y });
+    }
+    if (start <= 270 && end > 270 || end >= 630) {
+        boundingRect = 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 (!Utils.isNull(c) && !Utils.isNull(a) && !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([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemEllipseElement.prototype, "center", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemEllipseElement.prototype, "rx", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemEllipseElement.prototype, "ry", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemEllipseElement.prototype, "start", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemEllipseElement.prototype, "end", void 0);
+PacemEllipseElement = PacemEllipseElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-ellipse' })
+], PacemEllipseElement);
+export { 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 (!Utils.isNull(c) && !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([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemCircleElement.prototype, "center", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemCircleElement.prototype, "radius", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemCircleElement.prototype, "start", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemCircleElement.prototype, "end", void 0);
+PacemCircleElement = PacemCircleElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-circle' })
+], PacemCircleElement);
+export { PacemCircleElement };

package/dist/esm/group.js

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CustomElement, Watch, P, Utils } from '@pacem/pacem-core';
+import { PresentationElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+import { DrawableElement } from './drawable-element';
+//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 (!Utils.isNull(scene)) {
+                    scene.draw(this, true);
+                }
+                break;
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false })
+], PacemGroupElement.prototype, "datasource", void 0);
+PacemGroupElement = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-group' })
+], PacemGroupElement);
+export { PacemGroupElement };

package/dist/esm/image.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CustomElement, Watch, PropertyConverters, P } from '@pacem/pacem-core';
+import { UiElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//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([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemImageElement.prototype, "src", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemImageElement.prototype, "x", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemImageElement.prototype, "y", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemImageElement.prototype, "width", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemImageElement.prototype, "height", void 0);
+PacemImageElement = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-image' })
+], PacemImageElement);
+export { PacemImageElement };

package/dist/esm/index-components-drawing.js

@@ -0,0 +1,16 @@
+export * from './drawable-element';
+export * from './stage-abstractions';
+export * from './types';
+export * from './group';
+export * from './ellipse';
+export * from './rect';
+export * from './line';
+export * from './path';
+export * from './polygon';
+export * from './polyline';
+export * from './image';
+export * from './text';
+export * from './stage';
+export * from './adapters/utils';
+export * from './adapters/canvasadapter';
+export * from './adapters/svgadapter';

package/dist/esm/index-components.js

@@ -0,0 +1 @@
+export * as Drawing from './index-components-drawing';

package/dist/esm/index-iife.js

@@ -0,0 +1,3 @@
+import { DeepMerger } from '@pacem/pacem-foundation';
+import * as Output from './index';
+DeepMerger.merge(Output);

package/dist/esm/index-root.js

@@ -0,0 +1 @@
+export * as Drawing from './drawing';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * as Components from './index-components';
+export * from './index-root';

package/dist/esm/line.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemLineElement_1;
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+import { Shape } from './drawing';
+//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 (Utils.isNull(from) || 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 (!Utils.isNull(from) && !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([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemLineElement.prototype, "from", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemLineElement.prototype, "to", void 0);
+PacemLineElement = PacemLineElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-line' })
+], PacemLineElement);
+export { PacemLineElement };

package/dist/esm/path.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { CustomElement, Watch, PropertyConverters, P } from '@pacem/pacem-core';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+//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([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemPathElement.prototype, "d", void 0);
+PacemPathElement = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-path' })
+], PacemPathElement);
+export { PacemPathElement };

package/dist/esm/polygon.js

@@ -0,0 +1,90 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPolygonElement_1;
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+import { Shape } from './drawing';
+//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 (!Utils.isNull(sides) && !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([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemPolygonElement.prototype, "sides", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemPolygonElement.prototype, "radius", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Point })
+], PacemPolygonElement.prototype, "center", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemPolygonElement.prototype, "starIndent", void 0);
+PacemPolygonElement = PacemPolygonElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-polygon' })
+], PacemPolygonElement);
+export { PacemPolygonElement };

package/dist/esm/polyline.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var PacemPolylineElement_1;
+import { CustomElement, Watch, PropertyConverters, P, Utils } from '@pacem/pacem-core';
+import { parseAsNumericalArray } from '@pacem/pacem-foundation';
+import { ShapeElement } from './types';
+import { TAG_MIDDLE_NAME } from './constants';
+import { Shape } from './drawing';
+//namespace Pacem.Components.Drawing {
+const PointArrayOrJsonConverter = {
+    convert: (attr) => {
+        const arr = 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 (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([
+    Watch({ emit: false, converter: PointArrayOrJsonConverter })
+], PacemPolylineElement.prototype, "points", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemPolylineElement.prototype, "closed", void 0);
+PacemPolylineElement = PacemPolylineElement_1 = __decorate([
+    CustomElement({ tagName: P + '-' + TAG_MIDDLE_NAME + '-polyline' })
+], PacemPolylineElement);
+export { PacemPolylineElement };