<style>
:global([draggable]) {
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
.SelectionFrame {
display:block; position:absolute;
border:dotted 1px black;
cursor:move;
}
.ResizeHandle {
display:block; position:absolute;
border:solid 1px black;
background:dodgerblue;
}
:global(body.noPointer) .ResizeHandle { width:8px; height:8px }
:global(body.finePointer) .ResizeHandle { width:8px; height:8px }
:global(body.coarsePointer) .ResizeHandle { width:20px; height:20px }
</style>
<script context="module">
import Device from 'svelte-device-info'
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDraggable } from 'svelte-drag-and-drop-actions'
</script>
<script>
/**** Frame and Handle positions ****/
let FrameL = 150, FrameT = 180, FrameR = FrameL+100, FrameB = FrameT+40
const minFrameW = 40, maxFrameW = 300
const minFrameH = 20, maxFrameH = 300