@mdesignable/react 1.0.0-beta.64

package/lib/widgets/AuxToolWidget/DashedBox.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashedBox = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+exports.DashedBox = (0, reactive_react_1.observer)(function () {
+    var hover = (0, hooks_1.useHover)();
+    var prefix = (0, hooks_1.usePrefix)('aux-dashed-box');
+    var selection = (0, hooks_1.useSelection)();
+    var rect = (0, hooks_1.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_1.default.createElement("div", { className: prefix, style: createTipsStyle() },
+        react_1.default.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'))));
+});
+exports.DashedBox.displayName = 'DashedBox';

package/lib/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/lib/widgets/AuxToolWidget/Delete.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.Delete = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("@mdesignable/core");
+var IconWidget_1 = require("../IconWidget");
+var hooks_1 = require("../../hooks");
+var antd_1 = require("antd");
+var Delete = 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.remove([node]);
+        } },
+        react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Remove" })));
+};
+exports.Delete = Delete;
+exports.Delete.displayName = 'Delete';

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

@@ -0,0 +1,36 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandler = void 0;
+var react_1 = __importDefault(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+var IconWidget_1 = require("../IconWidget");
+var hooks_1 = require("../../hooks");
+var antd_1 = require("antd");
+exports.DragHandler = (0, reactive_react_1.observer)(function (_a) {
+    var _b;
+    var node = _a.node, style = _a.style;
+    var designer = (0, hooks_1.useDesigner)();
+    var prefix = (0, hooks_1.usePrefix)('aux-drag-handler');
+    if (node === node.root || !node.allowDrag())
+        return null;
+    var handlerProps = (_b = {},
+        _b[designer.props.nodeDragHandlerAttrName] = 'true',
+        _b);
+    return (react_1.default.createElement(antd_1.Button, __assign({}, handlerProps, { className: prefix, style: style, type: "primary" }),
+        react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Move" })));
+});
+exports.DragHandler.displayName = 'DragHandler';

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

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FreeSelection = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var classnames_1 = __importDefault(require("classnames"));
+exports.FreeSelection = (0, reactive_react_1.observer)(function () {
+    var cursor = (0, hooks_1.useCursor)();
+    var viewport = (0, hooks_1.useViewport)();
+    var operation = (0, hooks_1.useOperation)();
+    var prefix = (0, hooks_1.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 = (0, shared_1.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 !== core_1.CursorStatus.Dragging ||
+        cursor.dragType !== core_1.CursorDragType.Move)
+        return null;
+    return react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix), style: createSelectionStyle() });
+});

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

package/lib/widgets/AuxToolWidget/Helpers.js

@@ -0,0 +1,130 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Helpers = void 0;
+var react_1 = __importStar(require("react"));
+var reactive_1 = require("@formily/reactive");
+var hooks_1 = require("../../hooks");
+var Selector_1 = require("./Selector");
+var Copy_1 = require("./Copy");
+var Delete_1 = require("./Delete");
+var DragHandler_1 = require("./DragHandler");
+var classnames_1 = __importDefault(require("classnames"));
+var HELPER_DEBOUNCE_TIMEOUT = 100;
+var Helpers = function (_a) {
+    var _b;
+    var node = _a.node, nodeRect = _a.nodeRect;
+    var prefix = (0, hooks_1.usePrefix)('aux-helpers');
+    var viewport = (0, hooks_1.useViewport)();
+    var unmountRef = (0, react_1.useRef)(false);
+    var ref = (0, react_1.useRef)();
+    var _c = __read((0, react_1.useState)('top-right'), 2), position = _c[0], setPosition = _c[1];
+    (0, react_1.useLayoutEffect)(function () {
+        var request = null;
+        var getYInViewport = function (nodeRect, helpersRect) {
+            if (nodeRect.top - viewport.scrollY > helpersRect.height) {
+                return 'top';
+            }
+            else if (viewport.isScrollTop &&
+                nodeRect.height + helpersRect.height > viewport.height) {
+                return 'inner-top';
+            }
+            else if (nodeRect.bottom >= viewport.scrollY + viewport.height &&
+                nodeRect.height + helpersRect.height > viewport.height) {
+                return 'inner-bottom';
+            }
+            return 'bottom';
+        };
+        var getXInViewport = function (nodeRect, helpersRect) {
+            var widthDelta = helpersRect.width - nodeRect.width;
+            if (widthDelta >= 0) {
+                if (nodeRect.x < widthDelta) {
+                    return 'left';
+                }
+                else if (nodeRect.right + widthDelta > viewport.width) {
+                    return 'right';
+                }
+                else {
+                    return 'center';
+                }
+            }
+            return 'right';
+        };
+        var update = function () {
+            var _a;
+            var helpersRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!helpersRect || !nodeRect)
+                return;
+            if (unmountRef.current)
+                return;
+            setPosition(getYInViewport(nodeRect, helpersRect) +
+                '-' +
+                getXInViewport(nodeRect, helpersRect));
+        };
+        update();
+        return (0, reactive_1.reaction)(function () { return [
+            viewport.width,
+            viewport.height,
+            viewport.scrollX,
+            viewport.scrollY,
+            viewport.isScrollBottom,
+            viewport.isScrollTop,
+        ]; }, function () {
+            clearTimeout(request);
+            request = setTimeout(update, HELPER_DEBOUNCE_TIMEOUT);
+        });
+    }, [viewport, nodeRect]);
+    if (!nodeRect || !node)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix, (_b = {},
+            _b[position] = true,
+            _b)), ref: ref },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(prefix + '-content') },
+            react_1.default.createElement(Selector_1.Selector, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowClone()) === false ? null : react_1.default.createElement(Copy_1.Copy, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowDrag()) === false ? null : react_1.default.createElement(DragHandler_1.DragHandler, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowDelete()) === false ? null : react_1.default.createElement(Delete_1.Delete, { node: node }))));
+};
+exports.Helpers = Helpers;
+exports.Helpers.displayName = 'Helpers';

package/lib/widgets/AuxToolWidget/Insertion.d.ts

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

package/lib/widgets/AuxToolWidget/Insertion.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Insertion = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var core_1 = require("@mdesignable/core");
+var reactive_react_1 = require("@formily/reactive-react");
+exports.Insertion = (0, reactive_react_1.observer)(function () {
+    var moveHelper = (0, hooks_1.useMoveHelper)();
+    var prefix = (0, hooks_1.usePrefix)('aux-insertion');
+    var createInsertionStyle = function () {
+        var _a;
+        var closestDirection = moveHelper.viewportClosestDirection;
+        var closestRect = moveHelper.viewportClosestOffsetRect;
+        var isInlineLayout = ((_a = moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.moveLayout) === 'horizontal';
+        var baseStyle = {
+            position: 'absolute',
+            transform: 'perspective(1px) translate3d(0,0,0)',
+            top: 0,
+            left: 0,
+        };
+        if (!closestRect)
+            return baseStyle;
+        if (closestDirection === core_1.ClosestPosition.Before ||
+            closestDirection === core_1.ClosestPosition.ForbidBefore) {
+            baseStyle.width = 2;
+            baseStyle.height = closestRect.height;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
+        }
+        else if (closestDirection === core_1.ClosestPosition.After ||
+            closestDirection === core_1.ClosestPosition.ForbidAfter) {
+            baseStyle.width = 2;
+            baseStyle.height = closestRect.height;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x + closestRect.width - 2, "px,").concat(closestRect.y, "px,0)");
+        }
+        else if (closestDirection === core_1.ClosestPosition.InnerAfter ||
+            closestDirection === core_1.ClosestPosition.Under ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerAfter ||
+            closestDirection === core_1.ClosestPosition.ForbidUnder) {
+            if (isInlineLayout) {
+                baseStyle.width = 2;
+                baseStyle.height = closestRect.height;
+                baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x + closestRect.width - 2, "px,").concat(closestRect.y, "px,0)");
+            }
+            else {
+                baseStyle.width = closestRect.width;
+                baseStyle.height = 2;
+                baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y + closestRect.height - 2, "px,0)");
+            }
+        }
+        else if (closestDirection === core_1.ClosestPosition.InnerBefore ||
+            closestDirection === core_1.ClosestPosition.Upper ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerBefore ||
+            closestDirection === core_1.ClosestPosition.ForbidUpper) {
+            if (isInlineLayout) {
+                baseStyle.width = 2;
+                baseStyle.height = closestRect.height;
+                baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
+            }
+            else {
+                baseStyle.width = closestRect.width;
+                baseStyle.height = 2;
+                baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
+            }
+        }
+        if (closestDirection.includes('FORBID')) {
+            baseStyle.backgroundColor = 'red';
+        }
+        return baseStyle;
+    };
+    return react_1.default.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+exports.Insertion.displayName = 'Insertion';

package/lib/widgets/AuxToolWidget/ResizeHandler.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IResizeHandlerProps {
+    node: TreeNode;
+}
+export declare const ResizeHandler: React.FC<IResizeHandlerProps>;

package/lib/widgets/AuxToolWidget/ResizeHandler.js

@@ -0,0 +1,46 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizeHandler = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("../../hooks");
+var ResizeHandler = function (props) {
+    var designer = (0, hooks_1.useDesigner)();
+    var prefix = (0, hooks_1.usePrefix)('aux-node-resize-handler');
+    var createHandler = function (value) {
+        var _a;
+        return _a = {},
+            _a[designer.props.nodeResizeHandlerAttrName] = value,
+            _a.className = (0, classnames_1.default)(prefix, value),
+            _a;
+    };
+    var allowResize = props.node.allowResize();
+    if (!allowResize)
+        return null;
+    var allowX = allowResize.includes('x');
+    var allowY = allowResize.includes('y');
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        allowX && react_1.default.createElement("div", __assign({}, createHandler('left-center'))),
+        allowX && react_1.default.createElement("div", __assign({}, createHandler('right-center'))),
+        allowY && react_1.default.createElement("div", __assign({}, createHandler('center-top'))),
+        allowY && react_1.default.createElement("div", __assign({}, createHandler('center-bottom'))),
+        allowX && allowY && react_1.default.createElement("div", __assign({}, createHandler('left-top'))),
+        allowY && allowY && react_1.default.createElement("div", __assign({}, createHandler('right-top'))),
+        allowX && allowY && react_1.default.createElement("div", __assign({}, createHandler('left-bottom'))),
+        allowY && allowY && react_1.default.createElement("div", __assign({}, createHandler('right-bottom')))));
+};
+exports.ResizeHandler = ResizeHandler;

package/lib/widgets/AuxToolWidget/Selection.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface ISelectionBoxProps {
+    node: TreeNode;
+    showHelpers: boolean;
+}
+export declare const SelectionBox: React.FC<ISelectionBoxProps>;
+export declare const Selection: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<unknown>>;

package/lib/widgets/AuxToolWidget/Selection.js

@@ -0,0 +1,96 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = exports.SelectionBox = void 0;
+var react_1 = __importStar(require("react"));
+var Helpers_1 = require("./Helpers");
+var ResizeHandler_1 = require("./ResizeHandler");
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var TranslateHandler_1 = require("./TranslateHandler");
+var SelectionBox = function (props) {
+    var _a;
+    var _b;
+    var designer = (0, hooks_1.useDesigner)();
+    var prefix = (0, hooks_1.usePrefix)('aux-selection-box');
+    var innerPrefix = (0, hooks_1.usePrefix)('aux-selection-box-inner');
+    var nodeRect = (0, hooks_1.useValidNodeOffsetRect)(props.node);
+    var createSelectionStyle = function () {
+        var baseStyle = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+            zIndex: 4,
+        };
+        if (nodeRect) {
+            baseStyle.transform = "perspective(1px) translate3d(".concat(nodeRect.x, "px,").concat(nodeRect.y, "px,0)");
+            baseStyle.height = nodeRect.height;
+            baseStyle.width = nodeRect.width;
+        }
+        return baseStyle;
+    };
+    if (!nodeRect)
+        return null;
+    if (!nodeRect.width || !nodeRect.height)
+        return null;
+    var selectionId = (_a = {},
+        _a[(_b = designer.props) === null || _b === void 0 ? void 0 : _b.nodeSelectionIdAttrName] = props.node.id,
+        _a);
+    return (react_1.default.createElement("div", __assign({}, selectionId, { className: prefix, style: createSelectionStyle() }),
+        react_1.default.createElement("div", { className: innerPrefix }),
+        react_1.default.createElement(ResizeHandler_1.ResizeHandler, { node: props.node }),
+        react_1.default.createElement(TranslateHandler_1.TranslateHandler, { node: props.node }),
+        props.showHelpers && (react_1.default.createElement(Helpers_1.Helpers, __assign({}, props, { node: props.node, nodeRect: nodeRect })))));
+};
+exports.SelectionBox = SelectionBox;
+exports.Selection = (0, reactive_react_1.observer)(function () {
+    var selection = (0, hooks_1.useSelection)();
+    var tree = (0, hooks_1.useTree)();
+    var cursor = (0, hooks_1.useCursor)();
+    var viewportMoveHelper = (0, hooks_1.useMoveHelper)();
+    if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode)
+        return null;
+    return (react_1.default.createElement(react_1.Fragment, null, selection.selected.map(function (id) {
+        var node = tree.findById(id);
+        if (!node)
+            return;
+        if (node.hidden)
+            return;
+        return (react_1.default.createElement(exports.SelectionBox, { key: id, node: node, showHelpers: selection.selected.length === 1 }));
+    })));
+});
+exports.Selection.displayName = 'Selection';

package/lib/widgets/AuxToolWidget/Selector.d.ts

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