fix: use packed artwork model for standard image uploads

dtf-site.html

@@ -261,8 +261,7 @@ h1 em{font-style:normal;color:var(--laranja)}
 .trocarModo{margin:-4px 0 11px;padding:10px 12px;border-radius:9px;background:#F1FBF5;
  border:1px solid #BFE6CE;font-size:11.5px;color:#1F5C3A;line-height:1.5}
 .trocarModo b{font-family:"Inter",sans-serif;font-weight:700}
-.trocarModo button{margin:7px 0 0;border:0;border-radius:6px;padding:7px 10px;background:var(--verde-ml);
- color:#fff;font-family:"Inter",sans-serif;font-size:11.5px;font-weight:700;cursor:pointer}
+.trocarModo label{display:block;margin-top:7px;cursor:pointer}
 .zona{border:2px dashed var(--laranja);border-radius:13px;padding:44px 20px;text-align:center;
  cursor:pointer;margin-bottom:14px;background:#FFF6E8;transition:var(--transition)}
 .zona:hover,.zona.sobre{border-color:var(--laranja2);background:#FFEFD6;
@@ -1002,8 +1001,11 @@ footer a:hover{color:var(--laranja2)}
           <div class="fila">
             <div class="trocouCam" id="trocouCam" style="display:none"></div>
             <div class="trocarModo" id="trocarParaAvulsa" hidden>
-              <b>É uma imagem ou arte solta?</b> Nós montamos, repetimos e encaixamos na folha.
-              <button type="button" id="mudarParaAvulsa">Montar minha arte</button>
+              <b>PNG e JPG entram como artes avulsas.</b> Informe largura e quantidade;
+              montamos a folha, com o preço de artes avulsas.
+              <label><input type="checkbox" id="imagemComoFolha">
+                Minha imagem já é uma folha montada de <span id="larguraFolhaPronta">57</span> cm
+                · usar o preço de arquivo por metro</label>
             </div>
             <div class="caminhos" id="caminhos">
               <button class="cam on" data-cam="auto">
@@ -1462,6 +1464,17 @@ document.querySelectorAll('[data-modo-cta]').forEach(b=>b.addEventListener('clic
 function abrir(m){
   modo=m; artes=[]; folhas=[]; metros=0; nota=0; reencaixado=false;
   montagemCm=0;
+  $('imagemComoFolha').checked=false;
+  $('imagemComoFolha').disabled=false;
+  pintaModo();
+  $('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
+  recemChegada=null; caminho='auto'; avisoCam(''); pintaCaminhos();
+  $('vMt').textContent='—'; previaAoVivo(); agendaAvaliacao();
+  limpaPaineis();   // o carrinho só some se o pedido estiver vazio
+  $('foco').scrollIntoView({behavior:'smooth',block:'start'});
+}
+function pintaModo(){
+  const m=modo;
   const c=MODOS[m];
   $('cards').style.display='none'; $('foco').classList.add('on');
   $('fTit').textContent=c.tit; $('fLg').textContent=c.lg;
@@ -1472,21 +1485,10 @@ function abrir(m){
                                : '.png,.jpg,.jpeg,.webp';
   $('catFoco').className='cat '+(ehFolha(m)?'file':'av');
   $('trocarParaAvulsa').hidden=!ehFolha(m);
+  $('larguraFolhaPronta').textContent=String(c.larg).replace('.',',');
   $('foco2').classList.remove('sofila');            // a caixa de requisitos vale nos 4 modos
   $('montcabTit').textContent = ehFolha(m) ? 'Sua folha' : 'Montagem ao vivo';
-  $('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
-  recemChegada=null; caminho='auto'; avisoCam(''); pintaCaminhos();
-  $('vMt').textContent='—'; previaAoVivo(); agendaAvaliacao();
-  limpaPaineis();   // o carrinho só some se o pedido estiver vazio
-  $('foco').scrollIntoView({behavior:'smooth',block:'start'});
 }
-$('mudarParaAvulsa').addEventListener('click',()=>{
-  // A ready sheet and a loose artwork have different pricing units. Preserve the
-  // selected browser files, but ask for the artwork width in the packing flow.
-  const arquivos=folhas.map(x=>x.f);
-  abrir('avulsa');
-  if(arquivos.length) sel(arquivos);
-});
 $('bVoltar').addEventListener('click',()=>{
   itemAtual=null; $('atual').style.display='none'; $('carrLin').innerHTML=''; pintaPedido();
   $('foco').classList.remove('on'); $('cards').style.display='';
@@ -1523,6 +1525,18 @@ Z.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){I.click();e.pr
 I.addEventListener('change',()=>sel([...I.files]));
 function sel(fs){
   if(!fs.length) return;
+  // Pixels cannot tell a loose artwork from a finished sheet. Images default
+  // to the artwork model unless the customer explicitly declares a ready sheet.
+  // Update this same editor in place; do not reopen it or discard uploaded files.
+  if(ehFolha() && !$('imagemComoFolha').checked && fs.some(f=>ACEITA.avulsa.test(f.name))){
+    if(fs.some(f=>!ACEITA.avulsa.test(f.name))){
+      $('recusa').style.display='block';
+      $('recusa').textContent='Envie artes avulsas e folhas prontas separadamente. Para uma imagem já montada, marque a opção de folha pronta.';
+      return;
+    }
+    modo=modo==='uvfile'?'uv':'avulsa';
+    pintaModo(); pintaCaminhos();
+  }
   const regra = ehFolha() ? ACEITA.folha : ACEITA.avulsa;
   const fora = fs.filter(f=>!regra.test(f.name));
   fs = fs.filter(f=>regra.test(f.name));
@@ -1545,6 +1559,7 @@ function sel(fs){
       pintaCaminhos();
     }
     const novas=fs.map(f=>({f, med:null, rep:1, m:0, semAnalise:null}));
+    $('imagemComoFolha').checked=true;
     folhas=folhas.concat(novas);            // soma, não substitui
     pintaFolha();
     novas.forEach(x=>{
@@ -1867,6 +1882,8 @@ function medirFolha(file){
 
 function pintaFolha(){
   const L=larguraFilme();
+  $('imagemComoFolha').disabled=folhas.length>0;
+  if(!folhas.length) $('imagemComoFolha').checked=false;
   if(!folhas.length){ $('lista').innerHTML=''; agendaAvaliacao(); previaAoVivo(); return; }
 
   $('lista').innerHTML = folhas.map((x,i)=>{
@@ -2019,10 +2036,9 @@ function pintaArtes(){
     let barra='', dica='', calc='<span>informe a largura para ver a qualidade</span>';
     if(a.cm>0){
       const dpi=Math.round(a.px/(a.cm/2.54)), n=Math.max(6,Math.min(100,Math.round(dpi/300*100)));
-      const alt=a.prop? a.cm*a.prop : null;
       barra='<div class="qb2"><i class="'+cls(n)+'" style="width:'+n+'%"></i></div>';
       calc='<span class="'+cls(n)+'"><b>'+n+'%</b> · '+dpi+' DPI</span><span>'+
-        (a.q>1? a.q+' × ':'')+(a.cm*a.q/100).toFixed(2).replace('.',',')+' m no total</span>';
+        a.q+' × '+n1(a.cm)+' × '+n1(a.cm*propDe(a))+' cm</span>';
       const sug=sugestao(a);
       dica = sug
         ? '<div class="dica"><b>Reduzindo para '+n1(sug.alvo)+' cm você economiza '+
@@ -2051,7 +2067,13 @@ function pintaArtes(){
   }).join('');
   $('lista').querySelectorAll('[data-rm]').forEach(b=>b.addEventListener('click',()=>{artes.splice(+b.dataset.rm,1);pintaArtes();}));
   $('lista').querySelectorAll('[data-cm]').forEach(i=>i.addEventListener('change',()=>{artes[+i.dataset.cm].cm=+i.value||0;pintaArtes();}));
-  $('lista').querySelectorAll('[data-q]').forEach(i=>i.addEventListener('change',()=>{artes[+i.dataset.q].q=+i.value||1;pintaArtes();}));
+  $('lista').querySelectorAll('[data-q]').forEach(i=>i.addEventListener('change',()=>{artes[+i.dataset.q].q=Math.max(1,Math.floor(+i.value||1));pintaArtes();}));
+  $('lista').querySelectorAll('[data-cm], [data-q]').forEach(i=>i.addEventListener('input',()=>{
+    const largura=i.hasAttribute('data-cm');
+    const a=artes[+(largura?i.dataset.cm:i.dataset.q)];
+    a[largura?'cm':'q']=largura?Math.max(0,+i.value||0):Math.max(1,Math.floor(+i.value||1));
+    previaAoVivo();
+  }));
   $('lista').querySelectorAll('[data-usar]').forEach(b=>b.addEventListener('click',()=>{
     artes[+b.dataset.usar].cm=+b.dataset.cm; pintaArtes();
   }));
@@ -2348,7 +2370,7 @@ function dilatar(bruto,cw,ch,cheias){
   }
   return {cw:cw2,ch:ch2,bits:out,cheias};       // cheias = área de arte, sem a folga
 }
-function mascara(img,w,h,rot){
+function mascara(img,w,h,rot,esp=false){
   const cw=Math.max(1,Math.ceil(w/CEL)), ch=Math.max(1,Math.ceil(h/CEL));
   const cv=document.createElement('canvas');
   cv.width=cw; cv.height=ch;
@@ -2359,8 +2381,11 @@ function mascara(img,w,h,rot){
     return dilatar(bruto,cw,ch,cheias);
   }
   ctx.save();
-  if(rot===90){ ctx.translate(cw,0); ctx.rotate(Math.PI/2); ctx.drawImage(img,0,0,ch,cw); }
-  else ctx.drawImage(img,0,0,cw,ch);
+  ctx.translate(cw/2,ch/2);
+  ctx.rotate(rot*Math.PI/180);
+  if(esp) ctx.scale(-1,1);
+  const dw=rot%180===90?ch:cw, dh=rot%180===90?cw:ch;
+  ctx.drawImage(img,-dw/2,-dh/2,dw,dh);
   ctx.restore();
   const d=ctx.getImageData(0,0,cw,ch).data;
   bruto=new Uint8Array(cw*ch); cheias=0;
@@ -2406,7 +2431,8 @@ function encaixar(pecas,W){
     oris.forEach(o=>{
       if(o.w>W) return;
       // a máscara segue a medida da orientação escolhida · girada, largura e altura trocam
-      const m = (p.mPronta && o.rot===0) ? p.mPronta : mascara(p.img, o.w, o.h, o.rot);
+      const m = (p.mPronta && o.rot===0) ? p.mPronta : mascara(p.img, o.w, o.h,
+        o.rot+(p.a?.giro||0), p.a?.esp);
       const xs=new Set([0]), ys=new Set([0]);
       postas.forEach(q=>{ xs.add(q.cx+q.m.cw); xs.add(q.cx); ys.add(q.cy+q.m.ch); ys.add(q.cy); });
       const passoX=Math.max(1,Math.round(cols/34));
@@ -2436,7 +2462,7 @@ function encaixar(pecas,W){
     if(!melhor){
       const k=Math.min(1, W/p.w);                // cabe na largura, nem que seja reduzindo
       const w=p.w*k, h=p.h*k;
-      const m=mascara(p.img,w,h,0);
+      const m=mascara(p.img,w,h,p.a?.giro||0,p.a?.esp);
       melhor={cx:0,cy:linhas,m,x:0,y:linhas*CEL,w,h,rot:0,ref:p};
     }
     // a folga só existe entre peças, não é folha cobrada
@@ -2449,8 +2475,9 @@ function encaixar(pecas,W){
 }
 
 function desenhaMontagem(area,lista,mts,W,fora,aoTerminar){
-  const PX_CM=W/larguraFilme();
-  const itens=[]; lista.forEach(a=>{ for(let k=0;k<(a.q||1);k++) itens.push(a); });
+  const versao=area.montagemVersao=(area.montagemVersao||0)+1;
+  const filme=larguraFilme(), PX_CM=W/filme;
+  const itens=lista.map(a=>({...a}));
   if(fora) fora.innerHTML='';
   if(!itens.length){
     area.innerHTML='<div class="semmont"><b>A montagem aparece aqui</b>'+
@@ -2459,13 +2486,15 @@ function desenhaMontagem(area,lista,mts,W,fora,aoTerminar){
     return;
   }
 
-  Promise.all(itens.map(a=>carregarImagem(a.f).then(img=>({a,img})))).then(cargas=>{
+  Promise.all(itens.map(a=>carregarImagem(a.f).then(img=>({a,img})))).then(imagens=>{
+    if(area.montagemVersao!==versao) return;
+    const cargas=imagens.flatMap(c=>Array.from({length:c.a.q||1},()=>({...c})));
     cargas.forEach(c=>{
       c.w = c.a.cm;                                    // o motor trabalha em centímetros
       c.h = c.w * (c.img ? (c.a.giro? c.img.width/c.img.height : c.img.height/c.img.width) : 1);
       c.travado = !!c.a.giro;                    // giro do cliente manda no encaixe
     });
-    const enc=encaixar(cargas,larguraFilme());
+    const enc=encaixar(cargas,filme);
     const alturaCm=enc.altura;
     const pos=enc.pos.map(p=>({...p, x:p.x*PX_CM, y:p.y*PX_CM, w:p.w*PX_CM, h:p.h*PX_CM}));
     const altura=alturaCm*PX_CM;
@@ -2483,7 +2512,7 @@ function desenhaMontagem(area,lista,mts,W,fora,aoTerminar){
       ctx.save();
       const giro = (p.rot===90?90:0) + (c.a && c.a.giro? 90:0);
       ctx.translate(p.x+p.w/2, p.y+p.h/2);
-      if(giro%180===90) ctx.rotate(Math.PI/2);
+      ctx.rotate(giro*Math.PI/180);
       if(c.a && c.a.esp) ctx.scale(-1,1);
       const dw = giro%180===90 ? p.h : p.w, dh = giro%180===90 ? p.w : p.h;
       if(c.img) ctx.drawImage(c.img,-dw/2,-dh/2,dw,dh);
@@ -2494,7 +2523,7 @@ function desenhaMontagem(area,lista,mts,W,fora,aoTerminar){
         ctx.fillText(c.a.f.name.split('.').pop().toUpperCase(),p.x+p.w/2,p.y+p.h/2+4);
       }
     });
-    molduraFolha(ctx,W,usado,larguraFilme(),alturaCm/100);
+    molduraFolha(ctx,W,usado,filme,alturaCm/100);
     marcaDagua(ctx,W,cv.height);
     area.innerHTML=''; area.appendChild(cv);
 
@@ -2503,7 +2532,7 @@ function desenhaMontagem(area,lista,mts,W,fora,aoTerminar){
     const areaArteCm=enc.pos.reduce((s,p)=>
       s + (p.m && p.m.cheias!=null ? p.m.cheias*CEL*CEL : p.w*p.h), 0);
     const uso=Math.max(1,Math.min(100,
-      Math.round(areaArteCm/(larguraFilme()*Math.max(alturaCm,0.1))*100)));
+      Math.round(areaArteCm/(filme*Math.max(alturaCm,0.1))*100)));
     const el=document.createElement('div');
     el.className = uso>=70? 'usoBom' : 'usoRuim';
     el.innerHTML = (uso>=70
@@ -2522,6 +2551,8 @@ function previaArtes(){ desenhaMontagem($('pArea'), artes, metros, 560); }
 // montagem ao vivo, ao lado da fila · redesenha 140 ms depois da ultima mexida
 let tMont=null;
 function previaAoVivo(){
+  clearTimeout(tMont);
+  $('vArea').montagemVersao=($('vArea').montagemVersao||0)+1;
   if(ehFolha()){
     $('vUso').innerHTML='';
     const tot=folhaTotalM();
@@ -2551,7 +2582,6 @@ function previaAoVivo(){
     }
     return;
   }
-  clearTimeout(tMont);
   tMont=setTimeout(()=>{
     const prontas=artes.filter(a=>a.cm>0);
     const W=Math.round(300*ZOOMS[zoomI]);