supported pen blocks to ruby.

Author: takaokouji

src/lib/ruby-to-blocks-converter/index.js

@@ -17,18 +17,28 @@ import SensingConverter from './sensing';
 import OperatorsConverter from './operators';
 import VariablesConverter from './variables';
 import MyBlocksConverter from './my-blocks';
-import MicroBitConverter from './microbit';
 import MusicConverter from './music';
+import PenConverter from './pen';
+import MicroBitConverter from './microbit';
 import EV3Converter from './ev3';
 import Wedo2Converter from './wedo2';
 
+/* eslint-disable no-invalid-this */
+const ColorRegexp = /^#[0-9a-fA-F]{6}$/;
+
 /**
  * Class for a block converter that translates ruby code into the blocks.
  */
 class RubyToBlocksConverter {
     constructor (vm) {
         this.vm = vm;
         this._converters = [
+            MusicConverter,
+            PenConverter,
+            MicroBitConverter,
+            EV3Converter,
+            Wedo2Converter,
+
             MotionConverter,
             LooksConverter,
             SoundConverter,
@@ -37,11 +47,7 @@ class RubyToBlocksConverter {
             SensingConverter,
             OperatorsConverter,
             VariablesConverter,
-            MyBlocksConverter,
-            MicroBitConverter,
-            MusicConverter,
-            EV3Converter,
-            Wedo2Converter
+            MyBlocksConverter
         ];
         this.reset();
     }
@@ -346,6 +352,10 @@ class RubyToBlocksConverter {
         return this._isNumber(block) || this._isString(block) || this._isValueBlock(block);
     }
 
+    _isColorOrBlock (colorOrBlock) {
+        return this._isBlock(colorOrBlock) || (this._isString(colorOrBlock) && ColorRegexp.test(colorOrBlock));
+    }
+
     _isFalseOrBooleanBlock (block) {
         if (this._isFalse(block)) {
             return true;
@@ -371,6 +381,18 @@ class RubyToBlocksConverter {
         return /_variable$/.test(this._getBlockType(block));
     }
 
+    _isRubyStatement (block) {
+        return this._isBlock(block) && block.opcode === 'ruby_statement';
+    }
+
+    _getRubyStatement (block) {
+        if (this._isRubyStatement(block)) {
+            const textBlock = this._context.blocks[block.inputs.STATEMENT.block];
+            return textBlock.fields.TEXT.value;
+        }
+        return null;
+    }
+
     _createBlock (opcode, type, attributes = {}) {
         const block = Object.assign({
             id: Blockly.utils.genUid(),

src/lib/ruby-to-blocks-converter/pen.js

@@ -0,0 +1,89 @@
+/* global Opal */
+import _ from 'lodash';
+
+/**
+ * Pen converter
+ */
+const PenConverter = {
+    onSend: function (receiver, name, args, rubyBlockArgs, rubyBlock) {
+        let block;
+        if ((this._isSelf(receiver) || receiver === Opal.nil) && !rubyBlock) {
+            switch (name) {
+            case 'pen_clear':
+                if (args.length === 0) {
+                    block = this._createBlock('pen_clear', 'statement');
+                }
+                break;
+            case 'pen_stamp':
+                if (args.length === 0) {
+                    block = this._createBlock('pen_stamp', 'statement');
+                }
+                break;
+            case 'pen_down':
+                if (args.length === 0) {
+                    block = this._createBlock('pen_penDown', 'statement');
+                }
+                break;
+            case 'pen_up':
+                if (args.length === 0) {
+                    block = this._createBlock('pen_penUp', 'statement');
+                }
+                break;
+            case 'pen_color=':
+                if (args.length === 1 && this._isColorOrBlock(args[0])) {
+                    block = this._createBlock('pen_setPenColorToColor', 'statement');
+                    this._addFieldInput(block, 'COLOR', 'colour_picker', 'COLOUR', args[0], '#43066f');
+                }
+                break;
+            case 'color=':
+            case 'saturation=':
+            case 'brightness=':
+            case 'transparency=':
+                if (args.length === 1 && this._isNumberOrBlock(args[0])) {
+                    block = this._createBlock('pen_setPenColorParamTo', 'statement');
+                    this._addFieldInput(
+                        block, 'COLOR_PARAM', 'pen_menu_colorParam', 'colorParam',
+                        name.replace('=', ''), 'color'
+                    );
+                    this._addNumberInput(block, 'VALUE', 'math_number', args[0], 50);
+                }
+                break;
+            case 'pen_size=':
+                if (args.length === 1 && this._isNumberOrBlock(args[0])) {
+                    block = this._createBlock('pen_setPenSizeTo', 'statement');
+                    this._addNumberInput(block, 'SIZE', 'math_number', args[0], 1);
+                }
+                break;
+            }
+        }
+        return block;
+    },
+
+    // eslint-disable-next-line no-unused-vars
+    onOpAsgn: function (lh, operator, rh) {
+        let block;
+        if (this._isRubyStatement(lh) && operator === '+' && this._isNumberOrBlock(rh)) {
+            const code = this._getRubyStatement(lh);
+            switch (code) {
+            case 'self.pen_size':
+                block = this._changeBlock(lh, 'pen_changePenSizeBy', 'statement');
+                this._addNumberInput(block, 'SIZE', 'math_number', rh, 1);
+                break;
+            case 'self.color':
+            case 'self.saturation':
+            case 'self.brightness':
+            case 'self.transparency':
+                block = this._changeBlock(lh, 'pen_changePenColorParamBy', 'statement');
+                this._addFieldInput(
+                    block, 'COLOR_PARAM', 'pen_menu_colorParam', 'colorParam',
+                    code.replace('self.', ''), 'color'
+                );
+                this._addNumberInput(block, 'VALUE', 'math_number', rh, 10);
+                break;
+            }
+        }
+        return block;
+    }
+};
+
+export default PenConverter;

src/lib/ruby-to-blocks-converter/sensing.js

@@ -2,9 +2,6 @@
 import _ from 'lodash';
 import {KeyOptions} from './constants';
 
-/* eslint-disable no-invalid-this */
-const ColorRegexp = /^#[0-9a-fA-F]{6}$/;
-
 const DragMode = [
     'draggable',
     'not draggable'
@@ -47,16 +44,13 @@ const SensingConverter = {
                 }
                 break;
             case 'touching_color?':
-                if (args.length === 1 &&
-                    (this._isBlock(args[0]) || (this._isString(args[0]) && ColorRegexp.test(args[0].toString())))) {
+                if (args.length === 1 && this._isColorOrBlock(args[0])) {
                     block = this._createBlock('sensing_touchingcolor', 'value_boolean');
                     this._addFieldInput(block, 'COLOR', 'colour_picker', 'COLOUR', args[0], '#43066f');
                 }
                 break;
             case 'color_is_touching_color?':
-                if (args.length === 2 &&
-                    (this._isBlock(args[0]) || (this._isString(args[0]) && ColorRegexp.test(args[0].toString()))) &&
-                    (this._isBlock(args[1]) || (this._isString(args[1]) && ColorRegexp.test(args[1].toString())))) {
+                if (args.length === 2 && this._isColorOrBlock(args[0]) && this._isColorOrBlock(args[1])) {
                     block = this._createBlock('sensing_coloristouchingcolor', 'value_boolean');
                     this._addFieldInput(block, 'COLOR', 'colour_picker', 'COLOUR', args[0], '#aad315');
                     this._addFieldInput(block, 'COLOR2', 'colour_picker', 'COLOUR', args[1], '#fca3bf');