@hitachivantara/uikit-react-lab/dist/esm/Flow/Controls/Controls.js

Contributed React components for the NEXT UI Kit.

import { jsx, jsxs } from "react/jsx-runtime";
import { useStore, useStoreApi, Panel } from "reactflow";
import { shallow } from "zustand/shallow";
import { useLabels, HvMultiButton, HvButton } from "@hitachivantara/uikit-react-core";
import { ZoomIn, ZoomOut, Focus, Unlock, Lock } from "@hitachivantara/uikit-react-icons";
import { useFlowInstance } from "../hooks/useFlowInstance.js";
const DEFAULT_LABELS = {
  fitView: "Fit view",
  zoomIn: "Zoom in",
  zoomOut: "Zoom out",
  interactive: "Interactive"
};
const selector = (state) => ({
  isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
  minZoomReached: state.transform[2] <= state.minZoom,
  maxZoomReached: state.transform[2] >= state.maxZoom
});
const HvFlowControls = ({
  onZoomIn: onZoomInProp,
  onZoomOut: onZoomOutProp,
  onFitView: onFitViewProp,
  labels: labelsProps,
  hideInteractive,
  hideFitView,
  hideZoom,
  position = "bottom-center",
  orientation = "horizontal",
  onInteractiveChange,
  fitViewOptions,
  children,
  ...others
}) => {
  const { isInteractive, minZoomReached, maxZoomReached } = useStore(
    selector,
    shallow
  );
  const store = useStoreApi();
  const { zoomIn, zoomOut, fitView } = useFlowInstance();
  const labels = useLabels(DEFAULT_LABELS, labelsProps);
  const handleZoomIn = () => {
    zoomIn();
    onZoomInProp?.();
  };
  const handleZoomOut = () => {
    zoomOut();
    onZoomOutProp?.();
  };
  const handleFitView = () => {
    fitView(fitViewOptions);
    onFitViewProp?.();
  };
  const handleInteractive = () => {
    store.setState({
      nodesDraggable: !isInteractive,
      nodesConnectable: !isInteractive,
      elementsSelectable: !isInteractive
    });
    onInteractiveChange?.(!isInteractive);
  };
  return /* @__PURE__ */ jsx(Panel, { position, ...others, children: /* @__PURE__ */ jsxs(HvMultiButton, { vertical: orientation === "vertical", children: [
    !hideZoom && /* @__PURE__ */ jsx(
      HvButton,
      {
        icon: true,
        title: labels?.zoomIn,
        onClick: handleZoomIn,
        disabled: maxZoomReached,
        children: /* @__PURE__ */ jsx(ZoomIn, {})
      }
    ),
    !hideZoom && /* @__PURE__ */ jsx(
      HvButton,
      {
        icon: true,
        title: labels?.zoomOut,
        onClick: handleZoomOut,
        disabled: minZoomReached,
        children: /* @__PURE__ */ jsx(ZoomOut, {})
      }
    ),
    !hideFitView && /* @__PURE__ */ jsx(HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsx(Focus, {}) }),
    !hideInteractive && /* @__PURE__ */ jsx(
      HvButton,
      {
        icon: true,
        title: labels?.interactive,
        onClick: handleInteractive,
        children: isInteractive ? /* @__PURE__ */ jsx(Unlock, {}) : /* @__PURE__ */ jsx(Lock, {})
      }
    ),
    children
  ] }) });
};
export {
  HvFlowControls
};