Place derived canvas nodes without covering existing content

apps/studio/scripts/infinite-canvas-smoke.cjs

@@ -6,15 +6,18 @@ const fs=require('node:fs/promises');
  const base=process.env.BASE_URL||'http://8.211.154.134:18131';
  assert.equal(base,'http://8.211.154.134:18131');
  const browser=await chromium.launch(process.env.CHROMIUM_PATH?{executablePath:process.env.CHROMIUM_PATH,headless:true,args:['--no-sandbox','--disable-dev-shm-usage']}:{channel:'chrome',headless:true});
+ let page;
  try{
   const context=await browser.newContext({viewport:{width:1600,height:1100},storageState:process.env.STORAGE_STATE||undefined});
-  const page=await context.newPage(),errors=[];let choosers=0;
+  page=await context.newPage();const errors=[];let choosers=0;
   page.on('pageerror',e=>errors.push(e.message));page.on('filechooser',()=>choosers++);
   const snapshot=()=>page.evaluate(()=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')));
   const node=id=>page.locator(`[data-node-id="${id}"]`);
   const content=id=>node(id).locator('[data-node-content]');
   const waitField=(id,key,value)=>page.waitForFunction(({id,key,value})=>JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(n=>n.id===id)?.[key]===value,{id,key,value});
   const composer=page.getByRole('region',{name:'节点编辑器'});
+  const capture=async name=>{if(process.env.SCREENSHOT_DIR){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/'+name+'.png'})}};
+  async function unobstructed(id){const box=await node(id).boundingBox();assert.ok(box);for(const card of (await snapshot()).cards.filter(n=>n.id!==id)){const other=await node(card.id).boundingBox();assert.ok(other);assert.equal(box.x<other.x+other.width&&box.x+box.width>other.x&&box.y<other.y+other.height&&box.y+box.height>other.y,false,`${id} overlaps ${card.id}`)}}
   const close=(a,b)=>assert.ok(Math.abs(a-b)<2,`${a} ≈ ${b}`);
   async function drag(handle,dx,dy){const b=await handle.boundingBox();assert.ok(b);await page.mouse.move(b.x+b.width/2,b.y+b.height/2);await page.mouse.down();await page.mouse.move(b.x+b.width/2+dx,b.y+b.height/2+dy,{steps:12});await page.mouse.up()}
   await page.goto(base+'/infinite_canvas');
@@ -38,6 +41,7 @@ const fs=require('node:fs/promises');
   await content('reference').click();assert.equal(await composer.count(),0);
   await page.waitForTimeout(700);await content('reference').click();await composer.waitFor();assert.equal(choosers,0,'Entering image editing must not force a file picker');
   const panelBefore=await composer.boundingBox(),imageBefore=await node('reference').boundingBox();
+  await capture('canvas-composer-desktop');
   await page.getByRole('button',{name:'缩小',exact:true}).click();
   const panelAfter=await composer.boundingBox(),imageAfter=await node('reference').boundingBox();
   close(panelBefore.width,panelAfter.width);close(panelBefore.height,panelAfter.height);assert.ok(imageAfter.width<imageBefore.width);
@@ -46,6 +50,7 @@ const fs=require('node:fs/promises');
   await page.waitForFunction(()=>!!JSON.parse(localStorage.getItem('studio.infinite-canvas.v1')).cards.find(n=>n.id==='reference').image);
   await node('reference').getByRole('button',{name:'图片高清 ↗',exact:true}).click();
   const upscale=(await snapshot()).cards.find(n=>n.operation==='upscale');assert.ok(upscale);
+  await unobstructed(upscale.id);
   const download=page.waitForEvent('download');await composer.getByRole('button',{name:'导出任务',exact:true}).click();
   const task=JSON.parse(await fs.readFile(await (await download).path(),'utf8'));
   assert.equal(task.target.id,upscale.id);assert.equal(task.references[0].id,'reference');assert.ok(task.references[0].image);
@@ -55,6 +60,7 @@ const fs=require('node:fs/promises');
   await node('brief').getByRole('button',{name:'引用 01 / 创意简报 生成',exact:true}).click();
   await page.getByRole('dialog',{name:'画布操作'}).getByRole('button',{name:'脚本',exact:true}).click();
   const script=(await snapshot()).cards.find(n=>n.kind==='script');assert.ok(script);
+  await unobstructed(script.id);
   await composer.getByRole('textbox',{name:'创作要求',exact:true}).fill('基于简报写六个分镜');
   await waitField(script.id,'instruction','基于简报写六个分镜');assert.equal((await snapshot()).cards.find(n=>n.id===script.id).text,'');
   await composer.getByRole('button',{name:'画布参考',exact:true}).click();
@@ -89,5 +95,5 @@ const fs=require('node:fs/promises');
   const viewport=await page.locator('[class*=viewport]').boundingBox();assert.equal(viewport.width,390);assert.equal(viewport.height,844);
   if(process.env.SCREENSHOT_DIR)await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-nodes-mobile.png'});
   assert.deepEqual(errors,[]);console.log('Passed: selected-node re-click editing, drag, formatting, fixed composer, upload, references, task export, deletion/undo, reload and mobile bounds');
- }finally{await browser.close()}
+ }catch(error){if(process.env.SCREENSHOT_DIR&&page){await fs.mkdir(process.env.SCREENSHOT_DIR,{recursive:true});await page.screenshot({path:process.env.SCREENSHOT_DIR+'/canvas-failure.png'}).catch(()=>{})}throw error}finally{await browser.close()}
 })().catch(e=>{console.error(e);process.exitCode=1});