Browse Source

graph: option to hide nodes

mj-deploy
Vašek Šraier 4 years ago
parent
commit
96dccd779d
  1. 28
      frontend/src/Editor.svelte
  2. 10
      frontend/src/Graph.svelte
  3. 22
      frontend/src/GraphEdge.svelte
  4. 27
      frontend/src/GraphNode.svelte
  5. 1
      frontend/src/tasks.ts
  6. 426
      tasks.json

28
frontend/src/Editor.svelte

@ -68,7 +68,7 @@
}
// autosave ;)
let saveTimeoutHandle: number | null = null;
let saveTimeoutHandle: NodeJS.Timeout | null = null;
function autosave() {
if (saveTimeoutHandle != null) clearTimeout(saveTimeoutHandle);
@ -77,7 +77,10 @@
await saveTasks(tasks);
}, 5000);
}
$: { tasks; autosave(); };
$: {
tasks;
autosave();
}
function saveLocally() {
saveToLocalDisk("tasks.json", tasksToString(tasks));
@ -197,6 +200,20 @@
}));
tasks.tasks = [...tasks.tasks, ...newDescriptors];
}
function hideSelection() {
for (let t of graph.getCurrentSelection()) {
t.hidden = true;
}
tasks = tasks;
}
function showSelection() {
for (let t of graph.getCurrentSelection()) {
t.hidden = false;
}
tasks = tasks;
}
</script>
<style>
@ -297,7 +314,8 @@
bind:this={graph}
{nodeDraggingEnabled}
on:openTask={openTaskDetailEditorButton}
{showHiddenEdges} />
{showHiddenEdges}
showHidden={true} />
<div class="container">
<div class="topLeftHint">
@ -358,6 +376,10 @@
title={isLoggedIn() ? 'Nahraje všechny úlohy z jednoho ročníku, které tu ještě nejsou' : 'Je nutné být přihlášený a na stránce v KSP template.'}>Nahrát
celý ročník</button>
</div>
<div>
<button on:click={hideSelection}>Skrýt výběr</button>
<button on:click={showSelection}>Zobrazit výběr</button>
</div>
</div>
<div class="taskDetails">

10
frontend/src/Graph.svelte

@ -7,6 +7,7 @@
import { createEdges } from "./tasks";
import { taskStatuses } from "./task-status-cache";
import { grabAssignment } from "./ksp-task-grabber";
import TaskDetailEditor from "./TaskDetailEditor.svelte";
export let tasks: TasksFile;
export let nodeDraggingEnabled: boolean = false;
@ -14,6 +15,7 @@ import { grabAssignment } from "./ksp-task-grabber";
export let showHiddenEdges: boolean = false;
export let selection: Set<TaskDescriptor> = new Set();
export let showCenterMarker: boolean = false;
export let showHidden: boolean = false;
let hoveredTask: null | TaskDescriptor = null;
@ -185,6 +187,10 @@ import { grabAssignment } from "./ksp-task-grabber";
window.addEventListener("mouseup", dragStop, { once: true });
}
export function getCurrentSelection(): Set<TaskDescriptor> {
return selection;
}
onMount(() => {
setupZoom();
});
@ -308,9 +314,12 @@ import { grabAssignment } from "./ksp-task-grabber";
stroke-dasharray="15,15" />
{/if}
{#each edges as edge}
{#if showHidden || !(edge?.dependee?.hidden || edge?.dependency?.hidden)}
<GraphEdge {edge} showLabelEdge={showHiddenEdges} />
{/if}
{/each}
{#each nodes as task}
{#if showHidden || !(task.hidden ?? false) }
<GraphNode
{task}
on:mousedown={dragStart}
@ -320,6 +329,7 @@ import { grabAssignment } from "./ksp-task-grabber";
on:hoveringChange={nodeHover(task)}
status={$taskStatuses.get(task.id)}
on:dblclick={nodeDoubleClick(task)} />
{/if}
{/each}
{#if hoveredTask != null && hoveredTask.type == "open-data" }
<g class="tooltip">

22
frontend/src/GraphEdge.svelte

@ -6,10 +6,24 @@
$: [x1, y1] = edge?.dependency?.position ?? [0, 0];
$: [x2, y2] = edge?.dependee?.position ?? [0, 0];
$: dx = x1 - x2
$: dy = y1 - y2
$: dx = x1 - x2;
$: dy = y1 - y2;
$: hidden =
(edge?.dependee?.hidden ?? false) ||
(edge?.dependency?.hidden ?? false);
</script>
{#if showLabelEdge || (edge?.dependee?.type ?? null) != "label"}
<path d="m {x2} {y2+0} c 0 0 {dx} {dy-40} {dx} {dy-20}" style="fill:none; stroke: #aaa; stroke-width: 3px" />
<style>
.hidden {
stroke-opacity: 0.5;
fill-opacity: 0.5;
}
</style>
{#if showLabelEdge || (edge?.dependee?.type ?? null) != 'label'}
<path
d="m {x2} {y2 + 0} c 0 0 {dx} {dy - 40} {dx} {dy - 20}"
style="fill:none; stroke: #aaa; stroke-width: 3px"
class={hidden ? 'hidden' : ''} />
{/if}

27
frontend/src/GraphNode.svelte

@ -41,8 +41,7 @@
// every time after that
$: {
task.title;
if (text_element)
ensureTextFits();
if (text_element) ensureTextFits();
}
function dblclick(e: MouseEvent) {
@ -56,6 +55,12 @@
g:not(.label) {
cursor: pointer;
}
.hidden {
fill-opacity: 0.5;
stroke-opacity: 0.5;
}
.label {
font-size: 1.5em;
fill: gainsboro;
@ -81,7 +86,8 @@
fill: green; /* TODO */
}
.selected > ellipse, .selected > rect {
.selected > ellipse,
.selected > rect {
stroke-width: 4px;
stroke: red;
}
@ -94,7 +100,10 @@
on:mouseleave={leave}
on:click={click}
on:dblclick={dblclick}
class="{status == null ? '' : status.solved ? 'solved' : status.submitted ? 'submitted' : ''} {task.type} {selected ? 'selected' : 'notSelected'}">
class="{status == null ? '' : status.solved ? 'solved' : status.submitted ? 'submitted' : ''}
{task.type}
{selected ? 'selected' : 'notSelected'}
{task.hidden ?? false ? 'hidden' : ''}">
{#if task.type == 'label'}
{#if selected}
<ellipse rx={ellipse_rx} ry={20} {cx} {cy} />
@ -109,8 +118,14 @@
{task.title == null ? task.id : task.title}
</text>
{:else}
{#if task.type == "text"}
<rect class="taskNode" x={cx-ellipse_rx} y={cy-20} height={40} width={2*ellipse_rx} rx={3} />
{#if task.type == 'text'}
<rect
class="taskNode"
x={cx - ellipse_rx}
y={cy - 20}
height={40}
width={2 * ellipse_rx}
rx={3} />
{:else}
<ellipse class="taskNode" rx={ellipse_rx} ry={20} {cx} {cy} />
{/if}

1
frontend/src/tasks.ts

@ -6,6 +6,7 @@ export type TaskDescriptor = {
requires: string[]
comment?: string
position?: [number, number]
hidden?: boolean
} & (
{
type: "open-data",

426
tasks.json

File diff suppressed because it is too large