Suggestion: Node category CSS

It may be useful to include a CSS class named node-<category > in the parent node div, so that similar nodes can be styled differently. For example: render math nodes with a blue title, smaller in width, or no border radius at all.

[newcat]

Admittedly, I haven’t put enough effort into keeping the documentation up to date with the development in the past few months. I will try to improve that. Also just noticed that the API reference is completely broken 🤦‍♂

So yeah, a node type is a single entry in the “Add Node” context menu. Basically one kind of node has one type but there can be multiple nodes of the same type. I can see why you would like to have the category in the css class as well. But I have decided against that for the following reason:

The node list is in the Editor, which comes from the core package. For displaying nodes, the Editor.vue, which comes from the renderer-vue package, binds to the node list in the editor. The Editor (like the rest of the core package) does not “know” the concept of categories. This whole idea is only implemented in the renderer-vue package for having a nice and clean context menu. So when rendering the list of nodes, I do not directly have access to the category of a node, as the data comes from the core editor. I would have to add this data for each node in the Editor.vue, which in turn means that I can’t do a simple databinding where all the logic related to a node is separated into a Node.vue component.

So TLDR: Although it would be possible to implement, it would blur the line between data sources, which I don’t quite like, as it increases complexity and reduces maintainability.

[newcat]

Implemented in the dev branch. I decided against against using category names but instead, every node div gets a --type-<NodeType> modifier. By using CSS selectors you can style all nodes of a certain category at the same type, like this:

.node.--type-NodeA,
.node.--type-NodeB {
    background-color: red;
}