Continuous toolbox

[fu6...@gmail.com]

Hi, group

I want to use ContinuousToolbox plugin in my project. When I dragged the block to left side as shown in the video, the block was deleted and the flyout showed. Any help would be much appreciated.


  var blocklyWorkspace = document.getElementsByClassName("blocklyFlyout");
      for (var f=0;f<blocklyWorkspace.length;f++) {
            blocklyWorkspace[f].addEventListener('dblclick', function(){
                 Blockly.hideChaff();
                 continuousFlyout.setVisible(false);
       });
  }

  function onWorkspaceChanged(event) {
        if (event.type=="create"&&continuousFlyout.isVisible_==true)
              continuousFlyout.setVisible(false);
        else if (event.type=="toolbox_item_select"&&continuousFlyout.isVisible_==false)
              continuousFlyout.setVisible(true);
  }
  workspace.addChangeListener(onWorkspaceChanged);


fu6...

[Beka Westberg]

Hello!

Before I jump in and try to answer this, I just want to clarify: You're trying to use the continuous toolbox, but you want it to close when the user drags a block out (like a normal flyout)?

Best wishes, and thank you for your question!

--Beka

--
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 on the web visit https://groups.google.com/d/msgid/blockly/51ead1e2-03f0-4c05-adc0-2ad857d6a6ban%40googlegroups.com.

[fu6...@gmail.com]

Hi, Beka

Yes. I tried to modify the continuous toolbox like a normal flyout. Is there a solution to do it?
Thank you.

fu6...

bwes...@google.com 在 2022年9月29日 星期四凌晨4:27:15 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

I do it. But I am not sure if there are bugs. Please help me try it.

Page
https://fustyles.github.io/webduino/LinkIt7697/test_myContinuousToolbox/index.html

Source
https://github.com/fustyles/webduino/tree/master/LinkIt7697/test_myContinuousToolbox

fu6...

fu6...@gmail.com 在 2022年9月29日 星期四上午9:22:58 [UTC+8] 的信中寫道：

Please update the code. 

    function onWorkspaceChanged(event) {
        if ((event.type=="create"||event.type=="click")&&continuousFlyout.isVisible_==true)

            continuousFlyout.setVisible(false);
        else if (event.type=="toolbox_item_select"&&continuousFlyout.isVisible_==false)
            continuousFlyout.setVisible(true);
    }
    workspace.addChangeListener(onWorkspaceChanged);

fu6...@gmail.com 在 2022年9月29日 星期四上午8:41:00 [UTC+8] 的信中寫道：

I set aglobal variable to control the flyout.

var continuousFlyout;
class ContinuousFlyout extends Blockly.VerticalFlyout {

  constructor(workspaceOptions) {
    super(workspaceOptions);
    continuousFlyout = this;
   //etc...
  }
   //etc...
   
}




function start() {

    var media = 'media/';
    workspace = Blockly.inject('blocklyDiv',
        {
            media: media,
            toolbox: document.getElementById('toolbox-categories'),
            zoom:{
                controls: true,
                wheel: false,
                startScale: 1.0,
                maxScale: 3,
                minScale: 0.3,
                scaleSpeed: 1.2
            },
            move: {
                scrollbars: {
                horizontal: true,
                vertical: true
            },
            drag: true,
            wheel: true
            },
            trashcan: true,
            plugins: {
                'flyoutsVerticalToolbox': ContinuousFlyout,
                'toolbox': ContinuousToolbox,    
                'metricsManager': ContinuousMetrics,          
            }
        }
    );

    continuousFlyout.setVisible(false);

    var  flyout   = document.getElementsByClassName("blocklyFlyout");
    for (var f=0;f< flyout.length;f++) {
         flyout[f].addEventListener('dblclick', function(){

              Blockly.hideChaff();
              continuousFlyout.setVisible(false);
        });
    }

    function onWorkspaceChanged(event) {
        if (event.type=="create"&&continuousFlyout.isVisible_==true)
            continuousFlyout.setVisible(false);
        else if (event.type=="toolbox_item_select"&&continuousFlyout.isVisible_==false)
            continuousFlyout.setVisible(true);
    }
    workspace.addChangeListener(onWorkspaceChanged);
   
}



fu6...

fu6...@gmail.com 在 2022年9月29日 星期四清晨6:33:11 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hi, beka

Something wrong after throwing the block to left side as shown in the video. Any help would be appreciated.

Thank you.

fu6...

fu6...@gmail.com 在 2022年9月29日 星期四中午12:59:17 [UTC+8] 的信中寫道：

[Beka Westberg]

Hmmm that is weird! Could you post the full stack trace of the error so we can figure out where it's coming from?

Hopefully with a bit more info we can figure out what's happening!

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/49449160-b40f-4680-80cb-8fad4baf8812n%40googlegroups.com.

[fu6...@gmail.com]

Hi Beka,

I found it always raised an error when dragging a block from toolbox after deleting a block.
I modified the function below to avoid interruption, but this is not a good solution. 

module$exports$Blockly$WorkspaceSvg.WorkspaceSvg.prototype.getGesture=function(a){var b="mousedown"===a.type||"touchstart"===a.type||"pointerdown"===a.type,c=this.currentGesture_;return c?b&&c.hasStarted()?

(console.warn("Tried to start the same gesture twice."),null,null):c:b?

this.currentGesture_=new module$exports$Blockly$TouchGesture.TouchGesture(a,this):null};module$exports$Blockly$WorkspaceSvg.WorkspaceSvg.prototype.clearGesture=function(){this.currentGesture_=null};

I wrote some codes and modified the plugin to achieve this function. 

https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/plugin/ContinuousToolbox/ContinuousFlyout.js#L54
https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/plugin/ContinuousToolbox/ContinuousMetrics.js#L37

https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/plugin/ContinuousToolbox/ContinuousMetrics.js#L63

https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/js/javascript/javascript_function.js#L37

https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/js/javascript/javascript_function.js#L44

https://github.com/fustyles/webduino/blob/e3d14c62a5cd18ca71e26c23baaf754ec1975fa8/LinkIt7697/test_myContinuousToolbox/js/javascript/javascript_function.js#L57

Thank you! You are a kind angel.

fu6...

[Beka Westberg]

Hello again!

I'm sorry but I really don't know what's going on here :/ I tried it out on your demo site, and I tried to dig into it. But without sourcemaps enabled it's difficult to debug a live demo site.

I think it's clear that the gesture isn't getting cleaned up properly (currentGesture_ is still set to an old gesture when it shouldn't be). But why that's happening I don't know :/

If there's anything else I can do to help I'm happy to! But with the current information there's not much to go off of :/

Best wishes,

--Beka

[Maribeth Bottorff]

Hi, I haven't fully dug into the issues you're discussing, but I wanted to mention the Continuous Toolbox is designed to remain open all the time. As such, the ContinuousMetrics class in the plugin recalculates the size of the workspace accordingly. So I think you'd need to change that class if the flyout would be closed again. I hope that gives you another angle to look into debugging this.

Maribeth

[fu6...@gmail.com]

Hi, Beka and  Maribeth~~

Thank you for your kind assistance. I made it, but it needs to modify Blockly.WorkspaceSvg.getGesture function for avoiding interruption. I wiil continue to research this issue. Sorry for my bad English.


Share my code.

Step 1:  ContinuousFlyout.js

class ContinuousFlyout extends Blockly.VerticalFlyout {
    this.autoClose = true;
}

Step 2:  ContinuousMetrics.js

  getViewMetrics(getWorkspaceCoordinates = undefined) {      
      if (toolboxPosition == Blockly.TOOLBOX_AT_TOP || toolboxPosition == Blockly.TOOLBOX_AT_BOTTOM) {

      } else if (toolboxPosition == Blockly.TOOLBOX_AT_LEFT || toolboxPosition == Blockly.TOOLBOX_AT_RIGHT) {
        svgMetrics.width -= toolboxMetrics.width;
      }
  }

  getAbsoluteMetrics() {      
    if (this.workspace_.getToolbox() &&  toolboxPosition == Blockly.TOOLBOX_AT_LEFT) {
        absoluteLeft = toolboxMetrics.width;
    }
  }

Step 3: 

function start() {

    var workspace = Blockly.inject('blocklyDiv',
          {
        media: media,
        //renderer: 'zelos',
        toolbox: toolboxXmlString,

        zoom:{
            controls: true,
            wheel: false,
            startScale: 1.0,
            maxScale: 3,
            minScale: 0.3,
            scaleSpeed: 1.2
        },
        move: {
            scrollbars: {
              horizontal: true,
              vertical: true
            },
            drag: true,
            wheel: true
        },
        trashcan: true,
        plugins: {

          'toolbox': ContinuousToolbox,  
          'flyoutsVerticalToolbox': ContinuousFlyout,
          'metricsManager': ContinuousMetrics,          
        }
    });
     
    var continuousFlyout = Blockly.getMainWorkspace().toolbox_.flyout_;
    continuousFlyout.setVisible(false);

     
    var blocklyWorkspace = document.getElementsByClassName("blocklyFlyout");
    for (var f=0;f<blocklyWorkspace.length;f++) {
        blocklyWorkspace[f].addEventListener('dblclick', function(){

            continuousFlyout.setVisible(false);
            Blockly.hideChaff();
        });        
    }      
     
    function onWorkspaceChanged(event) {
        if ((event.type=="create"||event.type=="click"||event.type=="delete")&&continuousFlyout.isVisible_==true) {

            continuousFlyout.setVisible(false);
        }
        else if (event.type=="toolbox_item_select"&&continuousFlyout.isVisible_==false) {
            continuousFlyout.setVisible(true);
        }

        else if (event.type=="toolbox_item_select"&&(!event.newItem)&&continuousFlyout.isVisible_==true) {
            continuousFlyout.setVisible(false);
        }
    }
    workspace.addChangeListener(onWorkspaceChanged);

}

Best wishes
Fu6...

[fu6...@gmail.com]

Step 4: blockly.min.js

module$exports$Blockly$WorkspaceSvg.WorkspaceSvg.prototype.getGesture=function(a){var b="mousedown"===a.type||"touchstart"===a.type||"pointerdown"===a.type,c=this.currentGesture_;return c?b&&c.hasStarted()?

(console.warn("Tried to start the same gesture twice."),null,null):c:b?

this.currentGesture_=new module$exports$Blockly$TouchGesture.TouchGesture(a,this):null};module$exports$Blockly$WorkspaceSvg.WorkspaceSvg.prototype.clearGesture=function(){this.currentGesture_=null};

Fu6...

fu6...@gmail.com 在 2022年10月7日 星期五上午10:14:57 [UTC+8] 的信中寫道：

[Maribeth Bottorff]

Is your goal to just create a ContinuousFlyout that can autoclose and open like normal? If so then I think you'd be better off avoiding the events route and just undo the changes to the flyout that we made to keep it open forever. I haven't tested this but what I think you'd need to change:

- Don't use ContinuousMetrics; this is what changes the workspace to not be "under" the flyout, but in your case you want the default behavior. Just don't even register this class I think.

- In ContinuousFlyout, get rid of the changes to the `position` method for the same reason.

- Set `autoClose` to true in ContinuousFlyout constructor

Right now your current approach is a mix of keeping the code that keeps it open but then trying to close it automatically. I don't think you should register the double click event on each block to close the flyout, you should let Blockly handle that. But if you feel you need to keep the event, try using the conditionalBind function: https://developers.google.com/blockly/reference/js/blockly.browserevents_namespace.conditionalbind_1_function.md  instead of registering the browser event handler directly. I suspect that this would solve the "same gesture twice" problem, but I don't know for sure.

Good luck!

[fu6...@gmail.com]

Hi, Beka and mari...

After modifying the code as the image shows,  the  gesture  problem has been solved. Where there’s a will, there’s a way. Thank you both.


Step 5: ContinuousToolbox.js



I also modified a part of code.

    function onWorkspaceChanged(event) {
        if ((event.type=="create"||event.type=="click")&&continuousFlyout.isVisible_==true) {

            continuousFlyout.setVisible(false);
        }
        else if (event.type=="toolbox_item_select"&&continuousFlyout.isVisible_==false) {
            continuousFlyout.setVisible(true);
        }
        else if (event.type=="toolbox_item_select"&&(!event.newItem)&&continuousFlyout.isVisible_==true) {

            workspace.toolbox_.clearSelection();
            setTimeout(function(){
                continuousFlyout.setVisible(false);
            }, 10);
        }
    }
    workspace.addChangeListener(onWorkspaceChanged);



Best wishes.
Fu6...

mari...@google.com 在 2022年10月8日 星期六凌晨4:19:19 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hi group:

I wrote a simple program. Hope this helps.

Source code
https://github.com/fustyles/BlocklyResearch/tree/main/Toolbox/myContinuousToolbox1

Example page

https://fustyles.github.io/webduino/LinkIt7697/test_myContinuousToolbox1/index.html

fu6...

fu6...@gmail.com 在 2022年10月16日 星期日下午5:03:51 [UTC+8] 的信中寫道：

[fu6...@gmail.com]

Hi  all,

The Continuous toolbox examples I wrote still generates the error message "Tried to start the same gesture twice" after copying any blocks. Afterward, it may not be possible to drag any blocks from the toolbox. However, after attempting to modify the getGesture function, the issue no longer occurs.  

getGesture(a){
    const b="pointerdown"===a.type,c=this.currentGesture_;
    return c?b&&c.hasStarted()?null:c:b?this.currentGesture_=new Gesture$$module$build$src$core$gesture(a,this):null
}

Hope this helps.

fu6...

fu6...@gmail.com 在 2023年5月27日 星期六中午12:23:25 [UTC+8] 的信中寫道：

[Jemal Kemal]

https://link.in/e6gwUDBv

--

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 on the web visit https://groups.google.com/d/msgid/blockly/f9eee090-c383-4b2c-97c8-b787b7718babn%40googlegroups.com.