dishui 0.0.64 → 0.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Badge/index.js +12 -9
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Button/index.js +43 -40
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/index.d.ts +11 -0
- package/dist/components/Card/index.js +62 -37
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/Chart/Chart.js.map +1 -1
- package/dist/components/Checkbox/index.js +32 -30
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/Demo/index.js.map +1 -1
- package/dist/components/EmptyState/index.d.ts +4 -1
- package/dist/components/EmptyState/index.js +3 -3
- package/dist/components/EmptyState/index.js.map +1 -1
- package/dist/components/FileUploader/DropZone.js.map +1 -1
- package/dist/components/FileUploader/FileItem.js.map +1 -1
- package/dist/components/FileUploader/FileUploader.js.map +1 -1
- package/dist/components/FileUploader/UploadQueue.js.map +1 -1
- package/dist/components/Input/index.js +30 -30
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Label/index.js +41 -40
- package/dist/components/Label/index.js.map +1 -1
- package/dist/components/List/index.js +47 -32
- package/dist/components/List/index.js.map +1 -1
- package/dist/components/Markdown/Markdown.js +61 -57
- package/dist/components/Markdown/Markdown.js.map +1 -1
- package/dist/components/Markdown/markdownComponents.js +49 -49
- package/dist/components/Markdown/markdownComponents.js.map +1 -1
- package/dist/components/Modal/index.d.ts +7 -3
- package/dist/components/Modal/index.js +77 -65
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Page/index.d.ts +58 -0
- package/dist/components/Page/index.js +74 -0
- package/dist/components/Page/index.js.map +1 -0
- package/dist/components/PageHeader/index.js.map +1 -1
- package/dist/components/Select/index.js +0 -3
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/SidebarToggleButton/index.js.map +1 -1
- package/dist/components/StatCard/index.d.ts +3 -1
- package/dist/components/StatCard/index.js +39 -11
- package/dist/components/StatCard/index.js.map +1 -1
- package/dist/components/Table/index.js +103 -85
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +19 -5
- package/dist/components/Tabs/index.js +32 -13
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/Tree/Tree.js.map +1 -1
- package/dist/components/pro/ArticleContextMenu/index.js.map +1 -1
- package/dist/components/pro/ArticleControl/ArticleControl2.js.map +1 -1
- package/dist/components/pro/CodeEditor/editors/CodeEditor.js +141 -134
- package/dist/components/pro/CodeEditor/editors/CodeEditor.js.map +1 -1
- package/dist/components/pro/CodeEditor/editors/MarkdownEditor.js +81 -78
- package/dist/components/pro/CodeEditor/editors/MarkdownEditor.js.map +1 -1
- package/dist/components/pro/CodeEditor/panels/FootnotePanel.js.map +1 -1
- package/dist/components/pro/CodeEditor/panels/HistoryPanel.js.map +1 -1
- package/dist/components/pro/CodeEditor/panels/OutlinePanel.js.map +1 -1
- package/dist/components/pro/CodeEditor/panels/TableOfContentsPanel.js.map +1 -1
- package/dist/components/pro/CodeEditor/panels/VariablePanel.js.map +1 -1
- package/dist/components/pro/CodeEditor/themes.js +59 -59
- package/dist/components/pro/CodeEditor/themes.js.map +1 -1
- package/dist/components/pro/DataTable/DataTable.js +49 -48
- package/dist/components/pro/DataTable/DataTable.js.map +1 -1
- package/dist/components/pro/DataTable/Filters.js +42 -42
- package/dist/components/pro/DataTable/Filters.js.map +1 -1
- package/dist/components/pro/DataTable/PivotPanel.js.map +1 -1
- package/dist/components/pro/DataTable/PivotView.js +35 -32
- package/dist/components/pro/DataTable/PivotView.js.map +1 -1
- package/dist/components/pro/DataTable/components/BulkActions.js.map +1 -1
- package/dist/components/pro/DataTable/components/ColumnSelector.js.map +1 -1
- package/dist/components/pro/DataTable/components/FilterBar.js.map +1 -1
- package/dist/components/pro/DataTable/components/TableBody.js.map +1 -1
- package/dist/components/pro/DataTable/components/TableHeader.js.map +1 -1
- package/dist/components/pro/DataTable/components/TablePagination.js.map +1 -1
- package/dist/components/pro/DataTable/components/TableToolbar.js.map +1 -1
- package/dist/components/pro/DataTable/pivotExtension.js.map +1 -1
- package/dist/components/pro/DataTable/rowDetailExtension.js.map +1 -1
- package/dist/components/pro/DataTable/tanstack-table.js +37 -37
- package/dist/components/pro/DataTable/tanstack-table.js.map +1 -1
- package/dist/components/pro/FileExplorer/Breadcrumb.js +53 -53
- package/dist/components/pro/FileExplorer/Breadcrumb.js.map +1 -1
- package/dist/components/pro/FileExplorer/CreateDialog.js.map +1 -1
- package/dist/components/pro/FileExplorer/FileExplorer.js.map +1 -1
- package/dist/components/pro/FileExplorer/FileIcon.js +22 -22
- package/dist/components/pro/FileExplorer/FileIcon.js.map +1 -1
- package/dist/components/pro/FileExplorer/GridView.js.map +1 -1
- package/dist/components/pro/FileExplorer/ListView.js.map +1 -1
- package/dist/components/pro/FileExplorer/Toolbar.js.map +1 -1
- package/dist/components/pro/Flow/Flow.js +496 -494
- package/dist/components/pro/Flow/Flow.js.map +1 -1
- package/dist/components/pro/Flow/FlowCanvas.js +916 -917
- package/dist/components/pro/Flow/FlowCanvas.js.map +1 -1
- package/dist/components/pro/Flow/context/FlowUIContext.js.map +1 -1
- package/dist/components/pro/Flow/edges/EdgeRenderer.js +59 -59
- package/dist/components/pro/Flow/edges/EdgeRenderer.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useClipboard.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useDeleteSelection.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useEdgeMutations.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useLayoutActions.js +9 -11
- package/dist/components/pro/Flow/hooks/useLayoutActions.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useLineMutations.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useMindMap.js.map +1 -1
- package/dist/components/pro/Flow/hooks/useNodeMutations.js.map +1 -1
- package/dist/components/pro/Flow/lines/FreehandTool.js +9 -9
- package/dist/components/pro/Flow/lines/FreehandTool.js.map +1 -1
- package/dist/components/pro/Flow/lines/LineRenderer.js +5 -5
- package/dist/components/pro/Flow/lines/LineRenderer.js.map +1 -1
- package/dist/components/pro/Flow/nodes/DataNodeView.js +113 -93
- package/dist/components/pro/Flow/nodes/DataNodeView.js.map +1 -1
- package/dist/components/pro/Flow/nodes/MediaContent.js.map +1 -1
- package/dist/components/pro/Flow/nodes/MediaOverlay.js.map +1 -1
- package/dist/components/pro/Flow/nodes/Model3DView.js +1 -1
- package/dist/components/pro/Flow/nodes/Model3DView.js.map +1 -1
- package/dist/components/pro/Flow/nodes/NodeRenderer.js +118 -118
- package/dist/components/pro/Flow/nodes/NodeRenderer.js.map +1 -1
- package/dist/components/pro/Flow/nodes/dataUtils.js.map +1 -1
- package/dist/components/pro/Flow/nodes/shapes.js +1 -3
- package/dist/components/pro/Flow/nodes/shapes.js.map +1 -1
- package/dist/components/pro/Flow/panels/AIPanel.js.map +1 -1
- package/dist/components/pro/Flow/panels/Breadcrumb.js.map +1 -1
- package/dist/components/pro/Flow/panels/ContextMenu.js.map +1 -1
- package/dist/components/pro/Flow/panels/DataInspectorSection.js.map +1 -1
- package/dist/components/pro/Flow/panels/ExpandableTextarea.js.map +1 -1
- package/dist/components/pro/Flow/panels/FlowPanelGroup.js.map +1 -1
- package/dist/components/pro/Flow/panels/FlowToolbar.js +97 -97
- package/dist/components/pro/Flow/panels/FlowToolbar.js.map +1 -1
- package/dist/components/pro/Flow/panels/InspectorPanel.js +57 -57
- package/dist/components/pro/Flow/panels/InspectorPanel.js.map +1 -1
- package/dist/components/pro/Flow/panels/OutlinePanel.js +26 -22
- package/dist/components/pro/Flow/panels/OutlinePanel.js.map +1 -1
- package/dist/components/pro/Flow/panels/PresentationMode.js +18 -16
- package/dist/components/pro/Flow/panels/PresentationMode.js.map +1 -1
- package/dist/components/pro/Flow/panels/ProjectTitle.js.map +1 -1
- package/dist/components/pro/Flow/panels/ShapePalette.js +109 -104
- package/dist/components/pro/Flow/panels/ShapePalette.js.map +1 -1
- package/dist/components/pro/Flow/panels/toolbarIcons.js.map +1 -1
- package/dist/components/pro/RichTextEditor/AIRewrite.js.map +1 -1
- package/dist/components/pro/RichTextEditor/BlockHandle.js.map +1 -1
- package/dist/components/pro/RichTextEditor/BubbleToolbar.js.map +1 -1
- package/dist/components/pro/RichTextEditor/CommentDialog.js.map +1 -1
- package/dist/components/pro/RichTextEditor/CommentPanel.js.map +1 -1
- package/dist/components/pro/RichTextEditor/CommentPopover.js.map +1 -1
- package/dist/components/pro/RichTextEditor/ContextMenu.js.map +1 -1
- package/dist/components/pro/RichTextEditor/RichTextEditor.js.map +1 -1
- package/dist/components/pro/RichTextEditor/SlashMenu.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/ColorPicker.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/FloatingDialogMenu.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/MarkdownTemplates.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/SelectDropdown.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/TableOpsMenu.js.map +1 -1
- package/dist/components/pro/RichTextEditor/Toolbar/Toolbar.js.map +1 -1
- package/dist/components/pro/RichTextEditor/extensions/CodeBlockView.js.map +1 -1
- package/dist/components/pro/RichTextEditor/extensions/FloatingDialog.js.map +1 -1
- package/dist/components/pro/RichTextEditor/extensions/MarkdownBlock.js.map +1 -1
- package/dist/contexts/AppContext.js.map +1 -1
- package/dist/dishui.css +1 -1
- package/dist/hooks/useTableColumns.js +7 -8
- package/dist/hooks/useTableColumns.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +227 -221
- package/dist/layouts/MainLayout.js +22 -22
- package/dist/layouts/MainLayout.js.map +1 -1
- package/dist/layouts/Navbar.js.map +1 -1
- package/dist/layouts/Sidebar.js +94 -73
- package/dist/layouts/Sidebar.js.map +1 -1
- package/dist/layouts/headbar/Headbar.js.map +1 -1
- package/dist/layouts/headbar/HeadbarLangSwitcher.js.map +1 -1
- package/dist/layouts/headbar/HeadbarSearch.js.map +1 -1
- package/dist/layouts/headbar/HeadbarThemeSwitcher.js +11 -11
- package/dist/layouts/headbar/HeadbarThemeSwitcher.js.map +1 -1
- package/dist/layouts/headbar/HeadbarTitle.js.map +1 -1
- package/dist/utils/i18n.js +10 -10
- package/dist/utils/i18n.js.map +1 -1
- package/dist/utils/menu.js.map +1 -1
- package/dist/utils/routerBuilder.js +17 -15
- package/dist/utils/routerBuilder.js.map +1 -1
- package/dist/utils/themes.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataNodeView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/DataNodeView.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport Chart, {\n areaY,\n barX,\n barY,\n defineChart,\n dot,\n lineY,\n} from '../../../Chart';\nimport { scaleBand } from '@tanstack/charts/scales/band';\nimport { scaleLinear } from '@tanstack/charts/scales/linear';\nimport { scalePoint } from '@tanstack/charts/scales/point';\nimport { polar, pie, radialArc } from '@tanstack/charts/polar';\nimport DataTable, {\n createColumn,\n usePivotExtension,\n type ColumnDef,\n type PivotField,\n type PivotValue,\n} from '../../DataTable';\nimport type { FlowDataConfig } from '../types';\nimport { DATA_CHART_PALETTE, labelFor } from './dataUtils';\n\n/** Renders the table (optionally pivoted) surface of a Data node. */\nfunction DataTableView({ config }: { config: FlowDataConfig }) {\n const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(\n () =>\n config.columns.map((col) =>\n createColumn<Record<string, unknown>>(col.key, col.label ?? col.key, {\n enableSorting: true,\n }),\n ),\n [config.columns],\n );\n\n const pivotFields = useMemo<PivotField[]>(\n () =>\n config.columns.map((col) => ({\n field: col.key,\n label: col.label ?? col.key,\n numeric: col.type === 'number',\n })),\n [config.columns],\n );\n\n const pivot = config.pivot;\n // Remount the pivot extension when the inspector-controlled bits change, so\n // the enabled toggle / initial fields take effect (the extension keeps its\n // own interactive state otherwise). Panel placement stays reactive.\n const pivotKey = JSON.stringify({\n e: !!pivot?.enabled,\n r: pivot?.rowFields ?? [],\n c: pivot?.colFields ?? [],\n v: pivot?.values ?? [],\n });\n\n return (\n <div className=\"flow-data-table\">\n <PivotableTable\n key={pivotKey}\n config={config}\n columns={columns}\n pivotFields={pivotFields}\n />\n </div>\n );\n}\n\nfunction PivotableTable({\n config,\n columns,\n pivotFields,\n}: {\n config: FlowDataConfig;\n columns: ColumnDef<Record<string, unknown>>[];\n pivotFields: PivotField[];\n}) {\n const pivot = config.pivot;\n const pivotExtension = usePivotExtension<Record<string, unknown>>({\n fields: pivotFields,\n initialActive: !!pivot?.enabled,\n initialRowFields: pivot?.rowFields ?? [],\n initialColFields: pivot?.colFields ?? [],\n initialValues: (pivot?.values as PivotValue[] | undefined) ?? [],\n panelPlacement: pivot?.panelPlacement ?? 'top',\n lang: 'zh',\n // 透视开关由 Inspector 统一控制,节点内不再渲染开关,避免占用空间。\n hideModeToggle: true,\n });\n\n return (\n <DataTable<Record<string, unknown>>\n data={config.rows}\n columns={columns}\n enableSorting\n enablePagination={config.rows.length > 50}\n pageSize={50}\n extensions={[pivotExtension]}\n />\n );\n}\n\n/** Builds a TanStack Charts definition from the Data node's chart config. */\nfunction useChartDefinition(config: FlowDataConfig, primaryColor?: string) {\n return useMemo(() => {\n const chart = config.chart;\n if (!chart) return null;\n const xField = chart.xField;\n const yFields = (chart.yFields ?? []).filter(Boolean);\n if (!xField || yFields.length === 0) return null;\n\n const rows = config.rows as any[];\n // Series color resolution order: an explicit per-series override, then a\n // configured chart palette, then the node's own `color` (the drawing's\n // primary color), then the built-in default palette.\n const paletteRange = chart.palette?.length ? chart.palette : null;\n const seriesColor = (field: string, i: number) =>\n chart.seriesColors?.[field]\n ?? paletteRange?.[i % paletteRange.length]\n ?? primaryColor\n ?? DATA_CHART_PALETTE[i % DATA_CHART_PALETTE.length];\n\n switch (chart.type) {\n case 'line':\n return defineChart({\n x: { scale: () => scalePoint<string>().padding(0.35) },\n y: { scale: scaleLinear, nice: true, grid: true },\n marks: yFields.map((yf, i) =>\n lineY(rows, { id: yf, x: xField, y: yf, stroke: seriesColor(yf, i), points: true }),\n ),\n });\n\n case 'area':\n return defineChart({\n x: { scale: () => scalePoint<string>().padding(0.35) },\n y: { scale: scaleLinear, nice: true, grid: true },\n marks: yFields.map((yf, i) =>\n areaY(rows, {\n id: yf,\n x: xField,\n y: yf,\n fill: seriesColor(yf, i),\n fillOpacity: 0.35,\n stroke: seriesColor(yf, i),\n }),\n ),\n });\n\n case 'scatter':\n // Scatter uses the first two numeric fields as x/y.\n return defineChart({\n x: { scale: scaleLinear, nice: true, grid: true },\n y: { scale: scaleLinear, nice: true, grid: true },\n marks: [\n dot(rows, {\n id: 'points',\n x: xField,\n y: yFields[0],\n r: 6,\n fill: seriesColor(yFields[0], 0),\n }),\n ],\n });\n\n case 'pie': {\n // Part-to-whole via a polar pie over the first measure. Duplicate\n // categories are aggregated (summed) so slices are unique.\n const yf = yFields[0];\n const totals = new Map<string, number>();\n for (const r of rows) {\n const k = String(r[xField] ?? '');\n totals.set(k, (totals.get(k) ?? 0) + (Number(r[yf]) || 0));\n }\n const pieRows = Array.from(totals, ([cat, value]) => ({ cat, value }));\n const arranged = pie(pieRows, { value: 'value' });\n const range = chart.palette?.length ? chart.palette : DATA_CHART_PALETTE;\n return defineChart({\n marks: [\n polar({\n marks: [\n radialArc(arranged, {\n startAngle: 'startAngle',\n endAngle: 'endAngle',\n padAngle: 'padAngle',\n innerRadius: 0,\n color: 'cat',\n key: 'cat',\n }),\n ],\n }),\n ],\n color: { domain: pieRows.map((d) => d.cat), range },\n });\n }\n\n case 'barHorizontal':\n return defineChart({\n y: { scale: () => scaleBand<string>().padding(0.25) },\n x: { scale: scaleLinear, nice: true, grid: true },\n marks: yFields.map((yf, i) =>\n barX(rows, { id: yf, y: xField, x: yf, fill: seriesColor(yf, i), radius: 4 }),\n ),\n });\n\n case 'bar':\n default:\n return defineChart({\n x: { scale: () => scaleBand<string>().padding(0.25) },\n y: { scale: scaleLinear, nice: true, grid: true },\n marks: yFields.map((yf, i) =>\n barY(rows, { id: yf, x: xField, y: yf, fill: seriesColor(yf, i), radius: 4 }),\n ),\n });\n }\n }, [config, primaryColor]);\n}\n\n/** Renders the chart surface of a Data node. */\nfunction DataChartView({ config, surfaceColor, textColor, primaryColor }: { config: FlowDataConfig; surfaceColor?: string; textColor?: string; primaryColor?: string }) {\n const definition = useChartDefinition(config, primaryColor);\n const chart = config.chart;\n\n // TanStack Charts needs a concrete pixel height; inside the media overlay the\n // node box is a fixed size but percentage heights don't always resolve before\n // first paint (esp. in read-only / preview renders), leaving the chart blank.\n // Measure the container and pass an explicit height.\n const wrapRef = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n useLayoutEffect(() => {\n const el = wrapRef.current;\n if (!el) return;\n const measure = () => {\n const rect = el.getBoundingClientRect();\n // getBoundingClientRect includes the overlay's zoom scale; divide it out\n // so the chart is laid out in unscaled (world) pixels.\n const scale = rect.width && el.offsetWidth ? rect.width / el.offsetWidth : 1;\n setSize({\n w: Math.max(1, Math.round(rect.width / (scale || 1))),\n h: Math.max(1, Math.round(rect.height / (scale || 1))),\n });\n };\n measure();\n const ro = new ResizeObserver(measure);\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n if (!definition) {\n return (\n <div className=\"flow-data-empty\">\n {config.columns.length === 0\n ? '尚无数据,请在属性面板上传或填写数据'\n : '请在属性面板选择 X 轴与至少一个数值字段'}\n </div>\n );\n }\n\n const label =\n chart && chart.xField\n ? `${labelFor(config.columns, chart.xField)} · ${(chart.yFields ?? [])\n .map((f) => labelFor(config.columns, f))\n .join(', ')}`\n : 'Chart';\n\n return (\n <div\n className=\"flow-data-chart\"\n ref={wrapRef}\n style={textColor ? ({ color: textColor } as React.CSSProperties) : undefined}\n >\n {size.h > 0 && (\n <Chart\n definition={definition as any}\n aria-label={label}\n height={size.h}\n // Let the media node's fill show through instead of the Chart's\n // default opaque white card, and let axis/label text inherit the\n // node's text color so the chart matches Archify (or any) theming.\n style={{\n background: surfaceColor ?? 'transparent',\n borderColor: 'transparent',\n color: textColor ?? 'inherit',\n padding: 0,\n }}\n />\n )}\n </div>\n );\n}\n\n/** Dispatches to the table or chart surface based on the node's view. */\nexport function DataNodeView({\n config,\n surfaceColor,\n textColor,\n primaryColor,\n}: {\n config: FlowDataConfig;\n surfaceColor?: string;\n textColor?: string;\n primaryColor?: string;\n}) {\n if (!config || config.columns.length === 0) {\n return <div className=\"flow-data-empty\">尚无数据,请在属性面板上传或填写数据</div>;\n }\n return config.view === 'chart' ? (\n <DataChartView config={config} surfaceColor={surfaceColor} textColor={textColor} primaryColor={primaryColor} />\n ) : (\n <DataTableView config={config} />\n );\n}\n\nexport default DataNodeView;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataNodeView.js","names":[],"sources":["../../../../../src/components/pro/Flow/nodes/DataNodeView.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState, useLayoutEffect } from 'react';\nimport Chart, {\n areaY,\n barX,\n barY,\n defineChart,\n dot,\n lineY,\n} from '../../../Chart';\nimport { scaleBand } from '@tanstack/charts/scales/band';\nimport { scaleLinear } from '@tanstack/charts/scales/linear';\nimport { scalePoint } from '@tanstack/charts/scales/point';\nimport { polar, pie, radialArc } from '@tanstack/charts/polar';\nimport DataTable, {\n createColumn,\n usePivotExtension,\n type ColumnDef,\n type PivotField,\n type PivotValue,\n} from '../../DataTable';\nimport type { FlowDataConfig } from '../types';\nimport { DATA_CHART_PALETTE, labelFor } from './dataUtils';\n\n/** Renders the table (optionally pivoted) surface of a Data node. */\nfunction DataTableView({ config }: { config: FlowDataConfig }) {\n const columns = useMemo<ColumnDef<Record<string, unknown>>[]>(\n () =>\n config.columns.map((col) =>\n createColumn<Record<string, unknown>>(col.key, col.label ?? col.key, {\n enableSorting: true,\n }),\n ),\n [config.columns],\n );\n\n const pivotFields = useMemo<PivotField[]>(\n () =>\n config.columns.map((col) => ({\n field: col.key,\n label: col.label ?? col.key,\n numeric: col.type === 'number',\n })),\n [config.columns],\n );\n\n const pivot = config.pivot;\n // Remount the pivot extension when the inspector-controlled bits change, so\n // the enabled toggle / initial fields take effect (the extension keeps its\n // own interactive state otherwise). Panel placement stays reactive.\n const pivotKey = JSON.stringify({\n e: !!pivot?.enabled,\n r: pivot?.rowFields ?? [],\n c: pivot?.colFields ?? [],\n v: pivot?.values ?? [],\n });\n\n return (\n <div className=\"flow-data-table\">\n <PivotableTable\n key={pivotKey}\n config={config}\n columns={columns}\n pivotFields={pivotFields}\n />\n </div>\n );\n}\n\nfunction PivotableTable({\n config,\n columns,\n pivotFields,\n}: {\n config: FlowDataConfig;\n columns: ColumnDef<Record<string, unknown>>[];\n pivotFields: PivotField[];\n}) {\n const pivot = config.pivot;\n const pivotExtension = usePivotExtension<Record<string, unknown>>({\n fields: pivotFields,\n initialActive: !!pivot?.enabled,\n initialRowFields: pivot?.rowFields ?? [],\n initialColFields: pivot?.colFields ?? [],\n initialValues: (pivot?.values as PivotValue[] | undefined) ?? [],\n panelPlacement: pivot?.panelPlacement ?? 'top',\n lang: 'zh',\n // 透视开关由 Inspector 统一控制,节点内不再渲染开关,避免占用空间。\n hideModeToggle: true,\n });\n\n return (\n <DataTable<Record<string, unknown>>\n data={config.rows}\n columns={columns}\n enableSorting\n enablePagination={config.rows.length > 50}\n pageSize={50}\n extensions={[pivotExtension]}\n />\n );\n}\n\n/** Builds a TanStack Charts definition from the Data node's chart config. */\nfunction useChartDefinition(config: FlowDataConfig, primaryColor?: string) {\n return useMemo(() => {\n const chart = config.chart;\n if (!chart) return null;\n const xField = chart.xField;\n const yFields = (chart.yFields ?? []).filter(Boolean);\n if (!xField || yFields.length === 0) return null;\n\n const rows = config.rows as any[];\n // Series color resolution order: an explicit per-series override, then a\n // configured chart palette, then the node's own `color` (the drawing's\n // primary color), then the built-in default palette.\n const paletteRange = chart.palette?.length ? chart.palette : null;\n const seriesColor = (field: string, i: number) =>\n chart.seriesColors?.[field]\n ?? paletteRange?.[i % paletteRange.length]\n ?? primaryColor\n ?? DATA_CHART_PALETTE[i % DATA_CHART_PALETTE.length];\n\n switch (chart.type) {\n case 'line':\n return defineChart({\n marks: yFields.map((yf, i) =>\n lineY(rows, { id: yf, x: xField, y: yf, stroke: seriesColor(yf, i), points: true }),\n ),\n scales: {\n x: { scale: () => scalePoint<string>().padding(0.35) },\n y: { scale: scaleLinear, nice: true, grid: true },\n },\n });\n\n case 'area':\n return defineChart({\n marks: yFields.map((yf, i) =>\n areaY(rows, {\n id: yf,\n x: xField,\n y: yf,\n fill: seriesColor(yf, i),\n fillOpacity: 0.35,\n stroke: seriesColor(yf, i),\n }),\n ),\n scales: {\n x: { scale: () => scalePoint<string>().padding(0.35) },\n y: { scale: scaleLinear, nice: true, grid: true },\n },\n });\n\n case 'scatter':\n // Scatter uses the first two numeric fields as x/y.\n return defineChart({\n marks: [\n dot(rows, {\n id: 'points',\n x: xField,\n y: yFields[0],\n r: 6,\n fill: seriesColor(yFields[0], 0),\n }),\n ],\n scales: {\n x: { scale: scaleLinear, nice: true, grid: true },\n y: { scale: scaleLinear, nice: true, grid: true },\n },\n });\n\n case 'pie': {\n // Part-to-whole via a polar pie over the first measure. Duplicate\n // categories are aggregated (summed) so slices are unique.\n const yf = yFields[0];\n const totals = new Map<string, number>();\n for (const r of rows) {\n const k = String(r[xField] ?? '');\n totals.set(k, (totals.get(k) ?? 0) + (Number(r[yf]) || 0));\n }\n const pieRows = Array.from(totals, ([cat, value]) => ({ cat, value }));\n const arranged = pie(pieRows, { value: 'value' });\n const range = chart.palette?.length ? chart.palette : DATA_CHART_PALETTE;\n return defineChart({\n marks: [\n polar({\n marks: [\n radialArc(arranged, {\n startAngle: 'startAngle',\n endAngle: 'endAngle',\n padAngle: 'padAngle',\n innerRadius: 0,\n color: 'cat',\n key: 'cat',\n }),\n ],\n scales: { angle: null, radius: null },\n }),\n ],\n scales: { x: null, y: null },\n color: { domain: pieRows.map((d) => d.cat), range },\n });\n }\n\n case 'barHorizontal':\n return defineChart({\n marks: yFields.map((yf, i) =>\n barX(rows, { id: yf, y: xField, x: yf, fill: seriesColor(yf, i), radius: 4 }),\n ),\n scales: {\n y: { scale: () => scaleBand<string>().padding(0.25) },\n x: { scale: scaleLinear, nice: true, grid: true },\n },\n });\n\n case 'bar':\n default:\n return defineChart({\n marks: yFields.map((yf, i) =>\n barY(rows, { id: yf, x: xField, y: yf, fill: seriesColor(yf, i), radius: 4 }),\n ),\n scales: {\n x: { scale: () => scaleBand<string>().padding(0.25) },\n y: { scale: scaleLinear, nice: true, grid: true },\n },\n });\n }\n }, [config, primaryColor]);\n}\n\n/** Renders the chart surface of a Data node. */\nfunction DataChartView({ config, surfaceColor, textColor, primaryColor }: { config: FlowDataConfig; surfaceColor?: string; textColor?: string; primaryColor?: string }) {\n const definition = useChartDefinition(config, primaryColor);\n const chart = config.chart;\n\n // TanStack Charts needs a concrete pixel height; inside the media overlay the\n // node box is a fixed size but percentage heights don't always resolve before\n // first paint (esp. in read-only / preview renders), leaving the chart blank.\n // Measure the container and pass an explicit height.\n const wrapRef = useRef<HTMLDivElement>(null);\n const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });\n useLayoutEffect(() => {\n const el = wrapRef.current;\n if (!el) return;\n const measure = () => {\n const rect = el.getBoundingClientRect();\n // getBoundingClientRect includes the overlay's zoom scale; divide it out\n // so the chart is laid out in unscaled (world) pixels.\n const scale = rect.width && el.offsetWidth ? rect.width / el.offsetWidth : 1;\n setSize({\n w: Math.max(1, Math.round(rect.width / (scale || 1))),\n h: Math.max(1, Math.round(rect.height / (scale || 1))),\n });\n };\n measure();\n const ro = new ResizeObserver(measure);\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n if (!definition) {\n return (\n <div className=\"flow-data-empty\">\n {config.columns.length === 0\n ? '尚无数据,请在属性面板上传或填写数据'\n : '请在属性面板选择 X 轴与至少一个数值字段'}\n </div>\n );\n }\n\n const label =\n chart && chart.xField\n ? `${labelFor(config.columns, chart.xField)} · ${(chart.yFields ?? [])\n .map((f) => labelFor(config.columns, f))\n .join(', ')}`\n : 'Chart';\n\n return (\n <div\n className=\"flow-data-chart\"\n ref={wrapRef}\n style={textColor ? ({ color: textColor } as React.CSSProperties) : undefined}\n >\n {size.h > 0 && (\n <Chart\n definition={definition as any}\n aria-label={label}\n height={size.h}\n // Let the media node's fill show through instead of the Chart's\n // default opaque white card, and let axis/label text inherit the\n // node's text color so the chart matches Archify (or any) theming.\n style={{\n background: surfaceColor ?? 'transparent',\n borderColor: 'transparent',\n color: textColor ?? 'inherit',\n padding: 0,\n }}\n />\n )}\n </div>\n );\n}\n\n/** Dispatches to the table or chart surface based on the node's view. */\nexport function DataNodeView({\n config,\n surfaceColor,\n textColor,\n primaryColor,\n}: {\n config: FlowDataConfig;\n surfaceColor?: string;\n textColor?: string;\n primaryColor?: string;\n}) {\n if (!config || config.columns.length === 0) {\n return <div className=\"flow-data-empty\">尚无数据,请在属性面板上传或填写数据</div>;\n }\n return config.view === 'chart' ? (\n <DataChartView config={config} surfaceColor={surfaceColor} textColor={textColor} primaryColor={primaryColor} />\n ) : (\n <DataTableView config={config} />\n );\n}\n\nexport default DataNodeView;\n"],"mappings":"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"}
|
|
@@ -1 +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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"}
|
|
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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"}
|
|
@@ -1 +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,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,
|
|
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,KAAA,MACzB,OAAO,mBAAA,EAAkB,KAAA,CAAM,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CACpE,GAGM,IAAN,cAAiC,EAAM,UAGrC;AAAA,EACA,YAAY,GAAsC;AAChD,UAAM,CAAK,GACX,KAAK,QAAQ,EAAE,OAAO,KAAK;AAAA,EAC7B;AAAA,EACA,OAAO,yBAAyB,GAAc;AAC5C,WAAO,EAAE,OAAA,EAAM;AAAA,EACjB;AAAA,EACA,SAAS;AACP,WAAI,KAAK,MAAM,QACN,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAU;AAAA,MAAoB,UAAA,KAAK,MAAM,MAAM;AAAA,IAAa,CAAA,IAEnE,KAAK,MAAM;AAAA,EACpB;AACF;AAaA,SAAgB,IAAe;AAC7B,QAAM,EAAE,eAAA,GAAe,WAAA,EAAA,IAAc,EAAe,GAC9C,EAAE,UAAA,GAAU,gBAAA,EAAA,IAAmB,EAAU,GAEzC,IAAa,EAAA,MACX,EAAc,MAAM,OAAA,CAAQ,MAAM,EAAE,SAAS,WAAW,GAC9D,CAAC,EAAc,KAAK,CACtB;AAEA,MAAI,EAAW,WAAW,EAAG,QAAO;AAEpC,QAAM,EAAE,GAAG,GAAI,GAAG,GAAI,MAAA,EAAA,IAAS;AAE/B,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,IACZ,UAAA,EAAW,IAAA,CAAK,MAAS;AAExB,YAAM,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;AACzF,aACE,gBAAA,EAAC,OAAD;AAAA,QAEE,WAAU;AAAA,QACV,mBAAiB,EAAK;AAAA,QACtB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAA;AAAA,UACA,KAAA;AAAA,UACA,OAAO,EAAK;AAAA,UACZ,QAAQ,EAAK;AAAA,UAGb,WAAW,SAAS,CAAA;AAAA,UACpB,iBAAiB;AAAA,UAEjB,eAAe;AAAA,QACjB;AAAA,QAEA,UAAA,gBAAA,EAAC,OAAD;AAAA,UACE,WAAU;AAAA,UACV,SAAA,CAAU,MAAM,EAAE,gBAAgB;AAAA,UAClC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,OAAO;AAAA,UACT;AAAA,UAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU,gBAAA,EAAC,OAAD;AAAA,cAAK,WAAU;AAAA,cAAqB,UAAA;AAAA,YAAM,CAAA;AAAA,YAC5D,UAAA,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAA;AAAA,cAAmB,aAAA;AAAA,YAAc,CAAA,EACnC,CAAA;AAAA,UACZ,CAAA;AAAA,QACP,CAAA;AAAA,MACF,GA/BE,EAAK,EA+BP;AAAA,IAET,CAAC;AAAA,EACE,CAAA;AAET"}
|
|
@@ -63,7 +63,7 @@ function K({ content: d, format: s, interactive: t }) {
|
|
|
63
63
|
if (!o.ok) throw new Error(`模型加载失败:HTTP ${o.status}`);
|
|
64
64
|
return o.arrayBuffer();
|
|
65
65
|
}).then((o) => {
|
|
66
|
-
if (o.byteLength >
|
|
66
|
+
if (o.byteLength > 52428800) throw new Error("模型超过 50 MiB,无法加载");
|
|
67
67
|
const a = J(s, o);
|
|
68
68
|
if (w) {
|
|
69
69
|
D(a);
|
|
@@ -1 +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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"}
|
|
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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"}
|