expose background color in modalWindow, add option to wait for dom...

...to load before showing the window

newIDE/electron-app/app/ModalWindow.js

@@ -1,6 +1,6 @@
-const electron = require('electron');
+const electron = require("electron");
 const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
-const isDev = require('electron-is').dev();
+const isDev = require("electron-is").dev();
 const ipcMain = electron.ipcMain;
 
 // Generic function to load external editors in a modal window.
@@ -12,9 +12,21 @@ let modalWindow = null;
  * Open a modal window containing an external HTML5 editor
  */
 
-const loadModalWindow = ({ onReady, devTools, parentWindow, readyChannelName, indexSubPath, relativeWidth=0.7, relativeHeight=0.9 }) => {
+const loadModalWindow = ({
+  onReady,
+  devTools,
+  parentWindow,
+  readyChannelName,
+  indexSubPath,
+  relativeWidth = 0.7,
+  relativeHeight = 0.9,
+  backgroundColor = "white",
+  showAfterLoaded = false,
+}) => {
   if (modalWindow) {
-    modalWindow.show();
+    if (!showAfterLoaded) {
+      modalWindow.show();
+    }
     onReady(modalWindow);
   }
 
@@ -22,40 +34,48 @@ const loadModalWindow = ({ onReady, devTools, parentWindow, readyChannelName, in
     parent: parentWindow,
     width: Math.floor(parentWindow.getSize()[0] * relativeWidth),
     height: Math.floor(parentWindow.getSize()[1] * relativeHeight),
-    backgroundColor: '#000000',
+    backgroundColor: backgroundColor,
     modal: true,
     center: true,
+    show: !showAfterLoaded,
     webPreferences: {
-      webSecurity: false,
-    },
+      webSecurity: false
+    }
   };
 
   modalWindow = new BrowserWindow(windowOptions);
   modalWindow.setMenu(null);
 
   ipcMain.removeAllListeners(readyChannelName);
-  ipcMain.on(readyChannelName, (event) => {
+  ipcMain.on(readyChannelName, event => {
     onReady(modalWindow);
   });
 
+  // If set so, show the window after it has been loaded
+  modalWindow.webContents.on("did-finish-load", function() {
+    if (showAfterLoaded) {
+      modalWindow.show();
+    }
+  });
+
   // Load the index.html of the app.
   if (isDev) {
     // Development (server hosted by npm run start)
-    modalWindow.loadURL('http://localhost:3000/External/'+ indexSubPath);
+    modalWindow.loadURL("http://localhost:3000/External/" + indexSubPath);
     modalWindow.openDevTools();
   } else {
     // Production (with npm run build)
     modalWindow.loadURL(
-      'file://' + __dirname + '/www/External/' + indexSubPath
+      "file://" + __dirname + "/www/External/" + indexSubPath
     );
     if (devTools) modalWindow.openDevTools();
   }
-  
-  modalWindow.on('closed', event => {
+
+  modalWindow.on("closed", event => {
     modalWindow = null;
   });
 
-  modalWindow.on('close', event => {
+  modalWindow.on("close", event => {
     // use destroy as a wordaround to force window closing, which is not done properly otherwise on Windows
     modalWindow.destroy();
     modalWindow = null;
@@ -63,5 +83,5 @@ const loadModalWindow = ({ onReady, devTools, parentWindow, readyChannelName, in
 };
 
 module.exports = {
-  loadModalWindow,
+  loadModalWindow
 };

newIDE/electron-app/app/main.js

@@ -127,6 +127,7 @@ app.on('ready', function () {
       devTools,
       readyChannelName:'piskel-ready',
       indexSubPath:'Piskel/piskel-index.html',
+      backgroundColor: 'black',
       onReady: piskelWindow =>
         piskelWindow.webContents.send('piskel-load-animation', piskelData),
     });
@@ -146,6 +147,8 @@ app.on('ready', function () {
       indexSubPath:'jsfx/jsfx-index.html',
       relativeWidth:0.55,
       relativeHeight:0.8,
+      backgroundColor: 'white',
+      showAfterLoaded: true,
       onReady: jsfxWindow => 
         jsfxWindow.webContents.send('jsfx-open', jsfxData),
     });