@luck-design-biz/luckda 1.0.1 → 1.0.2-2

package/lib/lowcode/engine/provider/ContextProvider/usePageDataStore.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTemporalStore = exports.useTask = exports.useGet = exports.setNeedPrompt = exports.resetPageData = exports.modifyNode = exports.getSelfAndParent = exports.getNeedPrompt = exports.getModuleData = exports.getLevelNodes = exports.deleteNode = exports.default = exports.clearChildren = exports.addNode = void 0;
+exports.useTemporalStore = exports.useTask = exports.useGet = exports.setNeedPrompt = exports.resetPageData = exports.moveNode = exports.modifyNode = exports.getSelfAndParent = exports.getNeedPrompt = exports.getModuleData = exports.getLevelNodes = exports.deleteNode = exports.default = exports.clearChildren = exports.addNode = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
@@ -264,13 +264,93 @@ var modifyNode = exports.modifyNode = function modifyNode(id, data) {
     });
   });
 };
+
+/**
+ * 移动页面中的一个节点到另一个位置。
+ * 
+ * @param {string} sid - 源节点的ID。
+ * @param {string} tid - 目标节点的ID。
+ * @param {string} action - 移动类型，可以是 'inside', 'left', 'right' 中的一个。
+ * @param {string} newid - 新节点的ID，仅在创建新节点时使用。
+ * @param {Object} json - 新节点的初始属性，仅在创建新节点时使用。
+ * 
+ * @description
+ * 此函数会更新页面数据状态，根据提供的动作类型（`action`），将源节点（`sourceNode`）移动到目标节点（`targetNode`）的相应位置。
+ * - 'inside': 将源节点作为目标节点的子节点。
+ * - 'left': 将源节点放在目标节点的左边（同一父节点下）。
+ * - 'right': 将源节点放在目标节点的右边（同一父节点下）。
+ * 如果 `sid` 是空但提供了 `newid`，则函数会创建一个新的节点。
+ * 
+ */
+var moveNode = exports.moveNode = function moveNode(sid, tid, action, newid, json) {
+  usePageDataStore.setState(function (state) {
+    var sourceNode;
+    var sourceParent;
+    if (sid) {
+      var sourceData = findNode(state.pageData, sid) || {};
+      sourceNode = sourceData === null || sourceData === void 0 ? void 0 : sourceData.target;
+      sourceParent = sourceData === null || sourceData === void 0 ? void 0 : sourceData.parent;
+    } else if (newid) {
+      sid = newid;
+      sourceNode = {
+        props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, json), {}, {
+          id: newid
+        })
+      };
+    }
+    var _ref4 = findNode(state.pageData, tid) || {},
+      targetNode = _ref4.target,
+      targetParent = _ref4.parent;
+    if (!sourceNode || !targetNode) {
+      console.error('Source or target node does not exist.');
+      return;
+    }
+    if (sourceParent) {
+      sourceParent.children.splice(sourceParent.children.indexOf(sid), 1);
+      if (sourceParent.children.length === 0) {
+        delete sourceParent['children'];
+      }
+      delete sourceParent[sid];
+    }
+    switch (action) {
+      case 'inside':
+        if (!targetNode.hasOwnProperty('children')) {
+          targetNode.children = [];
+        }
+        targetNode.children.push(sid);
+        sourceNode.props.parentId = tid;
+        targetNode[sid] = sourceNode;
+        break;
+      case 'left':
+      case 'right':
+        if (!targetParent) {
+          console.error('Target node must have a parent for left or right operations.');
+          return;
+        }
+        var idx = targetParent.children.indexOf(tid);
+        if (idx === -1) {
+          console.error("Target node is not found in its parent's children list.");
+          return;
+        }
+        if (action === 'right') {
+          idx++;
+        }
+        targetParent.children.splice(idx, 0, sid);
+        sourceNode.props.parentId = targetParent.props.id;
+        targetParent[sid] = sourceNode;
+        break;
+      default:
+        break;
+    }
+  });
+};
 var clearChildren = exports.clearChildren = function clearChildren(id) {
   usePageDataStore.setState(function (state) {
     if (id === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT) {
       return;
     }
-    var _ref4 = findNode(state.pageData, id) || {},
-      target = _ref4.target;
+    var _ref5 = findNode(state.pageData, id) || {},
+      target = _ref5.target;
     if (!target) return;
     (0, _lodash.forEach)(target.children, function (c) {
       delete target[c];

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.executeCode = executeCode;
 exports.extractKeywords = extractKeywords;
+exports.findFirstLeafNode = findFirstLeafNode;
 exports.getCtx = getCtx;
 exports.getFuncBody = getFuncBody;
 exports.getLDMetaAttr = getLDMetaAttr;
@@ -260,4 +261,25 @@ function loadScript(path) {
     ref: script,
     status: script.getAttribute('data-status') || 'ready'
   };
+}
+function findFirstLeafNode(node) {
+  if (!node.children || node.children.length === 0) {
+    return node;
+  }
+  var _iterator2 = (0, _createForOfIteratorHelper2.default)(node.children),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var child = _step2.value;
+      var leaf = findFirstLeafNode(child);
+      if (leaf) {
+        return leaf;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return null;
 }

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

@@ -14,6 +14,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard3(require("react"));
 var _umi = require("umi");
 var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _ContextProvider = require("../provider/ContextProvider");
 var _constants = require("../../constants");
@@ -70,7 +71,18 @@ function useCanvasRender(data, deps) {
               return _loader.apply(this, arguments);
             }
             return loader;
-          }()
+          }(),
+          loading: function loading() {
+            return /*#__PURE__*/_react.default.createElement(_antd.Skeleton, {
+              active: true,
+              title: {
+                width: '70%'
+              },
+              paragraph: {
+                rows: 7
+              }
+            });
+          }
         });
       }
       var renderable = true;

package/lib/lowcode/painter/Components.js

@@ -18,6 +18,7 @@ var _core = require("@dnd-kit/core");
 var _components = _interopRequireDefault(require("./style/components.less"));
 var _componentsList = _interopRequireDefault(require("../engine/meta/components-list.json"));
 var _DragDropContext = require("./components/DragDrop/DragDropContext");
+var _expect = _interopRequireDefault(require("./expect"));
 var TabPane = _antd.Tabs.TabPane;
 var Search = _antd.Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -95,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,
@@ -133,6 +134,10 @@ var Components = function Components(_ref3) {
       label: '自定义组件'
     }),
     key: "dataset"
-  }, "\u656C\u8BF7\u671F\u5F85")));
+  }, /*#__PURE__*/_react.default.createElement(_expect.default, {
+    style: {
+      paddingTop: '80px'
+    }
+  }))));
 };
 var _default = exports.default = Components;

package/lib/lowcode/painter/Design.js

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

package/lib/lowcode/painter/DesignOperator.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
@@ -32,7 +33,7 @@ var getOperatorStyle = function getOperatorStyle(canvas, cellNode) {
   };
 };
 var DesignOperator = function DesignOperator(_ref) {
-  var _getElement, _getElement2;
+  var _getElement2;
   var canvas = _ref.canvas;
   var context = (0, _ContextProvider.useContext)();
   var size = (0, _ahooks.useSize)(canvas);
@@ -76,7 +77,9 @@ var DesignOperator = function DesignOperator(_ref) {
         context.$publisher(context.topics.COMPONENT_APPEND, {
           id: _id
         });
-        handleSelect(_id);
+        setTimeout(function () {
+          handleSelect(_id);
+        });
       }
     }).watch();
     var json = require("../engine/meta/".concat(data.component.toLowerCase(), ".props.default.json"));
@@ -117,6 +120,15 @@ var DesignOperator = function DesignOperator(_ref) {
       }))
     };
   }, [operatorId.selector]);
+  var activeDomPosition = (0, _ahooks.useCreation)(function () {
+    var _getElement;
+    if (!operatorId.selector && !operatorId.selectorTarget) return null;
+    var targetTop = (_getElement = getElement((0, _lodash.isNil)(operatorId.selectorTarget) ? operatorId.selector : operatorId.selectorTarget.element)) === null || _getElement === void 0 ? void 0 : _getElement.getBoundingClientRect().top;
+    var delat = targetTop - canvas.current.getBoundingClientRect().top;
+    return {
+      top: delat > 24 ? -24 : 0
+    };
+  }, [operatorId.selector, operatorId.selectorTarget]);
   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;
@@ -218,9 +230,11 @@ var DesignOperator = function DesignOperator(_ref) {
     }).watch();
     var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
       if (payload.target) setOperatorId({
-        detector: payload.target
+        detector: payload.target,
+        detectorSide: payload.side
       });else setOperatorId({
-        detector: null
+        detector: null,
+        detectorSide: null
       });
     }).watch();
     var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
@@ -231,14 +245,16 @@ var DesignOperator = function DesignOperator(_ref) {
             selector: payload.target,
             selectorTarget: null,
             deletable: !node || node.props.buildIn !== true,
-            detector: null
+            detector: null,
+            detectorSide: null
           });
         } else {
           setOperatorId({
             selector: payload.target.id,
             selectorTarget: payload.target,
             deletable: false,
-            detector: null
+            detector: null,
+            detectorSide: null
           });
         }
       } else {
@@ -293,12 +309,12 @@ var DesignOperator = function DesignOperator(_ref) {
   }, [operatorId.selector]);
   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'],
+    className: (0, _classnames.default)(_design.default['lc-painter-design-detector'], _design.default["sider-".concat(operatorId.detectorSide)]),
     style: getOperatorStyle(canvas.current, getElement(operatorId.detector))
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _design.default['lc-painter-design-detector-name'],
     style: {
-      top: ((_getElement = getElement(operatorId.detector)) === null || _getElement === void 0 ? void 0 : _getElement.offsetTop) < 23 ? 0 : '-23px'
+      top: ((_getElement2 = getElement(operatorId.detector)) === null || _getElement2 === void 0 ? void 0 : _getElement2.offsetTop) < 23 ? 0 : '-23px'
     }
   }, lastDetectorName ? "".concat(lastDetectorName, "(").concat(operatorId.detector, ")") : null)), operatorId.selector && /*#__PURE__*/_react.default.createElement("div", {
     id: "lc-selector",
@@ -307,13 +323,7 @@ var DesignOperator = function DesignOperator(_ref) {
     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
-    } : ((_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'
-    }
+    style: activeDomPosition
   }, /*#__PURE__*/_react.default.createElement(_antd.Dropdown, {
     overlay: acticeProps.menu,
     placement: "bottomLeft"