Try to optimize redrawing of disassembly view, still more work to do

src/common/custom.d.ts

@@ -92,7 +92,6 @@ type MachineState = {
   showScanlines: boolean,
   cout: number,
   cpuSpeed: number,
-  disassemblyAddress: number,
   theme: UI_THEME,
   extraRamSize: number,
   helpText: string,
@@ -299,3 +298,7 @@ type BreakpointExpression = {
 
 type StepCallbackFunction = () => boolean
 
+type DisassemblyProps = {
+  update: number,
+  refresh: () => void,
+}

src/ui/controller.ts

@@ -1,6 +1,7 @@
 import { doPlayDriveSound } from "./devices/drivesounds"
 import { DRIVE, RUN_MODE } from "../common/utility"
-import { passSetRunMode, passSetDisassembleAddress, handleGetState6502 } from "./main2worker"
+import { passSetRunMode, handleGetState6502 } from "./main2worker"
+import { setDisassemblyAddress } from "./panels/debugpanelutilities"
 
 export const handleSetCPUState = (state: RUN_MODE) => {
   // This is a hack to force the browser to start playing sound after a user gesture.
@@ -9,9 +10,7 @@ export const handleSetCPUState = (state: RUN_MODE) => {
   }
   if (state === RUN_MODE.PAUSED) {
     const state = handleGetState6502()
-    passSetDisassembleAddress(state.PC)
-  } else {
-    passSetDisassembleAddress(-1)
+    setDisassemblyAddress(state.PC)
   }
   passSetRunMode(state)
 }

src/ui/main2worker.ts

@@ -56,11 +56,6 @@ export const passSetDebug = (doDebug: boolean) => {
   machineState.isDebugging = doDebug
 }
 
-export const passSetDisassembleAddress = (addr: number) => {
-  // Force the state right away, so the UI can update.
-  machineState.disassemblyAddress = addr
-}
-
 export const passSpeedMode = (mode: number) => {
   doPostMessage(MSG_MAIN.SPEED, mode)
   // Force the state right away, so the UI can update.
@@ -229,7 +224,6 @@ let machineState: MachineState = {
   showScanlines: false,
   cout: 0,
   cpuSpeed: 0,
-  disassemblyAddress: 0,
   theme: UI_THEME.CLASSIC,
   extraRamSize: 64,
   helpText: "",
@@ -269,7 +263,6 @@ export const doOnMessage = (e: MessageEvent): {speed: number, helptext: string}
       newState.helpText = machineState.helpText
       newState.useOpenAppleKey = machineState.useOpenAppleKey
       newState.hotReload = machineState.hotReload
-      newState.disassemblyAddress = machineState.disassemblyAddress
       machineState = newState
       return {speed: machineState.cpuSpeed, helptext: machineState.helpText}
     }
@@ -428,10 +421,6 @@ export const handleGetAddressGetTable = () => {
   return machineState.addressGetTable
 }
 
-export const handleGetDisassemblyAddress = () => {
-  return machineState.disassemblyAddress
-}
-
 export const handleGetLeftButton = () => {
   return machineState.button0
 }

src/ui/panels/breakpointsview.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { handleGetBreakpoints, passBreakpoints, passSetDisassembleAddress } from "../main2worker"
+import { handleGetBreakpoints, passBreakpoints } from "../main2worker"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
   faPencil as iconBreakpointEdit,
@@ -11,7 +11,7 @@ import {
   faCircle as iconBreakpointEnabled,
 } from "@fortawesome/free-solid-svg-icons"
 import { faCircle as iconBreakpointDisabled } from "@fortawesome/free-regular-svg-icons"
-import { getLineOfDisassembly } from "./debugpanelutilities"
+import { getLineOfDisassembly, setDisassemblyAddress } from "./debugpanelutilities"
 import BreakpointEdit from "./breakpointedit"
 import { Breakpoint, BreakpointMap, getBreakpointString, getBreakpointStyle } from "../../common/breakpoint"
 import { useGlobalContext } from "../globalcontext"
@@ -29,7 +29,7 @@ const BreakpointsView = () => {
     const addr = parseInt(event.currentTarget.getAttribute("data-key") || "-1")
     if (addr >= 0) {
       if (getLineOfDisassembly(addr) < 0) {
-        passSetDisassembleAddress(addr)
+        setDisassemblyAddress(addr)
       }
     }
   }

src/ui/panels/debugpanelutilities.ts

@@ -1,5 +1,5 @@
 import { ADDR_MODE, isBranchInstruction, toHex } from "../../common/utility"
-import { handleGetAddressGetTable, handleGetDisassemblyAddress, handleGetMemoryDump } from "../main2worker"
+import { handleGetAddressGetTable, handleGetMemoryDump, handleGetState6502 } from "../main2worker"
 
 let instructions: Array<PCodeInstr1>
 export const set6502Instructions = (instr: Array<PCodeInstr1>) => {
@@ -8,6 +8,22 @@ export const set6502Instructions = (instr: Array<PCodeInstr1>) => {
 
 const nlines = 40  // should this be an argument?
 
+let visibleLine = -2
+export const getVisibleLine = () => {
+  return visibleLine
+}
+export const setVisibleLine = (line: number) => {
+  visibleLine = line
+}
+
+let disassemblyAddress = -1
+export const getDisassemblyAddress = () => {
+  return disassemblyAddress
+}
+export const setDisassemblyAddress = (addr: number) => {
+  disassemblyAddress = addr
+}
+
 const decodeBranch = (addr: number, vLo: number) => {
   // The extra +2 is for the branch instruction itself
   return addr + 2 + (vLo > 127 ? vLo - 256 : vLo)
@@ -48,7 +64,7 @@ const memGetRaw = (addr: number): number => {
 }
 
 export const getDisassembly = () => {
-  let addr = handleGetDisassemblyAddress()
+  let addr = disassemblyAddress >= 0 ? disassemblyAddress : handleGetState6502().PC
   if (addr < 0 || addr > 0xFFFF) return ""
   addr = Math.min(addr, 0xFFFF - nlines + 1)
   let r = ""

src/ui/panels/debugsection.css

@@ -88,7 +88,7 @@ body.dark-mode .debug-panel {
   opacity: 100%;
   margin-left: 0px;
   padding-left: 0px;
-  margin-right: 10px;
+  margin-right: 0px;
 }
 
 .highlight-line {

src/ui/panels/disassemblycontrols.tsx

@@ -2,7 +2,7 @@ import { KeyboardEvent, useRef, useState } from "react"
 import {
   handleGetRunMode,
   handleGetState6502,
-  passSetDisassembleAddress, passStepInto, passStepOut, passStepOver
+  passStepInto, passStepOut, passStepOver
 } from "../main2worker"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
@@ -16,8 +16,9 @@ import { handleSetCPUState } from "../controller"
 import { bpStepInto } from "../img/icon_stepinto"
 import { bpStepOut } from "../img/icon_stepout"
 import { bpStepOver } from "../img/icon_stepover"
+import { setDisassemblyAddress, setVisibleLine } from "./debugpanelutilities"
 
-const DisassemblyControls = (props: {refresh: () => void}) => {
+const DisassemblyControls = (props: DisassemblyProps) => {
   // The tooltips obscure the first line of disassembly.
   // Only show them until each button has been clicked once.
   const [tooltipOverShow, setTooltipOverShow] = useState(true)
@@ -29,7 +30,7 @@ const DisassemblyControls = (props: {refresh: () => void}) => {
   const hiddenFileOpen = useRef<HTMLInputElement>(null)
 
   const doUpdateAddress = (addr: number) => {
-    passSetDisassembleAddress(addr)
+    setDisassemblyAddress(addr)
     setAddress(addr.toString(16).toUpperCase())
     props.refresh()
   }
@@ -98,19 +99,31 @@ const DisassemblyControls = (props: {refresh: () => void}) => {
       <div className="flex-row" id="tour-debug-controls">
       <button className="push-button"
         title={tooltipOverShow ? "Step Over" : ""}
-        onClick={() => { setTooltipOverShow(false); passStepOver() }}
+        onClick={() => {
+          setTooltipOverShow(false)
+          passStepOver()
+          setVisibleLine(-1)
+        }}
         disabled={runMode !== RUN_MODE.PAUSED}>
         <svg width="23" height="23" className="fill-color">{bpStepOver}</svg>
       </button>
       <button className="push-button"
         title={tooltipIntoShow ? "Step Into" : ""}
-        onClick={() => { setTooltipIntoShow(false); passStepInto() }}
+        onClick={() => {
+          setTooltipIntoShow(false)
+          passStepInto()
+          setVisibleLine(-1)
+        }}
         disabled={runMode !== RUN_MODE.PAUSED}>
         <svg width="23" height="23" className="fill-color">{bpStepInto}</svg>
       </button>
       <button className="push-button"
         title={tooltipOutShow ? "Step Out" : ""}
-        onClick={() => { setTooltipOutShow(false); passStepOut() }}
+        onClick={() => {
+          setTooltipOutShow(false)
+          passStepOut()
+          setVisibleLine(-1)
+        }}
         disabled={runMode !== RUN_MODE.PAUSED}>
         <svg width="23" height="23" className="fill-color">{bpStepOut}</svg>
       </button>

src/ui/panels/disassemblypanel.tsx

@@ -3,17 +3,22 @@ import DisassemblyControls from "./disassemblycontrols"
 import DisassemblyView from "./disassemblyview"
 
 const DisassemblyPanel = () => {
-  const [, setUpdate] = useState(0)
+  const [update, setUpdate] = useState(0)
 
   const refresh = () => {
     setUpdate(prevUpdate => prevUpdate + 1)
   }
 
+  const props: DisassemblyProps = {
+    update: update,
+    refresh: refresh,
+  }
+
   return (
     <div className="round-rect-border tall-panel wide-panel">
       <div className="bigger-font column-gap">Disassembly</div>
-      <DisassemblyControls refresh = {refresh}/>
-      <DisassemblyView refresh = {refresh}/>
+      <DisassemblyControls {...props}/>
+      <DisassemblyView {...props}/>
     </div>
   )
 }