@visuallyjs/browser-ui-angular 1.1.3 → 1.2.0

package/esm2022/lib/controls-component.mjs

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, } from "@angular/core";
+import { ChangeDetectorRef, Component, computed, effect, ElementRef, inject, Input } from "@angular/core";
 import { EVENT_UNDOREDO_UPDATE, EVENT_SURFACE_MODE_CHANGED, FALSE, TRUE, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, LASSO_PATH, LASSO_VIEW_BOX, PAN_PATH, PAN_VIEW_BOX, LassoPlugin, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, RESET_SELECTION_PATH, RESET_SELECTION_VIEW_BOX, CLEAR_PATH, CLEAR_VIEW_BOX, CLASS_CONTROLS_RESET_SELECTION, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, supportsPathEditing } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -9,6 +9,15 @@ const CLASS_SELECTED_MODE = "vjs-selected-mode";
 const ATTRIBUTE_HAS_SELECTION = "vjs-controls-has-selection";
 
 export 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;
@@ -24,43 +33,37 @@ export 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) {
@@ -69,35 +72,36 @@ export 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();
@@ -147,7 +151,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

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

@@ -1,45 +1,49 @@
 import { DiagramPalette } from "@visuallyjs/browser-ui";
-import { Component, ElementRef, inject, Input } from "@angular/core";
+import { Component, effect, ElementRef, inject, Input } from "@angular/core";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
+
 export 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,
@@ -47,7 +51,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
@@ -73,8 +77,9 @@ 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: [{

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

@@ -1,31 +1,36 @@
-import { Component, Input, Output, EventEmitter, inject } from "@angular/core";
+import { Component, Input, Output, EventEmitter, inject, effect } from "@angular/core";
 import { INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 
 export 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 }); }

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, inject, Input, } from "@angular/core";
+import { Component, computed, ElementRef, inject, Input, } from "@angular/core";
 import { CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, ImageExportUI, SvgExportUI, } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -19,20 +19,18 @@ export 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",
         }));
     }

package/esm2022/lib/hooks/use-visuallyjs-update.mjs

@@ -0,0 +1,21 @@
+import { EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from "@visuallyjs/browser-ui";
+import { effect, inject } from "@angular/core";
+import { VisuallyJsService } from "../vjs-service";
+
+export 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;
+    });
+}

package/esm2022/lib/hooks/use-zoom.mjs

@@ -0,0 +1,24 @@
+import { EVENT_ZOOM } from "@visuallyjs/browser-ui";
+import { effect, signal, inject } from "@angular/core";
+import { VisuallyJsService } from "../vjs-service";
+
+export 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;
+}

package/esm2022/lib/inspector.component.mjs

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, Input, inject, Directive, } from "@angular/core";
+import { ChangeDetectorRef, ElementRef, Input, inject, Directive, computed, effect, } from "@angular/core";
 import { Inspector, Edge, Node, Group, Port } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -23,32 +23,34 @@ export 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);
+            }
         });
     }
     
@@ -68,7 +70,7 @@ export 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

package/esm2022/lib/miniview-component.mjs

@@ -1,4 +1,4 @@
-import { Component, ElementRef, inject, Input } from "@angular/core";
+import { Component, effect, ElementRef, inject, Input } from "@angular/core";
 import { MiniviewPlugin } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -10,31 +10,35 @@ export class MiniviewComponent {
         this.activeTracking = true;
         
         this.clickToCenter = true;
+        
+        this.showLasso = true;
+        
+        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
-                    },
-                });
-            });
+        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
+                            },
+                        });
+                    });
+                }
+            }
         });
     }
     
@@ -44,7 +48,7 @@ export class MiniviewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter", showLasso: "showLasso", trackSelection: "trackSelection" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, decorators: [{
             type: Component,
@@ -60,4 +64,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], clickToCenter: [{
                 type: Input
+            }], showLasso: [{
+                type: Input
+            }], trackSelection: [{
+                type: Input
             }] } });

package/esm2022/lib/palette.component.mjs

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, inject, Input } from "@angular/core";
+import { Directive, effect, ElementRef, inject, Input } from "@angular/core";
 import { Palette, } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -7,42 +7,47 @@ export 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 }); }
@@ -53,7 +58,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