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

import { Transform } from "konva/lib/Util";
import {
  BaseItem,
  generateSnapInfos,
  getBaseItem,
  getRectSnapPoints,
} from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { imageInfo } from "@/utils/resource.ts";
import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
import { Size } from "@/utils/math.ts";
import { themeColor } from "@/constant";

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

export const shapeName = "图片";
export const defaultStyle = {
  strokeWidth: 0,
  stroke: themeColor,
};

export const addMode = "dot";

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

  return {
    default: { stroke: data.stroke || defaultStyle.stroke },
    hover: { stroke: strokeStatus.hover, strokeWidth: 1 },
    focus: { stroke: strokeStatus.hover, strokeWidth: 1 },
    select: { stroke: strokeStatus.select, strokeWidth: 1 },
    press: { stroke: strokeStatus.press, strokeWidth: 1 },
  };
};

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

export const getSnapPoints = (data: ImageData) => {
  const tf = new Transform(data.mat);
  const useData = data.width && data.height;
  if (!useData && !(data.url in imageInfo)) {
    return [];
  }

  const w = useData ? data.width : imageInfo[data.url].width;
  const h = useData ? data.height : imageInfo[data.url].height;
  const points = getRectSnapPoints(w, h);
  return points.map((v) => tf.point(v));
};

export type ImageData = Partial<typeof defaultStyle> &
  BaseItem & Size & {
    fill?: string;
    stroke?: string;
    widthRaw?: number;
    proportion?: {
      scale: number;
      unit: string;
    };
    heightRaw?: number
    strokeWidth?: number;
    cornerRadius?: number;
    url: string;
    mat: number[];
  };

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

export const interactiveFixData: InteractiveFix<"image"> = ({ data, info }) => {
  const mat = new Transform().translate(info.cur!.x, info.cur!.y);
  data.mat = mat.m;
  return data;
};


export const matResponse = ({data, mat, increment}: MatResponseProps<'image'>) => {
  data.mat = increment ? mat.copy().multiply(new Transform(data.mat)).m : mat.m;
  return data;
}