hamid zarghami
107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import Konva from "konva";
|
|
import type { EditorObject } from "../../store/editorStore";
|
|
import {
|
|
RectangleShape,
|
|
CircleShape,
|
|
TriangleShape,
|
|
AbstractShape,
|
|
TextShape,
|
|
LineShape,
|
|
ArrowShape,
|
|
ImageObject,
|
|
LinkShape,
|
|
VideoShape,
|
|
} from "../tools";
|
|
import Table from "@/components/Table";
|
|
|
|
type ObjectRendererProps = {
|
|
obj: EditorObject;
|
|
isSelected: boolean;
|
|
transformerRef: React.RefObject<Konva.Transformer | null>;
|
|
layerRef: React.RefObject<Konva.Layer | null>;
|
|
onSelect: (id: string, node: Konva.Node) => void;
|
|
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
|
|
draggable: boolean;
|
|
onCellClick?: (tableId: string, cellId: string) => void;
|
|
onCellDblClick?: (tableId: string, cellId: string, x: number, y: number, width: number, height: number, text: string) => void;
|
|
selectedCellId?: string | null;
|
|
};
|
|
|
|
const ObjectRenderer = ({
|
|
obj,
|
|
isSelected,
|
|
transformerRef,
|
|
layerRef,
|
|
onSelect,
|
|
onUpdate,
|
|
draggable,
|
|
onCellClick,
|
|
onCellDblClick,
|
|
selectedCellId,
|
|
}: ObjectRendererProps) => {
|
|
if (obj.visible === false) {
|
|
return null;
|
|
}
|
|
|
|
const commonProps = {
|
|
obj,
|
|
isSelected,
|
|
transformerRef,
|
|
onSelect,
|
|
onUpdate,
|
|
draggable,
|
|
};
|
|
|
|
switch (obj.type) {
|
|
case "rectangle":
|
|
if (obj.shapeType === "circle") {
|
|
return <CircleShape key={obj.id} {...commonProps} />;
|
|
}
|
|
if (obj.shapeType === "triangle") {
|
|
return <TriangleShape key={obj.id} {...commonProps} />;
|
|
}
|
|
if (obj.shapeType === "abstract") {
|
|
return <AbstractShape key={obj.id} {...commonProps} />;
|
|
}
|
|
return <RectangleShape key={obj.id} {...commonProps} />;
|
|
case "text":
|
|
return <TextShape key={obj.id} {...commonProps} layerRef={layerRef} />;
|
|
case "line":
|
|
return <LineShape key={obj.id} {...commonProps} />;
|
|
case "arrow":
|
|
return <ArrowShape key={obj.id} {...commonProps} />;
|
|
case "image":
|
|
return <ImageObject key={obj.id} {...commonProps} />;
|
|
case "link":
|
|
return <LinkShape key={obj.id} {...commonProps} />;
|
|
case "video":
|
|
return <VideoShape key={obj.id} {...commonProps} />;
|
|
case "document":
|
|
return <ImageObject key={obj.id} {...commonProps} />;
|
|
case "grid":
|
|
return (
|
|
<Table
|
|
key={obj.id}
|
|
obj={obj}
|
|
selectedCellId={selectedCellId || null}
|
|
onCellClick={(tableId, cellId, node) => {
|
|
onSelect(tableId, node);
|
|
onCellClick?.(tableId, cellId);
|
|
}}
|
|
onCellDblClick={(tableId, cellId, x, y, width, height, text) => {
|
|
onCellDblClick?.(tableId, cellId, x, y, width, height, text);
|
|
}}
|
|
onDragEnd={(tableId, x, y) => {
|
|
onUpdate(tableId, { x, y });
|
|
}}
|
|
draggable={draggable}
|
|
/>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
export default ObjectRenderer;
|
|
|