controlbar.js: toggleOne does not work for sub-control-bars

[dmcritchie]

Hi,

I am making good use of your controlbar.js utility, and when I create a sub-control-bar (following your exmaple - see attached file), I define it as having "toggleOne: true" (the same as for the main control bar). However, while toggleOne works correctly for the main control bar, when I click on the various sub-control-bar items (e.g., polygon, circle, square), none of them fire ol.control.Bar.prototype.onActivateControl. As a result, the newly activated control is simply added to the previously activated control, which is not what I intended.

Before digging into it much deeper, I thought I'd ask if this is how it is supposed to work (i.e., that toggleOne is only supported for the main control bar), or whether this is a bug.

I'm happy to do more digging, but thought I should check with you first.

Thanks,
Dennis

[Viglino]

Hi,
You pointed out a bug on the insertion of the controls in the bar (there is also one when removing controls... but no one do that :-).
Actually you have to insert controls after the bar has been created and inserted in the map (otherwise, they are not taken correctly into account).
Something like this should work:

var subBar = new ol.control.Bar ({ toggleOne: true });
parentBar.addControl (myControl, subBar);
subBar.addControl (control1);
subBar.addControl (control2);

This will make control1 deactivated when control2 is activated.

I'll try to take the issue on next commit.
Thanks for the feedback.

[dmcritchie]

OK, I dug a little more and figured it out. The order of calls has to be to add the sub-control-bar to the main control bar BEFORE adding any controls to the sub-control-bar. That is, the order has to be:

var mainbar = new ol.control.Bar(
    {   toggleOne: true,    // one control active at the same time
        group: false        // group controls together
    });
map.addControl(mainbar);
// Add editing toolbar
var editButton = new ol.control.Toggle();
// Add editing tools asssociated with the editButton control
var editBar = new ol.control.Bar(
    {   toggleOne: true,    // one control active at the same time
        group: false        // group controls together
    });
mainbar.addControl(editButton, editBar);
// THE ABOVE LINE MUST COME BEFORE THE NEXT LINES.
editBar.addControl( new ol.control.Toggle())
editBar.addControl( new ol.control.Toggle())
.
.
.

None of the examples of a sub-control-bar in map.control.bar.html illustrate the use of toggleOne in this context. And since I was patterning my code after your 'sbar' example, toggleOne did not work for me. You may want to consider adding an example that shows the use of toggleOne with a sub-control-bar.

Otherwise, great tool!

Thanks so much!
Dennis

[dmcritchie]

Oops! Sorry Viglino. I did not see your reply before writing my post. Thanks very much for the confirmation.

Best,
Dennis

[Viglino]

The last commit solve this issue. An example has been added in http://viglino.github.io/ol3-ext/examples/map.control.bar.html.