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

import { Pos } from "@/utils/math.ts";
import { themeMouseColors } from "@/constant/help-style.ts";
import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { InteractiveFix, InteractiveTo } from "../index.ts";

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

export const shapeName = "多边形";
export const defaultStyle = {
  stroke: themeMouseColors.theme,
  strokeWidth: 5,
  dash: [30, 0],
};

export const getMouseStyle = (data: PolygonData) => {
  const fillStatus = data.fill && getMouseColors(data.fill);
  const strokeStatus = getMouseColors(data.stroke || defaultStyle.stroke);
  const strokeWidth = data.strokeWidth;

  return {
    default: {
      fill: fillStatus && fillStatus.pub,
      stroke: strokeStatus.pub,
      strokeWidth,
    },
    hover: { fill: fillStatus && fillStatus.hover, stroke: strokeStatus.hover },
    press: { fill: fillStatus && fillStatus.press, stroke: strokeStatus.press },
  };
};

export const addMode = "dots";

export const getSnapInfos = (data: PolygonData) =>
  generateSnapInfos(getSnapPoints(data), true, true);

export const getSnapPoints = (data: PolygonData) => {
  return data.points;
};

export type PolygonData = Partial<typeof defaultStyle> &
  BaseItem & {
    fill?: string;
    points: Pos[];
    attitude: number[];
  };

export const interactiveToData: InteractiveTo<"polygon"> = ({
  info,
  preset = {},
  ...args
}) => {
  if (info.cur) {
    return interactiveFixData({
      ...args,
      info,
      data: {
        ...getBaseItem(),
        ...preset,
        points: [],
        attitude: [1, 0, 0, 1, 0, 0],
      },
    });
  }
};

export const interactiveFixData: InteractiveFix<"polygon"> = ({
  data,
  info,
}) => {
  data.points = [...info.consumed, info.cur!];
  return data;
};