drawing-board-service/src/core/components/line/line.vue

<template>
  <TempLine
    :data="tData"
    :ref="(v: any) => shape = v?.shape"
    :id="data.id"
    @update:position="updatePosition"
    @update="emit('updateShape', { ...data })"
    @deletePoint="deletePoint"
    @addPoint="addPoint"
    canEdit
  />
  <PropertyUpdate
    :describes="describes"
    :data="data"
    :target="shape"
    @change="emit('updateShape', { ...data })"
  />
  <Operate :target="shape" :menus="operateMenus" />
</template>

<script lang="ts" setup>
import { LineData, getMouseStyle, defaultStyle, matResponse } from "./index.ts";
import { useComponentStatus } from "@/core/hook/use-component.ts";
import { PropertyUpdate, Operate } from "../../html-mount/propertys/index.ts";
import TempLine from "./temp-line.vue";
import { EditPen } from "@element-plus/icons-vue";
import { useInteractiveDrawShapeAPI } from "@/core/hook/use-draw.ts";
import { useStore } from "@/core/store/index.ts";
import { Pos } from "@/utils/math.ts";
import { de } from "element-plus/es/locale/index.mjs";

const props = defineProps<{ data: LineData }>();
const emit = defineEmits<{
  (e: "updateShape", value: LineData): void;
  (e: "addShape", value: LineData): void;
  (e: "delShape"): void;
}>();

const { shape, tData, data, operateMenus, describes } = useComponentStatus({
  emit,
  props,
  getMouseStyle,
  transformType: "line",
  alignment(data, mat) {
    return matResponse({ mat, data, increment: true });
  },
  // type: "line",
  defaultStyle,
  copyHandler(mat, data) {
    return matResponse({ mat, data, increment: true });
  },
  propertys: [
    "stroke",
    "strokeWidth",
    "dash",
    "opacity",
    //  "ref", "zIndex"
  ],
});

const updatePosition = ({ ndx, val }: { ndx: number; val: Pos }) => {
  Object.assign(data.value.points[ndx], val);
  shape.value?.getNode().fire("bound-change");
};

const deletePoint = (ndx: number) => {
  data.value.points.splice(ndx, 1);
  shape.value?.getNode().fire("bound-change");
};

const addPoint = ({ ndx, val }: { ndx: number; val: Pos }) => {
  console.log(ndx, val);
  data.value.points.splice(ndx + 1, 0, val);
  shape.value?.getNode().fire("bound-change");
};

const draw = useInteractiveDrawShapeAPI();
const store = useStore();
operateMenus.push({
  label: "钢笔编辑",
  icon: EditPen,
  handler() {
    draw.enterDrawShape("line", {
      ...props.data,
      getMessages: () => {
        const line = store.getItemById(props.data.id) as LineData;
        return line ? line.points : [];
      },
    });
  },
});
</script>