grid editor

2025-11-29 16:11:24 +03:30
parent 2f60ef806e
commit 2c28218488
8 changed files with 720 additions and 28 deletions
@@ -15,6 +15,25 @@ export type ToolType =
  | "link"
  | "grid";

+export type TableCell = {
+  id: string;
+  text: string;
+  background: string;
+  width: number;
+  height: number;
+};
+
+export type TableData = {
+  id: string;
+  rows: number;
+  cols: number;
+  cellWidth: number;
+  cellHeight: number;
+  cells: Record<string, TableCell>;
+  stroke?: string;
+  strokeWidth?: number;
+};
+
 export type EditorObject = {
  id: string;
  type: ToolType;
@@ -39,6 +58,7 @@ export type EditorObject = {
  scaleX?: number;
  scaleY?: number;
  shapeType?: ShapeType;
+  tableData?: TableData;
 };

 type EditorStoreType = {
@@ -50,13 +70,46 @@ type EditorStoreType = {
  deleteObject: (id: string) => void;
  selectedObjectId: string | null;
  setSelectedObjectId: (id: string | null) => void;
+  selectedTableId: string | null;
+  setSelectedTableId: (id: string | null) => void;
+  selectedCellId: string | null;
+  setSelectedCellId: (id: string | null) => void;
+  editingCell: { tableId: string; cellId: string; x: number; y: number; value: string } | null;
+  setEditingCell: (cell: { tableId: string; cellId: string; x: number; y: number; value: string } | null) => void;
+  addTable: (x: number, y: number, rows?: number, cols?: number) => void;
+  addRow: (tableId: string) => void;
+  addColumn: (tableId: string) => void;
+  removeRow: (tableId: string) => void;
+  removeColumn: (tableId: string) => void;
+  updateCellValue: (tableId: string, cellId: string, text: string) => void;
+  changeCellBackground: (tableId: string, cellId: string, color: string) => void;
+  applyTableResize: (tableId: string, newWidth: number, newHeight: number) => void;
  stageRef: React.RefObject<Konva.Stage | null> | null;
  setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
  layerRef: React.RefObject<Konva.Layer | null> | null;
  setLayerRef: (ref: React.RefObject<Konva.Layer | null>) => void;
 };

-export const useEditorStore = create<EditorStoreType>((set) => ({
+const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
+
+const createInitialCells = (rows: number, cols: number, cellWidth: number, cellHeight: number): Record<string, TableCell> => {
+  const cells: Record<string, TableCell> = {};
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const cellId = createTableCellId(row, col);
+      cells[cellId] = {
+        id: cellId,
+        text: "",
+        background: "#f5f5f5",
+        width: cellWidth,
+        height: cellHeight,
+      };
+    }
+  }
+  return cells;
+};
+
+export const useEditorStore = create<EditorStoreType>((set, get) => ({
  tool: "select",
  setTool: (tool) =>
    set((state) => ({
@@ -77,9 +130,222 @@ export const useEditorStore = create<EditorStoreType>((set) => ({
      objects: state.objects.filter((obj) => obj.id !== id),
      selectedObjectId:
        state.selectedObjectId === id ? null : state.selectedObjectId,
+      selectedTableId: state.selectedTableId === id ? null : state.selectedTableId,
    })),
  selectedObjectId: null,
  setSelectedObjectId: (id) => set({ selectedObjectId: id }),
+  selectedTableId: null,
+  setSelectedTableId: (id) => set({ selectedTableId: id }),
+  selectedCellId: null,
+  setSelectedCellId: (id) => set({ selectedCellId: id }),
+  editingCell: null,
+  setEditingCell: (cell) => set({ editingCell: cell }),
+  addTable: (x, y, rows = 4, cols = 5) => {
+    const tableId = `table-${crypto.randomUUID()}`;
+    const cellWidth = 100;
+    const cellHeight = 50;
+    const tableData: TableData = {
+      id: tableId,
+      rows,
+      cols,
+      cellWidth,
+      cellHeight,
+      cells: createInitialCells(rows, cols, cellWidth, cellHeight),
+      stroke: "#808080",
+      strokeWidth: 1,
+    };
+    const tableObject: EditorObject = {
+      id: tableId,
+      type: "grid",
+      x,
+      y,
+      width: cols * cellWidth,
+      height: rows * cellHeight,
+      tableData,
+    };
+    get().addObject(tableObject);
+    get().setSelectedObjectId(tableId);
+    get().setSelectedTableId(tableId);
+  },
+  addRow: (tableId) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    const newRow = tableData.rows;
+    const newCells = { ...tableData.cells };
+
+    for (let col = 0; col < tableData.cols; col++) {
+      const cellId = createTableCellId(newRow, col);
+      newCells[cellId] = {
+        id: cellId,
+        text: "",
+        background: "#f5f5f5",
+        width: tableData.cellWidth,
+        height: tableData.cellHeight,
+      };
+    }
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        rows: tableData.rows + 1,
+        cells: newCells,
+      },
+      height: (tableData.rows + 1) * tableData.cellHeight,
+    });
+  },
+  addColumn: (tableId) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    const newCol = tableData.cols;
+    const newCells = { ...tableData.cells };
+
+    for (let row = 0; row < tableData.rows; row++) {
+      const cellId = createTableCellId(row, newCol);
+      newCells[cellId] = {
+        id: cellId,
+        text: "",
+        background: "#f5f5f5",
+        width: tableData.cellWidth,
+        height: tableData.cellHeight,
+      };
+    }
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        cols: tableData.cols + 1,
+        cells: newCells,
+      },
+      width: (tableData.cols + 1) * tableData.cellWidth,
+    });
+  },
+  removeRow: (tableId) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    if (tableData.rows <= 1) return;
+
+    const newCells = { ...tableData.cells };
+    for (let col = 0; col < tableData.cols; col++) {
+      const cellId = createTableCellId(tableData.rows - 1, col);
+      delete newCells[cellId];
+    }
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        rows: tableData.rows - 1,
+        cells: newCells,
+      },
+      height: (tableData.rows - 1) * tableData.cellHeight,
+    });
+  },
+  removeColumn: (tableId) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    if (tableData.cols <= 1) return;
+
+    const newCells = { ...tableData.cells };
+    for (let row = 0; row < tableData.rows; row++) {
+      const cellId = createTableCellId(row, tableData.cols - 1);
+      delete newCells[cellId];
+    }
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        cols: tableData.cols - 1,
+        cells: newCells,
+      },
+      width: (tableData.cols - 1) * tableData.cellWidth,
+    });
+  },
+  updateCellValue: (tableId, cellId, text) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    const updatedCells = {
+      ...tableData.cells,
+      [cellId]: {
+        ...tableData.cells[cellId],
+        text,
+      },
+    };
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        cells: updatedCells,
+      },
+    });
+  },
+  changeCellBackground: (tableId, cellId, color) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    const updatedCells = {
+      ...tableData.cells,
+      [cellId]: {
+        ...tableData.cells[cellId],
+        background: color,
+      },
+    };
+
+    state.updateObject(tableId, {
+      tableData: {
+        ...tableData,
+        cells: updatedCells,
+      },
+    });
+  },
+  applyTableResize: (tableId, newWidth, newHeight) => {
+    const state = get();
+    const obj = state.objects.find((o) => o.id === tableId);
+    if (!obj || !obj.tableData) return;
+
+    const { tableData } = obj;
+    const newCellWidth = newWidth / tableData.cols;
+    const newCellHeight = newHeight / tableData.rows;
+
+    const updatedCells: Record<string, TableCell> = {};
+    for (let row = 0; row < tableData.rows; row++) {
+      for (let col = 0; col < tableData.cols; col++) {
+        const cellId = createTableCellId(row, col);
+        const oldCell = tableData.cells[cellId];
+        updatedCells[cellId] = {
+          ...oldCell,
+          width: newCellWidth,
+          height: newCellHeight,
+        };
+      }
+    }
+
+    state.updateObject(tableId, {
+      width: newWidth,
+      height: newHeight,
+      tableData: {
+        ...tableData,
+        cellWidth: newCellWidth,
+        cellHeight: newCellHeight,
+        cells: updatedCells,
+      },
+    });
+  },
  stageRef: null,
  setStageRef: (ref) => set({ stageRef: ref }),
  layerRef: null,