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

34
frontend/src/Graph.svelte
View file

@ -6,6 +6,7 @@
import type { TasksFile, TaskDescriptor } from "./task-loader"; import type { TasksFile, TaskDescriptor } from "./task-loader";
import { createNodesAndEdges } from "./graph-types"; import { createNodesAndEdges } from "./graph-types";
import { taskForce } from "./task-force"; import { taskForce } from "./task-force";
import { zoom } from "d3";
export let tasks: TasksFile; export let tasks: TasksFile;
let hoveredTask: null | string = null; let hoveredTask: null | string = null;
@ -73,17 +74,22 @@
nodes = nodes; 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 // start simulation and center view on create
onMount(() => { onMount(() => {
// set center of the SVG at (0,0) // set center of the SVG at (0,0)
let svg = d3.select(svgElement) let svg = d3.select(svgElement).select("g")
// setup zoom // setup zoom
function zoomed(e) { function zoomed(e) {
svg.attr("transform", e.transform); 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); d3.select(container).call(zoomer);
runSimulation(); runSimulation();
@ -112,18 +118,20 @@
</style> </style>
<div bind:this={container} bind:clientHeight bind:clientWidth> <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>
{#each edges as edge} <g transform="translate({clientWidth/2}, {clientHeight/2})">
<GraphEdge {edge} /> {#each edges as edge}
{/each} <GraphEdge {edge} />
{#each nodes as task} {/each}
<GraphNode {#each nodes as task}
{task} <GraphNode
on:taskClick {task}
on:click={nodeClick(task.task)} on:taskClick
on:hoveringChange={nodeHover(task.task)} /> on:click={nodeClick(task.task)}
{/each} on:hoveringChange={nodeHover(task.task)} />
{/each}
</g>
</g> </g>
</svg> </svg>
</div> </div>