Adom Footprint

/* ── 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
  };
})();