drawing-board-service/src/example/fuse/views/tabulation/gen-tab.ts

import { getBaseItem } from "@/core/components/util";
import {
  getPaperConfig,
  paperConfigs,
  PaperKey,
} from "@/example/components/slide/actions";
import {
  TabCover,
  tableCompassKey,
  tableCoverHeight,
  tableCoverKey,
  tableCoverScaleKey,
  tableCoverWidth,
  tableTableKey,
  tableTitleKey,
} from "../../store";
import { matResponse } from "@/core/components/table";
import { Transform } from "konva/lib/Util";
import { getFixPosition } from "@/utils/bound";
import { getImage } from "@/utils/resource";
import { ImageData } from "@/core/components/image";
import { DrawData } from "@/core/components";
import { getEmptyStoreData, StoreData } from "@/core/store/store";
import { defaultLayer } from "@/constant";
import { IconData } from "@/core/components/icon";
import { MathUtils } from "three";

export const getRealPixel = (real: number, paperKey: PaperKey) => {
  const realPixelScale = paperConfigs[paperKey].scale;
  return real * realPixelScale;
};

export const transformPaper = (
  real: number,
  paperKey: PaperKey,
  toPaperKey: PaperKey
) => {
  const scale = paperConfigs[paperKey].scale / paperConfigs[toPaperKey].scale;
  return real * scale;
};

export const getCoverPaperScale = (cover: ImageData, paperKey: PaperKey) => {
  let pixelScale = (cover.widthRaw! / cover.width) * cover.proportion!.scale;
  const realPixelScale = paperConfigs[paperKey].scale;
  return realPixelScale * pixelScale;
};

export const setCoverPaperScale = (cover: ImageData, paperKey: PaperKey, scale: number) => {
  const realPixelScale = paperConfigs[paperKey].scale;
  cover.width = cover.widthRaw! / ((scale / realPixelScale) /cover.proportion!.scale)
  cover.height = (cover.heightRaw! / cover.widthRaw!) * cover.width
}

export const genTabulationData = async (paperKey: PaperKey, compass?: number, cover?: TabCover | null) => {
  const { margin, size } = getPaperConfig(
    paperConfigs[paperKey].size,
    paperConfigs[paperKey].scale
  );

  const getTable = () => {
    const w1 = getRealPixel(25, paperKey);
    const w2 = getRealPixel(55, paperKey);
    const h = getRealPixel(8, paperKey);

    const nameColl = {
      width: w1,
      height: h,
      padding: getRealPixel(2, paperKey),
      content: "",
      align: "center",
      fontSize: getRealPixel(4, paperKey),
      fontColor: "#000000",
    };
    const valueColl = { ...nameColl, width: w2 };

    const data = {
      ...getBaseItem(),
      content: [
        [{ ...nameColl, content: "案发时间" }, valueColl],
        [{ ...nameColl, content: "案发地点" }, valueColl],
        [{ ...nameColl, content: "绘图单位" }, valueColl],
        [{ ...nameColl, content: "绘图人" }, valueColl],
        [{ ...nameColl, content: "绘图时间" }, valueColl],
      ],
      fontSize: getRealPixel(4, paperKey),
      key: tableTableKey,
      width: nameColl.width + valueColl.width,
      height: nameColl.height * 5,
      mat: [1, 0, 0, 1, 0, 0],
    };

    const pos = getFixPosition(
      {
        right: getRealPixel(15, paperKey) + margin[1],
        bottom: getRealPixel(15, paperKey) + margin[2],
      },
      data,
      size
    );

    return matResponse({ data, mat: new Transform().translate(pos.x, pos.y) });
  };

  const getCover = async () => {
    if (!cover) return;
    const image = await getImage(cover.url);
    const rectScale = image.width / image.height;
    const tableCoverScale = tableCoverWidth / tableCoverHeight;

    let width: number, height: number;
    
    if (rectScale > tableCoverScale) {
      width = transformPaper(tableCoverWidth, paperKey, "a4");
      height = width / rectScale;
    } else {
      height = transformPaper(tableCoverHeight, paperKey, "a4");
      width = rectScale * height;
    }

    const coverData = {
      ...getBaseItem(),
      cornerRadius: 0,
      strokeWidth: 0,
      disableDelete: true,
      url: cover.url,
      key: tableCoverKey,
      proportion: cover.proportion,
      disableTransformer: true,
      widthRaw: cover.width,
      showScale: true,
      heightRaw: cover.height,
      zIndex: -1,
      width,
      height,
      mat: [1, 0, 0, 1, 0, 0],
      itemName: '比例'
    };
    const pos = getFixPosition(
      {
        left: coverData.width / 2 + margin[3] + getRealPixel(15, paperKey),
        bottom: -coverData.height / 2 + margin[2] + getRealPixel(15, paperKey),
      },
      coverData,
      size
    );
    coverData.mat[4] = pos.x;
    coverData.mat[5] = pos.y;

    const scale = getCoverPaperScale(coverData, paperKey);
    setCoverPaperScale(coverData, paperKey, Math.round(scale / 10) * 10 || 10)
    return coverData;
  };

  const getCoverScale = (cover: ImageData) => {
    const scale = (cover.widthRaw! / cover.width) * cover.proportion!.scale;
    console.log(cover)
    const text = {
      ...getBaseItem(),
      content: `1:${scale}`,
      width: getRealPixel(30, paperKey),
      heihgt: getRealPixel(4.8, paperKey),
      fontSize: getRealPixel(4, paperKey),
      disableEditText: true,
      key: tableCoverScaleKey,
      disableDelete: true,
      align: "center",
      mat: [1, 0, 0, 1, 0, 0],
    };
    const x = cover.mat[4] - (text.width || 0) / 2;
    const y = cover.mat[5] + cover.height / 2 + getRealPixel(5, paperKey);
    text.mat[4] = x;
    text.mat[5] = y;
    return text;
  };

  const getTitle = () => {
    const title = {
      ...getBaseItem(),
      content: "默认标题",
      width: getRealPixel(90, paperKey),
      heihgt: getRealPixel(14.4, paperKey),
      fontSize: getRealPixel(12, paperKey),
      key: tableTitleKey,
      align: "center",
      mat: [1, 0, 0, 1, 0, 0],
    };
    const pos = {
      x: (size.width - margin[3]) / 2 - getRealPixel(40, paperKey) + margin[3],
      y: getRealPixel(15, paperKey) + margin[0],
    };
    title.mat[4] = pos.x;
    title.mat[5] = pos.y;
    return title;
  };

  const getCompass = () => {
    const mat = new Transform().rotate(MathUtils.degToRad(compass!))
    
    const data: IconData = {
      ...getBaseItem(),
      width: getRealPixel(37.3366 / 2.3, paperKey),
      height: getRealPixel(60 / 2.3, paperKey),
      url: './icons/compass.svg',
      fill: "#000000",
      disableDelete: true,
      coverOpcatiy: 0,
      strokeScaleEnabled: false,
      key: tableCompassKey,
      mat: mat.m,
      name: '指南针'
    };
    
    const pos = getFixPosition(
      {
        right: getRealPixel(8, paperKey) + margin[1] ,
        top: getRealPixel(42, paperKey) + margin[2],
      },
      data,
      size
    );
    data.mat[4] = pos.x;
    data.mat[5] = pos.y;
    return data;
  }

  const data: DrawData = {
    table: [getTable()],
    text: [getTitle()],
  }
  const image = await getCover()
  if (image) {
    data.image = [image]
    data.text!.push(getCoverScale(image))
  }
  if (compass !== undefined) {
    data.icon = [getCompass()]
  }

  return data
};

export const repTabulationStore = async (paperKey: PaperKey, compass?: number, cover?: TabCover, store?: StoreData) => {
  const repData = await genTabulationData(paperKey, compass, cover)
  const layer = store?.layers && store?.layers[defaultLayer];

  if (!layer) {
    return {
      ...(store || {}),
      config: {
        ...getEmptyStoreData(),
        ...(store?.config || {}),
      },
      layers: {
        ...(store?.layers || {}),
        [defaultLayer]: repData
      }
    }
  }

  if (repData.image?.length) {
    const imageData = repData.image[0]
    const images = layer.image || []
    const imageNdx = images.findIndex(item => item.key === imageData.key)
    if (~imageNdx) {
      images[imageNdx] = {
        ...imageData,
        mat: images[imageNdx].mat
      }
    } else {
      images.push(imageData)
    }
    layer.image = images


    const scaleData = repData.text!.find(item => item.key === tableCoverScaleKey)!
    const texts = layer.text || []
    const textNdx = texts.findIndex(item => item.key === scaleData.key)
    if (~textNdx) {
      texts[textNdx].content = scaleData.content
    } else {
      texts.push(scaleData)
    }
    layer.text = texts
  }
  if (repData.icon) {
    const iconData = repData.icon[0]
    const icons = layer.icon || []
    const iconNdx = icons.findIndex(item => item.key === iconData.key)
    if (~iconNdx) {
      icons[iconNdx] = iconData
    } else {
      icons.push(iconData)
    }
    layer.icon = icons
  }

  store.layers[defaultLayer] = layer

  return store;
}