klemek/fa-diagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Colors

Browse Source
This commit is contained in:
Klemek
2019-07-15 15:37:46 +02:00
parent 3588a387d9
commit b61ddf744a
2 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+18 -15
View File
@@ -13,7 +13,7 @@
* [x] Node's icon rendering
* [x] Simple links rendering
* [x] Dashed links rendering
* [ ] Colors
* [x] Colors
* [ ] Sub-elements
* [ ] More options
* [ ] PNG output
@@ -165,20 +165,23 @@ Will produce the following diagram:
### `options`
| Key (`.subkey`) | Default value | Info |
| --- | --- | --- |
| `placing.max-link-length` | 3 | maximum stretching of links between nodes |
| `placing.diagonals` | `true` | allow diagonal links to be made |
| `rendering.beautify` | `false` | output a readable SVG file |
| `rendering.scale` | 128 | (in pixels) final icons size |
| `rendering.color` | `black` | color of all elements |
| `rendering.h-spacing` | 1.3 | how width is stretched comparing to height |
| `rendering.icons.scale` | 1 | default scaling of icons (might be redefined in node definition) |
| `rendering.links.scale` | 1 | default scaling of links (might be redefined in link definition) |
| `rendering.links.size` | 0 | forced size/length of the links (0 means it will be computed from the distance between the nodes) (might be redefined in link definition) |
| `rendering.texts.font` | `'sans-serif'` | font family of the texts (might be redefined in sub-elements definition) |
| `rendering.texts.font-size` | 20 | font size of the texts (might be redefined in sub-elements definition) |
| `rendering.texts.font-style` | `'normal'` | font style of the texts (see [Font styles](#font-styles)) (might be redefined in sub-elements definition) |
| Key (`.subkey`) | Default value | Info | Redefined |
| --- | --- | --- | --- |
| `placing.max-link-length` | 3 | maximum stretching of links between nodes | no |
| `placing.diagonals` | `true` | allow diagonal links to be made | no |
| `rendering.beautify` | `false` | output a readable SVG file | no |
| `rendering.scale` | 128 | (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.color` | `''` | color of all icons | in node or 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 |
| `rendering.texts.font` | `'sans-serif'` | font family of the texts (might be redefined in sub-elements definition) | in text |
| `rendering.texts.font-size` | 20 | font size of the texts | in sub-text |
| `rendering.texts.font-style` | `'normal'` | font style of the texts (see [Font styles](#font-styles)) | in sub-text |
| `rendering.texts.color` | `''` | color of all texts | in sub-text |
### `nodes`
src/rendering.js
+19 -5
View File
@@ -61,14 +61,22 @@ const DEFAULT_OPTIONS = {
'beautify': false,
'scale': 128,
'h-spacing': 1.3,
'color': 'black',
'icons': {
'scale': 1
'scale': 1,
'color': ''
},
'links': {
'scale': 1,
'color': '',
'size': 0
},
'font': 'sans-serif'
'texts': {
'font': 'sans-serif',
'font-size': '20',
'font-style': 'normal',
'color': ''
}
};
const DEFAULT_SCALE = 0.4;
@@ -189,11 +197,13 @@ module.exports = (options) => {
const scale = (node['scale'] || options['icons']['scale']) * DEFAULT_SCALE;
const group = {
'_attributes': {
'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`
'transform': `translate(${(node.x + 0.5) * options['h-spacing']} ${node.y + 0.5})`,
},
'g': {
'_attributes': {
'transform': `scale(${scale / 512} ${scale / 512}) translate(${-icon.width / 2} ${-256})`
'transform': `scale(${scale / 512} ${scale / 512}) translate(${-icon.width / 2} ${-256})`,
'stroke': (node['color'] || options['icons']['color'] || undefined),
'fill': (node['color'] || options['icons']['color'] || undefined)
},
'path': {
'_attributes': {
@@ -247,7 +257,9 @@ module.exports = (options) => {
},
'g': {
'_attributes': {
'transform': `scale(${scale / 512} ${scale / 512}) translate(${(-256 * size)} ${-256})`
'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': {
'_attributes': {
@@ -274,6 +286,8 @@ 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'],
'fill': options['color']
}
}
};