@visuallyjs/browser-ui 1.2.6 → 1.2.8

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

@@ -1,7 +1,8 @@
 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 type { BindableViewEvent } from "../../../ui";
 import { SurfaceSaveData } from "../definitions";
 import { BrowserElement } from "../../util";
 import { PaletteMode, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "../../components/palette/palette-options";
@@ -9,8 +10,67 @@ 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";
+import { GraphPropagationEnginePluginOptions } from "../../plugins";
+import type { BrowserUIModel } from "../../browser-ui";
+import type { BrowserUI } from "../../browser-visuallyjs-instance";
+import type { Diagram } from "./diagram";
+/**
+ * Payload passed to a cell template event callback.
+ * @group Diagrams
+ * @category Events
+ */
+export interface DiagramCellTemplateEventCallbackPayload<E extends Event = Event> {
+    /**
+     * The diagram cell whose rendered template contained the matching event target.
+     */
+    cell: DiagramCell;
+    /**
+     * The backing vertex for the cell.
+     */
+    vertex: Node | Group;
+    /**
+     * The original browser event.
+     */
+    event: E;
+    /**
+     * The element inside the rendered shape template that matched the configured selector.
+     */
+    eventTarget: BrowserElement;
+    /**
+     * The diagram that owns the cell.
+     */
+    diagram: Diagram;
+    /**
+     * The underlying VisuallyJs model.
+     */
+    model: BrowserUIModel;
+    /**
+     * The UI that rendered the diagram.
+     */
+    ui: BrowserUI;
+}
+/**
+ * Callback invoked for an event on an element inside a rendered cell template.
+ * @group Diagrams
+ * @category Events
+ */
+export type DiagramCellTemplateEventCallback<E extends Event = Event> = (p: DiagramCellTemplateEventCallbackPayload<E>) => any;
+/**
+ * A map of event names to callbacks for a single selector inside a rendered cell template.
+ * @group Diagrams
+ * @category Events
+ */
+export type DiagramCellTemplateEventMap = {
+    [K in BindableViewEvent]?: DiagramCellTemplateEventCallback;
+} & Record<string, DiagramCellTemplateEventCallback | undefined>;
+/**
+ * A map of CSS selectors to event/callback maps for elements inside rendered cell templates.
+ * @group Diagrams
+ * @category Events
+ */
+export type DiagramCellTemplateEvents = Record<string, DiagramCellTemplateEventMap>;
 /**
  * Options for the {@link Diagram.addLink method}
  * @group Diagrams
@@ -172,6 +232,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 +256,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
@@ -320,6 +413,26 @@ export interface DiagramOptions {
          * Optional event mappings for all cells.
          */
         events?: NodeEventOptions<any>;
+        /**
+         * Optional delegated event mappings for elements inside rendered cell templates. Keys are CSS selectors
+         * that match elements inside a shape template, and values are maps of event names to callbacks.
+         *
+         * The callback receives the {@link DiagramCell} associated with the matching element, plus the backing
+         * vertex, the original browser event, the matching element, the diagram, the model and the UI.
+         *
+         * For example:
+         *
+         * ```ts
+         * cells:{
+         *   templateEvents:{
+         *     ".delete":{
+         *       tap:({cell}) => cell.remove()
+         *     }
+         *   }
+         * }
+         * ```
+         */
+        templateEvents?: DiagramCellTemplateEvents;
         /**
          * Optional behaviour mapping for groups in the diagram. For many setups, you won't need to use this, as the other options in the `cells` config are quite extensive and can be used to configure many things. For some setups you may need to provide config for group behaviour, such as whether or not vertices can be dragged in/out, whether the group should be resizable, etc. You can also provide group-specific event mappings here. Any `events` you provide here will be merged with the internal event registrations made by the diagram, but if you provide a `template` it will be ignored.
          */
@@ -333,6 +446,9 @@ export interface DiagramOptions {
          * Optional mapping for nodes in the diagram. For many setups, you won't need to use this, as the other options in the `cells` config are quite extensive and can be used to configure many things. Any `events` you provide here will be merged with the internal event registrations made by the diagram, but if you provide a `template` it will be ignored.
          */
         nodes?: DiagramNodeMapping;
+        /**
+         * Options controlling how resize functions.
+         */
         resize?: {
             /**
              * Width/height to use for resize handles. Defaults to 20 pixels.
@@ -450,6 +566,10 @@ export interface DiagramOptions {
      * Controls whether line crossings are shown by a visual cue. Defaults to false. You can either supply a boolean and have the panbuttons plugin initialize with its default settings, or supply your own settings.
      */
     lineCrossings?: boolean | LineCrossingsPluginOptions;
+    /**
+     * If provided, a graph propagation engine will be used to propagate changes to the graph.
+     */
+    graphPropagation?: GraphPropagationEnginePluginOptions<any>;
 }
 /**
  * Options for a palette for a diagram.
@@ -514,7 +634,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/diagrams/diagram.d.ts

@@ -33,6 +33,7 @@ export declare class Diagram {
     _mediator: DiagramActionMediator;
     constructor(model: BrowserUIModel, container: BrowserElement, options: DiagramOptions);
     private _createView;
+    private _bindTemplateEvents;
     /**
      * @internal
      * @param v

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

@@ -15,9 +15,10 @@ export declare const ATTRIBUTE_DATA_SHAPE_ID = "data-shape-id";
  */
 export declare class ShapePalette<T extends ObjectData> {
     private ui;
+    _$_iconTemplateEngine: BrowserUiRecado;
     _$_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/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/core/graph-propagation/definitions.d.ts

@@ -0,0 +1,41 @@
+import { Node } from "../model/graph";
+/**
+ * Terminal id used when an edge connects directly to a node or group instead of a named port.
+ * For example, junctions and probes use this as their implicit input/output terminal.
+ */
+export declare const DEFAULT_TERMINAL = "default";
+/**
+ * Result returned by a node calculator.
+ * @typeParam ValueType Defines the type of the node's output values.
+ * @typeParam StateType Defines the type of the node's internal state.
+ */
+export type NodeEvaluation<ValueType, StateType = unknown> = {
+    /**
+     * Values made available to downstream edges, keyed by terminal id. Keys are port ids such as"out"`, or `DEFAULT_TERMINAL` for direct node connections
+     */
+    outputs?: Record<string, ValueType | undefined>;
+    /**
+     * Derived node state (such as display text, validation details, or cached intermediate results) written to the node's configured state property.
+     */
+    state?: StateType;
+};
+/**
+ * Helper API passed to calculators so they can read upstream values without knowing graph details.
+ * @typeParam ValueType Defines the type of the node's output values.
+ */
+export interface EvaluationContext<ValueType> {
+    /**
+     * Reads the value connected to one input terminal. Omit `terminalId` or pass `DEFAULT_TERMINAL` for direct node-body connections. Otherwise terminalId is assumed to map to a port ID on the node.
+     */
+    input: (terminalId?: string) => ValueType | undefined;
+    /**
+     * Reads named input terminals in order. When omitted, reads every edge connected directly to the node body, in edge order.
+     */
+    inputs: (terminalIds?: string[]) => Array<ValueType | undefined>;
+}
+/**
+ * Evaluates a node from its current upstream inputs - the function has access to the `input(...)` and `inputs(..)` methods on the evaluation context that is passed in, for resolving the input values on the node.
+ * @typeParam ValueType Defines the type of the node's output values.
+ * @typeParam StateType Defines the type of the node's internal state.
+ */
+export type Calculator<ValueType, StateType = unknown> = (node: Node, context: EvaluationContext<ValueType>) => NodeEvaluation<ValueType, StateType> | undefined;

package/types/core/graph-propagation/engine.d.ts

@@ -0,0 +1,63 @@
+import { VisuallyJsModel } from "../toolkit";
+import { Calculator } from "./definitions";
+/**
+ * Full calculation output before it is written back to the model.
+ */
+type CalculationResult<ValueType, StateType> = {
+    /** Propagated values keyed by concrete vertex id, for example `nodeId.out`. */
+    values: Map<string, ValueType>;
+    /** Computed node states keyed by node or group id. */
+    states: Map<string, StateType>;
+};
+/**
+ * Propagates computed values through a VisuallyJS graph.
+ *
+ * The engine treats each node or group as the unit of computation. A calculator is registered per
+ * vertex type, reads upstream values through an `EvaluationContext`, and returns output terminal
+ * values plus optional internal state for that vertex.
+ *
+ * Output keys are terminal ids: use a port id for named ports, or `DEFAULT_TERMINAL` for edges
+ * connected directly to the node/group body. During propagation, the engine maps those terminal ids
+ * back to concrete graph vertices and writes propagated values to `property` on target vertices.
+ *
+ * Calculator `state` is not propagated across edges. It is written to the owning node/group under
+ * `stateProperty`, making it suitable for display data, validation results, summaries, or cached
+ * derived values.
+ *
+ * To integrate, define calculators keyed by node/group type, construct the engine with a
+ * `VisuallyJsModel`, and read propagated values from vertices using `property` and computed state
+ * from nodes/groups using `stateProperty`.
+ */
+export declare class GraphPropagationEngine<ValueType, StateType = unknown> {
+    private model;
+    private calculators;
+    private _suspended;
+    private _property;
+    private _stateProperty;
+    /**
+     * Creates a propagation engine and binds it to model update events.
+     *
+     * Edge additions/removals and data updates on connected vertices trigger recalculation on the
+     * next animation frame. Updates produced by the engine are applied in one model transaction.
+     *
+     * @param model Model whose nodes, groups, ports, and edges should participate in propagation.
+     * @param calculators Calculator functions keyed by node/group type.
+     * @param property Data property used for propagated vertex values. Defaults to `"value"`.
+     * @param stateProperty Data property used for computed node/group state. Defaults to `"computed"`.
+     */
+    constructor(model: VisuallyJsModel, calculators: Record<string, Calculator<ValueType, StateType>>, property?: string, stateProperty?: string);
+    /**
+     * Runs propagation immediately and writes the result back to the model.
+     *
+     * `knownValues` can seed the value cache for this run. Keys must be concrete vertex ids, such
+     * as a node id or full port id. This is useful when an edited source value is already known and
+     * should be used before the model has been fully re-read.
+     */
+    calculate(knownValues?: Record<string, ValueType>): CalculationResult<ValueType, StateType>;
+    /**
+     * The main entry point for the calculation. Iterates through all nodes, resolves their new state, and updates the model if the state has changed.
+     */
+    private _calculate;
+    private _apply;
+}
+export {};

package/types/core/graph-propagation/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./definitions";
+export * from "./engine";

package/types/core/index.d.ts

@@ -8,6 +8,7 @@ export * from './model/path';
 export * from './model/anchor';
 export * from './datamodel/data-model';
 export * from './datamodel/vertex-definition';
+export * from './graph-propagation';
 export * from './layout';
 export * from "./geom";
 export * from './color-generator';

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;