53d05d632b
在已落地的节点注册表上加两层节点：展示层（Markdown / SVG / HTML / 全景）与 接入生成链的加工层（对比 / 图表 / 调色）。全部是第一方内置节点，不引入远程插件 加载，因此不涉及沙箱信任模型，也不需要把 CanvasNodeType 放开成任意字符串。 刻意保留穷尽性检查而不是改成运行时注册。全库只有 4 张按类型建的穷眉表 （NODE_DEFAULT_SIZE / NODE_SPECS / 注册表定义 / nodeContentRenderers）， 让编译器强制每个新节点填满它们，比少改几个文件更值 —— 加第一个枚举成员时 编译器点出了 5 处，其中 pages/canvas/shared.tsx 是原先没编目的那一处； 换成运行时注册，那里会静默回落成「未知节点」。 两处前置基建： - CanvasNodeGraphContext：渲染器只拿到 node、没有 connections，而加工层三个节点 都要读上游。仿已有的 canvas-node-action-context（同一个问题：节点经 CanvasProjectWorldLayers 渲染不便逐个透传），取上游复用 canvas-resource-references 的 getContextResourceNodes，不另写一份。 Provider 值必须 memo —— 每帧新对象会让所有节点跟着重渲染。 - ToolbarHandlers.onAddExtensionNode(type)：一个泛用入口，不给每种扩展节点单开 一个 onAddXxx。菜单另开「展示与加工」分区，不挤占上方调好的四列创作网格。 SVG 与 HTML 统一走 sandbox iframe：依赖里没有 DOMPurify，手写 SVG 消毒不可靠 （script / on* / foreignObject）。SandboxedFrame 只暴露 allowScripts 布尔而不是 sandbox 取值，让「同时给 allow-same-origin」这条没有入口。 全景节点三个取舍：点击才激活 WebGL（浏览器对同时存在的上下文有硬上限，画布可以有 任意多个全景节点，自动激活必然在某个数量后整片黑）；用原生 three 而非 fiber （需要精确 dispose，forceContextLoss 才真正释放上下文）；性能模式下只给静态预览。 调色是唯一碰生成路径的节点，照 Drawing 的先例：拖滑杆只做本地 CSS filter 预览， 落地成资源要等到生成消费它时才走 uploadResourceFile。预览与导出共用同一个 filter 字符串，两处各写一份就会「看到的和用的悄悄不一致」；未调色时直接透传源图， 省掉一次渲染与上传。ctx.filter 不受支持时明确报错而不是导出一张没调色的图。 resourceKind 与 inputKind 分开两个字段：空图片节点不是素材（不进 @ 引用）， 但照样计入 imageCount。调色节点的 resourceKind 无条件返回 image —— 它的图来自 上游，按「有没有 content」判断会让它永远进不了生成输入，这是不报错的静默失效。 测试：新增 test/canvas-extension-nodes.test.ts（12 用例 / 64 断言），覆盖 7 个节点的 判据矩阵、调色参数、以及图表解析。图表解析函数刻意不抛 —— 数据来自模型输出， 非法 JSON 是常态而不是异常，抛出来会连带整个画布白屏，有 7 条断言钉这个。 测试列表是显式枚举，已把新文件加进 package.json，不加进去不会跑。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import { FileText } from "lucide-react";
|
||
|
||
import { AIMessageMarkdown } from "@/components/ai/ai-message-markdown";
|
||
import { useUpstreamNodes } from "@/components/canvas/canvas-node-graph-context";
|
||
import { getNodeResourceKind } from "@/lib/canvas/node-registry";
|
||
import type { CanvasTheme } from "@/lib/canvas-theme";
|
||
import type { CanvasNodeData } from "@/types/canvas";
|
||
|
||
type MarkdownNodeContentProps = {
|
||
node: CanvasNodeData;
|
||
theme: CanvasTheme;
|
||
};
|
||
|
||
/**
|
||
* Markdown 展示节点。
|
||
*
|
||
* 内容取自身 metadata.content；为空时回落到上游文本素材——这样「AI 写文档 → 连一根线 →
|
||
* 排版好的文档」不需要先把内容搬进本节点。上游取用统一经 CanvasNodeGraphContext，
|
||
* 判定文本素材复用注册表的 resourceKind，不在这里另立一套判断。
|
||
*/
|
||
export function MarkdownNodeContent({ node, theme }: MarkdownNodeContentProps) {
|
||
const upstream = useUpstreamNodes(node.id);
|
||
const own = node.metadata?.content || "";
|
||
const inherited = upstream.find((item) => getNodeResourceKind(item) === "text");
|
||
const source = own || inherited?.metadata?.content || inherited?.metadata?.prompt || "";
|
||
|
||
if (!source.trim()) {
|
||
return (
|
||
<div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.muted }}>
|
||
<FileText className="size-5 opacity-60" />
|
||
<span style={{ fontSize: "var(--fs-label)" }}>连接文本节点，或双击编辑 Markdown</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
// 滚动区要吞掉 wheel 并标 data-canvas-no-zoom，否则滚动会被画布缩放拦走。
|
||
<div
|
||
className="h-full w-full overflow-y-auto overflow-x-hidden px-4 py-3"
|
||
data-canvas-no-zoom
|
||
style={{ color: theme.node.text }}
|
||
onWheel={(event) => event.stopPropagation()}
|
||
onMouseDown={(event) => event.stopPropagation()}
|
||
>
|
||
<AIMessageMarkdown>{source}</AIMessageMarkdown>
|
||
</div>
|
||
);
|
||
}
|