@formily-design/react 1.0.0

package/esm/widgets/AuxToolWidget/Delete.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TreeNode } from '@formily-design/core';
+import { IconWidget } from '../IconWidget';
+import { usePrefix } from '../../hooks';
+import { Button } from 'antd';
+export const Delete = ({ node, style }) => {
+    const prefix = usePrefix('aux-copy');
+    if (node === node.root)
+        return null;
+    return (React.createElement(Button, { className: prefix, style: style, type: "primary", onClick: () => {
+            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 '@formily-design/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,17 @@
+import React from 'react';
+import { observer } from '@formily/reactive-react';
+import { IconWidget } from '../IconWidget';
+import { useDesigner, usePrefix } from '../../hooks';
+import { Button } from 'antd';
+export const DragHandler = observer(({ node, style }) => {
+    const designer = useDesigner();
+    const prefix = usePrefix('aux-drag-handler');
+    if (node === node.root || !node.allowDrag())
+        return null;
+    const handlerProps = {
+        [designer.props.nodeDragHandlerAttrName]: 'true',
+    };
+    return (React.createElement(Button, { ...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 '@formily-design/core';
+import { calcRectByStartEndPoint } from '@formily-design/shared';
+import cls from 'classnames';
+export const FreeSelection = observer(() => {
+    const cursor = useCursor();
+    const viewport = useViewport();
+    const operation = useOperation();
+    const prefix = 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 = 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 !== 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 '@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/esm/widgets/AuxToolWidget/Helpers.js

@@ -0,0 +1,82 @@
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import { reaction } from '@formily/reactive';
+import { usePrefix, useViewport } from '../../hooks';
+import { Selector } from './Selector';
+import { Copy } from './Copy';
+import { Delete } from './Delete';
+import { DragHandler } from './DragHandler';
+import cls from 'classnames';
+const HELPER_DEBOUNCE_TIMEOUT = 100;
+export const Helpers = ({ node, nodeRect }) => {
+    const prefix = usePrefix('aux-helpers');
+    const viewport = useViewport();
+    const unmountRef = useRef(false);
+    const ref = useRef();
+    const [position, setPosition] = useState('top-right');
+    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 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.createElement("div", { className: cls(prefix, {
+            [position]: true,
+        }), ref: ref },
+        React.createElement("div", { className: cls(prefix + '-content') },
+            React.createElement(Selector, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowClone()) === false ? null : React.createElement(Copy, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowDrag()) === false ? null : React.createElement(DragHandler, { node: node }),
+            (node === null || node === void 0 ? void 0 : node.allowDelete()) === false ? null : React.createElement(Delete, { node: node }))));
+};
+Helpers.displayName = 'Helpers';

package/esm/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/esm/widgets/AuxToolWidget/Insertion.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useMoveHelper, usePrefix } from '../../hooks';
+import { ClosestPosition } from '@formily-design/core';
+import { observer } from '@formily/reactive-react';
+export const Insertion = observer(() => {
+    const moveHelper = useMoveHelper();
+    const prefix = 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 === ClosestPosition.Before ||
+            closestDirection === ClosestPosition.ForbidBefore) {
+            baseStyle.width = 2;
+            baseStyle.height = closestRect.height;
+            baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
+        }
+        else if (closestDirection === ClosestPosition.After ||
+            closestDirection === 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 === ClosestPosition.InnerAfter ||
+            closestDirection === ClosestPosition.Under ||
+            closestDirection === ClosestPosition.ForbidInnerAfter ||
+            closestDirection === 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 === ClosestPosition.InnerBefore ||
+            closestDirection === ClosestPosition.Upper ||
+            closestDirection === ClosestPosition.ForbidInnerBefore ||
+            closestDirection === 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.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+Insertion.displayName = 'Insertion';

package/esm/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/esm/widgets/AuxToolWidget/ResizeHandler.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import cls from 'classnames';
+import { useDesigner, usePrefix } from '../../hooks';
+export const ResizeHandler = (props) => {
+    const designer = useDesigner();
+    const prefix = usePrefix('aux-node-resize-handler');
+    const createHandler = (value) => {
+        return {
+            [designer.props.nodeResizeHandlerAttrName]: value,
+            className: cls(prefix, value),
+        };
+    };
+    const allowResize = props.node.allowResize();
+    if (!allowResize)
+        return null;
+    const allowX = allowResize.includes('x');
+    const allowY = allowResize.includes('y');
+    return (React.createElement(React.Fragment, null,
+        allowX && React.createElement("div", { ...createHandler('left-center') }),
+        allowX && React.createElement("div", { ...createHandler('right-center') }),
+        allowY && React.createElement("div", { ...createHandler('center-top') }),
+        allowY && React.createElement("div", { ...createHandler('center-bottom') }),
+        allowX && allowY && React.createElement("div", { ...createHandler('left-top') }),
+        allowY && allowY && React.createElement("div", { ...createHandler('right-top') }),
+        allowX && allowY && React.createElement("div", { ...createHandler('left-bottom') }),
+        allowY && allowY && React.createElement("div", { ...createHandler('right-bottom') })));
+};

package/esm/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/esm/widgets/AuxToolWidget/Selection.js

@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import { Helpers } from './Helpers';
+import { ResizeHandler } from './ResizeHandler';
+import { useSelection, useValidNodeOffsetRect, useTree, useCursor, useMoveHelper, usePrefix, useDesigner, } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { TranslateHandler } from './TranslateHandler';
+export const SelectionBox = (props) => {
+    var _a;
+    const designer = useDesigner();
+    const prefix = usePrefix('aux-selection-box');
+    const innerPrefix = usePrefix('aux-selection-box-inner');
+    const nodeRect = 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.createElement("div", { ...selectionId, className: prefix, style: createSelectionStyle() },
+        React.createElement("div", { className: innerPrefix }),
+        React.createElement(ResizeHandler, { node: props.node }),
+        React.createElement(TranslateHandler, { node: props.node }),
+        props.showHelpers && (React.createElement(Helpers, { ...props, node: props.node, nodeRect: nodeRect }))));
+};
+export const Selection = observer(() => {
+    const selection = useSelection();
+    const tree = useTree();
+    const cursor = useCursor();
+    const viewportMoveHelper = useMoveHelper();
+    if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode)
+        return null;
+    return (React.createElement(Fragment, null, selection.selected.map((id) => {
+        const node = tree.findById(id);
+        if (!node)
+            return;
+        if (node.hidden)
+            return;
+        return (React.createElement(SelectionBox, { key: id, node: node, showHelpers: selection.selected.length === 1 }));
+    })));
+});
+Selection.displayName = 'Selection';

package/esm/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/esm/widgets/AuxToolWidget/Selector.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { useHover, useSelection, usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+import { NodeTitleWidget } from '../NodeTitleWidget';
+import { Button } from 'antd';
+import { observer } from '@formily/reactive-react';
+const useMouseHover = (ref, enter, leave) => {
+    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);
+        };
+    }, []);
+};
+export const Selector = observer(({ node }) => {
+    const hover = useHover();
+    const [expand, setExpand] = useState(false);
+    const ref = useRef(null);
+    const selection = useSelection();
+    const prefix = usePrefix('aux-selector');
+    const renderIcon = (node) => {
+        var _a;
+        const icon = node.designerProps.icon;
+        if (icon) {
+            return React.createElement(IconWidget, { infer: icon });
+        }
+        if (node === node.root) {
+            return React.createElement(IconWidget, { infer: "Page" });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return React.createElement(IconWidget, { infer: "Container" });
+        }
+        return React.createElement(IconWidget, { infer: "Component" });
+    };
+    const renderMenu = () => {
+        const parents = node.getParents();
+        return (React.createElement("div", { className: prefix + '-menu', style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+            } }, parents.slice(0, 4).map((parent) => {
+            return (React.createElement(Button, { key: parent.id, type: "primary", onClick: () => {
+                    selection.select(parent.id);
+                }, onMouseEnter: () => {
+                    hover.setHover(parent);
+                } },
+                renderIcon(parent),
+                React.createElement("span", { style: { transform: 'scale(0.85)', marginLeft: 2 } },
+                    React.createElement(NodeTitleWidget, { node: parent }))));
+        })));
+    };
+    useMouseHover(ref, () => {
+        setExpand(true);
+    }, () => {
+        setExpand(false);
+    });
+    return (React.createElement("div", { ref: ref, className: prefix },
+        React.createElement(Button, { className: prefix + '-title', type: "primary", onMouseEnter: () => {
+                hover.setHover(node);
+            } },
+            renderIcon(node),
+            React.createElement("span", null,
+                React.createElement(NodeTitleWidget, { node: node }))),
+        expand && renderMenu()));
+});
+Selector.displayName = 'Selector';

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

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

package/esm/widgets/AuxToolWidget/SnapLine.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTransformHelper, useCursor, usePrefix } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { CursorStatus } from '@formily-design/core';
+export const SnapLine = observer(() => {
+    const cursor = useCursor();
+    const transformHelper = useTransformHelper();
+    const prefix = usePrefix('aux-snap-line');
+    const createLineStyle = (rect) => {
+        const baseStyle = {
+            top: 0,
+            left: 0,
+            height: rect.height || 1,
+            width: rect.width || 1,
+            transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
+            background: `#b0b1f3`,
+            position: 'absolute',
+            zIndex: 2,
+        };
+        return baseStyle;
+    };
+    if (cursor.status !== CursorStatus.Dragging)
+        return null;
+    return (React.createElement(React.Fragment, null, transformHelper.closestSnapLines.map((line, key) => {
+        if (line.type !== 'normal')
+            return null;
+        return (React.createElement("div", { key: key, className: prefix, style: createLineStyle(line.rect) }));
+    })));
+});
+SnapLine.displayName = 'SnapLine';

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

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

package/esm/widgets/AuxToolWidget/SpaceBlock.js

@@ -0,0 +1,66 @@
+import React, { Fragment } from 'react';
+import { useTransformHelper, useCursor, usePrefix } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { CursorStatus } from '@formily-design/core';
+import { calcRectOfAxisLineSegment } from '@formily-design/shared';
+export const SpaceBlock = observer(() => {
+    const cursor = useCursor();
+    const transformHelper = useTransformHelper();
+    const prefix = usePrefix('aux-space-block');
+    if (cursor.status !== CursorStatus.Dragging)
+        return null;
+    const renderRulerBox = (distance, type) => {
+        if (type === 'top' || type === 'bottom') {
+            return (React.createElement("div", { className: prefix + '-ruler-v' },
+                React.createElement("div", { className: prefix + '-ruler-indicator' },
+                    React.createElement("span", null, distance === null || distance === void 0 ? void 0 : distance.toFixed(0)))));
+        }
+        else if (type === 'left' || type === 'right') {
+            return (React.createElement("div", { className: prefix + '-ruler-h' },
+                React.createElement("div", { className: prefix + '-ruler-indicator' },
+                    React.createElement("span", null, distance === null || distance === void 0 ? void 0 : distance.toFixed(0)))));
+        }
+    };
+    const renderDashedLine = (line) => {
+        const rect = calcRectOfAxisLineSegment(line);
+        if (!rect)
+            return null;
+        const width = rect.width || 2;
+        const height = rect.height || 2;
+        return (React.createElement("svg", { width: width + 'px', height: height + 'px', viewBox: `0 0 ${width} ${height}`, style: {
+                top: 0,
+                left: 0,
+                transform: `perspective(1px) translate3d(${line.start.x}px,${line.start.y}px,0)`,
+                position: 'absolute',
+                zIndex: 3,
+            } },
+            React.createElement("line", { x1: line.start.x - rect.x, y1: line.start.y - rect.y, x2: line.end.x - rect.x, y2: line.end.y - rect.y, strokeDasharray: 4, stroke: "#745BFF", strokeWidth: 2 })));
+    };
+    return (React.createElement(React.Fragment, null,
+        transformHelper.measurerSpaceBlocks.map(({ type, crossDragNodesRect, distance, extendsLine }, key) => {
+            return (React.createElement(Fragment, null,
+                renderDashedLine(extendsLine),
+                React.createElement("div", { key: key, style: {
+                        top: 0,
+                        left: 0,
+                        height: crossDragNodesRect.height,
+                        width: crossDragNodesRect.width,
+                        transform: `perspective(1px) translate3d(${crossDragNodesRect.x}px,${crossDragNodesRect.y}px,0)`,
+                        position: 'absolute',
+                        zIndex: 3,
+                    } }, renderRulerBox(distance, type))));
+        }),
+        transformHelper.thresholdSpaceBlocks.map(({ rect }, key) => {
+            return (React.createElement("div", { key: key, className: prefix, style: {
+                    top: 0,
+                    left: 0,
+                    height: rect.height,
+                    width: rect.width,
+                    transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
+                    position: 'absolute',
+                    background: 'rgba(255, 0, 0, 0.2)',
+                    zIndex: 1,
+                } }));
+        })));
+});
+SpaceBlock.displayName = 'SpaceBlock';

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

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

package/esm/widgets/AuxToolWidget/TranslateHandler.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import cls from 'classnames';
+import { useDesigner, usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+export const TranslateHandler = (props) => {
+    const designer = useDesigner();
+    const prefix = usePrefix('aux-node-translate-handler');
+    const createHandler = (value) => {
+        return {
+            [designer.props.nodeTranslateAttrName]: value,
+            className: cls(prefix, value),
+        };
+    };
+    const allowTranslate = props.node.allowTranslate();
+    if (!allowTranslate)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ...createHandler('translate') },
+            React.createElement(IconWidget, { infer: "FreeMove" }))));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles.less';
+export declare const AuxToolWidget: {
+    (): React.JSX.Element;
+    displayName: string;
+};

package/esm/widgets/AuxToolWidget/index.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react';
+import { useViewport, useDesigner, usePrefix } from '../../hooks';
+import { Insertion } from './Insertion';
+import { Selection } from './Selection';
+import { FreeSelection } from './FreeSelection';
+import { Cover } from './Cover';
+import { DashedBox } from './DashedBox';
+import { SpaceBlock } from './SpaceBlock';
+import { SnapLine } from './SnapLine';
+import './styles.less';
+export const AuxToolWidget = () => {
+    const engine = useDesigner();
+    const viewport = useViewport();
+    const prefix = usePrefix('auxtool');
+    const ref = useRef();
+    useEffect(() => {
+        return engine.subscribeWith('viewport:scroll', () => {
+            if (viewport.isIframe && ref.current) {
+                ref.current.style.transform = `perspective(1px) translate3d(${-viewport.scrollX}px,${-viewport.scrollY}px,0)`;
+            }
+        });
+    }, [engine, viewport]);
+    if (!viewport)
+        return null;
+    return (React.createElement("div", { ref: ref, className: prefix },
+        React.createElement(Insertion, null),
+        React.createElement(SpaceBlock, null),
+        React.createElement(SnapLine, null),
+        React.createElement(DashedBox, null),
+        React.createElement(Selection, null),
+        React.createElement(Cover, null),
+        React.createElement(FreeSelection, null)));
+};
+AuxToolWidget.displayName = 'AuxToolWidget';