@stemy/ngx-utils 19.7.8 → 19.7.10

package/fesm2022/stemy-ngx-utils.mjs

@@ -1136,19 +1136,6 @@ const shg_table = [
     24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
     24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24
 ];
-function drawRect(ctx, w, h) {
-    ctx.beginPath();
-    ctx.rect(-w / 2, -h / 2, w, h);
-    ctx.closePath();
-}
-function drawOval(ctx, w, h) {
-    ctx.beginPath();
-    ctx.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2);
-    ctx.closePath();
-}
-function drawPoint(ctx) {
-    drawOval(ctx, 4, 4);
-}
 class CanvasUtils {
     static manipulatePixels(canvas, ctx, colorTransformer) {
         const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -1559,11 +1546,6 @@ class FileUtils {
         // @dynamic
         reader => reader.readAsText(file));
     }
-    static readFileAsBinaryString(file) {
-        return FileUtils.readFile(
-        // @dynamic
-        reader => reader.readAsBinaryString(file));
-    }
     static readFileAsDataURL(file) {
         return FileUtils.readFile(
         // @dynamic
@@ -2123,6 +2105,11 @@ class Point extends Shape {
         const x = Number(xOrP);
         this.pt = isPoint(xOrP) ? xOrP : { x: isNaN(x) ? 0 : xOrP, y };
     }
+    draw(ctx) {
+        ctx.beginPath();
+        ctx.ellipse(0, 0, 1.5, 1.5, 0, 0, Math.PI * 2);
+        ctx.closePath();
+    }
     support() {
         return this.center;
     }
@@ -2195,6 +2182,17 @@ class Rect extends Shape {
         this.height = height;
         this.rotation = rotation;
     }
+    draw(ctx, ratio) {
+        ratio = ratio ?? 1;
+        const w = this.width * ratio;
+        const h = this.height * ratio;
+        const angle = toRadians(this.rotation);
+        ctx.rotate(angle);
+        ctx.beginPath();
+        ctx.rect(-w / 2, -h / 2, w, h);
+        ctx.closePath();
+        ctx.rotate(-angle);
+    }
     support(dir) {
         const ang = this.rotation ?? 0;
         const dLocal = rotateDeg(ensurePoint(dir, { x: 1, y: 0 }), -ang);
@@ -2216,6 +2214,17 @@ class Oval extends Shape {
         this.height = height;
         this.rotation = rotation;
     }
+    draw(ctx, ratio) {
+        ratio = ratio ?? 1;
+        const w = this.width * ratio;
+        const h = this.height * ratio;
+        const angle = toRadians(this.rotation);
+        ctx.rotate(angle);
+        ctx.beginPath();
+        ctx.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2);
+        ctx.closePath();
+        ctx.rotate(-angle);
+    }
     support(dir) {
         const ang = this.rotation ?? 0;
         const d = rotateDeg(ensurePoint(dir, { x: 1, y: 0 }), -ang);
@@ -2667,6 +2676,16 @@ function impatientPromise(factory) {
     };
 }
 
+function svgToDataUri(svgString) {
+    // Encode as UTF-8, then to Base64
+    const utf8Bytes = new TextEncoder().encode(svgString);
+    let binary = "";
+    for (let i = 0; i < utf8Bytes.length; i++) {
+        binary += String.fromCharCode(utf8Bytes[i]);
+    }
+    const base64 = btoa(binary);
+    return `data:image/svg+xml;base64,${base64}`;
+}
 class StringUtils {
     static concat(separator, ...strings) {
         return strings.filter(
@@ -3862,6 +3881,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class LocalHttpService extends BaseHttpService {
+    get name() {
+        return "local-http";
+    }
+    get config() {
+        return this.configs.config;
+    }
+    get withCredentials() {
+        return false;
+    }
+    initService() {
+        super.initService();
+        this.svgs = {};
+        this.images = {};
+    }
+    url(url) {
+        if (!url)
+            return url;
+        const config = this.config;
+        const baseUrl = config.cdnUrl || config.baseUrl || "";
+        return url.startsWith("data:") || url.startsWith("http") || url.startsWith("//")
+            ? url
+            : `${baseUrl}${url}`;
+    }
+    get(url, options, body) {
+        options = this.makeOptions(options, "GET", body, this.caches.permanent);
+        return this.toPromise(url, options);
+    }
+    getImage(url) {
+        if (this.universal.isServer)
+            return Promise.resolve(null);
+        if (!url)
+            return Promise.resolve(new Image());
+        this.images[url] = this.images[url] || new Promise((resolve, reject) => {
+            const image = new Image();
+            image.crossOrigin = "Anonymous";
+            image.src = this.url(url);
+            image.onload = () => resolve(image);
+            image.onerror = error => {
+                console.warn(error);
+                reject(`Can't load image from url: ${url}`);
+            };
+        });
+        return this.images[url];
+    }
+    svgUrlFromSource(sourceStr, modifier) {
+        if (!sourceStr.startsWith("<svg")) {
+            throw new Error(`Src is possibly not an svg.. '${sourceStr.substring(0, 10)}'`);
+        }
+        if (!this.svgs[sourceStr]) {
+            const parser = document.createElement("div");
+            parser.innerHTML = sourceStr;
+            const source = parser.querySelector("svg");
+            const width = parseFloat(source.getAttribute("width"));
+            const height = parseFloat(source.getAttribute("height"));
+            const vb = source.getAttribute("viewBox").split(" ").map(parseFloat);
+            this.svgs[sourceStr] = {
+                source,
+                width: width || vb[2],
+                height: height || vb[3],
+            };
+        }
+        const def = this.svgs[sourceStr];
+        const sourceClone = def.source.cloneNode(true);
+        const svgModified = ObjectUtils.isFunction(modifier) ? modifier(sourceClone, def.width, def.height) : def.source.outerHTML;
+        return svgToDataUri(svgModified);
+    }
+    svgFromSource(sourceStr, modifier) {
+        return this.getImage(this.svgUrlFromSource(sourceStr, modifier));
+    }
+    async getSvgUrl(url, modifier) {
+        try {
+            const svgSrc = await this.get(url, { responseType: "text" });
+            return this.svgUrlFromSource(svgSrc, modifier);
+        }
+        catch (e) {
+            throw new Error(`Can't get svg from url: ${url}, Error: ${e?.message}`);
+        }
+    }
+    async getSvgImage(url, modifier) {
+        try {
+            const svgSrc = await this.get(url, { responseType: "text" });
+            return await this.svgFromSource(svgSrc, modifier);
+        }
+        catch (e) {
+            throw new Error(`Can't get svg from url: ${url}, Error: ${e?.message}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, decorators: [{
+            type: Injectable
+        }] });
+
 class IconService {
     get isDisabled() {
         return this.disabled;
@@ -3870,7 +3984,8 @@ class IconService {
         this.disabled = value;
         this.iconsLoaded.emit();
     }
-    constructor() {
+    constructor(http) {
+        this.http = http;
         this.iconsLoaded = new EventEmitter();
         this.disabled = false;
     }
@@ -3879,12 +3994,20 @@ class IconService {
         activeIcon = typeof icons == "undefined" ? activeIcon : (icons[activeIcon] || icon);
         return Promise.resolve(active ? activeIcon : icon);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    async getIconUrl(icon, modifier) {
+        const src = await this.getIcon(icon, icon, false);
+        return this.http.svgUrlFromSource(src, modifier);
+    }
+    async getIconImage(icon, modifier) {
+        const src = await this.getIcon(icon, icon, false);
+        return this.http.svgFromSource(src, modifier);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconService, deps: [{ token: LocalHttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: LocalHttpService }] });
 
 class StaticLanguageService {
     get defaultLanguage() {
@@ -4169,54 +4292,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }] });
 
-class LocalHttpService extends BaseHttpService {
-    get name() {
-        return "local-http";
-    }
-    get config() {
-        return this.configs.config;
-    }
-    get withCredentials() {
-        return false;
-    }
-    initService() {
-        super.initService();
-        this.images = {};
-    }
-    url(url) {
-        if (!url)
-            return url;
-        const config = this.config;
-        const baseUrl = config.cdnUrl || config.baseUrl || "";
-        return url.startsWith("data:") || url.startsWith("http") || url.startsWith("//")
-            ? url
-            : `${baseUrl}${url}`;
-    }
-    get(url, options, body) {
-        options = this.makeOptions(options, "GET", body, this.caches.permanent);
-        return this.toPromise(url, options);
-    }
-    getImage(url) {
-        if (this.universal.isServer)
-            return Promise.resolve(null);
-        if (!url)
-            return Promise.resolve(new Image());
-        this.images[url] = this.images[url] || new Promise((resolve, reject) => {
-            const image = new Image();
-            image.crossOrigin = "Anonymous";
-            image.src = this.url(url);
-            image.onload = () => resolve(image);
-            image.onerror = reject;
-        });
-        return this.images[url];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LocalHttpService, decorators: [{
-            type: Injectable
-        }] });
-
 class OpenApiService {
     constructor(api, staticSchemas) {
         this.api = api;
@@ -7769,6 +7844,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class InteractiveItemComponent {
+    get frame() {
+        return this.mFrame;
+    }
     get shapes() {
         return this.mShapes;
     }
@@ -7833,10 +7911,11 @@ class InteractiveItemComponent {
         this.valid = true;
         this.pos = Point.Zero;
         this.direction = "none";
+        this.mFrame = new Rect(0, 0, 3, 3);
         this.mShapes = [];
     }
-    draw(ctx) {
-        drawOval(ctx, 4, 4);
+    draw(ctx, shape) {
+        shape.draw(ctx, 1);
         ctx.fill();
         ctx.stroke();
     }
@@ -7864,8 +7943,7 @@ class InteractiveItemComponent {
         const target = this.restrictPosition(this.direction === "vertical" ? this.pos.x : x, this.direction === "horizontal" ? this.pos.y : y);
         this.pos = new Point(target);
         this.calcShapes();
-        this.valid = this.isValidByParams() &&
-            this.canvas.items.every(other => this === other || this.isValidByDistance(other));
+        this.valid = this.checkIsValid();
         this.validPos = this.valid ? this.pos : this.validPos;
     }
     moveBy(dx, dy) {
@@ -7893,6 +7971,10 @@ class InteractiveItemComponent {
                 : clamp(y, this.canvas.yRange)
         };
     }
+    checkIsValid() {
+        return this.isValidByParams() &&
+            this.canvas.items.every(other => this === other || this.isValidByDistance(other));
+    }
     isValidByParams() {
         return !this.shapes.some(shape => {
             return this.canvas.excludedAreas.some(ex => {
@@ -8072,17 +8154,22 @@ class InteractiveCanvasComponent {
         this.shouldDraw = false;
     }
     async tempPaint(cb) {
-        const renderCanvas = this.canvas;
+        const mainCanvas = this.canvas;
+        const mainCtx = mainCanvas.getContext("2d");
         const canvas = this.tempCanvas;
-        canvas.width = renderCanvas.width;
-        canvas.height = renderCanvas.height;
         const ctx = canvas.getContext("2d");
+        const transform = mainCtx.getTransform();
+        canvas.width = mainCanvas.width;
+        canvas.height = mainCanvas.height;
         ctx.globalCompositeOperation = "source-over";
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        const bgCtx = renderCanvas.getContext("2d");
-        bgCtx.globalCompositeOperation = await cb(ctx) || "source-over";
-        bgCtx.drawImage(canvas, 0, 0);
-        bgCtx.globalCompositeOperation = "source-over";
+        ctx.setTransform(transform);
+        mainCtx.resetTransform();
+        mainCtx.globalCompositeOperation = await cb(ctx) || "source-over";
+        mainCtx.drawImage(canvas, 0, 0);
+        mainCtx.globalCompositeOperation = "source-over";
+        mainCtx.setTransform(transform);
+        ctx.resetTransform();
     }
     resize() {
         const realWidth = this.width();
@@ -8115,17 +8202,17 @@ class InteractiveCanvasComponent {
     onTouchStart($event) {
         this.hoveredIndex = this.getIndexUnderPointer($event.touches.item(0));
         this.lockedIndex = this.hoveredIndex;
-        this.touched = true;
+        this.selectItem();
     }
-    onTouchEnd($event) {
-        this.selectItem($event.touches.item(0));
+    onTouchEnd() {
+        this.touched = false;
     }
     onMouseDown($event) {
         this.lockedIndex = this.getIndexUnderPointer($event);
-        this.touched = true;
+        this.selectItem();
     }
-    onMouseUp($event) {
-        this.selectItem($event);
+    onMouseUp() {
+        this.touched = false;
     }
     onMouseMove($event) {
         if (this.touched)
@@ -8212,14 +8299,12 @@ class InteractiveCanvasComponent {
         });
         this.onRotate.emit(this.rotation);
     }
-    selectItem(pointer) {
-        const selected = this.getIndexUnderPointer(pointer);
-        const item = this.items[selected];
-        this.touched = false;
-        if (item) {
-            this.selectedItem = item;
-        }
-        this.hoveredIndex = selected;
+    selectItem() {
+        this.touched = true;
+        const item = this.items[this.lockedIndex];
+        if (!item)
+            return;
+        this.selectedItem = item;
     }
     toCanvasPoint(pointer) {
         if (!pointer || !this.canvas)
@@ -8291,7 +8376,7 @@ class InteractiveCanvasComponent {
             ctx.lineWidth = 1;
             ctx.strokeStyle = "black";
             ctx.fillStyle = "white";
-            await item.draw(ctx);
+            await item.draw(ctx, shape);
             ctx.restore();
         }
     }
@@ -8328,7 +8413,7 @@ class InteractiveCanvasComponent {
         ctx.restore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd($event)", "window:mouseup": "onMouseUp($event)" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: { classPropertyName: "infinite", publicName: "infinite", isSignal: true, isRequired: false, transformFunction: null }, resizeMode: { classPropertyName: "resizeMode", publicName: "resizeMode", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, panOffset: { classPropertyName: "panOffset", publicName: "panOffset", isSignal: true, isRequired: false, transformFunction: null }, renderCtx: { classPropertyName: "renderCtx", publicName: "renderCtx", isSignal: true, isRequired: false, transformFunction: null }, beforeItems: { classPropertyName: "beforeItems", publicName: "beforeItems", isSignal: true, isRequired: false, transformFunction: null }, afterItems: { classPropertyName: "afterItems", publicName: "afterItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", onRotate: "onRotate", onItemPan: "onItemPan", onItemPanned: "onItemPanned", onPan: "onPan", onPanned: "onPanned" }, host: { listeners: { "window:touchend": "onTouchEnd()", "window:mouseup": "onMouseUp()" } }, queries: [{ propertyName: "itemList", predicate: InteractiveItemComponent, isSignal: true }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], ngImport: i0, template: "<div #containerElem\n     [ngClass]=\"['interactive-canvas-container', horizontal() ? 'horizontal' : 'vertical']\"\n     (resize)=\"resize()\"\n     (touchstart)=\"onTouchStart($event)\"\n     (mousedown)=\"onMouseDown($event)\"\n     (mousemove)=\"onMouseMove($event)\"\n     (mouseleave)=\"onMouseLeave()\"\n     (panend)=\"onPanEnd()\"\n     (panmove)=\"onPanMove($event)\"\n     (panstart)=\"onPanStart()\">\n    <canvas #canvasElem class=\"interactive-canvas-element\"></canvas>\n</div>\n", styles: [".interactive-canvas-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.interactive-canvas-container .interactive-canvas-element{position:absolute;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, decorators: [{
             type: Component,
@@ -8341,29 +8426,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ["canvasElem", { static: true }]
             }], onTouchEnd: [{
                 type: HostListener,
-                args: ["window:touchend", ["$event"]]
+                args: ["window:touchend"]
             }], onMouseUp: [{
                 type: HostListener,
-                args: ["window:mouseup", ["$event"]]
+                args: ["window:mouseup"]
             }] } });
 
 class InteractiveCircleComponent extends InteractiveItemComponent {
     constructor() {
         super();
-        this.radius = 10;
-    }
-    draw(ctx) {
-        const diameter = this.radius * 2 * this.canvas.ratio;
-        drawOval(ctx, diameter, diameter);
-        ctx.fill();
-        ctx.stroke();
+        this.radius = input(10);
+        effect(() => {
+            const radius = this.radius();
+            this.mFrame = new Rect(0, 0, radius * 2, radius * 2);
+        });
     }
     calcShape(x, y) {
-        const ratio = this.canvas.ratio;
-        return new Circle(x, y, this.radius * ratio);
+        const radius = untracked(() => this.radius());
+        return new Circle(x, y, radius * this.canvas.ratio);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCircleComponent, isStandalone: false, selector: "interactive-circle", inputs: { radius: "radius" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: InteractiveCircleComponent, isStandalone: false, selector: "interactive-circle", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
         ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
 }
@@ -8377,30 +8460,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         { provide: InteractiveItemComponent, useExisting: InteractiveCircleComponent },
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { radius: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class InteractiveRectComponent extends InteractiveItemComponent {
     constructor() {
         super();
-        this.width = 10;
-        this.height = 10;
-        this.rotation = 0;
-    }
-    draw(ctx) {
-        const ratio = this.canvas.ratio;
-        ctx.rotate(toRadians(this.rotation));
-        drawRect(ctx, this.width * ratio, this.height * ratio);
-        ctx.fill();
-        ctx.stroke();
+        this.width = input(10);
+        this.height = input(10);
+        this.rotation = input(0);
+        effect(() => {
+            this.mFrame = new Rect(0, 0, this.width(), this.height(), this.rotation());
+        });
     }
     calcShape(x, y) {
         const ratio = this.canvas.ratio;
-        return new Rect(x, y, this.width * ratio, this.height * ratio, this.rotation);
+        const width = untracked(() => this.width());
+        const height = untracked(() => this.height());
+        const rotation = untracked(() => this.rotation());
+        return new Rect(x, y, width * ratio, height * ratio, rotation);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveRectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveRectComponent, isStandalone: false, selector: "interactive-rect", inputs: { width: "width", height: "height", rotation: "rotation" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: InteractiveRectComponent, isStandalone: false, selector: "interactive-rect", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
         ], usesInheritance: true, ngImport: i0, template: "", isInline: true }); }
 }
@@ -8414,13 +8494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         { provide: InteractiveItemComponent, useExisting: InteractiveRectComponent },
                     ]
                 }]
-        }], ctorParameters: () => [], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], rotation: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [] });
 
 class TabsComponent {
     constructor() {
@@ -9137,5 +9211,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, distance, distanceSq, dividePts, dotProduct, drawOval, drawRect, ensurePoint, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, hashCode, impatientPromise, injectOptions, isBrowser, isPoint, lengthOfPt, lerpPts, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, subPts, switchClass, toDegrees, toRadians, tripleProduct };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, EPSILON, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, Oval, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, STATIC_SCHEMAS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, addPts, cachedFactory, cancelablePromise, checkTransitions, clamp, computedPrevious, createTypedProvider, cssStyles, cssVariables, distance, distanceSq, dividePts, dotProduct, ensurePoint, getComponentDef, getCssVariables, getRoot, gjkDistance, gjkIntersection, hashCode, impatientPromise, injectOptions, isBrowser, isPoint, lengthOfPt, lerpPts, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, provideOptions, provideWithOptions, rotateDeg, rotateRad, selectorMatchesList, subPts, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map