@pacem/pacem-2d 1.0.0-abel

package/dist/esm/types.js

@@ -0,0 +1,140 @@
+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 { Watch, PropertyConverters, Utils } from '@pacem/pacem-core';
+import { Matrix2D } from '@pacem/pacem-foundation';
+import { DrawableElement } from './drawable-element';
+//namespace Pacem.Components.Drawing {
+const DEG2RAD = Math.PI / 180.0;
+export class UiElement extends DrawableElement {
+    #transformMatrix = 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([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "rotate", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "scaleX", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "scaleY", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "translateX", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "translateY", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], UiElement.prototype, "opacity", void 0);
+export 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 (!Utils.isNull(this.stage)) {
+                        this.stage.draw(this);
+                    }
+                    break;
+            }
+        }
+    }
+}
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PresentationElement.prototype, "stroke", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PresentationElement.prototype, "fill", void 0);
+__decorate([
+    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([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PresentationElement.prototype, "lineWidth", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PresentationElement.prototype, "lineJoin", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PresentationElement.prototype, "lineCap", void 0);
+export 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([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], ShapeElement.prototype, "data", void 0);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pacem/pacem-2d",
+  "files": [
+    "dist/browser/*.*",
+    "dist/bundle/*.*",
+    "dist/esm/*.*",
+    "typings/*.*",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-core": "*"
+  },
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./typings/index.d.ts"
+    }
+  },
+  "version": "1.0.0-abel",
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  }
+}