@visuallyjs/browser-ui 1.2.4 → 1.2.6

package/types/browser-ui/pan-zoom.d.ts

@@ -79,11 +79,12 @@ export declare class PanZoom {
     wheelCssFilterSpec: string;
     wheelFilter: (e: MouseEvent) => boolean;
     wheelCssFilter: (e: MouseEvent) => boolean;
-    wheelZoomRequiresMetaKey: boolean;
+    wheelRequiresMetaKey: boolean;
     wheelDirection: number;
     wheelSensitivity: number;
     wheelPan: boolean;
     wheelPanAxis: PanAxis;
+    _shiftToSwitchPanZoom: boolean;
     background: PanZoomBackground;
     fixedLayer: FixedLayer;
     _mouseMove: Function;

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

@@ -62,5 +62,6 @@ export declare class Paper extends BrowserUI {
     zoomOut(canvasLoc?: PointXY): void;
     zoomIn(canvasLoc?: PointXY): void;
     getVisibleCanvasBounds(): RectangleXY;
+    $isConsideredCanvasEvent(e: MouseEvent): boolean;
 }
 export declare function createPaper(container: BrowserElement, options?: PaperOptions, modelOptions?: ModelOptions, data?: any): Paper;

package/types/browser-ui/positioning-and-sizing-utils.d.ts

@@ -14,6 +14,11 @@ export declare const ATTRIBUTE_TRANSFORM = "transform";
  */
 export declare function getElementSize(el: Element): Size;
 export declare function getPosition(el: BrowserElement, knownElementSize?: Size): PointXY;
+/**
+ * If the given point p is not null and neither p.x nor p.y are NaN, returns p. Otherwise, returns a point with x and y both set to 0.
+ * @param p
+ */
+export declare function nullSafePoint(p: PointXY): PointXY;
 export declare function setPosition(el: BrowserElement, p: PointXY): void;
 /**
  * Gets the position of an element relative to the some other SVG,

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

@@ -1,4 +1,4 @@
-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";
@@ -41,6 +41,10 @@ export interface ShapeType {
      * Label to use for the shape type when displayed in a palette
      */
     label?: string;
+    /**
+     * Optional label padding when labels are top/bottom to use for this shape type. The shape library will default to any labelPadding set on the shape set, or the system default.
+     */
+    labelPadding?: number;
     /**
      * Can be shown in a palette to give a user more information about a shape
      */
@@ -79,8 +83,7 @@ export interface ShapeType {
      */
     icon?: string;
     /**
-     * A list of configurable properties exposed by this shape's template.
-     * An inspector can read this array to automatically generate an editing UI.
+     * A list of configurable properties exposed by this shape's template. An inspector can read this array to automatically generate an editing UI.
      */
     properties?: Array<ShapePropertyDefinition>;
     /**
@@ -92,14 +95,19 @@ export interface ShapeType {
      */
     labelPosition?: LabelPosition;
     /**
-     * optional name of the group to which the shape belongs.
+     * Optional name of the group to which the shape belongs. This is not the same concept as a "group" inside the data model: this is a grouping of shape types, used to organise them in the UI.
      */
     group?: string;
     /**
-     * Optional blueprint for child vertices and edges to be created when this group is added.
-     * Only relevant when objectType is Group.
+     * Optional blueprint for child vertices and edges to be created when this group is added. Only relevant when objectType is Group.
      */
     members?: GroupTemplate;
+    /**
+     * For groups, indicates that the group is locked and no edits can occur to the child vertices. This is intended for use with the `members` option, for groups that gather a set of elements together to form a more complex building block. As an example in the real world, consider a Binary Adder: it is a group of logic gates whose relationships are fixed.
+     */
+    locked?: boolean;
+}
+export interface RealisedShapeType extends ShapeType {
 }
 /**
  * Start placement for shape icon - in x axis this means the left; in y axis it means the top.
@@ -137,6 +145,10 @@ export interface ShapeSet {
     icons?: Array<IconDefinition>;
     defs?: Record<string, string>;
     children?: Array<ShapeSet>;
+    /**
+     * Optional label padding when labels are top/bottom to use as a default for all shapes. Individual shapes can set their own values. This defaults to 10 pixels.
+     */
+    labelPadding?: number;
     /**
      * A list of configurable properties exposed by shapes in this set.
      */
@@ -148,17 +160,18 @@ export interface ShapeSet {
 export interface RenderedShapeSet extends ShapeSet {
     children: Array<RenderedShapeSet>;
     parent?: string;
+    shapes: Array<RealisedShapeType>;
 }
 /**
  * Defines a library that acts as a factory for shapes.
  * @internal
  */
 export interface ShapeLibrary<T extends ObjectData> {
-    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): ShapeType;
-    getShapeDefinition(type: string, set?: string): ShapeType;
+    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): RealisedShapeType;
+    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;
@@ -166,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;
@@ -176,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.
@@ -209,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
@@ -250,9 +271,29 @@ export interface ShapePropertyDefinition {
      */
     description?: string;
     /**
-     * For "number" types, optional min/max constraints.
+     * For "number" types, optional min constraints.
      */
     min?: number;
+    /**
+     * For "number" types, optional max constraints.
+     */
     max?: number;
+    /**
+     * Optional set of values to pick current value from
+     */
+    values?: Array<any>;
 }
 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,4 +1,4 @@
-import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, ShapeType, LabelPosition } from "./shape-library-definitions";
+import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, LabelPosition, RealisedShapeType, LabelBackgroundOptions } from "./shape-library-definitions";
 import { BrowserElement } from "../util";
 import { CustomTagOptions, Recado, AbstractEntry, ObjectData } from "../../core";
 import { IconDefinition } from "../icons";
@@ -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>;
@@ -187,12 +194,12 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
      * @param type
      * @param set
      */
-    getShapeDefinition(type: string, set?: string): ShapeType;
+    getShapeDefinition(type: string, set?: string): RealisedShapeType;
     /**
      * Gets the definition for some data object, using the default type/category parameters, or specific ones that you supply. May return null.
      * @internal
      */
-    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): ShapeType;
+    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): RealisedShapeType;
     /**
      * Gets the template for the given shape type in the given set. If no template is resolved then we return
      * DEFAULT_TEMPLATE (and log the issue to the console).
@@ -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/css-classes.d.ts

@@ -54,6 +54,14 @@ export declare const CLASS_PALETTE_SET_TITLE = "vjs-shape-library-palette-set-ti
  * @category CSS Classes
  */
 export declare const CLASS_PALETTE_SET_SHAPES = "vjs-shape-library-palette-set-shapes";
+/**
+ * Assigned to a group title element in the shape palette.
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SET_SHAPE_GROUP_TITLE = "vjs-shape-library-palette-shape-group-title";
 /**
  * When in `tap` mode, this class is added to the lasso used to draw new vertices
  * @cssClass

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

@@ -1,16 +1,15 @@
-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 { SurfaceSaveData } from "../definitions";
 import { BrowserElement } from "../../util";
-import { PaletteMode } from "../../components/palette/palette-options";
+import { PaletteMode, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "../../components/palette/palette-options";
 import { PanOptions, WheelOptions, ZoomOptions } from "../../pan-zoom-options";
 import { MiniviewPluginOptions, LassoPluginOptions, ResizingToolsModelUpdater, ResizingToolsHandlerFactory, DragGroupsPluginOptions, ResizingToolsResizeMethod, SnaplinesPluginOptions, PanButtonsPluginOptions, LineCrossingsPluginOptions } from "../plugins";
-import { EdgeSnapOptions } from "../../edge-handler-base";
+import { EdgeSnapOptions, EdgeInputMethod } from "../../edge-handler-base";
 import { DiagramActionMediator } from "./mediator";
 import { OnVertexAddedCallback, FontSpec } from "../../definitions";
-import { EdgeInputMethod } from "../../edge-input-handler";
 import { PreparedShape } from "../shape-palette-options";
 /**
  * Options for the {@link Diagram.addLink method}
@@ -66,6 +65,14 @@ export interface DiagramOptions {
      * Defaults to true, meaning the user can edit the diagram.
      */
     editable?: boolean;
+    /**
+     * Whether or not to allow rotation of elements being dragged from the palette. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
     edges?: {
         /**
          * Whether or not to disable drop targets on which an edge from some current source may not be dropped when drag starts. Defaults to true.
@@ -305,6 +312,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.
          */
@@ -459,9 +470,14 @@ export interface DiagramPaletteOptions {
      */
     dragSize?: Size;
     /**
-     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`.
+     * This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * 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.
      */
@@ -495,6 +511,15 @@ export interface DiagramPaletteOptions {
      * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the UI is set back to pan mode.
      */
     autoExitDrawMode?: boolean;
+    /**
+     * 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>;
+    /**
+     * 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
+     */
+    connectToPortsOnEdgeDrop?: boolean;
     /**
      * When true (which is the default), a newly dropped shape will be set as the underlying model's selection.
      */
@@ -515,6 +540,22 @@ export interface DiagramPaletteOptions {
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Save options for a Diagram

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

@@ -1,4 +1,4 @@
-import { ObjectData, PriorityQueue, SaveOptions, ModelOptions, Edge } from "../../../core";
+import { Group, ObjectData, PriorityQueue, SaveOptions, ModelOptions, Edge } from "../../../core";
 import { PropertyTracker, ZoomToFitOptions, ZoomToFitIfNecessaryOptions } from "../../../ui";
 import { BrowserElement } from "../../util";
 import { BrowserUIModel } from "../../browser-ui";
@@ -204,6 +204,16 @@ export declare class Diagram {
      * @tags zoom
      */
     zoomToFitIfNecessary(params?: ZoomToFitIfNecessaryOptions): void;
+    /**
+     * Mark a group as "locked" : edges inside of it cannot be detached, removed or have their paths edited, edges cannot be established to child vertices.
+     * @param groupIdOrGroup
+     */
+    lockGroup(groupOrGroupId: string | Group): void;
+    /**
+     * Unlock a group
+     * @param groupOrGroupId
+     */
+    unlockGroup(groupOrGroupId: string | Group): void;
 }
 /**
  * Create a new DiagramPalette in the given container element, and attach it to the given Diagram.

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

@@ -1,4 +1,4 @@
-import { Group, Vertex, Node, ObjectData, Size } from "../../../core";
+import { Group, Node, ObjectData, Size } from "../../../core";
 import { ShapeType } from "../../shape-library";
 import { BrowserElement } from "../../util";
 /**
@@ -13,42 +13,42 @@ export interface DiagramActionMediator {
      * @param shape
      * @param el
      */
-    canClone?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canClone?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be deletable in the UI. Defaults to true, meaning the delete icon will be present in the diagram tools when the vertex is selected.
      * @param v
      * @param shape
      * @param el
      */
-    canDelete?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canDelete?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be linkable via edge drag in the UI. Defaults to true, meaning the link icon will be present in the diagram tools when the vertex is selected.
      * @param v
      * @param shape
      * @param el
      */
-    canLink?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canLink?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be resizable in the UI. Defaults to true, meaning the resize handles will be present in the diagram tools when the vertex is selected.
      * @param v
      * @param shape
      * @param el
      */
-    canResize?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canResize?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be resizable in the UI. Defaults to true, meaning the rotate handle and leader will be present in the diagram tools when the vertex is selected.
      * @param v
      * @param shape
      * @param el
      */
-    canRotate?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canRotate?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be draggable in the UI. Defaults to true.
      * @param v
      * @param shape
      * @param el
      */
-    canDrag?: (v: Vertex, shape: ShapeType, el: BrowserElement) => boolean;
+    canDrag?: (v: Node | Group, shape: ShapeType, el: BrowserElement) => boolean;
     /**
      * Returns whether or not the given vertex should be droppable on the given target, which may either be another vertex (if `targetVertex` is set), or the diagram canvas (if `isOnCanvas` is set). This method will never be called with both `targetVertex` set an `isOnCanvas` true - it's one or the other.
      * @param v

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

@@ -53,7 +53,7 @@ export declare class Lasso {
     visibleOrigin: PointXY;
     size: Size;
     _generateLassoContent: (origin: PointXY, e: MouseEvent) => BrowserElement;
-    el: HTMLElement;
+    el: BrowserElement;
     _extentTrackerEl: BrowserElement;
     masks: Record<string, HTMLElement>;
     origin: PointXY;

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

@@ -1,8 +1,8 @@
-import { ResizingToolsPluginOptions, ResizeHandler, ResizeDirection } from "./definitions";
-import { Grid, PointXY, Group, Node, ObjectData, VisuallyJsModel, Size, Vertex, VertexUpdatedReason } from "../../../../core";
+import { ResizeDirection, ResizeHandler, ResizingToolsPluginOptions } from "./definitions";
+import { Grid, Group, Node, ObjectData, PointXY, Size, Vertex, VertexUpdatedReason, VisuallyJsModel } from "../../../../core";
 import { Surface } from "../../surface";
 import { BrowserElement } from "../../../util";
-import { ViewportElement, GroupMapping, ViewportGroupElement, GroupContentAreaInfo, GroupResizeResult } from "../../../../ui";
+import { GroupContentAreaInfo, GroupMapping, GroupResizeResult, ViewportElement, ViewportGroupElement } from "../../../../ui";
 import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
 import { ElasticGroupManager } from "../../elastic-group-manager";
 /**
@@ -108,6 +108,7 @@ export declare class ResizingToolsPlugin extends BaseBrowserUIPlugin implements
     destroy(): void;
     _handleDragHandlers: Record<string, ResizeHandler>;
     _borderDragHandlers: Record<string, ResizeHandler>;
+    $getRotationStopsArray(): Array<number>;
     initialise(surface: Surface, options: ResizingToolsPluginOptions): boolean;
     private _configureGroupParent;
     private _handleMouseDown;

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

@@ -1,7 +1,7 @@
 import { Group, ObjectData, Size, Node } from "../../core";
 import { ShapeLibrary } from "../shape-library";
 import { DataGeneratorFunction, OnVertexAddedCallback } from "../definitions";
-import { PaletteMode } from "../components";
+import { PaletteMode, AutoEdgeConnectOptions, CanDropOnEdgeFilter } from "../components";
 /**
  * Options for a shape palette.
  * @group Components
@@ -41,9 +41,13 @@ export interface ShapePaletteOptions<T extends ObjectData> {
      */
     selectAfterDrop?: boolean;
     /**
-     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`. This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Stroke width to use for shapes in palette. Defaults to 1.
      */
@@ -95,12 +99,36 @@ export interface ShapePaletteOptions<T extends ObjectData> {
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * 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>;
+    /**`
+     * 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
+     */
+    connectToPortsOnEdgeDrop?: boolean;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Defines a wrapper around a shape with some `type` and `category` that adds properties (to be used to define the shape's appearance) and, optionally, the shape's initial size.
  * @group Components
  * @category Shape Palette
- * @internal
  */
 export interface PreparedShape {
     /**

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

@@ -18,6 +18,7 @@ export declare class ShapePalette<T extends ObjectData> {
     _$_templateEngine: BrowserUiRecado;
     _$_palette: Palette<ObjectData>;
     _$_userDataGenerator: DataGeneratorFunction<T>;
+    _$_showGroups: boolean;
     /**
      * @internal
      */

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

@@ -9,7 +9,6 @@ import { Base, Node, Group, Edge, Port, Vertex, ObjectData, VisuallyJsSelection,
 import { Connection, SupportsElementDragging, DragOptions, Overlay, ViewportBounds, UIExportOptions, ZoomToFitIfNecessaryOptions, ZoomToFitOptions, ZoomToElementsOptions, ViewportNodeElement, ViewportElement, ViewportGroupElement, CenterContentOptions, AlignContentOptions, AlignContentToFaceOptions, CenterContentHorizontallyOptions, CenterContentVerticallyOptions, VertexDragFilter } from "../../ui";
 import { BrowserUI } from "../browser-visuallyjs-instance";
 import { BrowserElement } from "../util";
-import { EdgeInputMethod } from "../edge-input-handler";
 import { ModelEventCallback, SurfaceEvents, SurfaceMode, SurfaceSaveData, SurfaceVertexCloneOptions } from "./definitions";
 import { EdgePathEditor } from "../connector-editors";
 import { ConnectorEditorActivateParams } from "../connector-editor";
@@ -17,6 +16,7 @@ import { ElementDragHandler2, InternalDragGroupSpec } from "../element-drag-hand
 import { Background, DragGroupSpec, SupportsPathEditing, SupportsViewportManipulation, ZoomToExtentsOptions } from "../definitions";
 import { BrowserUIModel } from "../browser-ui";
 import { MiniviewPluginOptions } from "./plugins";
+import { EdgeInputMethod } from "../edge-handler-base";
 /**
  * Provides a canvas on which nodes, groups and edges can be rendered, with support for pan/zoom, layouts and various plugins. This is not a class that API users should instantiate directly: for users of a library integration, a Surface will be created internally by the appropriate component; for users of vanilla VisuallyJs, a Surface is created either via the {@link createSurface} factory method, or via a `render` call on an instance of the {@link BrowserUIModel}.
  * @group Components
@@ -72,6 +72,14 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      * @internal
      */
     $groupRemoved(deletion: GroupRemovedParams): ViewportGroupElement<BrowserElement>;
+    /**
+     * Returns whether or not the given event is considered for all practical reasons to have occurred on the surface canvas. Tests if the event target is the surface root or canvas element, or if the panZoom considers it to be a background element.
+     *
+     * This method is used when deciding to fire a canvas click event, and also by the lasso, to make the decision to switch to auto arm.
+     * @internal
+     * @param e
+     */
+    $isConsideredCanvasEvent(e: MouseEvent): boolean;
     /**
      * @internal
      */
@@ -271,6 +279,12 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
      * @param els Elements to remove from drag groups.
      */
     removeFromDragGroup(...els: Array<string | BrowserElement | Node | Group>): void;
+    /**
+     * Remove the given viewport element from a drag group it may be in. This method can be invoked after an element has been removed and it has no managed element tracked anymore, so internal invocations go through this method rather than the one above.
+     * @param vel
+     * @private
+     */
+    private _removeFromDragGroup;
     /**
      * Sets the active/passive state for the given element(s) in their respective drag groups (if any). You don't need to supply the drag group id, as elements can only be in one drag group anyway.
      * @param state true for active, false for passive.

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/core/datasource.d.ts

@@ -38,7 +38,7 @@ export interface DataSource extends FilterableDataset {
     getPortType(port: ObjectData): string;
     getPortId(port: ObjectData): string;
     getDescendants(vertex: Group): Array<Node | Group>;
-    getAncestors(vertex: Node | Group): Array<Group>;
+    getAncestors(vertex: Vertex): Array<Group>;
     isAncestor(focus: Node | Group, possibleAncestor: Group): boolean;
     isDescendantGroup(possibleDescendant: Group, ancestor: Group): boolean;
     getEdgeCount(): number;

package/types/core/geom.d.ts

@@ -310,6 +310,12 @@ export declare function clampAngle(angle: number): number;
 export interface RotatedRectangle extends RectangleXY {
     r?: number;
 }
+/**
+ * Returns the four corner points of a rotated rectangle.
+ * @param rect The rotated rectangle.
+ * @returns An array of four PointXY objects representing the corners.
+ */
+export declare function getRotatedCorners(rect: RotatedRectangle): PointXY[];
 /**
  * Determines if two rotated rectangles intersect using the Separating Axis Theorem (SAT).
  * @param r1 The first rotated rectangle.