@next-core/editor-bricks-helper 0.33.34 → 0.35.0

package/dist/index.esm.js

@@ -294,14 +294,16 @@ function deleteNodeFromTree(nodeUid, _ref) {
   var {
     rootId,
     nodes,
-    edges
+    edges,
+    wrapperNode
   } = _ref;
   var idsToDelete = new Set();
   collectIdsToDelete(nodeUid, edges, idsToDelete);
   return {
     rootId,
     nodes: nodes.filter(node => !idsToDelete.has(node.$$uid)),
-    edges: edges.filter(edge => !idsToDelete.has(edge.parent) && !idsToDelete.has(edge.child))
+    edges: edges.filter(edge => !idsToDelete.has(edge.parent) && !idsToDelete.has(edge.child)),
+    wrapperNode: (wrapperNode === null || wrapperNode === void 0 ? void 0 : wrapperNode.$$uid) === nodeUid ? null : wrapperNode
   };
 }
 
@@ -453,10 +455,12 @@ function getBuilderNode(nodeData, nodeUid, isTemplateInternalNode) {
 
 function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
   var storyList = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  var isRoot = arguments.length > 4 ? arguments[4] : undefined;
   var nodes = [];
   var edges = [];
+  var wrapperNode;
 
-  var walk = (nodeData, currentUid, processedTemplateSet, isTemplateInternalNode, inheritedTemplateRefToUid) => {
+  var walk = (nodeData, currentUid, processedTemplateSet, isTemplateInternalNode, inheritedTemplateRefToUid, layoutType) => {
     var _templateSource$child, _storyList$find, _templateSource$child2;
 
     var builderNode = getBuilderNode(nodeData, currentUid, isTemplateInternalNode);
@@ -469,7 +473,11 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
     var templateSource;
 
     if (isBrickNode(builderNode) && (!builderNode.brick.includes(".") && builderNode.brick.startsWith("tpl-") && !processedTemplateSet.has(builderNode.brick) && (templateSource = templateSourceMap === null || templateSourceMap === void 0 ? void 0 : templateSourceMap.get(builderNode.brick)) && ((_templateSource$child = templateSource.children) === null || _templateSource$child === void 0 ? void 0 : _templateSource$child.length) > 0 || builderNode.brick.includes(".tpl-") && (templateSource = storyList === null || storyList === void 0 ? void 0 : (_storyList$find = storyList.find(item => item.storyId === builderNode.brick)) === null || _storyList$find === void 0 ? void 0 : _storyList$find.originData) && ((_templateSource$child2 = templateSource.children) === null || _templateSource$child2 === void 0 ? void 0 : _templateSource$child2.length) > 0)) {
-      // Avoid nesting the same templates.
+      if (templateSource.layoutType === "wrapper") {
+        builderNode.layoutType = "wrapper";
+      } // Avoid nesting the same templates.
+
+
       processedTemplateSet.add(builderNode.brick);
       builderNode.$$isExpandableTemplate = true;
       builderNode.$$templateProxy = templateSource.proxy && JSON.parse(templateSource.proxy);
@@ -613,9 +621,30 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
   };
 
   walk(nodeData, nodeUid, new Set());
+
+  var _loop2 = function (i) {
+    // 布局模板属于第一层
+    var item = nodes[i];
+
+    if (item.layoutType === "wrapper" && isRoot && edges.find(edge => edge.child === item.$$uid).parent === nodeUid) {
+      if (!wrapperNode) {
+        wrapperNode = item;
+      }
+
+      return "break";
+    }
+  };
+
+  for (var i = 0; i < nodes.length; i++) {
+    var _ret = _loop2(i);
+
+    if (_ret === "break") break;
+  }
+
   return {
     nodes,
-    edges
+    edges,
+    wrapperNode
   };
 }
 function isBasicRefProperty(propRef) {
@@ -653,7 +682,8 @@ class BuilderDataManager {
     _defineProperty(this, "data", {
       rootId: null,
       nodes: [],
-      edges: []
+      edges: [],
+      wrapperNode: null
     });
 
     _defineProperty(this, "hoverNodeUid", void 0);
@@ -688,7 +718,8 @@ class BuilderDataManager {
       var {
         rootId,
         nodes,
-        edges
+        edges,
+        wrapperNode
       } = this.data;
       var {
         nodeUid,
@@ -711,7 +742,8 @@ class BuilderDataManager {
       var newData = {
         rootId,
         nodes: newNodes,
-        edges: newEdges
+        edges: newEdges,
+        wrapperNode
       };
       this.data = _objectSpread(_objectSpread({}, newData), {}, {
         edges: reorderBuilderEdges(newData, {
@@ -785,7 +817,7 @@ class BuilderDataManager {
 
     var newData = _objectSpread({
       rootId
-    }, getAppendingNodesAndEdges(root, rootId, templateSourceMap, this.storyList));
+    }, getAppendingNodesAndEdges(root, rootId, templateSourceMap, this.storyList, true));
 
     this.data = _objectSpread(_objectSpread({}, newData), {}, {
       edges: expandTemplateEdges(newData)
@@ -809,7 +841,23 @@ class BuilderDataManager {
     this.runAddNodeAction(detail);
   }
 
+  redirectMountPoint(detail) {
+    var {
+      rootId,
+      wrapperNode
+    } = this.data;
+
+    if (detail.parentUid === rootId) {
+      detail.nodeData.mountPoint = "bricks";
+    }
+
+    if (wrapperNode && wrapperNode.instanceId === detail.nodeData.parent) {
+      detail.nodeData.mountPoint = "content";
+    }
+  }
+
   nodeAdd(detail) {
+    this.redirectMountPoint(detail);
     this.runAddNodeAction(detail);
     this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.NODE_ADD, {
       detail
@@ -820,7 +868,8 @@ class BuilderDataManager {
     var {
       rootId,
       nodes,
-      edges
+      edges,
+      wrapperNode
     } = this.data;
     var {
       nodeUid,
@@ -832,7 +881,8 @@ class BuilderDataManager {
         id: nodeData.id,
         instanceId: nodeData.instanceId
       }) : node),
-      edges
+      edges,
+      wrapperNode
     };
     this.triggerDataChange();
   }
@@ -841,7 +891,8 @@ class BuilderDataManager {
     var {
       rootId,
       nodes,
-      edges
+      edges,
+      wrapperNode
     } = this.data;
     var {
       nodeDetails,
@@ -883,7 +934,8 @@ class BuilderDataManager {
     var newData = {
       rootId,
       nodes: newNodes,
-      edges: newEdges
+      edges: newEdges,
+      wrapperNode
     };
     this.data = _objectSpread(_objectSpread({}, newData), {}, {
       edges: reorderBuilderEdges(newData, {
@@ -924,8 +976,10 @@ class BuilderDataManager {
     var {
       rootId,
       nodes,
-      edges
+      edges,
+      wrapperNode
     } = this.data;
+    this.redirectMountPoint(detail);
     var {
       nodeUid,
       parentUid,
@@ -941,7 +995,8 @@ class BuilderDataManager {
         mountPoint: nodeData.mountPoint,
         sort: undefined,
         $$isTemplateDelegated: isParentExpandableTemplate(nodes, parentUid)
-      })
+      }),
+      wrapperNode
     };
     this.data = _objectSpread(_objectSpread({}, newData), {}, {
       edges: reorderBuilderEdges(newData, {
@@ -959,14 +1014,16 @@ class BuilderDataManager {
     var {
       rootId,
       nodes,
-      edges
+      edges,
+      wrapperNode
     } = this.data;
     this.data = {
       rootId,
       edges,
       nodes: nodes.map(node => node.$$uid === rootId ? _objectSpread(_objectSpread({}, node), {}, {
         context: detail.context
-      }) : node)
+      }) : node),
+      wrapperNode
     };
     this.triggerDataChange();
   }
@@ -1181,14 +1238,22 @@ function useBuilderData() {
 function useBuilderNode(_ref) {
   var {
     nodeUid,
-    isRoot
+    isRoot,
+    isWrapper
   } = _ref;
   var {
     rootId,
-    nodes
+    nodes,
+    wrapperNode
   } = useBuilderData();
   var currentUid = isRoot ? rootId : nodeUid;
-  return useMemo(() => nodes.find(node => node.$$uid === currentUid), [nodes, currentUid]);
+  return useMemo(() => {
+    if (isWrapper) {
+      return wrapperNode;
+    }
+
+    return nodes.find(node => node.$$uid === currentUid);
+  }, [nodes, currentUid, isWrapper, wrapperNode]);
 }
 
 function useBuilderContextMenuStatus() {
@@ -1600,26 +1665,30 @@ function useBuilderGroupedChildNodes(_ref) {
   var {
     nodeUid,
     isRoot,
-    doNotExpandTemplates
+    doNotExpandTemplates,
+    isWrapper
   } = _ref;
   var {
     rootId,
     nodes,
-    edges
+    edges,
+    wrapperNode
   } = useBuilderData();
   return useMemo(() => getBuilderGroupedChildNodes({
     nodes,
     edges,
-    nodeUid: isRoot ? rootId : nodeUid,
-    doNotExpandTemplates
-  }), [doNotExpandTemplates, edges, isRoot, nodeUid, nodes, rootId]);
+    nodeUid: isRoot ? isWrapper ? wrapperNode.$$uid : rootId : nodeUid,
+    doNotExpandTemplates,
+    isWrapper: isWrapper
+  }), [doNotExpandTemplates, edges, isRoot, nodeUid, nodes, rootId, isWrapper, wrapperNode]);
 }
 function getBuilderGroupedChildNodes(_ref2) {
   var {
     nodeUid,
     nodes,
     edges,
-    doNotExpandTemplates
+    doNotExpandTemplates,
+    isWrapper
   } = _ref2;
   var groups = new Map();
   var relatedEdges = sortBy(edges.filter(edge => edge.parent === nodeUid && (doNotExpandTemplates ? !edge.$$isTemplateInternal : !edge.$$isTemplateDelegated)), [edge => edge.sort]);
@@ -1641,7 +1710,7 @@ function getBuilderGroupedChildNodes(_ref2) {
   return Array.from(groups.entries()).map(_ref3 => {
     var [mountPoint, childNodes] = _ref3;
     return {
-      mountPoint,
+      mountPoint: isWrapper ? "bricks" : mountPoint,
       childNodes
     };
   });
@@ -2131,20 +2200,30 @@ function DropZone(_ref) {
     dropZoneStyle,
     dropZoneBodyStyle,
     slotContentLayout,
-    showOutlineIfEmpty
+    showOutlineIfEmpty,
+    hiddenWrapper = true
   } = _ref;
   var dropZoneBody = React.useRef();
   var [dropPositionCursor, setDropPositionCursor] = React.useState(null);
   var dropPositionCursorRef = React.useRef();
   var contextMenuStatus = useBuilderContextMenuStatus();
   var manager = useBuilderDataManager();
+  var {
+    nodes,
+    edges,
+    wrapperNode
+  } = useBuilderData();
+  var isWrapper = hiddenWrapper && isRoot && !isEmpty(wrapperNode);
   var node = useBuilderNode({
     nodeUid,
-    isRoot
+    isRoot,
+    isWrapper
   });
   var groupedChildNodes = useBuilderGroupedChildNodes({
     nodeUid,
-    isRoot
+    isRoot,
+    doNotExpandTemplates: isWrapper,
+    isWrapper
   });
   var isGeneralizedPortalCanvas = independentPortalCanvas ? canvasIndex > 0 : isPortalCanvas;
   var hasTabs = separateCanvas || independentPortalCanvas;
@@ -2174,10 +2253,6 @@ function DropZone(_ref) {
 
     return isGeneralizedPortalCanvas ? selfChildNodes.length : 0;
   }, [hasTabs, selfChildNodesInCurrentCanvas, isGeneralizedPortalCanvas, selfChildNodes]);
-  var {
-    nodes,
-    edges
-  } = useBuilderData();
   var getDroppingContext = React.useCallback(() => {
     if (delegatedContext) {
       var _siblingGroups$find$c, _siblingGroups$find;
@@ -2199,12 +2274,12 @@ function DropZone(_ref) {
 
     return {
       droppingParentUid: node.$$uid,
-      droppingParentInstanceId: node.instanceId,
+      droppingParentInstanceId: isWrapper ? wrapperNode.instanceId : node.instanceId,
       droppingMountPoint: mountPoint,
       droppingChildNodes: selfChildNodes,
       droppingSiblingGroups: groupedChildNodes
     };
-  }, [delegatedContext, edges, groupedChildNodes, mountPoint, node, nodes, selfChildNodes]);
+  }, [delegatedContext, edges, groupedChildNodes, mountPoint, node, nodes, selfChildNodes, isWrapper, wrapperNode]);
   var [{
     isDraggingOverCurrent
   }, dropRef] = useDrop({
@@ -2247,7 +2322,7 @@ function DropZone(_ref) {
   React.useEffect(() => {
     manager.updateDroppingStatus(delegatedContext ? delegatedContext.templateUid : node.$$uid, delegatedContext ? delegatedContext.templateMountPoint : mountPoint, isDraggingOverCurrent);
   }, [isDraggingOverCurrent, mountPoint, manager, delegatedContext, node]);
-  var droppable = !!delegatedContext || !(node.$$isExpandableTemplate || node.$$isTemplateInternalNode);
+  var droppable = !!delegatedContext || isWrapper || !(node.$$isExpandableTemplate || node.$$isTemplateInternalNode);
   var dropZoneRef = React.useRef();
   var dropZoneRefCallback = React.useCallback(element => {
     dropZoneRef.current = element;