@hitachivantara/uikit-react-lab
Version:
Contributed React components to UI Kit by the community.
83 lines (82 loc) • 2.81 kB
JavaScript
import { useFlowInstance } from "../hooks/useFlowInstance.js";
import { HvButton, HvMultiButton, useLabels } from "@hitachivantara/uikit-react-core";
import { jsx, jsxs } from "react/jsx-runtime";
import { Panel, useStore, useStoreApi } from "reactflow";
import { shallow } from "zustand/shallow";
import { Focus, Lock, Unlock, ZoomIn, ZoomOut } from "@hitachivantara/uikit-react-icons";
//#region src/Flow/Controls/Controls.tsx
var DEFAULT_LABELS = {
fitView: "Fit view",
zoomIn: "Zoom in",
zoomOut: "Zoom out",
interactive: "Interactive"
};
var selector = (state) => ({
isInteractive: state.nodesDraggable || state.nodesConnectable || state.elementsSelectable,
minZoomReached: state.transform[2] <= state.minZoom,
maxZoomReached: state.transform[2] >= state.maxZoom
});
var 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
]
})
});
};
//#endregion
export { HvFlowControls };