65 lines
6.0 KiB
TypeScript
65 lines
6.0 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useId, useRef, useState } from "react";
|
||
import { ImageIcon } from "lucide-react";
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { useCanvasRuntimeHost } from "@/components/workspace/canvas-runtime-host";
|
||
import type { ProjectEngine } from "@/lib/canvas-runtime/workspace";
|
||
import type { Id, Point } from "@/lib/canvas-core/types";
|
||
import { fault } from "@/lib/canvas-core/values";
|
||
import { errorText } from "@/lib/api";
|
||
|
||
function Preview({src}:{src:string}){const [failed,setFailed]=useState(false);return failed?<ImageIcon aria-hidden className="h-8 w-8 opacity-50"/>:<img src={src} alt="" loading="lazy" className="h-full w-full object-contain" onError={()=>setFailed(true)}/>;}
|
||
type Candidate = { id: Id; title: string };
|
||
export function HeadlessResourcePicker({engine,workspaceId,canvasId,position,close,onAdded}:{engine:ProjectEngine;workspaceId:Id;canvasId:Id;position:Point;close():void;onAdded(id:Id):void}) {
|
||
const host=useCanvasRuntimeHost(),[items,setItems]=useState<Candidate[]>([]),[loading,setLoading]=useState(true),[busy,setBusy]=useState<Id>(),[error,setError]=useState("");
|
||
const lifecycle=useRef<AbortController|null>(null),requesting=useRef(false),descriptionId=useId();
|
||
const dismiss=()=>{lifecycle.current?.abort();close();};
|
||
const [target]=useState(()=>{const document=engine.getSnapshot().document,canvas=document.canvases.get(canvasId),entry=canvas?.parent?document.elements.get(canvas.parent.entryElementId):undefined;return {canvas,entry};});
|
||
useEffect(()=>{
|
||
const controller=new AbortController();lifecycle.current=controller;
|
||
const identity=host.identity(),workspace=host.getWorkspaces().get(workspaceId);
|
||
void (async()=>{
|
||
if(!workspace?.isCurrentIdentity()||workspace.accountId!==identity.accountId)throw fault('identity_changed');
|
||
const results=await Promise.allSettled([...workspace.getProjects()].filter(([id])=>id!==engine.getSnapshot().document.projectId).map(([,project])=>project));
|
||
if(controller.signal.aborted)return;
|
||
if(!workspace.isCurrentIdentity()||host.identity().authEpoch!==identity.authEpoch)throw fault('identity_changed');
|
||
const candidates=new Map<Id,Candidate>(),owned=engine.getSnapshot().runtime.resources;
|
||
for(const result of results)if(result.status==='fulfilled'){
|
||
const snapshot=result.value.getSnapshot();
|
||
for(const element of snapshot.document.elements.values()){
|
||
const id=element.data.assetId;
|
||
if(element.structure!=='node'||typeof id!=='string'||!id||owned.has(id)||candidates.has(id)||snapshot.runtime.resources.has(id)&&!snapshot.runtime.resources.get(id)!.stored)continue;
|
||
if(!result.value.editor.registry.components.get(element.componentId)?.resourceFields?.includes('assetId'))continue;
|
||
candidates.set(id,{id,title:typeof element.data.title==='string'&&element.data.title.trim()?element.data.title:'未命名图片'});
|
||
}
|
||
}
|
||
setItems([...candidates.values()]);setLoading(false);
|
||
})().catch(error=>{if(!controller.signal.aborted){setLoading(false);setError(errorText(error));}});
|
||
return()=>{controller.abort();if(lifecycle.current===controller)lifecycle.current=null;};
|
||
},[engine,host,workspaceId]);
|
||
async function insert(item:Candidate){
|
||
const signal=lifecycle.current?.signal;if(!signal||signal.aborted||requesting.current)return;
|
||
requesting.current=true;
|
||
setBusy(item.id);setError("");
|
||
try{
|
||
const id=crypto.randomUUID(),result=await engine.adoptResource(item.id,(resource,tx)=>{
|
||
const document=tx.getDocument(),canvas=document.canvases.get(canvasId),entry=canvas?.parent?document.elements.get(canvas.parent.entryElementId):undefined;
|
||
if(!canvas||canvas.parent?.entryElementId!==target.canvas?.parent?.entryElementId||target.entry&&(entry?.id!==target.entry.id||entry.incarnation!==target.entry.incarnation))throw fault('asset_target_changed');
|
||
const scale=Math.min(260/resource.asset.width,200/resource.asset.height),width=resource.asset.width*scale,height=resource.asset.height*scale;
|
||
tx.dispatch({type:'element.create',element:{id,incarnation:1,structure:'node',componentId:'image',dataVersion:1,ownerCanvasId:canvasId,geometry:{x:position.x-width/2,y:position.y-height/2,width,height,rotation:0},data:{title:item.title,text:'',assetId:resource.id,src:resource.src}}});
|
||
},{signal});
|
||
if(result.status==='rejected')throw fault(result.code,result.targets);
|
||
if(!signal.aborted){onAdded(id);close();}
|
||
}catch(error){if(!signal.aborted)setError(error instanceof Error&&error.message==='not_found'?'无法读取这张图片，请确认仍有原画布的访问权限。':errorText(error));}
|
||
finally{requesting.current=false;if(!signal.aborted)setBusy(undefined);}
|
||
}
|
||
return <Dialog open onOpenChange={open=>{if(!open)dismiss();}}><DialogContent aria-describedby={descriptionId}>
|
||
<DialogHeader><DialogTitle>从其它画布添加图片</DialogTitle><DialogDescription id={descriptionId}>选择同一工作区已打开画布中的图片，无需再次上传。</DialogDescription></DialogHeader>
|
||
{loading?<p role="status">正在查找图片…</p>:items.length===0?<p>暂无可复用的图片。先打开有已上传图片的画布，再回到这里。</p>:<div className="grid max-h-80 grid-cols-2 gap-3 overflow-y-auto">{items.map(item=><button key={item.id} type="button" aria-label={`添加图片：${item.title}`} disabled={!!busy} onClick={()=>void insert(item)} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-border p-3 text-sm hover:bg-muted disabled:opacity-50">
|
||
<span className="flex h-20 w-full items-center justify-center overflow-hidden rounded bg-muted"><Preview src={`/api/foundry/workspaces/${encodeURIComponent(workspaceId)}/assets/${encodeURIComponent(item.id)}?variant=preview`}/></span><span className="w-full truncate">{item.title}</span>{busy===item.id&&<span role="status">正在添加…</span>}
|
||
</button>)}</div>}
|
||
{error&&<p role="alert">{error}</p>}
|
||
</DialogContent></Dialog>;
|
||
}
|