Use JavaScript modules.

These are minimal changes to make the tools work together; cf issue #3. More cleanup is necessary.
quangis · Sep 9, 2022 · 596a251 · 596a251
1 parent 4ae9cf8
commit 596a251
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 38 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,21 +3,12 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Geo-analytical question formulation</title>
-	<script src="https://unpkg.com/blockly/blockly.min.js"></script>
 	<style>
 		h1 {text-align: center;}
 		#blocklyContainer {
-			position: relative;
 			width: 100%;
 			height: 60vh;
 		}
-		#blocklyDiv {
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-		}
 		#quesContainer {
 			position: relative;
 			width: 100%;
@@ -35,8 +26,7 @@
 			font-size: 25px;
 		}
 	</style>
-	<script src="../src/blocks.js"></script>
-	<script src="../src/generator.js"></script>
+	<script type="module" src="../src/index.ts"></script>
 	<link rel="shortcut icon" href="#" />
 </head>
 <body>
@@ -205,27 +195,5 @@ <h1>Generating your geo-analytical question</h1>
 <!--			<block type="temporalextent2"></block>-->
 		</category>
 	</xml>
-	<script>
-		let workspace = Blockly.inject('blocklyDiv', {
-			toolbox: document.getElementById('toolbox'),
-			zoom: {
-				controls: true,
-				wheel: true,
-				startScale: 1,
-				maxScale: 1.5,
-				minScale: 0.8,
-				scaleSpeed: 1.2
-			}
-		});
-		function refresh(){
-			setCategory()
-			ques_generator()
-			disable_sup_grid()
-		}
-		workspace.addChangeListener(refresh);
-		hideCategory();
-		Blockly.myFlyout&&Blockly.myFlyout.flyoutCategory&&(workspace.registerToolboxCategoryCallback(Blockly.MYFLYOUT_CATEGORY_NAME,Blockly.myFlyout.flyoutCategory));
-		Blockly.gridFlyout&&Blockly.gridFlyout.flyoutCategory&&(workspace.registerToolboxCategoryCallback(Blockly.GRIDFLYOUT_CATEGORY_NAME,Blockly.gridFlyout.flyoutCategory));
-</script>
 </body>
 </html>
diff --git a/src/blocks.js b/src/blocks.js
@@ -1,3 +1,5 @@
+import * as Blockly from 'blockly';
+
 //Question words
 Blockly.Blocks['where'] = {
   init: function () {
@@ -1172,7 +1174,7 @@ Blockly.gridFlyout={};
 Blockly.GRIDFLYOUT_CATEGORY_NAME="flyout_grid";
 Blockly.gridFlyout.Blocks=[];
 
-function disable_sup_grid(){
+export function disable_sup_grid(workspace){
   let elelist=[];
   workspace.getAllBlocks(true).forEach(element =>{
     elelist.push(element.type);
@@ -1278,7 +1280,7 @@ Blockly.gridFlyout.flyoutCategory=function(c){
   return d
 };
 
-function hideCategory(){
+export function hideCategory(){
   document.getElementById('queCate').style.display = ''
   document.getElementById('npWhichCate').style.display = 'none'
   document.getElementById('npCate').style.display = 'none'
@@ -1313,7 +1315,7 @@ function rel1Category(){
   document.getElementById('relCate').style.display = ''
 }
 
-function setCategory() {
+export function setCategory(workspace) {
   const where = workspace.getBlocksByType("where");
   const what = workspace.getBlocksByType("what");
   const which = workspace.getBlocksByType("which");

diff --git a/src/generator.js b/src/generator.js
@@ -6,7 +6,7 @@ const removehintWords = (str, arr) => {
     }, str);
 };
 
-function ques_generator() {
+export function ques_generator(workspace) {
     let question = '';
 
     const where = workspace.getBlocksByType("where");
@@ -55,4 +55,4 @@ function ques_generator() {
     }else{
         document.getElementById("questionDiv").innerHTML = question;
     }
-}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1,56 @@
+import * as Blockly from 'blockly';
+import {setCategory, hideCategory, disable_sup_grid} from './blocks.js';
+import {ques_generator} from './generator.js';
+
+function injectWorkspace() {
+
+    var toolbox = document.getElementById('toolbox');
+
+    // Injecting workspace
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace = Blockly.inject(blocklyDiv, {
+        toolbox: toolbox,
+        zoom: {
+            controls: true,
+            wheel: true,
+            startScale: 1,
+            maxScale: 1.5,
+            minScale: 0.8,
+            scaleSpeed: 1.2
+        }
+    });
+
+    // Resizing workspace
+    blocklyDiv.style.position = 'absolute';
+    var area = document.getElementById('blocklyContainer');
+    var onresize = function(e) {
+        var el = area;
+        var x = 0;
+        var y = 0;
+        do {
+          x += el.offsetLeft;
+          y += el.offsetTop;
+          el = el.offsetParent;
+        } while(el);
+        blocklyDiv.style.left = x + 'px';
+        blocklyDiv.style.top = y + 'px';
+        blocklyDiv.style.width = area.offsetWidth + 'px';
+        blocklyDiv.style.height = area.offsetHeight + 'px';
+        Blockly.svgResize(workspace);
+    };
+    window.addEventListener('resize', onresize, false);
+    onresize();
+
+    // Category hiding
+    var refresh = function(){
+        setCategory(workspace);
+        ques_generator(workspace);
+        disable_sup_grid(workspace);
+    }
+    workspace.addChangeListener(refresh);
+    hideCategory();
+    Blockly.myFlyout&&Blockly.myFlyout.flyoutCategory&&(workspace.registerToolboxCategoryCallback(Blockly.MYFLYOUT_CATEGORY_NAME,Blockly.myFlyout.flyoutCategory));
+    Blockly.gridFlyout&&Blockly.gridFlyout.flyoutCategory&&(workspace.registerToolboxCategoryCallback(Blockly.GRIDFLYOUT_CATEGORY_NAME,Blockly.gridFlyout.flyoutCategory));
+}
+
+window.onload = injectWorkspace;