Browse Source

Better drag&drop for nodes in editor

fix #24
mj-deploy
Standa Lukeš 4 years ago
parent
commit
f462b837b8
  1. 10
      frontend/src/GraphNode.svelte

10
frontend/src/GraphNode.svelte

@ -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'}