diff --git a/bower.json b/bower.json index 6c2d3fb..670e31a 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "canvas-designer", "preferGlobal": false, - "version": "1.2.0", + "version": "1.2.1", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", diff --git a/dev/common.js b/dev/common.js index eb7f373..280d4e3 100644 --- a/dev/common.js +++ b/dev/common.js @@ -22,6 +22,14 @@ var is = { }; function addEvent(element, eventType, callback) { + if (eventType.split(' ').length > 1) { + var events = eventType.split(' '); + for (var i = 0; i < events; i++) { + addEvent(element, events[i], callback); + } + return; + } + if (element.addEventListener) { element.addEventListener(eventType, callback, !1); return true; @@ -585,3 +593,48 @@ function paste() { setSelection(find('drag-all-paths'), 'DragAllPaths'); } } + +// marker + pencil +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 clone(obj) { + if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) + return obj; + + if (obj instanceof Date) + var temp = new obj.constructor(); //or new Date(obj); + else + var temp = obj.constructor(); + + for (var key in obj) { + if (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) + ] +} diff --git a/dev/decorator.js b/dev/decorator.js index d62a7d2..1fab644 100644 --- a/dev/decorator.js +++ b/dev/decorator.js @@ -312,6 +312,19 @@ window.addEventListener('load', function() { } function decoratePencil() { + + function hexToRGBA(h, alpha) { + return 'rgba(' + hexToRGB(h).join(',') + ',1)'; + } + + 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'] + ]; + var context = getContext('pencil-icon'); context.lineWidth = 5; @@ -325,6 +338,81 @@ window.addEventListener('load', function() { context.fillText('Pencil', 6, 12); bindEvent(context, 'Pencil'); + + var pencilContainer = find('pencil-container'), + pencilColorContainer = find('pencil-fill-colors'), + strokeStyleText = find('pencil-stroke-style'), + pencilColorsList = find("pencil-colors-list"), + fillStyleText = find('pencil-fill-style'), + pencilSelectedColor = find('pencil-selected-color'), + pencilSelectedColor2 = find('pencil-selected-color-2'), + btnPencilDone = find('pencil-done'), + canvas = context.canvas, + alpha = 0.2; + + // START INIT PENCIL + + + + pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha) + + pencilSelectedColor.style.backgroundColor = + pencilSelectedColor2.style.backgroundColor = '#' + fillStyleText.value; + + colors.forEach(function(colorRow) { + var row = ''; + + colorRow.forEach(function(color) { + row += ''; + }) + row += ''; + + pencilColorsList.innerHTML += row; + }) + + // console.log(pencilColorsList.getElementsByTagName('td')) + Array.prototype.slice.call(pencilColorsList.getElementsByTagName('td')).forEach(function(td) { + addEvent(td, 'mouseover', function() { + var elColor = td.getAttribute('data-color'); + pencilSelectedColor2.style.backgroundColor = '#' + elColor; + fillStyleText.value = elColor + }); + + addEvent(td, 'click', function() { + var elColor = td.getAttribute('data-color'); + pencilSelectedColor.style.backgroundColor = + pencilSelectedColor2.style.backgroundColor = '#' + elColor; + + fillStyleText.value = elColor; + + + pencilColorContainer.style.display = 'none'; + }); + }) + + // END INIT PENCIL + + addEvent(canvas, 'click', function() { + hideContainers(); + + pencilContainer.style.display = 'block'; + pencilContainer.style.top = (canvas.offsetTop + 1) + 'px'; + pencilContainer.style.left = (canvas.offsetLeft + canvas.clientWidth) + 'px'; + + fillStyleText.focus(); + }); + + addEvent(btnPencilDone, 'click', function() { + pencilContainer.style.display = 'none'; + pencilColorContainer.style.display = 'none'; + + pencilLineWidth = strokeStyleText.value; + pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha); + }); + + addEvent(pencilSelectedColor, 'click', function() { + pencilColorContainer.style.display = 'block'; + }); } if (tools.pencil === true) { @@ -756,11 +844,15 @@ function hideContainers() { colorsContainer = find('colors-container'), markerContainer = find('marker-container'), markerColorContainer = find('marker-fill-colors'), + pencilContainer = find('pencil-container'), + pencilColorContainer = find('pencil-fill-colors'), lineWidthContainer = find('line-width-container'); additionalContainer.style.display = colorsContainer.style.display = markerColorContainer.style.display = markerContainer.style.display = + pencilColorContainer.style.display = + pencilContainer.style.display = lineWidthContainer.style.display = 'none'; } diff --git a/dev/draw-helper.js b/dev/draw-helper.js index a006797..064f257 100644 --- a/dev/draw-helper.js +++ b/dev/draw-helper.js @@ -1,16 +1,15 @@ var drawHelper = { - redraw: function(skipSync) { + redraw: function() { tempContext.clearRect(0, 0, innerWidth, innerHeight); context.clearRect(0, 0, innerWidth, innerHeight); var i, point, length = points.length; for (i = 0; i < length; i++) { point = points[i]; - this[point[0]](context, point[1], point[2]); - } - - if (!skipSync && typeof syncPoints !== 'undefined') { - syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); + if (point && point.length && this[point[0]]) { + this[point[0]](context, point[1], point[2]); + } + // else warn } }, getOptions: function(opt) { diff --git a/dev/events-handler.js b/dev/events-handler.js index f393a8a..7c7926a 100644 --- a/dev/events-handler.js +++ b/dev/events-handler.js @@ -23,9 +23,12 @@ addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) { else if (cache.isMarker) markerHandler.mousedown(e); drawHelper.redraw(); + + e.preventDefault(); + e.stopPropagation(); }); -addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) { +addEvent(canvas, isTouch ? 'touchend touchcancel' : 'mouseup', function(e) { if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : { pageX: 0, pageY: 0 @@ -47,6 +50,11 @@ addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) { else if (cache.isMarker) markerHandler.mouseup(e); drawHelper.redraw(); + + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); + + e.preventDefault(); + e.stopPropagation(); }); addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) { @@ -69,6 +77,9 @@ addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) { else if (cache.isImage) imageHandler.mousemove(e); else if (cache.isArrow) arrowHandler.mousemove(e); else if (cache.isMarker) markerHandler.mousemove(e); + + e.preventDefault(); + e.stopPropagation(); }); var keyCode; @@ -151,7 +162,7 @@ function onkeyup(e) { points.length = points.length - 1; drawHelper.redraw(); - syncPoints(true); + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); } } @@ -172,6 +183,8 @@ function onkeyup(e) { // Ctrl + v if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) { paste(); + + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); } // Ending the Control Key diff --git a/dev/marker-handler.js b/dev/marker-handler.js index 564ceb1..0a2e574 100644 --- a/dev/marker-handler.js +++ b/dev/marker-handler.js @@ -44,56 +44,12 @@ var markerHandler = { } } -function clone(obj) { - if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) - return obj; - - if (obj instanceof Date) - var temp = new obj.constructor(); //or new Date(obj); - else - var temp = obj.constructor(); - - for (var key in obj) { - if (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 -} - -var markerLineWidth = 8, - markerGlobalAlpha = 0.1, - markerStrokeStyle = '#FF7373'; +var markerLineWidth = document.getElementById('marker-stroke-style').value, + markerStrokeStyle = '#' + document.getElementById('marker-fill-style').value, + markerGlobalAlpha = 0.7; var markerDrawHelper = clone(drawHelper); markerDrawHelper.getOptions = function() { - return [markerLineWidth, markerStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; + return [markerLineWidth, markerStrokeStyle, fillStyle, markerGlobalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; } diff --git a/dev/pencil-handler.js b/dev/pencil-handler.js index e47fa0e..7dddf30 100644 --- a/dev/pencil-handler.js +++ b/dev/pencil-handler.js @@ -16,9 +16,9 @@ var pencilHandler = { // make sure that pencil is drawing shapes even // if mouse is down but mouse isn't moving tempContext.lineCap = 'round'; - drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -34,12 +34,21 @@ var pencilHandler = { if (t.ismousedown) { tempContext.lineCap = 'round'; - drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; } } -}; +} + +var pencilLineWidth = document.getElementById('pencil-stroke-style').value, + pencilStrokeStyle = '#' + document.getElementById('pencil-fill-style').value; + +var pencilDrawHelper = clone(drawHelper); + +pencilDrawHelper.getOptions = function() { + return [pencilLineWidth, pencilStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; +} diff --git a/dev/share-drawings.js b/dev/share-drawings.js index b7fce2f..5385584 100644 --- a/dev/share-drawings.js +++ b/dev/share-drawings.js @@ -85,7 +85,7 @@ window.addEventListener('message', function(event) { lastPointIndex = points.length; // redraw the surfaces - drawHelper.redraw(true); + drawHelper.redraw(); }, false); function syncPoints(isSyncAll) { diff --git a/index.html b/index.html index e4c3bbc..bdf2df5 100644 --- a/index.html +++ b/index.html @@ -13,10 +13,6 @@ - - - -
@@ -268,6 +290,19 @@

Shortcut Keys

+
+ + +

Click right-side "x" button to close this popup.

+
+

Feedback

+
+ +
+ Enter your email too; if you want "direct" reply! +
+
+

Canvas Designer!

@@ -302,6 +337,11 @@

Try multiple designers!

+ +
+

Ask Questions Here:

+ +
+ + + + + + + diff --git a/multiple.html b/multiple.html index e945ae6..bf0e445 100644 --- a/multiple.html +++ b/multiple.html @@ -13,10 +13,9 @@ - - - + + @@ -534,7 +536,7 @@
- + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+ +
+ + +
+
+
+ + +
Done
+
+ + +
diff --git a/widget.js b/widget.js index 07c09a0..dee7510 100644 --- a/widget.js +++ b/widget.js @@ -1,4 +1,4 @@ -// Last time updated: 2016-10-20 11:27:38 AM UTC +// Last time updated: 2016-11-16 4:15:14 PM UTC // _______________ // Canvas-Designer @@ -33,6 +33,14 @@ }; function addEvent(element, eventType, callback) { + if (eventType.split(' ').length > 1) { + var events = eventType.split(' '); + for (var i = 0; i < events; i++) { + addEvent(element, events[i], callback); + } + return; + } + if (element.addEventListener) { element.addEventListener(eventType, callback, !1); return true; @@ -597,19 +605,63 @@ } } + // marker + pencil + 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 clone(obj) { + if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) + return obj; + + if (obj instanceof Date) + var temp = new obj.constructor(); //or new Date(obj); + else + var temp = obj.constructor(); + + for (var key in obj) { + if (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) + ] + } + var drawHelper = { - redraw: function(skipSync) { + redraw: function() { tempContext.clearRect(0, 0, innerWidth, innerHeight); context.clearRect(0, 0, innerWidth, innerHeight); var i, point, length = points.length; for (i = 0; i < length; i++) { point = points[i]; - this[point[0]](context, point[1], point[2]); - } - - if (!skipSync && typeof syncPoints !== 'undefined') { - syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); + if (point && point.length && this[point[0]]) { + this[point[0]](context, point[1], point[2]); + } + // else warn } }, getOptions: function(opt) { @@ -1428,9 +1480,9 @@ // make sure that pencil is drawing shapes even // if mouse is down but mouse isn't moving tempContext.lineCap = 'round'; - drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; @@ -1446,15 +1498,24 @@ if (t.ismousedown) { tempContext.lineCap = 'round'; - drawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); + pencilDrawHelper.line(tempContext, [t.prevX, t.prevY, x, y]); - points[points.length] = ['line', [t.prevX, t.prevY, x, y], drawHelper.getOptions()]; + points[points.length] = ['line', [t.prevX, t.prevY, x, y], pencilDrawHelper.getOptions()]; t.prevX = x; t.prevY = y; } } - }; + } + + var pencilLineWidth = document.getElementById('pencil-stroke-style').value, + pencilStrokeStyle = '#' + document.getElementById('pencil-fill-style').value; + + var pencilDrawHelper = clone(drawHelper); + + pencilDrawHelper.getOptions = function() { + return [pencilLineWidth, pencilStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; + } var markerHandler = { ismousedown: false, @@ -1502,58 +1563,14 @@ } } - function clone(obj) { - if (obj === null || typeof(obj) !== 'object' || 'isActiveClone' in obj) - return obj; - - if (obj instanceof Date) - var temp = new obj.constructor(); //or new Date(obj); - else - var temp = obj.constructor(); - - for (var key in obj) { - if (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 - } - - var markerLineWidth = 8, - markerGlobalAlpha = 0.1, - markerStrokeStyle = '#FF7373'; + var markerLineWidth = document.getElementById('marker-stroke-style').value, + markerStrokeStyle = '#' + document.getElementById('marker-fill-style').value, + markerGlobalAlpha = 0.7; var markerDrawHelper = clone(drawHelper); markerDrawHelper.getOptions = function() { - return [markerLineWidth, markerStrokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; + return [markerLineWidth, markerStrokeStyle, fillStyle, markerGlobalAlpha, globalCompositeOperation, lineCap, lineJoin, font]; } var eraserHandler = { @@ -2697,6 +2714,19 @@ } function decoratePencil() { + + function hexToRGBA(h, alpha) { + return 'rgba(' + hexToRGB(h).join(',') + ',1)'; + } + + 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'] + ]; + var context = getContext('pencil-icon'); context.lineWidth = 5; @@ -2710,6 +2740,81 @@ context.fillText('Pencil', 6, 12); bindEvent(context, 'Pencil'); + + var pencilContainer = find('pencil-container'), + pencilColorContainer = find('pencil-fill-colors'), + strokeStyleText = find('pencil-stroke-style'), + pencilColorsList = find("pencil-colors-list"), + fillStyleText = find('pencil-fill-style'), + pencilSelectedColor = find('pencil-selected-color'), + pencilSelectedColor2 = find('pencil-selected-color-2'), + btnPencilDone = find('pencil-done'), + canvas = context.canvas, + alpha = 0.2; + + // START INIT PENCIL + + + + pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha) + + pencilSelectedColor.style.backgroundColor = + pencilSelectedColor2.style.backgroundColor = '#' + fillStyleText.value; + + colors.forEach(function(colorRow) { + var row = ''; + + colorRow.forEach(function(color) { + row += ''; + }) + row += ''; + + pencilColorsList.innerHTML += row; + }) + + // console.log(pencilColorsList.getElementsByTagName('td')) + Array.prototype.slice.call(pencilColorsList.getElementsByTagName('td')).forEach(function(td) { + addEvent(td, 'mouseover', function() { + var elColor = td.getAttribute('data-color'); + pencilSelectedColor2.style.backgroundColor = '#' + elColor; + fillStyleText.value = elColor + }); + + addEvent(td, 'click', function() { + var elColor = td.getAttribute('data-color'); + pencilSelectedColor.style.backgroundColor = + pencilSelectedColor2.style.backgroundColor = '#' + elColor; + + fillStyleText.value = elColor; + + + pencilColorContainer.style.display = 'none'; + }); + }) + + // END INIT PENCIL + + addEvent(canvas, 'click', function() { + hideContainers(); + + pencilContainer.style.display = 'block'; + pencilContainer.style.top = (canvas.offsetTop + 1) + 'px'; + pencilContainer.style.left = (canvas.offsetLeft + canvas.clientWidth) + 'px'; + + fillStyleText.focus(); + }); + + addEvent(btnPencilDone, 'click', function() { + pencilContainer.style.display = 'none'; + pencilColorContainer.style.display = 'none'; + + pencilLineWidth = strokeStyleText.value; + pencilStrokeStyle = hexToRGBA(fillStyleText.value, alpha); + }); + + addEvent(pencilSelectedColor, 'click', function() { + pencilColorContainer.style.display = 'block'; + }); } if (tools.pencil === true) { @@ -3141,12 +3246,16 @@ colorsContainer = find('colors-container'), markerContainer = find('marker-container'), markerColorContainer = find('marker-fill-colors'), + pencilContainer = find('pencil-container'), + pencilColorContainer = find('pencil-fill-colors'), lineWidthContainer = find('line-width-container'); additionalContainer.style.display = colorsContainer.style.display = markerColorContainer.style.display = markerContainer.style.display = + pencilColorContainer.style.display = + pencilContainer.style.display = lineWidthContainer.style.display = 'none'; } @@ -3175,9 +3284,12 @@ else if (cache.isMarker) markerHandler.mousedown(e); drawHelper.redraw(); + + e.preventDefault(); + e.stopPropagation(); }); - addEvent(canvas, isTouch ? 'touchend' : 'mouseup', function(e) { + addEvent(canvas, isTouch ? 'touchend touchcancel' : 'mouseup', function(e) { if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : { pageX: 0, pageY: 0 @@ -3199,6 +3311,11 @@ else if (cache.isMarker) markerHandler.mouseup(e); drawHelper.redraw(); + + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); + + e.preventDefault(); + e.stopPropagation(); }); addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) { @@ -3221,6 +3338,9 @@ else if (cache.isImage) imageHandler.mousemove(e); else if (cache.isArrow) arrowHandler.mousemove(e); else if (cache.isMarker) markerHandler.mousemove(e); + + e.preventDefault(); + e.stopPropagation(); }); var keyCode; @@ -3303,7 +3423,7 @@ points.length = points.length - 1; drawHelper.redraw(); - syncPoints(true); + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); } } @@ -3324,6 +3444,8 @@ // Ctrl + v if (isControlKeyPressed && keyCode === 86 && copiedStuff.length) { paste(); + + syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false); } // Ending the Control Key @@ -3456,7 +3578,7 @@ lastPointIndex = points.length; // redraw the surfaces - drawHelper.redraw(true); + drawHelper.redraw(); }, false); function syncPoints(isSyncAll) { diff --git a/widget.min.js b/widget.min.js index ae25994..14c8901 100644 --- a/widget.min.js +++ b/widget.min.js @@ -1,5 +1,5 @@ -// Last time updated: 2016-10-20 11:27:38 AM UTC +// Last time updated: 2016-11-16 4:15:15 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 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 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 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=[],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()])}},zoomHandler={scale:1,up:function(e){this.scale+=.01,this.apply()},down:function(e){this.scale-=.01,this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){var image=new Image;image.width=32,image.height=32,image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADiklEQVRoQ+2ZLXMUQRCGT0RERCCQiJMRyEjEiYiIiBOIiIiIiIiIExHIq4qlKiI/AMEPiIhEREREIpAIBAKBQCAQiON9trphcnt787F7lZoqRNfex0x3v909/TE7WiwWo5qpauUx/H8ATx1+g3hgNBptiw5F16Ib0YPoq0g+bp5853f+Z932UMCLAUiJLdGRKfbTlEXhFGI9gNi/1QdMEQAJPRB9DJT9rc/3oguz8J6eL5pDpqeI71ie/1nHegf6SZ+npSCyAEjQWHQXCP+sz6ei5zkKsF50JmK/A4Hvbg6frCwk5hPRNxP4w6zZK5bFgzCcib4HfPdzQCR5wKzsbv+g789yhMTWwk90ayCQcxbb4/9HAZjy7uYrrJbKPHedeF8GIXWasn8tAAsbt/x5CsO+ayTzOPDEJMavE4CYjIOYv4oxGvJ/yZ0bCM7ceB3vdQA82xDz2WETKDEvAaf91AlC9y4bgDaR59lMtik6sAMA2Aki4KALRMsDWFvkReqixHpWwDwMijxgPM7NkOizMgpWAaC8Y32KTHGe7+sBA4AxvdgdrTLmKgAee0lprNO1/w5isQcMBBUbg95EAWBxEY0WqTOrPVhmPoQHDABtB/qgVysiHnlAC2i4QHtfGvt/K+RAHjAQNIDoddgyVPiDFtCvs7D48G4IAF0sel3HAHj8t5DmemSoEDIPeGS0zsFyCDE5gXQvV+FNnQEDwDyBXg8xD/gY2AwjHUrNxOjEaKrnxOilnmMjitDchPbKQgaAoagZT2MAmq5zTWpMGReX15A9vhjhYVoU6L3onRFdKIA7wRqAlm7LIZTiAVpqF0wP7woxGrqiv1xg7rPD88ke2MQZeBuE1qsg5GibT4wa63d5QL8nn4Hqs1D1daD6Slx3L2Q5t95u1ACE80D2KDlkL6TsUzQPsImcTkGalbYUlhbhUVyJtZdbP3igT9pEZl6Y2kZuzJ5qJuY8+k1g591pyq3EbYkX+npA+2k1ym4lzAu7YsCtBEwuS0CU7pG8NyYX+WsvfGM3c/ti4Ddzx6UK5eyTvNcmE7nRi96Uu1EfqnsdyBQQZnk3WNIFbxSAhRPZwBlTJ3ZSFEpdI34cWI/5YW+ng7w+CbIC2YFLp+I6YYYhZWOc8L1DNGxCwyR5IAAxljD6fx9a6nlD8wh1re/IlkDU+5ZyxbBf33vi1Ayz6XVZh3jTypTwrx7AH8HANnr8oqz7AAAAAElFTkSuQmCC",ctx.drawImage(image,4,4,32,32)},down:function(ctx){var image=new Image;image.width=32,image.height=32,image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADdUlEQVRoQ+2Zr1IcQRDGTyAQiIiIiIiTiEhkxAkEAnEiAoGIQCAQJxCRVPEACB4AkQdAICMQCGREZERERERERERExOX7bXVXDXu7NzP7h6upylV17e5tT3d/3T09PbOT5XI5KZmKNh7H/wew6fQbJAKTyWRbdCi6Ft2KHkXfRYpxdeWZ/3kP3/ZQwDsDkBFboiMz7LcZi8EpBD+AGL/VB0wnAFJ6IPocGPtX9w+ic/Pwnq6vq0mmq4hnPM97+OB3oF90P+8KIguAFE1F94Hyr7o/Eb3MMQB+0amI8Q4Eubs5crKqkITPRD9M4S/zZq9clgzScCH6GcjdzwGRFAHzsof9k55f5CiJ8SJPdGcg0HMaG+PvowDMeA/zFV5LFZ7LJ9mXQUqdpIxfC8DSxj1/liKwL490HgeRmMXktQKQkGmQ81cxQUO+l94LA8Gcm66TvQ6AVxtyfrS0aTNOOlknSN37bAAaRJ1nMNVm0AmbGinp3Qky4KAVaP0F3hb5InWeqnAMPtlxZo7EnsYsWEkhMbK8430WmV51vi8oc6YvdkdN8poAeO4llbG+RsbGCwQrNg69jQLA4yIaLUpnVnsQM6Tre+wwe7BrJSOeREAMNFygfeiqcIxx2GN2Ha7M2fAPMdGvA2Cjk7ehsNDFYtd1DIDn/wrSMTybKjPIjJV5UE8hdk4g3UsV/hx82GN2PcYi4NvAajPSEMoLCVqI3hvNdZ0ZvdF1arQzJDDJZFNUbU9jAKqus3XVS9su1reU9DPfjIgwLQr0UXRjRBeKcy5iumMAUiJAS+2K6eHdILaGbugf81gdTPS5JfLJERh8DgjIqyC13gYpR9vsqVh5vy0C+j95DhRfhYpfB4pficvuhagA+pXbjRqAcD/w7FvJWm/G5ip7P8AgajrhWAy5oubKkn5O/bADe9J2ZBaFuQ3kxGxTe2Lmo58Etp6dppxK3OV6bgh+GU+r0e1UwqKwKwGcSiDkcgijUmVI3wfTi/61B76xk7l9CfCTueNUA/rwSd8704ne6EFvytmob6qJRGu32MdoH2ued4clHfBGAVg6UQ1cMOvE0P0+E9ZzftjT6cA7s6AqUB04dOq1TjDeSmX43SGaNk/WipzQS9lURP/vfX05X2hqK2SZ38galvkyv1I2bPbL+06cM3fG5E0qo2Ma0Fd28QD+AZqKxdXXwZ1FAAAAAElFTkSuQmCC",ctx.drawImage(image,4,4,32,32)}}},FileSelector=function(){function selectFile(callback,multiple){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept="image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,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]))}},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,zoom:!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 decoreZoomUp(){var context=getContext("zoom-up");zoomHandler.icons.up(context),addEvent(context.canvas,"click",function(){zoomHandler.up()})}function decoreZoomDown(){var context=getContext("zoom-down");zoomHandler.icons.down(context),addEvent(context.canvas,"click",function(){zoomHandler.down()})}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.zoom===!0?(decoreZoomUp(),decoreZoomDown()):(document.getElementById("zoom-up").style.display="none",document.getElementById("zoom-down").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 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;i1))return element.addEventListener?(element.addEventListener(eventType,callback,!1),!0):element.attachEvent?element.attachEvent("on"+eventType,callback):(element["on"+eventType]=callback,this);for(var events=eventType.split(" "),i=0;events>i;i++)addEvent(element,events[i],callback)}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 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 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 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"),pencilContainer=find("pencil-container"),pencilColorContainer=find("pencil-fill-colors"),lineWidthContainer=find("line-width-container");additionalContainer.style.display=colorsContainer.style.display=markerColorContainer.style.display=markerContainer.style.display=pencilColorContainer.style.display=pencilContainer.style.display=lineWidthContainer.style.display="none"}function onkeydown(e){return keyCode=e.which||e.keyCode||0,8==keyCode||46==keyCode?void isBackKey(e,keyCode):(e.metaKey&&(isControlKeyPressed=!0,keyCode=17),void(isControlKeyPressed||17!==keyCode||(isControlKeyPressed=!0)))}function isBackKey(e,keyCode){var doPrevent=!1,d=e.srcElement||e.target;return doPrevent="INPUT"===d.tagName.toUpperCase()&&("TEXT"===d.type.toUpperCase()||"PASSWORD"===d.type.toUpperCase()||"FILE"===d.type.toUpperCase()||"SEARCH"===d.type.toUpperCase()||"EMAIL"===d.type.toUpperCase()||"NUMBER"===d.type.toUpperCase()||"DATE"===d.type.toUpperCase())||"TEXTAREA"===d.tagName.toUpperCase()?d.readOnly||d.disabled:!0,doPrevent&&e.preventDefault(),doPrevent}function onkeyup(e){return null!=e.which||null==e.charCode&&null==e.keyCode||(e.which=null!=e.charCode?e.charCode:e.keyCode),keyCode=e.which||e.keyCode||0,13===keyCode&&is.isText?void textHandler.onReturnKeyPressed():8==keyCode||46==keyCode?void(isBackKey(e,keyCode)&&textHandler.writeText(textHandler.lastKeyPress,!0)):isControlKeyPressed&&84===keyCode&&is.isText?void textHandler.showTextTools():(isControlKeyPressed&&90===keyCode&&points.length&&(points.length=points.length-1,drawHelper.redraw(),syncPoints(is.isDragAllPaths||is.isDragLastPath?!0:!1)),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(),syncPoints(is.isDragAllPaths||is.isDragLastPath?!0:!1)),"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=[],drawHelper={redraw:function(){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],point&&point.length&&this[point[0]]&&this[point[0]](context,point[1],point[2])},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",pencilDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],pencilDrawHelper.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",pencilDrawHelper.line(tempContext,[t.prevX,t.prevY,x,y]),points[points.length]=["line",[t.prevX,t.prevY,x,y],pencilDrawHelper.getOptions()],t.prevX=x,t.prevY=y)}},pencilLineWidth=document.getElementById("pencil-stroke-style").value,pencilStrokeStyle="#"+document.getElementById("pencil-fill-style").value,pencilDrawHelper=clone(drawHelper);pencilDrawHelper.getOptions=function(){return[pencilLineWidth,pencilStrokeStyle,fillStyle,globalAlpha,globalCompositeOperation,lineCap,lineJoin,font]};var 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=document.getElementById("marker-stroke-style").value,markerStrokeStyle="#"+document.getElementById("marker-fill-style").value,markerGlobalAlpha=.7,markerDrawHelper=clone(drawHelper);markerDrawHelper.getOptions=function(){return[markerLineWidth,markerStrokeStyle,fillStyle,markerGlobalAlpha,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()])}},zoomHandler={scale:1,up:function(e){this.scale+=.01,this.apply()},down:function(e){this.scale-=.01,this.apply()},apply:function(){tempContext.scale(this.scale,this.scale),context.scale(this.scale,this.scale),drawHelper.redraw()},icons:{up:function(ctx){var image=new Image;image.width=32,image.height=32,image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADiklEQVRoQ+2ZLXMUQRCGT0RERCCQiJMRyEjEiYiIiBOIiIiIiIiIExHIq4qlKiI/AMEPiIhEREREIpAIBAKBQCAQiON9trphcnt787F7lZoqRNfex0x3v909/TE7WiwWo5qpauUx/H8ATx1+g3hgNBptiw5F16Ib0YPoq0g+bp5853f+Z932UMCLAUiJLdGRKfbTlEXhFGI9gNi/1QdMEQAJPRB9DJT9rc/3oguz8J6eL5pDpqeI71ie/1nHegf6SZ+npSCyAEjQWHQXCP+sz6ei5zkKsF50JmK/A4Hvbg6frCwk5hPRNxP4w6zZK5bFgzCcib4HfPdzQCR5wKzsbv+g789yhMTWwk90ayCQcxbb4/9HAZjy7uYrrJbKPHedeF8GIXWasn8tAAsbt/x5CsO+ayTzOPDEJMavE4CYjIOYv4oxGvJ/yZ0bCM7ceB3vdQA82xDz2WETKDEvAaf91AlC9y4bgDaR59lMtik6sAMA2Aki4KALRMsDWFvkReqixHpWwDwMijxgPM7NkOizMgpWAaC8Y32KTHGe7+sBA4AxvdgdrTLmKgAee0lprNO1/w5isQcMBBUbg95EAWBxEY0WqTOrPVhmPoQHDABtB/qgVysiHnlAC2i4QHtfGvt/K+RAHjAQNIDoddgyVPiDFtCvs7D48G4IAF0sel3HAHj8t5DmemSoEDIPeGS0zsFyCDE5gXQvV+FNnQEDwDyBXg8xD/gY2AwjHUrNxOjEaKrnxOilnmMjitDchPbKQgaAoagZT2MAmq5zTWpMGReX15A9vhjhYVoU6L3onRFdKIA7wRqAlm7LIZTiAVpqF0wP7woxGrqiv1xg7rPD88ke2MQZeBuE1qsg5GibT4wa63d5QL8nn4Hqs1D1daD6Slx3L2Q5t95u1ACE80D2KDlkL6TsUzQPsImcTkGalbYUlhbhUVyJtZdbP3igT9pEZl6Y2kZuzJ5qJuY8+k1g591pyq3EbYkX+npA+2k1ym4lzAu7YsCtBEwuS0CU7pG8NyYX+WsvfGM3c/ti4Ddzx6UK5eyTvNcmE7nRi96Uu1EfqnsdyBQQZnk3WNIFbxSAhRPZwBlTJ3ZSFEpdI34cWI/5YW+ng7w+CbIC2YFLp+I6YYYhZWOc8L1DNGxCwyR5IAAxljD6fx9a6nlD8wh1re/IlkDU+5ZyxbBf33vi1Ayz6XVZh3jTypTwrx7AH8HANnr8oqz7AAAAAElFTkSuQmCC",ctx.drawImage(image,4,4,32,32)},down:function(ctx){var image=new Image;image.width=32,image.height=32,image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAADdUlEQVRoQ+2Zr1IcQRDGTyAQiIiIiIiTiEhkxAkEAnEiAoGIQCAQJxCRVPEACB4AkQdAICMQCGREZERERERERERExOX7bXVXDXu7NzP7h6upylV17e5tT3d/3T09PbOT5XI5KZmKNh7H/wew6fQbJAKTyWRbdCi6Ft2KHkXfRYpxdeWZ/3kP3/ZQwDsDkBFboiMz7LcZi8EpBD+AGL/VB0wnAFJ6IPocGPtX9w+ic/Pwnq6vq0mmq4hnPM97+OB3oF90P+8KIguAFE1F94Hyr7o/Eb3MMQB+0amI8Q4Eubs5crKqkITPRD9M4S/zZq9clgzScCH6GcjdzwGRFAHzsof9k55f5CiJ8SJPdGcg0HMaG+PvowDMeA/zFV5LFZ7LJ9mXQUqdpIxfC8DSxj1/liKwL490HgeRmMXktQKQkGmQ81cxQUO+l94LA8Gcm66TvQ6AVxtyfrS0aTNOOlknSN37bAAaRJ1nMNVm0AmbGinp3Qky4KAVaP0F3hb5InWeqnAMPtlxZo7EnsYsWEkhMbK8430WmV51vi8oc6YvdkdN8poAeO4llbG+RsbGCwQrNg69jQLA4yIaLUpnVnsQM6Tre+wwe7BrJSOeREAMNFygfeiqcIxx2GN2Ha7M2fAPMdGvA2Cjk7ehsNDFYtd1DIDn/wrSMTybKjPIjJV5UE8hdk4g3UsV/hx82GN2PcYi4NvAajPSEMoLCVqI3hvNdZ0ZvdF1arQzJDDJZFNUbU9jAKqus3XVS9su1reU9DPfjIgwLQr0UXRjRBeKcy5iumMAUiJAS+2K6eHdILaGbugf81gdTPS5JfLJERh8DgjIqyC13gYpR9vsqVh5vy0C+j95DhRfhYpfB4pficvuhagA+pXbjRqAcD/w7FvJWm/G5ip7P8AgajrhWAy5oubKkn5O/bADe9J2ZBaFuQ3kxGxTe2Lmo58Etp6dppxK3OV6bgh+GU+r0e1UwqKwKwGcSiDkcgijUmVI3wfTi/61B76xk7l9CfCTueNUA/rwSd8704ne6EFvytmob6qJRGu32MdoH2ued4clHfBGAVg6UQ1cMOvE0P0+E9ZzftjT6cA7s6AqUB04dOq1TjDeSmX43SGaNk/WipzQS9lURP/vfX05X2hqK2SZ38galvkyv1I2bPbL+06cM3fG5E0qo2Ma0Fd28QD+AZqKxdXXwZ1FAAAAAElFTkSuQmCC",ctx.drawImage(image,4,4,32,32)}}},FileSelector=function(){function selectFile(callback,multiple){var file=document.createElement("input");file.type="file",multiple&&(file.multiple=!0),file.accept="image/*",file.onchange=function(){return multiple?file.files.length?void callback(file.files):void console.error("No file selected."):file.files[0]?(callback(file.files[0]),void file.parentNode.removeChild(file)):void console.error("No file selected.")},file.style.display="none",(document.body||document.documentElement).appendChild(file),fireClickEvent(file)}function fireClickEvent(element){var evt=new window.MouseEvent("click",{view:window,bubbles:!0,cancelable:!0,button:0,buttons:0,mozInputSource:1});element.dispatchEvent(evt)}var selector=this;selector.selectSingleFile=selectFile,selector.selectMultipleFiles=function(callback){selectFile(callback,!0)}},imageHandler={lastImageURL:null,lastImageIndex:0,images:[],ismousedown:!1,prevX:0,prevY:0,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]))}},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,zoom:!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 decoreZoomUp(){var context=getContext("zoom-up");zoomHandler.icons.up(context),addEvent(context.canvas,"click",function(){zoomHandler.up()})}function decoreZoomDown(){var context=getContext("zoom-down");zoomHandler.icons.down(context),addEvent(context.canvas,"click",function(){zoomHandler.down()})}function decoratePencil(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+",1)"}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("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");var pencilContainer=find("pencil-container"),pencilColorContainer=find("pencil-fill-colors"),strokeStyleText=find("pencil-stroke-style"),pencilColorsList=find("pencil-colors-list"),fillStyleText=find("pencil-fill-style"),pencilSelectedColor=find("pencil-selected-color"),pencilSelectedColor2=find("pencil-selected-color-2"),btnPencilDone=find("pencil-done"),canvas=context.canvas,alpha=.2;pencilStrokeStyle=hexToRGBA(fillStyleText.value,alpha),pencilSelectedColor.style.backgroundColor=pencilSelectedColor2.style.backgroundColor="#"+fillStyleText.value,colors.forEach(function(colorRow){var row="";colorRow.forEach(function(color){row+=''}),row+="",pencilColorsList.innerHTML+=row}),Array.prototype.slice.call(pencilColorsList.getElementsByTagName("td")).forEach(function(td){addEvent(td,"mouseover",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor}),addEvent(td,"click",function(){var elColor=td.getAttribute("data-color");pencilSelectedColor.style.backgroundColor=pencilSelectedColor2.style.backgroundColor="#"+elColor,fillStyleText.value=elColor,pencilColorContainer.style.display="none"})}),addEvent(canvas,"click",function(){hideContainers(),pencilContainer.style.display="block",pencilContainer.style.top=canvas.offsetTop+1+"px",pencilContainer.style.left=canvas.offsetLeft+canvas.clientWidth+"px",fillStyleText.focus()}),addEvent(btnPencilDone,"click",function(){pencilContainer.style.display="none",pencilColorContainer.style.display="none",pencilLineWidth=strokeStyleText.value,pencilStrokeStyle=hexToRGBA(fillStyleText.value,alpha)}),addEvent(pencilSelectedColor,"click",function(){pencilColorContainer.style.display="block"})}function decorateMarker(){function hexToRGBA(h,alpha){return"rgba("+hexToRGB(h).join(",")+","+alpha+")"}var colors=[["FFFFFF","006600","000099","CC0000","8C4600"],["CCCCCC","00CC00","6633CC","FF0000","B28500"],["666666","66FFB2","006DD9","FF7373","FF9933"],["333333","26FF26","6699FF","CC33FF","FFCC99"],["000000","CCFF99","BFDFFF","FFBFBF","FFFF33"]],context=getContext("marker-icon");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.zoom===!0?(decoreZoomUp(),decoreZoomDown()):(document.getElementById("zoom-up").style.display="none",document.getElementById("zoom-down").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 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(),e.preventDefault(),e.stopPropagation()}),addEvent(canvas,isTouch?"touchend touchcancel":"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(),syncPoints(is.isDragAllPaths||is.isDragLastPath?!0:!1),e.preventDefault(),e.stopPropagation()}),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),e.preventDefault(),e.stopPropagation()});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