From 282696eb9dec28b6feff462143fd7aba16732959 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Thu, 5 Aug 2021 11:28:31 +0200
Subject: [PATCH] A final set of minor code optimizations.
---
display/graph.js | 7 ++--
display/helpers.js | 27 +++++++++++++---
display/overlays/linkselection.js | 14 +++-----
display/overlays/nodeinfo.js | 54 ++++++++++++++-----------------
4 files changed, 54 insertions(+), 48 deletions(-)
diff --git a/display/graph.js b/display/graph.js
index b36a037..7cfc07b 100644
--- a/display/graph.js
+++ b/display/graph.js
@@ -319,11 +319,10 @@ class Graph {
const nodeDiv = document.createElement("div");
const group = new THREE.Group();
- const labelDiv = document.createElement("div");
- labelDiv.textContent = node.name;
+ const labelDiv = Helpers.createDiv("node-label", labelDiv, {
+ textContent: node.name,
+ });
labelDiv.style.color = node.color;
- labelDiv.className = "node-label";
- nodeDiv.appendChild(labelDiv);
const cssobj = new CSS3DSprite(nodeDiv);
cssobj.scale.set(0.25, 0.25, 0.25);
diff --git a/display/helpers.js b/display/helpers.js
index 68684d3..14178dd 100644
--- a/display/helpers.js
+++ b/display/helpers.js
@@ -1,4 +1,4 @@
-export { getWidth, getHeight, getCanvasDivNode, createDiv };
+export { getWidth, getHeight, getCanvasDivNode, createDiv, createHTMLElement };
/**
* Returns the maximum width that should be used if displaying elements inside of wordpress.
@@ -28,12 +28,29 @@ function getCanvasDivNode() {
/**
* Creates a new div element.
* @param {string} className Class name of the new div element.
- * @param {HTMLDivElement} parent Optional parent element of the new div.
+ * @param {HTMLElement} parent Optional parent element of the new div.
+ * @param opts Defines any additional values that should be set for the new div element.
* @returns {HTMLDivElement} The new div element.
*/
-function createDiv(className, parent) {
- const node = document.createElement("div");
- node.className = className;
+function createDiv(className, parent, opts = {}) {
+ opts["className"] = className;
+ return createHTMLElement("div", parent, opts);
+}
+
+/**
+ * Creates a new HTML element with specified options.
+ * @param {string} type Type of the new element (e.g. div or img)
+ * @param {HTMLElement} parent Optional parent for the new element.
+ * @param opts Optional parameters to attach to the new element.
+ * @returns {HTMLElement}
+ */
+function createHTMLElement(type, parent, opts = {}) {
+ const node = document.createElement(type);
+
+ for (const [key, value] of Object.entries(opts)) {
+ node[key] = value;
+ }
+
if (typeof parent !== "undefined") {
parent.appendChild(node);
}
diff --git a/display/overlays/linkselection.js b/display/overlays/linkselection.js
index 1a27d21..fb43bc9 100644
--- a/display/overlays/linkselection.js
+++ b/display/overlays/linkselection.js
@@ -24,7 +24,6 @@ class LinkSelectionOverlay {
const sceneNode = Helpers.getCanvasDivNode();
const overlayNode = document.createElement("div");
overlayNode.className = "link-overlay";
- //overlayNode.innerText = 'Hello there!';
sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
const linkClasses = this.graph.getLinkClasses();
@@ -36,18 +35,15 @@ class LinkSelectionOverlay {
);
for (const link of linkClasses) {
- const relation = document.createElement("div");
- relation.className = "relation";
- relation.edgeType = link;
- relation.innerHTML = "<p>" + link + "</p>";
+ const relation = Helpers.createDiv("relation", overlayNode, {
+ edgeType: link, // Attach the link type to the relation div object
+ innerHTML: "<p>" + link + "</p>",
+ });
jQuery(relation).click((event) => this.toggleLinkVisibility(event));
- overlayNode.appendChild(relation);
- const colorStrip = document.createElement("div");
- colorStrip.className = "rel-container";
+ const colorStrip = Helpers.createDiv("rel-container", relation);
colorStrip.style.backgroundColor = this.graph.edgeColors[link];
colorStrip.style.width = 10 * chars + "px";
- relation.appendChild(colorStrip);
}
}
diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js
index c6f1f21..1c97533 100644
--- a/display/overlays/nodeinfo.js
+++ b/display/overlays/nodeinfo.js
@@ -44,41 +44,35 @@ class NodeInfoOverlay {
}
createOverlayElements(overlayNode) {
- const close = document.createElement("div");
- close.innerHTML = "<p>✖</p>";
- close.id = "infoOverlayCloseButton";
- close.className = "close-button";
- overlayNode.appendChild(close);
-
- const infoArea = document.createElement("div");
- infoArea.className = "detail-view-info-area";
- overlayNode.appendChild(infoArea);
+ Helpers.createDiv("close-button", overlayNode, {
+ id: "infoOverlayCloseButton",
+ innerHTML: "<p>✖</p>",
+ });
- const topArea = document.createElement("div");
- topArea.className = "detail-view-top-area";
- infoArea.appendChild(topArea);
+ const infoArea = Helpers.createDiv(
+ "detail-view-info-area",
+ overlayNode
+ );
- const nodeImage = document.createElement("img");
- nodeImage.id = "infoOverlayImage";
- nodeImage.src = Config.PLUGIN_PATH + "datasets/images/default.jpg";
- nodeImage.className = "detail-view-image";
- topArea.appendChild(nodeImage);
+ const topArea = Helpers.createDiv("detail-view-top-area", infoArea);
- const headline = document.createElement("h2");
- headline.id = "infoOverlayHeadline";
- headline.innerText = "Default Text";
- headline.className = "detail-view-headline";
- topArea.appendChild(headline);
+ Helpers.createHTMLElement("img", topArea, {
+ id: "infoOverlayImage",
+ src: Config.PLUGIN_PATH + "datasets/images/default.jpg",
+ className: "detail-view-image",
+ });
- const textArea = document.createElement("div");
- textArea.className = "detail-view-text-area";
- infoArea.appendChild(textArea);
+ Helpers.createHTMLElement("h2", topArea, {
+ id: "infoOverlayHeadline",
+ innerText: "Default Text",
+ className: "detail-view-headline",
+ });
- const description = document.createElement("p");
- description.id = "infoOverlayDescription";
- description.innerText = "Default Text";
- description.setAttribute("overflow-y", "scroll");
- textArea.appendChild(description);
+ const textArea = Helpers.createDiv("detail-view-text-area", infoArea);
+ Helpers.createHTMLElement("p", textArea, {
+ id: "infoOverlayDescription",
+ innerText: "Default Text",
+ });
}
/**
--
GitLab