From 84c8c1209257abf09de68ad8018d5d5d09c2a048 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Fri, 23 Nov 2018 13:29:11 -0500
Subject: [PATCH] added Split for main window

---
 css/ui.css                   | 29 ++++++++++++++++++++---------
 doc/notes.txt                |  2 +-
 index.html                   | 21 ++++++++++-----------
 scripts/sync-dev.sh          |  2 +-
 scripts/sync-version-prod.sh |  2 +-
 src/platform/verilog.ts      | 10 ++++++++--
 src/ui.ts                    | 22 +++++++++++++++++++++-
 testwave.html                |  2 +-
 8 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/css/ui.css b/css/ui.css
index a3c28ae1..0bf4cb64 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -66,7 +66,8 @@
 }
 #workspace {
   background-color:#333;
-  width:50%;
+  float:left;
+  height:100%;
 }
 div.editor {
   line-height:1.25;
@@ -217,16 +218,13 @@ a.dropdown-toggle {
     border-radius:6px 0 6px 6px;
 }
 div.emulator {
-  position:absolute;
-  right:0;
-  top:0;
-  width:50%;
+  float:left;
   height:100%;
   background-color: #666;
   margin-top: 20px auto 0;
 }
 div.emuoverlay {
-  position:absolute;
+  position:relative;
   left:0;
   top:0;
   width:100%;
@@ -238,7 +236,7 @@ div.emuscope {
   pointer-events:auto;
 }
 div.emuspacer {
-  width:0;
+  width:100%;
 }
 /* has to be here b/c renders differently after first load if in inline style */
 .emuvideo {
@@ -312,10 +310,10 @@ canvas.pixelated {
 }
 div.replaydiv {
   position:absolute;
-  padding:20px;
+  padding:15px;
   left:50%;
   bottom:0;
-  width:50%;
+  right:0;
   background-color: #666;
 }
 .slider {
@@ -328,6 +326,14 @@ div.replaydiv {
   background-position: 50%;
   pointer-events:auto;
 }
+.gutter.gutter-horizontal {
+  background-image: url('grips/vertical.png');
+  cursor: col-resize;
+}
+.gutter.gutter-vertical {
+  background-image: url('grips/horizontal.png');
+  cursor: row-resize;
+}
 .gutter.gutter-vertical {
   background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
 }
@@ -335,6 +341,11 @@ div.replaydiv {
   background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
   height:100%;
 }
+.split,
+.gutter.gutter-horizontal {
+    float: left;
+    height: 100%;
+}
 div.markdown {
  background-color: #fff;
  width:94%;
diff --git a/doc/notes.txt b/doc/notes.txt
index 3afe4758..ade71761 100644
--- a/doc/notes.txt
+++ b/doc/notes.txt
@@ -78,7 +78,7 @@ TODO:
 - batariBasic: proper line numbers, listing, syntax highlighting
 - show player controls for each platform, allow touch support
 - granular control over time scrubbing, show CPU state
-- __MAIN__ for main C file
+- error showing replay div before rom starts
 
 
 WEB WORKER FORMAT
diff --git a/index.html b/index.html
index fbd70b1f..951ca44c 100644
--- a/index.html
+++ b/index.html
@@ -203,19 +203,19 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
     </div>
     <div id="emuoverlay" class="emuoverlay" style="display:none">
     </div>
+    <div id="replaydiv" class="replaydiv" style="display:none">
+     <div style="display:flex">
+      <button id="replay_min" type="button" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
+      <button id="replay_back" type="button" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
+      <span id="replay_frame" style="text-align:center;width:3em;margin-left:1em;color:#ccc">-</span>
+      <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
+      <button id="replay_fwd" type="button" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
+      <button id="replay_max" type="button" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
+     </div>
+    </div>
   </div>
   <div id="mem_info" class="mem_info" style="display:none">
   </div>
-  <div id="replaydiv" class="replaydiv" style="display:none">
-   <div style="display:flex">
-    <button id="replay_min" type="button" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
-    <button id="replay_back" type="button" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
-    <span id="replay_frame" style="text-align:center;width:3em;margin-left:1em;color:#ccc">-</span>
-    <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
-    <button id="replay_fwd" type="button" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
-    <button id="replay_max" type="button" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
-   </div>
-  </div>
   <div id="error_alert" class="alert alert-danger alert-dismissable" style="position:absolute;right:0;top:0;display:none">
     <button type="button" class="close" onclick="$('.alert').hide()" aria-hidden="true">&times;</button>
     <div id="error_alert_msg"></div>
@@ -351,7 +351,6 @@ function require(modname) {
 <script src="local/lzg.js"></script>
 
 <script>
-  //Split(["#workspace", "#emulator"], {sizes: [50,50]});
   startUI(true);
 </script>
 
diff --git a/scripts/sync-dev.sh b/scripts/sync-dev.sh
index ef2cd630..f4278ac5 100755
--- a/scripts/sync-dev.sh
+++ b/scripts/sync-dev.sh
@@ -3,4 +3,4 @@
 . ./scripts/env.sh
 DESTPATH=$RSYNC_PATH/dev/
 git ls-files -z | rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules -ril --chmod=a+rx -e "ssh -p 2222" --files-from - -0 . $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" ./gen ./mame  $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" ./gen $DESTPATH/
diff --git a/scripts/sync-version-prod.sh b/scripts/sync-version-prod.sh
index f792196b..1abf289a 100755
--- a/scripts/sync-version-prod.sh
+++ b/scripts/sync-version-prod.sh
@@ -21,5 +21,5 @@ mkdir -p $TMPDIR
 git archive $VERSION | tar x -C $TMPDIR
 echo "Copying to $DESTPATH..."
 rsync --stats --exclude '.*' --exclude 'scripts/*' --exclude=node_modules --copy-dest=$DEVPATH -rilz --chmod=a+rx -e "ssh -p 2222" $TMPDIR/ $SUBMODS $DESTPATH
-rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen ./mame  $DESTPATH/
+rsync --stats -rpilvz --chmod=a+rx -e "ssh -p 2222" --copy-dest=$DEVPATH ./gen  $DESTPATH/
 echo "Done."
diff --git a/src/platform/verilog.ts b/src/platform/verilog.ts
index 60079d0c..940b302f 100644
--- a/src/platform/verilog.ts
+++ b/src/platform/verilog.ts
@@ -301,6 +301,7 @@ var VerilogPlatform = function(mainElement, options) {
  
   waveview : WaveformView;
   wavediv : JQuery;
+  topdiv : JQuery;
   split;
   hasvideo : boolean;
 
@@ -326,15 +327,18 @@ var VerilogPlatform = function(mainElement, options) {
     // setup scope
     trace_buffer = new Uint32Array(0x20000);
     var overlay = $("#emuoverlay").show();
-    var topdiv = $('<div class="emuspacer">').appendTo(overlay);
+    this.topdiv = $('<div class="emuspacer">').appendTo(overlay);
+    vcanvas.appendTo(this.topdiv);
     this.wavediv = $('<div class="emuscope">').appendTo(overlay);
-    this.split = Split( [topdiv[0], this.wavediv[0]], {
+    this.split = Split( [this.topdiv[0], this.wavediv[0]], {
       minSize: [0,0],
       sizes: [99,1],
       direction: 'vertical',
       gutterSize: 16,
       onDrag: () => {
         if (this.waveview) this.waveview.recreate();
+        vcanvas.css('position','relative');
+        vcanvas.css('top', -this.wavediv.height()+'px');
       },
       onDragStart: () => {
         $(".emuoverlay").css("pointer-events", "auto"); // allow drag
@@ -356,6 +360,7 @@ var VerilogPlatform = function(mainElement, options) {
   }
   
   updateVideoFrame() {
+    this.topdiv.show(); //show crt
     this.setGenInputs();
     var fps = this.getFrameRate();
     // darken the previous frame?
@@ -403,6 +408,7 @@ var VerilogPlatform = function(mainElement, options) {
   
   updateScopeFrame() {
     this.split.setSizes([0,100]); // ensure scope visible
+    this.topdiv.hide();// hide crt
     var done = this.fillTraceBuffer(32 * trace_signals.length); // TODO: const
     if (done)
       this.pause(); // TODO?
diff --git a/src/ui.ts b/src/ui.ts
index 0b8d39f4..ac8397d8 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -15,7 +15,7 @@ import { getFilenameForPath, getFilenamePrefix, highlightDifferences, invertMap,
 import { StateRecorderImpl } from "./recorder";
 
 // external libs (TODO)
-declare var ga, Tour, GIF, saveAs, JSZip, Mousetrap;
+declare var ga, Tour, GIF, saveAs, JSZip, Mousetrap, Split;
 // in index.html
 declare var exports;
 
@@ -1189,6 +1189,24 @@ function loadScript(scriptfn, onload) {
   document.getElementsByTagName('head')[0].appendChild(script);
 }
 
+export function setupSplits() {
+  const splitName = 'workspace-split-' + platform_id;
+  var sizes = [50, 50];
+  var sizesStr = localStorage.getItem(splitName)
+  if (sizesStr) {
+    try {
+      sizes = JSON.parse(sizesStr);
+    } catch (e) { console.log(e); }
+  }
+  var split;
+  split = Split(['#workspace', '#emulator'], {
+    sizes: sizes,
+    onDragEnd: function() {
+      localStorage.setItem(splitName, JSON.stringify(split.getSizes()))
+    },
+  });
+}
+
 // start
 export function startUI(loadplatform : boolean) {
   installErrorHandler();
@@ -1198,6 +1216,7 @@ export function startUI(loadplatform : boolean) {
     platform_id = qs['platform'] = "vcs";
   }
   $("#item_platform_"+platform_id).addClass("dropdown-item-checked");
+  setupSplits();
   // parse query string
   // is this a share URL?
   if (qs['sharekey']) {
@@ -1225,3 +1244,4 @@ export function startUI(loadplatform : boolean) {
     }
   }
 }
+
diff --git a/testwave.html b/testwave.html
index 536c8456..52c58a9d 100644
--- a/testwave.html
+++ b/testwave.html
@@ -48,7 +48,7 @@ body {
 <div id="notebook">
   <div id="workspace">
   </div>
-  <div class="emulator" id="emulator">
+  <div class="emulator" id="emulator" style="width:100%">
     <div class="emuoverlay" id="emuoverlay">
         <span class="btn-group" role="group">
           <button type="button" class="btn btn-xs" onclick="this.blur();" title="Go to start of trace"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>