code.js

// 监听插件运行事件,侧边栏重启按钮
figma.on('run', async ({ command }) => {
  // 使用固定高度380px
  figma.showUI(__html__, { width: 300, height: 425, themeColors: true });
  // 设置侧边栏重启按钮
  figma.root.setRelaunchData({ relaunch: '' });

  // 读取保存的设置
  const settings = await figma.clientStorage.getAsync('imageImportSettings') || {
    scaleOption: 'normal',
    customWidth: 0,
    customHeight: 0,
    autoClose: false
  };

  // 发送设置到UI
  figma.ui.postMessage({
    type: 'restore-settings',
    settings: settings
  });
});

// 存储导入状态的全局变量
let importQueue = []; // 存储待处理的图片队列
let importFrames = []; // 存储所有导入的框架
let importParts = [];
let totalParts = 0;
let receivedParts = 0;
let currentImageName = "";
let isLastImage = false;

// 处理来自UI的消息
figma.ui.onmessage = async (msg) => {
  try {
    // 保存设置
    if (msg.type === 'save-settings') {
      await figma.clientStorage.setAsync('imageImportSettings', {
        scaleOption: msg.scaleOption,
        customWidth: msg.customWidth,
        customHeight: msg.customHeight,
        autoClose: msg.autoClose
      });
      return;
    }
    
    // 关闭插件
    if (msg.type === 'close-plugin') {
      figma.closePlugin();
      return;
    }
    
    // 创建主框架
    if (msg.type === 'create-frame') {
      const imageName = msg.imageName;
      currentImageName = imageName;
      totalParts = msg.partsCount;
      receivedParts = 0;
      importParts = new Array(totalParts);
      isLastImage = msg.isLastImage || false;
      
      // 通知UI可以开始发送图片部分
      figma.ui.postMessage({ 
        type: 'ready-for-parts',
        imageName: imageName 
      });
      return;
    }
    
    // 添加图像部分
    if (msg.type === 'add-image-part') {
      const partIndex = msg.partIndex;
      const partDataUrl = msg.partDataUrl;
      const partY = msg.partY;
      const partWidth = msg.partWidth;
      const partHeight = msg.partHeight;
      const currentPart = msg.currentPart || (partIndex + 1);
      const imageTotalParts = msg.totalParts || totalParts;
      
      try {
        // 创建图片填充
        const image = await figma.createImageAsync(partDataUrl);
        
        // 创建矩形
        const rect = figma.createRectangle();
        rect.name = `Part ${partIndex + 1}`;
        
        // 设置图片填充
        rect.fills = [{
          type: 'IMAGE',
          scaleMode: 'FILL',
          imageHash: image.hash,
          scalingFactor: 1
        }];
        
        // 设置尺寸和位置
        rect.resize(partWidth, partHeight);
        rect.x = 0;
        rect.y = partY;
        
        // 保存部分
        importParts[partIndex] = rect;
        receivedParts++;
        
        // 计算更精确的进度百分比
        const progress = (receivedParts / totalParts) * 100;
        
        // 发送进度更新
        figma.ui.postMessage({ 
          type: 'part-processed',
          currentImage: currentImageName,
          progress: progress,
          currentPart: currentPart,
          totalParts: imageTotalParts
        });
        
        // 如果所有部分都处理完成，完成导入
        if (receivedParts === totalParts) {
          await completeCurrentImport();
          
          // 通知UI这张图片处理完成
          figma.ui.postMessage({ type: 'import-completed' });
          
          // 如果是最后一张图片，进行布局
          if (isLastImage && importFrames.length > 0) {
            // 获取视窗中心点
            const center = figma.viewport.center;
            
            // 计算所有框架的总宽度（包括间距）
            const totalWidth = importFrames.reduce((width, frame, index) => {
              return width + frame.width + (index < importFrames.length - 1 ? 50 : 0);
            }, 0);
            
            // 计算起始 x 坐标，使框架组居中
            let startX = center.x - totalWidth / 2;
            
            // 获取最高框架的高度
            const maxHeight = Math.max(...importFrames.map(f => f.height));
            
            // 布局所有框架
            importFrames.forEach((frame, index) => {
              frame.x = startX;
              frame.y = center.y - maxHeight; // 将所有框架顶部对齐在视窗中心上方
              startX += frame.width + 50; // 添加50px的间距
            });
            
            // 选中所有框架并调整视图
            figma.currentPage.selection = importFrames;
            
            // 发送所有导入完成的消息
            figma.ui.postMessage({ type: 'all-imports-completed' });
            
            // 清空框架数组
            importFrames = [];
          }
        }
      } catch (error) {
        console.error("Error processing part:", error);
        figma.ui.postMessage({ 
          type: 'import-error',
          message: `Error processing part: ${error.message}`
        });
      }
      return;
    }
    
    // 导入错误
    if (msg.type === 'import-error') {
      console.error("Import error:", msg.message);
      // 重置状态
      currentImageName = "";
      totalParts = 0;
      receivedParts = 0;
      importParts = [];
      return;
    }
  } catch (error) {
    console.error("Error processing message:", error);
    figma.ui.postMessage({ 
      type: 'import-error',
      message: `Error: ${error.message}`
    });
  }
};

// 完成当前图片的导入
async function completeCurrentImport() {
  try {
    const validParts = importParts.filter(part => part !== undefined && part !== null);
    
    if (validParts.length > 0) {
      // 创建框架
      const importFrame = figma.createFrame();
      importFrame.name = currentImageName || "Imported Image";
      
      // 计算框架尺寸
      const totalHeight = validParts.reduce((height, part) => Math.max(height, part.y + part.height), 0);
      const maxWidth = validParts.reduce((width, part) => Math.max(width, part.width), 0);
      importFrame.resize(maxWidth, totalHeight);
      
      // 添加所有部分到框架
      for (const part of validParts) {
        importFrame.appendChild(part);
      }
      
      // 添加到页面
      figma.currentPage.appendChild(importFrame);
      
      // 存储框架以便后续布局
      importFrames.push(importFrame);
    }
    
    // 重置状态
    currentImageName = "";
    totalParts = 0;
    receivedParts = 0;
    importParts = [];
    
  } catch (error) {
    console.error("Error completing import:", error);
    figma.ui.postMessage({ 
      type: 'import-error',
      message: `Error completing import: ${error.message}`
    });
  }
}

// 处理队列中的下一张图片
function processNextImage() {
  if (importQueue.length > 0) {
    const nextImage = importQueue.shift();
    figma.ui.postMessage({
      type: 'start-processing',
      imageName: nextImage.imageName,
      imageWidth: nextImage.imageWidth,
      imageHeight: nextImage.imageHeight,
      scaleOption: nextImage.scaleOption,
      customWidth: nextImage.customWidth,
      partsCount: nextImage.partsCount
    });
  }
}