var __slice = Array.prototype.slice; var msg_upload_file_size_limit_10M = "Upload file size can not be larger than 10MB."; var msg_error_try = "An error happened. Please try again in a moment."; var msg_using_default_image = 'Do you want to use default image?'; var sketch_max_width = 1024; var VERSION_NEW_SKETCH = 16.17; var VERSION_NEW_SKETCH_MOVE_FUNC = 9999.18; var image_quality = 1; // web app new var VERSION_NEW_WEB_APP = 40; var currentVersion = VERSION_NEW_WEB_APP; var CONST_DEFAULT_SIZE = 10; var CONST_DASH_LINE = {1:[2], 3:[6], 5:[10], 10:[20], 15:[30], 20:[40]}; var BASE64_IMG_QUESTION_12 = 'data:image/png;base64,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'; var BASE64_IMG_QUESTION_24 = 'data:image/png;base64,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'; var BASE64_IMG_QUESTION_36 = 'data:image/png;base64,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'; var imgQuestion12 = undefined; var imgQuestion24 = undefined; var imgQuestion36 = undefined; var BASE64_IMG_PAINT_12 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADGSURBVHjafNAxSgRBEIXh740LgphopmAgiAoGJp5gvZB4IS+gJ1AQjAzFyFAEI1EMXFCQaZMeaGeXLSiqiv4fr7qUUgxZYz3JQ5KLJJL4x7RDBaZJSs3VsaAzH4dDU0o5aJxhoeC91h98zL0uWClJZkmuF/1h7HCGS3xjH1c4b4G0O3Zdd4MdPGKCYzz3fT8dmMnI4Q67+KzzF15aYCw4xV49xgp+8bRMsIXt2vdVOFt21rWmf6t1c5nDLU6wgXsc4bUF/gYAphRc7t5KceMAAAAASUVORK5CYII='; var BASE64_IMG_PAINT_24 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAGLSURBVHjarJU7SgRBEIa/f11xTQZ84GLggiIomIqRiRfxAB7AU3gGj2BiIoa+TQQxE8VADBQRFXUVddukFopmZnZm1oJi+lX1d//1GEIIpGmKrEq6lrQtaUISXjP9FASYl9SWFEw3igLUyRBJfroENNx8BagDP/SQWtZG9Jq5aHsKSCggNYrJTDRPQgiTPWKWD+D5tRt7GQJaRW5Wz6PIgQ2mXGAo7WypFzg5j7YfQghHXXqis9nB9Bql4ZSkW5ema33XgeO/+10354+SWnGcStcBMGj5vwgsSFq29RFgE7gA7oA94Ap4KkvRjqOklx5UecEF8A7cAwKCKUDHJck4cFY6Tc3xtFE1YCBea2afWF2UBpi1FvGSxmw3m4GmxaI0wBZwCrSdM9w4mH0DuKlSB4clgryf5Sev2b1RXN6qdNOQs/7hMolo3DdAxzj/imLybwC/wEP0N6sE0DV6TgF4tG9fFI2a4WW0PmzF9+3WmlXqYNey4xgYs7YxAHyGEE4kJVbpr8BOlpO/AQABNVkrCNu+LAAAAABJRU5ErkJggg=='; var BASE64_IMG_PAINT_36 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAI+SURBVHjazJfNahRBFIW/0zqiRjCSxUhUDFnERUADgm6iWfkIPkFWYp4luNEnEHwFl4IuDCgyLjRERSNxIyagDsNEY1031bFsujs93WU7BZfp+umqM+eee+s2ZsZBVtJOSLoj6amkB5LmJZFnVc4xM2gASJJeSLLA+pKm8hZXBZRQv10DFjJjE8BKgz3rA5J0tWDqShNAhxu8e6FgfEZS+wwB8wXjs8DJtgEJmCmYO2pm0yNE6uiAcsL4DNAteeV02wx1PUtFbfqfijqH8sky4UqabDvKPh7wB17VDpW6mVrSs0yWTm2rlUydFTZwq2Dp7dCdwfp4DBVtKGk1w87DEECdy7VWlKUHmtm9zNTaqHknhqhngcuSFoDrmbllSafM7A3wDngPvI4uaklzku5KWi8QcpltSFqp6jJVoTdJkkfAUoN7zznnDsV02RfgG+BCcgMr62sUt1Vl6BzQNbNBcEgqbjMzBULfjyo/dgz47pzbiMnQMnBT0s/gtt83jyYFmQRjAB3gLXAjJkOPgUWaiUgxAc0BZ81sqD9+cp4J825Lc5SlHb+0Y2Z9M+vFdNkl4KKkveCLg6AECft/PQMdSZ+A3ji5bOCcm4hZoG3RrH2IXTE6WmpJ5P1+AcM2AFW9vgcF1aT+F6Bd4PM4MfQD2BknhobAdpui3vWFV5mo+20ASjP6DrBWsm4P+NqkMq0K6Ij/PW5mZaKd8jrK+9KNWlOvAueBTUlPfPVoGX0JeGlmPUnPg7rJAferAvo9ACN48DsfEdogAAAAAElFTkSuQmCC'; var imgPaint12 = undefined; var imgPaint24 = undefined; var imgPaint36 = undefined; var BASE64_IMG_DENT_12 = 'data:image/png;base64,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'; var BASE64_IMG_DENT_24 = 'data:image/png;base64,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'; var BASE64_IMG_DENT_36 = 'data:image/png;base64,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'; var imgDent12 = undefined; var imgDent24 = undefined; var imgDent36 = undefined; var BASE64_IMG_SCRATCH_12 = 'data:image/png;base64,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'; var BASE64_IMG_SCRATCH_24 = 'data:image/png;base64,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'; var BASE64_IMG_SCRATCH_36 = 'data:image/png;base64,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'; var imgScratch12 = undefined; var imgScratch24 = undefined; var imgScratch36 = undefined; var CONST_ZOOM_MIN = 0.25; var CONST_ZOOM_MAX = 4.0; var CONST_ZOOM_STEP = 0.25; var CONST_MOVE_STEP = 1; var CONST_SCROLL_STEP = 5; var updateLayerCombo = function(actions){ if(!actions || actions.length == 0){ return; } var layerCombo = $('.sub_menu_move_tool .selectLayer').empty(); $.each(actions, function(index) { var option = $(''); var text = ''; switch(this.tool){ case 'marker': text = 'Pencil'; break; case 'draw_arrow': text = 'Arrow'; break; case 'draw_mark': text = 'Check'; break; case 'draw_x': text = 'X'; break; case 'text': text = this.text; break; case 'shape_square': text = 'Rectangle'; break; case 'shape_square_circle': text = 'Rounded Rectangle'; break; case 'shape_triangle': text = 'Triangle'; break; case 'shape_circle': text = 'Circle'; break; default: text = this.tool; } option.text(text); layerCombo.append(option); }); layerCombo.val(actions.length - 1); } var isVersion = function(version){ var versionValue = parseFloat('' + version); if(currentVersion >= versionValue){ return true; }else{ return false; } } function drawRoundRect (cxt, x, y, width, height, radius) { cxt.beginPath(); cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5); cxt.lineTo(width - radius + x, y); cxt.arc(width - radius + x, y + radius, radius, Math.PI * 1.5, Math.PI * 2); cxt.lineTo(x + width, y + height - radius); cxt.arc(width - radius + x, y + height - radius, radius, 0, Math.PI * 0.5); cxt.lineTo(width - radius + x, y+ height); cxt.arc(x + radius, y + height - radius, radius, Math.PI *0.5, Math.PI); cxt.closePath(); } function drawEllipse(ctx, x, y, w, h) { var kappa = .5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end ye = y + h, // y-end xm = x + w / 2, // x-middle ym = y + h / 2; // y-middle ctx.beginPath(); ctx.moveTo(x, ym); ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); //ctx.closePath(); // not used correctly, see comments (use to close off open path) ctx.stroke(); } function rotation(x, y, alpha){ /* x' = cos(alpha)*x - sin(alpha)*y y' = sin(alpha)*x + cos(alpha)*y */ var x1 = (Math.cos(alpha) * x) - (Math.sin(alpha) * y); var y1 = (Math.sin(alpha) * x) + (Math.cos(alpha) * y); return {x:x1, y:y1}; } function move(action, width, height){ if(!action){ return; } var event, eventOrg, _i, _len, _ref, _refOrg; _ref = action.events; if(!action.eventsOrg){ action.eventsOrg = []; for (_i = 0, _len = _ref.length; _i < _len; _i++) { action.eventsOrg.push({x:_ref[_i].x, y:_ref[_i].y}); } } _refOrg = action.eventsOrg; for (_i = 0, _len = _ref.length; _i < _len; _i++) { event = _ref[_i]; eventOrg = _refOrg[_i]; event.x = eventOrg.x + width; event.y = eventOrg.y + height; } } function drawArrow(ctx, x, y, x2, y2) { var tx1 = -10; var ty1 = 0; var tx2 = 10; var ty2 = 5; var tx3 = 5; var ty3 = 0; var tx4 = 10; var ty4 = -5; var alpha = -Math.atan2((y2-y),-(x2-x)); var point = rotation(tx1, ty1, alpha); tx1 = point.x + x2; ty1 = point.y + y2; point = rotation(tx2, ty2, alpha); tx2 = point.x + x2; ty2 = point.y + y2; point = rotation(tx3, ty3, alpha); tx3 = point.x + x2; ty3 = point.y + y2; point = rotation(tx4, ty4, alpha); tx4 = point.x + x2; ty4 = point.y + y2; ctx.moveTo(x, y); ctx.lineTo(x2, y2); ctx.stroke(); var lineJoin = ctx.lineJoin; ctx.lineJoin = 'miter'; ctx.beginPath(); ctx.moveTo(tx1, ty1); ctx.lineTo(tx2, ty2); ctx.lineTo(tx3, ty3); ctx.lineTo(tx4, ty4); ctx.lineTo(tx1, ty1); ctx.lineTo(tx2, ty2); ctx.fill(); ctx.stroke(); ctx.lineJoin=lineJoin; } function drawCheckMark(ctx, x, y, w, h) { var y1 = y + 2*h/3; var x1 = x; var y2 = y+h; var x2 = x + w/3; var y3 = y; var x3 = x + w; var lineJoin = ctx.lineJoin; ctx.lineJoin = 'miter'; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineTo(x3, y3); ctx.stroke(); ctx.lineJoin = lineJoin; } function drawXMark(ctx, x, y, w, h) { ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.moveTo(x, y + h); ctx.lineTo(x + w, y); ctx.stroke(); } function drawPBMark(ctx, x, y, w, h) { /*var img = new Image(); img.src = '/img/icon/paintbrush_' + w + '.png'; ctx.drawImage(img, x-w/2, y-h/2, w, h);*/ switch(w){ case 12: if(imgPaint12 == undefined){ imgPaint12 = new Image(); imgPaint12.onload = function() { ctx.drawImage(imgPaint12, x-w/2, y-h/2, w, h); }; imgPaint12.src = BASE64_IMG_PAINT_12; }else{ ctx.drawImage(imgPaint12, x-w/2, y-h/2, w, h); } break; case 24: if(imgPaint24 == undefined){ imgPaint24 = new Image(); imgPaint24.onload = function() { ctx.drawImage(imgPaint24, x-w/2, y-h/2, w, h); }; imgPaint24.src = BASE64_IMG_PAINT_24; }else{ ctx.drawImage(imgPaint24, x-w/2, y-h/2, w, h); } break; case 36: default: //36 if(imgPaint36 == undefined){ imgPaint36 = new Image(); imgPaint36.onload = function() { ctx.drawImage(imgPaint36, x-w/2, y-h/2, w, h); }; imgPaint36.src = BASE64_IMG_PAINT_36; }else{ ctx.drawImage(imgPaint36, x-w/2, y-h/2, w, h); } } } function drawDentMark(ctx, x, y, w, h) { /*var img = new Image(); img.src = '/img/icon/dent_mark_' + w + '.png'; ctx.drawImage(img, x-w/2, y-h/2, w, h);*/ switch(w){ case 12: if(imgDent12 == undefined){ imgDent12 = new Image(); imgDent12.onload = function() { ctx.drawImage(imgDent12, x-w/2, y-h/2, w, h); }; imgDent12.src = BASE64_IMG_DENT_12; }else{ ctx.drawImage(imgDent12, x-w/2, y-h/2, w, h); } break; case 24: if(imgDent24 == undefined){ imgDent24 = new Image(); imgDent24.onload = function() { ctx.drawImage(imgDent24, x-w/2, y-h/2, w, h); }; imgDent24.src = BASE64_IMG_DENT_24; }else{ ctx.drawImage(imgDent24, x-w/2, y-h/2, w, h); } break; case 36: default: //36 if(imgDent36 == undefined){ imgDent36 = new Image(); imgDent36.onload = function() { ctx.drawImage(imgDent36, x-w/2, y-h/2, w, h); }; imgDent36.src = BASE64_IMG_DENT_36; }else{ ctx.drawImage(imgDent36, x-w/2, y-h/2, w, h); } } } function drawScratchMark(ctx, x, y, w, h) { /*var img = new Image(); img.src = '/img/icon/scratch_marks_' + w + '.png'; ctx.drawImage(img, x-w/2, y-h/2, w, h);*/ switch(w){ case 12: if(imgScratch12 == undefined){ imgScratch12 = new Image(); imgScratch12.onload = function() { ctx.drawImage(imgScratch12, x-w/2, y-h/2, w, h); }; imgScratch12.src = BASE64_IMG_SCRATCH_12; }else{ ctx.drawImage(imgScratch12, x-w/2, y-h/2, w, h); } break; case 24: if(imgScratch24 == undefined){ imgScratch24 = new Image(); imgScratch24.onload = function() { ctx.drawImage(imgScratch24, x-w/2, y-h/2, w, h); }; imgScratch24.src = BASE64_IMG_SCRATCH_24; }else{ ctx.drawImage(imgScratch24, x-w/2, y-h/2, w, h); } break; case 36: default: //36 if(imgScratch36 == undefined){ imgScratch36 = new Image(); imgScratch36.onload = function() { ctx.drawImage(imgScratch36, x-w/2, y-h/2, w, h); }; imgScratch36.src = BASE64_IMG_SCRATCH_36; }else{ ctx.drawImage(imgScratch36, x-w/2, y-h/2, w, h); } } } function drawQuestionMark(ctx, x, y, w, h) { /*var img = new Image(); img.src = '/img/icon/question_mark_' + w + '.png'; ctx.drawImage(img, x-w/2, y-h/2, w, h);*/ switch(w){ case 12: if(imgQuestion12 == undefined){ imgQuestion12 = new Image(); imgQuestion12.onload = function() { ctx.drawImage(imgQuestion12, x-w/2, y-h/2, w, h); }; imgQuestion12.src = BASE64_IMG_QUESTION_12; }else{ ctx.drawImage(imgQuestion12, x-w/2, y-h/2, w, h); } break; case 24: if(imgQuestion24 == undefined){ imgQuestion24 = new Image(); imgQuestion24.onload = function() { ctx.drawImage(imgQuestion24, x-w/2, y-h/2, w, h); }; imgQuestion24.src = BASE64_IMG_QUESTION_24; }else{ ctx.drawImage(imgQuestion24, x-w/2, y-h/2, w, h); } break; case 36: default: //36 if(imgQuestion36 == undefined){ imgQuestion36 = new Image(); imgQuestion36.onload = function() { ctx.drawImage(imgQuestion36, x-w/2, y-h/2, w, h); }; imgQuestion36.src = BASE64_IMG_QUESTION_36; }else{ ctx.drawImage(imgQuestion36, x-w/2, y-h/2, w, h); } } } function zoomValue(value, zoom){ if(zoom != 1){ return value/zoom; }else{ return value; } } function cnvZoomEventJson(ev, sketch){ /* ev = {x:..., y:..., ......} */ ev.x = zoomValue(ev.x, sketch.zoomInfo.zoom); ev.y = zoomValue(ev.y, sketch.zoomInfo.zoom); return ev; } (function($) { if(isVersion(VERSION_NEW_SKETCH)){ $('.VERSION_OLD_SKETCH').remove(); }else{ $('.VERSION_NEW_SKETCH').remove(); } var Sketch; $.fn.sketch = function() { var args, key, sketch; key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; if (this.length > 1) { $.error('Sketch.js can only be called on one element at a time.'); } sketch = this.data('sketch'); if (typeof key === 'string' && sketch) { if (sketch[key]) { if (typeof sketch[key] === 'function') { return sketch[key].apply(sketch, args); } else if (args.length === 0) { return sketch[key]; } else if (args.length === 1) { return sketch[key] = args[0]; } } else { return $.error('Sketch.js did not recognize the given command.'); } } else if (sketch) { return sketch; } else { this.data('sketch', new Sketch(this.get(0), key)); return this; } }; Sketch = (function() { function Sketch(el, opts) { this.el = el; this.canvas = $(el); this.scale = 1; this.context = el.getContext('2d'); this.options = $.extend({ toolLinks: true, defaultTool: 'marker', defaultKind: 'pencil', defaultColor: '#000', defaultSize: CONST_DEFAULT_SIZE, defaultMarkSize: 'markS', defaultXSize: 'xS', defaultPBSize: 'pbS', defaultDentSize: 'dentS', defaultScratchSize: 'scratchS', defaultQuestionSize: 'questionS', defaultFortSize: 'fontS' }, opts); this.painting = false; this.kind = this.options.defaultKind; this.color = this.options.defaultColor; this.size = this.options.defaultSize; this.markSize = this.options.defaultMarkSize; this.xSize = this.options.defaultXSize; this.pbSize = this.options.defaultPBSize; this.dentSize = this.options.defaultDentSize; this.scratchSize = this.options.defaultScratchSize; this.questionSize = this.options.defaultQuestionSize; this.fortSize = this.options.defaultFortSize; this.tool = this.options.defaultTool; this.actions = []; this.redoActions = []; this.action = []; this.backgroundimgs = []; this.hasBGImage = false; var canvasW; var canvasH; var zoom = 1; try{ canvasW = parseInt(this.canvas.css('--colorsSketchWidth')); canvasH = parseInt(this.canvas.css('--colorsSketchHeight')); if(isNaN(canvasW) || isNaN(canvasH)){ canvasW = this.canvas.width(); canvasH = this.canvas.height(); }else{ zoom = this.canvas.width() / canvasW; } }catch(e){ canvasW = this.canvas.width(); canvasH = this.canvas.height(); } this.zoomInfo = { width: canvasW, height: canvasH, zoom: zoom } //this.el.width = this.canvas.width(); if(this.canvas.attr("data-img") != undefined && this.canvas.attr("data-img") != ''){ var img = new Image(); var cxt = this.context; var scaleWidth = 1; var scaleHeigh = 1; var drawWidth = this.canvas.width() - 2; var drawHeight = this.canvas.height() - 2; var canvas = this.canvas; var me = this; img.onload = function() { me.hasBGImage = true; var heightTemp = drawHeight; if(img.width > drawWidth){ scaleWidth = drawWidth/img.width; heightTemp = img.height * scaleWidth; if(heightTemp > drawHeight){ heightTemp = drawHeight; scaleHeigh = drawHeight/img.height; drawWidth = img.width * scaleHeigh; me.scale = scaleHeigh; }else{ drawHeight = heightTemp; me.scale = scaleWidth; } }else if(img.width <= drawWidth){ drawWidth = img.width; if(img.height <= drawHeight){ drawHeight = img.height; }else{ scaleHeigh = drawHeight/img.height; drawWidth = img.width * scaleHeigh; me.scale = scaleHeigh; } } canvas.width(drawWidth); canvas.height(drawHeight); me.zoomInfo = { width: drawWidth, height: drawHeight, zoom: 1 } cxt.canvas.width = img.width; cxt.canvas.height = img.height; cxt.drawImage(img, 0, 0, img.width, img.height); }; img.src=this.canvas.attr("data-img"); $('#canvasPar').addClass('zoom'); this.backgroundimgs.push(img); } this.canvas.on('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent); if (this.options.toolLinks) { $('body').on('keyup', ".sub_menu_text_tool input.textString", function(e){ var $canvas, sketch; $canvas = $('#colors_sketch'); sketch = $canvas.data('sketch'); if(sketch.actions.length == 0){ return; } if(sketch.tool == 'draw_move'){ var moveAction; if(sketch.moveAction){ moveAction = sketch.moveAction; }else{ moveAction = sketch.actions[sketch.actions.length - 1]; } moveAction['text'] = $(this).val(); sketch.redraw(); } }); $('body').on('change', ".sub_menu_move_tool .selectLayer", function(e){ var $canvas, sketch; $canvas = $('#colors_sketch'); sketch = $canvas.data('sketch'); var actionId = $(this).val(); var action; if(actionId == ''){ action = sketch.actions[sketch.actions.length - 1]; }else{ action = sketch.actions[actionId]; } sketch.moveAction = action; $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); switch(action.tool){ case 'shape_square': // Rectangle; case 'shape_square_circle': // Rounded Rectangle case 'shape_triangle': // Triangle case 'shape_circle': // Circle case 'marker': // Pencil case 'draw_arrow': // Arrow $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-color=\"" + action.color + "\"]").click(); $("a[data-size=\"" + action.size + "\"]").click(); break; case 'draw_mark': // Check $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-marksize=\"" + action.markSize + "\"]").click(); break; case 'draw_x': // X $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-xsize=\"" + action.xSize + "\"]").click(); break; case 'draw_pb': // pb $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-pbsize=\"" + action.pbSize + "\"]").click(); break; case 'draw_dent': // dent $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-dentsize=\"" + action.dentSize + "\"]").click(); break; case 'draw_scratch': // scratch $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-scratchsize=\"" + action.scratchSize + "\"]").click(); break; case 'draw_question': // scratch $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-questionsize=\"" + action.questionSize + "\"]").click(); break; case 'text': // text; $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $("a[data-color=\"" + action.color + "\"]").click(); $("a[data-size=\"" + action.size + "\"]").click(); $(".sub_menu_text_tool input.textString").val(action.text); break; default: } }); $('body').on('click', "a[href=\"#" + (this.canvas.attr('id')) + "\"]", function(e) { var $canvas, $this, key, sketch, _i, _len, _ref; $this = $(this); $canvas = $($this.attr('href')); sketch = $canvas.data('sketch'); _ref = ['pencil', 'color', 'size', 'tool', 'shape', 'draw', 'fontSize', 'markSize', 'xSize', 'pbSize', 'dentSize', 'scratchSize', 'questionSize']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { key = _ref[_i]; var dataValue = $this.attr("data-" + key); if (dataValue) { if(key == 'pencil'){ if(dataValue == 'draw'){ $('.sub_pencil_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); continue } $('.pencilSelected').removeClass('pencilSelected'); $this.addClass('pencilSelected'); sketch.kind = dataValue; }else if(key == 'color'){ $('.colorSelected').removeClass('colorSelected'); $this.addClass('colorSelected'); var css = $(this).css('background-color'); $('.toolColor').css('background-color', css); }else if(key == 'size'){ $('.sizeSelected').removeClass('sizeSelected'); $this.addClass('sizeSelected'); }else if(key == 'fontSize'){ $('.fontSizeSelected').removeClass('fontSizeSelected'); $this.addClass('fontSizeSelected'); sketch.fontSize = dataValue; }else if(key == 'markSize'){ $('.markSizeSelected').removeClass('markSizeSelected'); $this.addClass('markSizeSelected'); sketch.markSize = dataValue; }else if(key == 'xSize'){ $('.xSizeSelected').removeClass('xSizeSelected'); $this.addClass('xSizeSelected'); sketch.xSize = dataValue; }else if(key == 'pbSize'){ $('.pbSizeSelected').removeClass('pbSizeSelected'); $this.addClass('pbSizeSelected'); sketch.pbSize = dataValue; }else if(key == 'dentSize'){ $('.dentSizeSelected').removeClass('dentSizeSelected'); $this.addClass('dentSizeSelected'); sketch.dentSize = dataValue; }else if(key == 'scratchSize'){ $('.scratchSizeSelected').removeClass('scratchSizeSelected'); $this.addClass('scratchSizeSelected'); sketch.scratchSize = dataValue; }else if(key == 'questionSize'){ $('.questionSizeSelected').removeClass('questionSizeSelected'); $this.addClass('questionSizeSelected'); sketch.questionSize = dataValue; }else if(key == 'shape'){ $('.shapeSelected').removeClass('shapeSelected'); $this.addClass('shapeSelected'); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); var css = $(this).css('background-image'); $('.toolShape').css('background-image', css).css('background-color', 'white'); sketch.tool = 'shape_' + dataValue; }else if(key == 'draw'){ $('.drawSelected').removeClass('drawSelected'); $this.addClass('drawSelected'); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); var css = $(this).css('background-image'); $('.toolDraw').css('background-image', css).css('background-color', 'white'); sketch.tool = 'draw_' + dataValue; if(dataValue == 'mark'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'x'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'move'){ $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); updateLayerCombo(sketch.actions); $(".sub_menu_move_tool .selectLayer").trigger('change'); }else if(dataValue == 'pb'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'dent'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'scratch'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'question'){ $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); }else{ $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); } } sketch.set(key, dataValue); if(sketch.tool == 'draw_move'){ var moveAction; if(sketch.moveAction){ moveAction = sketch.moveAction; }else{ moveAction = sketch.actions[sketch.actions.length - 1]; } moveAction[key] = dataValue; sketch.redraw(); } } } if ($(this).attr('data-download')) { sketch.download($(this).attr('data-download')); } if ($(this).attr('save-download')) { sketch.save($(this).attr('save-download')); } if ($(this).attr('sketch-clear')) { sketch.clear(); $('.toolPencil').click(); $('.color_000').click(); $('.size_' + CONST_DEFAULT_SIZE).click(); } if ($(this).attr('sketch-undo')) { sketch.undo(); } if ($(this).attr('sketch-redo')) { sketch.redo(); } if ($(this).attr('sketch-cancel')) { sketch.cancel(); } if ($(this).attr('sketch-tool-draw')) { $('.toolSelected').removeClass('toolSelected'); $(this).addClass('toolSelected'); $('a.toolColor').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').addClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); dataValue = $('.sub_draw_session .drawSelected').attr('data-draw'); if(dataValue == 'mark'){ $('.sub_mark_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'x'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); }else if(dataValue == 'move'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); updateLayerCombo(sketch.actions); }else if(dataValue == 'pb'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); updateLayerCombo(sketch.actions); }else if(dataValue == 'dent'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); updateLayerCombo(sketch.actions); }else if(dataValue == 'scratch'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); updateLayerCombo(sketch.actions); }else if(dataValue == 'question'){ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); updateLayerCombo(sketch.actions); }else{ $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); } sketch.tool = 'draw_' + dataValue; } if ($(this).attr('sketch-tool-text')) { $('.toolSelected').removeClass('toolSelected'); $(this).addClass('toolSelected'); $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); sketch.tool = 'text'; } if ($(this).attr('sketch-tool-pencil')) { $('.toolSelected').removeClass('toolSelected'); $(this).addClass('toolSelected'); $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); dataValue = $('.sub_draw_session .drawSelected').attr('data-pencil'); sketch.tool = 'marker'; } if ($(this).attr('sketch-tool-shape')) { $('.toolSelected').removeClass('toolSelected'); $(this).addClass('toolSelected'); $('a.toolColor').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('a.toolThickness').removeClass(CONST_CSS_CLASS_HIDE_SESSION_IMP); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); dataValue = $('.sub_shape_session .shapeSelected').attr('data-shape'); sketch.tool = 'shape_' + dataValue; } if ($(this).attr('sketch-tool-color')) { $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); } if ($(this).attr('sketch-tool_thickness')) { $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').removeClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); } if ($(this).attr('sketch-hand')) { sketch.hand($(this)); } if ($(this).attr('sketch-zoom-in')) { sketch.zoomIn(); } if ($(this).attr('sketch-zoom-out')) { sketch.zoomOut(); } return false; }); } } Sketch.prototype.download = function(format) { var mime; format || (format = "png"); if (format === "jpg") { format = "jpeg"; } mime = "image/" + format; return window.open(this.el.toDataURL(mime, image_quality)); }; Sketch.prototype.clear = function() { this.actions = []; this.redoActions = []; this.backgroundimgs = []; var ignoreOrgImage = false; if(this.canvas.attr("data-ctrl-kind") != undefined && this.canvas.attr("data-ctrl-kind") == 'signature'){ ignoreOrgImage = true; } if(this.canvas.attr("data-img-type") != undefined && this.canvas.attr("data-img-type").startsWith('inputSketch')){ if(this.canvas.attr("data-img-org") != undefined && this.canvas.attr("data-img-org") != ''){ var parentObj = this; $.alerts.okButton = 'Yes'; $.alerts.cancelButton = 'No'; jConfirm(msg_using_default_image,'',function(result, data){ $.alerts.okButton = CUSTOM_OK_BUTTON_LABEL; $.alerts.cancelButton = ' Cancel '; if(!result) { ignoreOrgImage = true; } if(!ignoreOrgImage && parentObj.canvas.attr("data-img-org") != undefined && parentObj.canvas.attr("data-img-org") != ''){ var img = new Image(); var cxt = parentObj.context; img.onload = function() { cxt.drawImage(img, 0, 0, cxt.canvas.width, cxt.canvas.height); }; img.src=parentObj.canvas.attr("data-img-org"); parentObj.backgroundimgs.push(img); }else{ parentObj.hasBGImage = false; } return parentObj.redraw(); }); return true; } } if(!ignoreOrgImage && this.canvas.attr("data-img-org") != undefined && this.canvas.attr("data-img-org") != ''){ var img = new Image(); var cxt = this.context; img.onload = function() { cxt.drawImage(img, 0, 0, cxt.canvas.width, cxt.canvas.height); }; img.src=this.canvas.attr("data-img-org"); this.backgroundimgs.push(img); }else{ this.hasBGImage = false; } return this.redraw(); }; Sketch.prototype.undo = function() { if(this.actions.length <= 0){ return; } this.redoActions.push(this.actions.pop()); return this.redraw(); }; Sketch.prototype.redo = function() { if(this.redoActions.length <= 0){ return; } this.actions.push(this.redoActions.pop()); return this.redraw(); }; Sketch.prototype.cancel = function() { return parent.jQuery.fancybox.close(); }; Sketch.prototype.save = function(format, blobkey) { var mime; format || (format = "png"); if (format === "jpg") { format = "jpeg"; } mime = "image/" + format; // CO-2573 var type = this.canvas.attr("data-img-type"); if(type == undefined){ type = ''; } //return window.open(this.el.toDataURL(mime, image_quality)); var boundary = "---------------------------7da24f2e50046"; var $data = '--' + boundary + '\r\n' // Parameter name is "file" and local filename is "temp.txt" + 'Content-Disposition: form-data; name="resourcesButtonFile";' + 'filename="signature." + format + \r\n' // Add the file's mime-type + 'Content-type: " + mime + "\r\n\r\n' // Add your data: + this.el.toDataURL(mime, image_quality) + '\r\n' + '--' + boundary + '--'; name: 'resourcesButtonFile', $.ajax({ url: '/dataview/imageLabel' + '?resourcesData=1' + '&label=1' + '&blobkey=' + blobkey + '&max_size=15' + '&base64encode=true' + '&type=' + type, contentType: 'multipart/form-data; charset=UTF-8; boundary=' + boundary, processData: false, type: 'POST', data: $data, cache: false, dataType: 'json', complete: function() { //waitForDataLoading(false); }, success: function(response, status) { if(response.Error != undefined){ alert(msg_upload_file_size_limit_10M); }else{ $('.hintLink').val(response.HintLink); $('input.file').val('signature.jpg'); $('input.blobKey').val(response.BlobKey); try { // Setting global variable of parent window parent.glbHashObject['flgHasClickButtonDoneOfSignature'] = true; } catch (e) {} parent.jQuery.fancybox.close(); } }, error: function(request, status, error) { alert(msg_error_try); } }); }; Sketch.prototype.set = function(key, value) { this[key] = value; return this.canvas.trigger("sketch.change" + key, value); }; Sketch.prototype.startPainting = function() { this.painting = true; return this.action = { tool: this.tool, color: this.color, size: this.size, markSize: this.markSize, xSize: this.xSize, pbSize: this.pbSize, dentSize: this.dentSize, scratchSize: this.scratchSize, questionSize: this.questionSize, fontSize: this.fontSize, events: [] }; }; Sketch.prototype.stopPainting = function() { if (this.action) { this.actions.push(this.action); this.redoActions = []; } this.painting = false; this.action = null; return this.redraw(); }; Sketch.prototype.onEvent = function(e) { if (e.originalEvent && e.originalEvent.targetTouches) { if (e.originalEvent.targetTouches[0] && e.originalEvent.targetTouches[0].pageX){ e.pageX = e.originalEvent.targetTouches[0].pageX; } if (e.originalEvent.targetTouches[0] && e.originalEvent.targetTouches[0].pageY){ e.pageY = e.originalEvent.targetTouches[0].pageY; } /*e.pageX = e.originalEvent.targetTouches[0].pageX; e.pageY = e.originalEvent.targetTouches[0].pageY;*/ } $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e); e.preventDefault(); return false; }; Sketch.prototype.redraw = function() { var sketch; //this.el.width = this.canvas.width(); this.context = this.el.getContext('2d'); var cxt = this.context; var drawWidth = this.canvas.width(); var drawHeight = this.canvas.height(); cxt.fillStyle = "white"; cxt.fillRect(0, 0, cxt.canvas.width, cxt.canvas.height); $.each(this.backgroundimgs, function() { cxt.drawImage(this, 0, 0, cxt.canvas.width, cxt.canvas.height); }); sketch = this; $.each(this.actions, function() { if (this.tool) { return $.sketch.tools[this.tool].draw.call(sketch, this); } }); if (this.painting && this.action) { return $.sketch.tools[this.action.tool].draw.call(sketch, this.action); } }; Sketch.prototype.hand = function(ctrl) { $('.toolSelected').removeClass('toolSelected'); ctrl.addClass('toolSelected'); $('.sub_pencil_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_zoom_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_shape_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_text_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_font_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_draw_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_move_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_thickness_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_mark_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_color_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_x_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_pb_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_dent_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_scratch_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); $('.sub_question_size_session').addClass(CONST_CSS_CLASS_HIDE_SESSION); this.tool = 'hand'; }; Sketch.prototype.zoomIn = function() { if(this.zoomInfo.zoom >= CONST_ZOOM_MAX){ return; } var canvas = $('canvas'); var width = this.zoomInfo.width; var height = this.zoomInfo.height; var scale = height/width; this.zoomInfo.zoom += CONST_ZOOM_STEP; width = width*this.zoomInfo.zoom; height = scale*width; canvas.css('width', width + 'px'); canvas.css('height', height + 'px'); $('#canvasPar').addClass('zoom'); this.redraw(); }; Sketch.prototype.zoomOut = function() { if(this.zoomInfo.zoom <= CONST_ZOOM_MIN){ return; } var canvas = $('canvas'); var width = this.zoomInfo.width; var height = this.zoomInfo.height; var scale = height/width; this.zoomInfo.zoom -= CONST_ZOOM_STEP; width = width*this.zoomInfo.zoom; height = scale*width; canvas.css('width', width + 'px'); canvas.css('height', height + 'px'); $('#canvasPar').addClass('zoom'); this.redraw(); }; return Sketch; })(); $.sketch = { tools: {} }; $.sketch.tools.marker = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); return this.redraw(); } }, draw: function(action) { var event, previous, _i, _len, _ref; this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } this.context.moveTo(action.events[0].x, action.events[0].y); _ref = action.events; for (_i = 0, _len = _ref.length; _i < _len; _i++) { event = _ref[_i]; this.context.lineTo(event.x, event.y); previous = event; } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; return this.context.stroke(); } }; $.sketch.tools.shape_square = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = 0; var y = 0; var width = 0; var height = 0; if(action.events[0].x == action.events[1].x){ x = action.events[0].x; width = 1; }else if(action.events[0].x > action.events[1].x){ x = action.events[1].x; width = action.events[0].x - action.events[1].x; }else{ x = action.events[0].x; width = action.events[1].x - action.events[0].x; } if(action.events[0].y == action.events[1].y){ y = action.events[0].y; height = 1; }else if(action.events[0].y > action.events[1].y){ y = action.events[1].y; height = action.events[0].y - action.events[1].y; }else{ y = action.events[0].y; height = action.events[1].y - action.events[0].y; } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; this.context.lineJoin = 'miter'; this.context.strokeRect(x,y,width,height); return this.context.stroke(); } }; $.sketch.tools.shape_square_circle = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = 0; var y = 0; var width = 0; var height = 0; var radius = 5; if(action.events[0].x == action.events[1].x){ x = action.events[0].x; width = 1; }else if(action.events[0].x > action.events[1].x){ x = action.events[1].x; width = action.events[0].x - action.events[1].x; }else{ x = action.events[0].x; width = action.events[1].x - action.events[0].x; } if(action.events[0].y == action.events[1].y){ y = action.events[0].y; height = 1; }else if(action.events[0].y > action.events[1].y){ y = action.events[1].y; height = action.events[0].y - action.events[1].y; }else{ y = action.events[0].y; height = action.events[1].y - action.events[0].y; } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; drawRoundRect(this.context, x, y , width, height, radius); return this.context.stroke(); } }; $.sketch.tools.shape_circle = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = 0; var y = 0; var width = 0; var height = 0; var radius = 5; if(action.events[0].x == action.events[1].x){ x = action.events[0].x; width = 1; }else if(action.events[0].x > action.events[1].x){ x = action.events[1].x; width = action.events[0].x - action.events[1].x; }else{ x = action.events[0].x; width = action.events[1].x - action.events[0].x; } if(action.events[0].y == action.events[1].y){ y = action.events[0].y; height = 1; }else if(action.events[0].y > action.events[1].y){ y = action.events[1].y; height = action.events[0].y - action.events[1].y; }else{ y = action.events[0].y; height = action.events[1].y - action.events[0].y; } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; drawEllipse(this.context, x, y, width, height); return this.context.stroke(); } }; $.sketch.tools.shape_line = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "square"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; this.context.moveTo(action.events[0].x, action.events[0].y); this.context.lineTo(action.events[1].x, action.events[1].y); return this.context.stroke(); } }; $.sketch.tools.draw_arrow = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "butt"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; this.context.fillStyle = action.color; drawArrow(this.context, action.events[0].x, action.events[0].y, action.events[1].x, action.events[1].y); return this.context.stroke(); } }; $.sketch.tools.draw_mark = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; var lineWidth = 0; switch(action.markSize){ case 'markL': width = 36; height = 36; lineWidth = 10; break; case 'markM': width = 24; height = 24; lineWidth = 5; break; default: width = 12; height = 12; lineWidth = 3; } this.context.strokeStyle = '#0f0'; //this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; this.context.lineWidth = lineWidth/this.scale; drawCheckMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.draw_x = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; var lineWidth = 0; switch(action.xSize){ case 'xL': width = 36; height = 36; lineWidth = 10; break; case 'xM': width = 24; height = 24; lineWidth = 5; break; default: width = 12; height = 12; lineWidth = 3; } this.context.strokeStyle = '#f00'; //this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; this.context.lineWidth = lineWidth/this.scale; drawXMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.draw_pb = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; switch(action.pbSize){ case 'pbL': width = 36; height = 36; break; case 'pbM': width = 24; height = 24; break; default: width = 12; height = 12; } this.context.strokeStyle = '#f00'; this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; drawPBMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.draw_dent = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; switch(action.dentSize){ case 'dentL': width = 36; height = 36; break; case 'dentM': width = 24; height = 24; break; default: width = 12; height = 12; } this.context.strokeStyle = '#f00'; this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; drawDentMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.draw_scratch = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; switch(action.scratchSize){ case 'scratchL': width = 36; height = 36; break; case 'scratchM': width = 24; height = 24; break; default: width = 12; height = 12; } this.context.strokeStyle = '#f00'; this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; drawScratchMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.draw_question = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { this.action.events[0] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); return this.redraw(); } }, draw: function(action) { this.context.lineJoin = "round"; this.context.lineCap = "round"; this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x = action.events[0].x; var y = action.events[0].y; var width = 0; var height = 0; switch(action.questionSize){ case 'questionL': width = 36; height = 36; break; case 'questionM': width = 24; height = 24; break; default: width = 12; height = 12; } this.context.strokeStyle = '#f00'; this.context.lineWidth = CONST_DEFAULT_SIZE/this.scale; drawQuestionMark(this.context, x, y, width/this.scale, height/this.scale); return this.context.stroke(); } }; $.sketch.tools.text = { onEvent: function(e) { if($('.sub_text_session .textString').val() == ''){ return; } switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.text = $('.sub_text_session .textString').val(); //this.action.fontSize = $('.sub_text_session .fontSize').val(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } this.context.strokeStyle = action.color; this.context.fillStyle = action.color; //this.context.font = action.fontSize + "px Arial"; if(action.fontSize == 'fontL'){ var size = Math.round(36/this.scale); this.context.font = size + 'px Arial'; }else if(action.fontSize == 'fontM'){ var size = Math.round(24/this.scale); this.context.font = size + 'px Arial'; }else{ var size = Math.round(12/this.scale); this.context.font = size + 'px Arial'; } var txt = action.text; this.context.fillText(txt, action.events[1].x, action.events[1].y); return this.context.stroke(); } }; $.sketch.tools.draw_move = { onEvent: function(e) { var selectedLayer = $('.sub_menu_move_tool .selectLayer').val(); if(selectedLayer == ''){ selectedLayer = this.actions.length - 1; } switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.action = null; this.actions[selectedLayer].eventsOrg = undefined; this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } var width = this.action.events[1].x - this.action.events[0].x; var height = this.action.events[1].y - this.action.events[0].y; move(this.actions[selectedLayer], width, height); return this.redraw(); } }, draw: function(action) { } }; $.sketch.tools.shape_triangle = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type, kind: this.kind }, this)); break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { if(this.action.events.length == 1){ this.action.events.push(cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this)); }else{ this.action.events[1] = cnvZoomEventJson({ x: (e.pageX - this.canvas.offset().left)/this.scale, y: (e.pageY - this.canvas.offset().top)/this.scale, event: e.type }, this); } return this.redraw(); } }, draw: function(action) { this.context.beginPath(); if(action.events[0].kind == 'dash'){ this.context.setLineDash(CONST_DASH_LINE[action.size]); }else{ this.context.setLineDash([]); } var x1,x2,x3,y1,y2,y3; x2 = action.events[1].x; y2 = action.events[1].y; x3 = action.events[0].x; y3 = action.events[1].y; x1 = action.events[0].x + (action.events[1].x - action.events[0].x)/2; y1 = action.events[0].y; this.context.strokeStyle = action.color; this.context.lineWidth = action.size/this.scale; var lineJoin = this.context.lineJoin; this.context.lineJoin = 'miter'; this.context.moveTo(x1, y1); this.context.lineTo(x2, y2); this.context.lineTo(x3, y3); this.context.lineTo(x1, y1); this.context.lineTo(x2, y2); return this.context.stroke(); this.context.lineJoin = lineJoin; } }; $.sketch.tools.hand = { onEvent: function(e) { switch (e.type) { case 'mousedown': case 'touchstart': this.startPainting(); this.x = e.pageX; this.y = e.pageY; break; case 'mouseup': case 'mouseout': case 'mouseleave': case 'touchend': case 'touchcancel': this.stopPainting(); } if (this.painting) { var canvasPar = $('div#canvasPar'); if((this.x+CONST_MOVE_STEP) <= e.pageX){ this.x = e.pageX; var curPos = canvasPar.scrollLeft(); canvasPar.scrollLeft(curPos - CONST_SCROLL_STEP); }else if((this.x-CONST_MOVE_STEP) > e.pageX){ this.x = e.pageX; var curPos = canvasPar.scrollLeft(); canvasPar.scrollLeft(curPos + CONST_SCROLL_STEP); } if((this.y+CONST_MOVE_STEP) <= e.pageY){ this.y = e.pageY; var curPos = canvasPar.scrollTop(); canvasPar.scrollTop(curPos - CONST_SCROLL_STEP); }else if((this.y-CONST_MOVE_STEP) > e.pageY){ this.y = e.pageY; var curPos = canvasPar.scrollTop(); canvasPar.scrollTop(curPos + CONST_SCROLL_STEP); } } }, draw: function(action) { } }; return $.sketch.tools.eraser = { onEvent: function(e) { return $.sketch.tools.marker.onEvent.call(this, e); }, draw: function(action) { var oldcomposite; oldcomposite = this.context.globalCompositeOperation; this.context.globalCompositeOperation = "copy"; action.color = "rgba(0,0,0,0)"; $.sketch.tools.marker.draw.call(this, action); return this.context.globalCompositeOperation = oldcomposite; } }; })(jQuery);