@asdf-overlay/electron 0.9.0

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+import type { Overlay } from '@asdf-overlay/core';
+export * from './input/index.js';
+export * from './surface.js';
+export type OverlayWindow = {
+    overlay: Overlay;
+    id: number;
+};

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './input/index.js';
+export * from './surface.js';

package/lib/input/conv.d.ts

@@ -0,0 +1,3 @@
+import { Cursor } from '@asdf-overlay/core';
+export declare function toCursor(cursor: string): Cursor | undefined;
+export declare const KEYS: Record<number, string | undefined>;

package/lib/input/conv.js

@@ -0,0 +1,159 @@
+import { Cursor } from '@asdf-overlay/core';
+// https://www.electronjs.org/docs/latest/api/web-contents
+// https://developer.mozilla.org/ko/docs/Web/CSS/cursor
+export function toCursor(cursor) {
+    switch (cursor) {
+        case 'pointer': return Cursor.Default;
+        case 'crosshair': return Cursor.Crosshair;
+        case 'hand': return Cursor.Pointer;
+        case 'text': return Cursor.Text;
+        case 'wait': return Cursor.Wait;
+        case 'help': return Cursor.Help;
+        case 'e-resize':
+        case 'w-resize':
+        case 'ew-resize': return Cursor.EastWestResize;
+        case 'n-resize':
+        case 's-resize':
+        case 'ns-resize': return Cursor.NorthSouthResize;
+        case 'ne-resize':
+        case 'sw-resize':
+        case 'nesw-resize': return Cursor.NorthEastSouthWestResize;
+        case 'nw-resize':
+        case 'se-resize':
+        case 'nwse-resize': return Cursor.NorthWestSouthEastResize;
+        case 'col-resize': return Cursor.ColResize;
+        case 'row-resize': return Cursor.RowResize;
+        case 'm-panning': return Cursor.PanMiddle;
+        case 'm-panning-vertical': return Cursor.PanMiddleVertical;
+        case 'm-panning-horizontal': return Cursor.PanMiddleHorizontal;
+        case 'e-panning': return Cursor.PanEast;
+        case 'n-panning': return Cursor.PanNorth;
+        case 'ne-panning': return Cursor.PanNorthEast;
+        case 'nw-panning': return Cursor.PanNorthWest;
+        case 's-panning': return Cursor.PanSouth;
+        case 'se-panning': return Cursor.PanSouthEast;
+        case 'sw-panning': return Cursor.PanSouthWest;
+        case 'w-panning': return Cursor.PanWest;
+        case 'move': return Cursor.Move;
+        case 'vertical-text': return Cursor.VerticalText;
+        case 'cell': return Cursor.Cell;
+        case 'alias': return Cursor.Alias;
+        case 'progress': return Cursor.Progress;
+        case 'nodrop':
+        case 'not-allowed': return Cursor.NotAllowed;
+        case 'copy': return Cursor.Copy;
+        case 'none': return;
+        case 'zoom-in': return Cursor.ZoomIn;
+        case 'zoom-out': return Cursor.ZoomOut;
+        case 'grab': return Cursor.Grab;
+        case 'grabbing': return Cursor.Grabbing;
+        default: return Cursor.Default;
+    }
+}
+// As per https://www.electronjs.org/docs/latest/api/accelerator
+// and https://learn.microsoft.com/en-us/windows/win32/inputdev/virtual-key-codes
+export const KEYS = {
+    8: 'Backspace',
+    9: 'Tab',
+    13: 'Enter',
+    16: 'Shift',
+    17: 'Control',
+    18: 'Alt',
+    20: 'Capslock',
+    27: 'Escape',
+    32: 'Space',
+    33: 'PageUp',
+    34: 'PageDown',
+    35: 'End',
+    36: 'Home',
+    37: 'Left',
+    38: 'Up',
+    39: 'Right',
+    44: 'PrintScreen',
+    45: 'Insert',
+    46: 'Delete',
+    48: '0',
+    49: '1',
+    50: '2',
+    51: '3',
+    52: '4',
+    53: '5',
+    54: '6',
+    55: '7',
+    56: '8',
+    57: '9',
+    65: 'A',
+    66: 'B',
+    67: 'C',
+    68: 'D',
+    69: 'E',
+    70: 'F',
+    71: 'G',
+    72: 'H',
+    73: 'I',
+    74: 'J',
+    75: 'K',
+    76: 'L',
+    77: 'M',
+    78: 'N',
+    79: 'O',
+    80: 'P',
+    81: 'Q',
+    82: 'R',
+    83: 'S',
+    84: 'T',
+    85: 'U',
+    86: 'V',
+    87: 'W',
+    88: 'X',
+    89: 'Y',
+    90: 'Z',
+    91: 'Super',
+    92: 'Super',
+    93: 'Meta',
+    112: 'F1',
+    113: 'F2',
+    114: 'F3',
+    115: 'F4',
+    116: 'F5',
+    117: 'F6',
+    118: 'F7',
+    119: 'F8',
+    120: 'F9',
+    121: 'F10',
+    122: 'F11',
+    123: 'F12',
+    124: 'F13',
+    125: 'F14',
+    126: 'F15',
+    127: 'F16',
+    128: 'F17',
+    129: 'F18',
+    130: 'F19',
+    131: 'F20',
+    132: 'F21',
+    133: 'F22',
+    134: 'F23',
+    135: 'F24',
+    144: 'Numlock',
+    145: 'Scrolllock',
+    176: 'MediaNextTrack',
+    177: 'MediaPreviousTrack',
+    178: 'MediaStop',
+    179: 'MediaPlayPause',
+    181: 'VolumeMute',
+    182: 'VolumeDown',
+    183: 'VolumeUp',
+    186: ';',
+    187: '=',
+    188: ',',
+    189: '-',
+    190: '.',
+    191: '/',
+    192: '`',
+    219: '[',
+    220: '\\',
+    221: ']',
+    222: '\'',
+    225: 'AltGr',
+};

package/lib/input/index.d.ts

@@ -0,0 +1,24 @@
+import type { WebContents } from 'electron';
+import type { OverlayWindow } from '../index.js';
+import type { CursorInput, KeyboardInput } from '@asdf-overlay/core/input';
+export declare class ElectronOverlayInput {
+    private readonly window;
+    private readonly contents;
+    private readonly cursorInputHandler;
+    private readonly keyboardInputHandler;
+    private readonly cursorChangedHandler;
+    forwardInput: boolean;
+    private constructor();
+    static connect(window: OverlayWindow, contents: WebContents): ElectronOverlayInput;
+    disconnect(): Promise<void>;
+    private readonly clickCounts;
+    private processCursorAction;
+    private readonly lastWindowCursor;
+    sendCursorInput(input: CursorInput): void;
+    private readonly modifiersMap;
+    private modifiers;
+    private updateModifiers;
+    sendKeyboardInput(input: KeyboardInput): void;
+    private processIme;
+    private sendInput;
+}

package/lib/input/index.js

@@ -0,0 +1,286 @@
+import { KEYS, toCursor } from './conv.js';
+import { Cursor } from '@asdf-overlay/core';
+export class ElectronOverlayInput {
+    window;
+    contents;
+    cursorInputHandler;
+    keyboardInputHandler;
+    cursorChangedHandler;
+    forwardInput = false;
+    constructor(window, contents) {
+        this.window = window;
+        this.contents = contents;
+        this.window = { ...window };
+        this.window.overlay.event.on('cursor_input', this.cursorInputHandler = (id, input) => {
+            if (id !== window.id) {
+                return;
+            }
+            this.sendCursorInput(input);
+        });
+        this.window.overlay.event.on('keyboard_input', this.keyboardInputHandler = (id, input) => {
+            if (id !== window.id) {
+                return;
+            }
+            this.sendKeyboardInput(input);
+        });
+        this.contents.on('cursor-changed', this.cursorChangedHandler = (_, type) => {
+            void this.window.overlay.setBlockingCursor(this.window.id, toCursor(type));
+        });
+    }
+    static connect(window, contents) {
+        return new ElectronOverlayInput({ ...window }, contents);
+    }
+    async disconnect() {
+        this.window.overlay.event.off('cursor_input', this.cursorInputHandler);
+        this.window.overlay.event.off('keyboard_input', this.keyboardInputHandler);
+        this.contents.off('cursor-changed', this.cursorChangedHandler);
+        try {
+            await this.window.overlay.setBlockingCursor(this.window.id, Cursor.Default);
+        }
+        catch {
+            //
+        }
+    }
+    clickCounts = [];
+    processCursorAction(input, movementX, movementY) {
+        let button;
+        switch (input.action) {
+            case 'Left': {
+                button = 'left';
+                break;
+            }
+            case 'Middle': {
+                button = 'middle';
+                break;
+            }
+            case 'Right': {
+                button = 'right';
+                break;
+            }
+            case 'Forward': {
+                this.contents.navigationHistory.goForward();
+                return;
+            }
+            case 'Back': {
+                this.contents.navigationHistory.goBack();
+                return;
+            }
+        }
+        if (input.state === 'Pressed') {
+            const clickCount = 1 + ~~input.doubleClick;
+            this.clickCounts.push(clickCount);
+            this.sendInput({
+                type: 'mouseDown',
+                button,
+                clickCount,
+                x: input.clientX,
+                y: input.clientY,
+                globalX: input.windowX,
+                globalY: input.windowY,
+                movementX,
+                movementY,
+                modifiers: this.modifiers,
+            });
+        }
+        else {
+            const clickCount = this.clickCounts.pop() ?? 1;
+            this.sendInput({
+                type: 'mouseUp',
+                button,
+                clickCount,
+                x: input.clientX,
+                y: input.clientY,
+                globalX: input.windowX,
+                globalY: input.windowY,
+                movementX,
+                movementY,
+                modifiers: this.modifiers,
+            });
+        }
+    }
+    lastWindowCursor = {
+        x: 0,
+        y: 0,
+    };
+    sendCursorInput(input) {
+        const movementX = input.windowX - this.lastWindowCursor.x;
+        const movementY = input.windowY - this.lastWindowCursor.y;
+        switch (input.kind) {
+            case 'Enter': {
+                this.sendInput({
+                    type: 'mouseEnter',
+                    x: input.clientX,
+                    y: input.clientY,
+                    globalX: input.windowX,
+                    globalY: input.windowY,
+                    movementX,
+                    movementY,
+                    modifiers: this.modifiers,
+                });
+                break;
+            }
+            case 'Leave': {
+                this.sendInput({
+                    type: 'mouseLeave',
+                    x: input.clientX,
+                    y: input.clientY,
+                    globalX: input.windowX,
+                    globalY: input.windowY,
+                    movementX,
+                    movementY,
+                    modifiers: this.modifiers,
+                });
+                break;
+            }
+            case 'Move': {
+                this.sendInput({
+                    type: 'mouseMove',
+                    x: input.clientX,
+                    y: input.clientY,
+                    globalX: input.windowX,
+                    globalY: input.windowY,
+                    movementX,
+                    movementY,
+                    modifiers: this.modifiers,
+                });
+                break;
+            }
+            case 'Scroll': {
+                let scroll;
+                if (input.axis === 'Y') {
+                    scroll = {
+                        type: 'mouseWheel',
+                        deltaY: input.delta,
+                        x: input.clientX,
+                        y: input.clientY,
+                        globalX: input.windowX,
+                        globalY: input.windowY,
+                        movementX,
+                        movementY,
+                        modifiers: this.modifiers,
+                    };
+                }
+                else {
+                    scroll = {
+                        type: 'mouseWheel',
+                        deltaX: input.delta,
+                        x: input.clientX,
+                        y: input.clientY,
+                        globalX: input.windowX,
+                        globalY: input.windowY,
+                        movementX,
+                        movementY,
+                        modifiers: this.modifiers,
+                    };
+                }
+                this.sendInput(scroll);
+                break;
+            }
+            case 'Action': {
+                this.processCursorAction(input, movementX, movementY);
+                break;
+            }
+        }
+        this.lastWindowCursor.x = input.windowX;
+        this.lastWindowCursor.y = input.windowY;
+    }
+    modifiersMap = {
+        shift: false,
+        ctrl: false,
+        alt: false,
+        super: false,
+        meta: false,
+    };
+    modifiers = [];
+    updateModifiers(key, downState) {
+        switch (key) {
+            case 'Control': {
+                this.modifiersMap.ctrl = downState;
+                break;
+            }
+            case 'Shift': {
+                this.modifiersMap.shift = downState;
+                break;
+            }
+            case 'Super': {
+                this.modifiersMap.super = downState;
+                break;
+            }
+            case 'Meta': {
+                this.modifiersMap.meta = downState;
+                break;
+            }
+            case 'Alt': {
+                this.modifiersMap.alt = downState;
+                break;
+            }
+            default: {
+                return;
+            }
+        }
+        this.modifiers = [];
+        if (this.modifiersMap.shift) {
+            this.modifiers.push('shift');
+        }
+        if (this.modifiersMap.ctrl) {
+            this.modifiers.push('ctrl');
+        }
+        if (this.modifiersMap.alt) {
+            this.modifiers.push('alt');
+        }
+        if (this.modifiersMap.meta) {
+            this.modifiers.push('meta');
+        }
+        if (this.modifiersMap.super) {
+            this.modifiers.push('cmd');
+        }
+    }
+    sendKeyboardInput(input) {
+        switch (input.kind) {
+            case 'Key': {
+                const keyCode = KEYS[input.key.code];
+                if (!keyCode) {
+                    return;
+                }
+                const pressed = input.state === 'Pressed';
+                this.updateModifiers(keyCode, pressed);
+                this.sendInput({
+                    type: pressed ? 'keyDown' : 'keyUp',
+                    keyCode,
+                    modifiers: this.modifiers,
+                });
+                return;
+            }
+            case 'Char': {
+                this.sendInput({
+                    type: 'char',
+                    keyCode: input.ch,
+                    modifiers: this.modifiers,
+                });
+                return;
+            }
+            case 'Ime': {
+                this.processIme(input);
+                return;
+            }
+        }
+    }
+    processIme(input) {
+        if (input.ime.kind !== 'Commit') {
+            return;
+        }
+        for (const ch of input.ime.text) {
+            this.sendInput({
+                type: 'char',
+                keyCode: ch,
+                modifiers: this.modifiers,
+            });
+        }
+    }
+    sendInput(e) {
+        if (!this.forwardInput) {
+            return;
+        }
+        this.contents.sendInputEvent(e);
+    }
+}

package/lib/surface.d.ts

@@ -0,0 +1,19 @@
+import type { WebContents } from 'electron';
+import type { OverlayWindow } from './index.js';
+import EventEmitter from 'node:events';
+type Emitter = EventEmitter<{
+    error: [e: unknown];
+}>;
+export declare class ElectronOverlaySurface {
+    private readonly window;
+    private readonly contents;
+    readonly events: Emitter;
+    private handler;
+    private constructor();
+    static connect(window: OverlayWindow, contents: WebContents): ElectronOverlaySurface;
+    disconnect(): Promise<void>;
+    private paintAccelerated;
+    private paintSoftware;
+    private emitError;
+}
+export {};

package/lib/surface.js

@@ -0,0 +1,66 @@
+import EventEmitter from 'node:events';
+export class ElectronOverlaySurface {
+    window;
+    contents;
+    events = new EventEmitter();
+    handler;
+    constructor(window, contents) {
+        this.window = window;
+        this.contents = contents;
+        this.handler = (e, rect, image) => {
+            const offscreenTexture = e.texture;
+            if (offscreenTexture) {
+                void this.paintAccelerated(offscreenTexture.textureInfo).finally(() => {
+                    offscreenTexture.release();
+                });
+            }
+            else {
+                const size = image.getSize();
+                // offscreenTexture undefined if image is empty, handle the case
+                if (size.width === 0 || size.height === 0) {
+                    return;
+                }
+                void this.paintSoftware(rect, image);
+            }
+        };
+        contents.on('paint', this.handler);
+        contents.invalidate();
+    }
+    static connect(window, contents) {
+        return new ElectronOverlaySurface({ ...window }, contents);
+    }
+    async disconnect() {
+        this.contents.off('paint', this.handler);
+        await this.window.overlay.clearSurface(this.window.id);
+    }
+    async paintAccelerated(texture) {
+        const rect = texture.metadata.captureUpdateRect ?? texture.contentRect;
+        // update only changed part
+        try {
+            await this.window.overlay.updateShtex(this.window.id, texture.codedSize.width, texture.codedSize.height, texture.sharedTextureHandle, {
+                dstX: rect.x,
+                dstY: rect.y,
+                src: rect,
+            });
+        }
+        catch (e) {
+            this.emitError(e);
+        }
+    }
+    async paintSoftware(_dirtyRect, image) {
+        // TODO:: update only changed part
+        try {
+            await this.window.overlay.updateBitmap(this.window.id, image.getSize().width, image.toBitmap());
+        }
+        catch (e) {
+            this.emitError(e);
+        }
+    }
+    emitError(e) {
+        if (this.events.listenerCount('error') !== 0) {
+            this.events.emit('error', e);
+            return;
+        }
+        throw e;
+    }
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@asdf-overlay/electron",
+  "version": "0.9.0",
+  "description": "Asdf overlay Electron integration",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "author": "storycraft <storycraft@pancake.sh>",
+  "homepage": "https://github.com/storycraft/asdf-overlay#readme",
+  "license": "MIT OR Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/storycraft/asdf-overlay/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storycraft/asdf-overlay"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "electron": "^37.3.1",
+    "@asdf-overlay/core": "0.9.0"
+  },
+  "scripts": {
+    "build:dist": "tsc",
+    "build": "npm run build:dist"
+  }
+}