Add customizable guardrails into the edit slide canvas

.env.example

@@ -5,4 +5,5 @@ PORT=8000
 ADMIN_USER="admin"
 ADMIN_PASS="admin"
 LOCALE=en
-MEDIASERVER=false
+MEDIASERVER=false
+GUARDRAILS='[{"line": [240, 0, 240, 1080]}, {"line": [1680, 0, 1680, 1080]}]'

config.js

@@ -7,6 +7,25 @@ const port = 8000;        // port for infoscreen
 let hostUrl = "http://" + (process.env.HOST || host) + ":" + (process.env.PORT || port);
 if (process.env.FRONT_PROXY == "true") hostUrl = "https://" + (process.env.HOST || host);
 
+// By default add 4:3 guardrails to have a backward compatible behavior
+// Allow any kind of other line to be configured in a json representation
+// of this array in the .env file
+let guardRails = [{
+    line: [240, 0, 240, 1080],
+    stroke: "#ccc",
+    strokeWidth: 4,
+    opacity: 0.5
+},
+{
+    line: [1680, 0, 1680, 1080],
+    stroke: "#ccc",
+    strokeWidth: 4,
+    opacity: 0.5
+}]
+if (process.env.GUARDRAILS) {
+    guardRails = JSON.parse(process.env.GUARDRAILS)
+}
+
 export default {
     "serverListenPort": process.env.PORT || port,
     "serverHost": process.env.HOST || host,
@@ -17,6 +36,7 @@ export default {
     "mediaServer": (process.env.MEDIASERVER == "true") ? true : false,       // local streaming server for rtmp, see docs how to use
     "defaultLocale": process.env.LOCALE || "en",      // currently supported values are: "en","fi"
     "accesskey": process.env.ACCESSKEY || false,
+    "guardRails": guardRails,
     /*
      * Plugins
      */

modules/admin.js

@@ -458,7 +458,7 @@ export default class admin {
                     json = bundle.getSlideJsonFile(data.fileName);
                     slide = bundle.findSlideByUuid(data.fileName);
                 }
-                socket.emit("callback.edit", {bundleData: bundleData, slideData: slide, json: json, templates: templateData});
+                socket.emit("callback.edit", {bundleData: bundleData, slideData: slide, json: json, templates: templateData, guardRails: config.guardRails});
             });
 
             /** rename **/

public/js/edit.js

@@ -9,6 +9,7 @@ let slideName = "untitled";
 let undoData = [];
 let undoActive = false;
 let templates = {};
+let guardRails = []
 
 
 bundleData = {
@@ -346,6 +347,7 @@ socket.on('callback.edit.updateFileList', function (data) {
 
 socket.on('callback.edit', function (data) {
     bundleData = data.bundleData;
+    guardRails = data.guardRails;
     slideData = data.slideData;
     templates = data.templates;
     canvas.clear();
@@ -539,24 +541,17 @@ function drawGrid() {
         }));
     }
 
-    // Add 4:3 grid highlight to assist on projectors which are "square"
-    canvas.add(new fabric.Line([240, 0, 240, 1080], {
-        stroke: '#ccc',
-        strokeDashArray: [w, w],
-        strokeWidth: 4,
-        opacity: 0.5,
-        selectable: false,
-        zIndex: -1
-    }));
-    canvas.add(new fabric.Line([1680 ,0, 1680, 1080], {
-        stroke: '#ccc',
-        strokeDashArray: [w, w],
-        strokeWidth: 4,
-        opacity: 0.5,
-        selectable: false,
-        zIndex: -1
-    }));
-
+    // Add configured guardrails for the grid to assist on other resoltions
+    guardRails.forEach((guardRail) => {
+        canvas.add(new fabric.Line(guardRail.line, {
+            stroke: guardRail.stroke || '#ccc',
+            strokeDashArray: [w, w],
+            strokeWidth: guardRail.strokeWidth || 4,
+            opacity: guardRail.opacity || 0.5,
+            selectable: false,
+            zIndex: -1
+        }));
+    })
     canvas.renderAll();
 }