@visuallyjs/browser-ui-angular 1.1.3 → 1.2.0

package/lib/inspector.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, ElementRef, AfterViewInit } from "@angular/core";
+import { ChangeDetectorRef, ElementRef } from "@angular/core";
 import { Inspector, Base, BrowserUI } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  * Base inspector component. You can extend this class and just use the `currentObj` and/or `currentType` members in your template for a simple setup, or your subclass can manage its own more complicated state. This class will invoke `reset()` when there is no selected object, and `refresh` when an object is selected.
  * @group Components
  */
-export declare class InspectorComponent<T extends Base = Base> implements AfterViewInit {
+export declare class InspectorComponent<T extends Base = Base> {
     /**
      * The object that is currently being inspected.
      * @classMember
@@ -70,12 +70,11 @@ export declare class InspectorComponent<T extends Base = Base> implements AfterV
      * @internal
      */
     el: ElementRef<any>;
-    ui: BrowserUI;
     $vjs: VisuallyJsService;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
+    ui: import("@angular/core").WritableSignal<BrowserUI<any>>;
+    model: import("@angular/core").Signal<import("@visuallyjs/browser-ui").VisuallyJsModel>;
+    initialized: boolean;
+    constructor();
     /**
      * The base implementation of this method sets the current object type from `objectType`, and it also sets the current type to be the `type` of obj. You can override this method to implement more sophisticated scenarios.
      * @param obj New object in inspector

package/lib/miniview-component.d.ts

@@ -1,18 +1,18 @@
-import { AfterViewInit, ElementRef, NgZone } from "@angular/core";
-import { MiniviewPlugin, Group, Node } from "@visuallyjs/browser-ui";
+import { ElementRef, NgZone } from "@angular/core";
+import { MiniviewPlugin, Group, Node, Vertex } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
  * A component that provides a miniview.
  * @group Components
  */
-export declare class MiniviewComponent implements AfterViewInit {
+export declare class MiniviewComponent {
     private ngZone;
     /**
      * Optional filter to determine whether or not include a given vertex in the miniview
      * @input
      */
-    elementFilter?: (obj: Node | Group) => boolean;
+    elementFilter?: (obj: Vertex) => boolean;
     /**
      * Optional function to determine a `type` for each vertex, which is then written as an attribute onto the DOM element representing the vertex in the miniview.
      * @input
@@ -28,18 +28,26 @@ export declare class MiniviewComponent implements AfterViewInit {
      * @input
      */
     clickToCenter?: boolean;
+    /**
+     * Defaults to true - the miniview will display a lasso as the user is using the lasso in the canvas
+     * @input
+     */
+    showLasso?: boolean;
+    /**
+     * Defaults to true - the miniview will add a CSS class to elements whose model object is in the current selection.
+     * @input
+     */
+    trackSelection?: boolean;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
+    $ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
+    initialized: boolean;
     $miniview: MiniviewPlugin;
     constructor(ngZone: NgZone);
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
     /**
      * @internal
      */
     redraw(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MiniviewComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MiniviewComponent, "vjs-miniview", never, { "elementFilter": { "alias": "elementFilter"; "required": false; }; "typeFunction": { "alias": "typeFunction"; "required": false; }; "activeTracking": { "alias": "activeTracking"; "required": false; }; "clickToCenter": { "alias": "clickToCenter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MiniviewComponent, "vjs-miniview", never, { "elementFilter": { "alias": "elementFilter"; "required": false; }; "typeFunction": { "alias": "typeFunction"; "required": false; }; "activeTracking": { "alias": "activeTracking"; "required": false; }; "clickToCenter": { "alias": "clickToCenter"; "required": false; }; "showLasso": { "alias": "showLasso"; "required": false; }; "trackSelection": { "alias": "trackSelection"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/palette.component.d.ts

@@ -1,13 +1,15 @@
-import { AfterViewInit, ElementRef } from "@angular/core";
+import { ElementRef } from "@angular/core";
 import { DataGeneratorFunction, GroupIdentifierFunction, OnVertexAddedCallback, Palette, Size, TypeGeneratorFunction, CanvasDropFilter, PaletteMode } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
  * @group Components
  */
-export declare class PaletteComponent<T> implements AfterViewInit {
+export declare class PaletteComponent<T> {
     $vjs: VisuallyJsService;
     $el: ElementRef<any>;
+    $surface: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").Surface>;
+    initialized: boolean;
     /**
      * CSS3 selector identifying the child elements of the the element on which this directive was declared that act as drag sources. Optional; if omitted Visually JS will use `[data-vjs-type]`.
      * @input
@@ -85,10 +87,7 @@ export declare class PaletteComponent<T> implements AfterViewInit {
      * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
      */
     clickToAddOnly?: boolean;
-    /**
-     * @internal
-     */
-    ngAfterViewInit(): void;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<PaletteComponent<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<PaletteComponent<any>, "[vjs-palette]", never, { "selector": { "alias": "selector"; "required": false; }; "dataGenerator": { "alias": "dataGenerator"; "required": false; }; "typeGenerator": { "alias": "typeGenerator"; "required": false; }; "groupIdentifier": { "alias": "groupIdentifier"; "required": false; }; "allowDropOnEdge": { "alias": "allowDropOnEdge"; "required": false; }; "allowDropOnGroup": { "alias": "allowDropOnGroup"; "required": false; }; "allowDropOnCanvas": { "alias": "allowDropOnCanvas"; "required": false; }; "allowDropOnNode": { "alias": "allowDropOnNode"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "canvasDropFilter": { "alias": "canvasDropFilter"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "selectAfterAdd": { "alias": "selectAfterAdd"; "required": false; }; "allowClickToAdd": { "alias": "allowClickToAdd"; "required": false; }; "clickToAddOnly": { "alias": "clickToAddOnly"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/shape.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from "@angular/core";
+import { ElementRef, OnChanges, SimpleChanges } from "@angular/core";
 import { ObjectData, FontSpec } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -6,15 +6,14 @@ import * as i0 from "@angular/core";
  * Provides a means to render an SVG shape into a component.
  * @group Components
  */
-export declare class ShapeComponent implements AfterViewInit, OnChanges {
+export declare class ShapeComponent implements OnChanges {
     /**
      * The data for the vertex to render. Required.
      * @input
      */
     obj: ObjectData;
     /**
-     * Current width for the shape. Although it may seem counterintuitive, this is required - you'll need to set it to `[width]="obj.width"`.
-     * Angular's change detection will not pick up changes to this otherwise.
+     * Current width for the shape. Although it may seem counterintuitive, this is required - you'll need to set it to `[width]="obj.width"`. Angular's change detection will not pick up changes to this otherwise.
      * @input
      */
     width: number;
@@ -62,8 +61,9 @@ export declare class ShapeComponent implements AfterViewInit, OnChanges {
     private shapeLibrary;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
+    ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
     private _render;
-    ngAfterViewInit(): void;
+    constructor();
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ShapeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ShapeComponent, "vjs-shape", never, { "obj": { "alias": "obj"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "labelProperty": { "alias": "labelProperty"; "required": false; }; "labelStrokeWidth": { "alias": "labelStrokeWidth"; "required": false; }; "label": { "alias": "label"; "required": false; }; "multilineLabels": { "alias": "multilineLabels"; "required": false; }; "labelFillRatio": { "alias": "labelFillRatio"; "required": false; }; "font": { "alias": "font"; "required": false; }; }, {}, never, never, false, never>;

package/lib/shape.palette.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ElementRef } from "@angular/core";
+import { ElementRef } from "@angular/core";
 import { ObjectData, Size, DataGeneratorFunction, OnVertexAddedCallback, PreparedShape } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  * Provides a palette that renders a shape library, from which new vertices can be dragged onto a surface.
  * @group Components
  */
-export declare class ShapePaletteComponent implements AfterViewInit {
+export declare class ShapePaletteComponent {
     /**
      * When the shape library contains multiple sets, use this to instruct the palette that you want it to initially load just displaying this set. Optional.
      * @input
@@ -64,7 +64,9 @@ export declare class ShapePaletteComponent implements AfterViewInit {
     preparedShapes?: Array<PreparedShape>;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
-    ngAfterViewInit(): void;
+    ui: import("@angular/core").WritableSignal<import("@visuallyjs/browser-ui").BrowserUI<any>>;
+    initialized: boolean;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ShapePaletteComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ShapePaletteComponent, "vjs-shape-palette", never, { "initialSet": { "alias": "initialSet"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "showAllMessage": { "alias": "showAllMessage"; "required": false; }; "selectAfterDrop": { "alias": "selectAfterDrop"; "required": false; }; "paletteStrokeWidth": { "alias": "paletteStrokeWidth"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "dataGenerator": { "alias": "dataGenerator"; "required": false; }; "preparedShapes": { "alias": "preparedShapes"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/surface-component.d.ts

@@ -49,6 +49,10 @@ export interface VisuallyJsAngularVertexComponent extends VisuallyJsAngularCompo
  * @group Components
  */
 export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularRenderOptions> implements AfterViewInit, OnDestroy {
+    /**
+     * Optional preconfigured model to use for this Surface. 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
@@ -164,6 +168,6 @@ 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, { "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; }; "url": { "alias": "url"; "required": false; }; }, { "vertexEvent": "vertexEvent"; }, never, ["*"], false, never>;
 }
 export {};

package/lib/vjs-service.d.ts

@@ -23,6 +23,12 @@ import * as i0 from "@angular/core";
  * @group Services
  */
 export declare class VisuallyJsService {
+    readonly model: import("@angular/core").WritableSignal<BrowserUIModel>;
+    readonly surface: import("@angular/core").WritableSignal<Surface>;
+    readonly paper: import("@angular/core").WritableSignal<Paper>;
+    readonly diagram: import("@angular/core").WritableSignal<Diagram>;
+    readonly inspector: import("@angular/core").WritableSignal<Inspector>;
+    readonly ui: import("@angular/core").WritableSignal<BrowserUI<any>>;
     private $model;
     private $surface;
     private $paper;
@@ -34,54 +40,89 @@ export declare class VisuallyJsService {
     private modelListeners;
     private diagramListeners;
     private uiListeners;
+    /**
+     * @internal
+     * @param i
+     */
     $setInspector(i: Inspector): void;
     private $notifyInspector;
     $setSurface(s: Surface): void;
+    /**
+     * @deprecated
+     * @private
+     */
     private $notifySurface;
     /**
      * Retrieves the surface and executes the provided callback function with the surface as its argument. If the surface is not available, the callback is stored and will be invoked once the surface is ready.
      *
      * @param cb - A callback function that takes a `Surface` object as its parameter.
+     * @deprecated Use the `surface` signal instead.
      */
     getSurface(cb: (s: Surface) => any): void;
     /**
      * Retrieves the inspector instance. If the inspector is already available, the provided callback function is invoked with the inspector as an argument. If the inspector is not yet ready, the callback is stored in a queue to be executed once the inspector becomes available.
      *
      * @param cb - A callback function that receives the inspector instance as an argument when it becomes available.
+     * @deprecated Use the `inspector` signal instead.
      */
     getInspector(cb: (s: Inspector) => any): void;
     $setPaper(p: Paper): void;
+    /**
+     * @deprecated
+     * @private
+     */
     private $notifyPaper;
     /**
      * Retrieves the paper object and executes the provided callback function with the paper as an argument. If the paper is not yet available, the callback is stored for execution once the paper becomes available.
      *
      * @param cb - A callback function that is called with the retrieved paper object as an argument.
+     * @deprecated Use the `paper` signal instead.
      */
     getPaper(cb: (p: Paper) => any): void;
+    /**
+     * @internal
+     * @param d
+     */
     $setDiagram(d: Diagram): void;
+    /**
+     * @deprecated
+     * @private
+     */
     private $notifyDiagram;
     /**
      * Retrieves the current diagram. If the diagram is not available, the callback will be stored and executed when the diagram becomes available.
      *
      * @param cb - A callback function that takes a `Diagram` object as its parameter.
+     * @deprecated Use the `diagram` signal instead
      */
     getDiagram(cb: (p: Diagram) => any): void;
     /**
      * Retrieves the model and executes the provided callback function with it. If the model is already available, the callback is executed immediately. Otherwise, the callback is stored to be executed when the model becomes available.
      *
      * @param cb - The callback function to execute with the model.
+     * @deprecated Use the `model` signal instead
      */
     getModel(cb: (p: BrowserUIModel) => any): void;
     /**
      * @internal
      */
     $setModel(m: BrowserUIModel): void;
+    /**
+     * @deprecated
+     * @private
+     */
     private $notifyModel;
+    /**
+     * @deprecated
+     * @param ui
+     * @private
+     */
     private $notifyUI;
     /**
      * Retrieves the UI element and provides it to the callback function once available. If the UI element already exists, it is immediately passed to the callback. Otherwise, the callback is stored to be executed when the UI becomes available.
      *
      * @param cb - A callback function that receives the UI element `b` of type `BrowserUI` as its argument.
+     * @deprecated Use the `ui` signal instead
      */
     getUI(cb: (b: BrowserUI) => any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VisuallyJsService, never>;

package/package.json

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