Plant overview: header bands follow the rounded box corners
Deploy test site / deploy (push) Successful in 44s
Deploy test site / deploy (push) Successful in 44s
Every machine box has rounded corners (rx 4), but its header band was a square rect inset by 1, painted over the box. At both top corners the band's square corner covered the inside of the curved border, so the border looked thin and squared off there, most visibly on a selected box. The band is now a path with top corners of radius 3, concentric with the box. Measured on zoomed crops in headless Edge (light theme, selected border): border thickness along the 45-degree diagonal against the straight edge was 0.26 to 0.42 on the Traceability box, Classic C1 and the VEX 50; now 0.9 to 1.13. Full UI check unchanged: all press states, 47 stations, demo buttons, no overflow, canvas alignment, no errors.
This commit is contained in:
1 parent
f776025b58
commit
9b03e4de07
1 file changed
+6
-3
@@ -299,6 +299,9 @@ const $=id=>document.getElementById(id);
|
||||
const COMPACT=matchMedia('(max-height:560px)');
|
||||
const L={pipes:$('lPipes'),mach:$('lMach'),tok:$('lTok'),top:$('lTop')};
|
||||
function el(tag,attrs,parent,text){const e=document.createElementNS(NS,tag);for(const k in attrs)e.setAttribute(k,attrs[k]);if(text!=null)e.textContent=text;(parent||L.mach).appendChild(e);return e;}
|
||||
// Machine header band: top corners rounded concentric with the box (rx 4, band inset 1, so radius 3).
|
||||
// A square band paints over the inside of the curved border at both top corners.
|
||||
const headD=(x,y,w)=>`M${x+1},${y+19}V${y+4}a3,3 0 0 1 3,-3H${x+w-4}a3,3 0 0 1 3,3V${y+19}Z`;
|
||||
const rnd=(a,b)=>a+Math.random()*(b-a);
|
||||
const jit=(v,a)=>v+(Math.random()-.5)*a;
|
||||
const pick=a=>a[Math.floor(Math.random()*a.length)];
|
||||
@@ -639,7 +642,7 @@ el('text',{x:1368,y:24,class:'roomlbl'},L.mach,'Stamper prep · Sibert');
|
||||
|
||||
function boxBase(m){const g=el('g',{class:'machine',id:'m_'+m.id});
|
||||
el('rect',{x:m.x,y:m.y,width:m.w,height:m.h,rx:4,class:'mbox'},g);
|
||||
el('rect',{x:m.x+1,y:m.y+1,width:m.w-2,height:18,class:'mhead'},g);
|
||||
el('path',{d:headD(m.x,m.y,m.w),class:'mhead'},g);
|
||||
el('text',{x:m.x+7,y:m.y+14,class:'mtitle'},g,m.t);
|
||||
m.lamp=el('circle',{cx:m.x+m.w-10,cy:m.y+10,r:4,class:'lamp'},g);
|
||||
if(m.s)el('text',{x:m.x+7,y:m.y+31,class:'msub'},g,m.s);
|
||||
@@ -658,7 +661,7 @@ function drawSilo(m){const g=el('g',{class:'machine',id:'m_'+m.id});const {x,y,w
|
||||
m.g=g;g.addEventListener('click',()=>select(m.id));}
|
||||
function drawPress(m){const g=el('g',{class:'machine',id:'m_'+m.id});const {x,y,w,h}=m;
|
||||
el('rect',{x,y,width:w,height:h,rx:4,class:'frame'},g);
|
||||
el('rect',{x:x+1,y:y+1,width:w-2,height:18,class:'mhead'},g);
|
||||
el('path',{d:headD(x,y,w),class:'mhead'},g);
|
||||
el('text',{x:x+7,y:y+14,class:'mtitle'},g,m.t);
|
||||
m.lamp=el('circle',{cx:x+w-10,cy:y+10,r:4,class:'lamp'},g);
|
||||
el('text',{x:x+7,y:y+31,class:'msub'},g,m.s);
|
||||
@@ -675,7 +678,7 @@ function drawPress(m){const g=el('g',{class:'machine',id:'m_'+m.id});const {x,y,
|
||||
m.g=g;g.addEventListener('click',()=>select(m.id));}
|
||||
function drawVex(m){const g=el('g',{class:'machine',id:'m_'+m.id});const {x,y,w,h}=m;
|
||||
el('rect',{x,y,width:w,height:h,rx:4,class:'mbox'},g);
|
||||
el('rect',{x:x+1,y:y+1,width:w-2,height:18,class:'mhead'},g);
|
||||
el('path',{d:headD(x,y,w),class:'mhead'},g);
|
||||
el('text',{x:x+7,y:y+14,class:'mtitle'},g,'VEX 50 extruder');
|
||||
m.lamp=el('circle',{cx:x+w-10,cy:y+10,r:4,class:'lamp'},g);
|
||||
m.tagEls=[el('text',{x:x+7,y:y+31,class:'msub'},g,''),el('text',{x:x+7,y:y+43,class:'msub'},g,'')];
|
||||
|
||||
Reference in new issue
Block a user