@visuallyjs/browser-ui-angular 1.2.0 → 1.2.2

package/esm2022/lib/paper-component.mjs

@@ -0,0 +1,354 @@
+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);
+        this._maybeUpdateEdgeOverlays(params.vertex);
+    }
+    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);
+        this._maybeUpdateEdgeOverlays(params.port);
+    }
+    _maybeUpdateEdgeOverlays(vertex) {
+        vertex.getAllEdges().forEach(e => this._handleEdgeUpdate(e.id));
+    }
+    
+    _handleEdgeUpdate(edgeId) {
+        const connection = this.paper.getRenderedConnection(edgeId);
+        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);
+            }
+        }
+    }
+    
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
+    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

package/esm2022/lib/surface-component.mjs

@@ -1,5 +1,5 @@
-import { Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewContainerRef, inject, reflectComponentType } from "@angular/core";
-import { EVENT_EDGE_UPDATED, EVENT_GROUP_UPDATED, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_PORT_UPDATED, extend, renderSurface, OVERLAY_TYPE_CUSTOM, isGroup, EVENT_INTERNAL_CONNECTION, EVENT_DATA_LOAD_END, ELEMENT_DIV } from "@visuallyjs/browser-ui";
+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, renderSurface, 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";
@@ -11,13 +11,36 @@ import * as i0 from "@angular/core";
 export class SurfaceComponent {
     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 });
+                }
+            }
+        });
     }
-    // $vjsSignals = inject(VisuallyJsSignalService)
     
     getNativeElement(component) {
         return component.location.nativeElement.childNodes[0];
@@ -46,10 +69,16 @@ export class SurfaceComponent {
         this._getComponentThen(info.el, (component) => {
             component.data = params.vertex.data;
             component.$data?.set(component.data);
+            try {
+                ;
+                component.$updateEdges();
+            }
+            catch (e) { }
             if (component.changeDetectorRef) {
                 component.changeDetectorRef.detectChanges();
             }
         }, false);
+        this._maybeUpdateEdgeOverlays(params.vertex);
     }
     portUpdated(params) {
         const info = this.surface.getObjectInfo(params.port, false);
@@ -61,10 +90,14 @@ export class SurfaceComponent {
                 }
             }
         }, true);
+        this._maybeUpdateEdgeOverlays(params.port);
+    }
+    _maybeUpdateEdgeOverlays(vertex) {
+        vertex.getAllEdges().forEach(e => this._handleEdgeUpdate(e.id));
     }
     
-    edgeUpdated(params) {
-        const connection = this.surface.getRenderedConnection(params.edge.id);
+    _handleEdgeUpdate(edgeId) {
+        const connection = this.surface.getRenderedConnection(edgeId);
         if (connection) {
             for (let id in connection.overlays) {
                 const canvas = connection.overlays[id].contentElement;
@@ -77,6 +110,36 @@ export class SurfaceComponent {
         }
     }
     
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
+    edgeAddedRemoved(params) {
+        const info = this.surface.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.surface.getObjectInfo(params.edge.target, false);
+        if (info2.el && info.obj.getFullId() !== info2.obj.getFullId()) {
+            this._getComponentThen(info2.el, (component) => {
+                try {
+                    component.$updateEdges();
+                    if (component.changeDetectorRef) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }
+                catch (e) { }
+            }, false);
+        }
+    }
+    
     _processAngularOverlays(view) {
         const self = this;
         const edgeTypes = view.edges || {};
@@ -108,7 +171,10 @@ export class SurfaceComponent {
                                     angularOverlayComponent.data = edge.data;
                                 }
                                 angularOverlayComponent.model = self.model;
+                                // backwards compat: remove at some point
+                                ;
                                 angularOverlayComponent.surface = self.surface;
+                                angularOverlayComponent.ui = self.surface;
                                 createdComponent.changeDetectorRef.detectChanges();
                                 return el;
                             };
@@ -171,6 +237,7 @@ export class SurfaceComponent {
                 _componentRef.data = data || {};
                 _componentRef.model = model;
                 _componentRef.surface = surface;
+                _componentRef.ui = surface;
                 _componentRef.modelObject = modelObject;
                 // get the reflection data for the component
                 const componentInfo = reflectComponentType(component);
@@ -242,11 +309,17 @@ export class SurfaceComponent {
             model.bind(EVENT_PORT_UPDATED, this.portUpdateFn);
             this.edgeUpdateFn = this.edgeUpdated.bind(this);
             model.bind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
-            if (this.data) {
-                this.model.load({ data: this.data });
+            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 (this.url) {
-                this.model.load({ url: this.url });
+            else if (initialUrl) {
+                this.model.load({ url: initialUrl });
             }
         });
     }
@@ -258,13 +331,15 @@ export class SurfaceComponent {
         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.surface.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { inputModel: ["model", "inputModel"], viewOptions: "viewOptions", renderOptions: "renderOptions", modelOptions: "modelOptions", data: "data", url: "url" }, outputs: { vertexEvent: "vertexEvent" }, 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: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SurfaceComponent, selector: "vjs-surface", 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: "16.2.12", ngImport: i0, type: SurfaceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfaceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "vjs-surface",
@@ -279,10 +354,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], modelOptions: [{
                 type: Input
-            }], data: [{
-                type: Input
-            }], url: [{
-                type: Input
             }], vertexEvent: [{
                 type: Output
             }] } });

package/esm2022/lib/surface-popup-component.mjs

@@ -0,0 +1,62 @@
+import { Component, Input, ContentChild, TemplateRef, ViewChild, inject, signal, computed, ChangeDetectorRef } from "@angular/core";
+import { PopupHandler, CLASS_SURFACE_POPUP } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+
+export class SurfacePopupComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.vjs = inject(VisuallyJsService);
+        this.initialized = false;
+        this.current = signal(null);
+        this.model = this.vjs.model;
+        this.ui = this.vjs.ui;
+        this.display = computed(() => (this.current() == null ? "none" : "block"));
+    }
+    ngAfterViewInit() {
+        this._hideFunction = function () {
+            this.popupHandler?.$hide();
+        }.bind(this);
+        this.vjs.getSurface((surface) => {
+            if (!this.initialized) {
+                this.initialized = true;
+                this.popupHandler = new PopupHandler(this.selector, this.container.nativeElement, surface, (v) => {
+                    this.current.set(v);
+                    requestAnimationFrame(() => this.cdr.detectChanges());
+                }, this.anchor);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.popupHandler) {
+            this.popupHandler.$destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SurfacePopupComponent, selector: "vjs-surface-popup", inputs: { selector: "selector", anchor: "anchor" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "\n    <div #container class=\"vjs-surface-popup\" [style.display]=\"display()\" style=\"position:absolute\">\n      <ng-container *ngIf=\"current()\">\n        <ng-container *ngTemplateOutlet=\"template; context: { vertex: current(), model: model(), ui: ui(), hide:_hideFunction }\"></ng-container>\n      </ng-container>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-surface-popup",
+                    template: `
+    <div #container class="${CLASS_SURFACE_POPUP}" [style.display]="display()" style="position:absolute">
+      <ng-container *ngIf="current()">
+        <ng-container *ngTemplateOutlet="template; context: { vertex: current(), model: model(), ui: ui(), hide:_hideFunction }"></ng-container>
+      </ng-container>
+    </div>
+  `
+                }]
+        }], propDecorators: { selector: [{
+                type: Input,
+                args: [{ required: true }]
+            }], anchor: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], container: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });