Add a Bounds model component

[jessegreenberg]

We want to easily determine whether something is "in a region" in Creator projects. One way to do that is to add Bounds as a model component you can create. Then there will be an easy way in the interface to write functions that control other components when a position is within those bounds.

[jessegreenberg]

Documenting steps to add a bounds component here. There is quite a lot, maybe we can look for ways to abstract these steps.

1) Create a model class for the component that extends NamedProperty. Needs to implement save, load, getStateSchema. 2) Add an observable array for instances of the component to the ProgramModelContainer. Add functions to add/remove the component from the container. Add the observable array to save/load for the container. Add the observable array to dispose. 3) Make sure that projects will load after this schema change. Either be graceful in the load code or modify save data for existing projects.

• I updated the schema at the database, but realized that would not be enough. People will be saving data with old versions of paper-playground checked out, sending the old schema. Next time they pull main those projects will fail to load. So we need these load functions to be graceful. 4) Add a form in React to create the component. There are many steps here, but in general follow the pattern established by the other components. Add lots of data to ComponentForm.js. Then create a new tab and form for the specific data you need. This is probably where a lot of refactoring could be done. 5) Add code generation. In this case I added an entry to ModelTemplates.js, and specified the data to fill in in ProgramCodeGenerator.getModelComponentData. 6) Add controller components. Think of design you want, then add react forms like above. In this case, I skipped this part for bounds. 7) Add component documentation to utils.getComponentDocumentation. This function returns the documentation given to the user and the AI assistant when working with this component. 8) Add component documentation utils.createSetterFunctionString. This function returns the documentation for changing the component in a DerivedProperty/link.

[jessegreenberg]

Noticed while testing this new component.

I think it is important for the position controllers to set positions in normalized coordinates. Currently they automatically convert to display coordinates. That is convenient in the view code because you can just go like this:

setCenterX( positionComponent.x );
setCenterY( positionComponent.y );

But it means working in model coordinates is not really possible. For this issue we wanted to easily determine if a point is within a set of bounds. That requires both bounds and point values to be in the same normalized coordinate frame. After this change view code might look like this:

setCenterX( unitPositionToDisplayPosition( positionComponent ).x );
setCenterY( unitPositionToDisplayPosition( positionComponent ).y );

OR maybe there is a checkbox that would automatically do that conversion for you (default checked?) This change could disrupt a lot of existing projects and I am hesitant to go ahead just before a codesign. I think it is required to get the Bounds component working though.

[jessegreenberg]

Lets add a checkbox here that would automatically convert to display coordinates in the generated code.

If that works, current projects will behave the same. And I think that will be useful for most cases because in view code where you are updating positions you are generally linking directly to a model component.

The value of that checkbox would presumably saved as part of the data for the view component.

[jessegreenberg]

OK, this change is merged into dev branch. This has been working pretty well, we will test a bit more before merging into main.

[jessegreenberg]

Merge complete.