@luck-design-biz/luckda 0.0.25-1 → 0.0.25-11

package/lib/lowcode/painter/Design.js

@@ -12,6 +12,8 @@ var _umi = require("umi");
 var _ahooks = require("ahooks");
 var _moment = _interopRequireDefault(require("moment"));
 var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
 var _DesignToolbar = _interopRequireDefault(require("./DesignToolbar"));
 var _DesignOperator = _interopRequireDefault(require("./DesignOperator"));
 var _Page = _interopRequireDefault(require("../view/Page"));
@@ -31,6 +33,39 @@ var Design = function Design() {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     intl = _useState4[0],
     setIntl = _useState4[1];
+  var unblock = (0, _ahooks.useMemoizedFn)(function () {
+    var _getCanUndoAndRedo = (0, _ContextProvider.getCanUndoAndRedo)(),
+      canUndo = _getCanUndoAndRedo.canUndo;
+    if (canUndo) return confirm("".concat((0, _utils.formatMessage)({
+      id: 'app.base.operate.comfire.leave',
+      label: '离开当前页面？'
+    }), "\n").concat((0, _utils.formatMessage)({
+      id: 'app.base.operate.comfire.message.leave',
+      label: '系统可能不会保存您所做的更改。'
+    })));
+    return true;
+  });
+  var handleBeforeUnload = (0, _ahooks.useMemoizedFn)(function (event) {
+    var _getCanUndoAndRedo2 = (0, _ContextProvider.getCanUndoAndRedo)(),
+      canUndo = _getCanUndoAndRedo2.canUndo;
+    if (canUndo) {
+      event.preventDefault();
+      event.returnValue = null;
+      return null;
+    }
+  });
+  (0, _react.useEffect)(function () {
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    _umi.history.block(function () {
+      return unblock();
+    });
+    return function () {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      _umi.history.block(function () {
+        return true;
+      });
+    };
+  }, []);
   var handleLangChange = (0, _ahooks.useMemoizedFn)(function (_locale) {
     if (_moment.default !== null && _moment.default !== void 0 && _moment.default.locale) {
       var _localeInfo$_locale;
@@ -46,15 +81,15 @@ var Design = function Design() {
     onLangChange: handleLangChange
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _design.default['lc-painter-design-workspace']
-  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
-    target: simulatorRef
-  }), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+  }, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
     locale: ((_localeInfo$locale = _umi.localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
   }, /*#__PURE__*/_react.default.createElement(_umi.RawIntlProvider, {
     value: intl
   }, /*#__PURE__*/_react.default.createElement(_Page.default, {
     ref: simulatorRef,
     className: _design.default['lc-painter-design-simulator']
-  })))));
+  }, /*#__PURE__*/_react.default.createElement(_DesignOperator.default, {
+    canvas: simulatorRef
+  }))))));
 };
 var _default = exports.default = Design;

package/lib/lowcode/painter/DesignOperator.js

@@ -13,34 +13,29 @@ var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
-var _dataProcess = require("../engine/tools/dataProcess");
 var _constants = require("../constants");
 var _design = _interopRequireDefault(require("./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 = (0, _ContextProvider.useContext)();
-  var _usePageData = (0, _ContextProvider.usePageData)(),
-    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
-    pageData = _usePageData2[0],
-    setPageData = _usePageData2[1].setPageData;
-  var size = (0, _ahooks.useSize)(target);
+  var size = (0, _ahooks.useSize)(canvas);
   var _useState = (0, _react.useState)((0, _utils.suid)()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     positionKey = _useState2[0],
@@ -54,49 +49,53 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
   var currentModal = (0, _react.useRef)(null);
-  var getDomById = (0, _ahooks.useMemoizedFn)(function (id) {
+  var getElement = (0, _ahooks.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 (0, _lodash.isString)(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
   });
-  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
-      id: _key
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_target) {
+    context.$publisher(context.topics.COMPONENT_ACTIVE, _target ? {
+      target: _target
     } : null);
   });
-  var handleHover = (0, _ahooks.useMemoizedFn)(function (_key) {
-    context.$publisher(context.topics.COMPONENT_HOVER, _key ? {
-      id: _key
+  var handleHover = (0, _ahooks.useMemoizedFn)(function (_target) {
+    context.$publisher(context.topics.COMPONENT_HOVER, _target ? {
+      target: _target
     } : null);
   });
   var handleDelete = (0, _ahooks.useMemoizedFn)(function (_ref2) {
     var id = _ref2.id;
     context.$publisher(context.topics.COMPONENT_DELETE, {
-      id: id,
-      pageData: pageData
+      id: id
     });
   });
   var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
-    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
-    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
-    var cloneData = (0, _lodash.cloneDeep)(pageData);
-    (0, _dataProcess.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
-        });
-        context.$publisher(context.topics.COMPONENT_ACTIVE, {
           id: _id
         });
+        handleSelect(_id);
       }
     }).watch();
-    setPageData(cloneData);
+    var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
+    var _id = "".concat(data.component.toLowerCase(), "_").concat((0, _utils.suid)());
+    (0, _ContextProvider.addNode)(targetId, _id, json);
   });
   var acticeProps = (0, _ahooks.useCreation)(function () {
     if (!operatorId.selector) return null;
-    var levelNodes = context.componentMap.get(operatorId.selector).api.getLevelNodes();
+    var _id = (0, _lodash.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: (0, _lodash.last)(levelNodes),
       menu: /*#__PURE__*/_react.default.createElement("div", {
@@ -118,50 +117,70 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
-  var lastDetectorNode = (0, _ahooks.useCreation)(function () {
-    return operatorId.detector ? (0, _lodash.last)(context.componentMap.get(operatorId.detector).api.getLevelNodes()) : null;
+  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.useEventListener)('mousemove', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.LC_FORMITEM_UNIT, "\"]"));
+    if (targetFormItem) {
+      handleHover(targetFormItem);
+      return;
+    }
     var targetCell = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.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
   });
   (0, _ahooks.useEventListener)('mouseleave', function () {
     if (operatorId.detector) {
-      setOperatorId({
-        detector: null
-      });
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+      handleHover();
     }
   }, {
-    target: target
+    target: canvas
   });
   (0, _ahooks.useEventListener)('click', function (event) {
     var elem = event.target;
+    var targetFormItem = elem.closest("[".concat(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.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(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.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(_constants.LC_COMPONENT_UNIT_KEY, "=\"").concat(_constants.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
   });
   (0, _react.useEffect)(function () {
     var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
@@ -173,9 +192,7 @@ var DesignOperator = function DesignOperator(_ref) {
             toggle: true,
             id: compId
           });
-          context.$publisher(context.topics.COMPONENT_ACTIVE, {
-            id: compId
-          });
+          handleSelect(compId);
         }).watch();
         addComponent(data, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
         return;
@@ -191,39 +208,49 @@ 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 _context$componentMap2 = context.componentMap.get(payload.id).api.getSelfAndParentLCData(),
-          node = _context$componentMap2.node;
-        setOperatorId({
-          selector: payload.id,
-          deletable: node.props.buildIn !== true,
-          detector: null
-        });
+      if (payload.target) {
+        if ((0, _lodash.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();
     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');
+      if (toggle && id !== currentModal.current) {
+        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 {
-        target.current.style.removeProperty('overflow');
+      } else if (!toggle) {
+        canvas.current.style.removeProperty('overflow');
         var _id = id || currentModal.current;
         if (_id) {
           var _modal2 = context.componentMap.get(_id);
@@ -233,14 +260,11 @@ var DesignOperator = function DesignOperator(_ref) {
       }
     }).watch();
     var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id,
-        pageData = _ref7.pageData;
+      var id = _ref7.id;
       if (lastSelectorId.current === id) {
-        context.$publisher(context.topics.COMPONENT_ACTIVE, null);
+        handleSelect();
       }
-      var cloneData = (0, _lodash.cloneDeep)(pageData);
-      (0, _dataProcess.deleteById)(cloneData, id);
-      setPageData(cloneData);
+      (0, _ContextProvider.deleteNode)(id);
     });
     return function () {
       context.$unsubscriber(context.topics.COMPONENT_SETTING_CLICK, csid);
@@ -261,22 +285,22 @@ var DesignOperator = function DesignOperator(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, operatorId.detector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-detector",
     className: _design.default['lc-painter-design-detector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.detector), 'detector', operatorId.detector)
+    style: getOperatorStyle(canvas.current, getElement(operatorId.detector))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['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.default.createElement("div", {
+  }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.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: _design.default['lc-painter-design-selector'],
-    style: getOperatorStyle(target.current, getDomById(operatorId.selector), 'selector', operatorId.selector)
+    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
-    } : ((_getDomById2 = getDomById(operatorId.selector)) === null || _getDomById2 === void 0 ? void 0 : _getDomById2.offsetTop) < 23 ? {
+    } : ((_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'