web-a2e 1.0.0

package/src/js/disk-manager/disk-drives-window.js

@@ -0,0 +1,212 @@
+/*
+ * disk-drives-window.js - Disk drives window UI
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import { BaseWindow } from "../windows/base-window.js";
+
+export class DiskDrivesWindow extends BaseWindow {
+  constructor() {
+    super({
+      id: "disk-drives",
+      title: "Disk Drives",
+      minWidth: 600,
+      minHeight: 100,
+      maxWidth: 600,
+      defaultWidth: 600,
+      defaultHeight: 310,
+      resizeDirections: [],
+    });
+
+    this._detailsOpen = false;
+    this._graphicsHidden = false;
+  }
+
+  _driveHTML(num) {
+    const prefix = `dd-d${num}`;
+    return `
+      <div class="disk-drive" id="disk${num}">
+        <div class="drive-image-container">
+          <canvas class="disk-surface" width="560" height="480"></canvas>
+          <span class="drive-label">D${num}</span>
+        </div>
+        <div class="drive-info">
+          <span class="disk-name">No Disk</span>
+          <span class="disk-track" title="Current Track">T--</span>
+        </div>
+        <div class="drive-controls">
+          <input type="file" id="disk${num}-input" accept=".dsk,.do,.po,.woz,.nib" hidden />
+          <button class="disk-insert" title="Insert Disk from File">Insert</button>
+          <div class="recent-container">
+            <button class="disk-recent" title="Recent Disks">Recent</button>
+            <div class="recent-dropdown"></div>
+          </div>
+          <button class="disk-blank" title="Insert Blank Disk">Blank</button>
+          <button class="disk-eject" disabled title="Eject Disk">Eject</button>
+          <button class="disk-browse" disabled title="Browse Files">Browse</button>
+        </div>
+        <div class="drive-detail-panel">
+          <div class="drive-detail-grid">
+            <span class="dd-label">QTrack</span><span class="dd-val" id="${prefix}-qt">0</span>
+            <span class="dd-label">Phase</span><span class="dd-val" id="${prefix}-phase">0</span>
+            <span class="dd-label">Nibble</span><span class="dd-val" id="${prefix}-nibble">0</span>
+            <span class="dd-label">Motor</span><span class="dd-val" id="${prefix}-motor">OFF</span>
+            <span class="dd-label">Mode</span><span class="dd-val" id="${prefix}-mode">Read</span>
+            <span class="dd-label">Byte</span><span class="dd-val" id="${prefix}-byte">00</span>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  renderContent() {
+    return `
+      <div class="disk-drives-row">
+        ${this._driveHTML(1)}
+        ${this._driveHTML(2)}
+      </div>
+    `;
+  }
+
+  onContentRendered() {
+    const closeBtn = this.headerElement.querySelector(
+      `.${this.cssClasses.close}`,
+    );
+
+    this._graphicsBtn = document.createElement("button");
+    this._graphicsBtn.className = "drive-graphics-btn active";
+    this._graphicsBtn.title = "Toggle disk graphics";
+    this._graphicsBtn.innerHTML = `
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+        <path d="M8 3C4.5 3 1.6 5.3.6 8c1 2.7 3.9 5 7.4 5s6.4-2.3 7.4-5c-1-2.7-3.9-5-7.4-5zm0 8.5A3.5 3.5 0 1 1 8 4.5a3.5 3.5 0 0 1 0 7zm0-5.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+      </svg>
+    `;
+    this.headerElement.insertBefore(this._graphicsBtn, closeBtn);
+    this._graphicsBtn.addEventListener("mousedown", (e) => e.stopPropagation());
+    this._graphicsBtn.addEventListener("click", () => this._toggleGraphics());
+
+    this._detailBtn = document.createElement("button");
+    this._detailBtn.className = "drive-detail-btn";
+    this._detailBtn.title = "Toggle details";
+    this._detailBtn.innerHTML = `
+      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+        <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 2.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM6.5 7h1.75v4.5H10v1H6v-1h1.25V8H6.5V7z"/>
+      </svg>
+    `;
+    this.headerElement.insertBefore(this._detailBtn, closeBtn);
+    this._detailBtn.addEventListener("mousedown", (e) => e.stopPropagation());
+    this._detailBtn.addEventListener("click", () => this._toggleDetails());
+
+    // Set initial size from content so defaultHeight doesn't need to be kept in sync
+    this._fitToContent();
+  }
+
+  show() {
+    super.show();
+    this._fitToContent();
+  }
+
+  _toggleGraphics() {
+    this._graphicsHidden = !this._graphicsHidden;
+    this.contentElement.classList.toggle("hide-graphics", this._graphicsHidden);
+    if (this._graphicsBtn) {
+      this._graphicsBtn.classList.toggle("active", !this._graphicsHidden);
+    }
+    this._fitToContent();
+    if (this.onStateChange) this.onStateChange();
+  }
+
+  _toggleDetails() {
+    this._detailsOpen = !this._detailsOpen;
+    this.contentElement.classList.toggle("show-details", this._detailsOpen);
+    if (this._detailBtn) {
+      this._detailBtn.classList.toggle("active", this._detailsOpen);
+    }
+    this._fitToContent();
+    if (this.onStateChange) this.onStateChange();
+  }
+
+  _fitToContent() {
+    if (!this.element) return;
+    // Temporarily set auto height to measure natural size
+    this.element.style.height = "auto";
+    const newHeight = this.element.offsetHeight;
+    this.element.style.height = `${newHeight}px`;
+    this.currentHeight = newHeight;
+    this.minHeight = newHeight;
+    this.maxHeight = newHeight;
+    // Recalculate edge distances before constraining so the window
+    // isn't repositioned based on stale distances from a different height
+    this.updateEdgeDistances();
+    this.constrainToViewport();
+  }
+
+  /**
+   * Update technical details from WASM state (called by WindowManager.updateAll)
+   */
+  update(wasmModule) {
+    if (!this._detailsOpen) return;
+
+    const selectedDrive = wasmModule._getSelectedDrive();
+    const lastByte = wasmModule._getLastDiskByte();
+
+    for (let d = 0; d < 2; d++) {
+      const prefix = `dd-d${d + 1}`;
+      const el = (id) => this.contentElement.querySelector(`#${prefix}-${id}`);
+
+      const qt = el("qt");
+      if (qt) qt.textContent = wasmModule._getDiskHeadPosition(d);
+
+      const phase = el("phase");
+      if (phase) phase.textContent = wasmModule._getDiskPhase(d);
+
+      const nibble = el("nibble");
+      if (nibble) nibble.textContent = wasmModule._getCurrentNibblePosition(d);
+
+      const motor = el("motor");
+      if (motor) {
+        const on = wasmModule._getDiskMotorOn(d);
+        motor.textContent = on ? "ON" : "OFF";
+        motor.classList.toggle("on", on);
+      }
+
+      const mode = el("mode");
+      if (mode) {
+        const w = wasmModule._getDiskWriteMode(d);
+        mode.textContent = w ? "Write" : "Read";
+        mode.classList.toggle("write", w);
+      }
+
+      const byte = el("byte");
+      if (byte) {
+        byte.textContent =
+          d === selectedDrive
+            ? lastByte.toString(16).toUpperCase().padStart(2, "0")
+            : "--";
+      }
+    }
+  }
+
+  getState() {
+    const base = super.getState();
+    base.graphicsHidden = this._graphicsHidden;
+    base.detailsOpen = this._detailsOpen;
+    return base;
+  }
+
+  restoreState(state) {
+    if (state.graphicsHidden) {
+      this._graphicsHidden = true;
+      this.contentElement.classList.add("hide-graphics");
+      if (this._graphicsBtn) this._graphicsBtn.classList.remove("active");
+    }
+    if (state.detailsOpen) {
+      this._detailsOpen = true;
+      this.contentElement.classList.add("show-details");
+      if (this._detailBtn) this._detailBtn.classList.add("active");
+    }
+
+    super.restoreState(state);
+  }
+}

package/src/js/disk-manager/disk-operations.js

@@ -0,0 +1,284 @@
+/*
+ * disk-operations.js - Disk image loading and management operations
+ *
+ * Written by
+ *  Mike Daley <michael_daley@icloud.com>
+ */
+
+import {
+  saveDiskToStorage,
+  clearDiskFromStorage,
+  addToRecentDisks,
+} from "./disk-persistence.js";
+
+/**
+ * Helper to insert a disk into WASM with proper memory management
+ * @param {Object} wasmModule - The WASM module
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @param {Uint8Array} data - The disk image data
+ * @param {string} filename - The disk filename
+ * @returns {boolean} True if successful
+ */
+function insertDiskToWasm(wasmModule, driveNum, data, filename) {
+  // Allocate memory for disk data
+  const dataPtr = wasmModule._malloc(data.length);
+  wasmModule.HEAPU8.set(data, dataPtr);
+
+  // Allocate string for filename
+  const filenamePtr = wasmModule._malloc(filename.length + 1);
+  wasmModule.stringToUTF8(filename, filenamePtr, filename.length + 1);
+
+  // Insert disk
+  const success = wasmModule._insertDisk(driveNum, dataPtr, data.length, filenamePtr);
+
+  // Free memory
+  wasmModule._free(dataPtr);
+  wasmModule._free(filenamePtr);
+
+  return success;
+}
+
+/**
+ * Load a disk image from a file into a drive
+ * @param {Object} options
+ * @param {Object} options.wasmModule - The WASM module
+ * @param {Object} options.drive - The drive state object
+ * @param {number} options.driveNum - Drive number (0 or 1)
+ * @param {File} options.file - The file to load
+ * @param {Function} [options.onSuccess] - Callback on successful load
+ * @param {Function} [options.onError] - Callback on error
+ */
+export async function loadDisk({ wasmModule, drive, driveNum, file, onSuccess, onError }) {
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const data = new Uint8Array(arrayBuffer);
+
+    const success = insertDiskToWasm(wasmModule, driveNum, data, file.name);
+
+    if (success) {
+      drive.filename = file.name;
+      if (drive.ejectBtn) drive.ejectBtn.disabled = false;
+      if (drive.browseBtn) drive.browseBtn.disabled = false;
+      console.log(`Inserted disk in drive ${driveNum + 1}: ${file.name}`);
+
+      // Save to IndexedDB for persistence across sessions
+      await saveDiskToStorage(driveNum, file.name, data);
+
+      // Add to recent disks list for this drive
+      await addToRecentDisks(driveNum, file.name, data);
+
+      if (onSuccess) onSuccess(file.name);
+    } else {
+      const msg = `Failed to load disk image: ${file.name}`;
+      console.error(msg);
+      if (onError) onError(msg);
+    }
+  } catch (error) {
+    console.error("Error loading disk:", error);
+    if (onError) onError("Error loading disk: " + error.message);
+  }
+}
+
+/**
+ * Load a disk image from raw data (used for restoring from persistence)
+ * @param {Object} options
+ * @param {Object} options.wasmModule - The WASM module
+ * @param {Object} options.drive - The drive state object
+ * @param {number} options.driveNum - Drive number (0 or 1)
+ * @param {string} options.filename - The disk filename
+ * @param {Uint8Array} options.data - The disk image data
+ * @param {Function} [options.onSuccess] - Callback on successful load
+ * @param {Function} [options.onError] - Callback on error
+ */
+export function loadDiskFromData({ wasmModule, drive, driveNum, filename, data, onSuccess, onError }) {
+  try {
+    const success = insertDiskToWasm(wasmModule, driveNum, data, filename);
+
+    if (success) {
+      drive.filename = filename;
+      if (drive.ejectBtn) drive.ejectBtn.disabled = false;
+      if (drive.browseBtn) drive.browseBtn.disabled = false;
+      console.log(`Restored disk in drive ${driveNum + 1}: ${filename}`);
+      if (onSuccess) onSuccess(filename);
+    } else {
+      const msg = `Failed to restore disk image: ${filename}`;
+      console.error(msg);
+      if (onError) onError(msg);
+    }
+  } catch (error) {
+    console.error("Error restoring disk:", error);
+    if (onError) onError("Error restoring disk: " + error.message);
+  }
+}
+
+/**
+ * Insert a blank WOZ disk into a drive
+ * @param {Object} options
+ * @param {Object} options.wasmModule - The WASM module
+ * @param {Object} options.drive - The drive state object
+ * @param {number} options.driveNum - Drive number (0 or 1)
+ * @param {Function} [options.onSuccess] - Callback on successful insert
+ * @param {Function} [options.onError] - Callback on error
+ */
+export function insertBlankDisk({ wasmModule, drive, driveNum, onSuccess, onError }) {
+  const filename = "Blank Disk.woz";
+
+  // Use the WASM function to create and insert a blank disk
+  const success = wasmModule._insertBlankDisk(driveNum);
+
+  if (success) {
+    drive.filename = filename;
+    if (drive.ejectBtn) drive.ejectBtn.disabled = false;
+    console.log(`Inserted blank disk in drive ${driveNum + 1}`);
+    if (onSuccess) onSuccess(filename);
+  } else {
+    const msg = "Failed to insert blank disk";
+    console.error(msg);
+    if (onError) onError(msg);
+  }
+}
+
+/**
+ * Perform the actual disk ejection
+ * @param {Object} options
+ * @param {Object} options.wasmModule - The WASM module
+ * @param {Object} options.drive - The drive state object
+ * @param {number} options.driveNum - Drive number (0 or 1)
+ * @param {Function} [options.onEject] - Callback after ejection
+ */
+export function performEject({ wasmModule, drive, driveNum, onEject }) {
+  wasmModule._ejectDisk(driveNum);
+
+  drive.filename = null;
+  if (drive.ejectBtn) drive.ejectBtn.disabled = true;
+  if (drive.browseBtn) drive.browseBtn.disabled = true;
+  if (drive.input) drive.input.value = "";
+
+  // Clear from IndexedDB
+  clearDiskFromStorage(driveNum);
+
+  console.log(`Ejected disk from drive ${driveNum + 1}`);
+  if (onEject) onEject();
+}
+
+/**
+ * Eject a disk, prompting to save if modified
+ * @param {Object} options
+ * @param {Object} options.wasmModule - The WASM module
+ * @param {Object} options.drive - The drive state object
+ * @param {number} options.driveNum - Drive number (0 or 1)
+ * @param {Function} [options.onEject] - Callback after ejection
+ */
+export async function ejectDisk({ wasmModule, drive, driveNum, onEject }) {
+  // Check if disk is modified
+  const hasModifiedCheck = typeof wasmModule._isDiskModified === "function";
+  const isModified = hasModifiedCheck && wasmModule._isDiskModified(driveNum);
+
+  if (isModified) {
+    // Generate suggested filename
+    let suggestedName = drive.filename || `disk${driveNum + 1}.woz`;
+    // Ensure WOZ extension for blank disks
+    if (suggestedName === "Blank Disk.woz" || !suggestedName.includes(".")) {
+      suggestedName = suggestedName.replace(/\.[^.]*$/, "") + ".woz";
+    }
+
+    // Go directly to OS save picker
+    await saveDiskWithPicker(wasmModule, driveNum, suggestedName);
+  }
+
+  // Always eject after save attempt
+  performEject({ wasmModule, drive, driveNum, onEject });
+}
+
+/**
+ * Save disk data using the File System Access API
+ * @param {Object} wasmModule - The WASM module
+ * @param {number} driveNum - Drive number (0 or 1)
+ * @param {string} suggestedName - Suggested filename
+ * @returns {Promise<boolean>} True if saved successfully
+ */
+export async function saveDiskWithPicker(wasmModule, driveNum, suggestedName) {
+  const sizePtr = wasmModule._malloc(4);
+  if (!sizePtr) {
+    console.error("saveDiskWithPicker: failed to allocate size pointer");
+    return false;
+  }
+
+  const dataPtr = wasmModule._getDiskData(driveNum, sizePtr);
+
+  if (!dataPtr) {
+    console.error("saveDiskWithPicker: _getDiskData returned null");
+    wasmModule._free(sizePtr);
+    return false;
+  }
+
+  // Read size from WASM memory (little-endian 32-bit value)
+  const heap = wasmModule.HEAPU8;
+  const size =
+    heap[sizePtr] |
+    (heap[sizePtr + 1] << 8) |
+    (heap[sizePtr + 2] << 16) |
+    (heap[sizePtr + 3] << 24);
+
+  if (size <= 0 || size > 10000000) {
+    console.error(`saveDiskWithPicker: invalid size ${size}`);
+    wasmModule._free(sizePtr);
+    return false;
+  }
+
+  const data = new Uint8Array(wasmModule.HEAPU8.buffer, dataPtr, size);
+
+  // Create a copy of the data since the WASM buffer may become invalid
+  const dataCopy = new Uint8Array(data);
+
+  wasmModule._free(sizePtr);
+
+  // Try to use File System Access API (modern browsers)
+  if ("showSaveFilePicker" in window) {
+    try {
+      const handle = await window.showSaveFilePicker({
+        suggestedName: suggestedName,
+        types: [
+          {
+            description: "Disk Images",
+            accept: {
+              "application/octet-stream": [".dsk", ".do", ".po", ".woz", ".nib"],
+            },
+          },
+        ],
+      });
+
+      const writable = await handle.createWritable();
+      await writable.write(dataCopy);
+      await writable.close();
+
+      console.log(`Saved disk from drive ${driveNum + 1} to: ${handle.name}`);
+      return true;
+    } catch (err) {
+      // User cancelled the picker or other error
+      if (err.name !== "AbortError") {
+        console.error("Error saving disk:", err);
+      }
+      return false;
+    }
+  } else {
+    // Fallback for browsers without File System Access API
+    downloadFile(dataCopy, suggestedName);
+    return true;
+  }
+}
+
+/**
+ * Download file using traditional blob/anchor approach
+ * @param {Uint8Array} data - The file data
+ * @param {string} filename - The filename
+ */
+export function downloadFile(data, filename) {
+  const blob = new Blob([data], { type: "application/octet-stream" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}