@visuallyjs/browser-ui-angular 1.2.1 → 1.2.2

package/index.d.ts

@@ -43,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/browser-ui-angular.module.d.ts

@@ -25,7 +25,11 @@ 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 "@angular/common";
+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.
  *
@@ -61,6 +65,6 @@ import * as i27 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.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.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]>;
+    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/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 { BrowserUI, Edge, ObjectData } 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
@@ -17,10 +17,15 @@ export interface AngularOverlayComponent<T extends BrowserUI = BrowserUI> extend
     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<T extends BrowserUI = BrowserUI> implements AngularOverlayComponent<T> {
+export declare abstract class BaseAngularOverlayComponent<T extends BrowserUI = BrowserUI> implements OnInit, OnDestroy, AngularOverlayComponent<T> {
     /**
      * The underlying model
      * @classMember
@@ -45,6 +50,23 @@ export declare abstract class BaseAngularOverlayComponent<T extends BrowserUI =
      * @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<T extends BrowserUI =
      * @classMember
      */
     removeEdge(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseAngularOverlayComponent<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseAngularOverlayComponent<any>>;
 }

package/lib/paper-component.d.ts

@@ -116,6 +116,12 @@ export declare class PaperComponent<RO extends AngularRenderOptions = AngularRen
      */
     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

package/lib/surface-component.d.ts

@@ -141,6 +141,12 @@ 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

package/lib/surface-popup-component.d.ts

@@ -50,11 +50,11 @@ export declare class SurfacePopupComponent implements AfterViewInit, OnDestroy {
      * @internal
      */
     popupHandler: PopupHandler;
+    _hideFunction: () => any;
     readonly current: import("@angular/core").WritableSignal<Vertex>;
     readonly model: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUIModel>;
     readonly ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
     readonly display: import("@angular/core").Signal<"none" | "block">;
-    $hide(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SurfacePopupComponent, never>;

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

@@ -0,0 +1,72 @@
+import { AfterViewInit } from "@angular/core";
+import { Size, TilingStrategy } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+/**
+ * Renders a tiled image background on a surface or paper.
+ * @group Components
+ */
+export declare class TiledImageBackgroundComponent implements AfterViewInit {
+    /**
+     * URL for the background. You can supply this, or you can supply a `urlGenerator` function instead. If you supply `url` and no `urlGenerator`, the url you supply is treated as a template for the url for any given tile, and is expected to contain `{z}`, `{x}` and `{y}` placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y.  For instance:
+     *
+     * http://foo.com/{z}/{x}/{y}
+     * https://bar.com?zoom={z}&x={x}&y={y}
+     *
+     * etc
+     * @input
+     */
+    url?: string;
+    /**
+     * For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
+     * an explanation of the default syntax for urls when using a tiled background.
+     * @param z zoom level
+     * @param x x coordinate of tile
+     * @param y y coordinate of tile
+     * @input
+     */
+    urlGenerator?: (z: number, x: number, y: number) => string;
+    /**
+     * For tiled backgrounds, provides the width and height of tiles. Every tile is assumed to have these dimensions,
+     * even if the tile has whitespace in it. Required.
+     * @input
+     */
+    tileSize: Size;
+    /**
+     * Required. Indicates the width of the full image.
+     * @input
+     */
+    width: number;
+    /**
+     * Required. Indicates the height of the full image.
+     * @input
+     */
+    height: number;
+    /**
+     * Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
+     * increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
+     * meaning two times as many tiles in each direction.
+     * @input
+     */
+    maxZoom?: number;
+    /**
+     * Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
+     * @input
+     */
+    tiling?: TilingStrategy;
+    /**
+     * How long to wait after a pan before reloading tiles.
+     * @input
+     */
+    panDebounceTimeout?: number;
+    /**
+     * How long to wait after a zoom before reloading tiles.
+     * @input
+     */
+    zoomDebounceTimeout?: number;
+    $vjs: VisuallyJsService;
+    private _bg;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TiledImageBackgroundComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TiledImageBackgroundComponent, "vjs-tiled-image-background", never, { "url": { "alias": "url"; "required": false; }; "urlGenerator": { "alias": "urlGenerator"; "required": false; }; "tileSize": { "alias": "tileSize"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "maxZoom": { "alias": "maxZoom"; "required": false; }; "tiling": { "alias": "tiling"; "required": false; }; "panDebounceTimeout": { "alias": "panDebounceTimeout"; "required": false; }; "zoomDebounceTimeout": { "alias": "zoomDebounceTimeout"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@visuallyjs/browser-ui-angular",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "peerDependencies": {
         "@angular/common": "*",
         "@angular/core": "*"
     },
     "dependencies": {
         "tslib": "^2.0.0",
-        "@visuallyjs/browser-ui": "1.2.1"
+        "@visuallyjs/browser-ui": "1.2.2"
     },
     "exports": {
         "./css/visuallyjs-angular.css": {