jsmind icon indicating copy to clipboard operation
jsmind copied to clipboard

Permit adding specific classes to nodes & SVG lines

Open smonsarr opened this issue 1 year ago • 1 comments

Currently certain aspects of nodes and lines can be modified such as background-color etc. When working with a web publication that supports theming, it is some times not acceptable to directly specify colours in the content of the page. Such aspects must be exclusively managed by CSS.

This change to jsmind adds two node data fields :

  • nodeClassList : an array of strings that will be added to the classList object of the rendered jmnode
  • lineClassList : SVG only - an array of strings that will be added to the classList object of the rendered SVG path

This allows the content to exclusively specify intent such as "important". How "important" is relayed to the user is managed exclusively in CSS.

In the following example each branch is assigned a nodeColor class (nodeColor_1, nodeColor_2, etc). The actual colors are managed by CSS theme:
image

In this example a node data looks like :

{
	"id": "gp0mlO8fTKjMkdlhaUwp6c",
	"topic": "Application : Documentaires, Biographies",
	"nodeClassList": ["nodeColor_1"],
	"lineClassList": ["lineColor_1"]
}

smonsarr avatar Sep 12 '24 08:09 smonsarr