@visuallyjs/browser-ui-angular 1.2.0 → 1.2.2

package/index.d.ts

@@ -17,6 +17,8 @@ export * from './lib/default-group-component';
 export * from './lib/common';
 export * from './lib/miniview-component';
 export * from './lib/surface-component';
+export * from './lib/surface-popup-component';
+export * from './lib/paper-component';
 export * from './lib/overlay-component';
 export * from './lib/palette.component';
 export * from './lib/decorator-component';
@@ -41,3 +43,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/lib/background.component.d.ts

@@ -0,0 +1,13 @@
+import { AfterViewInit } from "@angular/core";
+import { BackgroundOptions } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+export declare class BackgroundComponent implements AfterViewInit {
+    options: BackgroundOptions;
+    $vjs: VisuallyJsService;
+    private _bg;
+    private _optionsEffect;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BackgroundComponent, "vjs-background", never, { "options": { "alias": "options"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/lib/base.vertex.component.d.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from "@angular/core";
-import { ObjectData, Node, Surface, BrowserElement, VisuallyJsModel, SurfaceVertexCloneOptions, Port } from "@visuallyjs/browser-ui";
+import { ObjectData, Node, Surface, BrowserElement, VisuallyJsModel, SurfaceVertexCloneOptions, Port, Edge, Paper, BrowserUI } from "@visuallyjs/browser-ui";
 import * as i0 from "@angular/core";
 /**
  * Superclass for base node and base group components. You wont need to interact directly with this class; other component base classed in VisuallyJs extend from it.
@@ -19,10 +19,20 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      */
     model: VisuallyJsModel;
     /**
-     * Underlying Surface. Visually sets this.
+     * Underlying Surface. Visually sets this, if the component is rendered by a SurfaceComponent.
      * @internal
      */
     surface: Surface;
+    /**
+     * Underlying Paper. Visually sets this, if the component is rendered by a PaperComponent.
+     * @internal
+     */
+    paper: Paper;
+    /**
+     * Underlying UI. Visually sets this, regardless of the component this was rendered by (ie Surface or Paper).
+     * @internal
+     */
+    ui: BrowserUI;
     /**
      * Underlying model object. Visually sets this.
      * @internal
@@ -46,6 +56,22 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * @classMember
      */
     zoom: import("@angular/core").WritableSignal<number>;
+    /**
+     * This signal provides all of the edges for which this vertex is the source. These are edges connected to the vertex, not to its ports.
+     */
+    sourceEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex or one of its ports is the source.
+     */
+    allSourceEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex is the target. These are edges connected to the vertex, not to its ports.
+     */
+    targetEdges: import("@angular/core").WritableSignal<Edge[]>;
+    /**
+     * This signal provides all of the edges for which this vertex or one of its ports is the target.
+     */
+    allTargetEdges: import("@angular/core").WritableSignal<Edge[]>;
     /**
      * @internal
      * @private
@@ -56,6 +82,7 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * @internal
      */
     ngOnInit(): void;
+    $updateEdges(): void;
     /**
      * Gets the vertex that this component represents. Subclasses have getters that return more specific subclasses of Vertex.
      * @classMember
@@ -119,7 +146,6 @@ export declare abstract class BaseVertexComponent<T extends Node> implements OnI
      * Flash this vertex
      * @param duration Optional; defaults to 1000ms. Duration of the animation in milliseconds.
      * @param animName Optional; the name of the CSS animation to apply. Defaults to ANIM_SURFACE_ELEMENT_FLASH.
-     * @internal
      */
     flashVertex(duration: number, animName?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseVertexComponent<any>, never>;

package/lib/browser-ui-angular.module.d.ts

@@ -4,26 +4,32 @@ import * as i2 from "./default-group-component";
 import * as i3 from "./base.port.component";
 import * as i4 from "./miniview-component";
 import * as i5 from "./surface-component";
-import * as i6 from "./palette.component";
-import * as i7 from "./shape.palette.component";
-import * as i8 from "./diagram-palette-component";
-import * as i9 from "./shape.component";
-import * as i10 from "./controls-component";
-import * as i11 from "./edge.type.picker.component";
-import * as i12 from "./export-controls-component";
-import * as i13 from "./color.tag.component";
-import * as i14 from "./diagram-component";
-import * as i15 from "./charts/column.chart.component";
-import * as i16 from "./charts/bar.chart.component";
-import * as i17 from "./charts/xy.chart.component";
-import * as i18 from "./charts/line.chart.component";
-import * as i19 from "./charts/area.chart.component";
-import * as i20 from "./charts/pie.chart.component";
-import * as i21 from "./charts/scatter.chart.component";
-import * as i22 from "./charts/bubble.chart.component";
-import * as i23 from "./charts/sankey.chart.component";
-import * as i24 from "./decorator-component";
-import * as i25 from "@angular/common";
+import * as i6 from "./paper-component";
+import * as i7 from "./palette.component";
+import * as i8 from "./shape.palette.component";
+import * as i9 from "./diagram-palette-component";
+import * as i10 from "./shape.component";
+import * as i11 from "./controls-component";
+import * as i12 from "./edge.type.picker.component";
+import * as i13 from "./export-controls-component";
+import * as i14 from "./color.tag.component";
+import * as i15 from "./diagram-component";
+import * as i16 from "./charts/column.chart.component";
+import * as i17 from "./charts/bar.chart.component";
+import * as i18 from "./charts/xy.chart.component";
+import * as i19 from "./charts/line.chart.component";
+import * as i20 from "./charts/area.chart.component";
+import * as i21 from "./charts/pie.chart.component";
+import * as i22 from "./charts/scatter.chart.component";
+import * as i23 from "./charts/bubble.chart.component";
+import * as i24 from "./charts/sankey.chart.component";
+import * as i25 from "./decorator-component";
+import * as i26 from "./surface-popup-component";
+import * as i27 from "./background.component";
+import * as i28 from "./image-background.component";
+import * as i29 from "./grid-background.component";
+import * as i30 from "./tiled-image-background.component";
+import * as i31 from "@angular/common";
 /**
  * VisuallyJs Angular module.
  *
@@ -59,6 +65,6 @@ import * as i25 from "@angular/common";
  */
 export declare class VisuallyJsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VisuallyJsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VisuallyJsModule, [typeof i1.DefaultNodeComponent, typeof i2.DefaultGroupComponent, typeof i3.BasePortComponent, typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaletteComponent, typeof i7.ShapePaletteComponent, typeof i8.DiagramPaletteComponent, typeof i9.ShapeComponent, typeof i10.ControlsComponent, typeof i11.EdgeTypePickerComponent, typeof i6.PaletteComponent, typeof i12.ExportControlsComponent, typeof i13.ColorPickerComponent, typeof i14.DiagramComponent, typeof i15.ColumnChartComponent, typeof i16.BarChartComponent, typeof i17.XYChartComponent, typeof i18.LineChartComponent, typeof i19.AreaChartComponent, typeof i20.PieChartComponent, typeof i21.ScatterChartComponent, typeof i22.BubbleChartComponent, typeof i23.SankeyChartComponent, typeof i24.DecoratorComponent], [typeof i25.CommonModule], [typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaletteComponent, typeof i8.DiagramPaletteComponent, typeof i9.ShapeComponent, typeof i7.ShapePaletteComponent, typeof i10.ControlsComponent, typeof i12.ExportControlsComponent, typeof i11.EdgeTypePickerComponent, typeof i13.ColorPickerComponent, typeof i14.DiagramComponent, typeof i15.ColumnChartComponent, typeof i16.BarChartComponent, typeof i17.XYChartComponent, typeof i18.LineChartComponent, typeof i19.AreaChartComponent, typeof i20.PieChartComponent, typeof i21.ScatterChartComponent, typeof i22.BubbleChartComponent, typeof i23.SankeyChartComponent, typeof i24.DecoratorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VisuallyJsModule, [typeof i1.DefaultNodeComponent, typeof i2.DefaultGroupComponent, typeof i3.BasePortComponent, typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaperComponent, typeof i7.PaletteComponent, typeof i8.ShapePaletteComponent, typeof i9.DiagramPaletteComponent, typeof i10.ShapeComponent, typeof i11.ControlsComponent, typeof i12.EdgeTypePickerComponent, typeof i7.PaletteComponent, typeof i13.ExportControlsComponent, typeof i14.ColorPickerComponent, typeof i15.DiagramComponent, typeof i16.ColumnChartComponent, typeof i17.BarChartComponent, typeof i18.XYChartComponent, typeof i19.LineChartComponent, typeof i20.AreaChartComponent, typeof i21.PieChartComponent, typeof i22.ScatterChartComponent, typeof i23.BubbleChartComponent, typeof i24.SankeyChartComponent, typeof i25.DecoratorComponent, typeof i26.SurfacePopupComponent, typeof i27.BackgroundComponent, typeof i28.ImageBackgroundComponent, typeof i29.GridBackgroundComponent, typeof i30.TiledImageBackgroundComponent], [typeof i31.CommonModule], [typeof i4.MiniviewComponent, typeof i5.SurfaceComponent, typeof i6.PaperComponent, typeof i7.PaletteComponent, typeof i9.DiagramPaletteComponent, typeof i10.ShapeComponent, typeof i8.ShapePaletteComponent, typeof i11.ControlsComponent, typeof i13.ExportControlsComponent, typeof i12.EdgeTypePickerComponent, typeof i14.ColorPickerComponent, typeof i15.DiagramComponent, typeof i16.ColumnChartComponent, typeof i17.BarChartComponent, typeof i18.XYChartComponent, typeof i19.LineChartComponent, typeof i20.AreaChartComponent, typeof i21.PieChartComponent, typeof i22.ScatterChartComponent, typeof i23.BubbleChartComponent, typeof i24.SankeyChartComponent, typeof i25.DecoratorComponent, typeof i26.SurfacePopupComponent, typeof i27.BackgroundComponent, typeof i28.ImageBackgroundComponent, typeof i29.GridBackgroundComponent, typeof i30.TiledImageBackgroundComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VisuallyJsModule>;
 }

package/lib/diagram-component.d.ts

@@ -13,15 +13,15 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
      */
     options?: DiagramOptions;
     /**
-     * Optional data to load after creation
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    data?: any;
+    data: import("@angular/core").InputSignal<Record<string, any>>;
     /**
-     * Optional URL from which to load data after creation
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    url?: string;
+    url: import("@angular/core").InputSignal<string>;
     /**
      * Options for the underlying model
      * @input
@@ -35,6 +35,8 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
     $ngZone: NgZone;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**
@@ -48,5 +50,5 @@ export declare class DiagramComponent implements AfterViewInit, OnDestroy {
      */
     saveToUrl(options: SaveOptions): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "vjs-diagram", never, { "options": { "alias": "options"; "required": false; }; "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "vjs-diagram", never, { "options": { "alias": "options"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/lib/grid-background.component.d.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit } from "@angular/core";
+import { Grid, GridType } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+/**
+ * Renders a grid background on a surface or paper.
+ * @group Components
+ */
+export declare class GridBackgroundComponent implements AfterViewInit {
+    /**
+     * The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
+     * @input
+     */
+    grid?: Grid;
+    /**
+     * Whether or not to show a thick border around the entire background. Defaults to false.
+     * @input
+     */
+    showBorder?: boolean;
+    /**
+     * The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
+     * @input
+     */
+    minWidth?: number;
+    /**
+     * The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
+     * @input
+     */
+    minHeight?: number;
+    /**
+     * Defaults to false. If true, the grid will also draw tick marks between the grid lines.
+     * @input
+     */
+    showTickMarks?: boolean;
+    /**
+     * Number of tick marks to draw per cell. Defaults to 2.
+     * @input
+     */
+    tickMarksPerCell?: number;
+    /**
+     * The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2).  maxWidth takes precedence over minWidth.
+     * @input
+     */
+    maxWidth?: number;
+    /**
+     * The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2).  maxHeight takes precedence over minHeight.
+     * @input
+     */
+    maxHeight?: number;
+    /**
+     * Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
+     * @input
+     */
+    autoShrink?: boolean;
+    /**
+     * Type of grid - lines or dots. Defaults to lines.
+     * @input
+     */
+    gridType?: GridType;
+    /**
+     * The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
+     * @input
+     */
+    dotRadius?: number;
+    /**
+     * The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
+     * @input
+     */
+    tickDotRadius?: number;
+    /**
+     * Whether or not the background is initially visible. Defaults to true.
+     * @input
+     */
+    visible?: boolean;
+    $vjs: VisuallyJsService;
+    private _bg;
+    private _getOptions;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridBackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridBackgroundComponent, "vjs-grid-background", never, { "grid": { "alias": "grid"; "required": false; }; "showBorder": { "alias": "showBorder"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "showTickMarks": { "alias": "showTickMarks"; "required": false; }; "tickMarksPerCell": { "alias": "tickMarksPerCell"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "autoShrink": { "alias": "autoShrink"; "required": false; }; "gridType": { "alias": "gridType"; "required": false; }; "dotRadius": { "alias": "dotRadius"; "required": false; }; "tickDotRadius": { "alias": "tickDotRadius"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/lib/image-background.component.d.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit } from "@angular/core";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+/**
+ * Renders an image background on a surface or paper.
+ * @group Components
+ */
+export declare class ImageBackgroundComponent implements AfterViewInit {
+    /**
+     * The url to load
+     * @input
+     */
+    url: string;
+    $vjs: VisuallyJsService;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ImageBackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageBackgroundComponent, "vjs-image-background", never, { "url": { "alias": "url"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/lib/overlay-component.d.ts

@@ -1,7 +1,7 @@
-import { Edge, ObjectData, Surface } from "@visuallyjs/browser-ui";
-import { ChangeDetectorRef } from "@angular/core";
-import { VisuallyJsModel } from "@visuallyjs/browser-ui";
+import { BrowserUI, Edge, ObjectData, VisuallyJsModel } from "@visuallyjs/browser-ui";
+import { ChangeDetectorRef, OnDestroy, OnInit } from "@angular/core";
 import { VisuallyJsAngularComponent } from "./surface-component";
+import * as i0 from "@angular/core";
 /**
  * Defines the type for an overlay that is represented by an angular component. Use this value in your views instead of "Arrow", "Label" etc.
  * @group Components
@@ -10,27 +10,32 @@ export declare const AngularComponentOverlayType = "AngularComponent";
 /**
  * Definition of an angular component that will act as an overlay. This interface exists largely for convenience; the code will write the members of this interface onto any component it creates.
  */
-export interface AngularOverlayComponent extends VisuallyJsAngularComponent {
+export interface AngularOverlayComponent<T extends BrowserUI = BrowserUI> extends VisuallyJsAngularComponent<T> {
     /**
      * The edge that this overlay is drawn on.
      */
     edge: Edge;
 }
 /**
- * A component that you can use as a base for your own overlay component if its convenient for you. This class offers an `updateEdge` and a `removeEdge` method, as helpers.
+ * A component that you can use as a base for your own overlay component if its convenient for you. This class offers an `updateEdge` and a `removeEdge` method, as helpers, and three signals:
+ *
+ * $edgeData() - The current backing data for the edge, updated when an edge or its source/target is updated
+ * $sourceData() - The current backing data for the edge's source, updated when that vertex is updated
+ * $targetData() - The current backing data for the edge's target, updated when that vertex is updated
+ *
  * @group Components
  */
-export declare abstract class BaseAngularOverlayComponent implements AngularOverlayComponent {
+export declare abstract class BaseAngularOverlayComponent<T extends BrowserUI = BrowserUI> implements OnInit, OnDestroy, AngularOverlayComponent<T> {
     /**
      * The underlying model
      * @classMember
      */
     model: VisuallyJsModel;
     /**
-     * The surface that this overlay is rendered by
+     * The UI that this overlay is rendered by
      * @classMember
      */
-    surface: Surface;
+    ui: T;
     /**
      * Backing data for the edge this overlay is attached to
      * @classMember
@@ -45,6 +50,23 @@ export declare abstract class BaseAngularOverlayComponent implements AngularOver
      * @internal
      */
     changeDetectorRef: ChangeDetectorRef;
+    /**
+     * @signal
+     */
+    $edgeData: import("@angular/core").WritableSignal<ObjectData>;
+    /**
+     * @signal
+     */
+    $sourceData: import("@angular/core").WritableSignal<ObjectData>;
+    /**
+     * @signal
+     */
+    $targetData: import("@angular/core").WritableSignal<ObjectData>;
+    _edgeUpdate: (payload: any, event: any) => any;
+    _vertexUpdate: (payload: any, event: any) => any;
+    _portUpdate: (payload: any, event: any) => any;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     /**
      * Update the underlying edge with the given data.
      * @param updates Data to update the edge with
@@ -56,4 +78,6 @@ export declare abstract class BaseAngularOverlayComponent implements AngularOver
      * @classMember
      */
     removeEdge(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseAngularOverlayComponent<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseAngularOverlayComponent<any>>;
 }

package/lib/paper-component.d.ts

@@ -0,0 +1,162 @@
+import { AfterViewInit, ComponentRef, ElementRef, EventEmitter, NgZone, OnDestroy, ViewContainerRef } from "@angular/core";
+import { PortUpdatedParams, Vertex, VertexUpdatedParams, Paper, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { AngularRenderOptions, AngularViewOptions } from "./common";
+import { VisuallyJsService } from "./vjs-service";
+import { VisuallyJsAngularDOMElement } from "./surface-component";
+import * as i0 from "@angular/core";
+/**
+ * Provides a component that manages a Paper. You can configure three sets of options on this component:
+ *
+ * 1. renderOptions - these are options that control the behaviour of the Paper canvas
+ * 2. viewOptions - these are mappings of node/group types to behaviour and components, and edge types to behaviour
+ * 3. modelOptions - Options that govern how the underlying data model operates. If you don't provide these, the Paper component uses defaults (which is fine for the majority of applications)
+ *
+ * ```typescript
+ * @Component({
+ *   selector:"app-my-canvas",
+ *   template:`<vjs-Paper [renderOptions]="renderOptions"
+ *   [viewOptions]="viewOptions"
+ *   [modelOptions]="modelOptions"/>`
+ * })
+ * export class MyCanvas {
+ *
+ *   renderOptions = { ... }
+ *   viewOptions = { ... }
+ *   modelOptions = { ... }
+ * }
+ * ```
+ *
+ * @group Components
+ */
+export declare class PaperComponent<RO extends AngularRenderOptions = AngularRenderOptions> implements AfterViewInit, OnDestroy {
+    /**
+     * Optional preconfigured model to use for this Paper. You don't normally need to provide this; the component will create a model from the options you pass in (or with blank options by default) otherwise.
+     */
+    inputModel?: BrowserUIModel;
+    /**
+     * Options for the view - mappings of components and behaviour to model object types.
+     * @input
+     */
+    viewOptions?: AngularViewOptions;
+    /**
+     * Options for the underlying Paper widget.
+     * @input
+     */
+    renderOptions?: AngularRenderOptions;
+    /**
+     * Optional parameters for the underlying model instance. These will be used only if the model instance with the given ID has not yet been created somewhere else in the app.
+     * @input
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
+     * @input
+     */
+    data: import("@angular/core").InputSignal<Record<string, any>>;
+    /**
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
+     * @input
+     */
+    url: import("@angular/core").InputSignal<string>;
+    /**
+     * Output event emitter, for proxying events from vertex components.
+     * @output
+     */
+    vertexEvent: EventEmitter<{
+        /**
+         * The vertex emitting the event
+         */
+        vertex: Vertex;
+        /**
+         * Event name
+         */
+        event: string;
+        /**
+         * Payload for the event
+         */
+        payload: any;
+        /**
+         * The Angular component that fired the event
+         */
+        component: ComponentRef<any>;
+    }>;
+    /**
+     * The underlying model.
+     * @classMember
+     */
+    model: BrowserUIModel;
+    /**
+     * The Paper from the UI core package that this component manages.
+     * @classMember
+     */
+    paper: Paper;
+    nodeUpdateFn: (a: any, e?: any) => any;
+    groupUpdateFn: (a: any, e?: any) => any;
+    portAddedFn: (a: any, e?: any) => any;
+    portUpdateFn: (a: any, e?: any) => any;
+    dataLoadEndFn: () => any;
+    edgeUpdateFn: (a: any, e?: any) => any;
+    edgeAddFn: (a: any, e?: any) => any;
+    edgeRemoveFn: (a: any, e?: any) => any;
+    $el: ElementRef<any>;
+    $viewContainerRef: ViewContainerRef;
+    $ngZone: NgZone;
+    $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
+    /**
+     * @internal
+     */
+    getNativeElement(component: any): VisuallyJsAngularDOMElement;
+    private _getComponent;
+    private _getComponentThen;
+    /**
+     * on node/group update, store the new data in the view
+     * @internal
+     */
+    nodeOrGroupUpdated(params: VertexUpdatedParams): void;
+    portUpdated(params: PortUpdatedParams): void;
+    private _maybeUpdateEdgeOverlays;
+    /**
+     * When an edge updated event is received, check for angular overlays, and if they have a change detector, invoke it. Used with OnPush change detection.
+     * @internal
+     */
+    private _handleEdgeUpdate;
+    /**
+     * When an edge updated event is received, check for angular overlays, and if they have a change detector, invoke it. Used with OnPush change detection.
+     * @internal
+     */
+    private edgeUpdated;
+    private edgeAddedRemoved;
+    /**
+     * @internal
+     */
+    private _processAngularOverlays;
+    /**
+     * Save the dataset and the Paper's current pan/zoom, as well as any inspector context, via POST to a URL.
+     * @param options Options for the save operation
+     * @classMember
+     */
+    save(options: SaveOptions): void;
+    /**
+     * Export the dataset only
+     * @classMember
+     */
+    exportData(options: ExportOptions): SurfaceSaveData;
+    /**
+     * On data load end, repaint everything on next tick.
+     * @internal
+     */
+    dataLoadEnd(): void;
+    private $removeNgElement;
+    /**
+     * @internal
+     */
+    ngAfterViewInit(): void;
+    /**
+     * @internal
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaperComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaperComponent<any>, "vjs-paper", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
+}

package/lib/surface-component.d.ts

@@ -1,18 +1,21 @@
 import { AfterViewInit, ComponentRef, ElementRef, EventEmitter, NgZone, OnDestroy, ViewContainerRef, ChangeDetectorRef, WritableSignal } from "@angular/core";
-import { ObjectData, PortUpdatedParams, Vertex, VertexUpdatedParams, Surface, BrowserElement, VisuallyJsModel, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel } from "@visuallyjs/browser-ui";
+import { ObjectData, PortUpdatedParams, Vertex, VertexUpdatedParams, Surface, BrowserElement, VisuallyJsModel, ModelOptions, SurfaceSaveData, ExportOptions, SaveOptions, BrowserUIModel, BrowserUI, Paper } from "@visuallyjs/browser-ui";
 import { AngularRenderOptions, AngularViewOptions } from "./common";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
-type VisuallyJsAngularDOMElement = BrowserElement & {
+/**
+ * @internal
+ */
+export type VisuallyJsAngularDOMElement = BrowserElement & {
     _visuallyJsNgComponent: any;
     _ref: ComponentRef<any>;
 };
 /**
  * @internal
  */
-export interface VisuallyJsAngularComponent {
+export interface VisuallyJsAngularComponent<T extends BrowserUI> {
     model: VisuallyJsModel;
-    surface: Surface;
+    ui: T;
     data: ObjectData;
     $data?: WritableSignal<ObjectData>;
     changeDetectorRef?: ChangeDetectorRef;
@@ -20,9 +23,11 @@ export interface VisuallyJsAngularComponent {
 /**
  * @internal
  */
-export interface VisuallyJsAngularVertexComponent extends VisuallyJsAngularComponent {
+export interface VisuallyJsAngularVertexComponent<T extends BrowserUI> extends VisuallyJsAngularComponent<T> {
     modelObject: Vertex;
     _el: VisuallyJsAngularDOMElement;
+    surface?: Surface;
+    paper?: Paper;
 }
 /**
  * Provides a component that manages a Surface. You can configure three sets of options on this component:
@@ -69,15 +74,15 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      */
     modelOptions?: ModelOptions;
     /**
-     * Optional data to load after the view has been initialised.
+     * Optional data to load after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    data?: Record<string, any>;
+    data: import("@angular/core").InputSignal<Record<string, any>>;
     /**
-     * Optional url from which to load data after the view has been initialised.
+     * Optional url from which to load data after the view has been initialised. This input is a signal, and will reload the dataset if changed.
      * @input
      */
-    url?: string;
+    url: import("@angular/core").InputSignal<string>;
     /**
      * Output event emitter, for proxying events from vertex components.
      * @output
@@ -117,10 +122,13 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
     dataLoadEndFn: () => any;
     edgeUpdateFn: (a: any, e?: any) => any;
     edgeAddFn: (a: any, e?: any) => any;
+    edgeRemoveFn: (a: any, e?: any) => any;
     $el: ElementRef<any>;
     $viewContainerRef: ViewContainerRef;
     $ngZone: NgZone;
     $vjs: VisuallyJsService;
+    private _dataEffect;
+    private _urlEffect;
     /**
      * @internal
      */
@@ -133,11 +141,18 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      */
     nodeOrGroupUpdated(params: VertexUpdatedParams): void;
     portUpdated(params: PortUpdatedParams): void;
+    private _maybeUpdateEdgeOverlays;
+    /**
+     * When an edge updated event is received, check for angular overlays, and if they have a change detector, invoke it. Used with OnPush change detection.
+     * @internal
+     */
+    private _handleEdgeUpdate;
     /**
      * When an edge updated event is received, check for angular overlays, and if they have a change detector, invoke it. Used with OnPush change detection.
      * @internal
      */
     private edgeUpdated;
+    private edgeAddedRemoved;
     /**
      * @internal
      */
@@ -168,6 +183,5 @@ export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularR
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SurfaceComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SurfaceComponent<any>, "vjs-surface", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; }; "url": { "alias": "url"; "required": false; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SurfaceComponent<any>, "vjs-surface", never, { "inputModel": { "alias": "model"; "required": false; }; "viewOptions": { "alias": "viewOptions"; "required": false; }; "renderOptions": { "alias": "renderOptions"; "required": false; }; "modelOptions": { "alias": "modelOptions"; "required": false; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
 }
-export {};