tasksoftwaretest/web/taskforge.js

'use strict';
// Thin browser shim for TaskForge. All app logic and rendering is in Jai (taskforge.wasm); this file only
//   1. forwards WebGL2 calls (same names as OpenGL, see src/web_gl.jai),
//   2. forwards input events to the exported web_* procedures,
//   3. provides storage (localStorage), clipboard and file import/export.
// Pointers and s64 values arrive as BigInt (WASM64), everything else as Number.

const canvas = document.getElementById('app');
const message = document.getElementById('message');
const importInput = document.getElementById('import');
const gl = canvas.getContext('webgl2', { antialias: false, alpha: false, premultipliedAlpha: false });

let memory = null;
let X = null; // WASM exports.

const decoder = new TextDecoder();
const encoder = new TextEncoder();
const u8 = () => new Uint8Array(memory.buffer);
const dv = () => new DataView(memory.buffer);
const str = (ptr, len) => decoder.decode(u8().subarray(Number(ptr), Number(ptr) + Number(len)));
const cstr = (ptr) => {
    const m = u8();
    const start = Number(ptr);
    let end = start;
    while (m[end]) end++;
    return decoder.decode(m.subarray(start, end));
};

// WebGL objects are referenced from Jai by integer handles.
const objects = [null];
const handle = (o) => { objects.push(o); return objects.length - 1; };

function writeInfoLog(log, maxLength, lengthPtr, bufferPtr) {
    const bytes = encoder.encode(log || '').subarray(0, Math.max(0, maxLength - 1));
    u8().set(bytes, Number(bufferPtr));
    u8()[Number(bufferPtr) + bytes.length] = 0;
    if (lengthPtr) dv().setInt32(Number(lengthPtr), bytes.length, true);
}

function genObjects(n, out, create) {
    for (let i = 0; i < n; i++) dv().setUint32(Number(out) + i * 4, handle(create()), true);
}

let pendingLoad = null;
let consoleLine = '';

const env = {
    // Jai runtime.
    wasm_write_string(count, data, toStderr) {
        consoleLine += str(data, count);
        const lines = consoleLine.split('\n');
        consoleLine = lines.pop();
        for (const line of lines) (toStderr ? console.error : console.log)(line);
    },
    wasm_debug_break() { debugger; },
    memcmp(a, b, n) {
        const m = u8();
        const pa = Number(a), pb = Number(b);
        for (let i = 0; i < Number(n); i++) {
            const d = m[pa + i] - m[pb + i];
            if (d) return d;
        }
        return 0;
    },

    // OpenGL ES 3.0 -> WebGL2.
    glCreateShader: (type) => handle(gl.createShader(type)),
    glShaderSource(shader, count, strings, lengths) {
        const d = dv();
        let source = '';
        for (let i = 0; i < count; i++) {
            const p = d.getBigUint64(Number(strings) + i * 8, true);
            const len = lengths ? d.getInt32(Number(lengths) + i * 4, true) : -1;
            source += len >= 0 ? str(p, len) : cstr(p);
        }
        gl.shaderSource(objects[shader], source);
    },
    glCompileShader: (shader) => gl.compileShader(objects[shader]),
    glGetShaderiv(shader, pname, out) {
        const value = pname === 0x8B84
            ? (gl.getShaderInfoLog(objects[shader]) || '').length + 1
            : Number(gl.getShaderParameter(objects[shader], pname));
        dv().setInt32(Number(out), value, true);
    },
    glGetShaderInfoLog: (shader, max, len, buf) => writeInfoLog(gl.getShaderInfoLog(objects[shader]), max, len, buf),
    glCreateProgram: () => handle(gl.createProgram()),
    glAttachShader: (program, shader) => gl.attachShader(objects[program], objects[shader]),
    glBindAttribLocation: (program, index, name) => gl.bindAttribLocation(objects[program], index, cstr(name)),
    glLinkProgram: (program) => gl.linkProgram(objects[program]),
    glGetProgramiv(program, pname, out) {
        const value = pname === 0x8B84
            ? (gl.getProgramInfoLog(objects[program]) || '').length + 1
            : Number(gl.getProgramParameter(objects[program], pname));
        dv().setInt32(Number(out), value, true);
    },
    glGetProgramInfoLog: (program, max, len, buf) => writeInfoLog(gl.getProgramInfoLog(objects[program]), max, len, buf),
    glUseProgram: (program) => gl.useProgram(objects[program]),
    glGetUniformLocation: (program, name) => handle(gl.getUniformLocation(objects[program], cstr(name))),
    glUniform1i: (loc, v) => gl.uniform1i(objects[loc], v),
    glUniform1f: (loc, v) => gl.uniform1f(objects[loc], v),
    glUniform2f: (loc, a, b) => gl.uniform2f(objects[loc], a, b),
    glGenVertexArrays: (n, out) => genObjects(n, out, () => gl.createVertexArray()),
    glBindVertexArray: (vao) => gl.bindVertexArray(objects[vao]),
    glGenBuffers: (n, out) => genObjects(n, out, () => gl.createBuffer()),
    glBindBuffer: (target, buffer) => gl.bindBuffer(target, objects[buffer]),
    glBufferData(target, size, data, usage) {
        if (data) gl.bufferData(target, u8().subarray(Number(data), Number(data) + Number(size)), usage);
        else      gl.bufferData(target, Number(size), usage);
    },
    glVertexAttribPointer: (index, size, type, normalized, stride, offset) =>
        gl.vertexAttribPointer(index, size, type, !!normalized, stride, Number(offset)),
    glEnableVertexAttribArray: (index) => gl.enableVertexAttribArray(index),
    glGenTextures: (n, out) => genObjects(n, out, () => gl.createTexture()),
    glBindTexture: (target, texture) => gl.bindTexture(target, objects[texture]),
    glActiveTexture: (unit) => gl.activeTexture(unit),
    glTexImage2D(target, level, internalFormat, w, h, border, format, type, pixels) {
        const bytesPerPixel = format === gl.RED ? 1 : 4;
        const data = pixels ? u8().subarray(Number(pixels), Number(pixels) + w * h * bytesPerPixel) : null;
        gl.texImage2D(target, level, internalFormat, w, h, border, format, type, data);
    },
    glTexParameteri: (target, pname, param) => gl.texParameteri(target, pname, param),
    glPixelStorei: (pname, param) => gl.pixelStorei(pname, param),
    glEnable: (cap) => gl.enable(cap),
    glDisable: (cap) => gl.disable(cap),
    glBlendFunc: (s, d) => gl.blendFunc(s, d),
    glScissor: (x, y, w, h) => gl.scissor(x, y, w, h),
    glViewport: (x, y, w, h) => gl.viewport(x, y, w, h),
    glClearColor: (r, g, b, a) => gl.clearColor(r, g, b, a),
    glClear: (mask) => gl.clear(mask),
    glDrawArrays: (mode, first, count) => gl.drawArrays(mode, first, count),

    // Platform services.
    js_storage_save(key, keyCount, data, count) {
        try { localStorage.setItem(str(key, keyCount), str(data, count)); }
        catch (e) { console.error('Saving failed:', e); }
    },
    js_storage_load_size(key, keyCount) {
        const text = localStorage.getItem(str(key, keyCount));
        pendingLoad = text ? encoder.encode(text) : null;
        return BigInt(pendingLoad ? pendingLoad.length : 0);
    },
    js_storage_load(dest) {
        if (pendingLoad) u8().set(pendingLoad, Number(dest));
        pendingLoad = null;
    },
    js_clipboard_write(data, count) {
        navigator.clipboard?.writeText(str(data, count)).catch(() => {});
    },
    js_set_cursor(kind) {
        canvas.style.cursor = ['default', 'pointer', 'text', 'grabbing'][kind] || 'default';
    },
    js_download(data, count) {
        const blob = new Blob([u8().slice(Number(data), Number(data) + Number(count))], { type: 'text/plain' });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'project.taskforge';
        a.click();
        setTimeout(() => URL.revokeObjectURL(a.href), 1000);
    },
    js_request_import() { importInput.click(); },
    js_http_post(tag, path, pathCount, body, bodyCount, token, tokenCount) {
        const headers = { 'Content-Type': 'text/plain; charset=utf-8' };
        if (tokenCount) headers['Authorization'] = 'Bearer ' + str(token, tokenCount);
        const request = fetch(str(path, pathCount), { method: 'POST', headers, body: u8().slice(Number(body), Number(body) + Number(bodyCount)) });
        request.then(async (response) => [response.status, new Uint8Array(await response.arrayBuffer())])
               .catch(() => [0, new Uint8Array(0)])
               .then(([status, bytes]) => {
                   const ptr = bytes.length ? X.web_alloc(BigInt(bytes.length)) : 0n;
                   if (bytes.length) u8().set(bytes, Number(ptr));
                   X.web_http_response(tag, status, ptr, BigInt(bytes.length));
                   requestFrame();
               });
    },
};

// Report any import we forgot instead of failing to instantiate.
const imports = {
    env: new Proxy(env, {
        get(target, name) {
            if (name in target) return target[name];
            return () => { throw new Error('Missing import: ' + String(name)); };
        },
    }),
};

//
// Frames are only rendered when something happened (input, resize, or the app asks for more).
//
let frameScheduled = false;
function requestFrame() {
    if (!frameScheduled) {
        frameScheduled = true;
        requestAnimationFrame(frame);
    }
}

function frame(timeMs) {
    frameScheduled = false;
    const dpr = window.devicePixelRatio || 1;
    const w = canvas.clientWidth, h = canvas.clientHeight;
    const pw = Math.round(w * dpr), ph = Math.round(h * dpr);
    if (canvas.width !== pw || canvas.height !== ph) {
        canvas.width = pw;
        canvas.height = ph;
    }
    if (X.web_frame(w, h, dpr, timeMs / 1000)) requestFrame();
}

function sendString(text, exportName) {
    const bytes = encoder.encode(text);
    const ptr = X.web_alloc(BigInt(bytes.length));
    u8().set(bytes, Number(ptr));
    X[exportName](ptr, BigInt(bytes.length));
}

//
// Input
//
const KEYS = {
    Backspace: 8, Tab: 9, Enter: 13, Escape: 27, Delete: 127,
    ArrowUp: 128, ArrowDown: 129, ArrowLeft: 130, ArrowRight: 131,
    PageUp: 132, PageDown: 133, Home: 134, End: 135,
};
const MOUSE_BUTTONS = [0, 2, 1]; // DOM left/middle/right -> app left/middle/right indices.

function modifiers(e) {
    return (e.shiftKey ? 1 : 0) | (e.ctrlKey || e.metaKey ? 2 : 0) | (e.altKey ? 4 : 0);
}

function mouseMove(e) {
    const r = canvas.getBoundingClientRect();
    X.web_mouse_move(e.clientX - r.left, e.clientY - r.top);
    X.web_modifiers(modifiers(e));
    requestFrame();
}

function installInput() {
    window.addEventListener('pointermove', mouseMove);
    canvas.addEventListener('pointerdown', (e) => {
        canvas.focus();
        canvas.setPointerCapture(e.pointerId);
        mouseMove(e);
        X.web_mouse_button(MOUSE_BUTTONS[e.button] ?? 0, 1);
        e.preventDefault();
    });
    window.addEventListener('pointerup', (e) => {
        mouseMove(e);
        X.web_mouse_button(MOUSE_BUTTONS[e.button] ?? 0, 0);
    });
    canvas.addEventListener('contextmenu', (e) => e.preventDefault());
    canvas.addEventListener('wheel', (e) => {
        const scale = e.deltaMode === 1 ? 1 : e.deltaMode === 2 ? 10 : 1 / 40;
        X.web_modifiers(modifiers(e));
        X.web_wheel(e.deltaX * scale, e.deltaY * scale);
        requestFrame();
        e.preventDefault();
    }, { passive: false });

    window.addEventListener('keydown', (e) => {
        const mods = modifiers(e);
        const ctrl = (mods & 2) !== 0;
        X.web_modifiers(mods);
        if (KEYS[e.key] !== undefined) {
            X.web_key(KEYS[e.key], mods);
            e.preventDefault();
        } else if (ctrl) {
            // Ctrl+V is left to the browser so the 'paste' event delivers the clipboard text.
            const k = e.key.toUpperCase();
            if (k === 'C' || k === 'X' || k === 'S' || k === 'A') {
                X.web_key(k.charCodeAt(0), mods);
                e.preventDefault();
            }
        } else if ([...e.key].length === 1) {
            X.web_char(e.key.codePointAt(0));
            e.preventDefault();
        }
        requestFrame();
    });
    window.addEventListener('keyup', (e) => { X.web_modifiers(modifiers(e)); });
    window.addEventListener('paste', (e) => {
        const text = e.clipboardData?.getData('text') || '';
        for (const ch of text.replace(/\r\n/g, '\n')) X.web_char(ch.codePointAt(0));
        e.preventDefault();
        requestFrame();
    });

    window.addEventListener('resize', requestFrame);
    window.addEventListener('beforeunload', () => X.web_flush());
    // Keep the caret blinking and autosave ticking even without input.
    setInterval(requestFrame, 500);

    importInput.addEventListener('change', async () => {
        const file = importInput.files[0];
        importInput.value = '';
        if (!file) return;
        sendString(await file.text(), 'web_import');
        requestFrame();
    });
}

async function start() {
    if (!gl) throw new Error('WebGL2 is not available in this browser.');
    // When served by taskforge-server we run against it (with sign-in); otherwise the project lives in this browser.
    const serverMode = await fetch('api/info').then((r) => r.ok ? r.text() : '').then((t) => t.startsWith('taskforge-server')).catch(() => false);
    const [wasm, fonts] = await Promise.all([
        fetch('taskforge.wasm').then((r) => r.arrayBuffer()).then((bytes) => WebAssembly.instantiate(bytes, imports)),
        fetch('fonts.bin').then((r) => r.arrayBuffer()),
    ]);
    X = wasm.instance.exports;
    memory = X.memory;
    X.main(0, 0n); // Runs the Jai runtime init + our main(), which just stores the context.

    const ptr = X.web_alloc(BigInt(fonts.byteLength));
    u8().set(new Uint8Array(fonts), Number(ptr));
    if (!X.web_init(ptr, BigInt(fonts.byteLength), serverMode ? 1 : 0)) throw new Error('Initialization failed (see console).');

    message.remove();
    installInput();
    canvas.focus();
    requestFrame();
}

start().catch((e) => {
    console.error(e);
    const memory64 = /memory64|i64|Memory64|table64/i.test(String(e));
    message.textContent = memory64
        ? 'This browser does not support WebAssembly Memory64 yet. Try a current Chrome, Edge or Firefox.'
        : 'TaskForge failed to start: ' + e.message;
});