@visuallyjs/browser-ui-angular 1.2.1 → 1.2.2

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, TemplateRef, ViewChild, ContentChild, 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_EDGE_ADDED, EVENT_EDGE_REMOVED, 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, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, 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, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
 
 
 class VisuallyJsService {
@@ -287,6 +287,50 @@ 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) {
@@ -296,7 +340,12 @@ 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
+        }] });
 
 
 class BaseVertexComponent {
@@ -652,10 +701,16 @@ 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);
@@ -667,10 +722,14 @@ 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;
@@ -682,6 +741,10 @@ class SurfaceComponent {
             }
         }
     }
+    
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
     edgeAddedRemoved(params) {
         const info = this.surface.getObjectInfo(params.edge.source, false);
         if (info.el) {
@@ -2082,10 +2145,10 @@ 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;
@@ -2102,7 +2165,7 @@ 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,
@@ -2111,7 +2174,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>
   `
@@ -2195,6 +2258,7 @@ class PaperComponent {
                 component.changeDetectorRef.detectChanges();
             }
         }, false);
+        this._maybeUpdateEdgeOverlays(params.vertex);
     }
     portUpdated(params) {
         const info = this.paper.getObjectInfo(params.port, false);
@@ -2206,10 +2270,14 @@ 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;
@@ -2221,6 +2289,10 @@ class PaperComponent {
             }
         }
     }
+    
+    edgeUpdated(params) {
+        this._handleEdgeUpdate(params.edge.id);
+    }
     edgeAddedRemoved(params) {
         const info = this.paper.getObjectInfo(params.edge.source, false);
         if (info.el) {
@@ -2466,6 +2538,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+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
+            }] } });
+
+
+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
+            }] } });
+
+
+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
+            }] } });
+
+
+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
+            }] } });
+
 
 class VisuallyJsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisuallyJsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -2495,7 +2770,11 @@ class VisuallyJsModule {
             BubbleChartComponent,
             SankeyChartComponent,
             DecoratorComponent,
-            SurfacePopupComponent], imports: [CommonModule], exports: [MiniviewComponent,
+            SurfacePopupComponent,
+            BackgroundComponent,
+            ImageBackgroundComponent,
+            GridBackgroundComponent,
+            TiledImageBackgroundComponent], imports: [CommonModule], exports: [MiniviewComponent,
             SurfaceComponent,
             PaperComponent,
             PaletteComponent,
@@ -2517,7 +2796,11 @@ 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: [{
@@ -2551,7 +2834,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BubbleChartComponent,
                         SankeyChartComponent,
                         DecoratorComponent,
-                        SurfacePopupComponent
+                        SurfacePopupComponent,
+                        BackgroundComponent,
+                        ImageBackgroundComponent,
+                        GridBackgroundComponent,
+                        TiledImageBackgroundComponent
                     ],
                     exports: [
                         MiniviewComponent,
@@ -2576,7 +2863,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         BubbleChartComponent,
                         SankeyChartComponent,
                         DecoratorComponent,
-                        SurfacePopupComponent
+                        SurfacePopupComponent,
+                        BackgroundComponent,
+                        ImageBackgroundComponent,
+                        GridBackgroundComponent,
+                        TiledImageBackgroundComponent
                     ]
                 }]
         }] });
@@ -2704,5 +2995,5 @@ function useVisuallyJsUpdate(callback) {
 
 
 
-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, PaperComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, SurfacePopupComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
+export { AngularComponentOverlayType, AreaChartComponent, BackgroundComponent, BarChartComponent, BaseAngularOverlayComponent, BaseGroupComponent, BaseNodeComponent, BasePortComponent, BaseVertexComponent, BrowserUIAngularModel, BubbleChartComponent, ColorPickerComponent, ColumnChartComponent, ControlsComponent, DecoratorComponent, DefaultGroupComponent, DefaultNodeComponent, DiagramComponent, DiagramPaletteComponent, EdgeTypePickerComponent, ExportControlsComponent, GridBackgroundComponent, ImageBackgroundComponent, InspectorComponent, LineChartComponent, MiniviewComponent, PaletteComponent, PaperComponent, PieChartComponent, SankeyChartComponent, ScatterChartComponent, SeriesBasedChartComponent, ShapeComponent, ShapePaletteComponent, SurfaceComponent, SurfacePopupComponent, TiledImageBackgroundComponent, VisuallyJsModule, VisuallyJsService, XYChartComponent, useVisuallyJsUpdate, useZoom };
 //# sourceMappingURL=visuallyjs-browser-ui-angular.mjs.map