From 61221ee763162187f1b166d4489d6869205ae8b2 Mon Sep 17 00:00:00 2001 From: Muaz Khan Date: Sat, 2 Jul 2016 00:39:33 +0500 Subject: [PATCH] Added canvas-designer@1.0.9 --- README.md | 19 +- bower.json | 2 +- canvas-designer-widget.js | 4 +- dev/common.js | 75 ++- dev/decorator.js | 54 +- dev/marker-handler.js | 52 +- index.html | 3 +- multiple.html | 3 +- package.json | 2 +- widget.html | 1331 +++++++++++++++++++------------------ widget.js | 183 +++-- widget.min.js | 6 +- 12 files changed, 901 insertions(+), 833 deletions(-) diff --git a/README.md b/README.md index f7d1b0b..878eaf1 100644 --- a/README.md +++ b/README.md @@ -463,6 +463,10 @@ var yourNewToolIconHandler = { You can check other `*-handler.js` from [`dev`](https://github.com/muaz-khan/Canvas-Designer/tree/master/dev) directory to get the idea how exactly it works. +Now open [`Gruntfile.js#L43`](https://github.com/muaz-khan/Canvas-Designer/blob/master/Gruntfile.js#L43) and add link to your new file: `dev/events-handler.js`. + +Now compile all your changes using `grunt`. + ## Fifth Step Open [`events-handler.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/events-handler.js) and make sure that your above `yourNewToolIconHandler` object is called for mouse up/down/move events. @@ -525,7 +529,18 @@ Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/ This allows end-users to copy your shape's code and use anywhere on their own web-pages. -For more information: +Open [`common.js`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js) file; there is a function [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67) inside the "common" object – which is aimed to output into textarea element. + +You don't have to change [`updateTextArea`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L67). For simplicity purpose, code is separated in different functions/properties that you've to edit: + +1. [`forLoop`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L363) +2. [`absoluteNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L105) +3. [`relativeShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L158) +4. [`relativeNOTShortened`](https://github.com/muaz-khan/Canvas-Designer/blob/master/dev/common.js#L281) + +Search for `p[0] === 'line'` and add similar code-blocks for your shape (new-tool-icon) as well. + +### For more information * https://www.webrtc-experiment.com/Canvas-Designer/Help/#contribute @@ -540,6 +555,8 @@ ctrl+c (copy last-selected shape) ctrl+v (paste last-copied shape) ``` +`ctrl+mousedown` allows you quickly copy/paste all shapes. (i.e. ctrl button + mouse down) + # Contributors 1. [Muaz Khan](https://github.com/muaz-khan) diff --git a/bower.json b/bower.json index c37bc8f..7131ba3 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.0.8", + "version": "1.0.9", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/canvas-designer-widget.js b/canvas-designer-widget.js index 88baa30..b190799 100644 --- a/canvas-designer-widget.js +++ b/canvas-designer-widget.js @@ -75,7 +75,7 @@ function CanvasDesigner() { designer.iframe.style.width = '100%'; designer.iframe.style.height = '100%'; designer.iframe.style.border = 0; - + window.removeEventListener('message', onMessage); window.addEventListener('message', onMessage, false); @@ -108,7 +108,7 @@ function CanvasDesigner() { designer.toDataURL = function(format, callback) { dataURLListener = callback; - + if (!designer.iframe) return; designer.postMessage({ genDataURL: true, diff --git a/dev/common.js b/dev/common.js index 6c1a879..bf54b2b 100644 --- a/dev/common.js +++ b/dev/common.js @@ -303,31 +303,36 @@ var common = { if (p[0] === 'arc') { output += 'context.beginPath();\n' + 'context.arc(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + point[2] + ', ' + point[3] + ', 0, ' + point[4] + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'pencil') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'marker') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'eraser') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'line') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'arrow') { @@ -345,13 +350,15 @@ var common = { if (p[0] === 'quadratic') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.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]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'bezier') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.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]); + + + this.strokeOrFill(p[2]); } if (i !== length - 1) output += '\n\n'; @@ -363,66 +370,84 @@ var common = { forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n' // globals - + ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.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' - + '\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' + + + '\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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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' + + + ' 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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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' // marker - + ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' + + + ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // text - + ' if(p[0] === "text") { \n' + '\tcontext.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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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 - + ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n' + + + ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n' // rect - + ' 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' + + + ' 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' + + + ' }\n\n' // quadratic - + ' 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' + + + ' 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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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 - + ' context.stroke();\n' + ' context.fill();\n' + + + ' context.stroke();\n' + ' context.fill();\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' - + '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.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' + + + ' context.stroke();\n' + ' context.fill();\n' - + '}', + + + '}', strokeOrFill: function(p) { if (!this.prevProps || this.prevProps !== p.join(',')) { this.prevProps = p.join(','); diff --git a/dev/decorator.js b/dev/decorator.js index 4fc54dc..3194930 100644 --- a/dev/decorator.js +++ b/dev/decorator.js @@ -15,7 +15,10 @@ var tools = { }; if (params.tools) { - tools = JSON.parse(params.tools); + try { + var t = JSON.parse(params.tools); + tools = t; + } catch (e) {} } function setSelection(element, prop) { @@ -304,17 +307,10 @@ window.addEventListener('load', function() { } else document.getElementById('pencil-icon').style.display = 'none'; function decorateMarker() { + function hexToRGBA(h, alpha) { return 'rgba(' + hexToRGB(h).join(',') + ',' + alpha + ')'; } - - function doneHandler() { - markerContainer.style.display = 'none'; - - markerLineWidth = strokeStyleText.value; - markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); - } - var colors = [ ['FFFFFF', '006600', '000099', 'CC0000', '8C4600'], ['CCCCCC', '00CC00', '6633CC', 'FF0000', 'B28500'], @@ -339,18 +335,25 @@ window.addEventListener('load', function() { bindEvent(context, 'Marker'); var markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), strokeStyleText = find('marker-stroke-style'), markerColorsList = find("marker-colors-list"), fillStyleText = find('marker-fill-style'), + markerSelectedColor = find('marker-selected-color'), + markerSelectedColor2 = find('marker-selected-color-2'), btnMarkerDone = find('marker-done'), canvas = context.canvas, alpha = 0.2; // START INIT MARKER - markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); - var html = ''; + + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha) + + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#' + fillStyleText.value; + colors.forEach(function(colorRow) { var row = ''; @@ -359,25 +362,28 @@ window.addEventListener('load', function() { }) row += ''; - html += row; - }); - - markerColorsList.innerHTML = html; + markerColorsList.innerHTML += row; + }) // console.log(markerColorsList.getElementsByTagName('td')) Array.prototype.slice.call(markerColorsList.getElementsByTagName('td')).forEach(function(td) { addEvent(td, 'mouseover', function() { var elColor = td.getAttribute('data-color'); + markerSelectedColor2.style.backgroundColor = '#' + elColor; fillStyleText.value = elColor }); addEvent(td, 'click', function() { var elColor = td.getAttribute('data-color'); + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#' + elColor; + fillStyleText.value = elColor; - doneHandler(); + + markerColorContainer.style.display = 'none'; }); - }); + }) // END INIT MARKER @@ -391,7 +397,17 @@ window.addEventListener('load', function() { fillStyleText.focus(); }); - addEvent(btnMarkerDone, 'click', doneHandler); + addEvent(btnMarkerDone, 'click', function() { + markerContainer.style.display = 'none'; + markerColorContainer.style.display = 'none'; + + markerLineWidth = strokeStyleText.value; + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); + }); + + addEvent(markerSelectedColor, 'click', function() { + markerColorContainer.style.display = 'block'; + }); } if (tools.marker === true) { @@ -714,10 +730,12 @@ function hideContainers() { var additionalContainer = find('additional-container'), colorsContainer = find('colors-container'), markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), lineWidthContainer = find('line-width-container'); additionalContainer.style.display = colorsContainer.style.display = + markerColorContainer.style.display = markerContainer.style.display = lineWidthContainer.style.display = 'none'; } diff --git a/dev/marker-handler.js b/dev/marker-handler.js index 88d409b..564ceb1 100644 --- a/dev/marker-handler.js +++ b/dev/marker-handler.js @@ -16,9 +16,9 @@ var markerHandler = { // make sure that pencil is drawing shapes even // if mouse is down but mouse isn't moving tempContext.lineCap = 'round'; - markerDrawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -34,9 +34,9 @@ var markerHandler = { if (t.ismousedown) { tempContext.lineCap = 'round'; - markerDrawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -44,50 +44,6 @@ var markerHandler = { } } -var eraserHandler = { - ismousedown: false, - prevX: 0, - prevY: 0, - 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; - - tempContext.lineCap = 'round'; - drawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); - - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; - - t.prevX = x; - t.prevY = y; - }, - mouseup: function(e) { - this.ismousedown = false; - }, - mousemove: function(e) { - var x = e.pageX - canvas.offsetLeft, - y = e.pageY - canvas.offsetTop; - - var t = this; - - if (t.ismousedown) { - tempContext.lineCap = 'round'; - drawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); - - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; - - t.prevX = x; - t.prevY = y; - } - } -}; - function clone(obj) { if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) return obj; diff --git a/index.html b/index.html index f44e0ca..ff190e9 100644 --- a/index.html +++ b/index.html @@ -219,7 +219,8 @@

Shortcut Keys

ctrl+z (to undo last-single shape)
ctrl+a (to select all shapes)
ctrl+c (copy last-selected shape)
- ctrl+v (paste last-copied shape) + ctrl+v (paste last-copied shape)

+ ctrl+mousedown (to copy/paste all shapes)
diff --git a/multiple.html b/multiple.html index 1f273a8..8c8cce6 100644 --- a/multiple.html +++ b/multiple.html @@ -221,7 +221,8 @@

Shortcut Keys

ctrl+z (to undo last-single shape)
ctrl+a (to select all shapes)
ctrl+c (copy last-selected shape)
- ctrl+v (paste last-copied shape) + ctrl+v (paste last-copied shape)

+ ctrl+mousedown (to copy/paste all shapes)
diff --git a/package.json b/package.json index 420bf3a..8c8c754 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.0.8", + "version": "1.0.9", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/widget.html b/widget.html index 20d646d..dd43220 100644 --- a/widget.html +++ b/widget.html @@ -1,429 +1,450 @@  + - - - - - Canvas Designer ® Muaz Khan - - - - - - + + + + + + Canvas Designer ® Muaz Khan + + + + + + + -
- - -
- - - -
+
+ + +
+ + + +
@@ -431,234 +452,264 @@ - - - - - - - - - - - - - - -
- - - -
- - - -
Use arrow keys ↑↓
-
- - - -
- -
- -
-
Preview
-
Code
-
- - - -
-
- - -
-
- - -
-
- - - -
- - - -
Done
-
- - - -
-
- - -
- -
- - -
- -
Done
-
- - - -
- Line Width: - - - - -
- - Fill Style: - - -
- -
Done
-
- - - -
- - - -
-
- - -
-
- - -
-
- - - -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
Done
-
- - - -
- - - - - - - + + + + + + + + + + + + + + + + + + +
+ + + +
Use arrow keys ↑↓
+
+ + + +
+ +
+ +
+
Preview
+
Code
+
+ + + +
+
+ + +
+
+ + +
+
+ + + +
+ + + +
Done
+
+ + + +
+
+ + +
+ +
+ + +
+ +
Done
+
+ + + +
+ +
+ + +
+
+ +
+
+
+
+ +
+ + +
+
+
+
+ +
Done
+ + + + + + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
Done
+
+ + + +
+ + + + + + + - \ No newline at end of file + + diff --git a/widget.js b/widget.js index 005b0d2..a33fda5 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-05-30 3:32:19 PM UTC +// Last time updated: 2016-07-01 7:33:53 PM UTC // _______________ // Canvas-Designer @@ -314,31 +314,36 @@ if (p[0] === 'arc') { output += 'context.beginPath();\n' + 'context.arc(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + point[2] + ', ' + point[3] + ', 0, ' + point[4] + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'pencil') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'marker') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'eraser') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'line') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n' - + this.strokeOrFill(p[2]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'arrow') { @@ -356,13 +361,15 @@ if (p[0] === 'quadratic') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.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]); + + + this.strokeOrFill(p[2]); } if (p[0] === 'bezier') { output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.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]); + + + this.strokeOrFill(p[2]); } if (i !== length - 1) output += '\n\n'; @@ -374,66 +381,84 @@ forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n' // globals - + ' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.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' - + '\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' + + + '\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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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' + + + ' 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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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' // marker - + ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' + + + ' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n' // text - + ' if(p[0] === "text") { \n' + '\tcontext.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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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 - + ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n' + + + ' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n' // rect - + ' 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' + + + ' 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' + + + ' }\n\n' // quadratic - + ' 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' + + + ' 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' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.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 - + ' context.stroke();\n' + ' context.fill();\n' + + + ' context.stroke();\n' + ' context.fill();\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' - + '\tcontext.lineWidth = lineWidth;\n' + '\tcontext.strokeStyle = strokeStyle;\n' + '\tcontext.fillStyle = fillStyle;\n' + '\tcontext.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' + + + ' context.stroke();\n' + ' context.fill();\n' - + '}', + + + '}', strokeOrFill: function(p) { if (!this.prevProps || this.prevProps !== p.join(',')) { this.prevProps = p.join(','); @@ -586,7 +611,10 @@ }; if (params.tools) { - tools = JSON.parse(params.tools); + try { + var t = JSON.parse(params.tools); + tools = t; + } catch (e) {} } function setSelection(element, prop) { @@ -875,17 +903,10 @@ } else document.getElementById('pencil-icon').style.display = 'none'; function decorateMarker() { + function hexToRGBA(h, alpha) { return 'rgba(' + hexToRGB(h).join(',') + ',' + alpha + ')'; } - - function doneHandler() { - markerContainer.style.display = 'none'; - - markerLineWidth = strokeStyleText.value; - markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); - } - var colors = [ ['FFFFFF', '006600', '000099', 'CC0000', '8C4600'], ['CCCCCC', '00CC00', '6633CC', 'FF0000', 'B28500'], @@ -910,18 +931,25 @@ bindEvent(context, 'Marker'); var markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), strokeStyleText = find('marker-stroke-style'), markerColorsList = find("marker-colors-list"), fillStyleText = find('marker-fill-style'), + markerSelectedColor = find('marker-selected-color'), + markerSelectedColor2 = find('marker-selected-color-2'), btnMarkerDone = find('marker-done'), canvas = context.canvas, alpha = 0.2; // START INIT MARKER - markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); - var html = ''; + + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha) + + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#' + fillStyleText.value; + colors.forEach(function(colorRow) { var row = ''; @@ -930,25 +958,28 @@ }) row += ''; - html += row; - }); - - markerColorsList.innerHTML = html; + markerColorsList.innerHTML += row; + }) // console.log(markerColorsList.getElementsByTagName('td')) Array.prototype.slice.call(markerColorsList.getElementsByTagName('td')).forEach(function(td) { addEvent(td, 'mouseover', function() { var elColor = td.getAttribute('data-color'); + markerSelectedColor2.style.backgroundColor = '#' + elColor; fillStyleText.value = elColor }); addEvent(td, 'click', function() { var elColor = td.getAttribute('data-color'); + markerSelectedColor.style.backgroundColor = + markerSelectedColor2.style.backgroundColor = '#' + elColor; + fillStyleText.value = elColor; - doneHandler(); + + markerColorContainer.style.display = 'none'; }); - }); + }) // END INIT MARKER @@ -962,7 +993,17 @@ fillStyleText.focus(); }); - addEvent(btnMarkerDone, 'click', doneHandler); + addEvent(btnMarkerDone, 'click', function() { + markerContainer.style.display = 'none'; + markerColorContainer.style.display = 'none'; + + markerLineWidth = strokeStyleText.value; + markerStrokeStyle = hexToRGBA(fillStyleText.value, alpha); + }); + + addEvent(markerSelectedColor, 'click', function() { + markerColorContainer.style.display = 'block'; + }); } if (tools.marker === true) { @@ -1285,10 +1326,12 @@ var additionalContainer = find('additional-container'), colorsContainer = find('colors-container'), markerContainer = find('marker-container'), + markerColorContainer = find('marker-fill-colors'), lineWidthContainer = find('line-width-container'); additionalContainer.style.display = colorsContainer.style.display = + markerColorContainer.style.display = markerContainer.style.display = lineWidthContainer.style.display = 'none'; } @@ -2170,9 +2213,9 @@ // make sure that pencil is drawing shapes even // if mouse is down but mouse isn't moving tempContext.lineCap = 'round'; - markerDrawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -2188,9 +2231,9 @@ if (t.ismousedown) { tempContext.lineCap = 'round'; - markerDrawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); + markerDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], markerDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -2198,50 +2241,6 @@ } } - var eraserHandler = { - ismousedown: false, - prevX: 0, - prevY: 0, - 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; - - tempContext.lineCap = 'round'; - drawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); - - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; - - t.prevX = x; - t.prevY = y; - }, - mouseup: function(e) { - this.ismousedown = false; - }, - mousemove: function(e) { - var x = e.pageX - canvas.offsetLeft, - y = e.pageY - canvas.offsetTop; - - var t = this; - - if (t.ismousedown) { - tempContext.lineCap = 'round'; - drawHelper.marker(tempContext, [t.prevX, t.prevY, x, y]); - - points[points.length] = ['marker', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; - - t.prevX = x; - t.prevY = y; - } - } - }; - function clone(obj) { if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) return obj; diff --git a/widget.min.js b/widget.min.js index 01ee21c..6575e6e 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,5 +1,5 @@ -// Last time updated: 2016-05-30 3:32:20 PM UTC +// Last time updated: 2016-07-01 7:33:53 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 drawArrow(mx,my,lx,ly,options){function getOptions(opt){return opt=opt||{},[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],isNoFillStroke||(context.stroke(),context.fill())}var arrowSize=10,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;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"),markerContainer=find("marker-container"),lineWidthContainer=find("line-width-container");additionalContainer.style.display=colorsContainer.style.display=markerContainer.style.display=lineWidthContainer.style.display="none"}function clone(obj){if(null===obj||"object"!=typeof obj||"isActiveClone"in obj)return obj;if(obj instanceof Date)var temp=new obj.constructor;else var temp=obj.constructor();for(var key in obj)Object.prototype.hasOwnProperty.call(obj,key)&&(obj.isActiveClone=null,temp[key]=clone(obj[key]),delete obj.isActiveClone);return temp}function hexToRGB(h){return[hexToR(h),hexToG(h),hexToB(h)]}function hexToR(h){return parseInt(cutHex(h).substring(0,2),16)}function hexToG(h){return parseInt(cutHex(h).substring(2,4),16)}function hexToB(h){return parseInt(cutHex(h).substring(4,6),16)}function cutHex(h){return"#"==h.charAt(0)?h.substring(1,7):h}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"+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])),"marker"===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])),"marker"===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] === "marker") { \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,marker:!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 decorateMarker(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+","+alpha+")"}function doneHandler(){markerContainer.style.display="none",markerLineWidth=strokeStyleText.value,markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("marker-icon");context.lineWidth=9,context.lineCap="round",context.strokeStyle="green",context.moveTo(35,20),context.lineTo(5,25),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Marker",6,12),bindEvent(context,"Marker");var markerContainer=find("marker-container"),strokeStyleText=find("marker-stroke-style"),markerColorsList=find("marker-colors-list"),fillStyleText=find("marker-fill-style"),btnMarkerDone=find("marker-done"),canvas=context.canvas,alpha=.2;markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha);var html="";colors.forEach(function(colorRow){var row="";colorRow.forEach(function(color){row+=''}),row+="",html+=row}),markerColorsList.innerHTML=html,Array.prototype.slice.call(markerColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");fillStyleText.value=elColor,doneHandler()})}),addEvent(canvas,"click",function(){hideContainers(),markerContainer.style.display="block",markerContainer.style.top=canvas.offsetTop+1+"px",markerContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnMarkerDone,"click",doneHandler)}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.marker===!0?decorateMarker():document.getElementById("marker-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)},marker: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)}},markerHandler={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",markerDrawHelper.marker(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["marker",[t.prevX,t.prevY,x,y],markerDrawHelper.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",markerDrawHelper.marker(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["marker",[t.prevX,t.prevY,x,y],markerDrawHelper.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.marker(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["marker",[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.marker(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["marker",[t.prevX,t.prevY,x,y],drawHelper.getOptions()],t.prevX=x,t.prevY=y)}},markerLineWidth=8,markerStrokeStyle="#FF7373",markerDrawHelper=clone(drawHelper);markerDrawHelper.getOptions=function(){return[markerLineWidth,markerStrokeStyle,fillStyle,globalAlpha,globalCompositeOperation,lineCap,lineJoin,font]};var 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):cache.isMarker&&markerHandler.mousedown(e), +"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 drawArrow(mx,my,lx,ly,options){function getOptions(opt){return opt=opt||{},[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],isNoFillStroke||(context.stroke(),context.fill())}var arrowSize=10,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;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"),markerContainer=find("marker-container"),markerColorContainer=find("marker-fill-colors"),lineWidthContainer=find("line-width-container");additionalContainer.style.display=colorsContainer.style.display=markerColorContainer.style.display=markerContainer.style.display=lineWidthContainer.style.display="none"}function clone(obj){if(null===obj||"object"!=typeof obj||"isActiveClone"in obj)return obj;if(obj instanceof Date)var temp=new obj.constructor;else var temp=obj.constructor();for(var key in obj)Object.prototype.hasOwnProperty.call(obj,key)&&(obj.isActiveClone=null,temp[key]=clone(obj[key]),delete obj.isActiveClone);return temp}function hexToRGB(h){return[hexToR(h),hexToG(h),hexToB(h)]}function hexToR(h){return parseInt(cutHex(h).substring(0,2),16)}function hexToG(h){return parseInt(cutHex(h).substring(2,4),16)}function hexToB(h){return parseInt(cutHex(h).substring(4,6),16)}function cutHex(h){return"#"==h.charAt(0)?h.substring(1,7):h}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"+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])),"marker"===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])),"marker"===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] === "marker") { \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,marker:!0,dragSingle:!0,dragMultiple:!0,eraser:!0,rectangle:!0,arc:!0,bezier:!0,quadratic:!0,text:!0,image:!0};if(params.tools)try{var t=JSON.parse(params.tools);tools=t}catch(e){}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 decorateMarker(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+","+alpha+")"}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("marker-icon");context.lineWidth=9,context.lineCap="round",context.strokeStyle="green",context.moveTo(35,20),context.lineTo(5,25),context.stroke(),context.fillStyle="Gray",context.font="9px Verdana",context.fillText("Marker",6,12),bindEvent(context,"Marker");var markerContainer=find("marker-container"),markerColorContainer=find("marker-fill-colors"),strokeStyleText=find("marker-stroke-style"),markerColorsList=find("marker-colors-list"),fillStyleText=find("marker-fill-style"),markerSelectedColor=find("marker-selected-color"),markerSelectedColor2=find("marker-selected-color-2"),btnMarkerDone=find("marker-done"),canvas=context.canvas,alpha=.2;markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha),markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+fillStyleText.value,colors.forEach(function(colorRow){var row="";colorRow.forEach(function(color){row+=''}),row+="",markerColorsList.innerHTML+=row}),Array.prototype.slice.call(markerColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");markerSelectedColor.style.backgroundColor=markerSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,markerColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),markerContainer.style.display="block",markerContainer.style.top=canvas.offsetTop+1+"px",markerContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnMarkerDone,"click",function(){markerContainer.style.display="none",markerColorContainer.style.display="none",markerLineWidth=strokeStyleText.value,markerStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(markerSelectedColor,"click",function(){markerColorContainer.style.display="block"})}function decorateEraser(){var context=getContext("eraser-icon");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.marker===!0?decorateMarker():document.getElementById("marker-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)},marker: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)}},markerHandler={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",markerDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],markerDrawHelper.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",markerDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],markerDrawHelper.getOptions()],t.prevX=x,t.prevY=y)}},markerLineWidth=8,markerStrokeStyle="#FF7373",markerDrawHelper=clone(drawHelper);markerDrawHelper.getOptions=function(){return[markerLineWidth,markerStrokeStyle,fillStyle,globalAlpha,globalCompositeOperation,lineCap,lineJoin,font]};var 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):cache.isMarker&&markerHandler.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):cache.isMarker&&markerHandler.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):cache.isMarker&&markerHandler.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