35 lines
1.9 KiB
Vue
35 lines
1.9 KiB
Vue
<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 '@/lib/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> |