Add GUI buttons for: add node and export NodeStructure

.eslintrc.json

@@ -0,0 +1,114 @@
+{
+    "root": true,
+    "ignorePatterns": [
+      "projects/**/*"
+    ],
+    "plugins": [
+      "@typescript-eslint",
+      "prettier",
+      "simple-import-sort",
+      "import",
+      "jsdoc"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.ts"
+        ],
+        "parserOptions": {
+          "project": [
+            "tsconfig.json"
+          ],
+          "createDefaultProgram": true
+        },
+        "extends": [
+          "eslint:recommended",
+          "plugin:@typescript-eslint/eslint-recommended",
+          "plugin:@typescript-eslint/recommended"
+        ],
+        "rules": {
+          "@typescript-eslint/dot-notation": "off",
+          "@typescript-eslint/naming-convention": [
+            "error",
+            {
+              "selector": "default",
+              "format": [
+                "camelCase"
+              ],
+              "leadingUnderscore": "allow",
+              "trailingUnderscore": "allow"
+            },
+            {
+              "selector": "variable",
+              "format": [
+                "camelCase",
+                "UPPER_CASE"
+              ],
+              "leadingUnderscore": "allow",
+              "trailingUnderscore": "allow"
+            },
+            {
+              "selector": "typeLike",
+              "format": [
+                "PascalCase"
+              ]
+            },
+            {
+              "selector": "enumMember",
+              "format": [
+                "PascalCase"
+              ]
+            }
+          ],
+          "complexity": "error",
+          "max-len": [
+            "error",
+            {
+              "code": 140
+            }
+          ],
+          "no-new-wrappers": "error",
+          "no-throw-literal": "error",
+          "import/no-unresolved": "off",
+          "simple-import-sort/exports": "error",
+          "simple-import-sort/imports": [
+            "error",
+            {
+              "groups": [
+                [
+                  "^\\u0000"
+                ],
+                [
+                  "^@?(?!app)\\w"
+                ],
+                [
+                  "^@app?\\w"
+                ],
+                [
+                  "^[^.]"
+                ],
+                [
+                  "^\\."
+                ]
+              ]
+            }
+          ],
+          "sort-imports": "off",
+          "import/first": "error",
+          "import/newline-after-import": "error",
+          "import/no-duplicates": "error",
+          "@typescript-eslint/consistent-type-definitions": "error",
+          "no-shadow": "off",
+          "@typescript-eslint/no-shadow": "error",
+          "no-invalid-this": "off",
+          "@typescript-eslint/no-invalid-this": [
+            "warn"
+          ],
+          "@typescript-eslint/explicit-function-return-type": [
+            "error"
+          ]
+        }
+      }
+    ]
+  }
+

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

.prettierignore

@@ -0,0 +1,13 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/tmp
+/node_modules
+/nginx
+/.vscode
+/.idea
+/assets/fonts
+k8s/*
+package-lock.json
+package.json
+yarn.lock

.prettierrc copy

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 140,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "editor.formatOnSave": true
+}

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:9000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+    "workbench.list.multiSelectModifier": "alt",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "[dockerfile]": {
+      "editor.defaultFormatter": "ms-azuretools.vscode-docker"
+    },
+    "[typescript]": {
+      "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[html]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+  }
+

README.md

@@ -14,3 +14,12 @@ It relies on Raphael for handling SVG and animations.
 
 For Docs, Examples, and everything else see:
 http://fperucic.github.io/treant-js
+
+
+Compile:
+
+npx webpack --config webpack.config.js
+
+Dev-server:
+
+npx webpack serve --open

Treant-gui.js

@@ -0,0 +1,128 @@
+;( function() {
+	// init options begin
+	var options = {
+		selectedElBackgroundColor: "grey"
+	};
+	// init options end
+	// init defaults values begin
+	var treantJs = null, selectedEl = null, selectedNodeTree = null
+	, treantGui;
+	// init defaults values end
+	// callbacks begin
+	var selectFunc = function(nodeEl){
+	  if (selectedEl != null){
+		  selectedEl.css("background-color", "");
+	  }	  
+	  var nodeName = $(nodeEl).find(".node-name");
+	  nodeName.css("background-color", options.selectedElBackgroundColor);
+	  selectedEl = nodeName;
+	};	
+	var addNodeFun = function(){
+		var newNodeText = $("#addNodeText").val();
+		treantJs.tree.addNode(selectedNodeTree, { text: { name: newNodeText } });
+		$('#modalWin').dialog( "close" );
+	}	
+	// callbacks end
+	// GUI buttons begin
+	var buttons = [{
+			id: 'addBtn',
+			text: 'add',
+			callback: function(el){
+				if (selectedEl != null){
+					var nodeText = $(selectedEl).text()
+					, tree = treantJs.tree.getNodeDb().db;														
+					for(var key in tree){
+						var nodeTree = tree[key];
+						if(nodeTree.text.name == nodeText){
+							selectedNodeTree = nodeTree;
+							$('#modalWin').dialog( "open" );
+							break;
+						}						
+					}					
+				}
+			}
+		}/*,{
+			id: 'removeBtn',
+			text: 'remove',
+			callback: function(el){
+				if (selectedEl != null){
+					var nodeText = $(selectedEl).text()
+					, tree = treantJs.tree.getNodeDb().db;																			
+					for(var key in tree){
+						var nodeTree = tree[key];
+						if(nodeTree.text.name == nodeText){
+							console.log(tree);
+							console.log(nodeTree);
+							console.log(nodeTree.parentId);
+							console.log(nodeTree.lookupNode(nodeTree.parentId));
+							//selectedNodeTree = nodeTree;
+							//$('#modalWin').dialog( "open" );
+							break;
+						}						
+					}
+				}
+			}
+		}*/,{
+			id: 'exportNodeStructureBtn',
+			text: 'exrpot NodeStructure',
+			callback: function(){
+				var data = JSON.stringify(treantGui.prototype.exportNodeStructure());				
+				$('#modalWin').html(data);
+				$('#modalWin').dialog({title: "Export NodeStructure"});
+				$('#modalWin').dialog( "open" );
+			}
+		}
+	];
+	// GUI buttons end
+	// init GUI elements and callbacks
+	treantGui = function(idDiv, treant){
+		var guiDiv = $('#' + idDiv);		
+		treantJs = treant;		
+		$('.node').each(function() {
+		  $( this ).click(
+			function(){
+				selectFunc(this);
+			}
+		  );
+		});
+		for(var key in buttons){
+			var btnData = buttons[key];
+			var btn = document.createElement('button');
+			btn.setAttribute("id", btnData.id);
+			btn.innerHTML = btnData.text;
+			btn.addEventListener("click", btnData.callback);
+			guiDiv.append(btn);
+			var modalWin = document.createElement('div')
+			, addNodeBtn = document.createElement('button');
+			modalWin.setAttribute("id", "modalWin");
+			modalWin.setAttribute("title", "Add node");
+			modalWin.innerHTML = "<span>Child for parent:</span><input id=\"addNodeText\" name=text />";
+			addNodeBtn.addEventListener("click", addNodeFun);
+			addNodeBtn.innerHTML = "Save";
+			modalWin.appendChild(addNodeBtn);
+			guiDiv.append(modalWin);
+			$(modalWin).dialog({
+			  autoOpen: false
+			});
+		}
+	};
+	treantGui.prototype = {
+		exportNodeStructure: function(root, nodeStructure){			
+			var root = root || treantJs.tree.root()
+			, nodeStructure = nodeStructure || {text: root.text, children: []};			
+			if (typeof root.children != "undefined"){
+				var children = root.children;
+				for(var key in children){
+					var child = treantJs.tree.getNodeDb().db[children[key]]
+					, childNode = { text: child.text, children: [] };										
+					if (typeof child.children != "undefined"){
+						this.exportNodeStructure(child, childNode);
+					}
+					nodeStructure.children.push(childNode);
+				}
+			}
+			return nodeStructure;
+		}
+	};
+	window.treantGui = treantGui;
+})();