You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.3 KiB
JavaScript
1 line
9.3 KiB
JavaScript
"use strict";var ruler=function(a){this.api=this.builder(),this.api.constructRulers.call(this,a)};ruler.prototype.builder=function(){var a,b=1,c=2,d=0,e=0,f=1,g={},h=[],i=document.createElement("div"),j=[],k={rulerHeight:15,fontFamily:"arial",fontSize:"8px",strokeStyle:"gray",sides:["top","left"],cornerSides:["TL"],lineWidth:1,enableMouseTracking:!0,enableToolTip:!0},l=function(a,b){var c="rotate("+b+"deg)",d=ruler.prototype.utils.pixelize(Math.abs(parseInt(a.canvas.style.left)))+" 100%";a.canvas.style.webkitTransform=c,a.canvas.style.MozTransform=c,a.canvas.style.OTransform=c,a.canvas.style.msTransform=c,a.canvas.style.transform=c,a.canvas.style.webkitTransformOrigin=d,a.canvas.style.MozTransformOrigin=d,a.canvas.style.OTransformOrigin=d,a.canvas.style.msTransformOrigin=d,a.canvas.style.transformOrigin=d},m=function(a,b){switch(a.canvas.style.left=ruler.prototype.utils.pixelize(-(a.canvas.width/2-a.canvas.height)),b){case"top":a.orgPos=parseInt(a.canvas.style.left);break;case"left":a.canvas.style.top=ruler.prototype.utils.pixelize(-a.canvas.height-1),a.orgPos=parseInt(a.canvas.style.top),l(a,90)}},n=function(a,b){var c=function(a){o(b.dimension,a.clientX,a.clientY,a)};b.canvas.addEventListener("mousedown",c),b.clearListeners=function(){b.canvas.removeEventListener("mousedown",c)}},o=function(c,g,j,k,l){var m,n=function(c,d,e){var f=c.dimension===b?d:e;if(!c.assigned())return void(f>a.rulerHeight&&c.assigned(!0));f<a.rulerHeight&&(h.some(function(a,b){if(a.line===c)return m=b,!0}),c.destroy(),h.splice(m,1))},o=document.createElement("div"),p=c===b?"rul_lineVer":"rul_lineHor",q=c===b?d:e;o.title="Double click to delete",ruler.prototype.utils.addClasss(o,["rul_line",p]),o=i.appendChild(o),c===b?(o.style.left=ruler.prototype.utils.pixelize(g-a.container.getBoundingClientRect().left),l&&(o.style.left=ruler.prototype.utils.pixelize(Math.round(g/f)+a.rulerHeight))):(o.style.top=ruler.prototype.utils.pixelize(j-a.container.getBoundingClientRect().top),l&&(o.style.top=ruler.prototype.utils.pixelize(Math.round(j/f)+a.rulerHeight))),h.push({dimension:c,line:ruler.prototype.guideLine(o,a.container.querySelector(".rul_wrapper"),c,a,q,n,k)})},p=function(d,e){var f,h="left"===e||"right"===e?b:c,i=h===b?"rul_ruler_Vertical":"rul_ruler_Horizontal",j=document.createElement("canvas");ruler.prototype.utils.addClasss(j,["rul_ruler",i,"rul_align_"+e]),f=d.appendChild(j),g[e]=ruler.prototype.rulerConstructor(f,a,h),g[e].drawRuler(d.offsetWidth,a.rulerHeight),m(g[e],e),n(d,g[e])},q=function(){function b(b,c){var d=document.createElement("div"),e="rul_corner"+c.toUpperCase();return d.title="Clear Guide lines",ruler.prototype.utils.addClasss(d,["rul_corner",e]),d.style.width=ruler.prototype.utils.pixelize(a.rulerHeight+1),d.style.height=ruler.prototype.utils.pixelize(a.rulerHeight),b.appendChild(d)}function c(a){a.stopPropagation(),w()}return function(a,d){d.forEach(function(d){var e=b(a,d);e.addEventListener("mousedown",c),e.destroy=function(){e.removeEventListener("mousedown",c),e.parentNode.removeChild(e)},j.push(e)})}}(),r=function(a){h.forEach(function(a){a.line.stopDrag()})},s=function(b){i=ruler.prototype.utils.addClasss(i,"rul_wrapper"),a=ruler.prototype.utils.extend(k,b),i=a.container.appendChild(i),a.sides.forEach(function(a){p(i,a)}),q(i,a.cornerSides),a.container.addEventListener("mouseup",r)},t=function(a){var b=0;for(var c in g)g.hasOwnProperty(c)&&a(g[c],b++)},u=function(a){var f,g=0,i=0,j=0;t(function(c){c.dimension===b?(f=c.canvas.style.top,c.canvas.style.top=ruler.prototype.utils.pixelize(c.orgPos+parseInt(a.y)),j=parseInt(f)-parseInt(c.canvas.style.top)):(g=c.canvas.style.left,c.canvas.style.left=ruler.prototype.utils.pixelize(c.orgPos+parseInt(a.x)),i=parseInt(g)-parseInt(c.canvas.style.left))}),h.forEach(function(b){b.dimension===c?(b.line.guideLine.style.top=ruler.prototype.utils.pixelize(parseInt(b.line.guideLine.style.top)-j),b.line.curPosDelta(parseInt(a.y))):(b.line.guideLine.style.left=ruler.prototype.utils.pixelize(parseInt(b.line.guideLine.style.left)-i),b.line.curPosDelta(parseInt(a.x)))}),d=parseInt(a.x),e=parseInt(a.y)},v=function(b){var g,i,j;t(function(a){a.context.clearRect(0,0,a.canvas.width,a.canvas.height),a.context.beginPath(),a.setScale(b),a.context.stroke(),f=b}),h.forEach(function(f){f.dimension===c?(g=parseInt(f.line.guideLine.style.top),i=a.rulerHeight+1,j=parseFloat(b)/f.line.curScale(),f.line.guideLine.style.top=ruler.prototype.utils.pixelize((g-i-e)/j+i+e),f.line.curScale(b)):(g=parseInt(f.line.guideLine.style.left),i=a.rulerHeight+1,j=parseFloat(b)/f.line.curScale(),f.line.guideLine.style.left=ruler.prototype.utils.pixelize((g-i-d)/j+i+d),f.line.curScale(b))})},w=function(){h.forEach(function(a){a.line.destroy()}),h=[]},x=function(a){var b=a?"show":"hide";h.forEach(function(a){a.line[b]()})},y=function(b){var c=b?"block":"none";i.style.display=c;var d=a.container.querySelectorAll(".rul_tracker");d.length>0&&(d[0].style.display=c,d[1].style.display=c)};return{VERTICAL:b,HORIZONTAL:c,setPos:u,setScale:v,clearGuides:w,getGuides:function(){return h.map(function(b){return{posX:Math.round((parseInt(b.line.guideLine.style.left)-d-a.rulerHeight)*f),posY:Math.round((parseInt(b.line.guideLine.style.top)-e-a.rulerHeight)*f),dimension:b.dimension}})},setGuides:function(a){a&&a.forEach(function(a){o(a.dimension,a.posX,a.posY,null,!0)})},constructRulers:s,toggleRulerVisibility:y,toggleGuideVisibility:x,destroy:function(){w(),t(function(a){a.destroy()}),j.forEach(function(a){a.destroy()}),a.container.removeEventListener("mouseup",r),i.parentNode.removeChild(i)}}},ruler.prototype.rulerConstructor=function(a,b,c){var d=a,e=d.getContext("2d"),f=0,g=0,h=1,i=c||2,j=document.createElement("div"),k=function(){return g},l=function(){return f},m=function(){return h},n=function(a){return h=parseFloat(a),p(),h},o=function(a,c,i){g=d.width=4*a,f=d.height=c,h=i||h,e.strokeStyle=b.strokeStyle,e.font=b.fontSize+" "+b.fontFamily,e.lineWidth=b.lineWidth,e.beginPath(),p(),e.stroke()},p=function(){for(var a=0,b="",c=0,d=!1,i=0,j=f/2,k=f/2,l=0;l<=g;l+=1)c=g/2-l,d=!1,b="",c%50==0?(a=i,b=Math.round(Math.abs(c)*h),d=!0):c%25==0?(a=j,d=!0):c%5==0&&(a=k,d=!0),d&&(e.moveTo(l+.5,f+.5),e.lineTo(l+.5,a+.5),e.fillText(b,l+1.5,f/2+1))},q=function(a){var c=a.clientX,d=a.clientY;2===i?j.style.left=ruler.prototype.utils.pixelize(c-parseInt(b.container.getBoundingClientRect().left)):j.style.top=ruler.prototype.utils.pixelize(d-parseInt(b.container.getBoundingClientRect().top))},r=function(){b.container.removeEventListener("mousemove",q),j.parentNode.removeChild(j),this.clearListeners&&this.clearListeners()},s=function(){j=b.container.appendChild(j),ruler.prototype.utils.addClasss(j,"rul_tracker");var a=ruler.prototype.utils.pixelize(b.rulerHeight);2===i?j.style.height=a:j.style.width=a,b.container.addEventListener("mousemove",q)};return b.enableMouseTracking&&s(),{getLength:k,getThickness:l,getScale:m,setScale:n,dimension:i,orgPos:0,canvas:d,context:e,drawRuler:o,drawPoints:p,destroy:r}},ruler.prototype.guideLine=function(a,b,c,d,e,f,g){var h,i=a,j=1,k=!1,l=e||0,m=b,n=c||2,f=f||function(){},o=function(a){return void 0===a?l:l=a},p=function(a){return void 0===a?k:k=a},q=function(a){return void 0===a?j:j=a},r=function(){return{move:function(a,b){i.style.left=ruler.prototype.utils.pixelize(a),i.style.top=ruler.prototype.utils.pixelize(b),t(a,b),f(h,a,b)},startMoving:function(a){ruler.prototype.utils.addClasss(i,["rul_line_dragged"]),a=a||window.event;var b=a?a.clientX:0,c=a?a.clientY:0,e=parseInt(i.style.top||0),f=parseInt(i.style.left||0),g=parseInt(i.offsetWidth),h=parseInt(i.offsetHeight),j=parseInt(m.offsetWidth),k=parseInt(m.offsetHeight),l=2===n?"ns-resize":"ew-resize";d.container.style.cursor=l,i.style.cursor=l;var o=b-f,p=c-e;document.onmousemove=function(a){a=a||window.event;var b=a.clientX,c=a.clientY,d=b-o,e=c-p;d<0&&(d=0),e<0&&(e=0),d+g>j&&(d=j-g),e+h>k&&(e=k-h),r.move(d,e)},s()},stopMoving:function(){d.container.style.cursor=null,i.style.cursor=null,document.onmousemove=function(){},u(),ruler.prototype.utils.removeClasss(i,["rul_line_dragged"])}}}(),s=function(a){d.enableToolTip&&ruler.prototype.utils.addClasss(i,"rul_tooltip")},t=function(a,b){i.dataset.tip=b?"Y: "+Math.round((b-d.rulerHeight-1-l)*j)+" px":"X: "+Math.round((a-d.rulerHeight-1-l)*j)+" px"},u=function(a){ruler.prototype.utils.removeClasss(i,"rul_tooltip")},v=function(){r.stopMoving(),f=null,i.removeEventListener("mousedown",y),i.removeEventListener("mouseup",z),i.removeEventListener("dblclick",A),i.parentNode&&i.parentNode.removeChild(i)},w=function(){i.style.display="none"},x=function(){i.style.display="block"},y=function(a){a.stopPropagation(),r.startMoving()},z=function(a){r.stopMoving()},A=function(a){a.stopPropagation(),v()};return i.addEventListener("mousedown",y),i.addEventListener("mouseup",z),i.addEventListener("dblclick",A),g&&r.startMoving(g),h={setAsDraggable:r,startDrag:r.startMoving,stopDrag:r.stopMoving,destroy:v,curScale:q,assigned:p,curPosDelta:o,guideLine:i,dimension:n,hide:w,show:x}},ruler.prototype.utils={extend:function(){for(var a=1;a<arguments.length;a++)for(var b in arguments[a])arguments[a].hasOwnProperty(b)&&(arguments[0][b]=arguments[a][b]);return arguments[0]},pixelize:function(a){return a+"px"},prependChild:function(a,b){return a.insertBefore(b,a.firstChild)},addClasss:function(a,b){return b instanceof Array||(b=[b]),b.forEach(function(b){a.className+=" "+b}),a},removeClasss:function(a,b){var c=a.className;return b instanceof Array||(b=[b]),b.forEach(function(a){c=c.replace(a,"")}),a.className=c,a}}; |