{"id":2921,"date":"2024-12-04T16:29:43","date_gmt":"2024-12-04T16:29:43","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2921"},"modified":"2024-12-04T16:31:20","modified_gmt":"2024-12-04T16:31:20","slug":"save-and-load-part-of-diagram-data-to-from-json-files","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/save-and-load-part-of-diagram-data-to-from-json-files\/","title":{"rendered":"Save and Load Part of Diagram Data to\/from JSON Files"},"content":{"rendered":"<p>In this blog post we will demonstrate how you can implement methods that save and load part of the information that a diagram renders into JSON format. The <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Diagram_allowMultipleResize_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: Diagram\">Diagram<\/a> class has built-in <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/M_MindFusion_Diagramming_Diagram_toJson_0.htm\" title=\"MindFusion Diagramming for JavaScript: toJson\">toJson<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/M_MindFusion_Diagramming_DiagramView_fromJson_0.htm\" title=\"MindFusion Diagramming for JavaScript: fromJson\">fromJson<\/a> methods. They serialize completely the diagram with every detail so you can restore it completely, exactly the way you see it. What we are going to do is write custom save and load methods that use only part of the information &#8211; namely the size and location of nodes and links as well as their text. <\/p>\n<p><a href=\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/partial_json.png\" title=\"MindFusion JavaScript Diagram: Custom JSON Files\"><img decoding=\"async\" src=\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/partial_json.png\" title=\"Partial Json Save and Load\" \/><\/a><\/p>\n<p><!--more--><\/p>\n<h2>I. General Setup<\/h2>\n<p>We are going to use the <a href=\"https:\/\/mindfusion.dev\/javascript-diagram.html\" title=\"MindFusion Diagramming Library for JavaScript\">JavaScript Diagram library.<\/a> However, the logic of the code can easily be applied to all other MindFusion Diagramming components, as listed in the <a href=\"https:\/\/mindfusion.dev\/diagramming-pack.html\" title=\"MindFusion Pack with Diagram Components\">Diagramming Pack.<\/a><\/p>\n<p>We create a folder for the project and we copy there the *.js files that are used by MindFusion Diagramming library for JavaScript:<\/p>\n<ul>\n<li>animations.js<\/li>\n<li>collections.js<\/li>\n<li>controls.js<\/li>\n<li>diagramming.js<\/li>\n<li>drawing.js<\/li>\n<li>graphs.js<\/li>\n<\/ul>\n<p>You can get the scripts if you download the trial version from <a href=\"https:\/\/mindfusion.dev\/javascript-diagram.html\" title=\"Mindfusion Diagramming for JavaScript\">Mindfusion Diagramming for JavaScript product page.<\/a> You can also <a href=\"https:\/\/www.npmjs.com\/package\/@mindfusion\/diagramming\" title=\"Mindfusion JS Diagram on npm\">get them through npm.<\/a><\/p>\n<p>We create an empty web page where we add the scripts at the end of the page, right before the closing BODY tag:<\/p>\n<pre>\n&lt;script src=\"Scripts\/collections.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"Scripts\/drawing.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"Scripts\/controls.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n\n&lt;script src=\"Scripts\/animations.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"Scripts\/graphs.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"Scripts\/diagramming.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n&lt;script src=\"CustomJson.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>The JavaScript code specific to the sample is going to be in a separate file &#8211; we call it CustomJson.js and include it as a reference as well.<\/p>\n<p>Once we have linked the scripts, it is time to add a Canvas instance to the page. The <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/Diagram_Events.htm\" title=\"MindFusion Diagramming for JavaScript: Diagram\">Diagram<\/a> needs an HTML Canvas element to render itself onto and we are going to add one:<\/p>\n<pre>\n&lt;div&gt;\n\t\t&lt;!-- The DiagramView component is bound to the canvas element below --&gt;\n\t\t&lt;div style=\"width: 100%; height: 100%; overflow: auto;\"&gt;\n\t\t\t&lt;canvas id=\"diagram\" width=\"2100\" height=\"2100\"&gt;\n\t\t\t\tThis page requires a browser that supports HTML 5 Canvas element.\n\t\t\t&lt;\/canvas&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n<\/pre>\n<p>Note that we need to provide an ID to the Canvas element so we can access it later, in the code-behind file.<\/p>\n<h2>II. The Diagram<\/h2>\n<p>In the CustomJson file we first initialize two variables:<\/p>\n<pre>\nvar diagram;\nvar maxId = 0;\n<\/pre>\n<p>We will create the diagram and write all diagram-related code in the DOMContentLoaded event of the document instance:<\/p>\n<pre>\nvar diagramView = MindFusion.Diagramming.DiagramView.create(document.getElementById(\"diagram\"));\ndiagram = diagramView.diagram;\n<\/pre>\n<p>The Diagram class is taken from the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/T_MindFusion_Diagramming_DiagramView.htm\" title=\"MindFusion Diagramming for JavaScript: DiagramView\">DiagramView<\/a> instance and the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/T_MindFusion_Diagramming_DiagramView_0.htm\" title=\"MindFusion Diagramming for JavaScript: DiagramView\">DiagramView<\/a> is created with help of the Canvas element, which we named &#8220;diagram&#8221;.<\/p>\n<p>We want to set an image as a background to the diagram. Given the time of this post, the Christmas holidays are just around the corner and we set a Christmas image as a background to the diagram:<\/p>\n<pre>\ndiagram.backgroundImageUrl = \"christmas.jpg\";\ndiagram.backgroundImageAlign = MindFusion.Drawing.ImageAlign.Center;\n<\/pre>\n<p>The image is in the root folder of the project, so we don&#8217;t need any special code to load it &#8211; just use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Diagram_backgroundImageUrl_0_0.htm\" title=\"MindFusion Diagramming for JavaScript: backgroundImageUrl\">backgroundImageUrl<\/a> property to specify its name. We also make use of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Diagram_backgroundImageAlign_0_0.htm\" title=\"MindFusion Diagramming for JavaScript: backgroundImageAlign\">backgroundImageAlign<\/a> property to properly align the image. By default the image fits the Canvas and this renders it distorted.<\/p>\n<p>We want to handle several diagram <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/Diagram_Events.htm\" title=\"MindFusion Diagramming for JavaScript: Events\">Events<\/a> Events are exposed as properties and you can register handlers by calling the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/M_MindFusion_Controls_EventDispatcher_addEventListener_0.htm\" title=\"MindFusion Diagramming for JavaScript: addEventListener\">addEventListener<\/a> method.<\/p>\n<p>We want to handle the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Events_nodeCreating_0.htm\" title=\"MindFusion Diagramming for JavaScript: nodeCreating\">nodeCreating<\/a> <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Events_nodeCreated_0.htm\" title=\"MindFusion Diagramming for JavaScript: nodeCreated\">nodeCreated<\/a> <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Events_linkCreated_0.htm\" title=\"MindFusion Diagramming for JavaScript: linkCreated\">linkCreated<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_Events_linkCreating_0.htm\" title=\"MindFusion Diagramming for JavaScript: linkCreating\">linkCreating<\/a> events. The ***creating events are raised while the action is about to be performed. We want to use them to provide the would-be nodes and links with some appearance properties. <\/p>\n<p>For the nodes, we want them to look red and with red border during the whole process of drawing them. So we use <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramItem_brush_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: brush\">brush<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramItem_stroke_0_0.htm\" title=\"MindFusion Diagramming for JavaScript: stroke\">stroke<\/a> to specify the desired colours. In addition, we want text to be white, so we use <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramItem_textColor_0.htm\" title=\"MindFusion Diagramming for JavaScript: textColor\">textColor<\/a> to set this as well:<\/p>\n<pre>\ndiagram.nodeCreating.addEventListener((sender, args) => {\n\t\targs.node.brush = \"#D90416\";\n\t\targs.node.stroke = \"#730217\";\n\t\targs.node.textColor = \"#f4f4f4\";\t\n\t});\n<\/pre>\n<p>The code is similar for the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/E_MindFusion_Diagramming_DiagramBase_linkCreating_1.htm\" title=\"MindFusion Diagramming for JavaScript: linkCreating\">linkCreating<\/a> event handler. We use a few additional properties, like <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramLink_headBrush_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: headBrush\">headBrush<\/a> <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramLink_headStroke_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: headStroke\">headStroke<\/a> <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramLink_headShapeSize_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: headShapeSize\">headShapeSize<\/a> and  few more to customize the looks of our links. You can find the full list with appearance properties for <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/CC_T_MindFusion_Diagramming_DiagramNode_0_0.htm\" title=\"MindFusion Diagramming for JavaScript: DiagramNode\">DiagramNode<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/CC_T_MindFusion_Diagramming_DiagramLink_0.htm\" title=\"MindFusion Diagramming for JavaScript: DiagramLink\">DiagramLink<\/a> in the online documentation.<\/p>\n<h2>III. Export to JSON<\/h2>\n<p>As we mentioned at the beginning of the post, we are going to save only part of the data that describes each node. We choose to save the node &#8211;id, the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramItem_text_0_0.htm\" title=\"MindFusion Diagramming for JavaScript: text\">text<\/a> and its <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramNode_bounds_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: bounds\">bounds<\/a> We omit all styling, both for nodes, links and the diagram. We create an array and we push there the chosen information:<\/p>\n<pre>\nvar nodesData = [];\n\tdiagram.nodes.forEach(node => {\n\t\tnodesData.push({\n\t\t\tid: node.id,\n\t\t\ttext: node.text,\n\t\t\tbounds: `${node.bounds.x},${node.bounds.y},${node.bounds.width},${node.bounds.height}`\n\t\t})\n\t});\n<\/pre>\n<p>Links are characterized by the start and end object that they connect, which are specified through their <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramLink_origin_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: origin\">origin<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_DiagramLink_destination_0_1.htm\" title=\"MindFusion Diagramming for JavaScript: destination\">destination<\/a> properties. We add those to the array as well:<\/p>\n<pre>\nvar linksData = [];\n\tdiagram.links.forEach(link => {\n\t\tlinksData.push({\n\t\t\tsource: link.origin.id,\n\t\t\ttarget: link.destination.id\n\t\t})\n<\/pre>\n<p>Finally we use the standard JSON.stringify method to convert the list to text in the JSON format. The saving of the text in a file is done by imitating a click on a link. We create a JSON file and initialize a link, which points to it. Then we simulate a click on the link and the default browser behaviour kicks in: the user is asked to save the file.<\/p>\n<pre>\nvar filename = \"CustomJson.json\";\nvar text = saveJson();\nvar blob = new Blob([text], { type: 'application\/json' });\nvar link = document.createElement(\"a\");\nlink.download = filename;\nlink.href = window.URL.createObjectURL(blob);\nlink.click();\n<\/pre>\n<h2>IV. Loading The Diagram From JSON<\/h2>\n<p>When we load the diagram, we will only get information about the properties we have saved: bounds of nodes, origin and destination of links, node text. You can expand the sample to style again the elements. We get the JSON file that holds the diagram and parse the data. We cycle through all nodes there and create them again, reading the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/T_MindFusion_Drawing_Video.htm\" title=\"MindFusion Diagramming for JavaScript: id\">id<\/a> and the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/P_MindFusion_Diagramming_ItemLabel_text_0.htm\" title=\"MindFusion Diagramming for JavaScript: text\">text<\/a> <\/p>\n<pre>\nvar fileName = \"CustomJson.json\";\n\tfetch(fileName).then(response => response.json()).then((data) => {\n\t\t\/\/ load node data\n\t\tvar nodes = data.nodes;\n\t\tfor (var node of nodes) {\n\t\t\tvar boundsArgs = node.bounds.split(',').map(x => +x);\n\t\t\tvar diagramNode = diagram.factory.createShapeNode(...boundsArgs);\n\t\t\tdiagramNode.id = +node.id;\n\t\t\tdiagramNode.text = node.text;\n<\/pre>\n<p>We do something similar for the links: we cycle through all links in the JSON and get their origin and destination. Once we are done with that, we use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/M_MindFusion_Diagramming_Factory_createDiagramLink_2_Point_Point.htm\" title=\"MindFusion Diagramming for JavaScript: createDiagramLink\">createDiagramLink<\/a> method of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/diagram.blazor\/CC_T_MindFusion_Diagramming_Factory_Members_0.htm\" title=\"MindFusion Diagramming for JavaScript: Factory\">Factory<\/a> class to create the links.<\/p>\n<p>And with that our sample is finished. You can download the complete source code, together with the scripts from the link below:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/samples\/javascript\/diagram\/CustomJson.zip\" title=\"Download MindFusion JavaScript Diagram Sample\">Save and Load Specific Diagram Data To\/From JSON<\/a><\/p>\n<p><i>About Diagramming for JavaScript:<\/i> This native JavaScript library provides developers with the ability to create and customize any type of diagram, decision tree, flowchart, class hierarchy, graph, genealogy tree, BPMN diagrams and much more. The control offers rich event set, numerous customization options, animations, graph operations, styling and themes. You have more than 100 predefined nodes, table nodes and more than 15 automatic layout algorithms. Learn more about Diagramming for JavaScript at <a title=\"JavaScript Diagram Library\" href=\"https:\/\/mindfusion.dev\/javascript-diagram.html\">https:\/\/mindfusion.dev\/javascript-diagram.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post we will demonstrate how you can implement methods that save and load part of the information that a diagram renders into JSON format. The Diagram class has built-in toJson and fromJson methods. They serialize completely the &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/save-and-load-part-of-diagram-data-to-from-json-files\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,513,74],"tags":[3,4,731,654],"class_list":["post-2921","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-javascript","category-sample-code","tag-diagram","tag-flowchart","tag-json","tag-tutorial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-L7","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2921"}],"version-history":[{"count":2,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2921\/revisions"}],"predecessor-version":[{"id":2923,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2921\/revisions\/2923"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}