@aptre/v86 0.5.0

package/src/browser/mouse.ts

@@ -0,0 +1,255 @@
+import { dbg_log } from '../log.js'
+import { BusConnector } from '../bus.js'
+
+export class MouseAdapter {
+    enabled = false
+    emu_enabled = true
+    bus: BusConnector
+    is_running = false
+
+    private left_down = false
+    private right_down = false
+    private middle_down = false
+    private last_x = 0
+    private last_y = 0
+    private screen_container: HTMLElement | undefined
+
+    private SPEED_FACTOR = 1
+
+    private touch_start_handler: (e: TouchEvent) => void
+    private touch_end_handler: (e: TouchEvent) => void
+    private mousemove_handler: (e: MouseEvent | TouchEvent) => void
+    private mousedown_handler: (e: MouseEvent) => void
+    private mouseup_handler: (e: MouseEvent) => void
+    private mousewheel_handler: (e: WheelEvent) => void
+
+    constructor(bus: BusConnector, screen_container?: HTMLElement) {
+        this.bus = bus
+        this.screen_container = screen_container
+
+        this.touch_start_handler = (e: TouchEvent) => {
+            if (this.may_handle(e)) {
+                const touches = e.changedTouches
+
+                if (touches && touches.length) {
+                    const touch = touches[touches.length - 1]
+                    this.last_x = touch.clientX
+                    this.last_y = touch.clientY
+                }
+            }
+        }
+
+        this.touch_end_handler = (_e: TouchEvent) => {
+            if (this.left_down || this.middle_down || this.right_down) {
+                this.bus.send('mouse-click', [false, false, false])
+                this.left_down = this.middle_down = this.right_down = false
+            }
+        }
+
+        this.mousemove_handler = (e: MouseEvent | TouchEvent) => {
+            if (!this.bus) {
+                return
+            }
+
+            if (!this.may_handle(e)) {
+                return
+            }
+
+            if (!this.is_running) {
+                return
+            }
+
+            let delta_x = 0
+            let delta_y = 0
+
+            if ('changedTouches' in e) {
+                const touches = e.changedTouches
+                if (touches.length) {
+                    const touch = touches[touches.length - 1]
+                    delta_x = touch.clientX - this.last_x
+                    delta_y = touch.clientY - this.last_y
+
+                    this.last_x = touch.clientX
+                    this.last_y = touch.clientY
+
+                    e.preventDefault()
+                }
+            } else {
+                if (typeof e.movementX === 'number') {
+                    delta_x = e.movementX
+                    delta_y = e.movementY
+                } else {
+                    delta_x = e.clientX - this.last_x
+                    delta_y = e.clientY - this.last_y
+
+                    this.last_x = e.clientX
+                    this.last_y = e.clientY
+                }
+            }
+
+            delta_x *= this.SPEED_FACTOR
+            delta_y *= this.SPEED_FACTOR
+
+            delta_y = -delta_y
+
+            this.bus.send('mouse-delta', [delta_x, delta_y])
+
+            if (this.screen_container) {
+                const me = e instanceof MouseEvent ? e : e.changedTouches[0]
+                const absolute_x = me.pageX - this.screen_container.offsetLeft
+                const absolute_y = me.pageY - this.screen_container.offsetTop
+                this.bus.send('mouse-absolute', [
+                    absolute_x,
+                    absolute_y,
+                    this.screen_container.offsetWidth,
+                    this.screen_container.offsetHeight,
+                ])
+            }
+        }
+
+        this.mousedown_handler = (e: MouseEvent) => {
+            if (this.may_handle(e)) {
+                this.click_event(e, true)
+            }
+        }
+
+        this.mouseup_handler = (e: MouseEvent) => {
+            if (this.may_handle(e)) {
+                this.click_event(e, false)
+            }
+        }
+
+        this.mousewheel_handler = (e: WheelEvent) => {
+            if (!this.may_handle(e)) {
+                return
+            }
+
+            let delta_x = -e.deltaY
+            const delta_y = 0
+
+            if (delta_x < 0) {
+                delta_x = -1
+            } else if (delta_x > 0) {
+                delta_x = 1
+            }
+
+            this.bus.send('mouse-wheel', [delta_x, delta_y])
+            e.preventDefault()
+        }
+
+        this.bus.register(
+            'mouse-enable',
+            function (this: MouseAdapter, enabled: boolean) {
+                this.enabled = enabled
+            },
+            this,
+        )
+
+        this.bus.register(
+            'emulator-stopped',
+            function (this: MouseAdapter) {
+                this.is_running = false
+            },
+            this,
+        )
+        this.bus.register(
+            'emulator-started',
+            function (this: MouseAdapter) {
+                this.is_running = true
+            },
+            this,
+        )
+
+        this.init()
+    }
+
+    destroy(): void {
+        if (typeof window === 'undefined') {
+            return
+        }
+        window.removeEventListener(
+            'touchstart',
+            this.touch_start_handler,
+            false,
+        )
+        window.removeEventListener('touchend', this.touch_end_handler, false)
+        window.removeEventListener('touchmove', this.mousemove_handler, false)
+        window.removeEventListener('mousemove', this.mousemove_handler, false)
+        window.removeEventListener('mousedown', this.mousedown_handler, false)
+        window.removeEventListener('mouseup', this.mouseup_handler, false)
+        window.removeEventListener('wheel', this.mousewheel_handler)
+    }
+
+    init(): void {
+        if (typeof window === 'undefined') {
+            return
+        }
+        this.destroy()
+
+        window.addEventListener('touchstart', this.touch_start_handler, false)
+        window.addEventListener('touchend', this.touch_end_handler, false)
+        window.addEventListener('touchmove', this.mousemove_handler, false)
+        window.addEventListener('mousemove', this.mousemove_handler, false)
+        window.addEventListener('mousedown', this.mousedown_handler, false)
+        window.addEventListener('mouseup', this.mouseup_handler, false)
+        window.addEventListener('wheel', this.mousewheel_handler, {
+            passive: false,
+        })
+    }
+
+    private is_child(child: Node, parent: Node): boolean {
+        let node: Node | null = child
+        while (node && node.parentNode) {
+            if (node === parent) {
+                return true
+            }
+            node = node.parentNode
+        }
+
+        return false
+    }
+
+    private may_handle(e: Event): boolean {
+        if (!this.enabled || !this.emu_enabled) {
+            return false
+        }
+
+        const MOVE_MOUSE_WHEN_OVER_SCREEN_ONLY = true
+
+        if (MOVE_MOUSE_WHEN_OVER_SCREEN_ONLY) {
+            const parent = this.screen_container || document.body
+            const target = e.target
+            if (!target) {
+                return false
+            }
+            return (
+                !!document.pointerLockElement ||
+                this.is_child(target as Node, parent)
+            )
+        }
+
+        return true
+    }
+
+    private click_event(e: MouseEvent, down: boolean): void {
+        if (!this.bus) {
+            return
+        }
+
+        if (e.button === 0) {
+            this.left_down = down
+        } else if (e.button === 1) {
+            this.middle_down = down
+        } else if (e.button === 2) {
+            this.right_down = down
+        } else {
+            dbg_log('Unknown event.button: ' + e.button)
+        }
+        this.bus.send('mouse-click', [
+            this.left_down,
+            this.middle_down,
+            this.right_down,
+        ])
+        e.preventDefault()
+    }
+}

package/src/browser/network.ts

@@ -0,0 +1,142 @@
+import { BusConnector } from '../bus.js'
+
+/**
+ * An ethernet-through-websocket adapter, to be used with
+ *     https://github.com/benjamincburns/websockproxy
+ *
+ * emulated ethernet card <--> this <--> websocket proxy <--> network
+ */
+export class NetworkAdapter {
+    bus: BusConnector
+    socket: WebSocket | undefined
+    id: number
+    send_queue: Uint8Array[]
+    url: string
+    reconnect_interval: number
+    last_connect_attempt: number
+    send_queue_limit: number
+    destroyed: boolean
+
+    constructor(url: string, bus: BusConnector, id?: number) {
+        this.bus = bus
+        this.socket = undefined
+        this.id = id || 0
+
+        // TODO: circular buffer?
+        this.send_queue = []
+        this.url = url
+
+        this.reconnect_interval = 10000
+        this.last_connect_attempt = Date.now() - this.reconnect_interval
+        this.send_queue_limit = 64
+        this.destroyed = false
+
+        this.bus.register(
+            'net' + this.id + '-send',
+            function (this: NetworkAdapter, data: Uint8Array) {
+                this.send(data)
+            },
+            this,
+        )
+    }
+
+    handle_message(e: MessageEvent): void {
+        if (this.bus) {
+            this.bus.send('net' + this.id + '-receive', new Uint8Array(e.data))
+        }
+    }
+
+    handle_close(_e: CloseEvent): void {
+        //console.log("onclose", e);
+
+        if (!this.destroyed) {
+            this.connect()
+            setTimeout(this.connect.bind(this), this.reconnect_interval)
+        }
+    }
+
+    handle_open(_e: Event): void {
+        //console.log("open", e);
+
+        for (let i = 0; i < this.send_queue.length; i++) {
+            this.send(this.send_queue[i])
+        }
+
+        this.send_queue = []
+    }
+
+    handle_error(_e: Event): void {
+        //console.log("onerror", e);
+    }
+
+    destroy(): void {
+        this.destroyed = true
+        if (this.socket) {
+            this.socket.close()
+        }
+    }
+
+    connect(): void {
+        if (typeof WebSocket === 'undefined') {
+            return
+        }
+
+        if (this.socket) {
+            const state = this.socket.readyState
+
+            if (state === 0 || state === 1) {
+                // already or almost there
+                return
+            }
+        }
+
+        const now = Date.now()
+
+        if (this.last_connect_attempt + this.reconnect_interval > now) {
+            return
+        }
+
+        this.last_connect_attempt = Date.now()
+
+        try {
+            this.socket = new WebSocket(this.url)
+        } catch (e) {
+            console.error(e)
+            return
+        }
+
+        this.socket.binaryType = 'arraybuffer'
+
+        this.socket.onopen = this.handle_open.bind(this)
+        this.socket.onmessage = this.handle_message.bind(this)
+        this.socket.onclose = this.handle_close.bind(this)
+        this.socket.onerror = this.handle_error.bind(this)
+    }
+
+    send(data: Uint8Array): void {
+        //console.log("send", data);
+
+        if (!this.socket || this.socket.readyState !== 1) {
+            this.send_queue.push(data)
+
+            if (this.send_queue.length > 2 * this.send_queue_limit) {
+                this.send_queue = this.send_queue.slice(-this.send_queue_limit)
+            }
+
+            this.connect()
+        } else {
+            this.socket.send(new Uint8Array(data))
+        }
+    }
+
+    change_proxy(url: string): void {
+        this.url = url
+
+        if (this.socket) {
+            this.socket.onclose = function () {}
+            this.socket.onerror = function () {}
+            this.socket.close()
+            this.socket = undefined
+        }
+    }
+}