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

package/es/lowcode/painter/Design.js

@@ -1,328 +1,51 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useRef, useEffect, useState } from 'react';
-import moment from 'moment';
-import classNames from 'classnames';
-import { last, initial } from 'lodash';
+import React, { useRef, useState } from 'react';
 import { RawIntlProvider, getLocale, getIntl, localeInfo } from 'umi';
-import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize } from 'ahooks';
-import { Select, Button, Icon, Divider, ConfigProvider, Dropdown, message } from 'luck-design/antd';
-import { cloneDeep, reverse } from 'lodash';
-import { suid } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useMemoizedFn } from 'ahooks';
+import moment from 'moment';
+import { ConfigProvider } from 'luck-design/antd';
+import DesignToolbar from "./DesignToolbar";
+import DesignOperator from "./DesignOperator";
 import Page from "../view/Page";
-import { add } from "../engine/tools/dataProcess";
-import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
 import styles from "./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 = useLDContext();
-  var selectorRef = useRef(null);
+  var _localeInfo$locale;
   var simulatorRef = useRef(null);
-  var size = useSize(simulatorRef);
-  var _useSetState = useSetState({
-      selector: null,
-      detector: null
+  var _useState = useState(function () {
+      return getLocale();
     }),
-    _useSetState2 = _slicedToArray(_useSetState, 2),
-    operatorId = _useSetState2[0],
-    setOperatorId = _useSetState2[1];
-  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    langList = _useState2[0],
-    setLangList = _useState2[1];
+    locale = _useState2[0],
+    setLocale = _useState2[1];
   var _useState3 = useState(function () {
-      return getLocale();
+      return getIntl(getLocale(), true);
     }),
     _useState4 = _slicedToArray(_useState3, 2),
-    locale = _useState4[0],
-    setLocale = _useState4[1];
-  var _useState5 = useState(function () {
-      return getIntl(locale, true);
-    }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    intl = _useState6[0],
-    setContainerIntl = _useState6[1];
-  var _useState7 = useState('pc'),
-    _useState8 = _slicedToArray(_useState7, 2),
-    activedTarget = _useState8[0],
-    setActivedTarget = _useState8[1];
-  useEventListener('mousemove', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
-      setOperatorId({
-        detector: targetCellId
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: targetCellId
-      });
-    } else if (!targetCell || targetCellId === operatorId.selector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
-  });
-  useEventListener('mouseleave', function () {
-    if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
-  });
-  useEventListener('click', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
-    if (!targetCellId || targetCellId === operatorId.selector) return;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: targetCell.id
-    });
-  }, {
-    target: simulatorRef
-  });
-  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]);
-  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);
-    };
-  }, []);
-  useEffect(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref2) {
-      var data = _ref2.data;
-      if (!operatorId.selector) {
-        message.info('请在右侧画布选择节点');
-        return;
-      }
-      if (context.componentMap.get(operatorId.selector).dom.getAttribute('name') !== 'box') {
-        message.info('该节点不支持添加子节点');
-        return;
-      }
-      var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-      var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
-      var cloneData = cloneDeep(context.pageData);
-      add(cloneData, 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 = useMemoizedFn(function (id) {
-    return context.componentMap.get(id).dom;
-  });
-  var handleLangChange = useMemoizedFn(function (locale) {
+    intl = _useState4[0],
+    setIntl = _useState4[1];
+  var handleLangChange = useMemoizedFn(function (_locale) {
     if (moment !== null && moment !== void 0 && moment.locale) {
-      var _localeInfo$locale;
-      moment.locale(((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.momentLocale) || 'en');
-    }
-    setLocale(locale);
-    setContainerIntl(getIntl(locale));
-  });
-  var acticeProps = useCreation(function () {
-    if (operatorId.selector) {
-      var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
-      return {
-        props: last(levelNodes),
-        menu: /*#__PURE__*/React.createElement("div", {
-          className: styles['next-overlay-wrapper'],
-          onMouseLeave: function onMouseLeave() {
-            return handleHover();
-          }
-        }, reverse(initial(levelNodes)).map(function (m) {
-          return /*#__PURE__*/React.createElement("div", {
-            key: m.id
-          }, /*#__PURE__*/React.createElement("span", {
-            onClick: function onClick() {
-              return handleSelect(m.id);
-            },
-            onMouseOver: function onMouseOver() {
-              return handleHover(m.id);
-            }
-          }, m.name));
-        }))
-      };
+      var _localeInfo$_locale;
+      moment.locale(((_localeInfo$_locale = localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
     }
-    return null;
-  }, [operatorId.selector]);
-  var handleSelect = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleHover = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
-    } : null);
-  });
-  var handleDelete = useMemoizedFn(function (_key) {
-    context.$publisher(context.topics.COMPONENT_DELETE, _key ? {
-      id: _key
-    } : null);
+    setLocale(_locale);
+    setIntl(getIntl(_locale));
   });
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-painter-design-toolbar']
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "small",
-    value: langList ? locale : undefined,
-    className: styles['i18n-selecter'],
-    style: {
-      fontSize: 12
-    },
-    onSelect: handleLangChange
-  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
-    return /*#__PURE__*/React.createElement(Select.Option, {
-      key: item.field,
-      value: item.field
-    }, item.title);
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'pc')),
-    onClick: function onClick() {
-      return setActivedTarget('pc');
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "laptop"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: classNames(styles['toolbar-item'], _defineProperty({}, styles.actived, activedTarget === 'mobile')),
-    onClick: function onClick() {
-      return setActivedTarget('mobile');
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "mobile"
-  })), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement("span", {
-    style: {
-      width: 'auto',
-      fontSize: 12
-    },
-    className: styles['toolbar-item'],
-    onClick: function onClick() {
-      context.$publisher(context.topics.COMPONENT_ACTIVE, {
-        id: CELL_KEY.PAGE_ROOT
-      });
-    }
-  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    style: {
-      fontSize: 12,
-      margin: '0 2px'
-    }
-  }, "\u9884\u89C8"), /*#__PURE__*/React.createElement(Divider, {
-    type: "vertical"
-  }), /*#__PURE__*/React.createElement(Button, {
-    size: "small",
-    type: "primary",
-    style: {
-      fontSize: 12,
-      margin: '0 0 0 2px'
-    }
-  }, "\u4FDD\u5B58")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(DesignToolbar, {
+    locale: locale,
+    onLangChange: handleLangChange
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design-workspace']
-  }, operatorId.detector && /*#__PURE__*/React.createElement("div", {
-    id: "lc-detector",
-    className: styles['lc-painter-design-detector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.detector))
-  }), operatorId.selector && /*#__PURE__*/React.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: styles['lc-painter-design-selector'],
-    style: getOperatorStyle(simulatorRef.current, getDomById(operatorId.selector))
-  }, acticeProps && /*#__PURE__*/React.createElement("div", {
-    className: styles['lc-borders-actions'],
-    style: acticeProps.props.id === 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.createElement(Dropdown, {
-    overlay: acticeProps.menu,
-    placement: "bottomLeft"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "instance-node-selector"
-  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return handleDelete(acticeProps.props);
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "delete"
-  })))), /*#__PURE__*/React.createElement(ConfigProvider, {
-    locale: ((_localeInfo$locale2 = localeInfo[locale]) === null || _localeInfo$locale2 === void 0 ? void 0 : _localeInfo$locale2.antd) || {}
+  }, /*#__PURE__*/React.createElement(DesignOperator, {
+    target: simulatorRef
+  }), /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: ((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
   }, /*#__PURE__*/React.createElement(RawIntlProvider, {
     value: intl
   }, /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
     className: styles['lc-painter-design-simulator']
   })))));
 };

package/es/lowcode/painter/DesignOperator.js

@@ -0,0 +1,271 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useEffect, useState } from 'react';
+import { last, initial } from 'lodash';
+import { useEventListener, useSetState, useMemoizedFn, useCreation, useSize, useLatest } from 'ahooks';
+import { Icon, Dropdown, message } from 'luck-design/antd';
+import { cloneDeep, reverse } from 'lodash';
+import { suid } from '@luck-design-biz/base/utils';
+import { useLDContext } from "../engine/provider/ContextProvider";
+import { add, deleteById } from "../engine/tools/dataProcess";
+import { CELL_KEY, CELL_CLASS_NAME } from "../constants";
+import styles from "./style/design.less";
+var _MODAL_COMPONENT_ = ['Dialog', 'Drawer'];
+var getOperatorStyle = function getOperatorStyle(page, cellNode) {
+  var _page$getBoundingClie = page.getBoundingClientRect(),
+    pageLeft = _page$getBoundingClie.left,
+    pageTop = _page$getBoundingClie.top;
+  var _cellNode$getBounding = cellNode.getBoundingClientRect(),
+    cellNodeLeft = _cellNode$getBounding.left,
+    cellNodeTop = _cellNode$getBounding.top;
+  return {
+    left: "".concat(cellNodeLeft - pageLeft, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
+    width: "".concat(cellNode.offsetWidth, "px"),
+    height: "".concat(cellNode.offsetHeight, "px")
+  };
+};
+var DesignOperator = function DesignOperator(_ref) {
+  var _getDomById, _getDomById2;
+  var target = _ref.target;
+  var context = useLDContext();
+  var size = useSize(target);
+  var _useState = useState(suid()),
+    _useState2 = _slicedToArray(_useState, 2),
+    positionKey = _useState2[0],
+    setPositionKey = _useState2[1];
+  var _useSetState = useSetState({
+      selector: null,
+      detector: null
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    operatorId = _useSetState2[0],
+    setOperatorId = _useSetState2[1];
+  var lastSelectorId = useLatest(operatorId.selector);
+  var currentModal = useRef(null);
+  var getDomById = useMemoizedFn(function (id) {
+    return context.componentMap.get(id).dom;
+  });
+  var handleSelect = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleHover = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
+    } : null);
+  });
+  var handleDelete = useMemoizedFn(function (_ref2) {
+    var id = _ref2.id,
+      parentId = _ref2.parentId;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+    var cloneData = cloneDeep(context.pageData);
+    deleteById(cloneData, id);
+    context._setPageData(cloneData).then(function (newData) {
+      context.$publisher(context.topics.COMPONENT_DELETE, {
+        id: id,
+        parentId: parentId,
+        pageData: newData
+      });
+    });
+  });
+  var addComponent = useMemoizedFn(function (data, targetId) {
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
+    var cloneData = cloneDeep(context.pageData);
+    add(cloneData, targetId, _id, json);
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
+      var mountCompId = _ref3.id;
+      if (mountCompId === _id) {
+        context.$publisher(context.topics.COMPONENT_APPEND, {
+          id: _id,
+          pageData: cloneData
+        });
+      }
+    }).watch();
+    context._setPageData(cloneData);
+  });
+  var acticeProps = useCreation(function () {
+    if (!operatorId.selector) return null;
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    return {
+      props: last(levelNodes),
+      menu: /*#__PURE__*/React.createElement("div", {
+        className: styles['next-overlay-wrapper'],
+        onMouseLeave: function onMouseLeave() {
+          return handleHover();
+        }
+      }, reverse(initial(levelNodes)).map(function (m) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: m.id
+        }, /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick() {
+            return handleSelect(m.id);
+          },
+          onMouseOver: function onMouseOver() {
+            return handleHover(m.id);
+          }
+        }, m.name));
+      }))
+    };
+  }, [operatorId.selector]);
+  var lastDetectorNode = useCreation(function () {
+    return operatorId.detector ? last(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  }, [operatorId.detector]);
+  useEventListener('mousemove', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (targetCellId && targetCellId !== operatorId.detector && targetCellId !== operatorId.selector) {
+      setOperatorId({
+        detector: targetCellId
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: targetCellId
+      });
+    } else if (!targetCell || targetCellId === operatorId.selector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  useEventListener('mouseleave', function () {
+    if (operatorId.detector) {
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
+    }
+  }, {
+    target: target
+  });
+  useEventListener('click', function (event) {
+    var elem = event.target;
+    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
+    var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
+    if (!targetCellId || targetCellId === operatorId.selector) return;
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id
+    });
+  }, {
+    target: target
+  });
+  useEffect(function () {
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
+      var data = _ref4.data;
+      if (_MODAL_COMPONENT_.includes(data.component)) {
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
+          var compId = _ref5.id;
+          context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
+            toggle: true,
+            id: compId
+          });
+          context.$publisher(context.topics.COMPONENT_ACTIVE, {
+            id: compId
+          });
+        }).watch();
+        addComponent(data, CELL_KEY.PAGE_ROOT);
+        return;
+      }
+      if (!lastSelectorId.current) {
+        message.info('请在右侧画布选择节点');
+        return;
+      }
+      if (context.componentMap.get(lastSelectorId.current).dom.getAttribute('name') !== 'box') {
+        message.info('该节点不支持添加子节点');
+        return;
+      }
+      addComponent(data, lastSelectorId.current);
+    }).watch();
+    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
+      if (payload.id) setOperatorId({
+        detector: payload.id
+      });else setOperatorId({
+        detector: null
+      });
+    }).watch();
+    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      if (payload.id) {
+        setOperatorId({
+          selector: payload.id,
+          detector: null
+        });
+      } else {
+        setOperatorId({
+          selector: null
+        });
+      }
+    }).watch();
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
+      var toggle = _ref6.toggle,
+        id = _ref6.id;
+      if (toggle) {
+        target.current.style.setProperty('overflow', 'hidden');
+        var _modal = context.componentMap.get(id);
+        var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
+        _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
+        _modal.api.doOpen();
+        currentModal.current = id;
+      } else {
+        target.current.style.removeProperty('overflow');
+        var _modal2 = context.componentMap.get(id || currentModal.current);
+        _modal2.api.doClose();
+        currentModal.current = void 0;
+      }
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
+      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
+      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
+    };
+  }, []);
+  useEffect(function () {
+    var crid = context.$subscriber(context.topics.COMPONENT_REPOSITIONING).on(function (payload) {
+      if (payload.id === operatorId.selector) setPositionKey(suid());
+    }).watch();
+    return function () {
+      context.$unsubscriber(context.topics.COMPONENT_REPOSITIONING, crid);
+    };
+  }, [operatorId.selector]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, operatorId.detector && /*#__PURE__*/React.createElement("div", {
+    id: "lc-detector",
+    className: styles['lc-painter-design-detector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['lc-painter-design-detector-name'],
+    style: {
+      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
+    }
+  }, lastDetectorNode ? "".concat(lastDetectorNode.name, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+    id: "lc-selector",
+    key: "".concat((size === null || size === void 0 ? void 0 : size.width) || 0, "-").concat((size === null || size === void 0 ? void 0 : size.height) || 0, "-").concat(positionKey),
+    className: styles['lc-painter-design-selector'],
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
+  }, acticeProps && /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-borders-actions'],
+    style: acticeProps.props.id === CELL_KEY.PAGE_ROOT ? {
+      top: 0
+    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+      bottom: '-23px'
+    } : {
+      top: '-23px'
+    }
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: acticeProps.menu,
+    placement: "bottomLeft"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "instance-node-selector"
+  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      return handleDelete(acticeProps.props);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "delete"
+  })))));
+};
+export default DesignOperator;