refactor ScriptEditor/CodeEditor

bin/cdb.css

@@ -276,27 +276,10 @@
   white-space: nowrap;
   overflow: hidden;
 }
-.cdb .cdb-sheet div.cdb-script .scripteditor {
+.cdb .cdb-sheet div.cdb-script .codeeditor {
   min-width: 500px;
   min-height: 200px;
 }
-.cdb .cdb-sheet div.cdb-script .scriptErrorLine {
-  background: #400;
-}
-.cdb .cdb-sheet div.cdb-script .scriptErrorContentLine {
-  background: rgba(255, 0, 0, 0.1);
-}
-.cdb .cdb-sheet div.cdb-script .scriptErrorContent {
-  text-decoration: underline dashed red;
-}
-.cdb .cdb-sheet div.cdb-script .scriptErrorMessage {
-  background: #500505;
-  color: red;
-  position: absolute;
-  margin-top: -20px;
-  padding: 2px;
-  border: 1px solid #A00;
-}
 body.fullScreenMode .lm_content,
 body.fullScreenMode .lm_header,
 body.fullScreenMode .lm_splitter {

bin/cdb.less

@@ -312,27 +312,10 @@
 		}
 
 		div.cdb-script {
-			.scripteditor {
+			.codeeditor {
 				min-width: 500px;
 				min-height: 200px;
 			}
-			.scriptErrorLine {
-				background: #400;
-			}
-			.scriptErrorContentLine {
-				background : rgba(255,0,0,0.1);
-			}
-			.scriptErrorContent {
-				text-decoration: underline dashed red;
-			}
-			.scriptErrorMessage {
-				background : rgba(80, 5, 5, 1);
-				color : red;
-				position: absolute;
-				margin-top : -20px;
-				padding: 2px;
-				border: 1px solid #A00;
-			}
 		}
 
 	}

bin/style.css

@@ -1124,3 +1124,39 @@ div.sp-container input:hover {
   display: inline-block;
   width: 50%;
 }
+.codeeditor .codeErrorLine {
+  background: #400;
+}
+.codeeditor .codeErrorContentLine {
+  background: rgba(255, 0, 0, 0.1);
+}
+.codeeditor .codeErrorContent {
+  text-decoration: underline dashed red;
+}
+.codeeditor .codeErrorMessage {
+  background: #500505;
+  color: red;
+  position: absolute;
+  margin-top: -20px;
+  padding: 2px;
+  border: 1px solid #A00;
+}
+/* UIKit */
+.uikit {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.uikit > * {
+  flex-grow: 100;
+}
+.uikit .leftpanel {
+  width: 600px;
+  resize: horizontal;
+  border-right: 1px solid #333;
+  overflow: hidden;
+}
+.uikit .leftpanel .html .codeeditor {
+  padding: 5px;
+  height: 400px;
+}

bin/style.less

@@ -1252,4 +1252,45 @@ div.sp-container {
 	}
 }
 
+.codeeditor {
+	.codeErrorLine {
+		background: #400;
+	}
+	.codeErrorContentLine {
+		background : rgba(255,0,0,0.1);
+	}
+	.codeErrorContent {
+		text-decoration: underline dashed red;
+	}
+	.codeErrorMessage {
+		background : rgba(80, 5, 5, 1);
+		color : red;
+		position: absolute;
+		margin-top : -20px;
+		padding: 2px;
+		border: 1px solid #A00;
+	}
+}
+
+/* UIKit */
 
+.uikit {
+	width:100%;
+	height:100%;
+	display:flex;
+	>* {
+		flex-grow : 100;
+	}
+	.leftpanel {
+		width:600px;
+		resize:horizontal;
+		border-right:1px solid #333;
+		overflow:hidden;
+		.html {
+			.codeeditor {
+				padding: 5px;
+				height: 400px;
+			}
+		}
+	}
+}

hide/Ide.hx

@@ -50,6 +50,17 @@ class Ide {
 	static var firstInit = true;
 
 	function new() {
+		function wait() {
+			if( monaco.Editor == null ) {
+				haxe.Timer.delay(wait, 10);
+				return;
+			}
+			startup();
+		}
+		wait();
+	}
+
+	function startup() {
 		inst = this;
 		window = nw.Window.get();
 		var cwd = Sys.getCwd();
@@ -620,7 +631,7 @@ class Ide {
 		}).appendTo(window.window.document.body).click();
 	}
 
-	public function parseJSON( str : String ) {
+	public function parseJSON( str : String ) : Dynamic {
 		// remove comments
 		str = ~/^[ \t]+\/\/[^\n]*/gm.replace(str, "");
 		return haxe.Json.parse(str);

hide/comp/CodeEditor.hx

@@ -0,0 +1,85 @@
+package hide.comp;
+
+class CodeEditor extends Component {
+
+	var editor : monaco.Editor;
+	var errorMessage : Element;
+	var currrentDecos : Array<String> = [];
+	public var code(get,never) : String;
+
+	public function new( code : String, lang : String, ?parent : Element, ?root : Element ) {
+		super(parent,root);
+
+		var root = element;
+		root.addClass("codeeditor");
+		root.on("keydown", function(e) { if( e.keyCode == 27 && root.find(".suggest-widget.visible").length == 0 ) onClose(); e.stopPropagation(); });
+		editor = monaco.Editor.create(root[0],{
+			value : code,
+			language : lang,
+			automaticLayout : true,
+			wordWrap : true,
+			minimap : { enabled : false },
+			theme : "vs-dark",
+		});
+		var model = editor.getModel();
+		(model : Dynamic).__comp__ = this;
+		model.updateOptions({ insertSpaces:false, trimAutoWhitespace:true });
+		editor.onDidChangeModelContent(function() onChanged());
+		editor.addCommand(monaco.KeyCode.KEY_S | monaco.KeyMod.CtrlCmd, function() { clearSpaces(); onSave(); });
+		errorMessage = new Element('<div class="codeErrorMessage"></div>').appendTo(root).hide();
+	}
+
+	function clearSpaces() {
+		var code = code;
+		var newCode = [for( l in StringTools.trim(code).split("\n") ) StringTools.rtrim(l)].join("\n");
+		if( newCode != code ) {
+			var p = editor.getPosition();
+			setCode(newCode);
+			editor.setPosition(p);
+		}
+	}
+
+	function get_code() {
+		return editor.getValue({preserveBOM:true});
+	}
+
+	public function setCode( code : String ) {
+		editor.setValue(code);
+	}
+
+	public function focus() {
+		editor.focus();
+	}
+
+	public dynamic function onChanged() {
+	}
+
+	public dynamic function onSave() {
+	}
+
+	public dynamic function onClose() {
+	}
+
+	public function clearError() {
+		if( currrentDecos.length != 0 )
+			currrentDecos = editor.deltaDecorations(currrentDecos,[]);
+		errorMessage.hide();
+	}
+
+	public function setError( msg : String, line : Int, pmin : Int, pmax : Int ) {
+		var linePos = code.substr(0,pmin).lastIndexOf("\n");
+		if( linePos < 0 ) linePos = 0 else linePos++;
+		var range = new monaco.Range(line,pmin + 1 - linePos,line,pmax + 2 - linePos);
+		currrentDecos = editor.deltaDecorations(currrentDecos,[
+			{ range : range, options : { inlineClassName: "codeErrorContentLine", isWholeLine : true } },
+			{ range : range, options : { linesDecorationsClassName: "codeErrorLine", inlineClassName: "codeErrorContent" } }
+		]);
+		errorMessage.text(msg);
+		errorMessage.show(function() {
+			var rect = errorMessage[0].getBoundingClientRect();
+			if( rect.bottom > js.Browser.window.innerHeight )
+				errorMessage[0].scrollIntoView(false);
+		});
+	}
+
+}

hide/comp/ScriptEditor.hx

@@ -171,20 +171,13 @@ class ScriptChecker {
 
 }
 
-class ScriptEditor extends Component {
+class ScriptEditor extends CodeEditor {
 
 	static var INIT_DONE = false;
-
-	var editor : monaco.Editor;
-	var errorMessage : Element;
 	var checker : ScriptChecker;
-	var currrentDecos : Array<String> = [];
 	var checkTypes : Bool;
-	public var script(get,never) : String;
 
 	public function new( script : String, ?checker : ScriptChecker, ?parent : Element, ?root : Element ) {
-		super(parent,root);
-
 		if( !INIT_DONE ) {
 			INIT_DONE = true;
 			(monaco.Languages : Dynamic).typescript.javascriptDefaults.setCompilerOptions({ noLib: true, allowNonTsExtensions: true }); // disable js stdlib completion
@@ -195,51 +188,16 @@ class ScriptEditor extends Component {
 				}
 			});
 		}
-
-		var root = element;
-		root.addClass("scripteditor");
-		root.on("keydown", function(e) { if( e.keyCode == 27 && root.find(".suggest-widget.visible").length == 0 ) onClose(); e.stopPropagation(); });
-
-		editor = monaco.Editor.create(root[0],{
-			value : script,
-			language : "javascript",
-			automaticLayout : true,
-			wordWrap : true,
-			minimap : { enabled : false },
-			theme : "vs-dark",
-		});
-		var model = editor.getModel();
-		(model : Dynamic).__comp__ = this;
-		model.updateOptions({ insertSpaces:false, trimAutoWhitespace:true });
-		editor.onDidChangeModelContent(doCheckScript);
-		editor.addCommand(monaco.KeyCode.KEY_S | monaco.KeyMod.CtrlCmd, function() { clearSpaces(); onSave(); });
-		errorMessage = new Element('<div class="scriptErrorMessage"></div>').appendTo(root).hide();
+		super(script, "javascript", parent,root);
 		if( checker == null ) {
 			checker = new ScriptChecker(new hide.Config(),"");
 			checkTypes = false;
 		}
 		this.checker = checker;
+		onChanged = doCheckScript;
 		haxe.Timer.delay(function() doCheckScript(), 0);
 	}
 
-	function clearSpaces() {
-		var script = script;
-		var newScript = [for( l in StringTools.trim(script).split("\n") ) StringTools.rtrim(l)].join("\n");
-		if( newScript != script ) {
-			var p = editor.getPosition();
-			setScript(newScript);
-			editor.setPosition(p);
-		}
-	}
-
-	function get_script() {
-		return editor.getValue({preserveBOM:true});
-	}
-
-	public function setScript( script : String ) {
-		editor.setValue(script);
-	}
-
 	function getCompletion( position : monaco.Position ) : Array<monaco.Languages.CompletionItem> {
 		var checker = checker.checker;
 		var globals = checker.getGlobals();
@@ -268,38 +226,12 @@ class ScriptEditor extends Component {
 	}
 
 	function doCheckScript() {
-		var script = script;
+		var script = code;
 		var error = checker.check(script, checkTypes);
-		if( error == null ) {
-			if( currrentDecos.length != 0 )
-				currrentDecos = editor.deltaDecorations(currrentDecos,[]);
-			errorMessage.hide();
-		} else {
-			var linePos = script.substr(0,error.pmin).lastIndexOf("\n");
-			//trace(e, e.pmin, e.pmax, cur.substr(e.pmin, e.pmax - e.pmin + 1), linePos);
-			if( linePos < 0 ) linePos = 0 else linePos++;
-			var range = new monaco.Range(error.line,error.pmin + 1 - linePos,error.line,error.pmax + 2 - linePos);
-			currrentDecos = editor.deltaDecorations(currrentDecos,[
-				{ range : range, options : { inlineClassName: "scriptErrorContentLine", isWholeLine : true } },
-				{ range : range, options : { linesDecorationsClassName: "scriptErrorLine", inlineClassName: "scriptErrorContent" } }
-			]);
-			errorMessage.text(hscript.Printer.errorToString(error));
-			errorMessage.show(function() {
-				var rect = errorMessage[0].getBoundingClientRect();
-				if( rect.bottom > js.Browser.window.innerHeight )
-					errorMessage[0].scrollIntoView(false);
-			});
-		}
-	}
-
-	public function focus() {
-		editor.focus();
-	}
-
-	public dynamic function onSave() {
-	}
-
-	public dynamic function onClose() {
+		if( error == null )
+			clearError();
+		else
+			setError(hscript.Printer.errorToString(error), error.line, error.pmin, error.pmax);
 	}
 
 }

hide/comp/cdb/ScriptTable.hx

@@ -21,7 +21,7 @@ class ScriptTable extends SubTable {
 
 	override public function close() {
 		if( script != null )
-			cell.setValue(script.script);
+			cell.setValue(script.code);
 		super.close();
 	}
 
@@ -30,7 +30,7 @@ class ScriptTable extends SubTable {
 		element.html("<div class='cdb-script'></div>");
 		var checker = new ScriptEditor.ScriptChecker(editor.config,"cdb."+cell.getDocumentName(),[ "cdb."+cell.table.sheet.name => cell.line.obj ]);
 		script = new ScriptEditor(cell.value, checker, element.find("div"));
-		script.onSave = function() cell.setValue(script.script);
+		script.onSave = function() cell.setValue(script.code);
 		script.onClose = function() { close(); cell.focus(); }
 		lines = [new Line(this,[],0,script.element)];
 		if( first ) script.focus();

hide/view/FXEditor.hx

@@ -166,6 +166,7 @@ class FXEditor extends FileView {
 		var content = ide.toJSON(data.save());
 		currentSign = haxe.crypto.Md5.encode(content);
 		sys.io.File.saveContent(getPath(), content);
+		super.save();
 	}
 
 	override function onDisplay() {
@@ -236,14 +237,14 @@ class FXEditor extends FileView {
 		var scriptElem = element.find(".fx-script");
 		scriptEditor = new hide.comp.ScriptEditor(data.script, null, scriptElem, scriptElem);
 		function onSaveScript() {
-			data.script = scriptEditor.script;
+			data.script = scriptEditor.code;
 			save();
 			skipNextChange = true;
 			modified = false;
 		}
 		scriptEditor.onSave = onSaveScript;
 		fxScriptParser = new hide.prefab.fx.FXScriptParser();
-		data.script = scriptEditor.script;
+		data.script = scriptEditor.code;
 
 		keys.register("playPause", function() { pauseButton.toggle(!pauseButton.isDown()); });
 
@@ -1120,11 +1121,11 @@ class FXEditor extends FileView {
 			currentVersion = undo.currentID;
 		}
 
-		if( data.script != scriptEditor.script || !fxScriptParser.firstParse ){
+		if( data.script != scriptEditor.code || !fxScriptParser.firstParse ){
 			modified = true;
 			fxScriptParser.firstParse = true;
-			data.script = scriptEditor.script;
-			anim.script = fxScriptParser.createFXScript(scriptEditor.script, anim);
+			data.script = scriptEditor.code;
+			anim.script = fxScriptParser.createFXScript(scriptEditor.code, anim);
 			fxScriptParser.generateUI(anim.script, this);
 		}
 	}

hide/view/Script.hx

@@ -6,12 +6,6 @@ class Script extends FileView {
 	var originData : String;
 
 	override function onDisplay() {
-
-		if( monaco.Editor == null ) {
-			element.html("<div class='hide-loading'></div>");
-			haxe.Timer.delay(rebuild, 100);
-			return;
-		}
 		var lang = switch( extension ) {
 		case "js", "hx": "javascript";
 		case "json": "json";
@@ -26,16 +20,16 @@ class Script extends FileView {
 			automaticLayout : true,
 			wordWrap : true,
 			theme : "vs-dark",
-		 });
-		 editor.addCommand(monaco.KeyCode.KEY_S | monaco.KeyMod.CtrlCmd, function() {
-			 originData = editor.getValue({preserveBOM:true});
-			 modified = false;
-			 sys.io.File.saveContent(getPath(), originData);
-		 });
-		 editor.onDidChangeModelContent(function() {
-			 var cur = editor.getValue({preserveBOM:true});
-			 modified = cur != originData;
-		 });
+		});
+		editor.addCommand(monaco.KeyCode.KEY_S | monaco.KeyMod.CtrlCmd, function() {
+			originData = editor.getValue({preserveBOM:true});
+			modified = false;
+			sys.io.File.saveContent(getPath(), originData);
+		});
+		editor.onDidChangeModelContent(function() {
+			var cur = editor.getValue({preserveBOM:true});
+			modified = cur != originData;
+		});
 	}
 
 	static var _ = {