@mdesignable/react 1.0.0-beta.64

package/esm/widgets/AuxToolWidget/Helpers.js

@@ -0,0 +1,100 @@
+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;
+};
+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';
+var HELPER_DEBOUNCE_TIMEOUT = 100;
+export var Helpers = function (_a) {
+    var _b;
+    var node = _a.node, nodeRect = _a.nodeRect;
+    var prefix = usePrefix('aux-helpers');
+    var viewport = useViewport();
+    var unmountRef = useRef(false);
+    var ref = useRef();
+    var _c = __read(useState('top-right'), 2), position = _c[0], setPosition = _c[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 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.createElement("div", { className: cls(prefix, (_b = {},
+            _b[position] = true,
+            _b)), 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 '@mdesignable/core';
+import { observer } from '@formily/reactive-react';
+export var Insertion = observer(function () {
+    var moveHelper = useMoveHelper();
+    var prefix = 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 === ClosestPosition.Before ||
+            closestDirection === 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 === ClosestPosition.After ||
+            closestDirection === 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 === 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(".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 === 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(".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.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 '@mdesignable/core';
+export interface IResizeHandlerProps {
+    node: TreeNode;
+}
+export declare const ResizeHandler: React.FC<IResizeHandlerProps>;

package/esm/widgets/AuxToolWidget/ResizeHandler.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import cls from 'classnames';
+import { useDesigner, usePrefix } from '../../hooks';
+export var ResizeHandler = function (props) {
+    var designer = useDesigner();
+    var prefix = usePrefix('aux-node-resize-handler');
+    var createHandler = function (value) {
+        var _a;
+        return _a = {},
+            _a[designer.props.nodeResizeHandlerAttrName] = value,
+            _a.className = cls(prefix, value),
+            _a;
+    };
+    var allowResize = props.node.allowResize();
+    if (!allowResize)
+        return null;
+    var allowX = allowResize.includes('x');
+    var allowY = allowResize.includes('y');
+    return (React.createElement(React.Fragment, null,
+        allowX && React.createElement("div", __assign({}, createHandler('left-center'))),
+        allowX && React.createElement("div", __assign({}, createHandler('right-center'))),
+        allowY && React.createElement("div", __assign({}, createHandler('center-top'))),
+        allowY && React.createElement("div", __assign({}, createHandler('center-bottom'))),
+        allowX && allowY && React.createElement("div", __assign({}, createHandler('left-top'))),
+        allowY && allowY && React.createElement("div", __assign({}, createHandler('right-top'))),
+        allowX && allowY && React.createElement("div", __assign({}, createHandler('left-bottom'))),
+        allowY && allowY && React.createElement("div", __assign({}, createHandler('right-bottom')))));
+};

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

@@ -0,0 +1,69 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { 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 var SelectionBox = function (props) {
+    var _a;
+    var _b;
+    var designer = useDesigner();
+    var prefix = usePrefix('aux-selection-box');
+    var innerPrefix = usePrefix('aux-selection-box-inner');
+    var nodeRect = 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.createElement("div", __assign({}, 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, __assign({}, props, { node: props.node, nodeRect: nodeRect })))));
+};
+export var Selection = observer(function () {
+    var selection = useSelection();
+    var tree = useTree();
+    var cursor = useCursor();
+    var viewportMoveHelper = useMoveHelper();
+    if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode)
+        return null;
+    return (React.createElement(Fragment, null, selection.selected.map(function (id) {
+        var 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 '@mdesignable/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,101 @@
+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;
+};
+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';
+var useMouseHover = function (ref, enter, leave) {
+    useEffect(function () {
+        var timer = null;
+        var unmounted = false;
+        var onMouseOver = function (e) {
+            var target = e.target;
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                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 function () {
+            unmounted = true;
+            document.removeEventListener('mouseover', onMouseOver);
+        };
+    }, []);
+};
+export var Selector = observer(function (_a) {
+    var node = _a.node;
+    var hover = useHover();
+    var _b = __read(useState(false), 2), expand = _b[0], setExpand = _b[1];
+    var ref = useRef(null);
+    var selection = useSelection();
+    var prefix = usePrefix('aux-selector');
+    var renderIcon = function (node) {
+        var _a;
+        var 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" });
+    };
+    var renderMenu = function () {
+        var parents = node.getParents();
+        return (React.createElement("div", { className: prefix + '-menu', style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+            } }, parents.slice(0, 4).map(function (parent) {
+            return (React.createElement(Button, { key: parent.id, type: "primary", onClick: function () {
+                    selection.select(parent.id);
+                }, onMouseEnter: function () {
+                    hover.setHover(parent);
+                } },
+                renderIcon(parent),
+                React.createElement("span", { style: { transform: 'scale(0.85)', marginLeft: 2 } },
+                    React.createElement(NodeTitleWidget, { node: parent }))));
+        })));
+    };
+    useMouseHover(ref, function () {
+        setExpand(true);
+    }, function () {
+        setExpand(false);
+    });
+    return (React.createElement("div", { ref: ref, className: prefix },
+        React.createElement(Button, { className: prefix + '-title', type: "primary", onMouseEnter: function () {
+                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 '@mdesignable/core';
+export var SnapLine = observer(function () {
+    var cursor = useCursor();
+    var transformHelper = useTransformHelper();
+    var prefix = usePrefix('aux-snap-line');
+    var createLineStyle = function (rect) {
+        var baseStyle = {
+            top: 0,
+            left: 0,
+            height: rect.height || 1,
+            width: rect.width || 1,
+            transform: "perspective(1px) translate3d(".concat(rect.x, "px,").concat(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(function (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,68 @@
+import React, { Fragment } from 'react';
+import { useTransformHelper, useCursor, usePrefix } from '../../hooks';
+import { observer } from '@formily/reactive-react';
+import { CursorStatus } from '@mdesignable/core';
+import { calcRectOfAxisLineSegment } from '@mdesignable/shared';
+export var SpaceBlock = observer(function () {
+    var cursor = useCursor();
+    var transformHelper = useTransformHelper();
+    var prefix = usePrefix('aux-space-block');
+    if (cursor.status !== CursorStatus.Dragging)
+        return null;
+    var renderRulerBox = function (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)))));
+        }
+    };
+    var renderDashedLine = function (line) {
+        var rect = calcRectOfAxisLineSegment(line);
+        if (!rect)
+            return null;
+        var width = rect.width || 2;
+        var height = rect.height || 2;
+        return (React.createElement("svg", { width: width + 'px', height: height + 'px', viewBox: "0 0 ".concat(width, " ").concat(height), style: {
+                top: 0,
+                left: 0,
+                transform: "perspective(1px) translate3d(".concat(line.start.x, "px,").concat(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(function (_a, key) {
+            var type = _a.type, crossDragNodesRect = _a.crossDragNodesRect, distance = _a.distance, extendsLine = _a.extendsLine;
+            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(".concat(crossDragNodesRect.x, "px,").concat(crossDragNodesRect.y, "px,0)"),
+                        position: 'absolute',
+                        zIndex: 3,
+                    } }, renderRulerBox(distance, type))));
+        }),
+        transformHelper.thresholdSpaceBlocks.map(function (_a, key) {
+            var rect = _a.rect;
+            return (React.createElement("div", { key: key, className: prefix, style: {
+                    top: 0,
+                    left: 0,
+                    height: rect.height,
+                    width: rect.width,
+                    transform: "perspective(1px) translate3d(".concat(rect.x, "px,").concat(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 '@mdesignable/core';
+export interface ITranslateHandlerProps {
+    node: TreeNode;
+}
+export declare const TranslateHandler: React.FC<ITranslateHandlerProps>;

package/esm/widgets/AuxToolWidget/TranslateHandler.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import cls from 'classnames';
+import { useDesigner, usePrefix } from '../../hooks';
+import { IconWidget } from '../IconWidget';
+export var TranslateHandler = function (props) {
+    var designer = useDesigner();
+    var prefix = usePrefix('aux-node-translate-handler');
+    var createHandler = function (value) {
+        var _a;
+        return _a = {},
+            _a[designer.props.nodeTranslateAttrName] = value,
+            _a.className = cls(prefix, value),
+            _a;
+    };
+    var allowTranslate = props.node.allowTranslate();
+    if (!allowTranslate)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, 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 var AuxToolWidget = function () {
+    var engine = useDesigner();
+    var viewport = useViewport();
+    var prefix = usePrefix('auxtool');
+    var ref = useRef();
+    useEffect(function () {
+        return engine.subscribeWith('viewport:scroll', function () {
+            if (viewport.isIframe && ref.current) {
+                ref.current.style.transform = "perspective(1px) translate3d(".concat(-viewport.scrollX, "px,").concat(-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';