Need help in creating workspace like appinventor

All of our modifications to Blockly are in blocklyeditor/src/. The code you're looking for is in workspace_svg.js because it overrides the version in Blockly's workspace_svg.js.

1 Like

@ewpatton

in workspace_svg.js i found this which could overide blockly as u told above

Blockly.WorkspaceSvg.prototype.resize = (function(resize) {

  return function() {

    //resize.call(this);

    resize.call(Blockly.getMainWorkspace());

    if (Blockly.getMainWorkspace().warningIndicator_ && Blockly.getMainWorkspace().warningIndicator_.position_) {

      Blockly.getMainWorkspace().warningIndicator_.position_();

    }

    if (Blockly.getMainWorkspace().backpack_ && Blockly.getMainWorkspace().backpack_.position_) {

      Blockly.getMainWorkspace().backpack_.position_();

    }

    

    return Blockly.getMainWorkspace();

  };

})(Blockly.WorkspaceSvg.prototype.resize);

This is workspace1

This is workspace2

here i use two workspaces, on screen load workspace1 is working perfect while the other is invisible, and on a button click which is in violet colour the workspace2 should visible and workspace one should invisible but nothing is seen on the screen when workspace2 is visible as in the image above

what i tried to make visibilities is

var l = ['blocklyDivforjs','blocklyDivformedia'];

var r = ['blockyworkspace','blockyworkspace1'];

for(let t=0; t<l.length; t++){

    

mainworkspace1.push("<HERE I PUSH CREATED WORKSPACE>");

   

}

Blockly.WorkspaceSvg.prototype.resize();

mainworkspace1[0].activate();

mainworkspace1[1].setVisible(false);

document.getElementById('mm').setAttribute('hidden','hidden');

mainworkspace1[0].setVisible(true);

document.getElementById('nn').removeAttribute('hidden');

//this is the first button in blue colour

  document.getElementById('kk1').addEventListener('click',function(){

    mainworkspace1[0].activate();

    mainworkspace1[0].setVisible(true);

    document.getElementById('nn').removeAttribute('hidden');

    mainworkspace1[1].setVisible(false);

    document.getElementById('mm').setAttribute('hidden','hidden');

Blockly.WorkspaceSvg.prototype.resize();

    

    Blockly.Backpack.contents = calla();

        

  });

//this is the second button in violet colour

  document.getElementById('kk2').addEventListener('click',function(){

    mainworkspace1[1].activate();

    mainworkspace1[1].setVisible(true);

    document.getElementById('mm').removeAttribute('hidden');

    mainworkspace1[0].setVisible(false);

    document.getElementById('nn').setAttribute('hidden','hidden');

Blockly.WorkspaceSvg.prototype.resize();

        

    Blockly.Backpack.contents = callb();

});

Hoping early and positive reply..
Thank you..

@ewpatton

I am very sorry I could not solve it even after u told the solution as I am confused a lot here on how to make it could you make me clear why it happens like that and what to do I mean in the code please

@ewpatton

Initially when i load both workspaces by visibling them and toggle the visibility, everything works fine.

But when i toggle workspaces, by initially keeping it invisible. It is not toggling fine, either of the sheets get visibility problem.

need your help please
thank you

@ewpatton

On screen resizes if any worksheet is visible only that is visible, works fine not the other one

If both worksheet is invisible no worksheet is visibiling

You told me the problem in workspace svg.js
I didn't find any thing, can you tell me which code

I tried this code Blockly. workspacesvg.prototype.resize function while visibiling worksheets but not worked

Please help me

You may want to look at the code in BlocklyPanel.makeActive and adapt it to your situation. That code also gets run when switching to the blocks editor from a different screen.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

Hai @ewpatton

in here you told me to check a Blocklypanel.makeActive class and adapt it to my requirement but i cannot to it can you please help me with that in javascript

also when a block is drag and dropped on the backpack block is added to the backpack but is not returning to its previous position as the start paramater in onmouseUp event of backpack is {x:"undefined",y:"undefined"}

could you please help with this two issues

I reopened the topic again for you
Taifun

@Taifun
@ewpatton

Thank you for your kind response

Can u tell me how can I achive this please

hai @ewpatton

could you please help me with this

Short of doing the work for you (which I won't), I'm not certain what exactly you need. If you look at the implementation of the function you will see how we address the issue of switching between non-visible workspaces. You will need to adapt that logic to your own system.

sorry for the inconvenience, i will explain point in detail

as you said

i found BlocklyPanel.makeActive in BlocklyPanel.java file at makeActive() class
that code i implemented in javascript window resize event listener
the code is given below

 1.   window.addEventListener('resize',function(e){
 2. 
 3. Blockly.mainWorkspace.refreshBackpack();
 4.   if (Blockly.mainWorkspace.pendingRender) {
 5.     Blockly.mainWorkspace.pendingRenderFunc();
 6.   }
 7. // Trigger a screen switch to send new YAIL.
 8.var parts = Blockly.mainWorkspace.formName.split(/_(.+)/);  // Split string on first _
 9.   if (Blockly.ReplMgr.isConnected()) {
10.      Blockly.ReplMgr.pollYail(Blockly.mainWorkspace);
11.   }
12.    Blockly.mainWorkspace.fireChangeListener(new AI.Events.ScreenSwitch(parts[0], parts[1]));
13.});

in the above code in line number 4. Blockly.mainWorkspace.pendingRender is returns null

with this code the invisible worksheet is not getting visible after window resize when worksheet is invisible

====================================================================

====================================================================

My another problem is

when a block is drag and dropped on the backpack then the block is added to backpack.
But it is not returning to its previous position

Blockly.Backpack.prototype.onMouseUp = function(e, start){

 start.x = e.clientX;

 start.y = e.clientY;

  var xy = Blockly.selected.getRelativeToSurfaceXY();

  var diffXY = goog.math.Coordinate.difference(start, xy);

  Blockly.selected.moveBy(diffXY.x, diffXY.y);

  Blockly.getMainWorkspace().render();

  console.log(diffXY,xy);

  

};

In the above code the start paramater of Blockly.Backpack.prototype.onMouseUp event the value in start parameter is got as `{x:"undefined",y:"undefined"}

Is there any solution to rectify it

Hoping with a positive response
Regards @suryaprakash_lokula

Hai @ewpatton could you please help me I have explained everything above

what exactly you want to do?

app inventor workspace is designed for app inventor.

you can also create your own workspace with new features and new blocks also.

Regarding your first item, you may also want to make sure you invoke the resize() method before calling render().

Regarding your second item, if you're using a newer version of Blockly it's possible that the same information is no longer sent to the backpack as before. You'll have to look at the version of Blockly you're using and compare it to the version App Inventor is built with to determine what changed there.

1 Like

Thank you @ewpatton

i have tried that but not working

window.addEventListener('resize',function(e){

  workspace.refreshBackpack();
  workspace.resize();
  workspace.pendingRender = true
    if (workspace.pendingRender) {
      workspace.pendingRenderFunc();
    }
    // Trigger a screen switch to send new YAIL.
    var parts = workspace.formName.split(/_(.+)/);  // Split string on first _
   
    workspace.fireChangeListener(new AI.Events.ScreenSwitch(parts[0], parts[1]));
});

No i am using the old version of blockly which is used by appinventor

@ewpatton

Hai
could you please tell me how clearly
Regards @suryaprakash_lokula