@visuallyjs/browser-ui-angular 1.2.0 → 1.2.1

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/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/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

package/esm2022/lib/paper-component.mjs

@@ -0,0 +1,345 @@
+import { Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewContainerRef, inject, reflectComponentType, input, effect } from "@angular/core";
+import { EVENT_EDGE_UPDATED, EVENT_GROUP_UPDATED, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_PORT_UPDATED, extend, renderPaper, OVERLAY_TYPE_CUSTOM, isGroup, EVENT_INTERNAL_CONNECTION, EVENT_DATA_LOAD_END, ELEMENT_DIV, EVENT_EDGE_REMOVED, EVENT_EDGE_ADDED } from "@visuallyjs/browser-ui";
+import { AngularComponentOverlayType, } from "./overlay-component";
+import { DefaultGroupComponent } from "./default-group-component";
+import { DefaultNodeComponent } from "./default-node-component";
+import { BasePortComponent } from "./base.port.component";
+import { VisuallyJsService } from "./vjs-service";
+import { BrowserUIAngularModel } from "./model";
+import * as i0 from "@angular/core";
+
+export class PaperComponent {
+    constructor() {
+        
+        this.data = input();
+        
+        this.url = input();
+        
+        this.vertexEvent = new EventEmitter();
+        this.$el = inject(ElementRef);
+        this.$viewContainerRef = inject(ViewContainerRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+        this._dataEffect = effect(() => {
+            const currentData = this.data();
+            if (currentData) {
+                if (this.model) {
+                    this.model.clear();
+                    this.model.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.model) {
+                    this.model.clear();
+                    this.model.load({ url: currentUrl });
+                }
+            }
+        });
+    }
+    
+    getNativeElement(component) {
+        return component.location.nativeElement.childNodes[0];
+    }
+    _getComponent(el, tryParent) {
+        if (el == null) {
+            return null;
+        }
+        else {
+            let vjc = el._visuallyJsNgComponent;
+            if (vjc == null && tryParent && el.parentNode != null) {
+                vjc = el.parentNode._visuallyJsNgComponent;
+            }
+            return vjc;
+        }
+    }
+    _getComponentThen(el, then, tryParent) {
+        const c = this._getComponent(el, tryParent);
+        if (c != null) {
+            then(c);
+        }
+    }
+    
+    nodeOrGroupUpdated(params) {
+        const info = this.paper.getObjectInfo(params.vertex, false);
+        this._getComponentThen(info.el, (component) => {
+            component.data = params.vertex.data;
+            component.$data?.set(component.data);
+            if (component.changeDetectorRef) {
+                component.changeDetectorRef.detectChanges();
+            }
+        }, false);
+    }
+    portUpdated(params) {
+        const info = this.paper.getObjectInfo(params.port, false);
+        this._getComponentThen(info.el, (component) => {
+            if (component instanceof BasePortComponent) {
+                component.data = params.port.data;
+                if (component.changeDetectorRef) {
+                    component.changeDetectorRef.detectChanges();
+                }
+            }
+        }, true);
+    }
+    
+    edgeUpdated(params) {
+        const connection = this.paper.getRenderedConnection(params.edge.id);
+        if (connection) {
+            for (let id in connection.overlays) {
+                const canvas = connection.overlays[id].contentElement;
+                this._getComponentThen(canvas, (component) => {
+                    if (component.changeDetectorRef != null) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }, false);
+            }
+        }
+    }
+    edgeAddedRemoved(params) {
+        const info = this.paper.getObjectInfo(params.edge.source, false);
+        if (info.el) {
+            this._getComponentThen(info.el, (component) => {
+                try {
+                    ;
+                    component.$updateEdges();
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+        const info2 = this.paper.getObjectInfo(params.edge.target, false);
+        if (info2.el && info.obj.getFullId() !== info2.obj.getFullId()) {
+            this._getComponentThen(info2.el, (component) => {
+                try {
+                    ;
+                    component.$updateEdges();
+                    // tslint:disable-next-line:align
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+    }
+    
+    _processAngularOverlays(view) {
+        const self = this;
+        const edgeTypes = view.edges || {};
+        for (let edgeTypeId in edgeTypes) {
+            const edgeType = edgeTypes[edgeTypeId];
+            if (edgeType.overlays != null) {
+                edgeType.overlays = edgeType.overlays.map((o) => {
+                    if (typeof o === "string") {
+                        return o;
+                    }
+                    else {
+                        const fo = o;
+                        if (fo.type === AngularComponentOverlayType) {
+                            const newSpec = Object.assign(fo, {
+                                type: OVERLAY_TYPE_CUSTOM,
+                            });
+                            newSpec.options = (newSpec.options || {});
+                            newSpec.options.create = (connection) => {
+                                const el = document.createElement(ELEMENT_DIV);
+                                let createdComponent = self.$viewContainerRef.createComponent(newSpec.options.component);
+                                let angularOverlayComponent = createdComponent.instance;
+                                let nativeEl = createdComponent.location.nativeElement.childNodes[0];
+                                el.appendChild(nativeEl);
+                                el._visuallyJsNgComponent = angularOverlayComponent;
+                                
+                                if (connection != null) {
+                                    const edge = connection.edge;
+                                    angularOverlayComponent.edge = edge;
+                                    angularOverlayComponent.data = edge.data;
+                                }
+                                angularOverlayComponent.model = self.model;
+                                angularOverlayComponent.ui = self.paper;
+                                createdComponent.changeDetectorRef.detectChanges();
+                                return el;
+                            };
+                            return newSpec;
+                        }
+                        else {
+                            return fo;
+                        }
+                    }
+                });
+            }
+        }
+        return view;
+    }
+    
+    save(options) {
+        this.paper.save(options);
+    }
+    
+    exportData(options) {
+        return this.paper.model.exportData(options);
+    }
+    
+    dataLoadEnd() {
+        setTimeout(() => {
+            if (this.paper != null) {
+                this.paper.repaintEverything();
+            }
+        }, 0);
+    }
+    $removeNgElement(el) {
+        if (el._ref != null) {
+            el._ref.destroy();
+        }
+        if (el.parentNode != null) {
+            el.parentNode.removeChild(el);
+        }
+    }
+    
+    ngAfterViewInit() {
+        this.$ngZone.runOutsideAngular(() => {
+            const view = this._processAngularOverlays(this.viewOptions || {});
+            const self = this;
+            this.renderOptions = this.renderOptions || {};
+            const render = (directiveId, data, instance, objectType, paper, def, modelObject, eventInfo) => {
+                let component;
+                if (def.component == null) {
+                    if (isGroup(modelObject)) {
+                        component = DefaultGroupComponent;
+                    }
+                    else {
+                        component = DefaultNodeComponent;
+                    }
+                }
+                else {
+                    component = def.component;
+                }
+                let createdComponent = self.$viewContainerRef.createComponent(component);
+                let _componentRef = createdComponent.instance;
+                _componentRef.data = data || {};
+                _componentRef.model = model;
+                _componentRef.paper = paper;
+                _componentRef.ui = paper;
+                _componentRef.modelObject = modelObject;
+                // get the reflection data for the component
+                const componentInfo = reflectComponentType(component);
+                // ..and populate any declared inputs from data
+                componentInfo.inputs.forEach((pt) => {
+                    const pv = _componentRef.data[pt.propName];
+                    if (pv != null) {
+                        _componentRef[pt.propName] = pv;
+                    }
+                });
+                // map to any outputs
+                componentInfo.outputs.forEach((pt) => {
+                    _componentRef[pt.propName].subscribe((d) => self.vertexEvent.emit({
+                        vertex: modelObject,
+                        event: pt.propName,
+                        payload: d,
+                        component: createdComponent,
+                    }));
+                });
+                // if angular def has 'inputs' set, set them on the component. this is different to the mechanism above, in which values are extracted from
+                // each node's backing data. here we inject values either as a string or from some arbitrary function.
+                if (def.inputs != null) {
+                    for (let k in def.inputs) {
+                        const v = def.inputs[k];
+                        const value = typeof v === "string" ? v : v(modelObject);
+                        _componentRef[k] = value;
+                    }
+                }
+                createdComponent.changeDetectorRef.detectChanges();
+                // TODO this should not be necessary
+                const nativeElement = self.getNativeElement(createdComponent);
+                _componentRef._el = nativeElement;
+                _componentRef._el._visuallyJsNgComponent = _componentRef;
+                _componentRef._el._ref = createdComponent; // we store _ref so we can call `destroy` on it later if the node is removed.
+                paper.$vertexRendered(modelObject, nativeElement, def, eventInfo);
+            };
+            const templateRenderer = {
+                asynchronous: false,
+                reactive: true,
+                usesWrapperElement: false,
+                update: (el, data, v, renderer) => { },
+                render,
+                rerender: (directiveId, data, instance, objectType, paper, def, modelObject, eventInfo, originalElement) => {
+                    this.$removeNgElement(originalElement);
+                    render(directiveId, data, instance, objectType, paper, def, modelObject, eventInfo);
+                },
+                cleanupVertex: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+                cleanupPort: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+            };
+            const renderParams = extend(this.renderOptions || {}, {
+                view: view,
+            });
+            let model = this.inputModel || new BrowserUIAngularModel(this.modelOptions);
+            this.model = model;
+            this.paper = renderPaper(model, self.$el.nativeElement, templateRenderer, renderParams);
+            this.$vjs.$setPaper(this.paper);
+            // ----------------
+            this.nodeUpdateFn = this.nodeOrGroupUpdated.bind(this);
+            model.bind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+            model.bind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+            model.bind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+            this.dataLoadEndFn = this.dataLoadEnd.bind(this);
+            model.bind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+            this.portUpdateFn = this.portUpdated.bind(this);
+            model.bind(EVENT_PORT_UPDATED, this.portUpdateFn);
+            this.edgeUpdateFn = this.edgeUpdated.bind(this);
+            model.bind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+            this.edgeAddFn = this.edgeAddedRemoved.bind(this);
+            this.edgeRemoveFn = this.edgeAddedRemoved.bind(this);
+            model.bind(EVENT_EDGE_ADDED, this.edgeAddFn);
+            model.bind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
+            const initialData = this.data();
+            const initialUrl = this.url();
+            if (initialData) {
+                this.model.load({ data: initialData });
+            }
+            else if (initialUrl) {
+                this.model.load({ url: initialUrl });
+            }
+        });
+    }
+    
+    ngOnDestroy() {
+        this.paper.destroy();
+        this.model.unbind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_UPDATED, this.portUpdateFn);
+        this.model.unbind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+        this.model.unbind(EVENT_EDGE_ADDED, this.edgeAddFn);
+        this.model.unbind(EVENT_EDGE_REMOVED, this.edgeRemoveFn);
+        this.model.unbind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+        this.paper.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PaperComponent, selector: "vjs-paper", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", 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 } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-paper",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { inputModel: [{
+                type: Input,
+                args: [{ alias: "model" }]
+            }], viewOptions: [{
+                type: Input
+            }], renderOptions: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }], vertexEvent: [{
+                type: Output
+            }] } });

package/esm2022/lib/shape.component.mjs

@@ -41,8 +41,8 @@ export class ShapeComponent {
     ngOnChanges(changes) {
         this._render();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
     [attr.stroke-width]="obj.outlineWidth || 2"
     attr.fill="{{ obj.fill }}"
     attr.stroke="{{ obj.outline }}"
@@ -51,7 +51,7 @@ export class ShapeComponent {
     attr.viewBox="0 0 {{ width }} {{ height }}"
   ></svg:svg>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<svg:svg
@@ -64,7 +64,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   ></svg:svg>`,
                     selector: `vjs-shape`,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { obj: [{
+        }], ctorParameters: () => [], propDecorators: { obj: [{
                 type: Input
             }], width: [{
                 type: Input

package/esm2022/lib/shape.palette.component.mjs

@@ -48,16 +48,16 @@ export class ShapePaletteComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", 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: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
             type: Component,
             args: [{
                     template: `<div></div>`,
                     selector: `vjs-shape-palette`
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { initialSet: [{
+        }], ctorParameters: () => [], propDecorators: { initialSet: [{
                 type: Input
             }], dragSize: [{
                 type: Input