updated docs

build_preview.js

@@ -58,7 +58,7 @@ const data = {
       from: 'node1',
       to: 'node2',
       color: '#333333',
-      bottom: 'hello'
+      bottom: '"hello"'
     }
   ]
 };

dist/fa-diagrams.js

@@ -8257,7 +8257,7 @@ const rendering = require('./rendering');
 
 const self = {
   /**
-   * @param {{options: Object|undefined, nodes: Object[]|undefined, links: Object[]|undefined}} data
+   * @param {{options: Object?, nodes: Object[]?, links: Object[]?}} data
    * @returns {string}
    */
   compute: (data) => {
@@ -8692,27 +8692,19 @@ try {
   console.error('fa-diagrams: SVG resources could not be loaded: ' + err);
 }
 
-/**
- * @typedef Node2
- * @property {string} name
- * @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
- */
 
 /**
- * @typedef Link2
+ * @typedef SubElement2
- * @property {string} from
+ * @property {string|undefined} text
- * @property {string} to
+ * @property {string|{path:string,width:number:height:number}|undefined} icon
- * @property {string|undefined} type
+ * @property {string|undefined} color
- * @property {Object|undefined} bottom
+ * @property {string|undefined} font
- * @property {Object|undefined} top
+ * @property {string|undefined} font-size
+ * @property {string|undefined} font-style
+ * @property {number|undefined} margin
+ * @property {number|undefined} line-height
+ * @property {number|undefined} scale
  */
-
 const SUB_DEF = {
   '_': 'string',
   'text': 'string',
@@ -8731,6 +8723,17 @@ const SUB_DEF = {
   'scale': 'number'
 };
 
+/**
+ * @typedef Node2
+ * @property {string} name
+ * @property {number} x
+ * @property {number} y
+ * @property {string|{path:string,width:number:height:number}} icon
+ * @property {SubElement2|undefined} bottom
+ * @property {SubElement2|undefined} top
+ * @property {SubElement2|undefined} left
+ * @property {SubElement2|undefined} right
+ */
 const NODE_DEF = {
   'name': '!string',
   'icon': {
@@ -8749,6 +8752,16 @@ const NODE_DEF = {
   'right': SUB_DEF
 };
 
+/**
+ * @typedef Link2
+ * @property {string} from
+ * @property {string} to
+ * @property {string|undefined} type
+ * @property {SubElement2|undefined} bottom
+ * @property {SubElement2|undefined} top
+ * @property {SubElement2|undefined} left
+ * @property {SubElement2|undefined} right
+ */
 const LINK_DEF = {
   'from': '!string',
   'to': '!string',
@@ -8912,7 +8925,7 @@ module.exports = (options) => {
      * @param {number} lineHeight
      * @param {number} x
      * @param {string} anchor
-     * @return {Object}
+     * @return {Object} svg text
      */
     getSvgText: (text, lineHeight, x, anchor) => {
       text = text.trim();
@@ -8933,36 +8946,16 @@ module.exports = (options) => {
     },
 
     /**
-     * @param {Node2} node
+     * @param {Node2|Link2} element
+     * @param {string} side
+     * @param {SubElement2} subE
+     * @param {boolean?} reverse
+     * @param {boolean?} link
+     * @returns {Object} svg group
      */
-    renderNode: (node) => {
+    renderSubText: (element, side, subE, reverse, link) => {
-      const icon = self.getIcon(node.icon);
-      if (!icon)
-        return null;
-      const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
-      const g = {
-        '_attributes': {
-          'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
-        },
-        'g': [{
-          '_attributes': {
-            'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
-            'stroke': (node['color'] || options['icons']['color'] || undefined),
-            'fill': (node['color'] || options['icons']['color'] || undefined)
-          },
-          'path': {
-            '_attributes': {
-              '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'];
+      const margin = (subE['margin'] || options['texts']['margin']) / (link ? 4 : 1);
       let pos;
       let anchor;
       switch (side) {
@@ -8980,7 +8973,6 @@ module.exports = (options) => {
           break;
         case 'right':
           pos = {x: 1, y: 0};
-              anchor = 'start';
           break;
       }
 
@@ -8989,30 +8981,63 @@ module.exports = (options) => {
       const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
 
       text['_attributes'] = {
-            'font-family': subE['font'] || options['texts']['font'],
+        'font-family': subE['font'],
-            'font-size': fontSize,
+        'font-size': subE['font-size'],
         'text-anchor': anchor,
         'x': pos.x * fontSize / 2,
         'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
       };
 
-          g['g'].push({
+      return {
         '_attributes': {
-              'transform': `translate(${pos.x * margin} ${pos.y * margin}) scale(${1 / options['scale']} ${1 / options['scale']})`,
+          'transform': `${reverse?'rotate(180) ':''}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'] || element['color'] || options['texts']['color'] || options[link ? 'links' : 'icons']['color'] || undefined),
-              'fill': (subE['color'] || node['color'] || options['texts']['color'] || options['icons']['color'] || undefined)
         },
         'text': text
-          });
+      };
+    },
+
+    /**
+     * @param {Node2} node
+     * @return {Object} svg group
+     */
+    renderNode: (node) => {
+      const groups = [];
+
+      const icon = self.getIcon(node.icon);
+      if (icon) {
+        const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
+        groups.push({
+          '_attributes': {
+            'transform': `scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
+            'fill': (node['color'] || options['icons']['color'] || undefined)
+          },
+          'path': {
+            '_attributes': {
+              'd': icon.path,
+            }
           }
         });
+      }
 
-      return g;
+      ['bottom', 'top', 'left', 'right'].forEach(side => {
+        const subE = node[side];
+        if (subE && subE.text)
+          groups.push(self.renderSubText(node, side, subE));
+      });
+
+      return !groups.length ? null : {
+        '_attributes': {
+          'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
+        },
+        'g': groups
+      };
     },
 
     /**
      * @param {Object<string,Node2>} nodes
      * @param {Link2} link
+     * @return {Object} svg group
      */
     renderLink: (nodes, link) => {
       const src = nodes[link.from];
@@ -9022,8 +9047,12 @@ module.exports = (options) => {
       const posY = (src.y + dst.y) / 2 + 0.5;
 
       const angle = Math.atan2(dst.y - src.y, (dst.x - src.x) * options['h-spacing']) * 180 / Math.PI;
-      const scale = (link['scale'] || options['links']['scale']) * DEFAULT_SCALE;
 
+      console.log(angle);
+
+      const groups = [];
+
+      const scale = (link['scale'] || options['links']['scale']) * DEFAULT_SCALE;
       let size = link['size'] || options['links']['size'];
 
       if (!size) {
@@ -9039,17 +9068,10 @@ module.exports = (options) => {
 
       const path = self.getLinkPath(link.type, size);
 
-      if (!path)
+      if (path) {
-        return null;
+        groups.push({
-
-      return {
-        '_attributes': {
-          'transform': `translate(${posX} ${posY}) rotate(${angle})`
-        },
-        'g': {
           '_attributes': {
             'transform': `scale(${scale / 512} ${scale / 512}) translate(${(-256 * size)} ${-256})`,
-            'stroke': (link['color'] || options['links']['color'] || undefined),
             'fill': (link['color'] || options['links']['color'] || undefined)
           },
           'path': {
@@ -9057,7 +9079,30 @@ module.exports = (options) => {
               'd': path
             }
           }
+        });
       }
+
+      const reverse = Math.abs(angle) > 90;
+      if (!reverse) {
+        link.top = link.top || link.left;
+        link.bottom = link.bottom || link.right;
+      } else {
+        link.top = link.top || link.right;
+        link.bottom = link.bottom || link.left;
+      }
+
+      ['bottom', 'top'].forEach(side => {
+        const subE = link[side];
+        if (subE && subE.text)
+          groups.push(self.renderSubText(link, side, subE, reverse, true));
+      });
+
+
+      return !groups.length ? null : {
+        '_attributes': {
+          'transform': `translate(${posX} ${posY}) rotate(${angle})`
+        },
+        'g': groups
       };
     },
 
@@ -9065,7 +9110,7 @@ module.exports = (options) => {
      * Convert xml-js data into correct svg xml string
      * @param {Object} data
      * @param {{w:number, h:number}} bounds
-     * @returns {string}
+     * @returns {string} SVG data
      */
     toXML: (data, bounds) => {
       const xml = {
@@ -9075,8 +9120,10 @@ module.exports = (options) => {
             'viewBox': `0 0 ${bounds.w * options['h-spacing']} ${bounds.h}`,
             'width': bounds.w * options['h-spacing'] * options['scale'] / DEFAULT_SCALE,
             'height': bounds.h * options['scale'] / DEFAULT_SCALE,
-            'stroke': options['color'],
+            'font-family': options['texts']['font'],
-            'fill': options['color']
+            'font-size': options['texts']['font-size'],
+            'fill': options['color'],
+            'stroke-width': 0
           }
         }
       };
@@ -9092,26 +9139,12 @@ module.exports = (options) => {
     /**
      * @param {Object<string,Node2>} nodes
      * @param {Link2[]} links
+     * @returns {string} SVG data
      */
     compute: (nodes, links) => {
 
       const data = {'g': []};
 
-      Object.keys(nodes).forEach(key => {
-        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);
-      });
-
       links.forEach((link, i) => {
         const res = utils.isValid(link, LINK_DEF);
         if (res)
@@ -9127,6 +9160,21 @@ module.exports = (options) => {
           data['g'].push(group);
       });
 
+      Object.keys(nodes).forEach(key => {
+        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);
+      });
+
       const bounds = self.getBounds(nodes);
 
       return self.toXML(data, bounds);

docs/sample.yml

@@ -11,4 +11,4 @@ links:
   - from: node1
     to: node2
     color: "#333333"
-    bottom: hello
+    bottom: '"hello"'

package.json

@@ -38,12 +38,13 @@
     ]
   },
   "devDependencies": {
-    "uglify-es": "^3.3.9",
     "browserify": "^16.3.0",
     "coveralls": "^3.0.4",
     "jest": "^24.8.0",
     "jshint": "^2.10.2",
     "node-svn-ultimate": "^1.2.0",
-    "rimraf": "^2.6.3"
+    "rimraf": "^2.6.3",
+    "uglify-es": "^3.3.9",
+    "yaml": "^1.6.0"
   }
 }

preview/links.svg

@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5" stroke="black" fill="black">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5"
+     font-family="Arial" font-size="15" fill="black" stroke-width="0">
     <g>
         <g transform="translate(256 150)">
             <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h877.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>

preview/sample.svg

@@ -1,23 +1,27 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" stroke="black" fill="black">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" font-family="Arial" font-size="15"
+     fill="black" stroke-width="0">
+    <g transform="translate(1.3 0.5) rotate(0)">
+        <g transform="scale(0.00078125 0.00078125) translate(-448 -256)" fill="#333333">
+            <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h749.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
+        </g>
+        <g transform="translate(0 0.05) scale(0.0078125 0.0078125)" fill="#333333">
+            <text text-anchor="middle" x="0" y="18.75">"hello"</text>
+        </g>
+    </g>
     <g transform="translate(0.65 0.5)">
-        <g transform="scale(0.00078125 0.00078125) translate(-320 -256)" stroke="#4E342E" fill="#4E342E">
+        <g transform="scale(0.00078125 0.00078125) translate(-320 -256)" fill="#4E342E">
             <path d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"/>
         </g>
-        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" stroke="#4E342E" fill="#4E342E">
+        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#4E342E">
-            <text font-family="Arial" font-size="15" text-anchor="middle" x="0" y="18.75">my app</text>
+            <text text-anchor="middle" x="0" y="18.75">my app</text>
         </g>
     </g>
     <g transform="translate(1.9500000000000002 0.5)">
-        <g transform="scale(0.00078125 0.00078125) translate(-248 -256)" stroke="#455A64" fill="#455A64">
+        <g transform="scale(0.00078125 0.00078125) translate(-248 -256)" fill="#455A64">
             <path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/>
         </g>
-        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" stroke="#455A64" fill="#455A64">
+        <g transform="translate(0 0.2) scale(0.0078125 0.0078125)" fill="#455A64">
-            <text font-family="Arial" font-size="15" text-anchor="middle" x="0" y="18.75">world</text>
+            <text text-anchor="middle" x="0" y="18.75">world</text>
-        </g>
-    </g>
-    <g transform="translate(1.3 0.5) rotate(0)">
-        <g transform="scale(0.00078125 0.00078125) translate(-448 -256)" stroke="#333333" fill="#333333">
-            <path d="M12 216c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h749.941v46.059c0 21.382 25.851 32.09 40.971 16.971 l86.059 -86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971v46.059z"/>
         </g>
     </g>
 </svg>