Version 4.9 of MindFusion JavaScript Diagram contains the following new features and improvements -
CSS StylingThe styling system now supports defining item appearance through external CSS files. You can style different item types using custom element selectors such as mfd-shapenode, mfd-diagramlink, or mfd-tablenode. The system maps CSS Custom Properties to the internal Style properties. For example, use --brush for backgrounds, --stroke for outlines, and --font-size for text. The new cssClass property on DiagramItem allows for more granular styling using standard class selectors in your CSS. To ensure high performance, computed styles are cached globally, and the system automatically resolves style inheritance across class hierarchies (e.g., a ShapeNode will resolve styles from mfd-shapenode, mfd-diagramnode, and mfd-diagramitem selectors in that order).
/* Style all shape nodes */
mfd-shapenode {
--brush: #f9f9f9;
--stroke: #333;
--stroke-thickness: 1px;
--font-name: 'Verdana';
}
/* Specific styling via the new cssClass property */
mfd-shapenode.urgent {
--brush: #ffcccc;
--stroke: #ff0000;
--stroke-thickness: 2px;
}
/* Style table captions using custom properties */
mfd-tablenode {
--caption-brush: #e0e0e0;
--text-color: #000066;
}
Compact Multi-graph LayoutA new MinimalArea option has been added to the MultipleGraphsPlacement enumeration, which uses a bin-packing algorithm to arrange connected components in a compact, square-like area. This ensures a more efficient use of space compared to horizontal or vertical arrangements when laying out multiple independent graphs.
Polygonal Text LayoutThe ShapeNode class now supports a polygonalTextLayout property, enabling text to wrap and align precisely within the geometric boundaries of non-rectangular shapes like triangles, diamonds, and custom polygons. This feature supports both plain and styled text across all alignment modes.
If anyone is interested in trying the beta version, please download this archive containing updated script files:
https://mindfusion.dev/_beta/JsDiagram49.zipAny comments, questions and general feedback are welcome.