@next-core/editor-bricks-helper 0.40.1 → 0.42.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.42.0](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.41.1...@next-core/editor-bricks-helper@0.42.0) (2022-06-14)
+
+
+### Features
+
+* **BuilderDataManager:** support preview snippet apply ([ef506d4](https://github.com/easyops-cn/next-core/commit/ef506d4ae83946665e1a30a125948ff5504ba4aa))
+
+
+
+
+
+## [0.41.1](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.41.0...@next-core/editor-bricks-helper@0.41.1) (2022-06-10)
+
+**Note:** Version bump only for package @next-core/editor-bricks-helper
+
+
+
+
+
+# [0.41.0](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.40.1...@next-core/editor-bricks-helper@0.41.0) (2022-06-10)
+
+
+### Features
+
+* **BuilderDataManager:** support preview addNode ([b5b0ee7](https://github.com/easyops-cn/next-core/commit/b5b0ee7e55466486a6d31656ec384d0114111ce7))
+
+
+
+
+
 ## [0.40.1](https://github.com/easyops-cn/next-core/compare/@next-core/editor-bricks-helper@0.40.0...@next-core/editor-bricks-helper@0.40.1) (2022-06-06)
 
 **Note:** Version bump only for package @next-core/editor-bricks-helper

package/dist/index.bundle.js

@@ -1,17 +1,17 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/defineProperty'), require('lodash'), require('@next-core/brick-utils'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-dnd'), require('@babel/runtime/helpers/asyncToGenerator'), require('@next-core/brick-kit'), require('js-yaml'), require('@babel/runtime/helpers/decorate'), require('react-dom'), require('react-dnd-html5-backend')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/defineProperty', 'lodash', '@next-core/brick-utils', '@babel/runtime/helpers/objectWithoutProperties', 'react-dnd', '@babel/runtime/helpers/asyncToGenerator', '@next-core/brick-kit', 'js-yaml', '@babel/runtime/helpers/decorate', 'react-dom', 'react-dnd-html5-backend'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EditorBricksHelper = {}, global.React, global._objectSpread, global._defineProperty, global.lodash, global.brickUtils, global._objectWithoutProperties, global.reactDnd, global._asyncToGenerator, global.brickKit, global.yaml, global._decorate, global.ReactDOM, global.reactDndHtml5Backend));
-})(this, (function (exports, React, _objectSpread, _defineProperty, lodash, brickUtils, _objectWithoutProperties, reactDnd, _asyncToGenerator, brickKit, yaml, _decorate, ReactDOM, reactDndHtml5Backend) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@babel/runtime/helpers/objectSpread2'), require('@babel/runtime/helpers/defineProperty'), require('lodash'), require('@next-core/brick-utils'), require('js-yaml'), require('@babel/runtime/helpers/objectWithoutProperties'), require('react-dnd'), require('@babel/runtime/helpers/asyncToGenerator'), require('@next-core/brick-kit'), require('@babel/runtime/helpers/decorate'), require('react-dom'), require('react-dnd-html5-backend')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@babel/runtime/helpers/objectSpread2', '@babel/runtime/helpers/defineProperty', 'lodash', '@next-core/brick-utils', 'js-yaml', '@babel/runtime/helpers/objectWithoutProperties', 'react-dnd', '@babel/runtime/helpers/asyncToGenerator', '@next-core/brick-kit', '@babel/runtime/helpers/decorate', 'react-dom', 'react-dnd-html5-backend'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EditorBricksHelper = {}, global.React, global._objectSpread, global._defineProperty, global.lodash, global.brickUtils, global.yaml, global._objectWithoutProperties, global.reactDnd, global._asyncToGenerator, global.brickKit, global._decorate, global.ReactDOM, global.reactDndHtml5Backend));
+})(this, (function (exports, React, _objectSpread, _defineProperty, lodash, brickUtils, yaml, _objectWithoutProperties, reactDnd, _asyncToGenerator, brickKit, _decorate, ReactDOM, reactDndHtml5Backend) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
   var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+  var yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
   var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
   var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-  var yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
   var _decorate__default = /*#__PURE__*/_interopDefaultLegacy(_decorate);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
@@ -660,6 +660,63 @@
     return nodes.find(node => node.$$uid === parentUid).$$isExpandableTemplate;
   }
 
+  var jsonFieldsInBrick = ["properties", "events", "lifeCycle", "params", "if", "transform"];
+  var yamlFieldsInBrick = ["permissionsPreCheck", "transformFrom"];
+  var ignoredFieldsInBrick = ["brick", "template", "portal", "slots", "id", "children", "instanceId"];
+  // The reverse operation of *normalize*.
+  // https://github.com/easyops-cn/next-basics/blob/5a6710d567821bcb4a0c71e22d55212193d8b0cb/bricks/next-builder/src/shared/storyboard/buildStoryboard.ts#L394
+  function reverseNormalize(brickConf, ctx) {
+    return Object.fromEntries(Object.entries(brickConf).map(_ref => {
+      var [key, value] = _ref;
+      return value === undefined || ignoredFieldsInBrick.includes(key) ? undefined : jsonFieldsInBrick.includes(key) ? [key, JSON.stringify(value)] : yamlFieldsInBrick.includes(key) ? [key, yaml__default["default"].safeDump(value)] : [key, value];
+    }).filter(Boolean).concat(Object.entries(ctx.nodeData), [["brick", ctx.nodeData.type === "template" ? brickConf.template : brickConf.brick], ["portal", ctx.isPortalCanvas || brickConf.portal]]));
+  }
+
+  function getSnippetNodeDetail(_ref) {
+    var {
+      parent,
+      parentUid,
+      mountPoint,
+      nodeUid,
+      brickConf,
+      isPortalCanvas,
+      sort
+    } = _ref;
+    var type = brickConf.template ? "template" : brickConf.bg ? "provider" : "brick";
+    return {
+      nodeUid,
+      parentUid,
+      nodeData: reverseNormalize(brickConf, {
+        isPortalCanvas,
+        nodeData: {
+          type,
+          parent,
+          mountPoint,
+          sort
+        }
+      }),
+      children: brickConf.slots ? Object.entries(brickConf.slots).flatMap(_ref2 => {
+        var [mountPoint, slotConf] = _ref2;
+        return slotConf.bricks.map(childBrickConf => ({
+          childBrickConf,
+          mountPoint
+        }));
+      }).map((_ref3, index) => {
+        var {
+          childBrickConf,
+          mountPoint
+        } = _ref3;
+        return getSnippetNodeDetail({
+          parentUid: nodeUid,
+          mountPoint,
+          nodeUid: getUniqueNodeId(),
+          brickConf: childBrickConf,
+          sort: index
+        });
+      }) : []
+    };
+  }
+
   var BuilderInternalEventType;
 
   (function (BuilderInternalEventType) {
@@ -816,7 +873,8 @@
         nodeUid,
         parentUid,
         nodeUids,
-        nodeData
+        nodeData,
+        sort
       } = detail;
       var {
         nodes: addNodes,
@@ -827,7 +885,7 @@
         parent: parentUid,
         child: nodeUid,
         mountPoint: nodeData.mountPoint,
-        sort: undefined,
+        sort: sort !== null && sort !== void 0 ? sort : undefined,
         $$isTemplateDelegated: isParentExpandableTemplate(nodes, parentUid)
       }).concat(addEdges);
       var newData = {
@@ -1065,30 +1123,35 @@
       this.reorder(parentUid, orderedEdges);
     }
 
-    workbenchTreeNodeMove(detail) {
-      var {
-        rootId,
-        nodes,
-        edges,
-        wrapperNode
-      } = this.data;
+    getDragInfo(_ref3) {
+      var _dragEdge$mountPoint;
+
       var {
+        nodeData,
         dragNodeUid,
         dragOverNodeUid,
-        dragParentNodeUid,
         dragStatus
-      } = detail;
+      } = _ref3;
+      var {
+        rootId,
+        nodes,
+        edges
+      } = this.data;
       var isDragRoot = dragOverNodeUid === rootId;
-      var nodeData = nodes.find(item => item.$$uid === dragNodeUid);
-      var dragEdge = edges.find(item => item.child === dragNodeUid);
+      /*
+       * 如果没有id, 则为新增状态, 没有edge, 否则为移动状态
+       */
+
+      var isAdd = nodeData.id;
+      var dragEdge = !isAdd ? edges.find(item => item.child === dragNodeUid) : null;
       var dragOverEdge = edges.find(item => item.child === dragOverNodeUid);
       /**
        * 如果是根节点, 则mountPoint强制等于 bricks
-       * 如果是属于拖动进某个节点中, 则使用原mountPoint
+       * 如果是属于拖动进某个节点中, 则使用原mountPoint(新增节点为content)
        * 其他情况, 使用被拖拽节点的mountPoint
        */
 
-      var mountPoint = isDragRoot ? "bricks" : dragStatus === "inside" ? dragEdge.mountPoint : dragOverEdge.mountPoint;
+      var mountPoint = isDragRoot ? "bricks" : dragStatus === "inside" ? (_dragEdge$mountPoint = dragEdge === null || dragEdge === void 0 ? void 0 : dragEdge.mountPoint) !== null && _dragEdge$mountPoint !== void 0 ? _dragEdge$mountPoint : "content" : dragOverEdge.mountPoint;
       var parentEdge = edges.find(item => item.child === dragOverNodeUid);
       /**
        * 如果是根节点, parentUid强制等于rootId
@@ -1111,31 +1174,141 @@
 
         sortNodeIds.push(nodeData.id);
       } else if (dragStatus === "top" || dragStatus === "bottom") {
-        var _dragEdge = edges.find(edge => edge.child === dragNodeUid);
+        var _dragEdge$child;
 
         var overIndex = sortUids.findIndex(item => item === dragOverNodeUid);
         sortIndex = dragStatus === "top" ? overIndex : overIndex + 1; // 排序修正
 
         sortNodeIds.splice(sortIndex, 0, nodeData.id);
-        sortUids.splice(sortIndex, 0, _dragEdge.child);
+        sortUids.splice(sortIndex, 0, (_dragEdge$child = dragEdge === null || dragEdge === void 0 ? void 0 : dragEdge.child) !== null && _dragEdge$child !== void 0 ? _dragEdge$child : null);
       }
 
+      return {
+        parentUid,
+        mountPoint,
+        sortIndex,
+        parnetNodeData,
+        sortUids,
+        sortNodeIds
+      };
+    }
+
+    workbenchNodeAdd(detail) {
+      var {
+        rootId,
+        nodes
+      } = this.data;
+      var {
+        nodeData,
+        dragOverNodeInstanceId,
+        dragStatus
+      } = detail;
+
+      if (nodeData.instanceId) ; else {
+        var _nodes$find;
+
+        // insert
+        var newNodeUid = getUniqueNodeId();
+        var isRoot = dragOverNodeInstanceId === "#main-mount-point";
+        var parentInstanceId = isRoot ? nodes.find(item => item.$$uid === rootId).instanceId : dragOverNodeInstanceId;
+        var dragOverNodeUid = (_nodes$find = nodes.find(item => isRoot ? item.$$uid === rootId : item.instanceId === dragOverNodeInstanceId)) === null || _nodes$find === void 0 ? void 0 : _nodes$find.$$uid;
+        var {
+          parentUid,
+          mountPoint,
+          sortIndex,
+          sortUids: nodeUids,
+          sortNodeIds: nodeIds
+        } = this.getDragInfo({
+          nodeData: {
+            id: null
+          },
+          dragNodeUid: newNodeUid,
+          dragOverNodeUid,
+          dragStatus
+        });
+        nodeData.parent = nodes.find(item => item.$$uid === parentUid).instanceId;
+        nodeData.mountPoint = mountPoint;
+
+        if (nodeData.bricks) {
+          // snippet
+          this.snippetApply({
+            parentUid,
+            nodeDetails: nodeData.bricks.map(brickConf => getSnippetNodeDetail({
+              parent: parentInstanceId,
+              parentUid: parentUid,
+              mountPoint: mountPoint,
+              nodeUid: newNodeUid,
+              brickConf: brickConf,
+              isPortalCanvas: false
+            })),
+            nodeIds,
+            nodeUids
+          });
+          return;
+        }
+
+        this.runAddNodeAction({
+          nodeUid: newNodeUid,
+          parentUid,
+          nodeUids,
+          nodeIds,
+          nodeData,
+          sort: sortIndex
+        });
+        this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.NODE_ADD, {
+          detail: {
+            nodeUid: newNodeUid,
+            parentUid,
+            nodeUids,
+            nodeIds,
+            nodeData
+          }
+        }));
+      }
+    }
+
+    workbenchTreeNodeMove(detail) {
+      var {
+        rootId,
+        nodes,
+        edges,
+        wrapperNode
+      } = this.data;
+      var {
+        dragNodeUid,
+        dragOverNodeUid,
+        dragStatus
+      } = detail;
+      var nodeData = nodes.find(item => item.$$uid === dragNodeUid);
+      var {
+        parentUid,
+        parnetNodeData,
+        mountPoint,
+        sortIndex,
+        sortUids: nodeUids,
+        sortNodeIds: nodeIds
+      } = this.getDragInfo({
+        nodeData,
+        dragNodeUid,
+        dragOverNodeUid,
+        dragStatus
+      });
       var newData = {
         rootId,
         nodes,
         edges: edges.filter(edge => edge.child !== dragNodeUid).concat({
-          parent: dragParentNodeUid,
+          parent: parentUid,
           child: dragNodeUid,
           mountPoint: mountPoint,
           sort: sortIndex,
-          $$isTemplateDelegated: isParentExpandableTemplate(nodes, dragParentNodeUid)
+          $$isTemplateDelegated: isParentExpandableTemplate(nodes, parentUid)
         }),
         wrapperNode
       };
       this.data = _objectSpread__default["default"](_objectSpread__default["default"]({}, newData), {}, {
         edges: reorderBuilderEdges(newData, {
           parentUid,
-          nodeUids: sortUids
+          nodeUids
         })
       });
       this.triggerDataChange();
@@ -1143,7 +1316,7 @@
         detail: {
           nodeUid: dragNodeUid,
           nodeInstanceId: nodeData.instanceId,
-          nodeIds: sortNodeIds,
+          nodeIds,
           nodeData: {
             parent: parnetNodeData.instanceId,
             mountPoint: mountPoint
@@ -1156,10 +1329,10 @@
      */
 
 
-    moveMountPoint(_ref3, mountPoint, direction) {
+    moveMountPoint(_ref4, mountPoint, direction) {
       var {
         $$uid: parentUid
-      } = _ref3;
+      } = _ref4;
       var {
         relatedEdges,
         mountPoints
@@ -2254,63 +2427,6 @@
     };
   }
 
-  var jsonFieldsInBrick = ["properties", "events", "lifeCycle", "params", "if", "transform"];
-  var yamlFieldsInBrick = ["permissionsPreCheck", "transformFrom"];
-  var ignoredFieldsInBrick = ["brick", "template", "portal", "slots", "id", "children", "instanceId"];
-  // The reverse operation of *normalize*.
-  // https://github.com/easyops-cn/next-basics/blob/5a6710d567821bcb4a0c71e22d55212193d8b0cb/bricks/next-builder/src/shared/storyboard/buildStoryboard.ts#L394
-  function reverseNormalize(brickConf, ctx) {
-    return Object.fromEntries(Object.entries(brickConf).map(_ref => {
-      var [key, value] = _ref;
-      return value === undefined || ignoredFieldsInBrick.includes(key) ? undefined : jsonFieldsInBrick.includes(key) ? [key, JSON.stringify(value)] : yamlFieldsInBrick.includes(key) ? [key, yaml__default["default"].safeDump(value)] : [key, value];
-    }).filter(Boolean).concat(Object.entries(ctx.nodeData), [["brick", ctx.nodeData.type === "template" ? brickConf.template : brickConf.brick], ["portal", ctx.isPortalCanvas || brickConf.portal]]));
-  }
-
-  function getSnippetNodeDetail(_ref) {
-    var {
-      parent,
-      parentUid,
-      mountPoint,
-      nodeUid,
-      brickConf,
-      isPortalCanvas,
-      sort
-    } = _ref;
-    var type = brickConf.template ? "template" : brickConf.bg ? "provider" : "brick";
-    return {
-      nodeUid,
-      parentUid,
-      nodeData: reverseNormalize(brickConf, {
-        isPortalCanvas,
-        nodeData: {
-          type,
-          parent,
-          mountPoint,
-          sort
-        }
-      }),
-      children: brickConf.slots ? Object.entries(brickConf.slots).flatMap(_ref2 => {
-        var [mountPoint, slotConf] = _ref2;
-        return slotConf.bricks.map(childBrickConf => ({
-          childBrickConf,
-          mountPoint
-        }));
-      }).map((_ref3, index) => {
-        var {
-          childBrickConf,
-          mountPoint
-        } = _ref3;
-        return getSnippetNodeDetail({
-          parentUid: nodeUid,
-          mountPoint,
-          nodeUid: getUniqueNodeId(),
-          brickConf: childBrickConf,
-          sort: index
-        });
-      }) : []
-    };
-  }
-
   function processDrop(_ref) {
     var {
       manager,