<template>
  <v-line
    :config="{
      ...data,
      zIndex: undefined,
      closed: true,
      points: flatPositions(data.points),
      opacity: addMode ? 0.3 : data.opacity,
    }"
    ref="shape"
  />
</template>

<script lang="ts" setup>
import { flatPositions } from "@/utils/shared.ts";
import { defaultStyle, RectangleData } from "./index.ts";
import { computed, ref } from "vue";
import { DC } from "@/deconstruction.js";
import { Line } from "konva/lib/shapes/Line";
const props = defineProps<{ data: RectangleData; addMode?: boolean }>();
const data = computed(() => ({ ...defaultStyle, ...props.data }));

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