<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;
width:8px; height:8px;
border:solid 1px black;
background:dodgerblue;
}
</style>
<script context="module">
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
const HandleW = 8, HandleH = 8
function HandleX (Direction, FrameL,FrameR) {// extra arguments for reactivity