ngx-vflow 1.1.0 → 1.1.1

package/esm2022/lib/vflow/components/edge-label/edge-label.component.mjs

@@ -1,10 +1,13 @@
-import { __decorate } from "tslib";
-import { ChangeDetectionStrategy, Component, computed, input, viewChild, } from '@angular/core';
-import { Microtask } from '../../decorators/microtask.decorator';
+import { ChangeDetectionStrategy, Component, DestroyRef, NgZone, computed, inject, input, viewChild, } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
+import { resizable } from '../../utils/resizable';
+import { startWith, tap } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i0 from "@angular/core";
 export class EdgeLabelComponent {
     constructor() {
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
         // TODO: too many inputs
         this.model = input.required();
         this.edgeModel = input.required();
@@ -29,9 +32,13 @@ export class EdgeLabelComponent {
         // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
         // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
         const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
-        const width = this.edgeLabelWrapperRef().nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        const height = this.edgeLabelWrapperRef().nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        this.model().size.set({ width, height });
+        resizable([this.edgeLabelWrapperRef().nativeElement], this.zone)
+            .pipe(startWith(null), tap(() => {
+            const width = this.edgeLabelWrapperRef().nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            const height = this.edgeLabelWrapperRef().nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            this.model().size.set({ width, height });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
     }
     getLabelContext() {
         return {
@@ -44,11 +51,8 @@ export class EdgeLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    Microtask
-], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
-        }], propDecorators: { ngAfterViewInit: [] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1sYWJlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvY29tcG9uZW50cy9lZGdlLWxhYmVsL2VkZ2UtbGFiZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L2NvbXBvbmVudHMvZWRnZS1sYWJlbC9lZGdlLWxhYmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBRUwsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFHVCxRQUFRLEVBQ1IsS0FBSyxFQUNMLFNBQVMsR0FDVixNQUFNLGVBQWUsQ0FBQztBQUd2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDakUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBdUJuRCxNQUFNLE9BQU8sa0JBQWtCO0lBckIvQjtRQXNCRSx3QkFBd0I7UUFDakIsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWtCLENBQUM7UUFFekMsY0FBUyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWEsQ0FBQztRQUV4QyxVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUU5QixpQkFBWSxHQUFHLEtBQUssRUFBb0IsQ0FBQztRQUV6Qyx3QkFBbUIsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUE2QixrQkFBa0IsQ0FBQyxDQUFDO1FBRWhHOzs7O1dBSUc7UUFDTyxtQkFBYyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDdkMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBRTNCLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO1lBRTlDLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLENBQUM7Z0JBQ3RCLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQyxHQUFHLE1BQU0sR0FBRyxDQUFDO2FBQ3hCLENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztLQXNCSjtJQW5CUSxlQUFlO1FBQ3BCLGlHQUFpRztRQUNqRyxnR0FBZ0c7UUFDaEcsTUFBTSxtQ0FBbUMsR0FBRyxDQUFDLENBQUM7UUFFOUMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsYUFBYSxDQUFDLFdBQVcsR0FBRyxtQ0FBbUMsQ0FBQztRQUN6RyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxhQUFhLENBQUMsWUFBWSxHQUFHLG1DQUFtQyxDQUFDO1FBRTNHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUM7SUFDM0MsQ0FBQztJQUVTLGVBQWU7UUFDdkIsT0FBTztZQUNMLFNBQVMsRUFBRTtnQkFDVCxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLElBQUk7Z0JBQzNCLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsU0FBUzthQUM5QjtTQUNGLENBQUM7SUFDSixDQUFDOytHQS9DVSxrQkFBa0I7bUdBQWxCLGtCQUFrQiw0dEJDcEMvQiwyZkFhQSxpSURxQlksZ0JBQWdCOztBQStCbkI7SUFETixTQUFTO3lEQVVUOzRGQXRDVSxrQkFBa0I7a0JBckI5QixTQUFTO2lDQUNJLElBQUksWUFDTixjQUFjLG1CQWdCUCx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZ0JBQWdCLENBQUM7OEJBK0JwQixlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgVGVtcGxhdGVSZWYsXG4gIGNvbXB1dGVkLFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVkZ2VMYWJlbE1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2VkZ2UtbGFiZWwubW9kZWwnO1xuaW1wb3J0IHsgRWRnZU1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2VkZ2UubW9kZWwnO1xuaW1wb3J0IHsgTWljcm90YXNrIH0gZnJvbSAnLi4vLi4vZGVjb3JhdG9ycy9taWNyb3Rhc2suZGVjb3JhdG9yJztcbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdnW2VkZ2VMYWJlbF0nLFxuICB0ZW1wbGF0ZVVybDogJy4vZWRnZS1sYWJlbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIC5lZGdlLWxhYmVsLXdyYXBwZXIge1xuICAgICAgICB3aWR0aDogbWF4LWNvbnRlbnQ7XG5cbiAgICAgICAgLypcbiAgICAgICAgdGhpcyBpcyBhIGZpeCBmb3IgYnVnIGluIGNocm9tZSwgZm9yIHNvbWUgcmVhc29uIGlmIHRoZSBkaXYgZnVsbHkgbWF0Y2hlcyB0aGUgc2l6ZVxuICAgICAgICBvZiBmb3JlaWduT2JqZWN0IHRoZXJlIGFyZSBvY2N1cnMgc29tZSB2aXN1YWwgYXJ0aWZhY3RzIGFyb3VuZCB0aGlzIGRpdlxuICAgICAgICovXG4gICAgICAgIG1hcmdpbi10b3A6IDFweDtcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDFweDtcbiAgICAgIH1cbiAgICBgLFxuICBdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW05nVGVtcGxhdGVPdXRsZXRdLFxufSlcbmV4cG9ydCBjbGFzcyBFZGdlTGFiZWxDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgLy8gVE9ETzogdG9vIG1hbnkgaW5wdXRzXG4gIHB1YmxpYyBtb2RlbCA9IGlucHV0LnJlcXVpcmVkPEVkZ2VMYWJlbE1vZGVsPigpO1xuXG4gIHB1YmxpYyBlZGdlTW9kZWwgPSBpbnB1dC5yZXF1aXJlZDxFZGdlTW9kZWw+KCk7XG5cbiAgcHVibGljIHBvaW50ID0gaW5wdXQoeyB4OiAwLCB5OiAwIH0pO1xuXG4gIHB1YmxpYyBodG1sVGVtcGxhdGUgPSBpbnB1dDxUZW1wbGF0ZVJlZjxhbnk+PigpO1xuXG4gIHB1YmxpYyBlZGdlTGFiZWxXcmFwcGVyUmVmID0gdmlld0NoaWxkLnJlcXVpcmVkPEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+PignZWRnZUxhYmVsV3JhcHBlcicpO1xuXG4gIC8qKlxuICAgKiBDZW50ZXJlZCBwb2ludCBvZiBsYWJlbFxuICAgKlxuICAgKiBUT0RPOiBtYXliZSBwdXQgaXQgaW50byBFZGdlTGFiZWxNb2RlbFxuICAgKi9cbiAgcHJvdGVjdGVkIGVkZ2VMYWJlbFBvaW50ID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IHBvaW50ID0gdGhpcy5wb2ludCgpO1xuXG4gICAgY29uc3QgeyB3aWR0aCwgaGVpZ2h0IH0gPSB0aGlzLm1vZGVsKCkuc2l6ZSgpO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IHBvaW50LnggLSB3aWR0aCAvIDIsXG4gICAgICB5OiBwb2ludC55IC0gaGVpZ2h0IC8gMixcbiAgICB9O1xuICB9KTtcblxuICBATWljcm90YXNrXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgLy8gdGhpcyBpcyBhIGZpeCBmb3IgdmlzdWFsIGFydGlmYWN0IGluIGNocm9tZSB0aGF0IGZvciBzb21lIHJlYXNvbiBhZHJlc3NlcyBvbmx5IGZvciBlZGdlIGxhYmVsLlxuICAgIC8vIHRoZSBidWcgcmVwcm9kdWNlcyBpZiBlZGdlTGFiZWxXcmFwcGVyUmVmIHNpemUgZnVsbHkgbWF0Y2hlZCB0aGUgc2l6ZSBvZiBwYXJlbnQgZm9yZWlnbk9iamVjdFxuICAgIGNvbnN0IE1BR0lDX1ZBTFVFX1RPX0ZJWF9HTElUQ0hfSU5fQ0hST01FID0gMjtcblxuICAgIGNvbnN0IHdpZHRoID0gdGhpcy5lZGdlTGFiZWxXcmFwcGVyUmVmKCkubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aCArIE1BR0lDX1ZBTFVFX1RPX0ZJWF9HTElUQ0hfSU5fQ0hST01FO1xuICAgIGNvbnN0IGhlaWdodCA9IHRoaXMuZWRnZUxhYmVsV3JhcHBlclJlZigpLm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0ICsgTUFHSUNfVkFMVUVfVE9fRklYX0dMSVRDSF9JTl9DSFJPTUU7XG5cbiAgICB0aGlzLm1vZGVsKCkuc2l6ZS5zZXQoeyB3aWR0aCwgaGVpZ2h0IH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGdldExhYmVsQ29udGV4dCgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgJGltcGxpY2l0OiB7XG4gICAgICAgIGVkZ2U6IHRoaXMuZWRnZU1vZGVsKCkuZWRnZSxcbiAgICAgICAgbGFiZWw6IHRoaXMubW9kZWwoKS5lZGdlTGFiZWwsXG4gICAgICB9LFxuICAgIH07XG4gIH1cbn1cbiIsIkBpZiAobW9kZWwoKS5lZGdlTGFiZWwudHlwZSA9PT0gJ2h0bWwtdGVtcGxhdGUnICYmIGh0bWxUZW1wbGF0ZSgpKSB7XG4gIEBpZiAoaHRtbFRlbXBsYXRlKCk7IGFzIGh0bWxUZW1wbGF0ZSkge1xuICAgIDxzdmc6Zm9yZWlnbk9iamVjdFxuICAgICAgW2F0dHIueF09XCJlZGdlTGFiZWxQb2ludCgpLnhcIlxuICAgICAgW2F0dHIueV09XCJlZGdlTGFiZWxQb2ludCgpLnlcIlxuICAgICAgW2F0dHIud2lkdGhdPVwibW9kZWwoKS5zaXplKCkud2lkdGhcIlxuICAgICAgW2F0dHIuaGVpZ2h0XT1cIm1vZGVsKCkuc2l6ZSgpLmhlaWdodFwiPlxuICAgICAgPGRpdiAjZWRnZUxhYmVsV3JhcHBlciBjbGFzcz1cImVkZ2UtbGFiZWwtd3JhcHBlclwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaHRtbFRlbXBsYXRlOyBjb250ZXh0OiBnZXRMYWJlbENvbnRleHQoKVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICA8L3N2Zzpmb3JlaWduT2JqZWN0PlxuICB9XG59XG4iXX0=
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1sYWJlbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtdmZsb3ctbGliL3NyYy9saWIvdmZsb3cvY29tcG9uZW50cy9lZGdlLWxhYmVsL2VkZ2UtbGFiZWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXZmbG93LWxpYi9zcmMvbGliL3ZmbG93L2NvbXBvbmVudHMvZWRnZS1sYWJlbC9lZGdlLWxhYmVsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFFVixNQUFNLEVBRU4sUUFBUSxFQUNSLE1BQU0sRUFDTixLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUNsRCxPQUFPLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0QyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQzs7QUF1QmhFLE1BQU0sT0FBTyxrQkFBa0I7SUFyQi9CO1FBc0JVLFNBQUksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDdEIsZUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUV4Qyx3QkFBd0I7UUFDakIsVUFBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWtCLENBQUM7UUFFekMsY0FBUyxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWEsQ0FBQztRQUV4QyxVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUU5QixpQkFBWSxHQUFHLEtBQUssRUFBb0IsQ0FBQztRQUV6Qyx3QkFBbUIsR0FBRyxTQUFTLENBQUMsUUFBUSxDQUE2QixrQkFBa0IsQ0FBQyxDQUFDO1FBRWhHOzs7O1dBSUc7UUFDTyxtQkFBYyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDdkMsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBRTNCLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO1lBRTlDLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDLEdBQUcsS0FBSyxHQUFHLENBQUM7Z0JBQ3RCLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQyxHQUFHLE1BQU0sR0FBRyxDQUFDO2FBQ3hCLENBQUM7UUFDSixDQUFDLENBQUMsQ0FBQztLQTZCSjtJQTNCUSxlQUFlO1FBQ3BCLGlHQUFpRztRQUNqRyxnR0FBZ0c7UUFDaEcsTUFBTSxtQ0FBbUMsR0FBRyxDQUFDLENBQUM7UUFFOUMsU0FBUyxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsYUFBYSxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQzthQUM3RCxJQUFJLENBQ0gsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUNmLEdBQUcsQ0FBQyxHQUFHLEVBQUU7WUFDUCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxhQUFhLENBQUMsV0FBVyxHQUFHLG1DQUFtQyxDQUFDO1lBQ3pHLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLGFBQWEsQ0FBQyxZQUFZLEdBQUcsbUNBQW1DLENBQUM7WUFFM0csSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQztRQUMzQyxDQUFDLENBQUMsRUFDRixrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQ3BDO2FBQ0EsU0FBUyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVTLGVBQWU7UUFDdkIsT0FBTztZQUNMLFNBQVMsRUFBRTtnQkFDVCxJQUFJLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLElBQUk7Z0JBQzNCLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsU0FBUzthQUM5QjtTQUNGLENBQUM7SUFDSixDQUFDOytHQXpEVSxrQkFBa0I7bUdBQWxCLGtCQUFrQiw0dEJDekMvQiwyZkFhQSxpSUQwQlksZ0JBQWdCOzs0RkFFZixrQkFBa0I7a0JBckI5QixTQUFTO2lDQUNJLElBQUksWUFDTixjQUFjLG1CQWdCUCx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZ0JBQWdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlclZpZXdJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBEZXN0cm95UmVmLFxuICBFbGVtZW50UmVmLFxuICBOZ1pvbmUsXG4gIFRlbXBsYXRlUmVmLFxuICBjb21wdXRlZCxcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEVkZ2VMYWJlbE1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2VkZ2UtbGFiZWwubW9kZWwnO1xuaW1wb3J0IHsgRWRnZU1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2VkZ2UubW9kZWwnO1xuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyByZXNpemFibGUgfSBmcm9tICcuLi8uLi91dGlscy9yZXNpemFibGUnO1xuaW1wb3J0IHsgc3RhcnRXaXRoLCB0YXAgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IHRha2VVbnRpbERlc3Ryb3llZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIHNlbGVjdG9yOiAnZ1tlZGdlTGFiZWxdJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2VkZ2UtbGFiZWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAuZWRnZS1sYWJlbC13cmFwcGVyIHtcbiAgICAgICAgd2lkdGg6IG1heC1jb250ZW50O1xuXG4gICAgICAgIC8qXG4gICAgICAgIHRoaXMgaXMgYSBmaXggZm9yIGJ1ZyBpbiBjaHJvbWUsIGZvciBzb21lIHJlYXNvbiBpZiB0aGUgZGl2IGZ1bGx5IG1hdGNoZXMgdGhlIHNpemVcbiAgICAgICAgb2YgZm9yZWlnbk9iamVjdCB0aGVyZSBhcmUgb2NjdXJzIHNvbWUgdmlzdWFsIGFydGlmYWN0cyBhcm91bmQgdGhpcyBkaXZcbiAgICAgICAqL1xuICAgICAgICBtYXJnaW4tdG9wOiAxcHg7XG4gICAgICAgIG1hcmdpbi1sZWZ0OiAxcHg7XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtOZ1RlbXBsYXRlT3V0bGV0XSxcbn0pXG5leHBvcnQgY2xhc3MgRWRnZUxhYmVsQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIHByaXZhdGUgem9uZSA9IGluamVjdChOZ1pvbmUpO1xuICBwcml2YXRlIGRlc3Ryb3lSZWYgPSBpbmplY3QoRGVzdHJveVJlZik7XG5cbiAgLy8gVE9ETzogdG9vIG1hbnkgaW5wdXRzXG4gIHB1YmxpYyBtb2RlbCA9IGlucHV0LnJlcXVpcmVkPEVkZ2VMYWJlbE1vZGVsPigpO1xuXG4gIHB1YmxpYyBlZGdlTW9kZWwgPSBpbnB1dC5yZXF1aXJlZDxFZGdlTW9kZWw+KCk7XG5cbiAgcHVibGljIHBvaW50ID0gaW5wdXQoeyB4OiAwLCB5OiAwIH0pO1xuXG4gIHB1YmxpYyBodG1sVGVtcGxhdGUgPSBpbnB1dDxUZW1wbGF0ZVJlZjxhbnk+PigpO1xuXG4gIHB1YmxpYyBlZGdlTGFiZWxXcmFwcGVyUmVmID0gdmlld0NoaWxkLnJlcXVpcmVkPEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+PignZWRnZUxhYmVsV3JhcHBlcicpO1xuXG4gIC8qKlxuICAgKiBDZW50ZXJlZCBwb2ludCBvZiBsYWJlbFxuICAgKlxuICAgKiBUT0RPOiBtYXliZSBwdXQgaXQgaW50byBFZGdlTGFiZWxNb2RlbFxuICAgKi9cbiAgcHJvdGVjdGVkIGVkZ2VMYWJlbFBvaW50ID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IHBvaW50ID0gdGhpcy5wb2ludCgpO1xuXG4gICAgY29uc3QgeyB3aWR0aCwgaGVpZ2h0IH0gPSB0aGlzLm1vZGVsKCkuc2l6ZSgpO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IHBvaW50LnggLSB3aWR0aCAvIDIsXG4gICAgICB5OiBwb2ludC55IC0gaGVpZ2h0IC8gMixcbiAgICB9O1xuICB9KTtcblxuICBwdWJsaWMgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIC8vIHRoaXMgaXMgYSBmaXggZm9yIHZpc3VhbCBhcnRpZmFjdCBpbiBjaHJvbWUgdGhhdCBmb3Igc29tZSByZWFzb24gYWRyZXNzZXMgb25seSBmb3IgZWRnZSBsYWJlbC5cbiAgICAvLyB0aGUgYnVnIHJlcHJvZHVjZXMgaWYgZWRnZUxhYmVsV3JhcHBlclJlZiBzaXplIGZ1bGx5IG1hdGNoZWQgdGhlIHNpemUgb2YgcGFyZW50IGZvcmVpZ25PYmplY3RcbiAgICBjb25zdCBNQUdJQ19WQUxVRV9UT19GSVhfR0xJVENIX0lOX0NIUk9NRSA9IDI7XG5cbiAgICByZXNpemFibGUoW3RoaXMuZWRnZUxhYmVsV3JhcHBlclJlZigpLm5hdGl2ZUVsZW1lbnRdLCB0aGlzLnpvbmUpXG4gICAgICAucGlwZShcbiAgICAgICAgc3RhcnRXaXRoKG51bGwpLFxuICAgICAgICB0YXAoKCkgPT4ge1xuICAgICAgICAgIGNvbnN0IHdpZHRoID0gdGhpcy5lZGdlTGFiZWxXcmFwcGVyUmVmKCkubmF0aXZlRWxlbWVudC5jbGllbnRXaWR0aCArIE1BR0lDX1ZBTFVFX1RPX0ZJWF9HTElUQ0hfSU5fQ0hST01FO1xuICAgICAgICAgIGNvbnN0IGhlaWdodCA9IHRoaXMuZWRnZUxhYmVsV3JhcHBlclJlZigpLm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0ICsgTUFHSUNfVkFMVUVfVE9fRklYX0dMSVRDSF9JTl9DSFJPTUU7XG5cbiAgICAgICAgICB0aGlzLm1vZGVsKCkuc2l6ZS5zZXQoeyB3aWR0aCwgaGVpZ2h0IH0pO1xuICAgICAgICB9KSxcbiAgICAgICAgdGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZiksXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgZ2V0TGFiZWxDb250ZXh0KCkge1xuICAgIHJldHVybiB7XG4gICAgICAkaW1wbGljaXQ6IHtcbiAgICAgICAgZWRnZTogdGhpcy5lZGdlTW9kZWwoKS5lZGdlLFxuICAgICAgICBsYWJlbDogdGhpcy5tb2RlbCgpLmVkZ2VMYWJlbCxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxufVxuIiwiQGlmIChtb2RlbCgpLmVkZ2VMYWJlbC50eXBlID09PSAnaHRtbC10ZW1wbGF0ZScgJiYgaHRtbFRlbXBsYXRlKCkpIHtcbiAgQGlmIChodG1sVGVtcGxhdGUoKTsgYXMgaHRtbFRlbXBsYXRlKSB7XG4gICAgPHN2Zzpmb3JlaWduT2JqZWN0XG4gICAgICBbYXR0ci54XT1cImVkZ2VMYWJlbFBvaW50KCkueFwiXG4gICAgICBbYXR0ci55XT1cImVkZ2VMYWJlbFBvaW50KCkueVwiXG4gICAgICBbYXR0ci53aWR0aF09XCJtb2RlbCgpLnNpemUoKS53aWR0aFwiXG4gICAgICBbYXR0ci5oZWlnaHRdPVwibW9kZWwoKS5zaXplKCkuaGVpZ2h0XCI+XG4gICAgICA8ZGl2ICNlZGdlTGFiZWxXcmFwcGVyIGNsYXNzPVwiZWRnZS1sYWJlbC13cmFwcGVyXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJodG1sVGVtcGxhdGU7IGNvbnRleHQ6IGdldExhYmVsQ29udGV4dCgpXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgIDwvc3ZnOmZvcmVpZ25PYmplY3Q+XG4gIH1cbn1cbiJdfQ==

package/fesm2022/ngx-vflow.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, viewChild, Component, ChangeDetectionStrategy, Injector, output, HostListener, runInInjectionContext, NgZone, contentChild, Input, forwardRef } from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Directive, effect, untracked, TemplateRef, DestroyRef, EventEmitter, OutputEmitterRef, input, NgZone, viewChild, Component, ChangeDetectionStrategy, Injector, output, HostListener, runInInjectionContext, contentChild, Input, forwardRef } from '@angular/core';
 import { select } from 'd3-selection';
 import { zoomIdentity, zoom } from 'd3-zoom';
 import { switchMap, merge, fromEvent, tap, Subject, Observable, skip, map, pairwise, filter, distinctUntilChanged, observeOn, asyncScheduler, zip, animationFrameScheduler, share, startWith, of } from 'rxjs';
@@ -1738,8 +1738,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             type: Injectable
         }], propDecorators: { addToolbar: [], removeToolbar: [] } });
 
+function resizable(elems, zone) {
+    return new Observable((subscriber) => {
+        const ro = new ResizeObserver((entries) => {
+            zone.run(() => subscriber.next(entries));
+        });
+        elems.forEach((e) => ro.observe(e));
+        return () => ro.disconnect();
+    });
+}
+
 class EdgeLabelComponent {
     constructor() {
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
         // TODO: too many inputs
         this.model = input.required();
         this.edgeModel = input.required();
@@ -1764,9 +1776,13 @@ class EdgeLabelComponent {
         // this is a fix for visual artifact in chrome that for some reason adresses only for edge label.
         // the bug reproduces if edgeLabelWrapperRef size fully matched the size of parent foreignObject
         const MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME = 2;
-        const width = this.edgeLabelWrapperRef().nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        const height = this.edgeLabelWrapperRef().nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
-        this.model().size.set({ width, height });
+        resizable([this.edgeLabelWrapperRef().nativeElement], this.zone)
+            .pipe(startWith(null), tap(() => {
+            const width = this.edgeLabelWrapperRef().nativeElement.clientWidth + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            const height = this.edgeLabelWrapperRef().nativeElement.clientHeight + MAGIC_VALUE_TO_FIX_GLITCH_IN_CHROME;
+            this.model().size.set({ width, height });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
     }
     getLabelContext() {
         return {
@@ -1779,13 +1795,10 @@ class EdgeLabelComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgeLabelComponent, isStandalone: true, selector: "g[edgeLabel]", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, edgeModel: { classPropertyName: "edgeModel", publicName: "edgeModel", isSignal: true, isRequired: true, transformFunction: null }, point: { classPropertyName: "point", publicName: "point", isSignal: true, isRequired: false, transformFunction: null }, htmlTemplate: { classPropertyName: "htmlTemplate", publicName: "htmlTemplate", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "edgeLabelWrapperRef", first: true, predicate: ["edgeLabelWrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-__decorate([
-    Microtask
-], EdgeLabelComponent.prototype, "ngAfterViewInit", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeLabelComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'g[edgeLabel]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "@if (model().edgeLabel.type === 'html-template' && htmlTemplate()) {\n  @if (htmlTemplate(); as htmlTemplate) {\n    <svg:foreignObject\n      [attr.x]=\"edgeLabelPoint().x\"\n      [attr.y]=\"edgeLabelPoint().y\"\n      [attr.width]=\"model().size().width\"\n      [attr.height]=\"model().size().height\">\n      <div #edgeLabelWrapper class=\"edge-label-wrapper\">\n        <ng-container *ngTemplateOutlet=\"htmlTemplate; context: getLabelContext()\" />\n      </div>\n    </svg:foreignObject>\n  }\n}\n", styles: [".edge-label-wrapper{width:max-content;margin-top:1px;margin-left:1px}\n"] }]
-        }], propDecorators: { ngAfterViewInit: [] } });
+        }] });
 
 class EdgeComponent {
     constructor() {
@@ -2491,16 +2504,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ standalone: true, selector: 'handle', changeDetection: ChangeDetectionStrategy.OnPush, template: "" }]
         }], propDecorators: { ngOnInit: [] } });
 
-function resizable(elems, zone) {
-    return new Observable((subscriber) => {
-        const ro = new ResizeObserver((entries) => {
-            zone.run(() => subscriber.next(entries));
-        });
-        elems.forEach((e) => ro.observe(e));
-        return () => ro.disconnect();
-    });
-}
-
 class NodeHandlesControllerDirective {
     constructor() {
         this.nodeAccessor = inject(NodeAccessorService);