@luck-design-biz/luckda 0.0.25-8 → 0.0.25-9

package/es/lowcode/engine/meta/fieldyear.props.default.json

@@ -0,0 +1,12 @@
+{
+  "component": "FieldYear",
+  "name": "年份选择",
+  "group": "field",
+  "desc": "年份选择表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "advance": {
+    "events": {}
+  }
+}

package/es/lowcode/engine/meta/fieldyear.props.json

@@ -0,0 +1,20 @@
+{
+  "component": "FieldYear",
+  "name": "年份选择",
+  "group": "field",
+  "desc": "年份选择表单项",
+  "icon": "icon-fieldstring",
+  "groupName": "表单项",
+  "order": 1,
+  "props": [],
+  "advance": {
+    "events": [
+      {
+        "key": "onChange",
+        "name": "数据变化事件",
+        "desc": "时间发生变化的回调，用户选择时间时触发",
+        "func": "function onChange(date, dateString) {\n\t\n}"
+      }
+    ]
+  }
+}

package/es/lowcode/engine/meta/form.props.json

@@ -110,14 +110,14 @@
           "name": "数据集",
           "desc": "选择系统中的可用树形数据集",
           "type": "_DataSetSelector",
+          "component": "form",
           "next": {
             "name": "字段配置",
             "props": [
               {
                 "key": "fields",
                 "name": "#字段配置器",
-                "type": "_FieldsSetting",
-                "component": "form"
+                "type": "_FieldsSetting"
               }
             ]
           }
@@ -648,7 +648,7 @@
         "key": "onPagePublicResourceChanged",
         "name": "页面共享资源变化后",
         "desc": "当页面共享资源发生变化后（pagePublicResourceChanged），执行方法",
-        "func": "function onPagePublicResourceChanged(resource, instance) {\n\t\n}"
+        "func": "function onPagePublicResourceChanged(resource, prevResource, instance) {\n\t\n}"
       }
     ]
   }

package/es/lowcode/engine/meta/imex.props.default.json

@@ -10,7 +10,7 @@
   "title": "导入｜导出",
   "impexpSetting": {
     "customType": false,
-    "customParam": false,
+    "customParam": null,
     "type": "export"
   },
   "size": "middle",

package/es/lowcode/engine/meta/imex.props.json

@@ -25,7 +25,7 @@
       "type": "_ImpExpAlone",
       "default": {
         "customType": false,
-        "customParam": false,
+        "customParam": null,
         "type": "export"
       }
     },

package/es/lowcode/engine/meta/table.props.json

@@ -17,14 +17,14 @@
       "key": "dataset",
       "name": "数据集",
       "type": "_DataSetSelector",
+      "component": "table",
       "next": {
         "name": "字段配置",
         "props": [
           {
             "key": "fields",
             "name": "#字段配置器",
-            "type": "_FieldsSetting",
-            "component": "table"
+            "type": "_FieldsSetting"
           }
         ]
       }
@@ -425,7 +425,7 @@
         "key": "onPagePublicResourceChanged",
         "name": "页面共享资源变化后",
         "desc": "当页面共享资源发生变化后（pagePublicResourceChanged），执行方法",
-        "func": "function onPagePublicResourceChanged(resource, instance) {\n\t\n}"
+        "func": "function onPagePublicResourceChanged(resource, prevResource, instance) {\n\t\n}"
       },
       {
         "key": "afterInit",

package/es/lowcode/engine/meta/tree.props.json

@@ -18,14 +18,14 @@
       "name": "数据集",
       "desc": "选择系统中的可用树形数据集",
       "type": "_DataSetSelector",
+      "component": "tree",
       "next": {
         "name": "字段配置",
         "props": [
           {
             "key": "fields",
             "name": "#字段配置器",
-            "type": "_FieldsSetting",
-            "component": "tree"
+            "type": "_FieldsSetting"
           }
         ]
       }
@@ -230,6 +230,7 @@
             "default": {
               "todoList": []
             },
+            "defaultCode": "function onActionClick(data) {\n\n}",
             "suppressDisplay": true,
             "suppressMax": true,
             "suppressMore": true,
@@ -353,6 +354,12 @@
         "name": "拖拽事件",
         "desc": "节点拖拽事件",
         "func": "function onDrop(info, dragInfo) {\n\t\n}"
+      },
+      {
+        "key": "onPagePublicResourceChanged",
+        "name": "页面共享资源变化后",
+        "desc": "当页面共享资源发生变化后（pagePublicResourceChanged），执行方法",
+        "func": "function onPagePublicResourceChanged(resource, prevResource, instance) {\n\t\n}"
       }
     ]
   }

package/es/lowcode/engine/provider/ContextProvider/index.js

@@ -112,6 +112,7 @@ export default (function (_ref) {
     callBehavior: callBehavior,
     topics: topics,
     PRIMARY_KEY: window.appConfig.constraintKeys.PRIMARY,
+    PARENT_KEY: window.appConfig.constraintKeys.PARENT,
     getElementById: getElementById,
     /**
      * @method

package/es/lowcode/engine/provider/RemoteSourceProvider.js

@@ -1,10 +1,8 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["source"];
 import React, { createContext, useRef } from 'react';
 import { useRequest, useSetState, useAsyncEffect, useMemoizedFn, useCookieState, useCreation, useUnmount } from 'ahooks';
 import { LuckDaContext } from "../../../components/Builder";
@@ -12,7 +10,8 @@ import { doAction as doActionUtils } from "../../../helper/action";
 import usePageDataStore from "../tools/usePageDataStore";
 import { decompress } from "../tools/dataProcess";
 import { fetchPageData, fetchDesignModlueData, fetchPreviewModlueData, fetchModlueData, fetchAllDataset, fetchAllSerials, fetchAllBehaviorEx } from "../../constants/api-url";
-import { RUNTIME, COOKIE_RUNTIME_KEY, DATA_MODEL_CODE_KEY } from "../../constants";
+import { RUNTIME, COOKIE_RUNTIME_KEY } from "../../constants";
+import { setLDMetaAttrs } from "../tools/helper";
 export var RemoteSourceContext = /*#__PURE__*/createContext(null);
 export default (function (_ref) {
   var children = _ref.children,
@@ -118,8 +117,8 @@ export default (function (_ref) {
           setRemoteSource({
             impTypeList: data.map(function (item) {
               return {
-                key: item.uid,
-                value: item.uid,
+                key: item.code,
+                value: item.code,
                 label: item.name
               };
             })
@@ -137,8 +136,8 @@ export default (function (_ref) {
           setRemoteSource({
             expTypeList: data.map(function (item) {
               return {
-                key: item.uid,
-                value: item.uid,
+                key: item.code,
+                value: item.code,
                 label: item.name
               };
             })
@@ -148,7 +147,7 @@ export default (function (_ref) {
     }),
     runFetchAllBehaviorExport = _useRequest6.run;
   useAsyncEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var fetchPageDataRes, data, list, detail, _detail$list$, source, info;
+    var fetchPageDataRes, data, list, detail, source;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -159,12 +158,12 @@ export default (function (_ref) {
         case 2:
           fetchPageDataRes = _context.sent;
           if (!(fetchPageDataRes.code === 1)) {
-            _context.next = 15;
+            _context.next = 14;
             break;
           }
           data = fetchPageDataRes.data, list = fetchPageDataRes.list, detail = fetchPageDataRes.detail;
-          _detail$list$ = detail[list[0]], source = _detail$list$.source, info = _objectWithoutProperties(_detail$list$, _excluded);
-          window[DATA_MODEL_CODE_KEY] = data.dataModelKey;
+          source = detail[list[0]].source;
+          setLDMetaAttrs(data);
           _context.next = 9;
           return runFetchModlueData(data.dataModelKey, {
             moduleCode: data.moduleCode
@@ -184,13 +183,8 @@ export default (function (_ref) {
           runFetchAllSerials({
             uid: data.moduleId
           });
-          setRemoteSource({
-            pageinfo: _objectSpread({
-              relationship: data
-            }, info)
-          });
           !debug && initialize(decompress(source));
-        case 15:
+        case 14:
         case "end":
           return _context.stop();
       }

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

@@ -2,8 +2,9 @@ import _construct from "@babel/runtime/helpers/esm/construct";
 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, omitBy, startsWith, isNil, isString, isArray } from 'lodash';
+import { omit, isNil, isString, isArray } from 'lodash';
 import postcss from 'postcss';
+import { META_TAG_NAME } from "../../constants";
 export function isPromise(value) {
   return !!value && _typeof(value) === 'object' && typeof value.then === 'function';
 }
@@ -147,4 +148,25 @@ export 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);
-}
+}
+export function setLDMetaAttrs(data) {
+  var meta = document.querySelector("meta[name=\"".concat(META_TAG_NAME, "\"]"));
+  if (!meta) {
+    meta = document.createElement('meta');
+  }
+  meta.name = META_TAG_NAME;
+  meta.content = new URLSearchParams(data).toString().replaceAll('&', ',');
+  document.head.appendChild(meta);
+}
+export function getLDMetaAttr(name) {
+  if (isNil(name)) return void 0;
+  var meta = document.querySelector("meta[name=\"".concat(META_TAG_NAME, "\"]"));
+  var params = new URLSearchParams(meta.content.replaceAll(',', '&'));
+  if (isArray(name)) {
+    return name.map(function (n) {
+      return params.get(n);
+    });
+  }
+  return params.get(name);
+}
+;

package/es/lowcode/painter/Design.js

@@ -70,15 +70,15 @@ var Design = function Design() {
     onLangChange: handleLangChange
   }), /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-workspace']
-  }, /*#__PURE__*/React.createElement(DesignOperator, {
-    target: simulatorRef
-  }), /*#__PURE__*/React.createElement(ConfigProvider, {
+  }, /*#__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,
     className: styles['lc-painter-design-simulator']
-  })))));
+  }, /*#__PURE__*/React.createElement(DesignOperator, {
+    canvas: simulatorRef
+  }))))));
 };
 export default Design;

package/es/lowcode/painter/DesignOperator.js

@@ -3,32 +3,32 @@ 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 { reverse } from 'lodash';
+import { reverse, isString, isNil } from 'lodash';
 import { suid } from '@luck-design-biz/base/utils';
 import { useContext, addNode, deleteNode } from "../engine/provider/ContextProvider";
-import { LC_BUILDIN_UNIT_KEY, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT, CONTAINER_UNITS } from "../constants";
+import { LC_BUILDIN_UNIT_KEY, LC_COMPONENT_UNIT_KEY, LC_COMPONENT_UNIT, LC_FORMITEM_UNIT, CONTAINER_UNITS } from "../constants";
 import styles from "./style/design.less";
 var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
-var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   if (!cellNode) return {};
-  var _page$getBoundingClie = page.getBoundingClientRect(),
-    pageLeft = _page$getBoundingClie.left,
-    pageTop = _page$getBoundingClie.top;
+  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+    pageLeft = _canvas$getBoundingCl.left,
+    pageTop = _canvas$getBoundingCl.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"),
+    top: "".concat(cellNode.offsetTop, "px"),
     width: "".concat(cellNode.offsetWidth, "px"),
     height: "".concat(cellNode.offsetHeight, "px")
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getDomById, _getDomById2;
-  var target = _ref.target;
+  var _getElement, _getElement2;
+  var canvas = _ref.canvas;
   var context = useContext();
-  var size = useSize(target);
+  var size = useSize(canvas);
   var _useState = useState(suid()),
     _useState2 = _slicedToArray(_useState, 2),
     positionKey = _useState2[0],
@@ -42,18 +42,18 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = useLatest(operatorId.selector);
   var currentModal = useRef(null);
-  var getDomById = useMemoizedFn(function (id) {
+  var getElement = useMemoizedFn(function (_target) {
     var _context$componentMap;
-    return (_context$componentMap = context.componentMap.get(id)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom();
+    return isString(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
   });
-  var handleSelect = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+  var handleSelect = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
+      target: _target
     } : null);
   });
-  var handleHover = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
+  var handleHover = useMemoizedFn(function (_target) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
+      target: _target
     } : null);
   });
   var handleDelete = useMemoizedFn(function (_ref2) {
@@ -69,9 +69,7 @@ var DesignOperator = function DesignOperator(_ref) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
         });
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
-          id: _id
-        });
+        handleSelect(_id);
       }
     }).watch();
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
@@ -80,7 +78,17 @@ var DesignOperator = function DesignOperator(_ref) {
   });
   var acticeProps = useCreation(function () {
     if (!operatorId.selector) return null;
-    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    var _id = isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.ancestorId;
+    var levelNodes = context.componentMap.get(_id).api.getLevelNodes();
+    if (operatorId.selectorTarget) {
+      var _operatorId$selectorT = operatorId.selectorTarget,
+        id = _operatorId$selectorT.id,
+        label = _operatorId$selectorT.label;
+      levelNodes.push({
+        id: id,
+        name: label
+      });
+    }
     return {
       props: last(levelNodes),
       menu: /*#__PURE__*/React.createElement("div", {
@@ -102,50 +110,70 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
-  var lastDetectorNode = useCreation(function () {
-    return operatorId.detector ? last(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  var lastDetectorName = useCreation(function () {
+    var _last;
+    return operatorId.detector && isString(operatorId.detector) ? (_last = last(context.componentMap.get(operatorId.detector).api.getLevelNodes())) === null || _last === void 0 ? void 0 : _last.name : void 0;
   }, [operatorId.detector]);
   useEventListener('mousemove', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      handleHover(targetFormItem);
+      return;
+    }
     var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
-      setOperatorId({
-        detector: targetCellId
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: targetCellId
-      });
+      handleHover(targetCellId);
     } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   useEventListener('mouseleave', function () {
     if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   useEventListener('click', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      var _fieldName = targetFormItem.getAttribute('data-__field');
+      var _fieldLabel = targetFormItem.getAttribute('data-__label');
+      var _masterId = targetFormItem.getAttribute('data-__master');
+      var _ancestorId = targetFormItem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]")).getAttribute('id');
+      var _ancestor = context.componentMap.get(_ancestorId);
+      var ancestorData = _ancestor.api.getSelfData();
+      var blockIndex = ancestorData.props.blocks.findIndex(function (b) {
+        return b.id === _masterId;
+      });
+      var fieldIndex = ancestorData.props.blocks[blockIndex].fields.findIndex(function (f) {
+        return f.field === _fieldName;
+      });
+      var _target = {
+        element: targetFormItem,
+        id: "".concat(_ancestorId, ".").concat(_masterId, ".").concat(_fieldName),
+        field: _fieldName,
+        label: _fieldLabel,
+        masterId: _masterId,
+        ancestorId: _ancestorId,
+        keyPath: "blocks[".concat(blockIndex, "].fields[").concat(fieldIndex, "]")
+      };
+      handleHover();
+      handleSelect(_target);
+      return;
+    }
     var targetCell = elem.closest("[".concat(LC_COMPONENT_UNIT_KEY, "=\"").concat(LC_COMPONENT_UNIT, "\"]"));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (!targetCellId || targetCellId === operatorId.selector) return;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: targetCell.id
-    });
+    handleHover();
+    handleSelect(targetCell.id);
   }, {
-    target: target
+    target: canvas
   });
   useEffect(function () {
     var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
@@ -157,9 +185,7 @@ var DesignOperator = function DesignOperator(_ref) {
             toggle: true,
             id: compId
           });
-          context.$publisher(context.topics.COMPONENT_ACTIVE, {
-            id: compId
-          });
+          handleSelect(compId);
         }).watch();
         addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
@@ -175,23 +201,34 @@ var DesignOperator = function DesignOperator(_ref) {
       addComponent(data, lastSelectorId.current);
     }).watch();
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) setOperatorId({
-        detector: payload.id
+      if (payload.target) setOperatorId({
+        detector: payload.target
       });else setOperatorId({
         detector: null
       });
     }).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
-        });
+      if (payload.target) {
+        if (isString(payload.target)) {
+          var node = context.componentMap.get(payload.target).api.getSelfData();
+          setOperatorId({
+            selector: payload.target,
+            selectorTarget: null,
+            deletable: !node || node.props.buildIn !== true,
+            detector: null
+          });
+        } else {
+          setOperatorId({
+            selector: payload.target.id,
+            selectorTarget: payload.target,
+            deletable: false,
+            detector: null
+          });
+        }
       } else {
         setOperatorId({
-          selector: null
+          selector: null,
+          selectorTarget: null
         });
       }
     }).watch();
@@ -199,14 +236,14 @@ var DesignOperator = function DesignOperator(_ref) {
       var toggle = _ref6.toggle,
         id = _ref6.id;
       if (toggle && id !== currentModal.current) {
-        target.current.style.setProperty('overflow', 'hidden');
+        canvas.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) {
-        target.current.style.removeProperty('overflow');
+        canvas.current.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);
@@ -218,7 +255,7 @@ var DesignOperator = function DesignOperator(_ref) {
     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);
+        handleSelect();
       }
       deleteNode(id);
     });
@@ -241,22 +278,22 @@ var DesignOperator = function DesignOperator(_ref) {
   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), 'detector', operatorId.detector)
+    style: getOperatorStyle(canvas.current, getElement(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'
+      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
     }
-  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+  }, lastDetectorName ? "".concat(lastDetectorName, "(").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), 'selector', operatorId.selector)
+    style: getOperatorStyle(canvas.current, getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
   }, acticeProps && /*#__PURE__*/React.createElement("div", {
     className: styles['lc-borders-actions'],
     style: acticeProps.props.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
       top: 0
-    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+    } : ((_getElement2 = getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
       bottom: '-23px'
     } : {
       top: '-23px'