dustinswan/cg
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding support for mouse wheel events. cleaning up click handler to take functions

Browse source
This commit is contained in:
Dustin Swan 2026-02-13 16:31:47 -07:00
parent 85451d24fb
commit 1961ac6249
No known key found for this signature in database
GPG key ID: 30D46587E2100467
6 changed files with 108 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/runtime-compiled.ts
View file

@ -1,4 +1,4 @@
import { render, hitTest } from './ui';
import { render, hitTest, scrollHitTest } from './ui';
type UIValue = any;
@ -99,7 +99,7 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
viewUI = {
kind: 'clickable',
child: viewUI,
event: { _tag: 'FocusAndClick', _0: fullKey }
onClick: (coords: any) => ({ _tag: 'FocusAndClick', _0: fullKey, _1: coords })
};
}
return expandStateful(viewUI, [...path, ui.key], renderedKeys);
@ -117,6 +117,7 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
}
case 'clickable':
case 'scrollable':
case 'padding':
case 'positioned':
case 'opacity':
@ -204,42 +205,7 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
return;
}
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const hitResult = hitTest(x, y);
if (hitResult) {
const { event, relativeX, relativeY } = hitResult;
if (event._tag === 'FocusAndClick') {
handleEvent({
_tag: 'FocusAndClick',
_0: event._0,
_1: { x: Math.floor(relativeX), y: Math.floor(relativeY) }
});
} else {
handleEvent(event);
}
}
rerender();
});
window.addEventListener('keydown', (e) => {
const event = {
_tag: 'Key',
_0: {
key: e.key,
ctrl: { _tag: e.ctrlKey ? 'True' : 'False' },
meta: { _tag: e.metaKey ? 'True' : 'False' },
alt: { _tag: e.altKey ? 'True' : 'False' },
shift: { _tag: e.shiftKey ? 'True' : 'False' },
printable: { _tag: (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) ? 'True' : 'False' }
}
};
function dispatchToFocused(event: any) {
if (focusedComponentKey) {
// send to focused component
handleComponentEvent(focusedComponentKey, event);
@ -252,6 +218,60 @@ export function runAppCompiled(canvas: HTMLCanvasElement, store: any) {
}
}
}
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const hitResult = hitTest(x, y);
if (hitResult) {
const coords = { x: Math.floor(hitResult.relativeX), y: Math.floor(hitResult.relativeY) };
handleEvent(hitResult.onClick(coords));
}
rerender();
});
window.addEventListener('keydown', (e) => {
dispatchToFocused({
_tag: 'Key',
_0: {
key: e.key,
ctrl: { _tag: e.ctrlKey ? 'True' : 'False' },
meta: { _tag: e.metaKey ? 'True' : 'False' },
alt: { _tag: e.altKey ? 'True' : 'False' },
shift: { _tag: e.shiftKey ? 'True' : 'False' },
printable: { _tag: (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) ? 'True' : 'False' }
}
});
e.preventDefault();
rerender();
});
canvas.addEventListener('wheel', (e) => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const hit = scrollHitTest(x, y);
if (hit) {
const delta = { deltaX: Math.round(e.deltaX), deltaY: Math.round(e.deltaY) };
handleEvent(hit.onScroll(delta));
}
/*
dispatchToFocused({
_tag: 'Scroll',
_0: {
deltaX: Math.round(e.deltaX),
deltaY: Math.round(e.deltaY)
}
});
*/
e.preventDefault();
rerender();
});