You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.
|
|
|
<script lang="ts">
|
|
|
|
import { onMount } from "svelte";
|
|
|
|
|
|
|
|
import type { TaskDescriptor } from "./task-loader";
|
|
|
|
|
|
|
|
export let task: TaskDescriptor;
|
|
|
|
let hovering: boolean = false;
|
|
|
|
let text_element: SVGTextElement;
|
|
|
|
|
|
|
|
$: cx = task === undefined || task.x === undefined ? 0 : task.x;
|
|
|
|
$: cy = task === undefined || task.y === undefined ? 0 : task.y;
|
|
|
|
|
|
|
|
function enter() {
|
|
|
|
hovering = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
function leave() {
|
|
|
|
hovering = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
:global(g):hover > ellipse {
|
|
|
|
fill: #ffb3a2
|
|
|
|
}
|
|
|
|
ellipse {
|
|
|
|
fill: #69b3a2
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<g on:mouseenter={enter} on:mouseleave={leave}>
|
|
|
|
{#if !hovering}
|
|
|
|
<ellipse rx={ellipse_rx} ry={ellipse_ry} {cx} {cy} />
|
|
|
|
{:else}
|
|
|
|
<ellipse rx={ellipse_rx} ry={ellipse_ry} {cx} {cy} />
|
|
|
|
{/if}
|
|
|
|
<text
|
|
|
|
bind:this={text_element}
|
|
|
|
x={cx}
|
|
|
|
y={cy + 5}
|
|
|
|
text-anchor="middle"
|
|
|
|
alignment-baseline="middle">
|
|
|
|
{task.id}
|
|
|
|
</text>
|
|
|
|
</g>
|