drawing-board-service/src/core/components/serial/temp-serial.vue

<template>
  <v-group ref="shape" :id="data.id">
    <v-ellipse
      name="repShape"
      :config="{
        ...data,
        ...matConfig,
        zIndex: undefined,
        opacity: addMode ? 0.3 : data.opacity,
      }"
    />
    <ShareText
      :config="{ ...textConfig, ...textBound }"
      :parent-id="data.id"
      :editer="editer && !data.disableEditText"
      @update-text="(val) => emit('updateContent', val)"
      @update:is-edit="(val) => emit('update:isEdit', val)"
    />
  </v-group>
</template>

<script lang="ts" setup>
import ShareText from "../share/text.vue";
import { SerialData, defaultStyle } from "./index.ts";
import { computed, ref } from "vue";
import { DC } from "@/deconstruction.js";
import { Circle } from "konva/lib/shapes/Circle";
import { Transform } from "konva/lib/Util";

const props = defineProps<{ data: SerialData; addMode?: boolean; editer?: boolean }>();
const emit = defineEmits<{
  (e: "updateContent", data: string): void;
  (e: "update:isEdit", data: boolean): void;
}>();

const data = computed(() => ({ ...defaultStyle, ...props.data }));

const matConfig = computed(() => {
  const mat = new Transform(data.value.mat);
  return mat.decompose();
});

const textBound = computed(() => {
  const r1 = props.data.radiusX;
  const width = (2 * r1) / Math.sqrt(2); // 宽度
  const pad = data.value.padding || 0;
  const height = Math.min(data.value.fontSize + pad * 2);
  const matConfig = new Transform(data.value.mat)
    .translate(-width / 2, -height / 2 + data.value.fontSize * 0.1)
    .decompose();
  return {
    padding: pad,
    ...matConfig,
    width,
    height,
  };
});
const textConfig = computed(() => ({
  fontSize: data.value.fontSize,
  align: data.value.align,
  fontStyle: data.value.fontStyle,
  fill: data.value.fontColor,
  text: data.value.content,
}));

const shape = ref<DC<Circle>>();
defineExpose({
  get shape() {
    return shape.value;
  },
});
</script>