From 417b0f82244bcb23c7a685cc3a687d7f3370a11c Mon Sep 17 00:00:00 2001
From: Nick Gasson <nick@nickg.me.uk>
Date: Sun, 5 Nov 2023 21:31:05 +0000
Subject: [PATCH] SVG/CSS hell

---
 contrib/gui/component/WaveView.css | 34 ++++++++++++++++++++++++++++++
 contrib/gui/component/WaveView.tsx | 31 ++++++++++++++++++---------
 contrib/gui/dist.mk                |  2 --
 src/server.c                       |  4 ++--
 4 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/contrib/gui/component/WaveView.css b/contrib/gui/component/WaveView.css
index 217316e6..eec43dfb 100644
--- a/contrib/gui/component/WaveView.css
+++ b/contrib/gui/component/WaveView.css
@@ -25,6 +25,30 @@
     flex-direction: row;
 }
 
+.wave-ruler-split {
+    padding: 0px 0px 0px 0px;
+    display: flex;
+    flex-direction: row;
+}
+
+.wave-ruler-left {
+    background: #707070;
+    position: sticky;
+    top: 0;
+    border-bottom: 2px solid;
+    border-color: #e0e0e0;
+    margin-bottom: 3px;
+}
+
+.wave-ruler-right {
+    background: #000000;
+    position: sticky;
+    top: 0;
+    border-bottom: 2px solid;
+    border-color: #e0e0e0;
+    margin-bottom: 3px;
+}
+
 .wave-signals-list {
     background: #707070;
 }
@@ -38,29 +62,37 @@
     white-space: nowrap;
     text-align: left;
 }
+
 .wave-bus-line {
     stroke: limegreen;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-logic-1 {
     stroke: chartreuse;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-logic-U {
     stroke: yellow;
+    fill: yellow;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-logic-Z {
     stroke: blue;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-logic-X {
     stroke: red;
+    fill: red;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-logic-H {
@@ -90,11 +122,13 @@
 
 .wave-box {
     opacity: 0.5;
+    stroke-width: 0;
 }
 
 .wave-logic-0 {
     stroke: turquoise;
     stroke-width: 1;
+    vector-effect: non-scaling-stroke;
 }
 
 .wave-value-text {
diff --git a/contrib/gui/component/WaveView.tsx b/contrib/gui/component/WaveView.tsx
index 55befcfb..6d60d234 100644
--- a/contrib/gui/component/WaveView.tsx
+++ b/contrib/gui/component/WaveView.tsx
@@ -26,8 +26,8 @@ import "./WaveView.css";
 import { bindEvents } from "../lib/react-util";
 
 interface IWaveSVGProps {
-  width: number;
-  height: number;
+  width: number | string;
+  height: number | string;
   busSlope: number;
 }
 
@@ -58,6 +58,8 @@ function WaveSVG(props: React.PropsWithChildren<IWaveSVGProps>) {
           <line x1="0" y1="10" x2="1" y2="10" className="wave-logic-Z" />
         </g>
         <g id="logicX" shapeRendering="crispEdges">
+          <rect x="0" y="10" width="1" height="9"
+                className="wave-logic-X wave-box" />
           <line x1="0" y1="10" x2="1" y2="10" className="wave-logic-X" />
         </g>
         <g id="logic-" shapeRendering="crispEdges">
@@ -70,7 +72,7 @@ function WaveSVG(props: React.PropsWithChildren<IWaveSVGProps>) {
           <line x1="0" y1="18" x2="1" y2="18" className="wave-logic-L" />
         </g>
         <g id="logicU" shapeRendering="crispEdges">
-          <rect x="0" y="2" width="0.5" height="16"
+          <rect x="0" y="2" width="1" height="17"
                 className="wave-logic-U wave-box" />
           <line x1="0" y1="2" x2="1" y2="2"
                 className="wave-logic-U wave-wide" />
@@ -99,6 +101,9 @@ function WaveSVG(props: React.PropsWithChildren<IWaveSVGProps>) {
         <g id="logicChangeX0" shapeRendering="crispEdges">
           <line x1="0" y1="10" x2="0" y2="18" className="wave-logic-0" />
         </g>
+        <g id="logicChangeX1" shapeRendering="crispEdges">
+          <line x1="0" y1="10" x2="0" y2="2" className="wave-logic-1" />
+        </g>
         <g id="logicChange-0" shapeRendering="crispEdges">
           <use xlinkHref="#logicChangeX0"/>
         </g>
@@ -138,7 +143,7 @@ function WaveView(props: IProps) {
   const busSlope = 5;
   const viewportHeight = size[1] - toolbarHeight;
   const viewportWidth = size[0];
-  const listHeight = Math.max(viewportHeight, signals.length * rowHeight);
+  const listHeight = Math.max(viewportHeight, signals.length * rowHeight + 29);
 
   const signalList = signals.map((path, index) => {
     return (
@@ -163,8 +168,10 @@ function WaveView(props: IProps) {
     const s = props.model.signal(path);
     const points: React.ReactElement[] = [];
 
+    const visibleTime = BigInt(Math.ceil(viewportWidth)) * scale;
     const start = 0n;
-    const end = BigInt(Math.ceil(viewportWidth)) * scale;
+    const end = start + visibleTime > props.model.now
+      ? props.model.now : start + visibleTime;
     const dataType = s.trace.dataType;
 
     let last = s.trace.valueAt(start);
@@ -229,13 +236,17 @@ function WaveView(props: IProps) {
           <Split className="wave-hsplit" gutterSize={4} sizes={[20, 80]}>
             <div style={{height: listHeight}}
                  className="wave-signals-list">
+              <div style={{height: rowHeight}} className="wave-ruler-left"/>
               {signalList}
             </div>
-            <WaveSVG width={Number(props.model.now / scale)}
-                     height={signals.length * rowHeight}
-                     busSlope={busSlope}>
-              {signals.map((s, i) => renderSignal(s, i))}
-            </WaveSVG>
+            <div>
+              <div style={{height: rowHeight}} className="wave-ruler-right"/>
+              <WaveSVG width="100%"
+                       height={signals.length * rowHeight}
+                       busSlope={busSlope}>
+                {signals.map((s, i) => renderSignal(s, i))}
+              </WaveSVG>
+            </div>
           </Split>
         </div>
       </div>
diff --git a/contrib/gui/dist.mk b/contrib/gui/dist.mk
index b3d37ba5..71f47a21 100644
--- a/contrib/gui/dist.mk
+++ b/contrib/gui/dist.mk
@@ -7,8 +7,6 @@ GUI_FILES = \
 	contrib/gui/component/Toolbar.tsx \
 	contrib/gui/component/Transcript.css \
 	contrib/gui/component/Transcript.tsx \
-	contrib/gui/component/WaveRender.css \
-	contrib/gui/component/WaveRender.tsx \
 	contrib/gui/component/WaveView.css \
 	contrib/gui/component/WaveView.tsx \
 	contrib/gui/index.css \
diff --git a/src/server.c b/src/server.c
index f2c2fd68..23c0f639 100644
--- a/src/server.c
+++ b/src/server.c
@@ -66,8 +66,8 @@
 #define WS_OPCODE_TEXT_FRAME   0x1
 #define WS_OPCODE_BINARY_FRAME 0x2
 #define WS_OPCODE_CLOSE_FRAME  0x8
-#define WS_OPCODE_PING_FRAME   0xa
-#define WS_OPCODE_PONG_FRAME   0xb
+#define WS_OPCODE_PING_FRAME   0x9
+#define WS_OPCODE_PONG_FRAME   0xa
 
 #define PORT             8888
 #define MAX_HTTP_REQUEST 1024
-- 
2.39.2