svgedit/dist/editor/extensions/ext-overview_window/ext-overview_window.js

Powerful SVG-Editor for your browser

let e=!1;const t=[],o=void 0!==window.ontouchstart;
/**
 * @file ext-overview_window.js
 *
 * @license MIT
 *
 * @copyright 2013 James Sacksteder
 *
 */
var i={name:"overview_window",init(i){let{_$:l}=i;const n=this,{$id:r,$click:p}=n.svgCanvas,a={};r("sidepanel_content").insertAdjacentHTML("beforeend",'<div id="overview_window_content_pane" style="width:100%; word-wrap:break-word;  display:inline-block; margin-top:20px;"><div id="overview_window_content" style="position:relative; padding-left:15px; top:0px;"><div style="background-color:#A0A0A0; display:inline-block; overflow:visible;"><svg id="overviewMiniView" width="132" height="100" x="0" y="0" viewBox="0 0 4800 3600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><use x="0" y="0" href="#svgroot"> </use></svg><div id="overview_window_view_box" style="min-width:50px; min-height:50px; position:absolute; top:30px; left:30px; z-index:5; background-color:rgba(255,0,102,0.3);"></div></div></div></div>');const updateViewBox=()=>{const{workarea:e}=n,t=parseFloat(getComputedStyle(e,null).height.replace("px","")),o=parseFloat(getComputedStyle(e,null).width.replace("px","")),i=e.scrollLeft,l=e.scrollTop,p=parseFloat(getComputedStyle(r("svgcanvas"),null).width.replace("px","")),a=parseFloat(getComputedStyle(r("svgcanvas"),null).height.replace("px","")),s=parseFloat(getComputedStyle(r("overviewMiniView"),null).width.replace("px","")),w=parseFloat(getComputedStyle(r("overviewMiniView"),null).height.replace("px","")),v=i/p*s,d=l/a*w,u=o/p*s,c=t/a*w;r("overview_window_view_box").style.minWidth=u+"px",r("overview_window_view_box").style.minHeight=c+"px",r("overview_window_view_box").style.top=d+"px",r("overview_window_view_box").style.left=v+"px"};r("workarea").addEventListener("scroll",(()=>{a.viewBoxDragging||updateViewBox()})),r("workarea").addEventListener("resize",updateViewBox),updateViewBox();const updateViewDimensions=function(){const e=parseFloat(getComputedStyle(r("svgroot"),null).width.replace("px","")),t=parseFloat(getComputedStyle(r("svgroot"),null).height.replace("px","")),o=t/e*parseFloat(getComputedStyle(r("overviewMiniView"),null).width.replace("px",""));r("overviewMiniView").setAttribute("viewBox","640 480 "+e+" "+t),r("overviewMiniView").setAttribute("height",o),updateViewBox()};updateViewDimensions(),a.viewBoxDragging=!1;const updateViewPortFromViewBox=function(){const e=parseFloat(getComputedStyle(r("svgcanvas"),null).width.replace("px","")),t=parseFloat(getComputedStyle(r("svgcanvas"),null).height.replace("px","")),o=parseFloat(getComputedStyle(r("overviewMiniView"),null).width.replace("px","")),i=parseFloat(getComputedStyle(r("overviewMiniView"),null).height.replace("px","")),l=parseFloat(getComputedStyle(r("overview_window_view_box"),null).getPropertyValue("left").replace("px",""))/o*e,n=parseFloat(getComputedStyle(r("overview_window_view_box"),null).getPropertyValue("top").replace("px",""))/i*t;r("workarea").scrollLeft=l,r("workarea").scrollTop=n},s=document.querySelector("#overview_window_view_box");return function(i,l,n,r,p,a){e||document.addEventListener(o?"touchmove":"mousemove",(function(e){let o=e;e.touches&&(o=e.touches[0]);for(let e=0;e<t.length;e++)t[e](o.clientX,o.clientY)})),e=!0;let s=!1,w=!1,v=0,d=0,u=0,c=0;l.addEventListener(o?"touchstart":"mousedown",(function(e){if(e.stopPropagation(),e.preventDefault(),"false"===i.dataset.dragEnabled)return;let t=e;e.touches&&(t=e.touches[0]),s=!0,v=i.offsetLeft-t.clientX,d=i.offsetTop-t.clientY})),document.addEventListener(o?"touchend":"mouseup",(function(){p&&w&&p(i,n,parseInt(i.style.left),parseInt(i.style.top)),s=!1,w=!1})),document.addEventListener(o?"touchmove":"mousemove",(function(){a&&w&&a(i,parseInt(i.style.left),parseInt(i.style.top))})),t.push((function move(e,t){if(s){if(w||(w=!0,r&&r(i,u,c)),u=e+v,c=t+d,"true"===i.dataset.dragBoundary){if(u<1||u>=window.innerWidth-i.offsetWidth)return;if(c<1||c>=window.innerHeight-i.offsetHeight)return}i.style.left=u+"px",i.style.top=c+"px"}}))}(s,s,document.querySelector("#overviewMiniView"),(()=>{a.viewBoxDragging=!0,updateViewPortFromViewBox()}),((e,t,o,i)=>{e.offsetLeft+e.offsetWidth>parseFloat(getComputedStyle(t,null).width.replace("px",""))?e.style.left=parseFloat(getComputedStyle(t,null).width.replace("px",""))-e.offsetWidth+"px":e.offsetLeft<0&&(e.style.left="0px"),e.offsetTop+e.offsetHeight>parseFloat(getComputedStyle(t,null).height.replace("px",""))?e.style.top=parseFloat(getComputedStyle(t,null).height.replace("px",""))-e.offsetHeight+"px":e.offsetTop<0&&(e.style.top="0px"),a.viewBoxDragging=!1,updateViewPortFromViewBox()}),(function(){updateViewPortFromViewBox()})),p(r("overviewMiniView"),(e=>{const t=e.offsetX||e.originalEvent.layerX,o=e.offsetY||e.originalEvent.layerY,i=parseFloat(getComputedStyle(r("overviewMiniView"),null).width.replace("px","")),l=parseFloat(getComputedStyle(r("overviewMiniView"),null).height.replace("px","")),n=parseFloat(getComputedStyle(r("overview_window_view_box"),null).getPropertyValue("min-width").replace("px","")),p=parseFloat(getComputedStyle(r("overview_window_view_box"),null).getPropertyValue("min-height").replace("px",""));let a=t-.5*n,s=o-.5*p;a<0&&(a=0),s<0&&(s=0),a+n>i&&(a=i-n),s+p>l&&(s=l-p),r("overview_window_view_box").style.top=s+"px",r("overview_window_view_box").style.left=a+"px",updateViewPortFromViewBox()})),{name:"overview window",canvasUpdated:updateViewDimensions,workareaResized:updateViewBox}}};export{i as default};
//# sourceMappingURL=ext-overview_window.js.map