From 3eae39eac023dd1772da9eb2aa804670410e034b Mon Sep 17 00:00:00 2001
From: Muaz Khan <muazkh@gmail.com>
Date: Sun, 17 Apr 2016 17:46:47 +0500
Subject: [PATCH] Now you can access <iframe> using "designer.iframe"

---
 README.md                 | 19 +++++++++++++++++++
 canvas-designer-widget.js | 36 +++++++++++++++++++-----------------
 widget.js                 |  2 +-
 widget.min.js             |  2 +-
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 04cf61c..f1e42d4 100644
--- a/README.md
+++ b/README.md
@@ -253,6 +253,25 @@ If you want to remove the widget from your HTMLDOMElement.
 designer.destroy();
 ```
 
+## `iframe`
+
+You can access designer iframe as following:
+
+```javascript
+designer.iframe.style.border = '5px solid red';
+
+window.open(designer.iframe.src);
+```
+
+`designer.iframe` will be `null/undefined` until you call `appendTo`. So always use this code-block:
+
+```javascript
+if(!designer.iframe) {
+    designer.appendTo(document.body);
+}
+designer.iframe.style.border = '5px solid red';
+```
+
 ## `toDataURL`
 
 Get data-URL of your drawings! 
diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js
index d1307f3..90b156a 100644
--- a/canvas-designer-widget.js
+++ b/canvas-designer-widget.js
@@ -12,8 +12,8 @@
 
 function CanvasDesigner() {
     var designer = this;
+    designer.iframe = null;
 
-    var iframe;
     var tools = {
         line: true,
         pencil: true,
@@ -27,10 +27,11 @@ function CanvasDesigner() {
         text: true,
         image: true
     };
+
     var selectedIcon = 'pencil';
 
     function syncData(data) {
-        if (!iframe) return;
+        if (!designer.iframe) return;
 
         designer.postMessage({
             canvasDesignerSyncData: data
@@ -69,21 +70,22 @@ function CanvasDesigner() {
     designer.uid = getRandomString();
 
     designer.appendTo = function(parentNode) {
-        iframe = document.createElement('iframe');
-        iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
-        iframe.style.width = '100%';
-        iframe.style.height = '100%';
-        iframe.style.border = 0;
-        parentNode.appendChild(iframe);
-
+        designer.iframe = document.createElement('iframe');
+        designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
+        designer.iframe.style.width = '100%';
+        designer.iframe.style.height = '100%';
+        designer.iframe.style.border = 0;
+        
         window.removeEventListener('message', onMessage);
         window.addEventListener('message', onMessage, false);
+
+        parentNode.appendChild(designer.iframe);
     };
 
     designer.destroy = function() {
-        if (iframe) {
-            iframe.parentNode.removeChild(iframe);
-            iframe = null;
+        if (designer.iframe) {
+            designer.iframe.parentNode.removeChild(designer.iframe);
+            designer.iframe = null;
         }
         window.removeEventListener('message', onMessage);
     };
@@ -107,7 +109,7 @@ function CanvasDesigner() {
     designer.toDataURL = function(format, callback) {
         dataURLListener = callback;
         
-        if (!iframe) return;
+        if (!designer.iframe) return;
         designer.postMessage({
             genDataURL: true,
             format: format
@@ -115,7 +117,7 @@ function CanvasDesigner() {
     };
 
     designer.sync = function() {
-        if (!iframe) return;
+        if (!designer.iframe) return;
         designer.postMessage({
             syncPoints: true
         });
@@ -124,7 +126,7 @@ function CanvasDesigner() {
     designer.pointsLength = 0;
 
     designer.undo = function(index) {
-        if (!iframe) return;
+        if (!designer.iframe) return;
 
         designer.postMessage({
             undo: true,
@@ -133,10 +135,10 @@ function CanvasDesigner() {
     };
 
     designer.postMessage = function(message) {
-        if (!iframe) return;
+        if (!designer.iframe) return;
 
         message.uid = designer.uid;
-        iframe.contentWindow.postMessage(message, '*');
+        designer.iframe.contentWindow.postMessage(message, '*');
     };
 
     designer.widgetHtmlURL = 'widget.html';
diff --git a/widget.js b/widget.js
index 033a7fa..696b71a 100644
--- a/widget.js
+++ b/widget.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-04-17 12:15:59 PM UTC
+// Last time updated: 2016-04-17 12:40:31 PM UTC
 
 // _______________
 // Canvas-Designer
diff --git a/widget.min.js b/widget.min.js
index 2ae99d1..e848c4a 100644
--- a/widget.min.js
+++ b/widget.min.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-04-17 12:15:59 PM UTC
+// Last time updated: 2016-04-17 12:40:31 PM UTC
 
 "use strict";!function(){function addEvent(element,eventType,callback){return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this)}function find(selector){return document.getElementById(selector)}function getContext(id){var canv=find(id),ctx=canv.getContext("2d");return canv.setAttribute("width",innerWidth),canv.setAttribute("height",innerHeight),ctx.lineWidth=lineWidth,ctx.strokeStyle=strokeStyle,ctx.fillStyle=fillStyle,ctx.font=font,ctx}function endLastPath(){var cache=is;cache.isArc?arcHandler.end():cache.isQuadraticCurve?quadraticHandler.end():cache.isBezierCurve&&bezierHandler.end(),drawHelper.redraw()}function copy(){endLastPath(),dragHelper.global.startingIndex=0,find("copy-last").checked?(copiedStuff=points[points.length-1],setSelection(find("drag-last-path"),"DragLastPath")):(copiedStuff=points,setSelection(find("drag-all-paths"),"DragAllPaths"))}function paste(){endLastPath(),dragHelper.global.startingIndex=0,find("copy-last").checked?(points[points.length]=copiedStuff,dragHelper.global={prevX:0,prevY:0,startingIndex:points.length-1},dragHelper.dragAllPaths(0,0),setSelection(find("drag-last-path"),"DragLastPath")):(dragHelper.global.startingIndex=points.length,points=points.concat(copiedStuff),setSelection(find("drag-all-paths"),"DragAllPaths"))}function setSelection(element,prop){endLastPath(),hideContainers(),is.set(prop);var selected=document.getElementsByClassName("selected-shape")[0];selected&&(selected.className=selected.className.replace(/selected-shape/g,"")),element.className||(element.className=""),element.className+=" selected-shape"}function hideContainers(){var additionalContainer=find("additional-container"),colorsContainer=find("colors-container"),lineWidthContainer=find("line-width-container");additionalContainer.style.display=colorsContainer.style.display=lineWidthContainer.style.display="none"}function onkeydown(e){return keyCode=e.which||e.keyCode||0,8==keyCode||46==keyCode?void isBackKey(e,keyCode):(e.metaKey&&(isControlKeyPressed=!0,keyCode=17),void(isControlKeyPressed||17!==keyCode||(isControlKeyPressed=!0)))}function isBackKey(e,keyCode){var doPrevent=!1,d=e.srcElement||e.target;return doPrevent="INPUT"===d.tagName.toUpperCase()&&("TEXT"===d.type.toUpperCase()||"PASSWORD"===d.type.toUpperCase()||"FILE"===d.type.toUpperCase()||"SEARCH"===d.type.toUpperCase()||"EMAIL"===d.type.toUpperCase()||"NUMBER"===d.type.toUpperCase()||"DATE"===d.type.toUpperCase())||"TEXTAREA"===d.tagName.toUpperCase()?d.readOnly||d.disabled:!0,doPrevent&&e.preventDefault(),doPrevent}function onkeyup(e){return null!=e.which||null==e.charCode&&null==e.keyCode||(e.which=null!=e.charCode?e.charCode:e.keyCode),keyCode=e.which||e.keyCode||0,8==keyCode||46==keyCode?void(isBackKey(e,keyCode)&&textHandler.writeText(textHandler.lastKeyPress,!0)):(isControlKeyPressed&&90===keyCode&&points.length&&(points.length=points.length-1,drawHelper.redraw(),syncPoints(!0)),isControlKeyPressed&&65===keyCode&&(dragHelper.global.startingIndex=0,endLastPath(),setSelection(find("drag-all-paths"),"DragAllPaths")),isControlKeyPressed&&67===keyCode&&points.length&&copy(),isControlKeyPressed&&86===keyCode&&copiedStuff.length&&paste(),"undefined"!=typeof e.metaKey&&e.metaKey===!1&&(isControlKeyPressed=!1,keyCode=17),void(17===keyCode&&(isControlKeyPressed=!1)))}function onkeypress(e){null!=e.which||null==e.charCode&&null==e.keyCode||(e.which=null!=e.charCode?e.charCode:e.keyCode),keyCode=e.which||e.keyCode||0;var inp=String.fromCharCode(keyCode);/[a-zA-Z0-9-_ !?|\/'",.=:;(){}\[\]`~@#$%^&*+-]/.test(inp)&&textHandler.writeText(String.fromCharCode(keyCode))}function syncPoints(isSyncAll){if(isSyncAll&&(lastPointIndex=0),lastPointIndex!=points.length){for(var pointsToShare=[],i=lastPointIndex;i<points.length;i++)pointsToShare[i-lastPointIndex]=points[i];pointsToShare.length&&syncData({points:pointsToShare||[],startIndex:lastPointIndex}),(pointsToShare.length||!points.length)&&(lastPointIndex=points.length)}}function syncData(data){window.parent.postMessage({canvasDesignerSyncData:data,uid:uid},"*")}var isControlKeyPressed,is={isLine:!1,isArc:!1,isDragLastPath:!1,isDragAllPaths:!1,isRectangle:!1,isQuadraticCurve:!1,isBezierCurve:!1,isPencil:!1,isEraser:!1,isText:!1,isImage:!1,set:function(shape){var cache=this;cache.isLine=cache.isArc=cache.isDragLastPath=cache.isDragAllPaths=cache.isRectangle=cache.isQuadraticCurve=cache.isBezierCurve=cache.isPencil=cache.isEraser=cache.isText=cache.isImage=!1,cache["is"+shape]=!0}},points=[],textarea=find("code-text"),lineWidth=2,strokeStyle="#6c96c8",fillStyle="transparent",globalAlpha=1,globalCompositeOperation="source-over",lineCap="butt",font="15px Verdana",lineJoin="miter",context=getContext("main-canvas"),tempContext=getContext("temp-canvas"),common={updateTextArea:function(){var c=common,toFixed=c.toFixed,getPoint=c.getPoint,isAbsolutePoints=find("is-absolute-points").checked,isShortenCode=find("is-shorten-code").checked;isAbsolutePoints&&isShortenCode&&c.absoluteShortened(),isAbsolutePoints&&!isShortenCode&&c.absoluteNOTShortened(toFixed),!isAbsolutePoints&&isShortenCode&&c.relativeShortened(toFixed,getPoint),isAbsolutePoints||isShortenCode||c.relativeNOTShortened(toFixed,getPoint)},toFixed:function(input){return Number(input).toFixed(1)},getPoint:function(pointToCompare,compareWith,prefix){return pointToCompare=pointToCompare>compareWith?prefix+" + "+(pointToCompare-compareWith):compareWith>pointToCompare?prefix+" - "+(compareWith-pointToCompare):prefix},absoluteShortened:function(){var point,output="",length=points.length,i=0;for(i;length>i;i++)point=points[i],output+=this.shortenHelper(point[0],point[1],point[2]);output=output.substr(0,output.length-2),textarea.value="var points = ["+output+"], length = points.length, point, p, i = 0;\n\n"+this.forLoop,this.prevProps=null},absoluteNOTShortened:function(toFixed){var i,point,p,tempArray=[];for(i=0;i<points.length;i++)p=points[i],point=p[1],"pencil"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"eraser"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"line"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.lineTo("+point[2]+", "+point[3]+");\n"+this.strokeOrFill(p[2])]),"text"===p[0]&&(tempArray[i]=["context.fillText("+point[0]+", "+point[1]+", "+point[2]+");\n"+this.strokeOrFill(p[2])]),"arc"===p[0]&&(tempArray[i]=["context.beginPath(); \ncontext.arc("+toFixed(point[0])+","+toFixed(point[1])+","+toFixed(point[2])+","+toFixed(point[3])+", 0,"+point[4]+"); \n"+this.strokeOrFill(p[2])]),"rect"===p[0]&&(tempArray[i]=[this.strokeOrFill(p[2])+"\ncontext.strokeRect("+point[0]+", "+point[1]+","+point[2]+","+point[3]+");\ncontext.fillRect("+point[0]+", "+point[1]+","+point[2]+","+point[3]+");"]),"quadratic"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.quadraticCurveTo("+point[2]+", "+point[3]+", "+point[4]+", "+point[5]+");\n"+this.strokeOrFill(p[2])]),"bezier"===p[0]&&(tempArray[i]=["context.beginPath();\ncontext.moveTo("+point[0]+", "+point[1]+");\ncontext.bezierCurveTo("+point[2]+", "+point[3]+", "+point[4]+", "+point[5]+", "+point[6]+", "+point[7]+");\n"+this.strokeOrFill(p[2])]);textarea.value=tempArray.join("\n\n")+this.strokeFillText,this.prevProps=null},relativeShortened:function(toFixed,getPoint){var point,p,i=0,length=points.length,output="",x=0,y=0;for(i;length>i;i++)p=points[i],point=p[1],0===i&&(x=point[0],y=point[1]),"text"===p[0]&&(x=point[1],y=point[2]),"pencil"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"eraser"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"line"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"text"===p[0]&&(output+=this.shortenHelper(p[0],[point[0],getPoint(point[1],x,"x"),getPoint(point[2],y,"y")],p[2])),"arc"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),point[2],point[3],point[4]],p[2])),"rect"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y")],p[2])),"quadratic"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y"),getPoint(point[4],x,"x"),getPoint(point[5],y,"y")],p[2])),"bezier"===p[0]&&(output+=this.shortenHelper(p[0],[getPoint(point[0],x,"x"),getPoint(point[1],y,"y"),getPoint(point[2],x,"x"),getPoint(point[3],y,"y"),getPoint(point[4],x,"x"),getPoint(point[5],y,"y"),getPoint(point[6],x,"x"),getPoint(point[7],y,"y")],p[2]));output=output.substr(0,output.length-2),textarea.value="var x = "+x+", y = "+y+", points = ["+output+"], length = points.length, point, p, i = 0;\n\n"+this.forLoop,this.prevProps=null},relativeNOTShortened:function(toFixed,getPoint){var i,point,p,length=points.length,output="",x=0,y=0;for(i=0;length>i;i++)p=points[i],point=p[1],0===i&&(x=point[0],y=point[1],"text"===p[0]&&(x=point[1],y=point[2]),output="var x = "+x+", y = "+y+";\n\n"),"arc"===p[0]&&(output+="context.beginPath();\ncontext.arc("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+point[2]+", "+point[3]+", 0, "+point[4]+");\n"+this.strokeOrFill(p[2])),"pencil"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"eraser"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"line"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.lineTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\n"+this.strokeOrFill(p[2])),"text"===p[0]&&(output+="context.fillText("+point[0]+", "+getPoint(point[1],x,"x")+", "+getPoint(point[2],y,"y")+");\n"+this.strokeOrFill(p[2])),"rect"===p[0]&&(output+=this.strokeOrFill(p[2])+"\ncontext.strokeRect("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");\ncontext.fillRect("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+");"),"quadratic"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.quadraticCurveTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", "+getPoint(point[4],x,"x")+", "+getPoint(point[5],y,"y")+");\n"+this.strokeOrFill(p[2])),"bezier"===p[0]&&(output+="context.beginPath();\ncontext.moveTo("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+");\ncontext.bezierCurveTo("+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", "+getPoint(point[4],x,"x")+", "+getPoint(point[5],y,"y")+", "+getPoint(point[6],x,"x")+", "+getPoint(point[7],y,"y")+");\n"+this.strokeOrFill(p[2])),i!==length-1&&(output+="\n\n");textarea.value=output+this.strokeFillText,this.prevProps=null},forLoop:'for(i; i < length; i++) {\n    p = points[i];\n    point = p[1];\n    context.beginPath();\n\n    if(p[2]) { \n       context.lineWidth = p[2][0];\n       context.strokeStyle = p[2][1];\n       context.fillStyle = p[2][2];\n       context.globalAlpha = p[2][3];\n       context.globalCompositeOperation = p[2][4];\n       context.lineCap = p[2][5];\n       context.lineJoin = p[2][6];\n       context.font = p[2][7];\n    }\n\n    if(p[0] === "line") { \n       context.moveTo(point[0], point[1]);\n       context.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "pencil") { \n       context.moveTo(point[0], point[1]);\n       context.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "text") { \n       context.fillText(point[0], point[1], point[2]);\n    }\n\n    if(p[0] === "eraser") { \n       context.moveTo(point[0], point[1]);\n       context.lineTo(point[2], point[3]);\n    }\n\n    if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n    if(p[0] === "rect") {\n       context.strokeRect(point[0], point[1], point[2], point[3]);\n       context.fillRect(point[0], point[1], point[2], point[3]);\n    }\n\n    if(p[0] === "quadratic") {\n       context.moveTo(point[0], point[1]);\n       context.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n    }\n\n    if(p[0] === "bezier") {\n       context.moveTo(point[0], point[1]);\n       context.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n    }\n\n    context.stroke();\n    context.fill();\n}',strokeFillText:"\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n    if(lineWidth) { \n       context.globalAlpha = globalAlpha;\n       context.globalCompositeOperation = globalCompositeOperation;\n       context.lineCap = lineCap;\n       context.lineJoin = lineJoin;\n       context.lineWidth = lineWidth;\n       context.strokeStyle = strokeStyle;\n       context.fillStyle = fillStyle;\n       context.font = font;\n    } \n\n    context.stroke();\n    context.fill();\n}",strokeOrFill:function(p){return this.prevProps&&this.prevProps===p.join(",")?"strokeOrFill();":(this.prevProps=p.join(","),'strokeOrFill("'+p.join('", "')+'");')},prevProps:null,shortenHelper:function(name,p1,p2){var result='["'+name+'", ['+p1.join(", ")+"]";return this.prevProps&&this.prevProps===p2.join(",")||(this.prevProps=p2.join(","),result+=', ["'+p2.join('", "')+'"]'),result+"], "}},copiedStuff=[],tools={line:!0,pencil:!0,dragSingle:!0,dragMultiple:!0,eraser:!0,rectangle:!0,arc:!0,bezier:!0,quadratic:!0,text:!0,image:!0};params.tools&&(tools=JSON.parse(params.tools)),is.set(window.selectedIcon),window.addEventListener("load",function(){for(var firstMatch,toolBox=document.getElementById("tool-box"),canvasElements=toolBox.getElementsByTagName("canvas"),shape=window.selectedIcon.toLowerCase(),i=0;i<canvasElements.length;i++)firstMatch||-1===(canvasElements[i].id||"").indexOf(shape)||(firstMatch=canvasElements[i]);firstMatch||(window.selectedIcon="Pencil",firstMatch=document.getElementById("pencil-icon")),setSelection(firstMatch,window.selectedIcon)},!1),function(){function getContext(id){var context=find(id).getContext("2d");return context.lineWidth=2,context.strokeStyle="#6c96c8",context}function bindEvent(context,shape){"Pencil"===shape&&(lineCap=lineJoin="round"),addEvent(context.canvas,"click",function(){if(textHandler.text.length&&(points[points.length]=["text",['"'+textHandler.text+'"',textHandler.x,textHandler.y],drawHelper.getOptions()]),"Text"===shape?(tempContext.canvas.style.cursor="text",textHandler.x=textHandler.y=0,textHandler.text=""):(textHandler.text="",tempContext.canvas.style.cursor="default","undefined"!=typeof textHandler.blinkCursorInterval&&clearInterval(textHandler.blinkCursorInterval)),"Pencil"===shape&&(lineCap=lineJoin="round"),dragHelper.global.startingIndex=0,setSelection(this,shape),"drag-last-path"===this.id?(find("copy-last").checked=!0,find("copy-all").checked=!1):"drag-all-paths"===this.id&&(find("copy-all").checked=!0,find("copy-last").checked=!1),"image-icon"===this.id){var selector=new FileSelector;selector.selectSingleFile(function(file){if(file){var reader=new FileReader;reader.onload=function(event){var image=new Image;image.onload=function(){var index=imageHandler.images.length;imageHandler.lastImageURL=image.src,imageHandler.lastImageIndex=index,imageHandler.images.push(image)},image.src=event.target.result},reader.readAsDataURL(file)}})}"pencil-icon"===this.id||"eraser-icon"===this.id?(cache.lineCap=lineCap,cache.lineJoin=lineJoin,lineCap=lineJoin="round"):cache.lineCap&&cache.lineJoin&&(lineCap=cache.lineCap,lineJoin=cache.lineJoin),"eraser-icon"===this.id?(cache.strokeStyle=strokeStyle,cache.fillStyle=fillStyle,cache.lineWidth=lineWidth,strokeStyle="White",fillStyle="White",lineWidth=10):cache.strokeStyle&&cache.fillStyle&&"undefined"!=typeof cache.lineWidth&&(strokeStyle=cache.strokeStyle,fillStyle=cache.fillStyle,lineWidth=cache.lineWidth)})}function decorateDragLastPath(){var point,i,context=getContext("drag-last-path"),x=10,y=6,line="line",points=[[line,x,y,x+5,y+27],[line,x,y,x+18,y+19],[line,x+17,y+19,x+9,y+20],[line,x+9,y+20,x+5,y+27],[line,x+16,y+22,x+16,y+31],[line,x+12,y+27,x+20,y+27]],length=points.length;for(i=0;length>i;i++)point=points[i],"line"===point[0]&&(context.beginPath(),context.moveTo(point[1],point[2]),context.lineTo(point[3],point[4]),context.closePath(),context.stroke());context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Last",18,12),bindEvent(context,"DragLastPath")}function decorateDragAllPaths(){var point,i,context=getContext("drag-all-paths"),x=10,y=6,line="line",points=[[line,x,y,x+5,y+27],[line,x,y,x+18,y+19],[line,x+17,y+19,x+9,y+20],[line,x+9,y+20,x+5,y+27],[line,x+16,y+22,x+16,y+31],[line,x+12,y+27,x+20,y+27]],length=points.length;for(i=0;length>i;i++)point=points[i],"line"===point[0]&&(context.beginPath(),context.moveTo(point[1],point[2]),context.lineTo(point[3],point[4]),context.closePath(),context.stroke());context.fillStyle="Gray",context.font="10px Verdana",context.fillText("All",20,12),bindEvent(context,"DragAllPaths")}function decorateLine(){var context=getContext("line");context.moveTo(0,0),context.lineTo(40,40),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Line",16,12),bindEvent(context,"Line")}function decoratePencil(){var context=getContext("pencil-icon");context.lineWidth=5,context.lineCap="round",context.moveTo(35,20),context.lineTo(5,35),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Pencil",6,12),bindEvent(context,"Pencil")}function decorateEraser(){var context=getContext("eraser-icon");context.lineWidth=9,context.lineCap="round",context.moveTo(35,20),context.lineTo(5,25),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Eraser",6,12),bindEvent(context,"Eraser")}function decorateText(){var context=getContext("text-icon");context.font="22px Verdana",context.strokeText("T",15,30),bindEvent(context,"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:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="}function decorateArc(){var context=getContext("arc");context.arc(20,20,16.3,2*Math.PI,0,1),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Arc",10,24),bindEvent(context,"Arc")}function decorateRect(){var context=getContext("rectangle");context.strokeRect(5,5,30,30),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Rect",8,24),bindEvent(context,"Rectangle")}function decorateQuadratic(){var context=getContext("quadratic-curve");context.moveTo(0,0),context.quadraticCurveTo(50,10,30,40),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("quad..",2,24),bindEvent(context,"QuadraticCurve")}function decorateBezier(){var context=getContext("bezier-curve"),x=0,y=4;context.moveTo(x,y),context.bezierCurveTo(x+86,y+16,x-45,y+24,x+48,y+34),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Bezier",10,8),bindEvent(context,"BezierCurve")}function tempStrokeTheLine(context,width,mx,my,lx,ly){context.beginPath(),context.lineWidth=width,context.moveTo(mx,my),context.lineTo(lx,ly),context.stroke()}function decorateLineWidth(){var context=getContext("line-width");tempStrokeTheLine(context,2,5,15,35,15),tempStrokeTheLine(context,3,5,20,35,20),tempStrokeTheLine(context,4,5,26,35,26),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Line",8,12),context.fillText("Width",6,38);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");context.fillStyle="red",context.fillRect(5,3,30,10),context.fillStyle="green",context.fillRect(5,15,30,10),context.fillStyle="blue",context.fillRect(5,27,30,10);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");context.fillStyle="#6c96c8",context.font="35px Verdana",context.fillText("»",10,27),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Extras!",2,38);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"),toolBox=find("tool-box");toolBox.style.height=innerHeight+"px",tools.dragSingle===!0?decorateDragLastPath():document.getElementById("drag-last-path").style.display="none",tools.dragMultiple===!0?decorateDragAllPaths():document.getElementById("drag-all-paths").style.display="none",tools.line===!0?decorateLine():document.getElementById("line").style.display="none",tools.pencil===!0?decoratePencil():document.getElementById("pencil-icon").style.display="none",tools.eraser===!0?decorateEraser():document.getElementById("eraser-icon").style.display="none",tools.text===!0?decorateText():document.getElementById("text-icon").style.display="none",tools.image===!0?decorateImage():document.getElementById("image-icon").style.display="none",tools.arc===!0?decorateArc():document.getElementById("arc").style.display="none",tools.rectangle===!0?decorateRect():document.getElementById("rectangle").style.display="none",tools.quadratic===!0?decorateQuadratic():document.getElementById("quadratic-curve").style.display="none",tools.bezier===!0?decorateBezier():document.getElementById("bezier-curve").style.display="none",decorateLineWidth(),decorateColors(),decorateAdditionalOptions();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"),isShorten=find("is-shorten-code");addEvent(isShorten,"change",common.updateTextArea),addEvent(isAbsolute,"change",common.updateTextArea)}();var drawHelper={redraw:function(skipSync){tempContext.clearRect(0,0,innerWidth,innerHeight),context.clearRect(0,0,innerWidth,innerHeight);var i,point,length=points.length;for(i=0;length>i;i++)point=points[i],this[point[0]](context,point[1],point[2]);skipSync||"undefined"==typeof syncPoints||syncPoints()},getOptions:function(){return[lineWidth,strokeStyle,fillStyle,globalAlpha,globalCompositeOperation,lineCap,lineJoin,font]},handleOptions:function(context,opt,isNoFillStroke){opt=opt||this.getOptions(),context.globalAlpha=opt[3],context.globalCompositeOperation=opt[4],context.lineCap=opt[5],context.lineJoin=opt[6],context.lineWidth=opt[0],context.strokeStyle=opt[1],context.fillStyle=opt[2],isNoFillStroke||(context.stroke(),context.fill())},line:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.lineTo(point[2],point[3]),this.handleOptions(context,options)},text:function(context,point,options){var oldFillStyle=fillStyle;context.fillStyle="transparent"===fillStyle||"White"===fillStyle?"Black":fillStyle,context.font="15px Verdana",context.fillText(point[0].substr(1,point[0].length-2),point[1],point[2]),fillStyle=oldFillStyle,this.handleOptions(context,options)},arc:function(context,point,options){context.beginPath(),context.arc(point[0],point[1],point[2],point[3],0,point[4]),this.handleOptions(context,options)},rect:function(context,point,options){this.handleOptions(context,options,!0),context.strokeRect(point[0],point[1],point[2],point[3]),context.fillRect(point[0],point[1],point[2],point[3])},image:function(context,point,options){this.handleOptions(context,options,!0);var image=imageHandler.images[point[5]];if(!image){var image=new Image;return image.onload=function(){var index=imageHandler.images.length;imageHandler.lastImageURL=image.src,imageHandler.lastImageIndex=index,imageHandler.images.push(image),context.drawImage(image,point[1],point[2],point[3],point[4])},void(image.src=point[0])}context.drawImage(image,point[1],point[2],point[3],point[4])},quadratic:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.quadraticCurveTo(point[2],point[3],point[4],point[5]),this.handleOptions(context,options)},bezier:function(context,point,options){context.beginPath(),context.moveTo(point[0],point[1]),context.bezierCurveTo(point[2],point[3],point[4],point[5],point[6],point[7]),this.handleOptions(context,options)}},dragHelper={global:{prevX:0,prevY:0,ismousedown:!1,pointsToMove:"all",startingIndex:0},mousedown:function(e){isControlKeyPressed&&(copy(),paste(),isControlKeyPressed=!1);var dHelper=dragHelper,g=dHelper.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;if(g.prevX=x,g.prevY=y,g.pointsToMove="all",points.length){var p=points[points.length-1],point=p[1];"line"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="head"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="tail")),"rect"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="stretch-first"),dHelper.isPointInPath(x,y,point[0]+point[2],point[1])&&(g.pointsToMove="stretch-second"),dHelper.isPointInPath(x,y,point[0],point[1]+point[3])&&(g.pointsToMove="stretch-third"),dHelper.isPointInPath(x,y,point[0]+point[2],point[1]+point[3])&&(g.pointsToMove="stretch-last")),"image"===p[0]&&(dHelper.isPointInPath(x,y,point[1],point[2])&&(g.pointsToMove="stretch-first"),dHelper.isPointInPath(x,y,point[1]+point[3],point[2])&&(g.pointsToMove="stretch-second"),dHelper.isPointInPath(x,y,point[1],point[2]+point[4])&&(g.pointsToMove="stretch-third"),dHelper.isPointInPath(x,y,point[1]+point[3],point[2]+point[4])&&(g.pointsToMove="stretch-last")),"quadratic"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="starting-points"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="control-points"),dHelper.isPointInPath(x,y,point[4],point[5])&&(g.pointsToMove="ending-points")),"bezier"===p[0]&&(dHelper.isPointInPath(x,y,point[0],point[1])&&(g.pointsToMove="starting-points"),dHelper.isPointInPath(x,y,point[2],point[3])&&(g.pointsToMove="1st-control-points"),dHelper.isPointInPath(x,y,point[4],point[5])&&(g.pointsToMove="2nd-control-points"),dHelper.isPointInPath(x,y,point[6],point[7])&&(g.pointsToMove="ending-points"))}g.ismousedown=!0},mouseup:function(){var g=this.global;is.isDragLastPath&&(tempContext.clearRect(0,0,innerWidth,innerHeight),context.clearRect(0,0,innerWidth,innerHeight),this.end()),g.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,g=this.global;drawHelper.redraw(),g.ismousedown&&this.dragShape(x,y),is.isDragLastPath&&this.init()},init:function(){if(points.length){var p=points[points.length-1],point=p[1],g=this.global;g.ismousedown?tempContext.fillStyle="rgba(255,85 ,154,.9)":tempContext.fillStyle="rgba(255,85 ,154,.4)","quadratic"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.arc(point[4],point[5],10,2*Math.PI,0,!1),tempContext.fill()),"bezier"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.arc(point[4],point[5],10,2*Math.PI,0,!1),tempContext.arc(point[6],point[7],10,2*Math.PI,0,!1),tempContext.fill()),"line"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.arc(point[2],point[3],10,2*Math.PI,0,!1),tempContext.fill()),"text"===p[0]&&(tempContext.font="15px Verdana",tempContext.fillText(point[0],point[1],point[2])),"rect"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[0],point[1],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0]+point[2],point[1],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0],point[1]+point[3],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[0]+point[2],point[1]+point[3],10,2*Math.PI,0,!1),tempContext.fill()),"image"===p[0]&&(tempContext.beginPath(),tempContext.arc(point[1],point[2],10,2*Math.PI,0,!1),
 tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1]+point[3],point[2],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1],point[2]+point[4],10,2*Math.PI,0,!1),tempContext.fill(),tempContext.beginPath(),tempContext.arc(point[1]+point[3],point[2]+point[4],10,2*Math.PI,0,!1),tempContext.fill())}},isPointInPath:function(x,y,first,second){return x>first-10&&first+10>x&&y>second-10&&second+10>y},getPoint:function(point,prev,otherPoint){return point=point>prev?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&&(x>prevX?oldPoints.width=oldPoints.width+(x-prevX):oldPoints.width=oldPoints.width-(prevX-x),prevY>y?(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-third"==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)),prevY>y?oldPoints.height=oldPoints.height+(y-prevY):oldPoints.height=oldPoints.height-(prevY-y)),oldPoints},dragShape:function(x,y){if(this.global.ismousedown){tempContext.clearRect(0,0,innerWidth,innerHeight),is.isDragLastPath&&this.dragLastPath(x,y),is.isDragAllPaths&&this.dragAllPaths(x,y);var g=this.global;g.prevX=x,g.prevY=y}},end:function(){if(points.length){tempContext.clearRect(0,0,innerWidth,innerHeight);var point=points[points.length-1];drawHelper[point[0]](context,point[1],point[2])}},dragAllPaths:function(x,y){var p,point,g=this.global,prevX=g.prevX,prevY=g.prevY,length=points.length,getPoint=this.getPoint,i=g.startingIndex;for(i;length>i;i++)p=points[i],point=p[1],"line"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3])],p[2]]),"text"===p[0]&&(points[i]=[p[0],[point[0],getPoint(x,prevX,point[1]),getPoint(y,prevY,point[2])],p[2]]),"arc"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),point[2],point[3],point[4]],p[2]]),"rect"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),point[2],point[3]],p[2]]),"image"===p[0]&&(points[i]=[p[0],[point[0],getPoint(x,prevX,point[1]),getPoint(y,prevY,point[2]),point[3],point[4],point[5]],p[2]]),"quadratic"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3]),getPoint(x,prevX,point[4]),getPoint(y,prevY,point[5])],p[2]]),"bezier"===p[0]&&(points[i]=[p[0],[getPoint(x,prevX,point[0]),getPoint(y,prevY,point[1]),getPoint(x,prevX,point[2]),getPoint(y,prevY,point[3]),getPoint(x,prevX,point[4]),getPoint(y,prevY,point[5]),getPoint(x,prevX,point[6]),getPoint(y,prevY,point[7])],p[2]])},dragLastPath:function(x,y){var g=this.global,prevX=g.prevX,prevY=g.prevY,p=points[points.length-1],point=p[1],getPoint=this.getPoint,getXYWidthHeight=this.getXYWidthHeight,isMoveAllPoints="all"===g.pointsToMove;if("line"===p[0]&&(("head"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("tail"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),points[points.length-1]=[p[0],point,p[2]]),"text"===p[0]&&(("head"===g.pointsToMove||isMoveAllPoints)&&(point[1]=getPoint(x,prevX,point[1]),point[2]=getPoint(y,prevY,point[2])),points[points.length-1]=[p[0],point,p[2]]),"arc"===p[0]&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1]),points[points.length-1]=[p[0],point,p[2]]),"rect"===p[0]){if(isMoveAllPoints&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),"stretch-first"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[0]=newPoints.x,point[1]=newPoints.y,point[2]=newPoints.width,point[3]=newPoints.height}if("stretch-second"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[1]=newPoints.y,point[2]=newPoints.width,point[3]=newPoints.height}if("stretch-third"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[0],y:point[1],width:point[2],height:point[3],pointsToMove:g.pointsToMove});point[0]=newPoints.x,point[2]=newPoints.width,point[3]=newPoints.height}"stretch-last"===g.pointsToMove&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),points[points.length-1]=[p[0],point,p[2]]}if("image"===p[0]){if(isMoveAllPoints&&(point[1]=getPoint(x,prevX,point[1]),point[2]=getPoint(y,prevY,point[2])),"stretch-first"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[1]=newPoints.x,point[2]=newPoints.y,point[3]=newPoints.width,point[4]=newPoints.height}if("stretch-second"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[2]=newPoints.y,point[3]=newPoints.width,point[4]=newPoints.height}if("stretch-third"===g.pointsToMove){var newPoints=getXYWidthHeight(x,y,prevX,prevY,{x:point[1],y:point[2],width:point[3],height:point[4],pointsToMove:g.pointsToMove});point[1]=newPoints.x,point[3]=newPoints.width,point[4]=newPoints.height}"stretch-last"===g.pointsToMove&&(point[3]=getPoint(x,prevX,point[3]),point[4]=getPoint(y,prevY,point[4])),points[points.length-1]=[p[0],point,p[2]]}"quadratic"===p[0]&&(("starting-points"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("control-points"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),("ending-points"===g.pointsToMove||isMoveAllPoints)&&(point[4]=getPoint(x,prevX,point[4]),point[5]=getPoint(y,prevY,point[5])),points[points.length-1]=[p[0],point,p[2]]),"bezier"===p[0]&&(("starting-points"===g.pointsToMove||isMoveAllPoints)&&(point[0]=getPoint(x,prevX,point[0]),point[1]=getPoint(y,prevY,point[1])),("1st-control-points"===g.pointsToMove||isMoveAllPoints)&&(point[2]=getPoint(x,prevX,point[2]),point[3]=getPoint(y,prevY,point[3])),("2nd-control-points"===g.pointsToMove||isMoveAllPoints)&&(point[4]=getPoint(x,prevX,point[4]),point[5]=getPoint(y,prevY,point[5])),("ending-points"===g.pointsToMove||isMoveAllPoints)&&(point[6]=getPoint(x,prevX,point[6]),point[7]=getPoint(y,prevY,point[7])),points[points.length-1]=[p[0],point,p[2]])}},pencilHandler={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,tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y},mouseup:function(e){this.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y)}},eraserHandler={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,tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y},mouseup:function(e){this.ismousedown=!1},mousemove:function(e){var x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop,t=this;t.ismousedown&&(tempContext.lineCap="round",drawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y)}},textHandler={text:"",writeText:function(keyPressed,isBackKeyPressed){return isBackKeyPressed?(textHandler.text=textHandler.text.substr(0,textHandler.text.length-1),void textHandler.fillText(textHandler.text)):(textHandler.text+=keyPressed,void textHandler.fillText(textHandler.text))},fillText:function(text){tempContext.clearRect(0,0,tempContext.canvas.width,tempContext.canvas.height),tempContext.fillStyle="black",tempContext.font=font,tempContext.fillText(text,textHandler.x,textHandler.y)},blinkCursorInterval:null,index:0,blinkCursor:function(){textHandler.index++,textHandler.index%2==0?textHandler.fillText(textHandler.text+"|"):textHandler.fillText(textHandler.text)},mousedown:function(e){textHandler.text.length&&(points[points.length]=["text",['"'+textHandler.text+'"',textHandler.x,textHandler.y],drawHelper.getOptions()]),textHandler.x=textHandler.y=0,textHandler.text="",textHandler.pageX=e.pageX,textHandler.pageY=e.pageY,textHandler.x=e.pageX-canvas.offsetLeft-5,textHandler.y=e.pageY-canvas.offsetTop+10,"undefined"!=typeof textHandler.blinkCursorInterval&&clearInterval(textHandler.blinkCursorInterval),textHandler.blinkCursor(),textHandler.blinkCursorInterval=setInterval(textHandler.blinkCursor,700)},mouseup:function(e){},mousemove:function(e){}},arcHandler={global:{ismousedown:!1,prevX:0,prevY:0,prevRadius:0,isCircleDrawn:!1,isCircledEnded:!0,isClockwise:!1,arcRangeContainer:null,arcRange:null},mousedown:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;g.prevX=x,g.prevY=y,g.ismousedown=!0},mouseup:function(e){var g=this.global,x=e.pageX-canvas.offsetLeft,y=e.pageY-canvas.offsetTop;if(g.ismousedown)if(!g.isCircleDrawn&&g.isCircledEnded){var prevX=g.prevX,prevY=g.prevY,radius=(x-prevX+(y-prevY))/3;g.prevRadius=radius,g.isCircleDrawn=!0,g.isCircleEnded=!1;var angle,c=2*Math.PI*radius/21,xx=prevX>x?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;i<points.length;i++){var point,p=points[i];"arc"===p[0]&&(point=p[1],points[i]=["arc",[toFixed(point[0]),toFixed(point[1]),toFixed(point[2]),toFixed(point[3]),point[4]],p[2]])}},init:function(){var markIsClockwise=find("is-clockwise"),g=this.global;g.arcRangeContainer=find("arc-range-container"),g.arcRange=find("arc-range"),addEvent(markIsClockwise,"change",function(e){if(g.isClockwise=markIsClockwise.checked,g.arcRange.value=arcHandler.toFixed(g.arcRange.value),g.arcRange.focus(),arcHandler.arcRangeHandler(e),points.length){var p=points[points.length-1],point=p[1];tempContext.clearRect(0,0,innerWidth,innerHeight),drawHelper.arc(tempContext,[point[0],point[1],point[2],point[3],point[4]])}});var arcRange=g.arcRange;addEvent(arcRange,"keydown",this.arcRangeHandler),addEvent(arcRange,"focus",this.arcRangeHandler)},arcRangeHandler:function(e){var g=arcHandler.global,arcRange=g.arcRange,key=e.keyCode,value=+arcRange.value;if((39==key||40==key)&&(arcRange.value=(2>value?value:1.98)+.02),(37==key||38==key)&&(arcRange.value=(value>0?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]))}},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()])}},FileSelector=function(){function selectFile(callback,multiple){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),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,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]))}},canvas=tempContext.canvas,isTouch="createTouch"in document;addEvent(canvas,isTouch?"touchstart":"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),drawHelper.redraw()}),addEvent(canvas,isTouch?"touchend":"mouseup",function(e){isTouch&&(e=e.pageX?e:e.touches.length?e.touches[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),drawHelper.redraw()}),addEvent(canvas,isTouch?"touchmove":"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)});var keyCode;addEvent(document,"keydown",onkeydown),addEvent(document,"keyup",onkeyup),addEvent(document,"keypress",onkeypress);var uid,lastPointIndex=0;window.addEventListener("message",function(event){if(event.data){if(uid||(uid=event.data.uid),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<points.length;i++)i!==index&&newPoints.push(points[i]);points=newPoints,drawHelper.redraw(),syncPoints(!0)}}else{if(event.data.syncPoints)return void syncPoints(!0);if(event.data.canvasDesignerSyncData){var d=event.data.canvasDesignerSyncData;if(0!==d.startIndex)for(var i=0;i<d.points.length;i++)points[i+d.startIndex]=d.points[i];else points=d.points;lastPointIndex=points.length,drawHelper.redraw(!0)}}}},!1)}();
\ No newline at end of file