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

import { Pos } from "@/draw/utils/math.ts";
import { flatPositions } from "@/draw/utils/shared.ts";
import { InteractiveAction, InteractiveMessage } from "../../hook/use-interactive.ts";
import { LineConfig } from "konva/lib/shapes/Line";

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

export const shapeName = "线段";
export const defaultStyle = {
  stroke: "#000",
  strokeWidth: 10,
};

export const addMode = 'dots'

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

export type LineData = Partial<typeof defaultStyle> & { points: Pos[] };

export const dataToConfig = (data: LineData): LineConfig => ({
  ...defaultStyle,
  ...data,
  points: flatPositions(data.points),
});

export const interactiveToData = (
  info: InteractiveMessage,
  preset: Partial<LineData> = {}
): LineData | undefined => {
  if (info.dot) {
    return interactiveFixData({ ...preset, points: [] }, info);
  }
};

export const interactiveFixData = (
  data: LineData,
  info: InteractiveMessage
) => {
  if (info.action === InteractiveAction.delete) {
    data.points.pop()
  } else {
    data.points[info.ndx!] = info.dot!
  }
  return data;
};