[skip CI] updated docs

README.md

@@ -18,7 +18,7 @@
 * [x] Colors
 * [x] Sub-texts
 * [x] Font styles
-* [ ] Sub-icons
+* [x] Sub-icons
 * [ ] More options
 * [ ] Unit testing
 
@@ -116,6 +116,7 @@ const data = {
       from: 'node1',
       to: 'node2',
       color: '#333333',
+      top: {icon: 'envelope'},
       bottom: '"hello"'
     }
   ]
@@ -177,8 +178,11 @@ Will produce the following diagram:
 | `rendering.scale` | 256 | (in pixels) final icons size | no |
 | `rendering.color` | `black` | color of all elements | no |
 | `rendering.h-spacing` | 1.3 | how width is stretched comparing to height | no |
-| `rendering.icons.scale` | 1 | default scaling of icons | in node or sub-icon |
+| `rendering.icons.scale` | 1 | default scaling of icons | in node |
-| `rendering.icons.color` | `''` | color of all icons | in node or sub-icon |
+| `rendering.icons.color` | `''` | color of all icons | in node |
+| `rendering.sub-icons.scale` | 0.4 | default scaling of sub-icons | in sub-icon |
+| `rendering.sub-icons.color` | `''` | color of all sub-icons | in sub-icon |
+| `rendering.sub-icons.margin` | 0.3 | margin between sub-icons and elements | in sub-icon |
 | `rendering.links.scale` | 1 | default scaling of links | in link |
 | `rendering.links.color` | `''` | color of all links (might be redefined in link definition) | in link |
 | `rendering.links.size` | 0 | forced size/length of the links (0 means it will be computed from the distance between the nodes) | in link |
@@ -243,7 +247,8 @@ You can define a relative icon with the following:
 | --- | --- | --- |  --- |
 | **`icon`** | string/object | **yes** | name of the Font-Awesome icon of the sub-element (see [Icon names](#icon-names)) |
 | `color` | string | no | redefine the color |
-| `scale` | number | no | redefine this icon scale |
+| `scale` | number | no | redefine this sub-icon scale |
+| `margin` | number | no | redefine the margin with the parent element |
 
 ## More info
 *[back to top](#top)*

build_preview.js

@@ -44,7 +44,7 @@ const data = {
       name: 'node1',
       icon: 'laptop-code',
       color: '#4E342E',
-      bottom: 'my app',
+      bottom: 'my app'
     },
     {
       name: 'node2',
@@ -58,6 +58,7 @@ const data = {
       from: 'node1',
       to: 'node2',
       color: '#333333',
+      top: {icon: 'envelope'},
       bottom: '"hello"'
     }
   ]

dist/fa-diagrams.js

@@ -8782,6 +8782,11 @@ const DEFAULT_OPTIONS = {
     'scale': 1,
     'color': ''
   },
+  'sub-icons': {
+    'scale': 0.4,
+    'color': '',
+    'margin': 0.3
+  },
   'links': {
     'scale': 1,
     'color': '',
@@ -8921,13 +8926,14 @@ module.exports = (options) => {
     },
 
     /**
+     * Generate the correct svg text with possible tspan in case of multi-line
      * @param {string} text
      * @param {number} lineHeight
      * @param {number} x
      * @param {string} anchor
      * @return {Object} svg text
      */
-    getSvgText: (text, lineHeight, x, anchor) => {
+    renderSvgText: (text, lineHeight, x, anchor) => {
       text = text.trim();
       if (!text.includes('\n'))
         return {'_text': text};
@@ -8936,7 +8942,7 @@ module.exports = (options) => {
         list.push({
           '_attributes': {
             'x': x,
-            'dy': i === 0 ? '0' : `${lineHeight}em`,
+            'dy': i === 0 ? 0 : `${lineHeight}em`,
             'text-anchor': anchor
           },
           '_text': line
@@ -8946,16 +8952,68 @@ module.exports = (options) => {
     },
 
     /**
+     * Get the svg font-weight property from defined style
+     * @param {string} style
+     * @param {boolean} force
+     * @returns {string|undefined}
+     */
+    getFontWeight: (style, force = false) => {
+      if (!style)
+        return undefined;
+      const spl = style.split(' ');
+      if (spl.includes('bold'))
+        return 'bold';
+      return force ? 'normal' : undefined;
+    },
+
+    /**
+     * Get the svg font-style property from defined style
+     * @param {string} style
+     * @param {boolean} force
+     * @returns {string|undefined}
+     */
+    getFontStyle: (style, force = false) => {
+      if (!style)
+        return undefined;
+      const spl = style.split(' ');
+      if (spl.includes('italic'))
+        return 'italic';
+      if (spl.includes('oblique'))
+        return 'oblique';
+      return force ? 'normal' : undefined;
+    },
+
+    /**
+     * Get the svg text-decoration property from defined style
+     * @param {string} style
+     * @returns {string|undefined}
+     */
+    getTextDecoration: (style) => {
+      if (!style)
+        return undefined;
+      const out = [];
+      const spl = style.split(' ');
+      if (spl.includes('underlined'))
+        out.push('underline');
+      if (spl.includes('overlined'))
+        out.push('overline');
+      if (spl.includes('striked'))
+        out.push('line-through');
+      return out.length ? out.join(',') : undefined;
+    },
+
+    /**
+     * Generate a svg group from the given sub-element
      * @param {Node2|Link2} element
      * @param {string} side
-     * @param {SubElement2} subE
      * @param {boolean?} reverse
      * @param {boolean?} link
-     * @returns {Object} svg group
+     * @returns {Object|null} svg group
      */
-    renderSubText: (element, side, subE, reverse, link) => {
+    renderSubElement: (element, side, reverse = false, link = false) => {
-      const fontSize = subE['font-size'] || options['texts']['font-size'];
+      if (!element[side])
-      const margin = (subE['margin'] || options['texts']['margin']) / (link ? 4 : 1);
+        return null;
+      const subE = element[side];
       let pos;
       let anchor;
       switch (side) {
@@ -8976,13 +9034,19 @@ module.exports = (options) => {
           break;
       }
 
+      if (subE.text) {
+        const margin = (subE['margin'] || options['texts']['margin']) / (link ? 4 : 1);
+        const fontSize = subE['font-size'] || options['texts']['font-size'];
         const lineHeight = subE['line-height'] || options['texts']['line-height'];
-      const text = self.getSvgText(subE.text, lineHeight, pos.x * fontSize / 2, anchor);
+        const text = self.renderSvgText(subE.text, lineHeight, pos.x * fontSize / 2, anchor);
         const textHeight = text['tspan'] ? text['tspan'].length - 1 : 0;
 
         text['_attributes'] = {
           'font-family': subE['font'],
           'font-size': subE['font-size'],
+          'font-weight': self.getFontWeight(subE['font-style'], true),
+          'font-style': self.getFontStyle(subE['font-style'], true),
+          'text-decoration': self.getTextDecoration(subE['font-style'] || options['texts']['font-style']),
           'text-anchor': anchor,
           'x': pos.x * fontSize / 2,
           'y': (pos.y + 0.25) * fontSize - (1 - pos.y) * textHeight * fontSize * lineHeight / 2
@@ -8995,9 +9059,29 @@ module.exports = (options) => {
           },
           'text': text
         };
+      } else {
+        const margin = (subE['margin'] || options['sub-icons']['margin']) / (link ? 2 : 1);
+        const icon = self.getIcon(subE.icon);
+        if (!icon)
+          return null;
+        const scale = (subE['scale'] || options['sub-icons']['scale']) * DEFAULT_SCALE;
+        return {
+          '_attributes': {
+            'transform': `${reverse ? 'rotate(180) ' : ''}translate(${pos.x * margin} ${pos.y * margin}) scale(${scale / icon.height} ${scale / icon.height}) translate(${-icon.width / 2} ${-icon.height / 2})`,
+            'fill': (subE['color'] || element['color'] || options['sub-icons']['color'] || options[link ? 'links' : 'icons']['color'] || undefined),
+          },
+          'path': {
+            '_attributes': {
+              'd': icon.path,
+            }
+          }
+        };
+      }
+
     },
 
     /**
+     * Generate the svg group from a given node
      * @param {Node2} node
      * @return {Object} svg group
      */
@@ -9021,9 +9105,9 @@ module.exports = (options) => {
       }
 
       ['bottom', 'top', 'left', 'right'].forEach(side => {
-        const subE = node[side];
+        const group = self.renderSubElement(node, side);
-        if (subE && subE.text)
+        if (group)
-          groups.push(self.renderSubText(node, side, subE));
+          groups.push(group);
       });
 
       return !groups.length ? null : {
@@ -9035,6 +9119,7 @@ module.exports = (options) => {
     },
 
     /**
+     * Generate a svg group from the given link
      * @param {Object<string,Node2>} nodes
      * @param {Link2} link
      * @return {Object} svg group
@@ -9090,9 +9175,9 @@ module.exports = (options) => {
       }
 
       ['bottom', 'top'].forEach(side => {
-        const subE = link[side];
+        const group = self.renderSubElement(link, side, reverse, true);
-        if (subE && subE.text)
+        if (group)
-          groups.push(self.renderSubText(link, side, subE, reverse, true));
+          groups.push(group);
       });
 
 
@@ -9120,6 +9205,9 @@ module.exports = (options) => {
             'height': bounds.h * options['scale'] / DEFAULT_SCALE,
             'font-family': options['texts']['font'],
             'font-size': options['texts']['font-size'],
+            'font-weight': self.getFontWeight(options['texts']['font-style']),
+            'font-style': self.getFontStyle(options['texts']['font-style']),
+            'text-decoration': self.getTextDecoration(options['texts']['font-style']),
             'fill': options['color'],
             'stroke-width': 0
           }
@@ -9150,7 +9238,7 @@ module.exports = (options) => {
 
         ['bottom', 'top'].forEach(sub => {
           if (typeof link[sub] === 'string')
-            link[sub] = {text: link[sub]};
+            link[sub] = {text: link[sub].trim()};
         });
 
         const group = self.renderLink(nodes, link);
@@ -9165,7 +9253,7 @@ module.exports = (options) => {
 
         ['bottom', 'top', 'left', 'right'].forEach(sub => {
           if (typeof nodes[key][sub] === 'string')
-            nodes[key][sub] = {text: nodes[key][sub]};
+            nodes[key][sub] = {text: nodes[key][sub].trim()};
         });
 
         const group = self.renderNode(nodes[key]);

docs/sample.yml

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

preview/links.svg

@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3072 2948" width="384.00000000000006" height="368.5"
+<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">
-     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,27 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.6 1" width="832" height="320" font-family="Arial" font-size="15"
+<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 transform="translate(0 -0.15) scale(0.00031250000000000006 0.00031250000000000006) translate(-256 -256)" fill="#333333"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></g></g><g transform="translate(0.65 0.5)"><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)" fill="#4E342E"><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)" 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)" fill="#455A64"><text text-anchor="middle" x="0" y="18.75">world</text></g></g></svg>
-     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)" 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)" fill="#4E342E">
-            <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)" 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)" fill="#455A64">
-            <text text-anchor="middle" x="0" y="18.75">world</text>
-        </g>
-    </g>
-</svg>