Version 3.2 of the JavaScript Diagram library contains the following new features and improvements -
Export to SVGThe SvgExporter class creates a Scalable Vector Graphics (SVG) drawing from the content of a Diagram. The exportElement method returns a DOM <svg> element that can be directly added to the page. The exportString method returns an SVG string that can be saved in a file or submitted to server.
function onExportSvg()
{
var diagram = $find("diagram");
var exporter = new MindFusion.Diagramming.SvgExporter();
var svgElement = exporter.exportElement(diagram);
document.body.appendChild(svgElement);
svgElement.style.position = 'fixed';
svgElement.style.zIndex = 100;
}
AMD moduleThe diagramming.js script can be loaded as an AMD module now. If it detects an AMD loader during startup, it will list common.js as its dependency, so it is enough to require only diagramming.js as application's direct dependency:
MindFusionImpl = "StandAlone";
requirejs(["MindFusion.Diagramming"],
function(MindFusion)
{
// create a Diagram component that wraps the "diagram" canvas
var Diagram = MindFusion.Diagramming.Diagram;
var element = document.getElementById("diagram");
var diagram = Diagram.create(element);
var node = diagram.factory.createShapeNode(10, 10, 40, 30);
node.setText("Hello, world!");
}
);
Miscellaneous~ arc definitions in custom shapes now follow correct SVG syntax (A rx ry x-axis-rotation large-arc-flag sweep-flag x y) instead of specifying bounding box and angles;
~ node's Stroke attribute is now also applied to shape decoration elements;
~ underlined fonts can be applied to the text of links;
If anyone is interested in trying the beta version, please download this archive containing updated script files:
https://mindfusion.eu/_beta/jsdiag32.zipNow that diagram items can create corresponding SVG elements, we can implement SVG mode where interactive diagrams are based on <svg> element instead of <canvas> if there's enough interest - if anyone wants to see this, please let us know. Any comments, questions and general feedback are welcome.