sketchViewModel triggered from outside of map

[Slyke]

Hello, I'm trying to make a polygon editable by clicking a button that's located outside of ESRI map.

But keep getting this error:

details: undefined

message: "Parameter 'graphics' contains one or more graphics missing from the supplied GraphicsLayer."

name: "sketch:invalid-parameter"

Here's a gist of what I mean:

let iconLayer: GraphicsLayer | null = null;

let arcgisMap: MapView | null = null;
let sketchViewModel: Sketch|null = null;

const createMap = () => {
  iconLayer = new GraphicsLayer();

  arcgisMap = new MapView({
    container: mapContainer,
    map: {
      basemap: 'streets-navigation-vector',
      layers: [iconLayer]
    },
    zoom: 10,
    center: [-79, 38]
  });

  sketchViewModel = new Sketch({
    layer: iconLayer,
    view: arcgisMap,
    creationMode: 'update',
    availableCreateTools: ['polygon']
  });
};

const buttonClickCallback = (editingId) => { // Triggered by a buttom press somewhere on the dom
  console.log({ editingId });
  if (sketchViewModel && iconLayer && arcgisMap) {
    if (editingId) {
      sketchViewModel.viewModel.cancel();

      let graphicToEdit: any = null;
      for (let i = 0; i < iconLayer.graphics.length; i++) {
        const graphic = iconLayer.graphics.getItemAt(i);
        if (graphic.attributes.specialId === editingId) {
          graphicToEdit = graphic;
          console.log('Found graphic', { guid: graphic.uid, specialId: graphic.attributes.specialId });
          // break;
        }
      }

      console.log('Editing: ', { uid: graphicToEdit.uid, specialId: graphicToEdit.attributes.specialId });

      if (graphicToEdit && iconLayer.graphics.includes(graphicToEdit)) {
        try {
          // const clonedGraphic = new Graphic({
          //   geometry: graphicToEdit.geometry,
          //   symbol: graphicToEdit.symbol,
          //   attributes: { ...graphicToEdit.attributes }
          // });
          // console.log('New Duplicated Graphic: ', {
          //   uid: clonedGraphic.uid,
          //   specialId: clonedGraphic.attributes.specialId
          // });

          // iconLayer.add(clonedGraphic);

          // sketchViewModel.layer = iconLayer;
          // iconLayer.graphics = [clonedGraphic];
          // arcgisMap.whenLayerView(iconLayer).then(() => {

          iconLayer.when(() => {
            // sketchViewModel?.update([clonedGraphic] and
            // sketchViewModel?.update([graphicToEdit] also doesn't work
            sketchViewModel?.update(graphicToEdit, {
              tool: 'reshape',
            });
          });
        } catch (err) {
          console.log(`Unable to edit graphic found with specialId: ${editingId}`, err);
        }
      } else {
        console.log(`No graphic found with specialId: ${editingId}`);
      }
    } else {
      sketchViewModel.viewModel.cancel();
    }
  } else {
    console.log(`Sketch is not setup for polygon editing`);
  }
};

[JoelBennett]

It appears the only way you get this error is if the graphic you're passing to update has its layer property set to something other than the GraphicsLayer used by the Sketch widget.  This would suggest somewhere in your application, you're getting those graphics from some other layer before adding them into the GraphicsLayer.  Perhaps instead of your present line 37, you could have these two lines instead:

graphicToEdit = graphic.clone();
graphicToEdit.layer = iconLayer;