Initial commit
This commit is contained in:
@@ -0,0 +1,329 @@
|
||||
'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;
|
||||
});
|
||||
Reference in New Issue
Block a user