@luck-design-biz/luckda 1.0.0-alpha → 1.0.1-10

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

@@ -20,10 +20,10 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var LZString = _interopRequireWildcard(require("lz-string"));
 var _constants = require("../../constants");
-/**
- * 数据压缩
- * @param {JSON} data
- * @returns 加密后的字符串
+/**
+ * 数据压缩
+ * @param {JSON} data
+ * @returns 加密后的字符串
  */
 function compress(data) {
   // 将对象转换为JSON字符串
@@ -32,10 +32,10 @@ function compress(data) {
   return LZString.compressToBase64(jsonString);
 }
 
-/**
- * 数据解压
- * @param {string} compressedData
- * @returns {json}
+/**
+ * 数据解压
+ * @param {string} compressedData
+ * @returns {json}
  */
 function decompress(compressedData) {
   // 使用LZ-String解压数据
@@ -44,13 +44,13 @@ function decompress(compressedData) {
   return JSON.parse(jsonString);
 }
 
-/**
- * 查找指定ID的节点及其父节点。
- *
- * @param {string} id - 要查找的节点ID。
- * @param {Object} current - 当前遍历的JSON对象。
- * @param {Object|null} parent - 当前节点的父节点。
- * @returns {{node: Object|null, parent: Object|null}} 查找结果，包含节点和其父节点。
+/**
+ * 查找指定ID的节点及其父节点。
+ *
+ * @param {string} id - 要查找的节点ID。
+ * @param {Object} current - 当前遍历的JSON对象。
+ * @param {Object|null} parent - 当前节点的父节点。
+ * @returns {{node: Object|null, parent: Object|null}} 查找结果，包含节点和其父节点。
  */
 function findNodeAndParent(id, current) {
   var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -84,13 +84,13 @@ function findNodeAndParent(id, current) {
   };
 }
 
-/**
- * 对指定的JSON结构进行节点的添加、修改或删除操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的添加、修改或删除操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string|null} path - 要操作的节点路径，使用'/'分隔。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function process(json, path, id, data) {
   if (!json) {
@@ -156,25 +156,25 @@ function process(json, path, id, data) {
   }
 }
 
-/**
- * 对指定的JSON结构进行节点的添加操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} parentId - 父节点的唯一标识符。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的添加操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} parentId - 父节点的唯一标识符。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function add(json, parentId, id, data) {
   process(json, getPathById(json, parentId), id, data);
 }
 
-/**
- * 移动指定的节点到另一个节点的指定位置。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} sid - 被移动的节点id
- * @param {string} tid - 目标节点id
- * @param {string} action - 'left': 往节点前面插入，'right'：往节点后面插，'inside'：往节点子节点插
+/**
+ * 移动指定的节点到另一个节点的指定位置。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} sid - 被移动的节点id
+ * @param {string} tid - 目标节点id
+ * @param {string} action - 'left': 往节点前面插入，'right'：往节点后面插，'inside'：往节点子节点插
  */
 function move(json, sid, tid, action) {
   // 验证节点存在性
@@ -230,34 +230,34 @@ function move(json, sid, tid, action) {
   }
 }
 
-/**
- * 对指定的JSON结构进行节点的修改操作。
- *
- * @param {Object} json - 要操作的JSON对象。
- * @param {string} id - 操作节点的唯一标识符。
- * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
+/**
+ * 对指定的JSON结构进行节点的修改操作。
+ *
+ * @param {Object} json - 要操作的JSON对象。
+ * @param {string} id - 操作节点的唯一标识符。
+ * @param {Object|null} data - 要添加或修改的数据。如果为null，表示删除操作。
  */
 function modifyById(json, id, data) {
   process(json, null, id, data);
 }
 
-/**
- * 删除指定id的节点。
- *
- * @param {Object} json - JSON对象。
- * @param {string} id - 要删除的节点ID。
+/**
+ * 删除指定id的节点。
+ *
+ * @param {Object} json - JSON对象。
+ * @param {string} id - 要删除的节点ID。
  */
 function deleteById(json, id) {
   process(json, null, id);
 }
 
-/**
- * 根据ID在给定的JSON结构中查找节点的路径。
- *
- * @param {Object} json - 要搜索的JSON对象。
- * @param {string} id - 要查找的节点ID。
- * @param {string} currentPath - 当前递归到的路径，用于构建返回的路径字符串。
- * @returns {string|null} 如果找到节点，返回节点的路径；否则返回null。
+/**
+ * 根据ID在给定的JSON结构中查找节点的路径。
+ *
+ * @param {Object} json - 要搜索的JSON对象。
+ * @param {string} id - 要查找的节点ID。
+ * @param {string} currentPath - 当前递归到的路径，用于构建返回的路径字符串。
+ * @returns {string|null} 如果找到节点，返回节点的路径；否则返回null。
  */
 function getPathById(json, id) {
   var currentPath = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -277,28 +277,28 @@ 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属性的数组
+/**
+ * 在给定的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属性的数组
  */
 function getPathNodesById(data, targetId) {
   // 初始化结果数组

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.executeCode = executeCode;
 exports.extractKeywords = extractKeywords;
+exports.findFirstLeafNode = findFirstLeafNode;
 exports.getCtx = getCtx;
 exports.getFuncBody = getFuncBody;
 exports.getLDMetaAttr = getLDMetaAttr;
@@ -139,8 +140,13 @@ function executeCode(context, code, argsName) {
     throw new Error('executeCode参数不匹配');
   }
   var ctx = getCtx(context);
-  var func = (0, _construct2.default)(Function, (0, _toConsumableArray2.default)(argsName || []).concat(['ctx', 'window', "\"use strict\"; ".concat(getFuncBody(code))]));
-  return func.apply(void 0, args.concat([ctx, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, window.proxy), window)]));
+  try {
+    var func = (0, _construct2.default)(Function, (0, _toConsumableArray2.default)(argsName || []).concat(['ctx', 'window', "\"use strict\"; ".concat(getFuncBody(code))]));
+    return func.apply(void 0, args.concat([ctx, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, window.proxy), window)]));
+  } catch (e) {
+    console.error("".concat(code, "\u65E0\u6CD5\u88AB\u6267\u884C"), e);
+    return null;
+  }
 }
 function parseCSS(cssString) {
   // 创建一个空对象来存储解析后的样式
@@ -255,4 +261,25 @@ function loadScript(path) {
     ref: script,
     status: script.getAttribute('data-status') || 'ready'
   };
+}
+function findFirstLeafNode(node) {
+  if (!node.children || node.children.length === 0) {
+    return node;
+  }
+  var _iterator2 = (0, _createForOfIteratorHelper2.default)(node.children),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+      var leaf = findFirstLeafNode(child);
+      if (leaf) {
+        return leaf;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return null;
 }

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

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = initialize;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
+var _usePageDataStore = _interopRequireDefault(require("../provider/ContextProvider/usePageDataStore"));
+var _usePageVar = require("../provider/ContextProvider/usePageVar");
+var _helper = require("./helper");
+var parseVar = function parseVar(ctx, input) {
+  if ((0, _lodash.isNil)(input)) {
+    return null;
+  }
+  try {
+    return (0, _helper.executeCode)(ctx, "function() {return ".concat(input, "}"));
+  } catch (err) {
+    return input;
+  }
+};
+var Task = /*#__PURE__*/function () {
+  function Task(ctx, props) {
+    (0, _classCallCheck2.default)(this, Task);
+    this.ctx = ctx;
+    this.name = props.name;
+    this.props = props;
+  }
+  (0, _createClass2.default)(Task, [{
+    key: "run",
+    value: function () {
+      var _run = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_params, _data) {
+        var _this = this;
+        var _this$props, willFetch, didFetch, onError, _this$props$data, url, params, body, method, defaultValue, vars, config;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = this.props, willFetch = _this$props.willFetch, didFetch = _this$props.didFetch, onError = _this$props.onError;
+              _this$props$data = this.props.data, url = _this$props$data.url, params = _this$props$data.params, body = _this$props$data.body, method = _this$props$data.method, defaultValue = _this$props$data.defaultValue;
+              vars = {
+                params: (0, _lodash.isNil)(params) || params === '' ? {} : parseVar(this.ctx, params),
+                data: (0, _lodash.isNil)(body) || body === '' ? {} : parseVar(this.ctx, body)
+              };
+              config = {
+                headers: {}
+              };
+              if (willFetch) {
+                (0, _helper.executeCode)(this.ctx, willFetch, ['vars', 'config'], vars, config);
+              }
+              return _context.abrupt("return", (0, _utils.request)(parseVar(this.ctx, url), (0, _objectSpread2.default)({
+                params: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, vars.params), _params),
+                data: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, vars.data), _data),
+                method: parseVar(this.ctx, method)
+              }, config)).then(function (res) {
+                if (res.code === 1) {
+                  var list = res.list,
+                    detail = res.detail;
+                  var content;
+                  if (list.length === 1) {
+                    content = detail[list[0]];
+                  } else {
+                    content = list.map(function (_id) {
+                      return detail[_id];
+                    });
+                  }
+                  if (didFetch) {
+                    return (0, _helper.executeCode)(_this.ctx, didFetch, ['content', 'origin'], content, res);
+                  }
+                  return content;
+                } else if (onError) {
+                  (0, _helper.executeCode)(_this.ctx, onError, ['error'], res);
+                }
+                if (defaultValue) {
+                  return parseVar(_this.ctx, defaultValue);
+                }
+              }));
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function run(_x, _x2) {
+        return _run.apply(this, arguments);
+      }
+      return run;
+    }()
+  }, {
+    key: "load",
+    value: function () {
+      var _load = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(params, data) {
+        var _this2 = this;
+        var content;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.run(params, data);
+            case 2:
+              content = _context2.sent;
+              _usePageVar.useStateStore.setState(function (store) {
+                store.state[_this2.name] = content;
+              });
+              return _context2.abrupt("return", content);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function load(_x3, _x4) {
+        return _load.apply(this, arguments);
+      }
+      return load;
+    }()
+  }]);
+  return Task;
+}();
+var wrapPromise = function wrapPromise(promise) {
+  var cache = {
+    status: 'pending',
+    data: null
+  };
+  var suspender = promise.then(function (r) {
+    cache.status = 'fulfilled';
+    cache.data = r;
+  }, function (e) {
+    cache.status = 'rejected';
+    cache.data = e;
+  });
+  return {
+    read: function read() {
+      if (cache.status === 'pending') {
+        throw suspender;
+      } else if (cache.status === 'rejected') {
+        throw cache.data;
+      } else if (cache.status === 'fulfilled') {
+        return cache.data;
+      }
+    }
+  };
+};
+function initialize(ctx) {
+  var pageVars = _usePageDataStore.default.getState().pageData.props.vars;
+  if ((0, _lodash.isNil)(pageVars)) return null;
+  var remoteApis = new Map();
+  var _reduce = (0, _lodash.reduce)(pageVars, function (ret, val) {
+      if (val.type === 'var') {
+        ret[0][val.name] = parseVar(ctx, val.data);
+      } else if (val.type === 'api') {
+        var _val$data = val.data,
+          auto = _val$data.auto,
+          taskType = _val$data.taskType;
+        var task = new Task(ctx, val);
+        remoteApis.set(val.name, task);
+        if (!auto) return ret;
+        if (taskType === 'serial') {
+          ret.push(task);
+        } else if (taskType === 'parallel') {
+          var lastIndex = ret.length - 1;
+          if (lastIndex > 0 && (0, _lodash.isArray)(ret[lastIndex])) {
+            ret[lastIndex].push(task);
+          } else {
+            ret.push([task]);
+          }
+        }
+      }
+      return ret;
+    }, [{}]),
+    _reduce2 = (0, _toArray2.default)(_reduce),
+    variables = _reduce2[0],
+    autoTasks = _reduce2.slice(1);
+  _usePageVar.useStateStore.getState().initialize(variables);
+  ctx._initRemoteApiMap(remoteApis);
+  function run() {
+    return _run2.apply(this, arguments);
+  }
+  function _run2() {
+    _run2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+      var result, _loop, i;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            result = {};
+            _loop = /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _loop(i) {
+              var contents, _loop2, j, content;
+              return (0, _regeneratorRuntime2.default)().wrap(function _loop$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!(0, _lodash.isArray)(autoTasks[i])) {
+                      _context4.next = 13;
+                      break;
+                    }
+                    _context4.next = 3;
+                    return Promise.all(autoTasks[i].map(function (t) {
+                      return t.run();
+                    }));
+                  case 3:
+                    contents = _context4.sent;
+                    _loop2 = /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _loop2(j) {
+                      return (0, _regeneratorRuntime2.default)().wrap(function _loop2$(_context3) {
+                        while (1) switch (_context3.prev = _context3.next) {
+                          case 0:
+                            _usePageVar.useStateStore.setState(function (store) {
+                              store.state[autoTasks[i][j].name] = contents[j];
+                            });
+                          case 1:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }, _loop2);
+                    });
+                    _context4.t0 = (0, _regeneratorRuntime2.default)().keys(autoTasks[i]);
+                  case 6:
+                    if ((_context4.t1 = _context4.t0()).done) {
+                      _context4.next = 11;
+                      break;
+                    }
+                    j = _context4.t1.value;
+                    return _context4.delegateYield(_loop2(j), "t2", 9);
+                  case 9:
+                    _context4.next = 6;
+                    break;
+                  case 11:
+                    _context4.next = 17;
+                    break;
+                  case 13:
+                    _context4.next = 15;
+                    return autoTasks[i].run();
+                  case 15:
+                    content = _context4.sent;
+                    _usePageVar.useStateStore.setState(function (store) {
+                      store.state[autoTasks[i].name] = content;
+                    });
+                  case 17:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _loop);
+            });
+            _context5.t0 = (0, _regeneratorRuntime2.default)().keys(autoTasks);
+          case 3:
+            if ((_context5.t1 = _context5.t0()).done) {
+              _context5.next = 8;
+              break;
+            }
+            i = _context5.t1.value;
+            return _context5.delegateYield(_loop(i), "t2", 6);
+          case 6:
+            _context5.next = 3;
+            break;
+          case 8:
+            return _context5.abrupt("return", result);
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee3);
+    }));
+    return _run2.apply(this, arguments);
+  }
+  return wrapPromise(run());
+}

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

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard3(require("react"));
 var _umi = require("umi");
 var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _ContextProvider = require("../provider/ContextProvider");
 var _constants = require("../../constants");
@@ -70,7 +71,18 @@ function useCanvasRender(data, deps) {
               return _loader.apply(this, arguments);
             }
             return loader;
-          }()
+          }(),
+          loading: function loading() {
+            return /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+              active: true,
+              title: {
+                width: '70%'
+              },
+              paragraph: {
+                rows: 7
+              }
+            });
+          }
         });
       }
       var renderable = true;

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
+var _ahooks = require("ahooks");
 var useCombinedRefs = function useCombinedRefs(forwardedRef) {
   var innerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  (0, _ahooks.useCreation)(function () {
     if (!forwardedRef) return;
     if (typeof forwardedRef === 'function') {
       forwardedRef(innerRef.current);

package/lib/lowcode/painter/Components.js

@@ -95,8 +95,8 @@ var CompItem = function CompItem(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("span", null, item.name)));
 };
 
-/**
- * 组件清单
+/**
+ * 组件清单
  */
 var Components = function Components(_ref3) {
   var _ref3$dataset = _ref3.dataset,

package/lib/lowcode/painter/Design.js

@@ -76,6 +76,7 @@ var Design = function Design() {
     locale: locale,
     onLangChange: handleLangChange
   }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "design-workspace",
     className: _design.default['lc-painter-design-workspace']
   }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
     canvas: simulatorRef

package/lib/lowcode/painter/DesignOperator.js

@@ -32,7 +32,7 @@ var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getElement, _getElement2;
+  var _getElement2;
   var canvas = _ref.canvas;
   var context = (0, _ContextProvider.useContext)();
   var size = (0, _ahooks.useSize)(canvas);
@@ -76,7 +76,9 @@ var DesignOperator = function DesignOperator(_ref) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
         });
-        handleSelect(_id);
+        setTimeout(function () {
+          handleSelect(_id);
+        });
       }
     }).watch();
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
@@ -117,10 +119,28 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
+  var activeDomPosition = (0, _ahooks.useCreation)(function () {
+    var _getElement;
+    if (!operatorId.selector && !operatorId.selectorTarget) return null;
+    var targetTop = (_getElement = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement === void 0 ? void 0 : _getElement.getBoundingClientRect().top;
+    var delat = targetTop - canvas.current.getBoundingClientRect().top;
+    return {
+      top: delat > 24 ? -24 : 0
+    };
+  }, [operatorId.selector, operatorId.selectorTarget]);
   var lastDetectorName = (0, _ahooks.useCreation)(function () {
     var _last;
     return operatorId.detector && (0, _lodash.isString)(operatorId.detector) ? (_last = (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
   }, [operatorId.detector]);
+  (0, _ahooks.useKeyPress)('backspace', function () {
+    if (operatorId.selector && operatorId.deletable) {
+      handleDelete({
+        id: operatorId.selector
+      });
+    }
+  }, {
+    target: canvas
+  });
   (0, _ahooks.useEventListener)('mousemove', function (event) {
     var elem = event.target;
     var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
@@ -289,7 +309,7 @@ var DesignOperator = function DesignOperator(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
-      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
+      top: ((_getElement2 = getElement(operatorId.detector)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? 0 : '-23px'
     }
   }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-selector",
@@ -298,13 +318,7 @@ var DesignOperator = function DesignOperator(_ref) {
     style: getOperatorStyle(canvas.current, getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
   }, 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
-    } : ((_getElement2 = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
-      bottom: '-23px'
-    } : {
-      top: '-23px'
-    }
+    style: activeDomPosition
   }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     overlay: acticeProps.menu,
     placement: "bottomLeft"