diff --git a/src/compiler.ts b/src/compiler.ts index e6ee7e1..ae3f8c1 100644 --- a/src/compiler.ts +++ b/src/compiler.ts @@ -99,7 +99,7 @@ function sanitize(name: string): string { if (ops[name]) return ops[name]; - const natives = ['measureText', 'storeSearch', 'debug', 'len', 'slice', 'str']; + const natives = ['measure', 'measureText', 'storeSearch', 'debug', 'len', 'slice', 'str']; if (natives.includes(name)) return `_rt.${name}`; const reserved = [ @@ -214,23 +214,12 @@ export function compileAndRun(defs: Definition[]) { } } - - /* - const compiledDefs = defs.map(def => - `const ${sanitize(def.name)} = ${compile(def.body)};` - ).join('\n'); - */ - const lastName = defs[defs.length - 1].name; const defNames = defs.map(d => sanitize(d.name)).join(', '); const code = `${compiledDefs.join('\n')} return { ${defNames}, __result: ${sanitize(lastName)} };`; - // console.log('--- Compiled Code ---'); - // console.log(code); - // console.log('====================='); - const fn = new Function('_rt', code); const allDefs = fn(_rt); diff --git a/src/os.cg b/src/os.cg index 17d9ee2..4315cab 100644 --- a/src/os.cg +++ b/src/os.cg @@ -20,13 +20,13 @@ listRow = config \ child = Stack { children = [ Rect { w = config.w, h = config.h, color = color }, - # centerV config.h ( + centerV config.h ( Positioned { x = 10, y = 10, child = Text { content = config.child, color = "white" } } - # ) + ) ] } }; @@ -34,7 +34,7 @@ listRow = config \ palette = state viewport \ results = take 10 (storeSearch osState.palette.query); - _ = debug "palette results" results; + _ = debug "viewport" viewport; state = osState.palette; diff --git a/src/runtime-compiled.ts b/src/runtime-compiled.ts index c1211a5..92b5c78 100644 --- a/src/runtime-compiled.ts +++ b/src/runtime-compiled.ts @@ -74,8 +74,6 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) { let instance = componentInstances.get(fullKey); if (!instance) { - console.log('Creating stateful', fullKey); - console.log('ui.init:', ui.init); instance = { state: ui.init, update: ui.update, @@ -87,7 +85,6 @@ export function runAppCompiled(app: App, canvas: HTMLCanvasElement, rt: any) { instance.update = ui.update; instance.view = ui.view; } - console.log('Instance state', instance.state); const viewResult = instance.view(instance.state); let viewUI = valueToUI(viewResult); diff --git a/src/runtime-js.ts b/src/runtime-js.ts index 1433c1f..6c3b7db 100644 --- a/src/runtime-js.ts +++ b/src/runtime-js.ts @@ -33,7 +33,6 @@ export const _rt = { storeSearch: (query: string) => { const results: string[] = []; const searchTerm = query.toLowerCase(); - console.log("in storeSearch. query: ", searchTerm); for (const name of Object.keys(store)) { if (searchTerm === '' || name.toLowerCase().includes(searchTerm)) { results.push(name); @@ -53,4 +52,62 @@ export const _rt = { obj[path[path.length - 1]] = maybeValue; } }, + measure: (ui: any): { width: number, height: number } => { + switch (ui._tag) { + 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 }; + } + } } diff --git a/src/valueToUI-compiled.ts b/src/valueToUI-compiled.ts index 17943d8..377bfa4 100644 --- a/src/valueToUI-compiled.ts +++ b/src/valueToUI-compiled.ts @@ -47,7 +47,7 @@ export function valueToUI(value: any): any { return { kind: 'positioned', x: value.x || 0, - y: value.p || 0, + y: value.y || 0, child: valueToUI(value.child), };