ronds-metadata 1.3.24 → 1.3.25

package/es/comps/DynamicPorts/comps/GraphHandler/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     onZoomOut: () => void;
     onFitContent: () => void;
     onRealContent: () => void;
+    onToggleSelectionEnabled: () => void;
 }
 export declare const GraphHandler: React.FC<Props>;
 export {};

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

@@ -1,12 +1,13 @@
 import "antd/es/popover/style";
 import _Popover from "antd/es/popover";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2022-05-27 14:21:23
- * @LastEditTime: 2022-05-30 09:45:54
+ * @LastEditTime: 2023-11-29 15:54:57
  */
 import React from 'react';
-import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { CompressOutlined, GatewayOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import './index.less';
 import { tr } from '../../../../framework/locale';
@@ -15,7 +16,12 @@ export var GraphHandler = function GraphHandler(props) {
     onZoomIn = props.onZoomIn,
     onZoomOut = props.onZoomOut,
     onFitContent = props.onFitContent,
-    onRealContent = props.onRealContent;
+    onRealContent = props.onRealContent,
+    onToggleSelectionEnabled = props.onToggleSelectionEnabled;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isSelectionEnabled = _React$useState2[0],
+    setSelectionEnabled = _React$useState2[1];
   return /*#__PURE__*/React.createElement("ul", {
     className: classNames('handler', className)
   }, /*#__PURE__*/React.createElement(_Popover, {
@@ -32,7 +38,17 @@ export var GraphHandler = function GraphHandler(props) {
   }, /*#__PURE__*/React.createElement("li", {
     onClick: onZoomOut,
     className: "item"
-  }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+  }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), onToggleSelectionEnabled && /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: tr('框选'),
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: function onClick() {
+      onToggleSelectionEnabled();
+      setSelectionEnabled(!isSelectionEnabled);
+    },
+    className: "item ".concat(isSelectionEnabled && 'tools-selected')
+  }, /*#__PURE__*/React.createElement(GatewayOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
     overlayClassName: "popover",
     content: tr('实际尺寸'),
     placement: "left"

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

@@ -23,6 +23,11 @@
       background-color: #e0e0e0;
     }
   }
+
+  .tools-selected {
+    color: #000;
+    background-color: #e0e0e0;
+  }
 }
 
 .popover {

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

@@ -5,7 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 09:18:34
- * @LastEditTime: 2023-07-03 16:20:13
+ * @LastEditTime: 2023-11-29 15:45:34
  */
 import { Shape, Edge } from '@antv/x6';
 import './edge.less';
@@ -40,7 +40,7 @@ DPEdge.config({
   connector: {
     name: 'pai'
   },
-  zIndex: 2,
+  zIndex: 1,
   attrs: {
     line: {
       stroke: '#808080',

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

@@ -68,6 +68,8 @@ declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
         edges: DPEdge[];
     }): void;
     onContextMenu(data: ContextMenuInfo): any;
+    onAddCopyCells(nodes: DPNode[], edges: DPEdge[]): void;
+    onCopyNodes(args: any[]): void;
     updateNodeNameById(id: string, name: string): void;
     clearContextMenuInfo: () => void;
     clearGraphCells: () => void;

package/es/comps/DynamicPorts/graph.js

@@ -1,3 +1,6 @@
+import "antd/es/message/style";
+import _message from "antd/es/message";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
@@ -13,7 +16,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 14:31:01
- * @LastEditTime: 2023-09-21 15:45:12
+ * @LastEditTime: 2023-12-01 08:07:32
  */
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import produce from 'immer';
@@ -27,9 +30,10 @@ import { GraphCore } from '../../framework/graph';
 import NodeElement from './comps/NodeElement';
 import { DPEdge } from './comps/shape/edge';
 import { DPNode } from './comps/shape/node';
-import { formatGraphData, formatNodeInfoToNodeMeta } from './utils';
-import { deepClone } from '../../utils';
+import { formatGraphData, formatNodeInfoToNodeMeta, formattedEdgesToEdgeMeta } from './utils';
+import { deepClone, guid } from '../../utils';
 import { MetadataService } from '../../framework/metadata/MetadataService';
+import { tr } from '../../framework/locale';
 var DPGraph = /*#__PURE__*/function (_GraphCore) {
   _inherits(DPGraph, _GraphCore);
   var _super = _createSuper(DPGraph);
@@ -40,13 +44,16 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
       history: true,
       frozen: true,
       grid: true,
+      snapline: true,
       selecting: {
         enabled: true,
         rubberband: false,
-        multiple: true,
-        strict: true,
-        showNodeSelectionBox: false,
-        selectNodeOnMoved: false
+        multiple: false,
+        strict: false,
+        showNodeSelectionBox: true,
+        showEdgeSelectionBox: true,
+        selectNodeOnMoved: false,
+        multipleSelectionModifiers: 'ctrl'
       },
       keyboard: {
         enabled: true
@@ -129,6 +136,10 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
         pageBreak: false,
         pannable: true
       },
+      clipboard: {
+        enabled: true,
+        useLocalStorage: true
+      },
       highlighting: {
         nodeAvailable: {
           name: 'className',
@@ -720,6 +731,78 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
     value: function onContextMenu(data) {
       this.factory$.contextMenuInfo.next(data);
     }
+  }, {
+    key: "onAddCopyCells",
+    value: function onAddCopyCells(nodes, edges) {
+      var _this2 = this,
+        _this$graph;
+      var cells = [];
+      var randomId = guid().substring(0, 4);
+      nodes.map(function (cell) {
+        var _node = cell.getData();
+        _node = _objectSpread(_objectSpread({}, _node), {}, {
+          id: "".concat(_node.id, "_copy_").concat(randomId),
+          x: _node.x + 30,
+          y: _node.y + 30
+        });
+        _this2.updateDPGraph([_node]);
+        var newNode = formatNodeInfoToNodeMeta(_node);
+        _this2.addNode(newNode);
+      });
+      edges.map(function (cell) {
+        var _edge = cell.getData();
+        _edge = _objectSpread(_objectSpread({}, _edge), {}, {
+          source: "".concat(_edge.source, "_copy_").concat(randomId),
+          target: "".concat(_edge.target, "_copy_").concat(randomId)
+        });
+        _this2.updateDPGraph([], [_edge]);
+        var newEdge = formattedEdgesToEdgeMeta(_edge);
+        _this2.addEdge(newEdge);
+      });
+      (_this$graph = this.graph) === null || _this$graph === void 0 ? void 0 : _this$graph.cleanClipboard();
+      // 回显选中复制的之后的节点
+      nodes.map(function (cell) {
+        var _this2$graph;
+        var _node = cell.getData();
+        var _cell = (_this2$graph = _this2.graph) === null || _this2$graph === void 0 ? void 0 : _this2$graph.getCellById("".concat(_node.id, "_copy_").concat(randomId));
+        cells.push(_cell);
+      });
+      this.graph.cleanSelection();
+      this.graph.select(cells);
+    }
+  }, {
+    key: "onCopyNodes",
+    value: function onCopyNodes(args) {
+      var _args11 = _slicedToArray(args, 2),
+        action = _args11[1];
+      var selectedCells = this.graph.getSelectedCells();
+      switch (action) {
+        case 'command+c':
+        case 'ctrl+c':
+          this.graph.copy(selectedCells, {
+            useLocalStorage: true
+          });
+          _message.success(tr('复制成功'));
+          break;
+        case 'command+v':
+        case 'ctrl+v':
+          if (this.graph.isClipboardEmpty()) {
+            _message.info(tr('剪切板为空，不可粘贴'));
+          } else {
+            var clipboardCells = this.graph.getCellsInClipboard();
+            var selectedNodes = clipboardCells.filter(function (cell) {
+              return cell.isNode();
+            });
+            var selectedEdges = clipboardCells.filter(function (cell) {
+              return cell.isEdge();
+            });
+            this.onAddCopyCells(selectedNodes, selectedEdges);
+            _message.success(tr('粘贴成功'));
+          }
+          break;
+        default:
+      }
+    }
     // 通过id更新名称
   }, {
     key: "updateNodeNameById",
@@ -751,7 +834,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
     key: "onMoveNodes",
     value: function () {
       var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11(movedNodes) {
-        var _this2 = this;
+        var _this3 = this;
         var targetNodes, newPos, oldGraph, newGraph;
         return _regeneratorRuntime.wrap(function _callee11$(_context11) {
           while (1) switch (_context11.prev = _context11.next) {
@@ -767,7 +850,7 @@ var DPGraph = /*#__PURE__*/function (_GraphCore) {
                   var x = current.x,
                     y = current.y;
                   var id = node.id;
-                  _this2.updateNodeById(id, function (node) {
+                  _this3.updateNodeById(id, function (node) {
                     node.setData({
                       x: x,
                       y: y

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

@@ -15,6 +15,10 @@ interface IDynamicPortsProps {
      * 更新节点名称
      */
     isUpdateNodeName?: boolean;
+    /**
+     * 是否支持框选
+     */
+    isSelection?: boolean;
     /**
      * 图更新事件
      */

package/es/comps/DynamicPorts/index.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /*
  * @Author: wangxian
  * @Date: 2022-05-16 18:53:31
- * @LastEditTime: 2023-09-15 16:12:26
+ * @LastEditTime: 2023-11-30 10:25:51
  */
 import React from 'react';
 import { filter } from 'rxjs';
@@ -18,6 +18,7 @@ import ContextMenu from './comps/ContextMenu';
 import { GraphHandler } from './comps/GraphHandler';
 var DynamicPorts = function DynamicPorts(props) {
   var defaultValue = props.defaultValue,
+    isSelection = props.isSelection,
     _props$dispose = props.dispose,
     dispose = _props$dispose === void 0 ? true : _props$dispose,
     isUpdateNodeName = props.isUpdateNodeName,
@@ -82,6 +83,12 @@ var DynamicPorts = function DynamicPorts(props) {
       firstLoadRef.current = false;
     }
   }, [defaultValue]);
+  React.useEffect(function () {
+    if (isSelection && dpGraph) {
+      var _dpGraphRef$current3, _dpGraphRef$current3$;
+      dpGraphRef.current.isGraphReady() && ((_dpGraphRef$current3 = dpGraphRef.current) === null || _dpGraphRef$current3 === void 0 ? void 0 : (_dpGraphRef$current3$ = _dpGraphRef$current3.graph) === null || _dpGraphRef$current3$ === void 0 ? void 0 : _dpGraphRef$current3$.enableMultipleSelection());
+    }
+  }, [isSelection, dpGraph]);
   React.useEffect(function () {
     if (dpGraph) {
       dpGraphRef.current.factory$.isUpdateNodeName.next(isUpdateNodeName);
@@ -130,6 +137,9 @@ var DynamicPorts = function DynamicPorts(props) {
           case 'real':
             dpGraphRef.current.zoomGraphRealSize();
             break;
+          case 'selection':
+            dpGraphRef.current.toggleSelectionEnabled();
+            break;
           default:
         }
       }
@@ -151,7 +161,8 @@ var DynamicPorts = function DynamicPorts(props) {
     onZoomIn: onHandleSideToolbar('in'),
     onZoomOut: onHandleSideToolbar('out'),
     onFitContent: onHandleSideToolbar('fit'),
-    onRealContent: onHandleSideToolbar('real')
+    onRealContent: onHandleSideToolbar('real'),
+    onToggleSelectionEnabled: isSelection ? onHandleSideToolbar('selection') : undefined
   }), /*#__PURE__*/React.createElement("div", {
     style: {
       height: '100%',

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

@@ -39,6 +39,42 @@ export declare function formatNodeInfoToNodeMeta(nodeData: NDPGraph.Node, inputP
     outPorts: NDPGraph.OutPort[];
     param?: NDPGraph.Param;
 };
+export declare function formattedEdgesToEdgeMeta(edge: NDPGraph.Edge): {
+    data: {
+        source: string;
+        target: string;
+        outPortId: string;
+        inPortId: string;
+        color?: string;
+    };
+    sourceAnchor: string;
+    source: {
+        cell: string;
+        port: string;
+        anchor: {
+            name: string;
+        };
+    };
+    target: {
+        cell: string;
+        port: string;
+        anchor: {
+            name: string;
+        };
+    };
+    label: string;
+    zIndex: number;
+    attrs: {
+        line: {
+            strokeDasharray: string;
+            targetMarker: string;
+            stroke: string;
+        };
+    };
+    outPortId: string;
+    inPortId: string;
+    color?: string;
+};
 /**
  * 将暴露给接口的图信息转换可渲染的结图结构信息
  * @returns

package/es/comps/DynamicPorts/utils.js

@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 16:40:49
- * @LastEditTime: 2023-07-03 16:31:06
+ * @LastEditTime: 2023-11-30 14:07:43
  */
 import { sortBy } from 'lodash-es';
 import { NODE_HEIGHT, NODE_WIDTH } from './constant';
@@ -73,6 +73,40 @@ export function formatNodeInfoToNodeMeta(nodeData) {
     zIndex: 10
   });
 }
+export function formattedEdgesToEdgeMeta(edge) {
+  var source = edge.source,
+    outPortId = edge.outPortId,
+    target = edge.target,
+    inPortId = edge.inPortId,
+    color = edge.color;
+  return _objectSpread(_objectSpread({}, edge), {}, {
+    data: _objectSpread({}, edge),
+    sourceAnchor: 'bottom',
+    source: {
+      cell: source.toString(),
+      port: outPortId.toString(),
+      anchor: {
+        name: 'bottom'
+      }
+    },
+    target: {
+      cell: target.toString(),
+      port: inPortId.toString(),
+      anchor: {
+        name: 'center'
+      }
+    },
+    label: '',
+    zIndex: 9,
+    attrs: {
+      line: {
+        strokeDasharray: '',
+        targetMarker: '',
+        stroke: color || '#808080'
+      }
+    }
+  });
+}
 /**
  * 将暴露给接口的图信息转换可渲染的结图结构信息
  * @returns
@@ -84,38 +118,7 @@ export function formatGraphData(graphData) {
     edges = _graphData$edges === void 0 ? [] : _graphData$edges;
   // 格式化边
   var formattedEdges = edges.map(function (edge) {
-    var source = edge.source,
-      outPortId = edge.outPortId,
-      target = edge.target,
-      inPortId = edge.inPortId,
-      color = edge.color;
-    return _objectSpread(_objectSpread({}, edge), {}, {
-      data: _objectSpread({}, edge),
-      sourceAnchor: 'bottom',
-      source: {
-        cell: source.toString(),
-        port: outPortId.toString(),
-        anchor: {
-          name: 'bottom'
-        }
-      },
-      target: {
-        cell: target.toString(),
-        port: inPortId.toString(),
-        anchor: {
-          name: 'center'
-        }
-      },
-      label: '',
-      zIndex: 1,
-      attrs: {
-        line: {
-          strokeDasharray: '',
-          targetMarker: '',
-          stroke: color || '#808080'
-        }
-      }
-    });
+    return formattedEdgesToEdgeMeta(edge);
   });
   // 记录所有已连线的输入桩
   var inputPortConnectedMap = formattedEdges.reduce(function (acc, edge) {

package/es/comps/Editable/DataCell/Input.js

@@ -5,7 +5,7 @@ import _Input from "antd/es/input";
 /*
  * @Author: wangxian
  * @Date: 2022-03-04 14:53:50
- * @LastEditTime: 2022-09-29 16:44:52
+ * @LastEditTime: 2023-12-04 14:28:37
  */
 import React from 'react';
 import { EditableContext } from '../interface';
@@ -38,6 +38,7 @@ function Index(props) {
     }
   }, /*#__PURE__*/React.createElement(_Input, {
     ref: inputRef,
+    title: props === null || props === void 0 ? void 0 : props.record[dataIndex],
     size: "small",
     disabled: editConfig.type === 'edit' ? disabled : false
   }));

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

@@ -49,8 +49,10 @@ 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;
+    toggleSelectionEnabled: (enabled?: boolean) => void;
     onMoveNodeStart(args: any): void;
     onMoveNodes(args: any[]): void;
+    onCopyNodes(args: any[]): void;
     addNode: (nodeMeta: any) => N;
     getNodes: () => N[];
     addEdge: (edgeMeta: any) => E;

package/es/framework/graph/index.js

@@ -6,7 +6,7 @@ var _excluded = ["wrapper", "container", "nodes", "edges"];
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 13:55:44
- * @LastEditTime: 2023-09-20 08:04:16
+ * @LastEditTime: 2023-11-30 14:12:37
  */
 import { Graph } from '@antv/x6';
 import { debounceTime, fromEventPattern, map, merge, scan, tap } from 'rxjs';
@@ -52,6 +52,20 @@ export var GraphCore = /*#__PURE__*/function () {
         (_this$graph4 = _this.graph) === null || _this$graph4 === void 0 ? void 0 : _this$graph4.centerContent();
       }
     };
+    // 切换可框选模式
+    this.toggleSelectionEnabled = function (enabled) {
+      var graph = _this.graph;
+      if (graph) {
+        var needEnableRubberBand = typeof enabled === 'undefined' ? !graph.isRubberbandEnabled() : enabled;
+        if (needEnableRubberBand) {
+          graph.enableRubberband();
+          graph.disablePanning();
+        } else {
+          graph.disableRubberband();
+          graph.enablePanning();
+        }
+      }
+    };
     /* 以下为主动触发的方法 */
     this.addNode = function (nodeMeta) {
       var _this$nodeMetas;
@@ -324,6 +338,14 @@ export var GraphCore = /*#__PURE__*/function () {
       })).subscribe(function (movedNodes) {
         _this2.onMoveNodes(movedNodes);
       });
+      // 处理节点复制事件
+      this.factorySub.copyNode = fromEventPattern(function (handler) {
+        _this2.graph.bindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v'], handler);
+      }, function () {
+        _this2.graph.unbindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v']);
+      }).subscribe(function (args) {
+        _this2.onCopyNodes(args);
+      });
     }
     // 渲染
   }, {
@@ -340,8 +362,7 @@ export var GraphCore = /*#__PURE__*/function () {
         var height = wrapper.clientHeight;
         var graph = new Graph(_objectSpread(_objectSpread({}, options), {}, {
           width: width,
-          height: height,
-          snapline: true
+          height: height
         }));
         this.graph = graph;
         nodeMetas.forEach(function (nodeMeta) {
@@ -424,15 +445,21 @@ export var GraphCore = /*#__PURE__*/function () {
     value: function onMoveNodes(args) {
       if (process.env.NODE_ENV === 'development') {}
     }
+  }, {
+    key: "onCopyNodes",
+    value: function onCopyNodes(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
   }, {
     key: "dispose",
     value:
     // 注销
     function dispose() {
-      var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele;
+      var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele, _this$factorySub$copy;
       (_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();
+      (_this$factorySub$copy = this.factorySub.copyNode) === null || _this$factorySub$copy === void 0 ? void 0 : _this$factorySub$copy.unsubscribe();
       // ! 这一步要注意放在图的事件订阅都取消了之后
       if (this.wrapper) {
         var _this$graph11;

package/es/framework/graph/index.less

@@ -3,10 +3,10 @@
   height: 100%;
 }
 
-.x6-widget-selection-inner {
-  border: none !important;
-  box-shadow: none !important;
-}
+// .x6-widget-selection-inner {
+//   border: none !important;
+//   box-shadow: none !important;
+// }
 
 .x6-widget-selection-box {
   border: none !important;

package/package.json

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