@hitachivantara/uikit-react-lab
Version:
Contributed React components for the NEXT UI Kit.
97 lines (96 loc) • 3.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const reactflow = require("reactflow");
const shallow = require("zustand/shallow");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
const useFlowInstance = require("../hooks/useFlowInstance.cjs");
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 } = reactflow.useStore(
selector,
shallow.shallow
);
const store = reactflow.useStoreApi();
const { zoomIn, zoomOut, fitView } = useFlowInstance.useFlowInstance();
const labels = uikitReactCore.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__ */ jsxRuntime.jsx(reactflow.Panel, { position, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { vertical: orientation === "vertical", children: [
!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
icon: true,
title: labels?.zoomIn,
onClick: handleZoomIn,
disabled: maxZoomReached,
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomIn, {})
}
),
!hideZoom && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
icon: true,
title: labels?.zoomOut,
onClick: handleZoomOut,
disabled: minZoomReached,
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ZoomOut, {})
}
),
!hideFitView && /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { icon: true, title: labels?.fitView, onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Focus, {}) }),
!hideInteractive && /* @__PURE__ */ jsxRuntime.jsx(
uikitReactCore.HvButton,
{
icon: true,
title: labels?.interactive,
onClick: handleInteractive,
children: isInteractive ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Unlock, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Lock, {})
}
),
children
] }) });
};
exports.HvFlowControls = HvFlowControls;