|
@ -11,6 +11,7 @@ |
|
|
|
|
|
|
|
|
let hovering: boolean = false; |
|
|
let hovering: boolean = false; |
|
|
let text_element: SVGTextElement; |
|
|
let text_element: SVGTextElement; |
|
|
|
|
|
let mainGroup: SVGGElement; |
|
|
|
|
|
|
|
|
$: cx = task === undefined || task.x === undefined ? 0 : task.x; |
|
|
$: cx = task === undefined || task.x === undefined ? 0 : task.x; |
|
|
$: cy = task === undefined || task.y === undefined ? 0 : task.y; |
|
|
$: cy = task === undefined || task.y === undefined ? 0 : task.y; |
|
@ -45,12 +46,15 @@ |
|
|
dragging = true; |
|
|
dragging = true; |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("mousemove", drag) |
|
|
|
|
|
window.addEventListener("mouseup", dragStop, { once: true }) |
|
|
} |
|
|
} |
|
|
function drag(e: MouseEvent) { |
|
|
function drag(e: MouseEvent) { |
|
|
if (!draggingEnabled) return; |
|
|
if (!draggingEnabled) return; |
|
|
if (!dragging) return; |
|
|
if (!dragging) return; |
|
|
|
|
|
|
|
|
let [x, y] = d3.pointer(e); |
|
|
let [x, y] = d3.pointer(e, mainGroup); |
|
|
task.x = x; |
|
|
task.x = x; |
|
|
task.y = y; |
|
|
task.y = y; |
|
|
eventDispatcher("positionChange"); |
|
|
eventDispatcher("positionChange"); |
|
@ -63,6 +67,7 @@ |
|
|
dragging = false; |
|
|
dragging = false; |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
e.stopPropagation(); |
|
|
|
|
|
window.removeEventListener("mousemove", drag) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function dblclick(e: MouseEvent) { |
|
|
function dblclick(e: MouseEvent) { |
|
@ -103,12 +108,11 @@ |
|
|
</style> |
|
|
</style> |
|
|
|
|
|
|
|
|
<g |
|
|
<g |
|
|
|
|
|
bind:this={mainGroup} |
|
|
on:mouseenter={enter} |
|
|
on:mouseenter={enter} |
|
|
on:mouseleave={leave} |
|
|
on:mouseleave={leave} |
|
|
on:click={click} |
|
|
on:click={click} |
|
|
on:mousedown={dragStart} |
|
|
on:mousedown={dragStart} |
|
|
on:mouseup={dragStop} |
|
|
|
|
|
on:mousemove={drag} |
|
|
|
|
|
on:dblclick={dblclick} |
|
|
on:dblclick={dblclick} |
|
|
class="{status == null ? '' : status.solved ? 'solved' : status.submitted ? 'submitted' : ''} {task.task.type}"> |
|
|
class="{status == null ? '' : status.solved ? 'solved' : status.submitted ? 'submitted' : ''} {task.task.type}"> |
|
|
{#if task.task.type == 'label'} |
|
|
{#if task.task.type == 'label'} |
|
|