implemented user management

Backend/services.js

@@ -2584,6 +2584,93 @@ app.get('/lazy', (req, res) => {
 });
 */
 
+app.get('/add', async function(req, res) { 
+	var ret_obj = [];
+	let node = {};
+	var nid = req.query.nodeid;
+	if(nid.includes('ns')){
+		var ix = nid.search(';')
+		var a = nid.slice(0,ix);
+		var b = nid.slice(ix);
+		console.log(a);
+		console.log(b);
+	}else{
+		console.log(nid);
+	}
+
+	
+	//console.log(nid);
+	
+	
+	res.json([{success: true}]);
+});
+
+app.get('/del', async function(req, res) { 
+	var ret_obj = [];
+	let node = {};
+	var nid = req.query.nodeid;
+	if(nid.includes('ns')){
+		var ix = nid.search(';')
+		var a = nid.slice(0,ix);
+		var b = nid.slice(ix);
+		console.log(a);
+		console.log(b);
+	}else{
+		console.log(nid);
+	}
+
+	
+	//console.log(nid);
+	
+	
+	res.json([{success: true}]);
+});
+
+app.get('/login', async function(req, res) { 
+	try{
+		var user = req.query.user;
+		var pw = req.query.pw;
+		console.log('User '+user+' has pw '+pw)
+		var command = "SELECT password FROM user WHERE user='"+user+"';";
+		var ret = await pool.query(command);
+		console.log(ret[0])
+		if(ret[0].length === 0){
+			res.json([{success: true, result: 'good', login: 'NOK'}]);
+		}else{
+			if(ret[0][0].password == pw){
+				res.json([{success: true, result: 'good', login: 'OK'}]);
+			}else{
+				res.json([{success: true, result: 'good', login: 'NOK'}]);
+				
+			}
+		}
+	}catch(er){
+		res.json([{success: false, error: er, login:'NOK'}]);
+	}
+});
+
+app.get('/register', async function(req, res) { 
+	try{
+		var user = req.query.user;
+		var pw = req.query.pw;
+		if(user === "" || pw === ""){
+			res.json([{success: true, error: er, register:'NOK'}]);
+		}
+		console.log('User '+user+' has pw '+pw)
+		var command = "SELECT password FROM user WHERE user='"+user+"';";
+		var ret = await pool.query(command);
+		if(ret[0].length === 0){
+			var command = "INSERT INTO user(user, password) VALUES ('"+user+"','"+pw+"');";
+			var ret = await pool.query(command);
+			res.json([{success: true, result: 'good', register: 'OK'}]);
+		}else{
+			res.json([{success: true, result: 'good', register: 'NOK'}]);
+		}
+	}catch(er){
+		res.json([{success: false, error: er, register:'NOK'}]);
+	}
+});
+
 
 app.get('/lazy', async function(req, res) { 
 	var ret_obj = [];

index.html

@@ -13,6 +13,7 @@
         <div class="container-fluid">
             <a href="#" class="navbar-brand">
 			<h1>Frontend Modeler</h1>
+			<p id="welcome">Welcome</p>
 			</a>
 			<img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
         </div>
@@ -23,6 +24,10 @@
 		   <input type="file" class="custom-file-select" id="projectselect" aria-describedby="projectselect">
 		  <button type="button" id = "Open" class="btn btn btn-outline-primary">Open Project</button>
 		  </div>
+		  <div class="mb-3">
+			  <label for="exampleFormControlTextarea1" class="form-label">New Project Name</label>
+			  <textarea class="form-control" id="exampleFormControlTextarea1" rows="1"></textarea>
+			</div>
 			<button type="button" id="New" class="btn btn btn-outline-primary">New Project</button>
 			<button type="button" id="SaveAs" class="btn btn btn-outline-primary">Save as</button>
 		</div>
@@ -723,8 +728,47 @@
 					}
 				},
 				'contextmenu' : {
-					'items' : {addNode: {label: 'Add node'}, delNode: {label: 'Delete node'}}
-				},
+					'items' : {
+						addNode: {
+							label: 'Add node', 
+							action: function (node) { 
+									var txt = node.reference.prevObject.selector;
+									console.log(txt);
+									$.ajax({
+										url: 'http://127.0.0.1:3001/add',
+										type: 'GET',
+										data: {nodeid: txt},
+										error: function() {
+											console.log("Error");
+											},
+										success: function(data) {
+											console.log('success add');
+											},
+										type: 'GET'
+										});
+									}
+							}, 
+						delNode: {
+							label: 'Delete node', 
+							action: function (node) { 
+									var txt = node.reference.prevObject.selector;
+									console.log(txt);
+									$.ajax({
+										url: 'http://127.0.0.1:3001/del',
+										type: 'GET',
+										data: {nodeid: txt},
+										error: function() {
+											console.log("Error");
+											},
+										success: function(data) {
+											console.log('success del');
+											},
+										type: 'GET'
+										});
+									}
+							}
+						},
+					},
 				'plugins' : [ 'contextmenu', 'types'],
 				'types': {
 					'Variable': {
@@ -756,5 +800,19 @@
 		
 		
 	  </script>
+	 
+	  <script>
+		window.onload = function () {
+			var url = document.location.href,
+				params = url.split('?')[1].split('&'),
+				data = {}, tmp;
+			for (var i = 0, l = params.length; i < l; i++) {
+				 tmp = params[i].split('=');
+				 data[tmp[0]] = tmp[1];
+			}
+			document.getElementById("welcome").innerHTML = "Welcome "+data.name;
+		}
+</script> 
+	  
 </body>
 </html>

js/myEvents.js

@@ -13,15 +13,31 @@ $( document ).ready(function() {
 		});
 });
 
+$('#New').click(function () {
+	console.log('New project');
+	var ul = 'http://127.0.0.1:3001/';
+	$.ajax({
+			url: ul+'new_project',
+			type: 'GET',  // http method
+			success: function (resp, status, xhr) {
+				console.log('Success');
+			},
+			error: function (errorMessage) {
+					console.log('Error: ' + errorMessage);
+				}
+		});		
+	});
+
 
 $('#jstree_demo_div').on("open_node.jstree", function (e, data) {
 	console.log(data.node);
 	});
 
 
+
 $('#jstree_demo_div').on("select_node.jstree", function (e, data) {
 	console.log(data);
-	var x = data.node.data.idx;
+	var x = data.node.data.nsindex;
 	var nid = data.node.id;
 	var nc = data.node.data.nodeclass;
 	$('#instancenodeid').val(data.node.id);
@@ -30,36 +46,27 @@ $('#jstree_demo_div').on("select_node.jstree", function (e, data) {
 	$('#instancenamespace').val(data.node.data.nsindex +":"+data.node.data.nsurl );
 	$('#instancedisplayname1').val("");
 	$('#instancedisplayname2').val(data.node.data.displayname);
-	$('#instancebrowsename2').val(data.node.data.browsename);
+	$('#instancebrowsename1').text(x);
+	$('#instancebrowsename2').val(":"+data.node.data.displayname);
 	
 	$('#instancenodeclass').val(nc);
 	if(nc == "Object"){
-		var ul = 'http://127.0.0.1:3001/look/'+x+'/'+nid+'/'+nc+'/';
 
-		//$('#instancetypedefinition').val(data.node.data.);
-	
+		//$('#instancetypedefinition').val(data.node.data.eventnotifier);
 		
-		$.ajax({
-			url: ul+'eventnotifier',
-			type: 'GET',  // http method
-			success: function (resp, status, xhr) {
-				var plc = "";
-				switch(resp.result){
-					case 0: plc = "0 (None)"; break;
-					case 1: plc = "1 (EventNotifierSubscribeToEvents)"; break;
-					case 4: plc = "4 (EventNotifierHistoryRead)"; break;
-					case 5: plc = "5 (EventNotifierSubscribeToEvents|EventNotifierHistoryRead)"; break;
-					case 8: plc = "8 (EventNotifierHistoryWrite)"; break;
-					case 9: plc = "9 (EventNotifierSubscribeToEvents|EventNotifierHistoryWrite)"; break;
-					case 12: plc = "12 (EventNotifierHistoryRead|EventNotifierHistoryWrite)"; break;
-					default: plc = "";
-				}
-				$('#instanceeventnotifier').attr('placeholder',plc);
-			},
-			error: function (jqXhr, textStatus, errorMessage) {
-					console.log('Error: ' + errorMessage);
-				}
-		});		
+		var plc = "";
+		switch(data.node.data.eventnotifier){
+			case 0: plc = "0 (None)"; break;
+			case 1: plc = "1 (EventNotifierSubscribeToEvents)"; break;
+			case 4: plc = "4 (EventNotifierHistoryRead)"; break;
+			case 5: plc = "5 (EventNotifierSubscribeToEvents|EventNotifierHistoryRead)"; break;
+			case 8: plc = "8 (EventNotifierHistoryWrite)"; break;
+			case 9: plc = "9 (EventNotifierSubscribeToEvents|EventNotifierHistoryWrite)"; break;
+			case 12: plc = "12 (EventNotifierHistoryRead|EventNotifierHistoryWrite)"; break;
+			default: plc = "";
+		}
+		$('#instanceeventnotifier').attr('placeholder',plc);
+				
 		console.log("obj enabled");
 		$('#objectattributesbutton').prop('disabled', false);
 		$('#collapseTwo1').collapse('hide');

login.html

@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"
+    <title></title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg bg-info">
+        <div class="container-fluid">
+            <a href="#" class="navbar-brand">
+			<h1>Frontend Modeler</h1>
+			</a>
+			<img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
+        </div>
+    </nav>
+	<div class="container-sm">
+	<br>
+	<form class="row g-3">
+	  <div class="col-md-6">
+		<label for="userlogin" class="form-label">User</label>
+		<input type="text" class="form-control" id="userlogin">
+	  </div>
+	  <div class="col-sm-6">
+		<label for="inputPassword0" class="form-label">Password</label>
+		<input type="password" class="form-control" id="pwlogin">
+	  </div>
+	  <div class="col-12">
+		<button type="button" id="login" class="btn btn-primary" >Login</button>
+	  </div>
+	  	<br>
+	 <div class="w-25 col-12">
+	  <div id="liveAlertPlaceholder0"></div></div>
+	</form>
+	</div>
+	<br>
+	<div class="container-sm">
+	<form class="row g-3">
+	  <div class="col-md-6">
+		<label for="userregister" class="form-label">User</label>
+		<input type="text" class="form-control" id="userregister">
+	  </div>
+	  <div class="col-sm-6">
+		<label for="inputPassword1" class="form-label">Password</label>
+		<input type="password" class="form-control" id="pwregister">
+	  </div>
+	  <div class="col-12">
+		<button type="button" id="register" class="btn btn-primary" >Register</button>
+	  </div>
+	  	  	<br>
+	 <div class="w-25 col-12">
+	  <div id="liveAlertPlaceholder1"></div></div>
+	</form>
+	</div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> 
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
+	<link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
+	<script src="./js/events_login.js"></script>
+	<script>
+        document.getElementById("login").addEventListener("click", redirectFunction);
+        function redirectFunction(){
+		var username = $('#userlogin').val();
+		var pwtxt = $('#pwlogin').val();
+			$.ajax({
+				url: 'http://127.0.0.1:3001/login',
+				type: 'GET',
+				data: {user:username , pw: pwtxt},
+				error: function() {
+					console.log("Error");
+					},
+				success: function(data) {
+					console.log(data[0].login);
+					if(data[0].login == "OK"){
+						var b = username;
+						url = "index.html?name=" + encodeURIComponent(b);"index.html?name=" + encodeURIComponent(b);
+						window.location.href = url;
+					}else{
+						const alertPlaceholder = document.getElementById("liveAlertPlaceholder0")
+						const wrapper = document.createElement('div')
+						wrapper.innerHTML = [
+							"<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
+							  "Error - Login not possible.",
+							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
+							"</div>"
+						].join("")
+						alertPlaceholder.append(wrapper)	
+						}
+					},
+				type: 'GET'
+				});
+
+        }
+    </script>
+	<script>
+        document.getElementById("register").addEventListener("click", redirectFunction);
+        function redirectFunction(){
+		var username = $('#userregister').val();
+		var pwtxt = $('#pwregister').val();
+			$.ajax({
+				url: 'http://127.0.0.1:3001/register',
+				type: 'GET',
+				data: {user:username , pw: pwtxt},
+				error: function() {
+					console.log("Error");
+					},
+				success: function(data) {
+					console.log(data[0].register);
+					const alertPlaceholder = document.getElementById("liveAlertPlaceholder1")
+					if(data[0].register == "OK"){
+						const wrapper = document.createElement('div')
+						wrapper.innerHTML = [
+							"<div class='alert alert-success alert-dismissible' role='alert'>",
+							  "Registration successful - please login.",
+							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
+							"</div>"
+						].join("")
+						alertPlaceholder.append(wrapper)
+					}else{
+						const wrapper = document.createElement('div')
+						wrapper.innerHTML = [
+							"<div class='alert alert-danger alert-dismissible fade show' role='alert'>",
+							   "Error - registration not successful.",
+							  "<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>",
+							"</div>"
+						].join("")
+						alertPlaceholder.append(wrapper)	
+						}
+					},
+				type: 'GET'
+				});
+
+        }
+    </script>
+
+</body>
+</html>

method.svg

@@ -0,0 +1,714 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333332 4.2333335"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="method.svg"
+   inkscape:export-filename="C:\Users\Diana Strutzenberger\obj_types.png"
+   inkscape:export-xdpi="109.24"
+   inkscape:export-ydpi="109.24"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     height="16px"
+     inkscape:zoom="23.033894"
+     inkscape:cx="13.610378"
+     inkscape:cy="1.5846213"
+     inkscape:window-width="2400"
+     inkscape:window-height="1271"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     inkscape:snap-nodes="true"
+     inkscape:snap-grids="true" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient31206">
+      <stop
+         style="stop-color:#6600ff;stop-opacity:1;"
+         offset="0"
+         id="stop31202" />
+      <stop
+         style="stop-color:#6600ff;stop-opacity:0;"
+         offset="1"
+         id="stop31204" />
+    </linearGradient>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Duochrome"
+       id="filter25377"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         id="feColorMatrix25357" />
+      <feFlood
+         flood-opacity="1"
+         flood-color="rgb(255,102,0)"
+         result="flood1"
+         id="feFlood25359" />
+      <feComposite
+         in2="colormatrix1"
+         operator="out"
+         result="composite1"
+         id="feComposite25361" />
+      <feFlood
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2"
+         id="feFlood25363" />
+      <feComposite
+         in2="colormatrix1"
+         result="composite2"
+         operator="in"
+         id="feComposite25365" />
+      <feComposite
+         in="composite2"
+         in2="composite1"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3"
+         id="feComposite25367" />
+      <feColorMatrix
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2"
+         id="feColorMatrix25369" />
+      <feComposite
+         in="colormatrix2"
+         in2="composite3"
+         operator="arithmetic"
+         k2="0"
+         result="composite4"
+         id="feComposite25371" />
+      <feBlend
+         in="composite4"
+         in2="composite3"
+         mode="normal"
+         result="blend"
+         id="feBlend25373" />
+      <feComposite
+         in2="SourceGraphic"
+         operator="in"
+         id="feComposite25375"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25397" />
+      <feColorMatrix
+         id="feColorMatrix25399"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25401"
+         flood-opacity="1"
+         flood-color="rgb(255,102,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25403"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25405"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25407"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25409"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25411"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25413"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25415"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25417"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25437" />
+      <feColorMatrix
+         id="feColorMatrix25439"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25441"
+         flood-opacity="1"
+         flood-color="rgb(255,102,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25443"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25445"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25447"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25449"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25451"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25453"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25455"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25457"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25517" />
+      <feColorMatrix
+         id="feColorMatrix25519"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25521"
+         flood-opacity="1"
+         flood-color="rgb(255,62,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25523"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25525"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25527"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25529"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25531"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25533"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25535"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25537"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25557" />
+      <feColorMatrix
+         id="feColorMatrix25559"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25561"
+         flood-opacity="1"
+         flood-color="rgb(255,62,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25563"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25565"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25567"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25569"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25571"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25573"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25575"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25577"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25597" />
+      <feColorMatrix
+         id="feColorMatrix25599"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25601"
+         flood-opacity="1"
+         flood-color="rgb(250,62,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25603"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25605"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25607"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25609"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25611"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25613"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25615"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25617"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25637" />
+      <feColorMatrix
+         id="feColorMatrix25639"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25641"
+         flood-opacity="1"
+         flood-color="rgb(250,62,0)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25643"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25645"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25647"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25649"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25651"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25653"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25655"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25657"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25677" />
+      <feColorMatrix
+         id="feColorMatrix25679"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood25681"
+         flood-opacity="1"
+         flood-color="rgb(250,62,17)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25683"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood25685"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite25687"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite25689"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix25691"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite25693"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend25695"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite25697"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix25997" />
+      <feColorMatrix
+         id="feColorMatrix25999"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood26001"
+         flood-opacity="1"
+         flood-color="rgb(231,39,27)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite26003"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood26005"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite26007"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite26009"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix26011"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite26013"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend26015"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite26017"
+         operator="in"
+         result="fbSourceGraphic" />
+      <feColorMatrix
+         result="fbSourceGraphicAlpha"
+         in="fbSourceGraphic"
+         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
+         id="feColorMatrix26037" />
+      <feColorMatrix
+         id="feColorMatrix26039"
+         type="luminanceToAlpha"
+         result="colormatrix1"
+         in="fbSourceGraphic" />
+      <feFlood
+         id="feFlood26041"
+         flood-opacity="1"
+         flood-color="rgb(231,39,27)"
+         result="flood1" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite26043"
+         operator="out"
+         result="composite1" />
+      <feFlood
+         id="feFlood26045"
+         flood-opacity="1"
+         flood-color="rgb(255,255,0)"
+         result="flood2" />
+      <feComposite
+         in2="colormatrix1"
+         id="feComposite26047"
+         result="composite2"
+         operator="in" />
+      <feComposite
+         in2="composite1"
+         id="feComposite26049"
+         in="composite2"
+         k2="1"
+         k3="1"
+         operator="arithmetic"
+         result="composite3" />
+      <feColorMatrix
+         id="feColorMatrix26051"
+         in="composite3"
+         type="matrix"
+         values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0 "
+         result="colormatrix2" />
+      <feComposite
+         in2="composite3"
+         id="feComposite26053"
+         in="colormatrix2"
+         operator="arithmetic"
+         k2="0"
+         result="composite4" />
+      <feBlend
+         in2="composite3"
+         id="feBlend26055"
+         in="composite4"
+         mode="normal"
+         result="blend" />
+      <feComposite
+         in2="fbSourceGraphic"
+         id="feComposite26057"
+         operator="in" />
+    </filter>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient31206"
+       id="radialGradient31208"
+       cx="2.1307821"
+       cy="2.130782"
+       fx="2.1307821"
+       fy="2.130782"
+       r="2.1192954"
+       gradientTransform="matrix(1,0,0,0.99457991,0,0.01154903)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.723;fill:url(#radialGradient31208);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.387001;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+       id="rect31200"
+       width="4.2385907"
+       height="4.2156172"
+       x="0.011486696"
+       y="0.022973392" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:3.52778px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="0.61379224"
+       y="3.4224081"
+       id="text1552"><tspan
+         sodipodi:role="line"
+         id="tspan1550"
+         style="font-size:3.52778px;stroke-width:0.264583"
+         x="0.61379224"
+         y="3.4224081">M</tspan></text>
+  </g>
+</svg>

object_instances.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333332 4.2333335"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="object_instances.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     height="16px"
+     inkscape:zoom="23.033894"
+     inkscape:cx="12.655263"
+     inkscape:cy="-4.449964"
+     inkscape:window-width="2400"
+     inkscape:window-height="1271"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient5390">
+      <stop
+         style="stop-color:#ff6600;stop-opacity:1;"
+         offset="0"
+         id="stop5386" />
+      <stop
+         style="stop-color:#ff6600;stop-opacity:0;"
+         offset="1"
+         id="stop5388" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient5390"
+       id="radialGradient5394"
+       cx="2.6163139"
+       cy="2.4567676"
+       fx="2.6163139"
+       fy="2.4567676"
+       r="0.66048497"
+       gradientTransform="matrix(3.0668965,-0.00341389,0.00360981,3.2428773,-5.8887229,-5.8385967)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:url(#radialGradient5394);fill-opacity:1;stroke-width:0.387296;stroke-linecap:round;stroke-miterlimit:10"
+       id="rect5362"
+       width="4.2041311"
+       height="4.2500777"
+       x="0.022973314"
+       y="-0.022973413" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:3.52778px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="0.75963783"
+       y="3.4321723"
+       id="text1552"><tspan
+         sodipodi:role="line"
+         id="tspan1550"
+         style="font-size:3.52778px;stroke-width:0.264583"
+         x="0.75963783"
+         y="3.4321723">O</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:'MV Boli';-inkscape-font-specification:'MV Boli';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="2.940594"
+       y="4.0548034"
+       id="text8200"><tspan
+         sodipodi:role="line"
+         id="tspan8198"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:'MV Boli';-inkscape-font-specification:'MV Boli';stroke-width:0.264583"
+         x="2.940594"
+         y="4.0548034">i</tspan></text>
+  </g>
+</svg>

variable_instances.svg

@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333332 4.2333335"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="variable_instances.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     units="px"
+     height="16px"
+     inkscape:zoom="23.033894"
+     inkscape:cx="12.655264"
+     inkscape:cy="-4.5584997"
+     inkscape:window-width="2400"
+     inkscape:window-height="1271"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient2712">
+      <stop
+         style="stop-color:#66ff00;stop-opacity:1;"
+         offset="0"
+         id="stop2708" />
+      <stop
+         style="stop-color:#66ff00;stop-opacity:0;"
+         offset="1"
+         id="stop2710" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2712"
+       id="radialGradient2714"
+       cx="2.1249733"
+       cy="2.1020654"
+       fx="2.1249733"
+       fy="2.1020654"
+       r="2.102"
+       gradientTransform="matrix(1,0,0,1.0109604,0,-0.02303958)"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:url(#radialGradient2714);fill-opacity:1;stroke-width:0.387296;stroke-linecap:round;stroke-miterlimit:10"
+       id="rect5362"
+       height="4.2500777"
+       x="0.022973314"
+       y="-0.022973413"
+       width="4.204" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:3.52778px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="0.75963783"
+       y="3.4321723"
+       id="text1552"><tspan
+         sodipodi:role="line"
+         id="tspan1550"
+         style="font-size:3.52778px;stroke-width:0.264583"
+         x="0.75963783"
+         y="3.4321723">V</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;line-height:1.25;font-family:'MV Boli';-inkscape-font-specification:'MV Boli';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       x="2.940594"
+       y="4.0548034"
+       id="text8200"><tspan
+         sodipodi:role="line"
+         id="tspan8198"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.82222px;font-family:'MV Boli';-inkscape-font-specification:'MV Boli';stroke-width:0.264583"
+         x="2.940594"
+         y="4.0548034">i</tspan></text>
+  </g>
+</svg>

variable_node.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="50mm"
+   height="50mm"
+   viewBox="0 0 50 50"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   sodipodi:docname="variable_node.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     height="50mm"
+     inkscape:zoom="2.8792368"
+     inkscape:cx="199.87936"
+     inkscape:cy="82.834451"
+     inkscape:window-width="2400"
+     inkscape:window-height="1271"
+     inkscape:window-x="2391"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="5.9043424"
+       y="-62.516567"
+       width="129.54822"
+       height="93.080222"
+       id="rect1915" />
+    <inkscape:path-effect
+       effect="bspline"
+       id="path-effect914"
+       is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#71c837;stroke:#000000;stroke-width:0.725227;stroke-linecap:round"
+       id="rect1075"
+       width="47.274776"
+       height="47.274773"
+       x="1.3626134"
+       y="1.3626134" />
+    <text
+       xml:space="preserve"
+       transform="matrix(1.1114327,0,0,1.1568754,3.0904487,73.63309)"
+       id="text1913"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1915);fill:#000000;fill-opacity:1;stroke:none"><tspan
+         x="5.9042969"
+         y="-27.125"
+         id="tspan4977">V</tspan></text>
+  </g>
+</svg>