drawing-board-service/src/draw/core/components/icon/index.ts

import { InteractiveMessage } from "../../hook/use-interactive.ts";
import { ImageConfig } from "konva/lib/shapes/Image";

export { default as Component } from "./icon.vue";

export const shapeName = "图例";
export const defaultStyle = {
  strokeScaleEnabled: true,
  width: 80,
  height: 80
};

export const addMode = 'dot'

export const style = {
  default: defaultStyle,
  focus: defaultStyle,
  hover: defaultStyle,
};

export type IconData = Partial<typeof defaultStyle> & {
  fill?: string;
  stroke?: string;
  strokeWidth?: number;
  coverFill?: string;
  coverStroke?: string,
  coverStrokeWidth?: number,
  width: number;
  height: number;
  x: number;
  y: number;
  url: string
};


export const dataToConfig = (data: IconData): Omit<ImageConfig, 'image'> => ({
  ...defaultStyle,
  ...data
})

export const interactiveToData = (
  info: InteractiveMessage,
  preset: Partial<IconData> = {}
): IconData | undefined => {
  if (info.dot) {
    return interactiveFixData({ ...preset, } as unknown as IconData, info);
  }
};

export const interactiveFixData = (
  data: IconData,
  info: InteractiveMessage
) => {
  data.x = info.dot!.x
  data.y = info.dot!.y
  return data;
};