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

More hack and few more hack so zoom works

Browse source 
fix #2
This commit is contained in:
Standa Lukeš 2020-09-28 22:44:29 +00:00
parent 102c0677ed
commit 73f8966ea1
1 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/Graph.svelte
View file

@ -6,6 +6,7 @@
import type { TasksFile, TaskDescriptor } from "./task-loader";
import { createNodesAndEdges } from "./graph-types";
import { taskForce } from "./task-force";
import { zoom } from "d3";
export let tasks: TasksFile;
let hoveredTask: null | string = null;
@ -73,17 +74,22 @@
nodes = nodes;
}
}
const zoomer = d3.zoom().scaleExtent([0.1, 2])
$: {
// zoomer.extent([[-clientWidth / 2,-clientHeight / 2],[clientWidth,clientHeight]])
}
// start simulation and center view on create
onMount(() => {
// set center of the SVG at (0,0)
let svg = d3.select(svgElement)
let svg = d3.select(svgElement).select("g")
// setup zoom
function zoomed(e) {
svg.attr("transform", e.transform);
}
let zoomer = d3.zoom().scaleExtent([0.1, 2]).on("zoom", zoomed);
zoomer.on("zoom", zoomed);
d3.select(container).call(zoomer);
runSimulation();
@ -112,8 +118,9 @@
</style>
<div bind:this={container} bind:clientHeight bind:clientWidth>
<svg bind:this={svgElement} viewBox="{-clientWidth / 2},{-clientHeight / 2},{clientWidth},{clientHeight}">
<svg bind:this={svgElement} viewBox="{0},{0},{clientWidth},{clientHeight}" on:click={e => console.log(d3.pointer(e))}>
<g>
<g transform="translate({clientWidth/2}, {clientHeight/2})">
{#each edges as edge}
<GraphEdge {edge} />
{/each}
@ -125,5 +132,6 @@
on:hoveringChange={nodeHover(task.task)} />
{/each}
</g>
</g>
</svg>
</div>