@stemy/ngx-utils 19.7.7 → 19.7.9

package/fesm2022/stemy-ngx-utils.mjs

@@ -1,7 +1,7 @@
 import 'zone.js';
 import 'reflect-metadata';
 import * as i0 from '@angular/core';
-import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, untracked, computed, signal, inject, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Inject, Injectable, Optional, Injector, inject, untracked, computed, signal, DestroyRef, isDevMode, ErrorHandler, EventEmitter, createComponent, NgZone, Pipe, input, output, ChangeDetectorRef, ElementRef, effect, HostListener, Directive, Input, HostBinding, Output, TemplateRef, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, forwardRef, ContentChild, ContentChildren, Renderer2, model, contentChildren, provideAppInitializer, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@angular/router';
 import { ActivatedRouteSnapshot, Scroll, NavigationEnd, Router, DefaultUrlSerializer, UrlTree, UrlSegmentGroup, UrlSegment, UrlSerializer, ROUTES } from '@angular/router';
 import { BehaviorSubject, Observable, firstValueFrom, Subject, Subscription, from, delay, timer, TimeoutError, combineLatest, of, lastValueFrom } from 'rxjs';
@@ -1559,11 +1559,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
@@ -2503,14 +2498,17 @@ function provideEntryComponents(components, moduleId) {
         multi: true
     };
 }
+function provideOptions(options) {
+    return {
+        provide: OPTIONS_TOKEN,
+        useValue: options
+    };
+}
 function provideWithOptions(type, options) {
     return {
         useFactory: function (parent) {
             const providers = [
-                {
-                    provide: OPTIONS_TOKEN,
-                    useValue: options
-                },
+                provideOptions(options),
                 {
                     provide: type,
                     useClass: type
@@ -2524,6 +2522,10 @@ function provideWithOptions(type, options) {
         deps: [Injector]
     };
 }
+function injectOptions(defaults) {
+    const options = inject(OPTIONS_TOKEN, { optional: true });
+    return Object.assign({}, defaults, options || {});
+}
 
 class TimerUtils {
     static createTimeout(func, time) {
@@ -2660,6 +2662,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(
@@ -3855,6 +3867,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;
@@ -3863,7 +3970,8 @@ class IconService {
         this.disabled = value;
         this.iconsLoaded.emit();
     }
-    constructor() {
+    constructor(http) {
+        this.http = http;
         this.iconsLoaded = new EventEmitter();
         this.disabled = false;
     }
@@ -3872,12 +3980,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() {
@@ -4162,54 +4278,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;
@@ -7765,14 +7833,6 @@ class InteractiveItemComponent {
     get shapes() {
         return this.mShapes;
     }
-    get hovered() {
-        return this.canvas?.hoveredItem === this;
-    }
-    set hovered(value) {
-        if (!this.canvas)
-            return;
-        this.canvas.hoveredItem = value ? this : null;
-    }
     get x() {
         return this.pos.x;
     }
@@ -7812,6 +7872,22 @@ class InteractiveItemComponent {
         this.validPos = new Point(value.x, value.y);
         this.valid = true;
     }
+    get hovered() {
+        return this.canvas?.hoveredItem === this;
+    }
+    set hovered(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.hoveredItem = value ? this : null;
+    }
+    get selected() {
+        return this.canvas?.selectedItem === this;
+    }
+    set selected(value) {
+        if (!this.canvas)
+            return;
+        this.canvas.selectedItem = value ? this : null;
+    }
     constructor() {
         this.active = false;
         this.index = -1;
@@ -7849,8 +7925,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) {
@@ -7873,11 +7948,15 @@ class InteractiveItemComponent {
     restrictPosition(x, y) {
         return {
             x: clamp(x, this.canvas.xRange),
-            y: this.canvas.infinite
+            y: this.canvas.isInfinite
                 ? overflow(y, this.canvas.yRange)
                 : 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 => {
@@ -7924,9 +8003,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+const emptyDash = [];
 class InteractiveCanvasComponent {
+    get isInfinite() {
+        return this.infinite();
+    }
+    get realWidth() {
+        return this.width();
+    }
+    get realHeight() {
+        return this.height();
+    }
     get items() {
-        return this.$items.value;
+        return this.itemList();
     }
     get canvas() {
         return this.canvasElem?.nativeElement;
@@ -7935,7 +8024,14 @@ class InteractiveCanvasComponent {
         return this.items[this.lockedIndex];
     }
     get selectedItem() {
-        return this.items[this.selectedIndex];
+        return this.items[this.selectedIndex()];
+    }
+    set selectedItem(item) {
+        const ix = !item ? -1 : this.items.indexOf(item);
+        const selected = untracked(() => this.selectedIndex());
+        if (ix === selected)
+            return;
+        this.selectedIndex.set(ix);
     }
     get hoveredItem() {
         return this.items[this.hoveredIndex];
@@ -7943,31 +8039,59 @@ class InteractiveCanvasComponent {
     set hoveredItem(item) {
         this.hoveredIndex = !item ? -1 : this.items.indexOf(item);
     }
-    constructor(renderer, universal) {
-        this.renderer = renderer;
-        this.universal = universal;
-        this.infinite = false;
-        this.resizeMode = "fit";
-        this.params = {};
-        this.debug = false;
-        this.horizontal = false;
-        this.selectedIndex = 0;
-        this.realWidth = 100;
-        this.realHeight = 100;
-        this.panOffset = 0;
-        this.renderCtx = {};
-        this.beforeItems = [];
-        this.afterItems = [];
-        this.selectedIndexChange = new EventEmitter();
-        this.onRotate = new EventEmitter();
-        this.onItemPan = new EventEmitter();
-        this.onItemPanned = new EventEmitter();
-        this.onPan = new EventEmitter();
-        this.onPanned = new EventEmitter();
-        this.$items = new BehaviorSubject([]);
+    constructor() {
+        /**
+         * Injectable options
+         * @private
+         */
+        this.options = injectOptions({
+            infinite: false,
+            resizeMode: "fit",
+            panOffset: 0
+        });
+        this.renderer = inject(Renderer2);
+        this.universal = inject(UniversalService);
+        /**
+         * Is the canvas infinitely scrollable?
+         */
+        this.infinite = input(this.options.infinite);
+        this.resizeMode = input(this.options.resizeMode);
+        this.horizontal = input(false);
+        /**
+         * Real life-size width of the canvas
+         */
+        this.width = input(100);
+        /**
+         * Real life-size height of the canvas
+         */
+        this.height = input(100);
+        /**
+         * Canvas params
+         */
+        this.params = input({}, {
+            transform: (v) => v || {}
+        });
+        /**
+         * Model signal for selected index
+         */
+        this.selectedIndex = model(0);
+        /**
+         * Relative offset of the panning. It is based on the rendered canvas height
+         */
+        this.panOffset = input(this.options.panOffset);
+        this.renderCtx = input({});
+        this.beforeItems = input([]);
+        this.afterItems = input([]);
+        this.onRotate = output();
+        this.onItemPan = output();
+        this.onItemPanned = output();
+        this.onPan = output();
+        this.onPanned = output();
+        this.itemList = contentChildren(InteractiveItemComponent);
         this.tempCanvas = this.universal.isServer ? null : document.createElement("canvas");
         this.shouldDraw = !this.universal.isServer;
         this.hoveredIndex = null;
+        this.oldLength = 0;
         this.xRange = [0, 1];
         this.yRange = [0, 1];
         this.ratio = 1;
@@ -7982,55 +8106,72 @@ class InteractiveCanvasComponent {
         this.touched = false;
         this.panStartRotation = 0;
         this.panStartPos = Point.Zero;
+        effect(() => {
+            const items = this.itemList();
+            const index = untracked(() => this.selectedIndex());
+            const grow = items.length > this.oldLength;
+            items.forEach((item, ix) => {
+                item.canvas = this;
+                item.index = ix;
+            });
+            this.fixRotation();
+            const last = Math.max(0, items.length - 1);
+            const selected = Math.min(grow ? last : index, last);
+            this.selectedItem = items[selected];
+            this.oldLength = items.length;
+        });
+        effect(() => {
+            const realWidth = this.width();
+            const realHeight = this.height();
+            const params = this.params();
+            this.xRange = normalizeRange(params.xRange || [0, realWidth]);
+            this.yRange = normalizeRange(params.yRange || [0, realHeight]);
+            this.resize();
+        });
     }
     ngOnInit() {
         this.redraw();
     }
     ngOnDestroy() {
         this.shouldDraw = false;
-        this.subscription?.unsubscribe();
-    }
-    ngOnChanges() {
-        this.params = this.params || {};
-        this.renderCtx = this.renderCtx || {};
-        this.beforeItems = this.beforeItems || [];
-        this.afterItems = this.afterItems || [];
-        this.xRange = normalizeRange(this.params.xRange || [0, this.realWidth]);
-        this.yRange = normalizeRange(this.params.yRange || [0, this.realHeight]);
-        this.resize();
-    }
-    ngAfterViewInit() {
-        this.subscription = this.itemList.changes.subscribe(() => this.fixItems());
-        this.fixItems();
     }
     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() {
-        if (!this.canvasElem || !this.containerElem || !this.realWidth || !this.realWidth)
+        const realWidth = this.width();
+        const realHeight = this.height();
+        const horizontal = this.horizontal();
+        const resizeMode = this.resizeMode();
+        if (!this.canvasElem || !this.containerElem)
             return;
         const canvas = this.canvasElem.nativeElement;
         const container = this.containerElem.nativeElement;
         // Calculate canvas size
-        const axisX = this.horizontal ? "height" : "width";
-        const axisY = this.horizontal ? "width" : "height";
-        const resize = this.resizeMode == "fit" ? Math.min : Math.max;
+        const axisX = horizontal ? "height" : "width";
+        const axisY = horizontal ? "width" : "height";
+        const resize = resizeMode == "fit" ? Math.min : Math.max;
         canvas.width = container.clientWidth;
         canvas.height = container.clientHeight;
-        this.ratio = resize(canvas[axisX] / this.realWidth, canvas[axisY] / this.realHeight);
-        if (this.resizeMode == "fit") {
-            canvas[axisX] = this.realWidth * this.ratio;
-            canvas[axisY] = this.realHeight * this.ratio;
+        this.ratio = resize(canvas[axisX] / realWidth, canvas[axisY] / realHeight);
+        if (resizeMode == "fit") {
+            canvas[axisX] = realWidth * this.ratio;
+            canvas[axisY] = realHeight * this.ratio;
         }
         this.styles = getComputedStyle(canvas);
         this.ctx = canvas.getContext("2d");
@@ -8043,17 +8184,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)
@@ -8073,6 +8214,7 @@ class InteractiveCanvasComponent {
     }
     onPanMove($event) {
         const item = this.lockedItem;
+        const horizontal = this.horizontal();
         const deltaX = $event.deltaX / this.ratio;
         const deltaY = $event.deltaY / this.ratio;
         const data = {
@@ -8081,19 +8223,21 @@ class InteractiveCanvasComponent {
             deltaX,
             deltaY
         };
-        if (this.horizontal) {
+        if (horizontal) {
             data.deltaX = -deltaY;
             data.deltaY = +deltaX;
         }
         if (item) {
             item.moveTo(this.panStartPos.x + data.deltaX, this.panStartPos.y + data.deltaY);
             this.onItemPan.emit(data);
+            return;
         }
-        else if (this.infinite) {
-            this.rotation = this.panStartRotation + (this.horizontal ? deltaX : deltaY) / this.realHeight * 360;
-            this.fixRotation();
-            this.onPan.emit(data);
-        }
+        const infinite = untracked(() => this.infinite());
+        if (!infinite)
+            return;
+        this.rotation = this.panStartRotation + (horizontal ? deltaX : deltaY) / this.realHeight * 360;
+        this.fixRotation();
+        this.onPan.emit(data);
     }
     onPanEnd() {
         const item = this.lockedItem;
@@ -8113,14 +8257,17 @@ class InteractiveCanvasComponent {
         this.lockedIndex = -1;
     }
     fixRotation() {
+        // No need to track params changes because this function will be called from an effect
+        // already depending on params anyway
+        const params = untracked(() => this.params());
         if (this.fullHeight <= 0)
             return;
         this.rotation = overflow(Math.round(this.rotation * 100) / 100, -180, 180);
         this.basePan = this.rotation / 360 * this.fullHeight
-            + this.canvasHeight * this.panOffset;
+            + this.canvasHeight * untracked(() => this.panOffset());
         this.cycles = this.infinite
             ? [this.basePan - this.fullHeight, this.basePan, this.basePan + this.fullHeight] : [0];
-        this.excludedAreas = (this.params.excludedAreas || []).flatMap(coords => {
+        this.excludedAreas = (params.excludedAreas || []).flatMap(coords => {
             const x = coords.x * this.ratio;
             const y = coords.y * this.ratio;
             const width = coords.width * this.ratio;
@@ -8134,33 +8281,18 @@ class InteractiveCanvasComponent {
         });
         this.onRotate.emit(this.rotation);
     }
-    fixItems() {
-        const items = this.itemList.toArray();
-        this.$items.next(items);
-        items.forEach((item, ix) => {
-            item.canvas = this;
-            item.index = ix;
-        });
-        this.fixRotation();
-    }
-    selectItem(pointer) {
-        const selected = this.getIndexUnderPointer(pointer);
-        this.touched = false;
-        if (selected !== this.selectedIndex) {
-            this.selectedIndex = selected;
-            this.selectedIndexChange.emit(this.selectedIndex);
-            const item = this.selectedItem;
-            if (!item)
-                return;
-            item.active = !item.active;
-        }
-        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)
             return null;
         const canvasRect = this.canvas?.getBoundingClientRect();
-        return this.horizontal
+        return this.horizontal()
             ? new Point(canvasRect.bottom - pointer.clientY, pointer.clientX - canvasRect.left)
             : new Point(pointer.clientX - canvasRect.left, pointer.clientY - canvasRect.top);
     }
@@ -8214,35 +8346,15 @@ class InteractiveCanvasComponent {
                 await this.drawItem(ctx, item);
             }
         }
-        if (lockedItem) {
-            await this.drawItem(ctx, lockedItem);
-        }
-        if (!this.debug)
+        if (!lockedItem)
             return;
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = "rgba(114,232,45,0.55)";
-        for (const item of this.items) {
-            for (const shape of item.shapes) {
-                ctx.save();
-                ctx.translate(shape.x, shape.y);
-                if (shape instanceof Rect || shape instanceof Oval) {
-                    ctx.rotate(toRadians(shape.rotation));
-                    if (shape instanceof Oval) {
-                        drawOval(ctx, shape.width, shape.height);
-                    }
-                    else {
-                        drawRect(ctx, shape.width, shape.height);
-                    }
-                    ctx.stroke();
-                }
-                ctx.restore();
-            }
-        }
+        await this.drawItem(ctx, lockedItem);
     }
     async drawItem(ctx, item) {
         for (const shape of item.shapes) {
             ctx.save();
             ctx.translate(shape.x, shape.y);
+            ctx.setLineDash(emptyDash);
             ctx.lineWidth = 1;
             ctx.strokeStyle = "black";
             ctx.fillStyle = "white";
@@ -8255,19 +8367,26 @@ class InteractiveCanvasComponent {
         const canvas = ctx.canvas;
         if (canvas.width < 1 || canvas.height < 1)
             return;
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "white";
+        ctx.setLineDash(emptyDash);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.save();
-        if (this.horizontal) {
+        if (this.horizontal()) {
             ctx.rotate(-Math.PI / 2);
             ctx.translate(-this.canvasWidth, 0);
         }
+        const renderCtx = untracked(() => this.renderCtx());
+        const beforeItems = untracked(() => this.beforeItems());
+        const afterItems = untracked(() => this.afterItems());
         try {
-            for (const renderer of this.beforeItems) {
-                await renderer(this, this.renderCtx);
+            for (const renderer of beforeItems) {
+                await renderer(this, renderCtx);
             }
             await this.drawItems();
-            for (const renderer of this.afterItems) {
-                await renderer(this, this.renderCtx);
+            for (const renderer of afterItems) {
+                await renderer(this, renderCtx);
             }
         }
         catch (e) {
@@ -8275,63 +8394,24 @@ class InteractiveCanvasComponent {
         }
         ctx.restore();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InteractiveCanvasComponent, deps: [{ token: i0.Renderer2 }, { token: UniversalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InteractiveCanvasComponent, isStandalone: false, selector: "interactive-canvas", inputs: { infinite: "infinite", resizeMode: "resizeMode", params: "params", realWidth: "realWidth", realHeight: "realHeight", debug: "debug", horizontal: "horizontal", selectedIndex: "selectedIndex", panOffset: "panOffset", renderCtx: "renderCtx", beforeItems: "beforeItems", afterItems: "afterItems" }, outputs: { selectedIndexChange: "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 }], viewQueries: [{ propertyName: "containerElem", first: true, predicate: ["containerElem"], descendants: true, static: true }, { propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, static: true }], usesOnChanges: 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.ɵ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()", "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,
-            args: [{ standalone: false, selector: "interactive-canvas", 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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: UniversalService }], propDecorators: { infinite: [{
-                type: Input
-            }], resizeMode: [{
-                type: Input
-            }], params: [{
-                type: Input
-            }], realWidth: [{
-                type: Input
-            }], realHeight: [{
-                type: Input
-            }], debug: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }], selectedIndex: [{
-                type: Input
-            }], panOffset: [{
-                type: Input
-            }], renderCtx: [{
-                type: Input
-            }], beforeItems: [{
-                type: Input
-            }], afterItems: [{
-                type: Input
-            }], selectedIndexChange: [{
-                type: Output
-            }], onRotate: [{
-                type: Output
-            }], onItemPan: [{
-                type: Output
-            }], onItemPanned: [{
-                type: Output
-            }], onPan: [{
-                type: Output
-            }], onPanned: [{
-                type: Output
-            }], containerElem: [{
+            args: [{ standalone: false, selector: "interactive-canvas", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { containerElem: [{
                 type: ViewChild,
                 args: ["containerElem", { static: true }]
             }], canvasElem: [{
                 type: ViewChild,
                 args: ["canvasElem", { static: true }]
-            }], itemList: [{
-                type: ContentChildren,
-                args: [InteractiveItemComponent]
             }], onTouchEnd: [{
                 type: HostListener,
-                args: ["window:touchend", ["$event"]]
+                args: ["window:touchend"]
             }], onMouseUp: [{
                 type: HostListener,
-                args: ["window:mouseup", ["$event"]]
+                args: ["window:mouseup"]
             }] } });
 
 class InteractiveCircleComponent extends InteractiveItemComponent {
@@ -9124,5 +9204,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, isBrowser, isPoint, lengthOfPt, lerpPts, multiplyPts, negatePt, normalizePt, normalizeRange, overflow, parseSelector, perpendicular, provideEntryComponents, 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, 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, svgToDataUri, switchClass, toDegrees, toRadians, tripleProduct };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map