@magicbe/design
Version:
React + Antd Drag Drop Visual design
268 lines (267 loc) • 18.9 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);
};
import { jsx as _jsx } from "react/jsx-runtime";
import React, { Fragment, useEffect, useMemo, useState } from "react";
import createEmotion from "@emotion/css/create-instance";
import { useDesignContext } from "../context";
import { useDesignViewsContext } from "./Context";
import { DATA_DROP, DATA_DROP_WAPPER, DATA_ROOT_HOLDER, DATA_WIDGET } from "../utils/const";
import { theme } from "antd";
import { flattSchemaTree, wrappSchemaTree } from "../utils/clipboard";
var _a = createEmotion({ key: "inject-holders" }), css = _a.css, cx = _a.cx;
/**聚焦状态 */
export var HoverHolder = function () {
var hoverAttrs = useDesignContext().hoverAttrs;
var wapperRef = useDesignViewsContext().wapperRef;
var token = theme.useToken().token;
var style = useMemo(function () {
var _a, _b, _c, _d;
if (!hoverAttrs)
return;
var _e = hoverAttrs, _f = DATA_WIDGET, widget = _e[_f], _g = DATA_DROP, drop = _e[_g], _h = DATA_DROP_WAPPER, drop_wapper = _e[_h];
if (!wapperRef.current)
return;
var rect = (_a = wapperRef.current) === null || _a === void 0 ? void 0 : _a.getClientRects().item(0);
if (!rect)
return;
var wapper_top = rect.top, wapper_left = rect.left;
if (drop) {
var element = (_b = wapperRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("*[".concat(DATA_DROP, "=\"").concat(drop, "\"]"));
var rect_1 = element === null || element === void 0 ? void 0 : element.getClientRects().item(0);
if (!rect_1)
return;
var top_1 = rect_1.top, left = rect_1.left, width = rect_1.width, height = rect_1.height;
return { top: top_1 - wapper_top, left: left - wapper_left, width: width, height: height };
}
if (drop_wapper) {
var element = (_c = wapperRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("*[".concat(DATA_DROP_WAPPER, "=\"").concat(drop_wapper, "\"]"));
/**
* const padding = window.getComputedStyle(element!).getPropertyValue("padding");
* let padding_num = padding.split(" ").map((pd) => pd.replace(/px$/g, "")).map(Number);
* if (padding_num.length === 1) {
* const [padding] = padding_num;
* padding_num = [padding, padding, padding, padding];
* }
* if (padding_num.length === 2) {
* const [y, x] = padding_num;
* padding_num = [y, x, y, x];
* }
* if (padding_num.length === 3) {
* const [t, x, b] = padding_num;
* padding_num = [t, x, b, x];
* }
* const [pt, pr, pb, pl] = padding_num;
*/
var rect_2 = element === null || element === void 0 ? void 0 : element.getClientRects().item(0);
if (!rect_2)
return;
var top_2 = rect_2.top, left = rect_2.left, width = rect_2.width, height = rect_2.height;
/**
* top = top + pt;
* left = left + pl;
* width = width - pl - pr;
* height = height - pt - pb;
*/
return { top: top_2 - wapper_top, left: left - wapper_left, width: width, height: height };
}
if (widget) {
var element = (_d = wapperRef.current) === null || _d === void 0 ? void 0 : _d.querySelector("*[".concat(DATA_WIDGET, "=\"").concat(widget, "\"]"));
var rect_3 = element === null || element === void 0 ? void 0 : element.getClientRects().item(0);
if (!rect_3)
return;
var top_3 = rect_3.top, left = rect_3.left, width = rect_3.width, height = rect_3.height;
return { top: top_3 - wapper_top, left: left - wapper_left, width: width, height: height };
}
}, [hoverAttrs, wapperRef]);
var class_name = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 2px solid ", ";\n position: absolute;\n box-sizing: border-box;\n "], ["\n border: 2px solid ", ";\n position: absolute;\n box-sizing: border-box;\n "])), token.colorPrimaryBorderHover);
if (!style)
return _jsx(Fragment, {});
return _jsx("div", { style: style, className: class_name });
};
/**选中状态 */
export var ActiveHolder = function () {
var _a = useDesignContext(), schemas = _a.schemas, activeSchemaKey = _a.activeSchemaKey, setDragSchemas = _a.setDragSchemas;
var wapperRef = useDesignViewsContext().wapperRef;
var token = theme.useToken().token;
var style = useMemo(function () {
var _a, _b;
if (!activeSchemaKey)
return;
var rect = (_a = wapperRef.current) === null || _a === void 0 ? void 0 : _a.getClientRects().item(0);
if (!rect)
return;
var wapper_top = rect.top, wapper_left = rect.left;
var element = (_b = wapperRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("*[".concat(DATA_WIDGET, "=\"").concat(activeSchemaKey, "\"]"));
if (!element)
return;
{
var rect_4 = element === null || element === void 0 ? void 0 : element.getClientRects().item(0);
if (!rect_4)
return;
var top_4 = rect_4.top, left = rect_4.left, width = rect_4.width, height = rect_4.height;
return { top: top_4 - wapper_top, left: left - wapper_left, width: width, height: height };
}
}, [activeSchemaKey]);
var onDragStart = function () {
setDragSchemas(flattSchemaTree(wrappSchemaTree(schemas, activeSchemaKey), undefined, false));
};
var onDragEnd = function () {
setDragSchemas(undefined);
};
var class_name = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 2px solid ", ";\n position: absolute;\n box-sizing: border-box;\n "], ["\n border: 2px solid ", ";\n position: absolute;\n box-sizing: border-box;\n "])), token.colorPrimaryActive);
if (!activeSchemaKey)
return _jsx(Fragment, {});
return (_jsx("div", { className: class_name, style: style, onDragStart: onDragStart, onDragEnd: onDragEnd, draggable: true }));
};
/**添加到根组件 */
export var RootHolder = function () {
var _a, _b;
var dragWidget = useDesignContext().dragWidget;
var holderToRoot = useDesignViewsContext().holderToRoot;
var _c = useState(), active = _c[0], setActive = _c[1];
var token = theme.useToken().token;
var class_name = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 60px;\n background-color: ", ";\n position: relative;\n box-sizing: border-box;\n border: 2px dashed ", ";\n text-align: center;\n opacity: 0.2;\n text-align: center;\n line-height: 60px;\n box-sizing: border-box;\n color: ", ";\n font-weight: 800;\n "], ["\n height: 60px;\n background-color: ", ";\n position: relative;\n box-sizing: border-box;\n border: 2px dashed ", ";\n text-align: center;\n opacity: 0.2;\n text-align: center;\n line-height: 60px;\n box-sizing: border-box;\n color: ", ";\n font-weight: 800;\n "])), token.colorPrimaryBg, token.colorPrimaryActive, token.colorPrimaryActive);
var active_class_name = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n opacity: 0.6;\n "], ["\n opacity: 0.6;\n "])));
var onDragEnter = function () { return setActive(true); };
var onDragLeave = function () { return setActive(false); };
useEffect(function () {
if (!holderToRoot)
setActive(false);
}, [holderToRoot]);
if (!dragWidget)
return _jsx(Fragment, {});
if (!holderToRoot)
return _jsx(Fragment, {});
return (_jsx("div", __assign({}, (_a = {}, _a[DATA_ROOT_HOLDER] = true, _a), { className: cx(class_name, (_b = {}, _b[active_class_name] = active, _b)), onDragEnter: onDragEnter, onDragLeave: onDragLeave }, { children: "\u62D6\u653E\u5230\u6B64\u5904" })));
};
/**当前拖拽状态 */
export var WidgetHolder = function () {
var _a;
var token = theme.useToken().token;
var _b = useDesignViewsContext(), holderToWidget = _b.holderToWidget, holderToWidgetLocal = _b.holderToWidgetLocal, wapperRef = _b.wapperRef;
var _c = useState(), style = _c[0], setStyle = _c[1];
useEffect(function () {
var _a, _b;
if (!holderToWidget)
return;
var rect = (_a = wapperRef.current) === null || _a === void 0 ? void 0 : _a.getClientRects().item(0);
if (!rect)
return;
var wapper_top = rect.top, wapper_left = rect.left;
var element = (_b = wapperRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("*[".concat(DATA_WIDGET, "=\"").concat(holderToWidget, "\"]"));
if (!element)
return;
{
var rect_5 = element.getClientRects().item(0);
if (!rect_5)
return;
var top_5 = rect_5.top, left = rect_5.left, width = rect_5.width, height = rect_5.height;
setStyle({ top: top_5 - wapper_top, left: left - wapper_left, width: width, height: height });
}
}, [holderToWidget]);
var class_name = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n opacity: 0.6;\n position: absolute;\n "], ["\n background-color: ", ";\n opacity: 0.6;\n position: absolute;\n "])), token.colorPrimaryBg);
var wapper_class = css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n "], ["\n width: 100%;\n height: 100%;\n position: relative;\n "])));
var left_class = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n background-color: ", ";\n }\n\n &::before {\n width: 2px;\n height: 100%;\n max-height: 10px;\n }\n\n &::after {\n width: 100%;\n max-width: 10px;\n height: 2px;\n }\n "], ["\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n background-color: ", ";\n }\n\n &::before {\n width: 2px;\n height: 100%;\n max-height: 10px;\n }\n\n &::after {\n width: 100%;\n max-width: 10px;\n height: 2px;\n }\n "])), token.colorPrimaryActive);
var right_class = css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n bottom: 0;\n right: 0;\n background-color: ", ";\n }\n\n &::before {\n width: 2px;\n height: 100%;\n max-height: 10px;\n }\n\n &::after {\n width: 100%;\n max-width: 10px;\n height: 2px;\n }\n "], ["\n &::before,\n &::after {\n display: block;\n content: \"\";\n position: absolute;\n bottom: 0;\n right: 0;\n background-color: ", ";\n }\n\n &::before {\n width: 2px;\n height: 100%;\n max-height: 10px;\n }\n\n &::after {\n width: 100%;\n max-width: 10px;\n height: 2px;\n }\n "])), token.colorPrimaryActive);
if (!holderToWidget)
return _jsx(Fragment, {});
return (_jsx("div", __assign({ style: style, className: class_name }, { children: _jsx("div", { className: cx(wapper_class, (_a = {},
_a[left_class] = holderToWidgetLocal === "leftTop",
_a[right_class] = holderToWidgetLocal === "rightBottom",
_a)) }) })));
};
/**插槽容器聚焦状态 */
export var DropWapperHolder = function () {
var _a = useDesignViewsContext(), holderToDropWapper = _a.holderToDropWapper, wapperRef = _a.wapperRef;
var _b = useState(), style = _b[0], setStyle = _b[1];
var token = theme.useToken().token;
useEffect(function () {
var _a;
if (!holderToDropWapper)
return setStyle(undefined);
var element = (_a = wapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("*[".concat(DATA_DROP_WAPPER, "=\"").concat(holderToDropWapper, "\"]"));
if (!element)
return setStyle(undefined);
var padding = window.getComputedStyle(element).getPropertyValue("padding");
var padding_num = padding.split(" ").map(function (pd) { return pd.replace(/px$/g, ""); }).map(Number);
if (padding_num.length === 1) {
var padding_1 = padding_num[0];
padding_num = [padding_1, padding_1, padding_1, padding_1];
}
if (padding_num.length === 2) {
var y = padding_num[0], x = padding_num[1];
padding_num = [y, x, y, x];
}
if (padding_num.length === 3) {
var t = padding_num[0], x = padding_num[1], b = padding_num[2];
padding_num = [t, x, b, x];
}
var pt = padding_num[0], pr = padding_num[1], pb = padding_num[2], pl = padding_num[3];
var rect = element === null || element === void 0 ? void 0 : element.getClientRects().item(0);
if (!rect)
return;
var top = rect.top, left = rect.left, width = rect.width, height = rect.height;
top = top + pt;
left = left + pl;
width = width - pl - pr;
height = height - pt - pb;
setStyle({ top: top, width: width, height: height, left: left });
}, [holderToDropWapper]);
var class_name = css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n opacity: 0.6;\n position: absolute;\n border: 2px solid ", ";\n "], ["\n background-color: ", ";\n opacity: 0.6;\n position: absolute;\n border: 2px solid ", ";\n "])), token.colorPrimaryBg, token.colorPrimaryActive);
if (!holderToDropWapper)
return _jsx(Fragment, {});
return (_jsx("div", { className: class_name, style: style }));
};
/**右键菜单 */
export var HolderContextMenu = function () {
var ref = React.createRef();
var _a = useDesignViewsContext(), holderContextMenuAttr = _a.holderContextMenuAttr, setHolderContextMenuAttr = _a.setHolderContextMenuAttr;
var _b = useState({}), style = _b[0], setStyle = _b[1];
useEffect(function () {
var _a;
if (!holderContextMenuAttr)
return;
var local = holderContextMenuAttr.local;
var rect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getClientRects().item(0);
if (!rect)
return;
var width = rect.width, height = rect.height;
var clientX = local[0], clientY = local[1];
var style = { top: clientY - 4, left: clientX - 4, opacity: 1 };
if ((clientY + height) >= document.body.clientHeight) {
style.top = clientY - height + 4;
}
if ((clientX + width) >= document.body.clientWidth) {
style.left = clientX - width + 4;
}
setStyle(style);
}, [holderContextMenuAttr]);
var onMouseLeave = function (event) {
setHolderContextMenuAttr(undefined);
};
var onMouseMove = function (event) {
event.stopPropagation();
};
var onClick = function (event) {
event.stopPropagation();
};
var class_name = css(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __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 "])));
if (!holderContextMenuAttr)
return _jsx(Fragment, {});
return (_jsx("div", __assign({ className: class_name, ref: ref, style: style, onMouseLeave: onMouseLeave, onMouseMove: onMouseMove, onClick: onClick }, { children: holderContextMenuAttr === null || holderContextMenuAttr === void 0 ? void 0 : holderContextMenuAttr.items.map(function (item, index) { return (_jsx("div", __assign({ className: item_class_name, onClick: item.onClick }, { children: item.label }), index)); }) })));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;