26 lines
849 B
Vue
26 lines
849 B
Vue
|
<script setup>
|
||
|
|
import { computed, ref, reactive } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps(['selection', 'layoutInfo', 'isEditing'])
|
||
|
|
defineEmits(['fill-drag-start'])
|
||
|
|
|
||
|
|
const fillPreview = ref(false)
|
||
|
|
const fillPreviewRect = reactive({ w:0, h:0 })
|
||
|
|
|
||
|
|
const style = computed(() => ({
|
||
|
|
top: props.layoutInfo.top + 'px',
|
||
|
|
left: props.layoutInfo.left + 'px',
|
||
|
|
width: props.layoutInfo.width + 'px',
|
||
|
|
height: props.layoutInfo.height + 'px',
|
||
|
|
}))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="pointer-events-none z-20 absolute border-2 border-green-500 bg-green-500/10 transition-all duration-75"
|
||
|
|
:style="style">
|
||
|
|
<div v-if="!isEditing"
|
||
|
|
class="pointer-events-auto cursor-crosshair absolute w-2 h-2 bg-green-500 border border-white -bottom-1.5 -right-1.5 z-50"
|
||
|
|
@mousedown.stop="$emit('fill-drag-start', $event)"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
</template>
|