Views Styles: Personal, Inherited, Default.

The view of a ModelPiece element is ruled by View elements following a priority order.

1. If the modelPiece is directly linked to a View object with a "own" field, the personally owned style will be applied.

2. If the metaParent of the current modelPiece is directly linked with an object owning a "inheritable" field, his modelPiece instance will inherit a non-personal copy of that View Property.

3. If neither apply, a default immutable style will be applied.

Following this example: https://drive.google.com/file/d/1Ba6nEG738h7SX_L0xYq2pMjC4M7wj2jC/view?usp=sharing

The modelPieces B, A, b2 have a personal style applied.

The modelPieces b1, b3 have a inherited style applied (from B). If the property inheritable of the View linked to B is edited, both b1, b3 and any future uncustomized instance will change accordingly.

b2 has both the inherited style and the personal style, but the personal style overrides the inherited.

The only ModelPiece without any view is a1, that will inherit the default, immutable GUI.

https://drive.google.com/file/d/1vCqYgQk0g0C-MhAkN96JcJsepZseHFva/view?usp=sharing This editor will be displayed only after an element is selected on the graph and will edit that element’s ViewRule.

The visible main section of the Style editor only allows to edit the personal View.

By clicking the "Inheritable style" button on the bottom, a new section with the same content will appear to edit the Inheritable content.

Since M1 ModelPieces cannot have instances no one could apply their Inheritable style, so the section is disabled for them.

The Inherited style is mostly a shortcut, it will contain and behave exactly as if we are editing the "Inheritable" section of the metaParent.

This section is good to avoid going back to the MetaModel graph if you are working on the Model and suddenly want to change inherited styles, it also allows to edit the inherited style for M2 objects. Since there is no M3 graph this could not be done through other means.

Furthermore, if you click a visual element on the graph, the Personal and the Inherited editor will only show the html fragment that takes care of displaying that clicked element and of his DOM's childrens.

This easily allows to do pinpointed interventions without having to search the affected area within the entire html. If you want to see and change a wider HTML scope, you can either click a element closer to the object's html root or use the "up" button on the top-left of the screenshot.

That will allow you to select the upper level of html in DOM's tree until you reach the root of the html contained in the ViewRule currently applied to the selected ModelPiece.

While being in the StyleEditor tab, a red dashed border is displayed around the HTML that would be affected by the changes of Personal and Inherited style.

Since in the "Inheritable" section you are editing the style of something in different level (ie: M1 objects while being in M2 graph) you cannot directly click or see what you are editing, so it will only allow to edit Html roots.

NB: the default style is immutable, but by changing the Inherited style of M2, you will make changes in M3's inheritable view and it looks like the M2 object's default style is changed. This is only possible because M3 is static and not expandable. The same trick is not possible on M1 since there can be a dinamically increasing number of M2 objects that should all change their inheritable properties and must be manually done.