@mdesignable/react 1.0.0-beta.64

package/lib/widgets/AuxToolWidget/Selector.js

@@ -0,0 +1,127 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Selector = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var NodeTitleWidget_1 = require("../NodeTitleWidget");
+var antd_1 = require("antd");
+var reactive_react_1 = require("@formily/reactive-react");
+var useMouseHover = function (ref, enter, leave) {
+    (0, react_1.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);
+        };
+    }, []);
+};
+exports.Selector = (0, reactive_react_1.observer)(function (_a) {
+    var node = _a.node;
+    var hover = (0, hooks_1.useHover)();
+    var _b = __read((0, react_1.useState)(false), 2), expand = _b[0], setExpand = _b[1];
+    var ref = (0, react_1.useRef)(null);
+    var selection = (0, hooks_1.useSelection)();
+    var prefix = (0, hooks_1.usePrefix)('aux-selector');
+    var renderIcon = function (node) {
+        var _a;
+        var 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" });
+    };
+    var renderMenu = function () {
+        var parents = node.getParents();
+        return (react_1.default.createElement("div", { className: prefix + '-menu', style: {
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+            } }, parents.slice(0, 4).map(function (parent) {
+            return (react_1.default.createElement(antd_1.Button, { key: parent.id, type: "primary", onClick: function () {
+                    selection.select(parent.id);
+                }, onMouseEnter: function () {
+                    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, function () {
+        setExpand(true);
+    }, function () {
+        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: function () {
+                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';

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnapLine = 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");
+exports.SnapLine = (0, reactive_react_1.observer)(function () {
+    var cursor = (0, hooks_1.useCursor)();
+    var transformHelper = (0, hooks_1.useTransformHelper)();
+    var prefix = (0, hooks_1.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 !== core_1.CursorStatus.Dragging)
+        return null;
+    return (react_1.default.createElement(react_1.default.Fragment, null, transformHelper.closestSnapLines.map(function (line, key) {
+        if (line.type !== 'normal')
+            return null;
+        return (react_1.default.createElement("div", { key: key, className: prefix, style: createLineStyle(line.rect) }));
+    })));
+});
+exports.SnapLine.displayName = 'SnapLine';

package/lib/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/lib/widgets/AuxToolWidget/SpaceBlock.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 (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.SpaceBlock = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+exports.SpaceBlock = (0, reactive_react_1.observer)(function () {
+    var cursor = (0, hooks_1.useCursor)();
+    var transformHelper = (0, hooks_1.useTransformHelper)();
+    var prefix = (0, hooks_1.usePrefix)('aux-space-block');
+    if (cursor.status !== core_1.CursorStatus.Dragging)
+        return null;
+    var renderRulerBox = function (distance, type) {
+        if (type === 'top' || type === 'bottom') {
+            return (react_1.default.createElement("div", { className: prefix + '-ruler-v' },
+                react_1.default.createElement("div", { className: prefix + '-ruler-indicator' },
+                    react_1.default.createElement("span", null, distance === null || distance === void 0 ? void 0 : distance.toFixed(0)))));
+        }
+        else if (type === 'left' || type === 'right') {
+            return (react_1.default.createElement("div", { className: prefix + '-ruler-h' },
+                react_1.default.createElement("div", { className: prefix + '-ruler-indicator' },
+                    react_1.default.createElement("span", null, distance === null || distance === void 0 ? void 0 : distance.toFixed(0)))));
+        }
+    };
+    var renderDashedLine = function (line) {
+        var rect = (0, shared_1.calcRectOfAxisLineSegment)(line);
+        if (!rect)
+            return null;
+        var width = rect.width || 2;
+        var height = rect.height || 2;
+        return (react_1.default.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_1.default.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_1.default.createElement(react_1.default.Fragment, null,
+        transformHelper.measurerSpaceBlocks.map(function (_a, key) {
+            var type = _a.type, crossDragNodesRect = _a.crossDragNodesRect, distance = _a.distance, extendsLine = _a.extendsLine;
+            return (react_1.default.createElement(react_1.Fragment, null,
+                renderDashedLine(extendsLine),
+                react_1.default.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_1.default.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,
+                } }));
+        })));
+});
+exports.SpaceBlock.displayName = 'SpaceBlock';

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

@@ -0,0 +1,39 @@
+"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.TranslateHandler = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var TranslateHandler = function (props) {
+    var designer = (0, hooks_1.useDesigner)();
+    var prefix = (0, hooks_1.usePrefix)('aux-node-translate-handler');
+    var createHandler = function (value) {
+        var _a;
+        return _a = {},
+            _a[designer.props.nodeTranslateAttrName] = value,
+            _a.className = (0, classnames_1.default)(prefix, value),
+            _a;
+    };
+    var allowTranslate = props.node.allowTranslate();
+    if (!allowTranslate)
+        return null;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", __assign({}, createHandler('translate')),
+            react_1.default.createElement(IconWidget_1.IconWidget, { infer: "FreeMove" }))));
+};
+exports.TranslateHandler = TranslateHandler;

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

@@ -0,0 +1,61 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuxToolWidget = void 0;
+var react_1 = __importStar(require("react"));
+var hooks_1 = require("../../hooks");
+var Insertion_1 = require("./Insertion");
+var Selection_1 = require("./Selection");
+var FreeSelection_1 = require("./FreeSelection");
+var Cover_1 = require("./Cover");
+var DashedBox_1 = require("./DashedBox");
+var SpaceBlock_1 = require("./SpaceBlock");
+var SnapLine_1 = require("./SnapLine");
+require("./styles.less");
+var AuxToolWidget = function () {
+    var engine = (0, hooks_1.useDesigner)();
+    var viewport = (0, hooks_1.useViewport)();
+    var prefix = (0, hooks_1.usePrefix)('auxtool');
+    var ref = (0, react_1.useRef)();
+    (0, react_1.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_1.default.createElement("div", { ref: ref, className: prefix },
+        react_1.default.createElement(Insertion_1.Insertion, null),
+        react_1.default.createElement(SpaceBlock_1.SpaceBlock, null),
+        react_1.default.createElement(SnapLine_1.SnapLine, null),
+        react_1.default.createElement(DashedBox_1.DashedBox, null),
+        react_1.default.createElement(Selection_1.Selection, null),
+        react_1.default.createElement(Cover_1.Cover, null),
+        react_1.default.createElement(FreeSelection_1.FreeSelection, null)));
+};
+exports.AuxToolWidget = AuxToolWidget;
+exports.AuxToolWidget.displayName = 'AuxToolWidget';