<template>
  <v-text
    :config="{
      ...data,
      ...matConfig,
      wrap: 'char',
      verticalAlign: 'center',
      text: data.content,
      zIndex: undefined,
      opacity: addMode ? 0.3 : data.opacity,
    }"
    ref="shape"
    name="text"
  >
  </v-text>
</template>

<script lang="ts" setup>
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 }>();
const data = computed(() => ({ ...defaultStyle, ...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>
