add synchronized dual-display workbench

2026-08-21 21:50:40 +02:00
parent f085891630
commit 178892fc66
10 changed files with 567 additions and 22 deletions
@@ -0,0 +1,166 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  parseSecondaryDisplayGeometry,
+  secondaryDisplayFeatures,
+  type SecondaryDisplayGeometry,
+} from './secondaryDisplayGeometry'
+
+const SECONDARY_DISPLAY_NAME = 'geointel-analysis-console'
+const SECONDARY_DISPLAY_GEOMETRY_KEY = 'geointel.secondary-display.geometry.v1'
+
+function defaultGeometry(): SecondaryDisplayGeometry {
+  return {
+    left: window.screenX + Math.max(80, window.outerWidth - 32),
+    top: window.screenY,
+    width: 620,
+    height: Math.max(640, Math.min(1_080, window.outerHeight)),
+  }
+}
+
+function copyDocumentStyles(target: Document): void {
+  document.head.querySelectorAll<HTMLLinkElement | HTMLStyleElement>('link[rel="stylesheet"], style').forEach((node) => {
+    const clone = node.cloneNode(true) as HTMLLinkElement | HTMLStyleElement
+    if (clone instanceof HTMLLinkElement) clone.href = node instanceof HTMLLinkElement ? node.href : ''
+    target.head.append(clone)
+  })
+}
+
+function initialiseSecondaryDocument(target: Window, onClose: () => void): HTMLElement {
+  const targetDocument = target.document
+  targetDocument.title = 'GeoIntel · Analyseconsole'
+  targetDocument.documentElement.lang = document.documentElement.lang || 'nl'
+  targetDocument.head.replaceChildren()
+
+  const viewport = targetDocument.createElement('meta')
+  viewport.name = 'viewport'
+  viewport.content = 'width=device-width, initial-scale=1'
+  targetDocument.head.append(viewport)
+  copyDocumentStyles(targetDocument)
+
+  const shell = targetDocument.createElement('div')
+  shell.className = 'secondary-display-shell'
+
+  const header = targetDocument.createElement('header')
+  header.className = 'secondary-display-header'
+  header.innerHTML = `
+    <div class="secondary-display-brand">
+      <img src="/geointel-icon.svg" alt="" aria-hidden="true" />
+      <span><small>LIVE GEKOPPELD</small><strong>Analyseconsole</strong></span>
+    </div>
+    <div class="secondary-display-status"><i aria-hidden="true"></i><span>Gesynchroniseerd met de kaart</span></div>
+  `
+  const closeButton = targetDocument.createElement('button')
+  closeButton.type = 'button'
+  closeButton.className = 'secondary-display-close'
+  closeButton.textContent = 'Sluit console'
+  closeButton.addEventListener('click', onClose)
+  header.append(closeButton)
+
+  const content = targetDocument.createElement('main')
+  content.className = 'secondary-display-content'
+  content.id = 'secondary-display-content'
+  content.setAttribute('aria-label', 'Live analyse en resultaten')
+
+  shell.append(header, content)
+  targetDocument.body.replaceChildren(shell)
+  targetDocument.body.className = 'secondary-display-body'
+  return content
+}
+
+export function useSecondaryDisplay() {
+  const popupRef = useRef<Window | null>(null)
+  const monitorTimerRef = useRef<number | null>(null)
+  const [container, setContainer] = useState<HTMLElement | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const stopMonitoring = useCallback(() => {
+    if (monitorTimerRef.current !== null) {
+      window.clearInterval(monitorTimerRef.current)
+      monitorTimerRef.current = null
+    }
+  }, [])
+
+  const rememberGeometry = useCallback((popup: Window) => {
+    const geometry: SecondaryDisplayGeometry = {
+      left: popup.screenX,
+      top: popup.screenY,
+      width: popup.outerWidth,
+      height: popup.outerHeight,
+    }
+    try {
+      window.localStorage.setItem(SECONDARY_DISPLAY_GEOMETRY_KEY, JSON.stringify(geometry))
+    } catch {
+      // Window positioning is a convenience; storage restrictions must never
+      // break the live analysis console.
+    }
+  }, [])
+
+  const close = useCallback(() => {
+    const popup = popupRef.current
+    if (popup && !popup.closed) {
+      rememberGeometry(popup)
+      popup.close()
+    }
+    popupRef.current = null
+    setContainer(null)
+    stopMonitoring()
+  }, [rememberGeometry, stopMonitoring])
+
+  const open = useCallback(() => {
+    const existing = popupRef.current
+    if (existing && !existing.closed) {
+      existing.focus()
+      return
+    }
+
+    let saved: SecondaryDisplayGeometry | null = null
+    try {
+      saved = parseSecondaryDisplayGeometry(window.localStorage.getItem(SECONDARY_DISPLAY_GEOMETRY_KEY))
+    } catch {
+      saved = null
+    }
+    const popup = window.open('', SECONDARY_DISPLAY_NAME, secondaryDisplayFeatures(saved ?? defaultGeometry()))
+    if (!popup) {
+      setError('De browser blokkeerde het tweede venster. Sta pop-ups voor GeoIntel toe en probeer opnieuw.')
+      return
+    }
+
+    setError(null)
+    popupRef.current = popup
+    const content = initialiseSecondaryDocument(popup, close)
+    setContainer(content)
+    popup.focus()
+
+    stopMonitoring()
+    monitorTimerRef.current = window.setInterval(() => {
+      const current = popupRef.current
+      if (!current || current.closed) {
+        popupRef.current = null
+        setContainer(null)
+        stopMonitoring()
+        return
+      }
+      rememberGeometry(current)
+    }, 1_000)
+  }, [close, rememberGeometry, stopMonitoring])
+
+  useEffect(() => close, [close])
+
+  return {
+    container,
+    error,
+    isOpen: container !== null,
+    open,
+    close,
+  }
+}
+
+interface SecondaryDisplayTargetProps {
+  container: HTMLElement | null
+  children: ReactNode
+}
+
+export function SecondaryDisplayTarget({ container, children }: SecondaryDisplayTargetProps) {
+  return container ? createPortal(children, container) : children
+}