skip redudant MOVEs when creating SVG

Author: benchmarko

dist/examples/funcarea.js

@@ -7,7 +7,7 @@ REM funcarea - Functional Area
 REM 26.11.1989
 REM Functional Area with Hidden Line Removal
 REM taken from: https://github.com/benchmarko/CPCBasicApps/blob/master/apps/math/funcarea.js
-REM Modifications: remove GOTOs; added animation; skip unnecessary MOVEs
+REM Modifications: remove GOTOs; added animation
 INK 0,0
 MODE 2
 DIM uh(639),oh(639)
@@ -32,14 +32,10 @@ RETURN
 310 FOR y=yu TO yo STEP dy
   x=xu:GOSUB 450:s1=sp:z1=ze
   GOSUB 480:f1=f
-  pdrawn=0
   FOR x=xu TO xo STEP dx
     GOSUB 450:s2=sp:z2=ze
     GOSUB 480
-    ' only MOVE when starting new segment
-    IF f=0 THEN pdrawn=0
-    IF f1+f=2 AND pdrawn=0 THEN MOVE s1,399-z1:pdrawn=1
-    IF f1+f=2 THEN DRAW s2,399-z2
+    IF f1+f=2 THEN MOVE s1,399-z1:DRAW s2,399-z2
     s1=s2:z1=z2:f1=f
   NEXT x
 NEXT y
@@ -48,14 +44,10 @@ RETURN
 380 FOR x=xo TO xu STEP -dx1
   y=yu:GOSUB 450:s1=sp:z1=ze
   GOSUB 480:f1=f
-  pdrawn=0
   FOR y=yu TO yo STEP dy1
     GOSUB 450:s2=sp:z2=ze
     GOSUB 480
-    ' only MOVE when starting new segment
-    IF f=0 THEN pdrawn=0
-    IF f1+f=2 AND pdrawn=0 THEN MOVE s1,399-z1:pdrawn=1
-    IF f1+f=2 THEN DRAW s2,399-z2
+    IF f1+f=2 THEN MOVE s1,399-z1:DRAW s2,399-z2
     s1=s2:z1=z2:f1=f
   NEXT y
 NEXT x

dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <link rel="stylesheet" href="locobasic.css">
   <link rel="icon" href="favicon.ico">
-  <title>LocoBasic v0.5.26</title>
+  <title>LocoBasic v0.5.27</title>
 </head>
 
 <body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "locobasic",
-  "version": "0.5.26",
+  "version": "0.5.27",
   "description": "# LocoBasic - Loco BASIC",
   "type": "commonjs",
   "scripts": {

src/vm/VmWorker.ts

@@ -113,6 +113,8 @@ export const workerFn = (parentPort: NodeWorkerThreadsType["parentPort"] | Brows
         _graOutputGraphicsIndex: -1,
         _graOriginX: 0,
         _graOriginY: 0,
+        _graLastEmittedX: 0,
+        _graLastEmittedY: 0,
 
         _isTerminal: false, // output for terminal
         _keyBuffer: [] as string[], // buffered pressed keys
@@ -327,6 +329,8 @@ export const workerFn = (parentPort: NodeWorkerThreadsType["parentPort"] | Brows
             }
             vm._graGraphicsX = 0;
             vm._graGraphicsY = 0;
+            vm._graLastEmittedX = 0;
+            vm._graLastEmittedY = 0;
             vm._graOutputGraphicsIndex = -1;
             vm._output = "";
             vm._paperSpanPos = -1;
@@ -454,7 +458,9 @@ export const workerFn = (parentPort: NodeWorkerThreadsType["parentPort"] | Brows
             y = Math.round(y);
 
             if (!vm._graGraphicsPathBuffer.length && type !== "M" && type !== "P") { // path must start with an absolute move
-                vm._graGraphicsPathBuffer.push(`M${vm._graGraphicsX + vm._graOriginX} ${399 - vm._graGraphicsY - vm._graOriginY}`);
+                vm._graLastEmittedX = vm._graGraphicsX + vm._graOriginX;
+                vm._graLastEmittedY = 399 - vm._graGraphicsY - vm._graOriginY;
+                vm._graGraphicsPathBuffer.push(`M${vm._graLastEmittedX} ${vm._graLastEmittedY}`);
             }
 
             const isAbsolute = type === type.toUpperCase();
@@ -469,11 +475,27 @@ export const workerFn = (parentPort: NodeWorkerThreadsType["parentPort"] | Brows
                 y = -y;
             }
 
+            // Skip MOVE if we're already at this position (works regardless of preceding command type)
+            if (type === "M" || type === "m") {
+                let compareX = x;
+                let compareY = y;
+                if (!isAbsolute) {
+                    // Convert relative to absolute screen coordinates
+                    compareX = vm._graGraphicsX + vm._graOriginX;
+                    compareY = 399 - vm._graGraphicsY - vm._graOriginY;
+                }
+                if (vm._graLastEmittedX === compareX && vm._graLastEmittedY === compareY) {
+                    return;
+                }
+            }
+
             const svgPathCmd = (type === "P" || type === "p")
                 ? `${isAbsolute ? "M" : "m"}${x} ${y}h1v1h-1v-1`
                 : `${type}${x} ${y}`;
 
             vm._graGraphicsPathBuffer.push(svgPathCmd);
+            vm._graLastEmittedX = x;
+            vm._graLastEmittedY = y;
         },
 
         graFlushGraphicsPath: (): void => {
@@ -511,8 +533,10 @@ export const workerFn = (parentPort: NodeWorkerThreadsType["parentPort"] | Brows
             text = vm.escapeText(text);
             const yOffset = 16;
             const colorStyleStr = vm._graCurrGraphicsPen >= 0 ? `; color: ${vm.graGetRgbColorStringForPen(vm._graCurrGraphicsPen)}` : "";
-            vm.graAddGraphicsElement(`<text x="${vm._graGraphicsX + vm._graOriginX}" y="${399 - vm._graGraphicsY - vm._graOriginY + yOffset}" style="white-space: pre${colorStyleStr}">${text}</text>`);
+            vm._graLastEmittedY = 399 - vm._graGraphicsY - vm._graOriginY;
+            vm.graAddGraphicsElement(`<text x="${vm._graGraphicsX + vm._graOriginX}" y="${vm._graLastEmittedY + yOffset}" style="white-space: pre${colorStyleStr}">${text}</text>`);
             vm._graGraphicsX += text.length * 8; // assuming 8px width per character
+            vm._graLastEmittedX = vm._graGraphicsX + vm._graOriginX;
         },
 
         graSetOutputGraphicsIndex: (): void => {