<template>
  <v-circle
    :config="{
      ...data,
      zIndex: undefined,
      opacity: addMode ? 0.3 : data.opacity,
    }"
    ref="shape"
  >
  </v-circle>
</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";

const props = defineProps<{ data: CircleData; addMode?: boolean }>();
const data = computed(() => ({ ...defaultStyle, ...props.data }));

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