<template>
	<v-text :config="config" ref="shape" name="text">
	</v-text>
</template>

<script lang="ts" setup>
import { TextData, dataToConfig } from "./index.ts";
import { computed, ref } from "vue";
import { DC } from "@/deconstruction.js";
import { Transform } from "konva/lib/Util";
import { Group } from "konva/lib/Group";

const props = defineProps<{ data: TextData, addMode?: boolean }>()
const shape = ref<DC<Group>>()
defineExpose({ 
  get shape() {
    return shape.value
  } 
})

const config = computed(() => {
	const dec = new Transform(props.data.mat).decompose()
	const conf = {
		...dataToConfig(props.data),
		...dec,
		opacity: props.addMode ? 0.3 : 1
	}
	return conf
})
</script>