Skip to content
Snippets Groups Projects
Commit 0832910a authored by Matthias Konitzny's avatar Matthias Konitzny :fire:
Browse files

Beginning to port the display to react/typescript.

parent d5fc0c8a
No related branches found
No related tags found
No related merge requests found
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
}, },
"rules": { "rules": {
"no-console": 0, "no-console": 0,
"no-unused-vars": ["error", { "vars": "all", "args": "none"}] "no-unused-vars": ["error", { "vars": "all", "args": "none"}],
"@typescript-eslint/no-var-requires": "warn"
} }
} }
node_modules node_modules
.parcel-cache .parcel-cache
build build
release
.vscode .vscode
...@@ -12,7 +12,7 @@ $GLOBALS['build'] = 'debug'; ...@@ -12,7 +12,7 @@ $GLOBALS['build'] = 'debug';
function ks_add_graph($atts = []): string function ks_add_graph($atts = []): string
{ {
$div = '<div id="3d-graph"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed $div = '<div id="knowledge-space-display"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
ks_load_styles("frontend.css"); ks_load_styles("frontend.css");
wp_enqueue_script("ks-runtime-js", plugins_url(get_script_path("runtime.js"), __FILE__), array('jquery'), false); wp_enqueue_script("ks-runtime-js", plugins_url(get_script_path("runtime.js"), __FILE__), array('jquery'), false);
......
import * as Helpers from "./helpers";
import * as Config from "../config";
import { FilterOverlay } from "./overlays/filteroverlay";
import { NodeInfoOverlay } from "./overlays/nodeinfo";
import Graph from "./graph";
import screenfull from "screenfull";
function loadComponents() {
filterOverlay.create();
infoOverlay.create();
// filterOverlay.filterChangedCallback = (cls) =>
// infoOverlay.bottomMenu.toggleTabVisibility(cls);
createFullScreenButton();
}
function createFullScreenButton() {
const sceneNode = Helpers.getCanvasDivNode();
const overlayNode = Helpers.createDiv("fullscreen-button", sceneNode, {
innerHTML: "<p>&#10530;</p>",
title: "Vollbild",
});
overlayNode.classList.add("no-select");
overlayNode.addEventListener("click", function () {
if (screenfull.isEnabled) {
screenfull.toggle(sceneNode);
G.resize();
} else {
console.log("No fullscreen mode available :(");
}
});
}
let G = null;
let filterOverlay = null;
let infoOverlay = null;
// Only execute, if corresponding dom is present
if (document.getElementById("3d-graph") !== null) {
G = new Graph(Config.SPACE, loadComponents);
filterOverlay = new FilterOverlay(G, "node");
infoOverlay = new NodeInfoOverlay(G);
G.infoOverlay = infoOverlay;
}
// import * as Helpers from "./helpers";
import * as Config from "../config";
import { FilterOverlay } from "./overlays/filteroverlay";
import { NodeInfoOverlay } from "./overlays/nodeinfo";
import Graph from "./graph";
// import screenfull from "screenfull";
import React from "react";
// function loadComponents() {
//
// }
//
// function createFullScreenButton() {
// const sceneNode = Helpers.getCanvasDivNode() as HTMLElement;
// const overlayNode = Helpers.createDiv("fullscreen-button", sceneNode, {
// innerHTML: "<p>&#10530;</p>",
// title: "Vollbild",
// });
// overlayNode.classList.add("no-select");
// overlayNode.addEventListener("click", function () {
// if (screenfull.isEnabled) {
// screenfull.toggle(sceneNode);
// G.resize();
// } else {
// console.log("No fullscreen mode available :(");
// }
// });
// }
class Display extends React.PureComponent {
G: Graph;
filterOverlay: FilterOverlay;
infoOverlay: NodeInfoOverlay;
componentDidMount() {
this.G = new Graph(Config.SPACE, this.loadGraphComponents.bind(this));
this.filterOverlay = new FilterOverlay(this.G, "node");
this.infoOverlay = new NodeInfoOverlay(this.G);
this.G.infoOverlay = this.infoOverlay;
}
loadGraphComponents() {
this.filterOverlay.create();
this.infoOverlay.create();
// filterOverlay.filterChangedCallback = (cls) =>
// infoOverlay.bottomMenu.toggleTabVisibility(cls);
// createFullScreenButton();
}
render() {
return <div id="3d-graph"></div>;
}
}
export default Display;
import "./display/display.css";
import "./display/display";
import React from "react";
import ReactDOM from "react-dom";
import "./display/display.css";
import "./display/display";
import Display from "./display/display";
ReactDOM.render(
<Display />,
document.getElementById("knowledge-space-display")
);
...@@ -8,7 +8,7 @@ const babelOptions = { ...@@ -8,7 +8,7 @@ const babelOptions = {
module.exports = { module.exports = {
entry: { entry: {
frontend: "./src/frontend.js", frontend: "./src/frontend.tsx",
backend: "./src/backend.js", backend: "./src/backend.js",
}, },
output: { output: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment