Function SourceInspector

packages/devtools/src/components/source-inspector.tsx:10–192

()

import { isHotkeyCombinationPressed } from '../utils/hotkey'

export const SourceInspector = () => {
  const { settings } = createDevtoolsSettings()
  const highlightStateInit = () => ({
    element: null as HTMLElement | null,
    bounding: { width: 0, height: 0, left: 0, top: 0 },
    dataSource: '',
  })

  const [highlightState, setHighlightState] = createStore(highlightStateInit())
  const resetHighlight = () => {
    setHighlightState(highlightStateInit())
  }

  const [nameTagRef, setNameTagRef] = createSignal<HTMLDivElement | null>(null)
  const nameTagSize = createElementSize(() => nameTagRef())

  const [mousePosition, setMousePosition] = createStore({ x: 0, y: 0 })
  createEventListener(document, 'mousemove', (e) => {
    setMousePosition({ x: e.clientX, y: e.clientY })
  })

  const downList = getKeyDownList()

  const [disabledAfterClick, setDisabledAfterClick] = createSignal(false)

  const isHighlightingKeysHeld = createMemo(() => {
    return isHotkeyCombinationPressed(downList(), settings().inspectHotkey)
  })

  createEffect(() => {
    if (!isHighlightingKeysHeld()) {
      setDisabledAfterClick(false)
    }
  })

  const isActive = createMemo(
    () => isHighlightingKeysHeld() && !disabledAfterClick(),
  )

  createEffect(() => {
    if (isActive()) {
      document.body.style.cursor = 'pointer'
    } else {
      document.body.style.cursor = ''
    }
  })

  createEffect(() => {
    if (!isActive()) {
      resetHighlight()
      return
    }

    const target = document.elementFromPoint(mousePosition.x, mousePosition.y)

    if (!(target instanceof HTMLElement)) {
      resetHighlight()
      return