From d769e0d7e43417abe5ef96886492f3ed0e1b9d56 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-bs.de>
Date: Wed, 31 Aug 2022 13:39:41 +0200
Subject: [PATCH] Fixed all npm errors
---
src/backend.js | 9 ---------
src/backend.tsx | 9 +++++++++
src/editor/js/components/editor.tsx | 12 ++++++------
src/editor/js/components/historynavigator.tsx | 2 +-
src/editor/js/components/spaceselect.tsx | 2 +-
src/editor/js/structures/manageddata.ts | 1 -
webpack.common.js | 2 +-
7 files changed, 18 insertions(+), 19 deletions(-)
delete mode 100644 src/backend.js
create mode 100644 src/backend.tsx
diff --git a/src/backend.js b/src/backend.js
deleted file mode 100644
index c901a6c..0000000
--- a/src/backend.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Editor } from "./editor/js/components/editor";
-
-import ReactDOM from "react-dom";
-import React from "react";
-
-ReactDOM.render(
- <Editor />,
- document.getElementById("knowledge-space-editor")
-);
diff --git a/src/backend.tsx b/src/backend.tsx
new file mode 100644
index 0000000..9b74e3d
--- /dev/null
+++ b/src/backend.tsx
@@ -0,0 +1,9 @@
+import { Editor } from "./editor/js/components/editor";
+import * as Config from "./config";
+
+import { createRoot } from "react-dom/client";
+import React from "react";
+
+const container = document.getElementById("knowledge-space-editor");
+const root = createRoot(container);
+root.render(<Editor spaceId={Config.SPACE} />);
diff --git a/src/editor/js/components/editor.tsx b/src/editor/js/components/editor.tsx
index 800d795..6895866 100644
--- a/src/editor/js/components/editor.tsx
+++ b/src/editor/js/components/editor.tsx
@@ -1,10 +1,10 @@
import React from "react";
import { Graph } from "../structures/graph/graph";
-import { loadGraphJson } from "../../../datasets";
+import { loadGraphJson } from "../../../common/datasets";
import { NodeDetails } from "./nodedetails";
import { SpaceSelect } from "./spaceselect";
import "./editor.css";
-import ReactForceGraph2d from "react-force-graph-2d";
+import { ForceGraph2D } from "react-force-graph";
import { Node } from "../structures/graph/node";
import { HistoryNavigator } from "./historynavigator";
import { GraphElement } from "../structures/graph/graphelement";
@@ -111,7 +111,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
graph: newGraph,
});
- this.state.graph.onChangeCallbacks.push(this.onHistoryChange);
+ newGraph.onChangeCallbacks.push(this.onHistoryChange);
// Subscribe to global events
document.onkeydown = this.handleKeyDown;
@@ -450,7 +450,7 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
<div id="content">
<div id="force-graph-renderer" ref={this.graphContainer}>
{this.state.graph ? (
- <ReactForceGraph2d
+ <ForceGraph2D
ref={this.renderer}
width={this.state.graphWidth}
graphData={{
@@ -466,11 +466,11 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
nodeCanvasObjectMode={() => "after"}
linkCanvasObject={this.handleLinkCanvasObject}
linkCanvasObjectMode={() => "replace"}
- nodeColor={(node) => (node as Node).type.color}
+ nodeColor={(node: Node) => node.type.color}
onNodeDrag={this.handleNodeDrag}
onNodeDragEnd={this.handleNodeDragEnd}
onLinkClick={this.handleLinkClick}
- onBackgroundClick={(event) =>
+ onBackgroundClick={(event: any) =>
this.handleBackgroundClick(
event,
this.extractPositions(event)
diff --git a/src/editor/js/components/historynavigator.tsx b/src/editor/js/components/historynavigator.tsx
index db96b6b..27d4432 100644
--- a/src/editor/js/components/historynavigator.tsx
+++ b/src/editor/js/components/historynavigator.tsx
@@ -1,5 +1,5 @@
import React, { ChangeEvent } from "react";
-import { saveGraphJson } from "../../../datasets";
+import { saveGraphJson } from "../../../common/datasets";
import ManagedData from "../structures/manageddata";
import "./historynavigator.css";
diff --git a/src/editor/js/components/spaceselect.tsx b/src/editor/js/components/spaceselect.tsx
index 80424ea..991fd24 100644
--- a/src/editor/js/components/spaceselect.tsx
+++ b/src/editor/js/components/spaceselect.tsx
@@ -1,6 +1,6 @@
import React, { ChangeEvent } from "react";
import { ReactNode } from "react";
-import { listAllSpaces } from "../../../datasets";
+import { listAllSpaces } from "../../../common/datasets";
import "./spaceselect.css";
type propTypes = {
diff --git a/src/editor/js/structures/manageddata.ts b/src/editor/js/structures/manageddata.ts
index d050c3c..65c6eeb 100644
--- a/src/editor/js/structures/manageddata.ts
+++ b/src/editor/js/structures/manageddata.ts
@@ -1,5 +1,4 @@
import { SerializableItem } from "./helper/serializableitem";
-import jQuery from "jquery";
const SAVE_BUTTON_ID = "div#ks-editor #toolbar-save";
diff --git a/webpack.common.js b/webpack.common.js
index 1bf65e0..43efa1b 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -10,7 +10,7 @@ const babelOptions = {
module.exports = {
entry: {
frontend: "./src/frontend.tsx",
- backend: "./src/backend.js",
+ backend: "./src/backend.tsx",
},
output: {
filename: "[name].js",
--
GitLab