141 lines
4.3 KiB
TypeScript
141 lines
4.3 KiB
TypeScript
import { theme } from './themes'
|
|
|
|
// Iframe cache - these never get recreated once loaded
|
|
// Use a global to survive hot reloads
|
|
const iframes: Map<string, { iframe: HTMLIFrameElement; port: number }> =
|
|
(window as any).__toolIframes ??= new Map()
|
|
|
|
// Track current state to avoid unnecessary DOM updates
|
|
// Also stored on window to survive hot reloads
|
|
let currentTool: string | null = (window as any).__currentTool ?? null
|
|
|
|
// Get the stable container (outside Hono-managed DOM)
|
|
const getContainer = () => document.getElementById('tool-iframes')
|
|
|
|
// Initialize the container styles
|
|
export function initToolIframes() {
|
|
const container = getContainer()
|
|
if (!container) return
|
|
|
|
// Restore iframe cache from DOM if module was hot-reloaded
|
|
if (iframes.size === 0) {
|
|
const existingIframes = container.querySelectorAll('iframe')
|
|
existingIframes.forEach(iframe => {
|
|
const match = iframe.src.match(/localhost:(\d+)/)
|
|
if (match && match[1]) {
|
|
const port = parseInt(match[1], 10)
|
|
const toolName = iframe.dataset.toolName
|
|
const appName = iframe.dataset.appName
|
|
if (toolName) {
|
|
const cacheKey = appName ? `${toolName}:${appName}` : toolName
|
|
iframes.set(cacheKey, { iframe, port })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
container.style.cssText = `
|
|
display: none;
|
|
position: fixed;
|
|
background: ${theme('colors-bg')};
|
|
`
|
|
}
|
|
|
|
// Update which iframe is visible based on selected tab and tool state
|
|
export function updateToolIframes(
|
|
selectedTab: string,
|
|
tools: Array<{ name: string; port?: number; state: string }>,
|
|
selectedApp: string | null
|
|
) {
|
|
const container = getContainer()
|
|
if (!container) return
|
|
|
|
// Find the selected tool
|
|
const selectedTool = tools.find(t => t.name === selectedTab)
|
|
const showIframe = selectedTool?.state === 'running' && selectedTool?.port
|
|
|
|
if (!showIframe) {
|
|
// Only update if state changed
|
|
if (currentTool !== null) {
|
|
container.style.display = 'none'
|
|
currentTool = null
|
|
;(window as any).__currentTool = null
|
|
}
|
|
return
|
|
}
|
|
|
|
const tool = selectedTool!
|
|
|
|
// Build cache key for tool + app combination
|
|
const cacheKey = selectedApp ? `${tool.name}:${selectedApp}` : tool.name
|
|
|
|
// Skip if nothing changed
|
|
if (currentTool === cacheKey) {
|
|
// Just update position in case of scroll/resize
|
|
const tabContent = document.querySelector('[data-tool-target]')
|
|
if (tabContent) {
|
|
const rect = tabContent.getBoundingClientRect()
|
|
container.style.top = `${rect.top}px`
|
|
container.style.left = `${rect.left}px`
|
|
container.style.width = `${rect.width}px`
|
|
container.style.height = `${rect.height}px`
|
|
}
|
|
return
|
|
}
|
|
|
|
// Position container over the tab content area
|
|
const tabContent = document.querySelector('[data-tool-target]')
|
|
if (!tabContent) {
|
|
container.style.display = 'none'
|
|
currentTool = null
|
|
return
|
|
}
|
|
|
|
const rect = tabContent.getBoundingClientRect()
|
|
container.style.cssText = `
|
|
display: block;
|
|
position: fixed;
|
|
top: ${rect.top}px;
|
|
left: ${rect.left}px;
|
|
width: ${rect.width}px;
|
|
height: ${rect.height}px;
|
|
background: ${theme('colors-bg')};
|
|
z-index: 100;
|
|
`
|
|
|
|
// Get or create the iframe for this tool + app combination
|
|
let cached = iframes.get(cacheKey)
|
|
|
|
if (!cached || cached.port !== tool.port) {
|
|
// Create new iframe (first time or port changed)
|
|
const iframe = document.createElement('iframe')
|
|
const url = selectedApp
|
|
? `http://localhost:${tool.port}?app=${encodeURIComponent(selectedApp)}`
|
|
: `http://localhost:${tool.port}`
|
|
iframe.src = url
|
|
iframe.dataset.toolName = tool.name // For hot reload recovery
|
|
iframe.dataset.appName = selectedApp ?? '' // For hot reload recovery
|
|
iframe.style.cssText = `
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
`
|
|
cached = { iframe, port: tool.port! }
|
|
iframes.set(cacheKey, cached)
|
|
// Add to container
|
|
container.appendChild(iframe)
|
|
}
|
|
|
|
// Show only the selected iframe, hide others
|
|
for (const [key, { iframe }] of iframes) {
|
|
const shouldShow = key === cacheKey
|
|
if (shouldShow && iframe.parentElement !== container) {
|
|
container.appendChild(iframe)
|
|
}
|
|
iframe.style.display = shouldShow ? 'block' : 'none'
|
|
}
|
|
|
|
currentTool = cacheKey
|
|
;(window as any).__currentTool = cacheKey
|
|
}
|