46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup>
|
|
import { computed, ref, reactive } from 'vue'
|
|
|
|
const props = defineProps(['selection', 'layoutInfo', 'cutLayoutInfo', 'isEditing'])
|
|
defineEmits(['fill-drag-start'])
|
|
|
|
const style = computed(() => {
|
|
if (!props.layoutInfo) return {}
|
|
return {
|
|
top: props.layoutInfo.top + 'px',
|
|
left: props.layoutInfo.left + 'px',
|
|
width: props.layoutInfo.width + 'px',
|
|
height: props.layoutInfo.height + 'px',
|
|
}
|
|
})
|
|
|
|
const cutStyle = computed(() => {
|
|
if (!props.cutLayoutInfo) return {}
|
|
return {
|
|
top: props.cutLayoutInfo.top + 'px',
|
|
left: props.cutLayoutInfo.left + 'px',
|
|
width: props.cutLayoutInfo.width + 'px',
|
|
height: props.cutLayoutInfo.height + 'px',
|
|
display: 'block'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Cut Selection (Dashed Animation) -->
|
|
<div v-if="cutLayoutInfo"
|
|
class="pointer-events-none z-10 absolute border-2 border-dashed border-gray-400 animate-pulse bg-gray-100/30"
|
|
:style="cutStyle">
|
|
</div>
|
|
|
|
<!-- Current Selection (Solid Green) -->
|
|
<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>
|
|
</div>
|
|
</template> |