@luck-design-biz/luckda 0.0.25-8 → 0.0.25-af-1

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

@@ -7,17 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.executeCode = executeCode;
 exports.getCtx = getCtx;
 exports.getFuncBody = getFuncBody;
-exports.isColor = isColor;
 exports.isPromise = isPromise;
 exports.listReducer = listReducer;
 exports.omitBadProps = omitBadProps;
-exports.parseCSS = parseCSS;
 var _construct2 = _interopRequireDefault(require("@babel/runtime/helpers/construct"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lodash = require("lodash");
-var _postcss = _interopRequireDefault(require("postcss"));
 function isPromise(value) {
   return !!value && (0, _typeof2.default)(value) === 'object' && typeof value.then === 'function';
 }
@@ -27,91 +24,69 @@ function omitBadProps(props) {
 }
 function listReducer(state, action) {
   switch (action.type) {
-    case 'insert':
+    case 'add':
       {
         var _action$callback;
-        var newState = (0, _toConsumableArray2.default)(state);
-        newState.splice(action.payload.index + 1, 0, action.payload.data);
+        var newState = [].concat((0, _toConsumableArray2.default)(state), [action.payload]);
         (_action$callback = action.callback) === null || _action$callback === void 0 || _action$callback.call(action, newState);
         return newState;
       }
-    case 'add':
+    case 'delete':
       {
         var _action$callback2;
-        var _newState = [].concat((0, _toConsumableArray2.default)(state), [action.payload]);
+        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 'delete':
+    case 'edit':
       {
         var _action$callback3;
-        var _newState2 = state.filter(function (item) {
-          return item.id !== action.payload;
+        var _newState2 = state.map(function (item) {
+          return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
         });
         (_action$callback3 = action.callback) === null || _action$callback3 === void 0 || _action$callback3.call(action, _newState2);
         return _newState2;
       }
-    case 'edit':
+    case 'active':
       {
         var _action$callback4;
         var _newState3 = state.map(function (item) {
+          item.active = false;
           return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
         });
         (_action$callback4 = action.callback) === null || _action$callback4 === void 0 || _action$callback4.call(action, _newState3);
         return _newState3;
       }
-    case 'batchEdit':
+    case 'new':
       {
         var _action$callback5;
-        var _newState4 = state.map(function (item) {
-          var newItem = action.payload.items.find(function (_id) {
-            return _id === item.id;
-          });
-          if (newItem) {
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data);
-          }
-          return item;
-        });
+        var _newState4 = (0, _toConsumableArray2.default)(action.payload);
         (_action$callback5 = action.callback) === null || _action$callback5 === void 0 || _action$callback5.call(action, _newState4);
         return _newState4;
       }
-    case 'active':
-      {
-        var _action$callback6;
-        var _newState5 = state.map(function (item) {
-          item.active = false;
-          return item.id === action.payload.id ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), action.payload.data) : item;
-        });
-        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
-        return _newState5;
-      }
-    case 'init':
-    case 'new':
-      {
-        var _action$callback7;
-        (_action$callback7 = action.callback) === null || _action$callback7 === void 0 || _action$callback7.call(action, action.payload);
-        return action.payload;
-      }
     case 'sort':
       {
-        var _action$callback8;
+        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;
         });
-        var _newState6 = (0, _toConsumableArray2.default)(newItems);
-        (_action$callback8 = action.callback) === null || _action$callback8 === void 0 || _action$callback8.call(action, _newState6);
-        return _newState6;
+        (_action$callback6 = action.callback) === null || _action$callback6 === void 0 || _action$callback6.call(action, _newState5);
+        var _newState5 = (0, _toConsumableArray2.default)(newItems);
+        return _newState5;
       }
     default:
       throw new Error();
   }
 }
 function getCtx(context) {
-  return context;
-  // return omitBy(context, (_, key) => startsWith(key, '_'));
+  return (0, _lodash.omitBy)(context, function (_, key) {
+    return (0, _lodash.startsWith)(key, '_');
+  });
 }
 function getFuncBody(funcCode) {
   var regex = /{([\s\S]*?)}(?![\s\S]*})/;
@@ -134,31 +109,4 @@ function executeCode(context, code, argsName) {
   var ctx = getCtx(context);
   var func = (0, _construct2.default)(Function, (0, _toConsumableArray2.default)(argsName || []).concat(['ctx', getFuncBody(code)]));
   return func.apply(void 0, args.concat([ctx]));
-}
-function parseCSS(cssString) {
-  // 创建一个空对象来存储解析后的样式
-  var parsedStyles = {};
-  if (cssString) {
-    try {
-      // 解析CSS字符串
-      var ast = _postcss.default.parse(cssString);
-
-      // 遍历AST中的每个规则
-      ast.walkDecls(function (decl) {
-        // 将每个声明的属性和值存储在对象中
-        parsedStyles[decl.prop] = decl.value;
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  // 返回包含所有样式的对象
-  return parsedStyles;
-}
-;
-function isColor(str) {
-  var hexRegex = /^#(?:[A-Fa-f0-9]{3,4}){1,2}$/;
-  var rgbaRegex = /^rgba?\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(,\s*(0|1|0?\.\d+))?\s*\)$/;
-  return hexRegex.test(str) || rgbaRegex.test(str);
 }

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

@@ -9,10 +9,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _ahooks = require("ahooks");
 var usePromiseState = function usePromiseState(initialState) {
-  var _useState = (0, _react.useState)(initialState),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    state = _useState2[0],
-    setState = _useState2[1];
+  var _useResetState = (0, _ahooks.useResetState)(initialState),
+    _useResetState2 = (0, _slicedToArray2.default)(_useResetState, 3),
+    state = _useResetState2[0],
+    setState = _useResetState2[1],
+    resetState = _useResetState2[2];
   var promiseRef = (0, _react.useRef)(null);
   var setStatePromise = (0, _react.useCallback)(function (_state) {
     return new Promise(function (resolve) {
@@ -20,12 +21,12 @@ var usePromiseState = function usePromiseState(initialState) {
       setState(_state);
     });
   }, []);
-  (0, _ahooks.useUpdateLayoutEffect)(function () {
+  (0, _ahooks.useDeepCompareEffect)(function () {
     if (promiseRef.current) {
       promiseRef.current(state);
       promiseRef.current = null;
     }
   }, [state]);
-  return [state, setStatePromise];
+  return [state, setStatePromise, resetState];
 };
 var _default = exports.default = usePromiseState;

package/lib/lowcode/index.js

@@ -10,12 +10,6 @@ Object.defineProperty(exports, "Painter", {
     return _painter.default;
   }
 });
-Object.defineProperty(exports, "Preview", {
-  enumerable: true,
-  get: function get() {
-    return _preview.default;
-  }
-});
 Object.defineProperty(exports, "View", {
   enumerable: true,
   get: function get() {
@@ -25,7 +19,6 @@ Object.defineProperty(exports, "View", {
 exports.default = launcher;
 var _painter = _interopRequireDefault(require("./painter"));
 var _view = _interopRequireDefault(require("./view"));
-var _preview = _interopRequireDefault(require("./preview"));
 // export * as dataProcess  from './engine/tools/dataProcess';
 
 function launcher() {}

package/lib/lowcode/painter/Components.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,10 +13,8 @@ var _antd = require("luck-design/antd");
 var _ahooks = require("ahooks");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
-var _core = require("@dnd-kit/core");
 var _components = _interopRequireDefault(require("./style/components.less"));
 var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
-var _DragDropContext = require("./components/DragDrop/DragDropContext");
 var TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -39,7 +36,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [searchTerm]);
+  }, [_componentsList.default]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: _components.default['components-search']
   }, /*#__PURE__*/_react.default.createElement(Search, {
@@ -55,53 +52,30 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: _components.default['components-wrapper']
     }, /*#__PURE__*/_react.default.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/_react.default.createElement(CompItem, {
+      return /*#__PURE__*/_react.default.createElement("div", {
         key: item.component,
-        item: item,
-        onComponentClick: onComponentClick
-      });
+        className: _components.default['components-item'],
+        onClick: function onClick() {
+          return onComponentClick(item);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: _components.default['icon-wrapper']
+      }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+        type: item.icon || 'home'
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: _components.default['text-content']
+      }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
     }));
   })));
 };
-var CompItem = function CompItem(_ref2) {
-  var item = _ref2.item,
-    onComponentClick = _ref2.onComponentClick;
-  // console.log('CompItem', item.component);
-  var _useDraggable = (0, _core.useDraggable)({
-      id: 'comlist-' + item.component,
-      data: {
-        component: item,
-        action: _DragDropContext.Action.ADD
-      }
-    }),
-    attributes = _useDraggable.attributes,
-    listeners = _useDraggable.listeners,
-    transform = _useDraggable.transform,
-    setNodeRef = _useDraggable.setNodeRef;
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    ref: setNodeRef
-  }, listeners, attributes, {
-    key: item.component,
-    className: _components.default['components-item'],
-    onClick: function onClick() {
-      return onComponentClick(item);
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _components.default['icon-wrapper']
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: item.icon || 'home'
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _components.default['text-content']
-  }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
-};
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
-var Components = function Components(_ref3) {
-  var _ref3$dataset = _ref3.dataset,
-    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
-  var context = (0, _ContextProvider.useContext)();
+var Components = function Components(_ref2) {
+  var _ref2$dataset = _ref2.dataset,
+    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
+  var context = (0, _ContextProvider.useLDContext)();
   var onComponentClick = (0, _ahooks.useMemoizedFn)(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -129,10 +103,10 @@ var Components = function Components(_ref3) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/_react.default.createElement(TabPane, {
     tab: (0, _utils.formatMessage)({
-      id: 'ccm.dev.page.set.components.custom',
-      label: '自定义组件'
+      id: 'ccm.dev.page.set.components.dataset',
+      label: '数据集字段'
     }),
     key: "dataset"
-  }, "\u656C\u8BF7\u671F\u5F85")));
+  })));
 };
 var _default = exports.default = Components;

package/lib/lowcode/painter/Design.js

@@ -12,8 +12,6 @@ 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"));
@@ -21,7 +19,6 @@ var _design = _interopRequireDefault(require("./style/design.less"));
 var Design = function Design() {
   var _localeInfo$locale;
   var simulatorRef = (0, _react.useRef)(null);
-  var remoteSource = (0, _ContextProvider.useRemoteSource)();
   var _useState = (0, _react.useState)(function () {
       return (0, _umi.getLocale)();
     }),
@@ -34,35 +31,6 @@ var Design = function Design() {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     intl = _useState4[0],
     setIntl = _useState4[1];
-  var unblock = (0, _ahooks.useMemoizedFn)(function () {
-    if (remoteSource.backLength > 0) return confirm("".concat((0, _utils.formatMessage)({
-      id: 'app.base.operate.comfire.leave',
-      label: '离开当前页面？'
-    }), "\n").concat((0, _utils.formatMessage)({
-      id: 'app.base.operate.comfire.message.leave',
-      label: '系统可能不会保存您所做的更改。'
-    })));
-    return true;
-  });
-  var handleBeforeUnload = (0, _ahooks.useMemoizedFn)(function (event) {
-    if (remoteSource.backLength > 0) {
-      event.preventDefault();
-      event.returnValue = null;
-      return null;
-    }
-  });
-  (0, _react.useEffect)(function () {
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    _umi.history.block(function () {
-      return unblock();
-    });
-    return function () {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-      _umi.history.block(function () {
-        return true;
-      });
-    };
-  }, []);
   var handleLangChange = (0, _ahooks.useMemoizedFn)(function (_locale) {
     if (_moment.default !== null && _moment.default !== void 0 && _moment.default.locale) {
       var _localeInfo$_locale;

package/lib/lowcode/painter/DesignOperator.js

@@ -13,11 +13,11 @@ 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;
@@ -34,7 +34,7 @@ var getOperatorStyle = function getOperatorStyle(page, cellNode) {
 var DesignOperator = function DesignOperator(_ref) {
   var _getDomById, _getDomById2;
   var target = _ref.target;
-  var context = (0, _ContextProvider.useContext)();
+  var context = (0, _ContextProvider.useLDContext)();
   var size = (0, _ahooks.useSize)(target);
   var _useState = (0, _react.useState)((0, _utils.suid)()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -50,8 +50,7 @@ var DesignOperator = function DesignOperator(_ref) {
   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();
+    return context.componentMap.get(id).dom;
   });
   var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
@@ -64,26 +63,34 @@ var DesignOperator = function DesignOperator(_ref) {
     } : null);
   });
   var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
-    var id = _ref2.id;
-    context.$publisher(context.topics.COMPONENT_DELETE, {
-      id: id
+    var id = _ref2.id,
+      parentId = _ref2.parentId;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
+    (0, _dataProcess.deleteById)(cloneData, id);
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_DELETE, {
+        id: id,
+        parentId: parentId,
+        pageData: newData
+      });
     });
   });
   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)(context.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
-        });
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: _id
+          id: _id,
+          pageData: cloneData
         });
       }
     }).watch();
-    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
-    (0, _ContextProvider.addNode)(targetId, _id, json);
+    context._setPageData(cloneData);
   });
   var acticeProps = (0, _ahooks.useCreation)(function () {
     if (!operatorId.selector) return null;
@@ -114,7 +121,7 @@ var DesignOperator = function DesignOperator(_ref) {
   }, [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 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({
@@ -144,7 +151,7 @@ var DesignOperator = function DesignOperator(_ref) {
   });
   (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 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);
@@ -168,14 +175,14 @@ var DesignOperator = function DesignOperator(_ref) {
             id: compId
           });
         }).watch();
-        addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+        addComponent(data, _constants.CELL_KEY.PAGE_ROOT);
         return;
       }
       if (!lastSelectorId.current) {
         _antd.message.info('请在右侧画布选择节点');
         return;
       }
-      if (!_constants.CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
+      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
         _antd.message.info('该节点不支持添加子节点');
         return;
       }
@@ -190,10 +197,8 @@ var DesignOperator = function DesignOperator(_ref) {
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
       if (payload.id) {
-        var node = context.componentMap.get(payload.id).api.getSelfData();
         setOperatorId({
           selector: payload.id,
-          deletable: !node || node.props.buildIn !== true,
           detector: null
         });
       } else {
@@ -205,36 +210,25 @@ var DesignOperator = function DesignOperator(_ref) {
     var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
       var toggle = _ref6.toggle,
         id = _ref6.id;
-      if (toggle && id !== currentModal.current) {
+      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 if (!toggle) {
+      } 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;
-        }
+        var _modal2 = context.componentMap.get(id || currentModal.current);
+        _modal2.api.doClose();
+        currentModal.current = void 0;
       }
     }).watch();
-    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id;
-      if (lastSelectorId.current === id) {
-        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
-      }
-      (0, _ContextProvider.deleteNode)(id);
-    });
     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 () {
@@ -248,7 +242,7 @@ var DesignOperator = function DesignOperator(_ref) {
   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)
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
@@ -258,10 +252,10 @@ var DesignOperator = function DesignOperator(_ref) {
     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)
+    style: getOperatorStyle(target.current, getDomById(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 ? {
+    style: acticeProps.props.id === _constants.CELL_KEY.PAGE_ROOT ? {
       top: 0
     } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
       bottom: '-23px'
@@ -273,7 +267,7 @@ var DesignOperator = function DesignOperator(_ref) {
     placement: "bottomLeft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "instance-node-selector"
-  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/_react.default.createElement("div", {
+  }, acticeProps.props.name)), /*#__PURE__*/_react.default.createElement("div", {
     onClick: function onClick() {
       return handleDelete(acticeProps.props);
     }