@zenbu-labs/pixel 0.0.0 → 0.0.12

package/dist/web/input.d.ts

@@ -0,0 +1,49 @@
+import type { WebContents } from "electron";
+import type { EngineKeyEvent, PastedImage, PointerEvent, WheelEvent } from "../react";
+export interface InputTarget {
+    contents(): WebContents;
+    scale(): number;
+    focus(): Promise<void> | void;
+    cdp(method: string, params?: Record<string, unknown>): Promise<unknown>;
+}
+export declare class PageInput {
+    private readonly target;
+    private lastX;
+    private lastY;
+    private lastSentX;
+    private lastSentY;
+    private pressed;
+    private click;
+    private activeClickCount;
+    private wheelRemainderX;
+    private wheelRemainderY;
+    private sentKeys;
+    private superHeld;
+    private focusGate;
+    constructor(target: InputTarget);
+    private syncFocus;
+    private send;
+    releaseModifiers(): void;
+    private rememberModifiers;
+    private pointerModifiers;
+    pointer(event: PointerEvent): void;
+    wheel(event: WheelEvent): void;
+    private wheelTick;
+    private pinch;
+    key(event: EngineKeyEvent): void;
+    paste(text: string): void;
+    selectionText(): Promise<string>;
+    pasteImage(image: PastedImage): Promise<void>;
+    releaseKeys(): void;
+    /**
+     *
+     * why are we hard coding huerestics for vscode web??
+     *
+     */
+    private dispatchEnter;
+    private dispatchPaste;
+    private dispatchEditing;
+    private nextClickCount;
+    private modifiers;
+}
+export declare function electronKey(key: string): string | null;

package/dist/web/input.js

@@ -0,0 +1,468 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageInput = void 0;
+exports.electronKey = electronKey;
+const electron_1 = require("electron");
+class PageInput {
+    target;
+    lastX = 0;
+    lastY = 0;
+    lastSentX = 0;
+    lastSentY = 0;
+    pressed = new Set();
+    click = { button: "none", at: 0, x: 0, y: 0, count: 0 };
+    activeClickCount = 1;
+    wheelRemainderX = 0;
+    wheelRemainderY = 0;
+    sentKeys = new Set();
+    superHeld = false;
+    focusGate = null;
+    constructor(target) {
+        this.target = target;
+    }
+    syncFocus() {
+        const pending = this.target.focus();
+        if (!pending)
+            return this.focusGate;
+        const gate = this.focusGate ? this.focusGate.then(() => pending) : pending;
+        this.focusGate = gate;
+        void gate.then(() => {
+            if (this.focusGate === gate)
+                this.focusGate = null;
+        });
+        return gate;
+    }
+    send(event) {
+        const contents = this.target.contents();
+        if (this.focusGate)
+            void this.focusGate.then(() => contents.sendInputEvent(event));
+        else
+            contents.sendInputEvent(event);
+    }
+    releaseModifiers() {
+        this.superHeld = false;
+    }
+    rememberModifiers(event) {
+        this.superHeld =
+            event.key === "leftsuper" || event.key === "rightsuper"
+                ? event.kind !== "release"
+                : !!event.mods.super;
+    }
+    pointerModifiers(mods) {
+        return this.modifiers(this.superHeld && !mods.super ? { ...mods, super: true } : mods);
+    }
+    pointer(event) {
+        this.syncFocus();
+        const scale = this.target.scale();
+        const x = Math.max(0, Math.round(event.x / scale));
+        const y = Math.max(0, Math.round(event.y / scale));
+        this.lastX = x;
+        this.lastY = y;
+        const button = event.button === "none" ? undefined : event.button;
+        if (event.kind === "down" && button) {
+            this.pressed.add(button);
+            this.activeClickCount = this.nextClickCount(button, x, y);
+        }
+        if (event.kind === "up" && button)
+            this.pressed.delete(button);
+        const modifiers = this.pointerModifiers(event.mods);
+        for (const pressed of this.pressed)
+            modifiers.push(`${pressed}buttondown`);
+        this.send({
+            type: event.kind === "down"
+                ? "mouseDown"
+                : event.kind === "up"
+                    ? "mouseUp"
+                    : "mouseMove",
+            x,
+            y,
+            movementX: x - this.lastSentX,
+            movementY: y - this.lastSentY,
+            button,
+            clickCount: event.kind === "move" ? 0 : this.activeClickCount,
+            modifiers,
+        });
+        this.lastSentX = x;
+        this.lastSentY = y;
+    }
+    wheel(event) {
+        this.syncFocus();
+        if (event.mods.ctrl && event.precise) {
+            this.pinch(event);
+            return;
+        }
+        if (!event.precise) {
+            this.wheelTick(event);
+            return;
+        }
+        const scale = this.target.scale();
+        this.wheelRemainderX += -event.deltaX / scale;
+        this.wheelRemainderY += -event.deltaY / scale;
+        const deltaX = wholeDelta(this.wheelRemainderX);
+        const deltaY = wholeDelta(this.wheelRemainderY);
+        this.wheelRemainderX -= deltaX;
+        this.wheelRemainderY -= deltaY;
+        if (deltaX === 0 && deltaY === 0)
+            return;
+        this.send({
+            type: "mouseWheel",
+            x: this.lastX,
+            y: this.lastY,
+            deltaX,
+            deltaY,
+            wheelTicksX: deltaX / 40,
+            wheelTicksY: deltaY / 40,
+            hasPreciseScrollingDeltas: true,
+            canScroll: true,
+            modifiers: this.pointerModifiers(event.mods),
+        });
+    }
+    wheelTick(event) {
+        const ticksX = -Math.sign(event.deltaX);
+        const ticksY = -Math.sign(event.deltaY);
+        if (ticksX === 0 && ticksY === 0)
+            return;
+        const step = WHEEL_DETENT_PX;
+        this.send({
+            type: "mouseWheel",
+            x: this.lastX,
+            y: this.lastY,
+            deltaX: ticksX * step,
+            deltaY: ticksY * step,
+            wheelTicksX: ticksX,
+            wheelTicksY: ticksY,
+            hasPreciseScrollingDeltas: false,
+            canScroll: true,
+            modifiers: this.pointerModifiers(event.mods),
+        });
+    }
+    pinch(event) {
+        const pinchScale = 1 - event.deltaY / 100;
+        if (pinchScale <= 0)
+            return;
+        this.send({
+            type: "mouseWheel",
+            x: this.lastX,
+            y: this.lastY,
+            deltaX: 0,
+            deltaY: 100 * Math.log(pinchScale),
+            wheelTicksX: 0,
+            wheelTicksY: pinchScale > 1 ? 1 : -1,
+            hasPreciseScrollingDeltas: true,
+            canScroll: true,
+            modifiers: ["ctrl"],
+        });
+    }
+    key(event) {
+        this.rememberModifiers(event);
+        if (event.key === "enter") {
+            void this.dispatchEnter(event).catch(() => { });
+            return;
+        }
+        const commands = process.platform === "darwin" ? editingCommands(event) : null;
+        if (commands) {
+            void this.dispatchEditing(event, commands).catch(() => { });
+            return;
+        }
+        const keyCode = electronKey(event.key);
+        if (event.kind === "release") {
+            if (!keyCode || !this.sentKeys.delete(event.key))
+                return;
+            const modifiers = this.modifiers(event.mods);
+            if (event.key.startsWith("left"))
+                modifiers.push("left");
+            if (event.key.startsWith("right"))
+                modifiers.push("right");
+            this.send({ type: "keyUp", keyCode, modifiers });
+            return;
+        }
+        this.syncFocus();
+        if (!keyCode) {
+            if (event.text) {
+                this.target.contents().insertText(event.text);
+            }
+            return;
+        }
+        const modifiers = this.modifiers(event.mods);
+        if (event.key.startsWith("left"))
+            modifiers.push("left");
+        if (event.key.startsWith("right"))
+            modifiers.push("right");
+        if (event.kind === "repeat")
+            modifiers.push("isautorepeat");
+        this.sentKeys.add(event.key);
+        this.send({ type: "rawKeyDown", keyCode, modifiers });
+        const printable = !!event.text && !event.mods.ctrl && !event.mods.super && !event.mods.alt;
+        if (printable) {
+            this.send({ type: "char", keyCode: event.text, modifiers });
+        }
+    }
+    paste(text) {
+        electron_1.clipboard.writeText(text);
+        if (process.platform === "darwin") {
+            void this.dispatchPaste().catch(() => { });
+            return;
+        }
+        this.syncFocus();
+        this.target.contents().paste();
+    }
+    async selectionText() {
+        for (const frame of this.target.contents().mainFrame.framesInSubtree) {
+            const text = await frame.executeJavaScript(SELECTION_SNIPPET).catch(() => "");
+            if (typeof text === "string" && text)
+                return text;
+        }
+        return "";
+    }
+    async pasteImage(image) {
+        this.syncFocus();
+        switch (image.source) {
+            case "clipboard":
+                this.target.contents().paste();
+                return;
+            case "osc":
+            case "file": {
+                const staged = electron_1.nativeImage.createFromPath(image.path);
+                if (staged.isEmpty())
+                    return;
+                const png = new Blob([new Uint8Array(staged.toPNG())], { type: "image/png" });
+                await electron_1.clipboard.write([new electron_1.ClipboardItem({ "image/png": png })]);
+                this.target.contents().paste();
+                return;
+            }
+        }
+    }
+    releaseKeys() {
+        for (const key of this.sentKeys) {
+            const keyCode = electronKey(key);
+            if (!keyCode)
+                continue;
+            const modifiers = [];
+            if (key.startsWith("left"))
+                modifiers.push("left");
+            if (key.startsWith("right"))
+                modifiers.push("right");
+            this.send({ type: "keyUp", keyCode, modifiers });
+        }
+        this.sentKeys.clear();
+    }
+    /**
+     *
+     * why are we hard coding huerestics for vscode web??
+     *
+     */
+    async dispatchEnter(event) {
+        const base = {
+            key: "Enter",
+            code: "Enter",
+            windowsVirtualKeyCode: 13,
+            nativeVirtualKeyCode: 13,
+            modifiers: cdpModifiers(event.mods),
+        };
+        if (event.kind === "release") {
+            await this.target.cdp("Input.dispatchKeyEvent", { type: "keyUp", ...base });
+            return;
+        }
+        await this.syncFocus();
+        await this.target.cdp("Input.dispatchKeyEvent", {
+            type: "rawKeyDown",
+            ...base,
+            autoRepeat: event.kind === "repeat",
+        });
+        if (!event.mods.ctrl && !event.mods.super && !event.mods.alt) {
+            await this.target.cdp("Input.dispatchKeyEvent", { type: "char", text: "\r", ...base });
+        }
+    }
+    async dispatchPaste() {
+        const base = {
+            key: "v",
+            code: "KeyV",
+            windowsVirtualKeyCode: 86,
+            nativeVirtualKeyCode: 86,
+            modifiers: 4,
+        };
+        await this.syncFocus();
+        await this.target.cdp("Input.dispatchKeyEvent", {
+            type: "rawKeyDown",
+            ...base,
+            commands: ["Paste"],
+        });
+        await this.target.cdp("Input.dispatchKeyEvent", { type: "keyUp", ...base });
+    }
+    async dispatchEditing(event, commands) {
+        const info = EDITING_KEY_INFO[event.key];
+        if (!info)
+            return;
+        const base = {
+            key: info.key,
+            code: info.code,
+            windowsVirtualKeyCode: info.keyCode,
+            nativeVirtualKeyCode: info.keyCode,
+            modifiers: cdpModifiers(event.mods),
+        };
+        if (event.kind === "release") {
+            await this.target.cdp("Input.dispatchKeyEvent", { type: "keyUp", ...base });
+            return;
+        }
+        await this.syncFocus();
+        await this.target.cdp("Input.dispatchKeyEvent", {
+            type: "rawKeyDown",
+            ...base,
+            autoRepeat: event.kind === "repeat",
+            commands,
+        });
+    }
+    nextClickCount(button, x, y) {
+        const now = Date.now();
+        const close = Math.abs(x - this.click.x) <= 4 && Math.abs(y - this.click.y) <= 4;
+        const count = this.click.button === button && now - this.click.at <= 500 && close
+            ? Math.min(this.click.count + 1, 3)
+            : 1;
+        this.click = { button, at: now, x, y, count };
+        return count;
+    }
+    modifiers(mods) {
+        const result = [];
+        if (mods.shift)
+            result.push("shift");
+        if (mods.alt)
+            result.push("alt");
+        if (mods.ctrl)
+            result.push("ctrl");
+        if (mods.super)
+            result.push("meta");
+        return result;
+    }
+}
+exports.PageInput = PageInput;
+const SELECTION_SNIPPET = `(() => {
+  const el = document.activeElement;
+  try {
+    if (el && "selectionStart" in el && el.selectionStart !== el.selectionEnd) {
+      return el.value.slice(el.selectionStart, el.selectionEnd);
+    }
+  } catch {}
+  return String(getSelection() ?? "");
+})()`;
+const WHEEL_DETENT_PX = process.platform === "darwin" ? 40 : 120;
+function wholeDelta(value) {
+    return value < 0 ? Math.ceil(value) : Math.floor(value);
+}
+function cdpModifiers(mods) {
+    return ((mods.alt ? 1 : 0) | (mods.ctrl ? 2 : 0) | (mods.super ? 4 : 0) | (mods.shift ? 8 : 0));
+}
+const EDITING_KEY_INFO = {
+    backspace: { key: "Backspace", code: "Backspace", keyCode: 8 },
+    left: { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37 },
+    right: { key: "ArrowRight", code: "ArrowRight", keyCode: 39 },
+    up: { key: "ArrowUp", code: "ArrowUp", keyCode: 38 },
+    down: { key: "ArrowDown", code: "ArrowDown", keyCode: 40 },
+    a: { key: "a", code: "KeyA", keyCode: 65 },
+    b: { key: "b", code: "KeyB", keyCode: 66 },
+    c: { key: "c", code: "KeyC", keyCode: 67 },
+    d: { key: "d", code: "KeyD", keyCode: 68 },
+    e: { key: "e", code: "KeyE", keyCode: 69 },
+    f: { key: "f", code: "KeyF", keyCode: 70 },
+    k: { key: "k", code: "KeyK", keyCode: 75 },
+    u: { key: "u", code: "KeyU", keyCode: 85 },
+    w: { key: "w", code: "KeyW", keyCode: 87 },
+    x: { key: "x", code: "KeyX", keyCode: 88 },
+    z: { key: "z", code: "KeyZ", keyCode: 90 },
+};
+function editingCommands(event) {
+    const { key, mods } = event;
+    if (mods.ctrl)
+        return controlEditingCommands(event);
+    const select = mods.shift ? "AndModifySelection" : "";
+    if (key === "backspace") {
+        if (mods.super)
+            return ["deleteToBeginningOfLine"];
+        if (mods.alt)
+            return ["deleteWordBackward"];
+        return null;
+    }
+    if (key === "b" && mods.alt && !mods.super)
+        return [`moveWordLeft${select}`];
+    if (key === "f" && mods.alt && !mods.super)
+        return [`moveWordRight${select}`];
+    if (key === "left" || key === "right") {
+        const end = key === "left" ? "moveToLeftEndOfLine" : "moveToRightEndOfLine";
+        const word = key === "left" ? "moveWordLeft" : "moveWordRight";
+        if (mods.super)
+            return [`${end}${select}`];
+        if (mods.alt)
+            return [`${word}${select}`];
+        return null;
+    }
+    if (key === "up" || key === "down") {
+        const edge = key === "up" ? "moveToBeginningOfDocument" : "moveToEndOfDocument";
+        if (mods.super && !mods.alt)
+            return [`${edge}${select}`];
+        return null;
+    }
+    if (mods.super && !mods.alt && !mods.shift && key === "a")
+        return ["selectAll"];
+    if (mods.super && !mods.alt && key === "z")
+        return [mods.shift ? "redo" : "undo"];
+    if (mods.super && !mods.alt && !mods.shift && key === "c")
+        return ["Copy"];
+    if (mods.super && !mods.alt && !mods.shift && key === "x")
+        return ["Cut"];
+    return null;
+}
+// fixme this is left over and shouldn't exist 
+function controlEditingCommands(event) {
+    const { key, mods } = event;
+    if (mods.super || mods.alt)
+        return null;
+    const select = mods.shift ? "AndModifySelection" : "";
+    switch (key) {
+        case "a":
+            return [`moveToLeftEndOfLine${select}`];
+        case "e":
+            return [`moveToRightEndOfLine${select}`];
+        case "b":
+            return [`moveLeft${select}`];
+        case "f":
+            return [`moveRight${select}`];
+        case "d":
+            return ["deleteForward"];
+        case "k":
+            return ["deleteToEndOfLine"];
+        case "w":
+            return ["deleteWordBackward"];
+        case "u":
+            return ["deleteToBeginningOfLine"];
+        default:
+            return null;
+    }
+}
+function electronKey(key) {
+    const special = {
+        enter: "return",
+        backspace: "backspace",
+        delete: "delete",
+        escape: "escape",
+        tab: "tab",
+        up: "up",
+        down: "down",
+        left: "left",
+        right: "right",
+        home: "home",
+        end: "end",
+        insert: "insert",
+        pageup: "pageup",
+        pagedown: "pagedown",
+        leftshift: "shift",
+        leftcontrol: "control",
+        leftalt: "alt",
+        leftsuper: "meta",
+        rightshift: "shift",
+        rightcontrol: "control",
+        rightalt: "alt",
+        rightsuper: "meta",
+    };
+    if (key === "unknown")
+        return null;
+    return special[key] ?? key;
+}

package/dist/web/offscreen.d.ts

@@ -0,0 +1,2 @@
+export declare function offscreenPreferences(deviceScaleFactor: number): Electron.WebPreferences["offscreen"];
+export declare function initOffscreenMode(sharedTextures: boolean): void;

package/dist/web/offscreen.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.offscreenPreferences = offscreenPreferences;
+exports.initOffscreenMode = initOffscreenMode;
+const react_1 = require("../react");
+const SHM_FRAMES = process.platform === "linux" && process.env.PIXEL_SHM !== "0";
+function offscreenPreferences(deviceScaleFactor) {
+    if (process.platform === "darwin") {
+        return { useSharedTexture: true, sharedTexturePixelFormat: "argb", deviceScaleFactor };
+    }
+    return {
+        useSharedTexture: false,
+        useSharedMemory: SHM_FRAMES,
+        deviceScaleFactor,
+    };
+}
+function initOffscreenMode(sharedTextures) {
+    if (process.platform === "darwin" && !sharedTextures) {
+        throw new Error("wrong electron build installed");
+    }
+    const mode = process.platform === "darwin" ? "shared-texture" : SHM_FRAMES ? "shm" : "bitmap";
+    (0, react_1.appLog)("info", "texture", `offscreen mode: ${mode}`);
+}

package/dist/web/paint.d.ts

@@ -0,0 +1,11 @@
+import type { NativeImage, OffscreenSharedTexture, OffscreenSoftwareFrame, Rectangle } from "electron";
+import type { Surface } from "../react";
+export declare function presentPaint(surface: Surface, texture: OffscreenSharedTexture | undefined, shmFrame: OffscreenSoftwareFrame | undefined, image: NativeImage, dirtyRect: Rectangle, wholeSurface: boolean): boolean;
+export declare class BitmapPresenter {
+    private readonly surface;
+    private pending;
+    private scheduled;
+    constructor(surface: Surface);
+    push(image: NativeImage, dirtyRect: Rectangle, wholeSurface: boolean): boolean;
+    private drain;
+}

package/dist/web/paint.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BitmapPresenter = void 0;
+exports.presentPaint = presentPaint;
+const types_1 = require("./types");
+function presentPaint(surface, texture, shmFrame, image, dirtyRect, wholeSurface) {
+    if (texture)
+        return presentTexture(surface, texture, wholeSurface);
+    if (shmFrame)
+        return presentShmFrame(surface, shmFrame, dirtyRect, wholeSurface);
+    return presentBitmap(surface, image, wholeSurface ? undefined : dirtyRect);
+}
+function presentTexture(surface, texture, wholeSurface) {
+    try {
+        const info = texture.textureInfo;
+        if (info.widgetType !== "frame" || info.pixelFormat !== "bgra")
+            return false;
+        const { ioSurface } = info.handle;
+        if (!ioSurface)
+            return false;
+        if ((0, types_1.paintedNothing)(info) && !wholeSurface)
+            return false;
+        surface.present({ ioSurface, damage: wholeSurface ? undefined : (0, types_1.damageOf)(info) });
+        return true;
+    }
+    finally {
+        texture.release();
+    }
+}
+function presentShmFrame(surface, frame, dirtyRect, wholeSurface) {
+    let handedOff = false;
+    try {
+        const info = frame.frameInfo;
+        if (info.widgetType !== "frame")
+            return false;
+        if (info.pixelFormat !== "bgra")
+            return false;
+        if (info.contentRect.x !== 0 || info.contentRect.y !== 0)
+            return false;
+        const update = info.metadata.captureUpdateRect;
+        if (update && update.width <= 0 && update.height <= 0 && !wholeSurface)
+            return false;
+        const damage = wholeSurface || dirtyRect.width <= 0 || dirtyRect.height <= 0 ? undefined : dirtyRect;
+        try {
+            surface.present({
+                shm: {
+                    fd: info.fd,
+                    width: info.contentRect.width,
+                    height: info.contentRect.height,
+                    stride: info.stride,
+                    size: info.dataSize,
+                },
+                damage,
+                released: () => frame.release(),
+            });
+        }
+        catch {
+            return false;
+        }
+        handedOff = true;
+        return true;
+    }
+    finally {
+        if (!handedOff)
+            frame.release();
+    }
+}
+function presentBitmap(surface, image, dirtyRect) {
+    const size = image.getSize();
+    if (size.width <= 0 || size.height <= 0)
+        return false;
+    const damage = dirtyRect && dirtyRect.width > 0 && dirtyRect.height > 0 ? dirtyRect : undefined;
+    surface.present({ bgra: image.toBitmap(), width: size.width, height: size.height, damage });
+    return true;
+}
+function unionRect(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return {
+        x,
+        y,
+        width: Math.max(a.x + a.width, b.x + b.width) - x,
+        height: Math.max(a.y + a.height, b.y + b.height) - y,
+    };
+}
+class BitmapPresenter {
+    surface;
+    pending = null;
+    scheduled = false;
+    constructor(surface) {
+        this.surface = surface;
+    }
+    push(image, dirtyRect, wholeSurface) {
+        const size = image.getSize();
+        if (size.width <= 0 || size.height <= 0)
+            return false;
+        const fresh = dirtyRect.width > 0 && dirtyRect.height > 0 ? dirtyRect : undefined;
+        const stale = this.pending;
+        const carried = stale && stale.width === size.width && stale.height === size.height ? stale : null;
+        const damage = carried?.damage && fresh ? unionRect(carried.damage, fresh) : fresh;
+        this.pending = {
+            bgra: image.toBitmap(),
+            width: size.width,
+            height: size.height,
+            damage,
+            whole: wholeSurface || (carried?.whole ?? false) || (stale != null && !carried),
+        };
+        if (!this.scheduled) {
+            this.scheduled = true;
+            setImmediate(() => this.drain());
+        }
+        return true;
+    }
+    drain() {
+        this.scheduled = false;
+        const pending = this.pending;
+        this.pending = null;
+        if (!pending)
+            return;
+        this.surface.present({
+            bgra: pending.bgra,
+            width: pending.width,
+            height: pending.height,
+            damage: pending.whole ? undefined : pending.damage,
+        });
+    }
+}
+exports.BitmapPresenter = BitmapPresenter;