From e5d5f2c3459309e1076b980c0521d556b9e13509 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 18 Jul 2022 17:54:49 +0200
Subject: [PATCH] Removed old js-menus
---
src/display/components/neighbors.js | 227 ----------------------------
src/display/components/nodeinfo.js | 177 ----------------------
src/display/display.tsx | 6 +-
3 files changed, 2 insertions(+), 408 deletions(-)
delete mode 100644 src/display/components/neighbors.js
delete mode 100644 src/display/components/nodeinfo.js
diff --git a/src/display/components/neighbors.js b/src/display/components/neighbors.js
deleted file mode 100644
index e9a5ecb..0000000
--- a/src/display/components/neighbors.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import * as Helpers from "../helpers";
-import { createHTMLElement } from "../helpers";
-
-export { NodeNeighborOverlay };
-
-/**
- * Displays an overlay showing the neighbors of a node divided by the link type
- * that connects them.
- */
-class NodeNeighborOverlay {
- constructor(graph, parentNode, infoOverlay, type = "link") {
- this.graph = graph;
- this.parentNode = parentNode;
- this.infoOverlay = infoOverlay;
- this.type = type;
- this.contentTab = null;
-
- this.tabContentPages = {}; // Page content - links to other nodes
- this.tabNavHandles = {}; // Top-level handles of the content pages
- this.tabPageVisibility = {}; // Visibility of each content page
- }
-
- /**
- * Creates the visible elements of the overlay.
- * Must be called after the graph has been initialized.
- */
- create() {
- const bottomContainerDiv = Helpers.createDiv(
- "neighbor-container",
- this.parentNode
- );
- bottomContainerDiv.classList.add("fancy-scrollbar");
- // Create the collapsible of the entire menu
- const coll = Helpers.createDiv("button", bottomContainerDiv);
- coll.className = "neighbor-collapsible-title";
- coll.innerText = "Verwandte Inhalte";
- coll.style.textAlign = "center";
-
- // Div that displays the information about all the chapters
- const contentTab = Helpers.createDiv(
- "neighbor-content-tabs",
- bottomContainerDiv
- );
- //contentTab.classList.add("neighbor-collapsible-wrapper");
- this.contentTab = contentTab;
-
- coll.addEventListener("click", () => {
- if (contentTab.style.height === "0px") {
- contentTab.style.height = "auto";
- } else {
- contentTab.style.height = "0px";
- }
- });
-
- const colors =
- this.type === "link"
- ? this.graph.edgeColors
- : this.graph.nodeColors;
- for (const [cls, color] of Object.entries(colors)) {
- this.createCollapsibleTab(contentTab, cls, color);
- }
- }
-
- /**
- * Creates a new collapsible tab and content area for a specific node.
- * @param {HTMLElement} parent Parent of the new tab.
- * @param {string} name Name of the node type class
- * @param {string} color Color of the node type class
- */
- createCollapsibleTab(parent, name, color) {
- // Creating the collapsible tabs for the different chapters
- const collTab = Helpers.createDiv("button", parent);
- collTab.className = "neighbor-collapsible-section";
- collTab.innerText = name;
- collTab.type = name;
- this.tabNavHandles[name] = collTab;
- this.tabPageVisibility[name] = false;
-
- const collTabMarker = Helpers.createDiv(
- "neighbor-collapsible-marker-div",
- collTab
- );
- collTabMarker.style.borderColor = color;
- collTabMarker.style.backgroundColor = color;
-
- const openMarkerTabs = Helpers.createDiv(
- "neighbor-tab-open-status-marker",
- collTab
- );
- openMarkerTabs.innerText = "+";
- collTab.marker = openMarkerTabs;
-
- // Content of the different tabs
- const collTabContent = Helpers.createDiv(
- "neighbor-content-linksection",
- parent
- );
- collTabContent.classList.add("neighbor-collapsible-wrapper");
- collTabContent.type = name;
-
- const list = createHTMLElement("ul", collTabContent);
- list.classList.add("neighbor-content-list");
-
- collTabContent.list = list;
- collTabContent.marker = openMarkerTabs;
- this.tabContentPages[name] = collTabContent;
-
- collTab.addEventListener("click", () => {
- this.toggleSectionVisibility(name);
- });
- }
-
- /**
- * Toggles the visibility of a specific section
- * @param {string} name Id of the section
- */
- toggleSectionVisibility(name) {
- if (this.tabPageVisibility[name]) {
- this.collapseSection(name);
- } else {
- this.expandSection(name);
- }
- }
-
- /**
- * Collapses the content area of a specific section
- * @param {string} name Id of the section
- */
- collapseSection(name) {
- this.tabPageVisibility[name] = false;
- const section = this.tabContentPages[name];
- section.style.height = "0px";
- section.marker.innerText = "+";
- }
-
- /**
- * Expands the content area of a specific section
- * @param {string} name Id of the section
- */
- expandSection(name) {
- this.tabPageVisibility[name] = true;
- const section = this.tabContentPages[name];
- section.style.height = `${section.scrollHeight}px`;
- section.marker.innerText = "-";
- }
-
- /**
- * Clears the images from all tab content pages and makes the object
- * invisible.
- */
- clearTabContentPages() {
- for (const page of Object.values(this.tabContentPages)) {
- page.list.replaceChildren();
- }
- }
-
- /**
- * Creates a new list element for the given target node.
- * @param target
- * @returns {HTMLLIElement}
- */
- createReference(target) {
- const linkDiv = document.createElement("li");
- const linkText = document.createTextNode(target.name);
- linkDiv.className = "neighbor-content-link";
- linkDiv.appendChild(linkText);
- linkDiv.addEventListener("click", () => {
- this.graph.focusOnNode(target);
- this.infoOverlay.updateInfoOverlay(target);
- });
- return linkDiv;
- }
-
- /**
- * Updates all tabs to have content matching the given node.
- * @param node
- */
- updateTabs(node) {
- this.clearTabContentPages();
- for (const link of node.links) {
- const target = link.source === node ? link.target : link.source;
- const reference = this.createReference(target);
- if (this.type === "link") {
- this.tabContentPages[link.type].list.appendChild(reference);
- } else {
- this.tabContentPages[target.type].list.appendChild(reference);
- }
- }
- this.updatePageVisibility();
- }
-
- /**
- * Updates the content page visibility on node change.
- * Hides all empty content pages.
- */
- updatePageVisibility() {
- for (const page of Object.values(this.tabContentPages)) {
- if (!page.list.hasChildNodes()) {
- this.tabNavHandles[page.type].style.display = "none";
- page.style.display = "none";
- } else {
- this.tabNavHandles[page.type].style.display = "flex";
- page.style.display = "flex";
- if (this.tabPageVisibility[page.type]) {
- page.style.height = `${page.list.scrollHeight}px`;
- }
- }
- }
- }
-
- /**
- * Toggle the visibility for a category
- * @param {string} type The name of the category that should be toggled
- */
- toggleCategory(type) {
- const page = this.tabContentPages[type];
- const handle = this.tabNavHandles[type];
-
- if (handle.style.display === "flex") {
- page.style.display = "none";
- handle.style.display = "none";
- } else if (page.list.hasChildNodes()) {
- page.style.display = "flex";
- handle.style.display = "flex";
- }
- }
-}
diff --git a/src/display/components/nodeinfo.js b/src/display/components/nodeinfo.js
deleted file mode 100644
index 40c02e4..0000000
--- a/src/display/components/nodeinfo.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import jQuery from "jquery";
-
-import { NodeNeighborOverlay } from "./neighbors";
-import * as Helpers from "../helpers";
-import * as Config from "../../config";
-
-export { NodeInfoOverlay };
-
-/**
- * An overlay displaying the information which is connected with each node.
- */
-class NodeInfoOverlay {
- /**
- * Constructs a new info overlay for the given graph object.
- * @param {Graph} graph
- */
- constructor(graph) {
- this.graph = graph;
- this.bottomMenu = null;
- }
-
- /**
- * Creates the visible elements of the overlay.
- * Must be called after the graph has been initialized.
- */
- create() {
- const overlayDiv = this.createOverlayMainDiv();
- this.createOverlayElements(overlayDiv);
- this.bottomMenu = new NodeNeighborOverlay(
- this.graph,
- overlayDiv,
- this,
- "node"
- );
- this.bottomMenu.create();
-
- jQuery("#infoOverlayCloseButton").click(function () {
- jQuery("#infoOverlay").slideUp("fast");
- });
- jQuery("#infoOverlay").hide();
- }
-
- createOverlayMainDiv() {
- const sceneNode = Helpers.getCanvasDivNode();
- const overlayNode = document.createElement("div");
- overlayNode.id = "infoOverlay";
- overlayNode.className = "detail-view";
- sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
- return overlayNode;
- }
-
- createOverlayElements(overlayNode) {
- Helpers.createDiv("close-button", overlayNode, {
- id: "infoOverlayCloseButton",
- innerHTML: "<p>✖</p>",
- });
-
- const infoArea = Helpers.createDiv(
- "detail-view-info-area",
- overlayNode
- );
- infoArea.classList.add("fancy-scrollbar");
-
- const topArea = Helpers.createDiv("detail-view-top-area", infoArea);
-
- Helpers.createHTMLElement("img", topArea, {
- id: "infoOverlayImage",
- src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
- className: "detail-view-image",
- });
-
- Helpers.createHTMLElement("h2", topArea, {
- id: "infoOverlayHeadline",
- innerText: "Default Text",
- className: "detail-view-headline",
- });
-
- const infoImageArea = Helpers.createDiv(
- "detail-view-media-area",
- infoArea
- );
- Helpers.createHTMLElement("img", infoImageArea, {
- id: "infoAreaInfoImage",
- src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
- });
-
- const textArea = Helpers.createDiv("detail-view-text-area", infoArea);
- Helpers.createHTMLElement("p", textArea, {
- id: "infoOverlayDescription",
- innerHTML: "Default Text",
- });
-
- const videoDiv = Helpers.createDiv("detail-view-media-area", infoArea);
-
- const video = document.createElement("video");
- video.id = "infoOverlayVideo";
- video.controls = true;
- video.className = "detail-view-video";
- videoDiv.appendChild(video);
-
- const linkArea = Helpers.createDiv("detail-view-link-area", infoArea, {
- id: "infoAreaLinkArea",
- });
- Helpers.createHTMLElement("h6", linkArea, {
- innerText: "Weiterführende Links",
- });
- Helpers.createHTMLElement("ul", linkArea, { id: "infoAreaLinkList" });
-
- Helpers.createDiv("detail-view-spacer", infoArea);
- }
-
- /**
- * Updates the overlay (and its children) to display information on the given node.
- * @param node
- */
- updateInfoOverlay(node) {
- const headline = jQuery("#infoOverlayHeadline");
- headline.text(node.name);
- if ("image" in node) {
- headline.css("margin-top", "0px");
- //jQuery("#infoOverlayImage").removeClass("hidden-tab");
- const overlayImage = jQuery("#infoOverlayImage");
- overlayImage.show();
- overlayImage.attr("src", node.image);
- } else {
- headline.css("margin-top", "25px");
- jQuery("#infoOverlayImage").hide();
- // jQuery("#infoOverlayImage").attr(
- // "src",
- // Config.PLUGIN_PATH + "datasets/images/default.jpg"
- // );
- }
-
- const infoImage = jQuery("#infoAreaInfoImage");
- if ("infoImage" in node) {
- infoImage.show();
- infoImage.attr("src", node.infoImage);
- } else {
- infoImage.hide();
- }
-
- if ("description" in node) {
- jQuery("#infoOverlayDescription").html(node.description);
- //jQuery("#infoOverlayDescription").text(node.description);
- } else {
- jQuery("#infoOverlayDescription").html("Default Text");
- }
-
- if ("video" in node) {
- jQuery("#infoOverlayVideo").show();
- jQuery("#infoOverlayVideo").attr("src", node.video);
- } else {
- jQuery("#infoOverlayVideo").hide();
- }
-
- const linkList = jQuery("#infoAreaLinkList");
- const linkArea = jQuery("#infoAreaLinkArea");
- if ("infoLinks" in node) {
- linkArea.show();
- linkList.empty();
- for (const link of node["infoLinks"]) {
- const listEntry = Helpers.createHTMLElement("li", linkList[0]);
- Helpers.createHTMLElement("a", listEntry, {
- rel: "noopener noreferrer",
- target: "_blank",
- href: link,
- innerText: link,
- });
- }
- } else {
- linkArea.hide();
- }
-
- this.bottomMenu.updateTabs(node);
- jQuery("#infoOverlay").slideDown("fast");
- }
-}
diff --git a/src/display/display.tsx b/src/display/display.tsx
index 911aa87..bf0ed0d 100644
--- a/src/display/display.tsx
+++ b/src/display/display.tsx
@@ -1,12 +1,11 @@
-import { NodeInfoOverlay } from "./components/nodeinfo";
-
import React from "react";
import screenfull from "screenfull";
+import PropTypes, { InferType } from "prop-types";
+
import { GraphNode, GraphRenderer } from "./renderer";
import * as Helpers from "./helpers";
import Graph, { NodeData } from "./graph";
import { loadGraphJson } from "../datasets";
-import PropTypes, { InferType } from "prop-types";
import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
class Display extends React.Component<
@@ -16,7 +15,6 @@ class Display extends React.Component<
props: InferType<typeof Display.propTypes>;
state: InferType<typeof Display.stateTypes>;
- infoOverlay: NodeInfoOverlay;
fullscreenRef: React.RefObject<HTMLDivElement>;
rendererRef: React.RefObject<GraphRenderer>;
--
GitLab