Preact mouse support (#111)

js/components/Apple2.tsx

@@ -6,8 +6,10 @@ import Apple2IO from '../apple2io';
 import { ControlStrip } from './ControlStrip';
 import { Inset } from './Inset';
 import { Keyboard } from './Keyboard';
+import { Mouse } from './Mouse';
 import { Screen } from './Screen';
 import { Drives } from './Drives';
+import CPU6502 from 'js/cpu6502';
 
 /**
  * Interface for the Apple2 component.
@@ -35,6 +37,7 @@ export const Apple2 = (props: Apple2Props) => {
     const screen = useRef<HTMLCanvasElement>(null);
     const [apple2, setApple2] = useState<Apple2Impl>();
     const [io, setIO] = useState<Apple2IO>();
+    const [cpu, setCPU] = useState<CPU6502>();
 
     useEffect(() => {
         if (screen.current) {
@@ -47,8 +50,10 @@ export const Apple2 = (props: Apple2Props) => {
             setApple2(apple2);
             apple2.ready.then(() => {
                 const io = apple2.getIO();
+                const cpu = apple2.getCPU();
                 setIO(io);
-                apple2.getCPU().reset();
+                setCPU(cpu);
+                apple2.reset();
                 apple2.run();
             }).catch(error => console.error(error));
         }
@@ -57,6 +62,7 @@ export const Apple2 = (props: Apple2Props) => {
     return (
         <div className={cs('outer', { apple2e: e})}>
             <Screen screen={screen} />
+            <Mouse cpu={cpu} screen={screen} io={io} />
             <Inset>
                 <Drives io={io} sectors={sectors} />
             </Inset>

js/components/Mouse.tsx

@@ -0,0 +1,24 @@
+import { RefObject } from 'preact';
+import Apple2IO from '../apple2io';
+import { MouseUI } from '../ui/mouse';
+import MouseCard from '../cards/mouse';
+import CPU6502 from '../cpu6502';
+import { useEffect } from 'preact/hooks';
+
+export interface MouseProps {
+    cpu: CPU6502 | undefined;
+    io: Apple2IO | undefined;
+    screen: RefObject<HTMLCanvasElement>;
+}
+
+export const Mouse = ({ cpu, screen, io }: MouseProps) => {
+    useEffect(() => {
+        if (cpu && io && screen.current) {
+            const mouseUI = new MouseUI(screen.current);
+            const mouse = new MouseCard(cpu, mouseUI);
+            io.setSlot(4, mouse);
+        }
+    }, [cpu, io]);
+
+    return null;
+};

js/main2e.ts

@@ -56,7 +56,7 @@ apple2.ready.then(() => {
     const cpu = apple2.getCPU();
 
     const printer = new Printer('#printer-modal .paper');
-    const mouseUI = new MouseUI('#screen');
+    const mouseUI = new MouseUI(options.canvas);
 
     const parallel = new Parallel(printer);
     const slinky = new RAMFactor(1024 * 1024);

js/ui/mouse.ts

@@ -3,11 +3,8 @@ import { enableMouseMode } from './joystick';
 
 export class MouseUI {
     private mouse: Mouse;
-    private canvas: HTMLCanvasElement;
-
-    constructor(selector: string)  {
-        this.canvas = document.querySelector<HTMLCanvasElement>(selector)!;
 
+    constructor(private canvas: HTMLCanvasElement)  {
         this.canvas.addEventListener(
             'mousemove',
             (event: MouseEvent & { target: HTMLCanvasElement} ) => {