@mdesignable/react 1.0.0-beta.64

package/esm/simulators/ResponsiveSimulator/styles.less

@@ -0,0 +1,56 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-responsive-simulator {
+  background-color: var(--dn-responsive-simulator-bg-color);
+}
+
+.@{prefix-cls}-resize-handle {
+  position: absolute;
+  transition: 0.2s all ease-in-out;
+  box-sizing: border-box;
+  user-select: none;
+  bottom: 0;
+  z-index: 10;
+  background: var(--dn-resize-handle-bg-color);
+  color: var(--dn-resize-handle-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-RESIZE_WIDTH {
+    top: 0;
+    bottom: 15px;
+    cursor: ew-resize;
+
+    svg {
+      transform-origin: center;
+      transform: rotate(-90deg);
+    }
+  }
+
+  &-RESIZE_HEIGHT {
+    left: 0;
+    right: 15px;
+    cursor: ns-resize;
+  }
+
+  &-RESIZE {
+    cursor: nwse-resize;
+  }
+
+  &-RESIZE_HEIGHT,
+  &-RESIZE {
+    height: 15px;
+  }
+
+  &-RESIZE_WIDTH,
+  &-RESIZE {
+    right: 0;
+    width: 15px;
+  }
+
+  &:hover {
+    background: var(--dn-resize-handle-hover-bg-color);
+    color: var(--dn-resize-handle-hover-color);
+  }
+}

package/esm/simulators/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PCSimulator';
+export * from './MobileSimulator';
+export * from './ResponsiveSimulator';

package/esm/simulators/index.js

@@ -0,0 +1,3 @@
+export * from './PCSimulator';
+export * from './MobileSimulator';
+export * from './ResponsiveSimulator';

package/esm/theme.less

@@ -0,0 +1,224 @@
+@import './variables.less';
+
+:root {
+  //品牌色
+  --dn-brand-color: rgba(24, 144, 255, 1);
+  --dn-brand-hovering: rgba(64, 169, 255, 1);
+  --dn-brand-dragging: rgba(24, 144, 255, 0.26);
+  --dn-brand-dropping: rgba(24, 144, 255, 0.34);
+  --dn-brand-moving: rgba(24, 144, 255, 0.5);
+  //白色调色版
+  --dn-white: #fff;
+  --dn-white-gray: #d9d9d9;
+  --dn-white-gray-light: #eee;
+  --dn-white-gray-lighter: #f0f0f0;
+  --dn-white-gray-dark: #aaa;
+  //灰色调色板
+  --dn-gray: #333;
+  --dn-gray-light: #444;
+  --dn-gray-lighter: #666;
+  --dn-gray-dark: #222;
+  --dn-black: #1a1a1a;
+}
+
+.@{prefix-cls}-light {
+  --dn-aux-cover-rect-dragging-color: var(--dn-brand-dragging);
+  --dn-aux-cover-rect-dropping-color: var(--dn-brand-dropping);
+  --dn-aux-free-selection-background-color: var(--dn-brand-color);
+  --dn-aux-free-selection-border-color: var(--dn-brand-color);
+  --dn-aux-insertion-color: var(--dn-brand-color);
+  --dn-aux-dashed-box-color: var(--dn-brand-color);
+  --dn-aux-dashed-box-title-color: var(--dn-gray);
+  --dn-aux-selection-box-border-color: var(--dn-brand-color);
+  --dn-aux-selection-box-color: var(--dn-gray);
+  --dn-ghost-color: var(--dn-white);
+  --dn-ghost-bg-color: var(--dn-brand-moving);
+  --dn-outline-tree-bg-color: var(--dn-white);
+  --dn-outline-tree-header-border-color: var(--dn-white-gray-light);
+  --dn-outline-tree-color: var(--dn-gray);
+  --dn-outline-tree-insertion-bg-color: var(--dn-brand-color);
+  --dn-outline-tree-node-header-color: var(--dn-gray);
+  --dn-outline-tree-node-hover-color: var(--dn-brand-color);
+
+  --dn-toolbar-input-color: var(--dn-gray-dark);
+  --dn-toolbar-input-bg-color: var(--dn-white);
+  --dn-toolbar-input-border-color: var(--dn-white-gray-light);
+  --dn-toolbar-input-hover-border-color: var(--dn-white-gray-light);
+  --dn-toolbar-input-handler-bg-color: var(--dn-white);
+
+  --dn-resize-handle-bg-color: var(--dn-white-gray-light);
+  --dn-resize-handle-hover-bg-color: var(--dn-white-gray-lighter);
+  --dn-resize-handle-color: var(--dn-gray-light);
+  --dn-resize-handle-hover-color: var(--dn-white-lighter);
+
+  --dn-mobile-simulator-bg-color: var(--dn-white-gray-light);
+  --dn-mobile-simulator-body-bg-color: var(--dn-white);
+  --dn-mobile-simulator-border-color: var(--dn-gray-dark);
+  --dn-responsive-simulator-bg-color: var(--dn-white);
+  --dn-pc-simulator-bg-color: var(--dn-white);
+
+  --dn-aux-selector-btn-color: var(--dn-white);
+  --dn-aux-selector-btn-bg-color: var(--dn-brand-color);
+  --dn-aux-selector-btn-border-color: var(--dn-brand-color);
+  --dn-aux-selector-btn-hover-color: var(--dn-white);
+  --dn-aux-selector-btn-hover-bg-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-hover-border-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-active-color: var(--dn-white);
+  --dn-aux-selector-btn-active-bg-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-active-border-color: var(--dn-brand-hovering);
+
+  --dn-panel-border-color: var(--dn-white-gray);
+  --dn-panel-active-bg-color: var(--dn-white-gray-light);
+  --dn-resource-content-bg-color: var(--dn-white);
+
+  --dn-composite-panel-tabs-bg-color: var(--dn-white);
+  --dn-composite-panel-tabs-active-bg-color: var(--dn-white);
+  --dn-composite-panel-highlight-bg-color: var(--dn-white-gray-light);
+  --dn-composite-panel-tabs-color: var(--dn-gray-lighter);
+  --dn-composite-panel-tabs-hover-color: var(--dn-brand-color);
+  --dn-composite-panel-tabs-content-bg-color: var(--dn-white);
+  --dn-composite-panel-tabs-header-color: var(--dn-gray-lighter);
+
+  --dn-collapse-header-color: var(--dn-gray);
+
+  --dn-resource-item-color: var(--dn-gray);
+  --dn-resource-item-hover-border-color: var(--dn-brand-color);
+  --dn-resource-item-hover-color: var(--dn-brand-color);
+
+  --dn-main-panel-header-bg-color: var(--dn-white);
+  --dn-workspace-panel-bg-color: var(--dn-white-gray-light);
+
+  --dn-scrollbar-color: var(--dn-white-gray);
+  --dn-scrollbar-hover-color: var(--white-dn-gray-lighter);
+
+  --dn-empty-bg-color: var(--dn-white);
+
+  --dn-droppable-bg-color: var(--dn-white-gray-lighter);
+  --dn-droppable-border-color: var(--dn-white-gray-dark);
+  --dn-droppable-color: var(--dn-gray-lighter);
+}
+
+.@{prefix-cls}-dark {
+  --dn-aux-cover-rect-dragging-color: var(--dn-brand-dragging);
+  --dn-aux-cover-rect-dropping-color: var(--dn-brand-dropping);
+  --dn-aux-free-selection-background-color: var(--dn-brand-color);
+  --dn-aux-free-selection-border-color: var(--dn-brand-color);
+  --dn-aux-insertion-color: var(--dn-brand-color);
+  --dn-aux-dashed-box-color: var(--dn-brand-color);
+  --dn-aux-dashed-box-title-color: var(--dn-brand-color);
+  --dn-aux-selection-box-border-color: var(--dn-brand-color);
+  --dn-aux-selection-box-color: var(--dn-gray);
+  --dn-ghost-color: var(--dn-white);
+  --dn-ghost-bg-color: var(--dn-brand-moving);
+  --dn-outline-tree-bg-color: var(--dn-gray-dark);
+  --dn-outline-tree-header-border-color: var(--dn-gray);
+  --dn-outline-tree-color: var(--dn-white-gray);
+  --dn-outline-tree-insertion-bg-color: var(--dn-brand-color);
+  --dn-outline-tree-node-header-color: var(--dn-white-gray);
+  --dn-outline-tree-node-hover-color: var(--dn-white-gray);
+
+  --dn-toolbar-input-color: var(--dn-white-gray);
+  --dn-toolbar-input-bg-color: transparent;
+  --dn-toolbar-input-border-color: var(--dn-gray-light);
+  --dn-toolbar-input-hover-border-color: var(--dn-brand-color);
+  --dn-toolbar-input-handler-bg-color: var(--dn-gray-light);
+  --dn-resize-handle-bg-color: var(--dn-gray-light);
+  --dn-resize-handle-hover-bg-color: var(--dn-gray-lighter);
+  --dn-resize-handle-color: var(--dn-gray-lighter);
+  --dn-resize-handle-hover-color: var(--dn-white-gray-dark);
+
+  --dn-mobile-simulator-bg-color: var(--dn-black);
+  --dn-mobile-simulator-body-bg-color: var(--dn-black);
+  --dn-mobile-simulator-border-color: var(--dn-black);
+  --dn-responsive-simulator-bg-color: var(--dn-black);
+  --dn-pc-simulator-bg-color: var(--dn-black);
+
+  --dn-aux-selector-btn-color: var(--dn-white);
+  --dn-aux-selector-btn-bg-color: var(--dn-brand-color);
+  --dn-aux-selector-btn-border-color: var(--dn-brand-color);
+  --dn-aux-selector-btn-hover-color: var(--dn-white);
+  --dn-aux-selector-btn-hover-bg-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-hover-border-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-active-color: var(--dn-white);
+  --dn-aux-selector-btn-active-bg-color: var(--dn-brand-hovering);
+  --dn-aux-selector-btn-active-border-color: var(--dn-brand-hovering);
+
+  --dn-panel-border-color: var(--dn-gray-light);
+  --dn-panel-active-bg-color: var(--dn-gray);
+  --dn-resource-content-bg-color: var(--dn-gray-dark);
+
+  --dn-composite-panel-tabs-bg-color: var(--dn-gray-dark);
+  --dn-composite-panel-tabs-active-bg-color: var(--dn-gray-dark);
+  --dn-composite-panel-highlight-bg-color: var(--dn-black);
+  --dn-composite-panel-tabs-color: var(--dn-white-gray-dark);
+  --dn-composite-panel-tabs-hover-color: var(--dn-brand-color);
+  --dn-composite-panel-tabs-content-bg-color: var(--dn-gray-dark);
+  --dn-composite-panel-tabs-header-color: var(--dn-white-gray);
+
+  --dn-collapse-header-color: var(--dn-white-gray);
+
+  --dn-resource-item-color: var(--dn-white-gray);
+  --dn-resource-item-hover-color: var(--dn-brand-color);
+
+  --dn-main-panel-header-bg-color: var(--dn-gray-dark);
+  --dn-workspace-panel-bg-color: var(--dn-gray-dark);
+
+  --dn-scrollbar-color: var(--dn-gray-light);
+  --dn-scrollbar-hover-color: var(--dn-gray-lighter);
+
+  --dn-empty-bg-color: var(--dn-gray-dark);
+
+  --dn-droppable-bg-color: var(--dn-gray);
+  --dn-droppable-border-color: var(--dn-gray-light);
+  --dn-droppable-color: var(--dn-white);
+}
+
+.@{prefix-cls}-app {
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--dn-scrollbar-color);
+    border-radius: 0;
+    transition: all 0.25s ease-in-out;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--dn-scrollbar-hover-color);
+  }
+
+  color: var(--dn-gray-dark);
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  font-feature-settings: 'tnum';
+
+  * {
+    box-sizing: border-box;
+  }
+
+  *[contenteditable='true'] {
+    min-width: 1px;
+    min-height: 14px;
+    cursor: text !important;
+    outline: none !important;
+  }
+
+  *[data-content-editable]:not(*[contenteditable='true']) {
+    &:empty::before {
+      content: 'Please Input';
+      display: block;
+      opacity: 0.6;
+    }
+
+    &:hover {
+      cursor: text !important;
+      opacity: 0.8;
+    }
+  }
+}

package/esm/types.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Engine, IResource, IBehavior } from '@mdesignable/core';
+export interface IDesignerLayoutProps {
+    prefixCls?: string;
+    theme?: 'dark' | 'light' | (string & {});
+    variables?: Record<string, string>;
+    position?: 'fixed' | 'absolute' | 'relative';
+}
+export interface IDesignerProps extends IDesignerLayoutProps {
+    engine: Engine;
+}
+export interface IDesignerComponents {
+    [key: string]: DnFC<any> | DnComponent<any>;
+}
+export interface IDesignerLayoutContext {
+    theme?: 'dark' | 'light' | (string & {});
+    prefixCls: string;
+    position: 'fixed' | 'absolute' | 'relative';
+}
+export interface IWorkspaceContext {
+    id: string;
+    title?: string;
+    description?: string;
+}
+export type DnFC<P = {}> = React.FC<P> & {
+    Resource?: IResource[];
+    Behavior?: IBehavior[];
+};
+export type DnComponent<P = {}> = React.ComponentType<P> & {
+    Resource?: IResource[];
+    Behavior?: IBehavior[];
+};

package/esm/types.js

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

package/esm/variables.less

@@ -0,0 +1 @@
+@prefix-cls: ~'dn';

package/esm/widgets/AuxToolWidget/Copy.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface ICopyProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+}
+export declare const Copy: React.FC<ICopyProps>;

package/esm/widgets/AuxToolWidget/Copy.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import { usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { Button } from 'antd';
+export var Copy = function (_a) {
+    var node = _a.node, style = _a.style;
+    var prefix = usePrefix('aux-copy');
+    if (node === node.root)
+        return null;
+    return (React.createElement(Button, { className: prefix, style: style, type: "primary", onClick: function () {
+            TreeNode.clone([node]);
+        } },
+        React.createElement(IconWidget, { infer: "Clone" })));
+};
+Copy.displayName = 'Copy';

package/esm/widgets/AuxToolWidget/Cover.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Cover: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/esm/widgets/AuxToolWidget/Cover.js

@@ -0,0 +1,52 @@
+import React, { Fragment } from 'react';
+import { useViewport, useMoveHelper, useCursor, useValidNodeOffsetRect, usePrefix, } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { CursorStatus, ClosestPosition } from '@mdesignable/core';
+import cls from 'classnames';
+var CoverRect = function (props) {
+    var prefix = usePrefix('aux-cover-rect');
+    var rect = useValidNodeOffsetRect(props.node);
+    var createCoverStyle = function () {
+        var baseStyle = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+        };
+        if (rect) {
+            baseStyle.transform = "perspective(1px) translate3d(".concat(rect.x, "px,").concat(rect.y, "px,0)");
+            baseStyle.height = rect.height;
+            baseStyle.width = rect.width;
+        }
+        return baseStyle;
+    };
+    return (React.createElement("div", { className: cls(prefix, {
+            dragging: props.dragging,
+            dropping: props.dropping,
+        }), style: createCoverStyle() }));
+};
+export var Cover = observer(function () {
+    var viewportMoveHelper = useMoveHelper();
+    var viewport = useViewport();
+    var cursor = useCursor();
+    var renderDropCover = function () {
+        var _a;
+        if (!viewportMoveHelper.closestNode ||
+            !((_a = viewportMoveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.allowAppend(viewportMoveHelper.dragNodes)) ||
+            viewportMoveHelper.viewportClosestDirection !== ClosestPosition.Inner)
+            return null;
+        return React.createElement(CoverRect, { node: viewportMoveHelper.closestNode, dropping: true });
+    };
+    if (cursor.status !== CursorStatus.Dragging)
+        return null;
+    return (React.createElement(Fragment, null,
+        viewportMoveHelper.dragNodes.map(function (node) {
+            if (!node)
+                return;
+            if (!viewport.findElementById(node.id))
+                return;
+            return React.createElement(CoverRect, { key: node.id, node: node, dragging: true });
+        }),
+        renderDropCover()));
+});
+Cover.displayName = 'Cover';

package/esm/widgets/AuxToolWidget/DashedBox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DashedBox: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/esm/widgets/AuxToolWidget/DashedBox.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useHover, usePrefix, useValidNodeOffsetRect, useSelection, } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+export var DashedBox = observer(function () {
+    var hover = useHover();
+    var prefix = usePrefix('aux-dashed-box');
+    var selection = useSelection();
+    var rect = useValidNodeOffsetRect(hover === null || hover === void 0 ? void 0 : hover.node);
+    var createTipsStyle = function () {
+        var baseStyle = {
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            boxSizing: 'border-box',
+            visibility: 'hidden',
+            zIndex: 2,
+        };
+        if (rect) {
+            baseStyle.transform = "perspective(1px) translate3d(".concat(rect.x, "px,").concat(rect.y, "px,0)");
+            baseStyle.height = rect.height;
+            baseStyle.width = rect.width;
+            baseStyle.visibility = 'visible';
+        }
+        return baseStyle;
+    };
+    if (!hover.node)
+        return null;
+    if (hover.node.hidden)
+        return null;
+    if (selection.selected.includes(hover.node.id))
+        return null;
+    return (React.createElement("div", { className: prefix, style: createTipsStyle() },
+        React.createElement("span", { className: prefix + '-title', style: {
+                position: 'absolute',
+                bottom: '100%',
+                left: 0,
+                fontSize: 12,
+                userSelect: 'none',
+                fontWeight: 'lighter',
+                whiteSpace: 'nowrap',
+            } }, hover === null || hover === void 0 ? void 0 : hover.node.getMessage('title'))));
+});
+DashedBox.displayName = 'DashedBox';

package/esm/widgets/AuxToolWidget/Delete.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IDeleteProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+}
+export declare const Delete: React.FC<IDeleteProps>;

package/esm/widgets/AuxToolWidget/Delete.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import { IconWidget } from '../IconWidget';
+import { usePrefix } from '../../hooks';
+import { Button } from 'antd';
+export var Delete = function (_a) {
+    var node = _a.node, style = _a.style;
+    var prefix = usePrefix('aux-copy');
+    if (node === node.root)
+        return null;
+    return (React.createElement(Button, { className: prefix, style: style, type: "primary", onClick: function () {
+            TreeNode.remove([node]);
+        } },
+        React.createElement(IconWidget, { infer: "Remove" })));
+};
+Delete.displayName = 'Delete';

package/esm/widgets/AuxToolWidget/DragHandler.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IDragHandlerProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+}
+export declare const DragHandler: React.FC<IDragHandlerProps>;

package/esm/widgets/AuxToolWidget/DragHandler.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import { useDesigner, usePrefix } from '../../hooks';
+import { Button } from 'antd';
+export var DragHandler = observer(function (_a) {
+    var _b;
+    var node = _a.node, style = _a.style;
+    var designer = useDesigner();
+    var prefix = usePrefix('aux-drag-handler');
+    if (node === node.root || !node.allowDrag())
+        return null;
+    var handlerProps = (_b = {},
+        _b[designer.props.nodeDragHandlerAttrName] = 'true',
+        _b);
+    return (React.createElement(Button, __assign({}, handlerProps, { className: prefix, style: style, type: "primary" }),
+        React.createElement(IconWidget, { infer: "Move" })));
+});
+DragHandler.displayName = 'DragHandler';

package/esm/widgets/AuxToolWidget/FreeSelection.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FreeSelection: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/esm/widgets/AuxToolWidget/FreeSelection.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCursor, usePrefix, useViewport, useOperation } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { CursorDragType, CursorStatus } from '@mdesignable/core';
+import { calcRectByStartEndPoint } from '@mdesignable/shared';
+import cls from 'classnames';
+export var FreeSelection = observer(function () {
+    var cursor = useCursor();
+    var viewport = useViewport();
+    var operation = useOperation();
+    var prefix = usePrefix('aux-free-selection');
+    var createSelectionStyle = function () {
+        var startDragPoint = viewport.getOffsetPoint({
+            x: cursor.dragStartPosition.topClientX,
+            y: cursor.dragStartPosition.topClientY,
+        });
+        var currentPoint = viewport.getOffsetPoint({
+            x: cursor.position.topClientX,
+            y: cursor.position.topClientY,
+        });
+        var rect = calcRectByStartEndPoint(startDragPoint, currentPoint, viewport.dragScrollXDelta, viewport.dragScrollYDelta);
+        var baseStyle = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            opacity: 0.2,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            transform: "perspective(1px) translate3d(".concat(rect.x, "px,").concat(rect.y, "px,0)"),
+            height: rect.height,
+            width: rect.width,
+            pointerEvents: 'none',
+            boxSizing: 'border-box',
+            zIndex: 1,
+        };
+        return baseStyle;
+    };
+    if (operation.moveHelper.hasDragNodes ||
+        cursor.status !== CursorStatus.Dragging ||
+        cursor.dragType !== CursorDragType.Move)
+        return null;
+    return React.createElement("div", { className: cls(prefix), style: createSelectionStyle() });
+});

package/esm/widgets/AuxToolWidget/Helpers.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IHelpersProps {
+    node: TreeNode;
+    nodeRect: DOMRect;
+}
+export interface IViewportState {
+    viewportWidth?: number;
+    viewportHeight?: number;
+    viewportScrollX?: number;
+    viewportScrollY?: number;
+    viewportIsScrollTop?: boolean;
+    viewportIsScrollBottom?: boolean;
+}
+export declare const Helpers: React.FC<IHelpersProps>;