feat: 流程图工具栏组件之整理画布

shi-gui · Sep 20, 2024 · 25d0edb · 25d0edb
1 parent 037366c
commit 25d0edb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/views/process/components/FlowTool.tsx b/src/views/process/components/FlowTool.tsx
@@ -2,7 +2,7 @@
  * @Author: zhangshigui
  * @Date: 2024-09-04 00:34:01
  * @LastEditors: zhangshigui
- * @LastEditTime: 2024-09-20 16:34:24
+ * @LastEditTime: 2024-09-20 16:47:37
  * @Description: 工具栏组件
  *
  */
@@ -13,10 +13,11 @@ import { useTranslation } from 'react-i18next';
 
 export interface Iprops {
  zoom: (val: number) => void;
+ tidy: () => void;
 }
 const FlowTool = (props: Iprops) => {
  const { t } = useTranslation();
- const { zoom } = props;
+ const { zoom, tidy } = props;
 
  const [percent, Setpercent] = useState<number>(100);
  // 最小|最大缩放比例
@@ -51,7 +52,7 @@ const FlowTool = (props: Iprops) => {
  <PlusOutlined className={percent >= maxPercent ? 'disabled' : ''} onClick={() => handleZoom(20)} />
  </Tooltip>
  <Tooltip title={t('整理画布')}>
- <BranchesOutlined />
+ <BranchesOutlined onClick={() => tidy()} />
  </Tooltip>
  </div>
  );

diff --git a/src/views/process/index.tsx b/src/views/process/index.tsx
@@ -23,6 +23,12 @@ const Process = () => {
  function handleZoom(value: number) {
  graphMain?.graph.zoomTo(value);
  }
+ // 整理画布
+ function handleTidy() {
+ //销毁并从父节点中移除节点/边
+ graphMain?.graph.dispose();
+ graphMain?.createGraph(map.current, minMap.current, data);
+ }
  return (
  <div className="graph-container">
  {/* 画布容器 */}
@@ -32,7 +38,7 @@ const Process = () => {
  <div id="min-map" ref={minMap} />
 
  {/* 工具栏组件 */}
- <FlowTool zoom={handleZoom} />
+ <FlowTool zoom={handleZoom} tidy={handleTidy} />
  </div>
  );
 };