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

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, isString, isNil } from 'lodash';
+import { cloneDeep, reverse } 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, LC_FORMITEM_UNIT, CONTAINER_UNITS } from "../constants";
+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(canvas, cellNode) {
-  if (!cellNode) return {};
-  var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-    pageLeft = _canvas$getBoundingCl.left,
-    pageTop = _canvas$getBoundingCl.top;
+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(cellNode.offsetTop, "px"),
+    top: "".concat(cellNodeTop - pageTop, "px"),
     width: "".concat(cellNode.offsetWidth, "px"),
     height: "".concat(cellNode.offsetHeight, "px")
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getElement, _getElement2;
-  var canvas = _ref.canvas;
-  var context = useContext();
-  var size = useSize(canvas);
+  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],
@@ -42,53 +42,52 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = useLatest(operatorId.selector);
   var currentModal = useRef(null);
-  var getElement = useMemoizedFn(function (_target) {
-    var _context$componentMap;
-    return isString(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
+  var getDomById = useMemoizedFn(function (id) {
+    return context.componentMap.get(id).dom;
   });
-  var handleSelect = useMemoizedFn(function (_target) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
-      target: _target
+  var handleSelect = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+      id: _key
     } : null);
   });
-  var handleHover = useMemoizedFn(function (_target) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
-      target: _target
+  var handleHover = useMemoizedFn(function (_key) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
+      id: _key
     } : null);
   });
   var handleDelete = useMemoizedFn(function (_ref2) {
-    var id = _ref2.id;
-    context.$publisher(context.topics.COMPONENT_DELETE, {
-      id: id
+    var id = _ref2.id,
+      parentId = _ref2.parentId;
+    context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+    var cloneData = 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
+          id: _id,
+          pageData: cloneData
         });
-        handleSelect(_id);
       }
     }).watch();
-    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-    var _id = "".concat(data.component.toLowerCase(), "_").concat(suid());
-    addNode(targetId, _id, json);
+    context._setPageData(cloneData);
   });
   var acticeProps = useCreation(function () {
     if (!operatorId.selector) return null;
-    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
-      });
-    }
+    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
     return {
       props: last(levelNodes),
       menu: /*#__PURE__*/React.createElement("div", {
@@ -110,70 +109,50 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
-  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;
+  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 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 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) {
-      handleHover(targetCellId);
+      setOperatorId({
+        detector: targetCellId
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, {
+        id: targetCellId
+      });
     } else if (!targetCell || targetCellId === operatorId.selector) {
-      handleHover();
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
-    target: canvas
+    target: target
   });
   useEventListener('mouseleave', function () {
     if (operatorId.detector) {
-      handleHover();
+      setOperatorId({
+        detector: null
+      });
+      context.$publisher(context.topics.COMPONENT_HOVER, null);
     }
   }, {
-    target: canvas
+    target: target
   });
   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 targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
     var targetCellId = targetCell === null || targetCell === void 0 ? void 0 : targetCell.id;
     if (!targetCellId || targetCellId === operatorId.selector) return;
-    handleHover();
-    handleSelect(targetCell.id);
+    context.$publisher(context.topics.COMPONENT_HOVER, null);
+    context.$publisher(context.topics.COMPONENT_ACTIVE, {
+      id: targetCell.id
+    });
   }, {
-    target: canvas
+    target: target
   });
   useEffect(function () {
     var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
@@ -185,86 +164,64 @@ var DesignOperator = function DesignOperator(_ref) {
             toggle: true,
             id: compId
           });
-          handleSelect(compId);
+          context.$publisher(context.topics.COMPONENT_ACTIVE, {
+            id: compId
+          });
         }).watch();
-        addComponent(data, LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
+        addComponent(data, CELL_KEY.PAGE_ROOT);
         return;
       }
       if (!lastSelectorId.current) {
         message.info('请在右侧画布选择节点');
         return;
       }
-      if (!CONTAINER_UNITS.includes(context.componentMap.get(lastSelectorId.current).meta.component)) {
+      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.target) setOperatorId({
-        detector: payload.target
+      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.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
-          });
-        }
+      if (payload.id) {
+        setOperatorId({
+          selector: payload.id,
+          detector: null
+        });
       } else {
         setOperatorId({
-          selector: null,
-          selectorTarget: null
+          selector: null
         });
       }
     }).watch();
     var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
       var toggle = _ref6.toggle,
         id = _ref6.id;
-      if (toggle && id !== currentModal.current) {
-        canvas.current.style.setProperty('overflow', 'hidden');
+      if (toggle) {
+        target.current.style.setProperty('overflow', 'hidden');
         var _modal = context.componentMap.get(id);
         var _prevModal = currentModal.current ? context.componentMap.get(currentModal.current) : null;
         _prevModal === null || _prevModal === void 0 || _prevModal.api.doClose();
         _modal.api.doOpen();
         currentModal.current = id;
-      } else if (!toggle) {
-        canvas.current.style.removeProperty('overflow');
-        var _id = id || currentModal.current;
-        if (_id) {
-          var _modal2 = context.componentMap.get(_id);
-          _modal2.api.doClose();
-          currentModal.current = void 0;
-        }
+      } else {
+        target.current.style.removeProperty('overflow');
+        var _modal2 = context.componentMap.get(id || currentModal.current);
+        _modal2.api.doClose();
+        currentModal.current = void 0;
       }
     }).watch();
-    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id;
-      if (lastSelectorId.current === id) {
-        handleSelect();
-      }
-      deleteNode(id);
-    });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
       context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
       context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
       context.$unsubscriber(context.topics.MODAL_OPEN, cmtid);
-      context.$unsubscriber(context.topics.COMPONENT_DELETE, cdid);
     };
   }, []);
   useEffect(function () {
@@ -278,22 +235,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(canvas.current, getElement(operatorId.detector))
+    style: getOperatorStyle(target.current, getDomById(operatorId.detector))
   }, /*#__PURE__*/React.createElement("span", {
     className: styles['lc-painter-design-detector-name'],
     style: {
-      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
+      top: ((_getDomById = getDomById(operatorId.detector)) === null || _getDomById === void 0 ? void 0 : _getDomById.offsetTop) < 23 ? 0 : '-23px'
     }
-  }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/React.createElement("div", {
+  }, 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(canvas.current, getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element))
+    style: getOperatorStyle(target.current, getDomById(operatorId.selector))
   }, acticeProps && /*#__PURE__*/React.createElement("div", {
     className: styles['lc-borders-actions'],
-    style: acticeProps.props.id === LC_BUILDIN_UNIT_KEY.PAGE_ROOT ? {
+    style: acticeProps.props.id === CELL_KEY.PAGE_ROOT ? {
       top: 0
-    } : ((_getElement2 = getElement(isNil(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? {
+    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
       bottom: '-23px'
     } : {
       top: '-23px'
@@ -303,7 +260,7 @@ var DesignOperator = function DesignOperator(_ref) {
     placement: "bottomLeft"
   }, /*#__PURE__*/React.createElement("div", {
     className: "instance-node-selector"
-  }, acticeProps.props.name)), operatorId.deletable && /*#__PURE__*/React.createElement("div", {
+  }, acticeProps.props.name)), /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {
       return handleDelete(acticeProps.props);
     }