[skip CI] updated docs to use YAML

build_preview.js

@@ -1,4 +1,5 @@
 const fs = require('fs');
+const YAML = require('yaml');
 
 const rendering = require('./src/rendering')({
   'scale': 0.05,
@@ -62,6 +63,6 @@ const data = {
   ]
 };
 
-fs.writeFileSync('docs/sample.json', JSON.stringify(data, null, 4), {encoding: 'utf-8'});
+fs.writeFileSync('docs/sample.yml', YAML.stringify(data, null, 4), {encoding: 'utf-8'});
 
 fs.writeFileSync('preview/sample.svg', faDiagrams.compute(data), {encoding: 'utf-8'});

dist/fa-diagrams.js

@@ -8698,6 +8698,10 @@ try {
  * @property {number} x
  * @property {number} y
  * @property {string|{path:string,width:number:height:number}} icon
+ * @property {Object|undefined} bottom
+ * @property {Object|undefined} top
+ * @property {Object|undefined} left
+ * @property {Object|undefined} right
  */
 
 /**
@@ -8705,6 +8709,8 @@ try {
  * @property {string} from
  * @property {string} to
  * @property {string|undefined} type
+ * @property {Object|undefined} bottom
+ * @property {Object|undefined} top
  */
 
 const SUB_DEF = {
@@ -8720,7 +8726,9 @@ const SUB_DEF = {
   'font': 'string',
   'font-size': 'number',
   'font-style': 'string',
-  'scale': 'number',
+  'margin': 'number',
+  'line-height': 'number',
+  'scale': 'number'
 };
 
 const NODE_DEF = {
@@ -8767,10 +8775,12 @@ const DEFAULT_OPTIONS = {
     'size': 0
   },
   'texts': {
-    'font': 'sans-serif',
+    'font': 'Arial',
-    'font-size': '20',
+    'font-size': 15,
     'font-style': 'normal',
-    'color': ''
+    'color': '',
+    'margin': 0.2,
+    'line-height': 1.2
   }
 };
 
@@ -8897,6 +8907,31 @@ module.exports = (options) => {
       return {w: maxX + 1, h: maxY + 1};
     },
 
+    /**
+     * @param {string} text
+     * @param {number} lineHeight
+     * @param {number} x
+     * @param {string} anchor
+     * @return {Object}
+     */
+    getSvgText: (text, lineHeight, x, anchor) => {
+      text = text.trim();
+      if (!text.includes('\n'))
+        return {'_text': text};
+      const list = [];
+      text.split('\n').map(t => t.trim()).forEach((line, i) => {
+        list.push({
+          '_attributes': {
+            'x': x,
+            'dy': i === 0 ? '0' : `${lineHeight}em`,
+            'text-anchor': anchor
+          },
+          '_text': line
+        });
+      });
+      return {'tspan': list};
+    },
+
     /**
      * @param {Node2} node
      */
@@ -8905,11 +8940,11 @@ module.exports = (options) => {
       if (!icon)
         return null;
       const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
-      return {
+      const g = {
         '_attributes': {
           'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
         },
-        'g': {
+        'g': [{
           '_attributes': {
             'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
             'stroke': (node['color'] || options['icons']['color'] || undefined),
@@ -8920,8 +8955,59 @@ module.exports = (options) => {
               'd': icon.path,
             }
           }
-        }
+        }]
       };
+
+      ['bottom', 'top', 'left', 'right'].forEach(side => {
+        const subE = node[side];
+        if (subE && subE.text) {
+          const fontSize = subE['font-size'] || options['texts']['font-size'];
+          const margin = subE['margin'] || options['texts']['margin'];
+          let pos;
+          let anchor;
+          switch (side) {
+            case 'bottom':
+              pos = {x: 0, y: 1};
+              anchor = 'middle';
+              break;
+            case 'top':
+              pos = {x: 0, y: -1};
+              anchor = 'middle';
+              break;
+            case 'left':
+              pos = {x: -1, y: 0};
+              anchor = 'end';
+              break;
+            case 'right':
+              pos = {x: 1, y: 0};
+              anchor = 'start';
+              break;
+          }
+
+          const lineHeight = subE['line-height'] || options['texts']['line-height'];
+          const text = self.getSvgText(subE.text, lineHeight, pos.x * fontSize / 2, anchor);
+          const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
+
+          text['_attributes'] = {
+            'font-family': subE['font'] || options['texts']['font'],
+            'font-size': fontSize,
+            'text-anchor': anchor,
+            'x': pos.x * fontSize / 2,
+            'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
+          };
+
+          g['g'].push({
+            '_attributes': {
+              'transform': `translate(${pos.x * margin} ${pos.y * margin}) scale(${1 / options['scale']} ${1 / options['scale']})`,
+              'stroke': (subE['color'] || node['color'] || options['texts']['color'] || options['icons']['color'] || undefined),
+              'fill': (subE['color'] || node['color'] || options['texts']['color'] || options['icons']['color'] || undefined)
+            },
+            'text': text
+          });
+        }
+      });
+
+      return g;
     },
 
     /**
@@ -8999,8 +9085,8 @@ module.exports = (options) => {
       });
       return convert.js2xml(xml, {
         compact: true,
-        spaces: options['beautify'] ? '\t' : 0
+        spaces: options['beautify'] ? 4 : 0
-      });
+      }).replace(/<\/tspan>(\s*)<tspan/gm, '<\/tspan><tspan'); //fix text rendering
     },
 
     /**
@@ -9015,6 +9101,12 @@ module.exports = (options) => {
         const res = utils.isValid(nodes[key], NODE_DEF);
         if (res)
           throw `Node '${key}' is invalid at key '${res}'`;
+
+        ['bottom', 'top', 'left', 'right'].forEach(sub => {
+          if (typeof nodes[key][sub] === 'string')
+            nodes[key][sub] = {text: nodes[key][sub]};
+        });
+
         const group = self.renderNode(nodes[key]);
         if (group)
           data['g'].push(group);
@@ -9024,6 +9116,12 @@ module.exports = (options) => {
         const res = utils.isValid(link, LINK_DEF);
         if (res)
           throw `Link ${i} (${link.from}->${link.to}) is invalid at key '${res}'`;
+
+        ['bottom', 'top'].forEach(sub => {
+          if (typeof link[sub] === 'string')
+            link[sub] = {text: link[sub]};
+        });
+
         const group = self.renderLink(nodes, link);
         if (group)
           data['g'].push(group);

docs/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>fa-diagrams example</title>
     <script src="jquery-3.4.1.min.js"></script>
+	<script src="yaml.min.js"></script>
     <script src="fa-diagrams-data.min.js"></script>
     <script src="fa-diagrams.min.js"></script>
     <style>
@@ -44,13 +45,13 @@
 </head>
 <body>
 <div id="left">
-    <textarea id="input"></textarea>
+    <textarea id="input" autocomplete="false" spellcheck="false"></textarea>
 </div>
 <div id="right"></div>
 <script>
     $(document).ready(() => {
-      $.getJSON('sample.json', (data) => {
+      $.getJSON('sample.yml', (data) => {
-        $('#input').val(JSON.stringify(data, null, 4)).trigger('paste');
+        $('#input').val(YAML.stringify(data, null, 4)).trigger('paste');
       });
 
       let timeout;
@@ -58,7 +59,7 @@
           clearTimeout(timeout);
           timeout = setTimeout(() => {
             try{
-              let data = JSON.parse($('#input').val());
+              let data = YAML.parse($('#input').val());
               $('#right').html(faDiagrams.compute(data));
             }catch(err){
               $('#right').html(`<h2>${err.toString().replace(/\n/gm, '<br>')}</h2>`);

docs/sample.json

@@ -1,24 +0,0 @@
-{
-  "nodes": [
-    {
-      "name": "node1",
-      "icon": "laptop-code",
-      "color": "#4E342E",
-      "bottom": "my app"
-    },
-    {
-      "name": "node2",
-      "icon": "globe",
-      "color": "#455A64",
-      "bottom": "world"
-    }
-  ],
-  "links": [
-    {
-      "from": "node1",
-      "to": "node2",
-      "color": "#333333",
-      "bottom": "hello"
-    }
-  ]
-}

docs/sample.yml

@@ -0,0 +1,14 @@
+nodes:
+  - name: node1
+    icon: laptop-code
+    color: "#4E342E"
+    bottom: my app
+  - name: node2
+    icon: globe
+    color: "#455A64"
+    bottom: world
+links:
+  - from: node1
+    to: node2
+    color: "#333333"
+    bottom: hello