Stroke Color when changing stroke dynamically

[hbostic]

I built my own toolbar and create shapes with L.Draw API. Users can select the color of the shape from a color picker. The issue is: User selects polygon or polyline from my UI and selects Blue (any color) and draws a polygon, or a polyline by clicking repeatedly on the map, then dbl clicking to stop. Once the user dbl clicks they are placed in edit mode by which they can change the color, width, and opacity. This works fine

When the user selects the polygon or polyline tool to create another shape, then changes the color to Pink (something other than Blue), then starts to create the shape, as the user clicks the map, the potential line (dotted line) is Pink, when the user creates the line segment, by clicking again, the stroke of the line segment is Blue, if it is a polygon, the fill is Blue as well. Once the user completes the shap by double clicking, the entire shape (stroke and fill) turns Pink as expected.

The functionality would be that the stroke and fill be the selected color rather than the previous color. If I create a third shape without changing the color, the drawing functions as expected, the creation and the final shape are both all Pink

I define my polygon as follows:

var drawPolygonOptions = {
                        showArea: false,
                        shapeOptions: {
                            stroke: true,
                            color: vm.selectedEditOptions.color,
                            weight: vm.selectedEditOptions.size.value,
                            opacity: vm.selectedEditOptions.opacity.value,
                            fill: true,
                            fillColor: null, //same as color by default
                            fillOpacity: vm.selectedEditOptions.opacity.value,
                            clickable: true
                        }
                    };

                    llDrawTool = new L.Draw.Polygon(vm.map, drawPolygonOptions);

[hbostic]

I see what my issue is. When the L.Draw.Polygon is called is calls addHooks and calls this._poly = new L.Polyline([], this.options.shapeOptions); this is when the color is set, subsequent to that, I edit my shape options when a color is selected so the layers option.color is not updated, there for when the line is created in addVertex the previous color is being used. Once I double click and _fireCreatedEvent is called and does var poly = new this.Poly(this._poly.getLatLngs(), this.options.shapeOptions); then the final shape gets the correct color.

For now, I am keying on shapes with _poly and setting the style on that. This addresses my issue but seems fragile

[ddproxy]

@hbostic Do you have anything more to add (or potential PR to help?)

[hbostic]

I have to look, I am using angular so vm just = this in vanilla js

On Wed, Apr 20, 2016, 10:58 PM dungchip88 notifications@github.com wrote:

Please give me the code of this section gmail : dungchip88@gmail.com

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/Leaflet/Leaflet.draw/issues/386#issuecomment-212708562

[dungchip88]

help me @hbostic

[ddproxy]

What you having issues with @dungchip88 ?

[iByteDev]

I have a same problem! I can't config color.

[iByteDev]

Hello, I have solved the problem with the following code:

map.on(L.Draw.Event.CREATED, function (event) { event.layer.options.color = optionColorSelected; var layer = event.layer; drawnItems.addLayer(layer); }); I hope I can help someone.