Positioning Zoom-Controls and TrashCan

[Stefan Höhn]

I am maintaining the Blocklies within openHAB and I was asked by my users if I could add the zoom Controls. Adding it was a piece of cake and it works like a charm.

Unfortunately the place where it is added in the workspace is on the bottom right corner where we already have an icon that lets the user switch to an alternative screen to view the generated code. Now these icon's conflict with each other like so:

It is becoming a bit better when I add the trash can but it is still conflicting

I looked into zoom_control.js but I did not find any way to move it upwards a bit. Does anyone have an idea if and how this could be solved?

TIA

Stefan

PS: btw, is it intended that the trash can and zoom controls are right aligned instead of centered?

[Beka Westberg]

Hello Stefan :D

I don't believe we currently provide a way to change the position of the trashcan / zoom controls relative to the bottom right corner :/

However, we do provide a positionables API that allows you to add your own buttons and other things to the workspace. For example, the zoom-to-fit plugin adds a new button above the zoom controls. Do you think this could work for your use-case?

I hope that gives you some place to start! If you have any further questions we're happy to help =)

--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/de1b9828-fe8b-4cf5-812d-dc15eb925670n%40googlegroups.com.

[Stefan Höhn]

Thanks Beka for the response,

I looked at the code here https://github.com/google/blockly-samples/blob/master/plugins/zoom-to-fit/src/index.js  in particular at the position function but I don't quite get it. 

Would it be possible to add the zoom-to-fit-button not above but below the other icons? If yes, I could add a button below the others which basically is invisible and does nothing and would therefore push the others upwards.

Or could I add my (invisible) button first and then only afterwards the zoom buttons are added and bump themselves up ?

-Stefan

[Beka Westberg]

I haven't tested it, but they should move yeah! For example, in the trashcan there's a call to bumpPositionRect which makes sure the position of the trashcan doesn't overlap with anything that has already been positioned.

I don't *think* you'd even need to "add an invisible button". I think you can just return a bounding rectangle and everything will move out of the way. But this is really one of the APIs I'm least familiar with :/

I hope that helps! If you have any further questions please reply!
--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/1aa56da9-0c68-4079-801d-85aa575e62e8n%40googlegroups.com.

[fu6...@gmail.com]

Hello, hope this helps.

ZoomControls
https://github.com/google/blockly/blob/61322294da70c770b32abb28b9d695af75f61a16/core/zoom_controls.js#L299

Trashcan
https://github.com/google/blockly/blob/61322294da70c770b32abb28b9d695af75f61a16/core/trashcan.js#L409

module$exports$Blockly$ZoomControls.ZoomControls.prototype.position=function(a,b){
    //etc...
   
    this.top_=b.top;
    this.left_=b.left;
   
    var ToolboxDiv = document.getElementsByClassName("blocklyToolboxDiv blocklyNonSelectable");
    if (ToolboxDiv) {
        this.top_  += 0;
        this.left_ += 0;
    }
   
    //etc...
};

module$exports$Blockly$Trashcan.Trashcan.prototype.position=function(a,b){
    //etc...

    this.top_=b.top;
    this.left_=b.left;

    var ToolboxDiv = document.getElementsByClassName("blocklyToolboxDiv blocklyNonSelectable");
    if (ToolboxDiv) {
        this.top_ += 0;
        this.left_ += 0;
    }    
   
    //etc...
}};

[Stefan Höhn]

How nice is that? 🎉 Even though I had mentioned we solved the problem a different way you still went forward and provided a way to allow this. Very nice!

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/xqpd4mWDat0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/5b94a498-593b-4942-92b7-5a246c0e200fn%40googlegroups.com.