ronds-metadata 1.1.6 → 1.1.9

package/es/framework/graph/index.js

@@ -0,0 +1,425 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var _excluded = ["wrapper", "container", "nodes", "edges"];
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 13:55:44
+ * @LastEditTime: 2022-05-27 16:19:44
+ */
+import { Graph } from '@antv/x6';
+import { fromEventPattern, merge } from 'rxjs';
+import "./index.css";
+export var GraphCore = /*#__PURE__*/function () {
+  // 传入的 nodes 原始信息
+  // 传入的 edges 原始信息
+  function GraphCore(options) {
+    var _this = this;
+
+    _classCallCheck(this, GraphCore);
+
+    this.wrapper = void 0;
+    this.container = void 0;
+    this.nodeMetas = [];
+    this.edgeMetas = [];
+    this.options = void 0;
+    this.graph = void 0;
+    this.factorySub = {};
+
+    this.resizeGraph = function () {
+      var graph = _this.graph,
+          wrapper = _this.wrapper;
+
+      if (graph && wrapper) {
+        requestAnimationFrame(function () {
+          var width = wrapper.clientWidth;
+          var height = wrapper.clientHeight;
+          graph.resize(width, height);
+        });
+      }
+    };
+
+    this.zoom = function (factor) {
+      if (typeof factor === 'number') {
+        var _this$graph;
+
+        (_this$graph = _this.graph) === null || _this$graph === void 0 ? void 0 : _this$graph.zoom(factor);
+      } else if (factor === 'fit') {
+        var _this$graph2;
+
+        (_this$graph2 = _this.graph) === null || _this$graph2 === void 0 ? void 0 : _this$graph2.zoomToFit({
+          padding: 12
+        });
+      } else if (factor === 'real') {
+        var _this$graph3, _this$graph4;
+
+        (_this$graph3 = _this.graph) === null || _this$graph3 === void 0 ? void 0 : _this$graph3.scale(1);
+        (_this$graph4 = _this.graph) === null || _this$graph4 === void 0 ? void 0 : _this$graph4.centerContent();
+      }
+    };
+
+    this.addNode = function (nodeMeta) {
+      var _this$nodeMetas;
+
+      (_this$nodeMetas = _this.nodeMetas) === null || _this$nodeMetas === void 0 ? void 0 : _this$nodeMetas.push(nodeMeta);
+      return _this.renderNode(nodeMeta);
+    };
+
+    this.addEdge = function (edgeMeta) {
+      var _this$edgeMetas;
+
+      (_this$edgeMetas = _this.edgeMetas) === null || _this$edgeMetas === void 0 ? void 0 : _this$edgeMetas.push(edgeMeta);
+      return _this.renderEdge(edgeMeta);
+    };
+
+    this.deleteNodes = function (nodes) {
+      var _this$graph5;
+
+      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.deleteEdges = function (edges) {
+      var _this$graph6;
+
+      var target = [].concat(edges);
+      var targetIds = target.map(function (i) {
+        return typeof i === 'string' ? i : i.id;
+      }); // @ts-ignore
+
+      _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.getNodeById = function (nodeId) {
+      var _this$graph7;
+
+      var node = (_this$graph7 = _this.graph) === null || _this$graph7 === void 0 ? void 0 : _this$graph7.getCellById(nodeId);
+
+      if (node === null || node === void 0 ? void 0 : node.isNode()) {
+        return node;
+      }
+
+      return undefined;
+    };
+
+    this.throwRenderError = function () {
+      if (!_this.wrapper) {
+        console.warn('Wrapper element is needed.');
+      }
+
+      if (!_this.container) {
+        console.warn('Container element is needed.');
+      }
+
+      if (!_this.nodeMetas) {
+        console.warn('NodeMetas could not be empty');
+      }
+
+      if (!_this.edgeMetas) {
+        console.warn('EdgeMetas could not be empty');
+      }
+    };
+
+    var _wrapper = options.wrapper,
+        container = options.container,
+        _nodes = options.nodes,
+        _edges = options.edges,
+        others = _objectWithoutProperties(options, _excluded);
+
+    this.setMeta(options);
+    this.options = others;
+  }
+
+  _createClass(GraphCore, [{
+    key: "setMeta",
+    value: function setMeta(params) {
+      var wrapper = params.wrapper,
+          container = params.container,
+          nodes = params.nodes,
+          edges = params.edges;
+
+      if (wrapper) {
+        this.setWrapper(wrapper);
+      }
+
+      if (container) {
+        this.setContainer(container);
+      }
+
+      if (nodes) {
+        this.setNodes(nodes);
+      }
+
+      if (edges) {
+        this.setEdges(edges);
+      }
+    }
+  }, {
+    key: "isMetaValid",
+    get: function get() {
+      var wrapper = this.wrapper,
+          container = this.container;
+      return !!wrapper && !!container;
+    }
+  }, {
+    key: "setWrapper",
+    value: function setWrapper(wrapper) {
+      this.wrapper = wrapper;
+    }
+  }, {
+    key: "setContainer",
+    value: function setContainer(container) {
+      this.container = container;
+      this.options.container = container;
+    }
+  }, {
+    key: "setNodes",
+    value: function setNodes(nodes) {
+      this.nodeMetas = nodes;
+    }
+  }, {
+    key: "setEdges",
+    value: function setEdges(edges) {
+      this.edgeMetas = edges;
+    } // 处理一些订阅事件
+
+  }, {
+    key: "initFactorySub",
+    value: function initFactorySub() {
+      var _this2 = this;
+
+      // 处理产生连线事件
+      this.factorySub.connectNode = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:connected', handler);
+      }, function (handler) {
+        _this2.graph.off('edge:connected', handler);
+      }).subscribe(function (args) {
+        _this2.onConnectNode(args);
+      }); // 处理节点选中事件
+
+      this.factorySub.selectNode = fromEventPattern(function (handler) {
+        _this2.graph.on('selection:changed', handler);
+      }, function (handler) {
+        _this2.graph.off('selection:changed', handler);
+      }).subscribe(function (args) {
+        var removed = args.removed,
+            selected = args.selected;
+        setCellsSelectedStatus(removed, false);
+        setCellsSelectedStatus(selected, true);
+
+        _this2.onSelectNodes(selected);
+      }); // 处理窗口缩放
+
+      this.factorySub.windowResize = fromEventPattern(function (handler) {
+        window.addEventListener('resize', handler);
+      }, function (handler) {
+        window.removeEventListener('resize', handler);
+      }).subscribe(this.resizeGraph); // 处理连线删除
+
+      this.factorySub.connectionRemoved = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:removed', handler);
+      }, function (handler) {
+        _this2.graph.off('edge:removed', handler);
+      }).subscribe(function (args) {
+        _this2.onConnectionRemoved(args);
+      }); // 处理删除节点或连线事件
+
+      this.factorySub.deleteNodeOrEdge = fromEventPattern(function (handler) {
+        _this2.graph.bindKey(['delete', 'backspace'], handler);
+      }, function () {
+        _this2.graph.unbindKey(['delete', 'backspace']);
+      }).subscribe(function () {
+        var selectedCells = _this2.graph.getSelectedCells();
+
+        var selectedNodes = selectedCells.filter(function (cell) {
+          return cell.isNode();
+        });
+        var selectedEdges = selectedCells.filter(function (cell) {
+          return cell.isEdge();
+        });
+
+        _this2.onDeleteNodeOrEdge({
+          nodes: selectedNodes,
+          edges: selectedEdges
+        });
+      }); // 处理右键菜单
+
+      var nodeContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('node:contextmenu', function (data) {
+          handler({
+            type: 'node',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('node:contextmenu', handler);
+      });
+      var edgeContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:contextmenu', function (data) {
+          handler({
+            type: 'edge',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('edge:contextmenu', handler);
+      });
+      var graphContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('blank:contextmenu', function (data) {
+          handler({
+            type: 'graph',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('edge:contextmenu', handler);
+      });
+      this.factorySub.contextMenu = merge(nodeContextMenuObs, edgeContextMenuObs, graphContextMenuObs).subscribe(function (data) {
+        if (_this2.validateContextMenu(data)) {
+          _this2.onContextMenu(data);
+        }
+      });
+    } // 渲染
+
+  }, {
+    key: "render",
+    value: function render(params) {
+      var _this3 = this;
+
+      this.setMeta(params);
+
+      if (this.isMetaValid) {
+        var wrapper = this.wrapper,
+            options = this.options,
+            nodeMetas = this.nodeMetas,
+            edgeMetas = this.edgeMetas;
+        var width = wrapper.clientWidth;
+        var height = wrapper.clientHeight;
+        var graph = new Graph(_objectSpread(_objectSpread({}, options), {}, {
+          width: width,
+          height: height
+        }));
+        this.graph = graph;
+        nodeMetas.forEach(function (nodeMeta) {
+          return _this3.renderNode(nodeMeta);
+        });
+        edgeMetas.forEach(function (edgeMeta) {
+          return _this3.renderEdge(edgeMeta);
+        });
+        this.afterLayout();
+
+        if (graph.isFrozen()) {
+          graph.unfreeze();
+        }
+
+        requestAnimationFrame(function () {
+          graph.centerContent();
+        });
+        this.initFactorySub();
+      } else {
+        this.throwRenderError();
+      }
+    }
+  }, {
+    key: "renderNode",
+    value: function renderNode(nodeMeta) {
+      return this.graph.addNode(nodeMeta);
+    }
+  }, {
+    key: "renderEdge",
+    value: function renderEdge(edgeMeta) {
+      return this.graph.addEdge(edgeMeta);
+    }
+  }, {
+    key: "afterLayout",
+    value: function afterLayout() {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 连线的触发事件
+
+  }, {
+    key: "onConnectNode",
+    value: function onConnectNode(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 节点选中的触发事件
+
+  }, {
+    key: "onSelectNodes",
+    value: function onSelectNodes(nodes) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 窗口大小resize触发事件
+
+  }, {
+    key: "onConnectionRemoved",
+    value: // 处理连线删除的触发事件
+    function onConnectionRemoved(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 按下删除键的回调，默认参数为当前选中的节点和边
+
+  }, {
+    key: "onDeleteNodeOrEdge",
+    value: function onDeleteNodeOrEdge(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+  }, {
+    key: "validateContextMenu",
+    value: function validateContextMenu(data) {
+      return !!data;
+    }
+  }, {
+    key: "onContextMenu",
+    value: function onContextMenu(data) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 缩放画布
+
+  }, {
+    key: "dispose",
+    value: // 注销
+    function dispose() {
+      var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele;
+
+      (_this$factorySub$conn = this.factorySub.connectNode) === null || _this$factorySub$conn === void 0 ? void 0 : _this$factorySub$conn.unsubscribe();
+      (_this$factorySub$move = this.factorySub.moveNodes) === null || _this$factorySub$move === void 0 ? void 0 : _this$factorySub$move.unsubscribe();
+      (_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 graphScroller = this.wrapper.querySelector('.x6-graph-scroller');
+
+        if (graphScroller) {
+          graphScroller.innerHTML = '';
+          graphScroller.setAttribute('style', '');
+          graphScroller.setAttribute('class', '');
+
+          if (this.container) {
+            this.container.innerHTML = '';
+            this.container.setAttribute('style', '');
+            this.container.setAttribute('class', '');
+          }
+        }
+
+        (_this$graph8 = this.graph) === null || _this$graph8 === void 0 ? void 0 : _this$graph8.dispose();
+      }
+    }
+  }]);
+
+  return GraphCore;
+}();
+
+function setCellsSelectedStatus(cells, selected) {
+  cells.forEach(function (cell) {
+    var data = cell.getData() || {};
+    cell.setData(_objectSpread(_objectSpread({}, data), {}, {
+      selected: selected
+    }));
+  });
+}

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

@@ -0,0 +1,187 @@
+@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');
+}
+
+.fa {
+  font-family: "fa" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-py:before {
+  content: "\e916";
+}
+
+.fa-Redis:before {
+  content: "\e669";
+}
+
+.fa-hezi:before {
+  content: "\e60b";
+}
+
+.fa-message:before {
+  content: "\e637";
+}
+
+.fa-shujuku:before {
+  content: "\e645";
+}
+
+.fa-hourglass:before {
+  content: "\e66b";
+}
+
+.fa-Bucket:before {
+  content: "\e8ce";
+}
+
+.fa-RondsLake:before {
+  content: "\e8a2";
+}
+
+.fa-Schema:before {
+  content: "\e62a";
+}
+
+.fa-Minio:before {
+  content: "\e64e";
+}
+
+.fa-color:before {
+  content: "\e678";
+}
+
+.fa-Neo4j:before {
+  content: "\e612";
+}
+
+.fa-knowledge:before {
+  content: "\e621";
+}
+
+.fa-evaluate:before {
+  content: "\e608";
+}
+
+.fa-json1:before {
+  content: "\e7bd";
+}
+
+.fa-result:before {
+  content: "\e64c";
+}
+
+.fa-analysis:before {
+  content: "\e72e";
+}
+
+.fa-select:before {
+  content: "\e701";
+}
+
+.fa-Http:before {
+  content: "\e668";
+}
+
+.fa-question:before {
+  content: "\e60e";
+}
+
+.fa-monitor:before {
+  content: "\e61f";
+}
+
+.fa-algorithm_lab:before {
+  content: "\e607";
+}
+
+.fa-engine:before {
+  content: "\e610";
+}
+
+.fa-user:before {
+  content: "\e713";
+}
+
+.fa-logout:before {
+  content: "\e611";
+}
+
+.fa-screen:before {
+  content: "\e606";
+}
+
+.fa-password:before {
+  content: "\e605";
+}
+
+.fa-news:before {
+  content: "\e638";
+}
+
+.fa-record:before {
+  content: "\e648";
+}
+
+.fa-home:before {
+  content: "\e609";
+}
+
+.fa-json:before {
+  content: "\e61a";
+}
+
+.fa-code:before {
+  content: "\e654";
+}
+
+.fa-diagram:before {
+  content: "\e60a";
+}
+
+.fa-setting:before {
+  content: "\e84b";
+}
+
+.fa-datasource:before {
+  content: "\e62e";
+}
+
+.fa-stream:before {
+  content: "\ec56";
+}
+
+.fa-Kafka:before {
+  content: "\e64f";
+}
+
+.fa-Table:before {
+  content: "\e72d";
+}
+
+.fa-PostgreSql:before {
+  content: "\e63b";
+}
+
+.fa-link:before {
+  content: "\e636";
+}
+
+.fa-LocalFileSystem:before {
+  content: "\e600";
+}
+
+.fa-Cassandra:before {
+  content: "\e74f";
+}
+
+.fa-DataBase:before {
+  content: "\e797";
+}
+

package/es/framework/rxjs-hooks/useObservableState.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Observable } from 'rxjs';
+export declare const useObservableState: <T extends unknown>(source$: Observable<T> | (() => Observable<T>), initialState?: T) => [T, React.Dispatch<React.SetStateAction<T>>];

package/es/framework/rxjs-hooks/useObservableState.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-27 10:32:55
+ * @LastEditTime: 2022-05-27 10:58:18
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { BehaviorSubject } from 'rxjs';
+export var useObservableState = function useObservableState(source$, initialState) {
+  var source = useMemo(function () {
+    if (typeof source$ === 'function') {
+      return source$();
+    }
+
+    return source$;
+  }, [source$]);
+
+  var _useState = useState(function () {
+    if (source instanceof BehaviorSubject) {
+      return source.getValue();
+    }
+
+    return initialState;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  useEffect(function () {
+    if (source) {
+      var sub = source.subscribe(function (v) {
+        if (v) {
+          setState(v);
+        }
+      });
+      return function () {
+        sub.unsubscribe();
+      };
+    }
+
+    return function () {};
+  }, [source]);
+  return [state, setState];
+};

package/es/index.d.ts

@@ -8,6 +8,8 @@ export { default as JsonEdit } from './comps/JsonEdit';
 export { default as MdEditor } from './comps/MdEdit';
 export { default as Editable } from './comps/Editable';
 export { default as DynamicPorts } from './comps/DynamicPorts';
+export { default as DragNode } from './comps/DynamicPorts/comps/DragNode';
+export { default as Icon } from './comps/Icons';
 export * from './framework/metadata/index';
 export { default as http, addInterceptor } from './framework/http/index';
 export { default as useMemoSubject } from './framework/rxjs-hooks/useMemoSubject';

package/es/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author:wangxian
  * @Date: 2021-09-18 14:15:04
- * @LastEditTime: 2022-05-23 16:32:32
+ * @LastEditTime: 2022-05-28 11:18:17
  */
 import "./theme.css";
 export { default as MetadataEdit } from './comps/MetadataEdit';
@@ -13,6 +13,8 @@ export { default as JsonEdit } from './comps/JsonEdit';
 export { default as MdEditor } from './comps/MdEdit';
 export { default as Editable } from './comps/Editable';
 export { default as DynamicPorts } from './comps/DynamicPorts';
+export { default as DragNode } from './comps/DynamicPorts/comps/DragNode';
+export { default as Icon } from './comps/Icons';
 export * from './framework/metadata/index';
 export { default as http, addInterceptor } from './framework/http/index';
 export { default as useMemoSubject } from './framework/rxjs-hooks/useMemoSubject';