feat: add zoom in and out for graph (#173)

XinyueDu · duxinyue.dxy · web-flow · commit e3be22fb7f32 · 2025-07-28T21:32:12.000+08:00
* feat: add zoom

* feat: optimize icon

* feat: add changeset

* feat: optimize svg

* fix: fixed ci error

---------

Co-authored-by: duxinyue.dxy &lt;duxinyue.dxy@antgroup.com&gt;
diff --git a/.changeset/yummy-months-return.md b/.changeset/yummy-months-return.md
@@ -0,0 +1,5 @@
+---
+'@antv/gpt-vis': patch
+---
+
+add zoomin zoom out
diff --git a/src/ChartCodeRender/VisChart.tsx b/src/ChartCodeRender/VisChart.tsx
@@ -1,13 +1,12 @@
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import React, { memo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
 import { magula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { Check, Copy, ZoomIn, ZoomOut } from './icon';
 import Loading from './Loading';
 import {
   ChartWrapper,
-  CopyButton,
   ErrorMessage,
   GlobalStyles,
   StyledGPTVis,
@@ -17,13 +16,23 @@ import {
   TabHeader,
   TabLeftGroup,
   TabRightGroup,
+  TextButton,
 } from './styles';
 import type { ChartComponents, ChartJson, ComponentErrorRender, ErrorRender } from './type';
 import { handleCopyCode } from './utils';
 
 // 注册 JSON 语言支持
 SyntaxHighlighter.registerLanguage('json', json);
 
+const G6List = [
+  'mind-map',
+  'fishbone-diagram',
+  'flow-diagram',
+  'organization-chart',
+  'network-graph',
+  'indented-tree',
+];
+
 type RenderVisChartProps = {
   content: string;
   components: ChartComponents;
@@ -42,6 +51,7 @@ export const RenderVisChart: React.FC<RenderVisChartProps> = memo(
     const [activeTab, setActiveTab] = useState<'chart' | 'code'>('chart');
     const [hasRenderError, setHasRenderError] = useState(false);
     const [copied, setCopied] = useState(false);
+    const chartRef = useRef<any>(null);
     let chartJson: ChartJson;
 
     try {
@@ -141,6 +151,25 @@ export const RenderVisChart: React.FC<RenderVisChartProps> = memo(
       }
     };
 
+    const isG6 = G6List.includes(type);
+
+    // 缩放功能函数
+    const handleZoomOut = () => {
+      if (chartRef.current && typeof chartRef.current.zoomTo === 'function') {
+        const currentZoom = chartRef.current.getZoom() || 1;
+        const newZoom = Math.min(currentZoom * 1.15, 1.5);
+        chartRef.current.zoomTo(newZoom);
+      }
+    };
+
+    const handleZoomIn = () => {
+      if (chartRef.current && typeof chartRef.current.zoomTo === 'function') {
+        const currentZoom = chartRef.current.getZoom() || 1;
+        const newZoom = Math.max(currentZoom / 1.15, 0.1);
+        chartRef.current.zoomTo(newZoom);
+      }
+    };
+
     // Render the supported chart component with data
     return (
       <TabContainer style={style}>
@@ -155,13 +184,32 @@ export const RenderVisChart: React.FC<RenderVisChartProps> = memo(
           </TabLeftGroup>
 
           <TabRightGroup>
-            {activeTab === 'code' && (
+            {activeTab === 'chart' ? (
+              <>
+                {isG6 && (
+                  <>
+                    <TextButton
+                      onClick={handleZoomIn}
+                      style={{ width: '24px', height: '24px', padding: 0 }}
+                    >
+                      <ZoomIn size={18} />
+                    </TextButton>
+                    <TextButton
+                      onClick={handleZoomOut}
+                      style={{ width: '24px', height: '24px', padding: 0 }}
+                    >
+                      <ZoomOut size={18} />
+                    </TextButton>
+                  </>
+                )}
+              </>
+            ) : (
               <>
                 {/* 复制代码 */}
-                <CopyButton onClick={handleCopy}>
-                  {copied ? <CheckOutlined /> : <CopyOutlined />}
+                <TextButton onClick={handleCopy}>
+                  {copied ? <Check /> : <Copy />}
                   {copied ? '完成' : '复制'}
-                </CopyButton>
+                </TextButton>
               </>
             )}
           </TabRightGroup>
@@ -185,7 +233,12 @@ export const RenderVisChart: React.FC<RenderVisChartProps> = memo(
               <StyledGPTVis className="gpt-vis">
                 <GlobalStyles />
                 <ChartWrapper>
-                  <ChartComponent {...chartProps} />
+                  <ChartComponent
+                    {...chartProps}
+                    onReady={(chart: any) => {
+                      chartRef.current = chart;
+                    }}
+                  />
                 </ChartWrapper>
               </StyledGPTVis>
             </ErrorBoundary>
diff --git a/src/ChartCodeRender/icon.tsx b/src/ChartCodeRender/icon.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+interface Props extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+export const Copy: React.FC<Props> = ({ size = 14, fill = '#707070' }) => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5503"
+    width={size}
+    height={size}
+    fill={fill}
+  >
+    <path
+      d="M768 682.666667V170.666667a85.333333 85.333333 0 0 0-85.333333-85.333334H170.666667a85.333333 85.333333 0 0 0-85.333334 85.333334v512a85.333333 85.333333 0 0 0 85.333334 85.333333h512a85.333333 85.333333 0 0 0 85.333333-85.333333zM170.666667 170.666667h512v512H170.666667z m682.666666 85.333333v512a85.333333 85.333333 0 0 1-85.333333 85.333333H256a85.333333 85.333333 0 0 0 85.333333 85.333334h426.666667a170.666667 170.666667 0 0 0 170.666667-170.666667V341.333333a85.333333 85.333333 0 0 0-85.333334-85.333333z"
+      p-id="5504"
+    ></path>
+  </svg>
+);
+
+export const ZoomOut: React.FC<Props> = ({ size = 14, fill = '#707070' }) => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5664"
+    width={size}
+    height={size}
+    fill={fill}
+  >
+    <path
+      d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"
+      fill="#231815"
+      p-id="5665"
+    ></path>
+    <path
+      d="M555 418.3h-99.8v-99.8c0-14-11.4-25.4-25.4-25.4s-25.4 11.4-25.4 25.4v99.8h-99.8c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4h99.8v99.8c0 14 11.4 25.4 25.4 25.4s25.4-11.4 25.4-25.4v-99.8H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"
+      fill="#231815"
+      p-id="5666"
+    ></path>
+  </svg>
+);
+
+export const ZoomIn: React.FC<Props> = ({ size = 14, fill = '#707070' }) => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5826"
+    width={size}
+    height={size}
+    fill={fill}
+  >
+    <path
+      d="M889.5 852.7l-220-219.9c45-53.4 72.1-122.3 72.1-197.5 0-169.4-137.8-307.3-307.3-307.3S127.1 265.8 127.1 435.3s137.8 307.3 307.3 307.3c76.1 0 145.7-27.8 199.4-73.8l219.8 219.8c4.9 5 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4c10-9.9 10-26 0.1-35.9zM434.4 691.8c-141.4 0-256.5-115.1-256.5-256.5 0-141.5 115.1-256.5 256.5-256.5s256.5 115.1 256.5 256.5-115.1 256.5-256.5 256.5z"
+      fill="#231815"
+      p-id="5827"
+    ></path>
+    <path
+      d="M555 418.3H304.7c-14 0-25.4 11.4-25.4 25.4s11.4 25.4 25.4 25.4H555c14 0 25.4-11.4 25.4-25.4S569 418.3 555 418.3z"
+      fill="#231815"
+      p-id="5828"
+    ></path>
+  </svg>
+);
+
+export const Check: React.FC<Props> = ({ size = 14, fill = '#707070' }) => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="5988"
+    width={size}
+    height={size}
+    fill={fill}
+  >
+    <path
+      d="M380.416 822.144c-10.432 0-20.864-3.968-28.8-11.968L75.968 534.592c-15.936-15.936-15.936-41.664 0-57.6 15.872-15.872 41.664-15.872 57.536 0L380.416 723.84l510.08-510.016c15.872-15.936 41.664-15.936 57.536 0 15.936 15.936 15.936 41.664 0 57.6L409.216 810.24c-7.936 7.936-18.368 11.904-28.8 11.904z"
+      fill=""
+      p-id="5989"
+    ></path>
+  </svg>
+);
diff --git a/src/ChartCodeRender/styles.ts b/src/ChartCodeRender/styles.ts
@@ -9,7 +9,7 @@ export const StyledGPTVis = styled.div`
   padding: 16px;
 `;
 
-export const CopyButton = styled.button`
+export const TextButton = styled.button`
   border: none;
   box-shadow: none;
   background: transparent;
@@ -31,7 +31,7 @@ export const CopyButton = styled.button`
   &:hover,
   &:focus {
     color: #666;
-    background: #f5f5f5;
+    background: #e8e8e8;
     transform: scale(1.02);
   }
 
@@ -171,3 +171,11 @@ export const StyledTabButton = styled.button<{ active?: boolean }>`
     transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 `;
+
+export const Divider = styled.div`
+  width: 1px;
+  height: 16px;
+  background-color: #d9d9d9;
+  margin: 0 8px;
+  flex-shrink: 0;
+`;
diff --git a/src/FishboneDiagram/index.tsx b/src/FishboneDiagram/index.tsx
@@ -10,6 +10,9 @@ export interface FishboneDiagramProps extends TreeGraphProps {}
 const defaultConfig: FishboneOptions = {
   autoFit: 'view',
   autoResize: true,
+  zoomRange: [0.1, 5],
+  zoom: 1,
+  behaviors: ['drag-canvas'],
 };
 
 const FishboneDiagram: React.FC<FishboneDiagramProps> = (props) => {
diff --git a/src/FlowDiagram/index.tsx b/src/FlowDiagram/index.tsx
@@ -14,6 +14,8 @@ export interface FlowDiagramProps extends GraphProps {}
 const defaultConfig: FlowGraphOptions = {
   autoResize: true,
   autoFit: 'view',
+  zoomRange: [0.1, 5],
+  zoom: 1,
   node: {
     style: {
       component: (d: G6.NodeData) => {
@@ -49,8 +51,8 @@ const defaultConfig: FlowGraphOptions = {
       },
     },
   },
-  behaviors: (prev) => [
-    ...prev,
+  behaviors: [
+    'drag-canvas',
     {
       type: 'hover-activate-neighbors',
       onHover: (e: G6.IPointerEvent) => {
diff --git a/src/IndentedTree/index.tsx b/src/IndentedTree/index.tsx
@@ -11,6 +11,8 @@ const defaultConfig: IndentedTreeOptions = {
   type: 'linear',
   autoFit: 'view',
   autoResize: true,
+  zoomRange: [0.1, 5],
+  zoom: 1,
   node: { animation: { update: false, translate: false } },
   edge: { animation: { update: false, translate: false } },
   transforms: (prev) => [
@@ -24,6 +26,7 @@ const defaultConfig: IndentedTreeOptions = {
       enable: true,
     },
   ],
+  behaviors: ['drag-canvas'],
 };
 
 const IndentedTree: React.FC<IndentedTreeProps> = (props) => {
diff --git a/src/MindMap/index.tsx b/src/MindMap/index.tsx
@@ -11,6 +11,8 @@ const defaultConfig: MindMapOptions = {
   autoFit: 'view',
   autoResize: true,
   padding: 2,
+  zoomRange: [0.1, 5],
+  zoom: 1,
   node: { animation: { translate: false, update: false } },
   edge: { animation: { translate: false, update: false } },
   transforms: (prev) => [
@@ -24,6 +26,7 @@ const defaultConfig: MindMapOptions = {
       enable: true,
     },
   ],
+  behaviors: ['drag-canvas'],
 };
 
 export interface MindMapProps extends TreeGraphProps {}
diff --git a/src/NetworkGraph/index.tsx b/src/NetworkGraph/index.tsx
@@ -8,7 +8,10 @@ import { visGraphData2GraphData } from '../utils/graph';
 export interface NetworkGraphProps extends GraphProps {}
 
 const defaultConfig: NetworkGraphOptions = {
+  autoFit: 'view',
   autoResize: true,
+  zoomRange: [0.1, 5],
+  zoom: 1,
   node: {
     style: {
       size: 28,
@@ -27,7 +30,7 @@ const defaultConfig: NetworkGraphOptions = {
     },
     animation: { enter: false },
   },
-  behaviors: (prev) => [...prev, { key: 'hover-activate', type: 'hover-activate', degree: 1 }],
+  behaviors: ['drag-canvas', { key: 'hover-activate', type: 'hover-activate', degree: 1 }],
   transforms: (prev) => [...prev, 'process-parallel-edges'],
   layout: {
     type: 'force',
diff --git a/src/OrganizationChart/index.tsx b/src/OrganizationChart/index.tsx
@@ -13,6 +13,8 @@ const defaultConfig: OrganizationChartOptions = {
   padding: [40, 0, 0, 120],
   autoFit: 'view',
   autoResize: true,
+  zoomRange: [0.1, 5],
+  zoom: 1,
   node: {
     style: {
       component: (d: G6.NodeData) => {
@@ -37,7 +39,7 @@ const defaultConfig: OrganizationChartOptions = {
       },
     },
   },
-  behaviors: (prev) => [...prev, 'hover-activate-neighbors'],
+  behaviors: ['drag-canvas', 'hover-activate-neighbors'],
   transforms: (prev) => [
     ...prev.filter((t) => (t as G6.BaseTransformOptions).type !== 'collapse-expand-react-node'),
     {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@antv/gpt-vis': patch
 +---
++
 +add zoomin zoom out