WIP: first version of the Layouter class

frontend/code/dataModels.ts

@@ -118,3 +118,26 @@ export type Theme = {
 
     variant: 'light' | 'dark';
 };
+
+export type UnittestComponentLayout = {
+    leftInViewport: number;
+    topInViewport: number;
+
+    naturalWidth: number;
+    naturalHeight: number;
+
+    requestedWidth: number;
+    requestedHeight: number;
+
+    allocatedWidth: number;
+    allocatedHeight: number;
+
+    aux: object;
+};
+
+export type UnittestClientLayoutInfo = {
+    windowWidth: number;
+    windowHeight: number;
+
+    componentLayouts: { [componentId: number]: UnittestComponentLayout };
+};

frontend/code/rpc.ts

@@ -6,6 +6,7 @@ import {
     closeSession,
     setTitle,
 } from './rpcFunctions';
+import { getUnittestClientLayoutInfo } from './unitTestClientInfo';
 import {
     setClipboard,
     getClipboard,
@@ -413,10 +414,6 @@ export async function processMessageReturnResponse(
             response = null;
             break;
 
-        case 'getComponentLayouts':
-            response = await getComponentLayouts(message.params.componentIds);
-            break;
-
         case 'closeSession':
             closeSession();
             response = null;
@@ -455,6 +452,14 @@ export async function processMessageReturnResponse(
             }
             break;
 
+        case 'getComponentLayouts':
+            response = await getComponentLayouts(message.params.componentIds);
+            break;
+
+        case 'getUnittestClientLayoutInfo':
+            response = getUnittestClientLayoutInfo();
+            break;
+
         default:
             // Invalid method
             throw `Encountered unknown RPC method: ${message.method}`;

frontend/code/unitTestClientInfo.ts

@@ -0,0 +1,63 @@
+import { pixelsPerRem } from './app';
+import { getRootComponent } from './componentManagement';
+import { ComponentBase } from './components/componentBase';
+import {
+    UnittestClientLayoutInfo,
+    UnittestComponentLayout,
+} from './dataModels';
+
+function dumpComponentRecursively(
+    component: ComponentBase,
+    componentLayouts: { [componentId: number]: UnittestComponentLayout }
+) {
+    // Prepare the layout
+    const layout = {} as UnittestComponentLayout;
+
+    // Get layout information from the component
+    const rect = component.element.getBoundingClientRect();
+
+    layout.leftInViewport = rect.left / pixelsPerRem;
+    layout.topInViewport = rect.top / pixelsPerRem;
+
+    layout.naturalWidth = component.element.scrollWidth / pixelsPerRem;
+    layout.naturalHeight = component.element.scrollHeight / pixelsPerRem;
+
+    layout.requestedWidth = Math.max(
+        layout.naturalWidth,
+        component.state._size_[0]
+    );
+    layout.requestedHeight = Math.max(
+        layout.naturalHeight,
+        component.state._size_[1]
+    );
+
+    layout.allocatedWidth = rect.width / pixelsPerRem;
+    layout.allocatedHeight = rect.height / pixelsPerRem;
+
+    layout.aux = {};
+
+    // Save the layout
+    componentLayouts[component.id] = layout;
+
+    // Recurse into children
+    for (let child of component.children) {
+        dumpComponentRecursively(child, componentLayouts);
+    }
+}
+
+export function getUnittestClientLayoutInfo(): UnittestClientLayoutInfo {
+    // Prepare the result
+    const result = {} as UnittestClientLayoutInfo;
+
+    result.windowWidth = window.innerWidth / pixelsPerRem;
+    result.windowHeight = window.innerHeight / pixelsPerRem;
+
+    result.componentLayouts = {};
+
+    // Dump recursively, starting with the root component
+    let rootComponent = getRootComponent();
+    dumpComponentRecursively(rootComponent, result.componentLayouts);
+
+    // Done!
+    return result;
+}