dishui 0.0.83 → 0.0.89

package/dist/components/pro/Flow/nodes/MediaContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n  import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document).\n *  A base stylesheet is injected so the fragment inherits the node's themed\n *  text color / font size and a transparent background, keeping it readable on\n *  any theme without the author having to set colors. */\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n  const srcDoc = useMemo(() => {\n    const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n      :root { color-scheme: light dark; }\n      html, body { margin: 0; background: transparent; }\n      body {\n        color: ${color ?? '#111827'};\n        font-size: ${fontSize ?? 13}px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n        line-height: 1.5;\n        padding: 0;\n      }\n      a { color: inherit; }\n    </style></head><body>${content}</body></html>`;\n    return base;\n  }, [content, color, fontSize]);\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-forms\"\n      srcDoc={srcDoc}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      // The iframe is an isolated document with no access to the parent's CSS\n      // variables, so pass a concrete resolved color instead of a var().\n      return (\n        <HtmlView\n          content={content}\n          interactive={interactive}\n          color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n          fontSize={node.data.fontSize}\n        />\n      );\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    case 'data':\n      return (\n        <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n          <DataNodeView\n            config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }}\n            surfaceColor={node.data.fill === 'transparent' ? undefined : resolveThemeColorCss(node.data.fill, '')}\n            textColor={textColor}\n            primaryColor={resolveThemeColorCss(node.data.color, '')}\n          />\n        </div>\n      );\n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"MediaContent.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaContent.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport katex from 'katex';\nimport mermaid from 'mermaid';\nimport Markdown from '../../../Markdown';\nimport type { FlowNode, FlowAIConfig } from '../types';\nimport { streamAIChat, type AIChatMessage } from './aiClient';\nimport { resolveThemeColorCss, resolveThemeColor } from '../utils/themeColor';\nimport 'katex/dist/katex.min.css';\nimport { Model3DView } from './Model3DView';\n\n// Data-node view pulls in DataTable + Chart; lazy-load so it only enters the\n// bundle when a data node actually renders.\nconst DataNodeView = React.lazy(() =>\n  import('./DataNodeView').then((m) => ({ default: m.DataNodeView })),\n);\n\nlet mermaidReady = false;\nfunction ensureMermaid() {\n  if (mermaidReady) return;\n  mermaid.initialize({ startOnLoad: false, theme: 'default', securityLevel: 'loose', fontFamily: 'inherit' });\n  mermaidReady = true;\n}\n\n/** Renders a Mermaid diagram from source into an inline SVG. */\nfunction MermaidView({ content, color }: { content: string; color?: string }) {\n  const [svg, setSvg] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const idRef = useRef(`flow-mermaid-${Math.random().toString(36).slice(2)}`);\n\n  useEffect(() => {\n    let cancelled = false;\n    ensureMermaid();\n    const src = content.trim();\n    if (!src) { setSvg(''); setError(null); return; }\n    mermaid\n      .render(idRef.current, src)\n      .then(({ svg }) => { if (!cancelled) { setSvg(svg); setError(null); } })\n      .catch((e) => { if (!cancelled) setError(e?.message ?? 'Mermaid error'); });\n    return () => { cancelled = true; };\n  }, [content]);\n\n  if (error) return <div className=\"flow-media-error\">{error}</div>;\n  return <div className=\"flow-media-mermaid\" style={{ color }} dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\n/** Renders a LaTeX formula (display mode) via KaTeX. */\nfunction MathView({ content, color, fontSize }: { content: string; color?: string; fontSize?: number }) {\n  const html = useMemo(() => {\n    try {\n      return katex.renderToString(content.trim() || '\\\\;', { displayMode: true, throwOnError: false });\n    } catch (e: any) {\n      return `<span class=\"flow-media-error\">${e?.message ?? 'KaTeX error'}</span>`;\n    }\n  }, [content]);\n  return <div className=\"flow-media-math\" style={{ color, fontSize }} dangerouslySetInnerHTML={{ __html: html }} />;\n}\n\n/** Renders raw HTML in a sandboxed iframe (isolated from the host document).\n *  A base stylesheet is injected so the fragment inherits the node's themed\n *  text color / font size and a transparent background, keeping it readable on\n *  any theme without the author having to set colors.\n *  Content is always untrusted: scripts can drive the preview, but the opaque\n *  sandbox origin prevents host DOM/storage access. Do not add allow-same-origin\n *  alongside allow-scripts; interactive only controls pointer input. */\nfunction HtmlView({ content, interactive, color, fontSize }: { content: string; interactive: boolean; color?: string; fontSize?: number }) {\n  const srcDoc = useMemo(() => {\n    const base = `<!doctype html><html><head><meta charset=\"utf-8\"><style>\n      :root { color-scheme: light dark; }\n      html, body { margin: 0; background: transparent; }\n      body {\n        color: ${color ?? '#111827'};\n        font-size: ${fontSize ?? 13}px;\n        font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n        line-height: 1.5;\n        padding: 0;\n      }\n      a { color: inherit; }\n    </style></head><body>${content}</body></html>`;\n    return base;\n  }, [content, color, fontSize]);\n  return (\n    <iframe\n      title=\"html-media\"\n      className=\"flow-media-iframe\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none' }}\n      sandbox=\"allow-scripts\"\n      srcDoc={srcDoc}\n    />\n  );\n}\n\nfunction ImageView({ content }: { content: string }) {\n  const src = content.trim();\n  if (!src) {\n    return <div className=\"flow-media-image-empty\">输入图片链接，或直接粘贴图片</div>;\n  }\n  return (\n    <img\n      className=\"flow-media-image\"\n      src={src}\n      alt=\"\"\n      draggable={false}\n      referrerPolicy=\"no-referrer\"\n    />\n  );\n}\n\n/** Interactive AI chat backed by an OpenAI/Anthropic-compatible endpoint. */\nfunction AIView({ node, config, interactive, color }: { node: FlowNode; config?: FlowAIConfig; interactive: boolean; color?: string }) {\n  const [messages, setMessages] = useState<AIChatMessage[]>([]);\n  const [input, setInput] = useState('');\n  const [streaming, setStreaming] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n  }, [messages, streaming]);\n\n  useEffect(() => () => abortRef.current?.abort(), []);\n\n  const canSend = !!config?.gateway && !!config?.model && !streaming;\n\n  const send = async () => {\n    const text = input.trim();\n    if (!text || !config?.gateway) return;\n    setError(null);\n    // Only keep non-empty assistant messages in history; an aborted/errored\n    // request can leave an empty assistant placeholder behind, which the API\n    // then rejects (\"assistant message must not be empty\").\n    const history = messages.filter(\n      (m) => !(m.role === 'assistant' && m.content.trim() === ''),\n    );\n    const next: AIChatMessage[] = [...history, { role: 'user', content: text }];\n    setMessages(next);\n    setInput('');\n    setStreaming(true);\n    const ac = new AbortController();\n    abortRef.current = ac;\n    let acc = '';\n    setMessages((m) => [...m, { role: 'assistant', content: '' }]);\n    try {\n      for await (const delta of streamAIChat(config, next, ac.signal)) {\n        acc += delta;\n        setMessages((m) => {\n          const copy = m.slice();\n          copy[copy.length - 1] = { role: 'assistant', content: acc };\n          return copy;\n        });\n      }\n    } catch (e: any) {\n      if (e?.name !== 'AbortError') setError(e?.message ?? 'Request failed');\n    } finally {\n      // Drop the trailing assistant placeholder if nothing streamed in.\n      setMessages((m) => {\n        const last = m[m.length - 1];\n        if (last && last.role === 'assistant' && last.content.trim() === '') {\n          return m.slice(0, -1);\n        }\n        return m;\n      });\n      setStreaming(false);\n      abortRef.current = null;\n    }\n  };\n\n  return (\n    <div className=\"flow-media-ai\" style={{ color }}>\n      <div className=\"flow-media-ai-header\">\n        {config?.model ? `AI · ${config.model}` : (node.data.label || 'AI')}\n      </div>\n      <div className=\"flow-media-ai-log\" ref={scrollRef}>\n        {messages.length === 0 && (\n          <div className=\"flow-media-ai-empty\">\n            {config?.gateway ? '开始对话…' : '请在属性面板配置 AI 接口'}\n          </div>\n        )}\n        {messages.map((m, i) => (\n          <div key={i} className={`flow-media-ai-msg flow-media-ai-msg--${m.role}`}>\n            {m.role === 'assistant'\n              ? <Markdown content={m.content || '…'} enableMermaid={false} enableMarkmap={false} />\n              : <span>{m.content}</span>}\n          </div>\n        ))}\n        {error && <div className=\"flow-media-error\">{error}</div>}\n      </div>\n      <div className=\"flow-media-ai-input\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n        <textarea\n          value={input}\n          placeholder=\"输入消息，Enter 发送\"\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); if (canSend) send(); }\n          }}\n          onPointerDown={(e) => e.stopPropagation()}\n        />\n        {streaming ? (\n          <button type=\"button\" onClick={() => abortRef.current?.abort()}>停止</button>\n        ) : (\n          <button type=\"button\" disabled={!canSend || !input.trim()} onClick={send}>发送</button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/** Dispatches to the correct renderer for the node's media kind. */\nexport function MediaContent({ node, interactive }: { node: FlowNode; interactive: boolean }) {\n  const kind = node.data.mediaKind ?? 'markdown';\n  const content = node.data.mediaContent ?? '';\n  const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n\n  switch (kind) {\n    case 'markdown':\n      return (\n        <div className=\"flow-media-markdown\" style={{ color: textColor, fontSize: node.data.fontSize }}>\n          <Markdown content={content} />\n        </div>\n      );\n    case 'html':\n      // The iframe is an isolated document with no access to the parent's CSS\n      // variables, so pass a concrete resolved color instead of a var().\n      return (\n        <HtmlView\n          content={content}\n          interactive={interactive}\n          color={resolveThemeColor(node.data.labelColor ?? node.data.color, '#111827')}\n          fontSize={node.data.fontSize}\n        />\n      );\n    case 'mermaid':\n      return <MermaidView content={content} color={textColor} />;\n    case 'math':\n      return <MathView content={content} color={textColor} fontSize={node.data.fontSize} />;\n    case 'image':\n      return <ImageView content={content} />;\n    case 'model3d':\n      return (\n        <Model3DView\n          content={content}\n          format={node.data.modelFormat ?? 'stl'}\n          interactive={interactive}\n        />\n      );\n    case 'ai':\n      return <AIView node={node} config={node.data.aiConfig} interactive={interactive} color={textColor} />;\n    case 'data':\n      return (\n        <div className=\"flow-media-data\" style={{ pointerEvents: interactive ? 'auto' : 'none' }}>\n          <DataNodeView\n            config={node.data.dataConfig ?? { columns: [], rows: [], view: 'table' }}\n            surfaceColor={node.data.fill === 'transparent' ? undefined : resolveThemeColorCss(node.data.fill, '')}\n            textColor={textColor}\n            primaryColor={resolveThemeColorCss(node.data.color, '')}\n          />\n        </div>\n      );\n    default:\n      return null;\n  }\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/MediaOverlay.js

@@ -4,7 +4,7 @@ import { resolveThemeColorCss as n } from "../utils/themeColor.js";
 import r, { Suspense as i, useMemo as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/pro/Flow/nodes/MediaOverlay.tsx
-var s = r.lazy(() => import("./MediaContent.js").then((e) => ({ default: e.MediaContent }))), c = class extends r.Component {
+var s = r.memo(r.lazy(() => import("./MediaContent.js").then((e) => ({ default: e.MediaContent })))), c = class extends r.Component {
 	constructor(e) {
 		super(e), this.state = { error: null };
 	}

package/dist/components/pro/Flow/nodes/MediaOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\nconst MediaContent = React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n);\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        // Drive the overlay's background / text from the node's own color data.\n        // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n        // follows theme switches natively; literal colors are used as-is. This\n        // keeps html / ai / data (which render opaque content) in sync with the\n        // fill/color chosen in the inspector, matching the PixiJS frame drawn\n        // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n        // export captures), so we don't redraw it here.\n        const fillCss = node.data.fill === 'transparent'\n          ? 'transparent'\n          : resolveThemeColorCss(node.data.fill, 'transparent');\n        const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n              style={{\n                background: fillCss,\n                color: textColor,\n              }}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AASA,IAAM,IAAe,EAAM,WACzB,OAAO,oBAAiB,CAAC,MAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;CACA,YAAY,GAAsC;EAEhD,AADA,MAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;CAC7B;CACA,OAAO,yBAAyB,GAAc;EAC5C,OAAO,EAAE,SAAM;CACjB;CACA,SAAS;EAIP,OAHI,KAAK,MAAM,QACN,kBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA,KAAK,MAAM,MAAM;EAAa,CAAA,IAEnE,KAAK,MAAM;CACpB;AACF;AAaA,SAAgB,IAAe;CAC7B,IAAM,EAAE,kBAAe,iBAAc,EAAe,GAC9C,EAAE,aAAU,sBAAmB,EAAU,GAEzC,IAAa,QACX,EAAc,MAAM,QAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;CAEA,IAAI,EAAW,WAAW,GAAG,OAAO;CAEpC,IAAM,EAAE,GAAG,GAAI,GAAG,GAAI,YAAS;CAE/B,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,EAAW,KAAK,MAAS;GAExB,IAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;GACzF,OACE,kBAAC,OAAD;IAEE,WAAU;IACV,mBAAiB,EAAK;IACtB,OAAO;KACL,UAAU;KACV;KACA;KACA,OAAO,EAAK;KACZ,QAAQ,EAAK;KAGb,WAAW,SAAS,EAAK;KACzB,iBAAiB;KAEjB,eAAe;IACjB;IAEA,UAAA,kBAAC,OAAD;KACE,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;KAClC,OAAO;MACL,YAAY;MACZ,OAAO;KACT;KAEA,UAAA,kBAAC,GAAD;MAAU,UAAU,kBAAC,OAAD;OAAK,WAAU;OAAqB,UAAA;MAAM,CAAA;MAC5D,UAAA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAoB;OAAmB;MAAc,CAAA,EACnC,CAAA;KACZ,CAAA;IACP,CAAA;GACF,GA/BE,EAAK,EA+BP;EAET,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"MediaOverlay.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/MediaOverlay.tsx"],"sourcesContent":["import React, { useMemo, Suspense } from 'react';\nimport { useFlowContext } from '../context/FlowContext';\nimport { useFlowUI } from '../context/FlowUIContext';\nimport { resolveThemeColorCss } from '../utils/themeColor';\n\n// Lazy-load the media renderers so the heavy optional deps they pull in\n// (react-markdown, mermaid, katex, markmap, …) are only fetched when a media\n// node actually needs to render. This keeps the base `dishui/flow` bundle\n// lightweight and avoids loading that stack for diagrams without media nodes.\n// Viewport-only updates move the outer box, not the live media subtree. Keep\n// nodes mounted offscreen so iframe/AI state and model camera state survive.\nconst MediaContent = React.memo(React.lazy(() =>\n  import('./MediaContent').then((m) => ({ default: m.MediaContent })),\n));\n\n/** Isolates media render/load failures so one bad node never blanks the editor. */\nclass MediaErrorBoundary extends React.Component<\n  { children: React.ReactNode },\n  { error: Error | null }\n> {\n  constructor(props: { children: React.ReactNode }) {\n    super(props);\n    this.state = { error: null };\n  }\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  render() {\n    if (this.state.error) {\n      return <div className=\"flow-media-error\">{this.state.error.message}</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/**\n * DOM overlay for media nodes. PixiJS draws the frame; this layer renders the\n * live content (markdown/html/mermaid/math/AI) on top, synced to the viewport\n * so it pans and zooms with the canvas.\n *\n * Event model: a media surface is `pointer-events: none` by default so the\n * canvas underneath can be clicked to select/drag the node's frame. The\n * surface only becomes interactive while its node is selected (so AI chat can\n * be typed into, HTML can be scrolled). This also stops an always-interactive\n * iframe/AI box from swallowing pointer gestures and leaving the drag stuck.\n */\nexport function MediaOverlay() {\n  const { currentCanvas, selection } = useFlowContext();\n  const { viewport, isNodeDragging } = useFlowUI();\n\n  const mediaNodes = useMemo(\n    () => currentCanvas.nodes.filter((n) => n.type === 'mediaNode'),\n    [currentCanvas.nodes],\n  );\n\n  if (mediaNodes.length === 0) return null;\n\n  const { x: vx, y: vy, zoom } = viewport;\n\n  return (\n    <div className=\"flow-media-layer\">\n      {mediaNodes.map((node) => {\n        // World → screen (CSS px, matching ViewportManager.worldToScreen).\n        const left = node.position.x * zoom + vx;\n        const top = node.position.y * zoom + vy;\n        // Interactive only while selected, so the canvas stays draggable.\n        // Suppress entirely during a drag: an interactive iframe would swallow\n        // the pointer and the canvas would never receive pointerup (stuck drag).\n        const interactive = selection.nodeIds.has(node.id) && !isNodeDragging;\n        // Drive the overlay's background / text from the node's own color data.\n        // Theme tokens (`theme:*`) resolve to CSS variables so the media content\n        // follows theme switches natively; literal colors are used as-is. This\n        // keeps html / ai / data (which render opaque content) in sync with the\n        // fill/color chosen in the inspector, matching the PixiJS frame drawn\n        // underneath. The border is owned by the Pixi frame (also what PNG/PDF\n        // export captures), so we don't redraw it here.\n        const fillCss = node.data.fill === 'transparent'\n          ? 'transparent'\n          : resolveThemeColorCss(node.data.fill, 'transparent');\n        const textColor = resolveThemeColorCss(node.data.labelColor ?? node.data.color, '#111827');\n        return (\n          <div\n            key={node.id}\n            className=\"flow-media-node\"\n            data-media-node={node.id}\n            style={{\n              position: 'absolute',\n              left,\n              top,\n              width: node.width,\n              height: node.height,\n              // Scale the fixed-size content box to match zoom without\n              // reflowing text on every zoom step.\n              transform: `scale(${zoom})`,\n              transformOrigin: 'top left',\n              // Below the frame's selection outline but above the canvas.\n              pointerEvents: 'none',\n            }}\n          >\n            <div\n              className=\"flow-media-surface\"\n              onWheel={(e) => e.stopPropagation()}\n              style={{\n                background: fillCss,\n                color: textColor,\n              }}\n            >\n              <Suspense fallback={<div className=\"flow-media-loading\">…</div>}>\n                <MediaErrorBoundary>\n                  <MediaContent node={node} interactive={interactive} />\n                </MediaErrorBoundary>\n              </Suspense>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,IAAM,IAAe,EAAM,KAAK,EAAM,WACpC,OAAO,oBAAiB,CAAC,MAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,CAAC,GAGK,IAAN,cAAiC,EAAM,UAGrC;CACA,YAAY,GAAsC;EAEhD,AADA,MAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;CAC7B;CACA,OAAO,yBAAyB,GAAc;EAC5C,OAAO,EAAE,SAAM;CACjB;CACA,SAAS;EAIP,OAHI,KAAK,MAAM,QACN,kBAAC,OAAD;GAAK,WAAU;GAAoB,UAAA,KAAK,MAAM,MAAM;EAAa,CAAA,IAEnE,KAAK,MAAM;CACpB;AACF;AAaA,SAAgB,IAAe;CAC7B,IAAM,EAAE,kBAAe,iBAAc,EAAe,GAC9C,EAAE,aAAU,sBAAmB,EAAU,GAEzC,IAAa,QACX,EAAc,MAAM,QAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;CAEA,IAAI,EAAW,WAAW,GAAG,OAAO;CAEpC,IAAM,EAAE,GAAG,GAAI,GAAG,GAAI,YAAS;CAE/B,OACE,kBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,EAAW,KAAK,MAAS;GAExB,IAAM,IAAO,EAAK,SAAS,IAAI,IAAO,GAChC,IAAM,EAAK,SAAS,IAAI,IAAO,GAI/B,IAAc,EAAU,QAAQ,IAAI,EAAK,EAAE,KAAK,CAAC,GAQjD,IAAU,EAAK,KAAK,SAAS,gBAC/B,gBACA,EAAqB,EAAK,KAAK,MAAM,aAAa,GAChD,IAAY,EAAqB,EAAK,KAAK,cAAc,EAAK,KAAK,OAAO,SAAS;GACzF,OACE,kBAAC,OAAD;IAEE,WAAU;IACV,mBAAiB,EAAK;IACtB,OAAO;KACL,UAAU;KACV;KACA;KACA,OAAO,EAAK;KACZ,QAAQ,EAAK;KAGb,WAAW,SAAS,EAAK;KACzB,iBAAiB;KAEjB,eAAe;IACjB;IAEA,UAAA,kBAAC,OAAD;KACE,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;KAClC,OAAO;MACL,YAAY;MACZ,OAAO;KACT;KAEA,UAAA,kBAAC,GAAD;MAAU,UAAU,kBAAC,OAAD;OAAK,WAAU;OAAqB,UAAA;MAAM,CAAA;MAC5D,UAAA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAoB;OAAmB;MAAc,CAAA,EACnC,CAAA;KACZ,CAAA;IACP,CAAA;GACF,GA/BE,EAAK,EA+BP;EAET,CAAC;CACE,CAAA;AAET"}

package/dist/components/pro/Flow/nodes/Model3DView.js

@@ -1,116 +1,122 @@
-import { useEffect as e, useRef as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as a from "three";
-import { OrbitControls as o } from "three/addons/controls/OrbitControls.js";
-import { ThreeMFLoader as s } from "three/addons/loaders/3MFLoader.js";
-import { OBJLoader as c } from "three/addons/loaders/OBJLoader.js";
-import { STLLoader as l } from "three/addons/loaders/STLLoader.js";
+import { createDemandRender as e } from "./demandRender.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "three";
+import { OrbitControls as s } from "three/addons/controls/OrbitControls.js";
+import { ThreeMFLoader as c } from "three/addons/loaders/3MFLoader.js";
+import { OBJLoader as l } from "three/addons/loaders/OBJLoader.js";
+import { STLLoader as u } from "three/addons/loaders/STLLoader.js";
 //#region src/components/pro/Flow/nodes/Model3DView.tsx
-function u(e) {
+function d(e) {
 	let t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
 	e.traverse((e) => {
-		if (!(e instanceof a.Mesh)) return;
+		if (!(e instanceof o.Mesh)) return;
 		e.geometry?.dispose();
 		let r = Array.isArray(e.material) ? e.material : [e.material];
 		for (let e of r) if (e && !t.has(e)) {
 			t.add(e);
-			for (let t of Object.values(e)) t instanceof a.Texture && n.add(t);
+			for (let t of Object.values(e)) t instanceof o.Texture && n.add(t);
 		}
 	});
 	for (let e of n) e.dispose();
 	for (let e of t) e.dispose();
 }
-function d(e, t) {
+function f(e, t) {
 	if (e === "stl") {
-		let e = new l().parse(t);
-		return e.getAttribute("normal") || e.computeVertexNormals(), new a.Mesh(e, new a.MeshStandardMaterial({
+		let e = new u().parse(t);
+		return e.getAttribute("normal") || e.computeVertexNormals(), new o.Mesh(e, new o.MeshStandardMaterial({
 			color: 12108492,
 			metalness: .05,
 			roughness: .72,
-			side: a.DoubleSide
+			side: o.DoubleSide
 		}));
 	}
-	return e === "obj" ? new c().parse(new TextDecoder().decode(t)) : new s().parse(t);
+	return e === "obj" ? new l().parse(new TextDecoder().decode(t)) : new c().parse(t);
 }
-function f({ content: s, format: c, interactive: l }) {
-	let f = t(null), p = t(null), [m, h] = n(null), [g, _] = n(!1);
-	return e(() => {
-		p.current && (p.current.enabled = l);
-	}, [l]), e(() => {
-		let e = f.current, t = s.trim();
-		if (!e || !t) return;
-		let n = !1, r = 0, i = null, m = new AbortController(), g = new a.Scene(), v = new a.PerspectiveCamera(45, 1, .01, 1e4), y = new a.WebGLRenderer({
+function p({ content: c, format: l, interactive: u }) {
+	let p = n(null), m = n(null), h = n(u), [g, _] = r(null), [v, y] = r(!1);
+	return t(() => {
+		h.current = u, m.current && (m.current.enabled = u);
+	}, [u]), t(() => {
+		let t = p.current, n = c.trim();
+		if (!t || !n) return;
+		let r = !1, i = null, a = new AbortController(), u = new o.Scene(), g = new o.PerspectiveCamera(45, 1, .01, 1e4), v = new o.WebGLRenderer({
 			antialias: !0,
 			alpha: !0
 		});
-		y.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)), y.outputColorSpace = a.SRGBColorSpace, y.setClearColor(0, 0), e.appendChild(y.domElement), g.add(new a.HemisphereLight(16777215, 4477030, 2));
-		let b = new a.DirectionalLight(16777215, 2.4);
-		b.position.set(3, 5, 4), g.add(b);
-		let x = new o(v, y.domElement);
-		x.enableDamping = !0, x.enabled = l, p.current = x;
-		let S = () => {
-			let t = Math.max(1, e.clientWidth), n = Math.max(1, e.clientHeight);
-			y.setSize(t, n, !1), v.aspect = t / n, v.updateProjectionMatrix();
-		};
-		S();
-		let C = new ResizeObserver(S);
-		C.observe(e);
-		let w = () => {
-			x.update(), y.render(g, v), r = requestAnimationFrame(w);
+		v.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)), v.outputColorSpace = o.SRGBColorSpace, v.setClearColor(0, 0), t.appendChild(v.domElement), u.add(new o.HemisphereLight(16777215, 4477030, 2));
+		let b = new o.DirectionalLight(16777215, 2.4);
+		b.position.set(3, 5, 4), u.add(b);
+		let x = new s(g, v.domElement);
+		x.enableDamping = !0, x.enabled = h.current, m.current = x;
+		let S = e({
+			update: () => x.update(),
+			render: () => v.render(u, g)
+		});
+		x.addEventListener("change", S.invalidate);
+		let C = typeof IntersectionObserver > "u", w = () => S.setActive(C && !document.hidden), T = typeof IntersectionObserver > "u" ? null : new IntersectionObserver((e) => {
+			C = e.some((e) => e.isIntersecting && e.intersectionRect.width > 0 && e.intersectionRect.height > 0), w();
+		});
+		T?.observe(t), document.addEventListener("visibilitychange", w), w();
+		let E = () => {
+			let e = Math.max(1, t.clientWidth), n = Math.max(1, t.clientHeight);
+			v.setSize(e, n, !1), g.aspect = e / n, g.updateProjectionMatrix(), S.invalidate();
 		};
-		return w(), _(!0), h(null), fetch(t, { signal: m.signal }).then((e) => {
+		E();
+		let D = new ResizeObserver(E);
+		return D.observe(t), y(!0), _(null), fetch(n, { signal: a.signal }).then((e) => {
 			if (!e.ok) throw Error(`模型加载失败：HTTP ${e.status}`);
 			return e.arrayBuffer();
 		}).then((e) => {
 			if (e.byteLength > 52428800) throw Error("模型超过 50 MiB，无法加载");
-			let t = d(c, e);
-			if (n) {
-				u(t);
+			let t = f(l, e);
+			if (r) {
+				d(t);
 				return;
 			}
 			i = t, t.updateMatrixWorld(!0);
-			let r = new a.Box3().setFromObject(t);
-			if (r.isEmpty()) throw Error("模型不包含可显示的几何体");
-			let o = r.getCenter(new a.Vector3());
-			t.position.sub(o), t.updateMatrixWorld(!0);
-			let s = new a.Box3().setFromObject(t).getBoundingSphere(new a.Sphere());
+			let n = new o.Box3().setFromObject(t);
+			if (n.isEmpty()) throw Error("模型不包含可显示的几何体");
+			let a = n.getCenter(new o.Vector3());
+			t.position.sub(a), t.updateMatrixWorld(!0);
+			let s = new o.Box3().setFromObject(t).getBoundingSphere(new o.Sphere());
 			if (!Number.isFinite(s.radius) || s.radius <= 0) throw Error("模型尺寸无效");
-			g.add(t);
-			let l = a.MathUtils.degToRad(v.fov / 2), f = Math.atan(Math.tan(l) * v.aspect), p = s.radius / Math.sin(Math.min(f, l)) * 1.15;
-			v.position.copy(new a.Vector3(1, .75, 1).normalize().multiplyScalar(p)), v.near = Math.max(s.radius / 1e3, .001), v.far = Math.max(p + s.radius * 10, s.radius * 1e3), v.updateProjectionMatrix(), x.target.set(0, 0, 0), x.minDistance = s.radius * .05, x.maxDistance = s.radius * 100, x.update();
+			u.add(t);
+			let c = o.MathUtils.degToRad(g.fov / 2), p = Math.atan(Math.tan(c) * g.aspect), m = s.radius / Math.sin(Math.min(p, c)) * 1.15;
+			g.position.copy(new o.Vector3(1, .75, 1).normalize().multiplyScalar(m)), g.near = Math.max(s.radius / 1e3, .001), g.far = Math.max(m + s.radius * 10, s.radius * 1e3), g.updateProjectionMatrix(), x.target.set(0, 0, 0), x.minDistance = s.radius * .05, x.maxDistance = s.radius * 100, S.invalidate();
 		}).catch((e) => {
-			!n && e?.name !== "AbortError" && h(e?.message ?? "模型加载失败");
+			!r && e?.name !== "AbortError" && _(e?.message ?? "模型加载失败");
 		}).finally(() => {
-			n || _(!1);
+			r || y(!1);
 		}), () => {
-			n = !0, m.abort(), cancelAnimationFrame(r), C.disconnect(), x.dispose(), p.current = null, i && u(i), g.clear(), y.renderLists.dispose(), y.dispose(), y.forceContextLoss(), y.domElement.remove();
+			r = !0, a.abort(), S.dispose(), D.disconnect(), T?.disconnect(), document.removeEventListener("visibilitychange", w), x.removeEventListener("change", S.invalidate), x.dispose(), m.current = null, i && d(i), u.clear(), v.renderLists.dispose(), v.dispose(), v.forceContextLoss(), v.domElement.remove();
 		};
-	}, [s, c]), s.trim() ? /* @__PURE__ */ i("div", {
-		ref: f,
+	}, [c, l]), c.trim() ? /* @__PURE__ */ a("div", {
+		ref: p,
 		className: "flow-media-model3d",
 		style: {
-			pointerEvents: l ? "auto" : "none",
-			touchAction: l ? "none" : "auto"
+			pointerEvents: u ? "auto" : "none",
+			touchAction: u ? "none" : "auto"
 		},
 		onPointerDown: (e) => {
-			l && e.stopPropagation();
+			u && e.stopPropagation();
 		},
 		onWheel: (e) => {
-			l && e.stopPropagation();
+			u && e.stopPropagation();
 		},
-		children: [g && /* @__PURE__ */ r("div", {
+		children: [v && /* @__PURE__ */ i("div", {
 			className: "flow-media-loading flow-media-model3d-status",
 			children: "加载模型…"
-		}), m && /* @__PURE__ */ r("div", {
+		}), g && /* @__PURE__ */ i("div", {
 			className: "flow-media-error flow-media-model3d-status",
-			children: m
+			children: g
 		})]
-	}) : /* @__PURE__ */ r("div", {
+	}) : /* @__PURE__ */ i("div", {
 		className: "flow-media-image-empty",
 		children: "输入 STL、OBJ 或 3MF 模型链接"
 	});
 }
 //#endregion
-export { f as Model3DView };
+export { p as Model3DView };
 
 //# sourceMappingURL=Model3DView.js.map

package/dist/components/pro/Flow/nodes/Model3DView.js.map

@@ -1 +1 @@
-{"version":3,"file":"Model3DView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/Model3DView.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nimport { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';\nimport { OBJLoader } from 'three/addons/loaders/OBJLoader.js';\nimport { STLLoader } from 'three/addons/loaders/STLLoader.js';\nimport type { FlowModelFormat } from '../types';\n\nfunction disposeObject(root: any) {\n  const materials = new Set<any>();\n  const textures = new Set<any>();\n  root.traverse((object: any) => {\n    if (!(object instanceof THREE.Mesh)) return;\n    object.geometry?.dispose();\n    const list = Array.isArray(object.material) ? object.material : [object.material];\n    for (const material of list) {\n      if (!material || materials.has(material)) continue;\n      materials.add(material);\n      for (const value of Object.values(material)) {\n        if (value instanceof THREE.Texture) textures.add(value);\n      }\n    }\n  });\n  for (const texture of textures) texture.dispose();\n  for (const material of materials) material.dispose();\n}\n\nfunction parseModel(format: FlowModelFormat, data: ArrayBuffer): any {\n  if (format === 'stl') {\n    const geometry = new STLLoader().parse(data);\n    if (!geometry.getAttribute('normal')) geometry.computeVertexNormals();\n    return new THREE.Mesh(\n      geometry,\n      new THREE.MeshStandardMaterial({\n        color: 0xb8c2cc,\n        metalness: 0.05,\n        roughness: 0.72,\n        side: THREE.DoubleSide,\n      }),\n    );\n  }\n  if (format === 'obj') {\n    return new OBJLoader().parse(new TextDecoder().decode(data));\n  }\n  return new ThreeMFLoader().parse(data);\n}\n\nexport function Model3DView({\n  content,\n  format,\n  interactive,\n}: {\n  content: string;\n  format: FlowModelFormat;\n  interactive: boolean;\n}) {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const controlsRef = useRef<any>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (controlsRef.current) controlsRef.current.enabled = interactive;\n  }, [interactive]);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    const source = content.trim();\n    if (!host || !source) return;\n\n    let cancelled = false;\n    let frame = 0;\n    let model: any = null;\n    const abort = new AbortController();\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 10000);\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n    renderer.outputColorSpace = THREE.SRGBColorSpace;\n    renderer.setClearColor(0x000000, 0);\n    host.appendChild(renderer.domElement);\n\n    scene.add(new THREE.HemisphereLight(0xffffff, 0x445066, 2));\n    const directional = new THREE.DirectionalLight(0xffffff, 2.4);\n    directional.position.set(3, 5, 4);\n    scene.add(directional);\n\n    const controls = new OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.enabled = interactive;\n    controlsRef.current = controls;\n\n    const resize = () => {\n      const width = Math.max(1, host.clientWidth);\n      const height = Math.max(1, host.clientHeight);\n      renderer.setSize(width, height, false);\n      camera.aspect = width / height;\n      camera.updateProjectionMatrix();\n    };\n    resize();\n    const observer = new ResizeObserver(resize);\n    observer.observe(host);\n\n    const animate = () => {\n      controls.update();\n      renderer.render(scene, camera);\n      frame = requestAnimationFrame(animate);\n    };\n    animate();\n\n    setLoading(true);\n    setError(null);\n    fetch(source, { signal: abort.signal })\n      .then(response => {\n        if (!response.ok) throw new Error(`模型加载失败：HTTP ${response.status}`);\n        return response.arrayBuffer();\n      })\n      .then(data => {\n        if (data.byteLength > 50 * 1024 * 1024) throw new Error('模型超过 50 MiB，无法加载');\n        const root = parseModel(format, data);\n        if (cancelled) {\n          disposeObject(root);\n          return;\n        }\n        model = root;\n        root.updateMatrixWorld(true);\n        const box = new THREE.Box3().setFromObject(root);\n        if (box.isEmpty()) throw new Error('模型不包含可显示的几何体');\n        const center = box.getCenter(new THREE.Vector3());\n        root.position.sub(center);\n        root.updateMatrixWorld(true);\n        const sphere = new THREE.Box3().setFromObject(root).getBoundingSphere(new THREE.Sphere());\n        if (!Number.isFinite(sphere.radius) || sphere.radius <= 0) throw new Error('模型尺寸无效');\n        scene.add(root);\n\n        const halfFovY = THREE.MathUtils.degToRad(camera.fov / 2);\n        const halfFovX = Math.atan(Math.tan(halfFovY) * camera.aspect);\n        const distance = (sphere.radius / Math.sin(Math.min(halfFovX, halfFovY))) * 1.15;\n        camera.position.copy(new THREE.Vector3(1, 0.75, 1).normalize().multiplyScalar(distance));\n        camera.near = Math.max(sphere.radius / 1000, 0.001);\n        camera.far = Math.max(distance + sphere.radius * 10, sphere.radius * 1000);\n        camera.updateProjectionMatrix();\n        controls.target.set(0, 0, 0);\n        controls.minDistance = sphere.radius * 0.05;\n        controls.maxDistance = sphere.radius * 100;\n        controls.update();\n      })\n      .catch(nextError => {\n        if (!cancelled && nextError?.name !== 'AbortError') setError(nextError?.message ?? '模型加载失败');\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n\n    return () => {\n      cancelled = true;\n      abort.abort();\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      controls.dispose();\n      controlsRef.current = null;\n      if (model) disposeObject(model);\n      scene.clear();\n      renderer.renderLists.dispose();\n      renderer.dispose();\n      renderer.forceContextLoss();\n      renderer.domElement.remove();\n    };\n  }, [content, format]);\n\n  if (!content.trim()) {\n    return <div className=\"flow-media-image-empty\">输入 STL、OBJ 或 3MF 模型链接</div>;\n  }\n\n  return (\n    <div\n      ref={hostRef}\n      className=\"flow-media-model3d\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none', touchAction: interactive ? 'none' : 'auto' }}\n      onPointerDown={event => { if (interactive) event.stopPropagation(); }}\n      onWheel={event => { if (interactive) event.stopPropagation(); }}\n    >\n      {loading && <div className=\"flow-media-loading flow-media-model3d-status\">加载模型…</div>}\n      {error && <div className=\"flow-media-error flow-media-model3d-status\">{error}</div>}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Model3DView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/Model3DView.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nimport { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';\nimport { OBJLoader } from 'three/addons/loaders/OBJLoader.js';\nimport { STLLoader } from 'three/addons/loaders/STLLoader.js';\nimport type { FlowModelFormat } from '../types';\nimport { createDemandRender } from './demandRender';\n\nfunction disposeObject(root: any) {\n  const materials = new Set<any>();\n  const textures = new Set<any>();\n  root.traverse((object: any) => {\n    if (!(object instanceof THREE.Mesh)) return;\n    object.geometry?.dispose();\n    const list = Array.isArray(object.material) ? object.material : [object.material];\n    for (const material of list) {\n      if (!material || materials.has(material)) continue;\n      materials.add(material);\n      for (const value of Object.values(material)) {\n        if (value instanceof THREE.Texture) textures.add(value);\n      }\n    }\n  });\n  for (const texture of textures) texture.dispose();\n  for (const material of materials) material.dispose();\n}\n\nfunction parseModel(format: FlowModelFormat, data: ArrayBuffer): any {\n  if (format === 'stl') {\n    const geometry = new STLLoader().parse(data);\n    if (!geometry.getAttribute('normal')) geometry.computeVertexNormals();\n    return new THREE.Mesh(\n      geometry,\n      new THREE.MeshStandardMaterial({\n        color: 0xb8c2cc,\n        metalness: 0.05,\n        roughness: 0.72,\n        side: THREE.DoubleSide,\n      }),\n    );\n  }\n  if (format === 'obj') {\n    return new OBJLoader().parse(new TextDecoder().decode(data));\n  }\n  return new ThreeMFLoader().parse(data);\n}\n\nexport function Model3DView({\n  content,\n  format,\n  interactive,\n}: {\n  content: string;\n  format: FlowModelFormat;\n  interactive: boolean;\n}) {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const controlsRef = useRef<OrbitControls | null>(null);\n  const interactiveRef = useRef(interactive);\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    interactiveRef.current = interactive;\n    if (controlsRef.current) controlsRef.current.enabled = interactive;\n  }, [interactive]);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    const source = content.trim();\n    if (!host || !source) return;\n\n    let cancelled = false;\n    let model: any = null;\n    const abort = new AbortController();\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 10000);\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\n    renderer.outputColorSpace = THREE.SRGBColorSpace;\n    renderer.setClearColor(0x000000, 0);\n    host.appendChild(renderer.domElement);\n\n    scene.add(new THREE.HemisphereLight(0xffffff, 0x445066, 2));\n    const directional = new THREE.DirectionalLight(0xffffff, 2.4);\n    directional.position.set(3, 5, 4);\n    scene.add(directional);\n\n    const controls = new OrbitControls(camera, renderer.domElement);\n    controls.enableDamping = true;\n    controls.enabled = interactiveRef.current;\n    controlsRef.current = controls;\n\n    const drawing = createDemandRender({\n      update: () => controls.update(),\n      render: () => renderer.render(scene, camera),\n    });\n    controls.addEventListener('change', drawing.invalidate);\n    // Observe the actual DOM box, including overlay transforms and clipping.\n    // Pausing keeps the loaded model, camera and WebGL context intact.\n    let intersecting = typeof IntersectionObserver === 'undefined';\n    const updateVisibility = () => drawing.setActive(intersecting && !document.hidden);\n    const visibilityObserver = typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(entries => {\n      intersecting = entries.some(entry => entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0);\n      updateVisibility();\n    });\n    visibilityObserver?.observe(host);\n    document.addEventListener('visibilitychange', updateVisibility);\n    updateVisibility();\n\n    const resize = () => {\n      const width = Math.max(1, host.clientWidth);\n      const height = Math.max(1, host.clientHeight);\n      renderer.setSize(width, height, false);\n      camera.aspect = width / height;\n      camera.updateProjectionMatrix();\n      drawing.invalidate();\n    };\n    resize();\n    const observer = new ResizeObserver(resize);\n    observer.observe(host);\n\n    setLoading(true);\n    setError(null);\n    fetch(source, { signal: abort.signal })\n      .then(response => {\n        if (!response.ok) throw new Error(`模型加载失败：HTTP ${response.status}`);\n        return response.arrayBuffer();\n      })\n      .then(data => {\n        if (data.byteLength > 50 * 1024 * 1024) throw new Error('模型超过 50 MiB，无法加载');\n        const root = parseModel(format, data);\n        if (cancelled) {\n          disposeObject(root);\n          return;\n        }\n        model = root;\n        root.updateMatrixWorld(true);\n        const box = new THREE.Box3().setFromObject(root);\n        if (box.isEmpty()) throw new Error('模型不包含可显示的几何体');\n        const center = box.getCenter(new THREE.Vector3());\n        root.position.sub(center);\n        root.updateMatrixWorld(true);\n        const sphere = new THREE.Box3().setFromObject(root).getBoundingSphere(new THREE.Sphere());\n        if (!Number.isFinite(sphere.radius) || sphere.radius <= 0) throw new Error('模型尺寸无效');\n        scene.add(root);\n\n        const halfFovY = THREE.MathUtils.degToRad(camera.fov / 2);\n        const halfFovX = Math.atan(Math.tan(halfFovY) * camera.aspect);\n        const distance = (sphere.radius / Math.sin(Math.min(halfFovX, halfFovY))) * 1.15;\n        camera.position.copy(new THREE.Vector3(1, 0.75, 1).normalize().multiplyScalar(distance));\n        camera.near = Math.max(sphere.radius / 1000, 0.001);\n        camera.far = Math.max(distance + sphere.radius * 10, sphere.radius * 1000);\n        camera.updateProjectionMatrix();\n        controls.target.set(0, 0, 0);\n        controls.minDistance = sphere.radius * 0.05;\n        controls.maxDistance = sphere.radius * 100;\n        drawing.invalidate();\n      })\n      .catch(nextError => {\n        if (!cancelled && nextError?.name !== 'AbortError') setError(nextError?.message ?? '模型加载失败');\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n\n    return () => {\n      cancelled = true;\n      abort.abort();\n      drawing.dispose();\n      observer.disconnect();\n      visibilityObserver?.disconnect();\n      document.removeEventListener('visibilitychange', updateVisibility);\n      controls.removeEventListener('change', drawing.invalidate);\n      controls.dispose();\n      controlsRef.current = null;\n      if (model) disposeObject(model);\n      scene.clear();\n      renderer.renderLists.dispose();\n      renderer.dispose();\n      renderer.forceContextLoss();\n      renderer.domElement.remove();\n    };\n  }, [content, format]);\n\n  if (!content.trim()) {\n    return <div className=\"flow-media-image-empty\">输入 STL、OBJ 或 3MF 模型链接</div>;\n  }\n\n  return (\n    <div\n      ref={hostRef}\n      className=\"flow-media-model3d\"\n      style={{ pointerEvents: interactive ? 'auto' : 'none', touchAction: interactive ? 'none' : 'auto' }}\n      onPointerDown={event => { if (interactive) event.stopPropagation(); }}\n      onWheel={event => { if (interactive) event.stopPropagation(); }}\n    >\n      {loading && <div className=\"flow-media-loading flow-media-model3d-status\">加载模型…</div>}\n      {error && <div className=\"flow-media-error flow-media-model3d-status\">{error}</div>}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/pro/Flow/nodes/chartGeometryBudget.d.ts

@@ -0,0 +1,14 @@
+import type { ChartMark, SceneNode } from '@tanstack/charts';
+type Position = readonly [number, number];
+/** Keep sparse charts' dots, but not overlapping dots in dense/multi-series lines. */
+export declare function showLinePoints(rowCount: number, seriesCount: number, width: number): boolean;
+/**
+ * First/min/max/last per two CSS plot pixels (at most ~2 vertices/pixel).
+ * Keep source order and extrema. Repeated/non-monotonic category positions are
+ * deliberately left alone: bucketing them can change backtracking geometry.
+ */
+export declare function budgetPolyline(points: readonly Position[]): readonly Position[];
+export declare function budgetChartNode(node: SceneNode): SceneNode;
+/** Budget only display geometry, after full-data domains and tooltip points exist. */
+export declare function withChartGeometryBudget<T extends ChartMark<any, any, any, any, any, any, any>>(mark: T): T;
+export {};

package/dist/components/pro/Flow/nodes/chartGeometryBudget.js

@@ -0,0 +1,76 @@
+//#region src/components/pro/Flow/nodes/chartGeometryBudget.ts
+function e(e, t, n) {
+	return e * t <= Math.min(200, Math.floor(Math.max(0, n) / 6));
+}
+function t(e) {
+	if (e.length < 3) return e;
+	let t = -Infinity;
+	for (let [n, r] of e) {
+		if (!Number.isFinite(n) || !Number.isFinite(r) || n <= t) return e;
+		t = n;
+	}
+	let n = [];
+	for (let t = 0; t < e.length;) {
+		let r = Math.floor(e[t][0] / 2), i = t + 1, a = t, o = t;
+		for (; i < e.length && Math.floor(e[i][0] / 2) === r;) e[i][1] < e[a][1] && (a = i), e[i][1] > e[o][1] && (o = i), i++;
+		let s = [
+			t,
+			Math.min(a, o),
+			Math.max(a, o),
+			i - 1
+		];
+		for (let t = 0; t < s.length; t++) (t === 0 || s[t] !== s[t - 1]) && n.push(e[s[t]]);
+		t = i;
+	}
+	return n.length < e.length ? n : e;
+}
+function n(e) {
+	if (e.kind === "group") return {
+		...e,
+		children: e.children.map(n)
+	};
+	if (e.kind === "polyline" && !e.path) {
+		let n = t(e.points);
+		return n === e.points ? e : {
+			...e,
+			points: n
+		};
+	}
+	if (e.kind === "area" && !e.path && !e.polygons) {
+		let n = e.interaction?.points?.length;
+		if (n && e.points.length === n * 2) {
+			let r = e.points.slice(0, n), i = Array.from({ length: n }, (t, n) => e.points[e.points.length - 1 - n]), a = t(r), o = t(i);
+			if (a !== r || o !== i) {
+				let t = [...a];
+				for (let e = o.length - 1; e >= 0; e--) t.push(o[e]);
+				return {
+					...e,
+					points: t
+				};
+			}
+		}
+	}
+	return e;
+}
+function r(e) {
+	return {
+		...e,
+		initialize(t) {
+			let r = e.initialize(t);
+			return {
+				...r,
+				render(e) {
+					let t = r.render(e);
+					return {
+						...t,
+						nodes: t.nodes.map(n)
+					};
+				}
+			};
+		}
+	};
+}
+//#endregion
+export { n as budgetChartNode, t as budgetPolyline, e as showLinePoints, r as withChartGeometryBudget };
+
+//# sourceMappingURL=chartGeometryBudget.js.map

package/dist/components/pro/Flow/nodes/chartGeometryBudget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartGeometryBudget.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/chartGeometryBudget.ts"],"sourcesContent":["import type { ChartMark, SceneNode } from '@tanstack/charts';\n\ntype Position = readonly [number, number];\n\n/** Keep sparse charts' dots, but not overlapping dots in dense/multi-series lines. */\nexport function showLinePoints(rowCount: number, seriesCount: number, width: number) {\n  return rowCount * seriesCount <= Math.min(200, Math.floor(Math.max(0, width) / 6));\n}\n\n/**\n * First/min/max/last per two CSS plot pixels (at most ~2 vertices/pixel).\n * Keep source order and extrema. Repeated/non-monotonic category positions are\n * deliberately left alone: bucketing them can change backtracking geometry.\n */\nexport function budgetPolyline(points: readonly Position[]): readonly Position[] {\n  if (points.length < 3) return points;\n  let previousX = -Infinity;\n  for (const [x, y] of points) {\n    if (!Number.isFinite(x) || !Number.isFinite(y) || x <= previousX) return points;\n    previousX = x;\n  }\n  const result: Position[] = [];\n  for (let start = 0; start < points.length;) {\n    const bucket = Math.floor(points[start][0] / 2);\n    let end = start + 1, min = start, max = start;\n    while (end < points.length && Math.floor(points[end][0] / 2) === bucket) {\n      if (points[end][1] < points[min][1]) min = end;\n      if (points[end][1] > points[max][1]) max = end;\n      end++;\n    }\n    const indices = [start, Math.min(min, max), Math.max(min, max), end - 1];\n    for (let i = 0; i < indices.length; i++) {\n      if (i === 0 || indices[i] !== indices[i - 1]) result.push(points[indices[i]]);\n    }\n    start = end;\n  }\n  return result.length < points.length ? result : points;\n}\n\nexport function budgetChartNode(node: SceneNode): SceneNode {\n  if (node.kind === 'group') return { ...node, children: node.children.map(budgetChartNode) };\n  // Never rewrite precomputed curves or arbitrary polygons. Interaction points\n  // remain the full-resolution source data, separate from the painted vertices.\n  if (node.kind === 'polyline' && !node.path) {\n    const points = budgetPolyline(node.points);\n    return points === node.points ? node : { ...node, points };\n  }\n  if (node.kind === 'area' && !node.path && !node.polygons) {\n    const count = node.interaction?.points?.length;\n    // areaY emits the upper edge then the reversed lower edge for each gap-\n    // separated segment. Check this shape before applying the budget.\n    if (count && node.points.length === count * 2) {\n      const top = node.points.slice(0, count);\n      const bottom = Array.from({ length: count }, (_, i) => node.points[node.points.length - 1 - i]);\n      const upper = budgetPolyline(top), lower = budgetPolyline(bottom);\n      if (upper !== top || lower !== bottom) {\n        const points = [...upper];\n        for (let i = lower.length - 1; i >= 0; i--) points.push(lower[i]);\n        return { ...node, points };\n      }\n    }\n  }\n  return node;\n}\n\n/** Budget only display geometry, after full-data domains and tooltip points exist. */\nexport function withChartGeometryBudget<T extends ChartMark<any, any, any, any, any, any, any>>(mark: T): T {\n  return {\n    ...mark,\n    initialize(context) {\n      const initialized = mark.initialize(context);\n      return {\n        ...initialized,\n        render(renderContext) {\n          const scene = initialized.render(renderContext);\n          return { ...scene, nodes: scene.nodes.map(budgetChartNode) };\n        },\n      };\n    },\n  };\n}\n"],"mappings":";AAKA,SAAgB,EAAe,GAAkB,GAAqB,GAAe;CACnF,OAAO,IAAW,KAAe,KAAK,IAAI,KAAK,KAAK,MAAM,KAAK,IAAI,GAAG,CAAK,IAAI,CAAC,CAAC;AACnF;AAOA,SAAgB,EAAe,GAAkD;CAC/E,IAAI,EAAO,SAAS,GAAG,OAAO;CAC9B,IAAI,IAAY;CAChB,KAAK,IAAM,CAAC,GAAG,MAAM,GAAQ;EAC3B,IAAI,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,KAAK,KAAK,GAAW,OAAO;EACzE,IAAY;CACd;CACA,IAAM,IAAqB,CAAC;CAC5B,KAAK,IAAI,IAAQ,GAAG,IAAQ,EAAO,SAAS;EAC1C,IAAM,IAAS,KAAK,MAAM,EAAO,EAAM,CAAC,KAAK,CAAC,GAC1C,IAAM,IAAQ,GAAG,IAAM,GAAO,IAAM;EACxC,OAAO,IAAM,EAAO,UAAU,KAAK,MAAM,EAAO,EAAI,CAAC,KAAK,CAAC,MAAM,IAG/D,AAFI,EAAO,EAAI,CAAC,KAAK,EAAO,EAAI,CAAC,OAAI,IAAM,IACvC,EAAO,EAAI,CAAC,KAAK,EAAO,EAAI,CAAC,OAAI,IAAM,IAC3C;EAEF,IAAM,IAAU;GAAC;GAAO,KAAK,IAAI,GAAK,CAAG;GAAG,KAAK,IAAI,GAAK,CAAG;GAAG,IAAM;EAAC;EACvE,KAAK,IAAI,IAAI,GAAG,IAAI,EAAQ,QAAQ,KAClC,CAAI,MAAM,KAAK,EAAQ,OAAO,EAAQ,IAAI,OAAI,EAAO,KAAK,EAAO,EAAQ,GAAG;EAE9E,IAAQ;CACV;CACA,OAAO,EAAO,SAAS,EAAO,SAAS,IAAS;AAClD;AAEA,SAAgB,EAAgB,GAA4B;CAC1D,IAAI,EAAK,SAAS,SAAS,OAAO;EAAE,GAAG;EAAM,UAAU,EAAK,SAAS,IAAI,CAAe;CAAE;CAG1F,IAAI,EAAK,SAAS,cAAc,CAAC,EAAK,MAAM;EAC1C,IAAM,IAAS,EAAe,EAAK,MAAM;EACzC,OAAO,MAAW,EAAK,SAAS,IAAO;GAAE,GAAG;GAAM;EAAO;CAC3D;CACA,IAAI,EAAK,SAAS,UAAU,CAAC,EAAK,QAAQ,CAAC,EAAK,UAAU;EACxD,IAAM,IAAQ,EAAK,aAAa,QAAQ;EAGxC,IAAI,KAAS,EAAK,OAAO,WAAW,IAAQ,GAAG;GAC7C,IAAM,IAAM,EAAK,OAAO,MAAM,GAAG,CAAK,GAChC,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAAM,EAAK,OAAO,EAAK,OAAO,SAAS,IAAI,EAAE,GACxF,IAAQ,EAAe,CAAG,GAAG,IAAQ,EAAe,CAAM;GAChE,IAAI,MAAU,KAAO,MAAU,GAAQ;IACrC,IAAM,IAAS,CAAC,GAAG,CAAK;IACxB,KAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,KAAK,EAAO,KAAK,EAAM,EAAE;IAChE,OAAO;KAAE,GAAG;KAAM;IAAO;GAC3B;EACF;CACF;CACA,OAAO;AACT;AAGA,SAAgB,EAAgF,GAAY;CAC1G,OAAO;EACL,GAAG;EACH,WAAW,GAAS;GAClB,IAAM,IAAc,EAAK,WAAW,CAAO;GAC3C,OAAO;IACL,GAAG;IACH,OAAO,GAAe;KACpB,IAAM,IAAQ,EAAY,OAAO,CAAa;KAC9C,OAAO;MAAE,GAAG;MAAO,OAAO,EAAM,MAAM,IAAI,CAAe;KAAE;IAC7D;GACF;EACF;CACF;AACF"}

package/dist/components/pro/Flow/nodes/demandRender.d.ts

@@ -0,0 +1,11 @@
+/** One pending frame at most; OrbitControls.update() reports when damping settles. */
+export declare function createDemandRender({ update, render, request, cancel, }: {
+    update: () => boolean;
+    render: () => void;
+    request?: (callback: FrameRequestCallback) => number;
+    cancel?: (id: number) => void;
+}): {
+    invalidate: () => void;
+    setActive(next: boolean): void;
+    dispose(): void;
+};

package/dist/components/pro/Flow/nodes/demandRender.js

@@ -0,0 +1,26 @@
+//#region src/components/pro/Flow/nodes/demandRender.ts
+function e({ update: e, render: t, request: n = requestAnimationFrame, cancel: r = cancelAnimationFrame }) {
+	let i = null, a = !1, o = !1, s = !1, c = !0, l = () => {
+		a && !o && i === null && (i = n(u));
+	}, u = () => {
+		if (i = null, !a || o) return;
+		s = !0;
+		let n = e();
+		s = !1, (c || n) && t(), c = !1, n && l();
+	}, d = () => {
+		s || o || (c = !0, l());
+	};
+	return {
+		invalidate: d,
+		setActive(e) {
+			a === e || o || (a = e, a ? d() : i !== null && (r(i), i = null));
+		},
+		dispose() {
+			o = !0, i !== null && r(i), i = null;
+		}
+	};
+}
+//#endregion
+export { e as createDemandRender };
+
+//# sourceMappingURL=demandRender.js.map

package/dist/components/pro/Flow/nodes/demandRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demandRender.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/demandRender.ts"],"sourcesContent":["/** One pending frame at most; OrbitControls.update() reports when damping settles. */\nexport function createDemandRender({\n  update,\n  render,\n  request = requestAnimationFrame,\n  cancel = cancelAnimationFrame,\n}: {\n  update: () => boolean;\n  render: () => void;\n  request?: (callback: FrameRequestCallback) => number;\n  cancel?: (id: number) => void;\n}) {\n  let frame: number | null = null;\n  let active = false;\n  let disposed = false;\n  let updating = false;\n  let dirty = true;\n\n  const schedule = () => {\n    if (active && !disposed && frame === null) frame = request(tick);\n  };\n  const tick = () => {\n    frame = null;\n    if (!active || disposed) return;\n    updating = true;\n    const changed = update();\n    updating = false;\n    if (dirty || changed) render();\n    dirty = false;\n    if (changed) schedule();\n  };\n  const invalidate = () => {\n    // update() emits change synchronously; its boolean result already accounts\n    // for that change. Scheduling here would leave an extra perpetual RAF.\n    if (updating || disposed) return;\n    dirty = true;\n    schedule();\n  };\n  return {\n    invalidate,\n    setActive(next: boolean) {\n      if (active === next || disposed) return;\n      active = next;\n      if (active) invalidate();\n      else if (frame !== null) {\n        cancel(frame);\n        frame = null;\n      }\n    },\n    dispose() {\n      disposed = true;\n      if (frame !== null) cancel(frame);\n      frame = null;\n    },\n  };\n}\n"],"mappings":";AACA,SAAgB,EAAmB,EACjC,WACA,WACA,aAAU,uBACV,YAAS,wBAMR;CACD,IAAI,IAAuB,MACvB,IAAS,IACT,IAAW,IACX,IAAW,IACX,IAAQ,IAEN,UAAiB;EACrB,AAAI,KAAU,CAAC,KAAY,MAAU,SAAM,IAAQ,EAAQ,CAAI;CACjE,GACM,UAAa;EAEjB,IADA,IAAQ,MACJ,CAAC,KAAU,GAAU;EACzB,IAAW;EACX,IAAM,IAAU,EAAO;EAIvB,AAHA,IAAW,KACP,KAAS,MAAS,EAAO,GAC7B,IAAQ,IACJ,KAAS,EAAS;CACxB,GACM,UAAmB;EAGnB,KAAY,MAChB,IAAQ,IACR,EAAS;CACX;CACA,OAAO;EACL;EACA,UAAU,GAAe;GACnB,MAAW,KAAQ,MACvB,IAAS,GACL,IAAQ,EAAW,IACd,MAAU,SACjB,EAAO,CAAK,GACZ,IAAQ;EAEZ;EACA,UAAU;GAGR,AAFA,IAAW,IACP,MAAU,QAAM,EAAO,CAAK,GAChC,IAAQ;EACV;CACF;AACF"}