Adding measure to new compile code. Cleaning up debug

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);
 

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;
 

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);

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 };
+        }
+    }
 }

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),
             };