docs(canvas): explain node editing scopes and display interactions

src/components/canvas/plain-image-node.tsx

@@ -1,3 +1,6 @@
+/**
+ * 无卡片标题的图片节点。用通用变换容器承载图片，随视口缩放选择预览或正式资源地址。
+ */
 "use client";
 import { CanvasImage } from "./canvas-image";
 import { managedImageSource } from "@/lib/canvas-v2";
@@ -5,8 +8,12 @@ import { useViewport, type NodeProps } from "@xyflow/react";
 import type { CanvasNode } from "@/lib/canvas";
 import { TransformableNode } from "./transformable-node";
 import styles from "./canvas.module.css";
+/** 依赖视口zoom估算图片在屏幕上的像素宽度；CanvasImage负责本地预览与正式图片的显示交接。 */
 export function PlainImageNode(props: NodeProps<CanvasNode>) {
   const { zoom } = useViewport();
+  // 节点宽度未提供时按320估算，再乘zoom与设备像素比；不超过1024时请求预览源。
+  // 这是显示宽度启发式，不检查图片原始尺寸；无window时像素比按1处理。
   const preview = (props.width || 320) * zoom * (typeof window === "undefined" ? 1 : window.devicePixelRatio || 1) <= 1024;
+  // managedImageSource按资源格式选择可用地址，移动/缩放等编辑行为仍由TransformableNode处理。
   return <TransformableNode {...props} className={styles.plainImageFrame}><CanvasImage id={props.id} className={styles.plainImage} src={managedImageSource(props.data.src, preview)} title={props.data.title} /></TransformableNode>;
 }