@mdesignable/react 1.0.0-beta.64

package/lib/simulators/ResponsiveSimulator/index.js

@@ -0,0 +1,186 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveSimulator = void 0;
+var react_1 = __importStar(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var hooks_1 = require("../../hooks");
+var widgets_1 = require("../../widgets");
+var handle_1 = require("./handle");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+var useResizeEffect = function (container, content, engine) {
+    var status = null;
+    var startX = 0;
+    var startY = 0;
+    var startWidth = 0;
+    var startHeight = 0;
+    var animationX = null;
+    var animationY = null;
+    var getStyle = function (status) {
+        if (status === handle_1.ResizeHandleType.Resize)
+            return 'nwse-resize';
+        if (status === handle_1.ResizeHandleType.ResizeHeight)
+            return 'ns-resize';
+        if (status === handle_1.ResizeHandleType.ResizeWidth)
+            return 'ew-resize';
+    };
+    var updateSize = function (deltaX, deltaY) {
+        var _a;
+        var containerRect = (_a = container.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (status === handle_1.ResizeHandleType.Resize) {
+            engine.screen.setSize(startWidth + deltaX, startHeight + deltaY);
+            container.current.scrollBy(containerRect.width + deltaX, containerRect.height + deltaY);
+        }
+        else if (status === handle_1.ResizeHandleType.ResizeHeight) {
+            engine.screen.setSize(startWidth, startHeight + deltaY);
+            container.current.scrollBy(container.current.scrollLeft, containerRect.height + deltaY);
+        }
+        else if (status === handle_1.ResizeHandleType.ResizeWidth) {
+            engine.screen.setSize(startWidth + deltaX, startHeight);
+            container.current.scrollBy(containerRect.width + deltaX, container.current.scrollTop);
+        }
+    };
+    engine.subscribeTo(core_1.DragStartEvent, function (e) {
+        var _a, _b;
+        if (!((_a = engine.workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.viewport))
+            return;
+        var target = e.data.target;
+        if (target === null || target === void 0 ? void 0 : target.closest("*[".concat(engine.props.screenResizeHandlerAttrName, "]"))) {
+            var rect = (_b = content.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (!rect)
+                return;
+            status = target.getAttribute(engine.props.screenResizeHandlerAttrName);
+            engine.cursor.setStyle(getStyle(status));
+            startX = e.data.topClientX;
+            startY = e.data.topClientY;
+            startWidth = rect.width;
+            startHeight = rect.height;
+            engine.cursor.setDragType(core_1.CursorDragType.Resize);
+        }
+    });
+    engine.subscribeTo(core_1.DragMoveEvent, function (e) {
+        var _a, _b;
+        if (!((_a = engine.workbench.currentWorkspace) === null || _a === void 0 ? void 0 : _a.viewport))
+            return;
+        if (!status)
+            return;
+        var deltaX = e.data.topClientX - startX;
+        var deltaY = e.data.topClientY - startY;
+        var containerRect = (_b = container.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        var distanceX = Math.floor(containerRect.right - e.data.topClientX);
+        var distanceY = Math.floor(containerRect.bottom - e.data.topClientY);
+        var factorX = (0, shared_1.calcSpeedFactor)(distanceX, 10);
+        var factorY = (0, shared_1.calcSpeedFactor)(distanceY, 10);
+        updateSize(deltaX, deltaY);
+        if (distanceX <= 10) {
+            if (!animationX) {
+                animationX = (0, shared_1.createUniformSpeedAnimation)(1000 * factorX, function (delta) {
+                    updateSize(deltaX + delta, deltaY);
+                });
+            }
+        }
+        else {
+            if (animationX) {
+                animationX = animationX();
+            }
+        }
+        if (distanceY <= 10) {
+            if (!animationY) {
+                animationY = (0, shared_1.createUniformSpeedAnimation)(300 * factorY, function (delta) {
+                    updateSize(deltaX, deltaY + delta);
+                });
+            }
+        }
+        else {
+            if (animationY) {
+                animationY = animationY();
+            }
+        }
+    });
+    engine.subscribeTo(core_1.DragStopEvent, function () {
+        if (!status)
+            return;
+        status = null;
+        engine.cursor.setStyle('');
+        engine.cursor.setDragType(core_1.CursorDragType.Move);
+        if (animationX) {
+            animationX = animationX();
+        }
+        if (animationY) {
+            animationY = animationY();
+        }
+    });
+};
+exports.ResponsiveSimulator = (0, reactive_react_1.observer)(function (props) {
+    var container = (0, react_1.useRef)();
+    var content = (0, react_1.useRef)();
+    var prefix = (0, hooks_1.usePrefix)('responsive-simulator');
+    var screen = (0, hooks_1.useScreen)();
+    (0, hooks_1.useDesigner)(function (engine) {
+        useResizeEffect(container, content, engine);
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(prefix, props.className), style: __assign({ height: '100%', width: '100%', minHeight: 100, position: 'relative' }, props.style) }),
+        react_1.default.createElement("div", { ref: container, style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                height: '100%',
+                width: '100%',
+                overflow: 'overlay',
+            } },
+            react_1.default.createElement("div", { ref: content, style: {
+                    width: screen.width,
+                    height: screen.height,
+                    paddingRight: 15,
+                    paddingBottom: 15,
+                    position: 'relative',
+                    boxSizing: 'border-box',
+                    overflow: 'hidden',
+                } },
+                props.children,
+                react_1.default.createElement(handle_1.ResizeHandle, { type: handle_1.ResizeHandleType.Resize },
+                    react_1.default.createElement(widgets_1.IconWidget, { infer: "DragMove", style: { pointerEvents: 'none' } })),
+                react_1.default.createElement(handle_1.ResizeHandle, { type: handle_1.ResizeHandleType.ResizeHeight },
+                    react_1.default.createElement(widgets_1.IconWidget, { infer: "Menu", style: { pointerEvents: 'none' } })),
+                react_1.default.createElement(handle_1.ResizeHandle, { type: handle_1.ResizeHandleType.ResizeWidth },
+                    react_1.default.createElement(widgets_1.IconWidget, { infer: "Menu", style: { pointerEvents: 'none' } }))))));
+});

package/lib/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/lib/simulators/index.d.ts

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

package/lib/simulators/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PCSimulator"), exports);
+__exportStar(require("./MobileSimulator"), exports);
+__exportStar(require("./ResponsiveSimulator"), exports);

package/lib/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/lib/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/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/variables.less

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

package/lib/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/lib/widgets/AuxToolWidget/Copy.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Copy = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@mdesignable/core");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var antd_1 = require("antd");
+var Copy = function (_a) {
+    var node = _a.node, style = _a.style;
+    var prefix = (0, hooks_1.usePrefix)('aux-copy');
+    if (node === node.root)
+        return null;
+    return (react_1.default.createElement(antd_1.Button, { className: prefix, style: style, type: "primary", onClick: function () {
+            core_1.TreeNode.clone([node]);
+        } },
+        react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Clone" })));
+};
+exports.Copy = Copy;
+exports.Copy.displayName = 'Copy';

package/lib/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/lib/widgets/AuxToolWidget/Cover.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cover = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var core_1 = require("@mdesignable/core");
+var classnames_1 = __importDefault(require("classnames"));
+var CoverRect = function (props) {
+    var prefix = (0, hooks_1.usePrefix)('aux-cover-rect');
+    var rect = (0, hooks_1.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_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, {
+            dragging: props.dragging,
+            dropping: props.dropping,
+        }), style: createCoverStyle() }));
+};
+exports.Cover = (0, reactive_react_1.observer)(function () {
+    var viewportMoveHelper = (0, hooks_1.useMoveHelper)();
+    var viewport = (0, hooks_1.useViewport)();
+    var cursor = (0, hooks_1.useCursor)();
+    var renderDropCover = function () {
+        var _a;
+        if (!viewportMoveHelper.closestNode ||
+            !((_a = viewportMoveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.allowAppend(viewportMoveHelper.dragNodes)) ||
+            viewportMoveHelper.viewportClosestDirection !== core_1.ClosestPosition.Inner)
+            return null;
+        return react_1.default.createElement(CoverRect, { node: viewportMoveHelper.closestNode, dropping: true });
+    };
+    if (cursor.status !== core_1.CursorStatus.Dragging)
+        return null;
+    return (react_1.default.createElement(react_1.Fragment, null,
+        viewportMoveHelper.dragNodes.map(function (node) {
+            if (!node)
+                return;
+            if (!viewport.findElementById(node.id))
+                return;
+            return react_1.default.createElement(CoverRect, { key: node.id, node: node, dragging: true });
+        }),
+        renderDropCover()));
+});
+exports.Cover.displayName = 'Cover';

package/lib/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>>;