fix: auto fit (#696)

* fix: auto fit * fix: 兼容旧图表
ant-design · Jun 17, 2021 · eb5fc51 · eb5fc51
1 parent 5842e47
commit eb5fc51
Show file tree

Hide file tree

Showing 20 changed files with 39 additions and 21 deletions.
diff --git a/docs/.g2plot-plot-api/indented-tree-graph.md b/docs/.g2plot-plot-api/indented-tree-graph.md
@@ -254,6 +254,12 @@ Whether to display tail arrows, default to 'true'.
 
 Whether to turn on animation, default to 'true'.
 
+#### autoFit
+
+<description>**optional** _Boolean_</description>
+
+Whether to scale node size adaptive container. Default value is 'true '.
+
 #### layout
 
 <description>**optional** _object_</description>

diff --git a/docs/.g2plot-plot-api/indented-tree-graph.zh-CN.md b/docs/.g2plot-plot-api/indented-tree-graph.zh-CN.md
@@ -253,6 +253,12 @@ collapseExpand 为 true 时生效， 默认值 `right`，可配合 layout 使用
 
 是否开启动画，默认值 `true`。
 
+#### autoFit
+
+<description>**optional** _Boolean_</description>
+
+是否缩放节点大小自适应容器，默认值 `true`。
+
 #### layout
 
 <description>**optional** _object_</description>

diff --git a/docs/.g2plot-plot-api/organizational-graph.md b/docs/.g2plot-plot-api/organizational-graph.md
@@ -238,7 +238,7 @@ Whether to turn on animation, default to 'true'.
 
 <description>**optional** _Boolean_</description>
 
-Whether to automatically adjust the layout after updating data. Default value is 'true '.
+Whether to scale node size adaptive container. Default value is 'true '.
 
 #### minimapCfg
 

diff --git a/docs/.g2plot-plot-api/organizational-graph.zh-CN.md b/docs/.g2plot-plot-api/organizational-graph.zh-CN.md
@@ -238,7 +238,7 @@ interface Data {
 
 <description>**optional** _Boolean_</description>
 
-更新数据后是否自动调整布局，默认为 true。
+是否缩放节点大小自适应容器，默认为 true。
 
 #### minimapCfg
 

diff --git a/docs/.g2plot-plot-api/radial-graph.md b/docs/.g2plot-plot-api/radial-graph.md
@@ -205,7 +205,7 @@ Whether to turn on animation, default to 'true'.
 
 <description>**optional** _Boolean_</description>
 
-Whether to automatically adjust the layout after updating data. Default value is 'true '.
+Whether to scale node size adaptive container. Default value is 'true '.
 
 #### layout
 

diff --git a/docs/.g2plot-plot-api/radial-graph.zh-CN.md b/docs/.g2plot-plot-api/radial-graph.zh-CN.md
@@ -217,7 +217,7 @@ interface Data {
 
 <description>**optional** _Boolean_</description>
 
-更新数据后是否自动调整布局，默认值 `true`。
+是否缩放节点大小自适应容器，默认值 `true`。
 
 #### layout
 

diff --git a/docs/demos/indented-tree-graph.md b/docs/demos/indented-tree-graph.md
@@ -38,6 +38,7 @@ const DemoIndentedTree: React.FC = () => {
 
   const config = {
     data,
+    autoFit: false,
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
   };
 

diff --git a/docs/demos/indented-tree-graph.zh-CN.md b/docs/demos/indented-tree-graph.zh-CN.md
@@ -38,6 +38,7 @@ const DemoIndentedTree: React.FC = () => {
 
   const config = {
     data,
+    autoFit: false,
     behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
   };
 

diff --git a/src/graph/dagre.tsx b/src/graph/dagre.tsx
@@ -46,6 +46,7 @@ const DagreGraph: React.FC<RelationGraph> = (props) => {
     edgeStyle = defaultEdgeStyle,
     nodeStateStyles = defaultStateStyles,
     edgeStateStyles = defaultStateStyles,
+    autoFit = true,
     graphRef,
     onReady,
     loading,
@@ -95,7 +96,7 @@ const DagreGraph: React.FC<RelationGraph> = (props) => {
 
     processMinimap(minimapCfg, graph);
 
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
 
     if (onReady) {
       onReady(graph);

diff --git a/src/graph/dagreFundFlow.tsx b/src/graph/dagreFundFlow.tsx
@@ -51,6 +51,7 @@ const DagreFundFlowGraph: React.FC<RelationGraph> = (props) => {
     nodeStateStyles = defaultStateStyles,
     edgeStateStyles = defaultStateStyles,
     colorMap = {},
+    autoFit = true,
     graphRef,
     onReady,
     loading,
@@ -119,8 +120,7 @@ const DagreFundFlowGraph: React.FC<RelationGraph> = (props) => {
         },
       });
     });
-
-    graph.fitView();
+    autoFit ? graph.fitView() : graph.fitCenter();
     bindEvents(graph, props);
     return () => {
       if (graphs[graphId]) {

diff --git a/src/graph/indented.tsx b/src/graph/indented.tsx
@@ -61,6 +61,7 @@ const IndentedTree: React.FC<RelationGraph> = (props) => {
     nodeStateStyles = defaultStateStyles,
     edgeStateStyles = defaultStateStyles,
     collapseExpand = true,
+    autoFit = true,
     handleNodeClick,
     graphRef,
     onReady,
@@ -109,7 +110,7 @@ const IndentedTree: React.FC<RelationGraph> = (props) => {
 
     processMinimap(minimapCfg, graph);
 
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
     if (onReady) {
       onReady(graph);
     }

diff --git a/src/graph/organizationTreeGraph.tsx b/src/graph/organizationTreeGraph.tsx
@@ -64,6 +64,7 @@ const OrganizationTreeGraphComponent: React.FC<RelationGraph> = (props) => {
     edgeStyle = defaultEdgeStyle,
     nodeStateStyles = defaultStateStyles,
     edgeStateStyles = defaultStateStyles,
+    autoFit = true,
     graphRef,
     onReady,
     loading,
@@ -116,7 +117,7 @@ const OrganizationTreeGraphComponent: React.FC<RelationGraph> = (props) => {
     }
 
     processMinimap(minimapCfg, graph);
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
     if (onReady) {
       onReady(graph);
     }

diff --git a/src/graph/types.tsx b/src/graph/types.tsx
@@ -51,6 +51,6 @@ export interface RelationGraph extends ContainerConfig {
   graphRef?: React.MutableRefObject<IGraph | undefined>;
   /** 图表渲染完成回调 */
   onReady?: (graph: IGraph) => void;
-  /** 更新数据后是否自动调整布局 */
+  /** 是否缩放节点大小自适应容器 */
   autoFit?: boolean;
 }
diff --git a/src/graph/utils.tsx b/src/graph/utils.tsx
@@ -57,11 +57,11 @@ export const getGraphId = (graph: { current?: string }) => {
   return graph.current;
 };
 
-export const renderGraph = (graph: IGraph, data: any) => {
+export const renderGraph = (graph: IGraph, data: any, autoFit: boolean) => {
   const originData = deepClone(data);
   graph.data(originData);
   graph.render();
-  graph.fitView();
+  autoFit ? graph.fitView() : graph.fitCenter();
 };
 
 // 事件绑定，兼容历史数据

diff --git a/src/graphs/indentedTreeGraph/index.tsx b/src/graphs/indentedTreeGraph/index.tsx
@@ -68,6 +68,7 @@ const IndentedTreeGraph: React.FC<IndentedTreeGraphConfig> = (props) => {
     footerValueStyle,
     showArrow = true,
     arrowType = 'vee',
+    autoFit = true,
     onReady,
     loading,
     loadingTemplate,
@@ -149,7 +150,7 @@ const IndentedTreeGraph: React.FC<IndentedTreeGraphConfig> = (props) => {
     if (collapseExpand) {
       bindDefaultEvents(graph, collapseExpand);
     }
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
 
     if (onReady) {
       onReady(graph);

diff --git a/src/graphs/organizationalGraph/index.tsx b/src/graphs/organizationalGraph/index.tsx
@@ -66,6 +66,7 @@ const OrganizationalGraph: React.FC<OrganizationalGraphConfig> = (props) => {
     markerStyle,
     nodeStateStyles = defaultStateStyles,
     edgeStateStyles = defaultStateStyles,
+    autoFit = true,
     onReady,
     loading,
     loadingTemplate,
@@ -142,7 +143,7 @@ const OrganizationalGraph: React.FC<OrganizationalGraphConfig> = (props) => {
     });
 
     processMinimap(minimapCfg, graph);
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
     if (onReady) {
       onReady(graph);
     }

diff --git a/src/graphs/radialGraph/index.tsx b/src/graphs/radialGraph/index.tsx
@@ -41,6 +41,7 @@ const RadialGraph: React.FC<RadialGraphConfig> = (props) => {
     edgeStateStyles = defaultStateStyles,
     showArrow = false,
     arrowType = 'triangle',
+    autoFit = true,
     onReady,
     loading,
     loadingTemplate,
@@ -108,7 +109,7 @@ const RadialGraph: React.FC<RadialGraphConfig> = (props) => {
       };
     });
 
-    renderGraph(graph, data);
+    renderGraph(graph, data, autoFit);
 
     if (onReady) {
       onReady(graph);

diff --git a/src/graphs/types.tsx b/src/graphs/types.tsx
@@ -91,7 +91,7 @@ export interface CommonConfig extends ContainerConfig {
   layout?: any;
   /** 是否开启动画 */
   animate?: boolean;
-  /** 更新数据后是否自动调整布局 */
+  /** 是否缩放节点大小自适应容器 */
   autoFit?: boolean;
   /** 图表渲染完成回调 */
   onReady?: (graph: IGraph) => void;

diff --git a/src/graphs/utils.tsx b/src/graphs/utils.tsx
@@ -92,11 +92,11 @@ export const getGraphId = (graph: { current?: string }) => {
   return graph.current;
 };
 
-export const renderGraph = (graph: IGraph, data: any) => {
+export const renderGraph = (graph: IGraph, data: any, autoFit: boolean) => {
   const originData = deepClone(data);
   graph.data(originData);
   graph.render();
-  graph.fitView();
+  autoFit ? graph.fitView() : graph.fitCenter();
 };
 
 export const processMinimap = (cfg: MiniMapConfig | undefined = {}, graph: Graph) => {

diff --git a/src/hooks/useGraph.ts b/src/hooks/useGraph.ts
@@ -35,9 +35,7 @@ export default function useInit(
   useEffect(() => {
     if (graphInstance && !graphInstance.destroyed) {
       graphInstance.changeData(data);
-      if (autoFit) {
-        graphInstance.fitView();
-      }
+      autoFit ? graphInstance.fitView() : graphInstance.fitCenter();
     }
   }, [data]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ const DemoIndentedTree: React.FC = () => { @@
       const config = {
         data,
+        autoFit: false,
         behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
       };
@@ Expand Down @@