@magicbe/design
Version:
React + Antd Drag Drop Visual design
317 lines (316 loc) • 18.8 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Empty, Input, Tree, message, theme } from "antd";
import ReactDOM from "react-dom";
import React, { Fragment, useEffect, useMemo, useState } from "react";
import { useDesignContext } from "../context";
import createInstance from "@emotion/css/create-instance";
import { find, findIndex, first, flatten, remove, set } from "lodash";
import { DATA_WIDGET } from "../utils/const";
import { NodeTreeContextProvider, useNodeTreeContext } from "./Context";
import { findSchemaUuidList, flattSchemaTree, readJson, wrappSchemaTree, writeText } from "../utils/clipboard";
var _a = createInstance({ key: "node-tree" }), css = _a.css, cx = _a.cx;
var NodeTree = function () {
var schemas = useDesignContext().schemas;
if (!schemas.length)
return _jsx(Empty, { description: "\u6682\u65E0\u6570\u636E" });
return (_jsx(NodeTreeContextProvider, { children: _jsx(Nodes, {}) }));
};
export default NodeTree;
var Nodes = function () {
var _a = useNodeTreeContext(), setContextMenuItems = _a.setContextMenuItems, setContextMenuTarget = _a.setContextMenuTarget, setContextMenuPosition = _a.setContextMenuPosition, setContextMenuWidget = _a.setContextMenuWidget;
var wapperRef = React.createRef();
var _b = useDesignContext(), schemas = _b.schemas, setHoverAttrs = _b.setHoverAttrs, setActiveSchemaKey = _b.setActiveSchemaKey, activeSchemaKey = _b.activeSchemaKey, setSchemas = _b.setSchemas;
var token = theme.useToken().token;
var _c = useState(schemas.map(function (_a) {
var uuid = _a.uuid;
return uuid;
})), expandedKeys = _c[0], setExpandedKeys = _c[1];
var _d = useState(), renameKey = _d[0], setRenameKey = _d[1];
var onRename = function (e) {
var value = e.target.value;
var index = findIndex(schemas, { uuid: renameKey });
set(schemas, index, __assign(__assign({}, schemas[index]), { title: value }));
setSchemas(schemas);
setRenameKey(undefined);
};
var tree_data = useMemo(function () {
if (!schemas.length)
return [];
var getChildren = function (schemas, parent) { return schemas
.filter(function (schema) { return schema.parent === parent; })
.map(function (item) { return (__assign(__assign({}, item), { title: renameKey === item.uuid
? _jsx(Input, { autoFocus: true, defaultValue: item.title, size: "small", onBlur: onRename, onPressEnter: onRename })
: item.title })); })
.map(function (_a) {
var _b;
var title = _a.title, uuid = _a.uuid;
return (_b = {
title: title,
key: uuid,
children: getChildren(schemas, uuid)
},
_b[DATA_WIDGET] = uuid,
_b);
}); };
return getChildren(schemas, undefined);
}, [schemas, renameKey]);
var next_tree_data = useMemo(function () { return ([{
title: "页面",
key: 0,
children: tree_data
}]); }, [tree_data]);
var selectedKeys = useMemo(function () {
if (!activeSchemaKey)
return [0];
return [activeSchemaKey];
}, [activeSchemaKey]);
var onSelect = function (keys, _a) {
var node = _a.node;
setActiveSchemaKey(node.key);
};
var onMouseEnter = function (_a) {
var _b;
var node = _a.node;
setHoverAttrs((_b = {}, _b[DATA_WIDGET] = node.key, _b));
};
var onMouseLeave = function () {
setHoverAttrs(undefined);
};
var onExpand = function (keys) {
setExpandedKeys(keys);
};
var onDrop = function (info) {
var _a;
var dropKey = info.node.key;
var dragKey = info.dragNode.key;
var dropPos = info.node.pos.split("-");
var dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
var loop = function (data, key, callback) {
for (var i = 0; i < data.length; i++) {
if (data[i].key === key)
return callback(data[i], i, data);
if (data[i].children)
loop(data[i].children, key, callback);
}
};
var dragObj;
loop(tree_data, dragKey, function (item, index, arr) {
arr.splice(index, 1);
dragObj = item;
});
if (!info.dropToGap) {
loop(tree_data, dropKey, function (item) {
item.children = item.children || [];
item.children.unshift(dragObj);
});
}
else if ((info.node.props.children || []).length > 0 && info.node.props.expanded && dropPosition === 1) {
loop(tree_data, dropKey, function (item) {
item.children = item.children || [];
item.children.unshift(dragObj);
});
}
else {
var ar_1 = [];
var i_1;
loop(tree_data, dropKey, function (_item, index, arr) {
ar_1 = arr;
i_1 = index;
});
if (dropPosition === -1)
ar_1.splice(i_1, 0, dragObj);
else
ar_1.splice(i_1 + 1, 0, dragObj);
}
var packSchemas = function (node, parent) {
return node === null || node === void 0 ? void 0 : node.map(function (_a) {
var key = _a.key, children = _a.children;
var schema = find(schemas, { uuid: key });
return (__assign(__assign({}, schema), { parent: parent, children: packSchemas(children, key) }));
});
};
var next_schemas = flatten((_a = packSchemas(tree_data)) === null || _a === void 0 ? void 0 : _a.map(function (copySchema) { return flattSchemaTree(copySchema, undefined, false); }));
setSchemas(next_schemas);
};
var findWidget = function (target) {
var widget = target.getAttribute(DATA_WIDGET);
if (!!widget)
return { widget: widget, target: target };
if (target === wapperRef.current)
return undefined;
return findWidget(target.parentElement);
};
var onContextMenu = function (event) { return __awaiter(void 0, void 0, void 0, function () {
var clientX, clientY, finded, onPaste, widget_1, onRename_1, onCopy, onPaste, onDel;
return __generator(this, function (_a) {
event.preventDefault();
event.stopPropagation();
clientX = event.clientX, clientY = event.clientY;
setContextMenuPosition([clientX, clientY]);
finded = findWidget(event.target);
if (!finded) {
onPaste = function () { return readJson().then(function (schema) {
var nexts = flattSchemaTree(schema);
var next_schemas = schemas.concat(nexts);
setSchemas(next_schemas);
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
setTimeout(function () { var _a; return setActiveSchemaKey((_a = first(nexts)) === null || _a === void 0 ? void 0 : _a.uuid); });
}); };
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
setContextMenuItems([{ label: "粘贴", key: "paste", onClick: onPaste }]);
}
else {
widget_1 = finded.widget;
onRename_1 = function () {
setRenameKey(widget_1);
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
};
onCopy = function () {
var schema = wrappSchemaTree(schemas, widget_1);
writeText(schema)
.then(function () { return message.success("\u590D\u5236\u6210\u529F"); })
.catch(function () { return message.error("\u590D\u5236\u5931\u8D25"); });
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
};
onPaste = function () { return readJson().then(function (schema) { return __awaiter(void 0, void 0, void 0, function () {
var nexts, next_schemas;
return __generator(this, function (_a) {
nexts = flattSchemaTree(schema, widget_1);
next_schemas = schemas.concat(nexts);
setSchemas(next_schemas);
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
setTimeout(function () { var _a; return setActiveSchemaKey((_a = first(nexts)) === null || _a === void 0 ? void 0 : _a.uuid); });
return [2 /*return*/];
});
}); }); };
onDel = function () {
var ids = findSchemaUuidList(schemas, widget_1);
remove(schemas, function (_a) {
var uuid = _a.uuid;
return __spreadArray([widget_1], ids, true).includes(uuid);
});
setSchemas(schemas);
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
};
setContextMenuItems([
{ label: "重命名", key: "rename", onClick: onRename_1 },
{ label: "复制", key: "copy", onClick: onCopy },
{ label: "粘贴", key: "paste", onClick: onPaste },
{ label: _jsx("span", __assign({ style: { color: token.colorErrorText } }, { children: "\u5220\u9664" })), key: "del", onClick: onDel },
]);
}
return [2 /*return*/];
});
}); };
var tree_class = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .ant-tree-node-content-wrapper {\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n\n .ant-tree-node-selected {\n background-color: ", " !important;\n color: ", " !important;\n }\n "], ["\n .ant-tree-node-content-wrapper {\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n\n .ant-tree-node-selected {\n background-color: ", " !important;\n color: ", " !important;\n }\n "])), token.colorPrimaryBorderHover, token.colorWhite, token.colorPrimaryActive, token.colorWhite);
var wapper_class = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-height: 100%;\n padding-bottom: 100%;\n box-sizing: border-box;\n "], ["\n min-height: 100%;\n padding-bottom: 100%;\n box-sizing: border-box;\n "])));
return (_jsxs(Fragment, { children: [_jsx("div", __assign({ className: wapper_class, ref: wapperRef, onContextMenu: onContextMenu }, { children: _jsx(Tree, { className: tree_class, treeData: next_tree_data, expandedKeys: expandedKeys, blockNode: true, draggable: { icon: false }, selectedKeys: selectedKeys, onSelect: onSelect, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onExpand: onExpand, onDrop: onDrop }) })), _jsx(ContextMenus, {})] }));
};
var ContextMenus = function () {
var _a = useNodeTreeContext(), contextMenuItems = _a.contextMenuItems, setContextMenuItems = _a.setContextMenuItems, contextMenuPosition = _a.contextMenuPosition, setContextMenuPosition = _a.setContextMenuPosition, setContextMenuTarget = _a.setContextMenuTarget, setContextMenuWidget = _a.setContextMenuWidget;
var menuRef = React.createRef();
var _b = useState({}), style = _b[0], setStyle = _b[1];
var onMouseLeave = function () {
setContextMenuItems([]);
setContextMenuPosition(undefined);
setContextMenuTarget(undefined);
setContextMenuWidget(undefined);
};
useEffect(function () {
var _a;
if (!contextMenuPosition)
return setStyle({});
var menuRects = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.getClientRects().item(0);
if (!menuRects)
return;
var clientX = contextMenuPosition[0], clientY = contextMenuPosition[1];
var style = { top: clientY - 4, left: clientX - 4, opacity: 1 };
if ((clientY + menuRects.height) >= document.body.clientHeight) {
style.top = clientY - menuRects.height + 4;
}
if ((clientX + menuRects.width) >= document.body.clientWidth) {
style.left = clientX - menuRects.width + 4;
}
setStyle(style);
}, [contextMenuPosition]);
if (!contextMenuPosition)
return _jsx(Fragment, {});
var class_name = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-width: 100px;\n background-color: #FFFFFFFF;\n position: fixed;\n z-index: 999999;\n box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);\n padding: 5px;\n opacity: 0;\n "], ["\n min-width: 100px;\n background-color: #FFFFFFFF;\n position: fixed;\n z-index: 999999;\n box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);\n padding: 5px;\n opacity: 0;\n "])));
var item_class_name = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 32px;\n line-height: 32px;\n box-sizing: border-box;\n padding: 0 10px;\n cursor: pointer;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.88);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n "], ["\n height: 32px;\n line-height: 32px;\n box-sizing: border-box;\n padding: 0 10px;\n cursor: pointer;\n font-size: 14px;\n color: rgba(0, 0, 0, 0.88);\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.04);\n }\n "])));
return ReactDOM.createPortal(_jsx("div", __assign({ className: class_name, ref: menuRef, style: style, onMouseLeave: onMouseLeave }, { children: contextMenuItems === null || contextMenuItems === void 0 ? void 0 : contextMenuItems.map(function (_a) {
var key = _a.key, label = _a.label, onClick = _a.onClick;
return (_jsx("div", __assign({ onClick: onClick, className: item_class_name }, { children: label }), key));
}) })), document.querySelector("body"));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;