Add getRect to element interface

Author: thetarnav

packages/debugger/package.json

@@ -52,7 +52,6 @@
         "@nothing-but/utils": "~0.17.0",
         "@solid-devtools/shared": "workspace:^",
         "@solid-primitives/bounds": "^0.1.0",
-        "@solid-primitives/cursor": "^0.1.0",
         "@solid-primitives/event-listener": "^2.4.0",
         "@solid-primitives/keyboard": "^1.3.0",
         "@solid-primitives/platform": "^0.2.0",

packages/debugger/src/locator/element-overlay.tsx

@@ -1,14 +1,70 @@
 import * as s from 'solid-js'
 import * as sweb from 'solid-js/web'
-import {createElementBounds} from '@solid-primitives/bounds'
-import {createElementCursor} from '@solid-primitives/cursor'
 import {createRootPool} from '@solid-primitives/rootless'
 import type {LocatorComponent} from './index.ts'
+import {UNKNOWN, type ElementInterface, type Rect} from '../types.ts'
 
-export function createElementsOverlay(selected: s.Accessor<LocatorComponent[]>) {
-    const useElementOverlay = createRootPool((component: s.Accessor<LocatorComponent>, active) => (
-        <ElementOverlay component={active() ? component() : null} />
-    ))
+export function createElementsOverlay<TEl extends object>(
+    selected: s.Accessor<LocatorComponent<TEl>[]>,
+    eli:      ElementInterface<TEl>,
+) {
+
+    const useElementOverlay = createRootPool((componentRaw: s.Accessor<LocatorComponent<TEl>>, active) => {
+
+        const component = () => active() ? componentRaw() : null
+
+        const name = () => component()?.name
+    
+        const rect = s.createMemo((prev: Rect) => {
+            let comp = component()
+            if (comp === null) return prev
+            
+            let rect = eli.getRect(comp.element)
+            if (rect === null) return prev
+
+            return rect
+        }, {x: 0, y: 0, w: 0, h: 0})
+        
+        const transform  = () => `translate(${Math.round(rect().x)}px, ${Math.round(rect().y)}px)`
+        const placeOnTop = () => rect().y > window.innerHeight / 2
+
+        const tag = () => {
+            let comp = component()
+            if (comp === null) return UNKNOWN
+            
+            return eli.getName(comp.element) ?? UNKNOWN
+        }
+    
+        return (
+            <>
+                <style>{styles}</style>
+                <div
+                    class="element-overlay"
+                    style={{
+                        transform: transform(),
+                        width: rect().w + 'px',
+                        height: rect().h + 'px',
+                    }}
+                >
+                    <div class="border" />
+                    <s.Show when={name()}>
+                        <div class={`name-container ${placeOnTop() ? 'top' : 'bottom'}`}>
+                            <div class="name-animated-container">
+                                <div class="name-background"></div>
+                                <div class="name-text">
+                                    {name()}: <span>{tag()}</span>
+                                </div>
+                                <div class="name-invisible">
+                                    {name()}: {tag()}
+                                </div>
+                            </div>
+                        </div>
+                    </s.Show>
+                </div>
+            </>
+        )
+
+    })
 
     // wait a second to let the framework mess with the document before attaching the overlay
     const owner = s.getOwner()!
@@ -21,51 +77,6 @@ export function createElementsOverlay(selected: s.Accessor<LocatorComponent[]>)
     }, 1000)
 }
 
-const ElementOverlay: s.Component<{component: LocatorComponent | null}> = props => {
-    const element = () => props.component?.element
-    // set pointer cursor to selected component
-    createElementCursor(element, 'pointer')
-    const tag = () => element()?.localName
-    const name = () => props.component?.name
-
-    const bounds = createElementBounds(element)
-    const left = s.createMemo<number>(prev => (bounds.left === null ? prev : bounds.left), 0)
-    const top = s.createMemo<number>(prev => (bounds.top === null ? prev : bounds.top), 0)
-    const width = s.createMemo<number>(prev => (bounds.width === null ? prev : bounds.width), 0)
-    const height = s.createMemo<number>(prev => (bounds.height === null ? prev : bounds.height), 0)
-    const transform = s.createMemo(() => `translate(${Math.round(left())}px, ${Math.round(top())}px)`)
-    const placeOnTop = s.createMemo(() => top() > window.innerHeight / 2)
-
-    return (
-        <>
-            <style>{styles}</style>
-            <div
-                class="element-overlay"
-                style={{
-                    transform: transform(),
-                    width: width() + 'px',
-                    height: height() + 'px',
-                }}
-            >
-                <div class="border" />
-                <s.Show when={name()}>
-                    <div class={`name-container ${placeOnTop() ? 'top' : 'bottom'}`}>
-                        <div class="name-animated-container">
-                            <div class="name-background"></div>
-                            <div class="name-text">
-                                {name()}: <span>{tag()}</span>
-                            </div>
-                            <div class="name-invisible">
-                                {name()}: {tag()}
-                            </div>
-                        </div>
-                    </div>
-                </s.Show>
-            </div>
-        </>
-    )
-}
-
 const styles = /*css*/ `
 .element-overlay {
   position: fixed;

packages/debugger/src/locator/index.ts

@@ -124,7 +124,7 @@ export function createLocator<TEl extends object>(props: {
         setHighlightedComponents(locator_components)
     })))
 
-    createElementsOverlay(highlightedComponents)
+    createElementsOverlay(highlightedComponents, props.component_registry.eli)
 
     // notify of component hovered by using the debugger
     s.createEffect((prev: NodeID | undefined) => {

packages/debugger/src/main/types.ts

@@ -136,16 +136,24 @@ export type SourceLocation = {
     column: number
 }
 
+export type Rect = {
+    x: number
+    y: number
+    w: number
+    h: number
+}
+
 /**
  * When using a custom solid renderer, you should provide a custom element interface.
  * By default the debugger assumes that rendered elements are DOM elements.
  */
 export type ElementInterface<T extends object> = {
     isElement:    (obj: object | T) => obj is T,
-    getName:      (el: T) => string,
+    getName:      (el: T) => string | null,
     getChildren:  (el: T) => Iterable<T>,
     getElementAt: (e: MouseEvent) => T | null,
     getLocation:  (el: T) => SourceLocation | null,
+    getRect:      (el: T) => Rect | null,
 }
 
 /**
@@ -161,6 +169,10 @@ export const dom_element_interface: ElementInterface<Element> = {
         if (attr == null) return null
         return locator.parseLocationString(attr) ?? null
     },
+    getRect:      el => {
+        let rect = el.getBoundingClientRect()
+        return {x: rect.x, y: rect.y, w: rect.width, h: rect.height}
+    },
 }
 
 //