strategy-panel 1.0.0 → 1.0.1

package/es/pages/rx-models/experiment-graph.d.ts

@@ -28,17 +28,19 @@ declare class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
     reRenderSub?: Subscription;
     constructor(expId: string);
     initialize(): Promise<void>;
+    initPreviewData(graphRes: any): Promise<void>;
     loadExperimentGraph(graphRes: any): Promise<void>;
     updateExperimentGraph(nodes?: NExperimentGraph.Node[], links?: NExperimentGraph.Link[]): Promise<void>;
     delExperimentGraphElement(nodes?: string[], links?: NExperimentGraph.Link[]): Promise<void>;
     isGraphReady(): boolean;
     renderGraph: (wrapper: HTMLElement, container: HTMLElement, options?: any) => void;
-    createTypeNodeMeta: (nodeMeta: NodeMeta, nodeType: any) => BaseNode | undefined;
+    createTypeNodeMeta: (nodeMeta: NodeMeta, nodeType: any, experimentId: string) => BaseNode | undefined;
     renderNode(nodeMeta: NodeMeta): BaseNode | undefined;
     afterLayout(): void;
     renderEdge(edgeMeta: EdgeMeta): BaseEdge | undefined;
     validateContextMenu: (info: NExperimentGraph.ContextMenuInfo) => boolean;
     onSelectNodes(nodes: BaseNode[]): void;
+    onClearSelectNodes(): void;
     handlerResize: (e: CustomEvent<string>) => void;
     onConnectNode(args: any): Promise<{
         success: boolean;
@@ -65,9 +67,7 @@ declare class ExperimentGraph extends GraphCore<BaseNode, BaseEdge> {
         success: boolean;
     }>;
     undoDeleteNode: () => Promise<void>;
-    updateNodeData: (nodeInstanceId: string, nodeData: any) => Promise<{
-        success: boolean;
-    }>;
+    updateNodeData: (nodeInstanceId: string, nodeData: any) => Promise<void>;
     zoomGraph: (factor: number) => void;
     zoomGraphToFit: () => void;
     zoomGraphRealSize: () => void;

package/es/pages/rx-models/experiment-graph.js

@@ -313,7 +313,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
       }).subscribe(_this.handlerResize);
     };
 
-    _this.createTypeNodeMeta = function (nodeMeta, nodeType) {
+    _this.createTypeNodeMeta = function (nodeMeta, nodeType, experimentId) {
       console.log('===================== createTypeNodeMeta');
       var data = nodeMeta.data;
       var type = data.type; // 节点
@@ -323,7 +323,9 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
         if (nodeType === SIGN_OPERATION.CONDITION) {
           return _this.graph.addNode(new ConditionJudgment(_objectSpread(_objectSpread({}, nodeMeta), {}, {
             shape: 'condition-judgement-element',
-            component: /*#__PURE__*/React.createElement(ConditionElement, null)
+            component: /*#__PURE__*/React.createElement(ConditionElement, {
+              experimentId: experimentId
+            })
           })));
         }
         /* 逻辑运算 */
@@ -332,13 +334,17 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
         if (nodeType === SIGN_OPERATION.LOGICAL) {
           return _this.graph.addNode(new LogicalNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
             shape: 'logical-element',
-            component: /*#__PURE__*/React.createElement(LogicalElement, null)
+            component: /*#__PURE__*/React.createElement(LogicalElement, {
+              experimentId: experimentId
+            })
           })));
         }
 
         return _this.graph.addNode(new CommonNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
           shape: 'base-rect-node',
-          component: /*#__PURE__*/React.createElement(NodeElement, null)
+          component: /*#__PURE__*/React.createElement(NodeElement, {
+            experimentId: experimentId
+          })
         })));
       }
 
@@ -388,7 +394,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
                 nodeMeta = param.nodeMeta, clientX = param.clientX, clientY = param.clientY;
                 pos = graph.clientToLocal(clientX, clientY);
-                console.log('nodeMeta', nodeMeta);
+                console.log('nodeMeta', nodeMeta, pos);
                 nodeRes = addNode(_objectSpread(_objectSpread({}, nodeMeta), pos));
                 _context.next = 8;
                 return _this.updateExperimentGraph([nodeRes]);
@@ -523,46 +529,26 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
     _this.updateNodeData = /*#__PURE__*/function () {
       var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(nodeInstanceId, nodeData) {
-        var renameRes, cell, data, newData;
+        var cell, data, newData;
         return regeneratorRuntime.wrap(function _callee5$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
-                renameRes = {
-                  success: true
-                };
-
-                if (!renameRes.success) {
-                  _context5.next = 10;
-                  break;
-                }
-
                 cell = _this.getCellById(nodeInstanceId);
 
-                if (!cell) {
-                  _context5.next = 10;
-                  break;
-                }
-
-                data = cell.getData();
-                newData = _objectSpread(_objectSpread({}, data), {}, {
-                  nodeData: nodeData
-                });
-                cell.setData(newData);
-                _context5.next = 9;
-                return _this.updateExperimentGraph([newData]);
-
-              case 9:
-                _this.updateNodeById(nodeInstanceId, function (nodes) {
-                  nodes.setData({
-                    nodeData: nodeData
+                if (cell) {
+                  data = cell.getData();
+                  newData = _objectSpread(_objectSpread({}, data), {}, {
+                    nodeData: JSON.stringify(nodeData)
                   });
-                });
+                  cell.setData(newData);
 
-              case 10:
-                return _context5.abrupt("return", renameRes);
+                  _this.updateNodeById(nodeInstanceId, function (nodes) {
+                    nodes.setData(newData);
+                  });
+                }
 
-              case 11:
+              case 2:
               case "end":
                 return _context5.stop();
             }
@@ -677,27 +663,68 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
       }
 
       return initialize;
-    }() // 获取图
-
+    }()
   }, {
-    key: "loadExperimentGraph",
+    key: "initPreviewData",
     value: function () {
-      var _loadExperimentGraph = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(graphRes) {
+      var _initPreviewData = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(graphRes) {
+        var _this2 = this;
+
+        var nodes, links;
         return regeneratorRuntime.wrap(function _callee8$(_context8) {
           while (1) {
             switch (_context8.prev = _context8.next) {
               case 0:
-                this.experimentGraph$.next(graphRes.data);
+                console.log('initPreviewData', graphRes);
+                nodes = (graphRes === null || graphRes === void 0 ? void 0 : graphRes.nodes) || [];
+                links = (graphRes === null || graphRes === void 0 ? void 0 : graphRes.links) || [];
+                nodes === null || nodes === void 0 ? void 0 : nodes.forEach(function (item) {
+                  _this2.updateExperimentGraph([item.data]);
 
-              case 1:
+                  _this2.addNode(item);
+                });
+                links === null || links === void 0 ? void 0 : links.forEach(function (item) {
+                  _this2.updateExperimentGraph([], [item.data]);
+
+                  _this2.addEdge(item);
+                }); // await this.updateExperimentGraph([nodeRes]);
+                // await this.experimentGraph$.next(graphRes)
+
+              case 5:
               case "end":
                 return _context8.stop();
             }
           }
-        }, _callee8, this);
+        }, _callee8);
+      }));
+
+      function initPreviewData(_x7) {
+        return _initPreviewData.apply(this, arguments);
+      }
+
+      return initPreviewData;
+    }() // 获取图
+
+  }, {
+    key: "loadExperimentGraph",
+    value: function () {
+      var _loadExperimentGraph = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(graphRes) {
+        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+          while (1) {
+            switch (_context9.prev = _context9.next) {
+              case 0:
+                _context9.next = 2;
+                return this.experimentGraph$.next(graphRes.data);
+
+              case 2:
+              case "end":
+                return _context9.stop();
+            }
+          }
+        }, _callee9, this);
       }));
 
-      function loadExperimentGraph(_x7) {
+      function loadExperimentGraph(_x8) {
         return _loadExperimentGraph.apply(this, arguments);
       }
 
@@ -707,18 +734,18 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
   }, {
     key: "updateExperimentGraph",
     value: function () {
-      var _updateExperimentGraph = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+      var _updateExperimentGraph = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
         var nodes,
             links,
             oldGraph,
             newGraph,
-            _args9 = arguments;
-        return regeneratorRuntime.wrap(function _callee9$(_context9) {
+            _args10 = arguments;
+        return regeneratorRuntime.wrap(function _callee10$(_context10) {
           while (1) {
-            switch (_context9.prev = _context9.next) {
+            switch (_context10.prev = _context10.next) {
               case 0:
-                nodes = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : [];
-                links = _args9.length > 1 && _args9[1] !== undefined ? _args9[1] : [];
+                nodes = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : [];
+                links = _args10.length > 1 && _args10[1] !== undefined ? _args10[1] : [];
                 console.log('========================== updateExperimentGraph');
                 oldGraph = this.experimentGraph$.getValue();
                 newGraph = produce(oldGraph, function (nextGraph) {
@@ -738,10 +765,10 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
               case 6:
               case "end":
-                return _context9.stop();
+                return _context10.stop();
             }
           }
-        }, _callee9, this);
+        }, _callee10, this);
       }));
 
       function updateExperimentGraph() {
@@ -754,18 +781,18 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
   }, {
     key: "delExperimentGraphElement",
     value: function () {
-      var _delExperimentGraphElement = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+      var _delExperimentGraphElement = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
         var nodes,
             links,
             oldGraph,
             newGraph,
-            _args10 = arguments;
-        return regeneratorRuntime.wrap(function _callee10$(_context10) {
+            _args11 = arguments;
+        return regeneratorRuntime.wrap(function _callee11$(_context11) {
           while (1) {
-            switch (_context10.prev = _context10.next) {
+            switch (_context11.prev = _context11.next) {
               case 0:
-                nodes = _args10.length > 0 && _args10[0] !== undefined ? _args10[0] : [];
-                links = _args10.length > 1 && _args10[1] !== undefined ? _args10[1] : [];
+                nodes = _args11.length > 0 && _args11[0] !== undefined ? _args11[0] : [];
+                links = _args11.length > 1 && _args11[1] !== undefined ? _args11[1] : [];
                 oldGraph = this.experimentGraph$.getValue();
                 newGraph = produce(oldGraph, function (nextGraph) {
                   if (nodes.length) {
@@ -789,10 +816,10 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
               case 5:
               case "end":
-                return _context10.stop();
+                return _context11.stop();
             }
           }
-        }, _callee10, this);
+        }, _callee11, this);
       }));
 
       function delExperimentGraphElement() {
@@ -811,7 +838,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
   }, {
     key: "renderNode",
     value: function renderNode(nodeMeta) {
-      var _this2 = this;
+      var _this3 = this;
 
       console.log('renderNode >>>>>>', nodeMeta);
       var experimentId = this.experimentId;
@@ -826,7 +853,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
         var nodeType = id === null || id === void 0 ? void 0 : (_id$split = id.split('-')) === null || _id$split === void 0 ? void 0 : _id$split[0]; // 创建 node meta 元数据
 
-        var node = this.createTypeNodeMeta(nodeMeta, nodeType);
+        var node = this.createTypeNodeMeta(nodeMeta, nodeType, experimentId);
         if (!node) return undefined;
 
         if (nodeMeta.data.hide) {
@@ -845,7 +872,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
           })
         })));
         includedNodes.forEach(function (normalNode) {
-          var targetNode = _this2.getNodeById(normalNode.id);
+          var targetNode = _this3.getNodeById(normalNode.id);
 
           group.addChild(targetNode);
         });
@@ -905,15 +932,20 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
         this.selectedGroup$.next(undefined);
       }
     }
+  }, {
+    key: "onClearSelectNodes",
+    value: function onClearSelectNodes() {
+      this.activeNodeInstance$.next(null); // 当没选中任何东西时，清空选中的节点信息
+    }
   }, {
     key: "onConnectNode",
     value: function () {
-      var _onConnectNode = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11(args) {
+      var _onConnectNode = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(args) {
         var _args$edge, edge, isNew, source, target, node, portId, _this$graph, _this$graph2, data, sourceCell, targetCell, sourceCellData, targetCellData;
 
-        return regeneratorRuntime.wrap(function _callee11$(_context11) {
+        return regeneratorRuntime.wrap(function _callee12$(_context12) {
           while (1) {
-            switch (_context11.prev = _context11.next) {
+            switch (_context12.prev = _context12.next) {
               case 0:
                 _args$edge = args.edge, edge = _args$edge === void 0 ? {} : _args$edge, isNew = args.isNew;
                 source = edge.source, target = edge.target;
@@ -954,19 +986,19 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
                   }
                 }
 
-                return _context11.abrupt("return", {
+                return _context12.abrupt("return", {
                   success: true
                 });
 
               case 4:
               case "end":
-                return _context11.stop();
+                return _context12.stop();
             }
           }
-        }, _callee11, this);
+        }, _callee12, this);
       }));
 
-      function onConnectNode(_x8) {
+      function onConnectNode(_x9) {
         return _onConnectNode.apply(this, arguments);
       }
 
@@ -1011,13 +1043,13 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
   }, {
     key: "onMoveNodes",
     value: function () {
-      var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12(movedNodes) {
-        var _this3 = this;
+      var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(movedNodes) {
+        var _this4 = this;
 
         var targetNodes, newPos, oldGraph, newGraph;
-        return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        return regeneratorRuntime.wrap(function _callee13$(_context13) {
           while (1) {
-            switch (_context12.prev = _context12.next) {
+            switch (_context13.prev = _context13.next) {
               case 0:
                 targetNodes = movedNodes.filter(function (arg) {
                   var node = arg.node;
@@ -1032,7 +1064,7 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
                         y = current.y;
                     var id = node.id;
 
-                    _this3.updateNodeById(id, function (nodes) {
+                    _this4.updateNodeById(id, function (nodes) {
                       nodes.setData({
                         x: x,
                         y: y
@@ -1066,13 +1098,13 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
 
               case 2:
               case "end":
-                return _context12.stop();
+                return _context13.stop();
             }
           }
-        }, _callee12, this);
+        }, _callee13, this);
       }));
 
-      function onMoveNodes(_x9) {
+      function onMoveNodes(_x10) {
         return _onMoveNodes.apply(this, arguments);
       }
 
@@ -1122,22 +1154,22 @@ var ExperimentGraph = /*#__PURE__*/function (_GraphCore) {
     key: "setModal",
     value: // 打开弹窗
     function () {
-      var _setModal = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13(params) {
-        return regeneratorRuntime.wrap(function _callee13$(_context13) {
+      var _setModal = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14(params) {
+        return regeneratorRuntime.wrap(function _callee14$(_context14) {
           while (1) {
-            switch (_context13.prev = _context13.next) {
+            switch (_context14.prev = _context14.next) {
               case 0:
                 this.activeModal$.next(params);
 
               case 1:
               case "end":
-                return _context13.stop();
+                return _context14.stop();
             }
           }
-        }, _callee13, this);
+        }, _callee14, this);
       }));
 
-      function setModal(_x10) {
+      function setModal(_x11) {
         return _setModal.apply(this, arguments);
       }
 

package/es/pages/strategy-header/index.js

@@ -40,9 +40,22 @@ var Index = function Index(props) {
   var handleSave = function handleSave(type) {
     var _expGraph$graph, _expGraph$graph2;
 
-    console.log('expGraphData', expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.toJSON()); // console.log('getNodes', expGraph?.graph?.getNodes());
-
-    onSave === null || onSave === void 0 ? void 0 : onSave(type, expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph2 = expGraph.graph) === null || _expGraph$graph2 === void 0 ? void 0 : _expGraph$graph2.toJSON());
+    var nodes = expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.getNodes();
+    var nodesData = nodes === null || nodes === void 0 ? void 0 : nodes.map(function (item) {
+      return item === null || item === void 0 ? void 0 : item.store.data;
+    });
+    var edges = expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph2 = expGraph.graph) === null || _expGraph$graph2 === void 0 ? void 0 : _expGraph$graph2.getEdges();
+    var edgesData = edges === null || edges === void 0 ? void 0 : edges.map(function (item) {
+      return item === null || item === void 0 ? void 0 : item.store.data;
+    });
+    console.log({
+      nodes: nodesData,
+      links: edgesData
+    });
+    onSave === null || onSave === void 0 ? void 0 : onSave(type, {
+      nodes: nodesData,
+      links: edgesData
+    });
   };
 
   var handleFocus = function handleFocus() {

package/es/pages/strategy-header/style.less

@@ -1,22 +1,22 @@
-@import (reference) '../../style/theme-light';
-
-.header-btn {
-  display: flex;
-  align-items: center;
-  margin-right: 15px;
-  font-size: 12px;
-  cursor: pointer;
-  .header-btn-img {
-    width: 13px;
-    height: 13px;
-    margin-right: 5px;
-  }
-}
-
-.strategyHeader {
-  height: 45px !important;
-  line-height: 45px !important;
-  padding: 0 15px;
-  background: @light-gray-bg;
-  box-shadow: 0 2px 30px 0 rgba(137, 137, 137, 0.3);
-}
+@import (reference) '../../style/theme-light';
+
+.header-btn {
+  display: flex;
+  align-items: center;
+  margin-right: 15px;
+  font-size: 12px;
+  cursor: pointer;
+  .header-btn-img {
+    width: 13px;
+    height: 13px;
+    margin-right: 5px;
+  }
+}
+
+.strategyHeader {
+  height: 45px !important;
+  line-height: 45px !important;
+  padding: 0 15px;
+  background: @light-gray-bg;
+  box-shadow: 0 2px 30px 0 rgba(137, 137, 137, 0.3);
+}

package/es/typings.d.ts

@@ -1,6 +1,14 @@
-declare module '*.css';
-declare module '*.less';
-
-type Window = {
-  requestIdleCallback: (callback: () => void) => void;
-};
+declare module '*.css';
+declare module '*.less';
+
+type Window = {
+  requestIdleCallback: (callback: () => void) => void;
+};
+
+declare namespace Types {
+  export type ModeType = 'platform' | 'view';
+
+  export interface PanelComponentProps {
+    mode?: ModeType;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strategy-panel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",