ronds-metadata 1.1.7 → 1.1.8

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

@@ -12,3 +12,4 @@ export declare function getDataCell(item: any, options: IFormOptions): JSX.Eleme
  * @returns
  */
 export declare function renderForm(schemaRef: any[], options: IFormOptions, stream$?: any): JSX.Element;
+export declare function getLabelByProps(data: any): any;

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-06 13:43:47
+ * @LastEditTime: 2022-05-28 09:35:48
  */
 import React from 'react';
 import Input from './DataCell/Input';
@@ -64,4 +64,13 @@ export function renderForm(schemaRef, options, stream$) {
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, _form);
+}
+export function getLabelByProps(data) {
+  if (data.fields && data.fields.length > 0) {
+    var _data$fields$0$value, _data$fields$0$value$, _data$fields$, _data$fields$$value;
+
+    return ((_data$fields$0$value = data.fields[0].value) === null || _data$fields$0$value === void 0 ? void 0 : (_data$fields$0$value$ = _data$fields$0$value.common) === null || _data$fields$0$value$ === void 0 ? void 0 : _data$fields$0$value$.label) || ((_data$fields$ = data.fields[0]) === null || _data$fields$ === void 0 ? void 0 : (_data$fields$$value = _data$fields$.value) === null || _data$fields$$value === void 0 ? void 0 : _data$fields$$value.label) || data.id;
+  }
+
+  return data.id;
 }

package/es/framework/graph/index.css

@@ -0,0 +1,12 @@
+.ant-spin-container {
+  width: 100%;
+  height: 100%;
+}
+.x6-widget-selection-inner {
+  border: none !important;
+  box-shadow: none !important;
+}
+.x6-widget-selection-box {
+  border: none !important;
+  box-shadow: none !important;
+}

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

@@ -1 +1,60 @@
-
+import { Graph, Node, Edge, Collection } from '@antv/x6';
+import './index.less';
+declare type DPGraphOptions = ConstructorParameters<typeof Graph>[0];
+export declare type ConnectionRemovedArgs = Collection.EdgeEventArgs['edge:removed'];
+interface RenderParams {
+    wrapper?: HTMLElement;
+    container?: HTMLElement;
+    nodes?: Node.Metadata[];
+    edges?: Node.Metadata[];
+}
+interface Options extends DPGraphOptions {
+    wrapper?: HTMLElement;
+    container?: HTMLElement;
+    nodes?: any[];
+    edges?: any[];
+}
+export interface ContextMenuInfo {
+    type: 'edge' | 'graph' | 'node';
+    data: any;
+}
+export declare class GraphCore<N extends Node<Node.Properties> = Node<Node.Properties>, E extends Edge<Edge.Properties> = Edge<Edge.Properties>> {
+    wrapper?: HTMLElement;
+    container?: HTMLElement;
+    nodeMetas?: any[];
+    edgeMetas?: any[];
+    options: Exclude<Options, 'wrapper' | 'nodes' | 'edges'>;
+    graph?: Graph;
+    private factorySub?;
+    constructor(options: Options);
+    setMeta(params: Pick<Options, 'wrapper' | 'container' | 'nodes' | 'edges'>): void;
+    get isMetaValid(): boolean;
+    setWrapper(wrapper: HTMLElement): void;
+    setContainer(container: HTMLElement): void;
+    setNodes(nodes: any[]): void;
+    setEdges(edges: any[]): void;
+    initFactorySub(): void;
+    render(params: RenderParams): void;
+    renderNode(nodeMeta: any): N | undefined;
+    renderEdge(edgeMeta: any): E | undefined;
+    afterLayout(): void;
+    onConnectNode(args: any): void;
+    onSelectNodes(nodes: N[]): void;
+    resizeGraph: () => void;
+    onConnectionRemoved(args: ConnectionRemovedArgs): void;
+    onDeleteNodeOrEdge(args: {
+        nodes: N[];
+        edges: E[];
+    }): void;
+    validateContextMenu(data: ContextMenuInfo): boolean;
+    onContextMenu(data: ContextMenuInfo): any;
+    zoom: (factor: number | 'fit' | 'real') => void;
+    addNode: (nodeMeta: any) => N;
+    addEdge: (edgeMeta: any) => E;
+    deleteNodes: (nodes: (Node | string)[] | Node | string) => void;
+    deleteEdges: (edges: (Edge | string)[] | Edge | string) => void;
+    getNodeById: (nodeId: string) => N | undefined;
+    throwRenderError: () => void;
+    dispose(): void;
+}
+export {};

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/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,7 @@ 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 * 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-26 09:02:38
  */
 import "./theme.css";
 export { default as MetadataEdit } from './comps/MetadataEdit';
@@ -13,6 +13,7 @@ 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 * from './framework/metadata/index';
 export { default as http, addInterceptor } from './framework/http/index';
 export { default as useMemoSubject } from './framework/rxjs-hooks/useMemoSubject';

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -36,17 +36,21 @@
     "@babel/helper-create-regexp-features-plugin": "^7.12.13",
     "@babel/runtime": "^7.11.2",
     "@popperjs/core": "^2.4.4",
+    "ahooks": "^3.4.0",
     "axios": "^0.21.4",
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "bl": "^5.0.0",
     "codemirror": "^5.63.0",
     "highlight.js": "11.3.1",
+    "immer": "^9.0.14",
     "lodash": "^4.17.21",
     "markdown-it": "^12.3.2",
     "markdown-it-emoji": "^2.0.0",
     "qs": "^6.10.1",
     "react": "^17.0.2",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-markdown-editor-lite": "^1.3.2",
     "react-popper": "^2.2.3",
     "rxjs": "^7.5.4"