@visuallyjs/browser-ui-angular 1.2.1 → 1.2.2

package/esm2022/index.mjs

@@ -37,3 +37,7 @@ export * from './lib/charts/bubble.chart.component';
 export * from './lib/charts/sankey.chart.component';
 export * from './lib/hooks/use-zoom';
 export * from './lib/hooks/use-visuallyjs-update';
+export * from './lib/background.component';
+export * from './lib/image-background.component';
+export * from './lib/tiled-image-background.component';
+export * from './lib/grid-background.component';

package/esm2022/lib/background.component.mjs

@@ -0,0 +1,38 @@
+import { inject, Component, effect, Input } from "@angular/core";
+import { BackgroundPlugin, log } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+export class BackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._bg = null;
+        this._optionsEffect = effect(() => {
+            if (this.options != null) {
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                this._bg = s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: this.options
+                });
+            }
+            catch (e) {
+                log(`WARN: BackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BackgroundComponent, selector: "vjs-background", inputs: { options: "options" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { options: [{
+                type: Input
+            }] } });

package/esm2022/lib/browser-ui-angular.module.mjs

@@ -26,6 +26,10 @@ import { SankeyChartComponent } from "./charts/sankey.chart.component";
 import { DecoratorComponent } from "./decorator-component";
 import { SurfacePopupComponent } from "./surface-popup-component";
 import { PaperComponent } from "./paper-component";
+import { BackgroundComponent } from "./background.component";
+import { ImageBackgroundComponent } from "./image-background.component";
+import { TiledImageBackgroundComponent } from "./tiled-image-background.component";
+import { GridBackgroundComponent } from "./grid-background.component";
 import * as i0 from "@angular/core";
 
 export class VisuallyJsModule {
@@ -56,7 +60,11 @@ export class VisuallyJsModule {
             BubbleChartComponent,
             SankeyChartComponent,
             DecoratorComponent,
-            SurfacePopupComponent], imports: [CommonModule], exports: [MiniviewComponent,
+            SurfacePopupComponent,
+            BackgroundComponent,
+            ImageBackgroundComponent,
+            GridBackgroundComponent,
+            TiledImageBackgroundComponent], imports: [CommonModule], exports: [MiniviewComponent,
             SurfaceComponent,
             PaperComponent,
             PaletteComponent,
@@ -78,7 +86,11 @@ export class VisuallyJsModule {
             BubbleChartComponent,
             SankeyChartComponent,
             DecoratorComponent,
-            SurfacePopupComponent] }); }
+            SurfacePopupComponent,
+            BackgroundComponent,
+            ImageBackgroundComponent,
+            GridBackgroundComponent,
+            TiledImageBackgroundComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, decorators: [{
@@ -112,7 +124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BubbleChartComponent,
                         SankeyChartComponent,
                         DecoratorComponent,
-                        SurfacePopupComponent
+                        SurfacePopupComponent,
+                        BackgroundComponent,
+                        ImageBackgroundComponent,
+                        GridBackgroundComponent,
+                        TiledImageBackgroundComponent
                     ],
                     exports: [
                         MiniviewComponent,
@@ -137,7 +153,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BubbleChartComponent,
                         SankeyChartComponent,
                         DecoratorComponent,
-                        SurfacePopupComponent
+                        SurfacePopupComponent,
+                        BackgroundComponent,
+                        ImageBackgroundComponent,
+                        GridBackgroundComponent,
+                        TiledImageBackgroundComponent
                     ]
                 }]
         }] });

package/esm2022/lib/grid-background.component.mjs

@@ -0,0 +1,77 @@
+import { inject, Component, Input } from "@angular/core";
+import { BackgroundPlugin, GeneratedGridBackground, log } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class GridBackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._bg = null;
+    }
+    _getOptions() {
+        return {
+            type: GeneratedGridBackground.type,
+            grid: this.grid,
+            showBorder: this.showBorder,
+            minWidth: this.minWidth,
+            minHeight: this.minHeight,
+            showTickMarks: this.showTickMarks,
+            tickMarksPerCell: this.tickMarksPerCell,
+            maxWidth: this.maxWidth,
+            maxHeight: this.maxHeight,
+            autoShrink: this.autoShrink,
+            gridType: this.gridType,
+            dotRadius: this.dotRadius,
+            tickDotRadius: this.tickDotRadius,
+            visible: this.visible
+        };
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                this._bg = s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: this._getOptions()
+                });
+            }
+            catch (e) {
+                log(`WARN: GridBackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: GridBackgroundComponent, selector: "vjs-grid-background", inputs: { grid: "grid", showBorder: "showBorder", minWidth: "minWidth", minHeight: "minHeight", showTickMarks: "showTickMarks", tickMarksPerCell: "tickMarksPerCell", maxWidth: "maxWidth", maxHeight: "maxHeight", autoShrink: "autoShrink", gridType: "gridType", dotRadius: "dotRadius", tickDotRadius: "tickDotRadius", visible: "visible" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GridBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-grid-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], showBorder: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], minHeight: [{
+                type: Input
+            }], showTickMarks: [{
+                type: Input
+            }], tickMarksPerCell: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], autoShrink: [{
+                type: Input
+            }], gridType: [{
+                type: Input
+            }], dotRadius: [{
+                type: Input
+            }], tickDotRadius: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }] } });

package/esm2022/lib/image-background.component.mjs

@@ -0,0 +1,38 @@
+import { inject, Component, Input } from "@angular/core";
+import { BackgroundPlugin, log, SimpleBackground } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class ImageBackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                // tslint:disable-next-line:no-unused-expression
+                s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: {
+                        type: SimpleBackground.type,
+                        url: this.url
+                    }
+                });
+            }
+            catch (e) {
+                log(`WARN: ImageBackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageBackgroundComponent, selector: "vjs-image-background", inputs: { url: "url" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-image-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { url: [{
+                type: Input
+            }] } });

package/esm2022/lib/overlay-component.mjs

@@ -1,4 +1,6 @@
-import { ChangeDetectorRef, inject } from "@angular/core";
+import { EVENT_EDGE_UPDATED, EVENT_GROUP_UPDATED, EVENT_NODE_UPDATED, EVENT_PORT_UPDATED } from "@visuallyjs/browser-ui";
+import { ChangeDetectorRef, inject, Injectable, signal } from "@angular/core";
+import * as i0 from "@angular/core";
 
 export const AngularComponentOverlayType = "AngularComponent";
 
@@ -6,6 +8,50 @@ export class BaseAngularOverlayComponent {
     constructor() {
         
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        
+        this.$edgeData = signal({});
+        
+        this.$sourceData = signal({});
+        
+        this.$targetData = signal({});
+    }
+    ngOnInit() {
+        this.$edgeData.set(this.edge.data);
+        this.$sourceData.set(this.edge.source.data);
+        this.$targetData.set(this.edge.target.data);
+        this._edgeUpdate = (p) => {
+            if (p.edge.id === this.edge.id) {
+                this.$edgeData.set({ ...p.edge.data });
+                this.$sourceData.set({ ...p.edge.source.data });
+                this.$targetData.set({ ...p.edge.target.data });
+            }
+        };
+        this._vertexUpdate = (p) => {
+            if (p.vertex === this.edge.source) {
+                this.$sourceData.set({ ...p.vertex.data });
+            }
+            if (p.vertex === this.edge.target) {
+                this.$targetData.set({ ...p.vertex.data });
+            }
+        };
+        this._portUpdate = (p) => {
+            if (p.port === this.edge.source) {
+                this.$sourceData.set({ ...p.port.data });
+            }
+            if (p.port === this.edge.target) {
+                this.$targetData.set({ ...p.port.data });
+            }
+        };
+        this.model.bind(EVENT_EDGE_UPDATED, this._edgeUpdate);
+        this.model.bind(EVENT_NODE_UPDATED, this._vertexUpdate);
+        this.model.bind(EVENT_GROUP_UPDATED, this._vertexUpdate);
+        this.model.bind(EVENT_PORT_UPDATED, this._portUpdate);
+    }
+    ngOnDestroy() {
+        this.model.unbind(EVENT_EDGE_UPDATED, this._edgeUpdate);
+        this.model.unbind(EVENT_NODE_UPDATED, this._vertexUpdate);
+        this.model.unbind(EVENT_GROUP_UPDATED, this._vertexUpdate);
+        this.model.unbind(EVENT_PORT_UPDATED, this._portUpdate);
     }
     
     updateEdge(updates) {
@@ -15,4 +61,9 @@ export class BaseAngularOverlayComponent {
     removeEdge() {
         this.model.removeEdge(this.edge);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BaseAngularOverlayComponent, decorators: [{
+            type: Injectable
+        }] });

package/esm2022/lib/paper-component.mjs

@@ -73,6 +73,7 @@ export class PaperComponent {
                 component.changeDetectorRef.detectChanges();
             }
         }, false);
+        this._maybeUpdateEdgeOverlays(params.vertex);
     }
     portUpdated(params) {
         const info = this.paper.getObjectInfo(params.port, false);
@@ -84,10 +85,14 @@ export class PaperComponent {
                 }
             }
         }, true);
+        this._maybeUpdateEdgeOverlays(params.port);
+    }
+    _maybeUpdateEdgeOverlays(vertex) {
+        vertex.getAllEdges().forEach(e => this._handleEdgeUpdate(e.id));
     }
     
-    edgeUpdated(params) {
-        const connection = this.paper.getRenderedConnection(params.edge.id);
+    _handleEdgeUpdate(edgeId) {
+        const connection = this.paper.getRenderedConnection(edgeId);
         if (connection) {
             for (let id in connection.overlays) {
                 const canvas = connection.overlays[id].contentElement;
@@ -99,6 +104,10 @@ export class PaperComponent {
             }
         }
     }
+    
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
     edgeAddedRemoved(params) {
         const info = this.paper.getObjectInfo(params.edge.source, false);
         if (info.el) {

package/esm2022/lib/surface-component.mjs

@@ -69,10 +69,16 @@ export class SurfaceComponent {
         this._getComponentThen(info.el, (component) => {
             component.data = params.vertex.data;
             component.$data?.set(component.data);
+            try {
+                ;
+                component.$updateEdges();
+            }
+            catch (e) { }
             if (component.changeDetectorRef) {
                 component.changeDetectorRef.detectChanges();
             }
         }, false);
+        this._maybeUpdateEdgeOverlays(params.vertex);
     }
     portUpdated(params) {
         const info = this.surface.getObjectInfo(params.port, false);
@@ -84,10 +90,14 @@ export class SurfaceComponent {
                 }
             }
         }, true);
+        this._maybeUpdateEdgeOverlays(params.port);
+    }
+    _maybeUpdateEdgeOverlays(vertex) {
+        vertex.getAllEdges().forEach(e => this._handleEdgeUpdate(e.id));
     }
     
-    edgeUpdated(params) {
-        const connection = this.surface.getRenderedConnection(params.edge.id);
+    _handleEdgeUpdate(edgeId) {
+        const connection = this.surface.getRenderedConnection(edgeId);
         if (connection) {
             for (let id in connection.overlays) {
                 const canvas = connection.overlays[id].contentElement;
@@ -99,6 +109,10 @@ export class SurfaceComponent {
             }
         }
     }
+    
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
     edgeAddedRemoved(params) {
         const info = this.surface.getObjectInfo(params.edge.source, false);
         if (info.el) {

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

@@ -14,10 +14,10 @@ export class SurfacePopupComponent {
         this.ui = this.vjs.ui;
         this.display = computed(() => (this.current() == null ? "none" : "block"));
     }
-    $hide() {
-        this.popupHandler?.$hide();
-    }
     ngAfterViewInit() {
+        this._hideFunction = function () {
+            this.popupHandler?.$hide();
+        }.bind(this);
         this.vjs.getSurface((surface) => {
             if (!this.initialized) {
                 this.initialized = true;
@@ -34,7 +34,7 @@ export class SurfacePopupComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SurfacePopupComponent, selector: "vjs-surface-popup", inputs: { selector: "selector", anchor: "anchor" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "\n    <div #container class=\"vjs-surface-popup\" [style.display]=\"display()\" style=\"position:absolute\">\n      <ng-container *ngIf=\"current()\">\n        <ng-container *ngTemplateOutlet=\"template; context: { vertex: current(), model: model(), ui: ui(), hide:$hide }\"></ng-container>\n      </ng-container>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SurfacePopupComponent, selector: "vjs-surface-popup", inputs: { selector: "selector", anchor: "anchor" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "\n    <div #container class=\"vjs-surface-popup\" [style.display]=\"display()\" style=\"position:absolute\">\n      <ng-container *ngIf=\"current()\">\n        <ng-container *ngTemplateOutlet=\"template; context: { vertex: current(), model: model(), ui: ui(), hide:_hideFunction }\"></ng-container>\n      </ng-container>\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfacePopupComponent, decorators: [{
             type: Component,
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     template: `
     <div #container class="${CLASS_SURFACE_POPUP}" [style.display]="display()" style="position:absolute">
       <ng-container *ngIf="current()">
-        <ng-container *ngTemplateOutlet="template; context: { vertex: current(), model: model(), ui: ui(), hide:$hide }"></ng-container>
+        <ng-container *ngTemplateOutlet="template; context: { vertex: current(), model: model(), ui: ui(), hide:_hideFunction }"></ng-container>
       </ng-container>
     </div>
   `

package/esm2022/lib/tiled-image-background.component.mjs

@@ -0,0 +1,62 @@
+import { inject, Component, Input } from "@angular/core";
+import { BackgroundPlugin, log, TiledBackground } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class TiledImageBackgroundComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._bg = null;
+    }
+    ngAfterViewInit() {
+        this.$vjs.getSurface(s => {
+            try {
+                this._bg = s.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: {
+                        type: TiledBackground.type,
+                        url: this.url,
+                        urlGenerator: this.urlGenerator,
+                        tileSize: this.tileSize,
+                        width: this.width,
+                        height: this.height,
+                        maxZoom: this.maxZoom,
+                        tiling: this.tiling,
+                        panDebounceTimeout: this.panDebounceTimeout,
+                        zoomDebounceTimeout: this.zoomDebounceTimeout
+                    }
+                });
+            }
+            catch (e) {
+                log(`WARN: TiledImageBackgroundComponent could not mount background ${e}`);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiledImageBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TiledImageBackgroundComponent, selector: "vjs-tiled-image-background", inputs: { url: "url", urlGenerator: "urlGenerator", tileSize: "tileSize", width: "width", height: "height", maxZoom: "maxZoom", tiling: "tiling", panDebounceTimeout: "panDebounceTimeout", zoomDebounceTimeout: "zoomDebounceTimeout" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TiledImageBackgroundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-tiled-image-background",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { url: [{
+                type: Input
+            }], urlGenerator: [{
+                type: Input
+            }], tileSize: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], maxZoom: [{
+                type: Input
+            }], tiling: [{
+                type: Input
+            }], panDebounceTimeout: [{
+                type: Input
+            }], zoomDebounceTimeout: [{
+                type: Input
+            }] } });