88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
import { Stage, Layer, Line } from "react-konva";
|
|
import useEditorStore from "./useEditorStore";
|
|
import TextElement from "./elements/TextElement";
|
|
import TableElement from "./elements/TableElement";
|
|
import ImageElement from "./elements/ImageElement.jsx";
|
|
import QRCodeElement from "./elements/QRCodeElement";
|
|
import LineElement from "./elements/LineElement";
|
|
import SummaryElement from "./elements/SummaryElement";
|
|
import RectangleElement from "./elements/RectangleElement";
|
|
|
|
export default function CanvasStage() {
|
|
const elements = useEditorStore((state) => state.elements);
|
|
const page = useEditorStore((state) => state.page);
|
|
const setSelectedId = useEditorStore((state) => state.setSelectedId);
|
|
|
|
const centerX = page.width / 2;
|
|
const centerY = page.height / 2;
|
|
|
|
return (
|
|
<Stage
|
|
width={page.width}
|
|
height={page.height}
|
|
style={{ border: "1px solid #ccc" }}
|
|
onClick={(e) => {
|
|
// Deselect when clicking on empty canvas
|
|
if (e.target === e.target.getStage()) {
|
|
setSelectedId(null);
|
|
}
|
|
}}
|
|
>
|
|
<Layer>
|
|
|
|
{/* GRID */}
|
|
{Array.from({ length: 50 }).map((_, i) => (
|
|
<Line
|
|
key={i}
|
|
points={[i * 20, 0, i * 20, page.height]}
|
|
stroke="#eee"
|
|
/>
|
|
))}
|
|
|
|
{/* CENTER GUIDES */}
|
|
<Line
|
|
points={[centerX, 0, centerX, page.height]}
|
|
stroke="#ff00ff"
|
|
strokeWidth={1}
|
|
dash={[5, 5]}
|
|
opacity={0.3}
|
|
listening={false}
|
|
/>
|
|
<Line
|
|
points={[0, centerY, page.width, centerY]}
|
|
stroke="#ff00ff"
|
|
strokeWidth={1}
|
|
dash={[5, 5]}
|
|
opacity={0.3}
|
|
listening={false}
|
|
/>
|
|
|
|
{elements.map((el) => {
|
|
if (el.type === "text") {
|
|
return <TextElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "table") {
|
|
return <TableElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "image") {
|
|
return <ImageElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "qrcode") {
|
|
return <QRCodeElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "line") {
|
|
return <LineElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "rectangle") {
|
|
return <RectangleElement key={el.id} element={el} />;
|
|
}
|
|
if (el.type === "summary") {
|
|
return <SummaryElement key={el.id} element={el} />;
|
|
}
|
|
return null;
|
|
})}
|
|
|
|
</Layer>
|
|
</Stage>
|
|
);
|
|
} |