Created: 2018-04-16 14:11:49 -0700 Modified: 2020-02-03 15:13:01 -0800
BasicsSection titled Basics
- Blocks can be editable, movable, and deletable. Unfortunately, if you set a block as uneditable, then it won’t be obvious that it can’t be edited, so users may think there’s an error on their end.
- For the toolbox, if you want a category to be expanded by default, you can modify the XML to include the “expanded” attribute, e.g.
- <category name=“Mission-specific snippets” colour=“120” expanded=“true”>
For most actions in Blockly, there are events that get fired so that you can react to them.
I tried adding an event listener for when the toolbox resized, but there doesn’t seem to be one. There are events some of the time, but not all of the time, so I just ended up using a setInterval call to figure out when the toolbox changed sizes.
Note that eventually, for this specific use-case of trying to see when an element resizes, I could eventually use ResizeObserver (reference), but that’s currently only on Chrome (so there’s a polyfill in the meantime (reference)).
Drag eventsSection titled Drag events
At one point in early 2020, I wanted to be able to detect when the user had stopped dragging a block, but I couldn’t find any way to do this. The Blockly team did add dragStop (reference), but the only way that’s accessible is through BlockDragger (which has a function for fireDragEndEvent), and the only way you get one of those is via Gesture, which only gets created by an event (and then it’s sort of a singleton until it gets disposed).
this.state.workspace.addChangeListener is not suitable for detecting changes the way I want since it triggers while the user is dragging.
Checking if the flyout’s visibility changedSection titled Checking if the flyout’s visibility changed
This uses events to get us a little closer to whether the visibility changed, but there isn’t an event specific to the visibility changing, so we check to see if you clicked a category and then inspect the visibility ourselves:
Mutators are how you can change a block’s basic functionality/shape:
For example, if you want a variable number of arguments, you can use a mutator. Examples of blocks like this are:
If you want to be able to reuse the mutator in multiple blocks, you can register the mutator as was done in blocks/logic.js (reference)
I did this in Bot Land once so far:
TroubleshootingSection titled Troubleshooting
Functions from the toolbox do not result in code changesSection titled Functions from the toolbox do not result in code changes
- This is a bug in your code, not Blockly’s
- This is because functions are collected in Blockly[YOUR_LANGUAGE].definitions_ to be emitted later from Blockly[YOUR_LANGUAGE].finish
- I wrote a note only visible to myself about the full write-up here.