javascriptvisual-programmingblockly

how to add a click event in blockly's blocks?


I am working on blockly, I am having a scenario that I am having a block which is having an Image, I want to click on that Image and fire an event. I am not sure how can I do that. I have tried blcokly's documentation but there is no such mention. they are only providing onchange event on whole block, while an Image will be only a part of that block.

Any Idea How can I achieve this?

Thanks in advance.


Solution

  • I have got an idea to extend the field_image.js file, I have inherited the necessary files and in the init function I am adding an eventlistenr in the SVG element. That's how I made image clickable. following is the code -

    MyFieldImage.prototype = new Blockly.FieldImage();
    MyFieldImage.prototype.constructor = MyFieldImage;
    function MyFieldImage(src, width, height, opt_alt,isClickListener){
        this.clickEventListener  = isClickListener;
        this.sourceBlock_ = null;
      // Ensure height and width are numbers.  Strings are bad at math.
      this.height_ = Number(height);
      this.width_ = Number(width);
      this.size_ = new goog.math.Size(this.width_,
          this.height_ + 2 * Blockly.BlockSvg.INLINE_PADDING_Y);
      this.text_ = opt_alt || '';
      this.setValue(src);
    }
    
    MyFieldImage.prototype.init = function(block) {
      if (this.sourceBlock_) {
        // Image has already been initialized once.
        return;
      }
      this.sourceBlock_ = block;
      // Build the DOM.
      /** @type {SVGElement} */
      this.fieldGroup_ = Blockly.createSvgElement('g', {}, null);
      if (!this.visible_) {
        this.fieldGroup_.style.display = 'none';
      }
      /** @type {SVGElement} */
      this.imageElement_ = Blockly.createSvgElement('image',
          {'height': this.height_ + 'px',
           'width': this.width_ + 'px'}, this.fieldGroup_);
      this.setValue(this.src_);
      if (goog.userAgent.GECKO) {
        /**
         * Due to a Firefox bug which eats mouse events on image elements,
         * a transparent rectangle needs to be placed on top of the image.
         * @type {SVGElement}
         */
        this.rectElement_ = Blockly.createSvgElement('rect',
            {'height': this.height_ + 'px',
             'width': this.width_ + 'px',
             'fill-opacity': 0}, this.fieldGroup_);
      }
      block.getSvgRoot().appendChild(this.fieldGroup_);
    
      // Configure the field to be transparent with respect to tooltips.
      var topElement = this.rectElement_ || this.imageElement_;
      topElement.tooltip = this.sourceBlock_;
      Blockly.Tooltip.bindMouseEvents(topElement);
      if(this.clickEventListener){
        this.imageElement_.addEventListener("click", callingClick); 
      }
    
    };
    

    after this in the block you have to add myFieldImage instead of using fieldImage. and isClickListener paramaeter will be passed from the block. following is the code -

    Blockly.Blocks['MyBlock'] = {
              init: function() {
    
                this.appendDummyInput()
                    .appendField(new MyFieldImage("https://www.gstatic.com/codesite/ph/images/star_on.gif", 15, 15, "*",true));
                this.setTooltip('');
                this.setHelpUrl('http://www.example.com/');
              }
            };