Files
dpage-editor/src/pages/editor/components/sidebar/ToolInstructions.tsx
T
2026-03-14 16:11:04 +03:30

79 lines
2.2 KiB
TypeScript

import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
import {
ImageUpload,
VideoInput,
LinkInput,
SelectInstruction,
RectangleInstruction,
TextInstruction,
LineInstruction,
ArrowInstruction,
StickerInstruction,
GridInstruction,
} from "./instructions";
type ToolInstructionsProps = {
tool: ToolType;
};
const ToolInstructions = ({ tool }: ToolInstructionsProps) => {
const { addObject, setSelectedObjectId, setTool } = useEditorStore();
const { mutateAsync: uploadFile } = useSingleUpload();
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
try {
const result = await uploadFile(file);
const imageUrl = result?.data?.url;
if (!imageUrl) return;
const img = new Image();
img.onload = () => {
const newImage = {
id: `image-${Date.now()}`,
type: "image" as ToolType,
x: 100,
y: 100,
width: img.width,
height: img.height,
imageUrl,
};
addObject(newImage);
setSelectedObjectId(newImage.id);
setTool("select");
};
img.src = imageUrl;
} catch {
// TODO: show error toast
}
};
if (tool === "image") {
return <ImageUpload onImageUpload={handleImageUpload} />;
}
if (tool === "video") {
return <VideoInput />;
}
if (tool === "link") {
return <LinkInput />;
}
const simpleInstructions: Partial<Record<ToolType, React.ReactElement>> = {
select: <SelectInstruction />,
rectangle: <RectangleInstruction />,
text: <TextInstruction />,
line: <LineInstruction />,
arrow: <ArrowInstruction />,
sticker: <StickerInstruction />,
grid: <GridInstruction />,
};
return simpleInstructions[tool] ?? null;
};
export default ToolInstructions;