Live DAG: the tip label picks a free spot around the block so it never covers a neighbour on phones
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
parent
621f5cc173
commit
df8588d307
1 changed files with 8 additions and 1 deletions
|
|
@ -378,7 +378,14 @@ footer{border-top:1px solid var(--line);padding-block:48px 32px}
|
|||
if(hv===b){x.strokeStyle='#F4F1EC';x.lineWidth=1.5;rrect(b.px-h-3,b.py-h-3,S+6,S+6,r+2);x.stroke();}}
|
||||
x.font='500 10px IBM Plex Mono, monospace';
|
||||
// the chain tip carries its short id; nothing else is labelled unless hovered, pinned or locked
|
||||
if(tip){x.fillStyle='rgba(244,241,236,0.92)';x.textAlign='right';var ly=tip.py-h-6;if(ly<10){ly=tip.py+h+12;}x.fillText(tip.hash.slice(0,8),Math.min(W-4,tip.px+h+2),ly);}
|
||||
if(tip){var lt=tip.hash.slice(0,8),lw=x.measureText(lt).width,lh=11,pad=3;
|
||||
// candidate label boxes around the tip: above-right, above-left, below-right, below-left, left, right; the first that
|
||||
// stays inside the canvas and overlaps no other on-screen block wins, so the id is never drawn over a neighbour
|
||||
var cands=[[tip.px+h+2-lw,tip.py-h-6-lh],[tip.px-h-2-lw,tip.py-h-6-lh],[tip.px+h+2-lw,tip.py+h+4],[tip.px-h-2-lw,tip.py+h+4],[tip.px-h-6-lw,tip.py-lh/2],[tip.px+h+6,tip.py-lh/2]];
|
||||
var pick=null,ci;for(ci=0;ci<cands.length&&!pick;ci++){var cx=cands[ci][0],cy=cands[ci][1];if(cx<G+2||cx+lw>W-2||cy<2||cy+lh>H-2)continue;var clash=false;
|
||||
for(var bi=0;bi<n&&!clash;bi++){var ob=blocks[bi];if(ob===tip||!ob.on)continue;if(cx-pad<ob.px+h&&cx+lw+pad>ob.px-h&&cy-pad<ob.py+h&&cy+lh+pad>ob.py-h)clash=true;}
|
||||
if(!clash)pick=cands[ci];}
|
||||
if(!pick)pick=cands[0];x.fillStyle='rgba(244,241,236,0.92)';x.textAlign='left';x.textBaseline='top';x.fillText(lt,Math.max(G+2,Math.min(W-2-lw,pick[0])),Math.max(2,pick[1]));x.textBaseline='alphabetic';}
|
||||
if(fx>G){var ft=lk?'final #'+lk.hash.slice(0,8):'final',fw=x.measureText(ft).width;x.fillStyle='#FFB35C';
|
||||
if(fx-G>fw+14){x.textAlign='right';x.fillText(ft,fx-6,12);}else{x.textAlign='left';x.fillText(ft,fx+6,12);}}
|
||||
// tooltip on the canvas, no DOM
|
||||
|
|
|
|||
Loading…
Reference in a new issue