@visuallyjs/browser-ui 1.2.3 → 1.2.5

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;
@@ -183,6 +184,7 @@ export declare class PanZoom {
     private _apparentOffset;
     private _canStartPanning;
     private handlers;
+    private _endPan;
     private _call;
     /**
      * Programmatically report a down event in order to kick the widget into action.
@@ -499,7 +501,7 @@ export declare class PanZoom {
      */
     mapEventLocation(event: MouseEvent): PointXY;
     /**
-     * Sets whether or not the component should respond to mouse events.
+     * Sets whether or not the component should respond to mouse events. Resets any active pan operation - this can be invoked via the lasso arming itself after a long press.
      * @param state Whether or not to respond to mouse events.
      */
     setEnabled(state: boolean): void;

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

@@ -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,14 +160,15 @@ 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;
@@ -250,9 +263,16 @@ 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";

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 } from "./shape-library-definitions";
 import { BrowserElement } from "../util";
 import { CustomTagOptions, Recado, AbstractEntry, ObjectData } from "../../core";
 import { IconDefinition } from "../icons";
@@ -187,12 +187,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).

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

@@ -4,13 +4,12 @@ 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.
@@ -459,9 +466,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 +507,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 +536,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-plugin.d.ts

@@ -59,6 +59,14 @@ export interface LassoPluginOptions extends BrowserUIPluginOptions {
      * Optional setting for whether lasso inside groups is enabled - it is by default. Setting this to `false` will mean that the user cannot lasso items inside a group. Setting to `"metaKey"` will mean that lasso is supported inside groups if the user is holding the meta key down (ie the Window key, or Cmd on macs).
      */
     enableInGroups?: false | true | "metaKey";
+    /**
+     * Defaults to false. If true, the lasso will arm itself after a long press.
+     */
+    autoArm?: boolean;
+    /**
+     * Timeout in ms for autoArm long press. Defaults to 500ms.
+     */
+    armTimeout?: number;
 }
 /**
  * A Surface plugin that allows the user to select multiple elements with the mouse.

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

@@ -3,6 +3,9 @@ import { ViewportElement } from "../../../../ui";
 import { BrowserElement } from "../../../util";
 import { PointXY, Size } from "../../../../core";
 import { AutoPanHandler } from "../../../auto-pan-handler";
+/**
+ * Options for a lasso
+ */
 export interface LassoOptions {
     canvas: Element;
     onStart?: (pagePosition: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent, viewportElement: ViewportElement<BrowserElement> | null) => any;
@@ -14,6 +17,9 @@ export interface LassoOptions {
      * @param e
      */
     onClick?: (p: PointXY, e: MouseEvent) => any;
+    /**
+     * Set this to true to have the lasso drawn as set of overlays which mask the whole browser window except for the lassoed area.
+     */
     invert?: boolean;
     surface: Surface;
     filter?: ((e: MouseEvent) => boolean) | string;
@@ -34,12 +40,20 @@ export interface LassoOptions {
      * Defaults to true, meaning the canvas will pan automatically to track the lasso
      */
     autoPan?: boolean;
+    /**
+     * Defaults to false. If true, the lasso will arm itself after a long press.
+     */
+    autoArm?: boolean;
+    /**
+     * Timeout in ms for autoArm long press. Defaults to 500ms.
+     */
+    armTimeout?: number;
 }
 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;
@@ -69,6 +83,10 @@ export declare class Lasso {
     _enableInGroups: false | true | "metaKey";
     _generatedLassoContent: BrowserElement;
     _lastPageLocation: PointXY;
+    _autoArm: boolean;
+    _armTimeout: number;
+    _armTimer: any;
+    _armClickTriggered: boolean;
     constructor(options: LassoOptions);
     /**
      * list of selectors that should be filtered regardless of user preference

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/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.

package/types/core/io.d.ts

@@ -29,7 +29,7 @@ export type Parser = (data: any, instance: VisuallyJsModel, parameters?: any) =>
  */
 export type Exporter = (instance: VisuallyJsModel, parameters: any) => any;
 /**
- * The default type that represents an edge in a dataset to load or a saved dataset
+ * The default type that represents an edge in a dataset to load or a saved dataset. Edges differ slightly from nodes and groups in that there are fields which are mandatory: `source` and `data`. Edges also differ from nodes and groups in that any backing data for an edge (including its `id` and/or `type`) need to be provided in the `data` member of the edge, not in the root as with nodes and groups.
  * @group Model
  */
 export interface EdgeData {
@@ -66,12 +66,12 @@ export interface EdgeData {
     };
 }
 /**
- * The default type that represents a node in a dataset to load or a saved dataset
+ * The default type that represents a node in a dataset to load or a saved dataset. While there are no specific requirements for the entries in node data, the default configuration expects that you will at the minimum have provided an `id`. Nodes have an associated `type`, which VisuallyJs will set to "default" in the absence of you providing one; as you start to build more complex interfaces with VisuallyJs you will want to provide the `type` member.
  * @group Data Model
  */
 export type NodeData = Record<string, any>;
 /**
- * The default type that represents a group in a dataset to load or a saved dataset
+ * The default type that represents a group in a dataset to load or a saved dataset. While there are no specific requirements for the entries in groups data, the default configuration expects that you will at the minimum have provided an `id`. Groups have an associated `type`, which VisuallyJs will set to "default" in the absence of you providing one; as you start to build more complex interfaces with VisuallyJs you will want to provide the `type` member.
  * @group Data Model
  */
 export type GroupData = Record<string, any>;
@@ -94,7 +94,27 @@ export interface VisuallyJsDefaultJSON {
      */
     groups?: Array<GroupData>;
 }
+/**
+ * An entry in the hierarchical json format.
+ * @group Data Model
+ * @category Input and Output
+ */
+export interface VisuallyJsHierarchicalJSONEntry extends ObjectData {
+    children?: Array<VisuallyJsHierarchicalJSONEntry>;
+}
+/**
+ * The Hierarchical JSON format. Consists of a single root entry, which has a children array, each of which may have children, etc.
+ * @group Data Model
+ * @category Input and Output
+ */
+export type VisuallyJsHierarchicalJSON = VisuallyJsHierarchicalJSONEntry;
+/**
+ * Defines the default JSON datatype
+ */
 export declare const JSON_DATATYPE = "json";
+/**
+ * Defines the hierarchical json datatype
+ */
 export declare const HIERARCHICAL_JSON_DATATYPE = "hierarchical-json";
 /**
  * Register a parser for some given datatype