ModifiyFeature Control with an array of vectors

Question

I want to put all the drawn vectors in an array and make editable only those which id match with a shapeId var. Do I have to add a new control in the for loop or can I setOptions of the feature to editable?

function initControls(){
 colorPoly = document.getElementById('color_picker_'+shapeId).value;

 var shapeStyle = {
    strokeOpacity: 1,
    strokeWidth: 1,
    fillColor: colorPoly,
    fillOpacity: 0.45,
 }

 var shapeStyle2 = {
    strokeOpacity: 1,
    strokeWidth: 1,
    fillColor: colorPoly,
    fillOpacity: 0.45,
    pointRadius: 5,
 }

 var styleMap = new OpenLayers.StyleMap({
    "default": shapeStyle,
    "temporary": shapeStyle,
    "select": shapeStyle,
    "vertex": shapeStyle2
 }, {extendDefault: false});

 var newShape = new OpenLayers.Layer.Vector( "Editable",{
        styleMap: styleMap
    });


 newShape.events.register("sketchcomplete", newShape, function(){
        map.addLayer(newShape);
        newShape.id = shapeId;
        createdShapes.push(newShape);
        alert(createdShapes.length)
        toggle = 1;
    });

 editingToolBar = new OpenLayers.Control.Panel({
        displayClass: 'customEditingToolbar',
        allowDepress: true
    });

 var draw = new OpenLayers.Control.DrawFeature(
    newShape, OpenLayers.Handler.Polygon,
    {
        title: "Draw Feature",
        displayClass: "olControlDrawFeaturePolygon",
        multi: true
    });
 for (var i = 0; i < createdShapes.length; i++){
        if (createdShapes[i].id == shapeId){
            var edit = new OpenLayers.Control.ModifyFeature(createdShapes[i],
            {
                title: "Modify Feature",
                displayClass: "olControlModifyFeature",
                vertexRenderIntent: "vertex"

            });
        }
    }
 editingToolBar.addControls([edit, draw]);
 map.addControl(editingToolBar);
}

What is the right way to do it? Thank you very much for your help.

Answer 1

Try to use Button control. For example (not tested):

var editControls = [];

for (var i = 0; i < createdShapes.length; i++){
    if (createdShapes[i].id == shapeId){
        var edit = new OpenLayers.Control.ModifyFeature(
            createdShapes[i], {
                vertexRenderIntent: "vertex"
            }
        );
        editControls.push(edit);
    }
}

compositeEditControl = new OpenLayers.Control.Button({
    title: "Modify Feature",
    displayClass: 'olControlModifyFeature',
    type: OpenLayers.Control.TYPE_TOOL,
    //type: OpenLayers.Control.TYPE_TOGGLE,
    eventListeners: {
        'activate': function(){
            for (var i=0; i<editControls.length; i+=1) {
                editControls[i].activate();
            }
        }, 
        'deactivate': function(){
            for (var i=0; i<editControls.length; i+=1) {
                editControls[i].activate();
            }
        }
    }
});

editingToolBar.addControls([compositeEditControl, draw]);
map.addControl(editingToolBar);