Merge pull request #11 from Panzer-Jack/dev

fix: figma 403 error

Author: Panzer-Jack

src/services/figma/figma.ts

@@ -185,6 +185,53 @@ export class FigmaService {
     writeLogs("figma-simplified.yml", simplifiedResponse);
     return simplifiedResponse;
   }
+
+  async getImageData(
+    fileKey: string,
+    nodeId: string,
+  ): Promise<string> {
+    const images = await this.request<GetImagesResponse>(
+      `/images/${fileKey}?ids=${nodeId}&scale=2&format=png`,
+    ).then(({ images = {} }) => images)
+    let image = ''
+
+    for (const key in images) {
+      image = images[key] as string
+    }
+
+    console.log(images, image)
+
+    return image
+  }
+
+  async getSVG(
+    fileKey: string,
+    nodes: FetchImageParams[],
+    localPath: string,
+  ): Promise<string[]> {
+
+    const svgIds = nodes.filter(({ fileType }) => fileType === 'svg').map(({ nodeId }) => nodeId)
+    const svgFiles
+      = svgIds.length > 0
+        ? this.request<GetImagesResponse>(
+          `/images/${fileKey}?ids=${svgIds.join(',')}&format=svg`,
+        ).then(({ images = {} }) => images)
+        : ({} as GetImagesResponse['images'])
+
+    const files = await Promise.all([svgFiles]).then(([l]) => ({ ...l }))
+
+    const downloads = nodes
+      .map(({ nodeId, fileName }) => {
+        const imageUrl = files[nodeId]
+        if (imageUrl) {
+          return downloadFigmaImage(fileName, localPath, imageUrl)
+        }
+        return false
+      })
+      .filter(url => !!url)
+
+    return Promise.all(downloads)
+  }
 }
 
 function writeLogs(name: string, value: any) {

src/services/figma/index.ts

@@ -102,34 +102,65 @@ export class FigmaTools {
       name: 'Download-Figma-Images',
       description: 'Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes',
       parameters: z.object({
-        fileKey: z.string().describe('The key of the Figma file containing the node'),
+        fileKey: z.string().describe("The key of the Figma file containing the node"),
         nodes: z
           .object({
             nodeId: z
               .string()
-              .describe('The ID of the Figma image node to fetch, formatted as 1234:5678'),
+              .describe("The ID of the Figma image node to fetch, formatted as 1234:5678"),
             imageRef: z
               .string()
               .optional()
               .describe(
-                'If a node has an imageRef fill, you must include this variable. Leave blank when downloading Vector SVG images.',
+                "If a node has an imageRef fill, you must include this variable. Leave blank when downloading Vector SVG images.",
               ),
-            fileName: z.string().describe('The local name for saving the fetched file'),
+            fileName: z.string().describe("The local name for saving the fetched file"),
           })
           .array()
-          .describe('The nodes to fetch as images'),
+          .describe("The nodes to fetch as images"),
+        pngScale: z
+          .number()
+          .positive()
+          .optional()
+          .default(2)
+          .describe(
+            "Export scale for PNG images. Optional, defaults to 2 if not specified. Affects PNG images only.",
+          ),
         localPath: z
           .string()
           .describe(
-            'The absolute path to the directory where images are stored in the project. If the directory does not exist, it will be created. The format of this path should respect the directory format of the operating system you are running on. Don\'t use any special character escaping in the path name either.',
+            "The absolute path to the directory where images are stored in the project. If the directory does not exist, it will be created. The format of this path should respect the directory format of the operating system you are running on. Don't use any special character escaping in the path name either.",
           ),
+        svgOptions: z
+          .object({
+            outlineText: z
+              .boolean()
+              .optional()
+              .default(true)
+              .describe("Whether to outline text in SVG exports. Default is true."),
+            includeId: z
+              .boolean()
+              .optional()
+              .default(false)
+              .describe("Whether to include IDs in SVG exports. Default is false."),
+            simplifyStroke: z
+              .boolean()
+              .optional()
+              .default(true)
+              .describe("Whether to simplify strokes in SVG exports. Default is true."),
+          })
+          .optional()
+          .default({})
+          .describe("Options for SVG export"),
       }),
-      execute: async ({ fileKey, nodes, localPath }, { session }) => {
+      execute: async ({ fileKey, nodes, localPath, svgOptions, pngScale }, { session }) => {
         try {
           const downloads = await this.figmaToolsCore.downloadFigmaImages({
             fileKey,
             nodes,
             localPath,
+            svgOptions,
+            pngScale,
           })
 
           // If any download fails, return false
@@ -173,7 +204,11 @@ class FigmaToolsCore {
   }) {
     this.server = server
     this.figmaApiKey = figmaApiKey
-    this.figmaService = new FigmaService(figmaApiKey)
+    this.figmaService = new FigmaService({
+      figmaApiKey: figmaApiKey,
+      figmaOAuthToken: '',
+      useOAuth: false,
+    })
   }
 
   public async figmaToCode({
@@ -203,7 +238,7 @@ class FigmaToolsCore {
     }
 
     Logger.log('Generating YAML result from file')
-    const yamlResult = yaml.dump(result)
+    const yamlResult = JSON.stringify(result, null, 2)
 
     Logger.log('Sending result to client')
     Logger.log('content', yamlResult)
@@ -214,30 +249,38 @@ class FigmaToolsCore {
   public async downloadFigmaImages({
     fileKey,
     nodes,
-    localPath
+    localPath,
+    svgOptions,
+    pngScale
   }: DownloadFigmaImagesParams) {
     const figmaService = this.figmaService
 
     const imageFills = nodes.filter(({ imageRef }) => !!imageRef) as {
-      nodeId: string
-      imageRef: string
-      fileName: string
-    }[]
-    const fillDownloads = figmaService.getImageFills(fileKey, imageFills, localPath)
+      nodeId: string;
+      imageRef: string;
+      fileName: string;
+    }[];
+    const fillDownloads = figmaService.getImageFills(fileKey, imageFills, localPath);
     const renderRequests = nodes
       .filter(({ imageRef }) => !imageRef)
       .map(({ nodeId, fileName }) => ({
         nodeId,
         fileName,
-        fileType: fileName.endsWith('.svg') ? ('svg' as const) : ('png' as const),
-      }))
+        fileType: fileName.endsWith(".svg") ? ("svg" as const) : ("png" as const),
+      }));
 
-    const renderDownloads = figmaService.getImages(fileKey, renderRequests, localPath)
+    const renderDownloads = figmaService.getImages(
+      fileKey,
+      renderRequests,
+      localPath,
+      pngScale,
+      svgOptions,
+    );
 
     const downloads = await Promise.all([fillDownloads, renderDownloads]).then(([f, r]) => [
       ...f,
       ...r,
-    ])
+    ]);
 
     return downloads
   }

src/services/utility/index.ts

@@ -40,34 +40,65 @@ export class UtilityTools {
       name: 'download-svg-assets',
       description: '根据图像或图标节点的ID，仅下载Figma文件中使用的SVG资源',
       parameters: z.object({
-        fileKey: z.string().describe('The key of the Figma file containing the node'),
+        fileKey: z.string().describe("The key of the Figma file containing the node"),
         nodes: z
           .object({
             nodeId: z
               .string()
-              .describe('The ID of the Figma image node to fetch, formatted as 1234:5678'),
+              .describe("The ID of the Figma image node to fetch, formatted as 1234:5678"),
             imageRef: z
               .string()
               .optional()
               .describe(
-                'If a node has an imageRef fill, you must include this variable. Leave blank when downloading Vector SVG images.',
+                "If a node has an imageRef fill, you must include this variable. Leave blank when downloading Vector SVG images.",
               ),
-            fileName: z.string().describe('The local name for saving the fetched file'),
+            fileName: z.string().describe("The local name for saving the fetched file"),
           })
           .array()
-          .describe('The nodes to fetch as images'),
+          .describe("The nodes to fetch as images"),
+        pngScale: z
+          .number()
+          .positive()
+          .optional()
+          .default(2)
+          .describe(
+            "Export scale for PNG images. Optional, defaults to 2 if not specified. Affects PNG images only.",
+          ),
         localPath: z
           .string()
           .describe(
-            'The absolute path to the directory where images are stored in the project. If the directory does not exist, it will be created. The format of this path should respect the directory format of the operating system you are running on. Don\'t use any special character escaping in the path name either.',
+            "The absolute path to the directory where images are stored in the project. If the directory does not exist, it will be created. The format of this path should respect the directory format of the operating system you are running on. Don't use any special character escaping in the path name either.",
           ),
+        svgOptions: z
+          .object({
+            outlineText: z
+              .boolean()
+              .optional()
+              .default(true)
+              .describe("Whether to outline text in SVG exports. Default is true."),
+            includeId: z
+              .boolean()
+              .optional()
+              .default(false)
+              .describe("Whether to include IDs in SVG exports. Default is false."),
+            simplifyStroke: z
+              .boolean()
+              .optional()
+              .default(true)
+              .describe("Whether to simplify strokes in SVG exports. Default is true."),
+          })
+          .optional()
+          .default({})
+          .describe("Options for SVG export"),
       }),
-      execute: async ({ fileKey, nodes, localPath }, { session }) => {
+      execute: async ({ fileKey, nodes, localPath, pngScale, svgOptions }, { session }) => {
         try {
           const downloads = await this.figmaToolsCore.downloadFigmaSVGAssets({
             fileKey,
             nodes,
             localPath,
+            pngScale,
+            svgOptions,
           })
 
           // If any download fails, return false

src/types/figma.ts

@@ -2,19 +2,31 @@
  * Figma 图片下载参数类型定义
  */
 export interface DownloadFigmaImagesParams {
-  /** Figma 文件的唯一标识符，包含目标节点 */
-  fileKey: string
-
-  /** 需要下载为图片的节点数组 */
-  nodes: FigmaImageNode[]
+  fileKey: string,
+  nodes: FigmaImageNode[],
+  localPath: string,
+  pngScale: number,
+  svgOptions: {
+    outlineText: boolean;
+    includeId: boolean;
+    simplifyStroke: boolean;
+  },
+}
 
-  /** 
-   * 项目中存储图片的绝对路径目录
-   * 如果目录不存在，将会自动创建
-   * 路径格式应遵循运行操作系统的目录格式，不要在路径名中使用任何特殊字符转义
+type FetchImageParams = {
+  /**
+   * The Node in Figma that will either be rendered or have its background image downloaded
    */
-  localPath: string
-}
+  nodeId: string;
+  /**
+   * The local file name to save the image
+   */
+  fileName: string;
+  /**
+   * The file mimetype for the image
+   */
+  fileType: "png" | "svg";
+};
 
 /**
  * Figma 图片节点类型定义
@@ -23,7 +35,7 @@ export interface FigmaImageNode {
   /** 
    * Figma 图片节点的ID，格式为 1234:5678 
    */
-  nodeId: string
+  nodeId: string;
 
   /** 
    * 如果节点有 imageRef 填充，必须包含此变量