@next-core/editor-bricks-helper 0.37.8 → 0.38.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.38.2](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.38.1...@next-core/editor-bricks-helper@0.38.2) (2022-03-29)
+
+**Note:** Version bump only for package @next-core/editor-bricks-helper
+
+
+
+
+
+## [0.38.1](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.38.0...@next-core/editor-bricks-helper@0.38.1) (2022-03-28)
+
+**Note:** Version bump only for package @next-core/editor-bricks-helper
+
+
+
+
+
+# [0.38.0](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.37.8...@next-core/editor-bricks-helper@0.38.0) (2022-03-25)
+
+
+### Features
+
+* move node up or down ([bf45965](https://github.com/easyops-cn/next-core/commit/bf45965d3a59a7b952e956cc3b84e9502fba76e5))
+
+
+
+
+
 ## [0.37.8](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.37.7...@next-core/editor-bricks-helper@0.37.8) (2022-03-24)
 
 **Note:** Version bump only for package @next-core/editor-bricks-helper

package/dist/index.bundle.js

@@ -715,46 +715,6 @@
       _defineProperty__default["default"](this, "localJsonStorage", new brickUtils.JsonStorage(localStorage));
 
       _defineProperty__default["default"](this, "outlineDisabledNodes", new Set((_this$localJsonStorag = this.localJsonStorage.getItem(storageKeyOfOutlineDisabledNodes)) !== null && _this$localJsonStorag !== void 0 ? _this$localJsonStorag : []));
-
-      _defineProperty__default["default"](this, "runAddNodeAction", detail => {
-        var {
-          rootId,
-          nodes,
-          edges,
-          wrapperNode
-        } = this.data;
-        var {
-          nodeUid,
-          parentUid,
-          nodeUids,
-          nodeData
-        } = detail;
-        var {
-          nodes: addNodes,
-          edges: addEdges
-        } = getAppendingNodesAndEdges(lodash.omit(nodeData, ["parent"]), nodeUid, this.templateSourceMap, this.getStoryList());
-        var newNodes = nodes.concat(addNodes);
-        var newEdges = edges.concat({
-          parent: parentUid,
-          child: nodeUid,
-          mountPoint: nodeData.mountPoint,
-          sort: undefined,
-          $$isTemplateDelegated: isParentExpandableTemplate(nodes, parentUid)
-        }).concat(addEdges);
-        var newData = {
-          rootId,
-          nodes: newNodes,
-          edges: newEdges,
-          wrapperNode
-        };
-        this.data = _objectSpread__default["default"](_objectSpread__default["default"]({}, newData), {}, {
-          edges: reorderBuilderEdges(newData, {
-            parentUid,
-            nodeUids
-          })
-        });
-        this.triggerDataChange();
-      });
     }
 
     getData() {
@@ -838,6 +798,46 @@
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.DATA_CHANGE));
     }
 
+    runAddNodeAction(detail) {
+      var {
+        rootId,
+        nodes,
+        edges,
+        wrapperNode
+      } = this.data;
+      var {
+        nodeUid,
+        parentUid,
+        nodeUids,
+        nodeData
+      } = detail;
+      var {
+        nodes: addNodes,
+        edges: addEdges
+      } = getAppendingNodesAndEdges(lodash.omit(nodeData, ["parent"]), nodeUid, this.templateSourceMap, this.getStoryList());
+      var newNodes = nodes.concat(addNodes);
+      var newEdges = edges.concat({
+        parent: parentUid,
+        child: nodeUid,
+        mountPoint: nodeData.mountPoint,
+        sort: undefined,
+        $$isTemplateDelegated: isParentExpandableTemplate(nodes, parentUid)
+      }).concat(addEdges);
+      var newData = {
+        rootId,
+        nodes: newNodes,
+        edges: newEdges,
+        wrapperNode
+      };
+      this.data = _objectSpread__default["default"](_objectSpread__default["default"]({}, newData), {}, {
+        edges: reorderBuilderEdges(newData, {
+          parentUid,
+          nodeUids
+        })
+      });
+      this.triggerDataChange();
+    }
+
     updateBrick(detail) {
       this.data = deleteNodeFromTree(detail.nodeUid, this.data);
       this.runAddNodeAction(detail);
@@ -984,6 +984,11 @@
       };
       this.triggerDataChange();
     }
+    /**
+     * Move node anywhere by drag-n-drop.
+     * @deprecated use `moveNode` instead.
+     */
+
 
     nodeMove(detail) {
       var {
@@ -1022,6 +1027,81 @@
         detail
       }));
     }
+    /**
+     * Move node up or down.
+     */
+
+
+    moveNode(_ref2, direction) {
+      var {
+        $$uid: nodeUid
+      } = _ref2;
+      var {
+        parent: parentUid,
+        mountPoint
+      } = this.data.edges.find(edge => edge.child === nodeUid);
+      var {
+        relatedEdges,
+        mountPoints
+      } = getRelatedEdgesAndMountPoint(this.data.edges, parentUid);
+      /** Edges of the same mount-point */
+
+      var siblingEdges = relatedEdges.filter(edge => edge.mountPoint === mountPoint);
+      var index = siblingEdges.findIndex(edge => edge.child === nodeUid);
+      var orderedSiblingEdges = moveItemInList(siblingEdges, index, direction);
+
+      if (!orderedSiblingEdges) {
+        return;
+      }
+
+      var orderedEdges = lodash.sortBy(relatedEdges, edge => mountPoints.indexOf(edge.mountPoint), edge => orderedSiblingEdges.indexOf(edge));
+      this.reorder(parentUid, orderedEdges);
+    }
+    /**
+     * Move mount-point up or down.
+     */
+
+
+    moveMountPoint(_ref3, mountPoint, direction) {
+      var {
+        $$uid: parentUid
+      } = _ref3;
+      var {
+        relatedEdges,
+        mountPoints
+      } = getRelatedEdgesAndMountPoint(this.data.edges, parentUid);
+      var index = mountPoints.indexOf(mountPoint);
+      var orderedMountPoints = moveItemInList(mountPoints, index, direction);
+
+      if (!orderedMountPoints) {
+        return;
+      }
+
+      var orderedEdges = lodash.sortBy(relatedEdges, edge => orderedMountPoints.indexOf(edge.mountPoint), "sort");
+      this.reorder(parentUid, orderedEdges);
+    }
+
+    reorder(parentUid, orderedEdges) {
+      var {
+        nodes
+      } = this.data;
+      var childUids = orderedEdges.map(edge => edge.child);
+      this.data = _objectSpread__default["default"](_objectSpread__default["default"]({}, this.data), {}, {
+        edges: reorderBuilderEdges(this.data, {
+          parentUid,
+          nodeUids: childUids
+        })
+      });
+      this.triggerDataChange();
+      var childIds = childUids.map(uid => nodes.find(node => node.$$uid === uid)).map(node => node.id);
+      this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.NODE_REORDER, {
+        detail: {
+          nodeUids: childUids,
+          parentUid,
+          nodeIds: childIds
+        }
+      }));
+    }
 
     contextUpdated(detail) {
       var {
@@ -1220,6 +1300,41 @@
 
   }
 
+  function getRelatedEdgesAndMountPoint(edges, parentUid) {
+    var relatedEdges = lodash.sortBy(edges.filter(edge => edge.parent === parentUid && !edge.$$isTemplateExpanded), "sort");
+    var mountPointSet = new Set();
+
+    for (var edge of relatedEdges) {
+      mountPointSet.add(edge.mountPoint);
+    }
+
+    var mountPoints = Array.from(mountPointSet);
+    return {
+      relatedEdges,
+      mountPoints
+    };
+  }
+
+  function moveItemInList(list, index, direction) {
+    var upperIndex;
+
+    if (direction === "up") {
+      if (index <= 0) {
+        return;
+      }
+
+      upperIndex = index - 1;
+    } else {
+      if (index === -1 || index >= list.length - 1) {
+        return;
+      }
+
+      upperIndex = index;
+    }
+
+    return [...list.slice(0, upperIndex), list[upperIndex + 1], list[upperIndex], ...list.slice(upperIndex + 2)];
+  }
+
   var BuilderContext = /*#__PURE__*/React__default["default"].createContext({});
   function createBuilderContext() {
     return {