chore: adjust types of bounding Rect

packages/inspector/.gitignore

@@ -22,3 +22,5 @@ build
 *.zip
 
 coverage/
+
+storybook-static/

packages/inspector/package.json

@@ -27,7 +27,8 @@
  "build:storybook": "storybook build",
  "build:esm": "tsc -p tsconfig.esm.json",
  "build:cjs": "tsc -p tsconfig.cjs.json",
- "build": "npm-run-all clean --parallel sync:readme build:esm build:cjs"
+ "build:test": "tsc -p tsconfig.test.json",
+ "build": "npm-run-all clean --parallel sync:readme build:esm build:cjs build:test"
  },
  "repository": {
  "type": "git",

packages/inspector/src/Inspector/Overlay/Overlay.stories.tsx

@@ -26,7 +26,7 @@ import {
 } from '../utils'
 import {
  getElementDimensions,
- getBoundingBox,
+ getBoundingRect,
 } from './utils'
 import {
  type InspectorOverlay,
@@ -61,52 +61,52 @@ export const CornerItems = () => {
  const positions = [
  // Top left corner
  {
- top: 0,
- left: 0,
+ y: 0,
+ x: 0,
  },
  // Top right corner
  {
- top: 0,
- left: screenWidth - itemSize,
+ y: 0,
+ x: screenWidth - itemSize,
  },
  // Bottom left corner
  {
- top: screenHeight - itemSize,
- left: 0,
+ y: screenHeight - itemSize,
+ x: 0,
  },
  // Bottom right corner
  {
- top: screenHeight - itemSize,
- left: screenWidth - itemSize,
+ y: screenHeight - itemSize,
+ x: screenWidth - itemSize,
  },
  // Center
  {
- top: (screenHeight - itemSize) / 2,
- left: (screenWidth - itemSize) / 2,
+ y: (screenHeight - itemSize) / 2,
+ x: (screenWidth - itemSize) / 2,
  },
 
  // Top-Center but outside the space
  {
- top: -2 * itemSize,
- left: (screenWidth - itemSize) / 2,
+ y: -2 * itemSize,
+ x: (screenWidth - itemSize) / 2,
  },
 
  // Bottom-Center but outside the space
  {
- top: screenHeight + 2 * itemSize,
- left: (screenWidth - itemSize) / 2,
+ y: screenHeight + 2 * itemSize,
+ x: (screenWidth - itemSize) / 2,
  },
 
  // Left-Center but outside the space
  {
- top: (screenHeight - itemSize) / 2,
- left: -2 * itemSize,
+ y: (screenHeight - itemSize) / 2,
+ x: -2 * itemSize,
  },
 
  // Right-Center but outside the space
  {
- top: (screenHeight - itemSize) / 2,
- left: screenWidth + 2 * itemSize,
+ y: (screenHeight - itemSize) / 2,
+ x: screenWidth + 2 * itemSize,
  },
  ]
 
@@ -206,7 +206,7 @@ export const MoveableDragItem: StoryFn<{ itemSize: 'normal' | 'full' | 'large' }
  if (!(element && overlayRect && overlayTip)) return
 
  const boxSizing = getElementDimensions(element)
- const boundingRect = getBoundingBox(element)
+ const boundingRect = getBoundingRect(element)
 
  overlayRect.updateBound({
  boundingRect,
@@ -314,7 +314,7 @@ export const OverlayRectAndTipItems = () => {
  if (!(element && overlayRect && overlayTip)) return
 
  const boxSizing = getElementDimensions(element)
- const boundingRect = getBoundingBox(element)
+ const boundingRect = getBoundingRect(element)
 
  overlayRect.updateBound({
  boundingRect,
@@ -390,7 +390,7 @@ export const OverlayWithEntryElement = () => {
  title: 'div in <Card>',
  info: '/absolute/path/of/packages/inspector/src/Inspector/Overlays/Overlay.stories.tsx',
  getBoxSizing: getElementDimensions,
- getBoundingRect: getBoundingBox,
+ getBoundingRect,
  })
  }, [])
 

packages/inspector/src/Inspector/Overlay/Overlay.tsx

@@ -4,7 +4,7 @@ import {
  customElement,
  registerElement,
  getElementDimensions,
- getBoundingBox,
+ getBoundingRect,
 } from './utils'
 import {
  InspectorOverlayRect,
@@ -13,7 +13,7 @@ import {
  InspectorOverlayTip,
 } from './OverlayTip'
 import type {
- Box,
+ Rect,
  BoxSizing,
 } from './types'
 
@@ -33,7 +33,7 @@ export class InspectorOverlay extends LitElement {
  title?: string;
  info?: string;
  getBoxSizing: (element: Element) => BoxSizing;
- getBoundingRect: (element: Element) => Box;
+ getBoundingRect: (element: Element) => Rect;
  }) {
  if (!element) return
 
@@ -78,7 +78,7 @@ export class InspectorOverlay extends LitElement {
  overlayRect: InspectorOverlayRect;
  overlayTip: InspectorOverlayTip;
  boxSizing: BoxSizing;
- boundingRect: Box;
+ boundingRect: Rect;
  }) {
  this.style.setProperty('--inspector-overlay-display', 'block')
 
@@ -142,7 +142,7 @@ export class Overlay {
  title,
  info,
  getBoxSizing = getElementDimensions,
- getBoundingRect = getBoundingBox,
+ getBoundingRect: _getBoundingRect = getBoundingRect,
  }: {
  element?: Element;
  title?: string;
@@ -154,14 +154,14 @@ export class Overlay {
  /**
  * default as `element.getBoundingClientRect()`
  */
- getBoundingRect?: (element: Element) => Box;
+ getBoundingRect?: (element: Element) => Rect;
  }) {
  await this.overlay.inspect({
  element,
  title,
  info,
  getBoxSizing,
- getBoundingRect,
+ getBoundingRect: _getBoundingRect,
  })
  }
 

packages/inspector/src/Inspector/Overlay/OverlayRect.tsx

@@ -43,8 +43,8 @@ export class InspectorOverlayRect extends LitElement {
 
  this.styles = {
  hostStyle: {
- top: (this.boundingRect?.top ?? 0) - Math.max(this.boxSizing?.marginTop ?? 0, 0),
- left: (this.boundingRect?.left ?? 0) - Math.max(this.boxSizing?.marginLeft ?? 0, 0),
+ top: (this.boundingRect?.y ?? 0) - Math.max(this.boxSizing?.marginTop ?? 0, 0),
+ left: (this.boundingRect?.x ?? 0) - Math.max(this.boxSizing?.marginLeft ?? 0, 0),
  },
 
  marginStyle: styleMap(this.getBoxStyle(this.boxSizing, 'margin') as StyleInfo),
@@ -142,6 +142,7 @@ export class InspectorOverlayRect extends LitElement {
  cursor: default;
  top: var(--inspector-overlay-rect-top, 0);
  left: var(--inspector-overlay-rect-left, 0);
+ box-sizing: border-box;
  }
 
  .inspector-overlay-margin {

packages/inspector/src/Inspector/Overlay/OverlayTip.tsx

@@ -12,15 +12,13 @@ import {
  offset,
  flip,
  shift,
- type Rect as FloatingRect,
  type Dimensions,
 } from '@floating-ui/core'
 import {
  customElement,
- getBoundingBox,
+ getBoundingRect,
 } from './utils'
 import type {
- Box,
  Rect,
  BoxSizing,
 } from './types'
@@ -34,14 +32,17 @@ export class InspectorOverlayTip extends LitElement {
  @property()
  public info = ''
 
+ /** target's bounding Rect */
  @property({ attribute: false })
- public boundingRect?: FloatingRect
+ public boundingRect?: Rect
 
+ /** target's margin/border/padding sizing */
  @property({ attribute: false })
  public boxSizing?: Pick<BoxSizing, `margin${'Top' | 'Left' | 'Right' | 'Bottom'}`>
 
+ /** viewport space box relative of client */
  @property({ attribute: false })
- public spaceBox?: FloatingRect
+ public spaceBox?: Rect
 
  @state()
  protected position: Pick<CSSProperties, 'top' | 'left'> = {}
@@ -58,27 +59,18 @@ export class InspectorOverlayTip extends LitElement {
  }: {
  title: string;
  info: string;
+ /** target element bounding Rect */
  boundingRect: Rect;
+ /** target element margin/border/padding */
  boxSizing: BoxSizing;
- spaceBox?: Box;
+ /** viewport space box relative of client */
+ spaceBox?: Rect;
  }) {
  this.title = title
  this.info = info
- this.boundingRect = {
- x: boundingRect.left,
- y: boundingRect.top,
- width: boundingRect.width,
- height: boundingRect.height,
- }
+ this.boundingRect = boundingRect
  this.boxSizing = boxSizing
- this.spaceBox = spaceBox
- ? {
- x: spaceBox.left,
- y: spaceBox.top,
- width: spaceBox.width,
- height: spaceBox.height,
- }
- : InspectorOverlayTip.getViewSpaceBox()
+ this.spaceBox = spaceBox ?? InspectorOverlayTip.getViewSpaceBox()
  this.infoStyle = styleMap({
  display: this.info ? 'block' : 'none',
  })
@@ -87,7 +79,7 @@ export class InspectorOverlayTip extends LitElement {
  /**
  * element outer box with margin
  */
- protected get outerBox(): FloatingRect {
+ protected get outerBox(): Rect {
  const { boundingRect, boxSizing } = this
  if (!boundingRect || !boxSizing) {
  return {
@@ -119,12 +111,12 @@ export class InspectorOverlayTip extends LitElement {
  return Math.round(this.boundingRect?.height ?? 0)
  }
 
- static getViewSpaceBox(boundaryWindow?: Window): FloatingRect {
+ static getViewSpaceBox(boundaryWindow?: Window): Rect {
  const windowAgent = boundaryWindow ?? window.__REACT_DEVTOOLS_TARGET_WINDOW__ ?? window
- const documentBox = getBoundingBox(windowAgent.document.documentElement)
+ const documentBox = getBoundingRect(windowAgent.document.documentElement)
  return {
- x: documentBox.left + windowAgent.scrollX,
- y: documentBox.top + windowAgent.scrollY,
+ x: documentBox.x + windowAgent.scrollX,
+ y: documentBox.y + windowAgent.scrollY,
  width: windowAgent.innerWidth,
  height: windowAgent.innerHeight,
  }
@@ -203,6 +195,7 @@ export class InspectorOverlayTip extends LitElement {
  line-height: 1;
  white-space: nowrap;
  max-width: 97vw;
+ box-sizing: border-box;
  }
 
  .inspector-tip-name {
@@ -250,9 +243,9 @@ export class InspectorOverlayTip extends LitElement {
 
 export const restraintTipPosition = async ({ elementBox, spaceBox, tipSize }: {
  /** the `reference` of computePosition */
- elementBox: FloatingRect;
+ elementBox: Rect;
  /** the `ClippingRect` of computePosition */
- spaceBox: FloatingRect;
+ spaceBox: Rect;
  /** the `floating` of computePosition */
  tipSize: Dimensions;
 }): Promise<{ top: number; left: number }> => {

packages/inspector/src/Inspector/Overlay/index.ts

@@ -1,7 +1,8 @@
 export * from './types'
 export {
- getBoundingBox,
+ getBoundingRect,
  getElementDimensions,
+ getBoundingBox,
 } from './utils'
 export * from './OverlayRect'
 export * from './OverlayTip'