drawing-board-service/src/core/components/arrow/temp-arrow.vue

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

<script lang="ts" setup>
import { ArrowData, defaultStyle, PointerPosition } from "./index.ts";
import { DC } from "@/deconstruction.js";
import { computed, ref, watchEffect } from "vue";
import { flatPositions } from "@/utils/shared.ts";
import { Arrow } from "konva/lib/shapes/Arrow";

const props = defineProps<{ data: ArrowData; addMode?: boolean }>();
const shape = ref<DC<Arrow>>();

const eConfig = computed(() => {
  const position =
    "pointerPosition" in props.data
      ? props.data.pointerPosition!
      : defaultStyle.pointerPosition;
  const eStart = [PointerPosition.all, PointerPosition.start].includes(position);
  const eEnd = [PointerPosition.all, PointerPosition.end].includes(position);

  return {
    pointerAtBeginning: eStart,
    pointerAtEnding: eEnd,
  };
});

defineExpose({
  get shape() {
    return shape.value;
  },
});
</script>