Merge branch 'dev'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sankeydiagram.net",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": true,
   "browserslist": [
     "defaults"
@@ -15,7 +15,8 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
-    "start": "parcel ./src/*.html",
+    "start": "npm run dev",
+    "dev": "parcel ./src/*.html",
     "build": "parcel build ./src/index.html ./src/404.html ./src/privacypolicy.html",
     "lint": "eslint src/**/*.js",
     "lint:fix": "eslint --fix src/**/*.js"

src/css/index.scss

@@ -1,5 +1,9 @@
 @import "core";
 
+:root {
+  --node-font-size: 20px;
+}
+
 .watermark {
   font-family: 'Open Sans', 'Arial', sans-serif;
   font-size: 12pt;
@@ -13,7 +17,7 @@
 .nodes text {
   font-weight: 600;
   font-family: 'Open Sans', 'Arial', sans-serif;
-  font-size: 15pt;
+  font-size: var(--node-font-size);
 }
 
 .nodes rect {
@@ -207,4 +211,4 @@ li {
       transform: translate3d(-50%,calc(-100% - 16px),0);
     }
   }
-}
+}

src/index.html

@@ -125,6 +125,8 @@ <h1 class="has-text-weight-bold">SankeyDiagram.net</h1>
                         <br>
                         <label for="sankey-settings-canvas-height">Canvas Height </label><input type="number" class="settings-input" id="sankey-settings-canvas-height" value="1080">
                         <br>
+                        <label for="sankey-settings-font-size">Font Size (px) </label><input type="number" class="settings-input" id="sankey-settings-font-size" value="20" placeholder="20">
+                        <br>
                         <div class="divider">Debug</div>
                         <span class="button is-dark p-1 mb-1 has-shadow anonymize-data-button is-clickable level-item"><span class="material-icons mr-1">shuffle</span> Anonymize Data</span>
                     </div>

src/js/image-exporter.js

@@ -1,11 +1,19 @@
 import * as saveSvg from 'save-svg-as-png';
 import * as d3 from 'd3';
 
+const modifyStyle = (value) => {
+  return value.replace(
+      'var(--node-font-size)',
+      window.getComputedStyle(document.documentElement).getPropertyValue('--node-font-size'),
+  );
+};
+
 document.querySelectorAll('.download-as-png-button').forEach((element) => {
   element.addEventListener('click', function() {
     saveSvg.saveSvgAsPng(d3.select('svg').node(), 'sankeydiagram-net-export', {
       backgroundColor: 'white',
       excludeUnusedCss: true,
+      modifyStyle: modifyStyle,
     });
   });
 });
@@ -15,6 +23,7 @@ document.querySelectorAll('.download-as-svg-button').forEach((element) => {
     saveSvg.saveSvg(d3.select('svg').node(), 'sankeydiagram-net-export', {
       backgroundColor: 'white',
       excludeUnusedCss: true,
+      modifyStyle: modifyStyle,
     });
   });
 });

src/js/sankey-builder.js

@@ -14,6 +14,7 @@ const sankeySuffixSetting = document.getElementById('sankey-settings-suffix');
 const sankeyHideNumbersSetting = document.getElementById('sankey-settings-hidenumbers');
 const sankeyCanvasWidthSetting = document.getElementById('sankey-settings-canvas-width');
 const sankeyCanvasHeightSetting = document.getElementById('sankey-settings-canvas-height');
+const sankeyFontSizeSetting = document.getElementById('sankey-settings-font-size');
 
 import {lineRegex, sankeyInput} from './constants';
 import './gui';
@@ -57,6 +58,13 @@ sankeyCanvasHeightSetting.addEventListener('change', function() {
   processInput();
 });
 
+sankeyFontSizeSetting.addEventListener('input', () => {
+  document.documentElement.style.setProperty(
+      '--node-font-size',
+      `${sankeyFontSizeSetting.value.trim().length > 0 ? sankeyFontSizeSetting.value.trim() : '20'}px`,
+  );
+});
+
 /**
  * recursively generates the value of an auto-sum connection
  * @param {string[]} lines
@@ -85,7 +93,7 @@ function calculateValue(lines, originalTarget) {
       } else {
         totalValue += parseFloat(value);
       }
-    } else if(target === originalTarget) {
+    } else if (target === originalTarget) {
       if (value === '?') {
         // todo, we should probably handle this as well.
       } else {

src/js/settings-serializer.js

@@ -79,6 +79,7 @@ export function deserializeSettings() {
       }
 
       document.getElementById(key).value = val;
+      element.dispatchEvent(new Event('change'));
     }
   });
 }