@visuallyjs/browser-ui 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "license": "Commercial",
   "main": "js/visuallyjs.browser-ui.cjs.js",
   "module": "js/visuallyjs.browser-ui.esm.js",

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

@@ -4,13 +4,6 @@ import { PointXY } from "../core/util";
 import { BrowserElement } from "./util";
 import { ElementAttributes } from "./svg-util";
 import { ElementType } from "../ui";
-/**
- * @internal
- * @param el
- * @param selector
- * @param ctx
- */
-export declare function matchesSelector(el: BrowserElement, selector: string, ctx?: BrowserElement): boolean;
 /**
  * Consume the given event, using `stopPropagation()` if present or `returnValue` if not, and optionally
  * also calling `preventDefault()`.

package/types/browser-ui/browser-visuallyjs-instance.d.ts

@@ -569,6 +569,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      * @internal
      */
     $reRenderNode(n: Node): void;
+    $isGroupDefinedAsLocked(g: Group): boolean;
     /**
      * Renders the given group. For internal use.
      * @param g

package/types/browser-ui/components/controls/controls-component.d.ts

@@ -35,6 +35,14 @@ export declare const RESET_SELECTION_PATH = "M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2
 export declare const CLEAR_VIEW_BOX = "0 0 24 24";
 /** @internal */
 export declare const CLEAR_PATH = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z";
+/** @internal */
+export declare const UNDO_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const UNDO_PATH = "M3 7v6h6 M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13";
+/** @internal */
+export declare const REDO_VIEW_BOX = "0 0 24 24";
+/** @internal */
+export declare const REDO_PATH = "M21 7v6h-6 M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13";
 export declare const ZOOM_IN_OUT_VIEW_BOX = "0 0 32 32";
 export declare const ZOOM_IN_PATH = "M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0";
 export declare const ZOOM_OUT_PATH = "M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0";

package/types/browser-ui/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './controls';
 export * from './inspector';
 export * from './palette';
 export * from './edge-type-picker';
+export * from './rotate-manager';

package/types/browser-ui/components/palette/auto-edge-connect.d.ts

@@ -0,0 +1,74 @@
+import { RectangleXY, Edge, Vertex, Node, Port } from "../../../core";
+import { BrowserElement } from "../../util";
+import { Palette } from "./palette";
+import { LineStyle, SingleAnchorSpec, UICore, ViewportNodeElement } from "../../../ui";
+export type AutoConnectTerminus = {
+    el: BrowserElement;
+    portId: string | null;
+    vertex: Vertex;
+    resolvedPort: Port | null;
+    isSource: boolean;
+    edgeType: string;
+    scope: string;
+    anchor?: SingleAnchorSpec;
+    edge?: Edge;
+};
+/**
+ * An internal class to manage auto edge connect during a drag from the palette.
+ * @internal
+ */
+export declare class AutoEdgeConnectManager {
+    private ui;
+    private palette;
+    private activeClass;
+    private _autoSourceElementsRTree;
+    private _autoTargetElementsRTree;
+    private _proximitySources;
+    private _proximityTargets;
+    private _proximityThreshold;
+    private _canvasSourceElements;
+    private _canvasTargetElements;
+    private _focusSourceElements;
+    private _focusTargetElements;
+    _key: string;
+    _mode: "onDemand" | "eager";
+    _status: "primed" | "idle" | "active";
+    _lineStyle: LineStyle;
+    /**
+     * Edges created during a drag. At the end of the drag, if the new vertex is being retained, all of these edges need to be reconnected to the new vertex in the model - as part of a transaction. If the vertex is discarded, these edges all need to be removed (prior to removing the transient vertex)
+     * @internal
+     */
+    private _transientEdges;
+    private _keyListener;
+    private _getSourceTargetElements;
+    constructor(ui: UICore<any>, palette: Palette<any>, activeClass: string, mode: "eager" | "onDemand", lineStyle: LineStyle, key: string);
+    private _clearProximityState;
+    private _toggleCssClasses;
+    private _setStatus;
+    begin(dragElement: BrowserElement, transientInfo: {
+        vertex: Node;
+        el: ViewportNodeElement<BrowserElement>;
+    }, nodesInViewport: Array<{
+        el: ViewportNodeElement<BrowserElement>;
+        bb: RectangleXY;
+    }>, groupsInViewport: Array<{
+        el: ViewportNodeElement<BrowserElement>;
+        bb: RectangleXY;
+    }>): void;
+    move(dragElementBoundingBox: RectangleXY): void;
+    reset(): void;
+    cleanupDrag(): void;
+    /**
+     * Adds a transient edge, connected to `otherVertex` (which is a vertex on the canvas already) and to the current transient vertex which was created as the user began dragging a new vertex to the canvas. If there is no transient vertex this method does nothing, silently.
+     *
+     * The transient edge is pushed to the list of edges added since the latest operation began, and if the operation is not cancelled, will be converted to a concrete edge once the new vertex has been added to the canvas.
+     *
+     * @param otherVertex existing vertex in the model to connect to
+     * @param asSource Whether or not our transient vertex is the source of this edge
+     * @param portId Optional ID of the port the edge should end up attached to.
+     * @param anchor Optional anchor to use
+     * @internal
+     */
+    private _addTransientEdge;
+    getEdges(): Array<Edge>;
+}

package/types/browser-ui/components/palette/definitions.d.ts

@@ -0,0 +1,50 @@
+import { BrowserElement } from "../../util";
+import { IntersectingObjectData } from "../../pan-zoom";
+import { Edge, Group, Node } from "../../../core";
+import { Connection, Connector, ViewportGroupElement, ViewportNodeElement } from "../../../ui";
+/**
+ * NOTE: This interface inherits `r`, the bounding box, from `IntersectingObjectData`. In this class,
+ * `r` is in CANVAS coordinates (after a recent change from when it was originally in window coords)
+ * @internal
+ */
+export interface CurrentNode extends IntersectingObjectData {
+    vertex: Node;
+    element: BrowserElement;
+    canDrop: boolean;
+    managedElement: ViewportNodeElement<BrowserElement>;
+    cssElement: BrowserElement;
+}
+/**
+ * NOTE: This interface inherits `r`, the bounding box, from `IntersectingObjectData`. In this class,
+ * `r` is in CANVAS coordinates (after a recent change from when it was originally in window coords)
+ * @internal
+ */
+export interface CurrentGroup extends IntersectingObjectData {
+    vertex: Group;
+    element: BrowserElement;
+    canDrop: boolean;
+    depth: number;
+    managedElement: ViewportGroupElement<BrowserElement>;
+    cssElement: BrowserElement;
+}
+/**
+ * NOTE: This interface inherits `r`, the bounding box, from `IntersectingObjectData`. In this class,
+ * `r` is in _window_ coordinates. To convert to canvas coordinates you must
+ * @internal
+ */
+export interface EdgeSpec extends IntersectingObjectData {
+    objectType: typeof Edge.objectType;
+    connection: Connection<BrowserElement>;
+    connector: Connector;
+    edge: Edge;
+    element: BrowserElement;
+    canDrop: boolean;
+    cssElement: BrowserElement;
+}
+/**
+ * The default CSS selector used with the Palette and the library integration wrappers around it
+ * @group Components
+ * @category Palette
+ * @internal
+ */
+export declare const DEFAULT_PALETTE_SELECTOR = "[data-vjs-type]";

package/types/browser-ui/components/palette/index.d.ts

@@ -1,2 +1,5 @@
+export * from './definitions';
+export * from './util';
+export * from './auto-edge-connect';
 export * from './palette-options';
 export * from './palette';

package/types/browser-ui/components/palette/palette-options.d.ts

@@ -1,10 +1,23 @@
 import { BrowserElement } from "../../util";
 import { CanvasDropFilter, DataGeneratorFunction, DragFunction, GroupIdentifierFunction, OnVertexAddedCallback, TypeGeneratorFunction } from "../../definitions";
-import { ObjectData, PointXY, Size, Node, Group } from "../../../core";
+import { ObjectData, PointXY, Size, Node, Group, Vertex, Edge } from "../../../core";
+import { LineStyle, SingleAnchorSpec } from "../../../ui";
 export declare const PALETTE_MODE_DRAG = "drag";
 export declare const PALETTE_MODE_TAP = "tap";
 export declare const PALETTE_MODE_DRAW = "draw";
 export type PaletteMode = typeof PALETTE_MODE_TAP | typeof PALETTE_MODE_DRAG | typeof PALETTE_MODE_DRAW;
+export type CanDropOnEdgeFilter<T> = (d: T) => boolean;
+/**
+ * Defines the source/target port ids to use on a vertex dropped on an edge.
+ * @group Components
+ * @category Palette
+ */
+export type EdgeDropInfo = {
+    newEdgeSourcePortId?: string | null;
+    originalEdgeTargetPortId?: string | null;
+    sourceAnchor?: SingleAnchorSpec | null;
+    targetAnchor?: SingleAnchorSpec | null;
+};
 /**
  * Options for a Palette
  * @group Components
@@ -38,7 +51,14 @@ export interface PaletteOptions<T> {
     /**
      * Defaults to false. Allows items to be dropped onto edges in the canvas. A drop on an edge causes that edge to be split, with one edge having the new vertex as a target, and another edge with the new vertex as source.
      */
-    allowDropOnEdge?: boolean;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<T>;
+    /**
+     * If `allowDropOnEdge` is true, this function can be provided, to customise the behaviour of the drop. By default, the new vertex is used as the target of the original edge and the source of the new edge. But you might want to connect to ports on the new vertex, and this method allows you to do that: you can return the ID of a port to use for the existing edge's target, a port ID to use for the new edge's source, a source anchor or a target anchor.
+     * @param newVertex The newly dropped vertex
+     * @param originalEdge The edge that the vertex was dropped on.
+     * @advanced
+     */
+    edgeDropHandler?: (newVertex: Vertex, originalEdge: Edge) => EdgeDropInfo;
     /**
      * Defaults to true. Allows items to be dropped onto groups in the canvas.
      */
@@ -144,6 +164,14 @@ export interface PaletteOptions<T> {
      * Class to set on an element being dragged.
      */
     dragElementClass?: string;
+    /**
+     * 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;
     /**
      * Optional function to invoke as the user is dragging a new element, or has tapped an element and is moving the mouse over the canvas.
      */
@@ -156,4 +184,33 @@ export interface PaletteOptions<T> {
      * Optional data that will be used in conjunction with `contentTemplate` to generate the HTML content of the palette.
      */
     data?: ObjectData;
+    /**
+     * 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;
+}
+/**
+ * Options for auto edge connect.
+ */
+export interface AutoEdgeConnectOptions {
+    /**
+     * Whether or not auto edge connect is enabled.
+     */
+    enabled: boolean;
+    /**
+     * The mode to run the auto connect functionality in. "onDemand" is the default, meaning the user has to press the Meta key in order to activate the edge auto connect. In "eager" mode, the edge auto connect is switched on as soon as drag starts.
+     */
+    connectMode?: "onDemand" | "eager";
+    /**
+     * Style to use for an automatically created edge (while the user is still dragging the new element). Defaults to a gray dashed line.
+     */
+    lineStyle?: LineStyle;
+    /**
+     * Class to set on the UI canvas when drag starts and auto edge connect is active
+     */
+    activeClass?: string;
+    /**
+     * The key to listen for to switch from primed to active when connect mode is `onDemand`
+     */
+    key?: string;
 }

package/types/browser-ui/components/palette/palette.d.ts

@@ -1,20 +1,8 @@
 import { PaletteOptions } from "./palette-options";
 import { BrowserElement } from "../../util";
-import { ObjectData } from "../../../core";
+import { ViewportNodeElement } from "../../../ui";
+import { Node, ObjectData } from "../../../core";
 import { BrowserUI } from "../../browser-visuallyjs-instance";
-/**
- * Default data generator for palettes. Extract `data-vjs-***` attributes from element.
- * @param el
- * @internal
- */
-export declare function defaultDataGenerator<T = any>(el: BrowserElement): T;
-/**
- * The default CSS selector used with the Palette and the library integration wrappers around it
- * @group Components
- * @category Palette
- * @internal
- */
-export declare const DEFAULT_PALETTE_SELECTOR = "[data-vjs-type]";
 /**
  * This component allows you to configure elements to drag and drop onto a surface.
  *
@@ -28,6 +16,7 @@ export declare class Palette<T> {
     private readonly _selector;
     private readonly _ignoreGrid;
     private readonly _dragActiveClass;
+    private readonly _autoEdgeConnectActiveClass;
     private readonly _dragHoverClass;
     private readonly _dragElementClass;
     private readonly _dragHoverCannotDropClass;
@@ -55,6 +44,8 @@ export declare class Palette<T> {
     private _$_eventManager;
     private _currentNodeList;
     private _currentGroupList;
+    private _nodeRtree;
+    private _groupRtree;
     private _currentEdgeList;
     private _candidateData;
     private _dropCandidate;
@@ -68,7 +59,15 @@ export declare class Palette<T> {
      * current element being dragged
      * @internal
      */
-    private _$_dragElement;
+    private $dragElement;
+    /**
+     * Information about the transient vertex used during drag.
+     * @private
+     */
+    $transientInfo: {
+        vertex: Node;
+        el: ViewportNodeElement<BrowserElement>;
+    };
     /**
      * Size to use for the current drag element. This is set if there was a dragSizeGenerator function  supplied, and that returned something on drag start, or if a class-wide drag size was set in the constructor.
      * @internal
@@ -85,12 +84,18 @@ export declare class Palette<T> {
     private readonly _$_ignoreDropOnNodes;
     private readonly _$_allowDropOnGroups;
     private readonly _$_allowDropOnEdges;
+    private readonly _edgeDropHandler;
     private readonly _canDrop?;
     private readonly _$_dragSize;
     private _$_candidateTapObject;
     private _$_previousCandidateTapObject;
     private _contentGenerator;
     private readonly _keyListener;
+    private _rotateManager;
+    private _allowRotation;
+    private _rotationSpeed;
+    private readonly _autoEdgeConnect;
+    private _autoEdgeConnectManager;
     constructor(ui: BrowserUI, options: PaletteOptions<T>);
     /**
      * Sets the enabled state of the palette
@@ -123,5 +128,10 @@ export declare class Palette<T> {
     private _addNewVertexToCanvas;
     private _onVertexAdded;
     private _reset;
+    /**
+     * returns whether or not rotation is allowed, and if so, the rotation stops to use (which may be null or an empty array, for free rotation)
+     * @internal
+     */
+    private _isAllowRotation;
     private _$_initDrawMode;
 }

package/types/browser-ui/components/palette/util.d.ts

@@ -0,0 +1,21 @@
+import { BrowserElement } from "../../util";
+import { RectangleXY } from "../../../core";
+/**
+ * Default data generator for palettes. Extract `data-vjs-***` attributes from element.
+ * @param el
+ * @internal
+ */
+export declare function defaultDataGenerator<T = any>(el: BrowserElement): T;
+/**
+ * Convert a region that is in page coordinates into canvas coordinates, given a rectangle defining the canvas bounds (in canvas coords), a rectangle defining the viewport pounds (in page coords), and a region (in page coords). The approach is to redefine `region` in terms of its position and size wrt the viewport bounds. We compute the region's width/height as a ratio of the viewport's width/height, and we compute its origin as a ratio of the width/height of the viewport
+ * @param canvasBounds
+ * @param viewportBounds
+ * @param region
+ * @internal
+ */
+export declare function convertPageCoordsToCanvasCoords(canvasBounds: RectangleXY, viewportBounds: RectangleXY, region: RectangleXY): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/types/browser-ui/components/rotate-manager.d.ts

@@ -0,0 +1,27 @@
+export declare class RotateManager {
+    private _rotationKeyListener;
+    private _isRotationKeyDown;
+    private _isAllowRotation;
+    private _rotationSpeed;
+    private _rotationInterval;
+    private _currentRotation;
+    private _rotationUpdated;
+    private _currentTarget;
+    private _key;
+    private _getInitialRotation;
+    constructor(options: {
+        isAllowRotation: (e: KeyboardEvent) => [boolean, Array<number>];
+        rotationSpeed?: number;
+        rotationUpdated: (r: number) => any;
+        key?: string;
+        getInitialRotation?: () => number;
+    });
+    activate(target: Element | Document): void;
+    deactivate(): void;
+    getRotation(): number;
+    reset(): void;
+    private _handleRotationTriggerPressed;
+    private _rotateByStep;
+    private _writeRotation;
+    private _stopAutoRotation;
+}

package/types/browser-ui/constants.d.ts

@@ -24,13 +24,16 @@ export declare const ATTRIBUTE_GROUP_COLLAPSED_CONTENT = "data-vjs-collapsed-con
  * Specifies whether or not some drag source/target is enabled.
  * @group Nodes and Groups
  * @category DOM Attributes
+ * @domAttribute
+ * @context edge-dragging
  */
 export declare const ATTRIBUTE_VJS_ENABLED = "data-vjs-enabled";
 /**
- * Specifies the value for 'scope' for an edge dragged from some element. Edges will only be able to be dragged to target elements
- * that have the same value for `data-vjs-scope`.
+ * Specifies the value for 'scope' for an edge dragged from some element. Edges will only be able to be dragged to target elements that have the same value for `data-vjs-scope`.
  * @group Nodes and Groups
  * @category DOM Attributes
+ * @domAttribute
+ * @context edge-dragging
  */
 export declare const ATTRIBUTE_VJS_SCOPE = "data-vjs-scope";
 /**

package/types/browser-ui/css-constants.d.ts

@@ -404,6 +404,14 @@ export declare const CLASS_PALETTE_DRAG_ACTIVE = "vjs-palette-drag-active";
  * @category Shape Palette
  */
 export declare const CLASS_PALETTE_DRAG_HOVER = "vjs-palette-drag-hover";
+/**
+ * Assigned to the UI's canvas when a drag has started and auto edge connect is active.
+ * @cssClass
+ * @context palette
+ * @group Components
+ * @category Palette
+ */
+export declare const CLASS_PALETTE_AUTO_EDGE_CONNECT_ACTIVE = "vjs-palette-auto-edge-connect-active";
 /**
  * Assigned to a vertex or the canvas when an element that is being dragged from the palette is hovering over it but drop is not allowed.
  * @cssClass
@@ -447,7 +455,7 @@ export declare const CLASS_DRAG_ORIGINAL_GROUP = "vjs-drag-original-group";
 /**
  * Assigned to any element that is a candidate drop target for an edge that is being dragged
  * @cssClass
- * @context element-dragging,palette,nodes-and-groups
+ * @context element-dragging,nodes-and-groups
  * @group Components
  * @category Surface
  */
@@ -455,7 +463,7 @@ export declare const CLASS_DRAG_ACTIVE = "vjs-drag-active";
 /**
  * Assigned to any element that is the current drop target for an edge that is being dragged
  * @cssClass
- * @context element-dragging,palette,nodes-and-groups
+ * @context element-dragging,nodes-and-groups
  * @group Components
  * @category Surface
  */
@@ -499,3 +507,21 @@ export declare const CLASS_TRANSIENT_VERTEX = "vjs-transient-vertex";
  * @context click-to-add-edges
  */
 export declare const CLASS_EDGE_CLICK_ENTRY = "vjs-edge-click-entry-method";
+/**
+ * Assigned to source elements on the canvas and the drag vertex during a drag
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_AUTO_EDGE_SOURCE = "vjs-auto-edge-source";
+/**
+ * Assigned to target elements on the canvas and the drag vertex during a drag
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_AUTO_EDGE_TARGET = "vjs-auto-edge-target";
+export declare const CLASS_AUTO_EDGE_PROXIMITY_SOURCE = "vjs-auto-edge-proximity-source";
+export declare const CLASS_AUTO_EDGE_PROXIMITY_TARGET = "vjs-auto-edge-proximity-target";

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

@@ -2,7 +2,7 @@ import { BrowserElement } from "./util";
 import { BoundingBox, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsModel, VisuallyJsSelection } from "../core";
 import { PointXY, Size } from "../core";
 import { UICoreDefaults, UICoreOptions, UIEdgeOptions, DragOptions, Overlay, Connection, EdgePropertyMappings, AlignContentOptions } from "../ui";
-import { EdgeInputMethod } from "./edge-input-handler";
+import { EdgeInputMethod } from "./edge-handler-base";
 import { ShapeLibrary, ShapeSet } from "./shape-library/shape-library-definitions";
 import { VisuallyJSDOMElement } from "./element-facade";
 import { VertexMapping } from "../ui";

package/types/browser-ui/edge-handler-base.d.ts

@@ -1,9 +1,26 @@
 import { Surface } from "./surface-renderer";
 import { BrowserElement } from "./util";
 import { VisuallyJSDOMElement } from "./element-facade";
+import { SingleAnchorSpec } from "../ui";
 import { Vertex, BoundingBox, PointXY, RectangleXY, RTree, AnchorOrientationHint, ObjectAnchorSpec, ObjectData } from "../core";
-import { EdgeInputMethod } from "./edge-input-handler";
 import { ElementModelInfo } from "./definitions";
+/**
+ * Defines the drag method of creating new edges with the mouse/touch events
+ * @group Edges
+ * @constant
+ */
+export declare const EDGE_INPUT_METHOD_DRAG = "drag";
+/**
+ * Defines the click method of creating new edges with the mouse/touch events
+ * @group Edges
+ * @constant
+ */
+export declare const EDGE_INPUT_METHOD_CLICK = "click";
+/**
+ * Defines the available methods of edge creation with mouse/touch events
+ * @group Edges
+ */
+export type EdgeInputMethod = typeof EDGE_INPUT_METHOD_CLICK | typeof EDGE_INPUT_METHOD_DRAG;
 /**
  * Defines the default behaviour for edge snap to target - for small targets (width + height is less than 30 pixels), snap to the center. For larger targets, snap to the perimeter. When the mouse is over the target, do not snap.
  * @group Edges
@@ -58,6 +75,7 @@ export interface EdgeSnapOptions {
      */
     requireMagnets?: boolean;
 }
+export declare function decodeAnchorFromAttribute(spec: string): SingleAnchorSpec | null;
 /**
  * @internal
  */
@@ -86,6 +104,7 @@ export type DropTarget = {
     anchor?: ObjectAnchorSpec;
     anchorIndex?: number;
     targetEl: VisuallyJSDOMElement;
+    targetAnchor?: SingleAnchorSpec;
     targetPortType?: string;
     magnet?: boolean;
     positionOnElement?: PointXY;

package/types/browser-ui/edge-input-handler.d.ts

@@ -2,25 +2,8 @@ import { LightweightAnchor, Connection, ViewportElement } from "../ui";
 import { BrowserElement } from "./util";
 import { Edge, Node, Vertex } from "../core";
 import { PointXY } from "../core";
-import { EdgeHandlerBase, EdgeHandlerBaseOptions } from "./edge-handler-base";
+import { EdgeHandlerBase, EdgeHandlerBaseOptions, EdgeInputMethod } from "./edge-handler-base";
 export declare const EVENT_KEYUP = "keyup";
-/**
- * Defines the drag method of creating new edges with the mouse/touch events
- * @group Edges
- * @constant
- */
-export declare const EDGE_INPUT_METHOD_DRAG = "drag";
-/**
- * Defines the click method of creating new edges with the mouse/touch events
- * @group Edges
- * @constant
- */
-export declare const EDGE_INPUT_METHOD_CLICK = "click";
-/**
- * Defines the available methods of edge creation with mouse/touch events
- * @group Edges
- */
-export type EdgeInputMethod = typeof EDGE_INPUT_METHOD_CLICK | typeof EDGE_INPUT_METHOD_DRAG;
 export declare const EDGE_INPUT_STATE_IDLE = "idle";
 declare const EDGE_INPUT_STATE_DRAGGING = "dragging";
 declare const EDGE_INPUT_STATE_AWAITING_CLICK = "awaitingClick";

package/types/browser-ui/element-drag-handler-2.d.ts

@@ -1,6 +1,6 @@
-import { SupportsElementDragging, VertexDragFilter, ViewportGroupElement, ViewportNodeElement, ViewportElement } from "../ui";
+import { SupportsElementDragging, VertexDragFilter, ViewportElement, ViewportGroupElement, ViewportNodeElement } from "../ui";
 import { BrowserElement } from "./util";
-import { PointXY, Grid } from "../core";
+import { Grid, PointXY } from "../core";
 import { BrowserUI } from "./browser-visuallyjs-instance";
 declare enum DragStates {
     idle = "idle",
@@ -117,6 +117,8 @@ export declare class ElementDragHandler2 {
     private _canvasShift;
     private _currentSurfaceZoom;
     private _activeEffectiveZoom;
+    _isRotatable: boolean;
+    _rotationStops: Array<number>;
     /**
      * This is the current element (and associated model object) that is being dragged.
      */

package/types/browser-ui/event-manager.d.ts

@@ -1,4 +1,11 @@
 import { PointXY } from "../core";
+/**
+ * @internal
+ * @param el
+ * @param selector
+ * @param ctx
+ */
+export declare function matchesSelector(el: any, selector: string, ctx?: Element): boolean;
 /**
  * @internal
  */

package/types/browser-ui/index.d.ts

@@ -17,13 +17,14 @@ export * from './copy-paste';
 export * from './storage';
 export * from './icons';
 export * from './svg-export';
+export * from './keyboard';
 export * from './edge-handler-base';
 export * from './edge-input-handler';
 export * from './edge-relocate-handler';
 export * from './element-drag-handler-2';
 export * from './element-dragger';
 export * from './element-facade';
-export { EventManager, pageLocation, touches, touchCount, getTouch, getPageLocation, setForceTouchEvents, setForceMouseEvents, isTouchDevice, isMouseDevice } from './event-manager';
+export * from './event-manager';
 export * from './fixed-layer';
 export * from './group-layout-adapter';
 export * from './html-element-overlay';

package/types/browser-ui/keyboard/index.d.ts

@@ -0,0 +1 @@
+export * from "./keyboard-listener";

package/types/browser-ui/keyboard/keyboard-listener.d.ts

@@ -0,0 +1,7 @@
+export type KeyboardEventCallback = ((e: KeyboardEvent, event: string) => any);
+export declare class KeyboardListener {
+    _mappings: Record<string, EventListenerOrEventListenerObject>;
+    constructor(mappings: Record<string, KeyboardEventCallback>);
+    bindAll(target: Element | Document): void;
+    unbindAll(target: Element | Document): void;
+}

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

@@ -89,6 +89,11 @@ export interface WheelOptions {
      * Optional CSS 3 selector to check if the wheel should be enabled for the current event target.
      */
     cssFilter?: string;
+    /**
+     * Defaults to true. When true, holding the SHIFT key while using the mouse wheel will toggle the wheel's mode:
+     * if the wheel is currently set to pan, it will zoom. If it is currently set to zoom, it will pan.
+     */
+    shiftToChangeMode?: boolean;
 }
 /**
  * @internal

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;