← Commit history

tlvh431acdbvr: viewers

Ray ·59f1bd9998 ·2d ago ·parent 22dfc49
2 files changed +275−2
viewers/footprint.html+210−1
@@ -1 +1,210 @@-<!doctype html><title>tlvh431acdbvr</title>\ No newline at end of file+<!doctype html><html><head><meta charset="utf-8">+<title>SOT-23-5 - adom-footprint</title>+<meta name="viewport" content="width=device-width,initial-scale=1">+<style>+/* ── adom-footprint shared viewer core (CSS) ───────────────────────────────+   Included VERBATIM by both the live app (app.html) and the static embed+   (embed.html) so the canvas, zoom toolbar and layer-panel rows look identical+   and cannot drift. Self-contained literal colours (no dependency on either+   file's CSS vars). Class prefix: av- */++.av-vp{position:absolute;inset:0;overflow:hidden;cursor:grab;background:radial-gradient(circle at 50% 42%,#121a26 0%,#0d1117 72%)}+.av-vp.grab{cursor:grabbing}+/* DIRECT child only — the zoom-toolbar button icons (.av-tools svg) also live+   inside .av-vp; without '>' they'd inherit position:absolute and stack at 0,0. */+.av-vp > svg{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;display:block}++/* zoom toolbar */+/* Grouped translucent toolbar (matches adom-symbol's .tools): one container, borderless+   buttons that highlight on hover — instead of individually-boxed buttons. */+.av-tools{position:absolute;left:10px;top:10px;display:flex;gap:3px;padding:3px;z-index:5;background:rgba(22,27,34,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #222b38;border-radius:9px}+.av-tools button{width:30px;height:30px;border-radius:6px;border:none;background:transparent;color:#cfd8e2;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}+.av-tools button svg{width:16px;height:16px;display:block}+.av-tools button:hover{background:#222b38;color:#37c8a6}+.av-tools button:focus,.av-tools button:focus-visible{outline:none}+.av-panhint{position:absolute;right:10px;bottom:9px;color:#8b949e;font-size:11px;z-index:5;pointer-events:none;user-select:none;-webkit-user-select:none}++/* layer panel rows */+.av-lrow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer}+.av-lrow:hover{background:#161c27}+.av-lrow .sw{width:13px;height:13px;border-radius:3px;border:1px solid rgba(255,255,255,.15);flex:0 0 13px}+.av-lrow .sw.ring{background:transparent!important}+.av-lrow .ln{flex:1;font-size:13px}+.av-lrow .meta{font-size:10px;color:#8b949e}+.av-lrow .chk{width:16px;height:16px;border-radius:4px;border:1.5px solid #3a4757;display:grid;place-items:center;color:#0b0f17;font-size:11px}+.av-lrow.on .chk{background:#37c8a6;border-color:#37c8a6}+.av-lrow.off .ln,.av-lrow.off .sw{opacity:.4}+.av-lrow.special{background:linear-gradient(100deg,rgba(55,200,166,.10),transparent);border:1px solid rgba(55,200,166,.25);margin-top:4px}+.av-lrow.special .ln{color:#7ef0d2;font-weight:600}++:root{--bg:#0d1117;--panel:#11161f;--border:#222b38;--text:#e6edf3;--muted:#8b949e;--accent:#37c8a6}+*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}+body{background:var(--bg);color:var(--text);font-family:'Satoshi','Segoe UI',system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}+header{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--border);flex:0 0 auto}+header .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}+header .b{font-weight:700;font-size:14px}header .b span{color:var(--muted);font-weight:400}+header .nm{margin-left:auto;font-weight:600;font-size:13px;color:#cfd8e2}+main{flex:1;display:flex;min-height:0}+.vpwrap{flex:1;position:relative;min-width:0}+aside{flex:0 0 248px;border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;min-height:0}+aside .ah{padding:9px 12px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}+.layers{padding:6px}+.note{font-size:11px;color:var(--muted);line-height:1.45;padding:8px 11px}+.note b{color:#7ef0d2}+</style></head>+<body>+  <header><span class="dot"></span><span class="b">adom-footprint <span>· interactive</span></span><span class="nm">SOT-23-5</span></header>+  <main>+    <div class="vpwrap">+      <div class="av-vp" id="vp">+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.950 -2.400 5.900 4.800" preserveAspectRatio="xMidYMid meet"><g class="adom-layer-courtyard"><line x1="-2.0500" y1="-1.5000" x2="-1.0500" y2="-1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="-2.0500" y1="1.5000" x2="-2.0500" y2="-1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="-1.0500" y1="-1.7000" x2="1.0500" y2="-1.7000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="-1.0500" y1="-1.5000" x2="-1.0500" y2="-1.7000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="-1.0500" y1="1.5000" x2="-2.0500" y2="1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="-1.0500" y1="1.7000" x2="-1.0500" y2="1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="-1.7000" x2="1.0500" y2="-1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="-1.5000" x2="2.0500" y2="-1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="-0.3900" x2="1.0500" y2="0.3900" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="0.3900" x2="2.0500" y2="0.3900" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="1.5000" x2="1.0500" y2="1.7000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="1.0500" y1="1.7000" x2="-1.0500" y2="1.7000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="2.0500" y1="-1.5000" x2="2.0500" y2="-0.3900" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="2.0500" y1="-0.3900" x2="1.0500" y2="-0.3900" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="2.0500" y1="0.3900" x2="2.0500" y2="1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/><line x1="2.0500" y1="1.5000" x2="1.0500" y2="1.5000" stroke="#FF26E2" stroke-width="0.050" stroke-linecap="round" fill="none"/></g><g class="adom-layer-fab"><polygon points="-0.4000,-1.4500 0.8000,-1.4500 0.8000,1.4500 -0.8000,1.4500 -0.8000,-1.0500" stroke="#6e7681" stroke-width="0.100" fill="none"/></g><g class="adom-layer-copper"><g data-pad="1" data-shape="roundrect" data-size="1.325x0.600" data-mount="smd"><rect x="-1.800" y="-1.250" width="1.325" height="0.600" rx="0.150" fill="#C83434" stroke="#ef5350" stroke-width="0.04"/></g><g data-pad="2" data-shape="roundrect" data-size="1.325x0.600" data-mount="smd"><rect x="-1.800" y="-0.300" width="1.325" height="0.600" rx="0.150" fill="#C83434" stroke="#ef5350" stroke-width="0.04"/></g><g data-pad="3" data-shape="roundrect" data-size="1.325x0.600" data-mount="smd"><rect x="-1.800" y="0.650" width="1.325" height="0.600" rx="0.150" fill="#C83434" stroke="#ef5350" stroke-width="0.04"/></g><g data-pad="4" data-shape="roundrect" data-size="1.325x0.600" data-mount="smd"><rect x="0.475" y="0.650" width="1.325" height="0.600" rx="0.150" fill="#C83434" stroke="#ef5350" stroke-width="0.04"/></g><g data-pad="5" data-shape="roundrect" data-size="1.325x0.600" data-mount="smd"><rect x="0.475" y="-1.250" width="1.325" height="0.600" rx="0.150" fill="#C83434" stroke="#ef5350" stroke-width="0.04"/></g></g><g class="adom-layer-heatsink"></g><g class="adom-layer-drill"></g><g class="adom-layer-silk"><line x1="-0.9100" y1="-1.5600" x2="0.9100" y2="-1.5600" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="-0.9100" y1="-1.5100" x2="-0.9100" y2="-1.5600" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="-0.9100" y1="1.5600" x2="-0.9100" y2="1.5100" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="0.9100" y1="-1.5600" x2="0.9100" y2="-1.5100" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="0.9100" y1="-0.3900" x2="0.9100" y2="0.3900" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="0.9100" y1="1.5100" x2="0.9100" y2="1.5600" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><line x1="0.9100" y1="1.5600" x2="-0.9100" y2="1.5600" stroke="#00cccc" stroke-width="0.120" stroke-linecap="round" fill="none"/><polygon points="-1.4500,-1.5100 -1.6900,-1.8400 -1.2100,-1.8400" stroke="#00cccc" stroke-width="0.120" fill="#00cccc"/></g><g class="adom-layer-padnum"><text x="-1.137" y="-0.950" text-anchor="middle" dominant-baseline="central" font-size="0.252" fill="#fff" font-family="sans-serif" style="pointer-events:none">1</text><text x="-1.137" y="0.000" text-anchor="middle" dominant-baseline="central" font-size="0.252" fill="#fff" font-family="sans-serif" style="pointer-events:none">2</text><text x="-1.137" y="0.950" text-anchor="middle" dominant-baseline="central" font-size="0.252" fill="#fff" font-family="sans-serif" style="pointer-events:none">3</text><text x="1.137" y="0.950" text-anchor="middle" dominant-baseline="central" font-size="0.252" fill="#fff" font-family="sans-serif" style="pointer-events:none">4</text><text x="1.137" y="-0.950" text-anchor="middle" dominant-baseline="central" font-size="0.252" fill="#fff" font-family="sans-serif" style="pointer-events:none">5</text></g><g class="adom-layer-paste-apertures"><rect x="-1.800" y="-1.250" width="1.325" height="0.600" rx="0.05" transform="rotate(0.00 -1.137 -0.950)" fill="none" stroke="#8aa0b8" stroke-width="0.03" stroke-dasharray="0.12 0.08" opacity="0.7"/><rect x="-1.800" y="-0.300" width="1.325" height="0.600" rx="0.05" transform="rotate(0.00 -1.137 0.000)" fill="none" stroke="#8aa0b8" stroke-width="0.03" stroke-dasharray="0.12 0.08" opacity="0.7"/><rect x="-1.800" y="0.650" width="1.325" height="0.600" rx="0.05" transform="rotate(0.00 -1.137 0.950)" fill="none" stroke="#8aa0b8" stroke-width="0.03" stroke-dasharray="0.12 0.08" opacity="0.7"/><rect x="0.475" y="0.650" width="1.325" height="0.600" rx="0.05" transform="rotate(0.00 1.137 0.950)" fill="none" stroke="#8aa0b8" stroke-width="0.03" stroke-dasharray="0.12 0.08" opacity="0.7"/><rect x="0.475" y="-1.250" width="1.325" height="0.600" rx="0.05" transform="rotate(0.00 1.137 -0.950)" fill="none" stroke="#8aa0b8" stroke-width="0.03" stroke-dasharray="0.12 0.08" opacity="0.7"/></g><g class="adom-layer-paste-dots"><circle cx="-1.512" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.262" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.012" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-0.762" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.512" cy="0.000" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.262" cy="0.000" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.012" cy="0.000" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-0.762" cy="0.000" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.512" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.262" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-1.012" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="-0.762" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="0.762" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.012" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.262" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.512" cy="0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="0.762" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.012" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.262" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/><circle cx="1.512" cy="-0.950" r="0.150" fill="#37c8a6" opacity="0.92"/></g></svg>+      </div>+    </div>+    <aside>+      <div class="ah">Layers</div>+      <div class="layers" id="layers"></div>+      <div class="note">The <b>solder paste jet</b> layer shows the 300µm paste-dispensing dots that travel with the footprint. Off by default — toggle it on.</div>+    </aside>+  </main>+<script>/* ── adom-footprint shared viewer core (window.AV) ─────────────────────────+   Single source of truth for the layer list, toggle behaviour, defaults,+   pan/zoom and toolbar icons. Included VERBATIM by both app.html (live) and+   embed.html (static) so the two viewers cannot drift. Pure client-side; works+   on any SVG that carries the <g class="adom-layer-*"> groups. */+(function(){+  var ICON_ZIN='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M20 20l-4.5-4.5M10.5 8v5M8 10.5h5"/></svg>';+  var ICON_ZOUT='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M20 20l-4.5-4.5M8 10.5h5"/></svg>';+  // Zoom-to-FIT = a magnifier with a small square inside (fit content to view).+  // Deliberately NOT the four-corner expand/"fullscreen" glyph.+  var ICON_FIT='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M20 20l-4.5-4.5"/><rect x="7.6" y="7.6" width="5.8" height="5.8" rx="1.2"/></svg>';++  // The canonical layer list. Every layer is a <g class="adom-layer-*"> in the+  // self-rendered SVG, so toggling is group-based (robust) — never colour-match.+  // `kind:'group'` on every entry: all layers are toggled by their <g> group+  // (robust), never by colour-match. (app.html still reads def.kind.)+  var LAYER_DEFS=[+    {key:'copper',    name:'Copper',           kind:'group', sel:'.adom-layer-copper',          sw:'#C83434'},+    // Auto-generated thermal-via array under the exposed pad — only present (and+    // listed) when the footprint has an exposed thermal pad.+    {key:'heatsink',  name:'Heatsink vias',    kind:'group', sel:'.adom-layer-heatsink',        sw:'#e8a13a'},+    {key:'padnum',    name:'Pad numbers',      kind:'group', sel:'.adom-layer-padnum',          sw:'#ffffff', ring:true},+    {key:'silk',      name:'Silkscreen',       kind:'group', sel:'.adom-layer-silk',            sw:'#00cccc'},+    {key:'fab',       name:'Fab (F.Fab)',      kind:'group', sel:'.adom-layer-fab',             sw:'#6e7681', ring:true},+    {key:'courtyard', name:'Courtyard',        kind:'group', sel:'.adom-layer-courtyard',       sw:'#FF26E2', ring:true},+    {key:'drill',     name:'Drill',            kind:'group', sel:'.adom-layer-drill',           sw:'#888888', ring:true},+    {key:'paste-ap',  name:'Paste apertures',  kind:'group', sel:'.adom-layer-paste-apertures', sw:'#8aa0b8', ring:true},+    // Generic name — the 300µm solder-paste dispensing dots. Off by default.+    {key:'paste-dots',name:'Solder paste jet', kind:'group', sel:'.adom-layer-paste-dots',      sw:'#37c8a6', special:true},+  ];++  // True only if the group actually holds drawn geometry (not an empty <g>) — so+  // layers with nothing in THIS footprint aren't listed as dead, dim rows.+  function groupHasGeo(svg,def){+    if(!svg) return false; var n=0,g=svg.querySelectorAll(def.sel);+    for(var i=0;i<g.length;i++){ n+=g[i].querySelectorAll('path,rect,circle,line,polygon,polyline,text').length; }+    return n>0;+  }+  function layerPresent(svg,def){ return groupHasGeo(svg,def); }+  function applyLayer(svg,def,on){+    if(!svg) return; var g=svg.querySelectorAll(def.sel);+    for(var i=0;i<g.length;i++) g[i].style.display=on?'':'none';+  }++  // Build layer rows into a container. opts:+  //   svg, container, state {key:bool}, meta {pasteDots,pasteApertures},+  //   onToggle(key,on). Missing state key -> special OFF, others ON. Skips empty+  //   non-special groups. Returns the keys actually shown.+  function buildLayers(opts){+    var svg=opts.svg, box=opts.container, state=opts.state||{}, meta=opts.meta||{}, shown=[];+    box.innerHTML='';+    LAYER_DEFS.forEach(function(def){+      if(!def.special && !groupHasGeo(svg,def)) return;+      var on = def.special ? (state[def.key]===true) : (state[def.key]!==false);+      var m = def.key==='paste-dots' ? ((meta.pasteDots||0)+' @ 300µm')+            : def.key==='paste-ap'   ? ((meta.pasteApertures||0)+' openings') : '';+      var row=document.createElement('div');+      row.className='av-lrow '+(on?'on':'off')+(def.special?' special':'');+      row.innerHTML='<span class="sw'+(def.ring?' ring':'')+'" style="'+(def.ring?('border-color:'+def.sw):('background:'+def.sw))+'"></span>'+        +'<span class="ln">'+def.name+'</span>'+(m?'<span class="meta">'+m+'</span>':'')+        +'<span class="chk">'+(on?'✓':'')+'</span>';+      row.onclick=function(){+        var nv=!row.classList.contains('on');+        row.classList.toggle('on',nv); row.classList.toggle('off',!nv);+        row.querySelector('.chk').textContent=nv?'✓':'';+        state[def.key]=nv; applyLayer(svg,def,nv);+        if(opts.onToggle) opts.onToggle(def.key,nv);+      };+      box.appendChild(row); applyLayer(svg,def,on); shown.push(def.key);+    });+    return shown;+  }++  // Wire pan + zoom on a viewport element (the box that contains the <svg>).+  // Returns a controller {fit, zoomIn, zoomOut, apply}.+  function initViewport(vp){+    var svg=vp.querySelector('svg');+    if(svg){ svg.removeAttribute('width'); svg.removeAttribute('height'); }+    var s=1,tx=0,ty=0;+    function apply(){ var el=vp.querySelector('svg'); if(el) el.style.transform='translate('+tx+'px,'+ty+'px) scale('+s+')'; }+    function zoomAt(cx,cy,f){ tx=cx-(cx-tx)*f; ty=cy-(cy-ty)*f; s*=f; apply(); }+    function fit(){ s=1;tx=0;ty=0;apply(); }+    // Smooth, delta-PROPORTIONAL zoom (matches adom-symbol). A fixed per-event+    // factor makes the trackpad leap — one gentle two-finger nudge fires a burst+    // of tiny wheel events and a fixed 1.12× compounds. Instead derive the factor+    // from how much actually scrolled (exp → smooth + reversible), normalise+    // device units, and clamp one event so a chunky mouse notch can't jump.+    var ZOOM_K=0.0022; // sensitivity: lower = gentler+    vp.addEventListener('wheel',function(e){+      e.preventDefault();+      var d=e.deltaY;+      if(e.deltaMode===1) d*=16; else if(e.deltaMode===2) d*=vp.clientHeight;+      d=Math.max(-50,Math.min(50,d));+      var r=vp.getBoundingClientRect();+      zoomAt(e.clientX-r.left,e.clientY-r.top,Math.exp(-d*ZOOM_K));+    },{passive:false});+    var drag=false,lx=0,ly=0;+    vp.addEventListener('pointerdown',function(e){ if(e.target.closest('.av-tools'))return; drag=true;lx=e.clientX;ly=e.clientY;vp.classList.add('grab');vp.setPointerCapture(e.pointerId); });+    vp.addEventListener('pointermove',function(e){ if(!drag)return; tx+=e.clientX-lx;ty+=e.clientY-ly;lx=e.clientX;ly=e.clientY;apply(); });+    vp.addEventListener('pointerup',function(){ drag=false;vp.classList.remove('grab'); });+    fit();+    return {+      fit:fit,+      zoomIn:function(){ var r=vp.getBoundingClientRect(); zoomAt(r.width/2,r.height/2,1.2); },+      zoomOut:function(){ var r=vp.getBoundingClientRect(); zoomAt(r.width/2,r.height/2,1/1.2); },+      apply:apply+    };+  }++  // Inject the standard zoom toolbar (+ / − / fit) + pan hint into a viewport,+  // wired to a controller from initViewport. Idempotent.+  function addToolbar(vp,ctl){+    if(vp.querySelector('.av-tools')) return;+    var t=document.createElement('div'); t.className='av-tools';+    t.innerHTML='<button data-z="in" title="Zoom in">'+ICON_ZIN+'</button>'+      +'<button data-z="out" title="Zoom out">'+ICON_ZOUT+'</button>'+      +'<button data-z="fit" title="Zoom to fit">'+ICON_FIT+'</button>';+    vp.appendChild(t);+    t.querySelector('[data-z="in"]').onclick=ctl.zoomIn;+    t.querySelector('[data-z="out"]').onclick=ctl.zoomOut;+    t.querySelector('[data-z="fit"]').onclick=ctl.fit;+    var h=document.createElement('div'); h.className='av-panhint'; h.textContent='drag to pan · scroll to zoom'; vp.appendChild(h);+  }++  window.AV={+    LAYER_DEFS:LAYER_DEFS, groupHasGeo:groupHasGeo, layerPresent:layerPresent,+    applyLayer:applyLayer, buildLayers:buildLayers, initViewport:initViewport,+    addToolbar:addToolbar, ICON_FIT:ICON_FIT, ICON_ZIN:ICON_ZIN, ICON_ZOUT:ICON_ZOUT+  };+})();+</script>+<script>+var META={"pasteApertures":5,"pasteDots":20};+(function(){+  var vp=document.getElementById('vp');+  var svg=vp.querySelector('svg');+  var ctl=AV.initViewport(vp);+  AV.addToolbar(vp,ctl);+  AV.buildLayers({ svg:svg, container:document.getElementById('layers'), state:{}, meta:META });+})();+</script>+</body></html>
viewers/symbol.html+65−1
@@ -1 +1,65 @@-<!doctype html><title>tlvh431acdbvr</title>\ No newline at end of file+<!doctype html><html lang=en><head><meta charset=utf-8>+<meta name=viewport content="width=device-width,initial-scale=1"><title>ADOM/TLVH431ACDBVR symbol</title>+<style>+:root{--bg:#0d1117;--panel:#161b22;--edge:#30363d;--ink:#e6edf3;--mut:#8b949e;--acc:#00b8b0;--accb:#00e6dc;--hi:#6ea8fe}+*{box-sizing:border-box;margin:0}html,body{height:100%}+body{background:var(--bg);color:var(--ink);font-family:'Satoshi',system-ui,sans-serif;display:flex;flex-direction:column}+.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--edge);flex:none}+.bar .h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:700}+.bar .sp{flex:1}+.lyrtog{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);background:#1a2130;border:1px solid var(--edge);border-radius:999px;padding:3px 9px;cursor:pointer;user-select:none}+.lyrtog.on{color:var(--ink);border-color:#485162}.lyrtog:not(.on){opacity:.5}+.lyrtog .d{width:8px;height:8px;border-radius:50%;background:#485162}+.stage{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--bg);cursor:grab;touch-action:none}+.stage.drag{cursor:grabbing}+.stage svg{position:absolute;inset:0;width:100%;height:100%}+.pingroup,.pad{cursor:pointer}+.pingroup.hi .pinvis{stroke:var(--hi)!important;stroke-width:7}+rect.pad.hi{stroke:var(--hi);stroke-width:.15;paint-order:stroke}+.lyr-off{display:none}+#tip{position:fixed;z-index:99;pointer-events:none;display:none;max-width:250px;background:#0d1117;border:1px solid var(--acc);border-radius:8px;padding:7px 10px;box-shadow:0 8px 26px #000a}+#tip .tn{font:700 12px ui-monospace,monospace;color:var(--accb)}+#tip .tt{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-top:1px}+#tip .td{font-size:11px;color:var(--ink);margin-top:5px;line-height:1.4}+</style></head><body>+<div class=bar><span class=h>Schematic symbol</span><span class=sp></span></div>+<div class=stage id=stage><svg xmlns='http://www.w3.org/2000/svg' viewBox='-750 -250 1500 500' style='width:100%;height:100%'><rect x='-500.0' y='-200.0' width='1000.0' height='400.0' fill='#e35d5d22' stroke='#e35d5d' stroke-width='4'/><g class='pingroup' data-num='1' data-name='NC'><line class='pinvis' x1='-700.0' y1='-100.0' x2='-500.0' y2='-100.0' stroke='#dfe4ec' stroke-width='4'/><line x1='-700.0' y1='-100.0' x2='-500.0' y2='-100.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><text x='-600.0' y='-55.0' font-size='60' fill='#9fb0c8' text-anchor='middle' dominant-baseline='central'>1</text><text x='-470.0' y='-100.0' font-size='60' fill='#e6e9ef' text-anchor='start' dominant-baseline='central'>NC</text><g class='pingroup' data-num='2' data-name='*'><line class='pinvis' x1='-700.0' y1='-0.0' x2='-500.0' y2='-0.0' stroke='#dfe4ec' stroke-width='4'/><line x1='-700.0' y1='-0.0' x2='-500.0' y2='-0.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><text x='-600.0' y='45.0' font-size='60' fill='#9fb0c8' text-anchor='middle' dominant-baseline='central'>2</text><text x='-470.0' y='0.0' font-size='60' fill='#e6e9ef' text-anchor='start' dominant-baseline='central'>*</text><g class='pingroup' data-num='3' data-name='CATHODE'><line class='pinvis' x1='-700.0' y1='100.0' x2='-500.0' y2='100.0' stroke='#dfe4ec' stroke-width='4'/><line x1='-700.0' y1='100.0' x2='-500.0' y2='100.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><text x='-600.0' y='145.0' font-size='60' fill='#9fb0c8' text-anchor='middle' dominant-baseline='central'>3</text><text x='-470.0' y='100.0' font-size='60' fill='#e6e9ef' text-anchor='start' dominant-baseline='central'>CATHODE</text><g class='pingroup' data-num='5' data-name='ANODE'><line class='pinvis' x1='700.0' y1='-0.0' x2='500.0' y2='-0.0' stroke='#dfe4ec' stroke-width='4'/><line x1='700.0' y1='-0.0' x2='500.0' y2='-0.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><text x='600.0' y='-45.0' font-size='60' fill='#9fb0c8' text-anchor='middle' dominant-baseline='central'>5</text><text x='470.0' y='0.0' font-size='60' fill='#e6e9ef' text-anchor='end' dominant-baseline='central'>ANODE</text><g class='pingroup' data-num='4' data-name='REF'><line class='pinvis' x1='700.0' y1='100.0' x2='500.0' y2='100.0' stroke='#dfe4ec' stroke-width='4'/><line x1='700.0' y1='100.0' x2='500.0' y2='100.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><text x='600.0' y='55.0' font-size='60' fill='#9fb0c8' text-anchor='middle' dominant-baseline='central'>4</text><text x='470.0' y='100.0' font-size='60' fill='#e6e9ef' text-anchor='end' dominant-baseline='central'>REF</text></svg></div>+<div id=tip></div>+<script>+var KIND="symbol", MPN="ADOM/TLVH431ACDBVR", PINS=[{"desc":"","name":"NC","number":"1","type":""},{"desc":"","name":"*","number":"2","type":""},{"desc":"","name":"CATHODE","number":"3","type":""},{"desc":"","name":"ANODE","number":"5","type":""},{"desc":"","name":"REF","number":"4","type":""}];+var byNum={}; PINS.forEach(function(p){byNum[String(p.number)]=p;});+var stage=document.getElementById('stage'), svg=stage.querySelector('svg'), tip=document.getElementById('tip');+// ---- pan/zoom ----+var vb=(svg.getAttribute('viewBox')||'0 0 100 100').split(/\s+/).map(Number), base=vb.slice();+function setVB(){svg.setAttribute('viewBox',vb.join(' '));}+stage.addEventListener('wheel',function(e){e.preventDefault();var r=stage.getBoundingClientRect();var mx=(e.clientX-r.left)/r.width,my=(e.clientY-r.top)/r.height;var f=e.deltaY<0?0.88:1.14;var nw=vb[2]*f,nh=vb[3]*f;vb[0]+=(vb[2]-nw)*mx;vb[1]+=(vb[3]-nh)*my;vb[2]=nw;vb[3]=nh;setVB();},{passive:false});+var pan=null;+stage.addEventListener('pointerdown',function(e){pan={x:e.clientX,y:e.clientY};stage.classList.add('drag');stage.setPointerCapture(e.pointerId);});+stage.addEventListener('pointermove',function(e){if(!pan)return;var r=stage.getBoundingClientRect();vb[0]-=(e.clientX-pan.x)/r.width*vb[2];vb[1]-=(e.clientY-pan.y)/r.height*vb[3];pan={x:e.clientX,y:e.clientY};setVB();});+function endPan(){pan=null;stage.classList.remove('drag');}+stage.addEventListener('pointerup',endPan);stage.addEventListener('pointerleave',endPan);+stage.addEventListener('dblclick',function(){vb=base.slice();setVB();});+// ---- cross-highlight bus ----+function els(n){return [].slice.call(document.querySelectorAll('[data-num="'+n+'"]'));}+function clearHi(){[].slice.call(document.querySelectorAll('.hi')).forEach(function(e){e.classList.remove('hi');});}+function hi(n){els(n).forEach(function(e){e.classList.add('hi');});}+function post(n){try{parent.postMessage({type:'lbr-hover',pin:n===null?null:String(n),mpn:MPN},'*');}catch(_){}}+function showTip(n,x,y){var p=byNum[String(n)];if(!p)return;tip.innerHTML='<span class=tn></span><div class=tt></div><div class=td></div>';tip.querySelector('.tn').textContent=n+'  '+(p.name||'');tip.querySelector('.tt').textContent=p.type||'';var d=p.desc||'';if(d)tip.querySelector('.td').textContent=d;else tip.querySelector('.td').style.display='none';tip.style.display='block';tip.style.left=(x+14)+'px';tip.style.top=(y+12)+'px';}+[].slice.call(document.querySelectorAll('.pingroup,.pad')).forEach(function(g){+  var n=g.getAttribute('data-num');+  g.addEventListener('mouseenter',function(e){clearHi();hi(n);post(n);showTip(n,e.clientX,e.clientY);});+  g.addEventListener('mousemove',function(e){tip.style.left=(e.clientX+14)+'px';tip.style.top=(e.clientY+12)+'px';});+  g.addEventListener('mouseleave',function(){clearHi();post(null);tip.style.display='none';});+});+window.addEventListener('message',function(e){var d=e.data||{};if(d.type!=='lbr-hover')return;clearHi();if(d.pin!=null)hi(d.pin);});+// ---- footprint layer toggles ----+[].slice.call(document.querySelectorAll('.lyrtog')).forEach(function(b){+  function apply(on){[].slice.call(document.querySelectorAll('.ly-'+b.getAttribute('data-lyr'))).forEach(function(el){el.classList.toggle('lyr-off',!on);});}+  apply(b.classList.contains('on'));+  b.addEventListener('click',function(){apply(b.classList.toggle('on'));});+});+// ---- auto-grow the host readme iframe ----+function ph(){var h=Math.max(360,Math.min(16000,document.body.scrollHeight||420));parent.postMessage({type:'readme-height',height:h},'*');}+window.addEventListener('load',ph);setTimeout(ph,300);+</script>+</body></html>