ronds-metadata 1.1.10 → 1.1.13

package/es/comps/DynamicPorts/comps/ContextMenu.js

@@ -5,11 +5,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  * @Date: 2022-05-27 09:56:39
  * @LastEditTime: 2022-05-27 16:16:25
  */
-import useObservable from '@/framework/rxjs-hooks/useObservable';
 import React from 'react';
 import NodeContextMenu from './contextMenu/NodeContextMenu';
 import "./ContextMenu.css";
 import { EdgeContextMenu } from './contextMenu/EdgeContextMenu';
+import useObservable from '../../../framework/rxjs-hooks/useObservable';
 
 var ContextMenu = function ContextMenu(props) {
   var _graph$factory$;

package/es/comps/DynamicPorts/comps/GraphHandler/index.js

@@ -4,13 +4,13 @@ import _Popover from "antd/es/popover";
 /*
  * @Author: wangxian
  * @Date: 2022-05-27 14:21:23
- * @LastEditTime: 2022-05-28 10:18:24
+ * @LastEditTime: 2022-05-30 09:45:54
  */
 import React from 'react';
 import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import "./index.css";
-import { tr } from '@/framework/locale';
+import { tr } from '../../../../framework/locale';
 export var GraphHandler = function GraphHandler(props) {
   var className = props.className,
       onZoomIn = props.onZoomIn,

package/es/comps/DynamicPorts/graph.d.ts

@@ -54,6 +54,7 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
     }): void;
     onContextMenu(data: ContextMenuInfo): any;
     clearContextMenuInfo: () => void;
+    onMoveNodes(movedNodes: any[]): Promise<void>;
     dispose(): void;
 }
 export declare let gDPGraph: DPGraph;

package/es/comps/DynamicPorts/graph.js

@@ -16,6 +16,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { filter, take } from 'rxjs/operators';
+import { round } from 'lodash-es';
 import { GraphCore } from '../../framework/graph';
 import NodeElement from './comps/NodeElement';
 import { DPEdge } from './comps/shape/edge';
@@ -559,6 +560,76 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
       this.factory$.contextMenuInfo.next(data);
     } // 清空右键菜单信息
 
+  }, {
+    key: "onMoveNodes",
+    value: function () {
+      var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(movedNodes) {
+        var _this2 = this;
+
+        var targetNodes, newPos, oldGraph, newGraph;
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                targetNodes = movedNodes.filter(function (arg) {
+                  var node = arg.node;
+                  return !node.isGroup();
+                });
+
+                if (targetNodes === null || targetNodes === void 0 ? void 0 : targetNodes.length) {
+                  newPos = targetNodes.map(function (moveNode) {
+                    var current = moveNode.current,
+                        node = moveNode.node;
+                    var x = current.x,
+                        y = current.y;
+                    var id = node.id;
+
+                    _this2.updateNodeById(id, function (node) {
+                      node.setData({
+                        x: x,
+                        y: y
+                      });
+                    });
+
+                    return {
+                      nodeInstanceId: id,
+                      posX: round(x),
+                      posY: round(y)
+                    };
+                  });
+                  oldGraph = this.factory$.dpGraph.getValue();
+                  newGraph = produce(oldGraph, function (nextGraph) {
+                    newPos.forEach(function (position) {
+                      var nodeInstanceId = position.nodeInstanceId,
+                          posX = position.posX,
+                          posY = position.posY;
+                      var matchNode = nextGraph.nodes.find(function (item) {
+                        return item.id.toString() === nodeInstanceId.toString();
+                      });
+
+                      if (matchNode) {
+                        matchNode.x = posX;
+                        matchNode.y = posY;
+                      }
+                    });
+                  });
+                  this.factory$.dpGraph.next(newGraph);
+                }
+
+              case 2:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, this);
+      }));
+
+      function onMoveNodes(_x4) {
+        return _onMoveNodes.apply(this, arguments);
+      }
+
+      return onMoveNodes;
+    }()
   }, {
     key: "dispose",
     value: function dispose() {

package/es/comps/DynamicPorts/interface.d.ts

@@ -16,11 +16,29 @@ export declare namespace NDPGraph {
          * 图标
          */
         icon?: string;
+        /**
+         * 名称
+         */
         name: string;
+        /**
+         * 输入引脚
+         */
         inPorts: InPort[];
+        /**
+         * 输出引脚
+         */
         outPorts: OutPort[];
+        /**
+         * position x
+         */
         x: number;
+        /**
+         * position y
+         */
         y: number;
+        /**
+         * 附带参数信息
+         */
         param?: Param;
     }
     interface Edge {

package/es/comps/DynamicPorts/interface.js

@@ -1,6 +1,6 @@
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 16:10:46
- * @LastEditTime: 2022-05-28 10:57:33
+ * @LastEditTime: 2022-05-30 09:44:45
  */
 export {};

package/es/comps/MetadataForm/index.d.ts

@@ -29,7 +29,7 @@ interface IMetadataFormProps {
     /**
      * 不可编辑
      */
-    disabled?: boolean;
+    disabled?: boolean | string[];
     /**
      * 引用类型是否显示成表单
      */

package/es/comps/MetadataForm/interface.d.ts

@@ -16,7 +16,7 @@ export interface IMetadataRefContextProps {
 }
 export declare const MetadataRefContext: React.Context<IMetadataRefContextProps>;
 export interface IFormOptions {
-    disabled: boolean;
+    disabled: boolean | string[];
     isRefForm: boolean;
     isShowTypeInfo: boolean;
     initEnumValue?: boolean;

package/es/comps/MetadataForm/interface.js

@@ -1,7 +1,7 @@
 /*
  * @Author:wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2022-05-23 11:56:54
+ * @LastEditTime: 2022-06-08 15:45:36
  */
 import React from 'react';
 export var MetadataFormContext = /*#__PURE__*/React.createContext(null);

package/es/comps/MetadataForm/utils.js

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 /*
  * @Author: wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2022-05-28 09:35:48
+ * @LastEditTime: 2022-06-08 15:54:53
  */
 import React from 'react';
 import Input from './DataCell/Input';
@@ -26,10 +26,23 @@ var DataCellMap = {
 export function getDataCell(item, options) {
   if (item.type && DataCellMap[item.type]) {
     var Comm = DataCellMap[item.type];
+
+    var isDisabled = function isDisabled(b) {
+      if (typeof b === 'boolean') {
+        return b;
+      } else if (b.findIndex(function (it) {
+        return it === item.id;
+      }) > -1) {
+        return true;
+      }
+
+      return false;
+    };
+
     return /*#__PURE__*/React.createElement(Comm, _extends({
       key: item.id
     }, item, {
-      disabled: options.disabled,
+      disabled: isDisabled(options.disabled),
       isRefForm: options.isRefForm,
       isShowTypeInfo: options.isShowTypeInfo,
       field: options.field,

package/es/framework/graph/index.d.ts

@@ -49,11 +49,18 @@ export declare class GraphCore<N extends Node<Node.Properties> = Node<Node.Prope
     validateContextMenu(data: ContextMenuInfo): boolean;
     onContextMenu(data: ContextMenuInfo): any;
     zoom: (factor: number | 'fit' | 'real') => void;
+    onMoveNodeStart(args: any): void;
+    onMoveNodes(args: any[]): void;
     addNode: (nodeMeta: any) => N;
+    getNodes: () => N[];
     addEdge: (edgeMeta: any) => E;
     deleteNodes: (nodes: (Node | string)[] | Node | string) => void;
     deleteEdges: (edges: (Edge | string)[] | Edge | string) => void;
     getNodeById: (nodeId: string) => N | undefined;
+    updateNodeById: (nodeId: string, handler: (node?: N) => void) => void;
+    updateNodes: (handler: (nodes: N[]) => void) => void;
+    updateEdgeById: (edgeId: string, handler: (node?: E) => void) => void;
+    updateEdges: (handler: (edges: E[]) => void) => void;
     throwRenderError: () => void;
     dispose(): void;
 }

package/es/framework/graph/index.js

@@ -7,10 +7,10 @@ var _excluded = ["wrapper", "container", "nodes", "edges"];
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 13:55:44
- * @LastEditTime: 2022-05-27 16:19:44
+ * @LastEditTime: 2022-05-31 10:43:04
  */
 import { Graph } from '@antv/x6';
-import { fromEventPattern, merge } from 'rxjs';
+import { debounceTime, fromEventPattern, map, merge, scan, tap } from 'rxjs';
 import "./index.css";
 export var GraphCore = /*#__PURE__*/function () {
   // 传入的 nodes 原始信息
@@ -67,6 +67,12 @@ export var GraphCore = /*#__PURE__*/function () {
       return _this.renderNode(nodeMeta);
     };
 
+    this.getNodes = function () {
+      var _this$graph5;
+
+      return ((_this$graph5 = _this.graph) === null || _this$graph5 === void 0 ? void 0 : _this$graph5.getNodes()) || [];
+    };
+
     this.addEdge = function (edgeMeta) {
       var _this$edgeMetas;
 
@@ -75,18 +81,18 @@ export var GraphCore = /*#__PURE__*/function () {
     };
 
     this.deleteNodes = function (nodes) {
-      var _this$graph5;
+      var _this$graph6;
 
       var target = [].concat(nodes); // @ts-ignore
 
       _this.nodeMetas = _this.nodeMetas.filter(function (nodeMeta) {
         return !target.includes(nodeMeta.id);
       });
-      (_this$graph5 = _this.graph) === null || _this$graph5 === void 0 ? void 0 : _this$graph5.removeCells(target);
+      (_this$graph6 = _this.graph) === null || _this$graph6 === void 0 ? void 0 : _this$graph6.removeCells(target);
     };
 
     this.deleteEdges = function (edges) {
-      var _this$graph6;
+      var _this$graph7;
 
       var target = [].concat(edges);
       var targetIds = target.map(function (i) {
@@ -96,13 +102,13 @@ export var GraphCore = /*#__PURE__*/function () {
       _this.edgeMetas = _this.edgeMetas.filter(function (edgeMeta) {
         return !targetIds.includes(edgeMeta.id);
       });
-      (_this$graph6 = _this.graph) === null || _this$graph6 === void 0 ? void 0 : _this$graph6.removeCells(target);
+      (_this$graph7 = _this.graph) === null || _this$graph7 === void 0 ? void 0 : _this$graph7.removeCells(target);
     };
 
     this.getNodeById = function (nodeId) {
-      var _this$graph7;
+      var _this$graph8;
 
-      var node = (_this$graph7 = _this.graph) === null || _this$graph7 === void 0 ? void 0 : _this$graph7.getCellById(nodeId);
+      var node = (_this$graph8 = _this.graph) === null || _this$graph8 === void 0 ? void 0 : _this$graph8.getCellById(nodeId);
 
       if (node === null || node === void 0 ? void 0 : node.isNode()) {
         return node;
@@ -111,6 +117,33 @@ export var GraphCore = /*#__PURE__*/function () {
       return undefined;
     };
 
+    this.updateNodeById = function (nodeId, handler) {
+      handler(_this.getNodeById(nodeId));
+    };
+
+    this.updateNodes = function (handler) {
+      handler(_this.getNodes());
+    };
+
+    this.updateEdgeById = function (edgeId, handler) {
+      var _this$graph9;
+
+      var edge = (_this$graph9 = _this.graph) === null || _this$graph9 === void 0 ? void 0 : _this$graph9.getCellById(edgeId);
+
+      if (edge === null || edge === void 0 ? void 0 : edge.isEdge()) {
+        handler(edge);
+      } else {
+        handler(undefined);
+      }
+    };
+
+    this.updateEdges = function (handler) {
+      var _this$graph10;
+
+      var edges = ((_this$graph10 = _this.graph) === null || _this$graph10 === void 0 ? void 0 : _this$graph10.getEdges()) || [];
+      handler(edges);
+    };
+
     this.throwRenderError = function () {
       if (!_this.wrapper) {
         console.warn('Wrapper element is needed.');
@@ -287,6 +320,51 @@ export var GraphCore = /*#__PURE__*/function () {
         if (_this2.validateContextMenu(data)) {
           _this2.onContextMenu(data);
         }
+      }); // 处理节点移动事件
+
+      var moveStarted = false; // 因为需要对移动事件做分片，区分两次移动事件，所以引入一个记录移动开始的变量
+
+      this.factorySub.moveNodes = fromEventPattern(function (handler) {
+        _this2.graph.on('node:change:position', handler);
+      }, function (handler) {
+        _this2.graph.off('node:change:position', handler);
+      }).pipe(tap(function (args) {
+        _this2.onMoveNodeStart(args);
+      }), scan(function (accum, args) {
+        var currentAccum = !moveStarted ? [] : accum;
+        var node = args.node;
+        var id = node.id;
+        var matchItemIndex = currentAccum.findIndex(function (item) {
+          return item.id === id;
+        });
+
+        if (matchItemIndex > -1) {
+          currentAccum.splice(matchItemIndex, 1, {
+            id: id,
+            data: args
+          });
+        } else {
+          currentAccum.push({
+            id: id,
+            data: args
+          });
+        }
+
+        return currentAccum;
+      }, []), tap(function () {
+        if (!moveStarted) {
+          moveStarted = true;
+        }
+      }), debounceTime(300), tap(function () {
+        if (moveStarted) {
+          moveStarted = false;
+        }
+      }), map(function (items) {
+        return items.map(function (item) {
+          return item.data;
+        });
+      })).subscribe(function (movedNodes) {
+        _this2.onMoveNodes(movedNodes);
       });
     } // 渲染
 
@@ -380,6 +458,18 @@ export var GraphCore = /*#__PURE__*/function () {
       if (process.env.NODE_ENV === 'development') {}
     } // 缩放画布
 
+  }, {
+    key: "onMoveNodeStart",
+    value: function onMoveNodeStart(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+  }, {
+    key: "onMoveNodes",
+    value: function onMoveNodes(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+    /* 以下为主动触发的方法 */
+
   }, {
     key: "dispose",
     value: // 注销
@@ -391,7 +481,7 @@ export var GraphCore = /*#__PURE__*/function () {
       (_this$factorySub$sele = this.factorySub.selectNode) === null || _this$factorySub$sele === void 0 ? void 0 : _this$factorySub$sele.unsubscribe(); // ! 这一步要注意放在图的事件订阅都取消了之后
 
       if (this.wrapper) {
-        var _this$graph8;
+        var _this$graph11;
 
         var graphScroller = this.wrapper.querySelector('.x6-graph-scroller');
 
@@ -407,7 +497,7 @@ export var GraphCore = /*#__PURE__*/function () {
           }
         }
 
-        (_this$graph8 = this.graph) === null || _this$graph8 === void 0 ? void 0 : _this$graph8.dispose();
+        (_this$graph11 = this.graph) === null || _this$graph11 === void 0 ? void 0 : _this$graph11.dispose();
       }
     }
   }]);

package/es/framework/libs/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "fa"; /* Project id 2247093 */
-  src: url('iconfont.woff2?t=1653706081036') format('woff2'),
-       url('iconfont.woff?t=1653706081036') format('woff'),
-       url('iconfont.ttf?t=1653706081036') format('truetype');
+  src: url('iconfont.woff2?t=1653875373166') format('woff2'),
+       url('iconfont.woff?t=1653875373166') format('woff'),
+       url('iconfont.ttf?t=1653875373166') format('truetype');
 }
 
 .fa {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.fa-ai:before {
+  content: "\e887";
+}
+
+.fa-signal:before {
+  content: "\ec4a";
+}
+
+.fa-circle:before {
+  content: "\e660";
+}
+
+.fa-scan:before {
+  content: "\e6df";
+}
+
 .fa-py:before {
   content: "\e916";
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.10",
+  "version": "1.1.13",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",