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 { AddMessage } from "@/core/hook/use-draw.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
};
export type TableData = Partial<typeof defaultStyle> &
  BaseItem & {
    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 = (
  info: AddMessage<"table">,
  preset: Partial<TableData> = {}
): TableData | undefined => {
  if (info.cur) {
    const item = {
      ...defaultStyle,
      ...getBaseItem(),
      ...preset,
    } as unknown as TableData;
    return interactiveFixData(item, info);
  }
};

const autoCollWidth = 100;
const autoCollHeight = 50;
export const interactiveFixData = (
  data: TableData,
  info: AddMessage<"table">
) => {
  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)
    
    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
      }))
    );
    data.mat = new Transform().translate(origin.x, origin.y).m;
  }
  return data;
};