Change default colors of Draw Widget

675
2
Jump to solution
08-29-2020 08:43 PM
MattPohl
Occasional Contributor II

I am trying to change the default polygon fill using the SimpleFillSymbol class as referenced In this discussion while using WAB version 2.17, but can not seem to make it happen. I have tried several code changes to the postCreate function and to the _setDrawDefaultSymbols function, but they all seem to keep the original default settings without throwing an error. Does anyone have a snippet for an example of a successful change of the default polygon fill? 

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Matt,

   In the Widget.js make these changes (lines 23-26):

      _bindEvents: function() {
        //init first focusable node
        // jimuUtils.initFirstFocusNode(this.domNode, this.drawBox.pointIcon);

        //bind DrawBox
        this.own(on(this.drawBox, 'icon-selected', lang.hitch(this, this._onIconSelected)));
        this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawEnd)));

        //bind symbol change events
        this.own(on(this.pointSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.lineSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.fillSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.textSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));

        this.fillSymChooser.fillColor.setColor(new Color([255,255,0,0.25]));
        this.fillSymChooser.fillAlpha.setAlpha(0.25);
        this.fillSymChooser.fillOutlineColor.setColor(new Color([255,0,0]));
        this.fillSymChooser.fillOutlineWidth.setValue = 2;

        //bind unit events
        // this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility)));

        //bind UndoManager events
        this.own(on(this._undoManager, 'change', lang.hitch(this, this._onUndoManagerChanged)));
      },

Make these define changes at the top of the widget.js code (line 7 added and line 22 changed):

...
    'jimu/utils',
    'jimu/dijit/ToggleButton',
    'jimu/SpatialReference/wkidUtils',
    'jimu/LayerInfos/LayerInfos',
    'jimu/dijit/LoadingIndicator',
    'esri/Color',
    'jimu/dijit/DrawBox',
    'jimu/dijit/SymbolChooser',
    'jimu/dijit/ColorPicker',
    'jimu/dijit/formSelect',
    'dijit/form/NumberSpinner'
  ],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, on, keys, Deferred, dojoI18n, esriNlsBundle,
    html, lang, array, domStyle,
    esriConfig, Graphic, Polyline, Polygon, TextSymbol, Font, esriUnits, webMercatorUtils,
    EsriProjectParameters,
    EsriSpatialReference,
    EsriRequest,
    geodesicUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, UndoManager,
    OperationBase, GraphicsLayer, FeatureLayer, ViewStack, jimuUtils, ToggleButton, wkidUtils, LayerInfos,
      LoadingIndicator, Color) {
...

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Matt,

   In the Widget.js make these changes (lines 23-26):

      _bindEvents: function() {
        //init first focusable node
        // jimuUtils.initFirstFocusNode(this.domNode, this.drawBox.pointIcon);

        //bind DrawBox
        this.own(on(this.drawBox, 'icon-selected', lang.hitch(this, this._onIconSelected)));
        this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawEnd)));

        //bind symbol change events
        this.own(on(this.pointSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.lineSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.fillSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));
        this.own(on(this.textSymChooser, 'change', lang.hitch(this, function() {
          this._setDrawDefaultSymbols();
        })));

        this.fillSymChooser.fillColor.setColor(new Color([255,255,0,0.25]));
        this.fillSymChooser.fillAlpha.setAlpha(0.25);
        this.fillSymChooser.fillOutlineColor.setColor(new Color([255,0,0]));
        this.fillSymChooser.fillOutlineWidth.setValue = 2;

        //bind unit events
        // this.own(on(this.showMeasure, 'click', lang.hitch(this, this._setMeasureVisibility)));

        //bind UndoManager events
        this.own(on(this._undoManager, 'change', lang.hitch(this, this._onUndoManagerChanged)));
      },

Make these define changes at the top of the widget.js code (line 7 added and line 22 changed):

...
    'jimu/utils',
    'jimu/dijit/ToggleButton',
    'jimu/SpatialReference/wkidUtils',
    'jimu/LayerInfos/LayerInfos',
    'jimu/dijit/LoadingIndicator',
    'esri/Color',
    'jimu/dijit/DrawBox',
    'jimu/dijit/SymbolChooser',
    'jimu/dijit/ColorPicker',
    'jimu/dijit/formSelect',
    'dijit/form/NumberSpinner'
  ],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, on, keys, Deferred, dojoI18n, esriNlsBundle,
    html, lang, array, domStyle,
    esriConfig, Graphic, Polyline, Polygon, TextSymbol, Font, esriUnits, webMercatorUtils,
    EsriProjectParameters,
    EsriSpatialReference,
    EsriRequest,
    geodesicUtils, GeometryService, AreasAndLengthsParameters, LengthsParameters, UndoManager,
    OperationBase, GraphicsLayer, FeatureLayer, ViewStack, jimuUtils, ToggleButton, wkidUtils, LayerInfos,
      LoadingIndicator, Color) {
...
MattPohl
Occasional Contributor II

Robert-

Works perfect. I thought I was on the right track but it seems I was not. Thanks for the quick response and the help. 

0 Kudos