From 748f4336a3cb4d8867d93c7987f6173e6a3cf71f Mon Sep 17 00:00:00 2001 From: Emile Date: Sun, 16 Jan 2022 12:08:42 +0100 Subject: [PATCH] feat: Switch between up and down graph in juggl view --- src/Codeblocks.ts | 18 ----- src/Components/JugglButton.svelte | 11 +++ src/Visualisations/Juggl.ts | 127 +++++++++++++++++++++++++----- styles.css | 4 + 4 files changed, 124 insertions(+), 36 deletions(-) create mode 100644 src/Components/JugglButton.svelte diff --git a/src/Codeblocks.ts b/src/Codeblocks.ts index 5f2b1bca..8c313cce 100644 --- a/src/Codeblocks.ts +++ b/src/Codeblocks.ts @@ -1,23 +1,6 @@ -import type { EdgeDefinition, NodeSingular } from "cytoscape"; -import type { MultiGraph } from "graphology"; -import { - DataStoreEvents, - getPlugin, - ICoreDataStore, - IJuggl, - IJugglPlugin, - IJugglSettings, - IJugglStores, - nodeDangling, - nodeFromFile, - VizId, -} from "juggl-api"; import { info } from "loglevel"; import { - Component, - Events, MarkdownPostProcessorContext, - MetadataCache, Notice, TFile, } from "obsidian"; @@ -26,7 +9,6 @@ import { CODEBLOCK_FIELDS, CODEBLOCK_TYPES, DIRECTIONS, - JUGGL_CB_DEFAULTS, } from "./constants"; import { createIndex } from "./Commands/CreateIndex"; import { diff --git a/src/Components/JugglButton.svelte b/src/Components/JugglButton.svelte new file mode 100644 index 00000000..0469dc16 --- /dev/null +++ b/src/Components/JugglButton.svelte @@ -0,0 +1,11 @@ + + + + \ No newline at end of file diff --git a/src/Visualisations/Juggl.ts b/src/Visualisations/Juggl.ts index ac0737a3..8cb3d207 100644 --- a/src/Visualisations/Juggl.ts +++ b/src/Visualisations/Juggl.ts @@ -14,6 +14,9 @@ import type {EdgeDefinition, NodeSingular} from "cytoscape"; import type BCPlugin from "../main"; import {JUGGL_CB_DEFAULTS} from "../constants"; const STORE_ID = "core"; +import JugglButton from "../Components/JugglButton.svelte"; +import {dfsAllPaths, getReflexiveClosure, getSubInDirs} from "../graphUtils"; +import {createIndex} from "../Commands/CreateIndex"; class BCStoreEvents extends Events implements DataStoreEvents {} @@ -146,6 +149,27 @@ export function createJuggl( } } +function zoomToSource(juggl: IJuggl, source: string) { + if (!juggl) { + return; + } + juggl.on("vizReady", (viz) => { + // After layout is done, center on source node + viz.one('layoutstop', e => { + const viz = e.cy; + const node = viz.$id(VizId.toId(source + ".md", STORE_ID)); + viz.animate({ + center: { + eles: node, + }, + duration: 250, + queue: false, + zoom: 1.7 + }); + }) + }); +} + export function createJugglTrail( plugin: BCPlugin, target: HTMLElement, @@ -153,27 +177,94 @@ export function createJugglTrail( source: string, args: IJugglSettings ) { + const toolbarDiv = document.createElement('div'); + toolbarDiv.addClass('cy-toolbar'); + target.appendChild(toolbarDiv); + + const sectDiv = document.createElement("div"); + sectDiv.addClass("cy-toolbar-section"); + toolbarDiv.appendChild(sectDiv) + let jugglUp: IJuggl = null; + let jugglDown: IJuggl = null; + + new JugglButton({ + target: sectDiv, + props: { + icon: "↑", + onClick: () => { + if (jugglUp) { + target.children[1].classList.remove("juggl-hide") + } + if (jugglDown) { + target.children[2].classList.add("juggl-hide"); + } + }, + disabled: false, + title: "Show up graph" + } + }); + new JugglButton({ + target: sectDiv, + props: { + icon: "↓", + onClick: () => { + if (jugglDown) { + target.children[2].classList.remove("juggl-hide"); + if (jugglUp) { + target.children[1].classList.add("juggl-hide"); + } + return; + } + const sub = getSubInDirs(plugin.mainG, 'down', 'up') + const closed = getReflexiveClosure(sub, plugin.settings.userHiers); + const subClosed = getSubInDirs(closed, 'down'); + + const allPaths = dfsAllPaths(subClosed, source); + const index = createIndex(allPaths, false); + const lines = index + .split("\n") + .map((line) => { + const pair = line.split("- "); + console.log({pair}) + return pair[1]; + }) + .filter((pair) => pair && pair !== ""); + let nodesS = new Set(lines); + nodesS.add(source); + const nodes = Array.from(nodesS).map(s => s + ".md"); + console.log({nodes}); + + jugglDown = createJuggl(plugin, target, nodes, args); + + if (jugglUp) { + target.children[1].addClass("juggl-hide") + } + zoomToSource(jugglDown, source); + }, + disabled: false, + title: "Show down graph" + } + }); + // new JugglButton({ + // target: sectDiv, + // props: { + // icon: "⛶", + // onClick: () => { + // console.log("here") + // target.children[1].addClass("juggl-full-screen") + // target.children[1].setAttr("style", ""); + // }, + // disabled: false, + // title: "Full height" + // } + // }); let nodes = Array.from( new Set(paths.reduce((prev, curr) => prev.concat(curr), [])) ); nodes.push(source); nodes = nodes.map((s) => s + ".md"); - const juggl = createJuggl(plugin, target, nodes, args); - if (juggl) { - juggl.on("vizReady", (viz) => { - // After layout is done, center on source node - viz.one('layoutstop', e => { - const viz = e.cy; - const node = viz.$id(VizId.toId(source + ".md", STORE_ID)); - viz.animate({ - center: { - eles: node, - }, - duration: 250, - queue: false, - zoom: 2 - }); - }) - }); - } + + jugglUp = createJuggl(plugin, target, nodes, args); + + zoomToSource(jugglUp, source); } \ No newline at end of file diff --git a/styles.css b/styles.css index 166ad06c..27722f4a 100644 --- a/styles.css +++ b/styles.css @@ -103,3 +103,7 @@ display: flex; flex-direction: column; } + +.juggl-hide { + display: none; +} \ No newline at end of file