@esri/solutions-components 0.5.0 → 0.5.2

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -19,17 +19,16 @@
  * limitations under the License.
  */
 import { Host, h } from '@stencil/core';
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { ELayoutMode } from '../../utils/interfaces';
 export class CrowdsourceManager {
-  //--------------------------------------------------------------------------
-  //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  State (internal)
-  //
-  //--------------------------------------------------------------------------
+  constructor() {
+    this.mapInfos = [];
+    this._translations = undefined;
+    this._layoutMode = ELayoutMode.GRID;
+    this._mapView = undefined;
+    this._panelOpen = true;
+  }
   //--------------------------------------------------------------------------
   //
   //  Properties (protected)
@@ -50,19 +49,95 @@ export class CrowdsourceManager {
   //  Events (public)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Handle changes to the buffer distance value
+   */
+  mapChanged(event) {
+    this._mapView = event.detail;
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
   //
   //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, null, h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, h("div", { class: "display-flex", slot: "header-actions-end" }, h("div", { class: "header-text" }, "Layout"), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("horizontal-background", ELayoutMode.VERTICAL, this._translations.horizontal), this._getAction("vertical-background", ELayoutMode.HORIZONTAL, this._translations.vertical)), this._getBody(this._layoutMode, this._panelOpen))));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  _getAction(imgClass, layoutMode, tip) {
+    return (h("div", null, h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, h("div", { class: imgClass + " img-background" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, h("span", null, tip))));
+  }
+  _getDividerIcon(layoutMode, panelOpen) {
+    let icon = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        icon = panelOpen ? "chevrons-up" : "chevrons-down";
+        break;
+      default:
+        icon = panelOpen ? "chevrons-left" : "chevrons-right";
+        break;
+    }
+    return icon;
+  }
+  _getMapSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+        break;
+      case ELayoutMode.GRID:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+        break;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
+        break;
+    }
+    return sizeClass;
+  }
+  _getTableSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
+        break;
+      case ELayoutMode.GRID:
+        sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+        break;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
+        break;
+    }
+    return sizeClass;
+  }
+  _getBody(layoutMode, panelOpen) {
+    const displayFlex = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+    return (h("calcite-shell", { class: "width-full height-full pad-top-51" }, h("div", { class: `width-full height-full ${displayFlex}` }, this._getMap(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen))));
+  }
+  _getMap(layoutMode, panelOpen) {
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    return (h("div", { class: `${mapSizeClass} overflow-hidden` }, h("div", { style: { "overflow": "hidden" } }, h("map-card", { mapInfos: this.mapInfos }))));
+  }
+  _getTable(layoutMode, panelOpen) {
+    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
+    const icon = this._getDividerIcon(layoutMode, panelOpen);
+    const tooltip = panelOpen ? this._translations.close : this._translations.open;
+    const id = "toggle-layout";
+    const toggleSizeClass = layoutMode === ELayoutMode.HORIZONTAL ? "divider-h" : "divider-w";
+    return (h("div", { class: tableSizeClass }, h("div", { class: `border ${toggleSizeClass}` }, h("div", { class: "toggle-node" }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onclick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))), h("div", { class: "width-full height-full" }, h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView }))));
+  }
+  _setLayoutMode(layoutMode) {
+    this._layoutMode = layoutMode;
+  }
+  _toggleLayout() {
+    this._panelOpen = !this._panelOpen;
+  }
   /**
    * Fetches the component's translations
    *
@@ -70,11 +145,10 @@ export class CrowdsourceManager {
    * @protected
    */
   async _getTranslations() {
-    // const messages = await getLocaleComponentStrings(this.el);
-    // this._translations = messages[0] as typeof BufferTools_T9n;
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
   }
   static get is() { return "crowdsource-manager"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["crowdsource-manager.css"]
@@ -85,5 +159,47 @@ export class CrowdsourceManager {
       "$": ["crowdsource-manager.css"]
     };
   }
+  static get properties() {
+    return {
+      "mapInfos": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMapInfo[]",
+          "resolved": "IMapInfo[]",
+          "references": {
+            "IMapInfo": {
+              "location": "import",
+              "path": "../../utils/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IMapInfo[]: array of map infos (name and id)"
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {},
+      "_layoutMode": {},
+      "_mapView": {},
+      "_panelOpen": {}
+    };
+  }
   static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "mapChanged",
+        "method": "mapChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/layer-table/layer-table.css

@@ -18,44 +18,8 @@
   display: block;
 }
 
-.table {
-  display: table;
-  width: 100%;
-}
-
-.header {
-  display: table-header-group;
-  background-color: #757575;
-  font-weight: 500;
-  font-size: var(--calcite-font-size-0);
-  color: var(--calcite-ui-text-inverse);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.table-header-cell {
-  display: table-cell;
-  text-align: justify;
-  border-right: 1px solid var(--calcite-ui-border-2);
-  padding: 0.5rem;
-}
-
-.table-body {
-  display: table-row-group;
-}
-
-.row {
-  display: table-row;
-}
-
-.table-cell {
-  display: table-cell;
-  padding: 0.5rem;
-}
-
-.display-table-header {
-  display: table-header-group;
+.table-div {
+  height: calc(100% - 35px);
 }
 
 .display-flex {
@@ -65,35 +29,3 @@
 .table-border {
   border: 1px solid var(--calcite-ui-border-2);
 }
-
-.justify-center {
-  justify-content: center;
-}
-
-.table-container {
-  width: 100%;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.data-container {
-  overflow: auto;
-  height: calc(100% - 35px);
-}
-
-.row:nth-child(odd) {
-  background: var(--calcite-ui-foreground-3);
-}
-
-.padding-3-4 {
-  padding: 0.75rem;
-}
-
-.field-width {
-  white-space: nowrap;
-  min-width: 300px;
-  max-width: 300px;
-  overflow: hidden;
-}

package/dist/collection/components/layer-table/layer-table.js

@@ -19,32 +19,45 @@
  * limitations under the License.
  */
 import { Host, h } from '@stencil/core';
+import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getMapLayerView, goToSelection } from "../../utils/mapViewUtils";
+import { getMapLayerView, goToSelection, getMapLayerIds } from "../../utils/mapViewUtils";
 import { queryAllFeatures } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
-// TODO look for options to better handle very large number of records
-//  has a hard time especially with select all when we have many rows
-// TODO test with data that contains domains
 export class LayerTable {
   constructor() {
+    /**
+     * string[]: List of field names to display
+     */
+    this._fieldNames = [];
     /**
      * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
      */
     this._graphics = [];
     /**
-     * string[]: List of field names to display
+     * Store a reference to the table node after it's first created
+     * and initializes the FeatureTable
+     *
+     * @returns void
      */
-    this._fieldNames = [];
+    this.onTableNodeCreate = (node) => {
+      this._tableNode = node;
+      this._getTable(node);
+    };
     this.mapView = undefined;
-    this._translations = undefined;
+    this._layerView = undefined;
     this._selectedIndexes = [];
+    this._translations = undefined;
   }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    const mapLayerIds = await getMapLayerIds(this.mapView);
+    this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -67,18 +80,35 @@ export class LayerTable {
    */
   async componentWillLoad() {
     await this._getTranslations();
+    await this._initModules();
   }
   /**
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getTableControlRow(), h("div", { class: "data-container" }, h("div", { class: "table-container" }, h("div", { class: "table" }, this._getTableHeader(), this._getTableRows()))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
+    if (!this._layerView) {
+      return null;
+    }
+    return (h(Host, null, this._getTableControlRow(), h("div", { class: "table-div width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("div", { ref: this.onTableNodeCreate }))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FeatureTable] = await loadModules([
+      "esri/widgets/FeatureTable"
+    ]);
+    this.FeatureTable = FeatureTable;
+  }
   /**
    * Gets a row of controls that can be used for various interactions with the table
    *
@@ -90,104 +120,26 @@ export class LayerTable {
     return (h("div", { class: "display-flex table-border" }, h("map-layer-picker", { mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt) }), h("div", null, h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'magnifying-glass', onClick: () => this._zoom() }, this._translations.zoom), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !multiFeaturesSelected, iconStart: 'pencil', onClick: () => this._editMultiple() }, this._translations.editMultiple), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'trash', onClick: () => this._delete() }, this._translations.delete), h("calcite-split-button", { appearance: "transparent", color: "neutral", "primary-text": this._translations.more }, h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: 'list-check-all', onClick: () => this._selectAll(true) }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: 'selected-items-filter', onClick: () => this._showSelected() }, this._translations.showSelected), h("calcite-dropdown-item", { iconStart: 'erase', onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: 'refresh', onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: 'export', onClick: () => this._exportToCSV() }, this._translations.exportCSV))))));
   }
   /**
-   * Gets the table header with a select all control and column headers for each field
-   *
-   * @returns The dom node that contains the header
-   */
-  _getTableHeader() {
-    return (h("div", { class: "header" }, h("div", { class: "table-header-cell padding-3-4" }, h("calcite-checkbox", { class: "display-flex justify-center", onClick: () => this._selectAll(this._selectAllElement.checked), ref: (el) => this._selectAllElement = el })), this._fieldNames.map(name => this._getTableHeaderCell(name))));
-  }
-  /**
-   * Gets a header cell for the table header
+   * Initialize the FeatureTable
    *
-   * @param name the string to display in the cell
-   *
-   * @returns The dom node that contains the header cell
-   */
-  _getTableHeaderCell(name) {
-    return (h("div", { class: "table-header-cell field-width" }, name));
-  }
-  /**
-   * Gets the table rows for all features
-   *
-   * @returns The dom node that contains the body of the table
-   */
-  _getTableRows() {
-    return (h("div", { class: "table-body" }, this._graphics.map((g, i) => this._getTableRow(g, i))));
-  }
-  /**
-   * Gets the individual table row for a feature
-   *
-   * @param g the graphic the row is based on
-   * @param index the index location of the row within the table
-   *
-   * @returns The dom node that contains the row
-   */
-  _getTableRow(g, index) {
-    // TODO think through this more...should build the fieldType info once up front rather
-    // than on every single value...
-    const checked = this._selectedIndexes.indexOf(index) > -1;
-    return (h("div", { class: "row" }, h("div", { class: "table-cell table-border padding-3-4" }, h("calcite-checkbox", { checked: checked, class: "display-flex justify-center", onClick: () => this._rowSelected(index), value: index })), this._fieldNames.map(name => {
-      const field = this._layerView.layer.fieldsIndex.get(name);
-      return this._getTableRowCell(g.attributes[name], field, checked);
-    })));
-  }
-  /**
-   * Gets the individual table cell for the provided field
-   *
-   * @param v the value to display
-   * @param field the field the row is based on
-   * @param rowSelected when true editable fields will render a control that will allow the value to be updated
-   *
-   * @returns The dom node that contains the table cell
+   * @returns void
    */
-  _getTableRowCell(v, field, rowSelected) {
-    const editable = field.editable && rowSelected;
-    const inputType = this._getInputType(field.type);
-    // TODO find some domain data to test with..this has not been tested
-    let domainInput;
-    const domain = field.domain;
-    if (domain) {
-      if (domain.type === "coded-value") {
-        domainInput = (h("calcite-select", { label: '' }, domain.codedValues.map(cv => {
-          return (h("calcite-option", { label: cv.name, selected: v === cv.code.toString(), value: cv.code }));
-        })));
-      }
-      else {
-        // range domain
-        const range = domain;
-        domainInput = (h("calcite-input", { max: range.maxValue, min: range.minValue, type: "number", value: v }));
-      }
+  _getTable(node) {
+    var _a;
+    if ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) {
+      this._table = new this.FeatureTable({
+        layer: this._layerView.layer,
+        view: this.mapView,
+        editingEnabled: true,
+        highlightOnRowSelectEnabled: true,
+        multiSortEnabled: false,
+        visibleElements: {
+          header: false,
+          menu: false
+        },
+        container: node
+      });
     }
-    ;
-    return (h("div", { class: "table-cell table-border field-width" }, editable && domainInput ? domainInput : editable ? (h("calcite-input", { type: inputType, value: v })) : v));
-  }
-  /**
-   * Simple lookup that will get the appropriate edit control for the value type
-   *
-   * @param type the Esri field type
-   *
-   * @returns A string for the type of control to create based on the provided field type
-   */
-  _getInputType(type) {
-    // JS API field types
-    // "string" | "small-integer" | "integer" | "single" | "double" | "long" | "date" | "oid" | "geometry" | "blob" | "raster" | "guid" | "global-id" | "xml"
-    // not sure about these: "geometry" | "blob" | "raster" |  | "xml"
-    // Calcite input types
-    // color date datetime-local email file image month number password search tel text(default) textarea time url week
-    const inputTypes = {
-      "string": 'text',
-      "small-integer": "number",
-      "integer": "number",
-      "single": "number",
-      "double": "number",
-      "long": "number",
-      "date": "datetime-local",
-      "oid": "number",
-      "guid": "text",
-      "global-id": "text"
-    };
-    return Object.keys(inputTypes).indexOf(type) > -1 ? inputTypes[type] : "text";
   }
   /**
    * Select or deselect all rows
@@ -308,6 +260,8 @@ export class LayerTable {
     this._fieldNames = this._layerView.layer.fields.map(f => f.alias || f.name);
     this._graphics = await queryAllFeatures(0, this._layerView.layer, []);
     this._selectedIndexes = [];
+    this._table.layer = this._layerView.layer;
+    this._table.render();
   }
   /**
    * Fetches the component's translations
@@ -320,7 +274,6 @@ export class LayerTable {
     this._translations = messages[0];
   }
   static get is() { return "layer-table"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["layer-table.css"]
@@ -356,9 +309,16 @@ export class LayerTable {
   }
   static get states() {
     return {
-      "_translations": {},
-      "_selectedIndexes": {}
+      "_layerView": {},
+      "_selectedIndexes": {},
+      "_translations": {}
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
 }

package/dist/collection/components/map-card/map-card.css

@@ -61,6 +61,10 @@
   display: flex;
 }
 
+.display-grid {
+  display: inline-grid;
+}
+
 /* only used if we need to do the map action seperately */
 .block-button {
   border-bottom: 0;
@@ -74,13 +78,6 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.map-view {
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-}
-
 .map-list {
   position: absolute;
   inset: 3.5rem 0 0 0;

package/dist/collection/components/map-card/map-card.js

@@ -35,13 +35,9 @@ export class MapCard {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
-    /**
-     * string: the id of the container div for the map
-     */
-    this._mapDivId = "map-div";
     this.mapInfos = [];
+    this.mapView = undefined;
     this._mapListExpanded = false;
-    this._mapView = undefined;
     this._translations = undefined;
     this._webMapId = "";
   }
@@ -89,7 +85,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", id: this._mapDivId })));
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) })));
   }
   //--------------------------------------------------------------------------
   //
@@ -139,13 +135,14 @@ export class MapCard {
       const webMap = new this.WebMap({
         portalItem: { id }
       });
-      this._mapView = new this.MapView({
-        container: this._mapDivId,
+      this.mapView = new this.MapView({
+        container: this._mapDiv,
         map: webMap,
         // TODO consider this more...seems to cause less overflow issues when the component is resized
         resizeAlign: "top-left"
       });
       this._loadedId = id;
+      this.mapChanged.emit(this.mapView);
     }
   }
   /**
@@ -173,7 +170,7 @@ export class MapCard {
    */
   _getMapPicker() {
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
+    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full display-grid", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -291,13 +288,31 @@ export class MapCard {
           "text": "IMapInfo[]: array of map infos (name and id)"
         },
         "defaultValue": "[]"
+      },
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
       }
     };
   }
   static get states() {
     return {
       "_mapListExpanded": {},
-      "_mapView": {},
       "_translations": {},
       "_webMapId": {}
     };
@@ -323,6 +338,25 @@ export class MapCard {
             }
           }
         }
+      }, {
+        "method": "mapChanged",
+        "name": "mapChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a new map is loaded"
+        },
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -142,7 +142,7 @@ export class MapDrawTools {
       this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(sketchIndex);
     }
     else {
-      this._sketchGraphicsLayer = new this.GraphicsLayer({ title });
+      this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       this.mapView.map.layers.add(this._sketchGraphicsLayer);
     }
@@ -165,9 +165,9 @@ export class MapDrawTools {
         "mode": "hybrid"
       }
     });
-    this.pointSymbol = this._sketchWidget.viewModel.pointSymbol;
-    this.polylineSymbol = this._sketchWidget.viewModel.polylineSymbol;
-    this.polygonSymbol = this._sketchWidget.viewModel.polygonSymbol;
+    this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
+    this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
+    this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
     this._sketchWidget.visibleElements = {
       selectionTools: {
         "lasso-selection": false,
@@ -178,10 +178,6 @@ export class MapDrawTools {
       undoRedoMenu: false
     };
     this._sketchWidget.on("update", (evt) => {
-      if (evt.state === "start") {
-        this.graphics = evt.graphics;
-        this.sketchGraphicsChange.emit(this.graphics);
-      }
       if (evt.state === "active") {
         clearTimeout(this._selectionTimer);
         this._selectionTimer = setTimeout(() => {