ol-ext icon indicating copy to clipboard operation
ol-ext copied to clipboard

EditBar interaction sub bar

Open ThingEngineer opened this issue 10 months ago • 1 comments

I would like to add a sub bar to the native 'Point' and 'LineString' interaction controls on an EditBar. The purpose is to set a subType variable for the parent interactions. The subType is used to apply a conditional style. ie interaction='DrawPoint' subType='Purple Hexagon'.

Currently I am using an external radio button group to set the subType but I would like the UX to be consistent. I can disable the DrawPoint interaction on the EditBar and then add my own Toggle Draw interaction with my custom sub bar. However, this messes up the order of the EditBar icons.

I would prefer to add the sub bar to the native EditBar interaction control but have been successful in doing so.

Screenshot 2024-04-19 at 4 20 42 PM Show is a custom 'Point' interaction control with a submenu on the main control bar, added after the EditBar. I would like the native EditBar 'Point' control (to the right of select control) to have this submenu.

ThingEngineer avatar Apr 19 '24 21:04 ThingEngineer

Hello, You just have to create a subbar and add it to the control. NB: the LineString button allready has a subbar, you can reuse it if you need it.

// Add a sub bar to the Point  button
var sbar = new ol.control.Bar()
edit.getControls()[1].setSubBar(sbar)
// Add new controls
sbar.addControl(new ol.control.Toggle({html: 'T' }))
// Add a sub bar to the LineString nutton
sbar = edit.getControls()[2].getSubBar()
// Add new controls
sbar.addControl(new ol.control.Toggle({html: 'T' }))

You can retreave the button using it's place in the bar or with it's name:

// Get draw point interaction in the bar (indice 1)
edit.getControls()[1]
// or get draw point interaction button by name
edit.getControlsByName('DrawPoint')[0]

Viglino avatar Apr 23 '24 06:04 Viglino