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

<template>
  <TempLine
    :data="tData"
    :ref="(v: any) => shape = v?.shape"
    :id="data.id"
    editer
    @update-content="updateContent"
  />
  <PropertyUpdate
    :describes="describes"
    :data="data"
    :target="shape"
    @delete="emit('delShape')"
    @change="emit('updateShape', { ...data })"
  />
  <Operate :target="shape" :menus="operateMenus" />
</template>

<script lang="ts" setup>
import { TriangleData, getMouseStyle, defaultStyle, matResponse } from "./index.ts";
import { PropertyUpdate, Operate } from "../../html-mount/propertys/index.ts";
import TempLine from "./temp-triangle.vue";
import { useComponentStatus } from "@/core/hook/use-component.ts";

const props = defineProps<{ data: TriangleData }>();
const emit = defineEmits<{
  (e: "updateShape", value: TriangleData): void;
  (e: "addShape", value: TriangleData): void;
  (e: "delShape"): void;
}>();
const updateContent = (val: string) => {
  data.value.content = val;
  emit("updateShape", { ...data.value });
};

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