feat: 增加文件级别的引用块节点

Littlefean · Littlefean · commit 7f48fa42b1e0 · 2025-11-22T01:31:18.000+08:00
diff --git a/app/src/core/service/controlService/controller/concrete/utilsControl.tsx b/app/src/core/service/controlService/controller/concrete/utilsControl.tsx
@@ -573,11 +573,13 @@ export class ControllerUtils {
         toast.error(`文件【${parserResult.fileName}】不在“最近打开的文件”中，不能创建引用`);
         return;
       }
-      // 获取该文件中的所有section
-      const sections = await CrossFileContentQuery.getSectionsByFileName(parserResult.fileName);
-      if (!sections.includes(parserResult.sectionName)) {
-        toast.error(`文件【${parserResult.fileName}】中没有section【${parserResult.sectionName}】，不能创建引用`);
-        return;
+      if (parserResult.sectionName) {
+        // 用户输入了#，需要检查section是否存在
+        const sections = await CrossFileContentQuery.getSectionsByFileName(parserResult.fileName);
+        if (!sections.includes(parserResult.sectionName)) {
+          toast.error(`文件【${parserResult.fileName}】中没有section【${parserResult.sectionName}】，不能创建引用`);
+          return;
+        }
       }
       await TextNodeSmartTools.changeTextNodeToReferenceBlock(project);
     }
diff --git a/app/src/core/service/dataGenerateService/generateScreenshot.tsx b/app/src/core/service/dataGenerateService/generateScreenshot.tsx
@@ -4,69 +4,48 @@ import { PathString } from "@/utils/pathString";
 import { RecentFileManager } from "../dataFileService/RecentFileManager";
 import { Section } from "@/core/stage/stageObject/entity/Section";
 import { sleep } from "@/utils/sleep";
+import { Rectangle } from "@graphif/shapes";
 
 /**
  * 从一个文件中生成截图
  */
 export namespace GenerateScreenshot {
   /**
-   * 根据文件名和Section框名生成截图
-   * @param fileName 文件名
-   * @param sectionName Section框名
+   * 创建临时Canvas并渲染Project
+   * @param project 项目实例
+   * @param targetRect 目标矩形区域
    * @returns 截图的Blob对象
    */
-  export async function generateSection(fileName: string, sectionName: string): Promise<Blob | undefined> {
-    try {
-      // 1. 根据文件名查找并加载prg文件
-      const recentFiles = await RecentFileManager.getRecentFiles();
-      const file = recentFiles.find((file) => PathString.getFileNameFromPath(file.uri.fsPath) === fileName);
-      if (!file) {
-        return undefined;
-      }
-      const fileUri = file.uri;
-      const project = new Project(fileUri);
-      loadAllServicesBeforeInit(project);
-      await project.init();
-      // 5. 查找指定名称的Section
-      const targetSection = project.stage.find((obj) => obj instanceof Section && obj.text === sectionName);
+  async function renderProjectToBlob(project: Project, targetRect: Rectangle): Promise<Blob> {
+    // 计算缩放比例，确保最终截图宽高不超过1920
+    const maxDimension = 1920;
+    let scaleFactor = 1;
+    if (targetRect.width > maxDimension || targetRect.height > maxDimension) {
+      const widthRatio = maxDimension / targetRect.width;
+      const heightRatio = maxDimension / targetRect.height;
+      scaleFactor = Math.min(widthRatio, heightRatio);
+    }
+    project.camera.currentScale = scaleFactor;
+    project.camera.targetScale = scaleFactor;
 
-      if (!targetSection) {
-        console.error(`Section框 【${sectionName}】 没有发现 in file ${fileName}`);
-        return undefined;
-      }
+    // 创建临时Canvas
+    const tempCanvas = document.createElement("canvas");
+    const deviceScale = window.devicePixelRatio;
+    const canvasWidth = Math.min(targetRect.width * scaleFactor + 2, maxDimension + 2);
+    const canvasHeight = Math.min(targetRect.height * scaleFactor + 2, maxDimension + 2);
+    tempCanvas.width = canvasWidth * deviceScale;
+    tempCanvas.height = canvasHeight * deviceScale;
+    tempCanvas.style.width = `${canvasWidth}px`;
+    tempCanvas.style.height = `${canvasHeight}px`;
+    const tempCtx = tempCanvas.getContext("2d")!;
+    tempCtx.scale(deviceScale, deviceScale);
 
-      // 6. 调整相机位置到Section
-      const sectionRect = targetSection.collisionBox.getRectangle();
-      project.camera.location = sectionRect.center;
+    // 保存原Canvas和渲染器尺寸
+    const originalCanvas = project.canvas.element;
+    const originalRendererWidth = project.renderer.w;
+    const originalRendererHeight = project.renderer.h;
 
-      // 7. 计算缩放比例，确保最终截图宽高不超过1920
-      const maxDimension = 1920;
-      let scaleFactor = 1;
-      if (sectionRect.width > maxDimension || sectionRect.height > maxDimension) {
-        const widthRatio = maxDimension / sectionRect.width;
-        const heightRatio = maxDimension / sectionRect.height;
-        scaleFactor = Math.min(widthRatio, heightRatio);
-      }
-      project.camera.currentScale = scaleFactor;
-      project.camera.targetScale = scaleFactor;
-
-      // 8. 创建临时Canvas
-      const tempCanvas = document.createElement("canvas");
-      const deviceScale = window.devicePixelRatio;
-      const canvasWidth = Math.min(sectionRect.width * scaleFactor + 2, maxDimension + 2);
-      const canvasHeight = Math.min(sectionRect.height * scaleFactor + 2, maxDimension + 2);
-      tempCanvas.width = canvasWidth * deviceScale;
-      tempCanvas.height = canvasHeight * deviceScale;
-      tempCanvas.style.width = `${canvasWidth}px`;
-      tempCanvas.style.height = `${canvasHeight}px`;
-      const tempCtx = tempCanvas.getContext("2d")!;
-      tempCtx.scale(deviceScale, deviceScale);
-
-      // 8. 渲染Project到临时Canvas
-      // 保存原Canvas和渲染器尺寸
-      const originalCanvas = project.canvas.element;
-      const originalRendererWidth = project.renderer.w;
-      const originalRendererHeight = project.renderer.h;
+    try {
       // 设置临时Canvas
       project.canvas.element = tempCanvas;
       project.canvas.ctx = tempCtx;
@@ -79,7 +58,7 @@ export namespace GenerateScreenshot {
       await sleep(1000); // 1s
       project.pause();
 
-      // 9. 将Canvas内容转换为Blob
+      // 将Canvas内容转换为Blob
       const blob = await new Promise<Blob>((resolve) => {
         tempCanvas.toBlob((blob) => {
           if (blob) {
@@ -90,22 +69,95 @@ export namespace GenerateScreenshot {
         }, "image/png");
       });
 
+      return blob;
+    } finally {
       // 恢复原Canvas
       project.canvas.element = originalCanvas;
       project.canvas.ctx = originalCanvas.getContext("2d")!;
       // 恢复渲染器尺寸
       project.renderer.w = originalRendererWidth;
       project.renderer.h = originalRendererHeight;
 
-      // 10. 清理临时资源
+      // 清理临时资源
       tempCanvas.remove();
+    }
+  }
 
-      project.dispose();
+  /**
+   * 根据文件名和Section框名生成截图
+   * @param fileName 文件名
+   * @param sectionName Section框名
+   * @returns 截图的Blob对象
+   */
+  export async function generateSection(fileName: string, sectionName: string): Promise<Blob | undefined> {
+    try {
+      // 加载项目
+      const recentFiles = await RecentFileManager.getRecentFiles();
+      const file = recentFiles.find((file) => PathString.getFileNameFromPath(file.uri.fsPath) === fileName);
+      if (!file) {
+        return undefined;
+      }
 
+      const project = new Project(file.uri);
+      loadAllServicesBeforeInit(project);
+      await project.init();
+
+      // 查找指定名称的Section
+      const targetSection = project.stage.find((obj) => obj instanceof Section && obj.text === sectionName);
+      if (!targetSection) {
+        console.error(`Section框 【${sectionName}】 没有发现 in file ${fileName}`);
+        return undefined;
+      }
+
+      // 调整相机位置到Section
+      const sectionRect = targetSection.collisionBox.getRectangle();
+      project.camera.location = sectionRect.center;
+
+      // 渲染并获取截图
+      const blob = await renderProjectToBlob(project, sectionRect);
+
+      project.dispose();
       return blob;
     } catch (error) {
       console.error("根据Section生成截图失败", error);
       return undefined;
     }
   }
+
+  /**
+   * 生成整个文件内容的广视野截图
+   * @param fileName 文件名
+   * @returns 截图的Blob对象
+   */
+  export async function generateFullView(fileName: string): Promise<Blob | undefined> {
+    try {
+      // 加载项目
+      const recentFiles = await RecentFileManager.getRecentFiles();
+      const file = recentFiles.find((file) => PathString.getFileNameFromPath(file.uri.fsPath) === fileName);
+      if (!file) {
+        return undefined;
+      }
+
+      const project = new Project(file.uri);
+      loadAllServicesBeforeInit(project);
+      await project.init();
+
+      // 使用相机的reset方法重置视野，以适应所有内容
+      project.camera.reset();
+
+      // 获取整个舞台的边界矩形
+      const stageSize = project.stageManager.getSize();
+      const stageCenter = project.stageManager.getCenter();
+      const fullRect = new Rectangle(stageCenter.subtract(stageSize.divide(2)), stageSize);
+
+      // 渲染并获取截图
+      const blob = await renderProjectToBlob(project, fullRect);
+
+      project.dispose();
+      return blob;
+    } catch (error) {
+      console.error("生成广视野截图失败", error);
+      return undefined;
+    }
+  }
 }
diff --git a/app/src/core/service/dataManageService/textNodeSmartTools.tsx b/app/src/core/service/dataManageService/textNodeSmartTools.tsx
@@ -533,7 +533,7 @@ export namespace TextNodeSmartTools {
       return;
     }
     const fileName = referenceName.split("#")[0];
-    const sectionName = referenceName.split("#")[1];
+    const sectionName = referenceName.split("#")[1] || "";
 
     const referenceBlock = new ReferenceBlockNode(project, {
       collisionBox: new CollisionBox([
@@ -568,17 +568,34 @@ export namespace TextNodeSmartTools {
       await referencedProject.init();
 
       // 更新引用
-      if (!referencedProject.references.sections[sectionName]) {
-        referencedProject.references.sections[sectionName] = [];
-      }
+      if (sectionName) {
+        // 引用特定Section的情况
+        if (!referencedProject.references.sections[sectionName]) {
+          referencedProject.references.sections[sectionName] = [];
+        }
+
+        // 确保数组中没有重复的文件名
+        const index = referencedProject.references.sections[sectionName].indexOf(currentFileName);
+        if (index === -1) {
+          referencedProject.references.sections[sectionName].push(currentFileName);
+          // 保存更新
+          await referencedProject.save();
+        }
+      } else {
+        // 引用整个文件的情况
+        if (!referencedProject.references.files) {
+          referencedProject.references.files = [];
+        }
 
-      // 确保数组中没有重复的文件名
-      const index = referencedProject.references.sections[sectionName].indexOf(currentFileName);
-      if (index === -1) {
-        referencedProject.references.sections[sectionName].push(currentFileName);
-        // 保存更新
-        await referencedProject.save();
+        // 确保数组中没有重复的文件名
+        const index = referencedProject.references.files.indexOf(currentFileName);
+        if (index === -1) {
+          referencedProject.references.files.push(currentFileName);
+          // 保存更新
+          await referencedProject.save();
+        }
       }
+
       // 关闭项目
       await referencedProject.dispose();
       // TODO: 存在隐患，欠考虑如果引用已经被当前软件打开的情况。
diff --git a/app/src/core/stage/stageObject/entity/ReferenceBlockNode.tsx b/app/src/core/stage/stageObject/entity/ReferenceBlockNode.tsx
@@ -105,9 +105,17 @@ export class ReferenceBlockNode extends ConnectableEntity {
   private async generateScreenshot() {
     try {
       this.state = "loading";
-      // 调用API获取截图
-      // const screenshotBlob = await this.project.generateSectionScreenshot(this.fileName, this.sectionName);
-      const screenshotBlob = await GenerateScreenshot.generateSection(this.fileName, this.sectionName);
+      let screenshotBlob;
+
+      // 根据sectionName是否为空来决定调用哪个方法
+      if (this.sectionName) {
+        // 引用特定的Section
+        screenshotBlob = await GenerateScreenshot.generateSection(this.fileName, this.sectionName);
+      } else {
+        // 引用整个文件
+        screenshotBlob = await GenerateScreenshot.generateFullView(this.fileName);
+      }
+
       if (screenshotBlob) {
         // 保存到附件
         const newAttachmentId = this.project.addAttachment(screenshotBlob);
diff --git a/app/src/sub/ReferencesWindow.tsx b/app/src/sub/ReferencesWindow.tsx
@@ -18,6 +18,7 @@ export default function ReferencesWindow(props: { currentProjectFileName: string
 
   function refresh() {
     setReferences({ ...project!.references });
+    // 现在这个刷新作用很小，不能检测已经失效的引用
   }
 
   useEffect(() => {
@@ -35,7 +36,7 @@ export default function ReferencesWindow(props: { currentProjectFileName: string
 
       {/* 引用信息展示 */}
       <div className="flex-1 overflow-y-auto">
-        {/* <div className="mb-4">
+        <div className="mb-4">
           <h3 className="mb-2 text-lg font-semibold">直接引用{currentProjectFileName}的文件</h3>
           {references.files.length === 0 ? (
             <p className="text-muted-foreground text-sm">当前项目中没有引用{currentProjectFileName}的文件</p>
@@ -46,8 +47,8 @@ export default function ReferencesWindow(props: { currentProjectFileName: string
                 return (
                   <div
                     key={filePath}
-                    className="text-select-option-text hover:text-select-option-hover-text hover:bg-icon-button-bg flex cursor-pointer items-center gap-2 rounded p-1 text-sm"
-                    onClick={() => handleOpenReferencedFile(fileName, "")}
+                    className="text-select-option-text flex cursor-pointer items-center gap-2 rounded p-1 text-sm *:cursor-pointer hover:ring"
+                    onClick={() => project.referenceManager.jumpToReferenceLocation(fileName, "")}
                   >
                     <span className="font-medium">{fileName}</span>
                     <span className="text-muted-foreground text-xs">{filePath}</span>
@@ -56,27 +57,25 @@ export default function ReferencesWindow(props: { currentProjectFileName: string
               })}
             </div>
           )}
-        </div> */}
+        </div>
 
         <div>
-          <h3 className="mb-2 text-lg font-semibold">被引用的章节</h3>
+          <h3 className="mb-2 text-lg font-semibold">引用此文件中一些Section框的文件</h3>
           {Object.keys(references.sections).length === 0 ? (
-            <p className="text-muted-foreground text-sm">{currentProjectFileName}中没有被引用的章节</p>
+            <p className="text-muted-foreground text-sm">{currentProjectFileName}中没有被引用的Section</p>
           ) : (
             <div className="space-y-3">
               {Object.entries(references.sections).map(([referencedSectionName, sections]) => (
                 <div key={referencedSectionName}>
-                  <div className="text-select-option-text hover:text-select-option-hover-text hover:bg-icon-button-bg cursor-pointer rounded p-1 font-medium">
-                    {referencedSectionName}
-                  </div>
-                  <div className="ml-4 mt-1 space-y-1">
+                  <div className="text-select-option-text rounded p-1 font-medium">{referencedSectionName}</div>
+                  <div className="my-1 ml-4 space-y-1">
                     {sections.map((fileName) => (
                       <div
                         onClick={() =>
                           project.referenceManager.jumpToReferenceLocation(fileName, referencedSectionName)
                         }
                         key={fileName}
-                        className="border-muted text-select-option-text hover:text-select-option-hover-text hover:bg-icon-button-bg cursor-pointer rounded border-l-2 p-1 pl-2 text-sm"
+                        className="border-muted text-select-option-text cursor-pointer rounded border-l-2 p-1 pl-2 text-sm hover:ring"
                       >
                         {fileName}
                       </div>

Original file line number	Diff line number	Diff line change
`@@ -573,11 +573,13 @@ export class ControllerUtils {`
`573`	`573`	toast.error(`文件【${parserResult.fileName}】不在“最近打开的文件”中，不能创建引用`);
`574`	`574`	`return;`
`575`	`575`	`}`
`576`		`- // 获取该文件中的所有section`
`577`		`- const sections = await CrossFileContentQuery.getSectionsByFileName(parserResult.fileName);`
`578`		`- if (!sections.includes(parserResult.sectionName)) {`
`579`		- toast.error(`文件【${parserResult.fileName}】中没有section【${parserResult.sectionName}】，不能创建引用`);
`580`		`- return;`
	`576`	`+ if (parserResult.sectionName) {`
	`577`	`+ // 用户输入了#，需要检查section是否存在`
	`578`	`+ const sections = await CrossFileContentQuery.getSectionsByFileName(parserResult.fileName);`
	`579`	`+ if (!sections.includes(parserResult.sectionName)) {`
	`580`	+ toast.error(`文件【${parserResult.fileName}】中没有section【${parserResult.sectionName}】，不能创建引用`);
	`581`	`+ return;`
	`582`	`+ }`
`581`	`583`	`}`
`582`	`584`	`await TextNodeSmartTools.changeTextNodeToReferenceBlock(project);`
`583`	`585`	`}`