Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Version 3.2 beta (Read 902 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Version 3.2 beta
Oct 30th, 2017 at 9:50am
Print Post  
Version 3.2 of the JavaScript Diagram library contains the following new features and improvements -

Export to SVG
The 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.

Code
Select All
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 module
The 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:

Code
Select All
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.zip

Now 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.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint