← Commit history

msesd03ci: viewers

Ray ·cee3807cd1 ·1h ago ·parent 6cd9729
1 file changed +4−3
viewers/symbol.html+4−3
@@ -23,10 +23,10 @@ rect.pad.hi{stroke:var(--hi);stroke-width:.15;paint-order:stroke} #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='-80 -200 160 400' style='width:100%;height:100%'><rect x='-30.0' y='-100.0' width='60.0' height='200.0' fill='none' stroke='#e35d5d' stroke-width='4'/><polyline points='0.0,-100.0 0.0,100.0' fill='none' stroke='#e35d5d' stroke-width='4'/><g class='pingroup' data-num='1' data-name=''><line class='pinvis' x1='0.0' y1='-150.0' x2='0.0' y2='-100.0' stroke='#dfe4ec' stroke-width='4'/><line x1='0.0' y1='-150.0' x2='0.0' y2='-100.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><g class='pingroup' data-num='2' data-name=''><line class='pinvis' x1='0.0' y1='150.0' x2='0.0' y2='100.0' stroke='#dfe4ec' stroke-width='4'/><line x1='0.0' y1='150.0' x2='0.0' y2='100.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g></svg></div>+<div class=stage id=stage><svg xmlns='http://www.w3.org/2000/svg' viewBox='-200 -100 400 200' style='width:100%;height:100%'><polyline points='-100.0,-50.0 -100.0,50.0 100.0,-50.0 100.0,50.0 -100.0,-50.0' fill='none' stroke='#e35d5d' stroke-width='4'/><polyline points='20.0,-50.0 0.0,-50.0 0.0,50.0 -20.0,50.0' fill='none' stroke='#e35d5d' stroke-width='4'/><polyline points='50.0,-0.0 -50.0,-0.0' fill='none' stroke='#e35d5d' stroke-width='4'/><g class='pingroup' data-num='1' data-name='1'><line class='pinvis' x1='-150.0' y1='-0.0' x2='-50.0' y2='-0.0' stroke='#dfe4ec' stroke-width='4'/><line x1='-150.0' y1='-0.0' x2='-50.0' y2='-0.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g><g class='pingroup' data-num='2' data-name='2'><line class='pinvis' x1='150.0' y1='-0.0' x2='50.0' y2='-0.0' stroke='#dfe4ec' stroke-width='4'/><line x1='150.0' y1='-0.0' x2='50.0' y2='-0.0' stroke='transparent' stroke-width='26' pointer-events='stroke'/></g></svg></div> <div id=tip></div> <script>-var KIND="symbol", MPN="ADOM/MSESD03CI", PINS=[{"desc":"","name":"","number":"1","type":""},{"desc":"","name":"","number":"2","type":""}];+var KIND="symbol", MPN="ADOM/MSESD03CI", PINS=[{"desc":"","name":"1","number":"1","type":""},{"desc":"","name":"2","number":"2","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 ----@@ -44,7 +44,8 @@ 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';}+function ovName(el,pre,nm){el.textContent=pre;var r=nm,i;while((i=r.indexOf('~{'))>=0){el.appendChild(document.createTextNode(r.slice(0,i)));var a=r.slice(i+2),j=a.indexOf('}'),s=document.createElement('span');s.style.textDecoration='overline';s.textContent=j<0?a:a.slice(0,j);el.appendChild(s);r=j<0?'':a.slice(j+1);}el.appendChild(document.createTextNode(r));}+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>';ovName(tip.querySelector('.tn'),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);});