Browse Source

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

mj-deploy
Vašek Šraier 4 years ago
parent
commit
2a7e5a6120
  1. 9
      frontend/src/Graph.svelte
  2. 6
      frontend/src/GraphNode.svelte

9
frontend/src/Graph.svelte

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

6
frontend/src/GraphNode.svelte

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