@visuallyjs/browser-ui 1.2.6 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "license": "Commercial",
   "main": "js/visuallyjs.browser-ui.cjs.js",
   "module": "js/visuallyjs.browser-ui.esm.js",

package/types/browser-ui/browser-visuallyjs-instance.d.ts

@@ -13,10 +13,8 @@ import { BrowserUIClipboard } from "./copy-paste";
  */
 export type BrowserUIEvent = typeof EVENT_EDGE_MOUSEUP | typeof EVENT_EDGE_MOUSEDOWN | typeof EVENT_VERTEX_CLICK | typeof EVENT_VERTEX_DBLCLICK | typeof EVENT_EDGE_CONTEXTMENU | typeof EVENT_EDGE_CLICK | typeof EVENT_EDGE_DBLCLICK | typeof EVENT_VERTEX_DBLTAP | typeof EVENT_VERTEX_TAP | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_VERTEX_MOUSEOUT | typeof EVENT_VERTEX_MOUSEMOVE | typeof EVENT_VERTEX_MOUSEDOWN | typeof EVENT_VERTEX_MOUSEUP | typeof EVENT_VERTEX_CONTEXTMENU | typeof EVENT_VERTEX_MOUSEOVER | typeof EVENT_EDGE_MOUSEOVER | typeof EVENT_EDGE_MOUSEOUT | typeof EVENT_GROUP_MOVE | typeof EVENT_EDGE_DRAG_START | typeof EVENT_EDGE_DRAG | typeof EVENT_EDGE_DRAG_END | typeof EVENT_EDGE_DRAG_ABORT;
 /**
- * Subclass of UICore that renders to the DOM in a browser, and supports dragging of elements/connections.
+ * Subclass of UICore that renders to the DOM in a browser, and supports dragging of elements/connections. This class is abstract and is not something users of the API will instantiate.
  * @group Components
- * @internal
- *
  */
 export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement, EVT | BrowserUIEvent> {
     protected $suspendRendering: boolean;

package/types/browser-ui/components/edge-type-picker/edge-type-picker.d.ts

@@ -14,8 +14,7 @@ export declare const CLASS_EDGE_TYPE_PICKER = "vjs-edge-type-picker";
  */
 export declare const CLASS_EDGE_TYPE_PICKER_SELECTED = "vjs-edge-type-picker-selected";
 /**
- * Helper class that renders a set of edge styles to the DOM and offers a callback method for when one is selected
- * via a mouse click.
+ * Helper class that renders a set of edge styles to the DOM and offers a callback method for when one is selected via a mouse click.
  * @group Components
  * @category Edge Type Picker
  */
@@ -34,4 +33,9 @@ export declare class EdgeTypePicker {
      * @param value
      */
     select(property: string, value: string): void;
+    /**
+     * Clears the visible selection state
+     * @internal
+     */
+    reset(): void;
 }

package/types/browser-ui/components/inspector/inspector.d.ts

@@ -35,6 +35,14 @@ export declare const CLASS_INSPECTOR = "vjs-inspector";
  * @context inspector
  */
 export declare const CLASS_INSPECTOR_CLOSE = "vjs-inspector-close";
+/**
+ * Assigned to sections drawn inside an inspector by certain helper inspector components
+ * @group Components
+ * @category Inspector
+ * @cssClass
+ * @context inspector
+ */
+export declare const CLASS_INSPECTOR_SECTION = "vjs-inspector-section";
 /**
  * Fired by an Inspector when its contents have changed.
  * @group Components
@@ -107,7 +115,7 @@ export declare class Inspector extends VjsContext {
      * @param value
      *
      */
-    setValue(key: string, value: any, portId: string, repaintAfterwards?: boolean): void;
+    setValue(key: string, value: any, portId: string | null, repaintAfterwards?: boolean): void;
     /**
      * @internal
      * @param b

package/types/browser-ui/components/palette/auto-edge-connect.d.ts

@@ -41,7 +41,7 @@ export declare class AutoEdgeConnectManager {
     private _transientEdges;
     private _keyListener;
     private _getSourceTargetElements;
-    constructor(ui: UICore<any>, palette: Palette<any>, activeClass: string, mode: "eager" | "onDemand", lineStyle: LineStyle, key: string);
+    constructor(ui: UICore<any>, palette: Palette, activeClass: string, mode: "eager" | "onDemand", lineStyle: LineStyle, key: string);
     private _clearProximityState;
     private _toggleCssClasses;
     private _setStatus;

package/types/browser-ui/components/palette/palette-options.d.ts

@@ -6,7 +6,7 @@ export declare const PALETTE_MODE_DRAG = "drag";
 export declare const PALETTE_MODE_TAP = "tap";
 export declare const PALETTE_MODE_DRAW = "draw";
 export type PaletteMode = typeof PALETTE_MODE_TAP | typeof PALETTE_MODE_DRAG | typeof PALETTE_MODE_DRAW;
-export type CanDropOnEdgeFilter<T> = (d: T) => boolean;
+export type CanDropOnEdgeFilter = (d: ObjectData) => boolean;
 /**
  * Defines the source/target port ids to use on a vertex dropped on an edge.
  * @group Components
@@ -23,7 +23,7 @@ export type EdgeDropInfo = {
  * @group Components
  * @category Palette
  */
-export interface PaletteOptions<T> {
+export interface PaletteOptions {
     /**
      * The element containing things that will be dragged/tapped.
      */
@@ -35,23 +35,23 @@ export interface PaletteOptions<T> {
     /**
      * Optional function to generate the size to use for some object that is being dragged.
      */
-    dragSizeGenerator?: (payload: T, el: BrowserElement) => Size;
+    dragSizeGenerator?: (payload: ObjectData, el: BrowserElement) => Size;
     /**
      * Optional function to generate an initial payload from an element that has started to be dragged/has been tapped.
      */
-    dataGenerator?: DataGeneratorFunction<T>;
+    dataGenerator?: DataGeneratorFunction;
     /**
      * Optional function to determine the type of the data object from an element that is being dragged (in drag mode) or has been tapped (in draw/tap mode)
      */
-    typeGenerator?: TypeGeneratorFunction<T>;
+    typeGenerator?: TypeGeneratorFunction;
     /**
      * Optional function to use to determine if the element being dragged/has been tapped represents a group. If you do not provide this, the default behaviour is to check for the presence of a `data-vjs-is-group` attribute on the element, with a value of `true`.
      */
-    groupIdentifier?: GroupIdentifierFunction<T>;
+    groupIdentifier?: GroupIdentifierFunction;
     /**
      * Defaults to false. Allows items to be dropped onto edges in the canvas. A drop on an edge causes that edge to be split, with one edge having the new vertex as a target, and another edge with the new vertex as source.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<T>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**
      * If `allowDropOnEdge` is true, this function can be provided, to customise the behaviour of the drop. By default, the new vertex is used as the target of the original edge and the source of the new edge. But you might want to connect to ports on the new vertex, and this method allows you to do that: you can return the ID of a port to use for the existing edge's target, a port ID to use for the new edge's source, a source anchor or a target anchor.
      * @param newVertex The newly dropped vertex
@@ -106,7 +106,7 @@ export interface PaletteOptions<T> {
     /**
      * Optional function that you can use to inform the Palette that drop should be aborted. This method is invoked at the start of a drag (in drag mode) or when an item is tapped (in tap/draw mode) and is passed the candidate drag object's data.
      */
-    canvasDropFilter?: CanvasDropFilter<T>;
+    canvasDropFilter?: CanvasDropFilter;
     /**
      * Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
      */
@@ -127,7 +127,7 @@ export interface PaletteOptions<T> {
      * @param p Location on the canvas where the mousedown event occurred.
      * @param e Mouse down event
      */
-    vertexPreviewGenerator?: (objectType: string, type: string, data: T, p: PointXY, e: MouseEvent) => BrowserElement;
+    vertexPreviewGenerator?: (objectType: string, type: string, data: ObjectData, p: PointXY, e: MouseEvent) => BrowserElement;
     /**
      * When in draw mode this function is repeatedly called as the mouse is dragging a new shape. It provides a hook for you to update the element's appearance. This is only called if you provided a vertexPreviewGenerator and it has returned a valid DOM element at the start of a drag.
      * @param el The element you returned from vertexPreviewGenerator.
@@ -135,7 +135,7 @@ export interface PaletteOptions<T> {
      * @param size The current size of the new vertex.
      * @param data The return value from the dataGenerator
      */
-    vertexPreviewUpdater?: (el: BrowserElement, origin: PointXY, size: Size, data: T) => any;
+    vertexPreviewUpdater?: (el: BrowserElement, origin: PointXY, size: Size, data: ObjectData) => any;
     /**
      * When in 'draw' mode, you can optionally provide a class to set on the lasso used by the vertex drawing plugin.
      */
@@ -175,7 +175,7 @@ export interface PaletteOptions<T> {
     /**
      * Optional function to invoke as the user is dragging a new element, or has tapped an element and is moving the mouse over the canvas.
      */
-    onDrag?: DragFunction<T>;
+    onDrag?: DragFunction;
     /**
      * Optional template that will be used in conjunction with `data` to generate the HTML content of the palette. The template can return any number of elements (ie. you're not limited to just a single root node)
      */

package/types/browser-ui/components/palette/palette.d.ts

@@ -9,7 +9,7 @@ import { BrowserUI } from "../../browser-visuallyjs-instance";
  * @group Components
  * @category Palette
  */
-export declare class Palette<T> {
+export declare class Palette {
     private readonly ui;
     private readonly _$_mode;
     readonly source: BrowserElement;
@@ -96,7 +96,7 @@ export declare class Palette<T> {
     private _rotationSpeed;
     private readonly _autoEdgeConnect;
     private _autoEdgeConnectManager;
-    constructor(ui: BrowserUI, options: PaletteOptions<T>);
+    constructor(ui: BrowserUI, options: PaletteOptions);
     /**
      * Sets the enabled state of the palette
      *

package/types/browser-ui/definitions.d.ts

@@ -1,7 +1,7 @@
 import { BrowserElement } from "./util";
 import { BoundingBox, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsModel, VisuallyJsSelection } from "../core";
 import { PointXY, Size } from "../core";
-import { UICoreDefaults, UICoreOptions, UIEdgeOptions, DragOptions, Overlay, Connection, EdgePropertyMappings, AlignContentOptions } from "../ui";
+import { UICoreDefaults, UICoreOptions, UIEdgeOptions, DragOptions, Overlay, Connection, EdgePropertyMappings, AlignContentOptions, FontSpec } from "../ui";
 import { EdgeInputMethod } from "./edge-handler-base";
 import { LabelBackgroundOptions, LabelPosition, ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
 import { VisuallyJSDOMElement } from "./element-facade";
@@ -13,58 +13,58 @@ import { ConnectorEditorActivateParams } from "./connector-editor";
  * @group Components
  * @category Palette
  */
-export type CanvasDropFilter<T> = (data: T) => boolean;
+export type CanvasDropFilter = (data: ObjectData) => boolean;
 /**
  * Defines a function used to filter drop on an edge.
  * @group Components
  * @category Palette
  */
-export type EdgeDropFilter<T> = (data: T, target: Edge) => boolean;
+export type EdgeDropFilterObjectData = (data: ObjectData, target: Edge) => boolean;
 /**
  * Defines the callback function invoked when an item is being dragged.
  * @group Components
  * @category Palette
  */
-export type DragFunction<T> = (data: T, el: BrowserElement, e: Event) => any;
+export type DragFunction = (data: ObjectData, el: BrowserElement, e: Event) => any;
 /**
  * Defines the function invoked when an item is dropped onto an existing vertex.
  * @group Components
  * @category Palette
  */
-export type DropFunction<T> = (data: T, target: Node | Group, draggedElement?: BrowserElement, e?: Event, position?: PointXY, canvasLocation?: PointXY, targetLocation?: PointXY, locationOnTarget?: PointXY) => void;
+export type DropFunction = (data: ObjectData, target: Node | Group, draggedElement?: BrowserElement, e?: Event, position?: PointXY, canvasLocation?: PointXY, targetLocation?: PointXY, locationOnTarget?: PointXY) => void;
 /**
  * Defines the function invoked when an item is dropped on an edge.
  * @group Components
  * @category Palette
  */
-export type EdgeDropFunction<T> = (data: T, target: Edge, draggedElement?: BrowserElement, e?: Event, position?: PointXY, canvasLocation?: PointXY) => void;
+export type EdgeDropFunction = (data: ObjectData, target: Edge, draggedElement?: BrowserElement, e?: Event, position?: PointXY, canvasLocation?: PointXY) => void;
 /**
  * Defines the function invoked when an item is dropped onto whitespace in the canvas.
  * @group Components
  * @category Palette
  */
-export type CanvasDropFunction<T> = (data: T, canvasPosition: PointXY, draggedElement?: BrowserElement, e?: Event, position?: PointXY, elementSize?: Size) => void;
+export type CanvasDropFunction = (data: ObjectData, canvasPosition: PointXY, draggedElement?: BrowserElement, e?: Event, position?: PointXY, elementSize?: Size) => void;
 /**
  * Defines the function that is invoked to gather a dataset to associate with an item that is being dragged.
  * @group Components
  * @category Palette
  * @typeParam T Defines the type of the object that will be created.
  */
-export type DataGeneratorFunction<T> = (el: BrowserElement) => T;
+export type DataGeneratorFunction = (el: BrowserElement) => ObjectData;
 /**
  * Defines the function invoked to determine the type of some item that is about to be dragged.
  * @group Components
  * @category Palette
  * @typeParam T Defines the kind of the object from which to extract the type id.
  */
-export type TypeGeneratorFunction<T> = (d: T) => string;
+export type TypeGeneratorFunction = (d: ObjectData) => string;
 /**
  * Defines the function that is invoked to determine whether an item that is about to be dragged represents a group.
  * @group Components
  * @category Palette
  * @typeParam T Defines the kind of the associated data object.
  */
-export type GroupIdentifierFunction<T> = (d: T, el: BrowserElement) => boolean;
+export type GroupIdentifierFunction = (d: ObjectData, el: BrowserElement) => boolean;
 /**
  * Defines the method signature for the `onVertexAdded` callback.
  * @group Components
@@ -366,41 +366,6 @@ export interface Background {
 export interface ImageBackground extends Background {
     setUrl(url: string): void;
 }
-/**
- * Style for a font - oblique, italic or normal.
- * @group UI
- * @category Definitions
- */
-export type FontStyle = "normal" | "oblique" | "italic";
-/**
- * Font weight to use (e.g., "normal", "bold", "100", "300").
- * @group UI
- * @category Definitions
- */
-export type FontWeight = string | number;
-/**
- * Specs for a font. The default values depend on the context.
- * @group UI
- * @category Definitions
- */
-export interface FontSpec {
-    /**
-     * Size of the font. Default value depends on the context this spec occurs in.
-     */
-    size?: number;
-    /**
-     * Font style to use. Default value depends on the context this spec occurs in.
-     */
-    style?: FontStyle;
-    /**
-     * Font weight to use (e.g., "normal", "bold", "100", "300"). Defaults to null, which browsers treat as "normal".
-     */
-    weight?: FontWeight;
-    /**
-     * Font family to use.
-     */
-    family?: string;
-}
 /**
  * @internal
  * @param o

package/types/browser-ui/edge-mappings/flowchart-basic.d.ts

@@ -3,11 +3,36 @@ export declare const DEFAULT_FLOWCHART_ARROW_WIDTH = 15;
 export declare const DEFAULT_FLOWCHART_ARROW_LENGTH = 10;
 export declare const DEFAULT_FLOWCHART_PROPERTY_MARKERS = "markers";
 export declare const DEFAULT_FLOWCHART_PROPERTY_LINE_STYLE = "lineStyle";
+export declare const DEFAULT_FLOWCHART_PROPERTY_THICKNESS = "thickness";
 export declare const FLOWCHART_EDGE_TYPE_SOURCE_ARROW = "sourceArrow";
 export declare const FLOWCHART_EDGE_TYPE_TARGET_ARROW = "targetArrow";
 export declare const FLOWCHART_EDGE_TYPE_BOTH_ARROWS = "bothArrows";
 export declare const FLOWCHART_EDGE_TYPE_PLAIN = "plain";
 export declare const FLOWCHART_EDGE_TYPE_DASHED = "dashed";
+/**
+ * Config for line thickness option in flowchart edge mappings.
+ */
+export type LineThicknessMappingsConfig = {
+    /**
+     * Whether or not to enable the 'thickness' property mapping. Defaults to false, for backwards compatibility reasons, will likely default to true in v2.
+     */
+    enabled?: boolean;
+    /**
+     * Defaults to "thickness"
+     */
+    propertyName?: string;
+    /**
+     * Defaults to "Line Thickness" - a name for the mapping that can be used in an inspector.
+     */
+    mappingName?: string;
+    /**
+     * List of thicknesses to support, and their keys. Defaults to [1:thin, 3:medium, 5:thick]
+     */
+    values?: Array<{
+        key: string;
+        value: number;
+    }>;
+};
 /**
  * Basic edge mappings for flowcharts - a 'dashed' or 'plain' line style, and source/target/both/none arrow markers, with a configurable width/height
  * @param options
@@ -20,4 +45,7 @@ export declare function FlowchartBasicEdgeMappings(options?: {
     markersProperty?: string;
     arrowWidth?: number;
     arrowLength?: number;
+    lineStyleMappingName?: string;
+    markersMappingName?: string;
+    lineThickness?: boolean | LineThicknessMappingsConfig;
 }): EdgePropertyMappings;

package/types/browser-ui/shape-library/shape-library-definitions.d.ts

@@ -1,8 +1,8 @@
 import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions, PointXY } from "../../core";
 import { BrowserElement } from "../util";
 import { IconDefinition } from "../icons";
-import { FontSpec } from "../definitions";
 import { GroupTemplate } from "../../core/model/group-template";
+import { FontSpec } from "../../ui";
 /**
  * Default fill/stroke/text color for items in ShapeLibrary.
  * @internal
@@ -243,7 +243,16 @@ export declare const CLASS_SHAPE = "vjs-shape";
  * @group Diagrams
  * @category Shapes
  */
-export type ShapePropertyType = "string" | "number" | "boolean" | "color" | "font";
+export type ShapePropertyType = "string" | "number" | "boolean" | "color" | "font" | "text";
+/**
+ * Definition of a value in a shape property's list of allowed values.
+ * @group Diagrams
+ * @category Shapes
+ */
+export type ShapePropertyValueDefinition = {
+    label: string;
+    value: any;
+};
 /**
  * Defines a single configurable property exposed by a shape.
  * @group Diagrams
@@ -259,7 +268,7 @@ export interface ShapePropertyDefinition {
      */
     label: string;
     /**
-     * The data type of the property, telling the inspector which UI control to render.
+     * The data type of the property, telling the inspector which UI control to render by default. For properties that include a `values` array (and also properties of type boolean) you can override the choice of UI control via the `editor` option.
      */
     type: ShapePropertyType;
     /**
@@ -281,7 +290,15 @@ export interface ShapePropertyDefinition {
     /**
      * Optional set of values to pick current value from
      */
-    values?: Array<any>;
+    values?: Array<string | ShapePropertyValueDefinition>;
+    /**
+     * Specifies the type of UI input to use to manage the property. Only used if you have supplied `values`, or if the property type is "boolean" (since in that case the property's values are implicitly a list, containing true and false values).
+     */
+    editor?: null | "radio" | "select";
+    /**
+     * Specifies the labels to use for this property if it is a boolean and you've specified you want a 'radio' or 'select' editor. You could use this, for example, to show "On/Off" or "Yes/No" labels in the UI, rather than "True/False".
+     */
+    booleanLabels?: [string, string];
 }
 export type LabelPosition = "top" | "bottom" | "center";
 /**

package/types/browser-ui/shape-library/shape-library.d.ts

@@ -1,8 +1,8 @@
 import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, LabelPosition, RealisedShapeType, LabelBackgroundOptions } from "./shape-library-definitions";
+import { FontSpec } from "../../ui";
 import { BrowserElement } from "../util";
 import { CustomTagOptions, Recado, AbstractEntry, ObjectData } from "../../core";
 import { IconDefinition } from "../icons";
-import { FontSpec } from "../definitions";
 export declare const ATTRIBUTE_ORIGIN = "origin";
 export declare const ATTRIBUTE_ORIGIN_X = "originX";
 export declare const ATTRIBUTE_ORIGIN_Y = "originY";

package/types/browser-ui/surface-renderer/definitions.d.ts

@@ -84,11 +84,17 @@ export interface SurfaceVertexCloneOptions extends VertexCloneOptions {
     flash?: boolean;
 }
 /**
- * Definition of the payload returned from the Surface's exportData method.
+ * Definition of the payload returned from the Surface's `save` method.
  * @group Components
  * @category Input and Output
  */
 export interface SurfaceSaveData extends UISaveData {
+    /**
+     * The current pan position of the surface canvas
+     */
     pan: PointXY;
+    /**
+     * The current position of the surface's transform origin.
+     */
     transformOrigin: PointXY;
 }

package/types/browser-ui/surface-renderer/diagrams/definitions.d.ts

@@ -1,7 +1,7 @@
 import { LabelBackgroundOptions, LabelPosition, ShapeSet } from "../../shape-library";
 import { Group, ObjectData, PointXY, Size, Vertex, Node, BeforeConnectInterceptor } from "../../../core";
 import { DiagramCell } from "./diagram-cell";
-import { GridOptions, UIExportOptions, UICoreDefaults, EdgeEventOptions, OverlaySpec, ConnectorSpec, NodeEventOptions, GroupMapping, NodeMapping, AnchorSpec, EdgePropertyMappings, MagnetizeOptions, PaintStyle, OverlayVisibility, EdgeDeleteConfirmationFunction } from "../../../ui";
+import { GridOptions, UIExportOptions, UICoreDefaults, EdgeEventOptions, OverlaySpec, ConnectorSpec, NodeEventOptions, GroupMapping, NodeMapping, AnchorSpec, EdgePropertyMappings, MagnetizeOptions, PaintStyle, OverlayVisibility, EdgeDeleteConfirmationFunction, LabelBackgroundStyle, FontSpec } from "../../../ui";
 import { SurfaceSaveData } from "../definitions";
 import { BrowserElement } from "../../util";
 import { PaletteMode, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "../../components/palette/palette-options";
@@ -9,7 +9,7 @@ import { PanOptions, WheelOptions, ZoomOptions } from "../../pan-zoom-options";
 import { MiniviewPluginOptions, LassoPluginOptions, ResizingToolsModelUpdater, ResizingToolsHandlerFactory, DragGroupsPluginOptions, ResizingToolsResizeMethod, SnaplinesPluginOptions, PanButtonsPluginOptions, LineCrossingsPluginOptions } from "../plugins";
 import { EdgeSnapOptions, EdgeInputMethod } from "../../edge-handler-base";
 import { DiagramActionMediator } from "./mediator";
-import { OnVertexAddedCallback, FontSpec } from "../../definitions";
+import { OnVertexAddedCallback } from "../../definitions";
 import { PreparedShape } from "../shape-palette-options";
 /**
  * Options for the {@link Diagram.addLink method}
@@ -172,6 +172,10 @@ export interface DiagramOptions {
          * Optional font for edge labels.
          */
         labelFont?: FontSpec;
+        /**
+         * Optional style for the label's background.
+         */
+        labelBackgroundStyle?: LabelBackgroundStyle;
         /**
          * Optional map of event handlers for edges.
          */
@@ -192,6 +196,35 @@ export interface DiagramOptions {
          * Styles for the edge highlight box.
          */
         highlightStyle?: PaintStyle;
+        /**
+         * Optional default styles for edges. These are overwritten by edges that have values in their backing data.
+         */
+        lineStyle?: {
+            /**
+             * Width of the edge path
+             */
+            lineWidth?: number;
+            /**
+             * Width to draw the edge's outline path
+             */
+            outlineWidth?: number;
+            /**
+             * Color to paint the edge's path
+             */
+            color?: string;
+            /**
+             * Color to paint the edge's outline path
+             */
+            outlineColor?: string;
+            /**
+             * Definition of dash pattern to use to draw the edge path
+             */
+            dashArray?: string;
+            /**
+             * An array of color stops to use as a linear gradient for the edge path. When this is set, `color` is ignored.
+             */
+            gradient?: Array<[number, string]>;
+        };
     };
     /**
      * Defaults to #FFFFFF
@@ -514,7 +547,7 @@ export interface DiagramPaletteOptions {
     /**
      * If true, shapes can be dropped on edges in the canvas. The edge on which the shape was dropped has its target set to be the new node, and a new edge is added with the new node as source and the original edge's target as target.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<BrowserElement>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**
      * If `allowDropOnEdge` is also true, this flag instructs the shape palette to provide a default `edgeDropHandler` to the underlying palette which will attempt to find a source and target port on the new vertex, and connect to those instead of to the vertex itself. Defaults to true.
      * @advanced

package/types/browser-ui/surface-renderer/plugins/palette/palette-plugin.d.ts

@@ -1,13 +1,12 @@
 import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
 import { PaletteOptions } from "../../../components";
-import { BrowserElement } from "../../../util";
 import { BrowserUI } from "../../../browser-visuallyjs-instance";
 /**
  * Options for the palette plugin
  * @group Plugins
  * @category Palette
  */
-export interface PalettePluginOptions extends PaletteOptions<BrowserElement> {
+export interface PalettePluginOptions extends PaletteOptions {
 }
 export declare class PalettePlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<PalettePluginOptions> {
     static type: string;

package/types/browser-ui/surface-renderer/plugins/resizing-tools/definitions.d.ts

@@ -372,6 +372,70 @@ export declare const ATT_VJS_RESIZABLE = "data-vjs-resizable";
  * @context resizingTools
  */
 export declare const ATT_VJS_ROTATABLE = "data-vjs-rotatable";
+/**
+ * The color to use as the stroke for a resize handle
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_HANDLE_COLOR = "--vjs-resize-handle-color";
+/**
+ * The color to use as the stroke for a resize handle when it is in use
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_ACTIVE_COLOR = "--vjs-resize-active-color";
+/**
+ * The size to use for a resize handle. For circles this denotes the diameter; for rectangles it denotes the side length.
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_HANDLE_SIZE = "--vjs-resize-handle-size";
+/**
+ * The color to use as the fill for a resize handle
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_HANDLE_FILL_COLOR = "--vjs-resize-handle-fill-color";
+/**
+ * The stroke width to use on the resize frame
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_FRAME_LINE_WIDTH = "--vjs-resize-frame-line-width";
+/**
+ * The length of the leader line for the rotate handle
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_ROTATE_LEADER_LENGTH = "--vjs-resize-rotate-leader-length";
+/**
+ * The stroke width of the leader line for the rotate handle
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_ROTATE_LEADER_WIDTH = "--vjs-resize-rotate-leader-width";
+/**
+ * The diameter of the rotate handle
+ * @group Plugins
+ * @category Resizing Tools
+ * @cssVariable
+ * @context resizingTools
+ */
+export declare const CSS_VARIABLE_RESIZE_ROTATE_HANDLE_SIZE = "--vjs-resize-rotate-handle-size";
 /** @internal */
 export declare const ATT_DATA_DIR = "data-dir";
 /**

package/types/browser-ui/surface-renderer/shape-palette-options.d.ts

@@ -55,7 +55,7 @@ export interface ShapePaletteOptions<T extends ObjectData> {
     /**
      * Optional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's `type` with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
      */
-    dataGenerator?: DataGeneratorFunction<T>;
+    dataGenerator?: DataGeneratorFunction;
     /**
      * 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.
      */
@@ -102,7 +102,7 @@ export interface ShapePaletteOptions<T extends ObjectData> {
     /**
      * If true, shapes can be dropped on edges in the canvas. The edge on which the shape was dropped has its target set to be the new node, and a new edge is added with the new node as source and the original edge's target as target.
      */
-    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<T>;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter;
     /**`
      * If `allowDropOnEdge` is also true, this flag instructs the shape palette to provide a default `edgeDropHandler` to the underlying palette which will attempt to find a source and target port on the new vertex, and connect to those instead of to the vertex itself. Defaults to true.
      * @advanced

package/types/browser-ui/surface-renderer/shape-palette.d.ts

@@ -16,8 +16,8 @@ export declare const ATTRIBUTE_DATA_SHAPE_ID = "data-shape-id";
 export declare class ShapePalette<T extends ObjectData> {
     private ui;
     _$_templateEngine: BrowserUiRecado;
-    _$_palette: Palette<ObjectData>;
-    _$_userDataGenerator: DataGeneratorFunction<T>;
+    _$_palette: Palette;
+    _$_userDataGenerator: DataGeneratorFunction;
     _$_showGroups: boolean;
     /**
      * @internal

package/types/browser-ui/surface-renderer/surface.d.ts

@@ -206,27 +206,26 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
     }): void;
     $selectionCleared(sel: VisuallyJsSelection): any;
     /**
-     * Save the dataset and the current state of the Surface - its pan and zoom settings.
+     * Save the dataset and the current state of the Surface - its pan and zoom settings, as well as data for any registered data hooks.
      * @param options
      * @tags input/output
      */
     save(options?: UIExportOptions): SurfaceSaveData;
     /**
-     * Load the dataset and the current state of the Surface - its pan and zoom settings.
+     * Load the dataset and the current state of the Surface - its pan and zoom settings, as well as data for any registered data hooks.
      * @param data
      * @param onload Optional function to invoke after load.
+     * @tags input/output
      */
     load(data: SurfaceSaveData, onload?: Function): void;
     /**
      * Start editing the given edge or connection, optionally with the given edit parameters.
      * @param edgeOrConnection
      * @param params
-     *
      */
     startEditingPath<T extends ConnectorEditorActivateParams<BrowserElement>>(edgeOrConnection: Edge | Connection<BrowserElement>, params?: T): void;
     /**
      * Stop editing any connector paths.
-     *
      */
     stopEditingPath(): void;
     /**