Zooming in on specific block

765 views
Skip to first unread message

Revan

unread,
Mar 24, 2017, 5:04:02 AM3/24/17
to Blockly
Hi,

I want to zoom in on specific block so it will be in the center of view ( so it's like jumping between specific blocks ).
I am currently doing sth like this but it does not work correctly:

var coordinates = block.getRelativeToSurfaceXY();
workspace.zoom(coordinates.x, coordinates.y, 1);

I would appreciate any help.

Rachel Fenichel

unread,
Mar 30, 2017, 5:11:48 PM3/30/17
to Blockly
(I'm assuming this is related to this github issue: https://github.com/google/blockly/issues/1013)

I don't have a specific answer on how to do this, but I can give you some information about our coordinate systems.

Blockly has an invisible workspace of infinite size, with an origin that is set when you first open an empty workspace (the black dot in this image).


Blocks are placed on the workspace, and their positions are in "workspace coordinates": they are relative to the workspace origin, and they don't change when you zoom the view.  BlockSvg:getRelativeToSurfaceXY() returns workspace coordinates.  Workspace coordinates can be negative in both X and Y.


"Workspace units" refer to measurements on the workspace that ignore the origin.  You might use workspace units to describe the distance between two blocks or two connections.


There is a viewport into the workspace, which may be moved around or zoomed in.  The scrollbars show the position of that viewport within the allowable range.  


Although the Blockly workspace is of infinite size, you can't move the viewport infinitely far away from the blocks in the workspace.  We add a border around all of the blocks, such that you can scroll half-a-screen past the left-most block.  Same thing for up, down, and right.


So this is as far as I can scroll left:

If I zoom out, the block is in the same position, so effectively more of the workspace is visible:

Measurements on the screen are generally done in pixels.  For instance, the width of the viewport in pixels didn't change between the two previous images.  All of the members of workspace metrics are in pixel units (as far as I know).  


Conversion from pixels to workspace units can be done by multiplying by workspace.scale.  "Pixel units" means that we're specifying a distance on the screen, but not an origin.  How far the mouse has moved during a drag would be measured in pixel units.

Revan

unread,
Mar 30, 2017, 5:29:04 PM3/30/17
to Blockly
Ok thanks for explanation. What about those two methods:

workspace.zoom(x, y, 1)
scrollbar.set(x, y)

They require workspace coordinates or pixel coordinates?

Rachel Fenichel

unread,
Mar 30, 2017, 7:30:18 PM3/30/17
to Blockly
Scrollbar set looks like it takes pixels.  Workspace zoom(x, y, 1) is probably not what you want, since it's zooming in by one "step" every time you call it.  If you call it with (x, y, 0) it'll short-circuit because the scale hasn't changed.  Scrollbar set is probably the right function to call.

Revan

unread,
Mar 31, 2017, 2:26:56 AM3/31/17
to Blockly
Ok so what are the maximum coordinates for scrollbar? Do they depend on current workspace scale?

picklesrus

unread,
Mar 31, 2017, 2:53:57 PM3/31/17
to Blockly
Off the top of my head, yes, I believe it does depend on scale.   

Over here there's a code snippet where someone seems to have gotten something similar working using the scale.

Revan

unread,
Apr 1, 2017, 4:27:07 AM4/1/17
to Blockly
Thanks. It works nicely
Reply all
Reply to author
Forward
0 new messages