@visuallyjs/browser-ui-angular 1.2.0 → 1.2.2

package/esm2022/lib/default-node-component.mjs

@@ -7,10 +7,10 @@ export class DefaultNodeComponent extends BaseNodeComponent {
         super(...arguments);
         this.label = computed(() => this.$data().label || "");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-node">{{label()}}</div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DefaultNodeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `<div class="vjs-default-node">{{label()}}</div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DefaultNodeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div class="vjs-default-node">{{label()}}</div>`

package/esm2022/lib/diagram-component.mjs

@@ -1,23 +1,49 @@
-import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { Component, effect, ElementRef, inject, input, Input, NgZone } from "@angular/core";
 import { createDiagram } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 
 export class DiagramComponent {
     constructor() {
+        
+        this.data = input();
+        
+        this.url = input();
         this.$ngZone = inject(NgZone);
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.diagram) {
+                    this.diagram.clear();
+                    this.diagram.load({ data: currentData });
+                }
+            }
+        });
+        this._urlEffect = effect(() => {
+            const currentUrl = this.url();
+            if (currentUrl) {
+                // Respond to changes in the url here.
+                // For example, if you need to reload the model with new data:
+                if (this.diagram) {
+                    this.diagram.clear();
+                    this.diagram.load({ url: currentUrl });
+                }
+            }
+        });
     }
     ngAfterViewInit() {
         this.$ngZone.runOutsideAngular(() => {
             this.diagram = createDiagram(this.$el.nativeElement, this.options, this.modelOptions);
             this.$vjs.$setDiagram(this.diagram);
-            if (this.data != null) {
-                this.diagram.load({ data: this.data });
+            const initialData = this.data();
+            const initialUrl = this.url();
+            if (initialData) {
+                this.diagram.load({ data: initialData });
             }
-            else if (this.url != null) {
-                this.diagram.load({ url: this.url });
+            else if (initialUrl) {
+                this.diagram.load({ url: initialUrl });
             }
         });
     }
@@ -32,10 +58,10 @@ export class DiagramComponent {
     saveToUrl(options) {
         this.diagram.saveToUrl(options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramComponent, selector: "vjs-diagram", inputs: { options: "options", data: "data", url: "url", modelOptions: "modelOptions" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: DiagramComponent, selector: "vjs-diagram", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-diagram",
@@ -43,10 +69,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { options: [{
                 type: Input
-            }], data: [{
-                type: Input
-            }], url: [{
-                type: Input
             }], modelOptions: [{
                 type: Input
             }] } });

package/esm2022/lib/diagram-palette-component.mjs

@@ -42,16 +42,16 @@ export class DiagramPaletteComponent {
             this.$init(this.inputDiagram);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-diagram-palette",
                     template: `<div></div>`,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fill: [{
+        }], ctorParameters: () => [], propDecorators: { fill: [{
                 type: Input
             }], outline: [{
                 type: Input

package/esm2022/lib/edge.type.picker.component.mjs

@@ -25,7 +25,7 @@ export class EdgeTypePickerComponent {
                     });
                     const current = inspector.getValue(this.propertyName) || '';
                     this.edgeTypePicker = new EdgeTypePicker(inspector.$ui, this.el.nativeElement, this.resolveMappings(), current, (p, v) => {
-                        inspector.setValue(this.propertyName, v);
+                        inspector.setValue(this.propertyName, v, null);
                         this.changeEvent.emit(v);
                     });
                     this.edgeTypePicker.render(this.propertyName, inspector._currentCommonData);
@@ -33,16 +33,16 @@ export class EdgeTypePickerComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: { propertyName: "propertyName", edgeMappings: "edgeMappings" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: `<div [attr.vjs-att]="propertyName"></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTypePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: { propertyName: "propertyName", edgeMappings: "edgeMappings" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: `<div [attr.vjs-att]="propertyName"></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgeTypePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-edge-type",
                     template: `<div [attr.vjs-att]="propertyName"></div>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { propertyName: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { propertyName: [{
                 type: Input
             }], edgeMappings: [{
                 type: Input

package/esm2022/lib/export-controls-component.mjs

@@ -34,10 +34,10 @@ export class ExportControlsComponent {
             type: "image/jpeg",
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportControlsComponent, selector: "vjs-export-controls", inputs: { showLabel: "showLabel", label: "label", margins: "margins", svgOptions: "svgOptions", imageOptions: "imageOptions", allowSvgExport: "allowSvgExport", allowPngExport: "allowPngExport", allowJpgExport: "allowJpgExport" }, ngImport: i0, template: "<div class=\"vjs-controls vjs-export-controls\">\n    <span *ngIf=\"showLabel\">{{ label }}</span>\n    <i *ngIf=\"allowSvgExport\"\n      ><a href=\"#\" id=\"exportSvg\" (click)=\"exportSVG()\">SVG</a></i\n    >\n    <i *ngIf=\"allowPngExport\"\n      ><a href=\"#\" id=\"exportPng\" (click)=\"exportPNG()\">PNG</a></i\n    >\n    <i *ngIf=\"allowJpgExport\"\n      ><a href=\"#\" id=\"exportJpg\" (click)=\"exportJPG()\">JPG</a></i\n    >\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExportControlsComponent, selector: "vjs-export-controls", inputs: { showLabel: "showLabel", label: "label", margins: "margins", svgOptions: "svgOptions", imageOptions: "imageOptions", allowSvgExport: "allowSvgExport", allowPngExport: "allowPngExport", allowJpgExport: "allowJpgExport" }, ngImport: i0, template: "<div class=\"vjs-controls vjs-export-controls\">\n    <span *ngIf=\"showLabel\">{{ label }}</span>\n    <i *ngIf=\"allowSvgExport\"\n      ><a href=\"#\" id=\"exportSvg\" (click)=\"exportSVG()\">SVG</a></i\n    >\n    <i *ngIf=\"allowPngExport\"\n      ><a href=\"#\" id=\"exportPng\" (click)=\"exportPNG()\">PNG</a></i\n    >\n    <i *ngIf=\"allowJpgExport\"\n      ><a href=\"#\" id=\"exportJpg\" (click)=\"exportJPG()\">JPG</a></i\n    >\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-export-controls",

package/esm2022/lib/grid-background.component.mjs

@@ -0,0 +1,77 @@
+import { inject, Component, Input } from "@angular/core";
+import { BackgroundPlugin, GeneratedGridBackground, log } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class GridBackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._bg = null;
+    }
+    _getOptions() {
+        return {
+            type: GeneratedGridBackground.type,
+            grid: this.grid,
+            showBorder: this.showBorder,
+            minWidth: this.minWidth,
+            minHeight: this.minHeight,
+            showTickMarks: this.showTickMarks,
+            tickMarksPerCell: this.tickMarksPerCell,
+            maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
+            autoShrink: this.autoShrink,
+            gridType: this.gridType,
+            dotRadius: this.dotRadius,
+            tickDotRadius: this.tickDotRadius,
+            visible: this.visible
+        };
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                this._bg = s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: this._getOptions()
+                });
+            }
+            catch (e) {
+                log(`WARN: GridBackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GridBackgroundComponent, selector: "vjs-grid-background", inputs: { grid: "grid", showBorder: "showBorder", minWidth: "minWidth", minHeight: "minHeight", showTickMarks: "showTickMarks", tickMarksPerCell: "tickMarksPerCell", maxWidth: "maxWidth", maxHeight: "maxHeight", autoShrink: "autoShrink", gridType: "gridType", dotRadius: "dotRadius", tickDotRadius: "tickDotRadius", visible: "visible" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-grid-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], showTickMarks: [{
+                type: Input
+            }], tickMarksPerCell: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], autoShrink: [{
+                type: Input
+            }], gridType: [{
+                type: Input
+            }], dotRadius: [{
+                type: Input
+            }], tickDotRadius: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }] } });

package/esm2022/lib/image-background.component.mjs

@@ -0,0 +1,38 @@
+import { inject, Component, Input } from "@angular/core";
+import { BackgroundPlugin, log, SimpleBackground } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class ImageBackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                // tslint:disable-next-line:no-unused-expression
+                s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: {
+                        type: SimpleBackground.type,
+                        url: this.url
+                    }
+                });
+            }
+            catch (e) {
+                log(`WARN: ImageBackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageBackgroundComponent, selector: "vjs-image-background", inputs: { url: "url" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-image-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { url: [{
+                type: Input
+            }] } });

package/esm2022/lib/inspector.component.mjs

@@ -65,12 +65,12 @@ export class InspectorComponent {
     }
     
     afterUpdate(ui) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InspectorComponent, inputs: { cssClass: "cssClass", showCloseButton: "showCloseButton", context: "context" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: InspectorComponent, inputs: { cssClass: "cssClass", showCloseButton: "showCloseButton", context: "context" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InspectorComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return []; }, propDecorators: { cssClass: [{
+        }], ctorParameters: () => [], propDecorators: { cssClass: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input

package/esm2022/lib/miniview-component.mjs

@@ -47,16 +47,16 @@ export class MiniviewComponent {
             this.$miniview.invalidate();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter", showLasso: "showLasso", trackSelection: "trackSelection" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter", showLasso: "showLasso", trackSelection: "trackSelection" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vjs-miniview',
                     template: `<div></div>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elementFilter: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { elementFilter: [{
                 type: Input
             }], typeFunction: [{
                 type: Input

package/esm2022/lib/overlay-component.mjs

@@ -1,4 +1,6 @@
-import { ChangeDetectorRef, inject } from "@angular/core";
+import { EVENT_EDGE_UPDATED, EVENT_GROUP_UPDATED, EVENT_NODE_UPDATED, EVENT_PORT_UPDATED } from "@visuallyjs/browser-ui";
+import { ChangeDetectorRef, inject, Injectable, signal } from "@angular/core";
+import * as i0 from "@angular/core";
 
 export const AngularComponentOverlayType = "AngularComponent";
 
@@ -6,6 +8,50 @@ export class BaseAngularOverlayComponent {
     constructor() {
         
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        
+        this.$edgeData = signal({});
+        
+        this.$sourceData = signal({});
+        
+        this.$targetData = signal({});
+    }
+    ngOnInit() {
+        this.$edgeData.set(this.edge.data);
+        this.$sourceData.set(this.edge.source.data);
+        this.$targetData.set(this.edge.target.data);
+        this._edgeUpdate = (p) => {
+            if (p.edge.id === this.edge.id) {
+                this.$edgeData.set({ ...p.edge.data });
+                this.$sourceData.set({ ...p.edge.source.data });
+                this.$targetData.set({ ...p.edge.target.data });
+            }
+        };
+        this._vertexUpdate = (p) => {
+            if (p.vertex === this.edge.source) {
+                this.$sourceData.set({ ...p.vertex.data });
+            }
+            if (p.vertex === this.edge.target) {
+                this.$targetData.set({ ...p.vertex.data });
+            }
+        };
+        this._portUpdate = (p) => {
+            if (p.port === this.edge.source) {
+                this.$sourceData.set({ ...p.port.data });
+            }
+            if (p.port === this.edge.target) {
+                this.$targetData.set({ ...p.port.data });
+            }
+        };
+        this.model.bind(EVENT_EDGE_UPDATED, this._edgeUpdate);
+        this.model.bind(EVENT_NODE_UPDATED, this._vertexUpdate);
+        this.model.bind(EVENT_GROUP_UPDATED, this._vertexUpdate);
+        this.model.bind(EVENT_PORT_UPDATED, this._portUpdate);
+    }
+    ngOnDestroy() {
+        this.model.unbind(EVENT_EDGE_UPDATED, this._edgeUpdate);
+        this.model.unbind(EVENT_NODE_UPDATED, this._vertexUpdate);
+        this.model.unbind(EVENT_GROUP_UPDATED, this._vertexUpdate);
+        this.model.unbind(EVENT_PORT_UPDATED, this._portUpdate);
     }
     
     updateEdge(updates) {
@@ -15,4 +61,9 @@ export class BaseAngularOverlayComponent {
     removeEdge() {
         this.model.removeEdge(this.edge);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent, decorators: [{
+            type: Injectable
+        }] });

package/esm2022/lib/palette.component.mjs

@@ -50,15 +50,15 @@ export class PaletteComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Directive,
             args: [{
                     selector: "[vjs-palette]",
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { selector: [{
+        }], ctorParameters: () => [], propDecorators: { selector: [{
                 type: Input
             }], dataGenerator: [{
                 type: Input