Function BackgroundManagerWindow

app/src/sub/BackgroundManagerWindow.tsx:12–105

()

import { toast } from "sonner";

export default function BackgroundManagerWindow() {
  const [tab] = useAtom(activeTabAtom);
  const project = tab instanceof Project ? tab : undefined;
  const [backgroundImages, setBackgroundImages] = useState<ImageNode[]>([]);
  const [urls, setUrls] = useState(new Map<string, string>());
  const [brokenUuids, setBrokenUuids] = useState(new Set<string>());

  useEffect(() => {
    if (project) {
      // 获取所有背景化的图片
      const images = project.stageManager.getImageNodes().filter((imageNode) => imageNode.isBackground);
      setBackgroundImages(images);
    }
  }, [project]);

  useEffect(() => {
    if (!project) return;
    const newUrls = new Map<string, string>();
    for (const imageNode of backgroundImages) {
      const blob = project.attachments.get(imageNode.attachmentId);
      if (!blob) continue;
      newUrls.set(imageNode.uuid, URL.createObjectURL(blob));
    }
    setUrls(newUrls);
    setBrokenUuids((prev) => {
      if (prev.size === 0) return prev;
      const next = new Set<string>();
      for (const uuid of prev) {
        if (backgroundImages.some((it) => it.uuid === uuid)) next.add(uuid);
      }
      return next;
    });
    return () => {
      newUrls.forEach((url) => {
        URL.revokeObjectURL(url);
      });
    };
  }, [project, backgroundImages]);

  const handleRemoveBackground = (imageNode: ImageNode) => {
    if (project) {
      imageNode.isBackground = false;
      project.historyManager.recordStep();
      toast.success("已取消图片的背景化");
      // 刷新背景图片列表
      const images = project.stageManager.getImageNodes().filter((imageNode) => imageNode.isBackground);
      setBackgroundImages(images);
    }
  };

  return (
    <div className="flex flex-col gap-4 p-4">
      <h1 className="text-xl font-semibold">背景管理器</h1>
      <div className="flex-1">
        {backgroundImages.length === 0 ? (
          <p className="text-muted-foreground text-center">当前舞台上没有背景化的图片</p>
        ) : (
          <div className="space-y-4">