nbudin / react-blockly

A React component that embeds a Blockly visual programming editor.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Block Limitation on Toolbox

DuyTungHa opened this issue · comments

Hi. Do you know how to limit the number of blocks allowed for a particular type?
What I did is that I check the number of blocks on the workspace and if it exceeds the block limit I will set the shadow attribute of the block to true in the toolboxCategories array.
But somehow the Editor just didn't update according to the state change and the block is still visible..
Maybe there is a better way to implement this.

Hmm, I'm not sure if this is a bug in updating the toolbox or in the use of shadow. What happens if you filter the toolboxCategories so that the block isn't in there at all if it has reached its usage limit? Does the block disappear from the toolbox?

The block still doesn't disappear from the toolbox when it's removed from the tooboxCategories array...

Hi, any updates on this issue ?

I've just added some test code to dev-index.jsx to attempt to reproduce this. Here is what it attempts to do:

  • As before, it adds a new category to the toolbox 2 seconds after rendering the Blockly workspace.
  • New behavior: 4 seconds after rendering the workspace, it removes a block from the category it added.
  • New behavior: 10 seconds after rendering the workspace, it removes the entire category.

Here's what I see happening when I run it:

  • After 2 seconds, the category is added (as I'd expect).
  • I click on the category and see 2 blocks (again, as I'd expect).
  • After 4 seconds, the category is de-selected from the toolbox, but I can still see it open with the 2 blocks in it.
  • If I click on the name of the category again in the toolbox, now I see only 1 block.
  • After 10 seconds, the category disappears (as I'd expect).

What it seems like is that Blockly is detecting the change, but it keeps a copy of the previously-open category in memory and displays it until you change categories in the toolbox.

Does this match what you're seeing? If it's possible for you to create a gist or a jsFiddle or something to let me see what's happening for you, I'd appreciate it.

Hey @nbudin ! The toolbox is working properly now. Sorry I somehow messed up with the state management in my component. Thank you for your reply.