Change sketch 3D building extrusion with a slider

[AndresKasekamp]

How to dynamically change the sketched polygon-3d building extrusion with a slider?

I have added a Slider widget to the following example inside the sketch panel. (https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=sketch-3d)

So it looks like this, however, I wish that the Slider would change the initial extrusion height based on the value set by the user.

I am unable to find how to access the currently selected feature in the graphicsLayer.

I am currently only able to create a duplicate based on the first feature in the graphicsLayer and set its extrusion the event.value that would result in hundreds of graphics and I am unable to remove the previous feature, which is not optimal.

Slider and the extrusion setting looks like this, with solutions that did not work commented out. Perhaps I have to call an update on the graphic?

  // Update the building layer extrusion
  extrudeSlider.on(["thumb-change", "thumb-drag"], extrudeSizeChanged);

  function extrudeSizeChanged(event) {
    // Constructing a new graphic
    let geom = graphicsLayer.graphics.getItemAt(0).geometry;
    let symStyle = {
      type: "polygon-3d",
      symbolLayers: [
        {
          type: "extrude",
          size: event.value, 
          material: {
            color: white,
          },
          edges: {
            type: "solid",
            size: "3px",
            color: blue,
          },
        },
      ],
    };
    let p = new Graphic({
      geometry: geom,
      symbol: symStyle,
    });
    graphicsLayer.add(p);

    // This did not work
    //extrudedPolygon.symbolLayers[0].size = event.value; // Update extrude size
    //sketchViewModel.polygonSymbol = extrudedPolygon; // Apply updated symbol to SketchViewModel

    // This did not work either
    /*     sketchViewModel.polygonSymbol.symbolLayers.find(
      (symbolLayer) => symbolLayer.type === "extrude"
    ).size = event.value; */
  }

[SaschaBrunnerCH · Accepted solution]

Hi Andres

In your code you already found the right graphic. One way would be to remove this graphic and add the changed one.
Another way to achieve this is to clone the symbol and change the size and reapply:

      const extrudeSlider = new Slider({
        container: "extrudeSlider",
        precision: 2,
        min: 0,
        max: 50,
        values: [10]
      });
      extrudeSlider.on(["thumb-drag", "thumb-change"], (event) => {
        const value = event.value;
        document.getElementById("extrude").innerHTML = value;
        const extrudedPolygon = sketchViewModel.layer.graphics.getItemAt(sketchViewModel.layer.graphics.length - 1);
        const updatedSymbol = extrudedPolygon.symbol.clone();
        updatedSymbol.symbolLayers.items[0].size = value;
        extrudedPolygon.symbol = updatedSymbol;
      });

Check also the codepen: https://codepen.io/SaschaBrunnerCH/pen/eYbYGya?editors=1010

[AndresKasekamp]

The provided solution works only for the first feature in the graphics layer. However, if I create another building, click on it, and try to change its extrusion, it would still modify the first building's extrusion. Is there any way to find out what feature is currently selected in order to change its extrusion?

Fore example, in the picture below, the selected building's height should be 58.

 

[SaschaBrunnerCH]

True, updated the codepen that it takes the last created graphic.
And there is definitely more room to improve when changing from creating to update and the other way around related to the values in the slider. But it shows the direction how this could get achieved.