<script setup lang="ts" name="PreviewOutline">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  points?: number[][]
}>(), {
  points: () => [
    [200, 100],
    [350, 200],
    [350, 400]
  ]
})

const rectAttr = computed(() => {
  const xMin = Math.min.apply(null, props.points.map(item => item[0]))
  const yMin = Math.min.apply(null, props.points.map(item => item[1]))
  const xMax = Math.max.apply(null, props.points.map(item => item[0]))
  const yMax = Math.max.apply(null, props.points.map(item => item[1]))
  return {
    x: xMin - 6,
    y: yMin - 6,
    rx: 3,
    width: xMax - xMin + 12,
    height: yMax - yMin + 12
  }
})
</script>

<template>
  <rect
    v-bind="rectAttr"
    class="fv-outline"
    style="fill: none;" />
</template>

<style lang="less" scoped>
.fv-outline {
  // stroke: var(--primary-color);
  stroke-width: 1px;
  pointer-events: none;
  visibility: hidden;
  shape-rendering: geometricPrecision;
  stroke-dasharray: 3,3;
}
</style>