model ⮀ html link

model 🡒 html

Every ModelPiece has a View element, either personal, inherited from his metaparent or inherited from the default view of that ModelPiece subclass type. The view or the default style of a Classifier will generate a vertex through direct input of a html fragment that must have the tag foreignObject as html-svg root. The view or the default style of any element contained in a classifier will be displayed as a children html/svg node inserted inside the html-svg tree of his own classifier's html in a location customizable through reserved classes. The Reference elements will be displayed both as child node inside his classifier's vertex and as an Edge linking his parent node with each of his targets. The edges are currently the least customizable elements. They can only be edited in path, color and width but cannot have a label or custom decorations. The html can make use of reserved classes and templates to display a dynamic content changing with the model's content. The rules of customizing and applying Views are described here

html 🡒 model

Everything inside a graph is directly or indirectly mapped to a logical element of the model. When ModelPiece's generated html is inserted for display inside the graph, the data-modelPieceID attribute will be automatically added to the generated html root. Once something on the graph is interacted, an event will follow the DOM's tree from the clicked point to the root until it can find an element with the data-modelPieceID element. Once it is recognized as the root of a ModelPiece, that ModelPiece will be retrieved and become the selected element. If the element is interacted with a click, it will be the one displayed and editable on the right sidebar. If the element is interacted with a change event on a , or <textarea> node, some action that will modify the model's content will be triggered according to the rules described in the reserved classes section. Other interactions may happen with customized events or "measurable" elements.