@visuallyjs/browser-ui 1.2.5 → 1.2.7

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;
     /**

package/types/browser-ui/svg-element-overlay.d.ts

@@ -1,4 +1,4 @@
-import { LabelOverlay, PaintStyle, Overlay, OverlayPaintParams, SimpleShapeOverlay } from "../ui";
+import { LabelOverlay, PaintStyle, Overlay, OverlayPaintParams, SimpleShapeOverlay, OverlayOptions, LabelOverlayOptions } from "../ui";
 import { Extents, PointXY } from "../core";
 import { BrowserUI } from "./browser-visuallyjs-instance";
 /**
@@ -46,11 +46,11 @@ export declare function paintSVGLabelOverlay(instance: BrowserUI, o: SVGLabelOve
  * @internal
  */
 export declare function destroySVGOverlay(o: SVGElementOverlay<any>, force?: boolean): void;
-export declare abstract class SVGElementOverlay<EL> extends Overlay<EL> {
+export declare abstract class SVGElementOverlay<EL, O extends OverlayOptions = OverlayOptions> extends Overlay<EL, O> {
     contentElements: Array<SVGElement>;
     backgroundContentElements: Array<SVGElement>;
 }
-export interface SVGLabelOverlay<EL> extends SVGElementOverlay<EL>, LabelOverlay<EL> {
+export interface SVGLabelOverlay<EL> extends SVGElementOverlay<EL, LabelOverlayOptions>, LabelOverlay<EL> {
     textElement: SVGTextElement;
     bgElement: SVGRectElement;
 }

package/types/browser-ui/svg-util.d.ts

@@ -1,6 +1,7 @@
 import { BrowserElement } from "./util";
 import { GradientSpec } from "../core";
 import { SvgConnector } from "./svg-element-connector";
+import { LabelPosition } from "./shape-library";
 export type ElementAttributes = Record<string, string | number | object>;
 export declare function $attr(node: BrowserElement, attributes: ElementAttributes): void;
 export declare function $svgNode(name: string, attributes?: ElementAttributes, style?: Record<string, any>, clazz?: string): SVGElement;
@@ -22,6 +23,7 @@ export declare function $appendAtIndex(svg: SVGElement, path: SVGElement, idx: n
  * @param textElement
  * @param text
  * @param maxWidth
+ * @param textPosition Where the text is placed relative to its context. This has a bearing on how we adjust the `dy` attribute of the initial span.
  * @internal
  */
-export declare function convertToMultilineText(textElement: SVGTextElement, text: string, maxWidth: number): SVGTextElement;
+export declare function convertToMultilineText(textElement: SVGTextElement, text: string, maxWidth: number, textPosition: LabelPosition): SVGTextElement;

package/types/charts/base-chart.d.ts

@@ -1,6 +1,7 @@
 import { OptimisticEventGenerator, ColorGenerator, PointXY, ObjectData, DataSource, Node, Group } from "../core";
-import { EventManager, BrowserElement, FontSpec, ImageExportOptions, ImageReadyFunction } from "../browser-ui";
+import { EventManager, BrowserElement, ImageExportOptions, ImageReadyFunction } from "../browser-ui";
 import { ChartSVGElement } from "./util";
+import { FontSpec } from "../ui";
 import { ChartLegend, LegendSpec } from "./legend";
 import { TooltipOptions } from "./tooltip";
 import { ChartDimensions } from "./definitions";

package/types/charts/definitions.d.ts

@@ -3,7 +3,7 @@ import { AxisTitleAlignment, AxisTitleSpec } from "./base-chart";
 import { ChartSVGElement, SteppedScale } from "./util";
 import { XYChartOptions } from "./base-xy-chart";
 import { DualValueSeriesOptions } from "./series";
-import { FontSpec } from "../browser-ui";
+import { FontSpec } from "../ui";
 /**
  * @internal
  */

package/types/charts/dual-value-chart.d.ts

@@ -1,8 +1,9 @@
 import { XYChart } from "./base-xy-chart";
 import { DualValueChartOptions, ValueAxis, ValueAxisDefinition } from "./definitions";
 import { ObjectData } from "../core";
-import { BrowserElement, FontSpec } from "../browser-ui";
+import { BrowserElement } from "../browser-ui";
 import { ChartSVGElement } from "./util";
+import { FontSpec } from "../ui";
 import { DualValueChartSeries, DualValueSeriesOptions } from "./series";
 import { DualValueAxisTooltip, TooltipOptions } from "./tooltip";
 /**

package/types/charts/legend.d.ts

@@ -1,4 +1,4 @@
-import { FontSpec } from "../browser-ui";
+import { FontSpec } from "../ui";
 /**
  * Constant identifying vertically stacked legend
  * @group Charts

package/types/charts/pie/pie-chart.d.ts

@@ -1,7 +1,8 @@
 import { SeriesBasedChart, SeriesBasedChartOptions } from "../series-based-chart";
 import { ObjectData } from "../../core";
 import { ChartSVGElement } from "../util";
-import { BrowserElement, FontSpec } from "../../browser-ui";
+import { BrowserElement } from "../../browser-ui";
+import { FontSpec } from "../../ui";
 import { ChartDimensions } from "../definitions";
 import { RealisedSeries, RecordBasedSeriesOptions } from "../series";
 import { CategoryValueTooltip, TooltipOptions } from "../tooltip";

package/types/charts/sankey/sankey.d.ts

@@ -1,6 +1,7 @@
 import { SankeyLayer } from './preprocessor';
 import { Node, Edge, Vertex, DataSource, VisuallyJsDefaultJSON } from "../../core";
-import { BrowserElement, BrowserUIModel, FontSpec } from "../../browser-ui";
+import { FontSpec } from "../../ui";
+import { BrowserElement, BrowserUIModel } from "../../browser-ui";
 import { ChartSVGElement } from "../util";
 import { BaseChart, BaseChartOptions } from "../base-chart";
 import { Tooltip, TooltipOptions } from "../tooltip";

package/types/charts/tooltip.d.ts

@@ -1,5 +1,6 @@
 import { PointXY, ElementFacade, AbstractEntry, ObjectData } from "../core";
-import { BrowserUiRecado, BrowserElement, FontSpec } from "../browser-ui";
+import { BrowserUiRecado, BrowserElement } from "../browser-ui";
+import { FontSpec } from "../ui";
 import { RealisedSeries } from "./series/definitions";
 import { DualValueChartSeries } from "./series";
 /**

package/types/charts/util.d.ts

@@ -1,6 +1,7 @@
-import { BrowserElement, FontSpec, FontStyle } from "../browser-ui";
+import { BrowserElement } from "../browser-ui";
 import { BaseChart } from "./base-chart";
 import { RectangleXY } from "../core";
+import { FontSpec, FontStyle } from "../ui";
 import { AxisCommon, CategoryAxis, ValueAxis } from "./definitions";
 /**
  * internal candidate for a stepped scale.

package/types/test-support/test-support.d.ts

@@ -788,9 +788,9 @@ export declare class TestHarness {
     private _addFromPaletteInit;
     private _addFromPalette;
     private _addFromPaletteASync;
-    dragFromPalette(palette: Palette<any>, selector: string, options?: any, metaKeys?: Record<string, boolean>): void;
-    dragFromPaletteAsync(palette: Palette<any>, selector: string, options?: any, metaKeys?: Record<string, boolean>): PaletteDragHarness;
-    tapFromPalette(palette: Palette<any>, selector: string, options?: any): void;
+    dragFromPalette(palette: Palette, selector: string, options?: any, metaKeys?: Record<string, boolean>): void;
+    dragFromPaletteAsync(palette: Palette, selector: string, options?: any, metaKeys?: Record<string, boolean>): PaletteDragHarness;
+    tapFromPalette(palette: Palette, selector: string, options?: any): void;
     /**
      * Trigger a mousedown event on the edge with the given id.
      * @param edgeId

package/types/ui/common/overlay.d.ts

@@ -1,7 +1,7 @@
 import { PaintStyle } from './paint-style';
 import { OverlayEvents, OverlayVisibility } from "../core/overlay/overlay";
-import { FontSpec } from "../../browser-ui";
 import { Edge } from "../../core";
+import { FontSpec, LabelBackgroundStyle } from "../core";
 /**
  * Base options for an overlay.
  * @group Edges
@@ -93,7 +93,11 @@ export interface LabelOverlayOptions extends OverlayOptions {
      */
     font?: FontSpec;
     /**
-     * Sets whether the label can be rotated to match the gradient of the connector at that location at which it is positioned. If you supply boolean true here, the label will be made rotatable in "legible" mode, in which VisuallyJs ensures that the label is always easy to read, by avoiding rotating the text so that it is upside down or other awkward to read. You can set "strict" mode, which will rotate the label to the appropriate angle regardless of whether or not it will make the label difficult to read.
+     * Optional style for the label's background.
+     */
+    backgroundStyle?: LabelBackgroundStyle;
+    /**
+     * Sets whether the label can be rotated to match the gradient of the connector at that location at which it is positioned. If you supply boolean true here, the label will be made rotatable, in "legible" mode - in which VisuallyJs ensures that the label is legible by avoiding rotating the text so that it is upside down or otherwise awkward to read. You can set "strict" mode, which will rotate the label to the appropriate angle regardless of whether or not it will make the label difficult to read. If you supply boolean false, the label will not be rotatable in any situation.
      */
     rotatable?: boolean | "legible" | "strict" | null;
 }

package/types/ui/common/paint-style.d.ts

@@ -1,3 +1,4 @@
+import { LineStyle } from "../core";
 /**
  * Basic style definition for an edge
  * @group UI
@@ -33,3 +34,9 @@ export interface PaintStyle {
      */
     gradient?: Array<[number, string]>;
 }
+/**
+ * @internal
+ * @param ls
+ * @param p
+ */
+export declare function $transferLineStyleToPaintStyle(ls: LineStyle, p: PaintStyle): void;

package/types/ui/core/core.d.ts

@@ -15,7 +15,7 @@ import { GroupMapping, NodeMapping, NodeOrGroupMapping, PortMapping, VertexMappi
 import { Magnetizer, MagnetizeResult } from "../../core/magnetizer";
 import { AbstractLayout, LayoutParameters, LayoutResultSet } from "../../core/layout/abstract-layout";
 import { DataSource, EdgeAddedParams, EdgeRemovedParams, EdgeSourceChangedParams, EdgeTargetChangedParams, Extents, FilterableDataset, Grid, GroupAddedParams, GroupMemberAddedParams, GroupMemberRemovedParams, GroupRemovedParams, NodeAddedParams, NodeRemovedParams, OptimisticEventGenerator, PointXY, RectangleXY, VisuallyJsSelection, Size, VisuallyJsRenderer, VertexUpdatedParams, VisuallyJsModel, SaveOptions, Rotations, AbstractLayoutAdapter } from "../../core";
-import { DataHook, ElementType, EnclosedVerticesOptions, GroupContentAreaInfo, GroupResizeResult, IntersectingVerticesOptions, UICapabilities, UIExportOptions, UISaveData, ViewportBounds, ZoomToElementsOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions } from "./definitions";
+import { DataHook, ElementType, EnclosedVerticesOptions, FontStyle, GroupContentAreaInfo, GroupResizeResult, IntersectingVerticesOptions, UICapabilities, UIExportOptions, UISaveData, ViewportBounds, ZoomToElementsOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions } from "./definitions";
 import { GridProfile } from "./grid-profile";
 import { MagnetizeProfile } from "./magnetize-profile";
 import { UIPlugin, UIPluginOptions, UIPluginSpec } from "../plugins/definitions";
@@ -78,6 +78,30 @@ export interface LineStyle {
      * 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]>;
+    /**
+     * Label to show on the edge
+     */
+    label?: string;
+    /**
+     * Location for the label, defaults to 0.5
+     */
+    labelLocation?: number;
+    /**
+     * Font size to use; defaults to whatever the browser decides given the context
+     */
+    fontSize?: number;
+    /**
+     * Font style to use; defaults to whatever the browser decides given the context
+     */
+    fontStyle?: FontStyle;
+    /**
+     * Font size to use; defaults to whatever the browser decides given the context
+     */
+    fontFamily?: string;
 }
 /**
  * Base UI for apps and diagrams.
@@ -375,6 +399,13 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      */
     $_extractSimpleEdgeStyles(data: ObjectData, o: Record<string, any>): boolean;
     private _doRenderEdgeNew;
+    /**
+     * If simple edge styles are active, merge properties from the edge data on top of the given paint style.
+     * @param edge
+     * @param paintStyle
+     * @internal
+     */
+    $realiseEdgePaintStyle(edge: Edge, paintStyle: PaintStyle): PaintStyle;
     /**
      * @internal
      */

package/types/ui/core/definitions.d.ts

@@ -243,7 +243,13 @@ export interface UIExportOptions extends ExportOptions {
  * @category Input and Output
  */
 export interface UISaveData {
+    /**
+     * The current zoom level
+     */
     zoom: number;
+    /**
+     * Data exported from the model
+     */
     data: any;
 }
 /**
@@ -292,7 +298,15 @@ export interface ViewportBounds {
  * @category Model
  */
 export interface DataHook {
+    /**
+     * Notification that data has been loaded.
+     * @param d
+     */
     load: (d: UISaveData) => any;
+    /**
+     * Notification that data is being saved. Your hook can write its data to `d`.
+     * @param d
+     */
     save: (d: UISaveData) => any;
 }
 /**
@@ -578,4 +592,39 @@ export declare enum UICapabilities {
     vertexResize = "vertexResize",
     vertexDrawing = "vertexDrawing"
 }
+/**
+ * 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;
+}
 export {};

package/types/ui/core/overlay/custom-overlay.d.ts

@@ -1,6 +1,6 @@
 import { Overlay } from "./overlay";
 import { UICore } from "../core";
-import { OverlayOptions } from "../../common";
+import { InternalOverlayOptions, OverlayOptions } from "../../common";
 import { Connection } from "../connector/connection-impl";
 import { Edge, ObjectData, VisuallyJsModel } from "../../../core";
 import { BrowserUI } from "../../../browser-ui";
@@ -45,7 +45,7 @@ export declare class CustomOverlayImpl<EL> extends Overlay<EL> implements Custom
     rotatable: boolean | "strict" | "legible" | null;
     constructor(instance: UICore<EL>, connection: Connection<EL>, p: CustomOverlayOptions<EL>);
     type: string;
-    updateFrom(d: any, context: ObjectData): void;
+    updateFrom(d: InternalOverlayOptions, context: ObjectData): void;
 }
 export interface CustomOverlayHolder<EL> extends CustomOverlayImpl<EL> {
     contentElement: EL;

package/types/ui/core/overlay/label-overlay.d.ts

@@ -1,15 +1,15 @@
 import { Overlay } from "./overlay";
-import { UICore } from "../core";
+import { LineStyle, UICore } from "../core";
 import { LabelOverlayOptions } from "../../common";
 import { Connection } from "../connector/connection-impl";
 import { ObjectData } from "../../../core";
-import { FontSpec } from "../../../browser-ui";
+import { FontSpec } from "../definitions";
 /**
  * An overlay that draws some text. By default this overlay will use an HTML element, and that element's parent will be the surface canvas, unless the container is an SVG element, in which case the overlay will use an SVG element. You can set `useHTMLElement:false` in the options if you want the overlay to use an SVG element regardless of the container element type.
  * @group Edges
  * @category Overlays
  */
-export declare class LabelOverlay<EL> extends Overlay<EL> {
+export declare class LabelOverlay<EL> extends Overlay<EL, LabelOverlayOptions> {
     private instance;
     connection: Connection<EL>;
     label: string | Function;
@@ -18,11 +18,12 @@ export declare class LabelOverlay<EL> extends Overlay<EL> {
     useHTMLElement: boolean;
     rotatable: boolean | string;
     font: FontSpec;
+    backgroundStyle: any;
     constructor(instance: UICore<EL>, connection: Connection<EL>, p: LabelOverlayOptions);
     isSimpleShape: boolean;
     getLabel(): string;
     setLabel(l: string | Function): void;
-    updateFrom(d: any, context: ObjectData): void;
+    updateFrom(d: LabelOverlayOptions, context: ObjectData): void;
 }
 /**
  * @internal
@@ -35,4 +36,4 @@ export declare function isLabelOverlay<EL>(o: Overlay<EL>): o is LabelOverlay<EL
  * @param data
  * @internal
  */
-export declare function $updateLabelOverlayFont(lo: LabelOverlay<any>, data: ObjectData): void;
+export declare function $updateLabelOverlayFont(lo: LabelOverlay<any>, data: ObjectData & LineStyle): void;

package/types/ui/core/overlay/overlay.d.ts

@@ -62,7 +62,7 @@ export declare function setOverlayLocation(o: Overlay<any>, l: number | string):
  * @category Overlays
  * @internal
  */
-export declare abstract class Overlay<EL> {
+export declare abstract class Overlay<EL, O extends OverlayOptions = OverlayOptions> {
     connection: Connection<EL>;
     id: string;
     abstract type: string;
@@ -81,8 +81,8 @@ export declare abstract class Overlay<EL> {
      * @param p
      */
     ignoreTypes: boolean;
-    constructor(connection: Connection<EL>, p: OverlayOptions);
-    abstract updateFrom(opts: any, context: ObjectData): void;
+    constructor(connection: Connection<EL>, p: O);
+    abstract updateFrom(opts: O, context: ObjectData): void;
     abstract isSimpleShape: boolean;
 }
 /**

package/types/ui/core/params.d.ts

@@ -1,5 +1,6 @@
 import { ConnectorSpec, PaintStyle, OverlaySpec, AnchorSpec, LightweightAnchor } from "../common";
 import { Extents, PointXY, Size, Edge, Group, Node, AbstractLayout, GradientSpec } from "../../core";
+import { LabelBackgroundStyle } from "./view";
 /**
  * Options for the `connect` call on a UICore
  * @internal
@@ -41,6 +42,10 @@ export interface ConnectParams<E> {
      * When true, the label will be rotated so that it is at the same angle as the slope of the connector at the point at which the label is located.
      */
     labelsRotatable?: boolean | "strict" | "legible" | null;
+    /**
+     * Optional style for the label's background. This is ignored if `useHTMLLabel` is set to true.
+     */
+    labelBackgroundStyle?: LabelBackgroundStyle;
     /**
      * Spec for the connector used to paint the connection.
      */

package/types/ui/core/view/edge-options.d.ts

@@ -4,7 +4,45 @@ import { AnchorSpec, ConnectorSpec, OverlaySpec, PaintStyle } from "../../common
 import { OverlayVisibility } from "../overlay/overlay";
 import { EdgeEventOptions } from "./events";
 import { LineStyle } from "../core";
-import { FontSpec } from "../../../browser-ui";
+import { FontSpec } from "../definitions";
+/**
+ * Defines the style for the background of a label overlay.
+ * @group Edges
+ */
+export interface LabelBackgroundStyle {
+    /**
+     * Fill color for the background.
+     */
+    fill?: string;
+    /**
+     * Opacity for the background.
+     */
+    opacity?: number;
+    /**
+     * Padding to leave around the label. Defaults to 5.
+     */
+    padding?: number;
+    /**
+     * Horizontal radius for the background rectangle's corners.
+     */
+    rx?: number;
+    /**
+     * Vertical radius for the background rectangle's corners. If you provide `rx` but not this, `ry` will take the value of `rx`.
+     */
+    ry?: number;
+    /**
+     * Stroke color for the background.
+     */
+    stroke?: string;
+    /**
+     * Stroke width for the background.
+     */
+    strokeWidth?: number;
+    /**
+     * Stroke opacity for the background.
+     */
+    strokeOpacity?: number;
+}
 /**
  * Definition of the function you can provide as `deleteConfirm` on an edge definition. VisuallyJs gives you the edge to be possibly deleted and the pointer event that instigated the deletion. If you wish to delete the edge you must invoke the `proceed()` function.
  * @group Edges
@@ -18,7 +56,7 @@ export type EdgeDeleteConfirmationFunction = (params: {
  * @group Components
  * @category View
  */
-export interface EdgeMapping extends BaseViewObjectMapping, LineStyle {
+export interface EdgeMapping extends BaseViewObjectMapping, Omit<LineStyle, 'fontSize' | 'fontStyle' | 'fontFamily'> {
     /**
      * Name/definition of the connector to use. If you omit this, the default connector will be used.
      */
@@ -79,6 +117,10 @@ export interface EdgeMapping extends BaseViewObjectMapping, LineStyle {
      * Optional spec for label font. Will use browser defaults if not specified (or CSS, but remember that CSS is not taken into account when you export an SVG from a diagram or an app using an SVG container)
      */
     labelFont?: FontSpec;
+    /**
+     * Optional style for the label's background. This is ignored if `useHTMLLabel` is set to true.
+     */
+    labelBackgroundStyle?: LabelBackgroundStyle;
     /**
      * Sets whether the label can be rotated to match the gradient of the connector at that location at which it is positioned. If you supply boolean true here, the label will be made rotatable in "legible" mode, in which VisuallyJs ensures that the label is always easy to read, by avoiding rotating the text so that it is upside down or other awkward to read. You can set "strict" mode, which will rotate the label to the appropriate angle regardless of whether or not it will make the label difficult to read.
      */

package/types/ui/property-mappings/definitions.d.ts

@@ -10,6 +10,10 @@ export interface PropertyMapping<D> {
      * Property or properties to map. If an array is provided, values are matched against all properties in the order given.
      */
     property: string | Array<string>;
+    /**
+     * Optional name to use for the mapping in the UI (for example, in an inspector)
+     */
+    name?: string;
     /**
      * A map whose keys are expected values for the given property (or a space-separated string of values if an array of properties was provided), and the values are the type to apply.
      */

package/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.5";
+export declare const VERSION = "1.2.7";