From 24596fe20f9223f8a421db8702b175de2c7eeacc Mon Sep 17 00:00:00 2001 From: Muaz Khan Date: Mon, 17 Dec 2018 15:37:59 +0500 Subject: [PATCH] Added "designer.clearCanvas" to clear and remove all shapes. --- README.md | 10 +++++++++- bower.json | 2 +- canvas-designer-widget.js | 8 ++++++++ dev/share-drawings.js | 6 ++++++ index.html | 2 +- package.json | 2 +- simple.html | 2 +- widget.js | 8 +++++++- widget.min.js | 4 ++-- 9 files changed, 36 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 76abec3..ace033b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## Demo: https://www.webrtc-experiment.com/Canvas-Designer/ -## Advance Demo: [demos/dashboard.html](https://rtcmulticonnection.herokuapp.com/demos/dashboard.html) +## Advance Demo: [demos/dashboard/](https://rtcmulticonnection.herokuapp.com/demos/dashboard/) Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html @@ -236,6 +236,14 @@ Pass array-of-points that are shared by remote users using socket.io or websocke designer.syncData(arrayOfPoints); ``` +## `clearCanvas` + +Remove and clear all drawings from the canvas: + +```javascript +designer.clearCanvas(); +``` + ## `addSyncListener` This callback is invoked as soon as something new is drawn. An array-of-points is passed over this function. That array MUST be shared with remote users for collaboration. diff --git a/bower.json b/bower.json index 3455cd9..9d29e80 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.2.5", + "version": "1.2.6", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js index dfcfe47..29d6b96 100644 --- a/canvas-designer-widget.js +++ b/canvas-designer-widget.js @@ -205,6 +205,14 @@ function CanvasDesigner() { }); }; + designer.clearCanvas = function () { + if (!designer.iframe) return; + + designer.postMessage({ + clearCanvas: true + }); + }; + designer.widgetHtmlURL = 'widget.html'; designer.widgetJsURL = 'widget.min.js'; } diff --git a/dev/share-drawings.js b/dev/share-drawings.js index 0156dab..d3f047d 100644 --- a/dev/share-drawings.js +++ b/dev/share-drawings.js @@ -82,6 +82,12 @@ window.addEventListener('message', function(event) { return; } + if (event.data.clearCanvas) { + points = []; + drawHelper.redraw(); + return; + } + if (!event.data.canvasDesignerSyncData) return; // drawing is shared here (array of points) diff --git a/index.html b/index.html index 193f4cf..7045a42 100644 --- a/index.html +++ b/index.html @@ -336,7 +336,7 @@

How to use
-

WebRTC Dashboard

+

WebRTC Dashboard




diff --git a/package.json b/package.json index 442ea1c..5d09385 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.2.5", + "version": "1.2.6", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/simple.html b/simple.html index 67422f3..9e0ad7a 100644 --- a/simple.html +++ b/simple.html @@ -320,7 +320,7 @@

How to use
-

WebRTC Dashboard

+

WebRTC Dashboard




diff --git a/widget.js b/widget.js index d90d0c5..f17ec95 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2018-10-17 10:08:21 AM UTC +// Last time updated: 2018-12-17 10:32:34 AM UTC // _______________ // Canvas-Designer @@ -3963,6 +3963,12 @@ return; } + if (event.data.clearCanvas) { + points = []; + drawHelper.redraw(); + return; + } + if (!event.data.canvasDesignerSyncData) return; // drawing is shared here (array of points) diff --git a/widget.min.js b/widget.min.js index 9490a69..3306865 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,4 +1,4 @@ -// Last time updated: 2018-10-17 10:08:21 AM UTC +// Last time updated: 2018-12-17 10:32:34 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,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;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",!0===tools.dragSingle&&(decorateDragLastPath(),document.getElementById("drag-last-path").style.display="block"),!0===tools.dragMultiple&&(decorateDragAllPaths(),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.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("all"===index)return points=[],drawHelper.redraw(),void syncPoints(!0);if(index.numberOfLastShapes){try{points.length-=index.numberOfLastShapes}catch(e){points=[]}return drawHelper.redraw(),void syncPoints(!0)}if(-1===index)return points.length=points.length-1,drawHelper.redraw(),void syncPoints(!0);if(points[index]){for(var newPoints=[],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;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.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("all"===index)return points=[],drawHelper.redraw(),void syncPoints(!0);if(index.numberOfLastShapes){try{points.length-=index.numberOfLastShapes}catch(e){points=[]}return drawHelper.redraw(),void syncPoints(!0)}if(-1===index)return points.length=points.length-1,drawHelper.redraw(),void syncPoints(!0);if(points[index]){for(var newPoints=[],i=0;i