Custom Collapse/Expand Icon

75 views
Skip to first unread message

Taurus Rico

unread,
Dec 19, 2024, 11:14:22 AM12/19/24
to Blockly
Hello everyone,

I am trying to implement a custom coallpse and expand Icon.
For now ithe icon looks like this:
import * as Blockly from "blockly/core";

class myIcon extends Blockly.icons.Icon {
getType() {
return new Blockly.icons.IconType('collapse_icon');
}
getSize() {
return new Blockly.utils.Size(16, 16);
}
getWeight() {
return 1;
}
initView(pointerdownListener) {
if (this.svgRoot) return; // Already initialized.
// This adds the pointerdownListener to the svgRoot element.
// If you do not call `super` you must do this yourself.
super.initView(pointerdownListener);
Blockly.utils.dom.createSvgElement(
Blockly.utils.Svg.CIRCLE,
{
'class': 'my-css-class',
'r': '8',
'cx': '8',
'cy': '8',
},
this.svgRoot // Append to the svgRoot.
);
}
onClick() {
this.sourceBlock.setCollapsed(true);
}
isShownWhenCollapsed() {
return true;
}
updateCollapsed() {
// By default icons are hidden when the block is collapsed. We want it to
// be shown, so do nothing.
}
}
Blockly.icons.registry.register(
new Blockly.icons.IconType('collapse_icon'), myIcon);

And I tried to add it to my Block like this:
"type": "zustand_group",
"tooltip": "",
"helpUrl": "",
"message0": "%1 %2 %3 %4 %5 %6",
"args0": [
{
......
}
],
"colour": '#79A6D9',
"icon": {"collapse_icon" : ""},
"mutator": "zustand_mutator",
"inputsInline": true,
'extensions': ["zustand_group_color_extension"],
},

Well it's not working like this. So my question is, how do I add the icon to the block? And is it even possible to add icons to JSON defined blocks? I read that it wasn't possible a while ago in this conversation.

Thanks in advance!

Ronald Bourret

unread,
Dec 19, 2024, 11:52:54 AM12/19/24
to blo...@googlegroups.com
You can't specify an icon with JSON. (This is what the previous conversation was saying.) Instead, use the Block.addIcon method. For example:

const zustandGroupJson = {
   // define rest of block here with JSON
};

Blockly.Blocks['zustand_group'] = {
  init: function() {
    this.jsonInit(zustandGroupJson);
    this.addIcon(new myIcon(this));
  }
};

You'll also need to add a constructor to your icon class that accepts the block:

class myIcon extends Blockly.icons.Icon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
  ...
}

Ronald Bourret
Technical Writer (Provided by Synergis)


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/e86f43c7-e6e6-4d22-982c-c5e6fa08270dn%40googlegroups.com.

Christopher Allen

unread,
Dec 24, 2024, 5:18:16 AM12/24/24
to blo...@googlegroups.com
Hi Taurus,
 
 So my question is, how do I add the icon to the block? And is it even possible to add icons to JSON defined blocks? I read that it wasn't possible a while ago in this conversation.

My colleague Ron has already provided solution to adding icons to JSON-defined blocks, but simpler way of achieving this would be to create and register an extension that adds the icon.  Once you've done that you need merely specify the extension by name in the JSON block definition:

// This extension adds an icon to the block.
Blockly.Extensions.register(
  'add_icon_extension',
  function() { // this refers to the block that the extension is being run on
    this.addIcon(new myIcon(this));
  });

Then you need only add one line to any JSON block definition to use the icon:

{
 // ...
 extensions: ['add_icon_extension'],
}

Best wishes. 

Taurus Rico

unread,
Jan 7, 2025, 7:18:57 AM1/7/25
to Blockly
Thanks for your answers! Works perfectly fine and I learned something new there.

A happy new year and best wishes ~ Rico
Reply all
Reply to author
Forward
0 new messages