modify symbol used for a graphic?

[john_cartwright_noaa]

Hello All,

is there a way to modify part of a symbol used for a graphic, e.g. outline color, w/o re-creating the whole symbol?

something like this:

function mapClickHandler(hitTestResult) {
  const graphic = hitTestResult.results[0].graphic
  // does not work
  graphic.symbol.outline.color = new Color("red")
  // nor does the setColor method
  graphic.symbol.outline.color.setColor("red")
  // nor does re-creating just the SLS:
  graphic.symbol.outline = {
    type: "simple-line", 
    width: 2, 
    color: [213, 23, 23, 1] 
  }
  // this works but seems like a hack
  const symbol_copy = graphic.symbol.toJSON()
  symbol_copy.outline.color = new Color("red")
  graphic.symbol = fromJSON(symbol_copy)

}

[ReneRubalcava]

I thought that would have worked, but doesn't look like it. You can clone the symbol though, modify the outline and replace it.

https://codepen.io/odoe/pen/zYjjOPm?editors=0010

// something like this
view.on("click", async (e) => {
	const { results } = await view.hitTest(e);
	for (let result of results) {
		if (result.type === "graphic") {
			const sym = result.graphic.symbol.clone();
			const idx = Math.floor(Math.random() * 10);
			sym.outline && (sym.outline.color = colors[
				Math.floor(Math.random() * 10)
			]);
			sym.color = colors[
				Math.floor(Math.random() * 10)
			];
			result.graphic.symbol = sym;
		}
	}
});

[john_cartwright_noaa]

Thanks @ReneRubalcava! This is cleaner than the toJSON/fromJSON approach I was using. Where is the clone method assigned for the Symbol class? TypeScript doesn't recognize it.

[ReneRubalcava · Accepted solution]

For TS, you'd need to help TS a bit doing something like if (symbol.type === "simple-fill"). It's not on the base Symbol, but main classes. You'll see it sprinkled around in the doc like here.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#clo...