@visuallyjs/browser-ui 1.0.0

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

@@ -0,0 +1,168 @@
+import { Surface } from "./surface-renderer";
+import { BrowserElement } from "./util";
+import { VisuallyJSDOMElement } from "./element-facade";
+import { Vertex, BoundingBox, PointXY, RectangleXY, RTree, AnchorOrientationHint, ObjectAnchorSpec } from "../core";
+import { EdgeInputMethod } from "./edge-input-handler";
+import { ElementModelInfo } from "./definitions";
+/**
+ * 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
+ * @category Edge Snapping
+ * @constant
+ */
+export declare const EDGE_SNAP_DEFAULT = "default";
+/**
+ * Defines the 'center' behaviour for edge snap to target - always snap to the center, regardless of the size of the target
+ * @group Edges
+ * @category Edge Snapping
+ * @constant
+ */
+export declare const EDGE_SNAP_CENTER = "center";
+/**
+ * Defines the 'center' behaviour for edge snap to target - always snap to the perimeter, regardless of the size of the target
+ * @group Edges
+ * @category Edge Snapping
+ * @constant
+ */
+export declare const EDGE_SNAP_PERIMETER = "perimeter";
+/**
+ * Types of edge snap available.
+ * @group Edges
+ * @category Edge Snapping
+ */
+export type EdgeSnapType = typeof EDGE_SNAP_DEFAULT | typeof EDGE_SNAP_CENTER | typeof EDGE_SNAP_PERIMETER;
+/**
+ * Options for edge snap.
+ * @group Components
+ * @category Surface
+ */
+export interface EdgeSnapOptions {
+    /**
+     * How to snap - see docs for {@link EdgeSnapType}
+     */
+    type?: EdgeSnapType;
+    /**
+     * Threshold in pixels for snapping to targets.
+     */
+    threshold?: number;
+    /**
+     * Threshold in pixels for what determines a small vs a large target. See {@link EdgeSnapType} for discussion.
+     */
+    sizeThreshold?: number;
+    /**
+     * Whether or not snap is enabled. Required.
+     */
+    enabled: boolean;
+    /**
+     * If true, snapping will only operate on elements in the DOM that have been marked as magnets via the {@link ATTRIBUTE_VJS_MAGNET} attribute. Otherwise snapping will operate on all targets.
+     */
+    requireMagnets?: boolean;
+}
+/**
+ * @internal
+ */
+export declare const sourceElementSelector: string;
+/**
+ * @internal
+ */
+export declare const targetElementSelector: string;
+/**
+ * @internal
+ */
+export interface EdgeHandlerBaseOptions {
+    method?: EdgeInputMethod;
+    instance: Surface;
+    activeFiltering: boolean;
+    edgeSnap: EdgeSnapOptions;
+    allowLoopbackEdges: boolean;
+}
+/**
+ * @internal
+ */
+export type DropTarget = {
+    modelInfo: ElementModelInfo;
+    r: BoundingBox;
+    isGroup: boolean;
+    anchor?: ObjectAnchorSpec;
+    anchorIndex?: number;
+    targetEl: VisuallyJSDOMElement;
+    targetPortType?: string;
+    magnet?: boolean;
+    positionOnElement?: PointXY;
+};
+/**
+ * Find target zones in the given surface
+ * @param surface
+ * @internal
+ */
+export declare function _findTargetZones(surface: Surface): Array<BrowserElement>;
+/**
+ * For a given drag selector, find the current list of target elements that match, according to the selector's redrop policy.
+ * @param surface
+ * @internal
+ */
+export declare function _findSourceZones(surface: Surface): Array<BrowserElement>;
+export declare function _findZones(surface: Surface, selector: string): Array<BrowserElement>;
+/**
+ * Gets vertex info for the given element.
+ * @param surface
+ * @param el
+ * @param asSource
+ * @internal
+ */
+export declare function _getVertexInfo(surface: Surface, el: BrowserElement, asSource: boolean): ElementModelInfo | null;
+/**
+ * @internal
+ * @param surface
+ * @param dropTargets
+ * @param boundingRect
+ * @param e
+ */
+export declare function testIntersectingDropTarget(surface: Surface, dropTargets: Array<DropTarget>, boundingRect: RectangleXY, e: MouseEvent): DropTarget;
+export declare function _populateTargetZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, scope?: string): {
+    dropTargets: Array<DropTarget>;
+    disabledDropTargets: Array<VisuallyJSDOMElement>;
+};
+export declare function _populateSourceZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, loopbackAllowed: boolean, scope?: string): {
+    dropTargets: Array<DropTarget>;
+    disabledDropTargets: Array<VisuallyJSDOMElement>;
+};
+export declare function _populateZones(surface: Surface, activeFiltering: boolean, focusVertex: Vertex, focusVertexIsTarget: boolean, loopbackAllowed: boolean, scope?: string): {
+    dropTargets: Array<DropTarget>;
+    disabledDropTargets: Array<VisuallyJSDOMElement>;
+};
+/**
+ * @internal
+ */
+export declare class EdgeHandlerBase {
+    protected surface: Surface;
+    protected container: BrowserElement;
+    protected edgeSnap: boolean;
+    protected edgeSnapRequiresMagnets: boolean;
+    protected edgeSnapSizeThreshold: number;
+    protected edgeSnapThreshold: number;
+    protected edgeSnapType: EdgeSnapType;
+    protected allowLoopbackEdges: boolean;
+    activeFiltering: boolean;
+    protected rtree: RTree;
+    disabledDropTargets: Array<BrowserElement>;
+    dropTargets: Array<DropTarget>;
+    currentDropTarget: DropTarget;
+    constructor(options: EdgeHandlerBaseOptions);
+    /**
+     * For the given point, test if it intersects the bounding rect of any of our drop targets (with a 50 pixels buffer). If so,
+     * test if the point is inside the rectangle, in which case we return the point unchanged. But otherwise it must be in the
+     * buffer, so we find the closest face midpoint to that point and snap to there.
+     * @param p Point to test
+     * @param edgeSnapThreshold Buffer to set around point when testing for intersections, defaults to 50.
+     * @param edgeSnapSizeThreshold Threshold that defines a small vs large target. If a target exceeds this value in either axis it is
+     * deemed large, and then we may snap to midpoints.
+     * @param edgeSnapType Type of snap to perform.
+     * @internal
+     */
+    _magnetizeToTarget(p: PointXY, edgeSnapThreshold: number, edgeSnapSizeThreshold: number, edgeSnapType: EdgeSnapType): PointXY;
+}
+export declare function _findAnchorOrientation(p: PointXY): {
+    ox: AnchorOrientationHint;
+    oy: AnchorOrientationHint;
+};

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

@@ -0,0 +1,116 @@
+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";
+/**
+ * Added to placeholder elements used when relocating edges by dragging, or when an edge exists in the
+ * dataset but has  no source or no target
+ * @group Edges
+ * @category CSS Classes
+ */
+export declare const CLASS_TRANSIENT_VERTEX = "vjs-transient-vertex";
+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";
+export declare const EDGE_INPUT_STATE_LOCKED = "locked";
+export type EdgeInputState = typeof EDGE_INPUT_STATE_IDLE | typeof EDGE_INPUT_STATE_DRAGGING | typeof EDGE_INPUT_STATE_AWAITING_CLICK | typeof EDGE_INPUT_STATE_LOCKED;
+/**
+ * @internal
+ */
+export interface EdgeInputHandlerOptions extends EdgeHandlerBaseOptions {
+    _edgeDragStart: (edge: Edge) => void;
+    _edgeDragging: (edge: Edge) => void;
+    _edgeDragEnd: (edge: Edge) => void;
+    _edgeAbort: (edge: Edge, originalEvent?: Event) => void;
+}
+/**
+ * Handler for the input of new edges via drag or tap events.
+ * @internal
+ */
+export declare class EdgeInputHandler extends EdgeHandlerBase {
+    pageDownAt: PointXY;
+    canvasPositionAtDown: PointXY;
+    currentPagePosition: PointXY;
+    scrollAtPageDown: PointXY;
+    currentSource: Vertex;
+    currentPoints: Array<PointXY>;
+    mousemoveHandler: (e: MouseEvent) => void;
+    tapHandler: (e: MouseEvent) => void;
+    canvasTapHandler: (e: MouseEvent) => any;
+    documentKeypressHandler: (e: KeyboardEvent) => any;
+    currentMethod: EdgeInputMethod;
+    currentState: EdgeInputState;
+    private _edgeDragStart;
+    private _edgeDragging;
+    private _edgeDragEnd;
+    private _edgeAbort;
+    transientInfo: {
+        vertex: Node;
+        el: ViewportElement<BrowserElement>;
+    };
+    transientEdge: Edge;
+    transientConnection: Connection<BrowserElement>;
+    transientTargetAnchor: LightweightAnchor;
+    private _dragContext;
+    method: EdgeInputMethod;
+    private _autoPanObserver;
+    constructor(options: EdgeInputHandlerOptions);
+    private _cleanup;
+    private _addTransientEdge;
+    private _updateTransientEdge;
+    private _refreshTransientEdge;
+    /**
+     * Determines whether or not a new edge could be added to the given vertex.
+     * @param vertexInfo
+     * @private
+     */
+    private _canStartNewEdgeInput;
+    private _start;
+    private _finaliseTransientEdge;
+    private _stop;
+    /**
+     * Common mouse move functionality.  This method calls back to get a bounding box,
+     * and expects the mouse event that instigated the move
+     * @param getbb
+     * @param e
+     * @internal
+     */
+    private __move;
+    /**
+     * Handler for mouse move when in tap mode.
+     * @param e
+     * @internal
+     */
+    private _mousemoveHandler;
+    /**
+     * Handler for mouse move when in drag mode.
+     * @param p
+     * @internal
+     */
+    private _drag;
+    private _ensureTransientConnection;
+    private _tapHandler;
+    private $_exitTapMode;
+    private _canvasTapHandler;
+    private _documentKeypressListener;
+}
+export {};

package/types/browser-ui/edge-mappings/flowchart-basic.d.ts

@@ -0,0 +1,22 @@
+import { EdgePropertyMappings } from "../../ui";
+export declare const DEFAULT_FLOWCHART_ARROW_WIDTH = 15;
+export declare const DEFAULT_FLOWCHART_ARROW_LENGTH = 10;
+export declare const DEFAULT_FLOWCHART_PROPERTY_MARKERS = "markers";
+export declare const DEFAULT_FLOWCHART_PROPERTY_LINE_STYLE = "lineStyle";
+export declare const FLOWCHART_EDGE_TYPE_SOURCE_ARROW = "sourceArrow";
+export declare const FLOWCHART_EDGE_TYPE_TARGET_ARROW = "targetArrow";
+export declare const FLOWCHART_EDGE_TYPE_BOTH_ARROWS = "bothArrows";
+export declare const FLOWCHART_EDGE_TYPE_PLAIN = "plain";
+export declare const FLOWCHART_EDGE_TYPE_DASHED = "dashed";
+/**
+ * Basic edge mappings for flowcharts - a 'dashed' or 'plain' line style, and source/target/both/none arrow markers, with a configurable width/height
+ * @param options
+ * @constructor
+ * @edgeMapping
+ */
+export declare function FlowchartBasicEdgeMappings(options?: {
+    lineStyleProperty?: string;
+    markersProperty?: string;
+    arrowWidth?: number;
+    arrowLength?: number;
+}): EdgePropertyMappings;

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

@@ -0,0 +1 @@
+export * from "./flowchart-basic";

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

@@ -0,0 +1,51 @@
+import { BrowserElement } from "./util";
+import { Edge, Node, PointXY, ProxyLocation } from "../core";
+import { Connection, ViewportElement } from "../ui";
+import { EdgeHandlerBase, EdgeHandlerBaseOptions } from "./edge-handler-base";
+import { EdgeInputHandler } from "./edge-input-handler";
+/**
+ * @internal
+ */
+export interface EdgeRelocateHandlerOptions extends EdgeHandlerBaseOptions {
+    inputHandler: EdgeInputHandler;
+}
+/**
+ * Handler for edge relocation via mouse/touch.
+ * @internal
+ */
+export declare class EdgeRelocateHandler extends EdgeHandlerBase {
+    private _inputHandler;
+    private _inputMethod;
+    private _currentMode;
+    transientVertex: {
+        vertex: Node;
+        el: ViewportElement<BrowserElement>;
+    };
+    currentEdge: Edge;
+    currentConnection: Connection<BrowserElement>;
+    currentIndex: ProxyLocation;
+    mouseMoveHandler: (e: MouseEvent) => void;
+    mouseUpHandler: (e: MouseEvent) => void;
+    documentKeypressHandler: (e: KeyboardEvent) => any;
+    private _canvasShift;
+    private _autoPanObserver;
+    currentPosition: PointXY;
+    currentPagePosition: PointXY;
+    private _hasMoved;
+    private _transientAnchor;
+    private _suspendedVertex;
+    constructor(options: EdgeRelocateHandlerOptions);
+    private _updateTransientVertex;
+    /**
+     * Perhaps abort a relocate, perhaps reattaching the edge, perhaps detaching it into whitespace.
+     * @internal
+     */
+    private _abort;
+    /**
+     * Clean everything up after a drag - or an aborted drag
+     * @private
+     */
+    private _cleanup;
+    private _populateTargets;
+    private _documentKeypressListener;
+}

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

@@ -0,0 +1,254 @@
+import { SupportsElementDragging, VertexDragFilter, ViewportGroupElement, ViewportNodeElement, ViewportElement } from "../ui";
+import { BrowserElement } from "./util";
+import { PointXY, Grid } from "../core";
+import { BrowserUI } from "./browser-visuallyjs-instance";
+declare enum DragStates {
+    idle = "idle",
+    dragging = "dragging"
+}
+export type DragState = keyof typeof DragStates;
+/**
+ * Flag indicating a drag group member was assigned automatically
+ * @internal
+ */
+export declare const DRAG_GROUP_MEMBERSHIP_ASSIGNED = "assigned";
+/**
+ * Flag indicating a drag group member was assigned by the user
+ * @internal
+ */
+export declare const DRAG_GROUP_MEMBERSHIP_ADDED = "added";
+/**
+ * Types of drag group membership
+ * @internal
+ */
+export type DragGroupMembership = typeof DRAG_GROUP_MEMBERSHIP_ADDED | typeof DRAG_GROUP_MEMBERSHIP_ASSIGNED;
+/**
+ * Spec for some member of a drag group
+ * @internal
+ */
+type DragGroupMemberSpec<E> = {
+    el: ViewportNodeElement<E> | ViewportGroupElement<E>;
+    active: boolean;
+    membership: DragGroupMembership;
+};
+/**
+ * Model of a drag group
+ * @internal
+ */
+type DragGroup<E> = {
+    id: string;
+    members: Set<DragGroupMemberSpec<E>>;
+};
+/**
+ * Internal model of a drag group spec - used when adding members by various internal methods
+ * @internal
+ */
+export type InternalDragGroupSpec = {
+    id: string;
+    active: boolean;
+    membership: DragGroupMembership;
+};
+/**
+ * @internal
+ */
+export interface IntersectionObserverImpl {
+    observe(el: Element): void;
+    disconnect(): void;
+    unobserve(el: Element): void;
+}
+/**
+ * @internal
+ */
+export type IntersectionObserverEntry = {
+    target: Element;
+    intersectionRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    boundingClientRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    rootBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    isIntersecting: boolean;
+    intersectionRatio: number;
+};
+/**
+ * @internal
+ */
+export type IntersectionObserverEntries = Array<IntersectionObserverEntry>;
+/**
+ * @internal
+ * @param spec
+ */
+export declare function decodeDragGroupSpec(spec: InternalDragGroupSpec | string): InternalDragGroupSpec;
+export interface ElementDragHandler2Options<E> {
+    ui: BrowserUI;
+    draggableInstance: SupportsElementDragging<E>;
+    resolveGrid: () => Grid | null;
+    inputFilterSelector?: string;
+}
+/**
+ * Drag handler for elements.
+ *
+ *
+ *
+ * @internal
+ */
+export declare class ElementDragHandler2 {
+    inputFilterSelector: string;
+    private _dragStartFilters;
+    private _vertexDragFilters;
+    activeGrid: Grid;
+    downAt: PointXY;
+    viewportPositionAtDown: PointXY;
+    relativePositionAtDown: PointXY;
+    newPosition: PointXY;
+    private _ignoreCanvasShift;
+    private _canvasShift;
+    tapHandler: (e: MouseEvent) => void;
+    canvasTapHandler: (e: MouseEvent) => any;
+    documentKeypressHandler: (e: KeyboardEvent) => any;
+    private _currentSurfaceZoom;
+    private _activeEffectiveZoom;
+    /**
+     * This is the current element (and associated model object) that is being dragged.
+     */
+    private _dragContext;
+    /**
+     * This is the parent group of the current drag object. This is only set if the drag object was in a group at the start of the drag
+     */
+    private _dragParentGroup;
+    /**
+     * This is set if _dragParentGroup is set. It is the details of the group content element in the parent group, which has an offset from the group origin (although that can be [0,0] in groups whose content area is the group element itself).
+     */
+    private _dragParentGroupContentInfo;
+    /**
+     * This is set of _dragParentGroup is set. It is the UI's group definition for the parent group. We use it to check if drag is constrained to a group, or to see if an element dragged outside a group should revert, etc.
+     */
+    private _dragParentGroupDef;
+    /**
+     * Set when there was a parent group at drag start and the vertex has left that group at least one time.  This flag is used to implement a more user friendly strategy for adding hover/active drag classes on the original group.
+     * @internal
+     */
+    private _hasExitedOriginalGroup;
+    /**
+     * Set when there is a parent group at drag start but the shift key was held - the group does not get resized at the end of the drag
+     * @private
+     */
+    private _ignoreOriginalGroupResize;
+    /**
+     * @internal
+     */
+    private _currentElasticGroup;
+    /**
+     * List of groups that the current drag object could be dropped on.
+     */
+    private _groupTargets;
+    /**
+     * Whether or not the current drag vertex can be dropped on the canvas.
+     * @private
+     */
+    private _canDropOnCanvas;
+    private _suppressRootElementClasses;
+    /**
+     * List of group targets whose location intersects the drag object's current position. We push a bunch of groups onto this array and sort them by nested depth to find which one should be the current drop target.
+     */
+    private _hoverGroupTargets;
+    currentState: DragState;
+    private readonly _autoPanObserver;
+    private _dragGroupByElementIdMap;
+    private _dragGroupMap;
+    private _currentDragGroup;
+    private _currentDragGroupInfo;
+    private _otherMagnetizedElements;
+    ui: BrowserUI<BrowserElement>;
+    draggableInstance: SupportsElementDragging<BrowserElement>;
+    resolveGrid: () => Grid | null;
+    constructor(options: ElementDragHandler2Options<BrowserElement>);
+    private _testFilter;
+    /**
+     * @internal
+     * @param f
+     * @param _handle
+     * @param _exclude
+     */
+    addDragFilter(f: (e: MouseEvent) => boolean, _handle: string, _exclude?: boolean): void;
+    removeFilter(f: Function | string): void;
+    addSelectorFilter(selector: string, _exclude?: boolean): void;
+    addClassnameFilter(clazz: string | Array<string>, _exclude?: boolean): void;
+    /**
+     * @internal
+     * @param clazz
+     * @private
+     */
+    private _removeOneClassnameFilter;
+    /**
+     * Removes a class filter.
+     * @param clazz
+     */
+    removeClassnameFilter(clazz: string | Array<string>): void;
+    clearAllFilters(): void;
+    private _cleanup;
+    private _cleanupGroupTargetHoverState;
+    private _findDraggableVertex;
+    private _start;
+    private _unobservePanRepeat;
+    private _addGroupClass;
+    private _removeGroupClass;
+    private _stop;
+    /**
+     * For the current drag group, compute a position for each of the elements such that each element is gathered around the focus position. This is used when dropping a vertex on a group: the focus vertex goes where it was dropped, and the rest of the drag group are pulled in around that focus element. The gather operation should try to maintain the original orientation between the focus element and the other members of the group, but obviously we want to pull them right in close in order to drop them as a unit.
+     * @param focusPosition
+     * @param dropGroup
+     * @param dropGroupContentArea
+     * @private
+     */
+    private _gatherDragGroup;
+    /**
+     * Reverts a drag in its entirety - everything, including elements that were
+     * @private
+     */
+    private _revert;
+    private _isOriginalGroup;
+    private _moveToNewPosition;
+    private _drag;
+    private _setRelativePositionAtDown;
+    /**
+     * @internal
+     */
+    _addToDragGroup(spec: InternalDragGroupSpec | string, ...els: Array<ViewportNodeElement<BrowserElement>>): void;
+    /**
+     * @internal
+     */
+    removeFromDragGroup(...els: Array<ViewportElement<BrowserElement>>): void;
+    /**
+     * @internal
+     */
+    $setDragGroupState(active: boolean, ...els: Array<ViewportElement<BrowserElement>>): void;
+    /**
+     * @internal
+     * @param name
+     */
+    $clearDragGroup(name: string): void;
+    /**
+    * Resolve the DragGroup the element with the given id is currently in, may be null.
+    * @param elementId
+    * @returns
+    * @internal
+    */
+    $resolveDragGroup(elementId: string): DragGroup<BrowserElement> | null;
+    private _sizeElasticGroupFrame;
+    private _canDragVertex;
+    $addVertexDragFilter(filter: VertexDragFilter<BrowserElement>): void;
+}
+export {};

package/types/browser-ui/element-dragger.d.ts

@@ -0,0 +1,45 @@
+import { ContainmentType } from "./collicat";
+import { BrowserElement } from "./util";
+import { ConstrainFunction } from "../ui";
+/**
+ * Options for an ElementDragger
+ * @group Components
+ * @category Element Dragger
+ */
+export interface ElementDraggerOptions {
+    /**
+     * CSS3 filter identifying parts of the elements that should not allow drag
+     */
+    filter?: string;
+    /**
+     * Function to constrain movement of the elements.
+     */
+    constrain?: ConstrainFunction<BrowserElement, MouseEvent>;
+    /**
+     * Shortcut for some basic constrain scenarios - constrain to parent, constrain entirely to parent, dont allow movement into negative axes.
+     */
+    containment?: ContainmentType;
+    /**
+     * If `containment` is set, you can provide a value for padding here. Currently the default is 5 pixels.
+     */
+    containmentPadding?: number;
+}
+/**
+ * A helper class that uses VisuallyJs's drag management classes to offer a means to
+ * make arbitrary DOM elements draggable. They do not need to be children of a Surface canvas.
+ *
+ * You can pass a single element or an array of elements to the constructor. SVG/HTML elements
+ * are supported. SVG child elements - such as `circle`, `rect`, `g` etc - are not.
+ *
+ * @group Components
+ * @category Element Dragger
+ */
+export declare class ElementDragger {
+    private collicat;
+    private drags;
+    constructor(el: ArrayLike<Element> | Element, options?: ElementDraggerOptions);
+    /**
+     * Unregister all event handlers etc and release resources.
+     */
+    destroy(): void;
+}

package/types/browser-ui/element-facade.d.ts

@@ -0,0 +1,11 @@
+import { Drag } from "./collicat";
+import { VisuallyJsDOMInformation } from "./definitions";
+export interface VisuallyJSDOMElement extends HTMLElement {
+    offsetParent: VisuallyJSDOMElement;
+    parentNode: VisuallyJSDOMElement;
+    parentElement: VisuallyJSDOMElement;
+    jtk: VisuallyJsDOMInformation;
+    _katavorioDrag?: Drag;
+    cloneNode: (deep?: boolean) => VisuallyJSDOMElement;
+    getAttribute(name: string): string;
+}