From 2006216a9944a15467a528bfa7033dcc48b71ec1 Mon Sep 17 00:00:00 2001 From: Vasek Sraier Date: Mon, 28 Sep 2020 00:30:34 +0200 Subject: [PATCH] editor: first version --- frontend/public/grafik.html | 2 +- frontend/src/App.svelte | 24 +++--- frontend/src/Editor.svelte | 143 +++++++++++++++++++++++++++++++ frontend/src/Graph.svelte | 83 +++++++++++------- frontend/src/ksp-task-grabber.ts | 2 +- frontend/src/task-loader.ts | 11 ++- 6 files changed, 219 insertions(+), 46 deletions(-) create mode 100644 frontend/src/Editor.svelte diff --git a/frontend/public/grafik.html b/frontend/public/grafik.html index be1214d..2deb3f8 100644 --- a/frontend/public/grafik.html +++ b/frontend/public/grafik.html @@ -13,7 +13,7 @@ - +
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 4bb975e..8872da5 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -1,10 +1,10 @@
- - - - - + {#if hash == "editor"} + + + + {:else} + + + + + {/if}
diff --git a/frontend/src/Editor.svelte b/frontend/src/Editor.svelte new file mode 100644 index 0000000..0ce6e55 --- /dev/null +++ b/frontend/src/Editor.svelte @@ -0,0 +1,143 @@ + + + + +
+
+
Last clicked: {clicked.join(' | ')}
+
+ +
+
+
+
+
Toolbox
+
+ +
+
+ +
+
+
+ {#if currentTask != null} +

{currentTask}

+ {taskMap.get(currentTask).comment} +
    + {#each getCategories(tasks, currentTask) as cat} +
  • {cat}
    • + {/each} +
+
+ {#await grabAssignment(currentTask)} + Loading... + {:then text} + {@html text} + {/await} +
+ {:else} +

Nothing selected...

+ {/if} +
+
+
diff --git a/frontend/src/Graph.svelte b/frontend/src/Graph.svelte index 846d97b..9718918 100644 --- a/frontend/src/Graph.svelte +++ b/frontend/src/Graph.svelte @@ -6,48 +6,35 @@ import { createLinksFromTaskMap } from "./task-loader"; import type { TasksFile, TaskDescriptor } from "./task-loader"; - const eventDispatcher = createEventDispatcher() + const eventDispatcher = createEventDispatcher(); export let tasks: TasksFile; - let nodes = tasks.tasks; - let edges = createLinksFromTaskMap(tasks); + export let selectedTask: null | string = null; + + $: nodes = tasks.tasks; + $: edges = createLinksFromTaskMap(tasks); - export let selectedTask: null | string = null const nodeClick = (task: TaskDescriptor) => (e: CustomEvent) => { - selectedTask = task.id - eventDispatcher("selectTask", task) - } + selectedTask = task.id; + eventDispatcher("selectTask", task); + }; - const nodeHover = (task: TaskDescriptor) => (hovering: CustomEvent) => { + const nodeHover = (task: TaskDescriptor) => ( + hovering: CustomEvent + ) => { if (hovering.detail) { - selectedTask = task.id + selectedTask = task.id; } else { - if (selectedTask == task.id) - selectedTask = null + if (selectedTask == task.id) selectedTask = null; } - } + }; // Svelte automatically fills this with a reference let container: HTMLElement; - onMount(async () => { - // set the dimensions and margins of the graph - var margin = { top: 10, right: 30, bottom: 30, left: 40 }, - width = container.clientWidth - margin.left - margin.right, - height = container.clientHeight - margin.top - margin.bottom; - - // resize the svg object - var svg = d3 - .select(container) - .select("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) - .attr("viewBox", [-width / 2, -height / 2, width, height]) - .select("g") - .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); - + function runSimulation() { // Let's list the force we wanna apply on the network - var simulation = d3 + let simulation = d3 .forceSimulation(nodes) // Force algorithm is applied to data.nodes .force( "link", @@ -69,12 +56,41 @@ edges = edges; nodes = nodes; } + } + + // run on create + onMount(() => { + // set the dimensions and margins of the graph + var margin = { top: 10, right: 30, bottom: 30, left: 40 }, + width = container.clientWidth - margin.left - margin.right, + height = container.clientHeight - margin.top - margin.bottom; + + // resize the svg object + var svg = d3 + .select(container) + .select("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .attr("viewBox", [-width / 2, -height / 2, width, height]) + .select("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + + runSimulation(); }); + + // don't forget to vomit 🤮🤢 + export let runSimulationWeirdHack: boolean = true; + $: { + runSimulationWeirdHack; + runSimulation(); + } + // now it's safe to stop vomitting 🤮 + @@ -83,10 +99,13 @@ {#each edges as edge} - + {/each} {#each nodes as task} - + {/each} diff --git a/frontend/src/ksp-task-grabber.ts b/frontend/src/ksp-task-grabber.ts index b42d454..f074189 100644 --- a/frontend/src/ksp-task-grabber.ts +++ b/frontend/src/ksp-task-grabber.ts @@ -72,7 +72,7 @@ async function loadTask({ url, startElement }: TaskLocation) { return parseTask(startElement, rText) } -export async function grabAssignment(id: string) { +export async function grabAssignment(id: string): Promise { const l = getLocation(id, false) if (!l) return "úloha je virtuální a neexistuje" return await loadTask(l) diff --git a/frontend/src/task-loader.ts b/frontend/src/task-loader.ts index 77859f2..c92bd6f 100644 --- a/frontend/src/task-loader.ts +++ b/frontend/src/task-loader.ts @@ -2,7 +2,7 @@ import type { SimulationNodeDatum, SimulationLinkDatum } from "d3"; export type TaskDescriptor = { id: string - requires: [] + requires: string[] comment?: string } & SimulationNodeDatum @@ -49,3 +49,12 @@ export function createLinksFromTaskMap(tasks: TasksFile): SimulationLinkDatum= 0) res.push(cat); + } + + return res; +}