ronds-metadata 1.1.12 → 1.1.15

package/es/framework/graph/index.js

@@ -7,11 +7,11 @@ 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 "./index.css";
+import { debounceTime, fromEventPattern, map, merge, scan, tap } from 'rxjs';
+import './index.less';
 export var GraphCore = /*#__PURE__*/function () {
   // 传入的 nodes 原始信息
   // 传入的 edges 原始信息
@@ -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/graph/{index.css → index.less}

@@ -2,10 +2,12 @@
   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/libs/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "fa"; /* Project id 2247093 */
-  src: url('iconfont.woff2?t=1653875373166') format('woff2'),
-       url('iconfont.woff?t=1653875373166') format('woff'),
-       url('iconfont.ttf?t=1653875373166') format('truetype');
+  src: url('iconfont.woff2?t=1655104677804') format('woff2'),
+       url('iconfont.woff?t=1655104677804') format('woff'),
+       url('iconfont.ttf?t=1655104677804') format('truetype');
 }
 
 .fa {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.fa-info:before {
+  content: "\e7dc";
+}
+
+.fa-expert:before {
+  content: "\e60c";
+}
+
+.fa-ai1:before {
+  content: "\e60d";
+}
+
+.fa-ai2:before {
+  content: "\e893";
+}
+
 .fa-ai:before {
   content: "\e887";
 }

package/es/index.js

@@ -3,7 +3,7 @@
  * @Date: 2021-09-18 14:15:04
  * @LastEditTime: 2022-05-28 11:18:17
  */
-import "./theme.css";
+import './theme.less';
 export { default as MetadataEdit } from './comps/MetadataEdit';
 export { default as MetaPropsEdit } from './comps/MetadataEdit/components/MetaPropsEdit';
 export { default as MetadataEditV2 } from './comps/MetadataEditV2';

package/es/theme.less

@@ -0,0 +1,69 @@
+.ronds-metadata-dark {
+  --ronds-metadata-color-border-1: #314162;
+  --ronds-metadata-color-bg-2: #0d1f40;
+  --ronds-metadata-color-bg-4: #1c3771;
+  --ronds-metadata-color-text-1: #ffffff;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+    color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+    background: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      border-radius: 2px;
+      // box-shadow: inset 0 0 5px var(--scrollbar-color-hover);
+      background: var(--scrollbar-color-hover);
+    }
+
+    &:active {
+      // box-shadow: inset 0 0 5px var(--scrollbar-bg-color);
+      background: var(--scrollbar-color-hover);
+    }
+  }
+}
+
+.ronds-metadata-normal {
+  --ronds-metadata-color-border-1: #d9d9d9;
+  --ronds-metadata-color-bg-2: rgba(229, 238, 255, 0.85);
+  --ronds-metadata-color-bg-4: #ffffff;
+  --ronds-metadata-color-text-1: #1d2129;
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    overflow: auto;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-color);
+    min-height: 25px;
+    min-width: 25px;
+    border-radius: 3px;
+
+    &:hover {
+      background-color: #a8a8a8;
+    }
+
+    &:active {
+      background-color: #787878;
+    }
+
+    /* border: 1px solid #e0e0e0; */
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f7f7f7;
+  }
+}

package/package.json

@@ -1,86 +1,87 @@
-{
-  "public": true,
-  "name": "ronds-metadata",
-  "version": "1.1.12",
-  "scripts": {
-    "start": "dumi dev",
-    "docs:build": "dumi build",
-    "docs:deploy": "gh-pages -d docs-dist",
-    "build": "father-build",
-    "deploy": "npm run docs:build && npm run docs:deploy",
-    "release": "npm run build && npm publish",
-    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
-    "test": "umi-test",
-    "test:coverage": "umi-test --coverage"
-  },
-  "main": "es",
-  "module": "es",
-  "types": "es/index.d.ts",
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
-  },
-  "files": [
-    "/es"
-  ],
-  "dependencies": {
-    "@antv/x6": "^1.32.2",
-    "@antv/x6-react-shape": "^1.6.0",
-    "@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"
-  },
-  "peerDependencies": {
-    "antd": ">=4.1.5",
-    "react": ">=16.14.0",
-    "react-dom": ">=16.14.0",
-    "react-router": ">=5.0.0",
-    "styled-components": ">=4.1.1"
-  },
-  "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-router": "^5.1.8",
-    "@types/react-window": "^1.8.2",
-    "@types/styled-components": "^5.1.2",
-    "@umijs/test": "^3.0.5",
-    "antd": "^4.18.1",
-    "babel-loader": "^8.1.0",
-    "css-loader": "^4.2.2",
-    "dumi": "^1.0.16",
-    "father-build": "^1.17.2",
-    "gh-pages": "^3.0.0",
-    "less-loader": "^7.0.0",
-    "lint-staged": "^10.0.7",
-    "prettier": "^2.2.1",
-    "style-loader": "^1.2.1",
-    "webpack-cli": "^3.3.12",
-    "copy-to-clipboard": "^3.3.1",
-    "yorkie": "^2.0.0"
-  }
-}
+{
+  "public": true,
+  "name": "ronds-metadata",
+  "version": "1.1.15",
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father-build",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "release": "npm run build && npm publish",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "main": "es",
+  "module": "es",
+  "types": "es/index.d.ts",
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "files": [
+    "/es"
+  ],
+  "dependencies": {
+    "@antv/x6": "^1.32.2",
+    "@antv/x6-react-shape": "^1.6.0",
+    "@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"
+  },
+  "peerDependencies": {
+    "antd": ">=4.1.5",
+    "react": ">=16.14.0",
+    "react-dom": ">=16.14.0",
+    "react-router": ">=5.0.0",
+    "styled-components": ">=4.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/react-router": "^5.1.8",
+    "@types/react-window": "^1.8.2",
+    "@types/styled-components": "^5.1.2",
+    "@umijs/test": "^3.0.5",
+    "antd": "^4.18.1",
+    "babel-loader": "^8.1.0",
+    "css-loader": "^4.2.2",
+    "dumi": "^1.0.16",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "less-loader": "^7.0.0",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.1",
+    "style-loader": "^1.2.1",
+    "webpack-cli": "^3.3.12",
+    "copy-to-clipboard": "^3.3.1",
+    "yorkie": "^2.0.0"
+  }
+}

package/es/comps/DynamicPorts/comps/contextMenu/GraphContextMenu/index.css

@@ -1,21 +0,0 @@
-.graphContextMenu {
-  position: absolute;
-  z-index: 1;
-  background-color: #fff;
-}
-.loadExperimentModal :global .ant-modal-title {
-  font-size: 14px;
-}
-.loadExperimentModal :global .ant-btn {
-  font-size: 12px;
-}
-.loadExperimentModal .versionTable :global .ant-table.ant-table-small {
-  font-size: 12px;
-}
-.loadExperimentModal .versionTable .operations :global .ant-btn:first-of-type {
-  padding-left: 0;
-  border-left: 0;
-}
-.loadExperimentModal .versionTable .operations :global .ant-btn.ant-btn-sm {
-  font-size: 12px;
-}

package/es/comps/DynamicPorts/comps/contextMenu/NodeContextMenu/index.css

@@ -1,23 +0,0 @@
-.graphContextMenu {
-  position: absolute;
-  z-index: 1;
-  width: 100px;
-  background-color: #fff;
-  box-shadow: 0 2px 10px rgb(0 0 0 1);
-}
-.loadExperimentModal :global .ant-modal-title {
-  font-size: 14px;
-}
-.loadExperimentModal :global .ant-btn {
-  font-size: 12px;
-}
-.loadExperimentModal .versionTable :global .ant-table.ant-table-small {
-  font-size: 12px;
-}
-.loadExperimentModal .versionTable .operations :global .ant-btn:first-of-type {
-  padding-left: 0;
-  border-left: 0;
-}
-.loadExperimentModal .versionTable .operations :global .ant-btn.ant-btn-sm {
-  font-size: 12px;
-}

package/es/comps/DynamicPorts/comps/shape/edge.css

@@ -1,4 +0,0 @@
-.x6-edge-selected path[stroke-width='1'],
-.x6-edge:hover path[stroke-width='1'] {
-  stroke-width: 3px;
-}