@visuallyjs/browser-ui 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.2.5",
+  "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,9 +1,9 @@
 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 { ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
+import { LabelBackgroundOptions, LabelPosition, ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
 import { VisuallyJSDOMElement } from "./element-facade";
 import { VertexMapping } from "../ui";
 import { BrowserUI } from "./browser-visuallyjs-instance";
@@ -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
@@ -235,6 +235,14 @@ export interface ShapesOptions {
      * The attribute containing each vertex's label. Defaults to 'label'
      */
     labelAttribute?: string;
+    /**
+     * Position for labels. Defaults to "center".
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+     */
+    labelBackground?: boolean | LabelBackgroundOptions;
     /**
      * Whether or not to show labels. Defaults to true.
      */
@@ -358,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 } from "../../core";
+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
@@ -171,7 +171,7 @@ export interface ShapeLibrary<T extends ObjectData> {
     getShapeDefinition(type: string, set?: string): RealisedShapeType;
     renderCompiledShape(data: T, strokeWidth?: number): BrowserElement;
     renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
-    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, labelPosition?: LabelPosition, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
     getShapeSet(id: string): RenderedShapeSet;
     getShapeSets(): Array<RenderedShapeSet>;
     rootSet: RenderedShapeSet;
@@ -179,7 +179,7 @@ export interface ShapeLibrary<T extends ObjectData> {
     getSvgDefsElement(): SVGElement;
     parseDefs(): Array<Array<AbstractEntry>>;
     useMultilineLabels(): boolean;
-    $applyMultilineLabel(el: Element, data: ObjectData, labelAttribute: string): void;
+    $applyMultilineLabel(el: Element, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     typeParameter: string;
     categoryParameter: string;
     defaultCategoryId: string;
@@ -189,7 +189,7 @@ export interface ShapeLibrary<T extends ObjectData> {
      * @param data The data associated with the element.
      * @param labelAttribute The attribute to use for the label.
      */
-    refresh(el: BrowserElement, data: T, labelAttribute?: string): void;
+    refresh(el: BrowserElement, data: T, labelAttribute: string, labelPosition: LabelPosition): void;
 }
 /**
  * Defines a function that can take a vertex's data object and return a document fragment with it rendered.
@@ -222,6 +222,14 @@ export declare const TAG_SHAPE = "vjs-shape";
  * @context shape-library
  */
 export declare const CLASS_SHAPE_LABEL = "vjs-shape-label";
+/**
+ * This class is assigned to svg rect elements serving as the background for shape labels. By default it is an empty rectangle with no fill, and is not visible in the UI.  If you supply a `labelBackground` config, this element will use it.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context shape-library
+ */
+export declare const CLASS_SHAPE_LABEL_BG = "vjs-shape-label-bg";
 /**
  * This class is assigned to the parent SVG elements for shapes.
  * @group Nodes and Groups
@@ -235,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
@@ -251,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;
     /**
@@ -273,6 +290,27 @@ 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";
+/**
+ * Options for the label background on a shape.
+ * @group Diagrams
+ * @category Shapes
+ */
+export interface LabelBackgroundOptions {
+    stroke?: string;
+    strokeWidth?: number;
+    fill?: string;
+    padding?: PointXY;
+    rx?: number;
+    opacity?: number;
+}

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

@@ -1,8 +1,8 @@
-import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, LabelPosition, RealisedShapeType } from "./shape-library-definitions";
+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";
@@ -122,6 +122,10 @@ export interface ShapeLibraryOptions {
      * Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
      */
     labelPosition?: LabelPosition;
+    /**
+     * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+     */
+    labelBackground?: boolean | LabelBackgroundOptions;
     /**
      * Optional default for fill color. If not provided, fill is set to #FFFFFF.
      */
@@ -142,6 +146,8 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
     shapeSets: Map<string, RenderedShapeSet>;
     defaultCategoryId: string;
     private labelPosition;
+    private _showLabelBackgrounds;
+    private _labelBackgroundOptions;
     rootSet: RenderedShapeSet;
     iconContainerTemplate: string;
     iconContainerAst: Array<AbstractEntry>;
@@ -177,8 +183,9 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * @param el
      * @param data
      * @param labelAttribute
+     * @param labelPosition
      */
-    refresh(el: BrowserElement, data: ObjectData, labelAttribute?: string): void;
+    refresh(el: BrowserElement, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     private _processShapeSets;
     getShapeSet(id: string): RenderedShapeSet;
     getShapeSets(): Array<RenderedShapeSet>;
@@ -211,7 +218,6 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * @param el
      * @private
      */
-    private _applyVectorEffect;
     /**
      * Render the given data with the appropriate template. A `fill` value is set on the resulting element, and the `vector-effect` attribute is set to 'non scaling stroke', ie. when the shape is scaled due to the element dimensions differing from the viewbox, the stroke does not change.
      * @param data
@@ -242,7 +248,7 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * Returns a tag definition that can be used in a Surface's `tags` declaration. Note that this method returns an object containing the tag's implementation, but not the name of the tag. You can call the tag whatever you like.
      * @internal
      */
-    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string, defaultOutlineWidth?: number): CustomTagOptions;
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, labelPosition?: LabelPosition, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string, defaultOutlineWidth?: number): CustomTagOptions;
     /**
      * @internal
      */
@@ -256,14 +262,14 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      */
     private _resolveIcon;
     /**
-     * Converts text element labels to multiline tspans, if multilineLabels is set to true (which is
-     * the default).
+     * Converts text element labels to multiline tspans, if multilineLabels is set to true (which is the default).
      * @param labelElement
      * @param data
      * @param labelAttribute
+     * @param labelPosition
      * @internal
      */
-    $applyMultilineLabel(labelElement: SVGTextElement, data: ObjectData, labelAttribute: string): void;
+    $applyMultilineLabel(labelElement: SVGTextElement, data: ObjectData, labelAttribute: string, labelPosition: LabelPosition): void;
     /**
      * Check for any icons that were declared and render them.
      * @param el

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 { LabelPosition, ShapeSet } from "../../shape-library";
+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
@@ -312,6 +345,10 @@ export interface DiagramOptions {
          * Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
          */
         labelPosition?: LabelPosition;
+        /**
+         * Options for label background. Use `true` for defaults, or supply your own values (which will be merged on top of the defaults)
+         */
+        labelBackground?: boolean | LabelBackgroundOptions;
         /**
          * Optional event mappings for all cells.
          */
@@ -510,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