hamid zarghami
122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { Stage, Layer, Rect } from "react-konva";
|
|
import Konva from "konva";
|
|
import { useEditorStore } from "../store/editorStore";
|
|
import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
|
|
import { useStageSize } from "./canvas/useStageSize";
|
|
import { useKeyboardMovement } from "./canvas/useKeyboardMovement";
|
|
import { useSelectionHandlers } from "./canvas/useSelectionHandlers";
|
|
import { useTransformHandlers } from "./canvas/useTransformHandlers";
|
|
import { useObjectHandlers } from "./canvas/useObjectHandlers";
|
|
import { useMaskGroupState } from "./canvas/useMaskGroupState";
|
|
import ObjectsLayer from "./canvas/ObjectsLayer";
|
|
import CellEditor from "@/components/CellEditor";
|
|
import ZoomControls from "./ZoomControls";
|
|
|
|
type EditorCanvasProps = {
|
|
catalogSize?: string;
|
|
};
|
|
|
|
const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
|
|
const stageRef = useRef<Konva.Stage>(null);
|
|
const layerRef = useRef<Konva.Layer>(null);
|
|
|
|
const {
|
|
tool,
|
|
objects,
|
|
selectedObjectId,
|
|
selectedObjectIds,
|
|
selectedCellId,
|
|
editingCell,
|
|
setStageRef,
|
|
setLayerRef,
|
|
zoom,
|
|
} = useEditorStore();
|
|
|
|
const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
|
|
const stageSize = useStageSize(catalogSize);
|
|
useKeyboardMovement();
|
|
|
|
const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
|
|
const { handleObjectUpdate, handleGroupWithMask, handleUngroupFromMask, handleCellEditorSave, handleCellEditorCancel } =
|
|
useObjectHandlers();
|
|
|
|
const { isGroupedWithMask, maskObject, canGroup, canUngroup, selectedObject } = useMaskGroupState(selectedObjectId);
|
|
|
|
useTransformHandlers(transformerRef, layerRef);
|
|
|
|
useEffect(() => {
|
|
if (stageRef.current) {
|
|
setStageRef(stageRef);
|
|
}
|
|
if (layerRef.current) {
|
|
setLayerRef(layerRef);
|
|
}
|
|
}, [setStageRef, setLayerRef]);
|
|
|
|
|
|
const finalScale = stageSize.scale * zoom;
|
|
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center pb-8 overflow-auto relative">
|
|
<div className="shadow-lg mt-8">
|
|
<Stage
|
|
ref={stageRef}
|
|
width={stageSize.width * finalScale}
|
|
height={stageSize.height * finalScale}
|
|
scaleX={finalScale}
|
|
scaleY={finalScale}
|
|
onMouseDown={handleStageMouseDown}
|
|
onMouseMove={handleStageMouseMove}
|
|
onMouseUp={handleStageMouseUp}
|
|
>
|
|
<Layer listening={false}>
|
|
<Rect
|
|
x={0}
|
|
y={0}
|
|
width={stageSize.width}
|
|
height={stageSize.height}
|
|
fill="#ffffff"
|
|
listening={false}
|
|
/>
|
|
</Layer>
|
|
|
|
<ObjectsLayer
|
|
layerRef={layerRef}
|
|
objects={objects}
|
|
selectedObjectIds={selectedObjectIds}
|
|
selectedCellId={selectedCellId}
|
|
tool={tool}
|
|
transformerRef={transformerRef}
|
|
selectedObject={selectedObject}
|
|
isGroupedWithMask={isGroupedWithMask}
|
|
maskObject={maskObject}
|
|
canGroup={canGroup}
|
|
canUngroup={canUngroup}
|
|
onSelect={handleSelect}
|
|
onUpdate={handleObjectUpdate}
|
|
onCellClick={handleCellClick}
|
|
onCellDblClick={handleCellDblClick}
|
|
onGroup={handleGroupWithMask}
|
|
onUngroup={handleUngroupFromMask}
|
|
/>
|
|
</Stage>
|
|
</div>
|
|
{editingCell && (
|
|
<CellEditor
|
|
x={editingCell.x}
|
|
y={editingCell.y}
|
|
width={editingCell.width}
|
|
height={editingCell.height}
|
|
value={editingCell.value}
|
|
onSave={handleCellEditorSave}
|
|
onCancel={handleCellEditorCancel}
|
|
/>
|
|
)}
|
|
<ZoomControls />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditorCanvas;
|