fixes absolute positioning and loading issues in some cases (#73)

Author: patricklx

ember-tui-demo/app/app.ts

@@ -114,7 +114,7 @@ async function startApp() {
 if (!process.env.VITEST || process.env.TEST_MODE) {
   startApp()
     .then(() => {
-      console.error('[main] App started successfully, entering event loop');
+      // console.error('[main] App started successfully, entering event loop');
       // Start rendering to terminal
     })
     .catch((error) => {

ember-tui/src/components/Box.gts

@@ -98,6 +98,11 @@ export default class Box extends Component<BoxSignature> {
       align-items={{@alignItems}}
       align-self={{@alignSelf}}
       justify-content={{@justifyContent}}
+      position={{@position}}
+      top={{@top}}
+      bottom={{@bottom}}
+      left={{@left}}
+      right={{@right}}
       width={{@width}}
       height={{@height}}
       min-width={{@minWidth}}

ember-tui/src/components/InspectorSupport.gts

@@ -40,7 +40,7 @@ export default class InspectorSupport extends Component<InspectorSupportInterfac
           (this.highlight as any).style = {};
           _showHighlight.call(this, node, rect);
           this.highlight.setAttribute('display', 'flex');
-          const layout = node.yogaNode!.getComputedLayout();
+          const layout = rect;
           this.highlight.setAttribute(
             'left',
             layout.left,
@@ -86,9 +86,9 @@ export default class InspectorSupport extends Component<InspectorSupportInterfac
     }.bind(this),
   );
   <template>
+    <Box @position='absolute' @borderStyle="single" {{this.setupHighlight}} />
+    <Box @position='absolute' {{this.setupTooltip}} />
     <Box @position='absolute' {{ref this 'page'}}>
-      <Box @borderStyle="single" {{this.setupHighlight}} />
-      <Box {{this.setupTooltip}} />
       {{(this.setupInspector)}}
     </Box>
   </template>

ember-tui/src/dom/nodes/ViewNode.ts

@@ -318,13 +318,27 @@ export default class ViewNode<Attributes = any> {
     height: number;
   } | null {
     if (this.yogaNode) {
-      /*return {
-        left: this.yogaNode.getComputedLeft(),
-        top: this.yogaNode.getComputedTop(),
-        bottom: this.yogaNode.getComputedBottom(),
-        width: this.yogaNode.getComputedWidth(),
-        height: this.yogaNode.getComputedHeight()
-      }*/
+      let left = 0;
+      let top = 0;
+
+      // Traverse up the parent chain to calculate absolute position
+      let current = this.yogaNode as typeof this.yogaNode | null;
+      while (current) {
+        const layout = current.getComputedLayout();
+        left += layout.left;
+        top += layout.top;
+        current = current.getParent();
+      }
+
+      const layout = this.yogaNode.getComputedLayout();
+
+      return {
+        left: left,
+        top: top,
+        bottom: top + layout.height,
+        width: layout.width,
+        height: layout.height
+      };
     }
     return null;
   }

ember-tui/src/dom/styles.ts

@@ -349,13 +349,13 @@ const applyPositionStyles = (node: YogaNode, style: Styles): void => {
 		node.setPosition(Yoga.EDGE_TOP, style['top'] as number || 0);
 	}
 	if ('bottom' in style) {
-		node.setPosition(Yoga.EDGE_TOP, style['bottom'] as number || 0);
+		node.setPosition(Yoga.EDGE_BOTTOM, style['bottom'] as number || 0);
 	}
 	if ('left' in style) {
-		node.setPosition(Yoga.EDGE_TOP, style['left'] as number || 0);
+		node.setPosition(Yoga.EDGE_LEFT, style['left'] as number || 0);
 	}
 	if ('right' in style) {
-		node.setPosition(Yoga.EDGE_TOP, style['right'] as number || 0);
+		node.setPosition(Yoga.EDGE_RIGHT, style['right'] as number || 0);
 	}
 
 };

ember-tui/src/loader-utils.ts

@@ -161,6 +161,8 @@ export async function transformCode(
 export function shouldTransformFile(filePath: string): boolean {
   return (
     !filePath.includes('node_modules') ||
+    filePath.includes('@embroider/macros') ||
+    filePath.includes('@embroider/router') ||
     filePath.includes('.embroider') ||
     filePath.includes('-embroider-') ||
     filePath.includes('/ember-source/') ||