Blockly editor modulized

thomasballinger · Jan 26, 2016 · ba50bc9 · ba50bc9
1 parent 71b2235
commit ba50bc9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 36 deletions.
diff --git a/blocklySLtoolbox.xml b/blocklySLtoolbox.xml
@@ -0,0 +1,26 @@
+<xml id="toolbox" style="display: none">
+  <category name="Main">
+    <block type="forever"></block>
+    <block type="procedures_defnoreturn"></block>
+    <block type="math_number"></block>
+
+    <block type="turn">
+      <value name="time">
+        <shadow type="math_number">
+          <field name="NUM">.2</field>
+        </shadow>
+      </value>
+    </block>
+
+    <block type="thrustfor">
+      <value name="time">
+        <shadow type="math_number">
+          <field name="NUM">.2</field>
+        </shadow>
+      </value>
+    </block>
+  </category>
+
+  <category name="Names" custom="VARIABLE"></category>
+  <category name="Scripts" custom="PROCEDURE"></category>
+</xml>
diff --git a/editors.ts b/editors.ts
@@ -0,0 +1,32 @@
+var ace = require('brace');
+require('brace/mode/scheme');
+require('brace/theme/terminal');
+
+interface Editor {
+    getCode(): string;
+    setListener(cb: ()=>void): void;
+}
+
+export class BlocklySL{
+    constructor(id: string){
+        if (!(<any>window).Blockly){ throw Error('Blockly not loaded!'); }
+        createBlocklyToolbox();
+        this.workspace = (<any>window).Blockly.inject('editor',
+            {toolbox: document.getElementById('toolbox')});
+    }
+    workspace: any;
+    getCode(){
+        return (<any>window).Blockly.ShipLang.workspaceToCode(this.workspace);
+    }
+    setListener(cb: ()=>void){
+        this.workspace.addChangeListener(cb);
+    }
+}
+
+function createBlocklyToolbox(){
+    var toolboxXML = require("raw!./blocklySLtoolbox.xml");
+    var node = document.createElement('div');
+    node.innerHTML = toolboxXML;
+    console.log(node);
+    document.body.appendChild(node);
+}
diff --git a/entry.js b/entry.js
@@ -1,8 +1,5 @@
 require("./style.css");
 var pilotScriptSource = require("raw!./pilot.sl");
-//var ace = require('brace');
-//require('brace/mode/scheme');
-//require('brace/theme/terminal');
 var builtinSLScripts = require("raw!./pilot.sl");
 
 var display = require('./display');
@@ -11,6 +8,7 @@ var hud = require('./hud');
 var scenarios = require('./scenarios');
 var updater = require('./updater');
 var errorbar = require('./errorbar');
+var editors = require('./editors');
 
 // document body fullscreen
 //document.body.addEventListener('click', function(e){
@@ -31,22 +29,21 @@ canvas.focus();
 //  codeChanged = true;
 //});
 
-var workspace = Blockly.inject('editor',
-    {toolbox: document.getElementById('toolbox')});
-
-workspace.addChangeListener(function(){ updater.notifyOfCodeChange(); });
-
 setup.stealBacktick(function(){ updater.rewind(); });
 
+var editor = new editors.BlocklySL('editor');
+
 var updater = new updater.Updater(
   errorbar.setError, // alerts user that current code is very wrong
   errorbar.clearError,
   function(msg){}, // queue warning
-  function(){ return Blockly.ShipLang.workspaceToCode(workspace); },
+  function(){ return editor.getCode(); },
   'canvas', // where to put key handlers
   scenarios.scenario1() // how to contruct a new world
 );
 
+editor.setListener(function(){ updater.notifyOfCodeChange(); });
+
 updater.registerObserver({
   update: function(){
     canvas.width = window.innerWidth;

diff --git a/index.html b/index.html
@@ -19,33 +19,6 @@
   <script src="blockly-master/javascript_compressed.js"></script>
   <script src="shiplangblocks.js"></script>
 
-  <xml id="toolbox" style="display: none">
-    <category name="Main">
-      <block type="forever"></block>
-      <block type="procedures_defnoreturn"></block>
-      <block type="math_number"></block>
-
-      <block type="turn">
-        <value name="time">
-          <shadow type="math_number">
-            <field name="NUM">.2</field>
-          </shadow>
-        </value>
-      </block>
-
-      <block type="thrustfor">
-        <value name="time">
-          <shadow type="math_number">
-            <field name="NUM">.2</field>
-          </shadow>
-        </value>
-      </block>
-    </category>
-
-    <category name="Names" custom="VARIABLE"></category>
-    <category name="Scripts" custom="PROCEDURE"></category>
-  </xml>
-
   <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
   <script>
   </script>