@formily-design/react 1.0.0

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;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const reactive_react_1 = require("@formily/reactive-react");
+exports.DashedBox = (0, reactive_react_1.observer)(() => {
+    const hover = (0, hooks_1.useHover)();
+    const prefix = (0, hooks_1.usePrefix)('aux-dashed-box');
+    const selection = (0, hooks_1.useSelection)();
+    const rect = (0, hooks_1.useValidNodeOffsetRect)(hover === null || hover === void 0 ? void 0 : hover.node);
+    const createTipsStyle = () => {
+        const baseStyle = {
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            boxSizing: 'border-box',
+            visibility: 'hidden',
+            zIndex: 2,
+        };
+        if (rect) {
+            baseStyle.transform = `perspective(1px) translate3d(${rect.x}px,${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 '@formily-design/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,22 @@
+"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;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("@formily-design/core");
+const IconWidget_1 = require("../IconWidget");
+const hooks_1 = require("../../hooks");
+const antd_1 = require("antd");
+const Delete = ({ node, style }) => {
+    const 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: () => {
+            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 '@formily-design/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,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandler = void 0;
+const react_1 = __importDefault(require("react"));
+const reactive_react_1 = require("@formily/reactive-react");
+const IconWidget_1 = require("../IconWidget");
+const hooks_1 = require("../../hooks");
+const antd_1 = require("antd");
+exports.DragHandler = (0, reactive_react_1.observer)(({ node, style }) => {
+    const designer = (0, hooks_1.useDesigner)();
+    const prefix = (0, hooks_1.usePrefix)('aux-drag-handler');
+    if (node === node.root || !node.allowDrag())
+        return null;
+    const handlerProps = {
+        [designer.props.nodeDragHandlerAttrName]: 'true',
+    };
+    return (react_1.default.createElement(antd_1.Button, { ...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;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const reactive_react_1 = require("@formily/reactive-react");
+const core_1 = require("@formily-design/core");
+const shared_1 = require("@formily-design/shared");
+const classnames_1 = __importDefault(require("classnames"));
+exports.FreeSelection = (0, reactive_react_1.observer)(() => {
+    const cursor = (0, hooks_1.useCursor)();
+    const viewport = (0, hooks_1.useViewport)();
+    const operation = (0, hooks_1.useOperation)();
+    const prefix = (0, hooks_1.usePrefix)('aux-free-selection');
+    const createSelectionStyle = () => {
+        const startDragPoint = viewport.getOffsetPoint({
+            x: cursor.dragStartPosition.topClientX,
+            y: cursor.dragStartPosition.topClientY,
+        });
+        const currentPoint = viewport.getOffsetPoint({
+            x: cursor.position.topClientX,
+            y: cursor.position.topClientY,
+        });
+        const rect = (0, shared_1.calcRectByStartEndPoint)(startDragPoint, currentPoint, viewport.dragScrollXDelta, viewport.dragScrollYDelta);
+        const baseStyle = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            opacity: 0.2,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            transform: `perspective(1px) translate3d(${rect.x}px,${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 '@formily-design/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,122 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.Helpers = void 0;
+const react_1 = __importStar(require("react"));
+const reactive_1 = require("@formily/reactive");
+const hooks_1 = require("../../hooks");
+const Selector_1 = require("./Selector");
+const Copy_1 = require("./Copy");
+const Delete_1 = require("./Delete");
+const DragHandler_1 = require("./DragHandler");
+const classnames_1 = __importDefault(require("classnames"));
+const HELPER_DEBOUNCE_TIMEOUT = 100;
+const Helpers = ({ node, nodeRect }) => {
+    const prefix = (0, hooks_1.usePrefix)('aux-helpers');
+    const viewport = (0, hooks_1.useViewport)();
+    const unmountRef = (0, react_1.useRef)(false);
+    const ref = (0, react_1.useRef)();
+    const [position, setPosition] = (0, react_1.useState)('top-right');
+    (0, react_1.useLayoutEffect)(() => {
+        let request = null;
+        const getYInViewport = (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';
+        };
+        const getXInViewport = (nodeRect, helpersRect) => {
+            const 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';
+        };
+        const update = () => {
+            var _a;
+            const 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)(() => [
+            viewport.width,
+            viewport.height,
+            viewport.scrollX,
+            viewport.scrollY,
+            viewport.isScrollBottom,
+            viewport.isScrollTop,
+        ], () => {
+            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, {
+            [position]: true,
+        }), 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;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const core_1 = require("@formily-design/core");
+const reactive_react_1 = require("@formily/reactive-react");
+exports.Insertion = (0, reactive_react_1.observer)(() => {
+    const moveHelper = (0, hooks_1.useMoveHelper)();
+    const prefix = (0, hooks_1.usePrefix)('aux-insertion');
+    const createInsertionStyle = () => {
+        var _a;
+        const closestDirection = moveHelper.viewportClosestDirection;
+        const closestRect = moveHelper.viewportClosestOffsetRect;
+        const isInlineLayout = ((_a = moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.moveLayout) === 'horizontal';
+        const 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(${closestRect.x}px,${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(${closestRect.x + closestRect.width - 2}px,${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(${closestRect.x + closestRect.width - 2}px,${closestRect.y}px,0)`;
+            }
+            else {
+                baseStyle.width = closestRect.width;
+                baseStyle.height = 2;
+                baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${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(${closestRect.x}px,${closestRect.y}px,0)`;
+            }
+            else {
+                baseStyle.width = closestRect.width;
+                baseStyle.height = 2;
+                baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${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 '@formily-design/core';
+export interface IResizeHandlerProps {
+    node: TreeNode;
+}
+export declare const ResizeHandler: React.FC<IResizeHandlerProps>;

package/lib/widgets/AuxToolWidget/ResizeHandler.js

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

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/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,94 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selection = exports.SelectionBox = void 0;
+const react_1 = __importStar(require("react"));
+const Helpers_1 = require("./Helpers");
+const ResizeHandler_1 = require("./ResizeHandler");
+const hooks_1 = require("../../hooks");
+const reactive_react_1 = require("@formily/reactive-react");
+const TranslateHandler_1 = require("./TranslateHandler");
+const SelectionBox = (props) => {
+    var _a;
+    const designer = (0, hooks_1.useDesigner)();
+    const prefix = (0, hooks_1.usePrefix)('aux-selection-box');
+    const innerPrefix = (0, hooks_1.usePrefix)('aux-selection-box-inner');
+    const nodeRect = (0, hooks_1.useValidNodeOffsetRect)(props.node);
+    const createSelectionStyle = () => {
+        const baseStyle = {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            boxSizing: 'border-box',
+            zIndex: 4,
+        };
+        if (nodeRect) {
+            baseStyle.transform = `perspective(1px) translate3d(${nodeRect.x}px,${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;
+    const selectionId = {
+        [(_a = designer.props) === null || _a === void 0 ? void 0 : _a.nodeSelectionIdAttrName]: props.node.id,
+    };
+    return (react_1.default.createElement("div", { ...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, { ...props, node: props.node, nodeRect: nodeRect }))));
+};
+exports.SelectionBox = SelectionBox;
+exports.Selection = (0, reactive_react_1.observer)(() => {
+    const selection = (0, hooks_1.useSelection)();
+    const tree = (0, hooks_1.useTree)();
+    const cursor = (0, hooks_1.useCursor)();
+    const 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((id) => {
+        const 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 '@formily-design/core';
+export interface ISelectorProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+}
+export declare const Selector: React.FC<ISelectorProps>;

package/lib/widgets/AuxToolWidget/Selector.js

@@ -0,0 +1,120 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selector = void 0;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const IconWidget_1 = require("../IconWidget");
+const NodeTitleWidget_1 = require("../NodeTitleWidget");
+const antd_1 = require("antd");
+const reactive_react_1 = require("@formily/reactive-react");
+const useMouseHover = (ref, enter, leave) => {
+    (0, react_1.useEffect)(() => {
+        let timer = null;
+        let unmounted = false;
+        const onMouseOver = (e) => {
+            const target = e.target;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                var _a;
+                if (unmounted)
+                    return;
+                if ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+                    enter && enter();
+                }
+                else {
+                    leave && leave();
+                }
+            }, 100);
+        };
+        document.addEventListener('mouseover', onMouseOver);
+        return () => {
+            unmounted = true;
+            document.removeEventListener('mouseover', onMouseOver);
+        };
+    }, []);
+};
+exports.Selector = (0, reactive_react_1.observer)(({ node }) => {
+    const hover = (0, hooks_1.useHover)();
+    const [expand, setExpand] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const selection = (0, hooks_1.useSelection)();
+    const prefix = (0, hooks_1.usePrefix)('aux-selector');
+    const renderIcon = (node) => {
+        var _a;
+        const icon = node.designerProps.icon;
+        if (icon) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: icon });
+        }
+        if (node === node.root) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Page" });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Container" });
+        }
+        return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Component" });
+    };
+    const renderMenu = () => {
+        const parents = node.getParents();
+        return (react_1.default.createElement("div", { className: prefix + '-menu', style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+            } }, parents.slice(0, 4).map((parent) => {
+            return (react_1.default.createElement(antd_1.Button, { key: parent.id, type: "primary", onClick: () => {
+                    selection.select(parent.id);
+                }, onMouseEnter: () => {
+                    hover.setHover(parent);
+                } },
+                renderIcon(parent),
+                react_1.default.createElement("span", { style: { transform: 'scale(0.85)', marginLeft: 2 } },
+                    react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: parent }))));
+        })));
+    };
+    useMouseHover(ref, () => {
+        setExpand(true);
+    }, () => {
+        setExpand(false);
+    });
+    return (react_1.default.createElement("div", { ref: ref, className: prefix },
+        react_1.default.createElement(antd_1.Button, { className: prefix + '-title', type: "primary", onMouseEnter: () => {
+                hover.setHover(node);
+            } },
+            renderIcon(node),
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: node }))),
+        expand && renderMenu()));
+});
+exports.Selector.displayName = 'Selector';