@visuallyjs/browser-ui-angular 1.2.4 → 1.2.6

package/lib/diagram-palette-component.d.ts

@@ -1,4 +1,4 @@
-import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, PreparedShape } from "@visuallyjs/browser-ui";
+import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, PreparedShape, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 import { AfterViewInit, ElementRef } from "@angular/core";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
@@ -23,10 +23,15 @@ export declare class DiagramPaletteComponent implements AfterViewInit {
      */
     dragSize?: Size;
     /**
-     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      * @input
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`. This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     * @input
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
      * @input
@@ -87,6 +92,31 @@ export declare class DiagramPaletteComponent implements AfterViewInit {
      * @input
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     * @input
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     * @input
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     * @input
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     * @input
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     * @input
+     */
+    showGroups?: boolean;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
     initialized: boolean;
@@ -94,5 +124,5 @@ export declare class DiagramPaletteComponent implements AfterViewInit {
     constructor();
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DiagramPaletteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramPaletteComponent, "vjs-diagram-palette", never, { "fill": { "alias": "fill"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "inspector": { "alias": "inspector"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "paletteStrokeWidth": { "alias": "paletteStrokeWidth"; "required": false; }; "showAllMessage": { "alias": "showAllMessage"; "required": false; }; "onCellAdded": { "alias": "onCellAdded"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "allowClickToAdd": { "alias": "allowClickToAdd"; "required": false; }; "autoExitDrawMode": { "alias": "autoExitDrawMode"; "required": false; }; "selectAfterAdd": { "alias": "selectAfterAdd"; "required": false; }; "inputDiagram": { "alias": "diagram"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "preparedShapes": { "alias": "preparedShapes"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DiagramPaletteComponent, "vjs-diagram-palette", never, { "fill": { "alias": "fill"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "dragSize": { "alias": "dragSize"; "required": false; }; "inspector": { "alias": "inspector"; "required": false; }; "updateTypeOnPaletteTap": { "alias": "updateTypeOnPaletteTap"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "paletteStrokeWidth": { "alias": "paletteStrokeWidth"; "required": false; }; "showAllMessage": { "alias": "showAllMessage"; "required": false; }; "onCellAdded": { "alias": "onCellAdded"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "allowClickToAdd": { "alias": "allowClickToAdd"; "required": false; }; "autoExitDrawMode": { "alias": "autoExitDrawMode"; "required": false; }; "selectAfterAdd": { "alias": "selectAfterAdd"; "required": false; }; "inputDiagram": { "alias": "diagram"; "required": false; }; "onVertexAdded": { "alias": "onVertexAdded"; "required": false; }; "preparedShapes": { "alias": "preparedShapes"; "required": false; }; "allowDropOnEdge": { "alias": "allowDropOnEdge"; "required": false; }; "allowRotation": { "alias": "allowRotation"; "required": false; }; "rotationSpeed": { "alias": "rotationSpeed"; "required": false; }; "autoEdgeConnect": { "alias": "autoEdgeConnect"; "required": false; }; "showGroups": { "alias": "showGroups"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/palette.component.d.ts

@@ -1,5 +1,5 @@
 import { ElementRef } from "@angular/core";
-import { DataGeneratorFunction, GroupIdentifierFunction, OnVertexAddedCallback, Palette, Size, TypeGeneratorFunction, CanvasDropFilter, PaletteMode } from "@visuallyjs/browser-ui";
+import { DataGeneratorFunction, GroupIdentifierFunction, OnVertexAddedCallback, Palette, Size, TypeGeneratorFunction, CanvasDropFilter, PaletteMode, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
@@ -38,7 +38,7 @@ export declare class PaletteComponent<T> {
      * Defaults to true. Allows items to be dropped onto edges in the canvas.
      * @input
      */
-    allowDropOnEdge?: boolean;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
     /**
      * Defaults to true. Allows items to be dropped onto groups in the canvas.
      * @input
@@ -87,7 +87,20 @@ export declare class PaletteComponent<T> {
      * 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;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     * @input
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
     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>;
+    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; }; "allowRotation": { "alias": "allowRotation"; "required": false; }; "rotationSpeed": { "alias": "rotationSpeed"; "required": false; }; "autoEdgeConnect": { "alias": "autoEdgeConnect"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/shape.component.d.ts

@@ -1,5 +1,5 @@
 import { ElementRef, OnChanges, SimpleChanges } from "@angular/core";
-import { ObjectData, FontSpec } from "@visuallyjs/browser-ui";
+import { ObjectData, FontSpec, LabelPosition } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
@@ -54,6 +54,10 @@ export declare class ShapeComponent implements OnChanges {
      * @input
      */
     labelFillRatio: number;
+    /**
+     * Defaults to "center". Use "top" or "bottom" to set the label above or below the shape.
+     */
+    labelPosition: LabelPosition;
     /**
      * Optional font size/style to use for this shape.
      */
@@ -66,5 +70,5 @@ export declare class ShapeComponent implements OnChanges {
     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>;
+    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; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "font": { "alias": "font"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -1,5 +1,5 @@
 import { ElementRef } from "@angular/core";
-import { ObjectData, Size, DataGeneratorFunction, OnVertexAddedCallback, PreparedShape } from "@visuallyjs/browser-ui";
+import { ObjectData, Size, DataGeneratorFunction, OnVertexAddedCallback, PreparedShape, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "@visuallyjs/browser-ui";
 import { VisuallyJsService } from "./vjs-service";
 import * as i0 from "@angular/core";
 /**
@@ -62,11 +62,46 @@ export declare class ShapePaletteComponent {
      * @input
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     * @input
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     * @input
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     * @input
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     * @input
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     * @input
+     */
+    showGroups?: boolean;
+    /**
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     * @input
+     */
+    inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`. This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     * @input
+     */
+    updateTypeOnPaletteTap?: boolean;
     $el: ElementRef<any>;
     $vjs: VisuallyJsService;
     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>;
+    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; }; "allowDropOnEdge": { "alias": "allowDropOnEdge"; "required": false; }; "allowRotation": { "alias": "allowRotation"; "required": false; }; "rotationSpeed": { "alias": "rotationSpeed"; "required": false; }; "autoEdgeConnect": { "alias": "autoEdgeConnect"; "required": false; }; "showGroups": { "alias": "showGroups"; "required": false; }; "inspector": { "alias": "inspector"; "required": false; }; "updateTypeOnPaletteTap": { "alias": "updateTypeOnPaletteTap"; "required": false; }; }, {}, never, never, false, never>;
 }

package/package.json

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