From fec2632db8d37299e5b43d95f1eac947e5bbd08c Mon Sep 17 00:00:00 2001 From: Hung Dinh Date: Sun, 20 Dec 2020 13:19:08 +0700 Subject: [PATCH 1/3] * Register watch task in grunt file --- Gruntfile.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Gruntfile.js b/Gruntfile.js index 55e1e8e..3ce9e5e 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -135,5 +135,6 @@ module.exports = function(grunt) { // set default tasks to run when grunt is called without parameters // http://gruntjs.com/api/grunt.task grunt.registerTask('default', ['concat', 'jsbeautifier', 'uglify']); + grunt.registerTask('watch', ['watch']); grunt.loadNpmTasks('grunt-contrib-watch'); }; From bfe81a17d2b2f34144045f621480ee24a4ed15b1 Mon Sep 17 00:00:00 2001 From: Hung Dinh Date: Sun, 20 Dec 2020 20:57:11 +0700 Subject: [PATCH 2/3] * fix detech touch screen in lastest chrome --- dev/events-handler.js | 2 +- widget.js | 33 ++++++++++++++++++++------------- widget.min.js | 6 +++--- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/dev/events-handler.js b/dev/events-handler.js index 61a9c97..a9820e5 100644 --- a/dev/events-handler.js +++ b/dev/events-handler.js @@ -1,5 +1,5 @@ var canvas = tempContext.canvas, - isTouch = 'createTouch' in document; + isTouch = 'createTouch' in document || 'ontouchstart' in window; addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) { if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : { diff --git a/widget.js b/widget.js index 7099379..67fc6f8 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2019-03-08 2:53:41 PM UTC +// Last time updated: 2020-12-20 1:56:04 PM UTC // _______________ // Canvas-Designer @@ -2498,12 +2498,17 @@ var zoomHandler = { scale: 1.0, + lastZoomState: null, up: function(e) { + this.scale = this.lastZoomState !== 'up' ? 1 : this.scale; this.scale += .01; + this.lastZoomState = 'up'; this.apply(); }, down: function(e) { + this.scale = this.lastZoomState !== 'down' ? 1 : this.scale; this.scale -= .01; + this.lastZoomState = 'down'; this.apply(); }, apply: function() { @@ -2518,7 +2523,7 @@ }, down: function(ctx) { ctx.font = '22px Verdana'; - ctx.strokeText('-', 15, 30); + ctx.strokeText('-', 10, 30); } } }; @@ -3728,7 +3733,7 @@ } var canvas = tempContext.canvas, - isTouch = 'createTouch' in document; + isTouch = 'createTouch' in document || 'ontouchstart' in window; addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) { if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : { @@ -4061,21 +4066,23 @@ } if (index === -1) { - if (points.length && points[points.length - 1][0] === 'pencil') { + if (points.length && (points[points.length - 1][0] === 'pencil' || points[points.length - 1][0] === 'marker')) { var newArray = []; var length = points.length; - var reverse = points.reverse(); - var ended; + + /* modification start*/ + var index; for (var i = 0; i < length; i++) { - var point = reverse[i]; - if (point[3] == 'start') { - ended = true; - } else if (ended) { - newArray.push(point); - } + var point = points[i]; + if (point[3] === 'start') index = i; + } + var copy = []; + for (var i = 0; i < index; i++) { + copy.push(points[i]); } + points = copy; + /*modification ends*/ - points = newArray.reverse(); drawHelper.redraw(); syncPoints(true); return; diff --git a/widget.min.js b/widget.min.js index 7c490c5..14b2d08 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,10 +1,10 @@ -// Last time updated: 2019-03-08 2:53:41 PM UTC +// Last time updated: 2020-12-20 1:56:04 PM UTC "use strict";!function(){function addEvent(element,eventType,callback){if(!(eventType.split(" ").length>1))return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this);for(var events=eventType.split(" "),i=0;icompareWith?prefix+" + "+(pointToCompare-compareWith):pointToComparefirst-10&&xsecond-10&&yprev?otherPoint+(point-prev):otherPoint-(prev-point)},getXYWidthHeight:function(x,y,prevX,prevY,oldPoints){return"stretch-first"==oldPoints.pointsToMove&&(x>prevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),y>prevY?(oldPoints.y=oldPoints.y+(y-prevY),oldPoints.height=oldPoints.height-(y-prevY)):(oldPoints.y=oldPoints.y-(prevY-y),oldPoints.height=oldPoints.height+(prevY-y))),"stretch-second"==oldPoints.pointsToMove&&(oldPoints.width=x>prevX?oldPoints.width+(x-prevX):oldPoints.width-(prevX-x),yprevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),oldPoints.height=yx?prevX-x:x-prevX,yy=prevY>y?prevY-y:y-prevY;angle=(xx+yy)/(2*c),points[points.length]=["arc",[prevX+radius,prevY+radius,radius,angle,1],drawHelper.getOptions()];var arcRange=g.arcRange,arcRangeContainer=g.arcRangeContainer;arcRangeContainer.style.display="block",arcRange.focus(),arcRangeContainer.style.top=y+canvas.offsetTop+20+"px",arcRangeContainer.style.left=x+"px",arcRange.value=2}else g.isCircleDrawn&&!g.isCircleEnded&&this.end();g.ismousedown=!1,this.fixAllPoints()},mousemove:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,ismousedown=g.ismousedown,isCircleDrawn=g.isCircleDrawn,isCircleEnded=g.isCircledEnded;if(ismousedown&&!isCircleDrawn&&isCircleEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;tempContext.clearRect(0,0,2e3,2e3),drawHelper.arc(tempContext,[prevX+radius,prevY+radius,radius,2*Math.PI,!0])}},fixAllPoints:function(){for(var toFixed=this.toFixed,i=0;i0?value:.02)-.02),!key||13==key||39==key||40==key||37==key||38==key){var range=Math.PI*arcHandler.toFixed(value),p=points[points.length-1];if("arc"===p[0]){var point=p[1];points[points.length-1]=["arc",[point[0],point[1],point[2],range,g.isClockwise?1:0],p[2]],drawHelper.redraw()}}},toFixed:function(input){return Number(input).toFixed(1)},end:function(){var g=this.global;g.arcRangeContainer.style.display="none",g.arcRange.value=2,g.isCircleDrawn=!1,g.isCircleEnded=!0,drawHelper.redraw()}};arcHandler.init();var lineHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]))}},arrowHandler={ismousedown:!1,prevX:0,prevY:0,arrowSize:10,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["arrow",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arrow(tempContext,[t.prevX,t.prevY,x,y]))}},rectHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["rect",[t.prevX,t.prevY,x-t.prevX,y-t.prevY],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.rect(tempContext,[t.prevX,t.prevY,x-t.prevX,y-t.prevY]))}},quadraticHandler={global:{ismousedown:!1,prevX:0,prevY:0,controlPointX:0,controlPointY:0,isFirstStep:!0,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.controlPointX=x,g.controlPointY=y,g.isFirstStep=!1,g.isLastStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,x,y,x,y]),g.isLastStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=!1,g.isFirstStep=!0,g.ismousedown=!1,x=x||g.controlPointX||g.prevX,y=y||g.controlPointY||g.prevY,points[points.length]=["quadratic",[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y],drawHelper.getOptions()])}},bezierHandler={global:{ismousedown:!1,prevX:0,prevY:0,firstControlPointX:0,firstControlPointY:0,secondControlPointX:0,secondControlPointY:0,isFirstStep:!0,isSecondStep:!1,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||g.isSecondStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y),g.ismousedown&&g.isSecondStep&&(g.secondControlPointX=x,g.secondControlPointY=y,g.isSecondStep=!1,g.isLastStep=!0)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.firstControlPointX=x,g.firstControlPointY=y,g.isFirstStep=!1,g.isSecondStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,x,y,x,y,x,y]),g.ismousedown&&g.isSecondStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,x,y,x,y]),g.isLastStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=g.isSecondStep=!1,g.isFirstStep=!0,g.ismousedown=!1,g.secondControlPointX=g.secondControlPointX||g.firstControlPointX,g.secondControlPointY=g.secondControlPointY||g.firstControlPointY,x=x||g.secondControlPointX,y=y||g.secondControlPointY,points[points.length]=["bezier",[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y],drawHelper.getOptions()])}},zoomHandler={scale:1,up:function(e){this.scale+=.01,this.apply()},down:function(e){this.scale-=.01,this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){ctx.font="22px Verdana",ctx.strokeText("+",10,30)},down:function(ctx){ctx.font="22px Verdana",ctx.strokeText("-",15,30)}}},FileSelector=function(){function selectFile(callback,multiple,accept){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept=accept||"image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,load:function(width,height){var t=imageHandler;points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,width,height,imageHandler.lastImageIndex],drawHelper.getOptions()],document.getElementById("drag-last-path").click(),syncPoints(!0)},mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.image(tempContext,[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex]))}},pdfHandler={lastPdfURL:null,lastIndex:0,lastPointIndex:0,removeWhiteBackground:!1,pdfPageContainer:document.getElementById("pdf-page-container"),pdfPagesList:document.getElementById("pdf-pages-list"),pdfNext:document.getElementById("pdf-next"),pdfPrev:document.getElementById("pdf-prev"),pdfClose:document.getElementById("pdf-close"),pageNumber:1,images:[],ismousedown:!1,prevX:0,prevY:0,getPage:function(pageNumber,callback){if(pageNumber=parseInt(pageNumber)||1,!pdfHandler.pdf)return pdfjsLib.disableWorker=!1,void pdfjsLib.getDocument(pdfHandler.lastPdfURL).then(function(pdf){pdfHandler.pdf=pdf,pdfHandler.getPage(pageNumber,callback)});var pdf=pdfHandler.pdf;pdf.getPage(pageNumber).then(function(page){pdfHandler.pageNumber=pageNumber;var scale=1.5,viewport=page.getViewport(scale),cav=document.createElement("canvas"),ctx=cav.getContext("2d");cav.height=viewport.height,cav.width=viewport.width;var renderContext={canvasContext:ctx,viewport:viewport};!0===pdfHandler.removeWhiteBackground&&(renderContext.background="rgba(0,0,0,0)"),page.render(renderContext).then(function(){if(!0===pdfHandler.removeWhiteBackground){for(var imgd=ctx.getImageData(0,0,cav.width,cav.height),pix=imgd.data,newColor={r:0,g:0,b:0,a:0},i=0,n=pix.length;ix?prevX-x:x-prevX,yy=prevY>y?prevY-y:y-prevY;angle=(xx+yy)/(2*c),points[points.length]=["arc",[prevX+radius,prevY+radius,radius,angle,1],drawHelper.getOptions()];var arcRange=g.arcRange,arcRangeContainer=g.arcRangeContainer;arcRangeContainer.style.display="block",arcRange.focus(),arcRangeContainer.style.top=y+canvas.offsetTop+20+"px",arcRangeContainer.style.left=x+"px",arcRange.value=2}else g.isCircleDrawn&&!g.isCircleEnded&&this.end();g.ismousedown=!1,this.fixAllPoints()},mousemove:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,ismousedown=g.ismousedown,isCircleDrawn=g.isCircleDrawn,isCircleEnded=g.isCircledEnded;if(ismousedown&&!isCircleDrawn&&isCircleEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;tempContext.clearRect(0,0,2e3,2e3),drawHelper.arc(tempContext,[prevX+radius,prevY+radius,radius,2*Math.PI,!0])}},fixAllPoints:function(){for(var toFixed=this.toFixed,i=0;i0?value:.02)-.02),!key||13==key||39==key||40==key||37==key||38==key){var range=Math.PI*arcHandler.toFixed(value),p=points[points.length-1];if("arc"===p[0]){var point=p[1];points[points.length-1]=["arc",[point[0],point[1],point[2],range,g.isClockwise?1:0],p[2]],drawHelper.redraw()}}},toFixed:function(input){return Number(input).toFixed(1)},end:function(){var g=this.global;g.arcRangeContainer.style.display="none",g.arcRange.value=2,g.isCircleDrawn=!1,g.isCircleEnded=!0,drawHelper.redraw()}};arcHandler.init();var lineHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]))}},arrowHandler={ismousedown:!1,prevX:0,prevY:0,arrowSize:10,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["arrow",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arrow(tempContext,[t.prevX,t.prevY,x,y]))}},rectHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["rect",[t.prevX,t.prevY,x-t.prevX,y-t.prevY],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.rect(tempContext,[t.prevX,t.prevY,x-t.prevX,y-t.prevY]))}},quadraticHandler={global:{ismousedown:!1,prevX:0,prevY:0,controlPointX:0,controlPointY:0,isFirstStep:!0,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.controlPointX=x,g.controlPointY=y,g.isFirstStep=!1,g.isLastStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,x,y,x,y]),g.isLastStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=!1,g.isFirstStep=!0,g.ismousedown=!1,x=x||g.controlPointX||g.prevX,y=y||g.controlPointY||g.prevY,points[points.length]=["quadratic",[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y],drawHelper.getOptions()])}},bezierHandler={global:{ismousedown:!1,prevX:0,prevY:0,firstControlPointX:0,firstControlPointY:0,secondControlPointX:0,secondControlPointY:0,isFirstStep:!0,isSecondStep:!1,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||g.isSecondStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y),g.ismousedown&&g.isSecondStep&&(g.secondControlPointX=x,g.secondControlPointY=y,g.isSecondStep=!1,g.isLastStep=!0)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.firstControlPointX=x,g.firstControlPointY=y,g.isFirstStep=!1,g.isSecondStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,x,y,x,y,x,y]),g.ismousedown&&g.isSecondStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,x,y,x,y]),g.isLastStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=g.isSecondStep=!1,g.isFirstStep=!0,g.ismousedown=!1,g.secondControlPointX=g.secondControlPointX||g.firstControlPointX,g.secondControlPointY=g.secondControlPointY||g.firstControlPointY,x=x||g.secondControlPointX,y=y||g.secondControlPointY,points[points.length]=["bezier",[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y],drawHelper.getOptions()])}},zoomHandler={scale:1,lastZoomState:null,up:function(e){this.scale="up"!==this.lastZoomState?1:this.scale,this.scale+=.01,this.lastZoomState="up",this.apply()},down:function(e){this.scale="down"!==this.lastZoomState?1:this.scale,this.scale-=.01,this.lastZoomState="down",this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){ctx.font="22px Verdana",ctx.strokeText("+",10,30)},down:function(ctx){ctx.font="22px Verdana",ctx.strokeText("-",10,30)}}},FileSelector=function(){function selectFile(callback,multiple,accept){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept=accept||"image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,load:function(width,height){var t=imageHandler;points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,width,height,imageHandler.lastImageIndex],drawHelper.getOptions()],document.getElementById("drag-last-path").click(),syncPoints(!0)},mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.image(tempContext,[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex]))}},pdfHandler={lastPdfURL:null,lastIndex:0,lastPointIndex:0,removeWhiteBackground:!1,pdfPageContainer:document.getElementById("pdf-page-container"),pdfPagesList:document.getElementById("pdf-pages-list"),pdfNext:document.getElementById("pdf-next"),pdfPrev:document.getElementById("pdf-prev"),pdfClose:document.getElementById("pdf-close"),pageNumber:1,images:[],ismousedown:!1,prevX:0,prevY:0,getPage:function(pageNumber,callback){if(pageNumber=parseInt(pageNumber)||1,!pdfHandler.pdf)return pdfjsLib.disableWorker=!1,void pdfjsLib.getDocument(pdfHandler.lastPdfURL).then(function(pdf){pdfHandler.pdf=pdf,pdfHandler.getPage(pageNumber,callback)});var pdf=pdfHandler.pdf;pdf.getPage(pageNumber).then(function(page){pdfHandler.pageNumber=pageNumber;var scale=1.5,viewport=page.getViewport(scale),cav=document.createElement("canvas"),ctx=cav.getContext("2d");cav.height=viewport.height,cav.width=viewport.width;var renderContext={canvasContext:ctx,viewport:viewport};!0===pdfHandler.removeWhiteBackground&&(renderContext.background="rgba(0,0,0,0)"),page.render(renderContext).then(function(){if(!0===pdfHandler.removeWhiteBackground){for(var imgd=ctx.getImageData(0,0,cav.width,cav.height),pix=imgd.data,newColor={r:0,g:0,b:0,a:0},i=0,n=pix.length;i'}),row+="",pencilColorsList.innerHTML+=row}),Array.prototype.slice.call(pencilColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor.style.backgroundColor=pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,pencilColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),pencilContainer.style.display="block",pencilContainer.style.top=canvas.offsetTop+1+"px",pencilContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnPencilDone,"click",function(){pencilContainer.style.display="none",pencilColorContainer.style.display="none",pencilLineWidth=strokeStyleText.value,pencilStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(pencilSelectedColor,"click",function(){pencilColorContainer.style.display="block"})}function decorateMarker(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+","+alpha+")"}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("marker-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Marker")},image.src=data_uris.marker;var markerContainer=find("marker-container"),markerColorContainer=find("marker-fill-colors"),strokeStyleText=find("marker-stroke-style"),markerColorsList=find("marker-colors-list"),fillStyleText=find("marker-fill-style"),markerSelectedColor=find("marker-selected-color"),markerSelectedColor2=find("marker-selected-color-2"),btnMarkerDone=find("marker-done"),canvas=context.canvas,alpha=.2;markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha),markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+fillStyleText.value,colors.forEach(function(colorRow){var row="";colorRow.forEach(function(color){row+=''}),row+="",markerColorsList.innerHTML+=row}),Array.prototype.slice.call(markerColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,markerColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),markerContainer.style.display="block",markerContainer.style.top=canvas.offsetTop+1+"px",markerContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnMarkerDone,"click",function(){markerContainer.style.display="none",markerColorContainer.style.display="none",markerLineWidth=strokeStyleText.value,markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(markerSelectedColor,"click",function(){markerColorContainer.style.display="block"})}function decorateEraser(){var context=getContext("eraser-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Eraser")},image.src=data_uris.eraser}function decorateText(){var context=getContext("text-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Text")},image.src=data_uris.text}function decorateImage(){var context=getContext("image-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Image")},image.src=data_uris.image}function decoratePDF(){var context=getContext("pdf-icon"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Pdf")},image.src=data_uris.pdf}function decorateArc(){var context=getContext("arc"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Arc")},image.src=data_uris.arc}function decorateRect(){var context=getContext("rectangle"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Rectangle")},image.src=data_uris.rectangle}function decorateQuadratic(){var context=getContext("quadratic-curve"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"QuadraticCurve")},image.src=data_uris.quadratic}function decorateBezier(){var context=getContext("bezier-curve"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32),bindEvent(context,"Bezier")},image.src=data_uris.bezier}function decorateLineWidth(){var context=getContext("line-width"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32)},image.src=data_uris.lineWidth;var lineWidthContainer=find("line-width-container"),lineWidthText=find("line-width-text"),btnLineWidthDone=find("line-width-done"),canvas=(document.getElementsByTagName("h1")[0],context.canvas);addEvent(canvas,"click",function(){hideContainers(),lineWidthContainer.style.display="block",lineWidthContainer.style.top=canvas.offsetTop+1+"px",lineWidthContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",lineWidthText.focus()}),addEvent(btnLineWidthDone,"click",function(){lineWidthContainer.style.display="none",lineWidth=lineWidthText.value})}function decorateColors(){var context=getContext("colors"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32)},image.src=data_uris.colorsPicker;var colorsContainer=find("colors-container"),strokeStyleText=find("stroke-style"),fillStyleText=find("fill-style"),btnColorsDone=find("colors-done"),canvas=(document.getElementsByTagName("h1")[0],context.canvas);addEvent(canvas,"click",function(){hideContainers(),colorsContainer.style.display="block",colorsContainer.style.top=canvas.offsetTop+1+"px",colorsContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",strokeStyleText.focus()}),addEvent(btnColorsDone,"click",function(){colorsContainer.style.display="none",strokeStyle=strokeStyleText.value,fillStyle=fillStyleText.value})}function decorateAdditionalOptions(){var context=getContext("additional"),image=new Image;image.onload=function(){context.drawImage(image,4,4,32,32)},image.src=data_uris.extraOptions;var additionalContainer=find("additional-container"),btnAdditionalClose=find("additional-close"),canvas=(document.getElementsByTagName("h1")[0],context.canvas),globalAlphaSelect=find("globalAlpha-select"),globalCompositeOperationSelect=find("globalCompositeOperation-select");addEvent(canvas,"click",function(){hideContainers(),additionalContainer.style.display="block",additionalContainer.style.top=canvas.offsetTop+1+"px",additionalContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px"}),addEvent(btnAdditionalClose,"click",function(){additionalContainer.style.display="none",globalAlpha=globalAlphaSelect.value,globalCompositeOperation=globalCompositeOperationSelect.value,lineCap=lineCapSelect.value,lineJoin=lineJoinSelect.value})}function btnDesignerPreviewClicked(){codeText.parentNode.style.display="none",optionsContainer.style.display="none",hideContainers(),endLastPath()}function btnCodePreviewClicked(){codeText.parentNode.style.display="block",optionsContainer.style.display="block",codeText.focus(),common.updateTextArea(),setHeightForCodeAndOptionsContainer(),hideContainers(),endLastPath()}function setHeightForCodeAndOptionsContainer(){codeText.style.width=innerWidth-optionsContainer.clientWidth-30+"px",codeText.style.height=innerHeight-40+"px",codeText.style.marginLeft=optionsContainer.clientWidth+"px",optionsContainer.style.height=innerHeight+"px"}var cache={},lineCapSelect=find("lineCap-select"),lineJoinSelect=find("lineJoin-select");find("tool-box").style.height=innerHeight+"px",decorateDragLastPath(),!0===tools.dragSingle&&(document.getElementById("drag-last-path").style.display="block"),decorateDragAllPaths(),!0===tools.dragMultiple&&(document.getElementById("drag-all-paths").style.display="block"),!0===tools.line&&(decorateLine(),document.getElementById("line").style.display="block"),!0===tools.undo&&(decorateUndo(),document.getElementById("undo").style.display="block"),!0===tools.arrow&&(decorateArrow(),document.getElementById("arrow").style.display="block"),!0===tools.zoom&&(decoreZoomUp(),decoreZoomDown(),document.getElementById("zoom-up").style.display="block",document.getElementById("zoom-down").style.display="block"),!0===tools.pencil&&(decoratePencil(),document.getElementById("pencil-icon").style.display="block"),!0===tools.marker&&(decorateMarker(),document.getElementById("marker-icon").style.display="block"),!0===tools.eraser&&(decorateEraser(),document.getElementById("eraser-icon").style.display="block"),!0===tools.text&&(decorateText(),document.getElementById("text-icon").style.display="block"),!0===tools.image&&(decorateImage(),document.getElementById("image-icon").style.display="block"),!0===tools.pdf&&(decoratePDF(),document.getElementById("pdf-icon").style.display="block"),!0===tools.arc&&(decorateArc(),document.getElementById("arc").style.display="block"),!0===tools.rectangle&&(decorateRect(),document.getElementById("rectangle").style.display="block"),!0===tools.quadratic&&(decorateQuadratic(),document.getElementById("quadratic-curve").style.display="block"),!0===tools.bezier&&(decorateBezier(),document.getElementById("bezier-curve").style.display="block"),!0===tools.lineWidth&&(decorateLineWidth(),document.getElementById("line-width").style.display="block"),!0===tools.colorsPicker&&(decorateColors(),document.getElementById("colors").style.display="block"),!0===tools.extraOptions&&(decorateAdditionalOptions(),document.getElementById("additional").style.display="block");var designPreview=find("design-preview"),codePreview=find("code-preview");window.selectBtn=function(btn,isSkipWebRTCMessage){ -codePreview.className=designPreview.className="",btn==designPreview?designPreview.className="preview-selected":codePreview.className="preview-selected",!isSkipWebRTCMessage&&window.connection&&connection.numberOfConnectedUsers>=1?connection.send({btnSelected:btn.id}):btn==designPreview?btnDesignerPreviewClicked():btnCodePreviewClicked()},addEvent(designPreview,"click",function(){selectBtn(designPreview),btnDesignerPreviewClicked()}),addEvent(codePreview,"click",function(){selectBtn(codePreview),btnCodePreviewClicked()});var codeText=find("code-text"),optionsContainer=find("options-container"),isAbsolute=find("is-absolute-points");addEvent(find("is-shorten-code"),"change",common.updateTextArea),addEvent(isAbsolute,"change",common.updateTextArea)}();var canvas=tempContext.canvas,isTouch="createTouch"in document;addEvent(canvas,isTouch?"touchstart mousedown":"mousedown",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousedown(e):cache.isArc?arcHandler.mousedown(e):cache.isRectangle?rectHandler.mousedown(e):cache.isQuadraticCurve?quadraticHandler.mousedown(e):cache.isBezierCurve?bezierHandler.mousedown(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousedown(e):cache.isPencil?pencilHandler.mousedown(e):cache.isEraser?eraserHandler.mousedown(e):cache.isText?textHandler.mousedown(e):cache.isImage?imageHandler.mousedown(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mousedown(e):cache.isMarker&&markerHandler.mousedown(e),!cache.isPdf&&drawHelper.redraw(),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchend touchcancel mouseup":"mouseup",function(e){!isTouch||e&&"pageX"in e||(e=e&&e.touches&&e.touches.length?e.touches[0]:e&&e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mouseup(e):cache.isArc?arcHandler.mouseup(e):cache.isRectangle?rectHandler.mouseup(e):cache.isQuadraticCurve?quadraticHandler.mouseup(e):cache.isBezierCurve?bezierHandler.mouseup(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mouseup(e):cache.isPencil?pencilHandler.mouseup(e):cache.isEraser?eraserHandler.mouseup(e):cache.isText?textHandler.mouseup(e):cache.isImage?imageHandler.mouseup(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mouseup(e):cache.isMarker&&markerHandler.mouseup(e),!cache.isPdf&&drawHelper.redraw(),syncPoints(!(!is.isDragAllPaths&&!is.isDragLastPath)),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchmove mousemove":"mousemove",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousemove(e):cache.isArc?arcHandler.mousemove(e):cache.isRectangle?rectHandler.mousemove(e):cache.isQuadraticCurve?quadraticHandler.mousemove(e):cache.isBezierCurve?bezierHandler.mousemove(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousemove(e):cache.isPencil?pencilHandler.mousemove(e):cache.isEraser?eraserHandler.mousemove(e):cache.isText?textHandler.mousemove(e):cache.isImage?imageHandler.mousemove(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mousemove(e):cache.isMarker&&markerHandler.mousemove(e),preventStopEvent(e)});var keyCode;addEvent(document,"keydown",onkeydown),addEvent(document,"keyup",onkeyup),addEvent(document,"keypress",onkeypress),addEvent(document,"paste",onTextFromClipboard);var uid,lastPointIndex=0;window.addEventListener("message",function(event){if(event.data){if(uid||(uid=event.data.uid),event.data.captureStream)return void webrtcHandler.createOffer(function(sdp){sdp.uid=uid,window.parent.postMessage(sdp,"*")});if(event.data.renderStream)return void setTemporaryLine();if(event.data.sdp)return void webrtcHandler.setRemoteDescription(event.data);if(event.data.genDataURL){var dataURL=context.canvas.toDataURL(event.data.format,1);return void window.parent.postMessage({dataURL:dataURL,uid:uid},"*")}if(event.data.undo&&points.length){var index=event.data.index;if(event.data.tool){for(var newArray=[],length=points.length,reverse=points.reverse(),i=0;i=1?connection.send({btnSelected:btn.id}):btn==designPreview?btnDesignerPreviewClicked():btnCodePreviewClicked()},addEvent(designPreview,"click",function(){selectBtn(designPreview),btnDesignerPreviewClicked()}),addEvent(codePreview,"click",function(){selectBtn(codePreview),btnCodePreviewClicked()});var codeText=find("code-text"),optionsContainer=find("options-container"),isAbsolute=find("is-absolute-points");addEvent(find("is-shorten-code"),"change",common.updateTextArea),addEvent(isAbsolute,"change",common.updateTextArea)}();var canvas=tempContext.canvas,isTouch="createTouch"in document||"ontouchstart"in window;addEvent(canvas,isTouch?"touchstart mousedown":"mousedown",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousedown(e):cache.isArc?arcHandler.mousedown(e):cache.isRectangle?rectHandler.mousedown(e):cache.isQuadraticCurve?quadraticHandler.mousedown(e):cache.isBezierCurve?bezierHandler.mousedown(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousedown(e):cache.isPencil?pencilHandler.mousedown(e):cache.isEraser?eraserHandler.mousedown(e):cache.isText?textHandler.mousedown(e):cache.isImage?imageHandler.mousedown(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mousedown(e):cache.isMarker&&markerHandler.mousedown(e),!cache.isPdf&&drawHelper.redraw(),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchend touchcancel mouseup":"mouseup",function(e){!isTouch||e&&"pageX"in e||(e=e&&e.touches&&e.touches.length?e.touches[0]:e&&e.changedTouches&&e.changedTouches.length?e.changedTouches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mouseup(e):cache.isArc?arcHandler.mouseup(e):cache.isRectangle?rectHandler.mouseup(e):cache.isQuadraticCurve?quadraticHandler.mouseup(e):cache.isBezierCurve?bezierHandler.mouseup(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mouseup(e):cache.isPencil?pencilHandler.mouseup(e):cache.isEraser?eraserHandler.mouseup(e):cache.isText?textHandler.mouseup(e):cache.isImage?imageHandler.mouseup(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mouseup(e):cache.isMarker&&markerHandler.mouseup(e),!cache.isPdf&&drawHelper.redraw(),syncPoints(!(!is.isDragAllPaths&&!is.isDragLastPath)),preventStopEvent(e)}),addEvent(canvas,isTouch?"touchmove mousemove":"mousemove",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[0]:{pageX:0,pageY:0});var cache=is;cache.isLine?lineHandler.mousemove(e):cache.isArc?arcHandler.mousemove(e):cache.isRectangle?rectHandler.mousemove(e):cache.isQuadraticCurve?quadraticHandler.mousemove(e):cache.isBezierCurve?bezierHandler.mousemove(e):cache.isDragLastPath||cache.isDragAllPaths?dragHelper.mousemove(e):cache.isPencil?pencilHandler.mousemove(e):cache.isEraser?eraserHandler.mousemove(e):cache.isText?textHandler.mousemove(e):cache.isImage?imageHandler.mousemove(e):cache.isPdf?pdfHandler.mousedown(e):cache.isArrow?arrowHandler.mousemove(e):cache.isMarker&&markerHandler.mousemove(e),preventStopEvent(e)});var keyCode;addEvent(document,"keydown",onkeydown),addEvent(document,"keyup",onkeyup),addEvent(document,"keypress",onkeypress),addEvent(document,"paste",onTextFromClipboard);var uid,lastPointIndex=0;window.addEventListener("message",function(event){if(event.data){if(uid||(uid=event.data.uid),event.data.captureStream)return void webrtcHandler.createOffer(function(sdp){sdp.uid=uid,window.parent.postMessage(sdp,"*")});if(event.data.renderStream)return void setTemporaryLine();if(event.data.sdp)return void webrtcHandler.setRemoteDescription(event.data);if(event.data.genDataURL){var dataURL=context.canvas.toDataURL(event.data.format,1);return void window.parent.postMessage({dataURL:dataURL,uid:uid},"*")}if(event.data.undo&&points.length){var index=event.data.index;if(event.data.tool){for(var newArray=[],length=points.length,reverse=points.reverse(),i=0;i Date: Mon, 21 Dec 2020 13:54:55 +0700 Subject: [PATCH 3/3] * Fix virtual keyboard not shown on mobile devices By add an hidden textbox, user will type into this textbox and it will update the canvas respectively. This method also fix error when type in some special language --- dev/events-handler.js | 9 ++++++--- dev/text-handler.js | 27 +++++++++++++++++++++++++++ widget.js | 38 ++++++++++++++++++++++++++++++++++---- widget.min.js | 6 +++--- 4 files changed, 70 insertions(+), 10 deletions(-) diff --git a/dev/events-handler.js b/dev/events-handler.js index a9820e5..0df3c5a 100644 --- a/dev/events-handler.js +++ b/dev/events-handler.js @@ -161,13 +161,15 @@ function onkeyup(e) { keyCode = e.which || e.keyCode || 0; if (keyCode === 13 && is.isText) { - textHandler.onReturnKeyPressed(); + // no handle anumore + // textHandler.onReturnKeyPressed(); return; } if (keyCode == 8 || keyCode == 46) { if (isBackKey(e, keyCode)) { - textHandler.writeText(textHandler.lastKeyPress, true); + // no handle anymore + // textHandler.writeText(textHandler.lastKeyPress, true); } return; } @@ -231,7 +233,8 @@ function onkeypress(e) { var inp = String.fromCharCode(keyCode); if (/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(inp)) { - textHandler.writeText(String.fromCharCode(keyCode)); + // no handle anymore + // textHandler.writeText(String.fromCharCode(keyCode)); } } diff --git a/dev/text-handler.js b/dev/text-handler.js index 25f72d1..02aa2bf 100644 --- a/dev/text-handler.js +++ b/dev/text-handler.js @@ -102,6 +102,7 @@ var textHandler = { textHandler.blinkCursorInterval = setInterval(textHandler.blinkCursor, 700); this.showTextTools(); + this.focusVirtualTextbox(); }, mouseup: function(e) {}, mousemove: function(e) {}, @@ -157,6 +158,32 @@ var textHandler = { // child.style.fontSize = child.innerHTML + 'px'; }); }, + + /** + * In order to support mobile devices, + * or support some special language + * It will create an hidden textbox + * User will type into this textbox + */ + focusVirtualTextbox: function() { + var textbox = document.getElementById('virtual-textbox'); + + if (!textbox) { + textbox = document.createElement('input'); + textbox.id = 'virtual-textbox'; + textbox.setAttribute('type', 'text'); + textbox.style.opacity = '0'; + + textbox.addEventListener('keyup', function(e) { + this.text = e.target.value; + this.fillText(e.target.value); + }.bind(this)) + } + + textbox.value = ''; + document.body.append(textbox); + textbox.focus(); + }, eachFontFamily: function(callback) { var childs = this.fontFamilyBox.querySelectorAll('li'); for (var i = 0; i < childs.length; i++) { diff --git a/widget.js b/widget.js index 67fc6f8..5543156 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2020-12-20 1:56:04 PM UTC +// Last time updated: 2020-12-21 6:53:15 AM UTC // _______________ // Canvas-Designer @@ -1939,6 +1939,7 @@ textHandler.blinkCursorInterval = setInterval(textHandler.blinkCursor, 700); this.showTextTools(); + this.focusVirtualTextbox(); }, mouseup: function(e) {}, mousemove: function(e) {}, @@ -1994,6 +1995,32 @@ // child.style.fontSize = child.innerHTML + 'px'; }); }, + + /** + * In order to support mobile devices, + * or support some special language + * It will create an hidden textbox + * User will type into this textbox + */ + focusVirtualTextbox: function() { + var textbox = document.getElementById('virtual-textbox'); + + if (!textbox) { + textbox = document.createElement('input'); + textbox.id = 'virtual-textbox'; + textbox.setAttribute('type', 'text'); + textbox.style.opacity = '0'; + + textbox.addEventListener('keyup', function(e) { + this.text = e.target.value; + this.fillText(e.target.value); + }.bind(this)) + } + + textbox.value = ''; + document.body.append(textbox); + textbox.focus(); + }, eachFontFamily: function(callback) { var childs = this.fontFamilyBox.querySelectorAll('li'); for (var i = 0; i < childs.length; i++) { @@ -3895,13 +3922,15 @@ keyCode = e.which || e.keyCode || 0; if (keyCode === 13 && is.isText) { - textHandler.onReturnKeyPressed(); + // no handle anumore + // textHandler.onReturnKeyPressed(); return; } if (keyCode == 8 || keyCode == 46) { if (isBackKey(e, keyCode)) { - textHandler.writeText(textHandler.lastKeyPress, true); + // no handle anymore + // textHandler.writeText(textHandler.lastKeyPress, true); } return; } @@ -3965,7 +3994,8 @@ var inp = String.fromCharCode(keyCode); if (/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(inp)) { - textHandler.writeText(String.fromCharCode(keyCode)); + // no handle anymore + // textHandler.writeText(String.fromCharCode(keyCode)); } } diff --git a/widget.min.js b/widget.min.js index 14b2d08..1d6b173 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,7 +1,7 @@ -// Last time updated: 2020-12-20 1:56:04 PM UTC +// Last time updated: 2020-12-21 6:53:15 AM UTC -"use strict";!function(){function addEvent(element,eventType,callback){if(!(eventType.split(" ").length>1))return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this);for(var events=eventType.split(" "),i=0;icompareWith?prefix+" + "+(pointToCompare-compareWith):pointToComparefirst-10&&xsecond-10&&yprev?otherPoint+(point-prev):otherPoint-(prev-point)},getXYWidthHeight:function(x,y,prevX,prevY,oldPoints){return"stretch-first"==oldPoints.pointsToMove&&(x>prevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),y>prevY?(oldPoints.y=oldPoints.y+(y-prevY),oldPoints.height=oldPoints.height-(y-prevY)):(oldPoints.y=oldPoints.y-(prevY-y),oldPoints.height=oldPoints.height+(prevY-y))),"stretch-second"==oldPoints.pointsToMove&&(oldPoints.width=x>prevX?oldPoints.width+(x-prevX):oldPoints.width-(prevX-x),yprevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),oldPoints.height=yx?prevX-x:x-prevX,yy=prevY>y?prevY-y:y-prevY;angle=(xx+yy)/(2*c),points[points.length]=["arc",[prevX+radius,prevY+radius,radius,angle,1],drawHelper.getOptions()];var arcRange=g.arcRange,arcRangeContainer=g.arcRangeContainer;arcRangeContainer.style.display="block",arcRange.focus(),arcRangeContainer.style.top=y+canvas.offsetTop+20+"px",arcRangeContainer.style.left=x+"px",arcRange.value=2}else g.isCircleDrawn&&!g.isCircleEnded&&this.end();g.ismousedown=!1,this.fixAllPoints()},mousemove:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,ismousedown=g.ismousedown,isCircleDrawn=g.isCircleDrawn,isCircleEnded=g.isCircledEnded;if(ismousedown&&!isCircleDrawn&&isCircleEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;tempContext.clearRect(0,0,2e3,2e3),drawHelper.arc(tempContext,[prevX+radius,prevY+radius,radius,2*Math.PI,!0])}},fixAllPoints:function(){for(var toFixed=this.toFixed,i=0;i0?value:.02)-.02),!key||13==key||39==key||40==key||37==key||38==key){var range=Math.PI*arcHandler.toFixed(value),p=points[points.length-1];if("arc"===p[0]){var point=p[1];points[points.length-1]=["arc",[point[0],point[1],point[2],range,g.isClockwise?1:0],p[2]],drawHelper.redraw()}}},toFixed:function(input){return Number(input).toFixed(1)},end:function(){var g=this.global;g.arcRangeContainer.style.display="none",g.arcRange.value=2,g.isCircleDrawn=!1,g.isCircleEnded=!0,drawHelper.redraw()}};arcHandler.init();var lineHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]))}},arrowHandler={ismousedown:!1,prevX:0,prevY:0,arrowSize:10,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["arrow",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arrow(tempContext,[t.prevX,t.prevY,x,y]))}},rectHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["rect",[t.prevX,t.prevY,x-t.prevX,y-t.prevY],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.rect(tempContext,[t.prevX,t.prevY,x-t.prevX,y-t.prevY]))}},quadraticHandler={global:{ismousedown:!1,prevX:0,prevY:0,controlPointX:0,controlPointY:0,isFirstStep:!0,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.controlPointX=x,g.controlPointY=y,g.isFirstStep=!1,g.isLastStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,x,y,x,y]),g.isLastStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=!1,g.isFirstStep=!0,g.ismousedown=!1,x=x||g.controlPointX||g.prevX,y=y||g.controlPointY||g.prevY,points[points.length]=["quadratic",[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y],drawHelper.getOptions()])}},bezierHandler={global:{ismousedown:!1,prevX:0,prevY:0,firstControlPointX:0,firstControlPointY:0,secondControlPointX:0,secondControlPointY:0,isFirstStep:!0,isSecondStep:!1,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||g.isSecondStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y),g.ismousedown&&g.isSecondStep&&(g.secondControlPointX=x,g.secondControlPointY=y,g.isSecondStep=!1,g.isLastStep=!0)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.firstControlPointX=x,g.firstControlPointY=y,g.isFirstStep=!1,g.isSecondStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,x,y,x,y,x,y]),g.ismousedown&&g.isSecondStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,x,y,x,y]),g.isLastStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=g.isSecondStep=!1,g.isFirstStep=!0,g.ismousedown=!1,g.secondControlPointX=g.secondControlPointX||g.firstControlPointX,g.secondControlPointY=g.secondControlPointY||g.firstControlPointY,x=x||g.secondControlPointX,y=y||g.secondControlPointY,points[points.length]=["bezier",[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y],drawHelper.getOptions()])}},zoomHandler={scale:1,lastZoomState:null,up:function(e){this.scale="up"!==this.lastZoomState?1:this.scale,this.scale+=.01,this.lastZoomState="up",this.apply()},down:function(e){this.scale="down"!==this.lastZoomState?1:this.scale,this.scale-=.01,this.lastZoomState="down",this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){ctx.font="22px Verdana",ctx.strokeText("+",10,30)},down:function(ctx){ctx.font="22px Verdana",ctx.strokeText("-",10,30)}}},FileSelector=function(){function selectFile(callback,multiple,accept){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept=accept||"image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,load:function(width,height){var t=imageHandler;points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,width,height,imageHandler.lastImageIndex],drawHelper.getOptions()],document.getElementById("drag-last-path").click(),syncPoints(!0)},mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.image(tempContext,[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex]))}},pdfHandler={lastPdfURL:null,lastIndex:0,lastPointIndex:0,removeWhiteBackground:!1,pdfPageContainer:document.getElementById("pdf-page-container"),pdfPagesList:document.getElementById("pdf-pages-list"),pdfNext:document.getElementById("pdf-next"),pdfPrev:document.getElementById("pdf-prev"),pdfClose:document.getElementById("pdf-close"),pageNumber:1,images:[],ismousedown:!1,prevX:0,prevY:0,getPage:function(pageNumber,callback){if(pageNumber=parseInt(pageNumber)||1,!pdfHandler.pdf)return pdfjsLib.disableWorker=!1,void pdfjsLib.getDocument(pdfHandler.lastPdfURL).then(function(pdf){pdfHandler.pdf=pdf,pdfHandler.getPage(pageNumber,callback)});var pdf=pdfHandler.pdf;pdf.getPage(pageNumber).then(function(page){pdfHandler.pageNumber=pageNumber;var scale=1.5,viewport=page.getViewport(scale),cav=document.createElement("canvas"),ctx=cav.getContext("2d");cav.height=viewport.height,cav.width=viewport.width;var renderContext={canvasContext:ctx,viewport:viewport};!0===pdfHandler.removeWhiteBackground&&(renderContext.background="rgba(0,0,0,0)"),page.render(renderContext).then(function(){if(!0===pdfHandler.removeWhiteBackground){for(var imgd=ctx.getImageData(0,0,cav.width,cav.height),pix=imgd.data,newColor={r:0,g:0,b:0,a:0},i=0,n=pix.length;i1))return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this);for(var events=eventType.split(" "),i=0;icompareWith?prefix+" + "+(pointToCompare-compareWith):pointToComparefirst-10&&xsecond-10&&yprev?otherPoint+(point-prev):otherPoint-(prev-point)},getXYWidthHeight:function(x,y,prevX,prevY,oldPoints){return"stretch-first"==oldPoints.pointsToMove&&(x>prevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),y>prevY?(oldPoints.y=oldPoints.y+(y-prevY),oldPoints.height=oldPoints.height-(y-prevY)):(oldPoints.y=oldPoints.y-(prevY-y),oldPoints.height=oldPoints.height+(prevY-y))),"stretch-second"==oldPoints.pointsToMove&&(oldPoints.width=x>prevX?oldPoints.width+(x-prevX):oldPoints.width-(prevX-x),yprevX?(oldPoints.x=oldPoints.x+(x-prevX),oldPoints.width=oldPoints.width-(x-prevX)):(oldPoints.x=oldPoints.x-(prevX-x),oldPoints.width=oldPoints.width+(prevX-x)),oldPoints.height=yx?prevX-x:x-prevX,yy=prevY>y?prevY-y:y-prevY;angle=(xx+yy)/(2*c),points[points.length]=["arc",[prevX+radius,prevY+radius,radius,angle,1],drawHelper.getOptions()];var arcRange=g.arcRange,arcRangeContainer=g.arcRangeContainer;arcRangeContainer.style.display="block",arcRange.focus(),arcRangeContainer.style.top=y+canvas.offsetTop+20+"px",arcRangeContainer.style.left=x+"px",arcRange.value=2}else g.isCircleDrawn&&!g.isCircleEnded&&this.end();g.ismousedown=!1,this.fixAllPoints()},mousemove:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,ismousedown=g.ismousedown,isCircleDrawn=g.isCircleDrawn,isCircleEnded=g.isCircledEnded;if(ismousedown&&!isCircleDrawn&&isCircleEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;tempContext.clearRect(0,0,2e3,2e3),drawHelper.arc(tempContext,[prevX+radius,prevY+radius,radius,2*Math.PI,!0])}},fixAllPoints:function(){for(var toFixed=this.toFixed,i=0;i0?value:.02)-.02),!key||13==key||39==key||40==key||37==key||38==key){var range=Math.PI*arcHandler.toFixed(value),p=points[points.length-1];if("arc"===p[0]){var point=p[1];points[points.length-1]=["arc",[point[0],point[1],point[2],range,g.isClockwise?1:0],p[2]],drawHelper.redraw()}}},toFixed:function(input){return Number(input).toFixed(1)},end:function(){var g=this.global;g.arcRangeContainer.style.display="none",g.arcRange.value=2,g.isCircleDrawn=!1,g.isCircleEnded=!0,drawHelper.redraw()}};arcHandler.init();var lineHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]))}},arrowHandler={ismousedown:!1,prevX:0,prevY:0,arrowSize:10,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["arrow",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arrow(tempContext,[t.prevX,t.prevY,x,y]))}},rectHandler={ismousedown:!1,prevX:0,prevY:0,mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["rect",[t.prevX,t.prevY,x-t.prevX,y-t.prevY],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.rect(tempContext,[t.prevX,t.prevY,x-t.prevX,y-t.prevY]))}},quadraticHandler={global:{ismousedown:!1,prevX:0,prevY:0,controlPointX:0,controlPointY:0,isFirstStep:!0,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.controlPointX=x,g.controlPointY=y,g.isFirstStep=!1,g.isLastStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,x,y,x,y]),g.isLastStep&&drawHelper.quadratic(tempContext,[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=!1,g.isFirstStep=!0,g.ismousedown=!1,x=x||g.controlPointX||g.prevX,y=y||g.controlPointY||g.prevY,points[points.length]=["quadratic",[g.prevX,g.prevY,g.controlPointX,g.controlPointY,x,y],drawHelper.getOptions()])}},bezierHandler={global:{ismousedown:!1,prevX:0,prevY:0,firstControlPointX:0,firstControlPointY:0,secondControlPointX:0,secondControlPointY:0,isFirstStep:!0,isSecondStep:!1,isLastStep:!1},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.isLastStep||g.isSecondStep||(g.prevX=x,g.prevY=y),g.ismousedown=!0,g.isLastStep&&g.ismousedown&&this.end(x,y),g.ismousedown&&g.isSecondStep&&(g.secondControlPointX=x,g.secondControlPointY=y,g.isSecondStep=!1,g.isLastStep=!0)},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.ismousedown&&g.isFirstStep&&(g.firstControlPointX=x,g.firstControlPointY=y,g.isFirstStep=!1,g.isSecondStep=!0)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;tempContext.clearRect(0,0,innerWidth,innerHeight),g.ismousedown&&g.isFirstStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,x,y,x,y,x,y]),g.ismousedown&&g.isSecondStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,x,y,x,y]),g.isLastStep&&drawHelper.bezier(tempContext,[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y])},end:function(x,y){var g=this.global;g.ismousedown&&(g.isLastStep=g.isSecondStep=!1,g.isFirstStep=!0,g.ismousedown=!1,g.secondControlPointX=g.secondControlPointX||g.firstControlPointX,g.secondControlPointY=g.secondControlPointY||g.firstControlPointY,x=x||g.secondControlPointX,y=y||g.secondControlPointY,points[points.length]=["bezier",[g.prevX,g.prevY,g.firstControlPointX,g.firstControlPointY,g.secondControlPointX,g.secondControlPointY,x,y],drawHelper.getOptions()])}},zoomHandler={scale:1,lastZoomState:null,up:function(e){this.scale="up"!==this.lastZoomState?1:this.scale,this.scale+=.01,this.lastZoomState="up",this.apply()},down:function(e){this.scale="down"!==this.lastZoomState?1:this.scale,this.scale-=.01,this.lastZoomState="down",this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){ctx.font="22px Verdana",ctx.strokeText("+",10,30)},down:function(ctx){ctx.font="22px Verdana",ctx.strokeText("-",10,30)}}},FileSelector=function(){function selectFile(callback,multiple,accept){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept=accept||"image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,load:function(width,height){var t=imageHandler;points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,width,height,imageHandler.lastImageIndex],drawHelper.getOptions()],document.getElementById("drag-last-path").click(),syncPoints(!0)},mousedown:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.prevX=x,t.prevY=y,t.ismousedown=!0},mouseup:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(points[points.length]=["image",[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex],drawHelper.getOptions()],t.ismousedown=!1)},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.image(tempContext,[imageHandler.lastImageURL,t.prevX,t.prevY,x-t.prevX,y-t.prevY,imageHandler.lastImageIndex]))}},pdfHandler={lastPdfURL:null,lastIndex:0,lastPointIndex:0,removeWhiteBackground:!1,pdfPageContainer:document.getElementById("pdf-page-container"),pdfPagesList:document.getElementById("pdf-pages-list"),pdfNext:document.getElementById("pdf-next"),pdfPrev:document.getElementById("pdf-prev"),pdfClose:document.getElementById("pdf-close"),pageNumber:1,images:[],ismousedown:!1,prevX:0,prevY:0,getPage:function(pageNumber,callback){if(pageNumber=parseInt(pageNumber)||1,!pdfHandler.pdf)return pdfjsLib.disableWorker=!1,void pdfjsLib.getDocument(pdfHandler.lastPdfURL).then(function(pdf){pdfHandler.pdf=pdf,pdfHandler.getPage(pageNumber,callback)});var pdf=pdfHandler.pdf;pdf.getPage(pageNumber).then(function(page){pdfHandler.pageNumber=pageNumber;var scale=1.5,viewport=page.getViewport(scale),cav=document.createElement("canvas"),ctx=cav.getContext("2d");cav.height=viewport.height,cav.width=viewport.width;var renderContext={canvasContext:ctx,viewport:viewport};!0===pdfHandler.removeWhiteBackground&&(renderContext.background="rgba(0,0,0,0)"),page.render(renderContext).then(function(){if(!0===pdfHandler.removeWhiteBackground){for(var imgd=ctx.getImageData(0,0,cav.width,cav.height),pix=imgd.data,newColor={r:0,g:0,b:0,a:0},i=0,n=pix.length;i