@visuallyjs/browser-ui-angular 1.0.0

package/lib/palette.component.d.ts

@@ -0,0 +1,94 @@
+import { AfterViewInit, 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 {
+    $vjs: VisuallyJsService;
+    $el: ElementRef<any>;
+    /**
+     * 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
+     */
+    selector?: string;
+    /**
+     * Function to use to generate an initial payload when the user starts to drag something from this component, or taps on an item in tap/draw mode. Optional, and if omitted Visually JS will use a default data generator that extracts data values from any `data-vjs-***` attributes on the element being dragged.
+     * @input
+     */
+    dataGenerator?: DataGeneratorFunction<T>;
+    /**
+     * Optional function to use to determine the type of object that a user has just started dragging or tapped on
+     * @input
+     */
+    typeGenerator?: TypeGeneratorFunction<T>;
+    /**
+     * Optional function to use to determine if the object that is being dragged represents a group. If this function is present, and returns true, then the drag object is considered to be a group. In all other cases the drag object is considered to be a node.
+     * @input
+     */
+    groupIdentifier?: GroupIdentifierFunction<T>;
+    /**
+     * @internal
+     */
+    palette: Palette<T>;
+    /**
+     * Defaults to true. Allows items to be dropped onto edges in the canvas.
+     * @input
+     */
+    allowDropOnEdge?: boolean;
+    /**
+     * Defaults to true. Allows items to be dropped onto groups in the canvas.
+     * @input
+     */
+    allowDropOnGroup?: boolean;
+    /**
+     * Defaults to true. Allows items to be dropped onto whitespace.
+     * @input
+     */
+    allowDropOnCanvas?: boolean;
+    /**
+     * Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace.
+     * @input
+     */
+    allowDropOnNode?: boolean;
+    /**
+     * Optional callback for when a new vertex has been added via this component.
+     * @input
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Optional size to use for dragged elements.
+     * @input
+     */
+    dragSize?: Size;
+    /**
+     * Optional filter to test if objects may be dropped on the canvas. This method is invoked at the start of a drag and is passed the candidate drag object's data.
+     * @input
+     */
+    canvasDropFilter?: CanvasDropFilter<T>;
+    /**
+     * Mode to use - drag or tap. Defaults to drag.
+     * @input
+     */
+    mode?: PaletteMode;
+    /**
+     * Defaults to false. When true, a newly added vertex is set as the model's current selection.
+     * @input
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drag to draw approach also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * 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;
+    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

@@ -0,0 +1,70 @@
+import { AfterViewInit, ElementRef, OnChanges, SimpleChanges } from "@angular/core";
+import { ObjectData, FontSpec } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+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 {
+    /**
+     * 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.
+     * @input
+     */
+    width: number;
+    /**
+     * Current height. See notes for `width`.
+     * @input
+     */
+    height: number;
+    /**
+     * Whether or not to show labels.
+     * @input
+     */
+    showLabels?: boolean;
+    /**
+     * Defaults to `label`. The name of the property inside each vertex that contains its label.
+     * @input
+     */
+    labelProperty?: string;
+    /**
+     * The stroke width to use for labels. Optional. Defaults to Visually JS's default.
+     * @input
+     */
+    labelStrokeWidth?: string;
+    /**
+     * Optional label to use. It is better to use this than to rely on the component extracting the
+     * label from the object data, as there are some scenarios where the change detection is not invoked
+     * when relying on the `labelProperty` approach.
+     * @input
+     */
+    label?: string;
+    /**
+     * Defaults to true. Set to false if you do not want multi line labels.
+     * @input
+     */
+    multilineLabels?: boolean;
+    /**
+     * For multiline labels, the proportion of the width of the shape that the longest line can take up.
+     * @input
+     */
+    labelFillRatio: number;
+    /**
+     * Optional font size/style to use for this shape.
+     */
+    font?: FontSpec;
+    private shapeLibrary;
+    $el: ElementRef<any>;
+    $vjs: VisuallyJsService;
+    private _render;
+    ngAfterViewInit(): void;
+    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

@@ -0,0 +1,73 @@
+import { AfterViewInit, 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";
+/**
+ * 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 {
+    /**
+     * 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
+     */
+    initialSet?: string;
+    /**
+     * Optional size to use for dragged elements.
+     * @input
+     */
+    dragSize: Size;
+    /**
+     * Optional size to use for icons.
+     * @input
+     */
+    iconSize: Size;
+    /**
+     * Optional fill color to use for dragged elements. This should be in RGB or hex format, _not_ a color like 'white' or 'cyan' etc.
+     * @input
+     */
+    fill?: string;
+    /**
+     * Optional color to use for outline of dragged elements. Should be in RGB or hex format.
+     * @input
+     */
+    outline?: string;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes.
+     * Defaults to `Show all`.
+     * @input
+     */
+    showAllMessage?: string;
+    /**
+     * When true (which is the default), a newly dropped vertex will be set as the underlying model's selection.
+     * @input
+     */
+    selectAfterDrop?: boolean;
+    /**
+     * Stroke width to use in shapes in the palette. Defaults to 1.
+     * @input
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * Callback to invoke when a vertex has been dropped on the canvas
+     * @input
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Optional function you can use to set some initial data for an element being dragged. Note that you cannot
+     * override the object's `type` with this function.
+     * @input
+     */
+    dataGenerator?: DataGeneratorFunction<ObjectData>;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     * @input
+     */
+    preparedShapes?: Array<PreparedShape>;
+    $el: ElementRef<any>;
+    $vjs: VisuallyJsService;
+    ngAfterViewInit(): void;
+    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

@@ -0,0 +1,149 @@
+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 { AngularRenderOptions, AngularViewOptions } from "./common";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+type VisuallyJsAngularDOMElement = BrowserElement & {
+    _visuallyJsNgComponent: any;
+    _ref: ComponentRef<any>;
+};
+/**
+ * @internal
+ */
+export interface VisuallyJsAngularComponent {
+    model: VisuallyJsModel;
+    surface: Surface;
+    data: ObjectData;
+    $data?: WritableSignal<ObjectData>;
+    changeDetectorRef?: ChangeDetectorRef;
+}
+/**
+ * @internal
+ */
+export interface VisuallyJsAngularVertexComponent extends VisuallyJsAngularComponent {
+    modelObject: Vertex;
+    _el: VisuallyJsAngularDOMElement;
+}
+/**
+ * Provides a component that manages a surface.
+ * @group Components
+ */
+export declare class SurfaceComponent<RO extends AngularRenderOptions = AngularRenderOptions> implements AfterViewInit, OnDestroy {
+    /**
+     * Options for the view - mappings of components and behaviour to model object types.
+     * @input
+     */
+    viewOptions?: AngularViewOptions;
+    /**
+     * Options for the underlying surface 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.
+     * @input
+     */
+    data?: Record<string, any>;
+    /**
+     * Optional url from which to load data after the view has been initialised.
+     * @input
+     */
+    url?: 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 Surface from the UI core package that this component manages.
+     * @classMember
+     */
+    surface: Surface;
+    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;
+    $el: ElementRef<any>;
+    $viewContainerRef: ViewContainerRef;
+    $ngZone: NgZone;
+    $vjs: VisuallyJsService;
+    /**
+     * @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;
+    /**
+     * 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;
+    /**
+     * @internal
+     */
+    private _processAngularOverlays;
+    /**
+     * Save the dataset and the surface'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<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>;
+}
+export {};

package/lib/vjs-service.d.ts

@@ -0,0 +1,71 @@
+import { BrowserUI, Diagram, Inspector, Paper, Surface, BrowserUIModel } from "@visuallyjs/browser-ui";
+import * as i0 from "@angular/core";
+/**
+ * Provides the BrowserUIModel and the current UI - whether a Surface or Paper. Also provisions the current Diagram, if applicable. This service is provided in root by default but if you have multiple models in your app you can configure it as a provider in multiple components
+ * @group Services
+ */
+export declare class VisuallyJsService {
+    private $model;
+    private $surface;
+    private $paper;
+    private $diagram;
+    private $inspector;
+    private inspectorListeners;
+    private surfaceListeners;
+    private paperListeners;
+    private modelListeners;
+    private diagramListeners;
+    private uiListeners;
+    $setInspector(i: Inspector): void;
+    private $notifyInspector;
+    $setSurface(s: Surface): void;
+    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.
+     */
+    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.
+     */
+    getInspector(cb: (s: Inspector) => any): void;
+    $setPaper(p: Paper): void;
+    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.
+     */
+    getPaper(cb: (p: Paper) => any): void;
+    $setDiagram(d: Diagram): void;
+    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.
+     */
+    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.
+     */
+    getModel(cb: (p: BrowserUIModel) => any): void;
+    /**
+     * @internal
+     */
+    $setModel(m: BrowserUIModel): void;
+    private $notifyModel;
+    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.
+     */
+    getUI(cb: (b: BrowserUI) => any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VisuallyJsService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<VisuallyJsService>;
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@visuallyjs/browser-ui-angular",
+    "version": "1.0.0",
+    "peerDependencies": {
+        "@angular/common": "*",
+        "@angular/core": "*"
+    },
+    "dependencies": {
+        "tslib": "^2.0.0",
+        "@visuallyjs/browser-ui": "1.0.0"
+    },
+    "exports": {
+        "./css/visuallyjs-angular.css": {
+            "default": "./css/visuallyjs-angular.css"
+        },
+        "./package.json": {
+            "default": "./package.json"
+        },
+        ".": {
+            "types": "./index.d.ts",
+            "esm2022": "./esm2022/visuallyjs-browser-ui-angular.mjs",
+            "esm": "./esm2022/visuallyjs-browser-ui-angular.mjs",
+            "default": "./fesm2022/visuallyjs-browser-ui-angular.mjs"
+        }
+    },
+    "module": "fesm2022/visuallyjs-browser-ui-angular.mjs",
+    "typings": "index.d.ts",
+    "sideEffects": false
+}