From 09f8a17a2f723eca150c168521c6d6a142b2f8dd Mon Sep 17 00:00:00 2001 From: Muaz Khan Date: Mon, 16 May 2016 17:30:58 +0500 Subject: [PATCH] Added canvas-designer@1.0.7 Added "Arrow" tool --- Gruntfile.js | 1 + README.md | 47 +++---- bower.json | 2 +- canvas-designer-widget.js | 1 + dev/arrow-handler.js | 40 ++++++ dev/common.js | 110 +++++++++++++--- dev/decorator.js | 37 +++++- dev/drag-helper.js | 46 +++++++ dev/draw-helper.js | 30 +++++ dev/events-handler.js | 3 + index.html | 4 + multiple.html | 4 + package.json | 2 +- widget.html | 2 + widget.js | 269 +++++++++++++++++++++++++++++++++++--- widget.min.js | 6 +- 16 files changed, 539 insertions(+), 65 deletions(-) create mode 100644 dev/arrow-handler.js diff --git a/Gruntfile.js b/Gruntfile.js index 39d61a4..5aa99c8 100755 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -32,6 +32,7 @@ module.exports = function(grunt) { 'dev/text-handler.js', 'dev/arc-handler.js', 'dev/line-handler.js', + 'dev/arrow-handler.js', 'dev/rect-handler.js', 'dev/quadratic-handler.js', 'dev/bezier-handler.js', diff --git a/README.md b/README.md index 8a8032e..72a5f51 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,13 @@ The specialty of this drawing-tool is that, it generates Canvas2D code for you; Also, you can collaborate your drawing with up to 15 users; and everything is synced from all users. So, if you draw a line and your friend-A draws quadratic curve and friend-B draws rectangle then everything will be synced among all users! -# [Click to view Gif Presentation](https://cdn.webrtc-experiment.com/images/Canvas-Designer.gif) +### Youtube Videos + +* https://www.youtube.com/watch?v=oSSwMlBu8SY + +Gif images: + +* https://cdn.webrtc-experiment.com/images/Canvas-Designer.gif @@ -38,6 +44,7 @@ You can use [`designer.setSelected`](https://github.com/muaz-khan/Canvas-Designe 9. `quadratic` --- to draw quadratic curves 10. `text` --- to write texts on single or multiple lines, select font families/sizes and more 11. `image` --- add external images +12. `arrow` --- draw arrow lines The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`. @@ -45,8 +52,7 @@ The correct name for `dragMultiple` should be: `drag-move all-shapes`. **Upcoming** tools & features: -1. `arrow` --- to draw arrows -2. Resize all shapes at once (currently you can resize last selected shape only) +1. Resize all shapes at once (currently you can resize last selected shape only) # Features @@ -88,11 +94,11 @@ You can paste any text: English, Arabic, Chinese etc. `designer.appendTo(document.body);` -E.g. (Please don't forget replacing `1.0.6` with latest version) +E.g. (Please don't forget replacing `1.0.7` with latest version) ```html - + @@ -245,8 +251,18 @@ This method allows you choose between tools that **should be displayed** in the ```javascript designer.setTools({ + line: true, + arrow: true, pencil: true, - text: true + dragSingle: true, + dragMultiple: true, + eraser: true, + rectangle: true, + arc: true, + bezier: true, + quadratic: true, + text: true, + image: true }); ``` @@ -376,21 +392,6 @@ ctrl+c (copy last-selected shape) ctrl+v (paste last-copied shape) ``` -# Demos - -* http://muaz-khan.github.io/Everything/Canvas/ (A-to-zee all shapes, and animations on this page is created using canvas-designer) -* https://www.webrtc-experiment.com/Canvas-Designer/ (canvas-designer demo allows you draw shapes & get the code; additionally collaborate as well!) -* Try a simple canvas2d animation demo: http://muaz-khan.github.io/Everything/Canvas/Experiments/Simple-HTML5-Canvas-Experiment/ -* Try many other canvas2d demos: http://muaz-khan.github.io/Everything/Canvas/Experiments/ - -All above demos are built using canvas-designer! - -Original source-code was shared 2-years back, here: https://github.com/muaz-khan/Everything/tree/gh-pages/Canvas/Tools/Designer - -There is a similar "tinny" tool, however it isn't yet supporting collaboration: https://canvature.appspot.com/ - -And WebRTC-Experiments! https://github.com/muaz-khan/WebRTC-Experiment - # License [Canvas Designer](https://github.com/muaz-khan/Canvas-Designer) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com). diff --git a/bower.json b/bower.json index 32ad585..ad24185 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.0.6", + "version": "1.0.7", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js index 1a074bf..68b0fe3 100644 --- a/canvas-designer-widget.js +++ b/canvas-designer-widget.js @@ -14,6 +14,7 @@ function CanvasDesigner() { var tools = { line: true, + arrow: true, pencil: true, dragSingle: true, dragMultiple: true, diff --git a/dev/arrow-handler.js b/dev/arrow-handler.js new file mode 100644 index 0000000..26dd6e5 --- /dev/null +++ b/dev/arrow-handler.js @@ -0,0 +1,40 @@ +var arrowHandler = { + ismousedown: false, + prevX: 0, + prevY: 0, + arrowSize: 10, + mousedown: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + t.prevX = x; + t.prevY = y; + + t.ismousedown = true; + }, + mouseup: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + if (t.ismousedown) { + points[points.length] = ['arrow', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + + t.ismousedown = false; + } + }, + mousemove: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + if (t.ismousedown) { + tempContext.clearRect(0, 0, innerWidth, innerHeight); + + drawHelper.arrow(tempContext, [t.prevX, t.prevY, x, y]); + } + } +}; diff --git a/dev/common.js b/dev/common.js index 90d6016..ab5b4c2 100644 --- a/dev/common.js +++ b/dev/common.js @@ -1,5 +1,6 @@ var is = { isLine: false, + isArrow: false, isArc: false, isDragLastPath: false, isDragAllPaths: false, @@ -14,7 +15,7 @@ var is = { 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 = false; + cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isEraser = cache.isText = cache.isImage = false; cache['is' + shape] = true; } }; @@ -96,7 +97,7 @@ var common = { } output = output.substr(0, output.length - 2); - textarea.value = 'var points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + this.forLoop; + textarea.value = 'var points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + drawArrow.toString() + '\n\n' + this.forLoop; this.prevProps = null; }, @@ -124,6 +125,10 @@ var common = { tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');']; } + if (p[0] === 'arrow') { + tempArray[i] = ['drawArrow(' + point[0] + ', ' + point[1] + ', ' + point[2] + ', ' + point[3] + ', \'' + p[2].join('\',\'') + '\');']; + } + if (p[0] === 'arc') { tempArray[i] = ['context.beginPath(); \n' + 'context.arc(' + toFixed(point[0]) + ',' + toFixed(point[1]) + ',' + toFixed(point[2]) + ',' + toFixed(point[3]) + ', 0,' + point[4] + '); \n' + this.strokeOrFill(p[2])]; } @@ -141,7 +146,7 @@ var common = { } } - textarea.value = tempArray.join('\n\n') + this.strokeFillText; + textarea.value = tempArray.join('\n\n') + this.strokeFillText + '\n\n' + drawArrow.toString(); this.prevProps = null; }, @@ -193,6 +198,15 @@ var common = { ], p[2]); } + if (p[0] === 'arrow') { + 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]); + } + if (p[0] === 'text') { output += this.shortenHelper(p[0], [ point[0], @@ -246,7 +260,7 @@ var common = { } 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; + textarea.value = 'var x = ' + x + ', y = ' + y + ', points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + drawArrow.toString() + '\n\n' + this.forLoop; this.prevProps = null; }, @@ -296,6 +310,10 @@ var common = { + this.strokeOrFill(p[2]); } + if (p[0] === 'arrow') { + output += 'drawArrow(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', \'' + p[2].join('\',\'') + '\');\n'; + } + if (p[0] === 'text') { output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');'; } @@ -318,32 +336,36 @@ var common = { if (i !== length - 1) output += '\n\n'; } - textarea.value = output + this.strokeFillText; + textarea.value = output + this.strokeFillText + '\n\n' + drawArrow.toString(); this.prevProps = null; }, forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n' // globals - + ' if(p[2]) { \n' + ' context.lineWidth = p[2][0];\n' + ' context.strokeStyle = p[2][1];\n' + ' context.fillStyle = p[2][2];\n' + + ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.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' + + '\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n' // line - + ' if(p[0] === "line") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' + + // arrow + + + ' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n' // pencil - + ' if(p[0] === "pencil") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // text - + ' if(p[0] === "text") { \n' + ' context.fillText(point[0], point[1], point[2]);\n' + ' }\n\n' + + ' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n' // eraser - + ' if(p[0] === "eraser") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // arc @@ -351,17 +373,17 @@ var common = { // rect - + ' 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' + + ' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n' + ' }\n\n' // quadratic - + ' 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] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n' // bezier - + ' 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' + + ' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n' // end-fill @@ -369,9 +391,9 @@ var common = { + '}', - 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' + strokeFillText: '\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n' + ' if(lineWidth) { \n' + '\tcontext.globalAlpha = globalAlpha;\n' + '\tcontext.globalCompositeOperation = globalCompositeOperation;\n' + '\tcontext.lineCap = lineCap;\n' + '\tcontext.lineJoin = lineJoin;\n' - + ' context.lineWidth = lineWidth;\n' + ' context.strokeStyle = strokeStyle;\n' + ' context.fillStyle = fillStyle;\n' + ' context.font = font;\n' + ' } \n\n' + + '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n' + ' context.stroke();\n' + ' context.fill();\n' @@ -398,6 +420,62 @@ var common = { } }; +function drawArrow(mx, my, lx, ly, options) { + function getOptions(opt) { + opt = opt || {}; + + return [ + opt.lineWidth || 2, + opt.strokeStyle || '#6c96c8', + opt.fillStyle || 'transparent', + opt.globalAlpha || 1, + opt.globalCompositeOperation || 'source-over', + opt.lineCap || 'round', + opt.lineJoin || 'round', + opt.font || '15px "Arial"' + ]; + } + + function handleOptions(opt, isNoFillStroke) { + opt = opt || 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]; + + context.font = opt[7]; + + if (!isNoFillStroke) { + context.stroke(); + context.fill(); + } + } + + var arrowSize = 10; + var angle = Math.atan2(ly - my, lx - mx); + + context.beginPath(); + context.moveTo(mx, my); + context.lineTo(lx, ly); + + handleOptions(); + + context.beginPath(); + context.moveTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + context.lineTo(lx - arrowSize * Math.cos(angle + Math.PI / 7), ly - arrowSize * Math.sin(angle + Math.PI / 7)); + context.lineTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + + handleOptions(); +} + function endLastPath() { var cache = is; diff --git a/dev/decorator.js b/dev/decorator.js index c20ab5d..8888534 100644 --- a/dev/decorator.js +++ b/dev/decorator.js @@ -1,5 +1,6 @@ var tools = { line: true, + arrow: true, pencil: true, dragSingle: true, dragMultiple: true, @@ -234,8 +235,8 @@ window.addEventListener('load', function() { function decorateLine() { var context = getContext('line'); - context.moveTo(0, 0); - context.lineTo(40, 40); + context.moveTo(10, 15); + context.lineTo(30, 35); context.stroke(); context.fillStyle = 'Gray'; @@ -249,6 +250,38 @@ window.addEventListener('load', function() { decorateLine(); } else document.getElementById('line').style.display = 'none'; + function decorateArrow() { + var context = getContext('arrow'); + + var x = 10; + var y = 35; + + context.beginPath(); + context.moveTo(x, y); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.beginPath(); + context.moveTo(x + 15, y - 5); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.beginPath(); + context.moveTo(x + 5, y - 15); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.fillStyle = 'Gray'; + context.font = '9px Verdana'; + context.fillText('Arrow', 5, 12); + + bindEvent(context, 'Arrow'); + } + + if (tools.arrow === true) { + decorateArrow(); + } else document.getElementById('arrow').style.display = 'none'; + function decoratePencil() { var context = getContext('pencil-icon'); diff --git a/dev/drag-helper.js b/dev/drag-helper.js index f559cfe..7b01ba6 100644 --- a/dev/drag-helper.js +++ b/dev/drag-helper.js @@ -39,6 +39,17 @@ var dragHelper = { } } + if (p[0] === 'arrow') { + + if (dHelper.isPointInPath(x, y, point[0], point[1])) { + g.pointsToMove = 'head'; + } + + if (dHelper.isPointInPath(x, y, point[2], point[3])) { + g.pointsToMove = 'tail'; + } + } + if (p[0] === 'rect') { if (dHelper.isPointInPath(x, y, point[0], point[1])) { @@ -181,6 +192,16 @@ var dragHelper = { tempContext.fill(); } + if (p[0] === 'arrow') { + + tempContext.beginPath(); + + tempContext.arc(point[0], point[1], 10, Math.PI * 2, 0, !1); + tempContext.arc(point[2], point[3], 10, Math.PI * 2, 0, !1); + + tempContext.fill(); + } + if (p[0] === 'text') { tempContext.font = "15px Verdana"; tempContext.fillText(point[0], point[1], point[2]); @@ -336,7 +357,17 @@ var dragHelper = { getPoint(y, prevY, point[3]) ], p[2] ]; + } + if (p[0] === 'arrow') { + 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] + ]; } if (p[0] === 'text') { @@ -439,6 +470,21 @@ var dragHelper = { points[points.length - 1] = [p[0], point, p[2]]; } + if (p[0] === 'arrow') { + + if (g.pointsToMove === 'head' || isMoveAllPoints) { + point[0] = getPoint(x, prevX, point[0]); + point[1] = getPoint(y, prevY, point[1]); + } + + if (g.pointsToMove === 'tail' || isMoveAllPoints) { + point[2] = getPoint(x, prevX, point[2]); + point[3] = getPoint(y, prevY, point[3]); + } + + points[points.length - 1] = [p[0], point, p[2]]; + } + if (p[0] === 'text') { if (g.pointsToMove === 'head' || isMoveAllPoints) { diff --git a/dev/draw-helper.js b/dev/draw-helper.js index 070d875..4a25c61 100644 --- a/dev/draw-helper.js +++ b/dev/draw-helper.js @@ -53,6 +53,36 @@ var drawHelper = { this.handleOptions(context, options); }, + arrow: function(context, point, options) { + var mx = point[0]; + var my = point[1]; + + var lx = point[2]; + var ly = point[3]; + + var arrowSize = arrowHandler.arrowSize; + + if (arrowSize == 10) { + arrowSize = (options ? options[0] : lineWidth) * 5; + } + + var angle = Math.atan2(ly - my, lx - mx); + + context.beginPath(); + context.moveTo(mx, my); + context.lineTo(lx, ly); + + this.handleOptions(context, options); + + context.beginPath(); + context.moveTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + context.lineTo(lx - arrowSize * Math.cos(angle + Math.PI / 7), ly - arrowSize * Math.sin(angle + Math.PI / 7)); + context.lineTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + + this.handleOptions(context, options); + }, text: function(context, point, options) { this.handleOptions(context, options); context.fillStyle = textHandler.getFillColor(options[2]); diff --git a/dev/events-handler.js b/dev/events-handler.js index 7a1ac84..427c873 100644 --- a/dev/events-handler.js +++ b/dev/events-handler.js @@ -19,6 +19,7 @@ addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) { else if (cache.isEraser) eraserHandler.mousedown(e); else if (cache.isText) textHandler.mousedown(e); else if (cache.isImage) imageHandler.mousedown(e); + else if (cache.isArrow) arrowHandler.mousedown(e); drawHelper.redraw(); }); @@ -41,6 +42,7 @@ addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) { else if (cache.isEraser) eraserHandler.mouseup(e); else if (cache.isText) textHandler.mouseup(e); else if (cache.isImage) imageHandler.mouseup(e); + else if (cache.isArrow) arrowHandler.mouseup(e); drawHelper.redraw(); }); @@ -63,6 +65,7 @@ addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) { else if (cache.isEraser) eraserHandler.mousemove(e); else if (cache.isText) textHandler.mousemove(e); else if (cache.isImage) imageHandler.mousemove(e); + else if (cache.isArrow) arrowHandler.mousemove(e); }); var keyCode; diff --git a/index.html b/index.html index 59edc6e..f346f3d 100644 --- a/index.html +++ b/index.html @@ -172,6 +172,9 @@

Select Tools


+ + +

@@ -391,6 +394,7 @@

Try multiple designers!

image: true, eraser: true, line: true, + arrow: true, dragSingle: true, dragMultiple: true, arc: true, diff --git a/multiple.html b/multiple.html index 0c121c3..c7ed3f0 100644 --- a/multiple.html +++ b/multiple.html @@ -174,6 +174,9 @@

Select Tools


+ + +

@@ -415,6 +418,7 @@

Try single designer!

image: true, eraser: true, line: true, + arrow: true, dragSingle: true, dragMultiple: true, arc: true, diff --git a/package.json b/package.json index 5207e32..64fb6ed 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.0.6", + "version": "1.0.7", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/widget.html b/widget.html index a188466..d4eff17 100644 --- a/widget.html +++ b/widget.html @@ -433,6 +433,8 @@ + + diff --git a/widget.js b/widget.js index e653d77..fd89ab3 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-16 3:58:53 AM UTC +// Last time updated: 2016-05-16 12:24:31 PM UTC // _______________ // Canvas-Designer @@ -11,6 +11,7 @@ var is = { isLine: false, + isArrow: false, isArc: false, isDragLastPath: false, isDragAllPaths: false, @@ -25,7 +26,7 @@ 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 = false; + cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isEraser = cache.isText = cache.isImage = false; cache['is' + shape] = true; } }; @@ -107,7 +108,7 @@ } output = output.substr(0, output.length - 2); - textarea.value = 'var points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + this.forLoop; + textarea.value = 'var points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + drawArrow.toString() + '\n\n' + this.forLoop; this.prevProps = null; }, @@ -135,6 +136,10 @@ tempArray[i] = [this.strokeOrFill(p[2]) + '\ncontext.fillText(' + point[0] + ', ' + point[1] + ', ' + point[2] + ');']; } + if (p[0] === 'arrow') { + tempArray[i] = ['drawArrow(' + point[0] + ', ' + point[1] + ', ' + point[2] + ', ' + point[3] + ', \'' + p[2].join('\',\'') + '\');']; + } + if (p[0] === 'arc') { tempArray[i] = ['context.beginPath(); \n' + 'context.arc(' + toFixed(point[0]) + ',' + toFixed(point[1]) + ',' + toFixed(point[2]) + ',' + toFixed(point[3]) + ', 0,' + point[4] + '); \n' + this.strokeOrFill(p[2])]; } @@ -152,7 +157,7 @@ } } - textarea.value = tempArray.join('\n\n') + this.strokeFillText; + textarea.value = tempArray.join('\n\n') + this.strokeFillText + '\n\n' + drawArrow.toString(); this.prevProps = null; }, @@ -204,6 +209,15 @@ ], p[2]); } + if (p[0] === 'arrow') { + 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]); + } + if (p[0] === 'text') { output += this.shortenHelper(p[0], [ point[0], @@ -257,7 +271,7 @@ } 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; + textarea.value = 'var x = ' + x + ', y = ' + y + ', points = [' + output + '], length = points.length, point, p, i = 0;\n\n' + drawArrow.toString() + '\n\n' + this.forLoop; this.prevProps = null; }, @@ -307,6 +321,10 @@ + this.strokeOrFill(p[2]); } + if (p[0] === 'arrow') { + output += 'drawArrow(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', \'' + p[2].join('\',\'') + '\');\n'; + } + if (p[0] === 'text') { output += this.strokeOrFill(p[2]) + '\n' + 'context.fillText(' + point[0] + ', ' + getPoint(point[1], x, 'x') + ', ' + getPoint(point[2], y, 'y') + ');'; } @@ -329,32 +347,36 @@ if (i !== length - 1) output += '\n\n'; } - textarea.value = output + this.strokeFillText; + textarea.value = output + this.strokeFillText + '\n\n' + drawArrow.toString(); this.prevProps = null; }, forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n' // globals - + ' if(p[2]) { \n' + ' context.lineWidth = p[2][0];\n' + ' context.strokeStyle = p[2][1];\n' + ' context.fillStyle = p[2][2];\n' + + ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.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' + + '\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n' // line - + ' if(p[0] === "line") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' + + // arrow + + + ' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n' // pencil - + ' if(p[0] === "pencil") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // text - + ' if(p[0] === "text") { \n' + ' context.fillText(point[0], point[1], point[2]);\n' + ' }\n\n' + + ' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n' // eraser - + ' if(p[0] === "eraser") { \n' + ' context.moveTo(point[0], point[1]);\n' + ' context.lineTo(point[2], point[3]);\n' + ' }\n\n' + + ' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // arc @@ -362,17 +384,17 @@ // rect - + ' 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' + + ' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n' + ' }\n\n' // quadratic - + ' 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] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n' // bezier - + ' 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' + + ' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n' // end-fill @@ -380,9 +402,9 @@ + '}', - 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' + strokeFillText: '\n\nfunction strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font) { \n' + ' if(lineWidth) { \n' + '\tcontext.globalAlpha = globalAlpha;\n' + '\tcontext.globalCompositeOperation = globalCompositeOperation;\n' + '\tcontext.lineCap = lineCap;\n' + '\tcontext.lineJoin = lineJoin;\n' - + ' context.lineWidth = lineWidth;\n' + ' context.strokeStyle = strokeStyle;\n' + ' context.fillStyle = fillStyle;\n' + ' context.font = font;\n' + ' } \n\n' + + '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.font = font;\n' + ' } \n\n' + ' context.stroke();\n' + ' context.fill();\n' @@ -409,6 +431,62 @@ } }; + function drawArrow(mx, my, lx, ly, options) { + function getOptions(opt) { + opt = opt || {}; + + return [ + opt.lineWidth || 2, + opt.strokeStyle || '#6c96c8', + opt.fillStyle || 'transparent', + opt.globalAlpha || 1, + opt.globalCompositeOperation || 'source-over', + opt.lineCap || 'round', + opt.lineJoin || 'round', + opt.font || '15px "Arial"' + ]; + } + + function handleOptions(opt, isNoFillStroke) { + opt = opt || 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]; + + context.font = opt[7]; + + if (!isNoFillStroke) { + context.stroke(); + context.fill(); + } + } + + var arrowSize = 10; + var angle = Math.atan2(ly - my, lx - mx); + + context.beginPath(); + context.moveTo(mx, my); + context.lineTo(lx, ly); + + handleOptions(); + + context.beginPath(); + context.moveTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + context.lineTo(lx - arrowSize * Math.cos(angle + Math.PI / 7), ly - arrowSize * Math.sin(angle + Math.PI / 7)); + context.lineTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + + handleOptions(); + } + function endLastPath() { var cache = is; @@ -468,6 +546,7 @@ var tools = { line: true, + arrow: true, pencil: true, dragSingle: true, dragMultiple: true, @@ -702,8 +781,8 @@ function decorateLine() { var context = getContext('line'); - context.moveTo(0, 0); - context.lineTo(40, 40); + context.moveTo(10, 15); + context.lineTo(30, 35); context.stroke(); context.fillStyle = 'Gray'; @@ -717,6 +796,38 @@ decorateLine(); } else document.getElementById('line').style.display = 'none'; + function decorateArrow() { + var context = getContext('arrow'); + + var x = 10; + var y = 35; + + context.beginPath(); + context.moveTo(x, y); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.beginPath(); + context.moveTo(x + 15, y - 5); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.beginPath(); + context.moveTo(x + 5, y - 15); + context.lineTo(x + 20, y - 20); + context.stroke(); + + context.fillStyle = 'Gray'; + context.font = '9px Verdana'; + context.fillText('Arrow', 5, 12); + + bindEvent(context, 'Arrow'); + } + + if (tools.arrow === true) { + decorateArrow(); + } else document.getElementById('arrow').style.display = 'none'; + function decoratePencil() { var context = getContext('pencil-icon'); @@ -1112,6 +1223,36 @@ this.handleOptions(context, options); }, + arrow: function(context, point, options) { + var mx = point[0]; + var my = point[1]; + + var lx = point[2]; + var ly = point[3]; + + var arrowSize = arrowHandler.arrowSize; + + if (arrowSize == 10) { + arrowSize = (options ? options[0] : lineWidth) * 5; + } + + var angle = Math.atan2(ly - my, lx - mx); + + context.beginPath(); + context.moveTo(mx, my); + context.lineTo(lx, ly); + + this.handleOptions(context, options); + + context.beginPath(); + context.moveTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + context.lineTo(lx - arrowSize * Math.cos(angle + Math.PI / 7), ly - arrowSize * Math.sin(angle + Math.PI / 7)); + context.lineTo(lx, ly); + context.lineTo(lx - arrowSize * Math.cos(angle - Math.PI / 7), ly - arrowSize * Math.sin(angle - Math.PI / 7)); + + this.handleOptions(context, options); + }, text: function(context, point, options) { this.handleOptions(context, options); context.fillStyle = textHandler.getFillColor(options[2]); @@ -1207,6 +1348,17 @@ } } + if (p[0] === 'arrow') { + + if (dHelper.isPointInPath(x, y, point[0], point[1])) { + g.pointsToMove = 'head'; + } + + if (dHelper.isPointInPath(x, y, point[2], point[3])) { + g.pointsToMove = 'tail'; + } + } + if (p[0] === 'rect') { if (dHelper.isPointInPath(x, y, point[0], point[1])) { @@ -1349,6 +1501,16 @@ tempContext.fill(); } + if (p[0] === 'arrow') { + + tempContext.beginPath(); + + tempContext.arc(point[0], point[1], 10, Math.PI * 2, 0, !1); + tempContext.arc(point[2], point[3], 10, Math.PI * 2, 0, !1); + + tempContext.fill(); + } + if (p[0] === 'text') { tempContext.font = "15px Verdana"; tempContext.fillText(point[0], point[1], point[2]); @@ -1504,7 +1666,17 @@ getPoint(y, prevY, point[3]) ], p[2] ]; + } + if (p[0] === 'arrow') { + 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] + ]; } if (p[0] === 'text') { @@ -1607,6 +1779,21 @@ points[points.length - 1] = [p[0], point, p[2]]; } + if (p[0] === 'arrow') { + + if (g.pointsToMove === 'head' || isMoveAllPoints) { + point[0] = getPoint(x, prevX, point[0]); + point[1] = getPoint(y, prevY, point[1]); + } + + if (g.pointsToMove === 'tail' || isMoveAllPoints) { + point[2] = getPoint(x, prevX, point[2]); + point[3] = getPoint(y, prevY, point[3]); + } + + points[points.length - 1] = [p[0], point, p[2]]; + } + if (p[0] === 'text') { if (g.pointsToMove === 'head' || isMoveAllPoints) { @@ -2278,6 +2465,47 @@ } }; + var arrowHandler = { + ismousedown: false, + prevX: 0, + prevY: 0, + arrowSize: 10, + mousedown: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + t.prevX = x; + t.prevY = y; + + t.ismousedown = true; + }, + mouseup: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + if (t.ismousedown) { + points[points.length] = ['arrow', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + + t.ismousedown = false; + } + }, + mousemove: function(e) { + var x = e.pageX - canvas.offsetLeft, + y = e.pageY - canvas.offsetTop; + + var t = this; + + if (t.ismousedown) { + tempContext.clearRect(0, 0, innerWidth, innerHeight); + + drawHelper.arrow(tempContext, [t.prevX, t.prevY, x, y]); + } + } + }; + var rectHandler = { ismousedown: false, prevX: 0, @@ -2605,6 +2833,7 @@ else if (cache.isEraser) eraserHandler.mousedown(e); else if (cache.isText) textHandler.mousedown(e); else if (cache.isImage) imageHandler.mousedown(e); + else if (cache.isArrow) arrowHandler.mousedown(e); drawHelper.redraw(); }); @@ -2627,6 +2856,7 @@ else if (cache.isEraser) eraserHandler.mouseup(e); else if (cache.isText) textHandler.mouseup(e); else if (cache.isImage) imageHandler.mouseup(e); + else if (cache.isArrow) arrowHandler.mouseup(e); drawHelper.redraw(); }); @@ -2649,6 +2879,7 @@ else if (cache.isEraser) eraserHandler.mousemove(e); else if (cache.isText) textHandler.mousemove(e); else if (cache.isImage) imageHandler.mousemove(e); + else if (cache.isArrow) arrowHandler.mousemove(e); }); var keyCode; diff --git a/widget.min.js b/widget.min.js index 153eace..713c393 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-16 3:58:53 AM UTC +// Last time updated: 2016-05-16 12:24:32 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(),textHandler.text&&textHandler.text.length&&(textHandler.appendPoints(),textHandler.onShapeUnSelected()),textHandler.showOrHideTextTools("hide")}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,13===keyCode&&is.isText?void textHandler.onReturnKeyPressed():8==keyCode||46==keyCode?void(isBackKey(e,keyCode)&&textHandler.writeText(textHandler.lastKeyPress,!0)):isControlKeyPressed&&84===keyCode&&is.isText?void textHandler.showTextTools():(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&©(),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 onTextFromClipboard(e){if(is.isText){var pastedText=void 0;window.clipboardData&&window.clipboardData.getData?pastedText=window.clipboardData.getData("Text"):e.clipboardData&&e.clipboardData.getData&&(pastedText=e.clipboardData.getData("text/plain")),pastedText&&pastedText.length&&textHandler.writeText(pastedText)}}function syncPoints(isSyncAll){if(isSyncAll&&(lastPointIndex=0),lastPointIndex!=points.length){for(var pointsToShare=[],i=lastPointIndex;icompareWith?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;ii;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+=this.strokeOrFill(p[2])+"\ncontext.fillText("+point[0]+", "+getPoint(point[1],x,"x")+", "+getPoint(point[2],y,"y")+");"),"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;ii;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(is.isDragAllPaths||is.isDragLastPath?!0:!1)},getOptions:function(opt){return opt=opt||{},[opt.lineWidth||lineWidth,opt.strokeStyle||strokeStyle,opt.fillStyle||fillStyle,opt.globalAlpha||globalAlpha,opt.globalCompositeOperation||globalCompositeOperation,opt.lineCap||lineCap,opt.lineJoin||lineJoin,opt.font||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],context.font=opt[7],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){this.handleOptions(context,options),context.fillStyle=textHandler.getFillColor(options[2]),context.fillText(point[0].substr(1,point[0].length-2),point[1],point[2])},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:"",selectedFontFamily:"Arial",selectedFontSize:"15",onShapeSelected:function(){tempContext.canvas.style.cursor="text",this.x=this.y=this.pageX=this.pageY=0,this.text=""},onShapeUnSelected:function(){this.text="",this.showOrHideTextTools("hide"),tempContext.canvas.style.cursor="default","undefined"!=typeof this.blinkCursorInterval&&clearInterval(this.blinkCursorInterval)},getFillColor:function(color){return color=(color||fillStyle).toLowerCase(),"rgba(255, 255, 255, 0)"==color||"transparent"==color||"white"===color?"black":color},writeText:function(keyPressed,isBackKeyPressed){if(is.isText){if(isBackKeyPressed)return textHandler.text=textHandler.text.substr(0,textHandler.text.length-1),void textHandler.fillText(textHandler.text);textHandler.text+=keyPressed,textHandler.fillText(textHandler.text)}},fillText:function(text){if(is.isText){tempContext.clearRect(0,0,tempContext.canvas.width,tempContext.canvas.height);var options=textHandler.getOptions();drawHelper.handleOptions(tempContext,options),tempContext.fillStyle=textHandler.getFillColor(options[2]),tempContext.font=textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',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)},getOptions:function(){var options={font:textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',fillStyle:textHandler.getFillColor(),strokeStyle:"#6c96c8",globalCompositeOperation:"source-over",globalAlpha:1,lineJoin:"round",lineCap:"round",lineWidth:2};return font=options.font,options},appendPoints:function(){var options=textHandler.getOptions();points[points.length]=["text",['"'+textHandler.text+'"',textHandler.x,textHandler.y],drawHelper.getOptions(options)]},mousedown:function(e){is.isText&&(textHandler.text.length&&this.appendPoints(),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),this.showTextTools())},mouseup:function(e){},mousemove:function(e){},showOrHideTextTools:function(show){this.fontFamilyBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.left=this.x+"px",this.fontFamilyBox.style.left=this.fontSizeBox.clientWidth+this.x+"px",this.fontSizeBox.style.top=this.y+"px",this.fontFamilyBox.style.top=this.y+"px"},showTextTools:function(){this.fontFamilyBox&&this.fontSizeBox&&(this.unselectAllFontFamilies(),this.unselectAllFontSizes(),this.showOrHideTextTools("show"),this.eachFontFamily(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontFamily=this.innerHTML,this.className="font-family-selected"},child.style.fontFamily=child.innerHTML}),this.eachFontSize(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontSize=this.innerHTML,this.className="font-family-selected"}}))},eachFontFamily:function(callback){for(var childs=this.fontFamilyBox.querySelectorAll("li"),i=0;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;ivalue?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),addEvent(document,"paste",onTextFromClipboard);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;icompareWith?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"+drawArrow.toString()+"\n\n"+this.forLoop,this.prevProps=null},absoluteNOTShortened:function(toFixed){var i,point,p,tempArray=[];for(i=0;ii;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])),"arrow"===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"+drawArrow.toString()+"\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])),"arrow"===p[0]&&(output+="drawArrow("+getPoint(point[0],x,"x")+", "+getPoint(point[1],y,"y")+", "+getPoint(point[2],x,"x")+", "+getPoint(point[3],y,"y")+", '"+p[2].join("','")+"');\n"),"text"===p[0]&&(output+=this.strokeOrFill(p[2])+"\ncontext.fillText("+point[0]+", "+getPoint(point[1],x,"x")+", "+getPoint(point[2],y,"y")+");"),"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+"\n\n"+drawArrow.toString(),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] === "arrow") { \n drawArrow(point[0], point[1], point[2], point[3], p[2]);\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,arrow:!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;ii;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(10,15),context.lineTo(30,35),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Line",16,12),bindEvent(context,"Line")}function decorateArrow(){var context=getContext("arrow"),x=10,y=35;context.beginPath(),context.moveTo(x,y),context.lineTo(x+20,y-20),context.stroke(),context.beginPath(),context.moveTo(x+15,y-5),context.lineTo(x+20,y-20),context.stroke(),context.beginPath(),context.moveTo(x+5,y-15),context.lineTo(x+20,y-20),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Arrow",5,12),bindEvent(context,"Arrow")}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.arrow===!0?decorateArrow():document.getElementById("arrow").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(is.isDragAllPaths||is.isDragLastPath?!0:!1)},getOptions:function(opt){return opt=opt||{},[opt.lineWidth||lineWidth,opt.strokeStyle||strokeStyle,opt.fillStyle||fillStyle,opt.globalAlpha||globalAlpha,opt.globalCompositeOperation||globalCompositeOperation,opt.lineCap||lineCap,opt.lineJoin||lineJoin,opt.font||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],context.font=opt[7],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)},arrow:function(context,point,options){var mx=point[0],my=point[1],lx=point[2],ly=point[3],arrowSize=arrowHandler.arrowSize;10==arrowSize&&(arrowSize=5*(options?options[0]:lineWidth));var angle=Math.atan2(ly-my,lx-mx);context.beginPath(),context.moveTo(mx,my),context.lineTo(lx,ly),this.handleOptions(context,options),context.beginPath(),context.moveTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),context.lineTo(lx-arrowSize*Math.cos(angle+Math.PI/7),ly-arrowSize*Math.sin(angle+Math.PI/7)),context.lineTo(lx,ly),context.lineTo(lx-arrowSize*Math.cos(angle-Math.PI/7),ly-arrowSize*Math.sin(angle-Math.PI/7)),this.handleOptions(context,options)},text:function(context,point,options){this.handleOptions(context,options),context.fillStyle=textHandler.getFillColor(options[2]),context.fillText(point[0].substr(1,point[0].length-2),point[1],point[2])},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")),"arrow"===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()),"arrow"===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]]),"arrow"===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]]),"arrow"===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:"",selectedFontFamily:"Arial",selectedFontSize:"15",onShapeSelected:function(){tempContext.canvas.style.cursor="text",this.x=this.y=this.pageX=this.pageY=0,this.text=""},onShapeUnSelected:function(){this.text="",this.showOrHideTextTools("hide"),tempContext.canvas.style.cursor="default","undefined"!=typeof this.blinkCursorInterval&&clearInterval(this.blinkCursorInterval)},getFillColor:function(color){return color=(color||fillStyle).toLowerCase(),"rgba(255, 255, 255, 0)"==color||"transparent"==color||"white"===color?"black":color},writeText:function(keyPressed,isBackKeyPressed){if(is.isText){if(isBackKeyPressed)return textHandler.text=textHandler.text.substr(0,textHandler.text.length-1),void textHandler.fillText(textHandler.text);textHandler.text+=keyPressed,textHandler.fillText(textHandler.text)}},fillText:function(text){if(is.isText){tempContext.clearRect(0,0,tempContext.canvas.width,tempContext.canvas.height);var options=textHandler.getOptions();drawHelper.handleOptions(tempContext,options),tempContext.fillStyle=textHandler.getFillColor(options[2]),tempContext.font=textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',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)},getOptions:function(){var options={font:textHandler.selectedFontSize+'px "'+textHandler.selectedFontFamily+'"',fillStyle:textHandler.getFillColor(),strokeStyle:"#6c96c8",globalCompositeOperation:"source-over",globalAlpha:1,lineJoin:"round",lineCap:"round",lineWidth:2};return font=options.font,options},appendPoints:function(){var options=textHandler.getOptions();points[points.length]=["text",['"'+textHandler.text+'"',textHandler.x,textHandler.y],drawHelper.getOptions(options)]},mousedown:function(e){is.isText&&(textHandler.text.length&&this.appendPoints(),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),this.showTextTools())},mouseup:function(e){},mousemove:function(e){},showOrHideTextTools:function(show){this.fontFamilyBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.display="show"==show?"block":"none",this.fontSizeBox.style.left=this.x+"px",this.fontFamilyBox.style.left=this.fontSizeBox.clientWidth+this.x+"px",this.fontSizeBox.style.top=this.y+"px",this.fontFamilyBox.style.top=this.y+"px"},showTextTools:function(){this.fontFamilyBox&&this.fontSizeBox&&(this.unselectAllFontFamilies(),this.unselectAllFontSizes(),this.showOrHideTextTools("show"),this.eachFontFamily(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontFamily=this.innerHTML,this.className="font-family-selected"},child.style.fontFamily=child.innerHTML}),this.eachFontSize(function(child){child.onclick=function(e){e.preventDefault(),textHandler.showOrHideTextTools("hide"),textHandler.selectedFontSize=this.innerHTML,this.className="font-family-selected"}}))},eachFontFamily:function(callback){for(var childs=this.fontFamilyBox.querySelectorAll("li"),i=0;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;ivalue?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]))}},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()])}},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):cache.isArrow&&arrowHandler.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):cache.isArrow&&arrowHandler.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):cache.isArrow&&arrowHandler.mousemove(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.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