nikita
106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import React from "react";
|
||
import {
|
||
FiDownload,
|
||
FiZoomIn,
|
||
FiZoomOut,
|
||
FiMove,
|
||
FiLink,
|
||
} from "react-icons/fi";
|
||
import { useGraphStore } from "../store/useGraphStore";
|
||
import type { GraphData } from "../types";
|
||
|
||
interface GraphControlsProps {
|
||
fgRef: React.RefObject<any>;
|
||
onExport?: () => void;
|
||
onDataChange?: (data: GraphData) => void;
|
||
}
|
||
|
||
const btnStyle: React.CSSProperties = {
|
||
backgroundColor: "var(--bg-secondary)",
|
||
color: "var(--text-primary)",
|
||
};
|
||
|
||
export const GraphControls: React.FC<GraphControlsProps> = ({
|
||
fgRef,
|
||
onExport,
|
||
onDataChange,
|
||
}) => {
|
||
const isLinkMode = useGraphStore((s) => s.isLinkMode);
|
||
const toggleLinkMode = useGraphStore((s) => s.toggleLinkMode);
|
||
const exportData = useGraphStore((s) => s.exportData);
|
||
|
||
const handleZoomIn = () => {
|
||
if (fgRef.current) {
|
||
const currentZoom = fgRef.current.zoom();
|
||
fgRef.current.zoom(currentZoom * 1.2);
|
||
}
|
||
};
|
||
|
||
const handleZoomOut = () => {
|
||
if (fgRef.current) {
|
||
const currentZoom = fgRef.current.zoom();
|
||
fgRef.current.zoom(currentZoom / 1.2);
|
||
}
|
||
};
|
||
|
||
const handleFit = () => {
|
||
if (fgRef.current) {
|
||
fgRef.current.zoomToFit(400);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="flex items-center justify-end gap-2 mt-2">
|
||
{/* Режим создания связи */}
|
||
{/* <button
|
||
onClick={toggleLinkMode}
|
||
className="flex w-full items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
|
||
style={{
|
||
backgroundColor: isLinkMode ? "#22c55e" : "var(--bg-secondary)",
|
||
color: isLinkMode ? "#fff" : "var(--text-primary)",
|
||
}}
|
||
>
|
||
<FiLink />
|
||
<span>{isLinkMode ? "Создание связи..." : "Добавить связь"}</span>
|
||
</button> */}
|
||
|
||
{/* Зум + */}
|
||
<button
|
||
onClick={handleZoomIn}
|
||
className="p-2 rounded-lg transition-colors"
|
||
style={btnStyle}
|
||
>
|
||
<FiZoomIn />
|
||
</button>
|
||
|
||
{/* Зум - */}
|
||
<button
|
||
onClick={handleZoomOut}
|
||
className="p-2 rounded-lg transition-colors"
|
||
style={btnStyle}
|
||
>
|
||
<FiZoomOut />
|
||
</button>
|
||
|
||
{/* Fit */}
|
||
<button
|
||
onClick={handleFit}
|
||
className="p-2 rounded-lg transition-colors"
|
||
style={btnStyle}
|
||
>
|
||
<FiMove />
|
||
</button>
|
||
|
||
{/* Экспорт */}
|
||
<button
|
||
onClick={onExport || exportData}
|
||
className="flex items-center gap-2 px-3 py-2 rounded-lg transition-colors text-sm"
|
||
style={btnStyle}
|
||
>
|
||
<FiDownload />
|
||
<span>Экспорт</span>
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|