diff --git a/dataset.js b/dataset.js
index 7a348bf07cb76511930d35ea5c925932e54c98ec..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/dataset.js
+++ b/dataset.js
@@ -1 +0,0 @@
-const PLUGIN_PATH = "http://localhost/2021/aud_worpress/wp-content/plugins/knowledge-space-wp-plugin/";
\ No newline at end of file
diff --git a/display/graph.js b/display/graph.js
index 7730aea3bc160acd23464769c473c04672c1c08b..0ae8cc5c3fb13ca148f6935b4918071c9a9e424b 100644
--- a/display/graph.js
+++ b/display/graph.js
@@ -393,7 +393,15 @@ function createFullScreenButton() {
}
const dataUrl = Config.PLUGIN_PATH + "datasets/aud1.json";
-const G = new Graph(dataUrl);
-const linkoverlay = new LinkSelectionOverlay(G);
-const infooverlay = new NodeInfoOverlay(G);
-G.infooverlay = infooverlay;
+var G;
+var linkoverlay;
+var infooverlay;
+
+// Only execute, if corresponding dom is present
+if (document.getElementById("3d-graph") !== null) {
+ G = new Graph(dataUrl);
+ linkoverlay = new LinkSelectionOverlay(G);
+ infooverlay = new NodeInfoOverlay(G);
+ G.infooverlay = infooverlay;
+}
+
diff --git a/editor/editor.php b/editor/editor.php
index 79f24536eec8f6347a451231fcfd09a14f6e8789..a6be08e6a42cfce83d9b91ca4143007be3e0bcf7 100644
--- a/editor/editor.php
+++ b/editor/editor.php
@@ -1,7 +1,4 @@
-<div id="ks-editor">
- <script src="https://unpkg.com/force-graph"></script>
- <!--<script src="../../dist/force-graph.js"></script>-->
-
+<div id="ks-editor"> <!--The id "ks-editor" indicates, that the javascript associated with this should automatically be executed-->
<h1>Interface</h1>
<div id="2d-graph"></div>
<section id="toolbar"></section>
diff --git a/editor/js/display.js b/editor/js/display.js
index 5c2446ca1cd8efdb606b125d83289fdb730c354f..44064e74f2618177014dcefdf9cf0f99b29ac424 100644
--- a/editor/js/display.js
+++ b/editor/js/display.js
@@ -1,3 +1,8 @@
+import jQuery from "jquery";
+import { PLUGIN_PATH } from "../../config";
+import * as Graph from "./graph";
+import { graph } from "./editor";
+
const ID_TOOLBAR = "#toolbar";
const ID_SELECTEDITEM = "#selected-item";
const ID_SELECTED_PARAMS = "#selected-params";
@@ -11,7 +16,7 @@ const TOOL_ICON_SRC = PLUGIN_PATH + "editor/images/tools/";
const TOOL_ICON_FORMAT = ".png";
const TOOL_SELECTED_CLASS = "selected";
-class Display {
+export default class Display {
constructor(tools) {
this.tools = Object.values(tools);
this.previousTool = undefined;
@@ -61,11 +66,11 @@ class Display {
var paramsDOM = jQuery(ID_SELECTED_PARAMS);
paramsDOM.empty();
- var params = NODE_PARAMS;
+ var params = Graph.NODE_PARAMS;
if (item === undefined) {
params = [];
} else if (item.link) {
- params = LINK_PARAMS;
+ params = Graph.LINK_PARAMS;
}
params.forEach((param) => {
@@ -74,9 +79,9 @@ class Display {
DOM_LIST_ITEM +
">" +
param +
- ' <textarea>' +
+ " <textarea>" +
(item[param] === undefined ? "" : item[param]) +
- '</textarea></' +
+ "</textarea></" +
DOM_LIST_ITEM +
">"
);
@@ -86,17 +91,27 @@ class Display {
var sources = [];
var targets = [];
if (item !== undefined && item.node) {
- var nodes = graph.data[GRAPH_NODES];
+ var nodes = graph.data[Graph.GRAPH_NODES];
for (var i = 0; i < nodes.length; i++) {
- if (graph.existsLink(nodes[i][NODE_ID], item[NODE_ID])) {
+ if (
+ graph.existsLink(
+ nodes[i][Graph.NODE_ID],
+ item[Graph.NODE_ID]
+ )
+ ) {
sources.push(nodes[i]);
- } else if (graph.existsLink(item[NODE_ID], nodes[i][NODE_ID])) {
+ } else if (
+ graph.existsLink(
+ item[Graph.NODE_ID],
+ nodes[i][Graph.NODE_ID]
+ )
+ ) {
targets.push(nodes[i]);
}
}
} else if (item !== undefined && item.link) {
- sources.push(item[LINK_SOURCE]);
- targets.push(item[LINK_TARGET]);
+ sources.push(item[Graph.LINK_SOURCE]);
+ targets.push(item[Graph.LINK_TARGET]);
}
this.fillDomList(ID_SELECTED_SOURCES, sources, this.graphItemRenderer);
@@ -132,12 +147,12 @@ class Display {
}
if (item.node) {
- return item[NODE_LABEL] + " [" + item[NODE_ID] + "]";
+ return item[Graph.NODE_LABEL] + " [" + item[Graph.NODE_ID] + "]";
} else if (item.link) {
return (
- Display.toStr(item[LINK_SOURCE]) +
+ Display.toStr(item[Graph.LINK_SOURCE]) +
" <-> " +
- Display.toStr(item[LINK_TARGET])
+ Display.toStr(item[Graph.LINK_TARGET])
);
} else {
return "UNDEFINED";
diff --git a/editor/js/editor.js b/editor/js/editor.js
index cc24322161303aded4172cccdaf0f864da3928b7..4ed02600787948df6032b10f1c8515438199a9e9 100644
--- a/editor/js/editor.js
+++ b/editor/js/editor.js
@@ -1,37 +1,38 @@
-var state;
-var graph;
+import { State } from "./state";
+import * as Graph from "./graph";
+import ForceGraph from "force-graph";
+
+
+export var state;
+export var graph;
var graphObj;
window.onload = function () {
- fetch(JSON_CONFIG)
+ // Only execute, if corresponding dom is present
+ if (document.getElementById("ks-editor") === null) {
+ return;
+ }
+
+ document.onkeydown = (e) => state.onKeyDown(e);
+ document.onkeyup = (e) => state.onKeyUp(e);
+
+ fetch(Graph.JSON_CONFIG)
.then((r) => {
return r.json();
})
.then((graphConfig) => {
state = new State();
- graph = new Graph(graphConfig);
+ graph = new Graph.Graph(graphConfig);
load();
// Deactivate physics after a short delay
setTimeout(() => {
graph.stopPhysics();
graph.storeCurrentData("Physics stopped");
- }, STOP_PHYSICS_DELAY);
+ }, Graph.STOP_PHYSICS_DELAY);
});
};
-document.onkeydown = (e) => state.onKeyDown(e);
-document.onkeyup = (e) => state.onKeyUp(e);
-
-function downloadJson() {
- // TODO: Clean up
- // source: https://stackoverflow.com/a/42883108/7376120
- var jsonBlob = new Blob([JSON.stringify(getOnlygraph.data())], {
- type: "application/json;charset=utf-8",
- });
- var link = window.URL.createObjectURL(jsonBlob);
- window.location = link;
-}
function extractPositions(event) {
return {
@@ -48,8 +49,8 @@ function load() {
.height(600)
.width(width)
.graphData(graph.data)
- .nodeLabel(NODE_LABEL)
- .nodeAutoColorBy(NODE_GROUP)
+ .nodeLabel(Graph.NODE_LABEL)
+ .nodeAutoColorBy(Graph.NODE_GROUP)
.onNodeClick((node) => state.onNodeClick(node))
.autoPauseRedraw(false) // keep redrawing after engine has stopped
.linkWidth((link) => state.linkWidth(link))
diff --git a/editor/js/graph.js b/editor/js/graph.js
index cefc9a4b0b6c956a97ce3bdd7ffb90ec14408c66..85c0b05db89f009633c563807b4d9cb64594302c 100644
--- a/editor/js/graph.js
+++ b/editor/js/graph.js
@@ -1,30 +1,33 @@
-const NODE_LABEL = "name";
-const NODE_ID = "id";
-const NODE_GROUP = "group";
-const NODE_DESCRIPTION = "description";
-const NODE_IMAGE = "image";
+import ManagedData from "./manageddata";
+import { PLUGIN_PATH } from "../../config";
-const LINK_SOURCE = "source";
-const LINK_TARGET = "target";
-const LINK_TYPE = "type";
-const LINK_PARTICLE_COUNT = 4;
+export const NODE_LABEL = "name";
+export const NODE_ID = "id";
+export const NODE_GROUP = "group";
+export const NODE_DESCRIPTION = "description";
+export const NODE_IMAGE = "image";
-const GRAPH_NODES = "nodes";
-const GRAPH_LINKS = "links";
+export const LINK_SOURCE = "source";
+export const LINK_TARGET = "target";
+export const LINK_TYPE = "type";
+export const LINK_PARTICLE_COUNT = 4;
-const IMAGE_SIZE = 12;
-const IMAGE_SRC = PLUGIN_PATH + "datasets/images/";
+export const GRAPH_NODES = "nodes";
+export const GRAPH_LINKS = "links";
-const LINK_PARAMS = [LINK_TYPE];
-const NODE_PARAMS = [NODE_ID, NODE_LABEL, NODE_IMAGE, NODE_DESCRIPTION];
-const LINK_SIM_PARAMS = ["index"];
-const NODE_SIM_PARAMS = ["index", "x", "y", "vx", "vy", "fx", "fy"]; // Based on https://github.com/d3/d3-force#simulation_nodes
+export const IMAGE_SIZE = 12;
+export const IMAGE_SRC = PLUGIN_PATH + "datasets/images/";
-const JSON_CONFIG = PLUGIN_PATH + "datasets/aud1.json";
+export const LINK_PARAMS = [LINK_TYPE];
+export const NODE_PARAMS = [NODE_ID, NODE_LABEL, NODE_IMAGE, NODE_DESCRIPTION];
+export const LINK_SIM_PARAMS = ["index"];
+export const NODE_SIM_PARAMS = ["index", "x", "y", "vx", "vy", "fx", "fy"]; // Based on https://github.com/d3/d3-force#simulation_nodes
-const STOP_PHYSICS_DELAY = 5000; // ms
+export const JSON_CONFIG = PLUGIN_PATH + "datasets/aud1.json";
-class Graph extends ManagedData {
+export const STOP_PHYSICS_DELAY = 5000; // ms
+
+export class Graph extends ManagedData {
constructor(data) {
super(Graph.addIdentifiers(data));
@@ -163,11 +166,15 @@ class Graph extends ManagedData {
cleanData[GRAPH_NODES] = [];
data[GRAPH_LINKS].forEach((link) =>
- cleanData[GRAPH_LINKS].push(this.getCleanLink(link, simulationParameters))
+ cleanData[GRAPH_LINKS].push(
+ this.getCleanLink(link, simulationParameters)
+ )
);
data[GRAPH_NODES].forEach((node) =>
- cleanData[GRAPH_NODES].push(this.getCleanNode(node, simulationParameters))
+ cleanData[GRAPH_NODES].push(
+ this.getCleanNode(node, simulationParameters)
+ )
);
return cleanData;
diff --git a/editor/js/manageddata.js b/editor/js/manageddata.js
index d97d0d23889104c49ea805ff2997fcf0524be40f..170ccc4c02bd3cb55219effc6501374090cd118c 100644
--- a/editor/js/manageddata.js
+++ b/editor/js/manageddata.js
@@ -1,4 +1,4 @@
-class ManagedData {
+export default class ManagedData {
constructor(data) {
this.data = data;
this.history = [];
diff --git a/editor/js/state.js b/editor/js/state.js
index 5f6cdfa386b265abf518ccba0b2f566cf2669bf8..112ab2c087cc457d6d4e455654ff2a730fdb0cc7 100644
--- a/editor/js/state.js
+++ b/editor/js/state.js
@@ -1,4 +1,16 @@
-const TOOLS = {
+import Tool from "./tools/tool";
+import UndoTool from "./tools/undotool";
+import RedoTool from "./tools/redotool";
+import SelectTool from "./tools/selecttool";
+import CollectTool from "./tools/collecttool";
+import DeleteTool from "./tools/deletetool";
+import AddNodeTool from "./tools/addnodetool";
+import ConnectTool from "./tools/connecttool";
+import { graph } from "./editor";
+import Display from "./display";
+import * as Graph from "./graph";
+
+export const TOOLS = {
undo: new UndoTool("undo"),
redo: new RedoTool("redo"),
select: new SelectTool("select"),
@@ -8,13 +20,13 @@ const TOOLS = {
connect: new ConnectTool("connect"),
};
-const CONTEXT = {
+export const CONTEXT = {
node: "node",
link: "link",
mixed: "mixed",
};
-class State extends Tool {
+export class State extends Tool {
constructor() {
super("State");
@@ -122,17 +134,17 @@ class State extends Tool {
}
// Draw image
- if (node[NODE_IMAGE] !== undefined) {
- var path = IMAGE_SRC + node[NODE_IMAGE];
+ if (node[Graph.NODE_IMAGE] !== undefined) {
+ var path = Graph.IMAGE_SRC + node[Graph.NODE_IMAGE];
var img = new Image();
img.src = path;
ctx.drawImage(
img,
- node.x - IMAGE_SIZE / 2,
- node.y - IMAGE_SIZE / 2,
- IMAGE_SIZE,
- IMAGE_SIZE
+ node.x - Graph.IMAGE_SIZE / 2,
+ node.y - Graph.IMAGE_SIZE / 2,
+ Graph.IMAGE_SIZE,
+ Graph.IMAGE_SIZE
);
}
@@ -148,10 +160,10 @@ class State extends Tool {
ctx.fillStyle = color;
ctx.fillRect(
- node.x - IMAGE_SIZE / 2,
- node.y - IMAGE_SIZE / 2,
- IMAGE_SIZE,
- IMAGE_SIZE
+ node.x - Graph.IMAGE_SIZE / 2,
+ node.y - Graph.IMAGE_SIZE / 2,
+ Graph.IMAGE_SIZE,
+ Graph.IMAGE_SIZE
); // draw square as pointer trap
}
@@ -192,7 +204,7 @@ class State extends Tool {
return toolValue;
}
- return this.isLinkHighlighted(link) ? LINK_PARTICLE_COUNT : 0;
+ return this.isLinkHighlighted(link) ? Graph.LINK_PARTICLE_COUNT : 0;
}
onBackgroundClick(event, positions) {
@@ -208,7 +220,7 @@ class State extends Tool {
isLinkHighlighted(link) {
return (
this.selectedItem === link ||
- graph.isLinkOnNode(link, state.selectedItem)
+ graph.isLinkOnNode(link, this.selectedItem)
);
}
}
diff --git a/editor/js/tools/addnodetool.js b/editor/js/tools/addnodetool.js
index c72c189d8ac795d2ab22be6553476e07dc359a76..52a74c9d73fd52084b543e8ef5c9fcf6fddceba7 100644
--- a/editor/js/tools/addnodetool.js
+++ b/editor/js/tools/addnodetool.js
@@ -1,4 +1,7 @@
-class AddNodeTool extends Tool {
+import Tool from "./tool";
+import { graph, state } from "../editor";
+
+export default class AddNodeTool extends Tool {
constructor(key) {
super("Add node", "addnode", key);
}
@@ -10,7 +13,7 @@ class AddNodeTool extends Tool {
node.fx = positions.graph.x;
node.fy = positions.graph.y;
- var node = graph.addNode(node);
+ node = graph.addNode(node);
if (node === undefined) {
console.error("Couldn't add new node");
diff --git a/editor/js/tools/collecttool.js b/editor/js/tools/collecttool.js
index fa2ab96c0371bcccf9f1202d30920c93820832d7..472163a61dafbdb1ba6f34ab6aeddde8bdb6dd5a 100644
--- a/editor/js/tools/collecttool.js
+++ b/editor/js/tools/collecttool.js
@@ -1,4 +1,8 @@
-class CollectTool extends Tool {
+import Tool from "./tool";
+import { state } from "../editor";
+import { CONTEXT } from "../state";
+
+export default class CollectTool extends Tool {
constructor(key) {
super("Collect", "collect", key);
}
@@ -34,4 +38,4 @@ class CollectTool extends Tool {
state.setTool(state.previousTool);
}
}
-}
\ No newline at end of file
+}
diff --git a/editor/js/tools/connecttool.js b/editor/js/tools/connecttool.js
index cd47b504f0ed047920382266d6deb7d6c15d769a..5fb9de144545ec2e6d2940a7833e832ad2884243 100644
--- a/editor/js/tools/connecttool.js
+++ b/editor/js/tools/connecttool.js
@@ -1,6 +1,10 @@
+import Tool from "./tool";
+import { graph, state } from "../editor";
+import * as Graph from "../graph";
+
const KEEP_SOURCE_KEY_ID = 17;
-class ConnectTool extends Tool {
+export default class ConnectTool extends Tool {
constructor(key) {
super("Connect two nodes", "connect", key);
this.keepSource = false;
@@ -8,13 +12,19 @@ class ConnectTool extends Tool {
onNodeClick(node) {
// Is a first node selected?
- if (state.selectedItem === undefined || state.selectedItem.node === false) {
+ if (
+ state.selectedItem === undefined ||
+ state.selectedItem.node === false
+ ) {
state.setSelectedItem(node);
return;
}
// Add new link
- var link = graph.addLink(state.selectedItem[NODE_ID], node[NODE_ID]);
+ var link = graph.addLink(
+ state.selectedItem[Graph.NODE_ID],
+ node[Graph.NODE_ID]
+ );
if (link === undefined) {
console.error("Could not create new link");
@@ -43,4 +53,4 @@ class ConnectTool extends Tool {
this.keepSource = false;
}
}
-}
\ No newline at end of file
+}
diff --git a/editor/js/tools/deletetool.js b/editor/js/tools/deletetool.js
index 35110df55b173e77ffa172fd710974f81388f3b4..64a3cf41bacc02492bfd5246ee44a639ee5420e0 100644
--- a/editor/js/tools/deletetool.js
+++ b/editor/js/tools/deletetool.js
@@ -1,13 +1,20 @@
-class DeleteTool extends Tool {
+import Tool from "./tool";
+import { graph } from "../editor";
+import * as Graph from "../graph";
+
+export default class DeleteTool extends Tool {
constructor(key) {
super("Delete", "delete", key);
}
onNodeClick(node) {
- graph.deleteNode(node[NODE_ID]);
+ graph.deleteNode(node[Graph.NODE_ID]);
}
onLinkClick(link) {
- graph.deleteLink(link[LINK_SOURCE][NODE_ID], link[LINK_TARGET][NODE_ID]);
+ graph.deleteLink(
+ link[Graph.LINK_SOURCE][Graph.NODE_ID],
+ link[Graph.LINK_TARGET][Graph.NODE_ID]
+ );
}
-}
\ No newline at end of file
+}
diff --git a/editor/js/tools/redotool.js b/editor/js/tools/redotool.js
index 2cbe00db033248a0496bf370e3b9879fc0661a8a..1334b04ee37fc6aa6705ad76a0cb7dcd776a7d6b 100644
--- a/editor/js/tools/redotool.js
+++ b/editor/js/tools/redotool.js
@@ -1,4 +1,7 @@
-class RedoTool extends Tool {
+import Tool from "./tool";
+import { graph, state } from "../editor";
+
+export default class RedoTool extends Tool {
constructor(key) {
super("Redo", "redo", key);
}
diff --git a/editor/js/tools/selecttool.js b/editor/js/tools/selecttool.js
index 24b518f1c77515666039d381ecab15d3fe06c731..921263e667f5530c35c5501645a0fe6345de31bf 100644
--- a/editor/js/tools/selecttool.js
+++ b/editor/js/tools/selecttool.js
@@ -1,4 +1,8 @@
-class SelectTool extends Tool {
+import Tool from "./tool";
+import { state } from "../editor";
+import { TOOLS } from "../state";
+
+export default class SelectTool extends Tool {
constructor(key) {
super("Select", "select", key);
}
@@ -20,4 +24,4 @@ class SelectTool extends Tool {
state.setTool(TOOLS.collect);
}
}
-}
\ No newline at end of file
+}
diff --git a/editor/js/tools/tool.js b/editor/js/tools/tool.js
index 76b9ea6bc427a080e76f0425b7fb4294170185fd..8b437840f2b8b537cae7cddf92f8c13fdce8926d 100644
--- a/editor/js/tools/tool.js
+++ b/editor/js/tools/tool.js
@@ -1,4 +1,4 @@
-class Tool {
+export default class Tool {
constructor(name, icon, key) {
this.name = name;
this.icon = icon;
@@ -94,9 +94,7 @@ class Tool {
onBackgroundClick(event, positions) {
if (this.warnings) {
- console.warn(
- 'Method "onBackgroundClick" not implemented.'
- );
+ console.warn('Method "onBackgroundClick" not implemented.');
}
}
}
diff --git a/editor/js/tools/undotool.js b/editor/js/tools/undotool.js
index 98af6eb1042da701f02a8f6b14559a87ec2ecb0c..f1a48dfc3de8b902127e523a47c5112e41695dd0 100644
--- a/editor/js/tools/undotool.js
+++ b/editor/js/tools/undotool.js
@@ -1,10 +1,13 @@
-class UndoTool extends Tool {
+import Tool from "./tool";
+import { graph, state } from "../editor";
+
+export default class UndoTool extends Tool {
constructor(key) {
super("Undo", "undo", key);
}
-
+
onToolActivate() {
graph.undo();
- state.setTool(state.previousTool)
+ state.setTool(state.previousTool);
}
-}
\ No newline at end of file
+}
diff --git a/index.js b/index.js
index b9e98c56c957c974ebd8daa1b3d843db081de6cc..14f550c7c68c603cefd631fc7c5524de100d3544 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,4 @@
import "./kg-style.css";
import "./display/graph";
+import "./editor/js/editor";
diff --git a/knowledge-space.php b/knowledge-space.php
index a7299cf60d5d75c863c248ce54d332476a88ba90..fd3d3351a848143874fdf97f3d23919fcc240353 100644
--- a/knowledge-space.php
+++ b/knowledge-space.php
@@ -11,86 +11,47 @@ $GLOBALS['build'] = 'debug';
function ks_add_graph(): string
{
- $div = '<div id="3d-graph"></div>';
+ $div = '<div id="3d-graph"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
$plugin_dir = plugin_dir_url(__FILE__);
//$dataset = $plugin_dir.'datasets/miserables.json';
$variables = "<script>
var plugin_path = '$plugin_dir';
</script>";
- $script_path = $plugin_dir.'build'.DIRECTORY_SEPARATOR.$GLOBALS['build'].DIRECTORY_SEPARATOR.'graph.js';
+ $script_path = $plugin_dir . 'build' . DIRECTORY_SEPARATOR . $GLOBALS['build'] . DIRECTORY_SEPARATOR . 'graph.js';
$script = "<script src='$script_path'></script>";
//wp_enqueue_script('kg-script', $script_path);
- return $div . $variables. $script;
+ return $div . $variables . $script;
}
function ks_add_editor()
{
ks_add_editor_dependencies();
- require_once(__DIR__.'/editor/editor.php');
-}
-
-function ks_add_editor_dependencies()
-{
- wp_enqueue_script('jquery'); // Should be wp_enqueue_script('jquery'), but doesn't work
-
- ks_enqueue_script('dataset.js');
- ks_enqueue_script('editor/js/manageddata.js');
- ks_enqueue_script('editor/js/graph.js', ["manageddata"]);
- ks_enqueue_script('editor/js/tools/tool.js');
- ks_enqueue_script('editor/js/tools/undotool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/redotool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/selecttool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/collecttool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/deletetool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/addnodetool.js', ["tool"]);
- ks_enqueue_script('editor/js/tools/connecttool.js', ["tool"]);
- ks_enqueue_script('editor/js/display.js', []);
- ks_enqueue_script('editor/js/state.js', ["tool", "display"]);
- ks_enqueue_script('editor/js/editor.js', ["state", "graph", "dataset"]);
-
- ks_enqueue_style('editor/css/editor.css');
-}
-function ks_enqueue_script($relative_path, $dependencies = array())
-{
- $prefix = "ks";
- $type = "script";
- $script_name = end(explode("/", $relative_path));
- $script_name = explode(".", $script_name)[0];
-
- for ($i = 0; $i < sizeof($dependencies); $i++) {
- $dependencies[$i] = $prefix . "-" . $dependencies[$i] . "-" . $type;
- }
-
- // Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ a comment from Andrija Naglic
- // $file_version = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . $relative_path));
+ $plugin_dir = plugin_dir_url(__FILE__);
+ echo "<script>
+ var plugin_path = '$plugin_dir';
+ </script>";
- wp_enqueue_script($prefix . "-" . $script_name . "-" . $type, plugins_url($relative_path, __FILE__), $dependencies, false);
+ require_once(__DIR__ . '/editor/editor.php');
}
-function ks_enqueue_style($relative_path, $dependencies = array())
+function ks_add_editor_dependencies()
{
- $prefix = "ks";
- $type = "style";
- $style_name = end(explode("/", $relative_path));
- $style_name = explode(".", $style_name)[0];
-
- for ($i = 0; $i < sizeof($dependencies); $i++) {
- $dependencies[$i] = $prefix . "-" . $dependencies[$i] . "-" . $type;
- }
+ $script_path = 'build' . DIRECTORY_SEPARATOR . $GLOBALS['build'] . DIRECTORY_SEPARATOR . 'graph.js';
- // Source: https://developer.wordpress.org/reference/functions/wp_enqueue_script/ a comment from Andrija Naglic
- $file_version = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . $relative_path));
+ wp_enqueue_script('jquery');
+ wp_enqueue_script("ks-editor-js", plugins_url($script_path, __FILE__), array(), false);
- wp_enqueue_style($prefix . "-" . $style_name . "-" . $type, plugins_url($relative_path, __FILE__), $dependencies, $file_version);
+ $style_file_version = date("ymd-Gis", filemtime(plugin_dir_path(__FILE__) . "editor/css/editor.css"));
+ wp_enqueue_style("ks-editor-css", plugins_url("editor/css/editor.css", __FILE__), array(), $style_file_version);
}
function kg_load_css()
{
$plugin_dir = plugin_dir_url(__FILE__);
- wp_enqueue_style('kg-style', $plugin_dir.'kg-style.css');
+ wp_enqueue_style('kg-style', $plugin_dir . 'kg-style.css');
}
add_action('wp_enqueue_scripts', 'kg_load_css');
diff --git a/package.json b/package.json
index 016ab5ee92e72c049f99c8888977723b141b6f43..d855e30209554b32d05b3227a48d8a35ce56c70a 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,11 @@
"distDir": "build/release/",
"sourceMap": false,
"optimize": true,
- "includeNodeModules": ["three", "3d-force-graph"],
+ "includeNodeModules": [
+ "three",
+ "3d-force-graph",
+ "force-graph"
+ ],
"isLibrary": true,
"context": "node"
}
@@ -45,6 +49,7 @@
},
"dependencies": {
"3d-force-graph": "^1.70.5",
+ "force-graph": "^1.42.2",
"jquery": "^3.6.0",
"three": "^0.131.2"
}