Draw Widget: Skip loading DrawBox and instead show Polyline and Polygon icons directly

DavidPaulus

When the user clicks to open the Draw Widget, it loads the DrawBox from which the type of drawing can be selected, e.g., Polyline, Polygon and others. I want to only include Polyline and Polygon drawings and can do that in the Draw Widget Widget.html via:

<div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props='types:["polyline", "polygon"],showClear:false' style="margin-top:5px;"></div>

But what I actually want is to skip the selection of Polyline and Polygon altogether and show all available Polyline and Polygon icons directly when opening the Draw Widget, i.e., user clicking it.

So far unable to fully understand the call structure in DrawBox and SymbolChoolser, where I believe the changes need to be made?

Many thanks in advance,

David

 

DavidPaulus

A first step could be to only enable Polylines to be selectable in the Draw Widget Widget.html.

<div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props='types:["polyline"],showClear:false' style="margin-top:5px;"></div>

 

Then add Polygon symbols to jimu.js/dijit/SymbolsInfo/line.json.

[
    {
        "tags":
        [
            "solid"
        ],
        "title": "Test1 thin",
        "style": "esriSLSSolid", 
        "color":
        [
            48,
            133,
            3,
            255
        ],
        "width": 1,
        "name": "Test1",
        "type": "esriSLS"
    },
    {
        "tags":
        [
            "solid"
        ],
        "title": "Test2 Thin",
        "style": "esriSLSSolid",
        "color":
        [
            244,
            0,
            0,
            255
        ],
        "width": 1,
        "name": "Test2",
        "type": "esriSLS"
    },
    {
        "tags":
        [
            "solid"
        ],
        "title": "Other Thin",
        "style": "esriSLSSolid",
        "color":
        [
            104,
            107,
            106,
            255
        ],
        "width": 1,
        "name": "Other",
        "type": "esriSLS"
    },
    {
        "tags":
        [
            "opaque",
            "blue"
        ],
        "title": "Aqua",
        "style": "esriSFSSolid",
        "color":
        [
            203,
            207,
            8,
            150
        ],
        "name": "Aqua 6",
        "type": "esriSFS",
        "outline":
        {
            "style": "esriSLSSolid",
            "color":
            [
                0,
                0,
                0,
                0
            ],
            "width": 1.5,
            "type": "esriSLS"
        }
    },
    {
        "tags":
        [
            "opaque"
        ],
        "title": "Orange",
        "style": "esriSFSSolid",
        "color":
        [
            156,
            155,
            151,
            150
        ],
        "name": "Orange 6",
        "type": "esriSFS",
        "outline":
        {
            "style": "esriSLSSolid",
            "color":
            [
                0,
                0,
                0,
                0
            ],
            "width": 1.5,
            "type": "esriSLS"
        }
    }
]

 

This displays the polygons side-by-side with the line icons. But those polygons are not drawable as I need to connect them to the 'fill section' functions within jimu.js/dijit/SymbolChooser.js. And this I cannot seem to get working.