@thienvu18/designable-core 2.0.0

package/esm/models/Workspace.js

@@ -0,0 +1,92 @@
+import { Viewport } from './Viewport';
+import { Operation } from './Operation';
+import { History } from './History';
+import { uid } from '@thienvu18/designable-shared';
+import { HistoryGotoEvent, HistoryRedoEvent, HistoryUndoEvent, HistoryPushEvent, } from '../events';
+//工作区模型
+export class Workspace {
+    constructor(engine, props) {
+        this.engine = engine;
+        this.props = props;
+        this.id = props.id || uid();
+        this.title = props.title;
+        this.description = props.description;
+        this.viewport = new Viewport({
+            engine: this.engine,
+            workspace: this,
+            viewportElement: props.viewportElement,
+            contentWindow: props.contentWindow,
+            nodeIdAttrName: this.engine.props.nodeIdAttrName,
+            moveSensitive: true,
+            moveInsertionType: 'all',
+        });
+        this.outline = new Viewport({
+            engine: this.engine,
+            workspace: this,
+            viewportElement: props.viewportElement,
+            contentWindow: props.contentWindow,
+            nodeIdAttrName: this.engine.props.outlineNodeIdAttrName,
+            moveSensitive: false,
+            moveInsertionType: 'block',
+        });
+        this.operation = new Operation(this);
+        this.history = new History(this, {
+            onPush: (item) => {
+                this.operation.dispatch(new HistoryPushEvent(item));
+            },
+            onRedo: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new HistoryRedoEvent(item));
+            },
+            onUndo: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new HistoryUndoEvent(item));
+            },
+            onGoto: (item) => {
+                this.operation.hover.clear();
+                this.operation.dispatch(new HistoryGotoEvent(item));
+            },
+        });
+    }
+    getEventContext() {
+        return {
+            workbench: this.engine.workbench,
+            workspace: this,
+            engine: this.engine,
+            viewport: this.viewport,
+        };
+    }
+    attachEvents(container, contentWindow) {
+        this.engine.attachEvents(container, contentWindow, this.getEventContext());
+    }
+    detachEvents(container) {
+        this.engine.detachEvents(container);
+    }
+    dispatch(event) {
+        return this.engine.dispatch(event, this.getEventContext());
+    }
+    serialize() {
+        return {
+            id: this.id,
+            title: this.title,
+            description: this.description,
+            operation: this.operation.serialize(),
+        };
+    }
+    from(workspace) {
+        if (!workspace)
+            return;
+        if (workspace.operation) {
+            this.operation.from(workspace.operation);
+        }
+        if (workspace.id) {
+            this.id = workspace.id;
+        }
+        if (workspace.title) {
+            this.title = workspace.title;
+        }
+        if (workspace.description) {
+            this.description = workspace.description;
+        }
+    }
+}

package/esm/models/index.d.ts

@@ -0,0 +1,13 @@
+export * from './Engine';
+export * from './Screen';
+export * from './Cursor';
+export * from './Operation';
+export * from './Viewport';
+export * from './TreeNode';
+export * from './Workbench';
+export * from './Workspace';
+export * from './Selection';
+export * from './MoveHelper';
+export * from './Keyboard';
+export * from './Shortcut';
+export * from './History';

package/esm/models/index.js

@@ -0,0 +1,13 @@
+export * from './Engine';
+export * from './Screen';
+export * from './Cursor';
+export * from './Operation';
+export * from './Viewport';
+export * from './TreeNode';
+export * from './Workbench';
+export * from './Workspace';
+export * from './Selection';
+export * from './MoveHelper';
+export * from './Keyboard';
+export * from './Shortcut';
+export * from './History';

package/esm/presets.d.ts

@@ -0,0 +1,4 @@
+import { DragDropDriver, MouseClickDriver, MouseMoveDriver, ViewportResizeDriver, ViewportScrollDriver, KeyboardDriver } from './drivers';
+export declare const DEFAULT_EFFECTS: ((engine: import("./models").Engine) => void)[];
+export declare const DEFAULT_DRIVERS: (typeof DragDropDriver | typeof MouseClickDriver | typeof MouseMoveDriver | typeof ViewportResizeDriver | typeof ViewportScrollDriver | typeof KeyboardDriver)[];
+export declare const DEFAULT_SHORTCUTS: import("./models").Shortcut[];

package/esm/presets.js

@@ -0,0 +1,38 @@
+import { DragDropDriver, MouseClickDriver, MouseMoveDriver, ViewportResizeDriver, ViewportScrollDriver, KeyboardDriver, } from './drivers';
+import { useCursorEffect, useViewportEffect, useDragDropEffect, useSelectionEffect, useResizeEffect, useKeyboardEffect, useAutoScrollEffect, useWorkspaceEffect, useFreeSelectionEffect, useContentEditableEffect, useTranslateEffect, } from './effects';
+import { SelectNodes, SelectAllNodes, SelectSameTypeNodes, DeleteNodes, CopyNodes, PasteNodes, UndoMutation, RedoMutation, CursorSwitchSelection, PreventCommandX, SelectPrevNode, SelectNextNode, } from './shortcuts';
+export const DEFAULT_EFFECTS = [
+    useFreeSelectionEffect,
+    useCursorEffect,
+    useViewportEffect,
+    useDragDropEffect,
+    useSelectionEffect,
+    useKeyboardEffect,
+    useAutoScrollEffect,
+    useWorkspaceEffect,
+    useContentEditableEffect,
+    useTranslateEffect,
+    useResizeEffect,
+];
+export const DEFAULT_DRIVERS = [
+    MouseMoveDriver,
+    DragDropDriver,
+    MouseClickDriver,
+    ViewportResizeDriver,
+    ViewportScrollDriver,
+    KeyboardDriver,
+];
+export const DEFAULT_SHORTCUTS = [
+    PreventCommandX,
+    SelectNodes,
+    SelectAllNodes,
+    SelectSameTypeNodes,
+    DeleteNodes,
+    CopyNodes,
+    PasteNodes,
+    SelectPrevNode,
+    SelectNextNode,
+    UndoMutation,
+    RedoMutation,
+    CursorSwitchSelection,
+];

package/esm/registry.d.ts

@@ -0,0 +1,16 @@
+import { IDesignerBehaviors, IDesignerLocales, IDesignerIcons, IBehaviorLike, IBehavior } from './types';
+import { TreeNode } from './models';
+declare const DESIGNER_GlobalRegistry: {
+    setDesignerLanguage: (lang: string) => void;
+    setDesignerBehaviors: (behaviors: IBehaviorLike[]) => void;
+    getDesignerBehaviors: (node: TreeNode) => IBehavior[];
+    getDesignerIcon: (name: string) => any;
+    getDesignerLanguage: () => string;
+    getDesignerMessage: (token: string, locales?: IDesignerLocales) => any;
+    registerDesignerIcons: (map: IDesignerIcons) => void;
+    registerDesignerLocales: (...packages: IDesignerLocales[]) => void;
+    registerDesignerBehaviors: (...packages: IDesignerBehaviors[]) => void;
+};
+export type IDesignerRegistry = typeof DESIGNER_GlobalRegistry;
+export declare const GlobalRegistry: IDesignerRegistry;
+export {};

package/esm/registry.js

@@ -0,0 +1,113 @@
+import { each } from '@thienvu18/designable-shared';
+import { Path } from '@formily/path';
+import { observable } from '@formily/reactive';
+import { mergeLocales, lowerSnake, getBrowserLanguage } from './internals';
+import { isBehaviorHost } from './externals';
+import { isBehaviorList } from './externals';
+const getISOCode = (language) => {
+    let isoCode = DESIGNER_LANGUAGE_STORE.value;
+    let lang = lowerSnake(language);
+    if (DESIGNER_LOCALES_STORE.value[lang]) {
+        return lang;
+    }
+    each(DESIGNER_LOCALES_STORE.value, (_, key) => {
+        if (key.indexOf(lang) > -1 || String(lang).indexOf(key) > -1) {
+            isoCode = key;
+            return false;
+        }
+    });
+    return isoCode;
+};
+const reSortBehaviors = (target, sources) => {
+    const findTargetBehavior = (behavior) => target.includes(behavior);
+    const findSourceBehavior = (name) => {
+        for (let key in sources) {
+            const { Behavior } = sources[key];
+            for (let i = 0; i < Behavior.length; i++) {
+                if (Behavior[i].name === name)
+                    return Behavior[i];
+            }
+        }
+    };
+    each(sources, (item) => {
+        if (!item)
+            return;
+        if (!isBehaviorHost(item))
+            return;
+        const { Behavior } = item;
+        each(Behavior, (behavior) => {
+            if (findTargetBehavior(behavior))
+                return;
+            const name = behavior.name;
+            each(behavior.extends, (dep) => {
+                const behavior = findSourceBehavior(dep);
+                if (!behavior)
+                    throw new Error(`No ${dep} behavior that ${name} depends on`);
+                if (!findTargetBehavior(behavior)) {
+                    target.unshift(behavior);
+                }
+            });
+            target.push(behavior);
+        });
+    });
+};
+const DESIGNER_BEHAVIORS_STORE = observable.ref([]);
+const DESIGNER_ICONS_STORE = observable.ref({});
+const DESIGNER_LOCALES_STORE = observable.ref({});
+const DESIGNER_LANGUAGE_STORE = observable.ref(getBrowserLanguage());
+const DESIGNER_GlobalRegistry = {
+    setDesignerLanguage: (lang) => {
+        DESIGNER_LANGUAGE_STORE.value = lang;
+    },
+    setDesignerBehaviors: (behaviors) => {
+        DESIGNER_BEHAVIORS_STORE.value = behaviors.reduce((buf, behavior) => {
+            if (isBehaviorHost(behavior)) {
+                return buf.concat(behavior.Behavior);
+            }
+            else if (isBehaviorList(behavior)) {
+                return buf.concat(behavior);
+            }
+            return buf;
+        }, []);
+    },
+    getDesignerBehaviors: (node) => {
+        return DESIGNER_BEHAVIORS_STORE.value.filter((pattern) => pattern.selector(node));
+    },
+    getDesignerIcon: (name) => {
+        return DESIGNER_ICONS_STORE[name];
+    },
+    getDesignerLanguage: () => {
+        return getISOCode(DESIGNER_LANGUAGE_STORE.value);
+    },
+    getDesignerMessage: (token, locales) => {
+        const lang = getISOCode(DESIGNER_LANGUAGE_STORE.value);
+        const locale = locales ? locales[lang] : DESIGNER_LOCALES_STORE.value[lang];
+        if (!locale) {
+            for (let key in DESIGNER_LOCALES_STORE.value) {
+                const message = Path.getIn(DESIGNER_LOCALES_STORE.value[key], lowerSnake(token));
+                if (message)
+                    return message;
+            }
+            return;
+        }
+        return Path.getIn(locale, lowerSnake(token));
+    },
+    registerDesignerIcons: (map) => {
+        Object.assign(DESIGNER_ICONS_STORE, map);
+    },
+    registerDesignerLocales: (...packages) => {
+        packages.forEach((locales) => {
+            mergeLocales(DESIGNER_LOCALES_STORE.value, locales);
+        });
+    },
+    registerDesignerBehaviors: (...packages) => {
+        const results = [];
+        packages.forEach((sources) => {
+            reSortBehaviors(results, sources);
+        });
+        if (results.length) {
+            DESIGNER_BEHAVIORS_STORE.value = results;
+        }
+    },
+};
+export const GlobalRegistry = DESIGNER_GlobalRegistry;

package/esm/shortcuts/CursorSwitch.d.ts

@@ -0,0 +1,2 @@
+import { Shortcut } from '../models';
+export declare const CursorSwitchSelection: Shortcut;

package/esm/shortcuts/CursorSwitch.js

@@ -0,0 +1,10 @@
+import { CursorType, KeyCode, Shortcut } from '../models';
+export const CursorSwitchSelection = new Shortcut({
+    codes: [KeyCode.Shift, KeyCode.S],
+    handler(context) {
+        const engine = context?.engine;
+        if (engine) {
+            engine.cursor.setType(CursorType.Selection);
+        }
+    },
+});

package/esm/shortcuts/MultiSelection.d.ts

@@ -0,0 +1,5 @@
+import { Shortcut } from '../models';
+export declare const SelectNodes: Shortcut;
+export declare const SelectSameTypeNodes: Shortcut;
+export declare const PreventCommandX: Shortcut;
+export declare const SelectAllNodes: Shortcut;

package/esm/shortcuts/MultiSelection.js

@@ -0,0 +1,27 @@
+import { KeyCode, Shortcut } from '../models';
+export const SelectNodes = new Shortcut({
+    codes: [[KeyCode.Meta], [KeyCode.Control]],
+});
+export const SelectSameTypeNodes = new Shortcut({
+    codes: [KeyCode.Shift],
+});
+export const PreventCommandX = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.X],
+        [KeyCode.Control, KeyCode.X],
+    ],
+});
+export const SelectAllNodes = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.A],
+        [KeyCode.Control, KeyCode.A],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            selection.batchSelect(tree.descendants);
+        }
+    },
+});

package/esm/shortcuts/NodeMutation.d.ts

@@ -0,0 +1,7 @@
+import { Shortcut } from '../models';
+/**
+ * 快捷删除，快捷复制粘贴
+ */
+export declare const DeleteNodes: Shortcut;
+export declare const CopyNodes: Shortcut;
+export declare const PasteNodes: Shortcut;

package/esm/shortcuts/NodeMutation.js

@@ -0,0 +1,40 @@
+import { KeyCode, Shortcut, TreeNode } from '../models';
+/**
+ * 快捷删除，快捷复制粘贴
+ */
+export const DeleteNodes = new Shortcut({
+    codes: [[KeyCode.Backspace], [KeyCode.Delete]],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            TreeNode.remove(operation.selection.selectedNodes);
+        }
+    },
+});
+const Clipboard = {
+    nodes: [],
+};
+export const CopyNodes = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.C],
+        [KeyCode.Control, KeyCode.C],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            Clipboard.nodes = operation.selection.selectedNodes;
+        }
+    },
+});
+export const PasteNodes = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.V],
+        [KeyCode.Control, KeyCode.V],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            TreeNode.clone(Clipboard.nodes);
+        }
+    },
+});

package/esm/shortcuts/QuickSelection.d.ts

@@ -0,0 +1,3 @@
+import { Shortcut } from '../models';
+export declare const SelectPrevNode: Shortcut;
+export declare const SelectNextNode: Shortcut;

package/esm/shortcuts/QuickSelection.js

@@ -0,0 +1,84 @@
+import { KeyCode, Shortcut } from '../models';
+const findBottomLastChild = (node) => {
+    if (!node)
+        return node;
+    if (node.lastChild) {
+        return findBottomLastChild(node.lastChild);
+    }
+    return node;
+};
+const findTopParentNext = (node) => {
+    if (!node.parent)
+        return node;
+    if (node.parent?.next)
+        return node.parent.next;
+    return findTopParentNext(node.parent);
+};
+export const SelectPrevNode = new Shortcut({
+    codes: [
+        [KeyCode.Up],
+        [KeyCode.PageUp],
+        [KeyCode.ArrowUp],
+        [KeyCode.Left],
+        [KeyCode.LeftWindowKey],
+        [KeyCode.ArrowLeft],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            const selectedNode = tree.findById(selection.last);
+            if (selectedNode) {
+                const previousNode = selectedNode.previous;
+                if (previousNode) {
+                    const bottom = findBottomLastChild(previousNode);
+                    if (bottom) {
+                        selection.select(bottom);
+                    }
+                    else {
+                        selection.select(previousNode);
+                    }
+                }
+                else if (selectedNode.parent) {
+                    selection.select(selectedNode.parent);
+                }
+                else {
+                    const bottom = findBottomLastChild(selectedNode.lastChild);
+                    if (bottom) {
+                        selection.select(bottom);
+                    }
+                }
+            }
+        }
+    },
+});
+export const SelectNextNode = new Shortcut({
+    codes: [
+        [KeyCode.Down],
+        [KeyCode.PageDown],
+        [KeyCode.ArrowDown],
+        [KeyCode.Right],
+        [KeyCode.RightWindowKey],
+        [KeyCode.ArrowRight],
+    ],
+    handler(context) {
+        const operation = context?.workspace.operation;
+        if (operation) {
+            const tree = operation.tree;
+            const selection = operation.selection;
+            const selectedNode = tree.findById(selection.last);
+            if (selectedNode) {
+                const nextNode = selectedNode.firstChild
+                    ? selectedNode.firstChild
+                    : selectedNode.next;
+                if (nextNode) {
+                    selection.select(nextNode);
+                }
+                else {
+                    selection.select(findTopParentNext(selectedNode));
+                }
+            }
+        }
+    },
+});

package/esm/shortcuts/UndoRedo.d.ts

@@ -0,0 +1,3 @@
+import { Shortcut } from '../models';
+export declare const UndoMutation: Shortcut;
+export declare const RedoMutation: Shortcut;

package/esm/shortcuts/UndoRedo.js

@@ -0,0 +1,27 @@
+import { KeyCode, Shortcut } from '../models';
+export const UndoMutation = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.Z],
+        [KeyCode.Control, KeyCode.Z],
+    ],
+    handler(context) {
+        const workspace = context?.workspace;
+        if (workspace) {
+            workspace.history.undo();
+        }
+        workspace.operation.hover.clear();
+    },
+});
+export const RedoMutation = new Shortcut({
+    codes: [
+        [KeyCode.Meta, KeyCode.Shift, KeyCode.Z],
+        [KeyCode.Control, KeyCode.Shift, KeyCode.Z],
+    ],
+    handler(context) {
+        const workspace = context?.workspace;
+        if (workspace) {
+            workspace.history.redo();
+        }
+        workspace.operation.hover.clear();
+    },
+});

package/esm/shortcuts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MultiSelection';
+export * from './NodeMutation';
+export * from './UndoRedo';
+export * from './CursorSwitch';
+export * from './QuickSelection';

package/esm/shortcuts/index.js

@@ -0,0 +1,5 @@
+export * from './MultiSelection';
+export * from './NodeMutation';
+export * from './UndoRedo';
+export * from './CursorSwitch';
+export * from './QuickSelection';

package/esm/types.d.ts

@@ -0,0 +1,131 @@
+import { IEventProps, Event } from '@thienvu18/designable-shared';
+import { ISchema } from '@formily/json-schema';
+import { Engine, ITreeNode, ScreenType, Shortcut, Viewport, Workbench, Workspace, TreeNode } from './models';
+export type IEngineProps<T = Event> = IEventProps<T> & {
+    shortcuts?: Shortcut[];
+    sourceIdAttrName?: string;
+    nodeIdAttrName?: string;
+    contentEditableAttrName?: string;
+    contentEditableNodeIdAttrName?: string;
+    clickStopPropagationAttrName?: string;
+    outlineNodeIdAttrName?: string;
+    nodeSelectionIdAttrName?: string;
+    nodeDragHandlerAttrName?: string;
+    screenResizeHandlerAttrName?: string;
+    nodeResizeHandlerAttrName?: string;
+    nodeTranslateAttrName?: string;
+    defaultComponentTree?: ITreeNode;
+    defaultScreenType?: ScreenType;
+    rootComponentName?: string;
+};
+export type IEngineContext = {
+    workspace: Workspace;
+    workbench: Workbench;
+    engine: Engine;
+    viewport: Viewport;
+};
+export type IResizable = {
+    width?: (node: TreeNode, element: Element) => {
+        plus: () => void;
+        minus: () => void;
+    };
+    height?: (node: TreeNode, element: Element) => {
+        plus: () => void;
+        minus: () => void;
+    };
+};
+export type ITranslate = {
+    x: (node: TreeNode, element: HTMLElement, diffX: string | number) => {
+        translate: () => void;
+    };
+    y: (node: TreeNode, element: HTMLElement, diffY: string | number) => {
+        translate: () => void;
+    };
+};
+export interface IDesignerProps {
+    package?: string;
+    registry?: string;
+    version?: string;
+    path?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    droppable?: boolean;
+    draggable?: boolean;
+    deletable?: boolean;
+    cloneable?: boolean;
+    resizable?: IResizable;
+    translatable?: ITranslate;
+    inlineChildrenLayout?: boolean;
+    selfRenderChildren?: boolean;
+    propsSchema?: ISchema;
+    defaultProps?: any;
+    getDragNodes?: (node: TreeNode) => TreeNode | TreeNode[];
+    getDropNodes?: (node: TreeNode, parent: TreeNode) => TreeNode | TreeNode[];
+    getComponentProps?: (node: TreeNode) => any;
+    allowAppend?: (target: TreeNode, sources?: TreeNode[]) => boolean;
+    allowSiblings?: (target: TreeNode, sources?: TreeNode[]) => boolean;
+    allowDrop?: (target: TreeNode) => boolean;
+    [key: string]: any;
+}
+export type IDesignerPropsMap = Record<string, IDesignerProps>;
+export type IDesignerControllerProps = IDesignerProps | ((node: TreeNode) => IDesignerProps);
+export type IDesignerControllerPropsMap = Record<string, IDesignerControllerProps>;
+export interface IDesignerLocales {
+    [ISOCode: string]: {
+        [key: string]: any;
+    };
+}
+export interface IDesignerMiniLocales {
+    [ISOCode: string]: string;
+}
+export interface IDesignerBehaviors {
+    [key: string]: IBehaviorHost;
+}
+export interface IDesignerStore<P> {
+    value: P;
+}
+export type IDesignerIcons = Record<string, any>;
+export type IDesignerIconsStore = IDesignerStore<IDesignerIcons>;
+export type IDesignerLocaleStore = IDesignerStore<IDesignerLocales>;
+export type IDesignerBehaviorStore = IDesignerStore<IBehavior[]>;
+export type IDesignerLanguageStore = IDesignerStore<string>;
+export type WorkbenchTypes = 'DESIGNABLE' | 'PREVIEW' | 'JSONTREE' | 'MARKUP' | (string & {});
+export interface IBehavior {
+    name: string;
+    extends?: string[];
+    selector: (node: TreeNode) => boolean;
+    designerProps?: IDesignerControllerProps;
+    designerLocales?: IDesignerLocales;
+}
+export interface IBehaviorCreator {
+    name: string;
+    extends?: string[];
+    selector: string | ((node: TreeNode) => boolean);
+    designerProps?: IDesignerControllerProps;
+    designerLocales?: IDesignerLocales;
+}
+export interface IBehaviorHost {
+    Behavior?: IBehavior[];
+}
+export type IBehaviorLike = IBehavior[] | IBehaviorHost;
+export interface IResource {
+    title?: string | IDesignerMiniLocales;
+    description?: string | IDesignerMiniLocales;
+    icon?: any;
+    thumb?: string;
+    span?: number;
+    node?: TreeNode;
+}
+export interface IResourceHost {
+    Resource?: IResource[];
+}
+export type IResourceLike = IResource[] | IResourceHost;
+export interface IResourceCreator {
+    title?: string | IDesignerMiniLocales;
+    description?: string | IDesignerMiniLocales;
+    icon?: any;
+    thumb?: string;
+    span?: number;
+    elements?: ITreeNode[];
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/lib/drivers/DragDropDriver.d.ts

@@ -0,0 +1,14 @@
+import { EventDriver } from '@thienvu18/designable-shared';
+import { Engine } from '../models/Engine';
+export declare class DragDropDriver extends EventDriver<Engine> {
+    mouseDownTimer: any;
+    startEvent: MouseEvent;
+    onMouseDown: (e: MouseEvent) => boolean;
+    onMouseUp: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent | DragEvent) => void;
+    onContextMenuWhileDragging: (e: MouseEvent) => void;
+    onStartDrag: (e: MouseEvent | DragEvent) => void;
+    onDistanceChange: (e: MouseEvent) => void;
+    attach(): void;
+    detach(): void;
+}