# Extending widgetstate with new fields

**URL:** https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133
**Category:** Web
**Created:** [November 10, 2021, 9:31am UTC](https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133 "2021-11-10T09:31:31Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![emil-peter](https://discourse.vtk.org/user_avatar/discourse.vtk.org/emil-peter/32/4075_2.png) [@emil-peter](https://discourse.vtk.org/u/emil-peter)
#### Post date: [November 10, 2021, 9:31am UTC](https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133/1 "2021-11-10T09:31:31Z")

</div>

I’m currently extending the existing image cropping widget with some extra additions of my own. My question is now how I would go by extending the existing state with an extra field.  
Normally I would go by making a `StateGenerator()` which creates a new state using the `vtkStateBuilder`.

But I now can’t overwrite the existing state, but I would like to add a field to the existing `model.widgetState` of the `vtkImageCroppingWidget`.  
I tried using  
`const newState = vtkStateBuilder .createBuilder() .addField({ name: 'slices', initialValue: [0, 0, 0] }) .build(); model.widgetState.bindState(newState, 'extendedState');`

But for some reason this just creates multiple substates which are never destroyed even after the widget is destroyed? And also do not contain the fields from the existing imageCroppingWidget state.

Is there a better/easier way to add certain fields to the existing state? Or am I missing something obvious?

Kind regards,  
Emil

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [November 15, 2021, 11:12pm UTC](https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133/2 "2021-11-15T23:12:37Z")

</div>

IIRC there is no way to extend an existing state object with new fields once you’ve instantiated it. However, you can choose to extend `vtkImageCroppingWidget` and create your own `model.widgetState` by copying the one used by ImageCroppingWidget and using `addField`.

---

<div class="post-metadata">

### Author: ![emil-peter](https://discourse.vtk.org/user_avatar/discourse.vtk.org/emil-peter/32/4075_2.png) [@emil-peter](https://discourse.vtk.org/u/emil-peter)
#### Post date: [November 16, 2021, 7:30am UTC](https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133/3 "2021-11-16T07:30:39Z")

</div>

I’m already extending the `vtkImageCroppingWidget`, but how would you go about copying the existing state into my own `model.widgetState` such that all fields that the base `vtkImageCroppingWidget` would need are still there?

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [November 16, 2021, 7:18pm UTC](https://discourse.vtk.org/t/extending-widgetstate-with-new-fields/7133/4 "2021-11-16T19:18:01Z")

</div>

You can copy [this state file](https://github.com/Kitware/vtk-js/blob/master/Sources/Widgets/Widgets3D/ImageCroppingWidget/state.js), edit it to fit your needs, import it and set it on `model.widgetState`. Unfortunately the final constructed state is exported from the `state.js` file, rather than the builder object. Maybe it’s a good idea to export just the builder object so people can extend it further if they need to…
