Port to electron + add new features

app/index.html

@@ -7,7 +7,9 @@
 		<link rel="stylesheet" href="css/style.css">
 
 		<!-- libraries -->
-		<script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script>
+		<!-- https://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework -->
+		<script>window.$ = window.jQuery = require('jquery');</script>
+		<!-- <script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script> -->
 		<script type="text/javascript" src="js/libs/jquery.mousewheel.min.js"></script>
 		<script type="text/javascript" src="js/libs/transit.js"></script>
 		<script type="text/javascript" src="js/libs/knockout-3.3.0.js"></script>
@@ -75,39 +77,45 @@
 				<div class="menu">
 					<span class="title">File</span>
 					<div class="dropdown">
+						<!-- <span class="item" data-bind="click: data.tryOpenFile">Open...</span> -->
 						<span class="item" data-bind="click: data.tryOpenFile">Open...</span>
 						<!--<span class="item" data-bind="click: data.tryOpenFolder">Open Folder...</span>-->
 						<span class="item" data-bind="click: data.tryAppend">Append...</span>
 						<!-- ko if:data.editingPath() != null -->
-						<span class="item" data-bind="click: data.trySaveCurrent">Save</span>
+						<!-- <span class="item" data-bind="click: data.trySaveCurrent">Save</span> -->
 						<!-- /ko -->
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.JSON); }">Save As Json...</span>
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.YARNTEXT); }">Save As Yarn...</span>
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE); }">Save As Twee...</span>
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE2); }">Save As Twee2...</span>
-						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.XML); }">Save As Xml...</span>
+						<span class="item" data-bind="click: function() { data.trySave(FILETYPE.JSON);}">Save As Json...</span>
+						<!-- <span class="item" data-bind="click: function() { data.trySave(FILETYPE.YARNTEXT); }">Save As Yarn...</span> -->
+						<!-- <span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE); }">Save As Twee...</span> -->
+						<!-- <span class="item" data-bind="click: function() { data.trySave(FILETYPE.TWEE2); }">Save As Twee2...</span> -->
+						<!-- <span class="item" data-bind="click: function() { data.trySave(FILETYPE.XML); }">Save As Xml...</span> -->
 						<!--<span class="item" data-bind="click: app.quit">Close</span>-->
 					</div>
 				</div>
+
+
+				<div class="menu">
+					<span class="title" onmouseover="app.openNodeListMenu('run')">Run</span>
+					<div id="runHelperMenu" class="dropdown">
+						<input placeholder="search" type="text" id="runHelperMenuFilter" class="search-field" style="text-align:center" oninput="app.openNodeListMenu('run')"></input>
+					</div>
+				</div>
+
+				<!-- <div class="menu">
+					<span class="title" data-bind="click:data.sendToExternalApp">[ SAVE ]</span>
+				</div> -->
 			</div>
 
 			<!-- arrow bg canvas for linked nodes -->
 			<canvas class="arrows">
 
 			</canvas>
-
 			<!-- foreach loop  of the nodes -->
 			<div class="nodes">
 				<div class="nodes-holder" data-bind="foreach: { data: app.nodes, as: 'node' }">
 					<div class="node" data-bind="nodeBind: true, css: { inactive: !node.active()}" >
 						<div class="title" data-bind="text: node.title, style: {background:
-						node.colorID() == 1 ? '#6EA5E0' :
-						node.colorID() == 2 ? '#9EDE74' :
-						node.colorID() == 3 ? '#FFE374' :
-						node.colorID() == 4 ? '#F7A666' :
-						node.colorID() == 5 ? '#C47862' :
-						node.colorID() == 6 ? '#97E1E9' :
-						'#eee'}"></div>
+						node.titleColorValues[node.colorID()]}"></div>
 						<div class="body" data-bind="html: node.clippedBody"></div>
 						<div class="tags" data-bind="html: node.clippedTags"></div>
 						<div class="icon colorDown" data-bind="click: node.cycleColorDown"></div>
@@ -121,10 +129,22 @@
 
 			<!-- ko if:app.editing() != null -->
 			<div class="node-editor" data-bind="mousedown:app.saveNode">
-
 				<div class="form" data-bind="preventBubble: 'click', preventBubble: 'mousedown'">
 					<input type="text" class="title" data-bind="value: app.editing().title">
+
+					<!-- <div float="left"> </div> -->
+
+					<div class="app-menu">
+						<div class="menu" style="float:left">
+							<span class="title" onmouseover="app.openNodeListMenu('link')">Add Link</span>
+							<div id="linkHelperMenu" class="dropdown">
+								<input placeholder="search" type="text" id="linkHelperMenuFilter" class="search-field" style="text-align:center" oninput="app.openNodeListMenu('link')"></input>
+							</div>
+						</div>
+					</div>
+
 					<input type="text" data-bind="value: app.editing().tags">
+
 					<div class="editor-container">
 						<div class="editor" id="editor"
 							data-bind="

app/js/classes/app.js

@@ -1,7 +1,11 @@
+const electron = require('electron')
+const remote = electron.remote
+
 var App = function(name, version)
 {
+	// console.log(remote.getCurrentWindow()); ///// replace nw.gui 
 	var self = this;
-
+	
 	// self
 	this.instance = this;
 	this.name = ko.observable(name);
@@ -40,8 +44,10 @@ var App = function(name, version)
 	// node-webkit
 	if (typeof(require) == "function")
 	{
-		this.gui = require('nw.gui');
-		this.fs = require('fs');
+		// this.gui = require('nw.gui');
+		this.gui = remote.getCurrentWindow();
+		this.fs = remote.require('fs');
+		console.log(this.fs);
     this.isNwjs = true;
 	}
 
@@ -509,12 +515,13 @@ var App = function(name, version)
 
 	this.refreshWindowTitle = function(editingPath)
 	{
-		var gui = require('nw.gui');
-
+		// var gui = require('nw.gui');
+		var gui = remote.getCurrentWindow();
 		if (!gui) return;
 
 		// Get the current window
-		var win = gui.Window.get();
+		// var win = gui.Window.get(); //Borked
+		var win = remote.getCurrentWindow();
 
 		win.title = "Yarn - [" + editingPath + "] ";// + (self.dirty?"*":"");
 	}
@@ -728,8 +735,47 @@ var App = function(name, version)
 		return x.replace(/^\s+|\s+$/gm,'');
 	}
 
+	this.appendText = function(textToAppend) { // [[First choice|Option1]]
+		self.editing().body(self.editing().body()+" [[changeMe|"+textToAppend+"]]");
+	}
+
+	this.testRunFrom = function(startTestNode){
+		ipc.send('testYarnStoryFrom',JSON.parse(data.getSaveData(FILETYPE.JSON)),startTestNode);
+	}
+
+	this.openNodeListMenu = function(action) {
+		var helperLinkSearch = document.getElementById(action+'HelperMenuFilter').value;
+		var rootMenu = document.getElementById(action+'HelperMenu');
+		for (let i = rootMenu.childNodes.length - 1; i > 1; i--) {
+			rootMenu.removeChild(rootMenu.childNodes[i]);
+		 }
+		app.nodes().forEach((node,i) => {
+			if (node.title().toLowerCase().indexOf(helperLinkSearch) >= 0 || helperLinkSearch.length == 0 ){
+				var p = document.createElement('span');
+				p.innerHTML = node.title();
+				p.setAttribute('class', 'item');
+				var pColor = node.titleColorValues[app.nodes()[i].colorID()];
+				p.setAttribute('style' ,'background:'+pColor+';');
+
+				if(action == "link"){
+					if (node.title() !== self.editing().title() ){
+							p.setAttribute('onclick', "app.appendText('" + node.title() + "')");	
+							rootMenu.appendChild(p);
+					}
+				}else if (action=="run"){
+					if (node.title().toLowerCase().indexOf(helperLinkSearch) >= 0 || helperLinkSearch.length == 0 ){
+						console.log('make run node')
+						p.setAttribute('onclick', "app.testRunFrom('" + node.title() + "')");
+						rootMenu.appendChild(p);
+					}
+				}	
+			}
+		})
+	}
+
 	this.saveNode = function()
 	{
+		// console.log(self.editing().body());
 		if (self.editing() != null)
 		{
 			self.updateNodeLinks();

app/js/classes/data.js

@@ -1,5 +1,23 @@
 var FILETYPE = { JSON: "json", XML: "xml", TWEE: "twee", TWEE2: "tw2", UNKNOWN: "none", YARNTEXT: "yarn.txt" };
 
+const ipc = require('electron').ipcRenderer;
+
+ipc.on('selected-file', function (event, path,operation) {
+	if(operation == 'tryOpenFile'){data.openFile($('#open-file'), path);}
+	else if(operation == 'tryAppend'){data.openFileDialog($('#open-file'), path);}
+});
+
+ipc.on('saved-file', function (event, path,type,content) {
+	data.editingType(type);
+	data.saveTo(path, content);
+	app.refreshWindowTitle(path);
+});
+
+ipc.on('loadYarnDataObject', function (event, yarnData) {
+	console.log("Loading YARN data From Game engine...");
+	data.loadData(JSON.stringify(yarnData),FILETYPE.JSON,true);
+});
+
 var data =
 {
 	editingPath: ko.observable(null),
@@ -59,7 +77,6 @@ var data =
 	openFile: function(e, filename)
 	{
 		data.readFile(e, filename, true);
-
 		app.refreshWindowTitle(filename);
 	},
 
@@ -392,6 +409,7 @@ var data =
 	{
 		if (app.fs != undefined)
 		{
+			console.log(app.fs);
 			app.fs.writeFile(path, content, {encoding: 'utf-8'}, function(err) 
 			{
 				data.editingPath(path);
@@ -427,8 +445,11 @@ var data =
 
 	saveFileDialog: function(dialog, type, content)
 	{
-		var file = 'file.' + type;
-
+		if (ipc) {		
+			var file = 'file.' + type;
+			ipc.send('saveFileYarn',type,content);
+			return 
+		}
 		if (app.fs)
 		{
 			dialog.attr("nwsaveas", file);
@@ -455,9 +476,11 @@ var data =
 		}
 	},
 
-	tryOpenFile: function()
+	tryOpenFile: function() /// Refactor to send signal to the main process
 	{
-		data.openFileDialog($('#open-file'), data.openFile);
+		console.log(ipc);
+		ipc.send('openFileYarn','tryOpenFile');
+		// data.openFileDialog($('#open-file'), data.openFile);
 	},
 
 	tryOpenFolder: function()
@@ -467,7 +490,8 @@ var data =
 
 	tryAppend: function()
 	{
-		data.openFileDialog($('#open-file'), data.appendFile);
+		ipc.send('openFileYarn','tryAppend');
+		// data.openFileDialog($('#open-file'), data.appendFile);
 	},
 
 	trySave: function(type)
@@ -482,6 +506,11 @@ var data =
 		{
 			data.saveTo(data.editingPath(), data.getSaveData(data.editingType()));
 		}
-	}
+	},
+
+	sendToExternalApp: function()
+	{
+		ipc.send('sendYarnDataToObject',JSON.parse(data.getSaveData(FILETYPE.JSON)));
+	},
 
 }

app/js/classes/node.js

@@ -6,7 +6,7 @@ const ClipNodeTextLength = 1024;
 var Node = function()
 {
 	var self = this;
-
+	this.titleColorValues = ['#eee','#6EA5E0','#9EDE74','#FFE374','#F7A666','#C47862','#97E1E9'];
 	// primary values
 	this.index = ko.observable(globalNodeIndex++);
 	this.title = ko.observable("Node" + this.index());