@shumoku/renderer 0.2.1 → 0.2.4

package/src/html/spotlight.ts

@@ -0,0 +1,135 @@
+/**
+ * Spotlight Module
+ * Handles element highlighting with overlay and glow effect
+ */
+
+let overlay: HTMLDivElement | null = null
+let highlightContainer: HTMLDivElement | null = null
+let currentHighlight: Element | null = null
+let currentMiniSvg: SVGSVGElement | null = null
+
+function getOverlay(): HTMLDivElement {
+  if (!overlay) {
+    overlay = document.createElement('div')
+    overlay.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      z-index: 9998;
+    `
+    document.body.appendChild(overlay)
+  }
+  return overlay
+}
+
+function getHighlightContainer(): HTMLDivElement {
+  if (!highlightContainer) {
+    highlightContainer = document.createElement('div')
+    highlightContainer.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 9999;
+    `
+    document.body.appendChild(highlightContainer)
+  }
+  return highlightContainer
+}
+
+export function updateHighlightPosition(): void {
+  if (!currentHighlight || !currentMiniSvg) return
+
+  if (!document.contains(currentHighlight)) {
+    highlightElement(null)
+    return
+  }
+
+  const svg = currentHighlight.closest('svg') as SVGSVGElement | null
+  if (!svg) return
+
+  const rect = svg.getBoundingClientRect()
+  const viewBox = svg.getAttribute('viewBox')
+  if (viewBox) {
+    currentMiniSvg.setAttribute('viewBox', viewBox)
+  }
+
+  currentMiniSvg.style.left = `${rect.left}px`
+  currentMiniSvg.style.top = `${rect.top}px`
+  currentMiniSvg.style.width = `${rect.width}px`
+  currentMiniSvg.style.height = `${rect.height}px`
+}
+
+export function highlightElement(el: Element | null): void {
+  if (el === currentHighlight) return
+
+  if (currentHighlight) {
+    currentHighlight.classList.remove('shumoku-highlight')
+  }
+
+  const container = getHighlightContainer()
+  container.innerHTML = ''
+  currentMiniSvg = null
+  currentHighlight = el
+
+  const ov = getOverlay()
+
+  if (el) {
+    el.classList.add('shumoku-highlight')
+
+    const svg = el.closest('svg') as SVGSVGElement | null
+    if (svg) {
+      const viewBox = svg.getAttribute('viewBox')
+      if (viewBox) {
+        const clone = el.cloneNode(true) as Element
+        clone.classList.remove('shumoku-highlight')
+
+        const miniSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+        miniSvg.setAttribute('viewBox', viewBox)
+        miniSvg.style.cssText = `
+          position: absolute;
+          overflow: visible;
+          filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px rgba(100, 150, 255, 0.8));
+        `
+
+        const defs = svg.querySelector('defs')
+        if (defs) {
+          miniSvg.appendChild(defs.cloneNode(true))
+        }
+
+        miniSvg.appendChild(clone)
+        container.appendChild(miniSvg)
+        currentMiniSvg = miniSvg
+
+        updateHighlightPosition()
+      }
+    }
+
+    ov.style.opacity = '1'
+  } else {
+    ov.style.opacity = '0'
+  }
+}
+
+export function getCurrentHighlight(): Element | null {
+  return currentHighlight
+}
+
+export function destroySpotlight(): void {
+  if (overlay) {
+    overlay.remove()
+    overlay = null
+  }
+  if (highlightContainer) {
+    highlightContainer.remove()
+    highlightContainer = null
+  }
+  currentHighlight = null
+  currentMiniSvg = null
+}

package/src/html/tooltip.ts

@@ -0,0 +1,141 @@
+/**
+ * Tooltip Module
+ * Handles tooltip creation, positioning, and display
+ */
+
+let tooltip: HTMLDivElement | null = null
+
+export function getTooltip(): HTMLDivElement {
+  if (!tooltip) {
+    tooltip = document.createElement('div')
+    tooltip.style.cssText = `
+      position: fixed;
+      z-index: 10000;
+      padding: 8px 12px;
+      background: rgba(30, 41, 59, 0.95);
+      color: #fff;
+      font-size: 13px;
+      line-height: 1.4;
+      border-radius: 6px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s;
+      font-family: system-ui, -apple-system, sans-serif;
+      max-width: 280px;
+      white-space: pre-line;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    `
+    document.body.appendChild(tooltip)
+  }
+  return tooltip
+}
+
+export function showTooltip(text: string, x: number, y: number): void {
+  const t = getTooltip()
+  t.textContent = text
+  t.style.opacity = '1'
+
+  requestAnimationFrame(() => {
+    const rect = t.getBoundingClientRect()
+    const pad = 12
+    let left = x + pad
+    let top = y - rect.height - pad
+
+    if (left + rect.width > window.innerWidth - pad) {
+      left = x - rect.width - pad
+    }
+    if (top < pad) {
+      top = y + pad
+    }
+
+    t.style.left = `${Math.max(pad, left)}px`
+    t.style.top = `${Math.max(pad, top)}px`
+  })
+}
+
+export function hideTooltip(): void {
+  if (tooltip) {
+    tooltip.style.opacity = '0'
+  }
+}
+
+export function destroyTooltip(): void {
+  if (tooltip) {
+    tooltip.remove()
+    tooltip = null
+  }
+}
+
+export interface TooltipInfo {
+  text: string
+  element: Element
+}
+
+export function getTooltipInfo(el: Element): TooltipInfo | null {
+  const port = el.closest('.port[data-port]')
+  if (port) {
+    const portId = port.getAttribute('data-port') || ''
+    const deviceId = port.getAttribute('data-port-device') || ''
+    return { text: `${deviceId}:${portId}`, element: port }
+  }
+
+  const linkGroup = el.closest('.link-group[data-link-id]')
+  if (linkGroup) {
+    let from = linkGroup.getAttribute('data-link-from') || ''
+    let to = linkGroup.getAttribute('data-link-to') || ''
+    const bw = linkGroup.getAttribute('data-link-bandwidth')
+    const vlan = linkGroup.getAttribute('data-link-vlan')
+    const jsonAttr = linkGroup.getAttribute('data-link-json')
+
+    // For export links, show device:port ↔ destination device:port
+    const fromIsExport = from.startsWith('__export_')
+    const toIsExport = to.startsWith('__export_')
+    if ((fromIsExport || toIsExport) && jsonAttr) {
+      try {
+        const linkData = JSON.parse(jsonAttr)
+        const meta = linkData.metadata
+        if (meta?._destDevice) {
+          // Get the actual device endpoint (non-export side)
+          const localDevice = fromIsExport ? to : from
+          // Get the destination device:port from metadata
+          const destDevice = meta._destPort
+            ? `${meta._destDevice}:${meta._destPort}`
+            : meta._destDevice
+          // Show: "local device ↔ remote device"
+          let text = `${localDevice} ↔ ${destDevice}`
+          if (bw) text += `\n${bw}`
+          if (vlan) text += `\nVLAN: ${vlan}`
+          return { text, element: linkGroup }
+        }
+      } catch {
+        // Fall through to default display
+      }
+    }
+
+    let text = `${from} ↔ ${to}`
+    if (bw) text += `\n${bw}`
+    if (vlan) text += `\nVLAN: ${vlan}`
+    return { text, element: linkGroup }
+  }
+
+  const node = el.closest('.node[data-id]')
+  if (node) {
+    const json = node.getAttribute('data-device-json')
+    if (json) {
+      try {
+        const data = JSON.parse(json)
+        const lines: string[] = []
+        if (data.label) lines.push(Array.isArray(data.label) ? data.label.join(' ') : data.label)
+        if (data.type) lines.push(`Type: ${data.type}`)
+        if (data.vendor) lines.push(`Vendor: ${data.vendor}`)
+        if (data.model) lines.push(`Model: ${data.model}`)
+        return { text: lines.join('\n'), element: node }
+      } catch {
+        // fallthrough
+      }
+    }
+    return { text: node.getAttribute('data-id') || '', element: node }
+  }
+
+  return null
+}

package/src/html/viewbox.ts

@@ -0,0 +1,28 @@
+/**
+ * ViewBox Utilities
+ * Handles SVG viewBox parsing and manipulation
+ */
+
+export interface ViewBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function parseViewBox(svg: SVGSVGElement): ViewBox | null {
+  const vb = svg.getAttribute('viewBox')
+  if (!vb) return null
+  const parts = vb.split(/\s+|,/).map(Number)
+  if (parts.length !== 4 || parts.some(Number.isNaN)) return null
+  return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] }
+}
+
+export function setViewBox(svg: SVGSVGElement, vb: ViewBox, onUpdate?: () => void): void {
+  svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.width} ${vb.height}`)
+  onUpdate?.()
+}
+
+export function cloneViewBox(vb: ViewBox): ViewBox {
+  return { x: vb.x, y: vb.y, width: vb.width, height: vb.height }
+}

package/src/index.ts

@@ -1,22 +1,25 @@
-/**
- * @shumoku/renderer - SVG and HTML renderers for network diagrams
- */
-
-import * as html from './html/index.js'
-// Namespace exports
-import * as svg from './svg.js'
-
-export { svg, html }
-
-// Types
-export type {
-  DataAttributeOptions,
-  DeviceInfo,
-  EndpointInfo,
-  HTMLRendererOptions,
-  InteractiveInstance,
-  InteractiveOptions,
-  LinkInfo,
-  PortInfo,
-  RenderMode,
-} from './types.js'
+/**
+ * @shumoku/renderer - SVG and HTML renderers for network diagrams
+ */
+
+import * as html from './html/index.js'
+// Namespace exports
+import * as svg from './svg.js'
+
+export { svg, html }
+
+// Types
+export type {
+  DataAttributeOptions,
+  DeviceInfo,
+  EndpointInfo,
+  HTMLRendererOptions,
+  InteractiveInstance,
+  InteractiveOptions,
+  LinkInfo,
+  PortInfo,
+  RenderMode,
+} from './types.js'
+
+// Re-export SheetData for hierarchical rendering
+export type { SheetData } from './html/index.js'