@luck-design-biz/luckda 0.0.23 → 0.0.24-2

package/es/lowcode/engine/tools/dataProcess.js

@@ -1,7 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as LZString from 'lz-string';
+import { CELL_KEY } from "../../constants";
 
 /**
  * 数据压缩
@@ -12,7 +14,7 @@ export function compress(data) {
   // 将对象转换为JSON字符串
   var jsonString = JSON.stringify(data);
   // 使用LZ-String压缩JSON字符串
-  return LZString.compressToUTF16(jsonString);
+  return LZString.compressToBase64(jsonString);
 }
 
 /**
@@ -22,7 +24,7 @@ export function compress(data) {
  */
 export function decompress(compressedData) {
   // 使用LZ-String解压数据
-  var jsonString = LZString.decompressFromUTF16(compressedData);
+  var jsonString = LZString.decompressFromBase64(compressedData);
   // 将JSON字符串转换回对象
   return JSON.parse(jsonString);
 }
@@ -37,6 +39,12 @@ export function decompress(compressedData) {
  */
 export function findNodeAndParent(id, current) {
   var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  if (!parent && current.props.id === id) {
+    return {
+      node: current,
+      parent: null
+    };
+  }
   if (current.hasOwnProperty('children') && current.children.includes(id)) {
     return {
       node: current[id],
@@ -44,7 +52,7 @@ export function findNodeAndParent(id, current) {
     };
   }
   for (var key in current) {
-    if (current[key] && _typeof(current[key]) === 'object' && key !== 'props') {
+    if (current[key] && _typeof(current[key]) === 'object' && key !== 'props' && key !== 'children') {
       var result = findNodeAndParent(id, current[key], current);
       if (result.node) {
         return result;
@@ -98,7 +106,7 @@ function process(json, path, id, data) {
     current[id] = {
       props: _objectSpread(_objectSpread({}, data), {}, {
         id: id,
-        parentId: current.id
+        parentId: current.props.id
       })
     };
   } else if (!path && id && data) {
@@ -133,12 +141,12 @@ function process(json, path, id, data) {
  * 对指定的JSON结构进行节点的添加操作。
  *
  * @param {Object} json - 要操作的JSON对象。
- * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
+ * @param {string} parentId - 父节点的唯一标识符。
  * @param {string} id - 操作节点的唯一标识符。
  * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
-export function add(json, path, id, data) {
-  process(json, path, id, data);
+export function add(json, parentId, id, data) {
+  process(json, getPathById(json, parentId), id, data);
 }
 
 /**
@@ -153,7 +161,7 @@ export function modifyById(json, id, data) {
 }
 
 /**
- * 查找指定ID的节点及其父节点。
+ * 删除指定id的节点。
  *
  * @param {Object} json - JSON对象。
  * @param {string} id - 要删除的节点ID。
@@ -173,6 +181,7 @@ export function deleteById(json, id) {
 export function getPathById(json, id) {
   var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   for (var key in json) {
+    if (id === CELL_KEY.PAGE_ROOT) return '/';
     var newPath = currentPath ? "".concat(currentPath, "/").concat(key) : key;
     if (json[key].props && json[key].props.id === id) {
       return newPath;
@@ -185,4 +194,72 @@ export function getPathById(json, id) {
     }
   }
   return null;
+}
+
+/**
+ * 在给定的JSON结构中搜索具有特定id的节点，并返回包含该节点及其所有父节点的props属性的路径数组。
+ *
+ * @param {Object} data - 待搜索的JSON对象，它代表了一个复杂的树状结构，每个节点都可能有props和children属性。
+ * @param {string} targetId - 需要找到的目标节点的id。
+ * @returns {Array<Object>} 一个包含目标节点及其所有父节点的props属性的数组。如果未找到目标节点，则返回空数组。
+ *
+ * @example
+ * const data = {
+ *   props: {
+ *     id: 'page_root',
+ *     type: 'Page',
+ *     name: '页面',
+ *     hasHeder: true,
+ *     hasFooter: true,
+ *   },
+ *   // ...其他节点
+ * };
+ *
+ * const path = getPathNodesById(data, 'form_jknbjkun');
+ * console.log(path);
+ * // 输出目标节点及其所有父节点的props属性的数组
+ */
+export function getPathNodesById(data, targetId) {
+  // 初始化结果数组
+  var result = [];
+
+  // 定义递归函数以搜索路径
+  function search(node) {
+    var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    // 检查当前节点是否是目标节点
+    if (node && node.props && node.props.id === targetId) {
+      // 如果是，将当前路径和节点自身添加到结果中
+      result = [].concat(_toConsumableArray(path), [node.props]);
+      return true;
+    }
+
+    // 遍历子节点
+    if (node && node.children) {
+      var _iterator2 = _createForOfIteratorHelper(node.children),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var childId = _step2.value;
+          // 对每个子节点，首先尝试从当前节点获取子节点数据
+          var childNode = node[childId];
+          if (search(childNode, [].concat(_toConsumableArray(path), [node.props]))) {
+            return true;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    }
+    return false;
+  }
+
+  // 从顶层"data"对象开始搜索
+  if (search(data)) {
+    return result;
+  }
+
+  // 如果未找到目标节点，返回空数组
+  return [];
 }

package/es/lowcode/engine/tools/helper.js

@@ -1,4 +1,72 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import { omit } from 'lodash';
 export function isPromise(value) {
   return !!value && _typeof(value) === 'object' && typeof value.then === 'function';
+}
+export function omitBadProps(props) {
+  var rubbish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return omit(props, ['component', 'name', 'desc', 'icon', 'group', 'groupName', 'order'].concat(_toConsumableArray(rubbish)));
+}
+export function listReducer(state, action) {
+  switch (action.type) {
+    case 'add':
+      {
+        var _action$callback;
+        var newState = [].concat(_toConsumableArray(state), [action.payload]);
+        (_action$callback = action.callback) === null || _action$callback === void 0 || _action$callback.call(action, newState);
+        return newState;
+      }
+    case 'delete':
+      {
+        var _action$callback2;
+        var _newState = state.filter(function (item) {
+          return item.id !== action.payload;
+        });
+        (_action$callback2 = action.callback) === null || _action$callback2 === void 0 || _action$callback2.call(action, _newState);
+        return _newState;
+      }
+    case 'edit':
+      {
+        var _action$callback3;
+        var _newState2 = state.map(function (item) {
+          return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+        });
+        (_action$callback3 = action.callback) === null || _action$callback3 === void 0 || _action$callback3.call(action, _newState2);
+        return _newState2;
+      }
+    case 'active':
+      {
+        var _action$callback4;
+        var _newState3 = state.map(function (item) {
+          item.active = false;
+          return item.id === action.payload.id ? _objectSpread(_objectSpread({}, item), action.payload.data) : item;
+        });
+        (_action$callback4 = action.callback) === null || _action$callback4 === void 0 || _action$callback4.call(action, _newState3);
+        return _newState3;
+      }
+    case 'new':
+      {
+        var _action$callback5;
+        var _newState4 = _toConsumableArray(action.payload);
+        (_action$callback5 = action.callback) === null || _action$callback5 === void 0 || _action$callback5.call(action, _newState4);
+        return _newState4;
+      }
+    case 'sort':
+      {
+        var _action$callback6;
+        var sortItems = action.payload;
+        var newItems = state.sort(function (a, b) {
+          var indexA = sortItems.indexOf(a.id);
+          var indexB = sortItems.indexOf(b.id);
+          return indexA - indexB;
+        });
+        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
+        var _newState5 = _toConsumableArray(newItems);
+        return _newState5;
+      }
+    default:
+      throw new Error();
+  }
 }

package/es/lowcode/engine/tools/usePromiseState.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useRef, useCallback } from 'react';
+import { useSafeState, useDeepCompareEffect } from 'ahooks';
+var usePromiseState = function usePromiseState(initialState) {
+  var _useSafeState = useSafeState(initialState),
+    _useSafeState2 = _slicedToArray(_useSafeState, 2),
+    state = _useSafeState2[0],
+    setState = _useSafeState2[1];
+  var promiseRef = useRef(null);
+  var setStatePromise = useCallback(function (_state) {
+    return new Promise(function (resolve) {
+      promiseRef.current = resolve;
+      setState(_state);
+    });
+  }, []);
+  useDeepCompareEffect(function () {
+    if (promiseRef.current) {
+      promiseRef.current(state);
+      promiseRef.current = null;
+    }
+  }, [state]);
+  return [state, setStatePromise];
+};
+export default usePromiseState;

package/es/lowcode/index.js

@@ -1,3 +1,5 @@
 export { default as Painter } from "./painter";
 export { default as View } from "./view";
-// export * as dataProcess  from './engine/tools/dataProcess';
+// export * as dataProcess  from './engine/tools/dataProcess';
+
+export default function launcher() {}

package/es/lowcode/painter/Design.js

@@ -1,97 +1,52 @@
-import React, { useRef, useEffect } from 'react';
-import { useEventListener } from 'ahooks';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState } from 'react';
+import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
+import { useMemoizedFn } from 'ahooks';
+import moment from 'moment';
+import { ConfigProvider } from 'luck-design/antd';
+import DesignToolbar from "./DesignToolbar";
+import DesignOperator from "./DesignOperator";
 import Page from "../view/Page";
-import { CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
 var Design = function Design() {
-  var context = useLDContext();
-  var detectorRef = useRef(null);
-  var selectorRef = useRef(null);
+  var _localeInfo$locale;
   var simulatorRef = useRef(null);
-  var hoverCellRef = useRef(null);
-  var activeCellRef = useRef(null);
-  useEventListener('mousemove', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
-      var _id = targetCell.id;
-      hoverCellRef.current = targetCell;
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: _id,
-        cellNode: targetCell
-      });
-    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+  var _useState = useState(function () {
+      return getLocale();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    locale = _useState2[0],
+    setLocale = _useState2[1];
+  var _useState3 = useState(function () {
+      return getIntl(getLocale(), true);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    intl = _useState4[0],
+    setIntl = _useState4[1];
+  var handleLangChange = useMemoizedFn(function (_locale) {
+    if (moment !== null && moment !== void 0 && moment.locale) {
+      var _localeInfo$_locale;
+      moment.locale(((_localeInfo$_locale = localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
     }
-  }, {
-    target: simulatorRef
-  });
-  useEventListener('mouseleave', function () {
-    if (hoverCellRef.current) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
+    setLocale(_locale);
+    setIntl(getIntl(_locale));
   });
-  useEventListener('click', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
-    activeCellRef.current = targetCell;
-    hoverCellRef.current = null;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: activeCellRef.current.id,
-      cellNode: activeCellRef.current
-    });
-  }, {
-    target: simulatorRef
-  });
-  useEffect(function () {
-    var setRect = function setRect(node, cellNode) {
-      node.style.left = "".concat(cellNode.offsetLeft, "px");
-      node.style.top = "".concat(cellNode.offsetTop, "px");
-      node.style.width = "".concat(cellNode.offsetWidth, "px");
-      node.style.height = "".concat(cellNode.offsetHeight, "px");
-    };
-    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) {
-        detectorRef.current.style.display = 'block';
-        setRect(detectorRef.current, payload.cellNode);
-      } else {
-        detectorRef.current.style.display = 'none';
-      }
-    }).watch();
-    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (payload.id) {
-        selectorRef.current.style.display = 'block';
-        setRect(selectorRef.current, payload.cellNode);
-      } else {
-        selectorRef.current.style.display = 'none';
-      }
-    }).watch();
-    return function () {
-      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
-    };
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "lc-detector",
-    ref: detectorRef,
-    className: styles.detector
+  }, /*#__PURE__*/React.createElement(DesignToolbar, {
+    locale: locale,
+    onLangChange: handleLangChange
   }), /*#__PURE__*/React.createElement("div", {
-    id: "lc-selector",
-    ref: selectorRef,
-    className: styles.selector
-  }), /*#__PURE__*/React.createElement(Page, {
+    className: styles['lc-painter-design-workspace']
+  }, /*#__PURE__*/React.createElement(DesignOperator, {
+    target: simulatorRef
+  }), /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: ((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
+  }, /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
-    className: styles.simulator
-  }));
+    className: styles['lc-painter-design-simulator']
+  })))));
 };
 export default Design;

package/es/lowcode/painter/DesignOperator.js

@@ -0,0 +1,271 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
+import { last, initial } from 'lodash';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
+import { Icon, Dropdown, message } from 'luck-design/antd';
+import { cloneDeep, reverse } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { add, deleteById } from "../engine/tools/dataProcess";
+import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
+import styles from "./style/design.less";
+var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
+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 DesignOperator = function DesignOperator(_ref) {
+  var _getDomById, _getDomById2;
+  var target = _ref.target;
+  var context = useLDContext();
+  var size = useSize(target);
+  var _useState = useState(suid()),
+    _useState2 = _slicedToArray(_useState, 2),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = useSetState({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = useLatest(operatorId.selector);
+  var currentModal = useRef(null);
+  var getDomById = useMemoizedFn(function (id) {
+    return context.componentMap.get(id).dom;
+  });
+  var handleSelect = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleHover = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleDelete = useMemoizedFn(function (_ref2) {
+    var id = _ref2.id,
+      parentId = _ref2.parentId;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+    var cloneData = cloneDeep(context.pageData);
+    deleteById(cloneData, id);
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_DELETE, {
+        id: id,
+        parentId: parentId,
+        pageData: newData
+      });
+    });
+  });
+  var addComponent = useMemoizedFn(function (data, targetId) {
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
+    var cloneData = cloneDeep(context.pageData);
+    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
+        });
+      }
+    }).watch();
+    context._setPageData(cloneData);
+  });
+  var acticeProps = useCreation(function () {
+    if (!operatorId.selector) return null;
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    return {
+      props: last(levelNodes),
+      menu: /*#__PURE__*/React.createElement("div", {
+        className: styles['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, reverse(initial(levelNodes)).map(function (m) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorNode = useCreation(function () {
+    return operatorId.detector ? last(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  }, [operatorId.detector]);
+  useEventListener('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(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: target
+  });
+  useEventListener('mouseleave', function () {
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  useEventListener('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(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: target
+  });
+  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, CELL_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
+        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) {
+        setOperatorId({
+          selector: payload.id,
+          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 _modal2 = context.componentMap.get(id || currentModal.current);
+        _modal2.api.doClose();
+        currentModal.current = void 0;
+      }
+    }).watch();
+    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);
+    };
+  }, []);
+  useEffect(function () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey(suid());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, operatorId.detector && /*#__PURE__*/React.createElement("div", {
+    id: "lc-detector",
+    className: styles['lc-painter-design-detector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['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.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: styles['lc-painter-design-selector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
+  }, acticeProps && /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-borders-actions'],
+    style: acticeProps.props.id === CELL_KEY.PAGE_ROOT ? {
+      top: 0
+    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "delete"
+  })))));
+};
+export default DesignOperator;