Add fit to node canvas util (#258)

* Add fit to node canvas util

* Update docs

* Pull fit to node logic into functions

* Add support for fitting the view to multiple nodes

* Add string type input to fitNodes

* Add util comment

docs/Advanced/Refs.mdx

@@ -69,14 +69,29 @@ export interface CanvasRef {
   containerHeight?: number;
 
   /**
-   * Center the canvas to the viewport.
+   * Positions the canvas to the viewport.
    */
-  centerCanvas?: () => void;
+  positionCanvas?: (position: CanvasPosition, animated?: boolean) => void;
 
   /**
    * Fit the canvas to the viewport.
    */
-  fitCanvas?: () => void;
+  fitCanvas?: (animated?: boolean) => void;
+
+  /**
+   * Fit a group of nodes to the viewport.
+   */
+  fitNodes?: (nodeIds: string | string[], animated?: boolean) => void;
+
+  /**
+   * Scroll to X/Y
+   */
+  setScrollXY?: (xy: [number, number], animated?: boolean) => void;
+
+ /**
+   * Factor of zoom.
+   */
+  zoom: number;
 
   /**
    * Set a zoom factor of the canvas.

src/layout/useLayout.ts

@@ -1,19 +1,9 @@
-import {
-  RefObject,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState
-} from 'react';
-import {
-  elkLayout,
-  CanvasDirection,
-  ElkCanvasLayoutOptions
-} from './elkLayout';
+import { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import useDimensions from 'react-cool-dimensions';
 import isEqual from 'react-fast-compare';
 import { CanvasPosition, EdgeData, NodeData } from '../types';
+import { CanvasDirection, ElkCanvasLayoutOptions, elkLayout } from './elkLayout';
+import { calculateScrollPosition, calculateZoom, findNode } from './utils';
 
 export interface ElkRoot {
   x?: number;
@@ -84,35 +74,27 @@ export interface LayoutResult {
   /**
    * Positions the canvas to the viewport.
    */
-  positionCanvas?: (position: CanvasPosition) => void;
+  positionCanvas?: (position: CanvasPosition, animated?: boolean) => void;
 
   /**
    * Fit the canvas to the viewport.
    */
-  fitCanvas?: () => void;
+  fitCanvas?: (animated?: boolean) => void;
+
+  /**
+   * Fit a group of nodes to the viewport.
+   */
+  fitNodes?: (nodeIds: string | string[], animated?: boolean) => void;
 
   /**
    * Scroll to X/Y
    */
-  setScrollXY?: (xy: [number, number]) => void;
+  setScrollXY?: (xy: [number, number], animated?: boolean) => void;
 
   observe: (el: HTMLDivElement) => void;
 }
 
-export const useLayout = ({
-  maxWidth,
-  maxHeight,
-  nodes = [],
-  edges = [],
-  fit,
-  pannable,
-  defaultPosition,
-  direction,
-  layoutOptions = {},
-  zoom,
-  setZoom,
-  onLayoutChange
-}: LayoutProps) => {
+export const useLayout = ({ maxWidth, maxHeight, nodes = [], edges = [], fit, pannable, defaultPosition, direction, layoutOptions = {}, zoom, setZoom, onLayoutChange }: LayoutProps) => {
   const scrolled = useRef<boolean>(false);
   const ref = useRef<HTMLDivElement>();
   const { observe, width, height } = useDimensions<HTMLDivElement>();
@@ -122,6 +104,11 @@ export const useLayout = ({
   const canvasHeight = pannable ? maxHeight : height;
   const canvasWidth = pannable ? maxWidth : width;
 
+  const scrollToXY = (xy: [number, number], animated = false) => {
+    ref.current.scrollTo({ left: xy[0], top: xy[1], behavior: animated ? 'smooth' : 'auto' });
+    setScrollXY(xy);
+  };
+
   useEffect(() => {
     const promise = elkLayout(nodes, edges, {
       'elk.direction': direction,
@@ -151,81 +138,103 @@ export const useLayout = ({
         const centerX = (canvasWidth - layout.width * zoom) / 2;
         const centerY = (canvasHeight - layout.height * zoom) / 2;
         switch (position) {
-        case CanvasPosition.CENTER:
-          setXY([centerX, centerY]);
-          break;
-        case CanvasPosition.TOP:
-          setXY([centerX, 0]);
-          break;
-        case CanvasPosition.LEFT:
-          setXY([0, centerY]);
-          break;
-        case CanvasPosition.RIGHT:
-          setXY([canvasWidth - layout.width * zoom, centerY]);
-          break;
-        case CanvasPosition.BOTTOM:
-          setXY([centerX, canvasHeight - layout.height * zoom]);
-          break;
+          case CanvasPosition.CENTER:
+            setXY([centerX, centerY]);
+            break;
+          case CanvasPosition.TOP:
+            setXY([centerX, 0]);
+            break;
+          case CanvasPosition.LEFT:
+            setXY([0, centerY]);
+            break;
+          case CanvasPosition.RIGHT:
+            setXY([canvasWidth - layout.width * zoom, centerY]);
+            break;
+          case CanvasPosition.BOTTOM:
+            setXY([centerX, canvasHeight - layout.height * zoom]);
+            break;
         }
       }
     },
     [canvasWidth, canvasHeight, layout, zoom]
   );
 
   const positionScroll = useCallback(
-    (position: CanvasPosition) => {
+    (position: CanvasPosition, animated = false) => {
       const scrollCenterX = (canvasWidth - width) / 2;
       const scrollCenterY = (canvasHeight - height) / 2;
       if (pannable) {
         switch (position) {
-        case CanvasPosition.CENTER:
-          setScrollXY([scrollCenterX, scrollCenterY]);
-          break;
-        case CanvasPosition.TOP:
-          setScrollXY([scrollCenterX, 0]);
-          break;
-        case CanvasPosition.LEFT:
-          setScrollXY([0, scrollCenterY]);
-          break;
-        case CanvasPosition.RIGHT:
-          setScrollXY([canvasWidth - width, scrollCenterY]);
-          break;
-        case CanvasPosition.BOTTOM:
-          setScrollXY([scrollCenterX, canvasHeight - height]);
-          break;
+          case CanvasPosition.CENTER:
+            scrollToXY([scrollCenterX, scrollCenterY], animated);
+            break;
+          case CanvasPosition.TOP:
+            scrollToXY([scrollCenterX, 0], animated);
+            break;
+          case CanvasPosition.LEFT:
+            scrollToXY([0, scrollCenterY], animated);
+            break;
+          case CanvasPosition.RIGHT:
+            scrollToXY([canvasWidth - width, scrollCenterY], animated);
+            break;
+          case CanvasPosition.BOTTOM:
+            scrollToXY([scrollCenterX, canvasHeight - height], animated);
+            break;
         }
       }
     },
     [canvasWidth, canvasHeight, width, height, pannable]
   );
 
   const positionCanvas = useCallback(
-    (position: CanvasPosition) => {
+    (position: CanvasPosition, animated = false) => {
       positionVector(position);
-      positionScroll(position);
+      positionScroll(position, animated);
     },
     [positionScroll, positionVector]
   );
 
-  useEffect(() => {
-    ref?.current?.scrollTo(scrollXY[0], scrollXY[1]);
-  }, [scrollXY, ref]);
-
   useEffect(() => {
     if (scrolled.current && defaultPosition) {
       positionVector(defaultPosition);
     }
   }, [positionVector, zoom, defaultPosition]);
 
-  const fitCanvas = useCallback(() => {
-    if (layout) {
-      const heightZoom = height / layout.height;
-      const widthZoom = width / layout.width;
-      const scale = Math.min(heightZoom, widthZoom, 1);
-      setZoom(scale - 1);
-      positionCanvas(CanvasPosition.CENTER);
-    }
-  }, [height, layout, width, setZoom, positionCanvas]);
+  const fitCanvas = useCallback(
+    (animated = false) => {
+      if (layout) {
+        const heightZoom = height / layout.height;
+        const widthZoom = width / layout.width;
+        const scale = Math.min(heightZoom, widthZoom, 1);
+        setZoom(scale - 1);
+        positionCanvas(CanvasPosition.CENTER, animated);
+      }
+    },
+    [height, layout, width, setZoom, positionCanvas]
+  );
+
+  /**
+   * This centers the chart on the canvas, zooms in to fit the specified nodes, and scrolls to center the nodes in the viewport
+   */
+  const fitNodes = useCallback(
+    (nodeIds: string | string[], animated = true) => {
+      if (layout && layout.children) {
+        const nodes = Array.isArray(nodeIds) ? nodeIds.map((nodeId) => findNode(layout.children, nodeId)) : [findNode(layout.children, nodeIds)];
+
+        if (nodes) {
+          // center the chart
+          positionVector(CanvasPosition.CENTER);
+
+          const updatedZoom = calculateZoom({ nodes, viewportWidth: width, viewportHeight: height, maxViewportCoverage: 0.9, minViewportCoverage: 0.2 });
+          const scrollPosition = calculateScrollPosition({ nodes, viewportWidth: width, viewportHeight: height, canvasWidth, canvasHeight, chartWidth: layout.width, chartHeight: layout.height, zoom: updatedZoom });
+
+          setZoom(updatedZoom - 1);
+          scrollToXY(scrollPosition, animated);
+        }
+      }
+    },
+    [canvasHeight, canvasWidth, height, layout, positionVector, setZoom, width]
+  );
 
   useLayoutEffect(() => {
     const scroller = ref.current;
@@ -238,19 +247,7 @@ export const useLayout = ({
 
       scrolled.current = true;
     }
-  }, [
-    canvasWidth,
-    pannable,
-    canvasHeight,
-    layout,
-    height,
-    fit,
-    width,
-    defaultPosition,
-    positionCanvas,
-    fitCanvas,
-    ref
-  ]);
+  }, [canvasWidth, pannable, canvasHeight, layout, height, fit, width, defaultPosition, positionCanvas, fitCanvas, ref]);
 
   useLayoutEffect(() => {
     function onResize() {
@@ -278,6 +275,7 @@ export const useLayout = ({
     scrollXY,
     positionCanvas,
     fitCanvas,
-    setScrollXY
+    fitNodes,
+    setScrollXY: scrollToXY
   } as LayoutResult;
 };

src/layout/utils.test.ts

@@ -1,4 +1,4 @@
-import { parsePadding } from './utils';
+import { parsePadding, findNode, getChildCount, calculateZoom, calculateScrollPosition } from './utils';
 
 test('should set all sides to input number, when a number is provided', () => {
   const expectedPadding = {
@@ -29,3 +29,83 @@ test('should set each padding value individually, when an array with four number
   };
   expect(parsePadding([20, 50, 100, 150])).toEqual(expectedPadding);
 });
+
+test('should find a node by id', () => {
+  const layout = [
+    {
+      x: 0,
+      y: 0,
+      id: '1',
+      children: [{ x: 0, y: 0, id: '1', children: [] }]
+    },
+    {
+      x: 0,
+      y: 0,
+      id: '3',
+      children: [{ x: 0, y: 0, id: '4', children: [] }]
+    }
+  ];
+  const node = findNode(layout, '4');
+
+  expect(node).toEqual({ x: 0, y: 0, id: '4', children: [] });
+});
+
+test('should get the number of children a node has', () => {
+  const node = {
+    x: 0,
+    y: 0,
+    id: '1',
+    children: [
+      { x: 0, y: 0, id: '1', children: [] },
+      { x: 0, y: 0, id: '2', children: [{ x: 0, y: 0, id: '3', children: [] }] }
+    ]
+  };
+  const count = getChildCount(node);
+
+  expect(count).toEqual(3);
+});
+
+describe('calculateZoom', () => {
+  test('should calculate the zoom for a node', () => {
+    const node = { width: 100, height: 100, x: 0, y: 0, id: '1' };
+    const zoom = calculateZoom({ nodes: [node], viewportWidth: 1000, viewportHeight: 1000, minViewportCoverage: 0.2, maxViewportCoverage: 0.9 });
+
+    expect(zoom).toEqual(2);
+  });
+
+  test('should calculate the zoom for a node with many children', () => {
+    const node = { width: 100, height: 100, x: 0, y: 0, id: '0', children: [{ x: 0, y: 0, id: '1', children: [{ x: 0, y: 0, id: '2', children: [{ x: 0, y: 0, id: '3', children: [] }] }] }] };
+    const zoom = calculateZoom({ nodes: [node], viewportWidth: 1000, viewportHeight: 1000, minViewportCoverage: 0.2, maxViewportCoverage: 0.9 });
+
+    expect(zoom).toEqual(5);
+  });
+
+  test('should calculate the zoom for a group of nodes', () => {
+    const nodes = [
+      { width: 100, height: 100, x: 0, y: 0, id: '0' },
+      { width: 100, height: 100, x: 50, y: 50, id: '1' }
+    ];
+    const zoom = calculateZoom({ nodes, viewportWidth: 1000, viewportHeight: 1000, minViewportCoverage: 0.2, maxViewportCoverage: 0.9 });
+
+    expect(zoom).toEqual(2);
+  });
+});
+
+describe('calculateScrollPosition', () => {
+  test('should calculate the scroll position for a node', () => {
+    const node = { width: 100, height: 100, x: 0, y: 0, id: '1' };
+    const scrollPosition = calculateScrollPosition({ nodes: [node], viewportWidth: 1000, viewportHeight: 1000, canvasWidth: 2000, canvasHeight: 2000, chartWidth: 500, chartHeight: 500, zoom: 1 });
+
+    expect(scrollPosition).toEqual([300, 300]);
+  });
+
+  test('should calculate the scroll position for a group of nodes', () => {
+    const nodes = [
+      { width: 100, height: 100, x: 0, y: 0, id: '0' },
+      { width: 100, height: 100, x: 50, y: 50, id: '1' }
+    ];
+    const scrollPosition = calculateScrollPosition({ nodes, viewportWidth: 1000, viewportHeight: 1000, canvasWidth: 2000, canvasHeight: 2000, chartWidth: 500, chartHeight: 500, zoom: 1 });
+
+    expect(scrollPosition).toEqual([325, 325]);
+  });
+});