<template>
    <g :class="{ selected }">
        <line :x1="modelValue.x1" :y1="modelValue.y1" :x2="modelValue.x2" :y2="modelValue.y1" @mousedown="$emit('target', { target:modelValue, attrs:[, 'y1'] })"></line>
        <line :x1="modelValue.x2" :y1="modelValue.y1" :x2="modelValue.x2" :y2="modelValue.y2" @mousedown="$emit('target', { target:modelValue, attrs:['x2'] })"></line>
        <line :x1="modelValue.x2" :y1="modelValue.y2" :x2="modelValue.x1" :y2="modelValue.y2" @mousedown="$emit('target', { target:modelValue, attrs:[, 'y2'] })"></line>
        <line :x1="modelValue.x1" :y1="modelValue.y2" :x2="modelValue.x1" :y2="modelValue.y1" @mousedown="$emit('target', { target:modelValue, attrs:['x1'] })"></line>
        <AnnotationPoint :x="modelValue.x1" :y="modelValue.y1" class="movable" @mousedown="$emit('target', {target:modelValue, attrs:['x1', 'y1']})"></AnnotationPoint>
        <AnnotationPoint :x="modelValue.x2" :y="modelValue.y2" class="movable" @mousedown="$emit('target', {target:modelValue, attrs:['x2', 'y2']})"></AnnotationPoint>
        <AnnotationPoint :x="modelValue.x1" :y="modelValue.y2" class="movable" @mousedown="$emit('target', {target:modelValue, attrs:['x1', 'y2']})"></AnnotationPoint>
        <AnnotationPoint :x="modelValue.x2" :y="modelValue.y1" class="movable" @mousedown="$emit('target', {target:modelValue, attrs:['x2', 'y1']})"></AnnotationPoint>
    </g>
</template>

<script>
import AnnotationPoint from './AnnotationPoint.vue';
import Utils from '#/app/Utils';

export default {
  components: { AnnotationPoint },
    props:{
        modelValue: Object,
        selected: Boolean
    },
    steps: [['x1', 'y1'], ['x2', 'y2']],
    icon: 'mdi-vector-rectangle',
    name: 'rectangle',
    modifiers: ['x1', 'y1', 'x2', 'y2'],
    methods:{
        intersect(v){
            let r = Utils.adjustMinMax(this.modelValue);
            return Utils.intersectRectRect(r, v)
        }
    }
}
</script>