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

import { getBaseItem } from "../util.ts";
import { Transform } from "konva/lib/Util";
import { CircleData, defaultStyle as circleDefaultStyle } from "../circle";
import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
import { DrawStore } from "@/core/store/index.ts";
import { Pos } from "@/utils/math.ts";
import { TableData } from "../table/index.ts";
import { copy } from "@/utils/shared.ts";

export {
  getMouseStyle,
  getSnapInfos,
  getSnapPoints,
  dataToConfig,
} from "../circle";

export { default as GroupComponent } from "./serial-group.vue";
export { default as Component } from "./serial.vue";
export { default as TempComponent } from "./temp-serial.vue";

export const defaultTableStyle = {
  right: 44,
  top: 175,
  fontSize: 16,
  colHeight: 32,
  padding: 8,
  nameColWidth: 100,
  valueColWidth: 180,
  repColCount: 1,
  tableStrokeWidth: 1,
};
export const shapeName = "序号";
export const addMode = "dot";
export const defaultStyle = {
  ...circleDefaultStyle,
  strokeWidth: 2,
};

export const fixedStrokeOptions:number[] = [];

export type SerialData = CircleData;

export const getSerialFontW = (data: SerialData) => {
  const fontSize = data.fontSize || defaultStyle.fontSize;
  const pad = data.padding || 0;
  const len = (data.content?.length || 1) * 0.6;
  return fontSize * len + pad * 2;
};

export const getSerialFontSizeByFontW = (data: SerialData, w: number) => {
  const pad = data.padding || 0;
  const len = (data.content?.length || 1) * 0.6;
  return (w - pad * 2) / len;
};

export const getCurrentNdxRaw = (serials: SerialData[]) => {
  const cs = serials.map((item) => Number(item.content || 0));
  let max = Math.max(...cs, 0) + 1;
  let i = 1;
  for (; i < max; i++) {
    if (!cs.includes(i)) {
      break;
    }
  }
  return i.toString();
};

export const getCurrentNdx = (store: DrawStore) => {
  return getCurrentNdxRaw(store.getTypeItems("serial"));
};

export const interactiveToData: InteractiveTo<"serial"> = ({
  info,
  preset = {},
  store,
  ...args
}) => {
  if (info.cur) {
    let item = {
      ...defaultStyle,
      fontSize: defaultStyle.fontSize,
      ...getBaseItem(),
      padding: 3,
      content: getCurrentNdx(store),
      ...preset,
    } as unknown as SerialData;
    return interactiveFixData({ ...args, info, store, data: item });
  }
};

export const interactiveFixData: InteractiveFix<"serial"> = ({
  data,
  info,
}) => {
  data.mat = new Transform().translate(info.cur!.x, info.cur!.y).m;
  const radius = (getSerialFontW(data) * Math.sqrt(2)) / 2;
  data.radiusX = radius;
  data.radiusY = radius;
  return data;
};

export const delItemRaw = (
  table: TableData,
  data: SerialData[],
  item: SerialData
) => {
  const ndx = data.indexOf(item);
  const getPosition = (itemNdx: number) => {
    const colCount = table.content[0].length / 2;
    const rowNdx = Math.floor(itemNdx / colCount);
    const colNdx = itemNdx % colCount;
    return [rowNdx, colNdx * colCount, colCount] as const;
  };
  if (table && ~ndx) {
    let i = ndx + 1;
    let s = getPosition(i - 1);
    let r;
    let oldItem = { ...data[i - 1] };
    for (; i < data.length; i++) {
      r = s;
      s = getPosition(i);
      for (let j = 0; j < s[2]; j++) {
        Object.assign(table.content[r[0]][r[1] + j], table.content[s[0]][s[1] + j])
        // table.content[r[0]][r[1] + j] = copy(table.content[s[0]][s[1] + j]);
        // if (j === 0) {
        //   table.content[r[0]][r[1] + j].content = oldItem.content!;
        // } else {
        //   table.content[r[0]][r[1] + j].content =
        //     table.content[s[0]][s[1] + j].content!;
        // }
      }
      // let cur = { ...data[i] };
      // data[i].content = oldItem.content;
      // const radius = (getSerialFontW(data[i]) * Math.sqrt(2)) / 2;
      // data[i].radiusX = radius;
      // data[i].radiusY = radius;
      // matResponse({
      //   data: data[i],
      //   mat: new Transform(data[i].mat),
      //   increment: false,
      // });
      // store.setItem("serial", { id: data[i].id, value: { ...data[i] } });
      // oldItem = cur;
    }

    console.log(copy(table))
    for (let j = 0; j < s[2]; j++) {
      console.log({...table.content[s[0]][s[1] + j]})
      table.content[s[0]][s[1] + j].content = "";
      // if (j === 0) {
      //   table.content[r[0]][r[1] + j].content = oldItem.content!;
      // } else {
      //   table.content[r[0]][r[1] + j].content =
      //     table.content[s[0]][s[1] + j].content!;
      // }
    }
    console.log(copy(table))
    const cols = table.content.flatMap((row) => {
      const cols = [];
      for (let i = 0; i < row.length; i += 2) {
        cols.push(row[i]);
      }
      return cols;
    });

    const delRowCount = Math.floor(
      cols.filter((item) => item.content === "").length / 2
    );
    console.log('delRowCount', delRowCount, cols.filter((item) => item.content === "").length)
    for (let i = 0; i < delRowCount; i++) {
      table.height -= table.content.pop()![0].height;
    }
  }
};

export const joinKey = "serial-table";
export const delItem = (store: DrawStore, item: SerialData) => {
  const table = store
    .getTypeItems("table")
    .find((item) => item.key === joinKey)!;
  const data = store.getTypeItems("serial");

  delItemRaw(table, data, item);
  if (table) {
    if (data.length === 1) {
      store.delItem("table", table.id);
    } else {
      store.setItem("table", { id: table.id, value: table });
    }
  }
  store.delItem("serial", item.id);
};

export const matResponse = (
  { data, mat, increment }: MatResponseProps<"serial">,
  initRadius?: Pos
) => {
  if (!initRadius) {
    initRadius = {
      x: data.radiusX,
      y: data.radiusY,
    };
  }
  if (increment) {
    mat = mat.copy().multiply(new Transform(data.mat));
  }
  const dec = mat.decompose();
  data.radiusX = data.radiusY = dec.scaleY * initRadius.y;

  const w = (data.radiusX * 2) / Math.sqrt(2);
  data.fontSize = getSerialFontSizeByFontW(data, w);
  data.mat = new Transform().translate(dec.x, dec.y).rotate(0).m;
  return data;
};
export const getPredefine = (key: keyof CircleData) => {
  if (key === "fill") {
    return { canun: true };
  }
};