@visuallyjs/browser-ui-angular 1.1.3 → 1.2.0

package/esm2022/lib/shape.component.mjs

@@ -1,21 +1,9 @@
-import { Component, ElementRef, inject, Input, } from "@angular/core";
+import { Component, effect, ElementRef, inject, Input, } from "@angular/core";
 import { DEFAULT_LABEL_FILL_RATIO, convertToMultilineText } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 
 export 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];
@@ -30,10 +18,24 @@ export 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) {
@@ -62,7 +64,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

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, inject, Input } from "@angular/core";
+import { Component, effect, ElementRef, inject, Input } from "@angular/core";
 import { ShapePalette, ShapeLibraryDefaults } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -23,25 +23,29 @@ export 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 }); }
@@ -53,7 +57,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

package/esm2022/lib/surface-component.mjs

@@ -17,6 +17,7 @@ export class SurfaceComponent {
         this.$ngZone = inject(NgZone);
         this.$vjs = inject(VisuallyJsService);
     }
+    // $vjsSignals = inject(VisuallyJsSignalService)
     
     getNativeElement(component) {
         return component.location.nativeElement.childNodes[0];
@@ -226,11 +227,9 @@ export 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);
@@ -263,7 +262,7 @@ export 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,
@@ -271,7 +270,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

package/esm2022/lib/vjs-service.mjs

@@ -1,9 +1,15 @@
 import { log, Paper, Surface } from "@visuallyjs/browser-ui";
-import { Injectable } from "@angular/core";
+import { Injectable, signal } from "@angular/core";
 import * as i0 from "@angular/core";
 
 export 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 = [];
@@ -11,7 +17,10 @@ export class VisuallyJsService {
         this.diagramListeners = [];
         this.uiListeners = [];
     }
+    
     $setInspector(i) {
+        this.inspector.set(i);
+        // deprecated from here
         this.$inspector = i;
         this.$notifyInspector();
     }
@@ -27,11 +36,16 @@ export 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 {
@@ -63,11 +77,16 @@ export 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 {
@@ -89,7 +108,17 @@ export 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);
@@ -99,6 +128,7 @@ export class VisuallyJsService {
         }
         this.$notifyDiagram();
     }
+    
     $notifyDiagram() {
         this.diagramListeners.forEach(sl => {
             try {
@@ -130,9 +160,12 @@ export class VisuallyJsService {
     }
     
     $setModel(m) {
+        this.model.set(m);
+        // deprecated below
         this.$model = m;
         this.$notifyModel();
     }
+    
     $notifyModel() {
         this.modelListeners.forEach(sl => {
             try {
@@ -144,6 +177,7 @@ export class VisuallyJsService {
         });
         this.modelListeners.length = 0;
     }
+    
     $notifyUI(ui) {
         this.uiListeners.forEach(sl => {
             try {