Copy graphics (#242)

When in graphics mode, copy screen image instead of screen text.

js/canvas.ts

@@ -498,7 +498,7 @@ export class LoresPage2D implements LoresPage {
                     line += String.fromCharCode(charCode);
                 }
             }
-            line = line.trimRight();
+            line = line.trimEnd();
             buffer += line + '\n';
         }
         return buffer;
@@ -921,17 +921,17 @@ export class VideoModes2D implements VideoModes {
         private e: boolean
     ) {
         this._canvas = document.createElement('canvas');
+        const { width, height } = { width: 560, height: 384 };
+        this._canvas.width = width;
+        this._canvas.height = height;
+
         const context = this._canvas.getContext('2d');
         const screenContext = this.screen.getContext('2d');
         if (!context || !screenContext) {
             throw new Error('No 2d context');
         }
         this.context = context;
 
-        const { width, height } = { width: 560, height: 192 };
-        this._canvas.width = width;
-        this._canvas.height = height;
-
         this._screenContext = screenContext;
         this._screenContext.imageSmoothingEnabled = false;
         this._left = (this.screen.width - 560) / 2;
@@ -1224,4 +1224,16 @@ export class VideoModes2D implements VideoModes {
     getText() {
         return this._grs[this.pageMode - 1].getText();
     }
+
+    async getCanvasAsBlob() {
+        return new Promise<Blob>((resolve, reject) => {
+            this.screen.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                } else {
+                    reject(new Error('Could not read canvas'));
+                }
+            });
+        });
+    }
 }

js/components/ClipboardCopy.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import cs from 'classnames';
-import { VideoModes } from 'js/videomodes';
+import { copyScreenToClipboard, VideoModes } from 'js/videomodes';
 
 import styles from './css/ControlButton.module.scss';
 
@@ -12,7 +12,7 @@ export function ClipboardCopy({ vm }: ClipboardCopyProps) {
     const doCopy = function () {
         const asyncCopy = async function () {
             if (vm) {
-                await navigator.clipboard.writeText(vm.getText());
+                await copyScreenToClipboard(vm);
             }
         };
         void asyncCopy();

js/gl.ts

@@ -947,4 +947,16 @@ export class VideoModesGL implements VideoModes {
     getText() {
         return this._grs[this.pageMode - 1].getText();
     }
+
+    async getCanvasAsBlob() {
+        return new Promise<Blob>((resolve, reject) => {
+            this.screen.toBlob((blob) => {
+                if (blob) {
+                    resolve(blob);
+                } else {
+                    reject(new Error('Could not read canvas'));
+                }
+            });
+        });
+    }
 }

js/ui/apple2.ts

@@ -28,7 +28,7 @@ import { debug } from '../util';
 import { Apple2, Stats, State as Apple2State } from '../apple2';
 import DiskII from '../cards/disk2';
 import { CPU6502 } from '@whscullin/cpu6502';
-import { VideoModes } from '../videomodes';
+import { copyScreenToClipboard, VideoModes } from '../videomodes';
 import Apple2IO from '../apple2io';
 import Printer from './printer';
 
@@ -848,10 +848,7 @@ export function openOptions() {
 }
 
 export function copy() {
-    const asyncCopy = async function () {
-        await navigator.clipboard.writeText(vm.getText());
-    };
-    void asyncCopy();
+    void copyScreenToClipboard(vm);
 }
 
 export function paste() {
@@ -996,8 +993,8 @@ function onLoaded(
     };
 
     const doCopy = (event: Event) => {
-        event.clipboardData!.setData('text/plain', vm.getText());
         event.preventDefault();
+        void copyScreenToClipboard(vm);
     };
 
     window.addEventListener('paste', (event: Event) => {

js/videomodes.ts

@@ -89,6 +89,32 @@ export interface VideoModes extends Restorable<VideoModesState> {
     scanlines(on: boolean): void;
 
     getText(): string;
+    getCanvasAsBlob(): Promise<Blob>;
 
     ready: Promise<void>;
 }
+
+export async function copyScreenToClipboard(vm: VideoModes) {
+    const text = vm.getText();
+    if (typeof ClipboardItem !== 'undefined') {
+        const data: Record<string, Blob> = {};
+        if (!vm.textMode) {
+            const blob = await vm.getCanvasAsBlob();
+            data[blob.type] = blob;
+        } else {
+            const htmlBlob = new Blob([`<pre>${text}</pre>`], {
+                type: 'text/html',
+            });
+            data[htmlBlob.type] = htmlBlob;
+
+            const textBlob = new Blob([text], {
+                type: 'text/plain',
+            });
+            data[textBlob.type] = textBlob;
+        }
+
+        await navigator.clipboard.write([new ClipboardItem(data)]);
+    } else {
+        await navigator.clipboard.writeText(text);
+    }
+}