@visuallyjs/browser-ui-angular 1.1.4 → 1.2.0

package/fesm2022/visuallyjs-browser-ui-angular.mjs

@@ -1,12 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, Component, Input, ChangeDetectorRef, signal, computed, Directive, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, NgModule } from '@angular/core';
+import { signal, Injectable, inject, ElementRef, effect, Component, Input, ChangeDetectorRef, computed, Directive, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { log, Surface, Paper, MiniviewPlugin, EVENT_ZOOM, EVENT_PORT_UPDATED, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_GROUP_UPDATED, EVENT_DATA_LOAD_END, EVENT_EDGE_UPDATED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, DEFAULT_LABEL_FILL_RATIO, convertToMultilineText, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, Edge, Node, Group, Port, Inspector } from '@visuallyjs/browser-ui';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_ZOOM, EVENT_PORT_UPDATED, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_GROUP_UPDATED, EVENT_DATA_LOAD_END, EVENT_EDGE_UPDATED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
 
 
 class VisuallyJsService {
     constructor() {
+        this.model = signal(null);
+        this.surface = signal(null);
+        this.paper = signal(null);
+        this.diagram = signal(null);
+        this.inspector = signal(null);
+        this.ui = signal(null);
         this.inspectorListeners = [];
         this.surfaceListeners = [];
         this.paperListeners = [];
@@ -14,7 +20,10 @@ class VisuallyJsService {
         this.diagramListeners = [];
         this.uiListeners = [];
     }
+    
     $setInspector(i) {
+        this.inspector.set(i);
+        // deprecated from here
         this.$inspector = i;
         this.$notifyInspector();
     }
@@ -30,11 +39,16 @@ class VisuallyJsService {
         this.inspectorListeners.length = 0;
     }
     $setSurface(s) {
+        this.model.set(s.model);
+        this.surface.set(s);
+        this.ui.set(s);
+        // deprecated from here
         // @ts-ignore
         this.$setModel(s.model);
         this.$surface = s;
         this.$notifySurface();
     }
+    
     $notifySurface() {
         this.surfaceListeners.forEach(sl => {
             try {
@@ -66,11 +80,16 @@ class VisuallyJsService {
         }
     }
     $setPaper(p) {
+        this.model.set(p.model);
+        this.paper.set(p);
+        this.ui.set(p);
+        // deprecated below
         // @ts-ignore
         this.$setModel(p.model);
         this.$paper = p;
         this.$notifyPaper();
     }
+    
     $notifyPaper() {
         this.paperListeners.forEach(sl => {
             try {
@@ -92,7 +111,17 @@ class VisuallyJsService {
             this.paperListeners.push(cb);
         }
     }
+    
     $setDiagram(d) {
+        this.model.set(d.model);
+        this.diagram.set(d);
+        if (d.$ui instanceof Surface) {
+            this.surface.set(d.$ui);
+        }
+        if (d.$ui instanceof Paper) {
+            this.paper.set(d.$ui);
+        }
+        // deprecated below
         this.$diagram = d;
         if (d.$ui instanceof Surface) {
             this.$setSurface(d.$ui);
@@ -102,6 +131,7 @@ class VisuallyJsService {
         }
         this.$notifyDiagram();
     }
+    
     $notifyDiagram() {
         this.diagramListeners.forEach(sl => {
             try {
@@ -133,9 +163,12 @@ class VisuallyJsService {
     }
     
     $setModel(m) {
+        this.model.set(m);
+        // deprecated below
         this.$model = m;
         this.$notifyModel();
     }
+    
     $notifyModel() {
         this.modelListeners.forEach(sl => {
             try {
@@ -147,6 +180,7 @@ class VisuallyJsService {
         });
         this.modelListeners.length = 0;
     }
+    
     $notifyUI(ui) {
         this.uiListeners.forEach(sl => {
             try {
@@ -192,31 +226,29 @@ class MiniviewComponent {
         this.trackSelection = true;
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
-    }
-    
-    ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => {
-            // this.$service.addMiniview(this.surfaceId, {
-            //   container: this.el.nativeElement.childNodes[0],
-            //   elementFilter: this.elementFilter,
-            //   typeFunction: this.typeFunction,
-            //   activeTracking: this.activeTracking,
-            //   clickToCenter: this.clickToCenter !== false
-            // })
-            this.$vjs.getUI((b) => {
-                this.$miniview = b.addPlugin({
-                    type: MiniviewPlugin.type,
-                    options: {
-                        container: this.$el.nativeElement.childNodes[0],
-                        elementFilter: this.elementFilter,
-                        typeFunction: this.typeFunction,
-                        activeTracking: this.activeTracking,
-                        clickToCenter: this.clickToCenter !== false,
-                        showLasso: this.showLasso !== false,
-                        trackSelection: this.trackSelection !== false
-                    },
-                });
-            });
+        this.$ui = this.$vjs.ui;
+        this.initialized = false;
+        effect(() => {
+            if (!this.initialized) {
+                const ui = this.$ui();
+                if (ui != null) {
+                    this.initialized = true;
+                    this.ngZone.runOutsideAngular(() => {
+                        this.$miniview = ui.addPlugin({
+                            type: MiniviewPlugin.type,
+                            options: {
+                                container: this.$el.nativeElement.childNodes[0],
+                                elementFilter: this.elementFilter,
+                                typeFunction: this.typeFunction,
+                                activeTracking: this.activeTracking,
+                                clickToCenter: this.clickToCenter,
+                                showLasso: this.showLasso,
+                                trackSelection: this.trackSelection
+                            },
+                        });
+                    });
+                }
+            }
         });
     }
     
@@ -547,6 +579,7 @@ class SurfaceComponent {
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
     }
+    // $vjsSignals = inject(VisuallyJsSignalService)
     
     getNativeElement(component) {
         return component.location.nativeElement.childNodes[0];
@@ -756,11 +789,9 @@ class SurfaceComponent {
             const renderParams = extend(this.renderOptions || {}, {
                 view: view,
             });
-            let model = new BrowserUIAngularModel(this.modelOptions);
+            let model = this.inputModel || new BrowserUIAngularModel(this.modelOptions);
             this.model = model;
             this.surface = renderSurface(model, self.$el.nativeElement, templateRenderer, renderParams);
-            //this.$service.addSurface(this.surfaceId, this.surface);
-            // new
             this.$vjs.$setSurface(this.surface);
             // ----------------
             this.nodeUpdateFn = this.nodeOrGroupUpdated.bind(this);
@@ -793,7 +824,7 @@ class SurfaceComponent {
         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: { viewOptions: "viewOptions", renderOptions: "renderOptions", modelOptions: "modelOptions", data: "data", url: "url" }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, decorators: [{
             type: Component,
@@ -801,7 +832,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: "vjs-surface",
                     template: `<ng-content></ng-content>`
                 }]
-        }], propDecorators: { viewOptions: [{
+        }], propDecorators: { inputModel: [{
+                type: Input,
+                args: [{ alias: "model" }]
+            }], viewOptions: [{
                 type: Input
             }], renderOptions: [{
                 type: Input
@@ -836,25 +870,29 @@ class ShapePaletteComponent {
         this.dataGenerator = undefined;
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
-    }
-    ngAfterViewInit() {
-        this.$vjs.getUI((ui) => {
-            
-            new ShapePalette(ui, {
-                container: this.$el.nativeElement,
-                initialSet: this.initialSet,
-                dragSize: this.dragSize,
-                iconSize: this.iconSize,
-                fill: this.fill,
-                outline: this.outline,
-                shapeLibrary: ui.getShapeLibrary(),
-                showAllMessage: this.showAllMessage,
-                selectAfterDrop: this.selectAfterDrop,
-                paletteStrokeWidth: this.paletteStrokeWidth,
-                dataGenerator: this.dataGenerator,
-                onVertexAdded: this.onVertexAdded,
-                preparedShapes: this.preparedShapes
-            });
+        this.ui = this.$vjs.ui;
+        this.initialized = false;
+        effect(() => {
+            const ui = this.ui();
+            if (ui != null && !this.initialized) {
+                this.initialized = true;
+                // tslint:disable-next-line:no-unused-expression
+                new ShapePalette(ui, {
+                    container: this.$el.nativeElement,
+                    initialSet: this.initialSet,
+                    dragSize: this.dragSize,
+                    iconSize: this.iconSize,
+                    fill: this.fill,
+                    outline: this.outline,
+                    shapeLibrary: ui.getShapeLibrary(),
+                    showAllMessage: this.showAllMessage,
+                    selectAfterDrop: this.selectAfterDrop,
+                    paletteStrokeWidth: this.paletteStrokeWidth,
+                    dataGenerator: this.dataGenerator,
+                    onVertexAdded: this.onVertexAdded,
+                    preparedShapes: this.preparedShapes
+                });
+            }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -866,7 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `<div></div>`,
                     selector: `vjs-shape-palette`
                 }]
-        }], propDecorators: { initialSet: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { initialSet: [{
                 type: Input
             }], dragSize: [{
                 type: Input
@@ -892,18 +930,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 
 class ShapeComponent {
-    constructor() {
-        
-        this.showLabels = false;
-        
-        this.labelProperty = "label";
-        
-        this.multilineLabels = true;
-        
-        this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
-        this.$el = inject(ElementRef);
-        this.$vjs = inject(VisuallyJsService);
-    }
     _render() {
         if (this.shapeLibrary != null) {
             const svg = this.$el.nativeElement.childNodes[0];
@@ -918,10 +944,24 @@ class ShapeComponent {
             }
         }
     }
-    ngAfterViewInit() {
-        this.$vjs.getUI((b) => {
-            this.shapeLibrary = b.getShapeLibrary();
-            this._render();
+    constructor() {
+        
+        this.showLabels = false;
+        
+        this.labelProperty = "label";
+        
+        this.multilineLabels = true;
+        
+        this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+        this.ui = this.$vjs.ui;
+        effect(() => {
+            const ui = this.ui();
+            if (ui != null && this.shapeLibrary == null) {
+                this.shapeLibrary = ui.getShapeLibrary();
+                this._render();
+            }
         });
     }
     ngOnChanges(changes) {
@@ -950,7 +990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
   ></svg:svg>`,
                     selector: `vjs-shape`,
                 }]
-        }], propDecorators: { obj: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { obj: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -978,6 +1018,15 @@ const CLASS_SELECTED_MODE = "vjs-selected-mode";
 const ATTRIBUTE_HAS_SELECTION = "vjs-controls-has-selection";
 
 class ControlsComponent {
+    updateSelectionState() {
+        const controls = this.getNativeElement(this.$el);
+        if (this.ui().model.getSelection().isEmpty()) {
+            controls.removeAttribute(ATTRIBUTE_HAS_SELECTION);
+        }
+        else {
+            controls.setAttribute(ATTRIBUTE_HAS_SELECTION, "true");
+        }
+    }
     constructor() {
         
         this.undoRedo = true;
@@ -993,43 +1042,37 @@ class ControlsComponent {
         this.buttons = [];
         
         this.orientation = "row";
+        this.initialized = false;
         this.showPanButton = true;
         this.showLassoButton = true;
         this.$vjs = inject(VisuallyJsService);
         this.$el = inject(ElementRef);
         this.$cdr = inject(ChangeDetectorRef);
-    }
-    updateSelectionState() {
-        const controls = this.getNativeElement(this.$el);
-        if (this.ui.model.getSelection().isEmpty()) {
-            controls.removeAttribute(ATTRIBUTE_HAS_SELECTION);
-        }
-        else {
-            controls.setAttribute(ATTRIBUTE_HAS_SELECTION, "true");
-        }
-    }
-    ngOnInit() {
+        this.ui = this.$vjs.ui;
+        this.model = computed(() => this.ui()?.model);
         this.modeButtons = this.buttons.filter((b) => b.mode != null);
         this.otherButtons = this.buttons.filter((b) => b.mode == null);
-        this.$vjs.getUI((ui) => {
-            this.ui = ui;
-            this.showLassoButton = ui.getPlugin(LassoPlugin.type) != null;
-            this.showPanButton = this.showLassoButton === true;
-            this.ui.bind(EVENT_SURFACE_MODE_CHANGED, (mode) => {
-                const controls = this.getNativeElement(this.$el);
-                const modeButtons = this.ui.$getSelector(controls, "[data-mode]");
-                this.ui.removeClass(modeButtons, CLASS_SELECTED_MODE);
-                this.ui.addClass(this.ui.$getSelector(controls, `[data-mode='${mode}']`), CLASS_SELECTED_MODE);
-            });
-            this.ui.model.bind(EVENT_UNDOREDO_UPDATE, (state) => {
-                const controls = this.getNativeElement(this.$el);
-                controls.setAttribute(ATTRIBUTE_CAN_UNDO, state.undoCount > 0 ? TRUE : FALSE);
-                controls.setAttribute(ATTRIBUTE_CAN_REDO, state.redoCount > 0 ? TRUE : FALSE);
-            });
-            this.ui.model.bind(EVENT_SELECT, () => this.updateSelectionState());
-            this.ui.model.bind(EVENT_DESELECT, () => this.updateSelectionState());
-            this.ui.model.bind(EVENT_SELECTION_CLEARED, () => this.updateSelectionState());
-            this.$cdr.detectChanges();
+        effect(() => {
+            const ui = this.ui();
+            if (!this.initialized && ui) {
+                this.showLassoButton = ui.getPlugin(LassoPlugin.type) != null;
+                this.showPanButton = this.showLassoButton === true;
+                this.ui.bind(EVENT_SURFACE_MODE_CHANGED, (mode) => {
+                    const controls = this.getNativeElement(this.$el);
+                    const modeButtons = ui.$getSelector(controls, "[data-mode]");
+                    ui.removeClass(modeButtons, CLASS_SELECTED_MODE);
+                    ui.addClass(ui.$getSelector(controls, `[data-mode='${mode}']`), CLASS_SELECTED_MODE);
+                });
+                ui.model.bind(EVENT_UNDOREDO_UPDATE, (state) => {
+                    const controls = this.getNativeElement(this.$el);
+                    controls.setAttribute(ATTRIBUTE_CAN_UNDO, state.undoCount > 0 ? TRUE : FALSE);
+                    controls.setAttribute(ATTRIBUTE_CAN_REDO, state.redoCount > 0 ? TRUE : FALSE);
+                });
+                ui.model.bind(EVENT_SELECT, () => this.updateSelectionState());
+                ui.model.bind(EVENT_DESELECT, () => this.updateSelectionState());
+                ui.model.bind(EVENT_SELECTION_CLEARED, () => this.updateSelectionState());
+                this.$cdr.detectChanges();
+            }
         });
     }
     getNativeElement(component) {
@@ -1038,35 +1081,36 @@ class ControlsComponent {
             component.location.nativeElement).childNodes[0];
     }
     panMode() {
-        this.ui.setMode(SURFACE_MODE_PAN);
+        this.ui().setMode(SURFACE_MODE_PAN);
     }
     selectMode() {
-        this.ui.setMode(SURFACE_MODE_SELECT);
+        this.ui().setMode(SURFACE_MODE_SELECT);
     }
     zoomToFit() {
-        this.ui.model.clearSelection();
-        this.ui.zoomToFit();
+        this.model().clearSelection();
+        this.ui().zoomToFit();
     }
     zoomIn() {
-        this.ui.zoomIn();
+        this.ui().zoomIn();
     }
     zoomOut() {
-        this.ui.zoomOut();
+        this.ui().zoomOut();
     }
     resetSelection() {
-        this.ui.model.clearSelection();
-        if (supportsPathEditing(this.ui)) {
-            this.ui.stopEditingPath();
+        const ui = this.ui();
+        this.model().clearSelection();
+        if (supportsPathEditing(ui)) {
+            ui.stopEditingPath();
         }
     }
     undo() {
-        this.ui.model.undo();
+        this.model()?.undo();
     }
     redo() {
-        this.ui.model.redo();
+        this.model()?.redo();
     }
     doClear() {
-        const t = this.ui.model;
+        const t = this.model();
         if ((t.getNodeCount() === 0 && t.getGroupCount() === 0) ||
             confirm(this.clearMessage)) {
             t.clear();
@@ -1116,7 +1160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     <i *ngFor="let button of otherButtons" class="{{ button.class }}" title="{{ button.title }}"></i>
   </div>`,
                 }]
-        }], propDecorators: { undoRedo: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { undoRedo: [{
                 type: Input
             }], zoomToExtents: [{
                 type: Input
@@ -1134,28 +1178,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 
 class EdgeTypePickerComponent {
+    resolveMappings() {
+        const mappings = this.edgeMappings || this._inspector().getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
+        return mappings || this._inspector().$ui.$getEdgePropertyMappings();
+    }
     constructor(el) {
         this.el = el;
         
         this.changeEvent = new EventEmitter();
         this.$vjs = inject(VisuallyJsService);
-    }
-    resolveMappings() {
-        const mappings = this.edgeMappings || this.inspector.getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
-        return mappings || this.inspector.$ui.$getEdgePropertyMappings();
-    }
-    ngAfterViewInit() {
-        this.$vjs.getInspector(inspector => {
-            this.inspector = inspector;
-            this.inspector.onChange(() => {
-                this.edgeTypePicker.select(this.propertyName, this.inspector.getValue(this.propertyName));
-            });
-            const current = this.inspector.getValue(this.propertyName) || '';
-            this.edgeTypePicker = new EdgeTypePicker(this.inspector.$ui, this.el.nativeElement, this.resolveMappings(), current, (p, v) => {
-                this.inspector.setValue(this.propertyName, v);
-                this.changeEvent.emit(v);
-            });
-            this.edgeTypePicker.render(this.propertyName, this.inspector._currentCommonData);
+        this._inspector = this.$vjs.inspector;
+        this.initialised = false;
+        effect(() => {
+            if (!this.initialised) {
+                const inspector = this._inspector();
+                if (inspector != null) {
+                    this.initialised = true;
+                    inspector.onChange(() => {
+                        this.edgeTypePicker.select(this.propertyName, inspector.getValue(this.propertyName));
+                    });
+                    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);
+                        this.changeEvent.emit(v);
+                    });
+                    this.edgeTypePicker.render(this.propertyName, inspector._currentCommonData);
+                }
+            }
         });
     }
     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 }); }
@@ -1180,42 +1229,47 @@ class PaletteComponent {
     constructor() {
         this.$vjs = inject(VisuallyJsService);
         this.$el = inject(ElementRef);
-    }
-    
-    ngAfterViewInit() {
-        this.$vjs.getSurface((surface) => {
-            let self = this;
-            let params = {
-                source: self.$el.nativeElement,
-                selector: self.selector,
-                allowDropOnEdge: this.allowDropOnEdge,
-                allowDropOnCanvas: this.allowDropOnCanvas,
-                allowDropOnGroup: this.allowDropOnGroup,
-                allowDropOnNode: this.allowDropOnNode,
-                mode: this.mode,
-                selectAfterAdd: this.selectAfterAdd,
-                allowClickToAdd: this.allowClickToAdd,
-                clickToAddOnly: this.clickToAddOnly
-            };
-            if (this.dataGenerator != null) {
-                params.dataGenerator = this.dataGenerator;
-            }
-            if (this.typeGenerator != null) {
-                params.typeGenerator = this.typeGenerator;
-            }
-            if (this.groupIdentifier != null) {
-                params.groupIdentifier = this.groupIdentifier;
-            }
-            if (this.onVertexAdded != null) {
-                params.onVertexAdded = this.onVertexAdded;
-            }
-            if (this.dragSize != null) {
-                params.dragSize = this.dragSize;
-            }
-            if (this.canvasDropFilter != null) {
-                params.canvasDropFilter = this.canvasDropFilter;
+        this.$surface = this.$vjs.surface;
+        this.initialized = false;
+        effect(() => {
+            if (!this.initialized) {
+                const surface = this.$surface();
+                if (surface != null) {
+                    this.initialized = true;
+                    let self = this;
+                    let params = {
+                        source: self.$el.nativeElement,
+                        selector: self.selector,
+                        allowDropOnEdge: this.allowDropOnEdge,
+                        allowDropOnCanvas: this.allowDropOnCanvas,
+                        allowDropOnGroup: this.allowDropOnGroup,
+                        allowDropOnNode: this.allowDropOnNode,
+                        mode: this.mode,
+                        selectAfterAdd: this.selectAfterAdd,
+                        allowClickToAdd: this.allowClickToAdd,
+                        clickToAddOnly: this.clickToAddOnly
+                    };
+                    if (this.dataGenerator != null) {
+                        params.dataGenerator = this.dataGenerator;
+                    }
+                    if (this.typeGenerator != null) {
+                        params.typeGenerator = this.typeGenerator;
+                    }
+                    if (this.groupIdentifier != null) {
+                        params.groupIdentifier = this.groupIdentifier;
+                    }
+                    if (this.onVertexAdded != null) {
+                        params.onVertexAdded = this.onVertexAdded;
+                    }
+                    if (this.dragSize != null) {
+                        params.dragSize = this.dragSize;
+                    }
+                    if (this.canvasDropFilter != null) {
+                        params.canvasDropFilter = this.canvasDropFilter;
+                    }
+                    this.palette = new Palette(surface, params);
+                }
             }
-            this.palette = new Palette(surface, params);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1226,7 +1280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     selector: "[vjs-palette]",
                 }]
-        }], propDecorators: { selector: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { selector: [{
                 type: Input
             }], dataGenerator: [{
                 type: Input
@@ -1274,20 +1328,18 @@ class ExportControlsComponent {
         // new
         this.$vjs = inject(VisuallyJsService);
         this.$el = inject(ElementRef);
-    }
-    ngOnInit() {
-        this.$vjs.getUI((b) => {
-            this.ui = b;
-        });
+        
+        this.ui = this.$vjs.ui;
+        this.model = computed(() => this.ui()?.model);
     }
     exportSVG() {
-        new SvgExportUI(this.ui).export(this.svgOptions);
+        new SvgExportUI(this.ui()).export(this.svgOptions);
     }
     exportPNG() {
-        new ImageExportUI(this.ui).export(this.imageOptions);
+        new ImageExportUI(this.ui()).export(this.imageOptions);
     }
     exportJPG() {
-        new ImageExportUI(this.ui).export(Object.assign(this.imageOptions || {}, {
+        new ImageExportUI(this.ui()).export(Object.assign(this.imageOptions || {}, {
             type: "image/jpeg",
         }));
     }
@@ -1340,9 +1392,39 @@ class ColorPickerComponent {
         this.$vjs = inject(VisuallyJsService);
         this.$el = inject(ElementRef);
         this.$cdr = inject(ChangeDetectorRef);
+        this.initialized = false;
+        effect(() => {
+            const i = this.$vjs.inspector();
+            if (!this.initialized) {
+                this.initialized = true;
+                this.swatches.set(i.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, () => []));
+                i.bind(EVENT_CONTEXT_UPDATE, (p) => {
+                    if (p.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
+                        this.swatches.set(p.value);
+                        this.$cdr.detectChanges();
+                    }
+                });
+                const colorInput = this.$el.nativeElement.querySelector("[type='color']");
+                colorInput.onchange = () => {
+                    const color = colorInput.value;
+                    this.pushColor(color);
+                    i.setValue(this.propertyName, color, true);
+                };
+                setTimeout(() => {
+                    // if there is a color, maybe push to context
+                    const v = i.getValue(this.propertyName);
+                    if (v != null) {
+                        this.pushColor(v);
+                    }
+                });
+            }
+        });
     }
     $getInspector(cb) {
-        this.$vjs.getInspector(cb);
+        const i = this.$vjs.inspector();
+        if (i != null) {
+            cb(i);
+        }
     }
     selectColor(color) {
         this.$getInspector(inspector => {
@@ -1365,30 +1447,6 @@ class ColorPickerComponent {
             }
         });
     }
-    ngAfterViewInit() {
-        this.$getInspector(inspector => {
-            this.swatches.set(inspector.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, () => []));
-            inspector.bind(EVENT_CONTEXT_UPDATE, (p) => {
-                if (p.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
-                    this.swatches.set(p.value);
-                    this.$cdr.detectChanges();
-                }
-            });
-            const colorInput = this.$el.nativeElement.querySelector("[type='color']");
-            colorInput.onchange = () => {
-                const color = colorInput.value;
-                this.pushColor(color);
-                inspector.setValue(this.propertyName, color, true);
-            };
-            setTimeout(() => {
-                // if there is a color, maybe push to context
-                const v = inspector.getValue(this.propertyName);
-                if (v != null) {
-                    this.pushColor(v);
-                }
-            });
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, selector: "vjs-color", inputs: { propertyName: "propertyName", maxColors: "maxColors" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: "<div class=\"vjs-color-picker\">\n    <input type=\"color\" [attr.vjs-att]=\"propertyName\"/>\n    <div class=\"vjs-color-picker-swatches\">\n      <div *ngFor=\"let swatch of swatches()\" class=\"vjs-color-picker-swatch\" attr.data-color=\"{{swatch}}\" style=\"background-color:{{swatch}}\" (click)=\"selectColor(swatch)\"></div>\n    </div>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
@@ -1403,7 +1461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </div>
   </div>`
                 }]
-        }], propDecorators: { propertyName: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { propertyName: [{
                 type: Input
             }], maxColors: [{
                 type: Input
@@ -1460,17 +1518,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class ColumnChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
-    }
+
+class SeriesBasedChartComponent {
     _init(dataSource, data, url) {
         this.$ngZone.runOutsideAngular(() => {
             const o = Object.assign({}, this.options);
             Object.assign(o, { dataSource });
-            this.chart = new ColumnChart(this.$el.nativeElement, o);
+            this.chart = this.createChart(this.$el.nativeElement, o);
             if (data) {
                 this.chart.load({ data });
             }
@@ -1479,22 +1533,50 @@ class ColumnChartComponent {
             }
         });
     }
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+        effect(() => {
+            if (this.useModel && this.chart == null) {
+                const m = this.$vjs.model();
+                if (m != null) {
+                    this._init(m, null, null);
+                }
+            }
+        });
+    }
     
     ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
+        if (!this.useModel) {
             this._init(null, this.data, this.url);
         }
     }
     ngOnDestroy() {
         this.chart?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SeriesBasedChartComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], useModel: [{
+                type: Input
+            }] } });
+
+
+class ColumnChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new ColumnChart(el, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChartComponent, selector: "vjs-column-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChartComponent, decorators: [{
             type: Component,
@@ -1512,41 +1594,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class BarChartComponent {
-    constructor() {
-        this.$vjs = inject(VisuallyJsService);
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new BarChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class BarChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new BarChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BarChartComponent, selector: "vjs-bar-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BarChartComponent, decorators: [{
             type: Component,
@@ -1564,44 +1618,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+
 class DiagramPaletteComponent {
+    $init(diagram) {
+        if (!this.initialized) {
+            
+            new DiagramPalette(this.$el.nativeElement, diagram, {
+                fill: this.fill,
+                outline: this.outline,
+                dragSize: this.dragSize,
+                inspector: this.inspector,
+                iconSize: this.iconSize,
+                showLabels: this.showLabels,
+                paletteStrokeWidth: this.paletteStrokeWidth,
+                showAllMessage: this.showAllMessage,
+                onCellAdded: this.onCellAdded,
+                mode: this.mode,
+                allowClickToAdd: this.allowClickToAdd,
+                autoExitDrawMode: this.autoExitDrawMode,
+                selectAfterAdd: this.selectAfterAdd,
+                onVertexAdded: this.onVertexAdded,
+                preparedShapes: this.preparedShapes
+            });
+        }
+    }
     constructor() {
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
-    }
-    $init() {
-        
-        new DiagramPalette(this.$el.nativeElement, this.diagram, {
-            fill: this.fill,
-            outline: this.outline,
-            dragSize: this.dragSize,
-            inspector: this.inspector,
-            iconSize: this.iconSize,
-            showLabels: this.showLabels,
-            paletteStrokeWidth: this.paletteStrokeWidth,
-            showAllMessage: this.showAllMessage,
-            onCellAdded: this.onCellAdded,
-            mode: this.mode,
-            allowClickToAdd: this.allowClickToAdd,
-            autoExitDrawMode: this.autoExitDrawMode,
-            selectAfterAdd: this.selectAfterAdd,
-            onVertexAdded: this.onVertexAdded,
-            preparedShapes: this.preparedShapes
+        this.initialized = false;
+        effect(() => {
+            const d = this.$vjs.diagram();
+            if (d != null) {
+                this.$init(d);
+            }
         });
     }
     ngAfterViewInit() {
-        if (this.diagram != null) {
-            this.$init();
-        }
-        else {
-            this.$vjs.getDiagram((d) => {
-                this.diagram = d;
-                this.$init();
-            });
+        if (this.inputDiagram != null) {
+            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", diagram: "diagram", onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
             type: Component,
@@ -1609,7 +1667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: "vjs-diagram-palette",
                     template: `<div></div>`,
                 }]
-        }], propDecorators: { fill: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { fill: [{
                 type: Input
             }], outline: [{
                 type: Input
@@ -1635,36 +1693,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], selectAfterAdd: [{
                 type: Input
-            }], diagram: [{
-                type: Input
+            }], inputDiagram: [{
+                type: Input,
+                args: [{ alias: "diagram" }]
             }], onVertexAdded: [{
                 type: Input
             }], preparedShapes: [{
                 type: Input
             }] } });
 
-class XYChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-    }
-    
-    ngAfterViewInit() {
-        this.$ngZone.runOutsideAngular(() => {
-            this.chart = new CategoryValueChart(this.$el.nativeElement, this.options);
-            if (this.data) {
-                this.chart.load({ data: this.data });
-            }
-            else if (this.url) {
-                this.chart.load({ url: this.url });
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class XYChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new CategoryValueChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: XYChartComponent, selector: "vjs-xy-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: XYChartComponent, decorators: [{
             type: Component,
@@ -1678,43 +1722,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], options: [{
                 type: Input
+            }], useModel: [{
+                type: Input
             }] } });
 
-class LineChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new LineChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class LineChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new LineChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LineChartComponent, selector: "vjs-line-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineChartComponent, decorators: [{
             type: Component,
@@ -1732,41 +1750,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class AreaChartComponent {
-    constructor() {
-        this.$vjs = inject(VisuallyJsService);
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new AreaChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class AreaChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new AreaChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AreaChartComponent, selector: "vjs-area-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AreaChartComponent, decorators: [{
             type: Component,
@@ -1784,41 +1774,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class PieChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new PieChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class PieChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new PieChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PieChartComponent, selector: "vjs-pie-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PieChartComponent, decorators: [{
             type: Component,
@@ -1836,41 +1798,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class ScatterChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new ScatterChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class ScatterChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new ScatterChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScatterChartComponent, selector: "vjs-scatter-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScatterChartComponent, decorators: [{
             type: Component,
@@ -1888,41 +1822,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class BubbleChartComponent {
-    constructor() {
-        this.$el = inject(ElementRef);
-        this.$ngZone = inject(NgZone);
-        this.$vjs = inject(VisuallyJsService);
-    }
-    _init(dataSource, data, url) {
-        this.$ngZone.runOutsideAngular(() => {
-            const o = Object.assign({}, this.options);
-            Object.assign(o, { dataSource });
-            this.chart = new BubbleChart(this.$el.nativeElement, o);
-            if (data) {
-                this.chart.load({ data });
-            }
-            else if (url) {
-                this.chart.load({ url });
-            }
-        });
-    }
-    
-    ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null);
-            });
-        }
-        else {
-            this._init(null, this.data, this.url);
-        }
-    }
-    ngOnDestroy() {
-        this.chart?.destroy();
+
+class BubbleChartComponent extends SeriesBasedChartComponent {
+    createChart(el, options) {
+        return new BubbleChart(el, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BubbleChartComponent, selector: "vjs-bubble-chart", inputs: { data: "data", url: "url", options: "options", useModel: "useModel" }, usesInheritance: true, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BubbleChartComponent, decorators: [{
             type: Component,
@@ -1940,11 +1846,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+
 class SankeyChartComponent {
     constructor() {
         this.$el = inject(ElementRef);
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
+        effect(() => {
+            if (this.useModel && this.chart == null) {
+                const m = this.$vjs.model();
+                if (m != null) {
+                    this._init(m, null, null, null);
+                }
+            }
+        });
     }
     
     _init(dataSource, csvData, jsonData, url) {
@@ -1967,12 +1882,7 @@ class SankeyChartComponent {
     }
     
     ngAfterViewInit() {
-        if (this.useModel) {
-            this.$vjs.getModel((p) => {
-                this._init(p, null, null, null);
-            });
-        }
-        else {
+        if (!this.useModel) {
             this._init(null, this.csvData, this.jsonData, this.url);
         }
     }
@@ -1995,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: "vjs-sankey-chart",
                     template: `<div></div>`
                 }]
-        }], propDecorators: { csvData: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { csvData: [{
                 type: Input
             }], jsonData: [{
                 type: Input
@@ -2191,32 +2101,34 @@ class InspectorComponent {
         this.changeDetector = inject(ChangeDetectorRef);
         
         this.el = inject(ElementRef);
-        // new
         this.$vjs = inject(VisuallyJsService);
-    }
-    
-    ngAfterViewInit() {
-        this.$vjs.getUI((ui) => {
-            this.ui = ui;
-            this.inspector = new Inspector({
-                context: this.context,
-                container: this.el.nativeElement,
-                cssClass: this.cssClass,
-                showCloseButton: this.showCloseButton,
-                ui,
-                renderEmptyContainer: () => {
-                    this.reset();
-                    this.changeDetector.detectChanges();
-                },
-                refresh: (obj, cb) => {
-                    this.currentObj = obj;
-                    this.refresh(obj);
-                    setTimeout(cb, 0);
-                    this.changeDetector.detectChanges();
-                },
-                afterUpdate: () => this.afterUpdate(ui),
-            });
-            this.$vjs.$setInspector(this.inspector);
+        this.ui = this.$vjs.ui;
+        this.model = computed(() => this.ui()?.model);
+        this.initialized = false;
+        effect(() => {
+            const ui = this.ui();
+            if (!this.initialized && ui != null) {
+                this.initialized = true;
+                this.inspector = new Inspector({
+                    context: this.context,
+                    container: this.el.nativeElement,
+                    cssClass: this.cssClass,
+                    showCloseButton: this.showCloseButton,
+                    ui,
+                    renderEmptyContainer: () => {
+                        this.reset();
+                        this.changeDetector.detectChanges();
+                    },
+                    refresh: (obj, cb) => {
+                        this.currentObj = obj;
+                        this.refresh(obj);
+                        setTimeout(cb, 0);
+                        this.changeDetector.detectChanges();
+                    },
+                    afterUpdate: () => this.afterUpdate(ui),
+                });
+                this.$vjs.$setInspector(this.inspector);
+            }
         });
     }
     
@@ -2236,7 +2148,7 @@ class InspectorComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, decorators: [{
             type: Directive
-        }], propDecorators: { cssClass: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { cssClass: [{
                 type: Input
             }], showCloseButton: [{
                 type: Input
@@ -2245,8 +2157,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 
+function useZoom() {
+    const $vjs = inject(VisuallyJsService);
+    const surface = $vjs.surface;
+    const zoom = signal(1);
+    effect(() => {
+        const s = surface();
+        if (s != null) {
+            const zoomListener = (p) => {
+                zoom.set(p.zoom);
+            };
+            s.bind(EVENT_ZOOM, zoomListener);
+            zoom.set(s.getZoom());
+            return () => {
+                s.unbind(EVENT_ZOOM, zoomListener);
+            };
+        }
+        return;
+    });
+    return zoom;
+}
+
+
+function useVisuallyJsUpdate(callback) {
+    const $vjs = inject(VisuallyJsService);
+    effect(() => {
+        const m = $vjs.model();
+        if (m != null) {
+            const fn = () => callback(m);
+            m.bind(EVENT_DATA_UPDATED, fn);
+            m.bind(EVENT_GRAPH_CLEARED, fn);
+            fn();
+            return (() => {
+                m.unbind(EVENT_DATA_UPDATED, fn);
+                m.unbind(EVENT_GRAPH_CLEARED, fn);
+            });
+        }
+        return;
+    });
+}
+
+
 
 
 
-export { AngularComponentOverlayType, AreaChartComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent };
+export { AngularComponentOverlayType, AreaChartComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
 //# sourceMappingURL=visuallyjs-browser-ui-angular.mjs.map