@luck-design-biz/luckda 0.0.24-1 → 0.0.25-1

package/lib/lowcode/painter/Design.js

@@ -6,330 +6,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _moment = _interopRequireDefault(require("moment"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _lodash = require("lodash");
 var _umi = require("umi");
 var _ahooks = require("ahooks");
+var _moment = _interopRequireDefault(require("moment"));
 var _antd = require("luck-design/antd");
-var _utils = require("@luck-design-biz/base/utils");
-var _ContextProvider = require("../engine/provider/ContextProvider");
+var _DesignToolbar = _interopRequireDefault(require("./DesignToolbar"));
+var _DesignOperator = _interopRequireDefault(require("./DesignOperator"));
 var _Page = _interopRequireDefault(require("../view/Page"));
-var _dataProcess = require("../engine/tools/dataProcess");
-var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./style/design.less"));
-var getOperatorStyle = function getOperatorStyle(page, cellNode) {
-  var _page$getBoundingClie = page.getBoundingClientRect(),
-    pageLeft = _page$getBoundingClie.left,
-    pageTop = _page$getBoundingClie.top;
-  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
-    cellNodeLeft = _cellNode$getBounding.left,
-    cellNodeTop = _cellNode$getBounding.top;
-  return {
-    left: "".concat(cellNodeLeft - pageLeft, "px"),
-    top: "".concat(cellNodeTop - pageTop, "px"),
-    width: "".concat(cellNode.offsetWidth, "px"),
-    height: "".concat(cellNode.offsetHeight, "px")
-  };
-};
 var Design = function Design() {
-  var _selectorRef$current, _localeInfo$locale2;
-  var context = (0, _ContextProvider.useLDContext)();
-  var selectorRef = (0, _react.useRef)(null);
+  var _localeInfo$locale;
   var simulatorRef = (0, _react.useRef)(null);
-  var size = (0, _ahooks.useSize)(simulatorRef);
-  var _useSetState = (0, _ahooks.useSetState)({
-      selector: null,
-      detector: null
+  var _useState = (0, _react.useState)(function () {
+      return (0, _umi.getLocale)();
     }),
-    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
-    operatorId = _useSetState2[0],
-    setOperatorId = _useSetState2[1];
-  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
+    locale = _useState2[0],
+    setLocale = _useState2[1];
   var _useState3 = (0, _react.useState)(function () {
-      return (0, _umi.getLocale)();
+      return (0, _umi.getIntl)((0, _umi.getLocale)(), true);
     }),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    locale = _useState4[0],
-    setLocale = _useState4[1];
-  var _useState5 = (0, _react.useState)(function () {
-      return (0, _umi.getIntl)(locale, true);
-    }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    intl = _useState6[0],
-    setContainerIntl = _useState6[1];
-  var _useState7 = (0, _react.useState)('pc'),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    activedTarget = _useState8[0],
-    setActivedTarget = _useState8[1];
-  (0, _ahooks.useEventListener)('mousemove', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
-      setOperatorId({
-        detector: targetCellId
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: targetCellId
-      });
-    } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
-  });
-  (0, _ahooks.useEventListener)('mouseleave', function () {
-    if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
-  });
-  (0, _ahooks.useEventListener)('click', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(_constants.CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (!targetCellId || targetCellId === operatorId.selector) return;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: targetCell.id
-    });
-  }, {
-    target: simulatorRef
-  });
-  (0, _react.useEffect)(function () {
-    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) setOperatorId({
-        detector: payload.id
-      });else setOperatorId({
-        detector: null
-      });
-    }).watch();
-    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (payload.id) {
-        setOperatorId({
-          selector: payload.id,
-          detector: null
-        });
-      } else {
-        setOperatorId({
-          selector: null
-        });
-      }
-    }).watch();
-    return function () {
-      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
-    };
-  }, [context.pageData]);
-  (0, _react.useEffect)(function () {
-    var moid = context.$subscriber(context.topics.MODAL_OPEN).on(function () {
-      simulatorRef.current.style.setProperty('overflow', 'hidden');
-    }).watch();
-    var mcid = context.$subscriber(context.topics.MODAL_CLOSE).on(function () {
-      simulatorRef.current.style.removeProperty('overflow');
-    }).watch();
-    var laid = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref) {
-      var _langList = _ref.langList;
-      return setLangList(_langList);
-    }).watch();
-    return function () {
-      context.$unsubscriber(context.topics.MODAL_OPEN, moid);
-      context.$unsubscriber(context.topics.MODAL_CLOSE, mcid);
-      context.$unsubscriber(context.topics.LANG_SETTING_SELECT, laid);
-    };
-  }, []);
-  (0, _react.useEffect)(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref2) {
-      var data = _ref2.data;
-      if (!operatorId.selector) {
-        _antd.message.info('请在右侧画布选择节点');
-        return;
-      }
-      if (context.componentMap.get(operatorId.selector).dom.getAttribute('name') !== 'box') {
-        _antd.message.info('该节点不支持添加子节点');
-        return;
-      }
-      var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-      var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
-      var cloneData = (0, _lodash.cloneDeep)(context.pageData);
-      (0, _dataProcess.add)(cloneData, operatorId.selector, _id, json);
-      context._setPageData(cloneData).then(function (newData) {
-        context.$publisher(context.topics.COMPONENT_APPEND, {
-          id: _id,
-          pageData: newData
-        });
-      });
-    }).watch();
-    return function () {
-      return context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
-    };
-  }, [context.pageData]);
-  var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
-    return context.componentMap.get(id).dom;
-  });
-  var handleLangChange = (0, _ahooks.useMemoizedFn)(function (locale) {
+    intl = _useState4[0],
+    setIntl = _useState4[1];
+  var handleLangChange = (0, _ahooks.useMemoizedFn)(function (_locale) {
     if (_moment.default !== null && _moment.default !== void 0 && _moment.default.locale) {
-      var _localeInfo$locale;
-      _moment.default.locale(((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.momentLocale) || 'en');
-    }
-    setLocale(locale);
-    setContainerIntl((0, _umi.getIntl)(locale));
-  });
-  var acticeProps = (0, _ahooks.useCreation)(function () {
-    if (operatorId.selector) {
-      var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
-      return {
-        props: (0, _lodash.last)(levelNodes),
-        menu: /*#__PURE__*/_react.default.createElement("div", {
-          className: _design.default['next-overlay-wrapper'],
-          onMouseLeave: function onMouseLeave() {
-            return handleHover();
-          }
-        }, (0, _lodash.reverse)((0, _lodash.initial)(levelNodes)).map(function (m) {
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: m.id
-          }, /*#__PURE__*/_react.default.createElement("span", {
-            onClick: function onClick() {
-              return handleSelect(m.id);
-            },
-            onMouseOver: function onMouseOver() {
-              return handleHover(m.id);
-            }
-          }, m.name));
-        }))
-      };
+      var _localeInfo$_locale;
+      _moment.default.locale(((_localeInfo$_locale = _umi.localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
     }
-    return null;
-  }, [operatorId.selector]);
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleHover = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleDelete = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_DELETE, _key ? {
-      id: _key
-    } : null);
+    setLocale(_locale);
+    setIntl((0, _umi.getIntl)(_locale));
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _design.default['lc-painter-design-toolbar']
-  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
-    size: "small",
-    value: langList ? locale : undefined,
-    className: _design.default['i18n-selecter'],
-    style: {
-      fontSize: 12
-    },
-    onSelect: handleLangChange
-  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
-    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
-      key: item.field,
-      value: item.field
-    }, item.title);
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'pc')),
-    onClick: function onClick() {
-      return setActivedTarget('pc');
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "laptop"
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
-    onClick: function onClick() {
-      return setActivedTarget('mobile');
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "mobile"
-  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      width: 'auto',
-      fontSize: 12
-    },
-    className: _design.default['toolbar-item'],
-    onClick: function onClick() {
-      context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: _constants.CELL_KEY.PAGE_ROOT
-      });
-    }
-  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 2px'
-    }
-  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
-    size: "small",
-    type: "primary",
-    style: {
-      fontSize: 12,
-      margin: '0 0 0 2px'
-    }
-  }, "\u4FDD\u5B58")), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_DesignToolbar.default, {
+    locale: locale,
+    onLangChange: handleLangChange
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design-workspace']
-  }, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
-    id: "lc-detector",
-    className: _design.default['lc-painter-design-detector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.detector))
-  }), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
-    id: "lc-selector",
-    ref: selectorRef,
-    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0),
-    className: _design.default['lc-painter-design-selector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.selector))
-  }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
-    className: _design.default['lc-borders-actions'],
-    style: acticeProps.props.id === _constants.CELL_KEY.PAGE_ROOT ? {
-      top: 0
-    } : ((_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.offsetTop) < 23 ? {
-      bottom: '-23px'
-    } : {
-      top: '-23px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
-    overlay: acticeProps.menu,
-    placement: "bottomLeft"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "instance-node-selector"
-  }, acticeProps.props.name)), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: function onClick() {
-      return handleDelete(acticeProps.props);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "delete"
-  })))), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
-    locale: ((_localeInfo$locale2 = _umi.localeInfo[locale]) === null || _localeInfo$locale2 === void 0 ? void 0 : _localeInfo$locale2.antd) || {}
+  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
+    target: simulatorRef
+  }), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    locale: ((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
   }, /*#__PURE__*/_react.default.createElement(_umi.RawIntlProvider, {
     value: intl
   }, /*#__PURE__*/_react.default.createElement(_Page.default, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
     className: _design.default['lc-painter-design-simulator']
   })))));
 };

package/lib/lowcode/painter/DesignOperator.js

@@ -0,0 +1,297 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _dataProcess = require("../engine/tools/dataProcess");
+var _constants = require("../constants");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
+var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+  if (!cellNode) return {};
+  var _page$getBoundingClie = page.getBoundingClientRect(),
+    pageLeft = _page$getBoundingClie.left,
+    pageTop = _page$getBoundingClie.top;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
+};
+var DesignOperator = function DesignOperator(_ref) {
+  var _getDomById, _getDomById2;
+  var target = _ref.target;
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var size = (0, _ahooks.useSize)(target);
+  var _useState = (0, _react.useState)((0, _utils.suid)()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = (0, _ahooks.useSetState)({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
+  var currentModal = (0, _react.useRef)(null);
+  var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
+    var _context$componentMap;
+    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
+  });
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleHover = (0, _ahooks.useMemoizedFn)(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
+    var id = _ref2.id;
+    context.$publisher(context.topics.COMPONENT_DELETE, {
+      id: id,
+      pageData: pageData
+    });
+  });
+  var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
+    var cloneData = (0, _lodash.cloneDeep)(pageData);
+    (0, _dataProcess.add)(cloneData, targetId, _id, json);
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
+      var mountCompId = _ref3.id;
+      if (mountCompId === _id) {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id,
+          pageData: cloneData
+        });
+        context.$publisher(context.topics.COMPONENT_ACTIVE, {
+          id: _id
+        });
+      }
+    }).watch();
+    setPageData(cloneData);
+  });
+  var acticeProps = (0, _ahooks.useCreation)(function () {
+    if (!operatorId.selector) return null;
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    return {
+      props: (0, _lodash.last)(levelNodes),
+      menu: /*#__PURE__*/_react.default.createElement("div", {
+        className: _design.default['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, (0, _lodash.reverse)((0, _lodash.initial)(levelNodes)).map(function (m) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorNode = (0, _ahooks.useCreation)(function () {
+    return operatorId.detector ? (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  }, [operatorId.detector]);
+  (0, _ahooks.useEventListener)('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
+      setOperatorId({
+        detector: targetCellId
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: targetCellId
+      });
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  (0, _ahooks.useEventListener)('mouseleave', function () {
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  (0, _ahooks.useEventListener)('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_COMPONENT_UNIT, "\"]"));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (!targetCellId || targetCellId === operatorId.selector) return;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id
+    });
+  }, {
+    target: target
+  });
+  (0, _react.useEffect)(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
+      var data = _ref4.data;
+      if (_MODAL_COMPONENT_.includes(data.component)) {
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
+          var compId = _ref5.id;
+          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+            toggle: true,
+            id: compId
+          });
+          context.$publisher(context.topics.COMPONENT_ACTIVE, {
+            id: compId
+          });
+        }).watch();
+        addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        _antd.message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (!_constants.CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
+        _antd.message.info('该节点不支持添加子节点');
+        return;
+      }
+      addComponent(data, lastSelectorId.current);
+    }).watch();
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) setOperatorId({
+        detector: payload.id
+      });else setOperatorId({
+        detector: null
+      });
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        var _context$componentMap2 = context.componentMap.get(payload.id).api.getSelfAndParentLCData(),
+          node = _context$componentMap2.node;
+        setOperatorId({
+          selector: payload.id,
+          deletable: node.props.buildIn !== true,
+          detector: null
+        });
+      } else {
+        setOperatorId({
+          selector: null
+        });
+      }
+    }).watch();
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
+      var toggle = _ref6.toggle,
+        id = _ref6.id;
+      if (toggle) {
+        target.current.style.setProperty('overflow', 'hidden');
+        var _modal = context.componentMap.get(id);
+        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
+        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
+        _modal.api.doOpen();
+        currentModal.current = id;
+      } else {
+        target.current.style.removeProperty('overflow');
+        var _id = id || currentModal.current;
+        if (_id) {
+          var _modal2 = context.componentMap.get(_id);
+          _modal2.api.doClose();
+          currentModal.current = void 0;
+        }
+      }
+    }).watch();
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
+      var id = _ref7.id,
+        pageData = _ref7.pageData;
+      if (lastSelectorId.current === id) {
+        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+      }
+      var cloneData = (0, _lodash.cloneDeep)(pageData);
+      (0, _dataProcess.deleteById)(cloneData, id);
+      setPageData(cloneData);
+    });
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey((0, _utils.suid)());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-detector",
+    className: _design.default['lc-painter-design-detector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector), 'detector', operatorId.detector)
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _design.default['lc-painter-design-detector-name'],
+    style: {
+      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
+    }
+  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
+    id: "lc-selector",
+    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
+    className: _design.default['lc-painter-design-selector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector), 'selector', operatorId.selector)
+  }, acticeProps && /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-borders-actions'],
+    style: acticeProps.props.id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
+      top: 0
+    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/_react.default.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "delete"
+  })))));
+};
+var _default = exports.default = DesignOperator;