35 lines
676 B
Vue
35 lines
676 B
Vue
|
<script setup lang="ts">
|
||
|
|
interface Preview {
|
||
|
|
x: number;
|
||
|
|
y: number;
|
||
|
|
width: number;
|
||
|
|
height: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
defineProps<{ preview: Preview }>();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="snap-preview"
|
||
|
|
:style="{
|
||
|
|
left: `${preview.x}px`,
|
||
|
|
top: `${preview.y}px`,
|
||
|
|
width: `${preview.width}px`,
|
||
|
|
height: `${preview.height}px`,
|
||
|
|
}"
|
||
|
|
></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.snap-preview {
|
||
|
|
position: fixed;
|
||
|
|
background-color: rgba(255, 255, 255, 0.2);
|
||
|
|
border: 2px dashed rgba(255, 255, 255, 0.5);
|
||
|
|
border-radius: 8px;
|
||
|
|
z-index: 9998; /* Below the dragged window, above others */
|
||
|
|
transition: all 0.1s ease-out;
|
||
|
|
backdrop-filter: blur(5px);
|
||
|
|
}
|
||
|
|
</style>
|