Tighter tactile panel: canvas shrinks to content, sidebar 340px; ep4 re-uploaded as a regular file

ep0/viewer.html

@@ -47,7 +47,7 @@ canvas{width:100%;display:block;cursor:pointer}
 .dl-cmd{background:#171b24;color:#c7ccd6;border:1px solid #232733;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:ui-monospace,monospace}
 .dl-cmd:hover{border-color:#3a4a6a}.dl:hover{text-decoration:underline}
 
-.layout{grid-template-columns:1fr 400px}
+.layout{grid-template-columns:1fr 340px}
 .sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
 .sidecol > .panel:first-child{flex:1 1 auto;min-height:120px;overflow:auto}
 .tacpanel{flex:0 0 auto}
@@ -280,7 +280,7 @@ function drawTactile(i){
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
   const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=8+hi*(HW/2)-BBOX.x*HSC;
+    const ox=8+hi*(HW/2-8+8)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -422,10 +422,12 @@ function fitHand(){
     if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
   }
   h=Math.min(300,Math.max(150,Math.floor(h)));
-  var w=Math.max(280,Math.floor(tac.clientWidth-20));
-  if(h===HH && w===HW) return;
-  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
-  cHand.style.height=HH+'px';
+  var wAvail=Math.max(240,Math.floor(tac.clientWidth-16));
+  var sc=Math.min(h/BBOX.h,(wAvail/2-6)/BBOX.w);          // 先定缩放
+  var w=Math.ceil(2*(BBOX.w*sc)+16), hh=Math.ceil(BBOX.h*sc)+2;   // 再把画布收到内容大小
+  if(hh===HH && w===HW) return;
+  HH=hh; HW=w; HSC=sc;
+  cHand.style.height=HH+'px'; cHand.style.width=HW+'px'; cHand.style.margin='0 auto';
   drawTactile(_frame);
 }
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});

ep1/viewer.html

@@ -47,7 +47,7 @@ canvas{width:100%;display:block;cursor:pointer}
 .dl-cmd{background:#171b24;color:#c7ccd6;border:1px solid #232733;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:ui-monospace,monospace}
 .dl-cmd:hover{border-color:#3a4a6a}.dl:hover{text-decoration:underline}
 
-.layout{grid-template-columns:1fr 400px}
+.layout{grid-template-columns:1fr 340px}
 .sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
 .sidecol > .panel:first-child{flex:1 1 auto;min-height:120px;overflow:auto}
 .tacpanel{flex:0 0 auto}
@@ -280,7 +280,7 @@ function drawTactile(i){
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
   const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=8+hi*(HW/2)-BBOX.x*HSC;
+    const ox=8+hi*(HW/2-8+8)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -422,10 +422,12 @@ function fitHand(){
     if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
   }
   h=Math.min(300,Math.max(150,Math.floor(h)));
-  var w=Math.max(280,Math.floor(tac.clientWidth-20));
-  if(h===HH && w===HW) return;
-  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
-  cHand.style.height=HH+'px';
+  var wAvail=Math.max(240,Math.floor(tac.clientWidth-16));
+  var sc=Math.min(h/BBOX.h,(wAvail/2-6)/BBOX.w);          // 先定缩放
+  var w=Math.ceil(2*(BBOX.w*sc)+16), hh=Math.ceil(BBOX.h*sc)+2;   // 再把画布收到内容大小
+  if(hh===HH && w===HW) return;
+  HH=hh; HW=w; HSC=sc;
+  cHand.style.height=HH+'px'; cHand.style.width=HW+'px'; cHand.style.margin='0 auto';
   drawTactile(_frame);
 }
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});

ep2/viewer.html

@@ -47,7 +47,7 @@ canvas{width:100%;display:block;cursor:pointer}
 .dl-cmd{background:#171b24;color:#c7ccd6;border:1px solid #232733;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:ui-monospace,monospace}
 .dl-cmd:hover{border-color:#3a4a6a}.dl:hover{text-decoration:underline}
 
-.layout{grid-template-columns:1fr 400px}
+.layout{grid-template-columns:1fr 340px}
 .sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
 .sidecol > .panel:first-child{flex:1 1 auto;min-height:120px;overflow:auto}
 .tacpanel{flex:0 0 auto}
@@ -280,7 +280,7 @@ function drawTactile(i){
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
   const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=8+hi*(HW/2)-BBOX.x*HSC;
+    const ox=8+hi*(HW/2-8+8)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -422,10 +422,12 @@ function fitHand(){
     if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
   }
   h=Math.min(300,Math.max(150,Math.floor(h)));
-  var w=Math.max(280,Math.floor(tac.clientWidth-20));
-  if(h===HH && w===HW) return;
-  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
-  cHand.style.height=HH+'px';
+  var wAvail=Math.max(240,Math.floor(tac.clientWidth-16));
+  var sc=Math.min(h/BBOX.h,(wAvail/2-6)/BBOX.w);          // 先定缩放
+  var w=Math.ceil(2*(BBOX.w*sc)+16), hh=Math.ceil(BBOX.h*sc)+2;   // 再把画布收到内容大小
+  if(hh===HH && w===HW) return;
+  HH=hh; HW=w; HSC=sc;
+  cHand.style.height=HH+'px'; cHand.style.width=HW+'px'; cHand.style.margin='0 auto';
   drawTactile(_frame);
 }
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});

ep3/viewer.html

@@ -47,7 +47,7 @@ canvas{width:100%;display:block;cursor:pointer}
 .dl-cmd{background:#171b24;color:#c7ccd6;border:1px solid #232733;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:ui-monospace,monospace}
 .dl-cmd:hover{border-color:#3a4a6a}.dl:hover{text-decoration:underline}
 
-.layout{grid-template-columns:1fr 400px}
+.layout{grid-template-columns:1fr 340px}
 .sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
 .sidecol > .panel:first-child{flex:1 1 auto;min-height:120px;overflow:auto}
 .tacpanel{flex:0 0 auto}
@@ -280,7 +280,7 @@ function drawTactile(i){
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
   const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=8+hi*(HW/2)-BBOX.x*HSC;
+    const ox=8+hi*(HW/2-8+8)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -422,10 +422,12 @@ function fitHand(){
     if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
   }
   h=Math.min(300,Math.max(150,Math.floor(h)));
-  var w=Math.max(280,Math.floor(tac.clientWidth-20));
-  if(h===HH && w===HW) return;
-  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
-  cHand.style.height=HH+'px';
+  var wAvail=Math.max(240,Math.floor(tac.clientWidth-16));
+  var sc=Math.min(h/BBOX.h,(wAvail/2-6)/BBOX.w);          // 先定缩放
+  var w=Math.ceil(2*(BBOX.w*sc)+16), hh=Math.ceil(BBOX.h*sc)+2;   // 再把画布收到内容大小
+  if(hh===HH && w===HW) return;
+  HH=hh; HW=w; HSC=sc;
+  cHand.style.height=HH+'px'; cHand.style.width=HW+'px'; cHand.style.margin='0 auto';
   drawTactile(_frame);
 }
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});

ep5/viewer.html

@@ -47,7 +47,7 @@ canvas{width:100%;display:block;cursor:pointer}
 .dl-cmd{background:#171b24;color:#c7ccd6;border:1px solid #232733;border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:ui-monospace,monospace}
 .dl-cmd:hover{border-color:#3a4a6a}.dl:hover{text-decoration:underline}
 
-.layout{grid-template-columns:1fr 400px}
+.layout{grid-template-columns:1fr 340px}
 .sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
 .sidecol > .panel:first-child{flex:1 1 auto;min-height:120px;overflow:auto}
 .tacpanel{flex:0 0 auto}
@@ -280,7 +280,7 @@ function drawTactile(i){
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
   const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=8+hi*(HW/2)-BBOX.x*HSC;
+    const ox=8+hi*(HW/2-8+8)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -422,10 +422,12 @@ function fitHand(){
     if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
   }
   h=Math.min(300,Math.max(150,Math.floor(h)));
-  var w=Math.max(280,Math.floor(tac.clientWidth-20));
-  if(h===HH && w===HW) return;
-  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
-  cHand.style.height=HH+'px';
+  var wAvail=Math.max(240,Math.floor(tac.clientWidth-16));
+  var sc=Math.min(h/BBOX.h,(wAvail/2-6)/BBOX.w);          // 先定缩放
+  var w=Math.ceil(2*(BBOX.w*sc)+16), hh=Math.ceil(BBOX.h*sc)+2;   // 再把画布收到内容大小
+  if(hh===HH && w===HW) return;
+  HH=hh; HW=w; HSC=sc;
+  cHand.style.height=HH+'px'; cHand.style.width=HW+'px'; cHand.style.margin='0 auto';
   drawTactile(_frame);
 }
 window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});