electron: sync w/ filesystem, no more replaceSelection()

electron-preload.js

@@ -41,7 +41,6 @@ process.once('loaded', () => {
   // from electron.js: file changed
   ipcRenderer.on('fileChanged', (event, data) => {
     var path = data.path;
-    console.log('fileChanged', path);
     window.reloadWorkspaceFile(path);
   });
 });

electron.html

@@ -197,7 +197,7 @@ Sentry.init({
   <div class="emulator disable-select" id="emulator">
     <!-- replay slider -->
     <div id="replaydiv" class="replaydiv" style="display:none;color:#ccc;text-align:left">
-     <div style="display:flex; grid-gap:1em">
+     <div style="display:grid; grid-template-columns: 3em 3em auto 3em; grid-gap: 1em">
       <button id="replay_back" class="btn" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
       <div>
         Frame<br>
@@ -205,8 +205,7 @@ Sentry.init({
       </div>
       <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
       <button id="replay_fwd" class="btn" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
-     </div>
+
-     <div style="display:flex; grid-gap:1em" id="clockdiv">
       <button id="clock_back" class="btn" title="Back one step"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
       <div>
         Step<br>

electron.js

@@ -24,33 +24,44 @@ function showError(msg, detail) {
 
 // file watcher
 class Workspace {
-  constructor(directory, meta, wnd) {
+  constructor(directory, meta) {
     this.directory = directory;
     this.mainfile = meta.mainfile;
     this.platform = meta.platform;
     if (!this.mainfile) throw new Error(`The "mainfile" key is missing in ${WSMETA_FILENAME}.`)
     if (!this.platform) throw new Error(`The "platform" key is missing in ${WSMETA_FILENAME}.`)
-    var mainfilepath = modpath.join(directory, this.mainfile);
+    var mainfilepath = this.getMainFilePath();
     if (!fs.existsSync(mainfilepath)) throw new Error(`The file "${mainfilepath}" is missing.`);
-    this.watcher = chokidar.watch(mainfilepath);
+    console.log("workspace opened", this.directory, this.mainfile);
+  }
+  getMainFilePath() {
+    return modpath.join(this.directory, this.mainfile);
+  }
+  close() {
+    this.unwatch();
+    console.log("workspace closed", this.directory, this.mainfile);
+  }
+  watch(wnd) {
+    this.watcher = chokidar.watch(this.directory, {
+      awaitWriteFinish: false
+    });
     this.watcher.on('all', (event, path) => {
-      console.log(event, path);
       switch (event) {
-        case 'add':
         case 'change':
+          console.log(event, path);
           wnd.webContents.send('fileChanged', {
             path: modpath.relative(this.directory, path),
           });
           break;
       }
     });
-    console.log("workspace opened", this.directory, this.mainfile);
+    console.log("watching workspace");
   }
-  close() {
+  unwatch() {
     if (this.watcher) {
       this.watcher.close();
       this.watcher = null;
-      console.log("workspace closed", this.directory, this.mainfile);
+      console.log("un-watching workspace");
     }
   }
 }
@@ -105,6 +116,11 @@ function openWorkspace(wnd, ws) {
   });
 }
 
+function getActiveWorkspace() {
+  var wnd = BrowserWindow.getFocusedWindow();
+  return wnd && wnd.workspace;
+}
+
 // TODO: doesn't work if browser window reloads itself
 function reloadCurrentWindow() {
   var wnd = BrowserWindow.getFocusedWindow();
@@ -167,7 +183,7 @@ function openWorkspaceWindow(wspath) {
       }
     } else {
       console.log(meta);
-      var ws = new Workspace(wspath, meta, wnd);
+      var ws = new Workspace(wspath, meta);
       openWorkspace(wnd, ws);
       app.addRecentDocument(wspath);
     }
@@ -228,7 +244,7 @@ function buildMenu() {
       submenu: [
         {
           label: 'New Playground',
-          click: openDefaultWorkspace,
+          click: createWindow,
           accelerator: 'CmdOrCtrl+N',
         },
         {
@@ -395,6 +411,16 @@ app.on('activate', () => {
   }
 })
 
+app.on('browser-window-focus', (e) => {
+  var ws = e.sender.workspace;
+  if (ws) ws.unwatch();
+})
+
+app.on('browser-window-blur', (e) => {
+  var ws = e.sender.workspace;
+  if (ws) ws.watch(e.sender);
+})
+
 app.on('open-file', (event, path) => {
   openWorkspaceWindow(path);
 })

index.html

@@ -309,7 +309,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
   <div class="emulator disable-select" id="emulator">
     <!-- replay slider -->
     <div id="replaydiv" class="replaydiv" style="display:none;color:#ccc;text-align:left">
-     <div style="display:flex; grid-gap:1em">
+     <div style="display:grid; grid-template-columns: 3em 3em auto 3em; grid-gap: 1em">
       <button id="replay_back" class="btn" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
       <div>
         Frame<br>
@@ -317,8 +317,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
       </div>
       <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
       <button id="replay_fwd" class="btn" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
-     </div>
+
-     <div style="display:flex; grid-gap:1em" id="clockdiv">
       <button id="clock_back" class="btn" title="Back one step"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
       <div>
         Step<br>

meta/electron.diff

@@ -1,5 +1,5 @@
---- index.html	2020-08-29 13:22:47.000000000 -0500
+--- index.html	2020-08-29 17:52:46.000000000 -0500
-+++ electron.html	2020-08-29 13:22:40.000000000 -0500
++++ electron.html	2020-08-29 17:54:08.000000000 -0500
 @@ -3,18 +3,7 @@
  
  <head>
@@ -193,7 +193,7 @@
    <!-- 8bitworkshop logo -->
    <span class="logo-gradient hidden-xs hidden-sm hidden-md pull-right" style="margin-left:auto" onclick="window.open('/','_8bitws');">8bitworkshop</span>
  
-@@ -479,73 +367,6 @@
+@@ -478,73 +366,6 @@
      </div>
    </div>
  </div>

src/ide/project.ts

@@ -298,6 +298,7 @@ export class CodeProject {
   }
 
   updateFile(path:string, text:FileData) {
+    if (this.filedata[path] == text) return; // unchanged, don't update
     this.updateFileInStore(path, text); // TODO: isBinary
     this.filedata[path] = text;
     if (this.okToSend() && this.mainPath) {

src/ide/ui.ts

@@ -2280,8 +2280,11 @@ export function getElectronFile(url:string, success:(text:string|Uint8Array)=>vo
   }
 }
 export function reloadWorkspaceFile(path: string) {
-  var datatype = typeof current_project.filedata[path] == 'string' ? 'text' : 'arraybuffer';
+  var oldval = current_project.filedata[path];
-  projectWindows.updateFile(path, getWorkspaceFile(path, datatype));
+  if (oldval != null) {
+    var datatype = typeof oldval == 'string' ? 'text' : 'arraybuffer';
+    projectWindows.updateFile(path, getWorkspaceFile(path, datatype));
+  }
 }
 function writeOutputROMFile() {
   if (isElectronWorkspace && current_output instanceof Uint8Array) {

src/ide/views.ts

@@ -183,11 +183,14 @@ export class SourceEditor implements ProjectView {
     var i,j;
     var oldtext = this.editor.getValue();
     if (oldtext != text) {
+      this.editor.setValue(text);
+      /*
       // find minimum range to undo
       for (i=0; i<oldtext.length && i<text.length && text[i] == oldtext[i]; i++) { }
       for (j=0; j<oldtext.length && j<text.length && text[text.length-1-j] == oldtext[oldtext.length-1-j]; j++) { }
       //console.log(i,j,oldtext.substring(i,oldtext.length-j));
       this.replaceSelection(i, oldtext.length-j, text.substring(i, text.length-j)); // calls setCode()
+      */
       // clear history if setting empty editor
       if (oldtext == '') {
         this.editor.clearHistory();

src/ide/windows.ts

@@ -3,7 +3,7 @@
 import $ = require("jquery");
 import { CodeProject } from "./project";
 import { WorkerError, FileData } from "../common/workertypes";
-import { ProjectView } from "./views";
+import { ProjectView, SourceEditor } from "./views";
 import { getFilenamePrefix, getFilenameForPath } from "../common/util";
 
 type WindowCreateFunction = (id:string) => ProjectView;