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

graph: automatic resizing of the map

Browse source
This commit is contained in:
Vašek Šraier 2020-09-28 13:57:45 +02:00
parent db83b1cb02
commit ddfca887c3
2 changed files with 26 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Editor.svelte
View file

@ -108,6 +108,7 @@
margin: 0; margin: 0;
height: 50%; height: 50%;
background-color: aqua; background-color: aqua;
overflow-y: auto;
} }
.lastClicked { .lastClicked {
@ -143,7 +144,6 @@
</div> </div>
<div class="taskDetails"> <div class="taskDetails">
{#if currentTask != null} {#if currentTask != null}
start
<h3>{currentTask}</h3> <h3>{currentTask}</h3>
<span>{taskMap.get(currentTask).comment}</span> <span>{taskMap.get(currentTask).comment}</span>
<ul> <ul>

56
frontend/src/Graph.svelte
View file

@ -6,15 +6,21 @@
import { createLinksFromTaskMap } from "./task-loader"; import { createLinksFromTaskMap } from "./task-loader";
import type { TasksFile, TaskDescriptor } from "./task-loader"; import type { TasksFile, TaskDescriptor } from "./task-loader";
const eventDispatcher = createEventDispatcher();
export let tasks: TasksFile; export let tasks: TasksFile;
export let selectedTask: null | string = null; export let selectedTask: null | string = null;
export let repulsionForce: number = -600; export let repulsionForce: number = -600;
// Svelte automatically fills these with a reference
let container: HTMLElement;
let clientHeight: number;
let clientWidth: number;
let svgElement: SVGElement;
$: nodes = tasks.tasks; $: nodes = tasks.tasks;
$: edges = createLinksFromTaskMap(tasks); $: edges = createLinksFromTaskMap(tasks);
const eventDispatcher = createEventDispatcher();
const nodeClick = (task: TaskDescriptor) => (e: CustomEvent<MouseEvent>) => { const nodeClick = (task: TaskDescriptor) => (e: CustomEvent<MouseEvent>) => {
selectedTask = task.id; selectedTask = task.id;
eventDispatcher("selectTask", task); eventDispatcher("selectTask", task);
@ -30,9 +36,6 @@
} }
}; };
// Svelte automatically fills this with a reference
let container: HTMLElement;
function runSimulation() { function runSimulation() {
// Let's list the force we wanna apply on the network // Let's list the force we wanna apply on the network
let simulation = d3 let simulation = d3
@ -59,38 +62,29 @@
} }
} }
// run on create // start simulation and center view on create
onMount(() => { onMount(() => {
// set the dimensions and margins of the graph // set center of the SVG at (0,0)
const width = container.clientWidth; let svg = d3
const height = container.clientHeight; .select(svgElement)
.attr("viewBox", [
// resize the svg object -clientWidth / 2,
var svg = d3 -clientHeight / 2,
.select(container) clientWidth,
.select("svg") clientHeight,
.attr("width", width) ])
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.select("g"); .select("g");
// setup zoom
function zoomed(e) { function zoomed(e) {
let { transform } = e; svg.attr("transform", e.transform);
svg.attr("transform", transform);
} }
let zoomer = d3.zoom().scaleExtent([0.1, 2]).on("zoom", zoomed);
d3.select(container).call( d3.select(container).call(zoomer);
d3
.zoom()
.scaleExtent([0.1, 2])
.on("zoom", zoomed)
);
runSimulation();
}); });
// don't forget to vomit 🤮🤢 // don't forget to vomit 🤮🤢
export let runSimulationWeirdHack: boolean = true; export let runSimulationWeirdHack: boolean = false;
$: { $: {
runSimulationWeirdHack; runSimulationWeirdHack;
runSimulation(); runSimulation();
@ -105,8 +99,8 @@
} }
</style> </style>
<div bind:this={container}> <div bind:this={container} bind:clientHeight bind:clientWidth>
<svg> <svg bind:this={svgElement}>
<g> <g>
{#each edges as edge} {#each edges as edge}
<GraphEdge {edge} /> <GraphEdge {edge} />