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

<template>
  <ShareText
    :config="{
      ...data,
      wrap: 'char',
      ...matConfig,
      text: data.content,
      zIndex: undefined,
      verticalAlign: 'center',
      opacity: addMode ? 0.3 : data.opacity,
    }"
    :parent-id="data.id"
    :ref="(r: any) => shape = r?.shape"
    :editer="editer && !data.disableEditText"
    @update-text="(v) => emit('updateContent', v)"
  />
</template>

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

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

const defStyle = { ...defaultStyle };
const data = computed(() => ({ ...defStyle, ...props.data }));
const shape = ref<DC<Text>>();
defineExpose({
  get shape() {
    return shape.value;
  },
});
const matConfig = computed(() => {
  return new Transform(data.value.mat).decompose();
});

watchEffect((oncleanup) => {
  if (shape.value?.getNode()) {
    textNodeMap[props.data.id] = shape.value.getNode();
    oncleanup(() => delete textNodeMap[props.data.id]);
  }
});
</script>