@luck-design-biz/luckda 1.0.2-12 → 1.0.2-14

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.dataToTree = dataToTree;
 exports.executeCode = executeCode;
 exports.extractKeywords = extractKeywords;
 exports.findFirstLeafNode = findFirstLeafNode;
@@ -282,4 +283,28 @@ function findFirstLeafNode(node) {
     _iterator2.f();
   }
   return null;
+}
+function dataToTree(data, params) {
+  var _ref = params || {},
+    _ref$parentKey = _ref.parentKey,
+    parentKey = _ref$parentKey === void 0 ? 'parentId' : _ref$parentKey,
+    _ref$childKey = _ref.childKey,
+    childKey = _ref$childKey === void 0 ? 'children' : _ref$childKey,
+    _ref$rootId = _ref.rootId,
+    rootId = _ref$rootId === void 0 ? '0' : _ref$rootId,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 'id' : _ref$id,
+    _ref$stain = _ref.stain,
+    stain = _ref$stain === void 0 ? false : _ref$stain;
+  var _data = stain ? data : (0, _lodash.cloneDeep)(data);
+  var groupedByParents = (0, _lodash.groupBy)(_data, parentKey);
+  var itemsById = (0, _lodash.keyBy)(_data, id);
+  try {
+    (0, _lodash.each)((0, _lodash.omit)(groupedByParents, rootId), function (children, parentId) {
+      itemsById[parentId][childKey] = children;
+    });
+  } catch (e) {
+    console.error('helper.dataToTree error', e);
+  }
+  return groupedByParents[rootId];
 }

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

@@ -147,8 +147,8 @@ var wrapPromise = function wrapPromise(promise) {
     }
   };
 };
-function initialize(ctx) {
-  var pageVars = _usePageDataStore.default.getState().pageData.props.vars;
+function initialize(ctx, proxyCode) {
+  var pageVars = _usePageDataStore.default.getState()[proxyCode || 'pageData'].props.vars;
   if ((0, _lodash.isNil)(pageVars)) return null;
   var remoteApis = new Map();
   var _reduce = (0, _lodash.reduce)(pageVars, function (ret, val) {
@@ -177,8 +177,8 @@ function initialize(ctx) {
     _reduce2 = (0, _toArray2.default)(_reduce),
     variables = _reduce2[0],
     autoTasks = _reduce2.slice(1);
-  _usePageVar.useStateStore.getState().initialize(variables);
-  ctx._initRemoteApiMap(remoteApis);
+  _usePageVar.useStateStore.getState().initialize(variables, !!proxyCode);
+  ctx._initRemoteApiMap(remoteApis, !!proxyCode);
   function run() {
     return _run2.apply(this, arguments);
   }

package/lib/lowcode/painter/Components.js

@@ -96,8 +96,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

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

package/lib/lowcode/painter/DesignOperator.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _umi = require("umi");
 var _lodash = require("lodash");
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
@@ -50,6 +51,18 @@ var DesignOperator = function DesignOperator(_ref) {
     setOperatorId = _useSetState2[1];
   var lastSelectorId = (0, _ahooks.useLatest)(operatorId.selector);
   var currentModal = (0, _react.useRef)(null);
+  var _useTemporalStore = (0, _ContextProvider.useTemporalStore)(function (state) {
+      return {
+        undo: state.undo,
+        redo: state.redo,
+        pastStates: state.pastStates,
+        futureStates: state.futureStates
+      };
+    }),
+    canUndo = _useTemporalStore.canUndo,
+    canRedo = _useTemporalStore.canRedo,
+    undo = _useTemporalStore.undo,
+    redo = _useTemporalStore.redo;
   var getElement = (0, _ahooks.useMemoizedFn)(function (_target) {
     var _context$componentMap;
     return (0, _lodash.isString)(_target) ? (_context$componentMap = context.componentMap.get(_target)) === null || _context$componentMap === void 0 ? void 0 : _context$componentMap.api.getSelfDom() : _target;
@@ -70,9 +83,109 @@ var DesignOperator = function DesignOperator(_ref) {
       id: id
     });
   });
+  var handleShortcutEmit = (0, _ahooks.useMemoizedFn)(function (_ref3) {
+    var key = _ref3.key;
+    switch (key) {
+      case 'meta.s':
+      case 'ctrl.s':
+        context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
+        break;
+      case 'meta.p':
+      case 'ctrl.p':
+        {
+          var _getCreateHistoryOpti = (0, _umi.getCreateHistoryOptions)(),
+            basename = _getCreateHistoryOpti.basename;
+          var previewUrl = "".concat(basename === '/' ? '' : basename, "/byteman/preview/").concat(context.router.getQuery('code'));
+          window.open(previewUrl, '_blank');
+        }
+        break;
+      case 'meta.z':
+      case 'ctrl.z':
+        canUndo && undo();
+        break;
+      case 'meta.shift.z':
+      case 'ctrl.shift.z':
+        canRedo && redo();
+        break;
+      case 'meta.c':
+      case 'ctrl.c':
+        if (operatorId.selector) {
+          var _context$$$api$getSel = context.$(operatorId.selector).api.getSelfAndParentData(),
+            node = _context$$$api$getSel.node,
+            parent = _context$$$api$getSel.parent;
+          if (_constants.CONTAINER_UNITS.includes(parent === null || parent === void 0 ? void 0 : parent.props.component)) {
+            addComponent((0, _lodash.omit)(node.props), parent.props.id);
+          }
+        }
+        break;
+      case 'backspace':
+        if (operatorId.selector && operatorId.deletable) {
+          handleDelete({
+            id: operatorId.selector
+          });
+        }
+        break;
+      case 'uparrow':
+        if (operatorId.selector) {
+          var _context$$$api$getSel2 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent = _context$$$api$getSel2.parent;
+          if (_parent) {
+            handleSelect(_parent.props.id);
+          }
+        }
+        break;
+      case 'downarrow':
+        if (operatorId.selector) {
+          var _node$children;
+          var _node = context.$(operatorId.selector).api.getSelfData();
+          if (_node !== null && _node !== void 0 && (_node$children = _node.children) !== null && _node$children !== void 0 && _node$children.length) {
+            handleSelect(_node.children[0]);
+          }
+        }
+        break;
+      case 'leftarrow':
+      case 'rightarrow':
+        if (operatorId.selector) {
+          var _parent2$children;
+          var _context$$$api$getSel3 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent2 = _context$$$api$getSel3.parent;
+          if (_parent2 !== null && _parent2 !== void 0 && (_parent2$children = _parent2.children) !== null && _parent2$children !== void 0 && _parent2$children.length) {
+            var index = _parent2.children.findIndex(function (c) {
+              return c === operatorId.selector;
+            });
+            if (key === 'leftarrow' && index > 0) {
+              handleSelect(_parent2.children[index - 1]);
+            } else if (key === 'rightarrow' && index < _parent2.children.length - 1) {
+              handleSelect(_parent2.children[index + 1]);
+            }
+          }
+        }
+        break;
+      case 'alt.leftarrow':
+      case 'alt.rightarrow':
+        if (operatorId.selector) {
+          var _parent3$children;
+          var _context$$$api$getSel4 = context.$(operatorId.selector).api.getSelfAndParentData(),
+            _parent3 = _context$$$api$getSel4.parent;
+          if (_parent3 !== null && _parent3 !== void 0 && (_parent3$children = _parent3.children) !== null && _parent3$children !== void 0 && _parent3$children.length) {
+            var _index = _parent3.children.findIndex(function (c) {
+              return c === operatorId.selector;
+            });
+            if (key === 'alt.leftarrow' && _index > 0) {
+              (0, _ContextProvider.moveNode)(_parent3.children[_index], _parent3.children[_index - 1], 'left');
+            } else if (key === 'alt.rightarrow' && _index < _parent3.children.length - 1) {
+              (0, _ContextProvider.moveNode)(_parent3.children[_index], _parent3.children[_index + 1], 'right');
+            }
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  });
   var addComponent = (0, _ahooks.useMemoizedFn)(function (data, targetId) {
-    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref3) {
-      var mountCompId = _ref3.id;
+    context.$subscriber(context.topics.COMPONENT_MOUNT).once(function (_ref4) {
+      var mountCompId = _ref4.id;
       if (mountCompId === _id) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
@@ -133,19 +246,6 @@ var DesignOperator = function DesignOperator(_ref) {
     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.useKeyPress)('ctrl.s', function (e) {
-    e.preventDefault();
-    context.$publisher(context.topics.DESIGN_OPERATE_SAVE);
-  });
   (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, "\"]"));
@@ -208,11 +308,11 @@ var DesignOperator = function DesignOperator(_ref) {
     target: canvas
   });
   (0, _react.useEffect)(function () {
-    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref4) {
-      var data = _ref4.data;
+    var csid = context.$subscriber(context.topics.COMPONENT_SETTING_CLICK).on(function (_ref5) {
+      var data = _ref5.data;
       if (_MODAL_COMPONENT_.includes(data.component)) {
-        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref5) {
-          var compId = _ref5.id;
+        context.$subscriber(context.topics.COMPONENT_APPEND).once(function (_ref6) {
+          var compId = _ref6.id;
           context.$publisher(context.topics.COMPONENT_MODAL_TOGGLE, {
             toggle: true,
             id: compId
@@ -268,9 +368,9 @@ var DesignOperator = function DesignOperator(_ref) {
         });
       }
     }).watch();
-    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref6) {
-      var toggle = _ref6.toggle,
-        id = _ref6.id;
+    var cmtid = context.$subscriber(context.topics.COMPONENT_MODAL_TOGGLE).on(function (_ref7) {
+      var toggle = _ref7.toggle,
+        id = _ref7.id;
       if (toggle && id !== currentModal.current) {
         var _canvas$current2;
         (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 || _canvas$current2.style.setProperty('overflow', 'hidden');
@@ -290,19 +390,21 @@ var DesignOperator = function DesignOperator(_ref) {
         }
       }
     }).watch();
-    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref7) {
-      var id = _ref7.id;
+    var cdid = context.$subscriber(context.topics.COMPONENT_DELETE).on(function (_ref8) {
+      var id = _ref8.id;
       if (lastSelectorId.current === id) {
         handleSelect();
       }
       (0, _ContextProvider.deleteNode)(id);
     });
+    var dseid = context.$subscriber(context.topics.DESIGN_SHORTCUT_EMIT).on(handleShortcutEmit);
     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);
+      context.$unsubscriber(context.topics.COMPONENT_DELETE, dseid);
     };
   }, []);
   (0, _react.useEffect)(function () {