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

graph: fixed centering issues in Chrome (and probably in general)

Browse source
This commit is contained in:
Vašek Šraier 2020-10-18 09:33:30 +02:00
parent b2e0ead402
commit 2a7e5a6120
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/Graph.svelte
View file

@ -202,13 +202,11 @@
let tooltipCurrPoints: number | null = null; let tooltipCurrPoints: number | null = null;
$: tooltipTextPos = hoveredTask != null ? [(hoveredTask.position ?? [0,0])[0], (hoveredTask.position ?? [0,0])[1] + 40] : [0,0]; $: tooltipTextPos = hoveredTask != null ? [(hoveredTask.position ?? [0,0])[0], (hoveredTask.position ?? [0,0])[1] + 40] : [0,0];
let tooltipBoxWidth = 0; let tooltipBoxWidth = 0;
let tooltipBoxHeight = 0;
async function resizeTooltipBox() { async function resizeTooltipBox() {
await tick(); await tick();
if (tooltipTextElement == null) return; if (tooltipTextElement == null) return;
const bbox = tooltipTextElement.getBBox() const bbox = tooltipTextElement.getBBox()
tooltipBoxWidth = bbox.width + 10 + 10; tooltipBoxWidth = bbox.width + 10 + 10;
tooltipBoxHeight = bbox.height + 5 + 5;
} }
$: { $: {
tooltipMaxPoints = null; tooltipMaxPoints = null;
@ -338,15 +336,16 @@
x={tooltipTextPos[0]} x={tooltipTextPos[0]}
y={tooltipTextPos[1] - 15} y={tooltipTextPos[1] - 15}
width={tooltipBoxWidth} width={tooltipBoxWidth}
height={tooltipBoxHeight} height={30}
rx="3"> rx="3">
</rect> </rect>
<text <text
bind:this={tooltipTextElement} bind:this={tooltipTextElement}
x={tooltipTextPos[0] + tooltipBoxWidth / 2} x={tooltipTextPos[0] + tooltipBoxWidth / 2}
y={tooltipTextPos[1] + 4} y={tooltipTextPos[1]}
text-anchor="middle" text-anchor="middle"
alignment-baseline="middle"> alignment-baseline="middle"
dominant-baseline="middle">
{hoveredTask.type == 'open-data' ? hoveredTask.taskReference : "text"} | {tooltipCurrPoints ?? '?'} bod{ "ů yyy"[tooltipCurrPoints ?? 0] ?? "ů" } z {tooltipMaxPoints ?? '?'} {hoveredTask.type == 'open-data' ? hoveredTask.taskReference : "text"} | {tooltipCurrPoints ?? '?'} bod{ "ů yyy"[tooltipCurrPoints ?? 0] ?? "ů" } z {tooltipMaxPoints ?? '?'}
</text> </text>
</g> </g>

6
frontend/src/GraphNode.svelte
View file

@ -112,9 +112,10 @@
<text <text
bind:this={text_element} bind:this={text_element}
x={cx} x={cx}
y={cy + 5} y={cy}
text-anchor="middle" text-anchor="middle"
alignment-baseline="middle" alignment-baseline="middle"
dominant-baseline="middle"
transform="translate({cx}, {cy}) rotate({task.rotationAngle ?? 0}) translate({-cx}, {-cy})"> transform="translate({cx}, {cy}) rotate({task.rotationAngle ?? 0}) translate({-cx}, {-cy})">
{task.title == null ? task.id : task.title} {task.title == null ? task.id : task.title}
</text> </text>
@ -133,8 +134,9 @@
<text <text
bind:this={text_element} bind:this={text_element}
x={cx} x={cx}
y={cy + 5} y={cy}
text-anchor="middle" text-anchor="middle"
dominant-baseline="middle"
alignment-baseline="middle"> alignment-baseline="middle">
{task.title == null ? task.id : task.title} {task.title == null ? task.id : task.title}
</text> </text>