Custom Toolbar zoom in/out

[aniket-xcentium]

I want to zoom In and zoom out on ToolbarButton button click. I am using custom toolbar .

`import React from 'react';
import PropTypes from 'prop-types';

import {
  TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT,
  ToolbarButton, fitToViewer, IconCursor, IconZoomIn, IconZoomOut, IconFit, IconPan,
  POSITION_TOP, POSITION_RIGHT, POSITION_BOTTOM, POSITION_LEFT,
  ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_TOP, ALIGN_BOTTOM,zoom
} from 'react-svg-pan-zoom';

export function CustomToolbar({
  tool, value, onChangeValue, onChangeTool, activeToolColor, position, SVGAlignX, SVGAlignY,
}) {
  const handleChangeTool = (event, tool) => {
    // onChangeTool(tool);
   zoom(value,SVGAlignX, SVGAlignY,1.1);

    event.stopPropagation();
    event.preventDefault();
  };

  const handleFit = (event) => {
    onChangeValue(fitToViewer(value, SVGAlignX, SVGAlignY));
    event.stopPropagation();
    event.preventDefault();
  };

  const isHorizontal = [POSITION_TOP, POSITION_BOTTOM].indexOf(position) >= 0;

  const style = {
    // position
    position: 'absolute',
    transform: [POSITION_TOP, POSITION_BOTTOM].indexOf(position) >= 0 ? 'translate(-50%, 0px)' : 'none',
    top: [POSITION_LEFT, POSITION_RIGHT, POSITION_TOP].indexOf(position) >= 0 ? '5px' : 'unset',
    left: [POSITION_TOP, POSITION_BOTTOM].indexOf(position) >= 0
      ? '50%' : (POSITION_LEFT === position ? '5px' : 'unset'),
    right: [POSITION_RIGHT].indexOf(position) >= 0 ? '5px' : 'unset',
    bottom: [POSITION_BOTTOM].indexOf(position) >= 0 ? '5px' : 'unset',

    // inner styling
    backgroundColor: 'rgba(19, 20, 22, 0.90)',
    borderRadius: '2px',
    display: 'flex',
    flexDirection: isHorizontal ? 'row' : 'column',
    padding: isHorizontal ? '1px 2px' : '2px 1px',
  };

  return (
    <div style={style} >
     

      <ToolbarButton
        toolbarPosition={position}
        active={tool === TOOL_ZOOM_IN}
        activeColor={activeToolColor}
        name="select-tool-zoom-in"
        title="Zoom in"
        onClick={(event) => handleChangeTool(event, TOOL_ZOOM_IN)}
      >
        <IconZoomIn />
      </ToolbarButton>

      <ToolbarButton
        toolbarPosition={position}
        active={tool === TOOL_ZOOM_OUT}
        activeColor={activeToolColor}
        name="select-tool-zoom-out"
        title="Zoom out"
        onClick={(event) => handleChangeTool(event, TOOL_ZOOM_OUT)}
      >
        <IconZoomOut />
      </ToolbarButton>

     
    </div>
  );
}

CustomToolbar.propTypes = {
  tool: PropTypes.string.isRequired,
  onChangeTool: PropTypes.func.isRequired,
  value: PropTypes.object.isRequired,
  onChangeValue: PropTypes.func.isRequired,

  // customizations
  position: PropTypes.oneOf([POSITION_TOP, POSITION_RIGHT, POSITION_BOTTOM, POSITION_LEFT]),
  SVGAlignX: PropTypes.oneOf([ALIGN_CENTER, ALIGN_LEFT, ALIGN_RIGHT]),
  SVGAlignY: PropTypes.oneOf([ALIGN_CENTER, ALIGN_TOP, ALIGN_BOTTOM]),
  activeToolColor: PropTypes.string,
};

CustomToolbar.defaultProps = {
  position: POSITION_RIGHT,
  SVGAlignX: ALIGN_LEFT,
  SVGAlignY: ALIGN_TOP,
  activeToolColor: '#1CA6FC',
};
<img width="149" alt="Screenshot 2024-08-20 at 11 54 14 AM" src="https://github.com/user-attachments/assets/d05588d7-eeea-42c7-82ac-447bb7595b07">
`