add settings to back- and frontend fixes #49 fix #37 and fix #7

editor/www/index.html

@@ -138,7 +138,7 @@
 						mxResources.parse(data.toString());
 					}
 				    fs.readFile(default_style_file, function(err, data2) {
-						var themes = new Object();
+						let themes = new Object();
 						if (err) {console.log(err);} 
 						else {
 							// Configures the default graph theme

editor/www/js/Custom.js

@@ -1,8 +1,63 @@
-/**
- * Created by daniel on 19.04.17.
- */
+function apply_custom_settings(editor_ui) {
+    get_cross_resource('/media/settings/settings.json').then(
+        function(text) {
+            console.log(editor_ui.editor.graph.stylesheet)
+            var json = JSON.parse(text);
+            var styles = {'styles': json.styles || {}};
+            var defaultEdgeStyle = json.defaultEdgeStyle;
+            console.log(defaultEdgeStyle);
+            editor_ui.editor.graph.stylesheet = realMerge(editor_ui.editor.graph.stylesheet, styles);
+            editor_ui.editor.graph.defaultEdgeStyle = realMerge(editor_ui.editor.graph.defaultEdgeStyle,
+                defaultEdgeStyle);
+            console.log(editor_ui.editor.graph.defaultEdgeStyle)
+        },
+        function(err){
+            console.log(err);
+    });
+    //
+}
+
+function realMerge(to, from) {
 
+    for (n in from) {
 
+        if (typeof to[n] != 'object') {
+            to[n] = from[n];
+        } else if (typeof from[n] == 'object') {
+            to[n] = realMerge(to[n], from[n]);
+        }
+    }
+    return to;
+};
+
+function get_cross_resource(src) {
+    var p = new Promise(function(resolve, reject){
+        if (require_exists) {
+            var {app} = require('electron').remote;
+            var extended_path = path.join(app.getAppPath(), src);
+            fs.readFile(extended_path, function(err, data) {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve(data);
+                }
+            });
+        } else {
+            mxUtils.get(src, function(xhr) {
+                // Adds bundle text to resources
+                try {
+                    var text = xhr.getText();
+                } catch (e) {
+                    reject(e);
+                }
+                resolve(text);
+            }, function(err) {
+                reject(err);
+            });
+        }
+    });
+    return p;
+}
 
 function set_background_image_on_init(editor_ui) {
     var newValue = urlParams['image'];
@@ -40,10 +95,11 @@ function set_background_image_on_init(editor_ui) {
             object.height = image.height;
             editor_ui.setPageFormat(object);
             editor_ui.actions.get("fitPageWidth").funct();
+            apply_custom_settings(editor_ui);
         };
         img.onerror = function () {
-            // TODO: remove this -> electron render thread will fail
-            mxUtils.alert(mxResources.get('fileNotFound'));
+            // removed this -> electron render thread will fail
+            // mxUtils.alert(mxResources.get('fileNotFound'));
         };
 
         img.src = newValue;

media/settings/settings.json

@@ -0,0 +1,11 @@
+{
+    "styles": {
+        "defaultVertex": {
+            "fontSize": "100"
+        }
+    },
+    "defaultEdgeStyle": {
+        "edgeStyle": "orthogonalEdgeStyle",
+        "curved": "0"
+    }
+}

src/server.js

@@ -6,7 +6,8 @@ var database = require('./database');
 var path = require('path');
 var codec = require('./codec');
 var utils = require('./utils');
-var sizeOf = require('image-size')
+var Settings = require('./settings');
+var sizeOf = require('image-size');
 
 var log = require('electron-log');
 
@@ -398,6 +399,37 @@ app.post('/heatmap-generate', function (req, res) {
     }
 });
 
+app.get('/settings', function (req, res) {
+    var sets = Settings.get_settings_for_frontend();
+    console.dir(sets);
+    var settings = {
+        "fontSize": sets.styles.defaultVertex.fontSize,
+        "curved": sets.defaultEdgeStyle.curved
+    };
+    res.render('settings',
+    {
+        settings: settings,
+        message: ''
+    });
+});
+
+app.post('/settings', function (req, res) {
+    if (req.body.fontSize) {
+        var curved = req.body.curved || "0";
+        var fontSize = req.body.fontSize;
+
+        var settings = {
+            'fontSize': fontSize,
+            'curved': curved
+        };
+        Settings.set_settings_from_frontend(settings);
+        return res.redirect('/settings')
+    } else {
+        log.warn('Missing params for /settings');
+        return res.redirect('/?e=' + encodeURIComponent('Missing POST parameter for settings'));
+    }
+});
+
 function run() {
     app.listen(4000);
     log.info('TransliterationApplication Server started on http://localhost:4000/');

src/settings.js

@@ -0,0 +1,81 @@
+var fs = require('fs');
+var path = require('path');
+var log = require('electron-log');
+
+
+var Settings = Settings || {};
+
+Settings._store = {};
+
+Settings._loaded = false;
+
+Settings._file_path = path.join(__dirname, '../media/settings/settings.json');
+
+Settings.load = function() {
+    var json;
+    try {
+        json = JSON.parse(fs.readFileSync(Settings._file_path, 'utf8'));
+    } catch (e) {
+        log.error('Could not load settings');
+        log.error(e);
+        json = {};
+    }
+    Settings._store = json;
+    Settings._loaded = true;
+};
+
+Settings.save = function() {
+    // in order to avoid a flush we assure the settings were loaded first
+    Settings.check_loaded();
+    fs.writeFileSync(Settings._file_path, JSON.stringify(Settings._store, null, 4));
+};
+
+Settings.check_loaded = function() {
+    if (!Settings._loaded) {
+        Settings.load();
+    }
+};
+
+Settings.set = function(key, value) {
+    Settings.check_loaded();
+    Settings._store[key] = value;
+};
+
+Settings.get = function(key, fallback) {
+    Settings.check_loaded();
+    if (!Settings.has(key)) {
+        return fallback;
+    }
+    return Settings._store[key];
+};
+
+Settings.has = function(key) {
+    Settings.check_loaded();
+    return Settings._store.hasOwnProperty(key);
+};
+
+Settings.get_settings_for_frontend = function() {
+    Settings.check_loaded();
+    return Settings._store;
+};
+
+Settings.set_settings_from_frontend = function(new_settings) {
+    try {
+        var fontSize = new_settings.fontSize;
+        if (8 < fontSize && fontSize < 200) {
+            Settings._store.styles.defaultVertex.fontSize = fontSize;
+        }
+        var curved = new_settings.curved;
+        console.log(curved)
+        if (curved === "1") {
+            Settings._store.defaultEdgeStyle.curved = "1";
+        } else {
+            Settings._store.defaultEdgeStyle.curved = "0";
+        }
+        Settings.save();
+    } catch (e) {
+        log.error('settings could not be applied');
+    }
+};
+
+module.exports = Settings;

src/views/layout.pug

@@ -9,8 +9,8 @@ html
         link(rel="stylesheet", href="/editor/www/extern/bootstrap.min.css")
         link(rel="stylesheet", href="/editor/www/styles/gui.css")
     block script
-        script(type='text/javascript', src='/editor/www/extern/jquery.min.js')
-        script(type='text/javascript', src='/editor/www/extern/bootstrap.min.js')
+        script(type='text/javascript', src='/editor/www/extern/jquery.min.js', async="False")
+        script(type='text/javascript', src='/editor/www/extern/bootstrap.min.js', async="False")
   block body
       body
         block menu

src/views/settings.pug

@@ -0,0 +1,21 @@
+extends layout.pug
+
+block title
+  title= 'Settings'
+  - var selected = 'settings'
+
+block content
+    p= message
+    h1= 'Settings'
+    p= 'These are general settings'
+    form(method='post', action='/settings')
+        div(class="form-group")
+            label(for='1')= 'Default font size (pt)'
+            input(id='1', class="form-control", type='number', name='fontSize', value=settings.fontSize)
+        div(class="form-group")
+            label(for='2')= 'Should the edges be curved'
+            if settings.curved === "1"
+                input(id='2', class="form-control", type='checkbox', name='curved', value="1", checked)
+            else
+                input(id='2', class="form-control", type='checkbox', name='curved', value="1")
+        input(type='submit', value='save')