Browse Source

better node connections

fix #1
mj-deploy
Standa Lukeš 4 years ago
parent
commit
27930f1aa2
  1. 16
      frontend/src/GraphEdge.svelte
  2. 4
      frontend/src/GraphNode.svelte

16
frontend/src/GraphEdge.svelte

@ -4,14 +4,12 @@
export let edge: SimulationLinkDatum<TaskId>;
$: x1 = edge === undefined || edge.source === undefined || edge.source.x === undefined ? 0 : edge.source.x;
$: y1 = edge === undefined || edge.source === undefined || edge.source.y === undefined ? 0 : edge.source.y;
$: x2 = edge === undefined || edge.target === undefined || edge.target.x === undefined ? 0 : edge.target.x;
$: y2 = edge === undefined || edge.target === undefined || edge.target.y === undefined ? 0 : edge.target.y;
$: x1 = edge?.source?.x ?? 0;
$: y1 = edge?.source?.y ?? 0;
$: x2 = edge?.target?.x ?? 0;
$: y2 = edge?.target?.y ?? 0;
$: dx = x1 - x2
$: dy = y1 - y2
</script>
<line x1={x1+10} y1={y1} {x2} {y2} style="stroke: #aaa" />
<line x1={x1} y1={y1+10} {x2} {y2} style="stroke: #aaa" />
<line x1={x1-10} y1={y1} {x2} {y2} style="stroke: #aaa" />
<line x1={x1} y1={y1-10} {x2} {y2} style="stroke: #aaa" />
<path d="m {x2} {y2+0} c 0 0 {dx} {dy-40} {dx} {dy-20}" style="fill:none; stroke: #aaa; stroke-width: 3px" />

4
frontend/src/GraphNode.svelte

@ -27,11 +27,9 @@
// automatically size the bubbles to fit the text
let ellipse_rx = 20;
let ellipse_ry = 20;
onMount(() => {
const bbox = text_element.getBBox();
ellipse_rx = bbox.width / 2 + 8;
ellipse_ry = bbox.height / 2 + 8;
});
</script>
@ -45,7 +43,7 @@
</style>
<g on:mouseenter={enter} on:mouseleave={leave} on:click={click}>
<ellipse rx={ellipse_rx} ry={ellipse_ry} {cx} {cy} />
<ellipse rx={ellipse_rx} ry={20} {cx} {cy} />
<text
bind:this={text_element}
x={cx}