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

import { Pos } from "@/utils/math.ts";
import { flatPositions, inRevise, onlyId } from "@/utils/shared.ts";
import { ArrowConfig } from "konva/lib/shapes/Arrow";
import { BaseItem, generateSnapInfos, getBaseItem } from "../util.ts";
import { getMouseColors } from "@/utils/colors.ts";
import { InteractiveFix, InteractiveTo, MatResponseProps } from "../index.ts";
import { Transform } from "konva/lib/Util";

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

export enum PointerPosition {
  start = "start",
  end = "end",
  all = "all",
}
export const shapeName = "箭头";
export const defaultStyle = {
  fill: '#000000',
  pointerPosition: PointerPosition.end,
  strokeWidth: 2,
  pointerLength: 10,
};

// export const fill

export const addMode = "area";

export const getMouseStyle = (data: ArrowData) => {
  const strokeStatus = getMouseColors(data.fill || defaultStyle.fill);
  const strokeWidth = data.strokeWidth || defaultStyle.strokeWidth;

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

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

export const dataToConfig = (data: ArrowData): ArrowConfig => ({
  ...defaultStyle,
  ...data,
  points: flatPositions(data.points),
  hitStrokeWidth: 20,
});

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

export const getSnapPoints = (data: ArrowData) => data.points;

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

export const interactiveFixData: InteractiveFix<"arrow"> = ({ data, info }) => {
  // const nv = [...info.consumed, info.cur!];
  // data.points.length = nv.length
  // for (let i = 0; i < nv.length; i++) {
  //   if (inRevise(data.points[i], nv[i])) {
  //     data.points[i] = nv[i]
  //   }
  // }
  // return data;


  if (info.cur) {
    const area = info.cur!;
    data.points = area
    data.attitude = [1, 0, 0, 1, 0, 0];
  }
  return data
};



export const matResponse = ({data, mat, increment}: MatResponseProps<'arrow'>) => {
  let transfrom: Transform
  const attitude = new Transform(data.attitude);
  if (!increment) {
    const inverMat = attitude.copy().invert();
    transfrom = mat.copy().multiply(inverMat);
  } else {
    transfrom = mat
  }

  data.points = data.points.map((v) => transfrom.point(v));
  data.attitude = transfrom.copy().multiply(attitude).m;
  return data;
}

export const getPredefine = (key: keyof ArrowData) => {
  if (key === 'strokeWidth') {
    return { proportion: true }
  }
}