KSP/graf-uloh
Archived
45
1
Fork 0
Code Issues 20 Pull requests Releases Wiki Activity

better node connections

Browse source 
fix #1
This commit is contained in:
Standa Lukeš 2020-09-29 11:19:29 +00:00
parent dbf86e1617
commit 27930f1aa2
2 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/GraphEdge.svelte
View file

@ -4,14 +4,12 @@
export let edge: SimulationLinkDatum<TaskId>; export let edge: SimulationLinkDatum<TaskId>;
$: x1 = edge === undefined || edge.source === undefined || edge.source.x === undefined ? 0 : edge.source.x; $: x1 = edge?.source?.x ?? 0;
$: y1 = edge === undefined || edge.source === undefined || edge.source.y === undefined ? 0 : edge.source.y; $: y1 = edge?.source?.y ?? 0;
$: x2 = edge === undefined || edge.target === undefined || edge.target.x === undefined ? 0 : edge.target.x; $: x2 = edge?.target?.x ?? 0;
$: y2 = edge === undefined || edge.target === undefined || edge.target.y === undefined ? 0 : edge.target.y; $: y2 = edge?.target?.y ?? 0;
$: dx = x1 - x2
$: dy = y1 - y2
</script> </script>
<line x1={x1+10} y1={y1} {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" />
<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" />

4
frontend/src/GraphNode.svelte
View file

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