drawing-board-service/src/core/components/table/index.ts

import { Transform } from "konva/lib/Util";
import { themeMouseColors } from "@/constant/help-style.ts";
import {
  BaseItem,
  generateSnapInfos,
  getBaseItem,
  getRectSnapPoints,
} from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { InteractiveFix, InteractiveTo } from "../index.ts";

export { default as Component } from "./table.vue";
export { default as TempComponent } from "./temp-table.vue";

export const shapeName = "表格";
export const defaultStyle = {
  stroke: themeMouseColors.theme,
  strokeWidth: 1,
  fontSize: 16,
  align: "center",
  fontStyle: "normal",
  fontColor: themeMouseColors.theme,
};
export const defaultCollData = {
  fontFamily: "Calibri",
  fontSize: 16,
  align: "center",
  fontStyle: "normal",
  fontColor: themeMouseColors.theme,
};

export const addMode = "area";

export type TableCollData = Partial<typeof defaultCollData> & {
  content: string;
  width: number;
  height: number;
  padding: number
  readonly?: boolean
  notdel?: boolean
};
export type TableData = Partial<typeof defaultStyle> &
  BaseItem & {
    notaddRow?: boolean
    notaddCol?: boolean
    mat: number[];
    content: TableCollData[][];
    width: number;
    height: number;
  };

export const getMouseStyle = (data: TableData) => {
  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);

  return {
    default: { stroke: strokeStatus.pub },
    hover: { stroke: strokeStatus.hover },
    press: { stroke: strokeStatus.press },
  };
};

export const getSnapPoints = (data: TableData) => {
  const tf = new Transform(data.mat);
  const points = getRectSnapPoints(data.width, data.height, 0, 0)
    .map((v) => tf.point(v));
  return points
};

export const getSnapInfos = (data: TableData) => {
  return generateSnapInfos(getSnapPoints(data), true, false);
};

export const interactiveToData: InteractiveTo<"table"> = ({
  info,
  preset = {},
  ...args
}) => {
  if (info.cur) {
    const item = {
      ...defaultStyle,
      ...getBaseItem(),
      ...preset,
    } as unknown as TableData;
    return interactiveFixData({ ...args, info, data: item });
  }
};

export const autoCollWidth = 100;
export const autoCollHeight = 50;
export const interactiveFixData: InteractiveFix<"table"> = ({
  data,
  info,
  notdraw
}) => {
  if (info.cur) {
    const area = info.cur!;
    const origin = {
      x: Math.min(area[0].x, area[1].x),
      y: Math.min(area[0].y, area[1].y),
    }
    data.width = Math.abs(area[0].x - area[1].x)
    data.height = Math.abs(area[0].y - area[1].y)
    
    if (!notdraw || !(data.content?.length && data.content[0].length)) {
      const colNum = Math.floor(data.width / autoCollWidth) || 1;
      const rawNum = Math.floor(data.height / autoCollHeight) || 1;
      const temp = data.content?.[0]?.[0] || {
        content: ""
      };

      data.content = Array.from({ length: rawNum }, () =>
        Array.from({ length: colNum }, () => ({
          ...temp,
          width: data.width / colNum,
          height: data.height / rawNum,
          padding: 8
        }))
      );
    } else {
      const colHeight = data.height / data.content.length
      const colWidth = data.width / data.content[0].length
      data.content.forEach(row => {
        row.forEach(col => {
          col.width = colWidth
          col.height = colHeight
          col.padding = 8
          console.log(col.content)
        })
      })
    }
    data.mat = new Transform().translate(origin.x, origin.y).m;
  }
  return data;
};