add blockly block 'rectangle'

Author: david-hodgetts

public/bollockly.html

@@ -4,6 +4,7 @@
     <script src="lib/blockly/blocks_compressed.js"></script>
     <script src="lib/blockly/msg/js/en.js"></script>
     <script src="lib/blockly/javascript_compressed.js"></script>
+    <script src="rectangle.js"></script>
     <script src="square.js"></script>
     <script src="bollockly.js"></script>
 
@@ -19,6 +20,7 @@
       <block type="text"></block>
       <block type="text_print"></block>
       <block type="square"></block>
+      <block type="rectangle"></block>
     </xml>
     <textarea id="textarea"></textarea>
 <button onclick="execute()">exec</button>

public/rectangle.js

@@ -0,0 +1,44 @@
+// https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#h3t96r
+
+Blockly.Blocks['rectangle'] = {
+  init: function() {
+    this.appendValueInput("x")
+        .setCheck("Number")
+        .appendField("x");
+    this.appendValueInput("y")
+        .setCheck("Number")
+        .appendField("y");
+    this.appendValueInput("width")
+        .setCheck("Number")
+        .appendField("width");
+    this.appendValueInput("height")
+        .setCheck("Number")
+        .appendField("height");
+    this.setInputsInline(false);
+    this.setPreviousStatement(true);
+    this.setNextStatement(true);
+    this.setTooltip('draw rectangle');
+    this.setHelpUrl('http://www.example.com/');
+  }
+};
+
+Blockly.JavaScript['rectangle'] = function(block) {
+  var value_x = Blockly.JavaScript.valueToCode(block, 'x', Blockly.JavaScript.ORDER_ATOMIC);
+  var value_y = Blockly.JavaScript.valueToCode(block, 'y', Blockly.JavaScript.ORDER_ATOMIC);
+  var value_width = Blockly.JavaScript.valueToCode(block, 'width', Blockly.JavaScript.ORDER_ATOMIC);
+  var value_height = Blockly.JavaScript.valueToCode(block, 'height', Blockly.JavaScript.ORDER_ATOMIC);
+
+  var code = "ctx.fillRect(" + value_x + "," + value_y + "," + value_width + "," + value_height + ");"; 
+  return code;
+};
+
+function makeRectangle (){
+    return function (context){
+        context.rotate(this.rotation* this.toRadians);
+        context.fillStyle = "rgb(__COLOR__,20,"+Math.floor(Math.random()*255)+")";
+        var x = Math.floor(Math.random()*context.canvas.width);
+        var y = Math.floor(Math.random()*context.canvas.height);
+        context.fillRect(x, y, 50, 50);
+    };
+}
+

public/square.js

@@ -9,16 +9,17 @@ Blockly.Blocks['square'] = {
     this.setPreviousStatement(true);
     this.setNextStatement(true);
     this.setColour(330);
-    this.setTooltip('');
+    this.setTooltip('squares');
     this.setHelpUrl('http://www.example.com/');
+    //  this.setOutput(true, 'Number');
   }
 };
 
 Blockly.JavaScript['square'] = function(block) {
   var value_color = Blockly.JavaScript.valueToCode(block, 'COLOR', Blockly.JavaScript.ORDER_ATOMIC);
   var value_angle = Blockly.JavaScript.valueToCode(block, 'angle', Blockly.JavaScript.ORDER_ATOMIC);
   // TODO: Assemble JavaScript into code variable.
-  var code = "("+makesquare().toString().replace("__COLOR__", value_color)+")(ctx)";
+  var code = "("+makesquare().toString().replace("__COLOR__", value_color)+")(ctx);";
   return code;
 };