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

no more ValueToUI

Browse source
This commit is contained in:
Dustin Swan 2026-02-11 22:50:56 -07:00
parent e12809efba
commit dd6dad76c8
No known key found for this signature in database
GPG key ID: 30D46587E2100467
3 changed files with 16 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/runtime-js.ts
View file

@ -3,6 +3,7 @@ import { Parser } from './parser'
import { compile, recompile, definitions, freeVars, dependencies, dependents } from './compiler'
import { prettyPrint } from './ast'
import type { AST } from './ast'
import { measure } from './ui';
const STORAGE_KEY = 'cg-definitions';
@ -27,18 +28,18 @@ export const _rt = {
lte: (a: any) => (b: any) => ({ _tag: a <= b ? 'True' : 'False' }),
ui: {
rect: (config: any) => ({ _kind: 'rect', ...config }),
text: (config: any) => ({ _kind: 'text', ...config }),
stack: (config: any) => ({ _kind: 'stack', ...config }),
row: (config: any) => ({ _kind: 'row', ...config }),
column: (config: any) => ({ _kind: 'column', ...config }),
padding: (config: any) => ({ _kind: 'padding', ...config }),
positioned: (config: any) => ({ _kind: 'positioned', ...config }),
clickable: (config: any) => ({ _kind: 'clickable', ...config }),
clip: (config: any) => ({ _kind: 'clip', ...config }),
opacity: (config: any) => ({ _kind: 'opacity', ...config }),
stateful: (config: any) => ({ _kind: 'stateful', ...config }),
measure: (config: any) => ({ _kind: 'measure', ...config }),
rect: (config: any) => ({ kind: 'rect', ...config }),
text: (config: any) => ({ kind: 'text', ...config }),
stack: (config: any) => ({ kind: 'stack', ...config }),
row: (config: any) => ({ kind: 'row', ...config }),
column: (config: any) => ({ kind: 'column', ...config }),
padding: (config: any) => ({ kind: 'padding', ...config }),
positioned: (config: any) => ({ kind: 'positioned', ...config }),
clickable: (config: any) => ({ kind: 'clickable', ...config }),
clip: (config: any) => ({ kind: 'clip', ...config }),
opacity: (config: any) => ({ kind: 'opacity', ...config }),
stateful: (config: any) => ({ kind: 'stateful', ...config }),
measure: (config: any) => ({ kind: 'measure', ...config }),
measureText: (text: string) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
@ -50,64 +51,7 @@ export const _rt = {
},
},
measure: (ui: any): { width: number, height: number } => {
switch (ui._kind) {
case 'rect': return { width: ui.w, height: ui.h };
case 'text': return { width: ui.content.length * 10, height: 20 }; // TODO
case 'clip': return { width: ui.w, height: ui.h };
case 'row': {
let totalWidth = 0;
let maxHeight = 0;
for (const child of ui.children) {
const size = _rt.measure(child);
totalWidth += size.width;
maxHeight = Math.max(maxHeight, size.height);
}
totalWidth += ui.gap * (ui.children.length - 1);
return { width: totalWidth, height: maxHeight };
}
case 'column': {
let totalHeight = 0;
let maxWidth = 0;
for (const child of ui.children) {
const size = _rt.measure(child);
totalHeight += size.height;
maxWidth = Math.max(maxWidth, size.width);
}
totalHeight += ui.gap * (ui.children.length - 1);
return { width: maxWidth, height: totalHeight };
}
case 'padding': {
const childSize = _rt.measure(ui.child);
return {
width: childSize.width + ui.amount * 2,
height: childSize.height + ui.amount * 2,
}
}
case 'stack': {
let maxWidth = 0;
let maxHeight = 0;
for (const child of ui.children) {
const size = _rt.measure(child);
maxWidth = Math.max(maxWidth, size.width);
maxHeight = Math.max(maxHeight, size.height);
}
return { width: maxWidth, height: maxHeight };
}
case 'clickable':
case 'opacity':
case 'positioned':
return _rt.measure(ui.child);
default:
return { width: 0, height: 0 };
}
},
measure: measure,
batch: (events: any[]) => ({ _tag: 'Batch', _0: events }),
noOp: { _tag: 'NoOp' },