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

package/lib/lowcode/engine/provider/ContextProvider.js

@@ -1,38 +1,34 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLDContext = exports.default = exports.Context = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _umi = require("umi");
 var _ahooks = require("ahooks");
 var _EventBusProvider = require("./EventBusProvider");
 var _usePromiseState3 = _interopRequireDefault(require("../tools/usePromiseState"));
+var _action = require("../../../helper/action");
 var topics = _interopRequireWildcard(require("../../constants/event-topics"));
+var _dataProcess = require("../tools/dataProcess");
+var _apiUrl = require("../../constants/api-url");
+var _excluded = ["source"];
 var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)(null);
 var useLDContext = exports.useLDContext = function useLDContext() {
   return (0, _react.useContext)(Context);
 };
-var PRIVATE_KEYS = ['pageCode', 'moduleCode', 'componentList', 'componentMap'];
+var PRIVATE_KEYS = ['pageinfo', 'componentList', 'componentMap'];
 var _default = exports.default = function _default(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    code = _ref.code;
   var eventBus = (0, _EventBusProvider.useLDEventBus)();
 
-  /**
-   * 页面码
-   */
-  var _pageCode = (0, _react.useRef)(void 0);
-
-  /**
-   * 模块码
-   */
-  var _moduleCode = (0, _react.useRef)(void 0);
-
   /**
    * 页面数据
    */
@@ -41,16 +37,18 @@ var _default = exports.default = function _default(_ref) {
     pageData = _usePromiseState2[0],
     _setPageData = _usePromiseState2[1];
 
+  /**
+   * 页面信息
+   */
+  var _pageinfo = (0, _react.useRef)(null);
+
   /**
    * 组件列表
    */
   var _componentList = (0, _react.useRef)([]);
   var _privateGetter = (0, _react.useRef)({
-    pageCode: function pageCode() {
-      return _pageCode.current;
-    },
-    moduleCode: function moduleCode() {
-      return _moduleCode.current;
+    pageinfo: function pageinfo() {
+      return _pageinfo.current;
     },
     componentList: function componentList() {
       return _componentList.current;
@@ -115,23 +113,37 @@ var _default = exports.default = function _default(_ref) {
    */
   var getDataSetById = (0, _ahooks.useMemoizedFn)(function (datasetId) {});
 
-  /**
-   * 执行actionKey对应的行为
-   * actionKey:string 行为key
-   * return:Promise
-   */
-  var doAction = (0, _ahooks.useMemoizedFn)(function (actionKey) {});
-
   /**
    * 获取url参数
    * return:object
    */
   var getUrlParams = (0, _ahooks.useMemoizedFn)(function () {});
+  var _useRequest = (0, _ahooks.useRequest)(_apiUrl.fetchPageData, {
+      manual: true
+    }),
+    loading = _useRequest.loading,
+    runFetchPageData = _useRequest.runAsync;
+  (0, _react.useEffect)(function () {
+    runFetchPageData(code).then(function (_ref4) {
+      var code = _ref4.code,
+        data = _ref4.data,
+        list = _ref4.list,
+        detail = _ref4.detail;
+      if (code === 1) {
+        var _detail$list$ = detail[list[0]],
+          source = _detail$list$.source,
+          info = (0, _objectWithoutProperties2.default)(_detail$list$, _excluded);
+        _pageinfo.current = (0, _objectSpread2.default)({
+          relationship: data
+        }, info);
+        _setPageData((0, _dataProcess.decompress)(source));
+      }
+    });
+  }, [code]);
   return /*#__PURE__*/_react.default.createElement(Context.Provider, {
     value: new Proxy((0, _objectSpread2.default)({
-      _pageCode: _pageCode,
-      _moduleCode: _moduleCode,
       _setPageData: _setPageData,
+      loading: loading,
       pageData: pageData,
       history: _umi.history,
       topics: topics,
@@ -142,7 +154,7 @@ var _default = exports.default = function _default(_ref) {
       getElementPathById: getElementPathById,
       getModule: getModule,
       getDataSetById: getDataSetById,
-      doAction: doAction,
+      doAction: _action.doAction,
       getUrlParams: getUrlParams
     }, eventBus), {
       get: function get(target, property, receiver) {

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

@@ -18,6 +18,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var LZString = _interopRequireWildcard(require("lz-string"));
+var _constants = require("../../constants");
 /**
  * 数据压缩
  * @param {JSON} data
@@ -27,7 +28,7 @@ function compress(data) {
   // 将对象转换为JSON字符串
   var jsonString = JSON.stringify(data);
   // 使用LZ-String压缩JSON字符串
-  return LZString.compressToUTF16(jsonString);
+  return LZString.compressToBase64(jsonString);
 }
 
 /**
@@ -37,7 +38,7 @@ function compress(data) {
  */
 function decompress(compressedData) {
   // 使用LZ-String解压数据
-  var jsonString = LZString.decompressFromUTF16(compressedData);
+  var jsonString = LZString.decompressFromBase64(compressedData);
   // 将JSON字符串转换回对象
   return JSON.parse(jsonString);
 }
@@ -119,7 +120,7 @@ function process(json, path, id, data) {
     current[id] = {
       props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
         id: id,
-        parentId: current.id
+        parentId: current.props.id
       })
     };
   } else if (!path && id && data) {
@@ -194,6 +195,7 @@ function deleteById(json, id) {
 function getPathById(json, id) {
   var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   for (var key in json) {
+    if (id === _constants.CELL_KEY.PAGE_ROOT) return '/';
     var newPath = currentPath ? "".concat(currentPath, "/").concat(key) : key;
     if (json[key].props && json[key].props.id === id) {
       return newPath;

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

@@ -5,7 +5,77 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isPromise = isPromise;
+exports.listReducer = listReducer;
+exports.omitBadProps = omitBadProps;
+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");
 function isPromise(value) {
   return !!value && (0, _typeof2.default)(value) === 'object' && typeof value.then === 'function';
+}
+function omitBadProps(props) {
+  var rubbish = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return (0, _lodash.omit)(props, ['component', 'name', 'desc', 'icon', 'group', 'groupName', 'order'].concat((0, _toConsumableArray2.default)(rubbish)));
+}
+function listReducer(state, action) {
+  switch (action.type) {
+    case 'add':
+      {
+        var _action$callback;
+        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 '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 ? (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 '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 'new':
+      {
+        var _action$callback5;
+        var _newState4 = (0, _toConsumableArray2.default)(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 = (0, _toConsumableArray2.default)(newItems);
+        return _newState5;
+      }
+    default:
+      throw new Error();
+  }
 }

package/lib/lowcode/index.js

@@ -16,5 +16,9 @@ Object.defineProperty(exports, "View", {
     return _view.default;
   }
 });
+exports.default = launcher;
 var _painter = _interopRequireDefault(require("./painter"));
-var _view = _interopRequireDefault(require("./view"));
+var _view = _interopRequireDefault(require("./view"));
+// export * as dataProcess  from './engine/tools/dataProcess';
+
+function launcher() {}

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']
   })))));
 };