<template>
  <v-ellipse
    :config="{
      ...data,
      ...matConfig,
      zIndex: undefined,
      opacity: addMode ? 0.3 : data.opacity,
    }"
    ref="shape"
  >
  </v-ellipse>
</template>

<script lang="ts" setup>
import { CircleData, 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: CircleData; addMode?: boolean }>();
const data = computed(() => ({ ...defaultStyle, ...props.data }));

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

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