@visuallyjs/browser-ui 1.2.6 → 1.2.7

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/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.6";
+export declare const VERSION = "1.2.7";