@lobehub/ui/es/Mermaid/Controls.js

Lobe UI is an open-source UI component library for building AIGC web apps

import { AlignVerticalSpaceAroundIcon, MinusIcon, PlusIcon } from 'lucide-react';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import { useControls } from 'react-zoom-pan-pinch';
import ActionIcon from "../ActionIcon";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Controls = /*#__PURE__*/memo(function () {
  var _useControls = useControls(),
    zoomIn = _useControls.zoomIn,
    zoomOut = _useControls.zoomOut,
    resetTransform = _useControls.resetTransform;
  return /*#__PURE__*/_jsxs(Flexbox, {
    gap: 4,
    horizontal: true,
    style: {
      bottom: 8,
      position: 'absolute',
      right: 8,
      zIndex: 1
    },
    children: [/*#__PURE__*/_jsx(ActionIcon, {
      active: true,
      glass: true,
      icon: PlusIcon,
      onClick: function onClick() {
        return zoomIn();
      },
      size: 'small'
    }), /*#__PURE__*/_jsx(ActionIcon, {
      active: true,
      glass: true,
      icon: MinusIcon,
      onClick: function onClick() {
        return zoomOut();
      },
      size: 'small'
    }), /*#__PURE__*/_jsx(ActionIcon, {
      active: true,
      glass: true,
      icon: AlignVerticalSpaceAroundIcon,
      onClick: function onClick() {
        return resetTransform();
      },
      size: 'small'
    })]
  });
});
export default Controls;