Initial graph class implementation

app/src/apps/Examinations/components/WrittenQuestion/styles.scss

@@ -0,0 +1,10 @@
+input {
+  height: 2rem;
+  width: 66rem;
+  text-indent: 10px;
+  border-style: solid;
+  border-radius: 0.6rem;
+  border-width: 0.1rem;
+  border-color: #c0c0c0;
+  margin: 1rem 0rem;
+}

app/src/apps/Graphs/Graph.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import * as d3 from "d3";
   import "./styles.scss";
+  import Graph from "./lib/Graph";
 
   let element;
 
@@ -13,6 +14,9 @@
     { source: 1, target: 2 },
   ];
 
+  // initial
+  let graph = new Graph(nodes, links);
+
   // TODO make this a component take width and height as props?
   const width = 800;
   const height = 600;
@@ -52,6 +56,11 @@
       let coordinates = d3.pointer(e, e.currentTarget);
       let newNode = { x: coordinates[0], y: coordinates[1], id: ++lastNodeId };
       nodes.push(newNode);
+
+      //test-1
+      graph.addNode(newNode);
+      console.log(graph.nodes);
+
       restart();
     }
   };
@@ -71,12 +80,24 @@
     });
 
     e.preventDefault();
+
+    //test-3
+    console.log(d);
+    graph.deleteNode(d);
+    console.log(graph.nodes, graph.links);
+
     restart();
   };
 
   const removeEdge = (e, d) => {
     links.splice(links.indexOf(d), 1);
     e.preventDefault();
+
+    //test-4
+    console.log(d);
+    graph.deleteEdge(d);
+    console.log(graph.links);
+
     restart();
   };
 
@@ -141,6 +162,10 @@
 
     let newLink = { source: mousedownNode, target: d };
     links.push(newLink);
+
+    //test-2
+    graph.addEdge(newLink);
+    console.log(graph.links);
   };
 
   const keydown = (e) => {

app/src/apps/Graphs/lib/Edge.js

@@ -1,3 +1,9 @@
-class Edge {}
+class Edge {
+  edge;
+
+  constructor(edge) {
+    this.edge = edge;
+  }
+}
 
 export { Edge as default };

app/src/apps/Graphs/lib/Graph.js

@@ -1,3 +1,37 @@
-class Graph {}
+import Vertex from "./Vertex";
+import Edge from "./Edge";
+
+class Graph {
+  nodes;
+  links;
+
+  constructor(nodes, links) {
+    this.nodes = [];
+    this.links = [];
+    nodes.forEach((n) => this.nodes.push(new Vertex(n)));
+    links.forEach((l) => this.links.push(new Edge(l)));
+  }
+
+  addNode(newNode) {
+    this.nodes.push(new Vertex(newNode));
+  }
+
+  addEdge(newEdge) {
+    this.links.push(new Edge(newEdge));
+  }
+
+  deleteNode(delNode) {
+    this.nodes = this.nodes.filter((n) => n.vertex.id != delNode.id);
+    this.links = this.links.filter(
+      (l) => l.edge.source.id != delNode.id && l.edge.target.id != delNode.id
+    );
+  }
+
+  deleteEdge(delEdge) {
+    this.links = this.links.filter(
+      (l) => l.edge.source != delEdge.source || l.edge.target != delEdge.target
+    );
+  }
+}
 
 export { Graph as default };

app/src/apps/Graphs/lib/Vertex.js

@@ -1,3 +1,9 @@
-class Vertex {}
+class Vertex {
+  vertex;
+
+  constructor(vertex) {
+    this.vertex = vertex;
+  }
+}
 
 export { Vertex as default };