All files / src/utils zoomAndPan.ts

12.5% Statements 4/32
0% Branches 0/8
0% Functions 0/8
14.29% Lines 4/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102                    1x                                                       1x                                                                     1x                                       1x                
// tslint:disable: export-name
 
export interface IZoomPanSettings {
  transformMatrix: [number, number, number, number, number, number];
}
 
export type TSetZoomPanSettings = React.Dispatch<
  React.SetStateAction<IZoomPanSettings>
>;
 
export const zoomTo = (
  scale: number,
  svgRef: React.RefObject<SVGSVGElement>,
  setZoomPanSettings: TSetZoomPanSettings
): void => {
  if (!svgRef.current) {
    return;
  }
 
  const containerEl = svgRef.current.closest<HTMLDivElement>(
    ".react-dag-editor-container"
  );
 
  if (!containerEl) {
    return;
  }
  const { width, height } = containerEl.getBoundingClientRect();
  const dx = (width * (1 - scale)) / 2;
  const dy = (height * (1 - scale)) / 2;
 
  setZoomPanSettings(prevState => {
    return {
      ...prevState,
      transformMatrix: [scale, 0, 0, scale, dx, dy]
    };
  });
};
 
export const zoom = (
  scale: number,
  svgRef: React.RefObject<SVGSVGElement>,
  setZoomPanSettings: TSetZoomPanSettings
): void => {
  if (!svgRef.current) {
    return;
  }
 
  const containerEl = svgRef.current.closest<HTMLDivElement>(
    ".react-dag-editor-container"
  );
 
  if (!containerEl) {
    return;
  }
  const { width, height } = containerEl.getBoundingClientRect();
  const dx = (width * (1 - scale)) / 2;
  const dy = (height * (1 - scale)) / 2;
 
  setZoomPanSettings(prevState => {
    return {
      ...prevState,
      transformMatrix: [
        prevState.transformMatrix[0] * scale,
        prevState.transformMatrix[1] * scale,
        prevState.transformMatrix[2] * scale,
        prevState.transformMatrix[3] * scale,
        prevState.transformMatrix[4] * scale + dx,
        prevState.transformMatrix[5] * scale + dy
      ]
    };
  });
};
 
export const pan = (
  dx: number,
  dy: number,
  setZoomPanSettings: TSetZoomPanSettings
): void => {
  setZoomPanSettings(prevState => {
    return {
      ...prevState,
      transformMatrix: [
        prevState.transformMatrix[0],
        prevState.transformMatrix[1],
        prevState.transformMatrix[2],
        prevState.transformMatrix[3],
        prevState.transformMatrix[4] + dx,
        prevState.transformMatrix[5] + dy
      ]
    };
  });
};
 
export const resetZoom = (setZoomPanSettings: TSetZoomPanSettings): void => {
  setZoomPanSettings(prevState => {
    return {
      ...prevState,
      transformMatrix: [1, 0, 0, 1, 0, 0]
    };
  });
};