diff --git a/config.js b/config.js new file mode 100644 index 0000000..c8add3b --- /dev/null +++ b/config.js @@ -0,0 +1,41 @@ +/** + * main config file + * + * @author ViliusL + */ + +//canvas layers +var canvas_back = document.getElementById("canvas_back").getContext("2d"); //layer for grid/transparency +var canvas_main = document.getElementById("Background").getContext("2d"); //background +var canvas_front = document.getElementById("canvas_front").getContext("2d"); //tmp layer +var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //grid layer +var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview + +//global settings +var VERSION = '2.4'; +var WIDTH = 800; //default canvas midth +var HEIGHT = 600; //default canvas height +var COLOR = '#0000ff'; //active color +var ALPHA = 255; //active color alpha + +var DRAW_TOOLS_CONFIG = [ + {name: 'select_tool', title: 'Select object tool', icon: ['all.png', 0+7, 2], attributes: {} }, + {name: 'select_square', title: 'Select area tool', icon: ['all.png', -50+4, 5], attributes: {} }, + {name: 'magic_wand', title: 'Magic Wand Tool', icon: ['all.png', -150+1, -50+2], attributes: {sensitivity: 40, anti_aliasing: true} }, + {name: 'erase', title: 'Erase', icon: ['all.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} }, + {name: 'fill', title: 'Fill', icon: ['all.png', -150+3, 3], attributes: {sensitivity: 0, anti_aliasing: false} }, + {name: 'pick_color', title: 'Pick Color', icon: ['all.png', -200+3, 3], attributes: {} }, + {name: 'pencil', title: 'Pencil', icon: ['all.png', -250+3, 3], attributes: {} }, + {name: 'line', title: 'Draw line', icon: ['all.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } }, + {name: 'letters', title: 'Draw letters', icon: ['all.png', -350+3, 4], attributes: {} }, + {name: 'draw_square', title: 'Draw rectangle', icon: ['all.png', -400+3, 5], attributes: {fill: false, square: false} }, + {name: 'draw_circle', title: 'Draw circle', icon: ['all.png', -450+3, 5], attributes: {fill: false, circle: false} }, + {name: 'brush', title: 'Brush', icon: ['all.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', }, + {name: 'blur_tool', title: 'Blur tool', icon: ['all.png', -250+5, -50+2], attributes: {size: 30, strength: 1} }, + {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['all.png', -300+5, -50+2], attributes: {size: 30, strength: 0.5} }, + {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['all.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, + {name: 'desaturate_tool', title: 'Desaturate', icon: ['all.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} }, + {name: 'clone_tool', title: 'Clone tool', icon: ['all.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} }, + {name: 'gradient_tool', title: 'Gradient', icon: ['all.png', -400+3, -50+4], attributes: {radial: false, power: 50} }, + {name: 'crop_tool', title: 'Crop', icon: ['all.png', -450+2, -50+2], attributes: { } }, +]; diff --git a/index.html b/index.html index 7b0a851..ce515e5 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,11 @@ + miniPaint - online image editor - + @@ -22,17 +23,17 @@
- - + +

- Red:
- Green:
- Blue:
- Alpha: + Red:
+ Green:
+ Blue:
+ Alpha:
@@ -53,11 +54,11 @@
- - + + Zoom: 100%
- +
@@ -74,145 +75,145 @@
  • File
  • Edit
  • Image
  • Layer
  • Effects
  • Tools
  • Help
    • @@ -229,15 +230,22 @@ - + - - - - + + + + + + - - + + + + + + + diff --git a/js/controlls.js b/js/controlls.js deleted file mode 100644 index 64b9223..0000000 --- a/js/controlls.js +++ /dev/null @@ -1,707 +0,0 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, TOOLS, LAYER, DRAW, MENU */ -/* global ACTION, canvas_active, canvas_front, WIDTH, HEIGHT, ZOOM, EXIF */ - -var CON = new CONTROLLS_CLASS(); - -//keyboard handlers -document.onkeydown = function(e) {return CON.on_keyboard_action(e); }; -document.onkeyup = function(e) {return CON.on_keyboardup_action(e); }; -//mouse -window.ondrop = function(e){ CON.upload_drop(e); }; //drop -window.ondragover = function(e){e.preventDefault(); }; -document.onmousedown = CON.mouse_click; //mouse click -document.onmousemove = CON.mouse_move; //mouse move -document.onmouseup = CON.mouse_release; //mouse resease -document.addEventListener("mousewheel", CON.mouse_wheel_handler, false); //mouse scroll -document.addEventListener("DOMMouseScroll", CON.mouse_wheel_handler, false); //mouse scroll -window.onresize = CON.calc_preview_auto; //window resize -document.oncontextmenu = function(e) {return CON.mouse_right_click(e); }; //mouse right click -document.getElementById('color_hex').onkeyup = function(e){ TOOLS.set_color_manual(e); }; //on main color type -document.getElementById('color_hex').onpaste = function(e){ TOOLS.set_color_manual(e); }; // on paste in main color input - -function CONTROLLS_CLASS(){ - this.mouse; - this.ctrl_pressed = false; //17 - this.shift_pressed = false; //16 - this.ZOOM_X = 0; - this.ZOOM_Y = 0; - this.mini_rect_data = { w: 0, h:0 }; - this.isDrag = false; - this.sr_size = 8; //selected area resize rects size - this.clear_front_on_release = true; - var autosize = true; - var mouse_click_x = false; - var mouse_click_y = false; - var mouse_x_move_last = false; - var mouse_y_move_last = false; - var resize_all = false; - var mouse_click_valid = false; - var last_pop_click = [0, 0]; - var popup_pos_top = 0; - var popup_pos_left = 0; - var popup_dragable = false; - - //keyboard actions - this.on_keyboard_action = function(event){ - k = event.keyCode; //console.log(k); - - if(POP != undefined && POP.active==true && k != 27) return true; - if(document.activeElement.type == 'text') return true; - - //up - if(k == 38){ - if(ACTION=='select_tool'){ - MAIN.save_state(); - LAYER.layer_move_active(0, -1); - return false; - } - } - //down - else if(k == 40){ - if(ACTION=='select_tool'){ - MAIN.save_state(); - LAYER.layer_move_active(0, 1); - return false; - } - } - //left - else if(k == 39){ - if(ACTION=='select_tool'){ - MAIN.save_state(); - LAYER.layer_move_active(1, 0); - return false; - } - } - //right - else if(k == 37){ - if(ACTION=='select_tool'){ - MAIN.save_state(); - LAYER.layer_move_active(-1, 0); - return false; - } - } - //esc - else if(k == 27){ - if(POP != undefined && POP.active == true) - POP.hide(); - delete TOOLS.last_line_x; - delete TOOLS.last_line_y; - TOOLS.curve_points = []; - if(TOOLS.select_data != false){ - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - TOOLS.select_square_action = ''; - } - } - //z - undo - else if(k == 90){ - //undo - if(CON.ctrl_pressed==true) - MAIN.undo(); - } - //t - trim - else if(k == 84){ - MAIN.save_state(); - DRAW.trim(); - } - //o - open - else if(k == 79) - MENU.open(); - //s - save - else if(k == 83){ - if(POP != undefined) - MENU.save_dialog(event); - } - //l - rotate left - else if(k == 76){ - MAIN.save_state(); - MENU.rotate_resize_doc(270, WIDTH, HEIGHT); - MENU.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); - } - //r - resize - else if(k == 82) - MENU.resize_box(); - //grid - else if(k==71){ - if(MAIN.grid == false) - MAIN.grid = true; - else - MAIN.grid = false; - DRAW.draw_grid(); - } - //del - else if(k==46){ - if(TOOLS.select_data != false){ - MAIN.save_state(); - canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - TOOLS.select_data = false; - TOOLS.select_square_action = ''; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - } - //shift - else if(k==16) - CON.shift_pressed = true; - //ctrl - else if(k==17){ - if(CON.ctrl_pressed == false) - CON.ctrl_pressed = true; - } - //d - else if(k==68){ - MENU.do_menu(['layer_dublicate']); - } - //a - else if(k==65){ - if(CON.ctrl_pressed == true){ - TOOLS.select_data = { - x: 0, - y: 0, - w: WIDTH, - h: HEIGHT - }; - TOOLS.draw_selected_area(); - return false; - } - } - //v - else if(k==86){ - MAIN.save_state(); - if(CON.ctrl_pressed == true) - MENU.paste(); - } - //f - fix images - else if(k==70){ - MAIN.save_state(); - DRAW.auto_adjust(canvas_active(), WIDTH, HEIGHT); - } - //h - histogram - else if(k==72){ - TOOLS.histogram(); - } - //- - else if(k==109) - DRAW.zoom(-1); - //+ - else if(k==107) - DRAW.zoom(+1); - //n - new layer - else if(k==78) - MENU.add_layer(); - - //mac support - ctrl - if(k==17 || event.metaKey || event.ctrlKey){ - if(CON.ctrl_pressed == false) - CON.ctrl_pressed = true; - } - - DRAW.zoom(); - return true; - }; - //keyboard release - this.on_keyboardup_action = function(event){ - k = event.keyCode; - //shift - if(k==16) - CON.shift_pressed = false; - //ctrl - else if(k==17) - CON.ctrl_pressed = false; - //mac support - ctrl - if(event.metaKey || event.ctrlKey || event.key == 'Meta') - CON.ctrl_pressed = false; - }; - // mouse_x, mouse_y, event.pageX, event.pageY - this.get_mouse_position = function(event){ - var valid = true; - if(event.offsetX) { - mouse_rel_x = event.offsetX; - mouse_rel_y = event.offsetY; - } - else if(event.layerX) { - mouse_rel_x = event.layerX; - mouse_rel_y = event.layerY; - } - else - return false; - mouse_x = event.pageX; - mouse_y = event.pageY; - var abs_x = event.pageX; - var abs_y = event.pageY; - - if(event.target.id == "canvas_front"){ - //in canvas area - relative pos - mouse_x = mouse_rel_x; - mouse_y = mouse_rel_y; - if(ZOOM != 100 ){ - mouse_x = Math.floor(mouse_x / ZOOM * 100); - mouse_y = Math.floor(mouse_y / ZOOM * 100); - } - } - else{ - //outside canvas - absolute pos - canvas offset - mouse_x = mouse_x - 109; - mouse_y = mouse_y - 34; - valid = false; - } - if(event.target.id == "canvas_preview"){ - //in preview area - relative pos - mouse_x = mouse_rel_x; - mouse_y = mouse_rel_y; - } - - //save - other place will use it too - CON.mouse = { - x: mouse_x, - y: mouse_y, - click_x: mouse_click_x, - click_y: mouse_click_y, - last_x: mouse_x_move_last, - last_y: mouse_y_move_last, - valid: valid, - click_valid: mouse_click_valid, - abs_x: abs_x, - abs_y: abs_y - }; - }; - //mouse right click - this.mouse_right_click = function(event){ - if(POP != undefined && POP.active==true) return true; - CON.get_mouse_position(event); - mouse_click_x = CON.mouse.x; - mouse_click_y = CON.mouse.y; - - for (var i in TOOLS){ - if(i == ACTION){ - return TOOLS[i]('right_click', CON.mouse, event); - break; - } - } - }; - //mouse click - this.mouse_click = function(event){ - CON.isDrag = true; - if(POP != undefined && POP.active==true){ - CON.get_mouse_position(event); - last_pop_click[0] = CON.mouse.abs_x; - last_pop_click[1] = CON.mouse.abs_y; - popup = document.getElementById('popup'); - popup_pos_top = parseInt(popup.style.top); - popup_pos_left = parseInt(popup.style.left); - if(event.target.id == "popup_drag") - popup_dragable = true; - else - popup_dragable = false; - return true; - } - if(event.which == 3) return true; - CON.get_mouse_position(event); - mouse_click_x = CON.mouse.x; - mouse_click_y = CON.mouse.y; - if(CON.mouse.valid == false) - mouse_click_valid = false; - else - mouse_click_valid = true; - - - //check tools functions - for (var i in TOOLS){ - if(i == ACTION){ - TOOLS[i]('click', CON.mouse, event); - break; - } - } - - if(event.target.id == "canvas_preview") - CON.calc_preview_by_mouse(CON.mouse.x, CON.mouse.y); - - //main window resize - resize_all = false; - if(ZOOM == 100){ - if(event.target.id == "resize-w") resize_all = "w"; - else if(event.target.id == "resize-h") resize_all = "h"; - else if(event.target.id == "resize-wh") resize_all = "wh"; - } - }; - //mouse move - this.mouse_move = function(event){ - if(POP != undefined && POP.active==true){ - //drag popup - if(CON.isDrag==true && popup_dragable == true){ - CON.get_mouse_position(event); - popup = document.getElementById('popup'); - popup.style.top = (popup_pos_top + CON.mouse.abs_y - last_pop_click[1])+'px'; - popup.style.left = (popup_pos_left + CON.mouse.abs_x - last_pop_click[0])+'px'; - } - return true; - } - CON.get_mouse_position(event); - if(event.target.id == "canvas_preview" && CON.isDrag==true) - CON.calc_preview_by_mouse(CON.mouse.x, CON.mouse.y); - LAYER.update_info_block(); - - //main window resize - if(ZOOM == 100){ - if(event.target.id == "resize-w") document.body.style.cursor = "w-resize"; - else if(event.target.id == "resize-h") document.body.style.cursor = "n-resize"; - else if(event.target.id == "resize-wh") document.body.style.cursor = "nw-resize"; - else document.body.style.cursor = "auto"; - if(resize_all != false && CON.isDrag==true){ - document.body.style.cursor = "auto"; - if(resize_all == "w"){ - new_w = CON.mouse.x; - new_h = HEIGHT; - } - else if(resize_all == "h"){ - new_w = WIDTH; - new_h = CON.mouse.y; - } - else if(resize_all == "wh"){ - new_w = CON.mouse.x; - new_h = CON.mouse.y; - } - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.lineWidth = 1; - canvas_front.fillStyle = "#ff0000"; - HELPER.dashedRect(canvas_front, 0, 0, new_w-1, new_h-1); - event.preventDefault(); - HELPER.remove_selection(); - return false; - } - } - //check tools functions - if(CON.isDrag === false){ - for (i in TOOLS){ - if(i == ACTION){ - TOOLS[i]('move', CON.mouse, event); - break; - } - } - } - - - if(CON.isDrag === false) return false; //only drag now - - //check tools functions - for (var i in TOOLS){ - if(i == ACTION){ - TOOLS[i]('drag', CON.mouse, event); - break; - } - } - - if(ACTION != 'select_square') - TOOLS.select_square_action = ''; - - mouse_x_move_last = CON.mouse.x; - mouse_y_move_last = CON.mouse.y; - }; - //release mouse click - this.mouse_release = function(event){ - CON.isDrag = false; - if(POP != undefined && POP.active==true) return true; - var mouse = CON.get_mouse_position(event); - mouse_x_move_last = false; - mouse_y_move_last = false; - if(TOOLS.select_square_action == '' && CON.mouse.valid == true) - TOOLS.select_data = false; - - //check tools functions - if(CON.clear_front_on_release == true) - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - TOOLS.draw_selected_area(); - for (var i in TOOLS){ - if(i == ACTION){ - TOOLS[i]('release', CON.mouse, event); - break; - } - } - - //main window resize - if(resize_all != false && ZOOM == 100 && CON.mouse.x > 0 && CON.mouse.y > 0){ - CON.autosize = false; - document.body.style.cursor = "auto"; - if(resize_all == "w") - WIDTH = CON.mouse.x; - else if(resize_all == "h") - HEIGHT = CON.mouse.y; - else if(resize_all == "wh"){ - WIDTH = mouse_x; - HEIGHT = CON.mouse.y; - } - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - DRAW.zoom(); - } - resize_all = false; - DRAW.zoom(); - }; - //upload drop zone - this.upload_drop = function(e){ - e.preventDefault(); - MAIN.save_state(); - var n_valid = 0; - for (var i = 0, f; i < e.dataTransfer.files.length ; i++){ - f = e.dataTransfer.files[i]; - if(!f.type.match('image.*') && f.type != 'text/xml') continue; - n_valid++; - - var FR = new FileReader(); - FR.file = e.dataTransfer.files[i]; - - if(e.dataTransfer.files.length == 1) - SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; - - FR.onload = function(event){ - if(this.file.type != 'text/xml'){ - //image - LAYER.layer_add(this.file.name, event.target.result, this.file.type); - EXIF.getData(this.file, TOOLS.save_EXIF); - } - else{ - //xml - var responce = MAIN.load_xml(event.target.result); - if(responce === true) - return false; - } - }; - if(f.type == "text/plain") - FR.readAsText(f); - else if(f.type == "text/xml") - FR.readAsText(f); - else - FR.readAsDataURL(f); - } - if(n_valid == 0) - progress.style.display='none'; - }; - this.mouse_wheel_handler = function(e){ //return true; - var step = 100; e.preventDefault(); - //zoom - if(CON.ctrl_pressed==true){ - var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); - if(ZOOM <=100 && delta < 0) - step = 10; - if(ZOOM <100 && delta > 0) - step = 10; - delta = delta * step; - if(ZOOM + delta > 0){ - ZOOM = ZOOM + delta; - CON.calc_preview_auto(); - DRAW.zoom(); - } - if(TOOLS.action_data().name == 'zoom'){ - TOOLS.action_data().attributes.zoom = ZOOM; - show_action_attributes(); - } - - //disable page scroll if ctrl pressed - e.preventDefault(); - return false; - } - }; - this.scroll_window = function(){ - var pad_left = 109; - var pad_top = 34; - var pad_right = 170; - var dim = HELPER.get_dimensions(); - var page_w = dim[0]; - var page_h = dim[1]; - var total_w = (WIDTH * ZOOM/100) + pad_left + pad_right; - var total_h = (HEIGHT * ZOOM/100) + pad_top; - var visible_w = page_w - 60; - var visible_h = page_h - 60; - - var scrollbar_w = page_w * visible_w / total_w; - var scrollbar_h = page_h * visible_h / total_h; - - xx = total_w * CON.ZOOM_X / (DRAW.PREVIEW_SIZE.w); - yy = total_h * CON.ZOOM_Y / (DRAW.PREVIEW_SIZE.h ); - - //minuus scrollbar size - xx = xx - scrollbar_w/2; - yy = yy - scrollbar_h/2; - - var canvas_wrapper = document.getElementById('canvas_wrapper'); - canvas_wrapper.scrollTop = yy; - canvas_wrapper.scrollLeft = xx; - }; - this.calc_preview_by_mouse = function(mouse_x, mouse_y){ - CON.ZOOM_X = mouse_x - CON.mini_rect_data.w/2; - CON.ZOOM_Y = mouse_y - CON.mini_rect_data.h/2; - if(CON.ZOOM_X < 0) CON.ZOOM_X = 0; - if(CON.ZOOM_Y < 0) CON.ZOOM_Y = 0; - - DRAW.zoom(undefined, true); - return true; - }; - this.calc_preview_auto = function(){ - var pad_left = 109; - var pad_top = 34; - var pad_right = 170; - var dim = HELPER.get_dimensions(); - var page_w = dim[0]; - var page_h = dim[1]; - var total_w = (WIDTH * ZOOM/100) + pad_left + pad_right; - var total_h = (HEIGHT * ZOOM/100) + pad_top; - var visible_w = page_w - 60; - var visible_h = page_h - 60; - - CON.mini_rect_data.w = round(visible_w * DRAW.PREVIEW_SIZE.w / total_w); - CON.mini_rect_data.h = round(visible_h * DRAW.PREVIEW_SIZE.h / total_h); - - DRAW.redraw_preview(); - }; - } - -//=== Clipboard ================================================================ - -var CLIPBOARD = new CLIPBOARD_CLASS('cc'); - -function CLIPBOARD_CLASS(canvas_id){ - var _self = this; - var ctrl_pressed = false; - var reading_dom = false; - var text_top = 15; - var pasteCatcher; - var paste_mode; - - //handlers - document.addEventListener('keydown', function(e){ _self.on_keyboard_action(e); }, false); - document.addEventListener('keyup', function(e){ _self.on_keyboardup_action(e); }, false); - document.addEventListener('paste', function(e){ _self.paste_auto(e); }, false); - - //constructor - prepare - this.init = function(){ - //if using auto - if(window.Clipboard) return true; - - pasteCatcher = document.createElement("div"); - pasteCatcher.setAttribute("id", "paste_ff"); - pasteCatcher.setAttribute("contenteditable", ""); - pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;'; - pasteCatcher.style.marginLeft = "-20px"; - pasteCatcher.style.width = "10px"; - document.body.appendChild(pasteCatcher); - document.getElementById('paste_ff').addEventListener('DOMSubtreeModified', function(){ - reading_dom = false; - if(paste_mode == 'auto' || ctrl_pressed == false) return true; - //if paste handle failed - capture pasted object manually - if(pasteCatcher.children.length == 1){ - if(pasteCatcher.firstElementChild.src != undefined){ - //image - img = pasteCatcher.firstElementChild.src; - _self.paste_createImage(pasteCatcher.firstElementChild.src); - } - else{ - //html - /*setTimeout(function(){ - if(reading_dom == true) return false; - _self.paste_createText(pasteCatcher.innerHTML, false); - reading_dom = true; - }, 10);*/ - } - } - /*else if(pasteCatcher.children.length == 0){ - //text - setTimeout(function(){ - if(reading_dom == true) return false; - _self.paste_createText(pasteCatcher.innerHTML, false); - reading_dom = true; - }, 10); - }*/ - //register cleanup after some time. - setTimeout(function(){ - pasteCatcher.innerHTML = ''; - }, 20); - },false); - }(); - //default paste action - this.paste_auto = function(e){ - paste_mode = ''; - pasteCatcher.innerHTML = ''; - var plain_text_used = false; - - - - if(e.clipboardData){ - var items = e.clipboardData.items; - if (items){ - paste_mode = 'auto'; - //access data directly - for (var i = 0; i < items.length; i++){ - if(items[i].type.indexOf("image") !== -1){ - //image - var blob = items[i].getAsFile(); - var URLObj = window.URL || window.webkitURL; - var source = URLObj.createObjectURL(blob); - this.paste_createImage(source); - } - else if(items[i].type.indexOf("text") !== -1){ - //text or html - /*if(plain_text_used == false) - this.paste_createText(e.clipboardData.getData('text/plain')); - plain_text_used = true;*/ - } - } - e.preventDefault(); - } - else{ - //wait for DOMSubtreeModified event - //https://bugzilla.mozilla.org/show_bug.cgi?id=891247 - } - } - }; - //on keyboard press - this.on_keyboard_action = function(event){ - if(POP.active == true) return true; - k = event.keyCode; - //ctrl - if(k==17 || event.metaKey || event.ctrlKey){ - if(ctrl_pressed == false) - ctrl_pressed = true; - } - //v - if(k==86){ - if(document.activeElement != undefined && document.activeElement.type == 'text'){ - //let user paste into some input - return false; - } - - if(ctrl_pressed == true && !window.Clipboard) - pasteCatcher.focus(); - } - }; - //on kaybord release - this.on_keyboardup_action = function(event){ - k = event.keyCode; - //ctrl - if(k==17 || event.metaKey || event.ctrlKey || event.key == 'Meta') - ctrl_pressed = false; - }; - //draw image - this.paste_createImage = function(source){ - var pastedImage = new Image(); - pastedImage.onload = function(){ - LAYER.layer_add('Paste', source); - }; - pastedImage.src = source; - }; - //draw text - this.paste_createText = function(text, parsed){ - var ctx = canvas_active(); - if(text == '') return false; - if(parsed == false){ - text = text.replace(//gi, "\n"); - text = text.replace(/(<([^>]+)>)/g, ""); - text = text.replace(/ /gi, " "); - } - ctx.font = '13px Tahoma'; - var lines = text.split("\n"); - for(var i in lines){ - ctx.fillText(lines[i], 10, text_top); - text_top += 15; - } - text_top += 15; - }; - }; diff --git a/js/draw.js b/js/draw.js deleted file mode 100644 index f5f210e..0000000 --- a/js/draw.js +++ /dev/null @@ -1,914 +0,0 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, LAYER, DRAW, MENU */ -/* global ACTION, canvas_active, canvas_front, canvas_preview, canvas_grid, WIDTH, HEIGHT, ZOOM, ImageFilters */ - -var DRAW = new DRAW_CLASS(); - -function DRAW_CLASS(){ - this.PREVIEW_SIZE = {w: 148, h: 100 }; - this.grid_size = [50, 50]; - - this.draw_grid = function(gap_x, gap_y){ - if(MAIN.grid == false){ - document.getElementById("canvas_grid").style.display = 'none'; - return false; - } - else{ - document.getElementById("canvas_grid").style.display = ''; - canvas_grid.clearRect(0, 0, WIDTH, HEIGHT); - } - - //size - if(gap_x != undefined && gap_y != undefined) - this.grid_size = [gap_x, gap_y]; - else{ - gap_x = this.grid_size[0]; - gap_y = this.grid_size[1]; - } - gap_x = parseInt(gap_x); - gap_y = parseInt(gap_y); - if(gap_x<2) gap_x=2; - if(gap_y<2) gap_y=2; - for(var i=gap_x; i 0){ - var curPoint = stack.pop(); - for (var i = 0; i < 4; i++){ - var nextPointX = curPoint[0] + dx[i]; - var nextPointY = curPoint[1] + dy[i]; - if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H) - continue; - var k = (nextPointY * W + nextPointX) * 4; - if(imgData_tmp[k+3] != 0) continue; //already parsed - - //check - if(Math.abs(imgData[k+0] - color_from.r) <= sensitivity && - Math.abs(imgData[k+1] - color_from.g) <= sensitivity && - Math.abs(imgData[k+2] - color_from.b) <= sensitivity && - Math.abs(imgData[k+3] - color_from.a) <= sensitivity){ - //fill pixel - imgData_tmp[k] = color_to.r; //r - imgData_tmp[k+1] = color_to.g; //g - imgData_tmp[k+2] = color_to.b; //b - imgData_tmp[k+3] = color_to.a; //a - - stack.push([nextPointX, nextPointY]); - } - } - } - canvas_front.putImageData(img_tmp, 0, 0); - if(anti_aliasing == true){ - context.shadowColor = "rgba("+color_to.r+", "+color_to.g+", "+color_to.b+", "+color_to.a/255+")"; - context.shadowBlur = 5; - } - context.drawImage(document.getElementById("canvas_front"), 0, 0); - //reset - context.shadowBlur = 0; - }; - this.tool_magic_wand = function(context, W, H, x, y, sensitivity, anti_aliasing){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - - canvas_front.rect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "rgba(255, 255, 255, 0)"; - canvas_front.fill(); - - var img_tmp = canvas_front.getImageData(0, 0, W, H); - var imgData_tmp = img_tmp.data; - - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var k = ((y * (img.width * 4)) + (x * 4)); - var dx = [ 0, -1, +1, 0]; - var dy = [-1, 0, 0, +1]; - var color_to = { - r: 255, - g: 255, - b: 255, - a: 255 - }; - var color_from = { - r: imgData[k+0], - g: imgData[k+1], - b: imgData[k+2], - a: imgData[k+3] - }; - if(color_from.r == color_to.r && - color_from.g == color_to.g && - color_from.b == color_to.b && - color_from.a == 0){ - return false; - } - var stack = []; - stack.push([x, y]); - while (stack.length > 0){ - var curPoint = stack.pop(); - for (var i = 0; i < 4; i++){ - var nextPointX = curPoint[0] + dx[i]; - var nextPointY = curPoint[1] + dy[i]; - if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H) - continue; - var k = (nextPointY * W + nextPointX) * 4; - if(imgData_tmp[k+3] != 0) continue; //already parsed - - if(Math.abs(imgData[k] - color_from.r) <= sensitivity - && Math.abs(imgData[k+1] - color_from.g) <= sensitivity - && Math.abs(imgData[k+2] - color_from.b) <= sensitivity - && Math.abs(imgData[k+3] - color_from.a) <= sensitivity){ - imgData_tmp[k] = color_to.r; //r - imgData_tmp[k+1] = color_to.g; //g - imgData_tmp[k+2] = color_to.b; //b - imgData_tmp[k+3] = color_to.a; //a - - stack.push([nextPointX, nextPointY]); - } - } - } - //destination-out + blur = anti-aliasing - if(anti_aliasing == true) - img_tmp = ImageFilters.StackBlur(img_tmp, 2); - canvas_front.putImageData(img_tmp, 0, 0); - context.globalCompositeOperation = "destination-out"; - context.drawImage(document.getElementById("canvas_front"), 0, 0); - //reset - context.shadowBlur = 0; - context.globalCompositeOperation = 'source-over'; - }; - this.if_blank = function(canvas){ - var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); - var imgData = img.data; - - if(MAIN.TRANSPARENCY == false){ - //transparency disabled - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i] < 255 || imgData[i+1] < 255 || imgData[i+2] < 255) return false; - } - } - else{ - //transparenc enabled - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if(imgData[i] < 255 || imgData[i+1] < 255 || imgData[i+2] < 255) return false; - } - } - return true; - }; - this.trim_info = function(canvas, trim_white, include_white){ - var top = 0; - var left = 0; - var bottom = 0; - var right = 0; - var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); - var imgData = img.data; - //check top - main1: - for(var y = 0; y < img.height; y++){ - for(var x = 0; x < img.width; x++){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main1; - } - top++; - } - //check left - main2: - for(var x = 0; x < img.width; x++){ - for(var y = 0; y < img.height; y++){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main2; - } - left++; - } - //check bottom - main3: - for(var y = img.height-1; y >= 0; y--){ - for(var x = img.width-1; x >= 0; x--){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main3; - } - bottom++; - } - //check right - main4: - for(var x = img.width-1; x >= 0; x--){ - for(var y = img.height-1; y >= 0; y--){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main4; - } - right++; - } - return { - top: top, - left: left, - bottom: bottom, - right: right - }; - }; - this.trim = function(layer, no_resize, include_white){ - var all_top = HEIGHT; - var all_left = WIDTH; - var all_bottom = HEIGHT; - var all_right = WIDTH; - for(var i in LAYERS){ - if(layer != undefined && LAYERS[i].name != layer) continue; - - var top = 0; - var left = 0; - var bottom = 0; - var right = 0; - var img = document.getElementById(LAYERS[i].name).getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); - var imgData = img.data; - //check top - main1: - for(var y = 0; y < img.height; y++){ - for(var x = 0; x < img.width; x++){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main1; - } - top++; - } - //check left - main2: - for(var x = 0; x < img.width; x++){ - for(var y = 0; y < img.height; y++){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main2; - } - left++; - } - //check bottom - main3: - for(var y = img.height-1; y >= 0; y--){ - for(var x = img.width-1; x >= 0; x--){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main3; - } - bottom++; - } - //check right - main4: - for(var x = img.width-1; x >= 0; x--){ - for(var y = img.height-1; y >= 0; y--){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] == 0) continue; //transparent - if(include_white !== true && imgData[k] == 255 && imgData[k+1] == 255 && imgData[k+2] == 255) continue; //white - break main4; - } - right++; - } - all_top = Math.min(all_top, top); - all_left = Math.min(all_left, left); - all_bottom = Math.min(all_bottom, bottom); - all_right = Math.min(all_right, right); - } - //move to top-left corner - for(var i in LAYERS){ - if(layer != undefined && LAYERS[i].name != layer) continue; - - tmp_data = document.getElementById(LAYERS[i].name).getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); - document.getElementById(LAYERS[i].name).getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); - document.getElementById(LAYERS[i].name).getContext("2d").putImageData(tmp_data, -all_left, -all_top); - var canvas_name = LAYERS[i].name; - } - //resize - if(no_resize != undefined) return false; - if(layer != undefined){ - var W = round(WIDTH - all_left - all_right); - var H = round(HEIGHT - all_top - all_bottom); - - var imageData = document.getElementById(layer).getContext("2d").getImageData(0, 0, W, H); - document.getElementById(layer).width = W; - document.getElementById(layer).height = H; - document.getElementById(layer).getContext("2d").clearRect(0, 0, W, H); - document.getElementById(layer).getContext("2d").putImageData(imageData, 0, 0); - - return { - top: all_top, - left: all_left, - bottom: all_bottom, - right: all_right - }; - } - else{ - WIDTH = WIDTH - all_left - all_right; - HEIGHT = HEIGHT - all_top - all_bottom; - if(WIDTH<1) WIDTH = 1; - if(HEIGHT<1) HEIGHT = 1; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - LAYER.update_info_block(); - }; - this.effect_bw = function(context, W, H, level, dithering){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var grey, c, quant_error, m; - if(dithering !== true){ - //no differing - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - if(grey <= level) - c = 0; - else - c = 255; - imgData[i] = c; - imgData[i+1] = c; - imgData[i+2] = c; - } - } - else{ - //Floyd–Steinberg dithering - canvas_front.clearRect(0, 0, W, H); //temp canvas for storing pixel data shifts - var img2 = canvas_front.getImageData(0, 0, W, H); - var imgData2 = img2.data; - for(var j = 0; j < H; j++){ - for(var i = 0; i < W; i++){ - var k = ((j * (W * 4)) + (i * 4)); - if(imgData[k+3] == 0) continue; //transparent - - grey = round(0.2126 * imgData[k] + 0.7152 * imgData[k+1] + 0.0722 * imgData[k+2]); - grey = grey + imgData2[k]; //add data shft from previous iterations - c = Math.floor(grey / 256); - if(c == 1) - c = 255; - imgData[k] = c; - imgData[k+1] = c; - imgData[k+2] = c; - quant_error = grey - c; - if(i+1 < W){ - m = k + 4; - imgData2[m] += Math.round(quant_error * 7/16); - } - if(i-1 > 0 && j+1 < H){ - m = k - 4 + W*4; - imgData2[m] += Math.round(quant_error * 3/16); - } - if(j+1 < H){ - m = k + W*4; - imgData2[m] += Math.round(quant_error * 5/16); - } - if(i+1 < W && j+1 < H){ - m = k + 4 + W*4; - imgData2[m] += Math.round(quant_error * 1/16); - } - } - } - } - context.putImageData(img, 0, 0); - }; - this.decrease_colors = function(canvas_source, canvas_destination, W, H, colors, dithering, greyscale){ - var context = canvas_destination.getContext("2d"); - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var palette = []; - - //collect top colors - var block_size = 10; - var ctx = canvas_front; //use temp canvas - ctx.clearRect(0, 0, W, H); - ctx.drawImage(canvas_source, 0, 0, Math.ceil(canvas_source.width/block_size), Math.ceil(canvas_source.height/block_size)); //simple resize - var img_p = ctx.getImageData(0, 0, Math.ceil(canvas_source.width/block_size), Math.ceil(canvas_source.height/block_size)); - var imgData_p = img_p.data; - ctx.clearRect(0, 0, W, H); - - for(var i = 0; i < imgData_p.length; i += 4){ - if(imgData_p[i+3] == 0) continue; //transparent - var grey = round(0.2126 * imgData_p[i] + 0.7152 * imgData_p[i+1] + 0.0722 * imgData_p[i+2]); - palette.push([ imgData_p[i], imgData_p[i+1], imgData_p[i+2], grey ]); - } - - //calculate weights - var grey_palette = []; - for(var i = 0; i < 256; i++) - grey_palette[i] = 0; - for(var i = 0; i < palette.length; i++) - grey_palette[palette[i][3]]++; - - //remove similar colors - for(var max = 10*3; max < 100*3; max = max + 10*3){ - if(palette.length <= colors) break; - for(var i = 0; i < palette.length; i++){ - if(palette.length <= colors) break; - var valid = true; - for(var j = 0; j < palette.length; j++){ - if(palette.length <= colors) break; - if(i == j) continue; - if(Math.abs(palette[i][0] - palette[j][0]) + Math.abs(palette[i][1] - palette[j][1]) + Math.abs(palette[i][2] - palette[j][2]) < max){ - if(grey_palette[palette[i][3]] > grey_palette[palette[j][3]]){ - //remove color - palette.splice(j, 1); - j--; - } - else{ - valid = false; - break; - } - } - } - //remove color - if(valid == false){ - palette.splice(i, 1); - i--; - } - } - } - - //change - var p_n = palette.length; - for(var j = 0; j < H; j++){ - for(var i = 0; i < W; i++){ - var k = ((j * (W * 4)) + (i * 4)); - if(imgData[k+3] == 0) continue; //transparent - var grey = round(0.2126 * imgData_p[k] + 0.7152 * imgData_p[k+1] + 0.0722 * imgData_p[k+2]); - - //find closest color - var index1 = 0; - var min = 999999; - var diff1; - for(var m=0; m < p_n; m++){ - var diff = Math.abs(palette[m][0] - imgData[k]) + Math.abs(palette[m][1] - imgData[k+1]) + Math.abs(palette[m][2] - imgData[k+2]); - if(diff < min){ - min = diff; - index1 = m; - diff1 = diff; - } - } - - if(dithering == false){ - imgData[k] = palette[index1][0]; - imgData[k+1] = palette[index1][1]; - imgData[k+2] = palette[index1][2]; - } - else{ - //dithering - if(diff1 >= 10){ - //find second close color - var index2; - var min2 = 256*3; - var diff2; - for(var m=0; m < p_n; m++){ - if(m== index1) continue; //we already have this - if(palette[index1][3] < grey && palette[m][3] < grey) continue; - if(palette[index1][3] > grey && palette[m][3] > grey) continue; - var diff = Math.abs(palette[m][0] - imgData[k]) + Math.abs(palette[m][1] - imgData[k+1]) + Math.abs(palette[m][2] - imgData[k+2]); - if(diff < min2){ - min2 = diff; - index2 = m; - diff2 = diff; - } - } - } - - var c; - if(index2 == undefined) - c = palette[index1]; //only 1 match - else{ - //randomize - var rand = HELPER.getRandomInt(-diff1, diff2); - if(rand < 0) - c = palette[index2]; - else - c = palette[index1]; - } - imgData[k] = c[0]; - imgData[k+1] = c[1]; - imgData[k+2] = c[2]; - } - - if(greyscale == true){ - var mid = round(0.2126 * imgData[k] + 0.7152 * imgData[k+1] + 0.0722 * imgData[k+2]); - imgData[k] = mid; - imgData[k+1] = mid; - imgData[k+2] = mid; - } - } - } - canvas_destination.getContext("2d").putImageData(img, 0, 0); - }; - //converts greyscale images to coloured - this.colorize = function(context, W, H, rand_power, max_gap, dither, manual_colors){ - if(manual_colors == undefined || manual_colors === true){ - var colors = []; - for(var x=0; x < 3; x++){ - colors[x] = []; - var pre = HELPER.getRandomInt(-1 * rand_power, rand_power); - for(var i = 0; i <= 255; i++){ - colors[x][i] = HELPER.getRandomInt(pre - rand_power, pre + rand_power); - - if(colors[x][i] < -1*max_gap) colors[x][i] += 10; - else if(colors[x][i] > max_gap) colors[x][i] -= 10; - - pre = colors[x][i]; - } - } - if(manual_colors === true) - return colors; - } - else - var colors = manual_colors; - - var img = context.getImageData(0, 0, W, H); - - //colorize - var imgData = img.data; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if(dither == true){ - var diff = Math.abs(colors[0][imgData[x]]) + Math.abs(colors[0][imgData[x]]) + Math.abs(colors[0][imgData[x]]); - diff = diff / 3; - } - for(var c = 0; c < 3; c++){ - var x = i + c; - if(dither == false) - imgData[x] += colors[c][imgData[x]]; - else{ - if(diff < rand_power*6) - imgData[x] += colors[c][imgData[x]]; - else{ - //big difference here - randomize - var rand = HELPER.getRandomInt(Math.min(0, colors[c][imgData[x]]), Math.max(0, colors[c][imgData[x]])); - imgData[x] += rand; - } - } - if(imgData[x] > 255) imgData[x] = 255; - if(imgData[x] < 0) imgData[x] = 0; - } - } - context.putImageData(img, 0, 0); - return false; - }; - //fixing white and black color balance - this.auto_adjust = function(context, W, H){ - //settings - var white = 240; //white color min - var black = 30; //black color max - var target_white = 1; //how much % white colors should take - var target_black = 0.5; //how much % black colors should take - var modify = 1.1; //color modify strength - - document.body.style.cursor = "wait"; - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var n = 0; //pixels count without transparent - - //make sure we have white - var n_valid = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 > white) n_valid++; - n++; - } - target = target_white; - var n_fix_white = 0; - var done = false; - for(var j=0; j < 30; j++){ - if(n_valid * 100 / n >= target) done = true; - if(done == true) break; - n_fix_white++; - - //adjust - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - for(var c = 0; c < 3; c++){ - var x = i + c; - if(imgData[x] < 10) continue; - //increase white - imgData[x] *= modify; - imgData[x] = round(imgData[x]); - if(imgData[x] > 255) imgData[x] = 255; - } - } - - //recheck - n_valid = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 > white) n_valid++; - } - } - - //make sure we have black - n_valid = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 < black) n_valid++; - } - target = target_black; - var n_fix_black = 0; - var done = false; - for(var j=0; j < 30; j++){ - if(n_valid * 100 / n >= target) done = true; - if(done == true) break; - n_fix_black++; - - //adjust - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - for(var c = 0; c < 3; c++){ - var x = i + c; - if(imgData[x] > 240) continue; - //increase black - imgData[x] -= (255-imgData[x]) * modify - (255-imgData[x]); - imgData[x] = round(imgData[x]); - } - } - - //recheck - n_valid = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - if((imgData[i] + imgData[i+1] + imgData[i+2]) / 3 < black) n_valid++; - } - } - - //save - context.putImageData(img, 0, 0); - document.body.style.cursor = "auto"; - //log('Iterations: brighten='+n_fix_white+", darken="+n_fix_black); - }; - this.zoom = function(recalc, scroll){ - if(recalc != undefined){ - //zoom-in or zoom-out - if(recalc == 1 || recalc == -1){ - var step = 100; - if(ZOOM <= 100 && recalc < 0) - step = 10; - if(ZOOM <100 && recalc > 0) - step = 10; - if(recalc*step + ZOOM > 0){ - ZOOM = ZOOM + recalc*step; - if(ZOOM > 100 && ZOOM < 200) - ZOOM = 100; - } - } - //zoom using exact value - else - ZOOM = parseInt(recalc); - CON.calc_preview_auto(); - } - document.getElementById("zoom_nr").innerHTML = ZOOM; - document.getElementById("zoom_range").value = ZOOM; - - //change scale and repaint - document.getElementById('canvas_back').style.width = round(WIDTH * ZOOM / 100)+"px"; - document.getElementById('canvas_back').style.height = round(HEIGHT * ZOOM / 100)+"px"; - for(var i in LAYERS){ - document.getElementById(LAYERS[i].name).style.width = round(WIDTH * ZOOM / 100)+"px"; - document.getElementById(LAYERS[i].name).style.height = round(HEIGHT * ZOOM / 100)+"px"; - } - document.getElementById('canvas_front').style.width = round(WIDTH * ZOOM / 100)+"px"; - document.getElementById('canvas_front').style.height = round(HEIGHT * ZOOM / 100)+"px"; - - document.getElementById('canvas_grid').style.width = round(WIDTH * ZOOM / 100)+"px"; - document.getElementById('canvas_grid').style.height = round(HEIGHT * ZOOM / 100)+"px"; - - //check main resize corners - if(ZOOM != 100){ - document.getElementById('resize-w').style.display = "none"; - document.getElementById('resize-h').style.display = "none"; - document.getElementById('resize-wh').style.display = "none"; - } - else{ - document.getElementById('resize-w').style.display = "block"; - document.getElementById('resize-h').style.display = "block"; - document.getElementById('resize-wh').style.display = "block"; - } - - if(scroll != undefined) - CON.scroll_window(); - DRAW.redraw_preview(); - return true; - }; - this.redraw_preview = function(){ - canvas_preview.beginPath(); - canvas_preview.rect(0, 0, DRAW.PREVIEW_SIZE.w, DRAW.PREVIEW_SIZE.h); - canvas_preview.fillStyle = "#ffffff"; - canvas_preview.fill(); - DRAW.draw_background(canvas_preview, DRAW.PREVIEW_SIZE.w, DRAW.PREVIEW_SIZE.h, 5); - - //redraw preview area - canvas_preview.save(); - canvas_preview.scale(DRAW.PREVIEW_SIZE.w/WIDTH, DRAW.PREVIEW_SIZE.h/HEIGHT); - for(var i in LAYERS){ - if(LAYERS[i].visible == false) continue; - canvas_preview.drawImage(document.getElementById(LAYERS[i].name), 0, 0, WIDTH, HEIGHT); - } - canvas_preview.restore(); - - //active zone - z_x = CON.ZOOM_X; - z_y = CON.ZOOM_Y; - if(z_x > DRAW.PREVIEW_SIZE.w - CON.mini_rect_data.w) - z_x = DRAW.PREVIEW_SIZE.w - CON.mini_rect_data.w; - if(z_y > DRAW.PREVIEW_SIZE.h - CON.mini_rect_data.h) - z_y = DRAW.PREVIEW_SIZE.h - CON.mini_rect_data.h; - - canvas_preview.lineWidth = 1; - canvas_preview.beginPath(); - canvas_preview.rect(round(z_x) + 0.5, round(z_y) + 0.5, CON.mini_rect_data.w, CON.mini_rect_data.h); - canvas_preview.fillStyle = "rgba(0, 0, 0, 0.2)"; - canvas_preview.strokeStyle = "#393939"; - canvas_preview.fill(); - canvas_preview.stroke(); - return true; - }; - this.draw_arrow = function(context, fromx, fromy, tox, toy, headlen){ - if(headlen == undefined) - headlen = 10; // length of head in pixels - var dx = tox-fromx; - var dy = toy-fromy; - var angle = Math.atan2(dy,dx); - context.beginPath(); - context.moveTo(fromx, fromy); - context.lineTo(tox, toy); - context.stroke(); - context.beginPath(); - context.moveTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6)); - context.lineTo(tox, toy); - context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6)); - context.stroke(); - }; - //hermite resample - classic "rings.gif" 1000x1000 resize to 200x200 record - 0.040 - this.resample_hermite = function(canvas, W, H, W2, H2){ - var time1 = Date.now(); - var img = canvas.getContext("2d").getImageData(0, 0, W, H); - var img2 = canvas.getContext("2d").getImageData(0, 0, W2, H2); - var data = img.data; - var data2 = img2.data; - var ratio_w = W / W2; - var ratio_h = H / H2; - var ratio_w_half = Math.ceil(ratio_w/2); - var ratio_h_half = Math.ceil(ratio_h/2); - - for(var j = 0; j < H2; j++){ - for(var i = 0; i < W2; i++){ - var x2 = (i + j*W2) * 4; - var weight = 0; - var weights = 0; - var weights_alpha = 0; - var gx_r = gx_g = gx_b = gx_a = 0; - var center_y = (j + 0.5) * ratio_h; - for(var yy = Math.floor(j * ratio_h); yy < (j + 1) * ratio_h; yy++){ - var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half; - var center_x = (i + 0.5) * ratio_w; - var w0 = dy*dy; //pre-calc part of w - for(var xx = Math.floor(i * ratio_w); xx < (i + 1) * ratio_w; xx++){ - var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half; - var w = Math.sqrt(w0 + dx*dx); - if(w >= -1 && w <= 1){ - //hermite filter - weight = 2 * w*w*w - 3*w*w + 1; - if(weight > 0){ - dx = 4*(xx + yy*W); - //alpha - gx_a += weight * data[dx + 3]; - weights_alpha += weight; - //colors - if(data[dx + 3] < 255) - weight = weight * data[dx + 3] / 250; - gx_r += weight * data[dx]; - gx_g += weight * data[dx + 1]; - gx_b += weight * data[dx + 2]; - weights += weight; - } - } - } - } - data2[x2] = gx_r / weights; - data2[x2 + 1] = gx_g / weights; - data2[x2 + 2] = gx_b / weights; - data2[x2 + 3] = gx_a / weights_alpha; - } - } - console.log("hermite = "+(Math.round(Date.now() - time1)/1000)+" s"); - canvas.getContext("2d").clearRect(0, 0, Math.max(W, W2), Math.max(H, H2)); - canvas.getContext("2d").putImageData(img2, 0, 0); - }; - this.resample_hermite_threads = function(canvas, W, H, W2, H2){ - var time1 = Date.now(); - var img = canvas.getContext("2d").getImageData(0, 0, W, H); - var img2 = canvas.getContext("2d").getImageData(0, 0, W2, H2); - var data2 = img2.data; - var cores = 8; - var cpu_in_use = 0; - canvas.getContext("2d").clearRect(0, 0, W, H); - - for(var c = 0; c < cores; c++){ - cpu_in_use++; - var my_worker = new Worker("libs/worker-hermite.js"); - my_worker.onmessage = function(event){ //log(event.data);return false; - cpu_in_use--; - var complete = ((cores - cpu_in_use) / cores * 100 | 0); - var offset = event.data.offset; //log( event.data.data.length); - - for(var i = 0; i < event.data.data.length; i += 4){ - var x = offset + i; //log([ x, event.data.data[i], event.data.data[i+1],event.data.data[i+2],event.data.data[i+3], ]); return false; - data2[x] = event.data.data[i]; - data2[x + 1] = event.data.data[i+1]; - data2[x + 2] = event.data.data[i+2]; - data2[x + 3] = event.data.data[i+3]; - } - - //finish - if(cpu_in_use <= 0){ - console.log("hermite "+cores+" cores = "+(Math.round(Date.now() - time1)/1000)+" s"); - canvas.getContext("2d").clearRect(0, 0, W, H); - canvas.getContext("2d").putImageData(img2, 0, 0); - - if(MENU.last_menu != 'layer_resize') - DRAW.trim(); - DRAW.zoom(); - } - }; - my_worker.postMessage([img, W, H, W2, H2, c, cores]); - } - }; - } diff --git a/js/draw_tools.js b/js/draw_tools.js new file mode 100644 index 0000000..fec6258 --- /dev/null +++ b/js/draw_tools.js @@ -0,0 +1,1598 @@ +/* global MAIN, HELPER, LAYER, EDIT, POP, GUI, EVENTS, EL, ImageFilters, sketchy_brush, shaded_brush, chrome_brush, BezierCurveBrush */ +/* global WIDTH, HEIGHT, COLOR, canvas_active, canvas_front */ + +var DRAW = new DRAW_TOOLS_CLASS(); + +/** + * manages draw tools + * + * @author ViliusL + */ +function DRAW_TOOLS_CLASS() { + + /** + * user action for selected area + */ + this.select_square_action = ''; + + /** + * previous line coordinates [x, y] + */ + this.last_line = []; + + /** + * user selected area config - array(x, y, width, height) + */ + this.select_data = false; + + /** + * currently used tool + */ + this.active_tool = 'select_tool'; + + /** + * line points data for curved line + */ + var curve_points = []; + + /** + * image data for cloning tool + */ + var clone_data = false; + + //credits to Victor Haydin + this.toolFiller = function (context, W, H, x, y, color_to, sensitivity, anti_aliasing) { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + var img_tmp = canvas_front.getImageData(0, 0, W, H); + var imgData_tmp = img_tmp.data; + + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var k = ((y * (img.width * 4)) + (x * 4)); + var dx = [0, -1, +1, 0]; + var dy = [-1, 0, 0, +1]; + var color_from = { + r: imgData[k + 0], + g: imgData[k + 1], + b: imgData[k + 2], + a: imgData[k + 3] + }; + if (color_from.r == color_to.r && color_from.g == color_to.g && color_from.b == color_to.b && color_from.a == color_to.a) { + return false; + } + var stack = []; + stack.push([x, y]); + while (stack.length > 0) { + var curPoint = stack.pop(); + for (var i = 0; i < 4; i++) { + var nextPointX = curPoint[0] + dx[i]; + var nextPointY = curPoint[1] + dy[i]; + if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H) + continue; + var k = (nextPointY * W + nextPointX) * 4; + if (imgData_tmp[k + 3] != 0) + continue; //already parsed + + //check + if (Math.abs(imgData[k + 0] - color_from.r) <= sensitivity && + Math.abs(imgData[k + 1] - color_from.g) <= sensitivity && + Math.abs(imgData[k + 2] - color_from.b) <= sensitivity && + Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) { + + //fill pixel + imgData_tmp[k] = color_to.r; //r + imgData_tmp[k + 1] = color_to.g; //g + imgData_tmp[k + 2] = color_to.b; //b + imgData_tmp[k + 3] = color_to.a; //a + + stack.push([nextPointX, nextPointY]); + } + } + } + canvas_front.putImageData(img_tmp, 0, 0); + if (anti_aliasing == true) { + context.shadowColor = "rgba(" + color_to.r + ", " + color_to.g + ", " + color_to.b + ", " + color_to.a / 255 + ")"; + context.shadowBlur = 5; + } + context.drawImage(document.getElementById("canvas_front"), 0, 0); + //reset + context.shadowBlur = 0; + }; + + this.tool_magic_wand = function (context, W, H, x, y, sensitivity, anti_aliasing) { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + canvas_front.rect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(255, 255, 255, 0)"; + canvas_front.fill(); + + var img_tmp = canvas_front.getImageData(0, 0, W, H); + var imgData_tmp = img_tmp.data; + + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var k = ((y * (img.width * 4)) + (x * 4)); + var dx = [0, -1, +1, 0]; + var dy = [-1, 0, 0, +1]; + var color_to = { + r: 255, + g: 255, + b: 255, + a: 255 + }; + var color_from = { + r: imgData[k + 0], + g: imgData[k + 1], + b: imgData[k + 2], + a: imgData[k + 3] + }; + if (color_from.r == color_to.r && + color_from.g == color_to.g && + color_from.b == color_to.b && + color_from.a == 0) { + return false; + } + var stack = []; + stack.push([x, y]); + while (stack.length > 0) { + var curPoint = stack.pop(); + for (var i = 0; i < 4; i++) { + var nextPointX = curPoint[0] + dx[i]; + var nextPointY = curPoint[1] + dy[i]; + if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H) + continue; + var k = (nextPointY * W + nextPointX) * 4; + if (imgData_tmp[k + 3] != 0) + continue; //already parsed + + if (Math.abs(imgData[k] - color_from.r) <= sensitivity + && Math.abs(imgData[k + 1] - color_from.g) <= sensitivity + && Math.abs(imgData[k + 2] - color_from.b) <= sensitivity + && Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) { + imgData_tmp[k] = color_to.r; //r + imgData_tmp[k + 1] = color_to.g; //g + imgData_tmp[k + 2] = color_to.b; //b + imgData_tmp[k + 3] = color_to.a; //a + + stack.push([nextPointX, nextPointY]); + } + } + } + //destination-out + blur = anti-aliasing + if (anti_aliasing == true) + img_tmp = ImageFilters.StackBlur(img_tmp, 2); + canvas_front.putImageData(img_tmp, 0, 0); + context.globalCompositeOperation = "destination-out"; + context.drawImage(document.getElementById("canvas_front"), 0, 0); + //reset + context.shadowBlur = 0; + context.globalCompositeOperation = 'source-over'; + }; + + + + //type = click, right_click, drag, move, release + this.select_tool = function (type, mouse, event) { + if (mouse == undefined) + return false; + if (mouse.valid == false) + return true; + if (mouse.click_valid == false) + return true; + if (event != undefined && event.target.id == "canvas_preview") + return true; + + if (type == 'drag') { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if(EVENTS.ctrl_pressed == true){ + //ctrl is pressed + var xx = mouse.x; + var yy = mouse.y; + if (Math.abs(mouse.click_x - mouse.x) < Math.abs(mouse.click_y - mouse.y)) + xx = mouse.click_x; + else + yy = mouse.click_y; + canvas_front.drawImage(canvas_active(true), xx - mouse.click_x, yy - mouse.click_y); + } + else{ + canvas_front.drawImage(canvas_active(true), mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + } + else if (type == 'release') { + if (mouse.valid == false || mouse.click_x === false) + return false; + if (mouse.x - mouse.click_x == 0 || mouse.y - mouse.click_y == 0) + return false; + EDIT.save_state(); + var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + if(EVENTS.ctrl_pressed == true){ + //ctrl is pressed + var xx = mouse.x; + var yy = mouse.y; + if (Math.abs(mouse.click_x - mouse.x) < Math.abs(mouse.click_y - mouse.y)) + xx = mouse.click_x; + else + yy = mouse.click_y; + canvas_active().putImageData(tmp, xx - mouse.click_x, yy - mouse.click_y); + } + else{ + canvas_active().putImageData(tmp, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + } + }; + this.magic_wand = function (type, mouse, event) { + if (mouse.valid == false) + return true; + if (type == 'click') { + EDIT.save_state(); + this.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, GUI.action_data().attributes.sensitivity, GUI.action_data().attributes.anti_aliasing); + } + }; + this.erase = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var strict = GUI.action_data().attributes.strict; + var size = GUI.action_data().attributes.size; + var is_circle = GUI.action_data().attributes.circle; + + if (type == 'click') { + EDIT.save_state(); + if (is_circle == false) { + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + canvas_active().fillStyle = "rgba(255, 255, 255, " + ALPHA / 255 + ")"; + canvas_active().fillRect(mouse.x - Math.ceil(size / 2) + 1, mouse.y - Math.ceil(size / 2) + 1, size, size); + canvas_active().restore(); + } + else { + if (strict == false) { + var radgrad = canvas_active().createRadialGradient( + mouse.x, mouse.y, size / 8, + mouse.x, mouse.y, size / 2); + radgrad.addColorStop(0, "rgba(255, 255, 255, " + ALPHA / 255 + ")"); + radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); + } + + //set Composite + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if (strict == true) + canvas_active().fillStyle = "rgba(255, 255, 255, " + ALPHA / 255 + ")"; + else + canvas_active().fillStyle = radgrad; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, size / 2, 0, Math.PI * 2, true); + canvas_active().fill(); + canvas_active().restore(); + } + } + else if (type == 'drag') { + if (is_circle == false) { + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if (ALPHA < 255) + canvas_active().fillStyle = "rgba(255, 255, 255, " + ALPHA / 255 / 10 + ")"; + else + canvas_active().fillStyle = COLOR; + canvas_active().fillRect(mouse.x - Math.ceil(size / 2) + 1, mouse.y - Math.ceil(size / 2) + 1, size, size); + canvas_active().restore(); + } + else { + if (strict == false) { + var radgrad = canvas_active().createRadialGradient( + mouse.x, mouse.y, size / 10, + mouse.x, mouse.y, size / 2); + if (ALPHA < 255) + radgrad.addColorStop(0, "rgba(255, 255, 255, " + ALPHA / 255 / 10 + ")"); + else + radgrad.addColorStop(0, "rgba(255, 255, 255, 1)"); + radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); + } + //set Composite + canvas_active().save(); + canvas_active().globalCompositeOperation = 'destination-out'; + if (strict == true) { + if (ALPHA < 255) + canvas_active().fillStyle = "rgba(255, 255, 255, " + ALPHA / 255 / 10 + ")"; + else + canvas_active().fillStyle = COLOR; + } + else + canvas_active().fillStyle = radgrad; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, size / 2, 0, Math.PI * 2, true); + canvas_active().fill(); + canvas_active().restore(); + } + + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if (is_circle == false) { + canvas_front.lineWidth = 1; + EL.rectangle_dashed(canvas_front, mouse.x - Math.ceil(size / 2) + 1, mouse.y - Math.ceil(size / 2) + 1, mouse.x + Math.floor(size / 2), mouse.y + Math.floor(size / 2), 1, '#000000'); + } + else { + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + } + else if (type == 'move') { + var size1 = Math.floor((size) / 2); + var size2 = Math.floor((size) / 2); + if (size % 2 == 0) + size2--; + else { + size1--; + } + + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if (is_circle == false) { + canvas_front.lineWidth = 1; + EL.rectangle_dashed(canvas_front, mouse.x - Math.ceil(size / 2) + 1, mouse.y - Math.ceil(size / 2) + 1, mouse.x + Math.floor(size / 2), mouse.y + Math.floor(size / 2), 1, '#000000'); + } + else { + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + } + }; + this.fill = function (type, mouse, event) { + if (mouse.valid == false) + return true; + if (type == 'click') { + EDIT.save_state(); + var color_to = HELPER.hex2rgb(COLOR); + color_to.a = ALPHA; + DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, GUI.action_data().attributes.sensitivity, GUI.action_data().attributes.anti_aliasing); + } + }; + this.pick_color = function (type, mouse, event) { + if (mouse.valid == false) + return true; + if (type == 'click') { + var c = canvas_active().getImageData(mouse.x, mouse.y, 1, 1).data; + COLOR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); + + //set alpha + ALPHA = c[3]; + document.getElementById("rgb_a").value = ALPHA; + + GUI.sync_colors(); + } + }; + this.pencil = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var color_rgb = HELPER.hex2rgb(COLOR); + if (type == 'click') { + EDIT.save_state(); + } + else if (type == 'drag') { + //why no simple lines? this way turns off aliasing + if (mouse.last_x != false && mouse.last_y != false) { + //saving + dist_x = mouse.last_x - mouse.x; + dist_y = mouse.last_y - mouse.y; + distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)); + radiance = Math.atan2(dist_y, dist_x); + for (var i = 0; i < distance; i++) { + x_tmp = mouse.x + Math.cos(radiance) * i; + y_tmp = mouse.y + Math.sin(radiance) * i; + + x_tmp = Math.round(x_tmp); + y_tmp = Math.round(y_tmp); + var my_color = HELPER.hex2rgb(COLOR); + canvas_active().fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().fillRect(x_tmp, y_tmp, 1, 1); + } + } + } + else if (type == 'release') { + canvas_active().fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().fillRect(mouse.x, mouse.y, 1, 1); + } + }; + this.line = function (type, mouse, event) { + if (mouse.click_valid == false) + return false; + var color_rgb = HELPER.hex2rgb(COLOR); + + //horizontal/vertical only + var xx = mouse.x; + var yy = mouse.y; + var from_x = mouse.click_x; + var from_y = mouse.click_y; + + if (type == 'move') { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.lineWidth = GUI.action_data().attributes.size; + + if (GUI.action_data().attributes.type == 'Curve') { + //curve + if (curve_points.length == 2) { + canvas_front.beginPath(); + canvas_front.moveTo(curve_points[0][0] + 0.5, curve_points[0][1] + 0.5); + canvas_front.quadraticCurveTo(mouse.x + 0.5, mouse.y + 0.5, curve_points[1][0], curve_points[1][1]); + canvas_front.stroke(); + } + } + } + else if (type == 'drag') { + document.body.style.cursor = "crosshair"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.beginPath(); + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.lineWidth = GUI.action_data().attributes.size; + if (GUI.action_data().attributes.type == 'Multi-line' && this.last_line[0] != undefined) { + from_x = this.last_line[0]; + from_y = this.last_line[1]; + } + if (EVENTS.ctrl_pressed == true) { + if (Math.abs(from_x - mouse.x) < Math.abs(from_y - mouse.y)) + xx = from_x; + else + yy = from_y; + } + + //arrow + if (GUI.action_data().attributes.type == 'Arrow') { + var headlen = GUI.action_data().attributes.size * 5; + if (headlen < 15) + headlen = 15; + EL.arrow(canvas_front, from_x + 0.5, from_y + 0.5, xx + 0.5, yy + 0.5, headlen); + } + //line + else { + canvas_front.moveTo(from_x + 0.5, from_y + 0.5); + canvas_front.lineTo(xx + 0.5, yy + 0.5); + canvas_front.stroke(); + } + } + else if (type == 'click') { + EDIT.save_state(); + //curve + if (GUI.action_data().attributes.type == 'Curve') { + canvas_active().beginPath(); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = GUI.action_data().attributes.size; + if (EVENTS.ctrl_pressed == true) { + if (Math.abs(from_x - mouse.x) < Math.abs(from_y - mouse.y)) + xx = from_x; + else + yy = from_y; + } + if (curve_points.length == 2) { + canvas_active().beginPath(); + canvas_active().moveTo(curve_points[0][0] + 0.5, curve_points[0][1] + 0.5); + canvas_active().quadraticCurveTo(xx + 0.5, yy + 0.5, curve_points[1][0], curve_points[1][1]); + canvas_active().stroke(); + curve_points = []; + } + } + } + else if (type == 'release') { + EDIT.save_state(); + canvas_active().beginPath(); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = GUI.action_data().attributes.size; + if (GUI.action_data().attributes.type == 'Multi-line' && this.last_line[0] != undefined) { + from_x = DRAW.last_line[0]; + from_y = DRAW.last_line[1]; + } + if (EVENTS.ctrl_pressed == true) { + if (Math.abs(from_x - mouse.x) < Math.abs(from_y - mouse.y)) + xx = from_x; + else + yy = from_y; + } + //arrow + if (GUI.action_data().attributes.type == 'Arrow') { + var headlen = GUI.action_data().attributes.size * 5; + if (headlen < 15) + headlen = 15; + EL.arrow(canvas_active(), from_x + 0.5, from_y + 0.5, xx + 0.5, yy + 0.5, headlen); + this.last_line[0] = xx; + this.last_line[1] = yy; + } + //curve + else if (GUI.action_data().attributes.type == 'Curve') { + if (curve_points.length == 0 && (mouse.click_x != mouse.x || mouse.click_y != mouse.y)) { + curve_points.push([mouse.click_x, mouse.click_y]); + curve_points.push([xx, yy]); + } + else if (curve_points.length == 2) + curve_points = []; + } + //line + else { + EL.line(canvas_active(), from_x, from_y, xx, yy); + this.last_line[0] = xx; + this.last_line[1] = yy; + } + } + }; + this.letters = function (type, mouse, event) { + var _this = this; + if (mouse.valid == false) + return true; + var xx = mouse.x; + var yy = mouse.y; + if (type == 'click') { + POP.add({name: "text", title: "Text:", value: "", type: 'textarea'}); + POP.add({name: "size", title: "Size:", value: 20, range: [2, 1000], step: 2}); + POP.add({name: "color", title: "Color:", value: "#000000", type: "color"}); + POP.add({name: "style", title: "Font style:", values: ["Normal", "Italic", "Bold", "Bold Italic"], type: 'select'}); + POP.add({name: "family", title: "Font family:", values: ["Arial", "Courier", "Impact", "Helvetica", "monospace", "Times New Roman", "Verdana"], type: 'select'}); + POP.add({name: "size_3d", title: "3D size:", value: 0, range: [0, 200]}); + POP.add({name: "pos_3d", title: "3D position:", values: ["Top-left", "Top-right", "Bottom-left", "Bottom-right"], type: 'select'}); + POP.add({name: "shadow", title: "Shadow:", values: ["No", "Yes"]}); + POP.add({name: "shadow_blur", title: "Shadow blur:", value: 6, range: [1, 20]}); + POP.add({name: "shadow_color", title: "Shadow color:", value: "#000000", type: "color"}); + POP.add({name: "fill_style", title: "Fill style:", values: ["Fill", "Stroke", "Both"], type: 'select'}); + POP.add({name: "stroke_size", title: "Stroke size:", value: 1, range: [1, 100]}); + POP.preview_in_main = true; + POP.show( + 'Text', + function (user_response) { + EDIT.save_state(); + text = user_response.text.split("\n"); + for (var i in text) { + user_response.text = text[i]; + var yyy = yy + i * (parseInt(user_response.size) + 2); + _this.letters_render(canvas_active(), xx, yyy, user_response); + } + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + }, + function (user_response) { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + text = user_response.text.split("\n"); + for (var i in text) { + user_response.text = text[i]; + var yyy = yy + i * (parseInt(user_response.size) + 2); + _this.letters_render(canvas_front, xx, yyy, user_response); + } + } + ); + } + }; + this.letters_render = function (canvas, xx, yy, user_response) { + var text = user_response.text; + var size = parseInt(user_response.size); + var color = user_response.color; + var dpth = parseInt(user_response.size_3d); + var pos_3d = user_response.pos_3d; + var shadow = user_response.shadow; + var shadow_blur = parseInt(user_response.shadow_blur); + var shadow_color = user_response.shadow_color; + var font = user_response.family; + var font_style = user_response.style; + var fill_style = user_response.fill_style; + var stroke_size = user_response.stroke_size; + var dx; + var dy; + if (pos_3d == "Top-left") { + dx = -1; + dy = -1; + } + else if (pos_3d == "Top-right") { + dx = 1; + dy = -1; + } + else if (pos_3d == "Bottom-left") { + dx = -1; + dy = 1; + } + else if (pos_3d == "Bottom-right") { + dx = 1; + dy = 1; + } + + var color_rgb = HELPER.hex2rgb(color); + canvas.fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas.font = font_style + " " + size + "px " + font; + var letters_height = HELPER.font_pixel_to_height(size); + + //shadow + if (shadow == 'Yes') { + canvas.save(); + canvas.shadowColor = shadow_color; + canvas.shadowBlur = shadow_blur; + canvas.shadowOffsetX = dx; + canvas.shadowOffsetY = dy; + canvas.fillText(text, xx + dx * (dpth - 1), yy + letters_height + dy * (dpth - 1)); + canvas.restore(); + } + + //3d + if (dpth > 0) { + canvas.fillStyle = HELPER.darkenColor(COLOR, -30); + alpha_tmp = ALPHA; + if (alpha_tmp < 255) + alpha_tmp /= 10; + + color_rgb.r -= 50; + color_rgb.g -= 50; + color_rgb.b -= 50; + if (color_rgb.r < 0) + color_rgb.r *= -1; + if (color_rgb.g < 0) + color_rgb.g *= -1; + if (color_rgb.b < 0) + color_rgb.b *= -1; + + canvas.fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + alpha_tmp / 255 + ")"; + for (cnt = 0; cnt < dpth; cnt++) + canvas.fillText(text, xx + dx * cnt, yy + letters_height + dy * cnt); + color_rgb = HELPER.hex2rgb(COLOR); + } + + //main text + canvas.fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas.lineWidth = stroke_size; + if (fill_style == 'Fill' || fill_style == 'Both') + canvas.fillText(text, xx, yy + letters_height); + if (fill_style == 'Stroke' || fill_style == 'Both') + canvas.strokeText(text, xx, yy + letters_height); + + GUI.zoom(); + }; + this.draw_square = function (type, mouse, event) { + if (mouse.click_valid == false) + return true; + var color_rgb = HELPER.hex2rgb(COLOR); + var fill = GUI.action_data().attributes.fill; + var width = mouse.x - mouse.click_x; + var height = mouse.y - mouse.click_y; + + if (type == 'drag') { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.lineWidth = 1; + + if (GUI.action_data().attributes.square == true) + EL.square(canvas_front, mouse.click_x, mouse.click_y, width, height, fill); + else + EL.rectangle(canvas_front, mouse.click_x, mouse.click_y, width, height, fill); + } + else if (type == 'release') { + EDIT.save_state(); + + canvas_active().fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 1; + + if (GUI.action_data().attributes.square == true) + EL.square(canvas_active(), mouse.click_x, mouse.click_y, width, height, fill); + else + EL.rectangle(canvas_active(), mouse.click_x, mouse.click_y, width, height, fill); + } + }; + this.draw_circle = function (type, mouse, event) { + if (mouse.click_valid == false) + return true; + var color_rgb = HELPER.hex2rgb(COLOR); + if (type == 'drag') { + dist_x = mouse.x - mouse.click_x; + dist_y = mouse.y - mouse.click_y; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if (GUI.action_data().attributes.circle == true) + dist_x = dist_y = Math.min(dist_x, dist_y); + if (GUI.action_data().attributes.fill == true) + EL.ellipse_by_center(canvas_front, mouse.click_x, mouse.click_y, dist_x * 2, dist_y * 2, "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")", true); + else + EL.ellipse_by_center(canvas_front, mouse.click_x, mouse.click_y, dist_x * 2, dist_y * 2, "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"); + } + else if (type == 'release') { + EDIT.save_state(); + dist_x = mouse.x - mouse.click_x; + dist_y = mouse.y - mouse.click_y; + if (GUI.action_data().attributes.circle == true) + dist_x = dist_y = Math.min(dist_x, dist_y); + canvas_active().lineWidth = 1; + if (GUI.action_data().attributes.fill == true) + EL.ellipse_by_center(canvas_active(), mouse.click_x, mouse.click_y, dist_x * 2, dist_y * 2, "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")", true); + else + EL.ellipse_by_center(canvas_active(), mouse.click_x, mouse.click_y, dist_x * 2, dist_y * 2, "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"); + } + }; + this.update_brush = function () { + document.getElementById('anti_alias').style.display = ''; + if (GUI.action_data().attributes.type != 'Brush') + document.getElementById('anti_alias').style.display = 'none'; + }; + this.desaturate_tool = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var size = GUI.action_data().attributes.size; + var xx = mouse.x - size / 2; + var yy = mouse.y - size / 2; + if (xx < 0) + xx = 0; + if (yy < 0) + yy = 0; + + if (type == 'click') { + EDIT.save_state(); + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.GrayScale(imageData); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), GUI.action_data().attributes.anti_alias); + } + else if (type == 'drag') { + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.GrayScale(imageData); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), GUI.action_data().attributes.anti_alias); + } + if (type == 'move' || type == 'drag') { + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + }; + this.brush = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var brush_type = GUI.action_data().attributes.type; + var color_rgb = HELPER.hex2rgb(COLOR); + var size = GUI.action_data().attributes.size; + + if (type == 'click') + EDIT.save_state(); + + if (brush_type == 'Brush') { + if (type == 'click') { + //init settings + canvas_active().beginPath(); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = GUI.action_data().attributes.size; + canvas_active().lineCap = 'round'; + canvas_active().lineJoin = 'round'; + + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + if (ALPHA < 255) { + canvas_front.beginPath(); + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.lineWidth = GUI.action_data().attributes.size; + canvas_front.lineCap = 'round'; + canvas_front.lineJoin = 'round'; + } + + canvas_front.beginPath(); + canvas_front.arc(mouse.x, mouse.y, GUI.action_data().attributes.size / 2, 0, 2 * Math.PI, false); + canvas_front.fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.fill(); + + //blur + canvas_active().shadowBlur = 0; + if (GUI.action_data().attributes.anti_alias == true) { + canvas_active().shadowColor = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().shadowBlur = Math.round(GUI.action_data().attributes.size); + } + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + if (ALPHA == 255) + canvas_active().beginPath(); + canvas_active().moveTo(mouse.last_x, mouse.last_y); + canvas_active().lineTo(mouse.x, mouse.y); + if (ALPHA == 255) + canvas_active().stroke(); + + //now draw preview + if (ALPHA < 255) { + canvas_front.beginPath(); + //clean from last line + canvas_front.globalCompositeOperation = "destination-out"; + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", 1)"; + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + //reset + canvas_front.strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_front.globalCompositeOperation = "source-over"; + //draw new line segment + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + } + } + else if (type == 'release') { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + //paint everything + canvas_active().stroke(); + + //if mouse was not moved + if (mouse.click_x == mouse.x && mouse.click_y == mouse.y) { + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, GUI.action_data().attributes.size / 2, 0, 2 * Math.PI, false); + canvas_active().fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().fill(); + } + canvas_active().shadowBlur = 0; + } + else if (type == 'move') { + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + } + else if (brush_type == 'BezierCurve') { + if (type == 'click') + BezierCurveBrush.startCurve(mouse.x, mouse.y); + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + var color_rgb = HELPER.hex2rgb(COLOR); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 0.5; + + BezierCurveBrush.draw(canvas_active(), color_rgb, mouse.x, mouse.y, GUI.action_data().attributes.size); + } + } + else if (brush_type == 'Chrome') { + if (type == 'click') { + chrome_brush.init(canvas_active()); + chrome_brush.strokeStart(mouse.x, mouse.y); + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + var color_rgb = HELPER.hex2rgb(COLOR); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 1; + + chrome_brush.stroke(color_rgb, mouse.x, mouse.y, GUI.action_data().attributes.size); + } + } + else if (brush_type == 'Fur') { + if (type == 'click') { + points = new Array(); + prevMouseX = mouse.x; + prevMouseY = mouse.y; + count = 0; + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + var color_rgb = HELPER.hex2rgb(COLOR); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", 0.1)"; + canvas_active().lineWidth = 1; + + f = mouse.x; + c = mouse.y; + var e, b, a, g; + points.push([f, c]); + canvas_active().beginPath(); + canvas_active().moveTo(prevMouseX, prevMouseY); + canvas_active().lineTo(f, c); + canvas_active().stroke(); + for (e = 0; e < points.length; e++) { + b = points[e][0] - points[count][0]; + a = points[e][1] - points[count][1]; + g = b * b + a * a; + var g_size = Math.round(400 * GUI.action_data().attributes.size); + if (g < g_size && Math.random() > g / g_size) { + canvas_active().beginPath(); + canvas_active().moveTo(f + (b * 0.5), c + (a * 0.5)); + canvas_active().lineTo(f - (b * 0.5), c - (a * 0.5)); + canvas_active().stroke(); + } + } + prevMouseX = f; + prevMouseY = c; + count++; + } + } + else if (brush_type == 'Grouped') { + groups_n = GUI.action_data().attributes.size; + gsize = 10; + random_power = 5; + + if (type == 'click') { + chrome_brush.init(canvas_active()); + chrome_brush.strokeStart(mouse.x, mouse.y); + groups = []; + + for (var g = 0; g < groups_n; g++) { + groups[g] = {}; + groups[g].x = HELPER.getRandomInt(-gsize, gsize); + groups[g].y = HELPER.getRandomInt(-gsize, gsize); + } + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 0.5; + + for (var g in groups) { + canvas_active().beginPath(); + canvas_active().moveTo(mouse.last_x + groups[g].x, mouse.last_y + groups[g].y); + + //randomize here + groups[g].x += HELPER.getRandomInt(-random_power, random_power); + groups[g].y += HELPER.getRandomInt(-random_power, random_power); + if (groups[g].x < -gsize) + groups[g].x = -gsize + random_power; + if (groups[g].y < -gsize) + groups[g].y = -gsize + random_power; + if (groups[g].x > gsize) + groups[g].x = gsize - random_power; + if (groups[g].y > gsize) + groups[g].y = gsize - random_power; + + canvas_active().lineTo(mouse.x + groups[g].x, mouse.y + groups[g].y); + canvas_active().stroke(); + } + } + } + else if (brush_type == 'Shaded') { + if (type == 'click') { + shaded_brush.init(canvas_active()); + shaded_brush.strokeStart(mouse.x, mouse.y); + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + var color_rgb = HELPER.hex2rgb(COLOR); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 1; + + shaded_brush.stroke(color_rgb, mouse.x, mouse.y, GUI.action_data().attributes.size); + } + } + else if (brush_type == 'Sketchy') { + if (type == 'click') { + sketchy_brush.init(canvas_active()); + sketchy_brush.strokeStart(mouse.x, mouse.y); + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + var color_rgb = HELPER.hex2rgb(COLOR); + canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")"; + canvas_active().lineWidth = 1; + + sketchy_brush.stroke(color_rgb, mouse.x, mouse.y, GUI.action_data().attributes.size); + } + } + }; + this.gradient_tool = function (type, mouse, event) { + if (mouse != undefined && mouse.valid == false && type != 'init') + return true; + var power = GUI.action_data().attributes.power; + if (power > 99) + power = 99; + //var color1, color2; + + if (type == 'init') { + POP.add({name: "param1", title: "Color #1:", value: '#000000', type: 'color'}); + POP.add({name: "param2", title: "Transparency #1:", value: '255', range: [0, 255]}); + POP.add({name: "param3", title: "Color #2:", value: '#ffffff', type: 'color'}); + POP.add({name: "param4", title: "Transparency #2:", value: '255', range: [0, 255]}); + POP.preview_in_main = true; + POP.show( + 'Text', + function (user_response) { + EDIT.save_state(); + color1 = HELPER.hex2rgb(user_response.param1); + color1.a = parseInt(user_response.param2); + + color2 = HELPER.hex2rgb(user_response.param3); + color2.a = parseInt(user_response.param4); + } + ); + } + else if (type == 'drag') { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + if (GUI.action_data().attributes.radial == false) { + //linear + canvas_front.rect(0, 0, WIDTH, HEIGHT); + if (mouse.x > mouse.click_x) { + var grd = canvas_front.createLinearGradient( + mouse.click_x, mouse.click_y, + mouse.x, mouse.y); + } + else { + var grd = canvas_front.createLinearGradient( + mouse.x, mouse.y, + mouse.click_x, mouse.click_y); + } + grd.addColorStop(0, "rgba(" + color1.r + ", " + color1.g + ", " + color1.b + ", " + color1.a / 255 + ")"); + grd.addColorStop(1, "rgba(" + color2.r + ", " + color2.g + ", " + color2.b + ", " + color2.a / 255 + ")"); + canvas_front.fillStyle = grd; + canvas_front.fill(); + } + else { + //radial + var dist_x = mouse.click_x - mouse.x; + var dist_y = mouse.click_y - mouse.y; + var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)); + var radgrad = canvas_front.createRadialGradient( + mouse.click_x, mouse.click_y, distance * power / 100, + mouse.click_x, mouse.click_y, distance); + radgrad.addColorStop(0, "rgba(" + color1.r + ", " + color1.g + ", " + color1.b + ", " + color1.a / 255 + ")"); + radgrad.addColorStop(1, "rgba(" + color2.r + ", " + color2.g + ", " + color2.b + ", " + color2.a / 255 + ")"); + + canvas_front.fillStyle = radgrad; + canvas_front.fillRect(0, 0, WIDTH, HEIGHT); + } + //draw line + canvas_front.beginPath(); + canvas_front.strokeStyle = "#ff0000"; + canvas_front.lineWidth = 1; + var xx = mouse.x; + var yy = mouse.y; + canvas_front.moveTo(mouse.click_x + 0.5, mouse.click_y + 0.5); + canvas_front.lineTo(xx + 0.5, yy + 0.5); + canvas_front.stroke(); + } + else if (type == 'release') { + EDIT.save_state(); + if (GUI.action_data().attributes.radial == false) { + //linear + canvas_active().rect(0, 0, WIDTH, HEIGHT); + if (mouse.x > mouse.click_x) { + var grd = canvas_active().createLinearGradient( + mouse.click_x, mouse.click_y, + mouse.x, mouse.y); + } + else { + var grd = canvas_active().createLinearGradient( + mouse.x, mouse.y, + mouse.click_x, mouse.click_y); + } + grd.addColorStop(0, "rgba(" + color1.r + ", " + color1.g + ", " + color1.b + ", " + color1.a / 255 + ")"); + grd.addColorStop(1, "rgba(" + color2.r + ", " + color2.g + ", " + color2.b + ", " + color2.a / 255 + ")"); + canvas_active().fillStyle = grd; + canvas_active().fill(); + } + else { + //radial + var dist_x = mouse.click_x - mouse.x; + var dist_y = mouse.click_y - mouse.y; + var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y)); + var radgrad = canvas_active().createRadialGradient( + mouse.click_x, mouse.click_y, distance * power / 100, + mouse.click_x, mouse.click_y, distance); + radgrad.addColorStop(0, "rgba(" + color1.r + ", " + color1.g + ", " + color1.b + ", " + color1.a / 255 + ")"); + radgrad.addColorStop(1, "rgba(" + color2.r + ", " + color2.g + ", " + color2.b + ", " + color2.a / 255 + ")"); + + canvas_active().fillStyle = radgrad; + canvas_active().fillRect(0, 0, WIDTH, HEIGHT); + } + } + }; + this.blur_tool = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var size = GUI.action_data().attributes.size; + var size_half = Math.round(size / 2); + var xx = mouse.x - size / 2; + var yy = mouse.y - size / 2; + if (xx < 0) + xx = 0; + if (yy < 0) + yy = 0; + if (type == 'click') { + EDIT.save_state(); + var param1 = GUI.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + else if (type == 'drag') { + var param1 = GUI.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + else if (type == 'move') { + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + }; + this.sharpen_tool = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var size = GUI.action_data().attributes.size; + var size_half = Math.round(size / 2); + var xx = mouse.x - size / 2; + var yy = mouse.y - size / 2; + if (xx < 0) + xx = 0; + if (yy < 0) + yy = 0; + + if (type == 'click') { + EDIT.save_state(); + var param1 = GUI.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + else if (type == 'drag') { + var param1 = GUI.action_data().attributes.strength; + var imageData = canvas_active().getImageData(xx, yy, size, size); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); + + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + else if (type == 'move') { + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + }; + this.burn_dodge_tool = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var size = GUI.action_data().attributes.size; + var power = GUI.action_data().attributes.power * 2.5; + + if (type == 'click') { + EDIT.save_state(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.save(); + EVENTS.clear_front_on_release = false; + + //init settings + canvas_active().beginPath(); + canvas_active().lineWidth = GUI.action_data().attributes.size; + canvas_active().lineCap = 'round'; + canvas_active().lineJoin = 'round'; + + canvas_front.beginPath(); + if (GUI.action_data().attributes.burn == true) + canvas_front.strokeStyle = "rgba(0, 0, 0, " + power / 255 + ")"; + else + canvas_front.strokeStyle = "rgba(255, 255, 255, " + power / 255 + ")"; + canvas_front.lineWidth = GUI.action_data().attributes.size; + canvas_front.lineCap = 'round'; + canvas_front.lineJoin = 'round'; + } + else if (type == 'drag' && mouse.last_x != false && mouse.last_y != false) { + //now draw preview + canvas_front.beginPath(); + //clean from last line + canvas_front.globalCompositeOperation = "destination-out"; + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + //reset + canvas_front.globalCompositeOperation = "source-over"; + //draw new line segment + canvas_front.moveTo(mouse.last_x, mouse.last_y); + canvas_front.lineTo(mouse.x, mouse.y); + canvas_front.stroke(); + } + else if (type == 'release') { + canvas_active().globalCompositeOperation = "soft-light"; + canvas_active().shadowBlur = 5; + canvas_active().drawImage(document.getElementById("canvas_front"), 0, 0); + canvas_active().globalCompositeOperation = "source-over"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EVENTS.clear_front_on_release = true; + + //if mouse was not moved + if (mouse.click_x == mouse.x && mouse.click_y == mouse.y) { + canvas_active().globalCompositeOperation = "soft-light"; + canvas_active().beginPath(); + canvas_active().arc(mouse.x, mouse.y, GUI.action_data().attributes.size / 2, 0, 2 * Math.PI, false); + if (GUI.action_data().attributes.burn == true) { + canvas_active().fillStyle = "rgba(0, 0, 0, " + power / 255 + ")"; + } + else { + canvas_active().fillStyle = "rgba(255, 255, 255, " + power / 255 + ")"; + } + canvas_active().shadowBlur = 5; + canvas_active().fill(); + canvas_active().globalCompositeOperation = "source-over"; + } + canvas_active().shadowBlur = 0; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.restore(); + } + else if (type == 'move' && EVENTS.isDrag == false) { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + }; + this.crop_tool = function (type, mouse, event) { + if (mouse.click_valid == false) + return true; + if (type == 'drag') { + if (mouse.x < 0) + mouse.x = 0; + if (mouse.y < 0) + mouse.y = 0; + if (mouse.x >= WIDTH) + mouse.x = WIDTH - 1; + if (mouse.y >= HEIGHT) + mouse.y = HEIGHT - 1; + if (mouse.click_x >= WIDTH) + mouse.click_x = WIDTH - 1; + if (mouse.click_y >= HEIGHT) + mouse.click_y = HEIGHT - 1; + if (this.select_square_action == '') { + document.body.style.cursor = "crosshair"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + } + else if (type == 'move' && this.select_data != false) { + if (EVENTS.isDrag == true) + return true; + canvas_front.lineWidth = 1; + border_size = 5; + this.select_square_action = ''; + + if (this.select_square_action == '' + && mouse.x > this.select_data.x && mouse.y > this.select_data.y + && mouse.x < this.select_data.x + this.select_data.w && mouse.y < this.select_data.y + this.select_data.h) { + this.select_square_action = 'move'; + document.body.style.cursor = 'pointer'; + } + if (this.select_square_action == '' && mouse.valid == true) + document.body.style.cursor = "auto"; + } + else if (type == 'release') { + if (mouse.x < 0) + mouse.x = 0; + if (mouse.y < 0) + mouse.y = 0; + if (mouse.x >= WIDTH) + mouse.x = WIDTH - 1; + if (mouse.y >= HEIGHT) + mouse.y = HEIGHT - 1; + if (mouse.click_x >= WIDTH) + mouse.click_x = WIDTH - 1; + if (mouse.click_y >= HEIGHT) + mouse.click_y = HEIGHT - 1; + + if (this.select_square_action == '') { + if (mouse.x != mouse.click_x && mouse.y != mouse.click_y) { + this.select_data = { + x: Math.min(mouse.x, mouse.click_x), + y: Math.min(mouse.y, mouse.click_y), + w: Math.abs(mouse.x - mouse.click_x), + h: Math.abs(mouse.y - mouse.click_y) + }; + } + } + GUI.draw_selected_area(true); + + LAYER.update_info_block(); + } + else if (type == 'click' && this.select_data != false) { + document.body.style.cursor = "auto"; + if (mouse.x > this.select_data.x && mouse.y > this.select_data.y + && mouse.x < this.select_data.x + this.select_data.w && mouse.y < this.select_data.y + this.select_data.h) { + EDIT.save_state(); + for (var i in LAYER.layers) { + var layer = document.getElementById(LAYER.layers[i].name).getContext("2d"); + + var tmp = layer.getImageData(this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + } + + //resize + EDIT.save_state(); + WIDTH = this.select_data.w; + HEIGHT = this.select_data.h; + LAYER.set_canvas_size(); + + this.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + } + }; + this.clone_tool = function (type, mouse, event) { + if (mouse.valid == false) + return true; + var size = GUI.action_data().attributes.size; + var size_half = Math.round(size / 2); + + if (type == 'click') { + EDIT.save_state(); + + if (clone_data === false) { + POP.add({html: 'Source is empty, right click on image first.'}); + POP.show('Error', ''); + } + else { + //draw rounded image + EL.image_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), GUI.action_data().attributes.anti_alias); + } + } + else if (type == 'right_click') { + //save clone source + clone_data = document.createElement("canvas"); + clone_data.width = size; + clone_data.height = size; + var xx = mouse.x - size_half; + var yy = mouse.y - size_half; + if (xx < 0) + xx = 0; + if (yy < 0) + yy = 0; + clone_data.getContext("2d").drawImage(canvas_active(true), xx, yy, size, size, 0, 0, size, size); + return false; + } + else if (type == 'drag') { + if (event.which == 3) + return true; + if (clone_data === false) + return false; //no source + + //draw rounded image + EL.image_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), GUI.action_data().attributes.anti_alias); + } + else if (type == 'move') { + //show size + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + EL.circle(canvas_front, mouse.x, mouse.y, size); + } + }; + this.select_square = function (type, mouse, event) { + if (mouse.click_valid == false) + return true; + if (type == 'drag') { + if (mouse.x < 0) + mouse.x = 0; + if (mouse.y < 0) + mouse.y = 0; + if (mouse.x >= WIDTH) + mouse.x = WIDTH - 1; + if (mouse.y >= HEIGHT) + mouse.y = HEIGHT - 1; + if (mouse.click_x >= WIDTH) + mouse.click_x = WIDTH - 1; + if (mouse.click_y >= HEIGHT) + mouse.click_y = HEIGHT - 1; + if (this.select_square_action == '') { + document.body.style.cursor = "crosshair"; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + } + else { + if (this.select_square_action == 'move') { + //move + try { + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.drawImage(canvas_active(true), + this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h, + mouse.x - mouse.click_x + this.select_data.x, + mouse.y - mouse.click_y + this.select_data.y, + this.select_data.w, + this.select_data.h); + canvas_front.restore(); + } + catch (err) { + console.log("Error: " + err.message); + } + } + else { + //resize + var s_x = this.select_data.x; + var s_y = this.select_data.y; + var d_x = this.select_data.w; + var d_y = this.select_data.h; + if (this.select_square_action == 'resize-left') { + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + } + else if (this.select_square_action == 'resize-right') + d_x += mouse.x - mouse.click_x; + else if (this.select_square_action == 'resize-top') { + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-bottom') + d_y += mouse.y - mouse.click_y; + else if (this.select_square_action == 'resize-1') { + s_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_x -= mouse.x - mouse.click_x; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-2') { + d_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-3') { + d_x += mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-4') { + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + var s_x = Math.max(s_x, 0); + var s_y = Math.max(s_y, 0); + var d_x = Math.max(d_x, 0); + var d_y = Math.max(d_y, 0); + + canvas_front.save(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.mozImageSmoothingEnabled = false; + canvas_front.drawImage(canvas_active(true), + this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h, + s_x, s_y, d_x, d_y); + canvas_front.restore(); + } + } + } + else if (type == 'move' && this.select_data != false) { + if (EVENTS.isDrag == true) + return true; + canvas_front.lineWidth = 1; + border_size = 5; + this.select_square_action = ''; + var sr_size = Math.ceil(EVENTS.sr_size / GUI.ZOOM * 100); + + //left + if (this.check_mouse_pos(this.select_data.x, this.select_data.y + this.select_data.h / 2, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "w-resize"; + this.select_square_action = 'resize-left'; + } + //top + else if (this.check_mouse_pos(this.select_data.x + this.select_data.w / 2, this.select_data.y, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "n-resize"; + this.select_square_action = 'resize-top'; + } + //right + else if (this.check_mouse_pos(this.select_data.x + this.select_data.w - sr_size, this.select_data.y + this.select_data.h / 2, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "w-resize"; + this.select_square_action = 'resize-right'; + } + //bottom + else if (this.check_mouse_pos(this.select_data.x + this.select_data.w / 2, this.select_data.y + this.select_data.h - sr_size, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "n-resize"; + this.select_square_action = 'resize-bottom'; + } + + //corner 1 + if (this.check_mouse_pos(this.select_data.x, this.select_data.y, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "nw-resize"; + this.select_square_action = 'resize-1'; + } + //corner 2 + else if (this.check_mouse_pos(this.select_data.x + this.select_data.w - sr_size, this.select_data.y, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "ne-resize"; + this.select_square_action = 'resize-2'; + } + //corner 3 + else if (this.check_mouse_pos(this.select_data.x + this.select_data.w - sr_size, this.select_data.y + this.select_data.h - sr_size, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "nw-resize"; + this.select_square_action = 'resize-3'; + } + //corner 4 + else if (this.check_mouse_pos(this.select_data.x, this.select_data.y + this.select_data.h - sr_size, sr_size, mouse.x, mouse.y) == true) { + document.body.style.cursor = "ne-resize"; + this.select_square_action = 'resize-4'; + } + + if (this.select_square_action == '' + && mouse.x > this.select_data.x && mouse.y > this.select_data.y + && mouse.x < this.select_data.x + this.select_data.w && mouse.y < this.select_data.y + this.select_data.h) { + this.select_square_action = 'move'; + document.body.style.cursor = "move"; + } + if (this.select_square_action == '' && mouse.valid == true) + document.body.style.cursor = "auto"; + } + else if (type == 'release') { + if (mouse.x < 0) + mouse.x = 0; + if (mouse.y < 0) + mouse.y = 0; + if (mouse.x >= WIDTH) + mouse.x = WIDTH - 1; + if (mouse.y >= HEIGHT) + mouse.y = HEIGHT - 1; + if (mouse.click_x >= WIDTH) + mouse.click_x = WIDTH - 1; + if (mouse.click_y >= HEIGHT) + mouse.click_y = HEIGHT - 1; + + if (this.select_square_action == '') { + if (mouse.x != mouse.click_x && mouse.y != mouse.click_y) { + this.select_data = { + x: Math.min(mouse.x, mouse.click_x), + y: Math.min(mouse.y, mouse.click_y), + w: Math.abs(mouse.x - mouse.click_x), + h: Math.abs(mouse.y - mouse.click_y) + }; + } + } + else { + EDIT.save_state(); + if (this.select_square_action == 'move') { + if (this.select_data != false) { + select_data_tmp = canvas_active().getImageData(this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h); + canvas_active().clearRect(this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h); + canvas_active().putImageData(select_data_tmp, mouse.x - mouse.click_x + this.select_data.x, mouse.y - mouse.click_y + this.select_data.y); + } + this.select_data.x += mouse.x - mouse.click_x; + this.select_data.y += mouse.y - mouse.click_y; + } + else { + var s_x = this.select_data.x; + var s_y = this.select_data.y; + var d_x = this.select_data.w; + var d_y = this.select_data.h; + + if (this.select_square_action == 'resize-left') { + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + } + else if (this.select_square_action == 'resize-right') + d_x += mouse.x - mouse.click_x; + else if (this.select_square_action == 'resize-top') { + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-bottom') + d_y += mouse.y - mouse.click_y; + else if (this.select_square_action == 'resize-1') { + s_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_x -= mouse.x - mouse.click_x; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-2') { + d_x += mouse.x - mouse.click_x; + s_y += mouse.y - mouse.click_y; + d_y -= mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-3') { + d_x += mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + else if (this.select_square_action == 'resize-4') { + s_x += mouse.x - mouse.click_x; + d_x -= mouse.x - mouse.click_x; + d_y += mouse.y - mouse.click_y; + } + var s_x = Math.max(s_x, 0); + var s_y = Math.max(s_y, 0); + var d_x = Math.max(d_x, 0); + var d_y = Math.max(d_y, 0); + + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = Math.max(d_x, this.select_data.w); + tempCanvas.height = Math.max(d_y, this.select_data.h); + tempCtx.drawImage(canvas_active(true), this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h, 0, 0, this.select_data.w, this.select_data.h); + + canvas_active().clearRect(s_x, s_y, d_x, d_y); + canvas_active().drawImage(tempCanvas, 0, 0, this.select_data.w, this.select_data.h, s_x, s_y, d_x, d_y); + + this.select_data.x = s_x; + this.select_data.y = s_y; + this.select_data.w = d_x; + this.select_data.h = d_y; + } + } + GUI.draw_selected_area(); + LAYER.update_info_block(); + } + }; + + this.check_mouse_pos = function (x, y, size, mouse_x, mouse_y) { + if (mouse_x > x - Math.round(size) && mouse_x < x + Math.round(size)) + if (mouse_y > y - Math.round(size) && mouse_y < y + Math.round(size)) + return true; + return false; + }; +} \ No newline at end of file diff --git a/js/edit.js b/js/edit.js new file mode 100644 index 0000000..88f8b1a --- /dev/null +++ b/js/edit.js @@ -0,0 +1,148 @@ +/* global MAIN, POP, LAYER, DRAW, GUI */ +/* global WIDTH, HEIGHT, canvas_active, canvas_front */ + +var EDIT = new EDIT_CLASS(); + +/** + * manages edit actions + * + * @author ViliusL + */ +function EDIT_CLASS() { + + /** + * used to store internal copied objects data + */ + var PASTE_DATA = false; + + /** + * latest 3 saved states of all layers for undo + */ + var layers_archive = [{}, {}, {}]; + + /** + * on undo, current data index in layers_archive array + */ + var undo_level = 0; + + //undo + this.edit_undo = function () { + this.undo(); + }; + + //cut + this.edit_cut = function () { + this.save_state(); + if (DRAW.select_data != false) { + this.copy_to_clipboard(); + canvas_active().clearRect(DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h); + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + + //copy + this.edit_copy = function () { + if (DRAW.select_data != false) { + this.copy_to_clipboard(); + } + }; + + //paste + this.edit_paste = function () { + this.save_state(); + this.paste('menu'); + }; + + //select all + this.edit_select = function () { + DRAW.select_data = { + x: 0, + y: 0, + w: WIDTH, + h: HEIGHT + }; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + GUI.draw_selected_area(); + }; + + //clear selection + this.edit_clear = function () { + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + }; + + this.copy_to_clipboard = function () { + PASTE_DATA = false; + PASTE_DATA = document.createElement("canvas"); + PASTE_DATA.width = DRAW.select_data.w; + PASTE_DATA.height = DRAW.select_data.h; + PASTE_DATA.getContext("2d").drawImage(canvas_active(true), DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h, 0, 0, DRAW.select_data.w, DRAW.select_data.h); + }; + + this.paste = function (type) { + if (PASTE_DATA == false) { + if (type == 'menu') { + POP.add({title: "Error:", value: 'Empty data'}); + POP.add({title: "Notice:", value: 'To paste from clipboard, use Ctrl-V.'}); + POP.show('Notice', ''); + } + return false; + } + + tmp = new Array(); + var new_name = 'Layer #' + (LAYER.layers.length + 1); + LAYER.create_canvas(new_name); + LAYER.layers.push({name: new_name, visible: true}); + LAYER.layer_active = LAYER.layers.length - 1; + canvas_active().drawImage(PASTE_DATA, 0, 0); + LAYER.layer_renew(); + }; + + this.save_state = function () { + undo_level = 0; + j = 0; + + //move previous + layers_archive[2] = layers_archive[1]; + layers_archive[1] = layers_archive[0]; + + //save last state + layers_archive[j] = {}; + layers_archive[j].width = WIDTH; + layers_archive[j].height = HEIGHT; + layers_archive[j].data = {}; + for (var i in LAYER.layers) { + layers_archive[j].data[LAYER.layers[i].name] = document.createElement('canvas'); + layers_archive[j].data[LAYER.layers[i].name].width = WIDTH; + layers_archive[j].data[LAYER.layers[i].name].height = HEIGHT; + layers_archive[j].data[LAYER.layers[i].name].getContext('2d').drawImage(document.getElementById(LAYER.layers[i].name), 0, 0); + } + return true; + }; + //supports 3 levels undo system - more levels requires more memory + this.undo = function () { + if (layers_archive.length == 0) + return false; + j = undo_level; + undo_level++; + if (layers_archive[j] == undefined || layers_archive[j].width == undefined) + return false; + if (WIDTH != layers_archive[j].width || HEIGHT != layers_archive[j].height) { + WIDTH = layers_archive[j].width; + HEIGHT = layers_archive[j].height; + LAYER.set_canvas_size(true); + return true; //size changed, cant undo + } + + //undo + for (var i in LAYER.layers) { + if (layers_archive[j].data[LAYER.layers[i].name] != undefined) { + document.getElementById(LAYER.layers[i].name).getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); + document.getElementById(LAYER.layers[i].name).getContext("2d").drawImage(layers_archive[j].data[LAYER.layers[i].name], 0, 0); + } + } + GUI.zoom(); + return true; + }; +} diff --git a/js/effects.js b/js/effects.js new file mode 100644 index 0000000..5c45fdf --- /dev/null +++ b/js/effects.js @@ -0,0 +1,1178 @@ +/* global POP, MAIN, VINTAGE, ImageFilters, fx_filter, VINTAGE, fx, HELPER, EVENTS, EDIT, GUI */ +/* global WIDTH, HEIGHT, canvas_active, canvas_front */ + +var EFFECTS = new EFFECTS_CLASS(); + +/** + * manages effects + * + * @author ViliusL + */ +function EFFECTS_CLASS() { + + this.FILTERS_LIST = [ + {title: 'Black and White', name: 'effects_bw' }, + {title: 'Blur-Box', name: 'effects_BoxBlur' }, + {title: 'Blur-Gaussian', name: 'effects_GaussianBlur' }, + {title: 'Blur-Stack', name: 'effects_StackBlur' }, + {title: 'Blur-Zoom', name: 'effects_zoomblur' }, + {title: 'Bulge/Pinch', name: 'effects_bulge_pinch' }, + {title: 'Colorize', name: 'effects_colorize' }, + {title: 'Denoise', name: 'effects_denoise' }, + {title: 'Desaturate', name: 'effects_Desaturate' }, + {title: 'Dither', name: 'effects_Dither' }, + {title: 'Dot Screen', name: 'effects_dot_screen' }, + {title: 'Edge', name: 'effects_Edge' }, + {title: 'Emboss', name: 'effects_Emboss' }, + {title: 'Enrich', name: 'effects_Enrich' }, + {title: 'Gamma', name: 'effects_Gamma' }, + {title: 'Grains', name: 'effects_Grains' }, + {title: 'Heatmap', name: 'effects_heatmap' }, + {title: 'HSL Adjustment', name: 'effects_HSLAdjustment' }, + {title: 'JPG Compression', name: 'effects_jpg_vintage' }, + {title: 'Mosaic', name: 'effects_Mosaic' }, + {title: 'Oil', name: 'effects_Oil' }, + {title: 'Posterize', name: 'effects_Posterize' }, + {title: 'Sepia', name: 'effects_Sepia' }, + {title: 'Sharpen', name: 'effects_Sharpen' }, + {title: 'Solarize', name: 'effects_Solarize' }, + {title: 'Tilt Shift', name: 'effects_tilt_shift' }, + {title: 'Vignette', name: 'effects_vignette' }, + {title: 'Vintage', name: 'effects_vintage' }, + ]; + + var fx_filter = fx.canvas(); + + this.effects_bw = function () { + var default_level = this.thresholding('otsu', canvas_active(), WIDTH, HEIGHT, true); + POP.add({name: "param1", title: "Level:", value: default_level, range: [0, 255]}); + POP.add({name: "param2", title: "Dithering:", values: ['No', 'Yes'], onchange: "EFFECTS.effects_bw_onchange()"}); + POP.effects = true; + POP.show('Black and White', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = false; + if (user_response.param2 == 'Yes') + param2 = true; + + EFFECTS.effect_bw(canvas_active(), WIDTH, HEIGHT, param1, param2); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = false; + if (user_response.param2 == 'Yes') + param2 = true; + + EFFECTS.effect_bw(canvas_preview, w, h, param1, param2); + } + ); + }; + + this.effects_bw_onchange = function () { + var levels = document.getElementById("pop_data_param1"); + var dithering_no = document.getElementById("pop_data_param2_poptmp0"); + var dithering_yes = document.getElementById("pop_data_param2_poptmp1"); + + if (dithering_no.checked == true) + levels.disabled = false; + else if (dithering_yes.checked == true) + levels.disabled = true; + + POP.view(); + }; + + this.effects_BoxBlur = function () { + POP.add({name: "param1", title: "H Radius:", value: "3", range: [1, 20]}); + POP.add({name: "param2", title: "V Radius:", value: "3", range: [1, 20]}); + POP.add({name: "param3", title: "Quality:", value: "2", range: [1, 10]}); + POP.effects = true; + POP.show('Blur-Box', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_GaussianBlur = function () { + POP.add({name: "param1", title: "Strength:", value: "2", range: [1, 4], step: 0.1}); + POP.effects = true; + POP.show('Blur-Gaussian', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_StackBlur = function () { + POP.add({name: "param1", title: "Radius:", value: "6", range: [1, 40]}); + POP.effects = true; + POP.show('Blur-Stack', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.StackBlur(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_zoomblur = function () { + POP.add({name: "param1", title: "Strength:", value: "0.3", range: [0, 1], step: 0.01}); + POP.add({name: "param2", title: "Center x:", value: Math.round(WIDTH / 2), range: [0, WIDTH]}); + POP.add({name: "param3", title: "Center y:", value: Math.round(HEIGHT / 2), range: [0, HEIGHT]}); + POP.effects = true; + POP.show('Blur-Zoom', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + //recalc param by size + param2 = param2 / WIDTH * w; + param3 = param3 / HEIGHT * h; + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + + //draw circle + canvas_preview.beginPath(); + canvas_preview.strokeStyle = "#ff0000"; + canvas_preview.lineWidth = 1; + canvas_preview.beginPath(); + canvas_preview.arc(param2, param3, 5, 0, Math.PI * 2, true); + canvas_preview.stroke(); + } + ); + }; + + this.effects_bulge_pinch = function () { + POP.add({name: "param1", title: "Strength:", value: 1, range: [-1, 1], step: 0.1}); + var default_value = Math.min(WIDTH, HEIGHT); + default_value = Math.round(default_value / 2); + POP.add({name: "param2", title: "Radius:", value: default_value, range: [0, 600]}); + POP.effects = true; + POP.show('Bulge/Pinch', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).bulgePinch(Math.round(WIDTH / 2), Math.round(HEIGHT / 2), param2, param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + var param2 = parseInt(user_response.param2); + + //recalc param by size + param2 = param2 / Math.min(WIDTH, HEIGHT) * Math.min(w, h); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).bulgePinch(Math.round(w / 2), Math.round(h / 2), param2, param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + } + ); + }; + + this.effects_colorize = function () { + var _this = this; + var colorize_data; + + POP.add({name: "param1", title: "Power:", value: "3", range: [1, 10]}); + POP.add({name: "param2", title: "Limit:", value: "30", range: [10, 200]}); + POP.add({name: "param3", title: "Dithering:", values: ["Yes", "No"]}); + POP.preview_in_main = true; + POP.effects = true; + POP.show('Auto colorize', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + if (user_response.param3 == 'Yes') + param3 = true; + + else + param3 = false; + + _this.colorize(canvas_active(), WIDTH, HEIGHT, param1, param2, param3, colorize_data); + GUI.zoom(); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + }, + function (user_response) { + POP.preview_in_main = true; + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + if (user_response.param3 == 'Yes') + param3 = true; + else + param3 = false; + + colorize_data = _this.colorize(false, WIDTH, HEIGHT, param1, param2, param3, true); + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.drawImage(canvas_active(true), 0, 0); + _this.colorize(canvas_front, WIDTH, HEIGHT, param1, param2, param3, colorize_data); + } + ); + }; + + this.effects_denoise = function () { + POP.add({name: "param1", title: "Exponent:", value: "20", range: [0, 50]}); + POP.effects = true; + POP.show('Denoise', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).denoise(param1).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).denoise(param1).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + } + ); + }; + + this.effects_Desaturate = function () { + POP.effects = true; + POP.show('Desaturate', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Desaturate(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Desaturate(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Dither = function () { + POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32]}); + POP.effects = true; + POP.show('Dither', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Dither(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Dither(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_dot_screen = function () { + POP.add({name: "param2", title: "Size:", value: "3", range: [1, 20]}); + POP.effects = true; + POP.show('Dot Screen', + function (user_response) { + EDIT.save_state(); + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).dotScreen(Math.round(WIDTH / 2), Math.round(HEIGHT / 2), 0, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param2 = parseInt(user_response.param2); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).dotScreen(Math.round(w / 2), Math.round(h / 2), 0, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + } + ); + }; + + this.effects_Edge = function () { + POP.effects = true; + POP.show('Edge', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Edge(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Edge(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Emboss = function () { + POP.effects = true; + POP.show('Emboss', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Emboss(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Emboss(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Enrich = function () { + POP.effects = true; + POP.show('Enrich', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Enrich(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Enrich(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Gamma = function () { + POP.add({name: "param1", title: "Gamma:", value: "1", range: [0, 3], step: 0.1}); + POP.effects = true; + POP.show('Gamma', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Gamma(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Gamma(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Grains = function () { + var _this = this; + POP.effects = true; + POP.add({name: "param1", title: "Level:", value: "30", range: [0, 50]}); + POP.show('Grains', + function (user_response) { + var param1 = parseInt(user_response.param1); + EDIT.save_state(); + _this.grains_effect(canvas_active(), WIDTH, HEIGHT, param1); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + _this.grains_effect(canvas_preview, w, h, param1); + } + ); + }; + + this.effects_heatmap = function () { + var _this = this; + POP.effects = true; + POP.show('Heatmap', + function (user_response) { + EDIT.save_state(); + _this.heatmap_effect(canvas_active(), WIDTH, HEIGHT); + }, + function (user_response, canvas_preview, w, h) { + _this.heatmap_effect(canvas_preview, w, h); + } + ); + }; + + this.effects_HSLAdjustment = function () { + POP.add({name: "param1", title: "Hue:", value: "0", range: [-180, 180]}); + POP.add({name: "param2", title: "Saturation:", value: "0", range: [-100, 100]}); + POP.add({name: "param3", title: "Luminance:", value: "0", range: [-100, 100]}); + POP.effects = true; + POP.show('HSL Adjustment', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + //ages photo saving it to jpg many times + this.effects_jpg_vintage = function () { + POP.add({name: "param1", title: "Quality:", value: 80, range: [1, 100]}); + POP.effects = true; + POP.show('JPG Compression', + function (user_response) { + EDIT.save_state(); + var quality = parseInt(user_response.param1); + if (quality > 100 || quality < 1 || isNaN(quality) == true) + quality = 80; + quality = quality / 100; + var data = canvas_active(true).toDataURL('image/jpeg', quality); + var img = new Image; + img.onload = function () { + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(img, 0, 0); + }; + img.src = data; + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var quality = parseInt(user_response.param1); + if (quality > 100 || quality < 1 || isNaN(quality) == true) + quality = 80; + quality = quality / 100; + var element = document.getElementById("pop_post"); + var data = element.toDataURL('image/jpeg', quality); + var img = new Image; + img.onload = function () { + canvas_preview.clearRect(0, 0, w, h); + canvas_preview.drawImage(img, 0, 0); + }; + img.src = data; + } + ); + }; + + this.effects_Mosaic = function () { + POP.add({name: "param1", title: "Size:", value: "10", range: [1, 100]}); + POP.effects = true; + POP.show('Mosaic', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Mosaic(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Mosaic(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Oil = function () { + POP.add({name: "param1", title: "Range:", value: "2", range: [1, 5]}); + POP.add({name: "param2", title: "Levels:", value: "32", range: [1, 256]}); + POP.effects = true; + POP.show('Oil', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_perspective = function () { + POP.add({name: "param1", title: "X1:", value: WIDTH / 4, range: [0, WIDTH]}); + POP.add({name: "param2", title: "Y1:", value: HEIGHT / 4, range: [0, HEIGHT]}); + POP.add({name: "param3", title: "X2:", value: WIDTH * 3 / 4, range: [0, WIDTH]}); + POP.add({name: "param4", title: "Y2:", value: HEIGHT / 4, range: [0, HEIGHT]}); + POP.add({name: "param5", title: "X3:", value: WIDTH * 3 / 4, range: [0, WIDTH]}); + POP.add({name: "param6", title: "Y3:", value: HEIGHT * 3 / 4, range: [0, HEIGHT]}); + POP.add({name: "param7", title: "X4:", value: WIDTH / 4, range: [0, WIDTH]}); + POP.add({name: "param8", title: "Y4:", value: HEIGHT * 3 / 4, range: [0, HEIGHT]}); + POP.preview_in_main = true; + POP.effects = true; + POP.show('Perspective', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).perspective([WIDTH / 4, HEIGHT / 4, WIDTH * 3 / 4, HEIGHT / 4, WIDTH * 3 / 4, HEIGHT * 3 / 4, WIDTH / 4, HEIGHT * 3 / 4], [param1, param2, param3, param4, param5, param6, param7, param8]).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + canvas_front.rect(0, 0, WIDTH, HEIGHT); + canvas_front.fillStyle = "#ffffff"; + canvas_front.fill(); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).perspective([WIDTH / 4, HEIGHT / 4, WIDTH * 3 / 4, HEIGHT / 4, WIDTH * 3 / 4, HEIGHT * 3 / 4, WIDTH / 4, HEIGHT * 3 / 4], [param1, param2, param3, param4, param5, param6, param7, param8]).update(); //effect + canvas_front.drawImage(fx_filter, 0, 0); + + pers_square(param1, param2); + pers_square(param3, param4); + pers_square(param5, param6); + pers_square(param7, param8); + } + ); + + function pers_square(x, y) { + canvas_front.beginPath(); + canvas_front.rect(x - round(EVENTS.sr_size / 2), y - round(EVENTS.sr_size / 2), EVENTS.sr_size, EVENTS.sr_size); + canvas_front.fillStyle = "#0000c8"; + canvas_front.fill(); + } + }; + + this.effects_Posterize = function () { + POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32]}); + POP.effects = true; + POP.show('Posterize', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Posterize(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Posterize(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Sepia = function () { + POP.effects = true; + POP.show('Sepia', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sepia(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Sepia(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Sharpen = function () { + POP.add({name: "param1", title: "Factor:", value: "3", range: [1, 10], step: 0.1}); + POP.effects = true; + POP.show('Sharpen', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Sharpen(imageData, param1); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_Solarize = function () { + POP.effects = true; + POP.show('Solarize', + function (user_response) { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Solarize(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }, + function (user_response, canvas_preview, w, h) { + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Solarize(imageData); //add effect + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + this.effects_tilt_shift = function () { + //extra + POP.add({name: "param7", title: "Saturation:", value: "3", range: [0, 100]}); + POP.add({name: "param8", title: "Sharpen:", value: "1", range: [1, 10]}); + //main + POP.add({name: "param1", title: "Blur Radius:", value: "15", range: [0, 50]}); + POP.add({name: "param2", title: "Gradient Radius:", value: "200", range: [0, 400]}); + //startX, startY, endX, endY + POP.add({name: "param3", title: "X start:", value: "0", range: [0, WIDTH]}); + POP.add({name: "param4", title: "Y start:", value: Math.round(HEIGHT / 2), range: [0, HEIGHT]}); + POP.add({name: "param5", title: "X end:", value: WIDTH, range: [0, WIDTH]}); + POP.add({name: "param6", title: "Y end:", value: Math.round(HEIGHT / 2), range: [0, HEIGHT]}); + POP.effects = true; + POP.show('Tilt Shift', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + //main effect + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + + //saturation + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.HSLAdjustment(imageData, 0, param7, 0); + canvas_active().putImageData(filtered, 0, 0); + + //sharpen + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, param8); + canvas_active().putImageData(filtered, 0, 0); + + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param3 = parseInt(user_response.param3); + var param4 = parseInt(user_response.param4); + var param5 = parseInt(user_response.param5); + var param6 = parseInt(user_response.param6); + var param7 = parseInt(user_response.param7); + var param8 = parseInt(user_response.param8); + + //recalc param by size + var param3 = param3 / WIDTH * w; + var param4 = param4 / HEIGHT * h; + var param5 = param5 / WIDTH * w; + var param6 = param6 / HEIGHT * h; + + //main effect + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + + //saturation + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.HSLAdjustment(imageData, 0, param7, 0); + canvas_preview.putImageData(filtered, 0, 0); + + //sharpen + var imageData = canvas_preview.getImageData(0, 0, w, h); + var filtered = ImageFilters.Sharpen(imageData, param8); + canvas_preview.putImageData(filtered, 0, 0); + + //draw line + canvas_preview.beginPath(); + canvas_preview.strokeStyle = "#ff0000"; + canvas_preview.lineWidth = 1; + canvas_preview.moveTo(param3 + 0.5, param4 + 0.5); + canvas_preview.lineTo(param5 + 0.5, param6 + 0.5); + canvas_preview.stroke(); + } + ); + }; + + this.effects_vignette = function () { + POP.add({name: "param1", title: "Size:", value: "0.5", range: [0, 1], step: 0.01}); + POP.add({name: "param2", title: "Amount:", value: "0.5", range: [0, 1], step: 0.01}); + POP.effects = true; + POP.show('Vignette', + function (user_response) { + EDIT.save_state(); + var param1 = parseFloat(user_response.param1); + var param2 = parseFloat(user_response.param2); + + var texture = fx_filter.texture(canvas_active(true)); + fx_filter.draw(texture).vignette(param1, param2).update(); //effect + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().drawImage(fx_filter, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseFloat(user_response.param1); + var param2 = parseFloat(user_response.param2); + + var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); + fx_filter.draw(texture).vignette(param1, param2).update(); //effect + canvas_preview.drawImage(fx_filter, 0, 0); + } + ); + }; + + this.effects_vintage = function () { + POP.add({name: "red_offset", title: "Color adjust:", value: "70", range: [0, 200]}); + POP.add({name: "contrast", title: "Contrast:", value: "15", range: [0, 50]}); + POP.add({name: "blur", title: "Blur:", value: "0", range: [0, 2], step: 0.1}); + POP.add({name: "light_leak", title: "Light leak:", value: "90", range: [0, 150]}); + POP.add({name: "de_saturation", title: "Desaturation:", value: "40", range: [0, 100]}); + POP.add({name: "exposure", title: "Exposure level:", value: "80", range: [0, 150]}); + POP.add({name: "grains", title: "Grains level:", value: "20", range: [0, 50]}); + POP.add({name: "big_grains", title: "Big grains level:", value: "20", range: [0, 50]}); + POP.add({name: "vignette1", title: "Vignette size:", value: "0.3", range: [0, 0.5], step: 0.01}); + POP.add({name: "vignette2", title: "Vignette amount:", value: "0.5", range: [0, 0.7], step: 0.01}); + POP.add({name: "dust_level", title: "Dusts level:", value: "70", range: [0, 100]}); + POP.effects = true; + POP.show('Vintage', + function (user_response) { + EDIT.save_state(); + var red_offset = parseInt(user_response.red_offset); + var contrast = parseInt(user_response.contrast); + var blur = parseFloat(user_response.blur); + var light_leak = parseInt(user_response.light_leak); + var de_saturation = parseInt(user_response.de_saturation); + var exposure = parseInt(user_response.exposure); + var grains = parseInt(user_response.grains); + var big_grains = parseInt(user_response.big_grains); + var vignette1 = parseFloat(user_response.vignette1); + var vignette2 = parseFloat(user_response.vignette2); + var dust_level = parseInt(user_response.dust_level); + + VINTAGE.adjust_color(canvas_active(), WIDTH, HEIGHT, red_offset); + VINTAGE.lower_contrast(canvas_active(), WIDTH, HEIGHT, contrast); + VINTAGE.blur(canvas_active(), WIDTH, HEIGHT, blur); + VINTAGE.light_leak(canvas_active(), WIDTH, HEIGHT, light_leak); + VINTAGE.chemicals(canvas_active(), WIDTH, HEIGHT, de_saturation); + VINTAGE.exposure(canvas_active(), WIDTH, HEIGHT, exposure); + VINTAGE.grains(canvas_active(), WIDTH, HEIGHT, grains); + VINTAGE.grains_big(canvas_active(), WIDTH, HEIGHT, big_grains); + VINTAGE.optics(canvas_active(), WIDTH, HEIGHT, vignette1, vignette2); + VINTAGE.dusts(canvas_active(), WIDTH, HEIGHT, dust_level); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var red_offset = parseInt(user_response.red_offset); + var contrast = parseInt(user_response.contrast); + var blur = parseFloat(user_response.blur); + var light_leak = parseInt(user_response.light_leak); + var de_saturation = parseInt(user_response.de_saturation); + var exposure = parseInt(user_response.exposure); + var grains = parseInt(user_response.grains); + var big_grains = parseInt(user_response.big_grains); + var vignette1 = parseFloat(user_response.vignette1); + var vignette2 = parseFloat(user_response.vignette2); + var dust_level = parseInt(user_response.dust_level); + + VINTAGE.adjust_color(canvas_preview, w, h, red_offset); + VINTAGE.lower_contrast(canvas_preview, w, h, contrast); + VINTAGE.blur(canvas_preview, w, h, blur); + VINTAGE.light_leak(canvas_preview, w, h, light_leak); + VINTAGE.chemicals(canvas_preview, w, h, de_saturation); + VINTAGE.exposure(canvas_preview, w, h, exposure); + VINTAGE.grains(canvas_preview, w, h, grains); + VINTAGE.grains_big(canvas_preview, w, h, big_grains); + VINTAGE.optics(canvas_preview, w, h, vignette1, vignette2); + VINTAGE.dusts(canvas_preview, w, h, dust_level); + } + ); + }; + + this.effect_bw = function (context, W, H, level, dithering) { + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var grey, c, quant_error, m; + if (dithering !== true) { + //no differing + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]); + if (grey <= level) + c = 0; + else + c = 255; + imgData[i] = c; + imgData[i + 1] = c; + imgData[i + 2] = c; + } + } + else { + //Floyd–Steinberg dithering + canvas_front.clearRect(0, 0, W, H); //temp canvas for storing pixel data shifts + var img2 = canvas_front.getImageData(0, 0, W, H); + var imgData2 = img2.data; + for (var j = 0; j < H; j++) { + for (var i = 0; i < W; i++) { + var k = ((j * (W * 4)) + (i * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + + grey = Math.round(0.2126 * imgData[k] + 0.7152 * imgData[k + 1] + 0.0722 * imgData[k + 2]); + grey = grey + imgData2[k]; //add data shft from previous iterations + c = Math.floor(grey / 256); + if (c == 1) + c = 255; + imgData[k] = c; + imgData[k + 1] = c; + imgData[k + 2] = c; + quant_error = grey - c; + if (i + 1 < W) { + m = k + 4; + imgData2[m] += Math.round(quant_error * 7 / 16); + } + if (i - 1 > 0 && j + 1 < H) { + m = k - 4 + W * 4; + imgData2[m] += Math.round(quant_error * 3 / 16); + } + if (j + 1 < H) { + m = k + W * 4; + imgData2[m] += Math.round(quant_error * 5 / 16); + } + if (i + 1 < W && j + 1 < H) { + m = k + 4 + W * 4; + imgData2[m] += Math.round(quant_error * 1 / 16); + } + } + } + } + context.putImageData(img, 0, 0); + }; + + //converts greyscale images to coloured + this.colorize = function (context, W, H, rand_power, max_gap, dither, manual_colors) { + if (manual_colors == undefined || manual_colors === true) { + var colors = []; + for (var x = 0; x < 3; x++) { + colors[x] = []; + var pre = HELPER.getRandomInt(-1 * rand_power, rand_power); + for (var i = 0; i <= 255; i++) { + colors[x][i] = HELPER.getRandomInt(pre - rand_power, pre + rand_power); + + if (colors[x][i] < -1 * max_gap) + colors[x][i] += 10; + else if (colors[x][i] > max_gap) + colors[x][i] -= 10; + + pre = colors[x][i]; + } + } + if (manual_colors === true) + return colors; + } + else { + var colors = manual_colors; + } + + var img = context.getImageData(0, 0, W, H); + + //colorize + var imgData = img.data; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + if (dither == true) { + var diff = Math.abs(colors[0][imgData[x]]) + Math.abs(colors[0][imgData[x]]) + Math.abs(colors[0][imgData[x]]); + diff = diff / 3; + } + for (var c = 0; c < 3; c++) { + var x = i + c; + if (dither == false) + imgData[x] += colors[c][imgData[x]]; + else { + if (diff < rand_power * 6) + imgData[x] += colors[c][imgData[x]]; + else { + //big difference here - randomize + var rand = HELPER.getRandomInt(Math.min(0, colors[c][imgData[x]]), Math.max(0, colors[c][imgData[x]])); + imgData[x] += rand; + } + } + if (imgData[x] > 255) + imgData[x] = 255; + if (imgData[x] < 0) + imgData[x] = 0; + } + } + context.putImageData(img, 0, 0); + return false; + }; + + this.heatmap_effect = function (context, W, H) { + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var grey, RGB; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]); + RGB = this.color2heat(grey); + imgData[i] = RGB.R; + imgData[i + 1] = RGB.G; + imgData[i + 2] = RGB.B; + } + context.putImageData(img, 0, 0); + }; + + this.color2heat = function (value) { + var RGB = {R: 0, G: 0, B: 0}; + value = value / 255; + if (0 <= value && value <= 1 / 8) { + RGB.R = 0; + RGB.G = 0; + RGB.B = 4 * value + .5; // .5 - 1 // b = 1/2 + } + else if (1 / 8 < value && value <= 3 / 8) { + RGB.R = 0; + RGB.G = 4 * value - .5; // 0 - 1 // b = - 1/2 + RGB.B = 1; // small fix + } + else if (3 / 8 < value && value <= 5 / 8) { + RGB.R = 4 * value - 1.5; // 0 - 1 // b = - 3/2 + RGB.G = 1; + RGB.B = -4 * value + 2.5; // 1 - 0 // b = 5/2 + } + else if (5 / 8 < value && value <= 7 / 8) { + RGB.R = 1; + RGB.G = -4 * value + 3.5; // 1 - 0 // b = 7/2 + RGB.B = 0; + } + else if (7 / 8 < value && value <= 1) { + RGB.R = -4 * value + 4.5; // 1 - .5 // b = 9/2 + RGB.G = 0; + RGB.B = 0; + } + else { + // should never happen - value > 1 + RGB.R = .5; + RGB.G = 0; + RGB.B = 0; + } + // scale for hex conversion + RGB.R *= 255; + RGB.G *= 255; + RGB.B *= 255; + + RGB.R = Math.round(RGB.R); + RGB.G = Math.round(RGB.G); + RGB.B = Math.round(RGB.B); + + return RGB; + }; + + //method = otsu + this.thresholding = function (method, ctx, W, H, only_level) { + var img = ctx.getImageData(0, 0, W, H); + var imgData = img.data; + var hist_data = []; + var grey; + for (var i = 0; i <= 255; i++) + hist_data[i] = 0; + for (var i = 0; i < imgData.length; i += 4) { + grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]); + hist_data[grey]++; + } + var level; + if (method == 'otsu') + level = this.otsu(hist_data, W * H); + else + alert('ERROR: unknown method in EFFECTS.thresholding().'); + if (only_level === true) + return level; + var c; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]); + if (grey < level) + c = 0; + else + c = 255; + imgData[i] = c; + imgData[i + 1] = c; + imgData[i + 2] = c; + } + ctx.putImageData(img, 0, 0); + }; + + //http://en.wikipedia.org/wiki/Otsu%27s_Method + this.otsu = function (histogram, total) { + var sum = 0; + for (var i = 1; i < 256; ++i) + sum += i * histogram[i]; + var mB, mF, between; + var sumB = 0; + var wB = 0; + var wF = 0; + var max = 0; + var threshold = 0; + for (var i = 0; i < 256; ++i) { + wB += histogram[i]; + if (wB == 0) + continue; + wF = total - wB; + if (wF == 0) + break; + sumB += i * histogram[i]; + mB = sumB / wB; + mF = (sum - sumB) / wF; + between = wB * wF * Math.pow(mB - mF, 2); + if (between > max) { + max = between; + threshold = i; + } + } + return threshold; + }; + + this.grains_effect = function (context, W, H, level) { + if (level == 0) + return context; + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + for (var j = 0; j < H; j++) { + for (var i = 0; i < W; i++) { + var x = (i + j * W) * 4; + if (imgData[x + 3] == 0) + continue; //transparent + //increase it's lightness + var delta = HELPER.getRandomInt(0, level); + if (delta == 0) + continue; + + if (imgData[x] - delta < 0) + imgData[x] = -(imgData[x] - delta); + else + imgData[x] = imgData[x] - delta; + if (imgData[x + 1] - delta < 0) + imgData[x + 1] = -(imgData[x + 1] - delta); + else + imgData[x + 1] = imgData[x + 1] - delta; + if (imgData[x + 2] - delta < 0) + imgData[x + 2] = -(imgData[x + 2] - delta); + else + imgData[x + 2] = imgData[x + 2] - delta; + } + } + context.putImageData(img, 0, 0); + }; +} \ No newline at end of file diff --git a/js/elements.js b/js/elements.js new file mode 100644 index 0000000..c3cd15a --- /dev/null +++ b/js/elements.js @@ -0,0 +1,289 @@ +/* global WIDTH, HEIGHT */ + +var EL = new ELEMENTS_CLASS(); + +/** + * class that draw simple elements + * + * @author ViliusL + */ +function ELEMENTS_CLASS() { + + //draw lines + this.line = function(ctx, from_x, from_y, to_x, to_y, size){ + ctx.beginPath(); + if(size != undefined) + ctx.lineWidth = size; + ctx.moveTo(from_x + 0.5, from_y + 0.5); + ctx.lineTo(to_x + 0.5, to_y + 0.5); + ctx.stroke(); + }; + + //draws rectangle + this.rectangle = function (ctx, x, y, width, height, fill, stroke) { + x = x + 0.5; + y = y + 0.5; + if (typeof stroke == "undefined") + stroke = true; + if(fill == false && stroke == undefined) + stroke = true; + + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + width, y); + ctx.quadraticCurveTo(x + width, y, x + width, y); + ctx.lineTo(x + width, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height); + ctx.lineTo(x, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height); + ctx.lineTo(x, y); + ctx.quadraticCurveTo(x, y, x, y); + ctx.closePath(); + if (stroke) { + ctx.stroke(); + } + if (fill) { + ctx.fill(); + } + }; + + //draws square + this.square = function (ctx, x, y, width, height, fill, stroke) { + x = x + 0.5; + y = y + 0.5; + if (typeof stroke == "undefined") + stroke = true; + if(fill == false && stroke == undefined) + stroke = true; + + if (Math.abs(width) < Math.abs(height)){ + if(width > 0) + width = Math.abs(height); + else + width = -Math.abs(height); + } + else{ + if(height > 0) + height = Math.abs(width); + else + height = -Math.abs(width); + } + + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + width, y); + ctx.quadraticCurveTo(x + width, y, x + width, y); + ctx.lineTo(x + width, y + height); + ctx.quadraticCurveTo(x + width, y + height, x + width, y + height); + ctx.lineTo(x, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height); + ctx.lineTo(x, y); + ctx.quadraticCurveTo(x, y, x, y); + ctx.closePath(); + if (stroke) { + ctx.stroke(); + } + if (fill) { + ctx.fill(); + } + }; + + this.circle = function (ctx, x, y, size, color) { + ctx.lineWidth = 1; + if(color != undefined) + ctx.strokeStyle = color; + else + ctx.strokeStyle = "#000000"; + + ctx.beginPath(); + ctx.arc(x, y, size / 2, 0, Math.PI * 2, true); + ctx.stroke(); + }; + + this.ellipse_by_center = function (ctx, cx, cy, w, h, color, fill) { + this.ellipse(ctx, cx - w / 2.0, cy - h / 2.0, w, h, color, fill); + }; + + this.ellipse = function (ctx, x, y, w, h, color, fill) { + 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(); + ctx.fillStyle = color; + ctx.strokeStyle = color; + if (fill == undefined) + ctx.stroke(); + else + ctx.fill(); + }; + + this.arrow = function (context, fromx, fromy, tox, toy, headlen) { + if (headlen == undefined) + headlen = 10; // length of head in pixels + var dx = tox - fromx; + var dy = toy - fromy; + var angle = Math.atan2(dy, dx); + context.beginPath(); + context.moveTo(fromx, fromy); + context.lineTo(tox, toy); + context.stroke(); + context.beginPath(); + context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6)); + context.lineTo(tox, toy); + context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6)); + context.stroke(); + }; + + //dashed objects + this.rectangle_dashed = function (canvas, x1, y1, x2, y2, dashLen, color) { + this.line_dashed(canvas, x1, y1, x2, y1, dashLen, color); + this.line_dashed(canvas, x2, y1, x2, y2, dashLen, color); + this.line_dashed(canvas, x2, y2, x1, y2, dashLen, color); + this.line_dashed(canvas, x1, y2, x1, y1, dashLen, color); + }; + + this.line_dashed = function (canvas, x1, y1, x2, y2, dashLen, color) { + x1 = x1 + 0.5; + y1 = y1 + 0.5; + x2 = x2 + 0.5; + y2 = y2 + 0.5; + if (color != undefined) + canvas.strokeStyle = color; + else + canvas.strokeStyle = "#000000"; + if (dashLen == undefined) + dashLen = 4; + canvas.beginPath(); + canvas.moveTo(x1, y1); + var dX = x2 - x1; + var dY = y2 - y1; + var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY) / dashLen); + var dashX = dX / dashes; + var dashY = dY / dashes; + var q = 0; + while (q++ < dashes) { + x1 += dashX; + y1 += dashY; + canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x1, y1); + } + canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x2, y2); + canvas.stroke(); + canvas.closePath(); + }; + + this.image_round = function (canvas, mouse_x, mouse_y, size, img_data, canvas_tmp, anti_alias) { + var size_half = Math.round(size / 2); + var ctx_tmp = canvas_tmp.getContext("2d"); + var xx = mouse_x - size_half; + var yy = mouse_y - size_half; + if (xx < 0) + xx = 0; + if (yy < 0) + yy = 0; + + ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT); + ctx_tmp.save(); + //draw main data + try { + ctx_tmp.drawImage(img_data, mouse_x - size_half, mouse_y - size_half, size, size); + } + catch (err) { + try { + ctx_tmp.putImageData(img_data, xx, yy); + } + catch (err) { + console.log("Error: " + err.message); + } + } + ctx_tmp.globalCompositeOperation = 'destination-in'; + + //create form + ctx_tmp.fillStyle = '#ffffff'; + if (anti_alias == true) { + var gradient = ctx_tmp.createRadialGradient(mouse_x, mouse_y, 0, mouse_x, mouse_y, size_half); + gradient.addColorStop(0, '#ffffff'); + gradient.addColorStop(0.8, '#ffffff'); + gradient.addColorStop(1, 'rgba(25115,255,255,0'); + ctx_tmp.fillStyle = gradient; + } + ctx_tmp.beginPath(); + ctx_tmp.arc(mouse_x, mouse_y, size_half, 0, 2 * Math.PI, true); + ctx_tmp.fill(); + //draw final data + if (xx + size > WIDTH) + size = WIDTH - xx; + if (yy + size > HEIGHT) + size = HEIGHT - yy; + canvas.drawImage(canvas_tmp, xx, yy, size, size, xx, yy, size, size); + //reset + ctx_tmp.restore(); + ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT); + }; +} + +//http://www.script-tutorials.com/html5-canvas-custom-brush1/ +var BezierCurveBrush = { + // inner variables + iPrevX: 0, + iPrevY: 0, + points: null, + // initialization function + init: function () { + }, + startCurve: function (x, y) { + this.iPrevX = x; + this.iPrevY = y; + this.points = new Array(); + }, + getPoint: function (iLength, a) { + var index = a.length - iLength, i; + for (i = index; i < a.length; i++) { + if (a[i]) { + return a[i]; + } + } + }, + draw: function (ctx, color_rgb, x, y, size) { + if (Math.abs(this.iPrevX - x) > 5 || Math.abs(this.iPrevY - y) > 5) { + this.points.push([x, y]); + + // draw main path stroke + ctx.beginPath(); + ctx.moveTo(this.iPrevX, this.iPrevY); + ctx.lineTo(x, y); + + ctx.lineWidth = size; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.9)'; + ctx.stroke(); + ctx.closePath(); + + // draw extra strokes + ctx.lineWidth = 1; + ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.2)'; + ctx.beginPath(); + var iStartPoint = this.getPoint(25, this.points); + var iFirstPoint = this.getPoint(1, this.points); + var iSecondPoint = this.getPoint(5, this.points); + ctx.moveTo(iStartPoint[0], iStartPoint[1]); + ctx.bezierCurveTo(iFirstPoint[0], iFirstPoint[1], iSecondPoint[0], iSecondPoint[1], x, y); + ctx.stroke(); + ctx.closePath(); + + this.iPrevX = x; + this.iPrevY = y; + } + } +}; \ No newline at end of file diff --git a/js/events.js b/js/events.js new file mode 100644 index 0000000..4cc0d94 --- /dev/null +++ b/js/events.js @@ -0,0 +1,784 @@ +/* global FILE, EDIT, HELPER, POP, MAIN, EVENTS, LAYER, IMAGE, GUI, DRAW */ +/* global canvas_active, canvas_front, WIDTH, HEIGHT, EXIF */ + +var EVENTS = new EVENTS_CLASS(); + +//keyboard handlers +document.onkeydown = function(e) { return EVENTS.on_keyboard_action(e); }; +document.onkeyup = function(e) {return EVENTS.on_keyboardup_action(e); }; +//mouse +window.ondrop = function(e) { EVENTS.upload_drop(e); }; //drop +window.ondragover = function(e) { e.preventDefault(); }; +window.onresize = function(e){ EVENTS.on_resize(); }; //window resize +document.onmousedown = EVENTS.mouse_click; //mouse click +document.onmousemove = EVENTS.mouse_move; //mouse move +document.onmouseup = EVENTS.mouse_release; //mouse resease +document.addEventListener("mousewheel", EVENTS.mouse_wheel_handler, false); //mouse scroll +document.addEventListener("DOMMouseScroll", EVENTS.mouse_wheel_handler, false); //mouse scroll +document.oncontextmenu = function (e) { return EVENTS.mouse_right_click(e); }; //mouse right click +document.getElementById('color_hex').onkeyup = function (e) { GUI.set_color_manual(e); }; //on main color type +document.getElementById('color_hex').onpaste = function (e) { GUI.set_color_manual(e); }; // on paste in main color input + +/** + * all events handling + * + * @author ViliusL + */ +function EVENTS_CLASS() { + + /** + * mouse data, like positions, clicks + */ + this.mouse; + + /** + * if user is holding ctrl + */ + this.ctrl_pressed = false; //17 + + /** + * if use is holding shift + */ + this.shift_pressed = false; //16 + + /** + * active area start position in preview canvas in right sidebar + */ + this.ZOOM_POS = [0, 0]; + + /** + * active area dimensions in preview canvas in right sidebar + */ + this.mini_rect_data = {w: 0, h: 0}; + + /** + * if use is draging + */ + this.isDrag = false; + + /** + * selected area resize rect. size (controlls, where you can resize area) + */ + this.sr_size = 8; + + /** + * if false, font canvas is not cleared on mouse release + */ + this.clear_front_on_release = true; + + /** + * if canvas size was not changed - autosize possible + */ + var autosize = true; + + /** + * mouse click positions + */ + var mouse_click_pos = [false, false]; + + /** + * last mouse move position + */ + var mouse_move_last = [false, false]; + + /** + * main canvas resize action + */ + var resize_all = false; + + /** + * if mouse was click on canvas + */ + var mouse_click_valid = false; + + /** + * mouse click position of popup drag start + */ + var last_pop_click = [0, 0]; + + /** + * popup position for drgable ability + */ + var popup_pos = [0, 0]; + + /** + * if popup is dragged + */ + var popup_dragable = false; + + //keyboard actions + this.on_keyboard_action = function (event) { + k = event.keyCode; //console.log(k); + + if (k != 27) { + if (POP != undefined && POP.active == true) + return true; //dialog active + if (document.activeElement.type == 'text') + return true; //text input selected + } + + //up + if (k == 38) { + if (DRAW.active_tool == 'select_tool') { + EDIT.save_state(); + LAYER.layer_move_active(0, -1); + return false; + } + } + //down + else if (k == 40) { + if (DRAW.active_tool == 'select_tool') { + EDIT.save_state(); + LAYER.layer_move_active(0, 1); + return false; + } + } + //left + else if (k == 39) { + if (DRAW.active_tool == 'select_tool') { + EDIT.save_state(); + LAYER.layer_move_active(1, 0); + return false; + } + } + //right + else if (k == 37) { + if (DRAW.active_tool == 'select_tool') { + EDIT.save_state(); + LAYER.layer_move_active(-1, 0); + return false; + } + } + //esc + else if (k == 27) { + if (POP != undefined && POP.active == true) + POP.hide(); + DRAW.last_line = [false, false]; + + DRAW.curve_points = []; + if (DRAW.select_data != false) { + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + DRAW.select_square_action = ''; + } + } + //z - undo + else if (k == 90) { + //undo + if (EVENTS.ctrl_pressed == true) + EDIT.undo(); + } + //t - trim + else if (k == 84) { + EDIT.save_state(); + IMAGE.trim(); + } + //o - open + else if (k == 79) + FILE.open(); + //s - save + else if (k == 83) { + if (POP != undefined) + FILE.save_dialog(event); + } + //l - rotate left + else if (k == 76) { + EDIT.save_state(); + IMAGE.rotate_resize_doc(270, WIDTH, HEIGHT); + IMAGE.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); + } + //r - resize + else if (k == 82) + IMAGE.resize_box(); + //grid + else if (k == 71) { + if (GUI.grid == false) + GUI.grid = true; + else + GUI.grid = false; + GUI.draw_grid(); + } + //del + else if (k == 46) { + if (DRAW.select_data != false) { + EDIT.save_state(); + canvas_active().clearRect(DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h); + DRAW.select_data = false; + DRAW.select_square_action = ''; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + } + //shift + else if (k == 16) + EVENTS.shift_pressed = true; + //ctrl + else if (k == 17) { + if (EVENTS.ctrl_pressed == false) + EVENTS.ctrl_pressed = true; + } + //d + else if (k == 68) { + call_menu(LAYER, 'layer_dublicate'); + } + //a + else if (k == 65) { + if (EVENTS.ctrl_pressed == true) { + DRAW.select_data = { + x: 0, + y: 0, + w: WIDTH, + h: HEIGHT + }; + GUI.draw_selected_area(); + return false; + } + } + //v + else if (k == 86) { + EDIT.save_state(); + if (EVENTS.ctrl_pressed == true) + EDIT.paste(); + } + //f - fix images + else if (k == 70) { + EDIT.save_state(); + IMAGE.auto_adjust(canvas_active(), WIDTH, HEIGHT); + } + //h - histogram + else if (k == 72) { + IMAGE.histogram(); + } + //- + else if (k == 109) + GUI.zoom(-1); + //+ + else if (k == 107) + GUI.zoom(+1); + //n - new layer + else if (k == 78) + LAYER.add_layer(); + + //mac support - ctrl + if (k == 17 || event.metaKey || event.ctrlKey) { + if (EVENTS.ctrl_pressed == false) + EVENTS.ctrl_pressed = true; + } + + GUI.zoom(); + return true; + }; + //keyboard release + this.on_keyboardup_action = function (event) { + k = event.keyCode; + //shift + if (k == 16) + EVENTS.shift_pressed = false; + //ctrl + else if (k == 17) + EVENTS.ctrl_pressed = false; + //mac support - ctrl + if (event.metaKey || event.ctrlKey || event.key == 'Meta') + EVENTS.ctrl_pressed = false; + }; + // mouse_x, mouse_y, event.pageX, event.pageY + this.get_mouse_position = function (event) { + var valid = true; + if (event.offsetX) { + mouse_rel_x = event.offsetX; + mouse_rel_y = event.offsetY; + } + else if (event.layerX) { + mouse_rel_x = event.layerX; + mouse_rel_y = event.layerY; + } + else + return false; + mouse_x = event.pageX; + mouse_y = event.pageY; + var abs_x = event.pageX; + var abs_y = event.pageY; + + if (event.target.id == "canvas_front") { + //in canvas area - relative pos + mouse_x = mouse_rel_x; + mouse_y = mouse_rel_y; + if (GUI.ZOOM != 100) { + mouse_x = Math.floor(mouse_x / GUI.ZOOM * 100); + mouse_y = Math.floor(mouse_y / GUI.ZOOM * 100); + } + } + else { + //outside canvas - absolute pos - canvas offset + mouse_x = mouse_x - 109; + mouse_y = mouse_y - 34; + valid = false; + } + if (event.target.id == "canvas_preview") { + //in preview area - relative pos + mouse_x = mouse_rel_x; + mouse_y = mouse_rel_y; + } + + //save - other place will use it too + EVENTS.mouse = { + x: mouse_x, + y: mouse_y, + click_x: mouse_click_pos[0], + click_y: mouse_click_pos[1], + last_x: mouse_move_last[0], + last_y: mouse_move_last[1], + valid: valid, + click_valid: mouse_click_valid, + abs_x: abs_x, + abs_y: abs_y + }; + }; + //mouse right click + this.mouse_right_click = function (event) { + if (POP != undefined && POP.active == true) + return true; + EVENTS.get_mouse_position(event); + mouse_click_pos[0] = EVENTS.mouse.x; + mouse_click_pos[1] = EVENTS.mouse.y; + + for (var i in DRAW) { + if (i == DRAW.active_tool) { + return DRAW[i]('right_click', EVENTS.mouse, event); + break; + } + } + }; + //mouse click + this.mouse_click = function (event) { + EVENTS.isDrag = true; + if (POP != undefined && POP.active == true) { + EVENTS.get_mouse_position(event); + last_pop_click[0] = EVENTS.mouse.abs_x; + last_pop_click[1] = EVENTS.mouse.abs_y; + popup = document.getElementById('popup'); + popup_pos[0] = parseInt(popup.style.top); + popup_pos[1] = parseInt(popup.style.left); + + if (event.target.id == "popup_drag") + popup_dragable = true; + else + popup_dragable = false; + return true; + } + if (event.which == 3) + return true; + EVENTS.get_mouse_position(event); + mouse_click_pos[0] = EVENTS.mouse.x; + mouse_click_pos[1] = EVENTS.mouse.y; + if (EVENTS.mouse.valid == false) + mouse_click_valid = false; + else + mouse_click_valid = true; + + + //check tools functions + for (var i in DRAW) { + if (i == DRAW.active_tool) { + DRAW[i]('click', EVENTS.mouse, event); + break; + } + } + + if (event.target.id == "canvas_preview") + EVENTS.calc_preview_by_mouse(EVENTS.mouse.x, EVENTS.mouse.y); + + //main window resize + resize_all = false; + if (GUI.ZOOM == 100) { + if (event.target.id == "resize-w") + resize_all = "w"; + else if (event.target.id == "resize-h") + resize_all = "h"; + else if (event.target.id == "resize-wh") + resize_all = "wh"; + } + }; + //mouse move + this.mouse_move = function (event) { + if (POP != undefined && POP.active == true) { + //drag popup + if (EVENTS.isDrag == true && popup_dragable == true) { + EVENTS.get_mouse_position(event); + popup = document.getElementById('popup'); + popup.style.top = (popup_pos[0] + EVENTS.mouse.abs_y - last_pop_click[1]) + 'px'; + popup.style.left = (popup_pos[1] + EVENTS.mouse.abs_x - last_pop_click[0]) + 'px'; + } + return true; + } + EVENTS.get_mouse_position(event); + if (event.target.id == "canvas_preview" && EVENTS.isDrag == true) + EVENTS.calc_preview_by_mouse(EVENTS.mouse.x, EVENTS.mouse.y); + LAYER.update_info_block(); + + //main window resize + if (GUI.ZOOM == 100) { + if (event.target.id == "resize-w") + document.body.style.cursor = "w-resize"; + else if (event.target.id == "resize-h") + document.body.style.cursor = "n-resize"; + else if (event.target.id == "resize-wh") + document.body.style.cursor = "nw-resize"; + else + document.body.style.cursor = "auto"; + if (resize_all != false && EVENTS.isDrag == true) { + document.body.style.cursor = "auto"; + if (resize_all == "w") { + new_w = EVENTS.mouse.x; + new_h = HEIGHT; + } + else if (resize_all == "h") { + new_w = WIDTH; + new_h = EVENTS.mouse.y; + } + else if (resize_all == "wh") { + new_w = EVENTS.mouse.x; + new_h = EVENTS.mouse.y; + } + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + canvas_front.lineWidth = 1; + canvas_front.fillStyle = "#ff0000"; + EL.rectangle_dashed(canvas_front, 0, 0, new_w - 1, new_h - 1); + event.preventDefault(); + HELPER.remove_selection(); + return false; + } + } + //check tools functions + if (EVENTS.isDrag === false) { + for (i in DRAW) { + if (i == DRAW.active_tool) { + DRAW[i]('move', EVENTS.mouse, event); + break; + } + } + } + + + if (EVENTS.isDrag === false) + return false; //only drag now + + //check tools functions + for (var i in DRAW) { + if (i == DRAW.active_tool) { + DRAW[i]('drag', EVENTS.mouse, event); + break; + } + } + + if (DRAW.active_tool != 'select_square') + DRAW.select_square_action = ''; + + mouse_move_last[0] = EVENTS.mouse.x; + mouse_move_last[1] = EVENTS.mouse.y; + }; + //release mouse click + this.mouse_release = function (event) { + EVENTS.isDrag = false; + if (POP != undefined && POP.active == true) + return true; + var mouse = EVENTS.get_mouse_position(event); + mouse_move_last[0] = false; + mouse_move_last[1] = false; + if (DRAW.select_square_action == '' && EVENTS.mouse.valid == true) + DRAW.select_data = false; + + //check tools functions + if (EVENTS.clear_front_on_release == true) + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + GUI.draw_selected_area(); + for (var i in DRAW) { + if (i == DRAW.active_tool) { + DRAW[i]('release', EVENTS.mouse, event); + break; + } + } + + //main window resize + if (resize_all != false && GUI.ZOOM == 100 && EVENTS.mouse.x > 0 && EVENTS.mouse.y > 0) { + EVENTS.autosize = false; + document.body.style.cursor = "auto"; + if (resize_all == "w") + WIDTH = EVENTS.mouse.x; + else if (resize_all == "h") + HEIGHT = EVENTS.mouse.y; + else if (resize_all == "wh") { + WIDTH = mouse_x; + HEIGHT = EVENTS.mouse.y; + } + LAYER.set_canvas_size(); + GUI.zoom(); + } + resize_all = false; + GUI.zoom(); + }; + //upload drop zone + this.upload_drop = function (e) { + e.preventDefault(); + EDIT.save_state(); + var n_valid = 0; + for (var i = 0, f; i < e.dataTransfer.files.length; i++) { + f = e.dataTransfer.files[i]; + if (!f.type.match('image.*') && f.type != 'text/xml') + continue; + n_valid++; + + var FR = new FileReader(); + FR.file = e.dataTransfer.files[i]; + + if (e.dataTransfer.files.length == 1) + FILE.SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; + + FR.onload = function (event) { + if (this.file.type != 'text/xml') { + //image + LAYER.layer_add(this.file.name, event.target.result, this.file.type); + EXIF.getData(this.file, FILE.save_EXIF); + } + else { + //xml + var responce = MAIN.load_xml(event.target.result); + if (responce === true) + return false; + } + }; + if (f.type == "text/plain") + FR.readAsText(f); + else if (f.type == "text/xml") + FR.readAsText(f); + else + FR.readAsDataURL(f); + } + }; + this.mouse_wheel_handler = function (e) { //return true; + var step = 100; + e.preventDefault(); + //zoom + if (EVENTS.ctrl_pressed == true) { + var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); + if (GUI.ZOOM <= 100 && delta < 0) + step = 10; + if (GUI.ZOOM < 100 && delta > 0) + step = 10; + delta = delta * step; + if (GUI.ZOOM + delta > 0) { + GUI.ZOOM = GUI.ZOOM + delta; + EVENTS.calc_preview_auto(); + GUI.zoom(); + } + if (GUI.action_data().name == 'zoom') { + GUI.action_data().attributes.zoom = GUI.ZOOM; + show_action_attributes(); + } + EVENTS.scroll_window(); + + //disable page scroll if ctrl pressed + e.preventDefault(); + return false; + } + }; + this.scroll_window = function () { + var total_w = (WIDTH * GUI.ZOOM / 100); + var total_h = (HEIGHT * GUI.ZOOM / 100); + + xx = total_w * EVENTS.ZOOM_POS[0] / (GUI.PREVIEW_SIZE.w); + yy = total_h * EVENTS.ZOOM_POS[1] / (GUI.PREVIEW_SIZE.h); + + var canvas_wrapper = document.querySelector('#canvas_wrapper'); + canvas_wrapper.scrollTop = yy; + canvas_wrapper.scrollLeft = xx; + }; + this.calc_preview_by_mouse = function (mouse_x, mouse_y) { + EVENTS.ZOOM_POS[0] = mouse_x - EVENTS.mini_rect_data.w / 2; + EVENTS.ZOOM_POS[1] = mouse_y - EVENTS.mini_rect_data.h / 2; + if (EVENTS.ZOOM_POS[0] < 0) + EVENTS.ZOOM_POS[1] = 0; + if (EVENTS.ZOOM_Y < 0) + EVENTS.ZOOM_Y = 0; + + GUI.zoom(undefined, true); + return true; + }; + this.calc_preview_auto = function () { + var canvas_wrapper = document.querySelector('#canvas_wrapper'); + var page_w = canvas_wrapper.clientWidth; + var page_h = canvas_wrapper.clientHeight; + + var total_w = (WIDTH * GUI.ZOOM / 100); + var total_h = (HEIGHT * GUI.ZOOM / 100); + + EVENTS.mini_rect_data.w = Math.round(page_w * GUI.PREVIEW_SIZE.w / total_w); + EVENTS.mini_rect_data.h = Math.round(page_h * GUI.PREVIEW_SIZE.h / total_h); + + GUI.redraw_preview(); + }; + this.on_resize = function(){ + EVENTS.calc_preview_auto(); + + //recalc popup position + var dim = HELPER.get_dimensions(); + popup = document.getElementById('popup'); + popup.style.top = 150 + 'px'; + popup.style.left = Math.round(dim[0] / 2) + 'px'; + }; +} + +function call_menu(class_name, function_name) { + $('#main_menu').find('.selected').click(); //close menu + GUI.last_menu = function_name; + + //exec + class_name[function_name](); + + GUI.zoom(); +} + +//=== Clipboard ================================================================ + +var CLIPBOARD = new CLIPBOARD_CLASS('', false); + +/** + * image pasting into canvas + * + * @param {string} canvas_id - canvas id + * @param {boolean} autoresize - if canvas will be resized + */ +function CLIPBOARD_CLASS(canvas_id, autoresize) { + var _self = this; + if (canvas_id != ''){ + var canvas = document.getElementById(canvas_id); + var ctx = document.getElementById(canvas_id).getContext("2d"); + } + var ctrl_pressed = false; + var reading_dom = false; + var text_top = 15; + var pasteCatcher; + var paste_mode; + + //handlers + document.addEventListener('keydown', function (e) { + _self.on_keyboard_action(e); + }, false); //firefox fix + document.addEventListener('keyup', function (e) { + _self.on_keyboardup_action(e); + }, false); //firefox fix + document.addEventListener('paste', function (e) { + _self.paste_auto(e); + }, false); //official paste handler + + //constructor - prepare + this.init = function () { + //if using auto + if (window.Clipboard) + return true; + + pasteCatcher = document.createElement("div"); + pasteCatcher.setAttribute("id", "paste_ff"); + pasteCatcher.setAttribute("contenteditable", ""); + pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;'; + pasteCatcher.style.marginLeft = "-20px"; + pasteCatcher.style.width = "10px"; + document.body.appendChild(pasteCatcher); + + // create an observer instance + var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (paste_mode == 'auto' || ctrl_pressed == false || mutation.type != 'childList') + return true; + + //if paste handle failed - capture pasted object manually + if(mutation.addedNodes.length == 1) { + if (mutation.addedNodes[0].src != undefined) { + //image + _self.paste_createImage(mutation.addedNodes[0].src); + } + //register cleanup after some time. + setTimeout(function () { + pasteCatcher.innerHTML = ''; + }, 20); + } + }); + }); + var target = document.getElementById('paste_ff'); + var config = { attributes: true, childList: true, characterData: true }; + observer.observe(target, config); + }(); + //default paste action + this.paste_auto = function (e) { + paste_mode = ''; + pasteCatcher.innerHTML = ''; + var plain_text_used = false; + if (e.clipboardData) { + var items = e.clipboardData.items; + if (items) { + paste_mode = 'auto'; + //access data directly + for (var i = 0; i < items.length; i++) { + if (items[i].type.indexOf("image") !== -1) { + //image + var blob = items[i].getAsFile(); + var URLObj = window.URL || window.webkitURL; + var source = URLObj.createObjectURL(blob); + this.paste_createImage(source); + } + } + e.preventDefault(); + } + else { + //wait for DOMSubtreeModified event + //https://bugzilla.mozilla.org/show_bug.cgi?id=891247 + } + } + }; + //on keyboard press + this.on_keyboard_action = function (event) { + if (POP.active == true) + return true; + k = event.keyCode; + //ctrl + if (k == 17 || event.metaKey || event.ctrlKey) { + if (ctrl_pressed == false) + ctrl_pressed = true; + } + //v + if (k == 86) { + if (document.activeElement != undefined && document.activeElement.type == 'text') { + //let user paste into some input + return false; + } + + if (ctrl_pressed == true && !window.Clipboard) + pasteCatcher.focus(); + } + }; + //on kaybord release + this.on_keyboardup_action = function (event) { + k = event.keyCode; + //ctrl + if (k == 17 || event.metaKey || event.ctrlKey || event.key == 'Meta') + ctrl_pressed = false; + }; + //draw image + this.paste_createImage = function (source) { + var pastedImage = new Image(); + pastedImage.onload = function () { + if(canvas_id != ''){ + if(autoresize == true){ + //resize + canvas.width = pastedImage.width; + canvas.height = pastedImage.height; + } + else{ + //clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + } + LAYER.layer_add('Paste', source); + }; + pastedImage.src = source; + }; +} diff --git a/js/file.js b/js/file.js new file mode 100644 index 0000000..8dd7c6d --- /dev/null +++ b/js/file.js @@ -0,0 +1,378 @@ +/* global MAIN, POP, LAYER, EXIF, HELPER, IMAGE, GUI */ +/* global SAVE_TYPES */ + +var FILE = new FILE_CLASS(); + +/** + * manages files actions + * + * @author ViliusL + */ +function FILE_CLASS() { + + /** + * exif data + */ + this.EXIF = false; + + /** + * default name used for saving file + */ + this.SAVE_NAME = 'example'; //default save name + + /** + * save types config + */ + this.SAVE_TYPES = [ + "PNG - Portable Network Graphics", //default + "JPG - JPG/JPEG Format", //autodetect on photos where png useless? + "XML - Full layers data", //aka PSD + "BMP - Windows Bitmap", //firefox only, useless? + "WEBP - Weppy File Format", //chrome only + ]; + //new + this.file_new = function () { + POP.add({name: "width", title: "Width:", value: WIDTH}); + POP.add({name: "height", title: "Height:", value: HEIGHT}); + POP.add({name: "transparency", title: "Transparent:", values: ['Yes', 'No']}); + POP.show( + 'New file...', + function (response) { + var width = parseInt(response.width); + var height = parseInt(response.height); + + if (response.transparency == 'Yes') + GUI.TRANSPARENCY = true; + else + GUI.TRANSPARENCY = false; + + GUI.ZOOM = 100; + WIDTH = width; + HEIGHT = height; + MAIN.init(); + } + ); + }; + + //open + this.file_open = function () { + this.open(); + }; + + //save + this.file_save = function () { + this.save_dialog(); + }; + + //print + this.file_print = function () { + window.print(); + }; + + this.open = function () { + document.getElementById("tmp").innerHTML = ''; + var a = document.createElement('input'); + a.setAttribute("id", "file_open"); + a.type = 'file'; + a.multiple = 'multiple '; + document.getElementById("tmp").appendChild(a); + document.getElementById('file_open').addEventListener('change', this.open_handler, false); + + //force click + document.querySelector('#file_open').click(); + }; + + this.open_handler = function (e) { + var files = e.target.files; + for (var i = 0, f; i < files.length; i++) { + f = files[i]; + if (!f.type.match('image.*') && f.type != 'text/xml') + continue; + if (files.length == 1) + this.SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; + + var FR = new FileReader(); + FR.file = e.target.files[i]; + + FR.onload = function (event) { + if (this.file.type != 'text/xml') { + //image + LAYER.layer_add(this.file.name, event.target.result, this.file.type); + EXIF.getData(this.file, this.save_EXIF); + } + else { + //xml + var responce = MAIN.load_xml(event.target.result); + if (responce === true) + return false; + } + }; + if (f.type == "text/plain") + FR.readAsText(f); + else if (f.type == "text/xml") + FR.readAsText(f); + else + FR.readAsDataURL(f); + } + }; + + this.save_dialog = function (e) { + //find default format + var save_default = this.SAVE_TYPES[0]; //png + if (HELPER.getCookie('save_default') == 'jpg') + save_default = this.SAVE_TYPES[1]; //jpg + + POP.add({name: "name", title: "File name:", value: this.SAVE_NAME}); + POP.add({name: "type", title: "Save as type:", values: this.SAVE_TYPES, value: save_default}); + POP.add({name: "quality", title: "Quality (1-100):", value: 90, range: [1, 100]}); + POP.add({name: "layers", title: "Save layers:", values: ['All', 'Selected']}); + POP.add({name: "trim", title: "Trim:", values: ['No', 'Yes']}); + POP.show('Save as ...', [FILE, 'save']); + document.getElementById("pop_data_name").select(); + if (e != undefined) + e.preventDefault(); + }; + + this.save = function (user_response) { + fname = user_response.name; + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + + //save choosen type + var save_default = this.SAVE_TYPES[0]; //png + if (HELPER.getCookie('save_default') == 'jpg') + save_default = this.SAVE_TYPES[1]; //jpg + if (user_response.type != save_default && user_response.type == this.SAVE_TYPES[0]) + HELPER.setCookie('save_default', 'png', 30); + else if (user_response.type != save_default && user_response.type == this.SAVE_TYPES[1]) + HELPER.setCookie('save_default', 'jpg', 30); + + if (GUI.TRANSPARENCY == false) { + tempCtx.beginPath(); + tempCtx.rect(0, 0, WIDTH, HEIGHT); + tempCtx.fillStyle = "#ffffff"; + tempCtx.fill(); + } + + //take data + for (var i in LAYER.layers) { + if (LAYER.layers[i].visible == false) + continue; + if (user_response.layers == 'Selected' && user_response.type != 'XML' && i != LAYER.layer_active) + continue; + tempCtx.drawImage(document.getElementById(LAYER.layers[i].name), 0, 0, WIDTH, HEIGHT); + } + + if (user_response.trim == 'Yes' && user_response.type != 'XML') { + //trim + var trim_info = IMAGE.trim_info(tempCanvas); + tmp_data = tempCtx.getImageData(0, 0, WIDTH, HEIGHT); + tempCtx.clearRect(0, 0, WIDTH, HEIGHT); + tempCanvas.width = WIDTH - trim_info.right - trim_info.left; + tempCanvas.height = HEIGHT - trim_info.bottom - trim_info.top; + tempCtx.putImageData(tmp_data, -trim_info.left, -trim_info.top); + } + + //detect type + var parts = user_response.type.split(" "); + user_response.type = parts[0]; + + //auto detect? + if (HELPER.strpos(fname, '.png') !== false) + user_response.type = 'PNG'; + else if (HELPER.strpos(fname, '.jpg') !== false) + user_response.type = 'JPG'; + else if (HELPER.strpos(fname, '.xml') !== false) + user_response.type = 'XML'; + else if (HELPER.strpos(fname, '.bmp') !== false) + user_response.type = 'BMP'; + else if (HELPER.strpos(fname, '.webp') !== false) + user_response.type = 'WEBP'; + + //prepare data + if (user_response.type == 'PNG') { + //png - default format + var data = tempCanvas.toDataURL("image/png"); + var data_header = "image/png"; + if (HELPER.strpos(fname, '.png') == false) + fname = fname + ".png"; + } + else if (user_response.type == 'JPG') { + //jpg + var quality = parseInt(user_response.quality); + if (quality > 100 || quality < 1 || isNaN(quality) == true) + quality = 90; + quality = quality / 100; + var data = tempCanvas.toDataURL('image/jpeg', quality); + var data_header = "image/jpeg"; + if (HELPER.strpos(fname, '.jpg') == false) + fname = fname + ".jpg"; + } + else if (user_response.type == 'BMP') { + //bmp - lets hope user really needs this - chrome do not support it + var data = tempCanvas.toDataURL("image/bmp"); + var data_header = "image/bmp"; + if (HELPER.strpos(fname, '.bmp') == false) + fname = fname + ".bmp"; + } + else if (user_response.type == 'WEBP') { + //WEBP - new format for chrome only + if (HELPER.strpos(fname, '.webp') == false) + fname = fname + ".webp"; + var data_header = "image/webp"; + var data = tempCanvas.toDataURL("image/webp"); + } + else if (user_response.type == 'XML') { + //xml - full data with layers + if (HELPER.strpos(fname, '.xml') == false) + fname = fname + ".xml"; + var data_header = "text/plain"; + + var XML = ''; + //basic info + XML += "\n"; + XML += " \n"; + XML += " " + WIDTH + "\n"; + XML += " " + HEIGHT + "\n"; + XML += " \n"; + //add layers info + XML += " \n"; + for (var i in LAYER.layers) { + XML += " \n"; + XML += " " + LAYER.layers[i].name + "\n"; + if (LAYER.layers[i].visible == true) + XML += " 1\n"; + else + XML += " 0\n"; + XML += " " + LAYER.layers[i].opacity + "\n"; + XML += " \n"; + } + XML += " \n"; + //add data ??? + XML += " \n"; + for (var i in LAYER.layers) { + var data_tmp = document.getElementById(LAYER.layers[i].name).toDataURL("image/png"); + XML += " \n"; + XML += " " + LAYER.layers[i].name + "\n"; + XML += " " + data_tmp + "\n"; + XML += " \n"; + } + XML += " \n"; + XML += "\n"; + + var bb = new Blob([XML], {type: data_header}); + var data = window.URL.createObjectURL(bb); + } + else + return false; + + //check support + var actualType = data.replace(/^data:([^;]*).*/, '$1'); + if (data_header != actualType && data_header != "text/plain") { + //error - no support + POP.add({title: "Error:", value: "Your browser do not support " + user_response.type}); + POP.show('Sorry', ''); + return false; + } + + //push data to user + window.URL = window.webkitURL || window.URL; + var a = document.createElement('a'); + if (typeof a.download != "undefined") { + //a.download is supported + a.setAttribute("id", "save_data"); + a.download = fname; + a.href = data; + a.textContent = 'Downloading...'; + document.getElementById("tmp").appendChild(a); + + //release memory + a.onclick = function (e) { + this.save_cleanup(this); + }; + //force click + document.querySelector('#save_data').click(); + } + else { + //poor browser or poor user - not sure here. No support + if (user_response.type == 'PNG') + window.open(data); + else if (user_response.type == 'JPG') + window.open(data, quality); + } + }; + + this.save_cleanup = function (a) { + a.textContent = 'Downloaded'; + setTimeout(function () { + a.href = ''; + var element = document.getElementById("save_data"); + element.parentNode.removeChild(element); + }, 1500); + }; + + this.save_EXIF = function () { + this.EXIF = this.exifdata; + //check length + var n = 0; + for (var i in this.EXIF){ + n++; + } + if (n == 0) + this.EXIF = false; + }; + + this.load_xml = function (data) { + var xml = $.parseXML(data); + w = $(xml).find("width").text(); + h = $(xml).find("height").text(); + + //delete old layers + for (var i in LAYER.layers) + LAYER.layer_remove(i); + + //init new file + GUI.ZOOM = 100; + MAIN.init(); + + //set attributes + WIDTH = w; + HEIGHT = h; + LAYER.set_canvas_size(); + + //add layers + $('layer', xml).each(function (i) { + var name = $(this).find("name").text(); + var visible = $(this).find("visible").text(); + var opacity = $(this).find("opacity").text(); + + if (i > 0) { //first layer exists by default - Background + LAYER.layer_add(name); + //update attributes + LAYER.layers[LAYER.layer_active].name = name; + if (visible == 0) + LAYER.layer_visibility(LAYER.layer_active); + LAYER.layers[LAYER.layer_active].opacity = opacity; + } + }); + LAYER.layer_renew(); + + //add data + $('data', xml).each(function (i) { + var name = $(this).find("name").text(); + var data = $(this).find("data").text(); + + var img = new Image(); + img.src = data; + img.onload = function () { + document.getElementById(name).getContext('2d').drawImage(img, 0, 0); + + LAYER.layer_renew(); + GUI.zoom(); + }; + }); + }; + +} \ No newline at end of file diff --git a/js/gui.js b/js/gui.js new file mode 100644 index 0000000..d2cb79b --- /dev/null +++ b/js/gui.js @@ -0,0 +1,607 @@ +/* global EVENTS, HELPER, POP, DRAW, LAYER, EL */ +/* global WIDTH, HEIGHT, canvas_front, DRAW_TOOLS_CONFIG, canvas_grid, canvas_preview */ + +var GUI = new GUI_CLASS(); + +/** + * manages grapchic interface functionality: left/right sidebar actions + * + * @author ViliusL + */ +function GUI_CLASS() { + + /** + * preview mini window size on right sidebar + */ + this.PREVIEW_SIZE = {w: 148, h: 100}; + + /** + * last used menu id + */ + this.last_menu = ''; + + /** + * grid dimnesions config + */ + this.grid_size = [50, 50]; + + /** + * if grid is visible + */ + this.grid = false; + + /** + * true if using transparecy, false if using white background + */ + this.TRANSPARENCY = true; + + /** + * zoom level, original - 100%, can vary from 10% to 1000% + */ + this.ZOOM = 100; + + /** + * last color copy + */ + var COLOR_copy; + + this.draw_helpers = function () { + //left menu + var html = ''; + for (var i in DRAW_TOOLS_CONFIG) { + html += '
    ' + "\n"; + } + html += '
    ' + "\n"; + } + document.getElementById("all_colors").innerHTML = html; + }; + + this.draw_background = function (canvas, W, H, gap, force) { + if (this.TRANSPARENCY == false && force == undefined) { + canvas.beginPath(); + canvas.rect(0, 0, W, H); + canvas.fillStyle = "#ffffff"; + canvas.fill(); + return false; + } + if (gap == undefined) + gap = 10; + var fill = true; + for (var i = 0; i < W; i = i + gap) { + if (i % (gap * 2) == 0) + fill = true; + else + fill = false; + for (var j = 0; j < H; j = j + gap) { + if (fill == true) { + canvas.fillStyle = '#eeeeee'; + canvas.fillRect(i, j, gap, gap); + fill = false; + } + else + fill = true; + } + } + }; + + this.draw_grid = function (gap_x, gap_y) { + if (this.grid == false) { + document.getElementById("canvas_grid").style.display = 'none'; + return false; + } + else { + document.getElementById("canvas_grid").style.display = ''; + canvas_grid.clearRect(0, 0, WIDTH, HEIGHT); + } + + //size + if (gap_x != undefined && gap_y != undefined) + this.grid_size = [gap_x, gap_y]; + else { + gap_x = this.grid_size[0]; + gap_y = this.grid_size[1]; + } + gap_x = parseInt(gap_x); + gap_y = parseInt(gap_y); + if (gap_x < 2) + gap_x = 2; + if (gap_y < 2) + gap_y = 2; + for (var i = gap_x; i < WIDTH; i = i + gap_x) { + if (gap_x == 0) + break; + if (i % (gap_x * 5) == 0) //main lines + canvas_grid.strokeStyle = '#222222'; + else { + EL.line_dashed(canvas_grid, i, 0, i, HEIGHT, 3, '#888888'); + continue; + } + canvas_grid.beginPath(); + canvas_grid.moveTo(0.5 + i, 0); + canvas_grid.lineTo(0.5 + i, HEIGHT); + canvas_grid.stroke(); + } + for (var i = gap_y; i < HEIGHT; i = i + gap_y) { + if (gap_y == 0) + break; + if (i % (gap_y * 5) == 0) //main lines + canvas_grid.strokeStyle = '#222222'; + else { + EL.line_dashed(canvas_grid, 0, i, WIDTH, i, 3, '#888888'); + continue; + } + canvas_grid.beginPath(); + canvas_grid.moveTo(0, 0.5 + i); + canvas_grid.lineTo(WIDTH, 0.5 + i); + canvas_grid.stroke(); + } + }; + this.redraw_preview = function () { + canvas_preview.beginPath(); + canvas_preview.rect(0, 0, GUI.PREVIEW_SIZE.w, GUI.PREVIEW_SIZE.h); + canvas_preview.fillStyle = "#ffffff"; + canvas_preview.fill(); + this.draw_background(canvas_preview, GUI.PREVIEW_SIZE.w, GUI.PREVIEW_SIZE.h, 5); + + //redraw preview area + canvas_preview.save(); + canvas_preview.scale(GUI.PREVIEW_SIZE.w / WIDTH, GUI.PREVIEW_SIZE.h / HEIGHT); + for (var i in LAYER.layers) { + if (LAYER.layers[i].visible == false) + continue; + canvas_preview.drawImage(document.getElementById(LAYER.layers[i].name), 0, 0, WIDTH, HEIGHT); + } + canvas_preview.restore(); + + //active zone + z_x = EVENTS.ZOOM_POS[0]; + z_y = EVENTS.ZOOM_POS[1]; + + if (z_x > GUI.PREVIEW_SIZE.w - EVENTS.mini_rect_data.w - 1) + z_x = GUI.PREVIEW_SIZE.w - EVENTS.mini_rect_data.w - 1; + if (z_y > GUI.PREVIEW_SIZE.h - EVENTS.mini_rect_data.h - 1) + z_y = GUI.PREVIEW_SIZE.h - EVENTS.mini_rect_data.h - 1; + + canvas_preview.lineWidth = 1; + canvas_preview.beginPath(); + canvas_preview.rect(Math.round(z_x) + 0.5, Math.round(z_y) + 0.5, EVENTS.mini_rect_data.w, EVENTS.mini_rect_data.h); + canvas_preview.fillStyle = "rgba(0, 0, 0, 0.2)"; + canvas_preview.strokeStyle = "#393939"; + canvas_preview.fill(); + canvas_preview.stroke(); + return true; + }; + this.zoom = function (recalc, scroll) { + if (recalc != undefined) { + //zoom-in or zoom-out + if (recalc == 1 || recalc == -1) { + var step = 100; + if (this.ZOOM <= 100 && recalc < 0) + step = 10; + if (this.ZOOM < 100 && recalc > 0) + step = 10; + if (recalc * step + this.ZOOM > 0) { + this.ZOOM = this.ZOOM + recalc * step; + if (this.ZOOM > 100 && this.ZOOM < 200) + this.ZOOM = 100; + } + } + //zoom using exact value + else + this.ZOOM = parseInt(recalc); + EVENTS.calc_preview_auto(); + } + document.getElementById("zoom_nr").innerHTML = this.ZOOM; + document.getElementById("zoom_range").value = this.ZOOM; + + //change scale and repaint + document.getElementById('canvas_back').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; + document.getElementById('canvas_back').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; + for (var i in LAYER.layers) { + document.getElementById(LAYER.layers[i].name).style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; + document.getElementById(LAYER.layers[i].name).style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; + } + document.getElementById('canvas_front').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; + document.getElementById('canvas_front').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; + + document.getElementById('canvas_grid').style.width = Math.round(WIDTH * this.ZOOM / 100) + "px"; + document.getElementById('canvas_grid').style.height = Math.round(HEIGHT * this.ZOOM / 100) + "px"; + + //check main resize corners + if (this.ZOOM != 100) { + document.getElementById('resize-w').style.display = "none"; + document.getElementById('resize-h').style.display = "none"; + document.getElementById('resize-wh').style.display = "none"; + } + else { + document.getElementById('resize-w').style.display = "block"; + document.getElementById('resize-h').style.display = "block"; + document.getElementById('resize-wh').style.display = "block"; + } + + if (scroll != undefined) + EVENTS.scroll_window(); + this.redraw_preview(); + return true; + }; + + this.update_attribute = function (object, next_value) { + var max_value = 500; + for (var k in this.action_data().attributes) { + if (k != object.id) + continue; + if (this.action_data().attributes[k] === true || this.action_data().attributes[k] === false) { + //true / false + var value; + if (next_value == 0) + value = true; + else + value = false; + //save + this.action_data().attributes[k] = value; + this.show_action_attributes(); + } + else if (typeof this.action_data().attributes[k] == 'object') { + //select + var key = k.replace("_values", ""); + this.action_data().attributes[key] = object.value; + } + else if (this.action_data().attributes[k][0] == '#') { + //color + var key = k.replace("_values", ""); + this.action_data().attributes[key] = object.value; + } + else { + //numbers + if (next_value != undefined) { + if (next_value > 0) { + if (parseInt(this.action_data().attributes[k]) == 0) + object.value = 1; + else if (parseInt(this.action_data().attributes[k]) == 1) + object.value = 5; + else if (parseInt(this.action_data().attributes[k]) == 5) + object.value = 10; + else + object.value = parseInt(this.action_data().attributes[k]) + next_value; + } + else if (next_value < 0) { + if (parseInt(this.action_data().attributes[k]) == 1) + object.value = 0; + else if (parseInt(this.action_data().attributes[k]) <= 5) + object.value = 1; + else if (parseInt(this.action_data().attributes[k]) <= 10) + object.value = 5; + else if (parseInt(this.action_data().attributes[k]) <= 20) + object.value = 10; + else + object.value = parseInt(this.action_data().attributes[k]) + next_value; + } + + if (object.value < 0) + object.value = 0; + if (object.value > max_value) + object.value = max_value; + } + else { + if (object.value.length == 0) + return false; + object.value = parseInt(object.value); + object.value = Math.abs(object.value); + if (object.value == 0 || isNaN(object.value) || value > max_value) + object.value = this.action_data().attributes[k]; + } + if (k == 'power' && object.value > 100) + object.value = 100; + + //save + this.action_data().attributes[k] = object.value; + + document.getElementById(k).value = object.value; + } + if (this.action_data().on_update != undefined) + DRAW[this.action_data().on_update](object.value); + } + }; + + this.action = function (key) { + DRAW[key]('init', {valid: true}); + if (DRAW.active_tool == key) + return false; + + //change + if (DRAW.active_tool != '') + document.getElementById(DRAW.active_tool).className = ""; + DRAW.active_tool = key; + document.getElementById(key).className = "active"; + this.show_action_attributes(); + + return false; + }; + + this.action_data = function () { + for (var i in DRAW_TOOLS_CONFIG) { + if (DRAW_TOOLS_CONFIG[i].name == DRAW.active_tool) + return DRAW_TOOLS_CONFIG[i]; + } + }; + + this.show_action_attributes = function () { + html = ''; + var step = 10; + for (var k in this.action_data().attributes) { + var title = k[0].toUpperCase() + k.slice(1); + title = title.replace("_", " "); + if (this.action_data().attributes[k + "_values"] != undefined) + continue; + if (this.action_data().attributes[k] === true || this.action_data().attributes[k] === false) { + //true / false + if (this.action_data().attributes[k] == true) + html += '
    ' + title + '
    '; + else + html += '
    ' + title + '
    '; + } + else if (typeof GUI.action_data().attributes[k] == 'object') { + //drop down select + html += ''; + } + else if (GUI.action_data().attributes[k][0] == '#') { + //color + html += ''; //table for 100% width + html += ''; + html += ''; + html += ''; + html += ''; + html += '
    ' + title + ':
    '; + } + else { + //numbers + html += '
    '; + html += ''; //table for 100% width + html += ''; + html += ''; + html += ''; + html += ''; + html += '
    ' + title + ':
    '; + html += '
    +
    '; + html += '
    -
    '; + html += '
    '; + } + } + document.getElementById("action_attributes").innerHTML = html; + }; + + this.set_color = function (object) { + if (HELPER.chech_input_color_support('main_colour') == true && object.id == 'main_colour') + COLOR = object.value; + else + COLOR = HELPER.rgb2hex_all(object.style.backgroundColor); + COLOR_copy = COLOR; + + if (HELPER.chech_input_color_support('main_colour') == true) + document.getElementById("main_colour").value = COLOR; //supported + else + document.getElementById("main_colour_alt").style.backgroundColor = COLOR; //not supported + + document.getElementById("color_hex").value = COLOR; + var colours = HELPER.hex2rgb(COLOR); + document.getElementById("rgb_r").value = colours.r; + document.getElementById("rgb_g").value = colours.g; + document.getElementById("rgb_b").value = colours.b; + }; + + this.set_color_manual = function (event) { + var object = event.target; + if (object.value.length == 6 && object.value[0] != '#') { + COLOR = '#' + object.value; + this.sync_colors(); + } + if (object.value.length == 7) { + COLOR = object.value; + this.sync_colors(); + } + else if (object.value.length > 7) + object.value = COLOR; + }; + + this.set_color_rgb = function (object, c) { + var colours = HELPER.hex2rgb(COLOR); + if (object.value.length > 3) { + object.value = colours[c]; + } + else if (object.value.length > 0) { + value = object.value; + value = parseInt(value); + if (isNaN(value) || value != object.value || value > 255 || value < 0) { + object.value = colours[c]; + return false; + } + COLOR = "#" + ("000000" + HELPER.rgbToHex(document.getElementById("rgb_r").value, document.getElementById("rgb_g").value, document.getElementById("rgb_b").value)).slice(-6); + ALPHA = document.getElementById("rgb_a").value; + document.getElementById("rgb_a").value = ALPHA; + this.sync_colors(); + } + }; + + this.sync_colors = function () { + document.getElementById("color_hex").value = COLOR; + + if (HELPER.chech_input_color_support('main_colour') == true) + document.getElementById("main_colour").value = COLOR; //supported + else + document.getElementById("main_colour_alt").style.backgroundColor = COLOR; //not supported + + var colours = HELPER.hex2rgb(COLOR); + document.getElementById("rgb_r").value = colours.r; + document.getElementById("rgb_g").value = colours.g; + document.getElementById("rgb_b").value = colours.b; + }; + + this.toggle_color_select = function () { + if (POP.active == false) { + POP.add({ + title: 'Colour:', + function: function () { + COLOR_copy = COLOR; + var html = ''; + html += ''; + html += ''; + html += ' '; + html += ' '; + html += ' '; + html += ''; + html += ''; + html += ' '; + html += ' '; + html += ' '; + html += ''; + html += '
    Lum:0
    Alpha:' + ALPHA + '
    '; + return html; + } + }); + POP.show( + 'Select color', + function (user_response) { + var param1 = parseInt(user_response.param1); + }, + undefined, + this.toggle_color_select_onload + ); + } + else{ + POP.hide(); + } + }; + + this.change_lum = function (lumi) { + lumi = parseInt(lumi); + var c3 = HELPER.hex2rgb(COLOR_copy); + c3.r += lumi; + c3.g += lumi; + c3.b += lumi; + + if (c3.r < 0) + c3.r = 0; + if (c3.g < 0) + c3.g = 0; + if (c3.b < 0) + c3.b = 0; + if (c3.r > 255) + c3.r = 255; + if (c3.g > 255) + c3.g = 255; + if (c3.b > 255) + c3.b = 255; + + COLOR = "#" + ("000000" + HELPER.rgbToHex(c3.r, c3.g, c3.b)).slice(-6); + this.sync_colors(); + }; + + this.change_alpha = function (value) { + ALPHA = parseInt(value); + document.getElementById("rgb_a").value = ALPHA; + }; + + this.toggle_color_select_onload = function () { + var img = new Image(); + img.onload = function () { + document.getElementById("c_all").getContext("2d").drawImage(img, 0, 0); + document.getElementById("c_all").onmousedown = function (event) { + if (event.offsetX) { + mouse_x = event.offsetX; + mouse_y = event.offsetY; + } + else if (event.layerX) { + mouse_x = event.layerX; + mouse_y = event.layerY; + } + var c = document.getElementById("c_all").getContext("2d").getImageData(mouse_x, mouse_y, 1, 1).data; + COLOR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); + this.sync_colors(); + COLOR_copy = COLOR; + document.getElementById("lum_ranger").value = 0; + }; + }; + img.src = 'img/colorwheel.png'; + }; + + this.draw_selected_area = function (no_resize) { + if (DRAW.select_data == false) + return false; + //draw area + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + var x = DRAW.select_data.x; + var y = DRAW.select_data.y; + var w = DRAW.select_data.w; + var h = DRAW.select_data.h; + if (this.ZOOM != 100) { + x = Math.round(x); + y = Math.round(y); + w = Math.round(w); + h = Math.round(h); + } + + //fill + canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; + canvas_front.fillRect(x, y, w, h); + if (this.ZOOM <= 100) { + //borders + canvas_front.strokeStyle = "rgba(0, 255, 0, 1)"; + canvas_front.lineWidth = 1; + canvas_front.strokeRect(x + 0.5, y + 0.5, w, h); + } + if (no_resize == true) + return true; + + //draw carners + square(x, y, 0, 0); + square(x + w, y, -1, 0); + square(x, y + h, 0, -1); + square(x + w, y + h, -1, -1); + + //draw centers + square(x + w / 2, y, 0, 0); + square(x, y + h / 2, 0, 0); + square(x + w / 2, y + h, 0, -1); + square(x + w, y + h / 2, -1, 0); + + function square(x, y, mx, my) { + var sr_size = Math.ceil(EVENTS.sr_size / this.ZOOM * 100); + x = Math.round(x); + y = Math.round(y); + canvas_front.beginPath(); + canvas_front.rect(x + mx * Math.round(sr_size), y + my * Math.round(sr_size), sr_size, sr_size); + canvas_front.fillStyle = "#0000ff"; + canvas_front.fill(); + } + }; + +} diff --git a/js/help.js b/js/help.js new file mode 100644 index 0000000..53f25d5 --- /dev/null +++ b/js/help.js @@ -0,0 +1,67 @@ +/* global POP */ +/* global VERSION */ + +var HELP = new HELP_CLASS(); + +/** + * manages help actions + * + * @author ViliusL + */ +function HELP_CLASS() { + + /** + * credits list config + */ + var CREDITS = [ + {title: 'Brush styles', name: 'Harmony', link: 'http://ricardocabello.com/blog/post/689' }, + {title: 'Effects library', name: 'glfx.js', link: 'http://evanw.github.io/glfx.js/' }, + {title: 'EXIF', name: 'exif.js', link: 'https://github.com/jseidelin/exif-js' }, + {title: 'Image filters', name: 'ImageFilters.js',link: 'https://github.com/arahaya/ImageFilters.js' }, + {title: 'KD-tree', name: 'kdtree.js', link: 'http://jsdo.it/peko/wKvk' }, + ]; + + //shortcuts + this.help_shortcuts = function () { + POP.add({title: "D", value: 'Dublicate'}); + POP.add({title: "Del", value: 'Delete selection'}); + POP.add({title: "F", value: 'Auto adjust colors'}); + POP.add({title: "G", value: 'Grid on/off'}); + POP.add({title: "L", value: 'Rotate left'}); + POP.add({title: "N", value: 'New layer'}); + POP.add({title: "O", value: 'Open file(s)'}); + POP.add({title: "R", value: 'Resize'}); + POP.add({title: "S", value: 'Save'}); + POP.add({title: "T", value: 'Trim'}); + POP.add({title: "-", value: 'Zoom out'}); + POP.add({title: "+", value: 'Zoom in'}); + POP.add({title: "CTRL + Z", value: 'Undo'}); + POP.add({title: "CTRL + A", value: 'Select all'}); + POP.add({title: "CTRL + V", value: 'Paste'}); + POP.add({title: "Arrow keys", value: 'Move active layer by 10px'}); + POP.add({title: "CTRL + Arrow keys", value: 'Move active layer by 50px'}); + POP.add({title: "SHIFT + Arrow keys", value: 'Move active layer by 1px'}); + POP.add({title: "Drag & Drop", value: 'Imports images/xml data'}); + POP.show('Keyboard Shortcuts', ''); + }; + //credits + this.help_credits = function () { + for (var i in CREDITS) { + if (CREDITS[i].link != undefined) + POP.add({title: CREDITS[i].title, html: '    ' + CREDITS[i].name + ''}); + else + POP.add({title: CREDITS[i].title, html: CREDITS[i].name}); + } + POP.show('Credits', ''); + }; + //about + this.help_about = function () { + var email = 'www.viliusl@gmail.com'; + POP.add({title: "Name:", value: "miniPaint " + VERSION}); + POP.add({title: "Description:", value: 'online image editor'}); + POP.add({title: "Author:", value: 'ViliusL'}); + POP.add({title: "Email:", html: '' + email + ''}); + POP.add({title: "Source:", html: 'github.com/viliusle/miniPaint'}); + POP.show('About', ''); + }; +} \ No newline at end of file diff --git a/js/helpers.js b/js/helpers.js index 6401cd2..82d47f1 100644 --- a/js/helpers.js +++ b/js/helpers.js @@ -2,441 +2,176 @@ var HELPER = new HELPER_CLASS(); -function HELPER_CLASS(){ +/** + * various helpers + * + * @author ViliusL + */ +function HELPER_CLASS() { var time; - - this.drawImage_round = function(canvas, mouse_x, mouse_y, size, img_data, canvas_tmp, anti_alias){ - var size_half = Math.round(size/2); - var ctx_tmp = canvas_tmp.getContext("2d"); - var xx = mouse_x - size_half; - var yy = mouse_y - size_half; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - - ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT); - ctx_tmp.save(); - //draw main data - try{ - ctx_tmp.drawImage(img_data, mouse_x - size_half, mouse_y - size_half, size, size); - } - catch(err){ - try{ - ctx_tmp.putImageData(img_data, xx, yy); - } - catch(err){ - console.log("Error: "+err.message); - } - } - ctx_tmp.globalCompositeOperation = 'destination-in'; - - //create form - ctx_tmp.fillStyle = '#ffffff'; - if(anti_alias == true){ - var gradient = ctx_tmp.createRadialGradient(mouse_x, mouse_y, 0, mouse_x, mouse_y, size_half); - gradient.addColorStop(0, '#ffffff'); - gradient.addColorStop(0.8, '#ffffff'); - gradient.addColorStop(1, 'rgba(25115,255,255,0'); - ctx_tmp.fillStyle = gradient; - } - ctx_tmp.beginPath(); - ctx_tmp.arc(mouse_x, mouse_y, size_half, 0, 2*Math.PI, true); - ctx_tmp.fill(); - //draw final data - if(xx + size > WIDTH) - size = WIDTH - xx; - if(yy + size > HEIGHT) - size = HEIGHT - yy; - canvas.drawImage(canvas_tmp, xx, yy, size, size, xx, yy, size, size); - //reset - ctx_tmp.restore(); - ctx_tmp.clearRect(0, 0, WIDTH, HEIGHT); - }; - this.timer_init = function(){ + + this.timer_init = function () { time = Date.now(); - }; - this.timer = function(s, echo){ - var str = "time("+s+") = "+(Math.round(Date.now() - time)/1000)+" s"; - if(echo === true) + }; + + this.timer = function (s, echo) { + var str = "time(" + s + ") = " + (Math.round(Date.now() - time) / 1000) + " s"; + if (echo === true) return str; else console.log(str); - }; - //get url param - this.get_url_param = function(name){ - name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); - var regexS = "[\\?&]"+name+"=([^&#]*)"; - var regex = new RegExp( regexS ); - var results = regex.exec( window.location.href ); - if( results == null ) - return ""; - else - return results[1]; - }; - this.strpos = function(haystack, needle, offset) { - var i = (haystack+'').indexOf(needle, (offset || 0)); + }; + + this.strpos = function (haystack, needle, offset) { + var i = (haystack + '').indexOf(needle, (offset || 0)); return i === -1 ? false : i; - }; - this.sleep = function(millis){ - var date = new Date(); - var curDate = null; - do { curDate = new Date(); } - while(curDate-date < millis); - }; - this.js_dump = function(arr,level) { - var dumped_text = ""; - if(!level) level = 0; - - //The padding given at the beginning of the line. - var level_padding = ""; - for(var j=0;j \"" + value + "\"\n"; - } + }; + + this.getCookie = function (NameOfCookie) { + if (document.cookie.length > 0){ + begin = document.cookie.indexOf(NameOfCookie + "="); + if (begin != -1){ + begin += NameOfCookie.length + 1; + end = document.cookie.indexOf(";", begin); + if (end == -1) + end = document.cookie.length; + return unescape(document.cookie.substring(begin, end)); } - } else { //Stings/Chars/Numbers etc. - dumped_text = "===>"+arr+"<===("+typeof(arr)+")"; - } - alert(dumped_text); - }; - this.unique = function(list){ - var o = {}, i, l = list.length, r = []; - for(i=0; i 0) - { begin = document.cookie.indexOf(NameOfCookie+"="); - if (begin != -1) - { begin += NameOfCookie.length+1; - end = document.cookie.indexOf(";", begin); - if (end == -1) end = document.cookie.length; - return unescape(document.cookie.substring(begin, end)); } } return ''; - }; - this.setCookie = function(NameOfCookie, value, expiredays){ - var ExpireDate = new Date (); + }; + + this.setCookie = function (NameOfCookie, value, expiredays) { + var ExpireDate = new Date(); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + "=" + escape(value) + - ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); - }; - this.delCookie = function(NameOfCookie){ + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); + }; + + this.delCookie = function (NameOfCookie) { if (HELPER.getCookie(NameOfCookie)) { document.cookie = NameOfCookie + "=" + - "; expires=Thu, 01-Jan-70 00:00:01 GMT"; - } - }; - /* - ctx.strokeStyle = "#2d6"; - ctx.fillStyle = "#abc"; - HELPER.roundRect(ctx, 100, 200, 200, 100, 50, true); - */ - this.roundRect = function(ctx, x, y, width, height, radius, fill, stroke){ - if (typeof stroke == "undefined" ){ - stroke = true; - } - if (typeof radius === "undefined"){ - radius = 5; - } - ctx.beginPath(); - ctx.moveTo(x + radius, y); - ctx.lineTo(x + width - radius, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + radius); - ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); - ctx.closePath(); - if (stroke){ - ctx.stroke(); - } - if (fill){ - ctx.fill(); - } - }; - this.getRandomInt = function(min, max) { + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; + } + }; + + this.getRandomInt = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; - }; - //dashed objects - this.dashedRect = function(canvas, x1, y1, x2, y2, dashLen, color) { - HELPER.dashedLine(canvas, x1, y1, x2, y1, dashLen, color); - HELPER.dashedLine(canvas, x2, y1, x2, y2, dashLen, color); - HELPER.dashedLine(canvas, x2, y2, x1, y2, dashLen, color); - HELPER.dashedLine(canvas, x1, y2, x1, y1, dashLen, color); - }; - this.dashedLine = function(canvas, x1, y1, x2, y2, dashLen, color) { - x1 = x1 + 0.5; - y1 = y1 + 0.5; - x2 = x2 + 0.5; - y2 = y2 + 0.5; - if(color != undefined) - canvas.strokeStyle = color; - else - canvas.strokeStyle = "#000000"; - if(dashLen == undefined) dashLen = 4; - canvas.beginPath(); - canvas.moveTo(x1, y1); - var dX = x2 - x1; - var dY = y2 - y1; - var dashes = Math.floor(Math.sqrt(dX * dX + dY * dY) / dashLen); - var dashX = dX / dashes; - var dashY = dY / dashes; - var q = 0; - while (q++ < dashes){ - x1 += dashX; - y1 += dashY; - canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x1, y1); - } - canvas[q % 2 == 0 ? 'moveTo' : 'lineTo'](x2, y2); - canvas.stroke(); - canvas.closePath(); - }; - this.font_pixel_to_height = function(px){ - return Math.round(px*0.75); - }; - this.rgbToHex = function(r, g, b) { + }; + + this.font_pixel_to_height = function (px) { + return Math.round(px * 0.75); + }; + + this.rgbToHex = function (r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); - }; - this.rgb2hex_all = function(rgb){ + }; + + this.rgb2hex_all = function (rgb) { rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + HELPER.hex(rgb[1]) + HELPER.hex(rgb[2]) + HELPER.hex(rgb[3]); - }; - this.hex = function(x){ + }; + + this.hex = function (x) { return ("0" + parseInt(x).toString(16)).slice(-2); - }; - this.hex2rgb = function(hex) { - if (hex[0]=="#") hex=hex.substr(1); - if (hex.length==3) { - var temp=hex; hex=''; + }; + + this.hex2rgb = function (hex) { + if (hex[0] == "#") + hex = hex.substr(1); + if (hex.length == 3) { + var temp = hex; + hex = ''; temp = /^([a-f0-9])([a-f0-9])([a-f0-9])$/i.exec(temp).slice(1); - for (var i=0;i<3;i++) hex+=temp[i]+temp[i]; - } + for (var i = 0; i < 3; i++) + hex += temp[i] + temp[i]; + } var triplets = /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i.exec(hex).slice(1); return { - r: parseInt(triplets[0],16), - g: parseInt(triplets[1],16), - b: parseInt(triplets[2],16), + r: parseInt(triplets[0], 16), + g: parseInt(triplets[1], 16), + b: parseInt(triplets[2], 16), a: 255 - }; }; - this.ColorLuminance = function(hex, lum){ - // validate hex string - hex = String(hex).replace(/[^0-9a-f]/gi, ''); - lum = lum || 0; - // convert to decimal and change luminosity - var rgb = "#", c, i; - for (i = 0; i < 3; i++){ - c = parseInt(hex.substr(i*2,2), 16); - c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); - rgb += ("00"+c).substr(c.length); - } - return rgb; - }; - this.drawImage_rotated = function(canvas, file, x, y, width, height, angle){ - var TO_RADIANS = Math.PI/180; - var img = new Image(); - img.src = file; - - canvas.save(); - canvas.translate(x, y); - canvas.rotate(angle * TO_RADIANS); - canvas.drawImage(img, -(width/2), -(height/2)); - canvas.restore(); - }; - this.drawEllipseByCenter = function(ctx, cx, cy, w, h, color, fill) { - HELPER.drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h, color, fill); - }; - this.drawEllipse = function(ctx, x, y, w, h, color, fill) { - 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(); - ctx.fillStyle = color; - ctx.strokeStyle = color; - if(fill==undefined) - ctx.stroke(); - else - ctx.fill(); - }; - this.remove_selection = function(){ + this.remove_selection = function () { if (window.getSelection) { - if (window.getSelection().empty) // Chrome + if (window.getSelection().empty) // Chrome window.getSelection().empty(); - else if (window.getSelection().removeAllRanges) // Firefox + else if (window.getSelection().removeAllRanges) // Firefox window.getSelection().removeAllRanges(); - } - else if (document.selection) // IE? + } + else if (document.selection) // IE? document.selection.empty(); - }; - this.get_dimensions = function(){ + }; + + this.get_dimensions = function () { var theWidth, theHeight; if (window.innerWidth) { - theWidth=window.innerWidth; - } + theWidth = window.innerWidth; + } else if (document.documentElement && document.documentElement.clientWidth) { - theWidth=document.documentElement.clientWidth; - } + theWidth = document.documentElement.clientWidth; + } else if (document.body) { - theWidth=document.body.clientWidth; - } + theWidth = document.body.clientWidth; + } if (window.innerHeight) { - theHeight=window.innerHeight; - } + theHeight = window.innerHeight; + } else if (document.documentElement && document.documentElement.clientHeight) { - theHeight=document.documentElement.clientHeight; - } + theHeight = document.documentElement.clientHeight; + } else if (document.body) { - theHeight=document.body.clientHeight; - } + theHeight = document.body.clientHeight; + } return [theWidth, theHeight]; - }; - this.save_as_chrome = function(fileContents, fileName){ - var link = document.createElement('a'); - link.download = fileName; - link.href = 'data:,' + fileContents; - link.click(); - }; + }; + //credits: richard maloney 2006 - this.darkenColor = function(color, v){ - if (color.length >6){ - color = color.substring(1,color.length); - } - var rgb = parseInt(color, 16); - var r = Math.abs(((rgb >> 16) & 0xFF)+v); if (r>255) r=r-(r-255); - var g = Math.abs(((rgb >> 8) & 0xFF)+v); if (g>255) g=g-(g-255); - var b = Math.abs((rgb & 0xFF)+v); if (b>255) b=b-(b-255); - r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16); - if (r.length == 1) r = '0' + r; - g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16); - if (g.length == 1) g = '0' + g; - b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16); - if (b.length == 1) b = '0' + b; + this.darkenColor = function (color, v) { + if (color.length > 6) { + color = color.substring(1, color.length); + } + var rgb = parseInt(color, 16); + var r = Math.abs(((rgb >> 16) & 0xFF) + v); + if (r > 255) + r = r - (r - 255); + var g = Math.abs(((rgb >> 8) & 0xFF) + v); + if (g > 255) + g = g - (g - 255); + var b = Math.abs((rgb & 0xFF) + v); + if (b > 255) + b = b - (b - 255); + r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16); + if (r.length == 1) + r = '0' + r; + g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16); + if (g.length == 1) + g = '0' + g; + b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16); + if (b.length == 1) + b = '0' + b; return "#" + r + g + b; - }; + }; + //IntegraXor Web SCADA - JavaScript Number Formatter, author: KPL, KHL - this.number_format = function(n, decPlaces, thouSeparator, decSeparator){ + this.number_format = function (n, decPlaces, thouSeparator, decSeparator) { var decPlaces = isNaN(decPlaces = Math.abs(decPlaces)) ? 2 : decPlaces; var decSeparator = decSeparator == undefined ? "." : decSeparator; var thouSeparator = thouSeparator == undefined ? "," : thouSeparator; var sign = n < 0 ? "-" : ""; - var n = Math.abs(+n || 0).toFixed(decPlaces); - var i = parseInt(n); + var i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + ""; var j = (j = i.length) > 3 ? j % 3 : 0; return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : ""); - }; - this.length = function(object){ - var n = 0; - for(var i in object){ - n++; - } - return n; - }; - this.chech_input_color_support = function(id){ - if(document.getElementById(id).value != undefined && document.getElementById(id).value[0] == '#') + }; + + this.chech_input_color_support = function (id) { + if (document.getElementById(id).value != undefined && document.getElementById(id).value[0] == '#') return true; return false; - }; - } -//http://www.script-tutorials.com/html5-canvas-custom-brush1/ -var BezierCurveBrush = { - // inner variables - iPrevX: 0, - iPrevY: 0, - points: null, - // initialization function - init: function () { - }, - startCurve: function (x, y) { - this.iPrevX = x; - this.iPrevY = y; - this.points = new Array(); - }, - getPoint: function (iLength, a) { - var index = a.length - iLength, i; - for (i = index; i < a.length; i++) { - if (a[i]) { - return a[i]; - } - } - }, - draw: function (ctx, color_rgb, x, y, size) { - if (Math.abs(this.iPrevX - x) > 5 || Math.abs(this.iPrevY - y) > 5) { - this.points.push([x, y]); - - // draw main path stroke - ctx.beginPath(); - ctx.moveTo(this.iPrevX, this.iPrevY); - ctx.lineTo(x, y); - - ctx.lineWidth = size; - ctx.lineCap = 'round'; - ctx.lineJoin = 'round'; - ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.9)'; - ctx.stroke(); - ctx.closePath(); - - // draw extra strokes - ctx.lineWidth = 1; - ctx.strokeStyle = 'rgba(' + color_rgb.r + ', ' + color_rgb.g + ', ' + color_rgb.b + ', 0.2)'; - ctx.beginPath(); - var iStartPoint = this.getPoint(25, this.points); - var iFirstPoint = this.getPoint(1, this.points); - var iSecondPoint = this.getPoint(5, this.points); - ctx.moveTo(iStartPoint[0],iStartPoint[1]); - ctx.bezierCurveTo(iFirstPoint[0], iFirstPoint[1], iSecondPoint[0], iSecondPoint[1], x, y); - ctx.stroke(); - ctx.closePath(); - - this.iPrevX = x; - this.iPrevY = y; - } - } -}; - -//quick access short functions -function log(object){ - if(typeof object != 'object') - console.log(object); - else{ - var str = '['; - for(var i in object){ - if(typeof object[i] == 'number') - str += Math.round(object[i]*1000)/1000+", "; - else - str += object[i]+", "; - } - str += ']'; - log(str); - } - } -function round(number){ - return Math.round(number); - } + }; +} diff --git a/js/image.js b/js/image.js new file mode 100644 index 0000000..14e1ade --- /dev/null +++ b/js/image.js @@ -0,0 +1,1052 @@ +/* global MAIN, EVENTS, LAYER, POP, HELPER, TOOLS, DRAW, GUI, EDIT */ +/* global canvas_active, ImageFilters, WIDTH, HEIGHT, canvas_active, canvas_front */ + +var IMAGE = new IMAGE_CLASS(); + +/** + * manages image actions + * + * @author ViliusL + */ +function IMAGE_CLASS() { + + //information + this.image_information = function () { + var colors = this.unique_colors_count(canvas_active(true)); + colors = HELPER.number_format(colors, 0); + + POP.add({title: "Width:", value: WIDTH}); + POP.add({title: "Height:", value: HEIGHT}); + POP.add({title: "Unique colors:", value: colors}); + //exif + for (var i in TOOLS.EXIF) + POP.add({title: i + ":", value: TOOLS.EXIF[i]}); + POP.show('Information', ''); + }; + + //size + this.image_size = function () { + POP.add({name: "width", title: "Width:", value: WIDTH}); + POP.add({name: "height", title: "Height:", value: HEIGHT}); + POP.show('Attributes', [IMAGE, 'resize_custom']); + }; + + //trim + this.image_trim = function () { + EDIT.save_state(); + this.trim(); + }; + + //crop + this.image_crop = function () { + EDIT.save_state(); + if (DRAW.select_data == false) { + POP.add({html: 'Select area first'}); + POP.show('Error', ''); + } + else { + for (var i in LAYER.layers) { + var layer = document.getElementById(LAYER.layers[i].name).getContext("2d"); + + var tmp = layer.getImageData(DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + } + + //resize + EDIT.save_state(); + WIDTH = DRAW.select_data.w; + HEIGHT = DRAW.select_data.h; + LAYER.set_canvas_size(); + + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + + //resize + this.image_resize = function () { + this.resize_box(); + }; + + //rotate left + this.image_rotate_left = function () { + EDIT.save_state(); + this.rotate_resize_doc(270, WIDTH, HEIGHT); + this.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); + }; + + //rotate right + this.image_rotate_right = function () { + EDIT.save_state(); + this.rotate_resize_doc(90, WIDTH, HEIGHT); + this.rotate_layer({angle: 90}, canvas_active(), WIDTH, HEIGHT); + }; + + //rotate + this.image_rotate = function () { + POP.add({name: "angle", title: "Enter angle (0-360):", value: 0, range: [0, 360]}); + POP.show( + 'Rotate', + function (response) { + EDIT.save_state(); + IMAGE.rotate_resize_doc(response.angle, WIDTH, HEIGHT); + IMAGE.rotate_layer(response, canvas_active(), WIDTH, HEIGHT); + }, + function (response, canvas_preview, w, h) { + IMAGE.rotate_layer(response, canvas_preview, w, h); + } + ); + }; + + //vertical flip + this.image_vflip = function () { + EDIT.save_state(); + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); + //flip + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().save(); + canvas_active().scale(-1, 1); + canvas_active().drawImage(tempCanvas, -WIDTH, 0); + canvas_active().restore(); + }; + + //horizontal flip + this.image_hflip = function () { + EDIT.save_state(); + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = WIDTH; + tempCanvas.height = HEIGHT; + tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); + //flip + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + canvas_active().save(); + canvas_active().scale(1, -1); + canvas_active().drawImage(tempCanvas, 0, -HEIGHT); + canvas_active().restore(); + }; + + //color corrections + this.image_colors = function () { + POP.add({name: "param1", title: "Brightness:", value: "0", range: [-100, 100]}); + POP.add({name: "param2", title: "Contrast:", value: "0", range: [-100, 100]}); + POP.add({name: "param_red", title: "Red channel:", value: "0", range: [-255, 255]}); + POP.add({name: "param_green", title: "Green channel:", value: "0", range: [-255, 255]}); + POP.add({name: "param_blue", title: "Blue channel:", value: "0", range: [-255, 255]}); + POP.add({name: "param_h", title: "Hue:", value: "0", range: [-180, 180]}); + POP.add({name: "param_s", title: "Saturation:", value: "0", range: [-100, 100]}); + POP.add({name: "param_l", title: "Luminance:", value: "0", range: [-100, 100]}); + + POP.show( + 'Brightness Contrast', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param_red = parseInt(user_response.param_red); + var param_green = parseInt(user_response.param_green); + var param_blue = parseInt(user_response.param_blue); + var param_h = parseInt(user_response.param_h); + var param_s = parseInt(user_response.param_s); + var param_l = parseInt(user_response.param_l); + + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + //Brightness/Contrast + var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); + //RGB corrections + var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); + //hue/saturation/luminance + var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); + canvas_active().putImageData(filtered, 0, 0); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + var param_red = parseInt(user_response.param_red); + var param_green = parseInt(user_response.param_green); + var param_blue = parseInt(user_response.param_blue); + var param_h = parseInt(user_response.param_h); + var param_s = parseInt(user_response.param_s); + var param_l = parseInt(user_response.param_l); + + var imageData = canvas_preview.getImageData(0, 0, w, h); + //Brightness/Contrast + var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); //add effect + //RGB corrections + var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); + //hue/saturation/luminance + var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); + canvas_preview.putImageData(filtered, 0, 0); + } + ); + }; + + //auto adjust colors + this.image_auto_adjust = function () { + EDIT.save_state(); + this.auto_adjust(canvas_active(), WIDTH, HEIGHT); + }; + + //convert to grayscale + this.image_GrayScale = function () { + EDIT.save_state(); + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GrayScale(imageData); //add effect + canvas_active().putImageData(filtered, 0, 0); + }; + + //enchance colors + this.image_decrease_colors = function () { + POP.add({name: "param1", title: "Colors:", value: "10", range: [2, 100]}); + POP.add({name: "param2", title: "Dithering:", values: ["No", "Yes"], }); + POP.add({name: "param3", title: "Greyscale:", values: ["No", "Yes"], }); + POP.show( + 'Decrease colors', + function (user_response) { + EDIT.save_state(); + var param1 = parseInt(user_response.param1); + if (user_response.param2 == 'Yes') + param2 = true; + else + param2 = false; + if (user_response.param3 == 'Yes') + param3 = true; + else + param3 = false; + + IMAGE.decrease_colors(canvas_active(true), canvas_active(true), WIDTH, HEIGHT, param1, param2, param3); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + if (user_response.param2 == 'Yes') + param2 = true; + else + param2 = false; + if (user_response.param3 == 'Yes') + param3 = true; + else + param3 = false; + + IMAGE.decrease_colors(canvas_active(true), document.getElementById("pop_post"), w, h, param1, param2, param3); + } + ); + }; + + //negative + this.image_negative = function () { + EDIT.save_state(); + if (DRAW.select_data == false) + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + else + var imageData = canvas_active().getImageData(DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h); + var pixels = imageData.data; + for (var i = 0; i < pixels.length; i += 4) { + pixels[i] = 255 - pixels[i]; // red + pixels[i + 1] = 255 - pixels[i + 1]; // green + pixels[i + 2] = 255 - pixels[i + 2]; // blue + } + //save + if (DRAW.select_data == false) + canvas_active().putImageData(imageData, 0, 0); + else + canvas_active().putImageData(imageData, DRAW.select_data.x, DRAW.select_data.y); + }; + + //grid + this.image_grid = function () { + POP.add({name: "visible", title: "Visible:", value: "Yes", values: ["Yes", "No"]}); + POP.add({name: "gap_x", title: "Horizontal gap:", value: GUI.grid_size[0]}); + POP.add({name: "gap_y", title: "Vertical gap:", value: GUI.grid_size[1]}); + POP.show( + 'Grid', + function (response) { + if (response.visible == "Yes") { + GUI.grid = true; + gap_x = response.gap_x; + gap_y = response.gap_y; + GUI.draw_grid(gap_x, gap_y); + } + else { + GUI.grid = false; + GUI.draw_grid(); + } + } + ); + }; + + //histogram + this.image_histogram = function () { + this.histogram(); + }; + + this.resize_custom = function (user_response) { + EDIT.save_state(); + EVENTS.autosize = false; + if (user_response.width != WIDTH || user_response.height != HEIGHT) { + WIDTH = user_response.width; + HEIGHT = user_response.height; + LAYER.set_canvas_size(); + } + }; + + //prepare rotation - increase doc dimensions if needed + this.rotate_resize_doc = function (angle, w, h) { + var o = angle * Math.PI / 180; + var new_x = w * Math.abs(Math.cos(o)) + h * Math.abs(Math.sin(o)); + var new_y = w * Math.abs(Math.sin(o)) + h * Math.abs(Math.cos(o)); + new_x = Math.ceil(Math.round(new_x * 1000) / 1000); + new_y = Math.ceil(Math.round(new_y * 1000) / 1000); + + if (WIDTH != new_x || HEIGHT != new_y) { + EDIT.save_state(); + var dx = 0; + var dy = 0; + if (new_x > WIDTH) { + dx = Math.ceil(new_x - WIDTH) / 2; + WIDTH = new_x; + } + if (new_y > HEIGHT) { + dy = Math.ceil(new_y - HEIGHT) / 2; + HEIGHT = new_y; + } + LAYER.set_canvas_size(); + + for (var i in LAYER.layers) { + var layer = document.getElementById(LAYER.layers[i].name).getContext("2d"); + + var tmp = layer.getImageData(0, 0, WIDTH, HEIGHT); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, dx, dy); + } + } + }; + + //rotate layer + this.rotate_layer = function (user_response, canvas, w, h) { + var TO_RADIANS = Math.PI / 180; + angle = user_response.angle; + var tempCanvas = document.createElement("canvas"); + var tempCtx = tempCanvas.getContext("2d"); + tempCanvas.width = w; + tempCanvas.height = h; + var imageData = canvas.getImageData(0, 0, w, h); + tempCtx.putImageData(imageData, 0, 0); + + //rotate + canvas.clearRect(0, 0, w, h); + canvas.save(); + canvas.translate(Math.round(w / 2), Math.round(h / 2)); + canvas.rotate(angle * TO_RADIANS); + canvas.drawImage(tempCanvas, -Math.round(w / 2), -Math.round(h / 2)); + canvas.restore(); + if (w == WIDTH) //if main canvas + GUI.zoom(); + }; + + this.resize_box = function () { + POP.add({name: "width", title: "Width (pixels):", value: '', placeholder: WIDTH}); + POP.add({name: "height", title: "Height (pixels):", value: '', placeholder: HEIGHT}); + POP.add({name: "width_percent", title: "Width (%):", value: '', placeholder: 100}); + POP.add({name: "height_percent", title: "Height (%):", value: '', placeholder: 100}); + POP.add({name: "mode", title: "Mode:", value: "Resample - Hermite", values: ["Resize", "Resample - Hermite"]}); + POP.add({name: "preblur", title: "Pre-Blur:", values: ["Yes", "No"], value: "No"}); + POP.add({name: "sharpen", title: "Apply sharpen:", values: ["Yes", "No"], value: "No"}); + POP.show('Resize', [IMAGE, "resize_layer"]); + }; + + this.resize_layer = function (user_response) { + EDIT.save_state(); + var width = parseInt(user_response.width); + var height = parseInt(user_response.height); + var width_100 = parseInt(user_response.width_percent); + var height_100 = parseInt(user_response.height_percent); + var preblur = user_response.preblur; + var sharpen = user_response.sharpen; + if (isNaN(width) && isNaN(height) && isNaN(width_100) && isNaN(height_100)) + return false; + if (width == WIDTH && height == HEIGHT) + return false; + + //if dimension with percent provided + if (isNaN(width) && isNaN(height)) { + if (isNaN(width_100) == false) { + width = Math.round(WIDTH * width_100 / 100); + } + if (isNaN(height_100) == false) { + height = Math.round(HEIGHT * height_100 / 100); + } + } + + //if only 1 dimension was provided + if (isNaN(width) || isNaN(height)) { + var ratio = WIDTH/HEIGHT; + if (isNaN(width)) + width = Math.round(height * ratio); + if (isNaN(height)) + height = Math.round(width / ratio); + } + + //if increasing size - use simple way - its good enough + if (width > WIDTH || height > HEIGHT) + user_response.mode = "Resize"; + + //anti-artifacting? + if (preblur == 'Yes') { + var ratio_w = WIDTH / width; + var ratio_h = HEIGHT / height; + var ratio_avg = Math.max(ratio_w, ratio_h); + var power = ratio_avg * 0.3; + if (power > 0.6) { + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.GaussianBlur(imageData, power); //add effect + canvas_active().putImageData(filtered, 0, 0); + } + } + if (width > WIDTH || height > HEIGHT) + user_response.mode = "Resize"; + //Hermite - good and fast + if (user_response.mode == "Resample - Hermite") { + this.resample_hermite(canvas_active(true), WIDTH, HEIGHT, width, height); + if (GUI.last_menu != 'layer_resize') { + WIDTH = width; + HEIGHT = height; + if (WIDTH < 1) + WIDTH = 1; + if (HEIGHT < 1) + HEIGHT = 1; + LAYER.set_canvas_size(); + } + GUI.zoom(); + } + //simple resize + if (user_response.mode == "Resize") { + //simple resize - FAST + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + if (width <= WIDTH) { + canvas_active().drawImage(tmp_data, 0, 0, width, height); + } + else { + WIDTH = Math.round(width); + HEIGHT = Math.round(height); + LAYER.set_canvas_size(); + canvas_active().drawImage(tmp_data, 0, 0, width, height); + } + if (GUI.last_menu != 'layer_resize') + this.trim(); + GUI.zoom(); + } + + //sharpen after? + if (sharpen == 'Yes') { + var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var filtered = ImageFilters.Sharpen(imageData, 1); //add effect + canvas_active().putImageData(filtered, 0, 0); + } + }; + + this.trim_info = function (canvas, trim_white, include_white) { + var top = 0; + var left = 0; + var bottom = 0; + var right = 0; + var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); + var imgData = img.data; + //check top + main1: + for (var y = 0; y < img.height; y++) { + for (var x = 0; x < img.width; x++) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main1; + } + top++; + } + //check left + main2: + for (var x = 0; x < img.width; x++) { + for (var y = 0; y < img.height; y++) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main2; + } + left++; + } + //check bottom + main3: + for (var y = img.height - 1; y >= 0; y--) { + for (var x = img.width - 1; x >= 0; x--) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main3; + } + bottom++; + } + //check right + main4: + for (var x = img.width - 1; x >= 0; x--) { + for (var y = img.height - 1; y >= 0; y--) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main4; + } + right++; + } + return { + top: top, + left: left, + bottom: bottom, + right: right + }; + }; + + this.trim = function (layer, no_resize, include_white) { + var all_top = HEIGHT; + var all_left = WIDTH; + var all_bottom = HEIGHT; + var all_right = WIDTH; + for (var i in LAYER.layers) { + if (layer != undefined && LAYER.layers[i].name != layer) + continue; + + var top = 0; + var left = 0; + var bottom = 0; + var right = 0; + var img = document.getElementById(LAYER.layers[i].name).getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); + var imgData = img.data; + //check top + main1: + for (var y = 0; y < img.height; y++) { + for (var x = 0; x < img.width; x++) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main1; + } + top++; + } + //check left + main2: + for (var x = 0; x < img.width; x++) { + for (var y = 0; y < img.height; y++) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main2; + } + left++; + } + //check bottom + main3: + for (var y = img.height - 1; y >= 0; y--) { + for (var x = img.width - 1; x >= 0; x--) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main3; + } + bottom++; + } + //check right + main4: + for (var x = img.width - 1; x >= 0; x--) { + for (var y = img.height - 1; y >= 0; y--) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + if (include_white !== true && imgData[k] == 255 && imgData[k + 1] == 255 && imgData[k + 2] == 255) + continue; //white + break main4; + } + right++; + } + all_top = Math.min(all_top, top); + all_left = Math.min(all_left, left); + all_bottom = Math.min(all_bottom, bottom); + all_right = Math.min(all_right, right); + } + //move to top-left corner + for (var i in LAYER.layers) { + if (layer != undefined && LAYER.layers[i].name != layer) + continue; + + tmp_data = document.getElementById(LAYER.layers[i].name).getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); + document.getElementById(LAYER.layers[i].name).getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); + document.getElementById(LAYER.layers[i].name).getContext("2d").putImageData(tmp_data, -all_left, -all_top); + var canvas_name = LAYER.layers[i].name; + } + //resize + if (no_resize != undefined) + return false; + if (layer != undefined) { + var W = Math.round(WIDTH - all_left - all_right); + var H = Math.round(HEIGHT - all_top - all_bottom); + + var imageData = document.getElementById(layer).getContext("2d").getImageData(0, 0, W, H); + document.getElementById(layer).width = W; + document.getElementById(layer).height = H; + document.getElementById(layer).getContext("2d").clearRect(0, 0, W, H); + document.getElementById(layer).getContext("2d").putImageData(imageData, 0, 0); + + return { + top: all_top, + left: all_left, + bottom: all_bottom, + right: all_right + }; + } + else { + WIDTH = WIDTH - all_left - all_right; + HEIGHT = HEIGHT - all_top - all_bottom; + if (WIDTH < 1) + WIDTH = 1; + if (HEIGHT < 1) + HEIGHT = 1; + LAYER.set_canvas_size(); + } + LAYER.update_info_block(); + }; + + this.decrease_colors = function (canvas_source, canvas_destination, W, H, colors, dithering, greyscale) { + var context = canvas_destination.getContext("2d"); + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var palette = []; + + //collect top colors + var block_size = 10; + var ctx = canvas_front; //use temp canvas + ctx.clearRect(0, 0, W, H); + ctx.drawImage(canvas_source, 0, 0, Math.ceil(canvas_source.width / block_size), Math.ceil(canvas_source.height / block_size)); //simple resize + var img_p = ctx.getImageData(0, 0, Math.ceil(canvas_source.width / block_size), Math.ceil(canvas_source.height / block_size)); + var imgData_p = img_p.data; + ctx.clearRect(0, 0, W, H); + + for (var i = 0; i < imgData_p.length; i += 4) { + if (imgData_p[i + 3] == 0) + continue; //transparent + var grey = Math.round(0.2126 * imgData_p[i] + 0.7152 * imgData_p[i + 1] + 0.0722 * imgData_p[i + 2]); + palette.push([imgData_p[i], imgData_p[i + 1], imgData_p[i + 2], grey]); + } + + //calculate weights + var grey_palette = []; + for (var i = 0; i < 256; i++) + grey_palette[i] = 0; + for (var i = 0; i < palette.length; i++) + grey_palette[palette[i][3]]++; + + //remove similar colors + for (var max = 10 * 3; max < 100 * 3; max = max + 10 * 3) { + if (palette.length <= colors) + break; + for (var i = 0; i < palette.length; i++) { + if (palette.length <= colors) + break; + var valid = true; + for (var j = 0; j < palette.length; j++) { + if (palette.length <= colors) + break; + if (i == j) + continue; + if (Math.abs(palette[i][0] - palette[j][0]) + Math.abs(palette[i][1] - palette[j][1]) + Math.abs(palette[i][2] - palette[j][2]) < max) { + if (grey_palette[palette[i][3]] > grey_palette[palette[j][3]]) { + //remove color + palette.splice(j, 1); + j--; + } + else { + valid = false; + break; + } + } + } + //remove color + if (valid == false) { + palette.splice(i, 1); + i--; + } + } + } + + //change + var p_n = palette.length; + for (var j = 0; j < H; j++) { + for (var i = 0; i < W; i++) { + var k = ((j * (W * 4)) + (i * 4)); + if (imgData[k + 3] == 0) + continue; //transparent + var grey = Math.round(0.2126 * imgData_p[k] + 0.7152 * imgData_p[k + 1] + 0.0722 * imgData_p[k + 2]); + + //find closest color + var index1 = 0; + var min = 999999; + var diff1; + for (var m = 0; m < p_n; m++) { + var diff = Math.abs(palette[m][0] - imgData[k]) + Math.abs(palette[m][1] - imgData[k + 1]) + Math.abs(palette[m][2] - imgData[k + 2]); + if (diff < min) { + min = diff; + index1 = m; + diff1 = diff; + } + } + + if (dithering == false) { + imgData[k] = palette[index1][0]; + imgData[k + 1] = palette[index1][1]; + imgData[k + 2] = palette[index1][2]; + } + else { + //dithering + if (diff1 >= 10) { + //find second close color + var index2; + var min2 = 256 * 3; + var diff2; + for (var m = 0; m < p_n; m++) { + if (m == index1) + continue; //we already have this + if (palette[index1][3] < grey && palette[m][3] < grey) + continue; + if (palette[index1][3] > grey && palette[m][3] > grey) + continue; + var diff = Math.abs(palette[m][0] - imgData[k]) + Math.abs(palette[m][1] - imgData[k + 1]) + Math.abs(palette[m][2] - imgData[k + 2]); + if (diff < min2) { + min2 = diff; + index2 = m; + diff2 = diff; + } + } + } + + var c; + if (index2 == undefined) + c = palette[index1]; //only 1 match + else { + //randomize + var rand = HELPER.getRandomInt(-diff1, diff2); + if (rand < 0) + c = palette[index2]; + else + c = palette[index1]; + } + imgData[k] = c[0]; + imgData[k + 1] = c[1]; + imgData[k + 2] = c[2]; + } + + if (greyscale == true) { + var mid = Math.round(0.2126 * imgData[k] + 0.7152 * imgData[k + 1] + 0.0722 * imgData[k + 2]); + imgData[k] = mid; + imgData[k + 1] = mid; + imgData[k + 2] = mid; + } + } + } + canvas_destination.getContext("2d").putImageData(img, 0, 0); + }; + + //fixing white and black color balance + this.auto_adjust = function (context, W, H) { + //settings + var white = 240; //white color min + var black = 30; //black color max + var target_white = 1; //how much % white colors should take + var target_black = 0.5; //how much % black colors should take + var modify = 1.1; //color modify strength + + document.body.style.cursor = "wait"; + var img = context.getImageData(0, 0, W, H); + var imgData = img.data; + var n = 0; //pixels count without transparent + + //make sure we have white + var n_valid = 0; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 > white) + n_valid++; + n++; + } + target = target_white; + var n_fix_white = 0; + var done = false; + for (var j = 0; j < 30; j++) { + if (n_valid * 100 / n >= target) + done = true; + if (done == true) + break; + n_fix_white++; + + //adjust + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + for (var c = 0; c < 3; c++) { + var x = i + c; + if (imgData[x] < 10) + continue; + //increase white + imgData[x] *= modify; + imgData[x] = Math.round(imgData[x]); + if (imgData[x] > 255) + imgData[x] = 255; + } + } + + //recheck + n_valid = 0; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 > white) + n_valid++; + } + } + + //make sure we have black + n_valid = 0; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 < black) + n_valid++; + } + target = target_black; + var n_fix_black = 0; + var done = false; + for (var j = 0; j < 30; j++) { + if (n_valid * 100 / n >= target) + done = true; + if (done == true) + break; + n_fix_black++; + + //adjust + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + for (var c = 0; c < 3; c++) { + var x = i + c; + if (imgData[x] > 240) + continue; + //increase black + imgData[x] -= (255 - imgData[x]) * modify - (255 - imgData[x]); + imgData[x] = Math.round(imgData[x]); + } + } + + //recheck + n_valid = 0; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 < black) + n_valid++; + } + } + + //save + context.putImageData(img, 0, 0); + document.body.style.cursor = "auto"; + //log('Iterations: brighten='+n_fix_white+", darken="+n_fix_black); + }; + + //hermite resample + this.resample_hermite = function (canvas, W, H, W2, H2) { + var time1 = Date.now(); + var img = canvas.getContext("2d").getImageData(0, 0, W, H); + var img2 = canvas.getContext("2d").getImageData(0, 0, W2, H2); + var data = img.data; + var data2 = img2.data; + var ratio_w = W / W2; + var ratio_h = H / H2; + var ratio_w_half = Math.ceil(ratio_w / 2); + var ratio_h_half = Math.ceil(ratio_h / 2); + + for (var j = 0; j < H2; j++) { + for (var i = 0; i < W2; i++) { + var x2 = (i + j * W2) * 4; + var weight = 0; + var weights = 0; + var weights_alpha = 0; + var gx_r = gx_g = gx_b = gx_a = 0; + var center_y = (j + 0.5) * ratio_h; + for (var yy = Math.floor(j * ratio_h); yy < (j + 1) * ratio_h; yy++) { + var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half; + var center_x = (i + 0.5) * ratio_w; + var w0 = dy * dy; //pre-calc part of w + for (var xx = Math.floor(i * ratio_w); xx < (i + 1) * ratio_w; xx++) { + var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half; + var w = Math.sqrt(w0 + dx * dx); + if (w >= -1 && w <= 1) { + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * W); + //alpha + gx_a += weight * data[dx + 3]; + weights_alpha += weight; + //colors + if (data[dx + 3] < 255) + weight = weight * data[dx + 3] / 250; + gx_r += weight * data[dx]; + gx_g += weight * data[dx + 1]; + gx_b += weight * data[dx + 2]; + weights += weight; + } + } + } + } + data2[x2] = gx_r / weights; + data2[x2 + 1] = gx_g / weights; + data2[x2 + 2] = gx_b / weights; + data2[x2 + 3] = gx_a / weights_alpha; + } + } + console.log("hermite = " + (Math.round(Date.now() - time1) / 1000) + " s"); + canvas.getContext("2d").clearRect(0, 0, Math.max(W, W2), Math.max(H, H2)); + canvas.getContext("2d").putImageData(img2, 0, 0); + }; + + this.histogram = function () { + POP.add({name: "param1", title: "Channel:", values: ["Gray", "Red", "Green", "Blue"], onchange: "IMAGE.histogram_onload()"}); + POP.add({title: 'Histogram:', function: function () { + var html = ''; + return html; + }}); + POP.add({title: "Total pixels:", value: ""}); + POP.add({title: "Average:", value: ""}); + POP.show( + 'Histogram', + function (user_response) { + var param1 = parseInt(user_response.param1); + }, + undefined, + this.histogram_onload + ); + }; + + this.histogram_onload = function (user_response) { + var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var imgData = img.data; + var channel_grey = document.getElementById("pop_data_param1_poptmp0"); + var channel_r = document.getElementById("pop_data_param1_poptmp1"); + var channel_g = document.getElementById("pop_data_param1_poptmp2"); + var channel_b = document.getElementById("pop_data_param1_poptmp3"); + + if (channel_grey.checked == true) + channel = channel_grey.value; + else if (channel_r.checked == true) + channel = channel_r.value; + else if (channel_g.checked == true) + channel = channel_g.value; + else if (channel_b.checked == true) + channel = channel_b.value; + + //collect data + var hist_data = []; + for (var i = 0; i <= 255; i++) + hist_data[i] = 0; + var total = imgData.length / 4; + var sum = 0; + var grey; + + if (channel == 'Gray') { + for (var i = 0; i < imgData.length; i += 4) { + grey = Math.round((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3); + hist_data[grey]++; + sum = sum + imgData[i] + imgData[i + 1] + imgData[i + 2]; + } + } + else if (channel == 'Red') { + for (var i = 0; i < imgData.length; i += 4) { + hist_data[imgData[i]]++; + sum = sum + imgData[i] * 3; + } + } + else if (channel == 'Green') { + for (var i = 0; i < imgData.length; i += 4) { + hist_data[imgData[i + 1]]++; + sum = sum + imgData[i + 1] * 3; + } + } + else if (channel == 'Blue') { + for (var i = 0; i < imgData.length; i += 4) { + hist_data[imgData[i + 2]]++; + sum = sum + imgData[i + 2] * 3; + } + } + + //draw histogram + var c = document.getElementById("c_h").getContext("2d"); + c.rect(0, 0, 255, 100); + c.fillStyle = "#ffffff"; + c.fill(); + for (var i = 0; i <= 255; i++) { + if (hist_data[i] == 0) + continue; + c.beginPath(); + c.strokeStyle = "#000000"; + c.lineWidth = 1; + c.moveTo(i + 0.5, 100 + 0.5); + c.lineTo(i + 0.5, 100 - Math.round(hist_data[i] * 255 * 100 / total / 6) + 0.5); + c.stroke(); + } + + document.getElementById("pop_data_totalpixel").value = HELPER.number_format(total, 0); + if (total > 0) + average = Math.round(sum * 10 / total / 3) / 10; + else + average = '-'; + document.getElementById("pop_data_average").value = average; + }; + + this.unique_colors_count = function (canvas) { + var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); + var imgData = img.data; + var colors = []; + var n = 0; + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + var key = imgData[i] + "." + imgData[i + 1] + "." + imgData[i + 2]; + if (colors[key] == undefined) { + colors[key] = 1; + n++; + } + } + return n; + }; +} \ No newline at end of file diff --git a/js/layers.js b/js/layers.js index 0e9d150..6a90136 100644 --- a/js/layers.js +++ b/js/layers.js @@ -1,92 +1,327 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, LAYER, DRAW, MENU, TOOLS */ -/* global WIDTH, HEIGHT, ZOOM, LAYERS, canvas_front, canvas_back */ +/* global HELPER, POP, MAIN, EVENTS, LAYER, IMAGE, DRAW, EDIT, GUI */ +/* global WIDTH, HEIGHT, canvas_front, canvas_back */ var LAYER = new LAYER_CLASS(); -function LAYER_CLASS(){ - this.layer_active = 0; - var imageData_tmp; - var layer_max_index = 0; +/** + * layers class - manages layers + * + * @author ViliusL + */ +function LAYER_CLASS() { + /** + * active layer index + */ + this.layer_active = 0; + + /** + * data layers array + */ + this.layers = []; + + /** + * latest layer index + */ + var layer_max_index = 0; + + //new layer + this.layer_new = function () { + this.add_layer(); + }; + + //dublicate + this.layer_dublicate = function () { + EDIT.save_state(); + if (DRAW.select_data != false) { + //selection + this.copy_to_clipboard(); + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + var tmp = LAYER.layer_active; + this.paste('menu'); + LAYER.layer_active = tmp; + LAYER.layer_renew(); + } + else { + //copy all layer + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + //create + var new_name = 'Layer #' + (this.layers.length + 1); + LAYER.create_canvas(new_name); + this.layers.push({name: new_name, visible: true}); + LAYER.layer_active = this.layers.length - 1; + canvas_active().drawImage(tmp_data, 0, 0); + LAYER.layer_renew(); + } + }; + + //show / hide + this.layer_show_hide = function () { + LAYER.layer_visibility(LAYER.layer_active); + }; + + //crop + this.layer_crop = function () { + EDIT.save_state(); + if (DRAW.select_data == false) { + POP.add({html: 'Select area first'}); + POP.show('Error', ''); + } + else { + var layer = LAYER.canvas_active(); + + var tmp = layer.getImageData(DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h); + layer.clearRect(0, 0, WIDTH, HEIGHT); + layer.putImageData(tmp, 0, 0); + + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + } + }; + + //delete + this.layer_delete = function () { + EDIT.save_state(); + LAYER.layer_remove(LAYER.layer_active); + }; + + //move up + this.layer_move_up = function () { + EDIT.save_state(); + LAYER.move_layer('up'); + }; + + //move down + this.layer_move_down = function () { + EDIT.save_state(); + LAYER.move_layer('down'); + }; + + //opacity + this.layer_opacity = function () { + LAYER.set_alpha(); + }; + + //trim + this.layer_trim = function () { + EDIT.save_state(); + IMAGE.trim(this.layers[LAYER.layer_active].name, true); + }; + + //resize + this.layer_resize = function () { + IMAGE.resize_box(); + }; + + //clear + this.layer_clear = function () { + EDIT.save_state(); + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + }; + + //show differences + this.layer_differences = function () { + if (parseInt(LAYER.layer_active) + 1 >= this.layers.length) { + POP.add({html: 'This can not be last layer'}); + POP.show('Error', ''); + return false; + } + + POP.add({name: "param1", title: "Sensitivity:", value: "0", range: [0, 255]}); + POP.show( + 'Differences', + function (response) { + var param1 = parseInt(response.param1); + LAYER.calc_differences(param1); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + LAYER.calc_differences(param1, canvas_preview, w, h); + } + ); + }; + + //merge + this.layer_merge_down = function () { + var compositions = ["source-over", "source-in", "source-out", "source-atop", + "destination-over", "destination-in", "destination-out", "destination-atop", + "lighter", "darker", "copy", "xor"]; + + var blend_modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", + "color-dodge", "color-burn", "hard-light", "soft-light", "difference", + "exclusion", "hue", "saturation", "color", "luminosity"]; + + if (parseInt(LAYER.layer_active) + 1 >= this.layers.length) { + POP.add({html: 'This can not be last layer.'}); + POP.show('Error', ''); + return false; + } + POP.add({name: "param1", title: "Composition:", values: compositions}); + POP.add({name: "param2", title: "Blend:", values: blend_modes}); + POP.add({name: "param3", title: "Mode:", values: ["Composite", "Blend"]}); + POP.show( + 'Merge', + function (response) { + var param1 = response.param1; + var param2 = response.param2; + var param3 = response.param3; + + EDIT.save_state(); + //copy + LAYER.layer_active++; + var tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0); + + //paste + LAYER.layer_active--; + LAYER.canvas_active().save(); + if (param3 == "Composite") + LAYER.canvas_active().globalCompositeOperation = param1; + else + LAYER.canvas_active().globalCompositeOperation = param2; + LAYER.canvas_active().drawImage(tmp_data, 0, 0); + LAYER.canvas_active().restore(); + + //remove next layer + LAYER.layer_remove(LAYER.layer_active + 1); + LAYER.layer_renew(); + }, + function (response, canvas_preview, w, h) { + var param1 = response.param1; + var param2 = response.param2; + var param3 = response.param3; + + //copy + LAYER.layer_active++; + var tmp_data = document.createElement("canvas"); + tmp_data.width = w; + tmp_data.height = h; + tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); + + //paste + LAYER.layer_active--; + canvas_preview.save(); + if (param3 == "Composite") + canvas_preview.globalCompositeOperation = param1; + else + canvas_preview.globalCompositeOperation = param2; + canvas_preview.drawImage(tmp_data, 0, 0); + canvas_preview.restore(); + } + ); + }; + + //flatten all + this.layer_flatten = function () { + EDIT.save_state(); + if (this.layers.length == 1) + return false; + tmp_data = document.createElement("canvas"); + tmp_data.width = WIDTH; + tmp_data.height = HEIGHT; + for (var i = 1; i < this.layers.length; i++) { + //copy + LAYER.layer_active = i; + tmp_data.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); + tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); + + //paste + LAYER.layer_active = 0; + canvas_active().drawImage(tmp_data, 0, 0); + } + for (var i = this.layers.length - 1; i > 0; i--) { + //delete layer + LAYER.layer_active = i; + LAYER.layer_remove(LAYER.layer_active); + } + LAYER.layer_renew(); + }; + //create layer - this.layer_add = function(name, data, type){ + this.layer_add = function (name, data, type) { tmp = new Array(); - if(data == undefined){ + if (data == undefined) { //empty layer - if(name==undefined){ + if (name == undefined) { layer_max_index++; - name = 'Layer #'+(layer_max_index+1); - } + name = 'Layer #' + (layer_max_index + 1); + } tmp.name = name; tmp.visible = true; tmp.opacity = 1; - if(LAYERS.length==0) + if (this.layers.length == 0) tmp.primary = 1; else LAYER.create_canvas(name); - LAYERS.push(tmp); - } - else{ + this.layers.push(tmp); + } + else { var img = new Image(); - if(data.substring(0,4) == 'http') + if (data.substring(0, 4) == 'http') img.crossOrigin = "Anonymous"; //data from other domain - turn on CORS - img.onload = function(){ + var _this = this; + img.onload = function () { //check size var size_increased = false; - if(img.width > WIDTH || img.height > HEIGHT){ - if(img.width > WIDTH) + if (img.width > WIDTH || img.height > HEIGHT) { + if (img.width > WIDTH) WIDTH = img.width; - if(img.height > HEIGHT) + if (img.height > HEIGHT) HEIGHT = img.height; - RATIO = WIDTH/HEIGHT; LAYER.set_canvas_size(); size_increased = true; - } - if(LAYERS.length == 1 && CON.autosize == true && size_increased == false){ - var trim_info = DRAW.trim_info(document.getElementById("Background")); - if(trim_info.left == WIDTH){ + } + if (_this.layers.length == 1 && EVENTS.autosize == true && size_increased == false) { + var trim_info = IMAGE.trim_info(document.getElementById("Background")); + if (trim_info.left == WIDTH) { WIDTH = img.width; HEIGHT = img.height; - RATIO = WIDTH/HEIGHT; LAYER.set_canvas_size(false); - } } - - for(var i in LAYERS){ - if(LAYERS[i].name == name){ + } + + for (var i in _this.layers) { + if (_this.layers[i].name == name) { layer_max_index++; - name = 'Layer #'+(layer_max_index+1); - } + name = 'Layer #' + (layer_max_index + 1); } + } LAYER.create_canvas(name); - LAYERS.push({ - name: name, + _this.layers.push({ + name: name, visible: true, opacity: 1 - }); - LAYER.layer_active = LAYERS.length-1; + }); + LAYER.layer_active = _this.layers.length - 1; document.getElementById(name).getContext("2d").globalAlpha = 1; document.getElementById(name).getContext('2d').drawImage(img, 0, 0); LAYER.layer_renew(); - DRAW.zoom(); - }; - img.onerror = function(ex){ + GUI.zoom(); + }; + img.onerror = function (ex) { POP.add({html: 'The image could not be loaded.

    '}); - if(data.substring(0,4) == 'http') + if (data.substring(0, 4) == 'http') POP.add({title: "Reason:", value: 'Cross-origin resource sharing (CORS) not supported. Try to save image first.'}); POP.show('Error', '.'); - }; + }; img.src = data; - } - LAYER.layer_active = LAYERS.length-1; - document.getElementById(LAYERS[LAYER.layer_active].name).getContext("2d").globalAlpha = 1; + } + LAYER.layer_active = this.layers.length - 1; + document.getElementById(this.layers[LAYER.layer_active].name).getContext("2d").globalAlpha = 1; this.layer_renew(); - }; - this.create_canvas = function(canvas_id){ + }; + this.create_canvas = function (canvas_id) { var new_canvas = document.createElement('canvas'); new_canvas.setAttribute('id', canvas_id); - + document.getElementById('canvas_more').appendChild(new_canvas); new_canvas.width = WIDTH; new_canvas.height = HEIGHT; @@ -94,32 +329,37 @@ function LAYER_CLASS(){ new_canvas.getContext("2d").webkitImageSmoothingEnabled = false; new_canvas.getContext("2d").ImageSmoothingEnabled = false; //sync zoom - new_canvas.style.width = round(WIDTH * ZOOM / 100)+"px"; - new_canvas.style.height = round(HEIGHT * ZOOM / 100)+"px"; - }; - this.move_layer = function(direction){ - if(LAYERS.length < 2) return false; - if(LAYERS[LAYER.layer_active].primary == 1) return false; + new_canvas.style.width = Math.round(WIDTH * GUI.ZOOM / 100) + "px"; + new_canvas.style.height = Math.round(HEIGHT * GUI.ZOOM / 100) + "px"; + }; + this.move_layer = function (direction) { + if (this.layers.length < 2) + return false; + if (this.layers[LAYER.layer_active].primary == 1) + return false; LAYER.layer_active = parseInt(LAYER.layer_active); - - var layer_from = LAYERS[LAYER.layer_active]; - var content = document.getElementById(LAYERS[LAYER.layer_active].name); + + var layer_from = this.layers[LAYER.layer_active]; + var content = document.getElementById(this.layers[LAYER.layer_active].name); var parent = content.parentNode; - - - if(direction == 'up'){ - if(LAYERS[LAYER.layer_active-1] == undefined) return false; - if(LAYERS[LAYER.layer_active-1].primary == 1) return false; - var layer_to = LAYERS[LAYER.layer_active-1]; + + + if (direction == 'up') { + if (this.layers[LAYER.layer_active - 1] == undefined) + return false; + if (this.layers[LAYER.layer_active - 1].primary == 1) + return false; + var layer_to = this.layers[LAYER.layer_active - 1]; parent.insertBefore(content, parent.firstChild); - } - else{ - if(LAYERS[LAYER.layer_active+1] == undefined) return false; - var layer_to = LAYERS[LAYER.layer_active+1]; - var content = document.getElementById(LAYERS[LAYER.layer_active+1].name); + } + else { + if (this.layers[LAYER.layer_active + 1] == undefined) + return false; + var layer_to = this.layers[LAYER.layer_active + 1]; + var content = document.getElementById(this.layers[LAYER.layer_active + 1].name); parent.insertBefore(content, parent.firstChild); - } - + } + //switch name var tmp = layer_to.name; layer_to.name = layer_from.name; @@ -132,229 +372,326 @@ function LAYER_CLASS(){ var tmp = layer_to.opacity; layer_to.opacity = layer_from.opacity; layer_from.opacity = tmp; - - LAYER.layer_active = LAYERS.length-1; - for(var i in LAYERS){ - if(LAYERS[i].name == layer_to.name){ + + LAYER.layer_active = this.layers.length - 1; + for (var i in this.layers) { + if (this.layers[i].name == layer_to.name) { LAYER.layer_active = i; break; - } } + } this.layer_renew(); - DRAW.zoom(); + GUI.zoom(); return true; - }; - this.layer_visibility = function(i){ - if(LAYERS[i].visible == true){ - LAYERS[i].visible = false; - document.getElementById(LAYERS[i].name).style.visibility = 'hidden'; - document.getElementById('layer_'+i).src = "img/yes-grey.png"; - } - else{ - LAYERS[i].visible = true; - document.getElementById(LAYERS[i].name).style.visibility = 'visible'; - document.getElementById('layer_'+i).src = "img/yes.png"; - } + }; + this.layer_visibility = function (i) { + if (this.layers[i].visible == true) { + this.layers[i].visible = false; + document.getElementById(this.layers[i].name).style.visibility = 'hidden'; + document.getElementById('layer_' + i).src = "img/yes-grey.png"; + } + else { + this.layers[i].visible = true; + document.getElementById(this.layers[i].name).style.visibility = 'visible'; + document.getElementById('layer_' + i).src = "img/yes.png"; + } this.layer_renew(); - DRAW.redraw_preview(); - }; - this.layer_remove = function(i){ - if(LAYERS[i].primary == 1) return false; - element = document.getElementById(LAYERS[i].name); + GUI.redraw_preview(); + }; + this.layer_remove = function (i) { + if (this.layers[i].primary == 1) + return false; + element = document.getElementById(this.layers[i].name); element.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); element.parentNode.removeChild(element); - - LAYERS.splice(i, 1); - if(LAYER.layer_active >= LAYERS.length) - LAYER.layer_active = LAYERS.length-1; + + this.layers.splice(i, 1); + if (LAYER.layer_active >= this.layers.length) + LAYER.layer_active = this.layers.length - 1; this.layer_renew(); - DRAW.redraw_preview(); - }; - this.layer_move_active = function(x, y){ + GUI.redraw_preview(); + }; + this.layer_move_active = function (x, y) { var distance = 10; - if(CON.ctrl_pressed == true) + if (EVENTS.ctrl_pressed == true) distance = 50; - if(CON.shift_pressed == true) + if (EVENTS.shift_pressed == true) distance = 1; //move - dx = x*distance; - dy = y*distance; + dx = x * distance; + dy = y * distance; var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); canvas_active().clearRect(0, 0, WIDTH, HEIGHT); canvas_active().putImageData(tmp, dx, dy); - }; - this.select_layer = function(i){ - if(LAYER.layer_active != i){ + }; + this.select_layer = function (i) { + if (LAYER.layer_active != i) { LAYER.layer_active = i; //select this.layer_renew(); - } + } LAYER.shake(i); - }; - this.layer_renew = function(){ + }; + this.layer_renew = function () { var html = ''; - for(var i in LAYERS){ + for (var i in this.layers) { //create - if(LAYER.layer_active==i) + if (LAYER.layer_active == i) html += '
    '; else html += '
    '; - var title = LAYERS[i].name; - html += ''+title+''; - if(LAYERS[i].primary != 1){ - html += ''; - } + var title = this.layers[i].name; + html += '' + title + ''; + if (this.layers[i].primary != 1) { + html += ''; + } else html += ''; //hide - if(LAYERS[i].visible == true) - html += ''; + if (this.layers[i].visible == true) + html += ''; else - html += ''; - + html += ''; + html += '
    '; //show document.getElementById('layers').innerHTML = html; - } - }; - this.shake = function(i, nr){ + } + }; + this.shake = function (i, nr) { var step = 3; var n = 10; - - if(nr == undefined){ + + if (nr == undefined) { //begin nr = 0; canvas_front.drawImage(canvas_active(true), 0, 0); - } - var dx = step * (nr%2); - if(dx == 0) + } + var dx = step * (nr % 2); + if (dx == 0) dx = -step; - + var element = document.getElementById('canvas_front'); - element.style.marginLeft = dx+"px"; - if(nr < n) - setTimeout(function(){LAYER.shake(i, nr + 1);}, 15); - else{ + element.style.marginLeft = dx + "px"; + if (nr < n) + setTimeout(function () { + LAYER.shake(i, nr + 1); + }, 15); + else { //finish shaking - element.style.marginLeft = "0px"; + element.style.marginLeft = "0px"; canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - this.update_info_block = function(){ + } + }; + this.update_info_block = function () { var html = ''; - html += 'Size: '+WIDTH+"x"+HEIGHT+"
    "; + html += 'Size: ' + WIDTH + "x" + HEIGHT + "
    "; var x = 0; var y = 0; - if(CON.mouse != undefined){ - x = CON.mouse.x; - y = CON.mouse.y; - } - html += 'Mouse: '+x+", "+y+"
    "; - if(TOOLS.select_data != false){ - html += 'XY: '+TOOLS.select_data.x+", "+TOOLS.select_data.y+"
    "; - html += 'Area: '+TOOLS.select_data.w+", "+TOOLS.select_data.h+"
    "; - } - + if (EVENTS.mouse != undefined) { + x = EVENTS.mouse.x; + y = EVENTS.mouse.y; + } + html += 'Mouse: ' + x + ", " + y + "
    "; + if (DRAW.select_data != false) { + html += 'XY: ' + DRAW.select_data.x + ", " + DRAW.select_data.y + "
    "; + html += 'Area: ' + DRAW.select_data.w + ", " + DRAW.select_data.h + "
    "; + } + document.getElementById('info').innerHTML = html; - }; - this.set_canvas_size = function(repaint){ - var W = round(WIDTH); - var H = round(W / RATIO); - + }; + this.set_canvas_size = function (repaint) { + var ratio = WIDTH/HEIGHT; + var W = Math.round(WIDTH); + var H = Math.round(W / ratio); + this.resize_canvas("canvas_back"); - DRAW.draw_background(canvas_back, WIDTH, HEIGHT); + GUI.draw_background(canvas_back, WIDTH, HEIGHT); this.resize_canvas("canvas_front", false); this.resize_canvas("canvas_grid", true); - for(var i in LAYERS){ - if(repaint === false) - this.resize_canvas(LAYERS[i].name, false); + for (var i in this.layers) { + if (repaint === false) + this.resize_canvas(this.layers[i].name, false); else - this.resize_canvas(LAYERS[i].name, true); - } - - DRAW.draw_grid(); - + this.resize_canvas(this.layers[i].name, true); + } + + GUI.draw_grid(); + document.getElementById('resize-w').style.marginLeft = W + "px"; - document.getElementById('resize-w').style.marginTop = Math.round(H/2) + "px"; - document.getElementById('resize-h').style.marginLeft = Math.round(W/2) + "px"; + document.getElementById('resize-w').style.marginTop = Math.round(H / 2) + "px"; + document.getElementById('resize-h').style.marginLeft = Math.round(W / 2) + "px"; document.getElementById('resize-h').style.marginTop = H + "px"; document.getElementById('resize-wh').style.marginLeft = W + "px"; document.getElementById('resize-wh').style.marginTop = H + "px"; - + this.update_info_block(); - CON.calc_preview_auto(); - DRAW.zoom(); - }; - this.resize_canvas = function(canvas_name, repaint){ - var W = round(WIDTH ); - var H = round(W / RATIO); + EVENTS.calc_preview_auto(); + GUI.zoom(); + }; + this.resize_canvas = function (canvas_name, repaint) { + var ratio = WIDTH/HEIGHT; + var W = Math.round(WIDTH); + var H = Math.round(W / ratio); var canvas = document.getElementById(canvas_name); var ctx = canvas.getContext("2d"); - - if(repaint==false){ + + if (repaint == false) { canvas.width = W; canvas.height = H; - } - else{ + } + else { //save var buffer = document.createElement('canvas'); buffer.width = WIDTH; buffer.height = HEIGHT; buffer.getContext('2d').drawImage(canvas, 0, 0); - + canvas.width = W; canvas.height = H; - + //restore ctx.drawImage(buffer, 0, 0); - } - }; - this.set_alpha = function(){ - if(LAYERS[LAYER.layer_active].opacity == undefined) - LAYERS[LAYER.layer_active].opacity = 1; - POP.add({name: "param1", title: "Alpha:", value: LAYERS[LAYER.layer_active].opacity, range: [0, 1], step: 0.01 }); - POP.show('Opacity', function(user_response){ - var param1 = parseFloat(user_response.param1); - LAYERS[LAYER.layer_active].opacity = param1; - canvas_active().globalAlpha = param1; - - var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var imgData = img.data; - var new_alpha = 255*param1; - if(new_alpha < 10) - new_alpha = 10; - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - for(var y = 0; y < img.height; y++){ - for(var x = 0; x < img.width; x++){ - var k = ((y * (img.width * 4)) + (x * 4)); - if(imgData[k+3] > 0) - imgData[k+3] = new_alpha; + } + }; + this.set_alpha = function () { + if (this.layers[LAYER.layer_active].opacity == undefined) + this.layers[LAYER.layer_active].opacity = 1; + POP.add({name: "param1", title: "Alpha:", value: this.layers[LAYER.layer_active].opacity, range: [0, 1], step: 0.01}); + POP.show( + 'Opacity', + function (user_response) { + var param1 = parseFloat(user_response.param1); + this.layers[LAYER.layer_active].opacity = param1; + canvas_active().globalAlpha = param1; + + var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var imgData = img.data; + var new_alpha = 255 * param1; + if (new_alpha < 10) + new_alpha = 10; + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + for (var y = 0; y < img.height; y++) { + for (var x = 0; x < img.width; x++) { + var k = ((y * (img.width * 4)) + (x * 4)); + if (imgData[k + 3] > 0) + imgData[k + 3] = new_alpha; } } - canvas_active().putImageData(img, 0, 0); - - DRAW.zoom(); - }); - }; - this.canvas_active = function(base){ - for(var i in LAYERS){ - if(LAYER.layer_active==i){ - if(base == undefined) - return document.getElementById(LAYERS[i].name).getContext("2d"); - else - return document.getElementById(LAYERS[i].name); - } - } - }; - } + canvas_active().putImageData(img, 0, 0); -function canvas_active(base){ - for(var i in LAYERS){ - if(LAYER.layer_active==i){ - if(base == undefined) - return document.getElementById(LAYERS[i].name).getContext("2d"); - else - return document.getElementById(LAYERS[i].name); + GUI.zoom(); + } + ); + }; + this.canvas_active = function (base) { + for (var i in this.layers) { + if (LAYER.layer_active == i) { + if (base == undefined) + return document.getElementById(this.layers[i].name).getContext("2d"); + else + return document.getElementById(this.layers[i].name); } } + }; + + this.add_layer = function () { + EDIT.save_state(); + + var tmp = false; + var last_layer = LAYER.layer_active; + if (DRAW.select_data != false) { + tmp = document.createElement("canvas"); + tmp.width = DRAW.select_data.w; + tmp.height = DRAW.select_data.h; + tmp.getContext("2d").drawImage(canvas_active(true), DRAW.select_data.x, DRAW.select_data.y, DRAW.select_data.w, DRAW.select_data.h, 0, 0, DRAW.select_data.w, DRAW.select_data.h); + } + + //crete layer + LAYER.layer_add(); + + if (DRAW.select_data != false) { + //copy user selected data to new layer + canvas_active().drawImage(tmp, 0, 0); + LAYER.layer_renew(); + + //clear selection + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + //switch back to old layer + LAYER.layer_active = last_layer; + LAYER.layer_renew(); + } + }; + + this.calc_differences = function (sensitivity, canvas_preview, w, h) { + vlayer_active = parseInt(LAYER.layer_active); + //first layer + var img1 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + var imgData1 = img1.data; + + //second layer + var context2 = document.getElementById(this.layers[vlayer_active + 1].name).getContext("2d"); + var img2 = context2.getImageData(0, 0, WIDTH, HEIGHT); + var imgData2 = img2.data; + + //result layer + if (canvas_preview == undefined) { + //add differences layer + LAYER.layer_add(); + canvas_active().rect(0, 0, WIDTH, HEIGHT); + canvas_active().fillStyle = "#ffffff"; + canvas_active().fill(); + var img3 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + } + else { + //work on preview layer + var canvas_tmp = document.createElement("canvas"); + canvas_tmp.width = WIDTH; + canvas_tmp.height = HEIGHT; + var img3 = canvas_tmp.getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); + } + var imgData3 = img3.data; + for (var xx = 0; xx < WIDTH; xx++) { + for (var yy = 0; yy < HEIGHT; yy++) { + var x = (xx + yy * WIDTH) * 4; + if (Math.abs(imgData1[x] - imgData2[x]) > sensitivity + || Math.abs(imgData1[x + 1] - imgData2[x + 1]) > sensitivity + || Math.abs(imgData1[x + 2] - imgData2[x + 2]) > sensitivity + || Math.abs(imgData1[x + 3] - imgData2[x + 3]) > sensitivity) { + imgData3[x] = 255; + imgData3[x + 1] = 0; + imgData3[x + 2] = 0; + imgData3[x + 3] = 255; + } + } + } + if (canvas_preview == undefined) + canvas_active().putImageData(img3, 0, 0); + else { + canvas_tmp.getContext("2d").rect(0, 0, WIDTH, HEIGHT); + canvas_tmp.getContext("2d").fillStyle = "#ffffff"; + canvas_tmp.getContext("2d").fill(); + canvas_tmp.getContext("2d").putImageData(img3, 0, 0); + canvas_preview.clearRect(0, 0, w, h); + + canvas_preview.save(); + canvas_preview.scale(w / WIDTH, h / HEIGHT); + canvas_preview.drawImage(canvas_tmp, 0, 0); + canvas_preview.restore(); + } + }; +} + +function canvas_active(base) { + for (var i in LAYER.layers) { + if (LAYER.layer_active == i) { + if (base == undefined) + return document.getElementById(LAYER.layers[i].name).getContext("2d"); + else + return document.getElementById(LAYER.layers[i].name); + } } + console.log('Error, can not find active layer.'); +} diff --git a/js/main.js b/js/main.js index d1721e9..7e2c8dd 100644 --- a/js/main.js +++ b/js/main.js @@ -1,143 +1,50 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, LAYER, DRAW, MENU, TOOLS */ -/* global canvas_main, canvas_back, COLOUR, ALPHA, canvas_grid */ +/* global HELPER, EVENTS, LAYER, POP, FILE, GUI, DRAW */ +/* global WIDTH, HEIGHT, canvas_main, canvas_back, canvas_grid, COLOR, ALPHA */ var MAIN = new MAIN_CLASS(); document.onload = MAIN.init(true); -function MAIN_CLASS(){ - this.grid = false; - this.TRANSPARENCY = true; - var LAYERS_ARCHIVE = [{}, {}, {}]; - var undo_level = 0; - - this.init = function(first_load){ - if(first_load===true){ - TOOLS.draw_helpers(); +/** + * main class - initialize app + * + * @author ViliusL + */ +function MAIN_CLASS() { + + this.init = function (first_load) { + if (first_load === true) { + GUI.draw_helpers(); POP.height_mini = Math.round(POP.width_mini * HEIGHT / WIDTH); - } - CON.autosize = true; - TOOLS.EXIF = false; - TOOLS.select_data = false; - for(i=1; i 0){ //first layer exists by default - Background - LAYER.layer_add(name); - //update attributes - LAYERS[LAYER.layer_active].name = name; - if(visible == 0) - LAYER.layer_visibility(LAYER.layer_active); - LAYERS[LAYER.layer_active].opacity = opacity; - } - }); - LAYER.layer_renew(); - - //add data - $('data', xml).each(function(i){ - var name = $(this).find("name").text(); - var data = $(this).find("data").text(); - - var img = new Image(); - img.src = data; - img.onload = function(){ - document.getElementById(name).getContext('2d').drawImage(img, 0, 0); - - LAYER.layer_renew(); - DRAW.zoom(); - }; - }); - }; - } + }; +} diff --git a/js/menu_actions.js b/js/menu_actions.js deleted file mode 100644 index b7607aa..0000000 --- a/js/menu_actions.js +++ /dev/null @@ -1,1878 +0,0 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, LAYER, DRAW, MENU, TOOLS */ -/* global WIDTH, HEIGHT, fx, canvas_active, canvas_front, canvas_preview, ImageFilters, VINTAGE, EXIF, SAVE_TYPES, CREDITS, VERSION, AUTHOR, EMAIL, COLOUR, SIFT */ - - -var MENU = new MENU_CLASS(); - -function MENU_CLASS(){ - this.last_menu = ''; - var PASTE_DATA = false; - var fx_filter = fx.canvas(); - - this.do_menu = function(name){ - $('#main_menu').find('.selected').click(); //close menu - MENU.last_menu = name; - - //exec - MENU[name](); - - DRAW.zoom(); - }; - - //===== File =========================================================== - - //new - this.file_new = function(){ - POP.add({name: "width", title: "Width:", value: WIDTH }); - POP.add({name: "height", title: "Height:", value: HEIGHT }); - POP.add({name: "transparency", title: "Transparent:", values: ['Yes', 'No']}); - POP.show('New file...', function(response){ - var width = parseInt(response.width); - var height = parseInt(response.height); - var transparency = response.transparency; - - if(response.transparency == 'Yes') - MAIN.TRANSPARENCY = true; - else - MAIN.TRANSPARENCY = false; - - ZOOM = 100; - WIDTH = width; - HEIGHT = height; - RATIO = WIDTH/HEIGHT; - MAIN.init(); - }); - }; - //open - this.file_open = function(){ - MENU.open(); - }; - //save - this.file_save = function(){ - MENU.save_dialog(); - }; - //print - this.file_print = function(){ - window.print(); - }; - - //===== Edit =========================================================== - - //undo - this.edit_undo = function(){ - MAIN.undo(); - }; - //cut - this.edit_cut = function(){ - MAIN.save_state(); - if(TOOLS.select_data != false){ - this.copy_to_clipboard(); - canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //copy - this.edit_copy = function(){ - if(TOOLS.select_data != false) - this.copy_to_clipboard(); - }; - //paste - this.edit_paste = function(){ - MAIN.save_state(); - this.paste('menu'); - }; - //select all - this.edit_select = function(){ - TOOLS.select_data = { - x: 0, - y: 0, - w: WIDTH, - h: HEIGHT - }; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - TOOLS.draw_selected_area(); - }; - //clear selection - this.edit_clear = function(){ - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - }; - - //===== Image ========================================================== - - //information - this.image_information = function(){ - var colors = TOOLS.unique_colors_count(canvas_active(true)); - colors = HELPER.number_format(colors, 0); - - POP.add({title: "Width:", value: WIDTH }); - POP.add({title: "Height:", value: HEIGHT }); - POP.add({title: "Unique colors:", value: colors }); - //exif - for(var i in TOOLS.EXIF) - POP.add({title: i+":", value: TOOLS.EXIF[i] }); - POP.show('Information', ''); - }; - //size - this.image_size = function(){ - POP.add({name: "width", title: "Width:", value: WIDTH }); - POP.add({name: "height", title: "Height:", value: HEIGHT }); - POP.show('Attributes', this.resize_custom); - }; - //trim - this.image_trim = function(){ - MAIN.save_state(); - DRAW.trim(); - }; - //crop - this.image_crop = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false){ - POP.add({html: 'Select area first' }); - POP.show('Error', ''); - } - else{ - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - } - - //resize - MAIN.save_state(); - WIDTH = TOOLS.select_data.w; - HEIGHT = TOOLS.select_data.h; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //resize - this.image_resize = function(){ - MENU.resize_box(); - }; - //rotate left - this.image_rotate_left = function(){ - MAIN.save_state(); - MENU.rotate_resize_doc(270, WIDTH, HEIGHT); - MENU.rotate_layer({angle: 270}, canvas_active(), WIDTH, HEIGHT); - }; - //rotate right - this.image_rotate_right = function(){ - MAIN.save_state(); - MENU.rotate_resize_doc(90, WIDTH, HEIGHT); - MENU.rotate_layer({angle: 90}, canvas_active(), WIDTH, HEIGHT); - }; - //rotate - this.image_rotate = function(){ - POP.add({name: "angle", title: "Enter angle (0-360):", value: 0, range: [0, 360] }); - POP.show('Rotate', function(response){ - MAIN.save_state(); - MENU.rotate_resize_doc(response.angle, WIDTH, HEIGHT); - MENU.rotate_layer(response, canvas_active(), WIDTH, HEIGHT); - }, - function(response, canvas_preview, w, h){ - MENU.rotate_layer(response, canvas_preview, w, h); - }); - }; - //vertical flip - this.image_vflip = function(){ - MAIN.save_state(); - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); - //flip - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().save(); - canvas_active().scale(-1, 1); - canvas_active().drawImage(tempCanvas, -WIDTH, 0); - canvas_active().restore(); - }; - //horizontal flip - this.image_hflip = function(){ - MAIN.save_state(); - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - tempCtx.drawImage(canvas_active(true), 0, 0, WIDTH, HEIGHT); - //flip - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().save(); - canvas_active().scale(1, -1); - canvas_active().drawImage(tempCanvas, 0, -HEIGHT); - canvas_active().restore(); - }; - //color corrections - this.image_colors = function(){ - POP.add({name: "param1", title: "Brightness:", value: "0", range: [-100, 100] }); - POP.add({name: "param2", title: "Contrast:", value: "0", range: [-100, 100] }); - POP.add({name: "param_red", title: "Red channel:", value: "0", range: [-255, 255] }); - POP.add({name: "param_green", title: "Green channel:", value: "0", range: [-255, 255] }); - POP.add({name: "param_blue", title: "Blue channel:", value: "0", range: [-255, 255] }); - POP.add({name: "param_h", title: "Hue:", value: "0", range: [-180, 180] }); - POP.add({name: "param_s", title: "Saturation:", value: "0", range: [-100, 100] }); - POP.add({name: "param_l", title: "Luminance:", value: "0", range: [-100, 100] }); - - POP.show('Brightness Contrast', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param_red = parseInt(user_response.param_red); - var param_green = parseInt(user_response.param_green); - var param_blue = parseInt(user_response.param_blue); - var param_h = parseInt(user_response.param_h); - var param_s = parseInt(user_response.param_s); - var param_l = parseInt(user_response.param_l); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - //Brightness/Contrast - var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); - //RGB corrections - var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); - //hue/saturation/luminance - var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param_red = parseInt(user_response.param_red); - var param_green = parseInt(user_response.param_green); - var param_blue = parseInt(user_response.param_blue); - var param_h = parseInt(user_response.param_h); - var param_s = parseInt(user_response.param_s); - var param_l = parseInt(user_response.param_l); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - //Brightness/Contrast - var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, param1, param2); //add effect - //RGB corrections - var filtered = ImageFilters.ColorTransformFilter(filtered, 1, 1, 1, 1, param_red, param_green, param_blue, 1); - //hue/saturation/luminance - var filtered = ImageFilters.HSLAdjustment(filtered, param_h, param_s, param_l); - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - //auto adjust colors - this.image_auto_adjust = function(){ - MAIN.save_state(); - DRAW.auto_adjust(canvas_active(), WIDTH, HEIGHT); - }; - //convert to grayscale - this.image_GrayScale = function(){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GrayScale(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }; - //enchance colors - this.image_decrease_colors = function(){ - POP.add({name: "param1", title: "Colors:", value: "10", range: [2, 100] }); - POP.add({name: "param2", title: "Dithering:", values: ["No", "Yes"], }); - POP.add({name: "param3", title: "Greyscale:", values: ["No", "Yes"], }); - POP.show('Decrease colors', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - if(user_response.param2 == 'Yes') param2 = true; else param2 = false; - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.decrease_colors(canvas_active(true), canvas_active(true), WIDTH, HEIGHT, param1, param2, param3); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - if(user_response.param2 == 'Yes') param2 = true; else param2 = false; - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.decrease_colors(canvas_active(true), document.getElementById("pop_post"), w, h, param1, param2, param3); - }); - }; - //negative - this.image_negative = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false) - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - else - var imageData = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - var pixels = imageData.data; - for (var i = 0; i < pixels.length; i += 4){ - pixels[i] = 255 - pixels[i]; // red - pixels[i+1] = 255 - pixels[i+1]; // green - pixels[i+2] = 255 - pixels[i+2]; // blue - } - //save - if(TOOLS.select_data == false) - canvas_active().putImageData(imageData, 0, 0); - else - canvas_active().putImageData(imageData, TOOLS.select_data.x, TOOLS.select_data.y); - }; - //grid - this.image_grid = function(){ - POP.add({name: "visible", title: "Visible:", value: "Yes", values: ["Yes", "No"] }); - POP.add({name: "gap_x", title: "Horizontal gap:", value: DRAW.grid_size[0] }); - POP.add({name: "gap_y", title: "Vertical gap:", value: DRAW.grid_size[1] }); - POP.show('Grid', function(response){ - if(response.visible == "Yes"){ - MAIN.grid = true; - gap_x = response.gap_x; - gap_y = response.gap_y; - DRAW.draw_grid(gap_x, gap_y); - } - else{ - MAIN.grid = false; - DRAW.draw_grid(); - } - }); - }; - //histogram - this.image_histogram = function(){ - TOOLS.histogram(); - }; - - //===== Layer ========================================================== - - //new layer - this.layer_new = function(){ - MENU.add_layer(); - }; - //dublicate - this.layer_dublicate = function(){ - MAIN.save_state(); - if(TOOLS.select_data != false){ - //selection - this.copy_to_clipboard(); - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - var tmp = LAYER.layer_active; - this.paste('menu'); - LAYER.layer_active = tmp; - LAYER.layer_renew(); - } - else{ - //copy all layer - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - //create - var new_name = 'Layer #'+(LAYERS.length+1); - LAYER.create_canvas(new_name); - LAYERS.push({name: new_name, visible: true}); - LAYER.layer_active = LAYERS.length-1; - canvas_active().drawImage(tmp_data, 0, 0); - LAYER.layer_renew(); - } - }; - //show / hide - this.layer_show_hide = function(){ - LAYER.layer_visibility(LAYER.layer_active); - }; - //crop - this.layer_crop = function(){ - MAIN.save_state(); - if(TOOLS.select_data == false){ - POP.add({html: 'Select area first'}); - POP.show('Error', ''); - } - else{ - var layer = LAYER.canvas_active(); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - }; - //delete - this.layer_delete = function(){ - MAIN.save_state(); - LAYER.layer_remove(LAYER.layer_active); - }; - //move up - this.layer_move_up = function(){ - MAIN.save_state(); - LAYER.move_layer('up'); - }; - //move down - this.layer_move_down = function(){ - MAIN.save_state(); - LAYER.move_layer('down'); - }; - //opacity - this.layer_opacity = function(){ - LAYER.set_alpha(); - }; - //trim - this.layer_trim = function(){ - MAIN.save_state(); - DRAW.trim(LAYERS[LAYER.layer_active].name, true); - }; - //resize - this.layer_resize = function(){ - MENU.resize_box(); - }; - //clear - this.layer_clear = function(){ - MAIN.save_state(); - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - }; - //show differences - this.layer_differences = function(){ - if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ - POP.add({html: 'This can not be last layer' }); - POP.show('Error', ''); - return false; - } - - POP.add({name: "param1", title: "Sensitivity:", value: "0", range: [0, 255] }); - POP.show('Differences', function(response){ - var param1 = parseInt(response.param1); - TOOLS.calc_differences(param1); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - TOOLS.calc_differences(param1, canvas_preview, w, h); - }); - }; - //merge - this.layer_merge_down = function(){ - var compositions = ["source-over", "source-in", "source-out", "source-atop", - "destination-over", "destination-in", "destination-out", "destination-atop", - "lighter", "darker", "copy", "xor"]; - - var blend_modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", - "color-dodge", "color-burn", "hard-light", "soft-light", "difference", - "exclusion", "hue", "saturation", "color", "luminosity"]; - - if(parseInt(LAYER.layer_active) + 1 >= LAYERS.length){ - POP.add({html: 'This can not be last layer.' }); - POP.show('Error', ''); - return false; - } - POP.add({name: "param1", title: "Composition:", values: compositions }); - POP.add({name: "param2", title: "Blend:", values: blend_modes }); - POP.add({name: "param3", title: "Mode:", values: ["Composite", "Blend"] }); - POP.show('Merge', function(response){ - var param1 = response.param1; - var param2 = response.param2; - var param3 = response.param3; - - MAIN.save_state(); - //copy - LAYER.layer_active++; - var tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0); - - //paste - LAYER.layer_active--; - LAYER.canvas_active().save(); - if(param3 == "Composite") - LAYER.canvas_active().globalCompositeOperation = param1; - else - LAYER.canvas_active().globalCompositeOperation = param2; - LAYER.canvas_active().drawImage(tmp_data, 0, 0); - LAYER.canvas_active().restore(); - - //remove next layer - LAYER.layer_remove(LAYER.layer_active+1); - LAYER.layer_renew(); - }, - function(response, canvas_preview, w, h){ - var param1 = response.param1; - var param2 = response.param2; - var param3 = response.param3; - - //copy - LAYER.layer_active++; - var tmp_data = document.createElement("canvas"); - tmp_data.width = w; - tmp_data.height = h; - tmp_data.getContext("2d").drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); - - //paste - LAYER.layer_active--; - canvas_preview.save(); - if(param3 == "Composite") - canvas_preview.globalCompositeOperation = param1; - else - canvas_preview.globalCompositeOperation = param2; - canvas_preview.drawImage(tmp_data, 0, 0); - canvas_preview.restore(); - }); - }; - //flatten all - this.layer_flatten = function(){ - MAIN.save_state(); - if(LAYERS.length == 1) return false; - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - for(var i=1; i < LAYERS.length; i++){ - //copy - LAYER.layer_active = i; - tmp_data.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - //paste - LAYER.layer_active = 0; - canvas_active().drawImage(tmp_data, 0, 0); - } - for(var i=LAYERS.length - 1; i > 0; i--){ - //delete layer - LAYER.layer_active = i; - LAYER.layer_remove(LAYER.layer_active); - } - LAYER.layer_renew(); - }; - - //===== Tools ========================================================== - - //sprites - this.tools_sprites = function(){ - POP.add({name: "param1", title: "Offset:", value: "50", values: ["0", "10", "50", "100"] }); - POP.show('Sprites', function(response){ - MAIN.save_state(); - var param1 = parseInt(response.param1); - TOOLS.generate_sprites(param1); - }); - }; - //show keypoints - this.tools_keypoints = function(){ - SIFT.generate_keypoints(canvas_active(true), true); - }; - //create panorama - this.tools_panorama = function(){ - SIFT.panorama(); - }; - //extract alpha channel - this.tools_color2alpha = function(){ - POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); - POP.show('Color to alpha', function(user_response){ - MAIN.save_state(); - var param1 = user_response.param1; - TOOLS.convert_color_to_alpha(canvas_active(), WIDTH, HEIGHT, param1); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = user_response.param1; - TOOLS.convert_color_to_alpha(canvas_preview, w, h, param1); - }); - }; - //expands colors - this.tools_color_zoom = function(){ - POP.add({name: "param1", title: "Zoom:", value: "2", range: [2, 20], }); - POP.add({name: "param2", title: "Center:", value: "128", range: [0, 255] }); - POP.show('Color Zoom', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - TOOLS.color_zoom(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - TOOLS.color_zoom(canvas_preview, w, h, param1, param2); - }); - }; - //recover alpha channel values - this.tools_restore_alpha = function(){ - POP.add({name: "param", title: "Level:", value: "128", range: [0, 255] }); - POP.show('Recover alpha', function(user_response){ - MAIN.save_state(); - var param = parseInt(user_response.param); - - TOOLS.recover_alpha(canvas_active(), WIDTH, HEIGHT, param); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param = parseInt(user_response.param); - - TOOLS.recover_alpha(canvas_preview, w, h, param); - }); - }; - //adds borders - this.tools_borders = function(){ - POP.add({name: "param1", title: "Color:", value: COLOUR, type: 'color' }); - POP.add({name: "param2", title: "Size:", value: "5", range: [1, 100] }); - POP.show('Borders', function(user_response){ - MAIN.save_state(); - var param1 = user_response.param1; - var param2 = parseInt(user_response.param2); - - MENU.add_layer(); - TOOLS.add_borders(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = user_response.param1; - var param2 = parseInt(user_response.param2); - - TOOLS.add_borders(canvas_preview, w, h, param1, param2); - }); - }; - - //===== Effects ======================================================== - - this.effects_bw = function(){ - var default_level = TOOLS.thresholding('otsu', canvas_active(), WIDTH, HEIGHT, true); - POP.add({name: "param1", title: "Level:", value: default_level, range: [0, 255] }); - POP.add({name: "param2", title: "Dithering:", values: ['No', 'Yes'], onchange: "MENU.effects_bw_onchange()" }); - POP.effects = true; - POP.show('Black and White', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = false; - if(user_response.param2 == 'Yes') - param2 = true; - - DRAW.effect_bw(canvas_active(), WIDTH, HEIGHT, param1, param2); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = false; - if(user_response.param2 == 'Yes') - param2 = true; - - DRAW.effect_bw(canvas_preview, w, h, param1, param2); - }); - }; - this.effects_bw_onchange = function(){ - var levels = document.getElementById("pop_data_param1"); - var dithering_no = document.getElementById("pop_data_param2_poptmp0"); - var dithering_yes = document.getElementById("pop_data_param2_poptmp1"); - - if(dithering_no.checked == true) levels.disabled = false; - else if(dithering_yes.checked == true) levels.disabled = true; - - POP.view(); - }; - this.effects_BoxBlur = function(){ - POP.add({name: "param1", title: "H Radius:", value: "3", range: [1, 20] }); - POP.add({name: "param2", title: "V Radius:", value: "3", range: [1, 20] }); - POP.add({name: "param3", title: "Quality:", value: "2", range: [1, 10] }); - POP.effects = true; - POP.show('Blur-Box', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.BoxBlur(imageData, param1, param2, param3); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_GaussianBlur = function(){ - POP.add({name: "param1", title: "Strength:", value: "2", range: [1, 4], step: 0.1 }); - POP.effects = true; - POP.show('Blur-Gaussian', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.GaussianBlur(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_StackBlur = function(){ - POP.add({name: "param1", title: "Radius:", value: "6", range: [1, 40] }); - POP.effects = true; - POP.show('Blur-Stack', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_zoomblur = function(){ - POP.add({name: "param1", title: "Strength:", value: "0.3", range: [0, 1], step: 0.01 }); - POP.add({name: "param2", title: "Center x:", value: round(WIDTH/2), range: [0, WIDTH] }); - POP.add({name: "param3", title: "Center y:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.effects = true; - POP.show('Blur-Zoom', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - //recalc param by size - param2 = param2 / WIDTH * w; - param3 = param3 / HEIGHT * h; - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - - //draw circle - canvas_preview.beginPath(); - canvas_preview.strokeStyle = "#ff0000"; - canvas_preview.lineWidth = 1; - canvas_preview.beginPath(); - canvas_preview.arc(param2, param3, 5, 0,Math.PI*2,true); - canvas_preview.stroke(); - }); - }; - this.effects_bulge_pinch = function(){ - POP.add({name: "param1", title: "Strength:", value: 1, range: [-1, 1], step: 0.1 }); - var default_value = Math.min(WIDTH, HEIGHT); - default_value = round(default_value/2); - POP.add({name: "param2", title: "Radius:", value: default_value, range: [0, 600] }); - POP.effects = true; - POP.show('Bulge/Pinch', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).bulgePinch(round(WIDTH/2), round(HEIGHT/2), param2, param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseInt(user_response.param2); - - //recalc param by size - param2 = param2 / Math.min(WIDTH, HEIGHT) * Math.min(w, h); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).bulgePinch(round(w/2), round(h/2), param2, param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_colorize = function(){ - var colorize_data; - - POP.add({name: "param1", title: "Power:", value: "3", range: [1, 10] }); - POP.add({name: "param2", title: "Limit:", value: "30", range: [10, 200] }); - POP.add({name: "param3", title: "Dithering:", values: ["Yes", "No"] }); - POP.preview_in_main = true; - POP.effects = true; - POP.show('Auto colorize', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - if(user_response.param3 == 'Yes') param3 = true; else param3 = false; - - DRAW.colorize(canvas_active(), WIDTH, HEIGHT, param1, param2, param3, colorize_data); - DRAW.zoom(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - }, - function(user_response){ - POP.preview_in_main = true; - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - if(user_response.param3 == 'Yes') - param3 = true; - else - param3 = false; - - colorize_data = DRAW.colorize(false, WIDTH, HEIGHT, param1, param2, param3, true); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage(canvas_active(true), 0, 0); - DRAW.colorize(canvas_front, WIDTH, HEIGHT, param1, param2, param3, colorize_data); - }); - }; - this.effects_denoise = function(){ - POP.add({name: "param1", title: "Exponent:", value: "20", range: [0, 50] }); - POP.effects = true; - POP.show('Denoise', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).denoise(param1).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).denoise(param1).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_Desaturate = function(){ - POP.effects = true; - POP.show('Desaturate', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Desaturate(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Desaturate(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Dither = function(){ - POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); - POP.effects = true; - POP.show('Dither', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Dither(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Dither(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_dot_screen = function(){ - POP.add({name: "param2", title: "Size:", value: "3", range: [1, 20] }); - POP.effects = true; - POP.show('Dot Screen', function(user_response){ - MAIN.save_state(); - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).dotScreen(round(WIDTH/2), round(HEIGHT/2), 0, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param2 = parseInt(user_response.param2); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).dotScreen(round(w/2), round(h/2), 0, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_Edge = function(){ - POP.effects = true; - POP.show('Edge', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Edge(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Edge(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Emboss = function(){ - POP.effects = true; - POP.show('Emboss', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Emboss(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Emboss(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Enrich = function(){ - POP.effects = true; - POP.show('Enrich', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Enrich(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Enrich(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Gamma = function(){ - POP.add({name: "param1", title: "Gamma:", value: "1", range: [0, 3], step: 0.1 }); - POP.effects = true; - POP.show('Gamma', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Gamma(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Gamma(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Grains = function(){ - POP.effects = true; - POP.add({name: "param1", title: "Level:", value: "30", range: [0, 50] }); - POP.show('Grains', function(user_response){ - var param1 = parseInt(user_response.param1); - MAIN.save_state(); - TOOLS.grains_effect(canvas_active(), WIDTH, HEIGHT, param1); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - TOOLS.grains_effect(canvas_preview, w, h, param1); - }); - }; - this.effects_heatmap = function(){ - POP.effects = true; - POP.show('Heatmap', function(user_response){ - MAIN.save_state(); - TOOLS.heatmap_effect(canvas_active(), WIDTH, HEIGHT); - }, - function(user_response, canvas_preview, w, h){ - TOOLS.heatmap_effect(canvas_preview, w, h); - }); - }; - this.effects_HSLAdjustment = function(){ - POP.add({name: "param1", title: "Hue:", value: "0", range: [-180, 180] }); - POP.add({name: "param2", title: "Saturation:", value: "0", range: [-100, 100] }); - POP.add({name: "param3", title: "Luminance:", value: "0", range: [-100, 100] }); - POP.effects = true; - POP.show('HSL Adjustment', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.HSLAdjustment(imageData, param1, param2, param3); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - //ages photo saving it to jpg many times - this.effects_jpg_vintage = function(){ - POP.add({name: "param1", title: "Quality:", value: 80, range: [1, 100] }); - POP.effects = true; - POP.show('JPG Compression', function(user_response){ - MAIN.save_state(); - var quality = parseInt(user_response.param1); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 80; - quality = quality/100; - var data = canvas_active(true).toDataURL('image/jpeg', quality); - var img = new Image; - img.onload = function(){ - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(img, 0, 0); - }; - img.src = data; - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var quality = parseInt(user_response.param1); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 80; - quality = quality/100; - var element = document.getElementById("pop_post"); - var data = element.toDataURL('image/jpeg', quality); - var img = new Image; - img.onload = function(){ - canvas_preview.clearRect(0, 0, w, h); - canvas_preview.drawImage(img, 0, 0); - }; - img.src = data; - }); - }; - this.effects_Mosaic = function(){ - POP.add({name: "param1", title: "Size:", value: "10", range: [1, 100] }); - POP.effects = true; - POP.show('Mosaic', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Mosaic(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Mosaic(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Oil = function(){ - POP.add({name: "param1", title: "Range:", value: "2", range: [1, 5] }); - POP.add({name: "param2", title: "Levels:", value: "32", range: [1, 256] }); - POP.effects = true; - POP.show('Oil', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Oil(imageData, param1, param2); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_perspective = function(){ - POP.add({name: "param1", title: "X1:", value: WIDTH/4, range: [0, WIDTH] }); - POP.add({name: "param2", title: "Y1:", value: HEIGHT/4, range: [0, HEIGHT] }); - POP.add({name: "param3", title: "X2:", value: WIDTH*3/4, range: [0, WIDTH] }); - POP.add({name: "param4", title: "Y2:", value: HEIGHT/4, range: [0, HEIGHT] }); - POP.add({name: "param5", title: "X3:", value: WIDTH*3/4, range: [0, WIDTH] }); - POP.add({name: "param6", title: "Y3:", value: HEIGHT*3/4, range: [0, HEIGHT] }); - POP.add({name: "param7", title: "X4:", value: WIDTH/4, range: [0, WIDTH] }); - POP.add({name: "param8", title: "Y4:", value: HEIGHT*3/4, range: [0, HEIGHT] }); - POP.preview_in_main = true; - POP.effects = true; - POP.show('Perspective', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - canvas_front.rect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "#ffffff"; - canvas_front.fill(); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).perspective([WIDTH/4, HEIGHT/4, WIDTH*3/4, HEIGHT/4, WIDTH*3/4, HEIGHT*3/4, WIDTH/4, HEIGHT*3/4], [param1,param2,param3,param4,param5,param6,param7,param8]).update(); //effect - canvas_front.drawImage(fx_filter, 0, 0); - - pers_square(param1, param2); - pers_square(param3, param4); - pers_square(param5, param6); - pers_square(param7, param8); - }); - - function pers_square(x, y){ - canvas_front.beginPath(); - canvas_front.rect(x-round(CON.sr_size/2), y-round(CON.sr_size/2), CON.sr_size, CON.sr_size); - canvas_front.fillStyle = "#0000c8"; - canvas_front.fill(); - } - }; - this.effects_Posterize = function(){ - POP.add({name: "param1", title: "Levels:", value: "8", range: [2, 32] }); - POP.effects = true; - POP.show('Posterize', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Posterize(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Posterize(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Sepia = function(){ - POP.effects = true; - POP.show('Sepia', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sepia(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Sepia(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Sharpen = function(){ - POP.add({name: "param1", title: "Factor:", value: "3", range: [1, 10], step: 0.1 }); - POP.effects = true; - POP.show('Sharpen', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - canvas_active().putImageData(filtered, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_Solarize = function(){ - POP.effects = true; - POP.show('Solarize', function(user_response){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Solarize(imageData); //add effect - canvas_active().putImageData(filtered, 0, 0); - }, - function(user_response, canvas_preview, w, h){ - var imageData = canvas_preview.getImageData(0, 0, w, h); - var filtered = ImageFilters.Solarize(imageData); //add effect - canvas_preview.putImageData(filtered, 0, 0); - }); - }; - this.effects_tilt_shift = function(){ - //extra - POP.add({name: "param7", title: "Saturation:", value: "5", range: [0, 100] }); - POP.add({name: "param8", title: "Sharpen:", value: "2", range: [1, 10] }); - //main - POP.add({name: "param1", title: "Blur Radius:", value: "15", range: [0, 50] }); - POP.add({name: "param2", title: "Gradient Radius:", value: "200", range: [0, 400] }); - //startX, startY, endX, endY - POP.add({name: "param3", title: "X start:", value: "0", range: [0, WIDTH] }); - POP.add({name: "param4", title: "Y start:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.add({name: "param5", title: "X end:", value: WIDTH, range: [0, WIDTH] }); - POP.add({name: "param6", title: "Y end:", value: round(HEIGHT/2), range: [0, HEIGHT] }); - POP.effects = true; - POP.show('Tilt Shift', function(user_response){ - MAIN.save_state(); - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - //main effect - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - - //saturation - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.HSLAdjustment(imageData, 0, param7, 0); - canvas_active().putImageData(filtered, 0, 0); - - //sharpen - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, param8); - canvas_active().putImageData(filtered, 0, 0); - - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseInt(user_response.param1); - var param2 = parseInt(user_response.param2); - var param3 = parseInt(user_response.param3); - var param4 = parseInt(user_response.param4); - var param5 = parseInt(user_response.param5); - var param6 = parseInt(user_response.param6); - var param7 = parseInt(user_response.param7); - var param8 = parseInt(user_response.param8); - - //recalc param by size - var param3 = param3 / WIDTH * w; - var param4 = param4 / HEIGHT * h; - var param5 = param5 / WIDTH * w; - var param6 = param6 / HEIGHT * h; - - //main effect - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - - //draw line - canvas_preview.beginPath(); - canvas_preview.strokeStyle = "#ff0000"; - canvas_preview.lineWidth = 1; - canvas_preview.moveTo(param3 + 0.5, param4 + 0.5); - canvas_preview.lineTo(param5 + 0.5, param6 + 0.5); - canvas_preview.stroke(); - }); - }; - this.effects_vignette = function(){ - POP.add({name: "param1", title: "Size:", value: "0.5", range: [0, 1], step: 0.01 }); - POP.add({name: "param2", title: "Amount:", value: "0.5", range: [0, 1], step: 0.01 }); - POP.effects = true; - POP.show('Vignette', function(user_response){ - MAIN.save_state(); - var param1 = parseFloat(user_response.param1); - var param2 = parseFloat(user_response.param2); - - var texture = fx_filter.texture(canvas_active(true)); - fx_filter.draw(texture).vignette(param1, param2).update(); //effect - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().drawImage(fx_filter, 0, 0); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var param1 = parseFloat(user_response.param1); - var param2 = parseFloat(user_response.param2); - - var texture = fx_filter.texture(canvas_preview.getImageData(0, 0, w, h)); - fx_filter.draw(texture).vignette(param1, param2).update(); //effect - canvas_preview.drawImage(fx_filter, 0, 0); - }); - }; - this.effects_vintage = function(){ - POP.add({name: "red_offset", title: "Color adjust:", value: "70", range: [0, 200] }); - POP.add({name: "contrast", title: "Contrast:", value: "15", range: [0, 50] }); - POP.add({name: "blur", title: "Blur:", value: "0", range: [0, 2], step: 0.1 }); - POP.add({name: "light_leak", title: "Light leak:", value: "90", range: [0, 150] }); - POP.add({name: "de_saturation", title: "Desaturation:", value: "40", range: [0, 100] }); - POP.add({name: "exposure", title: "Exposure level:", value: "80", range: [0, 150] }); - POP.add({name: "grains", title: "Grains level:", value: "20", range: [0, 50] }); - POP.add({name: "big_grains", title: "Big grains level:", value: "20", range: [0, 50] }); - POP.add({name: "vignette1", title: "Vignette size:", value: "0.3", range: [0, 0.5], step: 0.01 }); - POP.add({name: "vignette2", title: "Vignette amount:", value: "0.5", range: [0, 0.7], step: 0.01 }); - POP.add({name: "dust_level", title: "Dusts level:", value: "70", range: [0, 100] }); - POP.effects = true; - POP.show('Vintage', function(user_response){ - MAIN.save_state(); - var red_offset = parseInt(user_response.red_offset); - var contrast = parseInt(user_response.contrast); - var blur = parseFloat(user_response.blur); - var light_leak = parseInt(user_response.light_leak); - var de_saturation = parseInt(user_response.de_saturation); - var exposure = parseInt(user_response.exposure); - var grains = parseInt(user_response.grains); - var big_grains = parseInt(user_response.big_grains); - var vignette1 = parseFloat(user_response.vignette1); - var vignette2 = parseFloat(user_response.vignette2); - var dust_level = parseInt(user_response.dust_level); - - VINTAGE.adjust_color(canvas_active(), WIDTH, HEIGHT, red_offset); - VINTAGE.lower_contrast(canvas_active(), WIDTH, HEIGHT, contrast); - VINTAGE.blur(canvas_active(), WIDTH, HEIGHT, blur); - VINTAGE.light_leak(canvas_active(), WIDTH, HEIGHT, light_leak); - VINTAGE.chemicals(canvas_active(), WIDTH, HEIGHT, de_saturation); - VINTAGE.exposure(canvas_active(), WIDTH, HEIGHT, exposure); - VINTAGE.grains(canvas_active(), WIDTH, HEIGHT, grains); - VINTAGE.grains_big(canvas_active(), WIDTH, HEIGHT, big_grains); - VINTAGE.optics(canvas_active(), WIDTH, HEIGHT, vignette1, vignette2); - VINTAGE.dusts(canvas_active(), WIDTH, HEIGHT, dust_level); - DRAW.zoom(); - }, - function(user_response, canvas_preview, w, h){ - var red_offset = parseInt(user_response.red_offset); - var contrast = parseInt(user_response.contrast); - var blur = parseFloat(user_response.blur); - var light_leak = parseInt(user_response.light_leak); - var de_saturation = parseInt(user_response.de_saturation); - var exposure = parseInt(user_response.exposure); - var grains = parseInt(user_response.grains); - var big_grains = parseInt(user_response.big_grains); - var vignette1 = parseFloat(user_response.vignette1); - var vignette2 = parseFloat(user_response.vignette2); - var dust_level = parseInt(user_response.dust_level); - - VINTAGE.adjust_color(canvas_preview, w, h, red_offset); - VINTAGE.lower_contrast(canvas_preview, w, h, contrast); - VINTAGE.blur(canvas_preview, w, h, blur); - VINTAGE.light_leak(canvas_preview, w, h, light_leak); - VINTAGE.chemicals(canvas_preview, w, h, de_saturation); - VINTAGE.exposure(canvas_preview, w, h, exposure); - VINTAGE.grains(canvas_preview, w, h, grains); - VINTAGE.grains_big(canvas_preview, w, h, big_grains); - VINTAGE.optics(canvas_preview, w, h, vignette1, vignette2); - VINTAGE.dusts(canvas_preview, w, h, dust_level); - }); - }; - - //===== Help =========================================================== - - //shortcuts - this.help_shortcuts = function(){ - POP.add({title: "D", value: 'Dublicate' }); - POP.add({title: "Del", value: 'Delete selection' }); - POP.add({title: "F", value: 'Auto adjust colors' }); - POP.add({title: "G", value: 'Grid on/off' }); - POP.add({title: "L", value: 'Rotate left' }); - POP.add({title: "N", value: 'New layer' }); - POP.add({title: "O", value: 'Open file(s)' }); - POP.add({title: "R", value: 'Resize' }); - POP.add({title: "S", value: 'Save' }); - POP.add({title: "T", value: 'Trim' }); - POP.add({title: "-", value: 'Zoom out' }); - POP.add({title: "+", value: 'Zoom in' }); - POP.add({title: "CTRL + Z", value: 'Undo' }); - POP.add({title: "CTRL + A", value: 'Select all' }); - POP.add({title: "CTRL + V", value: 'Paste' }); - POP.add({title: "Arrow keys", value: 'Move active layer by 10px' }); - POP.add({title: "CTRL + Arrow keys", value: 'Move active layer by 50px' }); - POP.add({title: "SHIFT + Arrow keys",value: 'Move active layer by 1px' }); - POP.add({title: "Drag & Drop", value: 'Imports images/xml data' }); - POP.show('Keyboard Shortcuts', ''); - }; - //credits - this.help_credits = function(){ - for(var i in CREDITS){ - if(CREDITS[i].link != undefined) - POP.add({title: CREDITS[i].title, html: ''+CREDITS[i].name+'' }); - else - POP.add({title: CREDITS[i].title, html: CREDITS[i].name }); - } - POP.show('Credits', ''); - }; - //about - this.help_about = function(){ - POP.add({title: "Name:", value: "miniPaint "+VERSION }); - POP.add({title: "Description:", value: 'online image editor' }); - POP.add({title: "Author:", value: AUTHOR }); - POP.add({title: "Email:", html: ''+EMAIL+'' }); - POP.add({title: "Source:", html: 'github.com/viliusle/miniPaint' }); - POP.show('About', ''); - }; - - //====================================================================== - - this.save_dialog = function(e){ - //find default format - var save_default = SAVE_TYPES[0]; //png - if(HELPER.getCookie('save_default') == 'jpg') - save_default = SAVE_TYPES[1]; //jpg - - POP.add({name: "name", title: "File name:", value: [SAVE_NAME] }); - POP.add({name: "type", title: "Save as type:", values: SAVE_TYPES, value: save_default }); - POP.add({name: "quality", title: "Quality (1-100):", value: 90, range: [1, 100] }); - POP.add({name: "layers", title: "Save layers:", values: ['All', 'Selected'] }); - POP.add({name: "trim", title: "Trim:", values: ['No', 'Yes'] }); - POP.show('Save as ...', MENU.save); - document.getElementById("pop_data_name").select(); - if(e != undefined) - e.preventDefault(); - }; - this.add_layer = function(){ - MAIN.save_state(); - - var tmp = false; - var last_layer = LAYER.layer_active; - if(TOOLS.select_data != false){ - tmp = document.createElement("canvas"); - tmp.width = TOOLS.select_data.w; - tmp.height = TOOLS.select_data.h; - tmp.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - } - - //crete layer - LAYER.layer_add(); - - if(TOOLS.select_data != false){ - //copy user selected data to new layer - canvas_active().drawImage(tmp, 0, 0); - LAYER.layer_renew(); - - //clear selection - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - - //switch back to old layer - LAYER.layer_active = last_layer; - LAYER.layer_renew(); - } - - }; - this.resize_custom = function(user_response){ - MAIN.save_state(); - CON.autosize = false; - if(user_response.width != WIDTH || user_response.height != HEIGHT){ - WIDTH = user_response.width; - HEIGHT = user_response.height; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - }; - //prepare rotation - increase doc dimensions if needed - this.rotate_resize_doc = function(angle, w, h){ - var o = angle*Math.PI/180; - var new_x = w * Math.abs(Math.cos(o)) + h * Math.abs(Math.sin(o)); - var new_y = w * Math.abs(Math.sin(o)) + h * Math.abs(Math.cos(o)); - new_x = Math.ceil(round(new_x*1000)/1000); - new_y = Math.ceil(round(new_y*1000)/1000); - - if(WIDTH != new_x || HEIGHT != new_y){ - MAIN.save_state(); - var dx = 0; - var dy = 0; - if(new_x > WIDTH){ - dx = Math.ceil(new_x - WIDTH)/2; - WIDTH = new_x; - } - if(new_y > HEIGHT){ - dy = Math.ceil(new_y - HEIGHT)/2; - HEIGHT = new_y; - } - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(0, 0, WIDTH, HEIGHT); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, dx, dy); - } - } - }; - //rotate layer - this.rotate_layer = function(user_response, canvas, w, h){ - var TO_RADIANS = Math.PI/180; - angle = user_response.angle; - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = w; - tempCanvas.height = h; - var imageData = canvas.getImageData(0, 0, w, h); - tempCtx.putImageData(imageData, 0, 0); - - //rotate - canvas.clearRect(0, 0, w, h); - canvas.save(); - canvas.translate(round(w/2), round(h/2)); - canvas.rotate(angle * TO_RADIANS); - canvas.drawImage(tempCanvas, -round(w/2), -round(h/2)); - canvas.restore(); - if(w == WIDTH) //if main canvas - DRAW.zoom(); - }; - this.copy_to_clipboard = function(){ - PASTE_DATA = false; - PASTE_DATA = document.createElement("canvas"); - PASTE_DATA.width = TOOLS.select_data.w; - PASTE_DATA.height = TOOLS.select_data.h; - PASTE_DATA.getContext("2d").drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - }; - this.paste = function(type){ - if(PASTE_DATA == false){ - if(type == 'menu'){ - POP.add({title: "Error:", value: 'Empty data' }); - POP.add({title: "Notice:", value: 'To paste from clipboard, use Ctrl-V.' }); - POP.show('Notice', ''); - } - return false; - } - - tmp = new Array(); - var new_name = 'Layer #'+(LAYERS.length+1); - LAYER.create_canvas(new_name); - LAYERS.push({name: new_name, visible: true}); - LAYER.layer_active = LAYERS.length-1; - canvas_active().drawImage(PASTE_DATA, 0, 0); - LAYER.layer_renew(); - }; - this.resize_box = function(){ - POP.add({name: "width", title: "Width (pixels):", value: '', placeholder:WIDTH }); - POP.add({name: "height",title: "Height (pixels):", value: '', placeholder:HEIGHT }); - POP.add({name: "width_percent", title: "Width (%):", value: '', placeholder:100 }); - POP.add({name: "height_percent",title: "Height (%):", value: '', placeholder:100 }); - POP.add({name: "mode", title: "Mode:", value: "Resample - Hermite", values: ["Resize", "Resample - Hermite"]}); - POP.add({name: "preblur",title: "Pre-Blur:", values: ["Yes", "No"], value: "No" }); - POP.add({name: "sharpen",title: "Apply sharpen:", values: ["Yes", "No"], value: "No" }); - POP.show('Resize', MENU.resize_layer); - }; - this.resize_layer = function(user_response){ - MAIN.save_state(); - var width = parseInt(user_response.width); - var height = parseInt(user_response.height); - var width_100 = parseInt(user_response.width_percent); - var height_100 = parseInt(user_response.height_percent); - var preblur = user_response.preblur; - var sharpen = user_response.sharpen; - if( isNaN(width) && isNaN(height) && isNaN(width_100) && isNaN(height_100) ) return false; - if(width == WIDTH && height == HEIGHT) return false; - - //if dimension with percent provided - if( isNaN(width) && isNaN(height) ){ - if(isNaN(width_100) == false){ - width = Math.round(WIDTH * width_100 / 100); - } - if(isNaN(height_100) == false){ - height = Math.round(HEIGHT * height_100 / 100); - } - - } - - //if only 1 dimension was provided - if(isNaN(width) || isNaN(height)){ - if(isNaN(width)) - width = Math.round(height * RATIO); - if(isNaN(height)) - height = Math.round(width / RATIO); - } - - //if increasing size - use simple way - its good enough - if(width > WIDTH || height > HEIGHT) - user_response.mode = "Resize"; - - //anti-artifacting? - if(preblur == 'Yes'){ - var ratio_w = WIDTH / width; - var ratio_h = HEIGHT / height; - var ratio_avg = Math.max(ratio_w, ratio_h); - var power = ratio_avg * 0.3; - if(power > 0.6){ - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.GaussianBlur(imageData, power); //add effect - canvas_active().putImageData(filtered, 0, 0); - } - } - if(width > WIDTH || height > HEIGHT) - user_response.mode = "Resize"; - //Hermite - good and fast - if(user_response.mode == "Resample - Hermite"){ - DRAW.resample_hermite(canvas_active(true), WIDTH, HEIGHT, width, height); - if(MENU.last_menu != 'layer_resize'){ - WIDTH = width; - HEIGHT = height; - if(WIDTH<1) WIDTH = 1; - if(HEIGHT<1) HEIGHT = 1; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - DRAW.zoom(); - } - //simple resize - if(user_response.mode == "Resize"){ - //simple resize - FAST - tmp_data = document.createElement("canvas"); - tmp_data.width = WIDTH; - tmp_data.height = HEIGHT; - tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); - - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - if(width <= WIDTH){ - canvas_active().drawImage(tmp_data, 0, 0, width, height); - } - else{ - WIDTH = round(width); - HEIGHT = round(height); - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - canvas_active().drawImage(tmp_data, 0, 0, width, height); - } - if(MENU.last_menu != 'layer_resize') - DRAW.trim(); - DRAW.zoom(); - } - //sharpen after? - if(sharpen == 'Yes'){ - var imageData = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var filtered = ImageFilters.Sharpen(imageData, 1); //add effect - canvas_active().putImageData(filtered, 0, 0); - } - }; - this.save = function(user_response){ - fname = user_response.name; - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = WIDTH; - tempCanvas.height = HEIGHT; - - //save choosen type - var save_default = SAVE_TYPES[0]; //png - if(HELPER.getCookie('save_default') == 'jpg') - save_default = SAVE_TYPES[1]; //jpg - if(user_response.type != save_default && user_response.type == SAVE_TYPES[0]) - HELPER.setCookie('save_default', 'png' , 30); - else if(user_response.type != save_default && user_response.type == SAVE_TYPES[1]) - HELPER.setCookie('save_default', 'jpg' , 30); - - if(MAIN.TRANSPARENCY == false){ - tempCtx.beginPath(); - tempCtx.rect(0, 0, WIDTH, HEIGHT); - tempCtx.fillStyle = "#ffffff"; - tempCtx.fill(); - } - - //take data - for(var i in LAYERS){ - if(LAYERS[i].visible == false) continue; - if(user_response.layers == 'Selected' && user_response.type != 'XML' && i != LAYER.layer_active) continue; - tempCtx.drawImage(document.getElementById(LAYERS[i].name), 0, 0, WIDTH, HEIGHT); - } - - if(user_response.trim == 'Yes' && user_response.type != 'XML'){ - //trim - var trim_info = DRAW.trim_info(tempCanvas); - tmp_data = tempCtx.getImageData(0, 0, WIDTH, HEIGHT); - tempCtx.clearRect(0, 0, WIDTH, HEIGHT); - tempCanvas.width = WIDTH - trim_info.right - trim_info.left; - tempCanvas.height = HEIGHT - trim_info.bottom - trim_info.top; - tempCtx.putImageData(tmp_data, -trim_info.left, -trim_info.top); - } - - //detect type - var parts = user_response.type.split(" "); - user_response.type = parts[0]; - - //auto detect? - if(HELPER.strpos(fname, '.png') !== false) user_response.type = 'PNG'; - else if(HELPER.strpos(fname, '.jpg') !== false) user_response.type = 'JPG'; - else if(HELPER.strpos(fname, '.xml') !== false) user_response.type = 'XML'; - else if(HELPER.strpos(fname, '.bmp') !== false) user_response.type = 'BMP'; - else if(HELPER.strpos(fname, '.webp') !== false) user_response.type = 'WEBP'; - - //prepare data - if(user_response.type == 'PNG'){ - //png - default format - var data = tempCanvas.toDataURL("image/png"); - var data_header = "image/png"; - if(HELPER.strpos(fname, '.png')==false) - fname = fname+".png"; - } - else if(user_response.type == 'JPG'){ - //jpg - var quality = parseInt(user_response.quality); - if(quality>100 || quality < 1 || isNaN(quality)==true) - quality = 90; - quality = quality/100; - var data = tempCanvas.toDataURL('image/jpeg', quality); - var data_header = "image/jpeg"; - if(HELPER.strpos(fname, '.jpg')==false) - fname = fname+".jpg"; - } - else if(user_response.type == 'BMP'){ - //bmp - lets hope user really needs this - chrome do not support it - var data = tempCanvas.toDataURL("image/bmp"); - var data_header = "image/bmp"; - if(HELPER.strpos(fname, '.bmp')==false) - fname = fname+".bmp"; - } - else if(user_response.type == 'WEBP'){ - //WEBP - new format for chrome only - if(HELPER.strpos(fname, '.webp')==false) - fname = fname+".webp"; - var data_header = "image/webp"; - var data = tempCanvas.toDataURL("image/webp"); - } - else if(user_response.type == 'XML'){ - //xml - full data with layers - if(HELPER.strpos(fname, '.xml')==false) - fname = fname+".xml"; - var data_header = "text/plain"; - - var XML = ''; - //basic info - XML += "\n"; - XML += " \n"; - XML += " "+WIDTH+"\n"; - XML += " "+HEIGHT+"\n"; - XML += " \n"; - //add layers info - XML += " \n"; - for(var i in LAYERS){ - XML += " \n"; - XML += " "+LAYERS[i].name+"\n"; - if(LAYERS[i].visible == true) - XML += " 1\n"; - else - XML += " 0\n"; - XML += " "+LAYERS[i].opacity+"\n"; - XML += " \n"; - } - XML += " \n"; - //add data ??? - XML += " \n"; - for(var i in LAYERS){ - var data_tmp = document.getElementById(LAYERS[i].name).toDataURL("image/png"); - XML += " \n"; - XML += " "+LAYERS[i].name+"\n"; - XML += " "+data_tmp+"\n"; - XML += " \n"; - } - XML += " \n"; - XML += "\n"; - - var bb = new Blob([XML], {type: data_header}); - var data = window.URL.createObjectURL(bb); - } - else - return false; - - //check support - var actualType = data.replace(/^data:([^;]*).*/, '$1'); - if(data_header != actualType && data_header != "text/plain"){ - //error - no support - POP.add({title: "Error:", value: "Your browser do not support "+user_response.type }); - POP.show('Sorry', ''); - return false; - } - - //push data to user - window.URL = window.webkitURL || window.URL; - var a = document.createElement('a'); - if (typeof a.download != "undefined"){ - //a.download is supported - a.setAttribute("id", "save_data"); - a.download = fname; - a.href = data; - a.textContent = 'Downloading...'; - document.getElementById("tmp").appendChild(a); - - //release memory - a.onclick = function(e){ - MENU.save_cleanup(this); - }; - //force click - document.querySelector('#save_data').click(); - } - else{ - //poor browser or poor user - not sure here. No support - if(user_response.type == 'PNG') - window.open(data); - else if(user_response.type == 'JPG') - window.open(data, quality); - } - }; - this.save_cleanup = function(a){ - a.textContent = 'Downloaded'; - setTimeout(function(){ - a.href = ''; - var element = document.getElementById("save_data"); - element.parentNode.removeChild(element); - }, 1500); - }; - this.open = function(){ - document.getElementById("tmp").innerHTML = ''; - var a = document.createElement('input'); - a.setAttribute("id", "file_open"); - a.type = 'file'; - a.multiple = 'multiple '; - document.getElementById("tmp").appendChild(a); - document.getElementById('file_open').addEventListener('change', MENU.open_handler, false); - - //force click - document.querySelector('#file_open').click(); - }; - this.open_handler = function(e){ - var files = e.target.files; - for (var i = 0, f; i < files.length; i++){ - f = files[i]; - if(!f.type.match('image.*') && f.type != 'text/xml') continue; - if(files.length == 1) - SAVE_NAME = f.name.split('.')[f.name.split('.').length - 2]; - - var FR = new FileReader(); - FR.file = e.target.files[i]; - - FR.onload = function(event){ - if(this.file.type != 'text/xml'){ - //image - LAYER.layer_add(this.file.name, event.target.result, this.file.type); - EXIF.getData(this.file, TOOLS.save_EXIF); - } - else{ - //xml - var responce = MAIN.load_xml(event.target.result); - if(responce === true) - return false; - } - }; - if(f.type == "text/plain") - FR.readAsText(f); - else if(f.type == "text/xml") - FR.readAsText(f); - else - FR.readAsDataURL(f); - } - }; - } diff --git a/js/popup.js b/js/popup.js deleted file mode 100644 index 0187db5..0000000 --- a/js/popup.js +++ /dev/null @@ -1,430 +0,0 @@ -/* -Usage: -var POP = new popup(); -POP.add({name: "param1", title: "Value1:" }); -POP.add(...); -POP.show('title', main_handler, 'preview_handler', 'onload_handler'); - -POP.add() parameters: - name type example - --------------------------------------------------------------- - name string 'parameter1' - title string 'Enter value:' - type string 'select', 'textarea', 'color' - value string '314' - values array fo strings ['One', 'Two', 'Three'] - range numbers interval [0, 255] - step int/float 1 - placeholder text 'Enter number here' - html html text 'bold' - function function 'cutom_function' - onchange function 'CLASS.onchange_function' -*/ - -/* global HELPER, MENU, DRAW, POP, LAYER */ -/* global FILTERS_LIST, LAYERS, canvas_front, WIDTH, HEIGHT */ - -var POP = new popup(); - -function popup(){ - this.active = false; - this.handler = ''; - this.preview = false; - this.onload = false; - this.width_mini = 195; - this.height_mini = 195; - this.preview_in_main = false; - this.effects = false; - this.id = 0; - var parameters = []; - var layer_active_small = document.createElement("canvas"); - var layer_active_small_ctx = layer_active_small.getContext("2d"); - - this.constructor = new function(){ - var dim = HELPER.get_dimensions(); - popup = document.getElementById('popup'); - popup.style.top = 150+'px'; - popup.style.left = Math.round(dim[0]/2)+'px'; - }; - //add parameter - this.add = function(object){ - parameters.push(object); - }; - //show popup window - this.show = function(title, handler, preview_handler, onload_handler){ - POP.id = HELPER.getRandomInt(0, 999999999); - if(this.active == true){ - this.hide(); - return false; - } - this.active = true; - this.handler = handler; - if(preview_handler != undefined) - this.preview = preview_handler; - if(onload_handler != undefined) - this.onload = onload_handler; - var html = ''; - - var dim = HELPER.get_dimensions(); - popup = document.getElementById('popup'); - popup.style.top = 150+'px'; - popup.style.left = Math.round(dim[0]/2)+'px'; - - if(this.effects == true){ - var index; - for(var i=0; i FILTERS_LIST.length-1){ - next_index = FILTERS_LIST.length-1; - } - html += ''; - html += ' '; - html += ''; - html += ' '; - html += ''; - } - html += ''; - - //preview area - if(this.preview !== false && this.preview_in_main == false){ - html += '
    '; - html += ''; - html += ''; - html += '
    '; - } - - //settings - html += ''; - for(var i in parameters){ - var parameter = parameters[i]; - html += ''; - if(title != 'Error') - html += ''; - if(parameter.name != undefined){ - if(parameter.values != undefined){ - var onchange = ''; - if(parameter.onchange != undefined) - onchange = ' onchange="'+parameter.onchange+';" '; - if(parameter.values.length > 10 || parameter.type == 'select'){ - //drop down - if(onchange == '' && preview_handler != undefined) - onchange = ' onchange="POP.view();" '; - html += ''; - } - else{ - //radio - html += ''; - } - } - else if(parameter.value != undefined){ - //input, range, textarea, color - var step = 1; - if(parameter.step != undefined) - step = parameter.step; - if(parameter.range != undefined){ - //range - var preview_code = ''; - if(this.preview !== false) - preview_code = 'POP.view();'; - html += ''; - html += ''; - } - else if(parameter.type == 'color'){ - //color - html += ''; - } - else{ - //input or textarea - if(parameter.placeholder == undefined) - parameter.placeholder = ''; - if(parameter.type == 'textarea') - html += ''; - else - html += ''; - } - } - } - else if(parameter.function != undefined){ - //custom function - if(typeof parameter.function == 'string') - var result = window[parameter.function](); - else - var result = parameter.function(); - html += ''; - } - else if(parameter.html != undefined){ - //html - html += ''; - } - else{ - //locked fields - str = ""+parameter.value; - var id_tmp = parameter.title.toLowerCase().replace(/[^\w]+/g,'').replace(/ +/g,'-'); - id_tmp = id_tmp.substring(0, 10); - if(str.length < 40) - html += ''; - else - html += ''; - } - html += ''; - } - html += '
    '+parameter.title+''; - if(parameter.values.length > 2) - html += '
    '; - var k = 0; - for(var j in parameter.values){ - var ch = ''; - if(parameter.value == parameter.values[j]) - ch = 'checked="checked"'; - if(parameter.value == undefined && k == 0) - ch = 'checked="checked"'; - if(onchange == '' && preview_handler != undefined) - onchange = ' onchange="POP.view();" '; - html += ''; - html += ''; - if(parameter.values.length > 2) - html += '
    '; - k++; - } - if(parameter.values.length > 2) - html += '
    '; - html += '    		'+parameter.value+''+result+''+parameter.html+'
    '; - - //action buttons - html += '
    '; - html += ''; - html += ''; - if(this.preview_in_main !== false) - html += ''; - html += '
    '; - - document.getElementById("popup").innerHTML = html; - document.getElementById("popup").style.display="block"; - if(parameters.length > 15) - document.getElementById("popup").style.overflowY="scroll"; - else - document.getElementById("popup").style.overflowY='hidden'; - - //onload - if(this.onload != ''){ - if(typeof this.onload == "string") - window[this.onload](); - else - this.onload(); - } - - //some events for effects browser - if(this.effects == true){ - document.getElementById('previous_filter').disabled = false; - document.getElementById('next_filter').disabled = false; - if(index == 0){ - document.getElementById('previous_filter').disabled = true; - } - if(index == FILTERS_LIST.length-1){ - document.getElementById('next_filter').disabled = true; - } - //previous - document.getElementById('previous_filter').addEventListener('click', function(event){ - POP.hide(); - MENU.last_menu = FILTERS_LIST[prev_index].name; - MENU.do_menu([FILTERS_LIST[prev_index].name]); - }); - //next - document.getElementById('next_filter').addEventListener('click', function(event){ - POP.hide(); - MENU.last_menu = FILTERS_LIST[next_index].name; - MENU.do_menu([FILTERS_LIST[next_index].name]); - }); - //onchange - var effect_browser = document.getElementById('effect_browser'); - effect_browser.addEventListener('change', function(event){ - var value = effect_browser.options[effect_browser.selectedIndex].value; - POP.hide(); - MENU.last_menu = FILTERS_LIST[value].name; - MENU.do_menu([FILTERS_LIST[value].name]); - }); - } - - //load preview? - if(this.preview !== false && this.preview_in_main == false){ - //original - var pop_pre = document.getElementById("pop_pre").getContext("2d"); - pop_pre.rect(0, 0, POP.width_mini, POP.height_mini); - pop_pre.fillStyle = "#ffffff"; - pop_pre.fill(); - DRAW.draw_background(pop_pre, POP.width_mini, POP.height_mini, 5); - pop_pre.drawImage(document.getElementById(LAYERS[LAYER.layer_active].name), 0, 0, POP.width_mini, POP.height_mini); - - //copy - pop_post = document.getElementById("pop_post").getContext("2d"); - pop_post.rect(0, 0, POP.width_mini, POP.height_mini); - pop_post.fillStyle = "#ffffff"; - pop_post.fill(); - DRAW.draw_background(pop_post, POP.width_mini, POP.height_mini, 5); - pop_post.drawImage(document.getElementById(LAYERS[LAYER.layer_active].name), 0, 0, POP.width_mini, POP.height_mini); - - //prepare temp canvas - layer_active_small.width = POP.width_mini; - layer_active_small.height = POP.height_mini; - layer_active_small_ctx.drawImage(document.getElementById(LAYERS[LAYER.layer_active].name), 0, 0, POP.width_mini, POP.height_mini); - POP.view(); - } - }; - //hide popup - this.hide = function(){ - document.getElementById('popup').style.display='none'; - parameters = []; - this.handler = ''; - this.active = false; - this.preview = false; - this.onload = false; - this.preview_in_main = false; - this.effects = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - }; - //renders preview. If input=range supported, is called on every param update - must be fast... - this.view = function(){ - if(this.preview !== false){ - if(this.preview_in_main == false){ - //reset mini view - pop_post.clearRect(0, 0, POP.width_mini, POP.height_mini); - pop_post.drawImage(layer_active_small, 0, 0); - } - - //prepare - var response = {}; - inputs = document.getElementsByTagName('input'); - for (i = 0; i parameter.range[1]) - field.value = parameter.range[1]; //more then max - } - } - }; - } diff --git a/js/settings.js b/js/settings.js deleted file mode 100644 index fb48b02..0000000 --- a/js/settings.js +++ /dev/null @@ -1,90 +0,0 @@ -//canvas layers -var canvas_back = document.getElementById("canvas_back").getContext("2d"); //layer for grid/transparency -var canvas_main = document.getElementById("Background").getContext("2d"); //background -//new layers insert convas here -var canvas_front = document.getElementById("canvas_front").getContext("2d"); //tmp layer -var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //grid layer -var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview - -//settings -var AUTHOR = 'ViliusL'; -var EMAIL = 'www.viliusl@gmail.com'; -var VERSION = '2.4'; -var WIDTH = 800; //canvas midth -var HEIGHT = 600; //canvas height -var RATIO = WIDTH/HEIGHT; //width & height ratio -var LAYERS = []; //layers data -var ACTION = 'select_tool'; ///default action -var COLOUR = '#0000ff'; //current color -var ZOOM = 100; //zoom level 10 - infinity -var ALPHA = 255; //default alpha -var SAVE_NAME = 'example'; //default save name - -var SAVE_TYPES = [ - "PNG - Portable Network Graphics", //default - "JPG - JPG/JPEG Format", //autodetect on photos where png useless? - "XML - Full layers data", //aka PSD - "BMP - Windows Bitmap", //firefox only, useless? - "WEBP - Weppy File Format", //chrome only - ]; - -var ACTION_DATA = [ - {name: 'select_tool', title: 'Select object tool', icon: ['all.png', 0+7, 2], attributes: {} }, - {name: 'select_square', title: 'Select area tool', icon: ['all.png', -50+4, 5], attributes: {} }, - {name: 'magic_wand', title: 'Magic Wand Tool', icon: ['all.png', -150+1, -50+2], attributes: {sensitivity: 40, anti_aliasing: true} }, - {name: 'erase', title: 'Erase', icon: ['all.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} }, - {name: 'fill', title: 'Fill', icon: ['all.png', -150+3, 3], attributes: {sensitivity: 0, anti_aliasing: false} }, - {name: 'pick_color', title: 'Pick Color', icon: ['all.png', -200+3, 3], attributes: {} }, - {name: 'pencil', title: 'Pencil', icon: ['all.png', -250+3, 3], attributes: {} }, - {name: 'line', title: 'Draw line', icon: ['all.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } }, - {name: 'letters', title: 'Draw letters', icon: ['all.png', -350+3, 4], attributes: {} }, - {name: 'draw_square', title: 'Draw rectangle', icon: ['all.png', -400+3, 5], attributes: {fill: false, square: false, round: 0} }, - {name: 'draw_circle', title: 'Draw circle', icon: ['all.png', -450+3, 5], attributes: {fill: false, circle: false} }, - {name: 'brush', title: 'Brush', icon: ['all.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', }, - {name: 'blur_tool', title: 'Blur tool', icon: ['all.png', -250+5, -50+2], attributes: {size: 30, strength: 1} }, - {name: 'sharpen_tool', title: 'Sharpen tool', icon: ['all.png', -300+5, -50+2], attributes: {size: 30, strength: 0.5} }, - {name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['all.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} }, - {name: 'desaturate_tool', title: 'Desaturate', icon: ['all.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} }, - {name: 'clone_tool', title: 'Clone tool', icon: ['all.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} }, - {name: 'gradient_tool', title: 'Gradient', icon: ['all.png', -400+3, -50+4], attributes: {radial: false, power: 50} }, - {name: 'crop_tool', title: 'Crop', icon: ['all.png', -450+2, -50+2], attributes: { } }, - ]; - -var CREDITS = [ - {title: 'Brush styles', name: 'Harmony', link: 'http://ricardocabello.com/blog/post/689' }, - {title: 'Effects library', name: 'glfx.js', link: 'http://evanw.github.io/glfx.js/' }, - {title: 'EXIF', name: 'exif.js', link: 'https://github.com/jseidelin/exif-js' }, - {title: 'Image filters', name: 'ImageFilters.js',link: 'https://github.com/arahaya/ImageFilters.js' }, - {title: 'KD-tree', name: 'kdtree.js', link: 'http://jsdo.it/peko/wKvk' }, - ]; - -var FILTERS_LIST = [ - {title: 'Black and White', name: 'effects_bw' }, - {title: 'Blur-Box', name: 'effects_BoxBlur' }, - {title: 'Blur-Gaussian', name: 'effects_GaussianBlur' }, - {title: 'Blur-Stack', name: 'effects_StackBlur' }, - {title: 'Blur-Zoom', name: 'effects_zoomblur' }, - {title: 'Bulge/Pinch', name: 'effects_bulge_pinch' }, - {title: 'Colorize', name: 'effects_colorize' }, - {title: 'Denoise', name: 'effects_denoise' }, - {title: 'Desaturate', name: 'effects_Desaturate' }, - {title: 'Dither', name: 'effects_Dither' }, - {title: 'Dot Screen', name: 'effects_dot_screen' }, - {title: 'Edge', name: 'effects_Edge' }, - {title: 'Emboss', name: 'effects_Emboss' }, - {title: 'Enrich', name: 'effects_Enrich' }, - {title: 'Gamma', name: 'effects_Gamma' }, - {title: 'Grains', name: 'effects_Grains' }, - {title: 'Heatmap', name: 'effects_heatmap' }, - {title: 'HSL Adjustment', name: 'effects_HSLAdjustment' }, - {title: 'JPG Compression', name: 'effects_jpg_vintage' }, - {title: 'Mosaic', name: 'effects_Mosaic' }, - {title: 'Oil', name: 'effects_Oil' }, - {title: 'Posterize', name: 'effects_Posterize' }, - {title: 'Sepia', name: 'effects_Sepia' }, - {title: 'Sharpen', name: 'effects_Sharpen' }, - {title: 'Solarize', name: 'effects_Solarize' }, - {title: 'Tilt Shift', name: 'effects_tilt_shift' }, - {title: 'Vignette', name: 'effects_vignette' }, - {title: 'Vintage', name: 'effects_vintage' }, - ]; diff --git a/js/tools.js b/js/tools.js index d8ecd40..61eac99 100644 --- a/js/tools.js +++ b/js/tools.js @@ -1,1821 +1,124 @@ -/* global HELPER, POP, MAIN, LAYERS, CON, LAYER, DRAW */ -/* global ACTION_DATA, canvas_active, canvas_front, WIDTH, HEIGHT, ZOOM, ImageFilters, BezierCurveBrush, chrome_brush, shaded_brush, sketchy_brush */ +/* global POP, MAIN, SIFT, LAYER, IMAGE, EVENTS, HELPER, EDIT, GUI */ +/* global WIDTH, HEIGHT, COLOR, canvas_active */ var TOOLS = new TOOLS_CLASS(); -function TOOLS_CLASS(){ - this.select_square_action = ''; - this.select_data = false; - this.EXIF = false; - this.last_line_x; - this.last_line_y; - var clone_data = false; - var COLOUR_copy; - var curve_points = []; - - this.draw_helpers = function(){ - //left menu - var html = ''; - for(var i in ACTION_DATA){ - html += '
    '+"\n"; - } - html += '
    '+"\n"; - } - document.getElementById("all_colors").innerHTML = html; - }; - this.update_attribute = function(object, next_value){ - var max_value = 500; - for(var k in this.action_data().attributes){ - if(k != object.id) continue; - if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ - //true / false - var value; - if(next_value == 0) - value=true; - else - value=false; - //save - this.action_data().attributes[k] = value; - this.show_action_attributes(); - } - else if(typeof this.action_data().attributes[k] == 'object'){ - //select - var key = k.replace("_values",""); - this.action_data().attributes[key] = object.value; - } - else if(this.action_data().attributes[k][0] == '#'){ - //color - var key = k.replace("_values",""); - this.action_data().attributes[key] = object.value; - } - else{ - //numbers - if(next_value != undefined){ - if(next_value > 0){ - if(parseInt(this.action_data().attributes[k]) == 0) - object.value = 1; - else if(parseInt(this.action_data().attributes[k]) == 1) - object.value = 5; - else if(parseInt(this.action_data().attributes[k]) == 5) - object.value = 10; - else - object.value = parseInt(this.action_data().attributes[k]) + next_value; - } - else if(next_value < 0){ - if(parseInt(this.action_data().attributes[k]) == 1) - object.value = 0; - else if(parseInt(this.action_data().attributes[k]) <= 5) - object.value = 1; - else if(parseInt(this.action_data().attributes[k]) <= 10) - object.value = 5; - else if(parseInt(this.action_data().attributes[k]) <= 20) - object.value = 10; - else - object.value = parseInt(this.action_data().attributes[k]) + next_value; - } - - if(object.value < 0) object.value = 0; - if(object.value > max_value) object.value = max_value; - } - else{ - if(object.value.length==0) return false; - object.value = parseInt(object.value); - object.value = Math.abs(object.value); - if(object.value==0 || isNaN(object.value) || value > max_value) - object.value = this.action_data().attributes[k]; - } - if(k == 'power' && object.value > 100) - object.value = 100; - - //save - this.action_data().attributes[k] = object.value; - - document.getElementById(k).value = object.value; - } - if(this.action_data().on_update != undefined) - TOOLS[this.action_data().on_update](object.value); - } - }; - this.action = function(key){ - TOOLS[key]('init', {valid:true}); - if(ACTION == key) return false; - - //change - if(ACTION != '') - document.getElementById(ACTION).className = ""; - ACTION = key; - document.getElementById(key).className = "active"; - this.show_action_attributes(); - - return false; - }; - this.action_data = function(){ - for(var i in ACTION_DATA){ - if(ACTION_DATA[i].name == ACTION) - return ACTION_DATA[i]; - } - }; - this.show_action_attributes = function(){ - html = ''; - var step = 10; - for(var k in this.action_data().attributes){ - var title = k[0].toUpperCase() + k.slice(1); - title = title.replace("_"," "); - if(TOOLS.action_data().attributes[k+"_values"] != undefined) continue; - if(this.action_data().attributes[k]===true || this.action_data().attributes[k]===false){ - //true / false - if(this.action_data().attributes[k]==true) - html += '
    '+title+'
    '; - else - html += '
    '+title+'
    '; - } - else if(typeof TOOLS.action_data().attributes[k] == 'object'){ - //drop down select - html += ''; - } - else if(TOOLS.action_data().attributes[k][0] == '#'){ - //color - html += ''; //table for 100% width - html += ''; - html += ''; - html += ''; - html += ''; - html += '
    '+title+':
    '; - } - else{ - //numbers - html += '
    '; - html += ''; //table for 100% width - html += ''; - html += ''; - html += ''; - html += ''; - html += '
    '+title+':
    '; - html += '
    +
    '; - html += '
    -
    '; - html += '
    '; - } - } - document.getElementById("action_attributes").innerHTML = html; - }; - this.set_color = function(object){ - if(HELPER.chech_input_color_support('main_colour') == true && object.id == 'main_colour') - COLOUR = object.value; - else - COLOUR = HELPER.rgb2hex_all(object.style.backgroundColor); - COLOUR_copy = COLOUR; - - if(HELPER.chech_input_color_support('main_colour') == true) - document.getElementById("main_colour").value = COLOUR; //supported - else - document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported - - document.getElementById("color_hex").value = COLOUR; - var colours = HELPER.hex2rgb(COLOUR); - document.getElementById("rgb_r").value = colours.r; - document.getElementById("rgb_g").value = colours.g; - document.getElementById("rgb_b").value = colours.b; - }; - this.set_color_manual = function(event){ - var object = event.target; - if(object.value.length == 6 && object.value[0] != '#'){ - COLOUR = '#'+object.value; - this.sync_colors(); - } - if(object.value.length == 7){ - COLOUR = object.value; - this.sync_colors(); - } - else if(object.value.length > 7) - object.value = COLOUR; - }; - this.set_color_rgb = function(object, c){ - var colours = HELPER.hex2rgb(COLOUR); - if(object.value.length > 3){ - object.value = colours[c]; - } - else if(object.value.length > 0){ - value = object.value; - value = parseInt(value); - if(isNaN(value) || value != object.value || value > 255 || value < 0){ - object.value = colours[c]; - return false; - } - COLOUR = "#" + ("000000" + HELPER.rgbToHex(document.getElementById("rgb_r").value, document.getElementById("rgb_g").value, document.getElementById("rgb_b").value)).slice(-6); - ALPHA = document.getElementById("rgb_a").value; - document.getElementById("rgb_a").value = ALPHA; - this.sync_colors(); - } - }; - this.sync_colors = function(){ - document.getElementById("color_hex").value = COLOUR; - - if(HELPER.chech_input_color_support('main_colour') == true) - document.getElementById("main_colour").value = COLOUR; //supported - else - document.getElementById("main_colour_alt").style.backgroundColor = COLOUR; //not supported - - var colours = HELPER.hex2rgb(COLOUR); - document.getElementById("rgb_r").value = colours.r; - document.getElementById("rgb_g").value = colours.g; - document.getElementById("rgb_b").value = colours.b; - }; - this.toggle_color_select = function(){ - if(POP.active == false){ - POP.add({title: 'Colour:', function: function(){ - COLOUR_copy = COLOUR; - - var html = ''; - html += ''; - html += ''; - html += ' '; - html += ' '; - html += ' '; - html += ''; - html += ''; - html += ' '; - html += ' '; - html += ' '; - html += ''; - html += '
    Lum:0
    Alpha:'+ALPHA+'
    '; - return html; - }}); - POP.show('Select color', function(user_response){ + ); + }; + + //expands colors + this.tools_color_zoom = function () { + POP.add({name: "param1", title: "Zoom:", value: "2", range: [2, 20], }); + POP.add({name: "param2", title: "Center:", value: "128", range: [0, 255]}); + POP.show( + 'Color Zoom', + function (user_response) { + EDIT.save_state(); var param1 = parseInt(user_response.param1); - }, undefined, this.toggle_color_select_onload); + var param2 = parseInt(user_response.param2); + + TOOLS.color_zoom(canvas_active(), WIDTH, HEIGHT, param1, param2); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = parseInt(user_response.param1); + var param2 = parseInt(user_response.param2); + + TOOLS.color_zoom(canvas_preview, w, h, param1, param2); } - else - POP.hide(); - }; - this.change_lum = function(lumi){ - lumi = parseInt(lumi); - var c3 = HELPER.hex2rgb(COLOUR_copy); - c3.r += lumi; - c3.g += lumi; - c3.b += lumi; - - if(c3.r < 0) c3.r = 0; - if(c3.g < 0) c3.g = 0; - if(c3.b < 0) c3.b = 0; - if(c3.r > 255) c3.r = 255; - if(c3.g > 255) c3.g = 255; - if(c3.b > 255) c3.b = 255; - - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c3.r, c3.g, c3.b)).slice(-6); - this.sync_colors(); - }; - this.change_alpha = function(value){ - ALPHA = parseInt(value); - document.getElementById("rgb_a").value = ALPHA; - }; - this.toggle_color_select_onload = function(){ - var img = new Image(); - img.onload = function(){ - document.getElementById("c_all").getContext("2d").drawImage(img, 0, 0); - document.getElementById("c_all").onmousedown = function(event){ - if(event.offsetX) { - mouse_x = event.offsetX; - mouse_y = event.offsetY; - } - else if(event.layerX) { - mouse_x = event.layerX; - mouse_y = event.layerY; - } - var c = document.getElementById("c_all").getContext("2d").getImageData(mouse_x, mouse_y, 1, 1).data; - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); - TOOLS.sync_colors(); - COLOUR_copy = COLOUR; - document.getElementById("lum_ranger").value = 0; - }; - }; - img.src = 'img/colorwheel.png'; - }; - //type = click, right_click, drag, move, release - this.select_tool = function(type, mouse, event){ - if(mouse == undefined) return false; - if(mouse.valid == false) return true; - if(mouse.click_valid == false) return true; - if(event != undefined && event.target.id == "canvas_preview") return true; - if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage(canvas_active(true), mouse.x - mouse.click_x, mouse.y - mouse.click_y); + ); + }; + + //recover alpha channel values + this.tools_restore_alpha = function () { + POP.add({name: "param", title: "Level:", value: "128", range: [0, 255]}); + POP.show( + 'Recover alpha', + function (user_response) { + EDIT.save_state(); + var param = parseInt(user_response.param); + + TOOLS.recover_alpha(canvas_active(), WIDTH, HEIGHT, param); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param = parseInt(user_response.param); + + TOOLS.recover_alpha(canvas_preview, w, h, param); } - else if(type == 'release'){ - if(mouse.valid == false || mouse.click_x === false) return false; - if(mouse.x - mouse.click_x == 0 || mouse.y - mouse.click_y == 0) return false; - MAIN.save_state(); - var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - canvas_active().clearRect(0, 0, WIDTH, HEIGHT); - canvas_active().putImageData(tmp, mouse.x - mouse.click_x, mouse.y - mouse.click_y); + ); + }; + + //adds borders + this.tools_borders = function () { + POP.add({name: "param1", title: "Color:", value: COLOR, type: 'color'}); + POP.add({name: "param2", title: "Size:", value: "5", range: [1, 100]}); + POP.show( + 'Borders', + function (user_response) { + EDIT.save_state(); + var param1 = user_response.param1; + var param2 = parseInt(user_response.param2); + + LAYER.add_layer(); + TOOLS.add_borders(canvas_active(), WIDTH, HEIGHT, param1, param2); + GUI.zoom(); + }, + function (user_response, canvas_preview, w, h) { + var param1 = user_response.param1; + var param2 = parseInt(user_response.param2); + + TOOLS.add_borders(canvas_preview, w, h, param1, param2); } - }; - this.magic_wand = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - MAIN.save_state(); - DRAW.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); - } - }; - this.erase = function(type, mouse, event){ - if(mouse.valid == false) return true; - var strict = TOOLS.action_data().attributes.strict; - var size = TOOLS.action_data().attributes.size; - var is_circle = TOOLS.action_data().attributes.circle; - - if(type == 'click'){ - MAIN.save_state(); - if(is_circle == false){ - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; - canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); - canvas_active().restore(); - } - else{ - - if(strict == false){ - var radgrad = canvas_active().createRadialGradient( - mouse.x, mouse.y, size/8, - mouse.x, mouse.y, size/2); - radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255+")"); - radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); - } - - //set Composite - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(strict == true) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255+")"; - else - canvas_active().fillStyle = radgrad; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_active().fill(); - canvas_active().restore(); - } - } - else if(type == 'drag'){ - if(is_circle == false){ - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(ALPHA < 255) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; - else - canvas_active().fillStyle = COLOUR; - canvas_active().fillRect(mouse.x - Math.ceil(size/2)+1, mouse.y - Math.ceil(size/2)+1, size, size); - canvas_active().restore(); - } - else{ - if(strict == false){ - var radgrad = canvas_active().createRadialGradient( - mouse.x, mouse.y, size/10, - mouse.x, mouse.y, size/2); - if(ALPHA < 255) - radgrad.addColorStop(0, "rgba(255, 255, 255, "+ALPHA/255/10+")"); - else - radgrad.addColorStop(0, "rgba(255, 255, 255, 1)"); - radgrad.addColorStop(1, "rgba(255, 255, 255, 0)"); - } - //set Composite - canvas_active().save(); - canvas_active().globalCompositeOperation = 'destination-out'; - if(strict == true){ - if(ALPHA < 255) - canvas_active().fillStyle = "rgba(255, 255, 255, "+ALPHA/255/10+")"; - else - canvas_active().fillStyle = COLOUR; - } - else - canvas_active().fillStyle = radgrad; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_active().fill(); - canvas_active().restore(); - } - DRAW.zoom(undefined, false); - } - else if(type == 'move'){ - var size1 = Math.floor((size)/2); - var size2 = Math.floor((size)/2); - if(size%2 == 0) size2--; - else{ - size1--; - } - - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.lineWidth = 1; - if(is_circle == false){ - HELPER.dashedRect(canvas_front, mouse.x - Math.ceil(size/2) + 1, mouse.y - Math.ceil(size/2) + 1, mouse.x + Math.floor(size/2), mouse.y + Math.floor(size/2), 1, '#000000'); - } - else{ - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.arc(mouse.x, mouse.y, size/2, 0,Math.PI*2,true); - canvas_front.stroke(); - } - } - }; - this.fill = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - MAIN.save_state(); - var color_to = HELPER.hex2rgb(COLOUR); - color_to.a = ALPHA; - DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, TOOLS.action_data().attributes.sensitivity, TOOLS.action_data().attributes.anti_aliasing); - } - }; - this.pick_color = function(type, mouse, event){ - if(mouse.valid == false) return true; - if(type == 'click'){ - var c = canvas_active().getImageData(mouse.x, mouse.y, 1, 1).data; - COLOUR = "#" + ("000000" + HELPER.rgbToHex(c[0], c[1], c[2])).slice(-6); - - //set alpha - ALPHA = c[3]; - document.getElementById("rgb_a").value = ALPHA; - - TOOLS.sync_colors(); - } - }; - this.pencil = function(type, mouse, event){ - if(mouse.valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'click'){ - MAIN.save_state(); - } - else if(type == 'drag'){ - //why no simple lines? this way turns off aliasing - if(mouse.last_x != false && mouse.last_y != false){ - //saving - dist_x = mouse.last_x - mouse.x; - dist_y = mouse.last_y - mouse.y; - distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - radiance = Math.atan2(dist_y, dist_x); - for(var i=0; i 0){ - canvas.fillStyle = HELPER.darkenColor(COLOUR, -30); - alpha_tmp = ALPHA; - if(alpha_tmp < 255) - alpha_tmp /= 10; - - color_rgb.r -= 50; - color_rgb.g -= 50; - color_rgb.b -= 50; - if(color_rgb.r < 0) color_rgb.r *= -1; - if(color_rgb.g < 0) color_rgb.g *= -1; - if(color_rgb.b < 0) color_rgb.b *= -1; - - canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+alpha_tmp/255+")"; - for (cnt = 0; cnt < dpth; cnt++) - canvas.fillText(text, xx + dx * cnt, yy + letters_height + dy * cnt); - color_rgb = HELPER.hex2rgb(COLOUR); - } - - //main text - canvas.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas.lineWidth = stroke_size; - if(fill_style == 'Fill' || fill_style == 'Both') - canvas.fillText(text, xx, yy + letters_height); - if(fill_style == 'Stroke' || fill_style == 'Both') - canvas.strokeText(text, xx, yy + letters_height); - - DRAW.zoom(); - }; - this.draw_square = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - - var start_x = mouse.click_x; - var start_y = mouse.click_y; - var dx = mouse.x - mouse.click_x; - var dy = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.square==true){ - dx = Math.max(Math.abs(dx), Math.abs(dy)); - dy = Math.max(Math.abs(dx), Math.abs(dy)); - if(mouse.x < mouse.click_x) start_x = start_x - dx; - if(mouse.y < mouse.click_y) start_y = start_y - dy; - } - - canvas_front.fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, true, false); - else - HELPER.roundRect(canvas_front, start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, false, true); - } - else if(type == 'release'){ - MAIN.save_state(); - canvas_active().beginPath(); - var start_x = mouse.click_x; - var start_y = mouse.click_y; - var dx = mouse.x - mouse.click_x; - var dy = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.square==true){ - dx = Math.max(Math.abs(dx), Math.abs(dy)); - dy = Math.max(Math.abs(dx), Math.abs(dy)); - if(mouse.x < mouse.click_x) start_x = start_x - dx; - if(mouse.y < mouse.click_y) start_y = start_y - dy; - } - - canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, true, false); - else - HELPER.roundRect(canvas_active(), start_x + 0.5, start_y + 0.5, - dx, dy, - TOOLS.action_data().attributes.round, false, true); - } - }; - this.draw_circle = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - var color_rgb = HELPER.hex2rgb(COLOUR); - if(type == 'drag'){ - dist_x = mouse.x - mouse.click_x; - dist_y = mouse.y - mouse.click_y; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - if(TOOLS.action_data().attributes.circle==true) - dist_x = dist_y = Math.min(dist_x, dist_y); - if(TOOLS.action_data().attributes.fill==true) - HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); - else - HELPER.drawEllipseByCenter(canvas_front, mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); - } - else if(type == 'release'){ - MAIN.save_state(); - dist_x = mouse.x - mouse.click_x; - dist_y = mouse.y - mouse.click_y; - if(TOOLS.action_data().attributes.circle==true) - dist_x = dist_y = Math.min(dist_x, dist_y); - canvas_active().lineWidth = 1; - if(TOOLS.action_data().attributes.fill==true) - HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")", true); - else - HELPER.drawEllipseByCenter(canvas_active(), mouse.click_x, mouse.click_y, dist_x*2, dist_y*2, "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"); - } - }; - this.update_brush = function(){ - document.getElementById('anti_alias').style.display=''; - if(TOOLS.action_data().attributes.type != 'Brush') - document.getElementById('anti_alias').style.display='none'; - }; - this.desaturate_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - - if(type == 'click'){ - MAIN.save_state(); - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.GrayScale(imageData); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - else if(type == 'drag'){ - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.GrayScale(imageData); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - if(type == 'move' || type == 'drag'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.brush = function(type, mouse, event){ - if(mouse.valid == false) return true; - var brush_type = TOOLS.action_data().attributes.type; - var color_rgb = HELPER.hex2rgb(COLOUR); - - if(type == 'click') - MAIN.save_state(); - - if(brush_type == 'Brush'){ - if(type == 'click'){ - //init settings - canvas_active().beginPath(); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = TOOLS.action_data().attributes.size; - canvas_active().lineCap = 'round'; - canvas_active().lineJoin = 'round'; - - if(ALPHA < 255){ - canvas_front.beginPath(); - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.lineWidth = TOOLS.action_data().attributes.size; - canvas_front.lineCap = 'round'; - canvas_front.lineJoin = 'round'; - } - - //blur - canvas_active().shadowBlur = 0; - if(TOOLS.action_data().attributes.anti_alias == true){ - canvas_active().shadowColor = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().shadowBlur = Math.round(TOOLS.action_data().attributes.size); - } - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - if(ALPHA == 255) - canvas_active().beginPath(); - canvas_active().moveTo(mouse.last_x, mouse.last_y); - canvas_active().lineTo(mouse.x, mouse.y); - if(ALPHA == 255) - canvas_active().stroke(); - - //now draw preview - if(ALPHA < 255){ - canvas_front.beginPath(); - //clean from last line - canvas_front.globalCompositeOperation = "destination-out"; - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 1)"; - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - //reset - canvas_front.strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_front.globalCompositeOperation = "source-over"; - //draw new line segment - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - } - } - else if(type == 'release'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - //paint everything - canvas_active().stroke(); - - //if mouse was not moved - if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); - canvas_active().fillStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().fill(); - } - canvas_active().shadowBlur = 0; - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, Math.PI*2, true); - canvas_front.stroke(); - } - } - else if(brush_type == 'BezierCurve'){ - if(type == 'click') - BezierCurveBrush.startCurve(mouse.x, mouse.y); - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 0.5; - - BezierCurveBrush.draw(canvas_active(), color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Chrome'){ - if(type == 'click'){ - chrome_brush.init(canvas_active()); - chrome_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - chrome_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Fur'){ - if(type == 'click'){ - points = new Array(); - prevMouseX = mouse.x; - prevMouseY = mouse.y; - count = 0; - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", 0.1)"; - canvas_active().lineWidth = 1; - - f = mouse.x; - c = mouse.y; - var e, b, a, g; - points.push([f, c]); - canvas_active().beginPath(); - canvas_active().moveTo(prevMouseX, prevMouseY); - canvas_active().lineTo(f, c); - canvas_active().stroke(); - for (e = 0; e < points.length; e++) { - b = points[e][0] - points[count][0]; - a = points[e][1] - points[count][1]; - g = b * b + a * a; - var g_size = Math.round(400 * TOOLS.action_data().attributes.size); - if (g < g_size && Math.random() > g / g_size) { - canvas_active().beginPath(); - canvas_active().moveTo(f + (b * 0.5), c + (a * 0.5)); - canvas_active().lineTo(f - (b * 0.5), c - (a * 0.5)); - canvas_active().stroke(); - } - } - prevMouseX = f; - prevMouseY = c; - count++; - } - } - else if(brush_type == 'Grouped'){ - groups_n = TOOLS.action_data().attributes.size; - gsize = 10; - random_power = 5; - - if(type == 'click'){ - chrome_brush.init(canvas_active()); - chrome_brush.strokeStart(mouse.x, mouse.y); - groups = []; - - for(var g=0; g < groups_n; g++){ - groups[g] = {}; - groups[g].x = HELPER.getRandomInt(-gsize, gsize); - groups[g].y = HELPER.getRandomInt(-gsize, gsize); - } - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 0.5; - - for(var g in groups){ - canvas_active().beginPath(); - canvas_active().moveTo(mouse.last_x + groups[g].x, mouse.last_y + groups[g].y); - - //randomize here - groups[g].x += HELPER.getRandomInt(-random_power, random_power); - groups[g].y += HELPER.getRandomInt(-random_power, random_power); - if(groups[g].x < -gsize) groups[g].x = -gsize + random_power; - if(groups[g].y < -gsize) groups[g].y = -gsize + random_power; - if(groups[g].x > gsize) groups[g].x = gsize - random_power; - if(groups[g].y > gsize) groups[g].y = gsize - random_power; - - canvas_active().lineTo(mouse.x + groups[g].x, mouse.y + groups[g].y); - canvas_active().stroke(); - } - } - } - else if(brush_type == 'Shaded'){ - if(type == 'click'){ - shaded_brush.init(canvas_active()); - shaded_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - shaded_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - else if(brush_type == 'Sketchy'){ - if(type == 'click'){ - sketchy_brush.init(canvas_active()); - sketchy_brush.strokeStart(mouse.x, mouse.y); - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - var color_rgb = HELPER.hex2rgb(COLOUR); - canvas_active().strokeStyle = "rgba("+color_rgb.r+", "+color_rgb.g+", "+color_rgb.b+", "+ALPHA/255+")"; - canvas_active().lineWidth = 1; - - sketchy_brush.stroke(color_rgb, mouse.x, mouse.y, TOOLS.action_data().attributes.size); - } - } - }; - this.gradient_tool = function(type, mouse, event){ - if(mouse != undefined && mouse.valid == false && type != 'init') return true; - var power = TOOLS.action_data().attributes.power; - if(power > 99) power = 99; - //var color1, color2; - - if(type == 'init'){ - POP.add({name: "param1", title: "Color #1:", value: '#000000', type: 'color' }); - POP.add({name: "param2", title: "Transparency #1:", value: '255', range:[0, 255] }); - POP.add({name: "param3", title: "Color #2:", value: '#ffffff', type: 'color' }); - POP.add({name: "param4", title: "Transparency #2:", value: '255', range:[0, 255] }); - POP.preview_in_main = true; - POP.show('Text', function(user_response){ - MAIN.save_state(); - color1 = HELPER.hex2rgb(user_response.param1); - color1.a = parseInt(user_response.param2); - - color2 = HELPER.hex2rgb(user_response.param3); - color2.a = parseInt(user_response.param4); - }); - } - else if(type == 'drag'){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - - if(TOOLS.action_data().attributes.radial == false){ - //linear - canvas_front.rect(0, 0, WIDTH, HEIGHT); - if(mouse.x > mouse.click_x){ - var grd = canvas_front.createLinearGradient( - mouse.click_x, mouse.click_y, - mouse.x, mouse.y); - } - else{ - var grd = canvas_front.createLinearGradient( - mouse.x, mouse.y, - mouse.click_x, mouse.click_y); - } - grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - canvas_front.fillStyle = grd; - canvas_front.fill(); - } - else{ - //radial - var dist_x = mouse.click_x - mouse.x; - var dist_y = mouse.click_y - mouse.y; - var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - var radgrad = canvas_front.createRadialGradient( - mouse.click_x, mouse.click_y, distance*power/100, - mouse.click_x, mouse.click_y, distance); - radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - - canvas_front.fillStyle = radgrad; - canvas_front.fillRect(0,0,WIDTH,HEIGHT); - } - //draw line - canvas_front.beginPath(); - canvas_front.strokeStyle = "#ff0000"; - canvas_front.lineWidth = 1; - var xx = mouse.x; - var yy = mouse.y; - canvas_front.moveTo(mouse.click_x + 0.5, mouse.click_y + 0.5); - canvas_front.lineTo(xx + 0.5, yy + 0.5); - canvas_front.stroke(); - } - else if(type == 'release'){ - MAIN.save_state(); - if(TOOLS.action_data().attributes.radial == false){ - //linear - canvas_active().rect(0, 0, WIDTH, HEIGHT); - if(mouse.x > mouse.click_x){ - var grd = canvas_active().createLinearGradient( - mouse.click_x, mouse.click_y, - mouse.x, mouse.y); - } - else{ - var grd = canvas_active().createLinearGradient( - mouse.x, mouse.y, - mouse.click_x, mouse.click_y); - } - grd.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - grd.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - canvas_active().fillStyle = grd; - canvas_active().fill(); - } - else{ - //radial - var dist_x = mouse.click_x - mouse.x; - var dist_y = mouse.click_y - mouse.y; - var distance = Math.sqrt((dist_x*dist_x)+(dist_y*dist_y)); - var radgrad = canvas_active().createRadialGradient( - mouse.click_x, mouse.click_y, distance*power/100, - mouse.click_x, mouse.click_y, distance); - radgrad.addColorStop(0, "rgba("+color1.r+", "+color1.g+", "+color1.b+", "+color1.a/255+")"); - radgrad.addColorStop(1, "rgba("+color2.r+", "+color2.g+", "+color2.b+", "+color2.a/255+")"); - - canvas_active().fillStyle = radgrad; - canvas_active().fillRect(0,0,WIDTH,HEIGHT); - } - } - }; - this.blur_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - if(type == 'click'){ - MAIN.save_state(); - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'drag'){ - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.StackBlur(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.sharpen_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - var xx = mouse.x - size/2; - var yy = mouse.y - size/2; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - - if(type == 'click'){ - MAIN.save_state(); - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'drag'){ - var param1 = TOOLS.action_data().attributes.strength; - var imageData = canvas_active().getImageData(xx, yy, size, size); - var filtered = ImageFilters.Sharpen(imageData, param1); //add effect - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front")); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.burn_dodge_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var power = TOOLS.action_data().attributes.power*2.5; - - if(type == 'click'){ - MAIN.save_state(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.save(); - CON.clear_front_on_release = false; - - //init settings - canvas_active().beginPath(); - canvas_active().lineWidth = TOOLS.action_data().attributes.size; - canvas_active().lineCap = 'round'; - canvas_active().lineJoin = 'round'; - - canvas_front.beginPath(); - if(TOOLS.action_data().attributes.burn == true) - canvas_front.strokeStyle = "rgba(0, 0, 0, "+power/255+")"; - else - canvas_front.strokeStyle = "rgba(255, 255, 255, "+power/255+")"; - canvas_front.lineWidth = TOOLS.action_data().attributes.size; - canvas_front.lineCap = 'round'; - canvas_front.lineJoin = 'round'; - } - else if(type == 'drag' && mouse.last_x != false && mouse.last_y != false){ - //now draw preview - canvas_front.beginPath(); - //clean from last line - canvas_front.globalCompositeOperation = "destination-out"; - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - //reset - canvas_front.globalCompositeOperation = "source-over"; - //draw new line segment - canvas_front.moveTo(mouse.last_x, mouse.last_y); - canvas_front.lineTo(mouse.x, mouse.y); - canvas_front.stroke(); - } - else if(type == 'release'){ - //todo: use screen+multiply or burn+dodge - canvas_active().globalCompositeOperation = "soft-light"; - canvas_active().shadowBlur = 5; - canvas_active().drawImage(document.getElementById("canvas_front"), 0, 0); - canvas_active().globalCompositeOperation = "source-over"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - CON.clear_front_on_release = true; - - //if mouse was not moved - if(mouse.click_x == mouse.x && mouse.click_y == mouse.y){ - canvas_active().globalCompositeOperation = "soft-light"; - canvas_active().beginPath(); - canvas_active().arc(mouse.x, mouse.y, TOOLS.action_data().attributes.size/2, 0, 2 * Math.PI, false); - if(TOOLS.action_data().attributes.burn == true){ - canvas_active().fillStyle = "rgba(0, 0, 0, "+power/255+")"; - } - else{ - canvas_active().fillStyle = "rgba(255, 255, 255, "+power/255+")"; - } - canvas_active().shadowBlur = 5; - canvas_active().fill(); - canvas_active().globalCompositeOperation = "source-over"; - } - canvas_active().shadowBlur = 0; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.restore(); - } - else if(type == 'move' && CON.isDrag == false){ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.arc(mouse.x, mouse.y, size/2, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.crop_tool = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - if(type == 'drag'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - if(TOOLS.select_square_action == ''){ - document.body.style.cursor = "crosshair"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - } - else if(type == 'move' && TOOLS.select_data != false){ - if(CON.isDrag == true) return true; - canvas_front.lineWidth = 1; - border_size = 5; - TOOLS.select_square_action = ''; - - if(TOOLS.select_square_action == '' - && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - TOOLS.select_square_action = 'move'; - document.body.style.cursor = 'pointer'; - } - if(TOOLS.select_square_action == '' && mouse.valid == true) - document.body.style.cursor = "auto"; - } - else if(type == 'release'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - - if(TOOLS.select_square_action == ''){ - if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ - TOOLS.select_data = { - x: Math.min(mouse.x, mouse.click_x), - y: Math.min(mouse.y, mouse.click_y), - w: Math.abs(mouse.x - mouse.click_x), - h: Math.abs(mouse.y - mouse.click_y) - }; - } - } - TOOLS.draw_selected_area(true); - - LAYER.update_info_block(); - } - else if(type == 'click' && TOOLS.select_data != false){ - document.body.style.cursor = "auto"; - if(mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - MAIN.save_state(); - for(var i in LAYERS){ - var layer = document.getElementById(LAYERS[i].name).getContext("2d"); - - var tmp = layer.getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - layer.clearRect(0, 0, WIDTH, HEIGHT); - layer.putImageData(tmp, 0, 0); - } - - //resize - MAIN.save_state(); - WIDTH = TOOLS.select_data.w; - HEIGHT = TOOLS.select_data.h; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - - TOOLS.select_data = false; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - } - } - }; - this.clone_tool = function(type, mouse, event){ - if(mouse.valid == false) return true; - var size = TOOLS.action_data().attributes.size; - var size_half = Math.round(size/2); - - if(type == 'click'){ - MAIN.save_state(); - - if(clone_data === false){ - POP.add({html: 'Source is empty, right click on image first.' }); - POP.show('Error', ''); - } - else{ - //draw rounded image - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - } - else if(type == 'right_click'){ - //save clone source - clone_data = document.createElement("canvas"); - clone_data.width = size; - clone_data.height = size; - var xx = mouse.x - size_half; - var yy = mouse_y - size_half; - if(xx < 0) xx = 0; - if(yy < 0) yy = 0; - clone_data.getContext("2d").drawImage(canvas_active(true), xx, yy, size, size, 0, 0, size, size); + this.generate_sprites = function (gap) { + if (LAYER.layers.length == 1) return false; - } - else if(type == 'drag'){ - if(event.which == 3) return true; - if(clone_data === false) return false; //no source - - //draw rounded image - HELPER.drawImage_round(canvas_active(), mouse.x, mouse.y, size, clone_data, document.getElementById("canvas_front"), TOOLS.action_data().attributes.anti_alias); - } - else if(type == 'move'){ - //show size - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.beginPath(); - canvas_front.strokeStyle = "#000000"; - canvas_front.lineWidth = 1; - canvas_front.arc(mouse.x, mouse.y, size_half, 0, Math.PI*2, true); - canvas_front.stroke(); - } - }; - this.select_square = function(type, mouse, event){ - if(mouse.click_valid == false) return true; - if(type == 'drag'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - if(TOOLS.select_square_action == ''){ - document.body.style.cursor = "crosshair"; - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(mouse.click_x, mouse.click_y, mouse.x - mouse.click_x, mouse.y - mouse.click_y); - } - else{ - if(TOOLS.select_square_action == 'move'){ - //move - try{ - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.drawImage( canvas_active(true), - TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, - mouse.x - mouse.click_x + TOOLS.select_data.x, - mouse.y - mouse.click_y + TOOLS.select_data.y, - TOOLS.select_data.w, - TOOLS.select_data.h ); - canvas_front.restore(); - } - catch(err){ - console.log("Error: "+err.message); - } - } - else{ - //resize - var s_x = TOOLS.select_data.x; - var s_y = TOOLS.select_data.y; - var d_x = TOOLS.select_data.w; - var d_y = TOOLS.select_data.h; - if(TOOLS.select_square_action == 'resize-left'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - } - else if(TOOLS.select_square_action == 'resize-right') - d_x += mouse.x - mouse.click_x; - else if(TOOLS.select_square_action == 'resize-top'){ - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-bottom') - d_y += mouse.y - mouse.click_y; - else if(TOOLS.select_square_action == 'resize-1'){ - s_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_x -= mouse.x - mouse.click_x; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-2'){ - d_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-3'){ - d_x += mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-4'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - var s_x = Math.max(s_x, 0); - var s_y = Math.max(s_y, 0); - var d_x = Math.max(d_x, 0); - var d_y = Math.max(d_y, 0); - - canvas_front.save(); - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - canvas_front.mozImageSmoothingEnabled = false; - canvas_front.drawImage(canvas_active(true), - TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, - s_x, s_y, d_x, d_y); - canvas_front.restore(); - } - } - } - else if(type == 'move' && TOOLS.select_data != false){ - if(CON.isDrag == true) return true; - canvas_front.lineWidth = 1; - border_size = 5; - TOOLS.select_square_action = ''; - var is_left = false; - var is_right = false; - var is_top = false; - var is_bottom = false; - var sr_size = Math.ceil(CON.sr_size/ZOOM*100); - - //left - if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "w-resize"; - TOOLS.select_square_action = 'resize-left'; - is_left = true; - } - //top - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "n-resize"; - TOOLS.select_square_action = 'resize-top'; - is_top = true; - } - //right - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h/2, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "w-resize"; - TOOLS.select_square_action = 'resize-right'; - is_right = true; - } - //bottom - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w/2, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "n-resize"; - TOOLS.select_square_action = 'resize-bottom'; - is_bottom = true; - } - - //corner 1 - if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "nw-resize"; - TOOLS.select_square_action = 'resize-1'; - } - //corner 2 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "ne-resize"; - TOOLS.select_square_action = 'resize-2'; - } - //corner 3 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x + TOOLS.select_data.w - sr_size, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "nw-resize"; - TOOLS.select_square_action = 'resize-3'; - } - //corner 4 - else if(TOOLS.check_mouse_pos(TOOLS.select_data.x, TOOLS.select_data.y + TOOLS.select_data.h - sr_size, sr_size, mouse.x, mouse.y)==true){ - document.body.style.cursor = "ne-resize"; - TOOLS.select_square_action = 'resize-4'; - } - - if(TOOLS.select_square_action == '' - && mouse.x > TOOLS.select_data.x && mouse.y > TOOLS.select_data.y - && mouse.x < TOOLS.select_data.x + TOOLS.select_data.w && mouse.y < TOOLS.select_data.y + TOOLS.select_data.h){ - TOOLS.select_square_action = 'move'; - document.body.style.cursor = "move"; - } - if(TOOLS.select_square_action == '' && mouse.valid == true) - document.body.style.cursor = "auto"; - } - else if(type == 'release'){ - if(mouse.x < 0) mouse.x = 0; - if(mouse.y < 0) mouse.y = 0; - if(mouse.x >= WIDTH) mouse.x = WIDTH-1; - if(mouse.y >= HEIGHT) mouse.y = HEIGHT-1; - if(mouse.click_x >= WIDTH) mouse.click_x = WIDTH-1; - if(mouse.click_y >= HEIGHT) mouse.click_y = HEIGHT-1; - - if(TOOLS.select_square_action == ''){ - if(mouse.x != mouse.click_x && mouse.y != mouse.click_y){ - TOOLS.select_data = { - x: Math.min(mouse.x, mouse.click_x), - y: Math.min(mouse.y, mouse.click_y), - w: Math.abs(mouse.x - mouse.click_x), - h: Math.abs(mouse.y - mouse.click_y) - }; - } - } - else{ - MAIN.save_state(); - if(TOOLS.select_square_action=='move'){ - if(TOOLS.select_data != false){ - select_data_tmp = canvas_active().getImageData(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - canvas_active().clearRect(TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h); - canvas_active().putImageData(select_data_tmp, mouse.x - mouse.click_x + TOOLS.select_data.x, mouse.y - mouse.click_y + TOOLS.select_data.y); - } - TOOLS.select_data.x += mouse.x - mouse.click_x; - TOOLS.select_data.y += mouse.y - mouse.click_y; - } - else{ - var s_x = TOOLS.select_data.x; - var s_y = TOOLS.select_data.y; - var d_x = TOOLS.select_data.w; - var d_y = TOOLS.select_data.h; - - if(TOOLS.select_square_action == 'resize-left'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - } - else if(TOOLS.select_square_action == 'resize-right') - d_x += mouse.x - mouse.click_x; - else if(TOOLS.select_square_action == 'resize-top'){ - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-bottom') - d_y += mouse.y - mouse.click_y; - else if(TOOLS.select_square_action == 'resize-1'){ - s_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_x -= mouse.x - mouse.click_x; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-2'){ - d_x += mouse.x - mouse.click_x; - s_y += mouse.y - mouse.click_y; - d_y -= mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-3'){ - d_x += mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - else if(TOOLS.select_square_action == 'resize-4'){ - s_x += mouse.x - mouse.click_x; - d_x -= mouse.x - mouse.click_x; - d_y += mouse.y - mouse.click_y; - } - var s_x = Math.max(s_x, 0); - var s_y = Math.max(s_y, 0); - var d_x = Math.max(d_x, 0); - var d_y = Math.max(d_y, 0); - - var tempCanvas = document.createElement("canvas"); - var tempCtx = tempCanvas.getContext("2d"); - tempCanvas.width = Math.max(d_x, TOOLS.select_data.w); - tempCanvas.height = Math.max(d_y, TOOLS.select_data.h); - tempCtx.drawImage(canvas_active(true), TOOLS.select_data.x, TOOLS.select_data.y, TOOLS.select_data.w, TOOLS.select_data.h, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h); - - canvas_active().clearRect(s_x, s_y, d_x, d_y); - canvas_active().drawImage(tempCanvas, 0, 0, TOOLS.select_data.w, TOOLS.select_data.h, s_x, s_y, d_x, d_y); - - TOOLS.select_data.x = s_x; - TOOLS.select_data.y = s_y; - TOOLS.select_data.w = d_x; - TOOLS.select_data.h = d_y; - } - } - TOOLS.draw_selected_area(); - LAYER.update_info_block(); - } - }; - this.check_mouse_pos = function(x, y, size, mouse_x, mouse_y){ - if(mouse_x > x-round(size) && mouse_x < x+round(size)) - if(mouse_y > y-round(size) && mouse_y < y+round(size)) - return true; - return false; - }; - this.draw_selected_area = function(no_resize){ - if(TOOLS.select_data == false) return false; - //draw area - canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - var x = TOOLS.select_data.x; - var y = TOOLS.select_data.y; - var w = TOOLS.select_data.w; - var h = TOOLS.select_data.h; - if(ZOOM != 100){ - x = round(x); - y = round(y); - w = round(w); - h = round(h); - } - - //fill - canvas_front.fillStyle = "rgba(0, 255, 0, 0.3)"; - canvas_front.fillRect(x, y, w, h); - if(ZOOM <= 100){ - //borders - canvas_front.strokeStyle = "rgba(0, 255, 0, 1)"; - canvas_front.lineWidth = 1; - canvas_front.strokeRect(x+0.5, y+0.5, w, h); - } - if(no_resize == true) return true; - - //draw carners - square(x, y, 0, 0); - square(x+w, y, -1, 0); - square(x, y+h, 0, -1); - square(x+w, y+h, -1, -1); - - //draw centers - square(x+w/2, y, 0, 0); - square(x, y+h/2, 0, 0); - square(x+w/2, y+h, 0, -1); - square(x+w, y+h/2, -1, 0); - - function square(x, y, mx, my){ - var sr_size = Math.ceil(CON.sr_size/ZOOM*100); - x = round(x); - y = round(y); - canvas_front.beginPath(); - canvas_front.rect(x + mx * round(sr_size), y + my * round(sr_size), sr_size, sr_size); - canvas_front.fillStyle = "#0000ff"; - canvas_front.fill(); - } - }; - this.save_EXIF = function(){ - TOOLS.EXIF = this.exifdata; - //check length - var n = 0; - for(var i in TOOLS.EXIF) - n++; - if(n == 0) - TOOLS.EXIF = false; - }; - this.histogram = function(){ - POP.add({name: "param1", title: "Channel:", values: ["Gray", "Red", "Green", "Blue"], onchange: "TOOLS.histogram_onload()" }); - POP.add({title: 'Histogram:', function: function(){ - var html = ''; - return html; - }}); - POP.add({title: "Total pixels:", value: "" }); - POP.add({title: "Average:", value: "" }); - POP.show('Histogram', function(user_response){ - var param1 = parseInt(user_response.param1); - }, undefined, this.histogram_onload); - }; - this.histogram_onload = function(user_response){ - var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var imgData = img.data; - var channel_grey = document.getElementById("pop_data_param1_poptmp0"); - var channel_r = document.getElementById("pop_data_param1_poptmp1"); - var channel_g = document.getElementById("pop_data_param1_poptmp2"); - var channel_b = document.getElementById("pop_data_param1_poptmp3"); - - if(channel_grey.checked == true) channel = channel_grey.value; - else if(channel_r.checked == true) channel = channel_r.value; - else if(channel_g.checked == true) channel = channel_g.value; - else if(channel_b.checked == true) channel = channel_b.value; - - //collect data - var hist_data = []; - for(var i=0; i<= 255; i++) - hist_data[i] = 0; - var total = imgData.length/4; - var sum = 0; - var grey; - - if(channel == 'Gray'){ - for(var i = 0; i < imgData.length; i += 4){ - grey = round((imgData[i] + imgData[i+1] + imgData[i+2]) / 3); - hist_data[grey]++; - sum = sum + imgData[i] + imgData[i+1] + imgData[i+2]; - } - } - else if(channel == 'Red'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i]]++; - sum = sum + imgData[i] * 3; - } - } - else if(channel == 'Green'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i+1]]++; - sum = sum + imgData[i+1] * 3; - } - } - else if(channel == 'Blue'){ - for(var i = 0; i < imgData.length; i += 4){ - hist_data[imgData[i+2]]++; - sum = sum + imgData[i+2] * 3; - } - } - - //draw histogram - var c = document.getElementById("c_h").getContext("2d"); - c.rect(0, 0, 255, 100); - c.fillStyle = "#ffffff"; - c.fill(); - for(var i = 0; i <= 255; i++){ - if(hist_data[i] == 0) continue; - c.beginPath(); - c.strokeStyle = "#000000"; - c.lineWidth = 1; - c.moveTo(i + 0.5, 100 + 0.5); - c.lineTo(i + 0.5, 100 - round(hist_data[i]*255*100/total/6) + 0.5); - c.stroke(); - } - - document.getElementById("pop_data_totalpixel").value = HELPER.number_format(total, 0); - if(total > 0) - average = round(sum * 10 / total / 3) / 10; - else - average = '-'; - document.getElementById("pop_data_average").value = average; - }; - this.generate_sprites = function(gap){ - if(LAYERS.length == 1) return false; - MAIN.save_state(); + EDIT.save_state(); LAYER.layer_add(); var xx = 0; var yy = 0; @@ -1826,321 +129,114 @@ function TOOLS_CLASS(){ tmp.height = HEIGHT; var W = WIDTH; var H = HEIGHT; - for(var i in LAYERS){ - if(i == LAYER.layer_active) continue; //end - if(LAYERS[i].visible == false) continue; - + for (var i in LAYER.layers) { + if (i == LAYER.layer_active) + continue; //end + if (LAYER.layers[i].visible == false) + continue; + tmp.getContext("2d").clearRect(0, 0, W, H); - tmp.getContext("2d").drawImage(document.getElementById(LAYERS[i].name), 0, 0); - - var trim_details = DRAW.trim_info(tmp, false); //trim - if(WIDTH == trim_details.left) continue; //empty layer + tmp.getContext("2d").drawImage(document.getElementById(LAYER.layers[i].name), 0, 0); + + var trim_details = IMAGE.trim_info(tmp, false); //trim + if (WIDTH == trim_details.left) + continue; //empty layer var width = W - trim_details.left - trim_details.right; var height = H - trim_details.top - trim_details.bottom; - - if(xx + width > WIDTH){ - xx = 0; - yy += max_height; - max_height = 0; - } - if(yy % gap > 0 && gap > 0) - yy = yy - yy % gap + gap; - if(yy + height > HEIGHT){ - CON.autosize = false; - HEIGHT = yy + height; - RATIO = WIDTH/HEIGHT; - LAYER.set_canvas_size(); - } - - canvas_active().drawImage(tmp, trim_details.left, trim_details.top, width, height, xx, yy, width, height); - xx += width; - if(gap > 0) - xx = xx - xx % gap + gap; - - if(height > max_height) - max_height = height; - if(xx > WIDTH){ + + if (xx + width > WIDTH) { xx = 0; yy += max_height; max_height = 0; - } } - }; - this.unique_colors_count = function(canvas){ - var img = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); - var imgData = img.data; - var colors = []; - var n = 0; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - var key = imgData[i]+"."+imgData[i+1]+"."+imgData[i+2]; - if(colors[key] == undefined){ - colors[key] = 1; - n++; - } + if (yy % gap > 0 && gap > 0) + yy = yy - yy % gap + gap; + if (yy + height > HEIGHT) { + EVENTS.autosize = false; + HEIGHT = yy + height; + LAYER.set_canvas_size(); } - return n; - }; - this.calc_differences = function(sensitivity, canvas_preview, w, h){ - vlayer_active = parseInt(LAYER.layer_active); - //first layer - var img1 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); - var imgData1 = img1.data; - //second layer - var context2 = document.getElementById(LAYERS[vlayer_active + 1].name).getContext("2d"); - var img2 = context2.getImageData(0, 0, WIDTH, HEIGHT); - var imgData2 = img2.data; + canvas_active().drawImage(tmp, trim_details.left, trim_details.top, width, height, xx, yy, width, height); + xx += width; + if (gap > 0) + xx = xx - xx % gap + gap; - //result layer - if(canvas_preview == undefined){ - //add differences layer - LAYER.layer_add(); - canvas_active().rect(0, 0, WIDTH, HEIGHT); - canvas_active().fillStyle = "#ffffff"; - canvas_active().fill(); - var img3 = canvas_active().getImageData(0, 0, WIDTH, HEIGHT); + if (height > max_height) + max_height = height; + if (xx > WIDTH) { + xx = 0; + yy += max_height; + max_height = 0; } - else{ - //work on preview layer - var canvas_tmp = document.createElement("canvas"); - canvas_tmp.width = WIDTH; - canvas_tmp.height = HEIGHT; - var img3 = canvas_tmp.getContext("2d").getImageData(0, 0, WIDTH, HEIGHT); - } - var imgData3 = img3.data; - for(var xx = 0; xx < WIDTH; xx++){ - for(var yy = 0; yy < HEIGHT; yy++){ - var x = (xx + yy * WIDTH) * 4; - if(Math.abs(imgData1[x] - imgData2[x]) > sensitivity - || Math.abs(imgData1[x+1] - imgData2[x+1]) > sensitivity - || Math.abs(imgData1[x+2] - imgData2[x+2]) > sensitivity - || Math.abs(imgData1[x+3] - imgData2[x+3]) > sensitivity){ - imgData3[x] = 255; - imgData3[x+1] = 0; - imgData3[x+2] = 0; - imgData3[x+3] = 255; - } - } - } - if(canvas_preview == undefined) - canvas_active().putImageData(img3, 0, 0); - else{ - canvas_tmp.getContext("2d").rect(0, 0, WIDTH, HEIGHT); - canvas_tmp.getContext("2d").fillStyle = "#ffffff"; - canvas_tmp.getContext("2d").fill(); - canvas_tmp.getContext("2d").putImageData(img3, 0, 0); - canvas_preview.clearRect(0, 0, w, h); - - canvas_preview.save(); - canvas_preview.scale(w/WIDTH, h/HEIGHT); - canvas_preview.drawImage(canvas_tmp, 0, 0); - canvas_preview.restore(); - } - }; - //method = otsu - this.thresholding = function(method, ctx, W, H, only_level){ - var img = ctx.getImageData(0, 0, W, H); - var imgData = img.data; - var hist_data = []; - var grey; - for(var i=0; i<= 255; i++) - hist_data[i] = 0; - for(var i = 0; i < imgData.length; i += 4){ - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - hist_data[grey]++; - } - var level; - if(method == 'otsu') - level = this.otsu(hist_data, W*H); - else - alert('ERROR: unknown method in TOOLS.thresholding().'); - if(only_level === true) - return level; - var c; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - if(grey < level) - c = 0; - else - c = 255; - imgData[i] = c; - imgData[i+1] = c; - imgData[i+2] = c; - } - ctx.putImageData(img, 0, 0); - }; - //http://en.wikipedia.org/wiki/Otsu%27s_Method - this.otsu = function(histogram, total){ - var sum = 0; - for (var i = 1; i < 256; ++i) - sum += i * histogram[i]; - var mB, mF, between; - var sumB = 0; - var wB = 0; - var wF = 0; - var max = 0; - var threshold = 0; - for (var i = 0; i < 256; ++i){ - wB += histogram[i]; - if(wB == 0) continue; - wF = total - wB; - if(wF == 0) break; - sumB += i * histogram[i]; - mB = sumB / wB; - mF = (sum - sumB) / wF; - between = wB * wF * Math.pow(mB - mF, 2); - if(between > max){ - max = between; - threshold = i; - } - } - return threshold; - }; - this.convert_color_to_alpha = function(context, W, H, color){ + } + }; + + this.convert_color_to_alpha = function (context, W, H, color) { var img = context.getImageData(0, 0, W, H); var imgData = img.data; var back_color = HELPER.hex2rgb(color); - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent //calculate difference from requested color, and change alpha - var diff = Math.abs(imgData[i] - back_color.r) + Math.abs(imgData[i+1] - back_color.g) + Math.abs(imgData[i+2] - back_color.b)/3; - imgData[i+3] = Math.round(diff); - + var diff = Math.abs(imgData[i] - back_color.r) + Math.abs(imgData[i + 1] - back_color.g) + Math.abs(imgData[i + 2] - back_color.b) / 3; + imgData[i + 3] = Math.round(diff); + //combining 2 layers in future will change colors, so make changes to get same colors in final image //color_result = color_1 * (alpha_1 / 255) * (1 - A2 / 255) + color_2 * (alpha_2 / 255) //color_2 = (color_result - color_1 * (alpha_1 / 255) * (1 - A2 / 255)) / (alpha_2 / 255) - imgData[i] = Math.ceil((imgData[i] - back_color.r * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - imgData[i+1] = Math.ceil((imgData[i+1] - back_color.g * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - imgData[i+2] = Math.ceil((imgData[i+2] - back_color.b * (1-imgData[i+3]/255)) / (imgData[i+3]/255)); - } + imgData[i] = Math.ceil((imgData[i] - back_color.r * (1 - imgData[i + 3] / 255)) / (imgData[i + 3] / 255)); + imgData[i + 1] = Math.ceil((imgData[i + 1] - back_color.g * (1 - imgData[i + 3] / 255)) / (imgData[i + 3] / 255)); + imgData[i + 2] = Math.ceil((imgData[i + 2] - back_color.b * (1 - imgData[i + 3] / 255)) / (imgData[i + 3] / 255)); + } context.putImageData(img, 0, 0); - }; - this.color_zoom = function(context, W, H, zoom, center){ + }; + + this.color_zoom = function (context, W, H, zoom, center) { var img = context.getImageData(0, 0, W, H); var imgData = img.data; var grey; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - - for(var j=0; j<3; j++){ - var k = i+j; - if(grey > center) + for (var i = 0; i < imgData.length; i += 4) { + if (imgData[i + 3] == 0) + continue; //transparent + + grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]); + + for (var j = 0; j < 3; j++) { + var k = i + j; + if (grey > center) imgData[k] += (imgData[k] - center) * zoom; - else if(grey < center) + else if (grey < center) imgData[k] -= (center - imgData[k]) * zoom; - if(imgData[k] < 0) + if (imgData[k] < 0) imgData[k] = 0; - if(imgData[k] > 255) + if (imgData[k] > 255) imgData[k] = 255; - } } + } context.putImageData(img, 0, 0); - }; - this.recover_alpha = function(context, W, H, level){ + }; + + this.recover_alpha = function (context, W, H, level) { var img = context.getImageData(0, 0, W, H); var imgData = img.data; var tmp; level = parseInt(level); - for(var i = 0; i < imgData.length; i += 4){ - tmp = imgData[i+3] + level; - if(tmp > 255) + for (var i = 0; i < imgData.length; i += 4) { + tmp = imgData[i + 3] + level; + if (tmp > 255) tmp = 255; - imgData[i+3] = tmp; - } - context.putImageData(img, 0, 0); - }; - this.heatmap_effect = function(context, W, H){ - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - var grey, RGB; - for(var i = 0; i < imgData.length; i += 4){ - if(imgData[i+3] == 0) continue; //transparent - grey = round(0.2126 * imgData[i] + 0.7152 * imgData[i+1] + 0.0722 * imgData[i+2]); - RGB = this.color2heat(grey); - imgData[i] = RGB.R; - imgData[i+1] = RGB.G; - imgData[i+2] = RGB.B; - } - context.putImageData(img, 0, 0); - }; - this.color2heat = function(value){ - var RGB = {R:0,G:0,B:0}; - value = value / 255; - if (0 <= value && value <= 1/8) { - RGB.R = 0; - RGB.G = 0; - RGB.B = 4*value + .5; // .5 - 1 // b = 1/2 - } else if (1/8 < value && value <= 3/8) { - RGB.R = 0; - RGB.G = 4*value - .5; // 0 - 1 // b = - 1/2 - RGB.B = 1; // small fix - } else if (3/8 < value && value <= 5/8) { - RGB.R = 4*value - 1.5; // 0 - 1 // b = - 3/2 - RGB.G = 1; - RGB.B = -4*value + 2.5; // 1 - 0 // b = 5/2 - } else if (5/8 < value && value <= 7/8) { - RGB.R = 1; - RGB.G = -4*value + 3.5; // 1 - 0 // b = 7/2 - RGB.B = 0; - } else if (7/8 < value && value <= 1) { - RGB.R = -4*value + 4.5; // 1 - .5 // b = 9/2 - RGB.G = 0; - RGB.B = 0; - } else { // should never happen - value > 1 - RGB.R = .5; - RGB.G = 0; - RGB.B = 0; + imgData[i + 3] = tmp; } - // scale for hex conversion - RGB.R *= 255; - RGB.G *= 255; - RGB.B *= 255; - - RGB.R = Math.round(RGB.R); - RGB.G = Math.round(RGB.G); - RGB.B = Math.round(RGB.B); - - return RGB; - }; - this.add_borders = function(context, W, H, color, size){ + context.putImageData(img, 0, 0); + }; + + this.add_borders = function (context, W, H, color, size) { context.strokeStyle = color; context.lineWidth = size; - HELPER.roundRect(context, 0 + 0.5, 0 + 0.5, - W-1, H-1, - 0, false, true); - }; - this.grains_effect = function(context, W, H, level){ - if(level == 0) return context; - var img = context.getImageData(0, 0, W, H); - var imgData = img.data; - for(var j = 0; j < H; j++){ - for(var i = 0; i < W; i++){ - var x = (i + j*W) * 4; - if(imgData[x+3] == 0) continue; //transparent - //increase it's lightness - var delta = HELPER.getRandomInt(0, level); - if(delta == 0) continue; - - if(imgData[x] - delta < 0) - imgData[x] = -(imgData[x] - delta); - else - imgData[x] = imgData[x] - delta; - if(imgData[x+1] - delta < 0) - imgData[x+1] = -(imgData[x+1] - delta); - else - imgData[x+1] = imgData[x+1] - delta; - if(imgData[x+2] - delta < 0) - imgData[x+2] = -(imgData[x+2] - delta); - else - imgData[x+2] = imgData[x+2] - delta; - } - } - context.putImageData(img, 0, 0); - }; - } + HELPER.roundRect(context, 0 + 0.5, 0 + 0.5, W - 1, H - 1, 0, false, true); + }; +} \ No newline at end of file diff --git a/libs/imagefilters.js b/libs/imagefilters.js index 5d0d32e..7e7962d 100644 --- a/libs/imagefilters.js +++ b/libs/imagefilters.js @@ -254,7 +254,6 @@ ImageFilters.utils = { }; -// TODO ImageFilters.Translate = function (srcImageData, x, y, interpolation) { }; @@ -1181,15 +1180,11 @@ ImageFilters.Desaturate = function (srcImageData) { return dstImageData; }; -/** - * TODO: use bilinear - */ ImageFilters.DisplacementMapFilter = function (srcImageData, mapImageData, mapX, mapY, componentX, componentY, scaleX, scaleY, mode) { var srcPixels = srcImageData.data, srcWidth = srcImageData.width, srcHeight = srcImageData.height, srcLength = srcPixels.length, -// dstImageData = this.utils.createImageData(srcWidth, srcHeight), dstImageData = ImageFilters.Clone(srcImageData), dstPixels = dstImageData.data; @@ -1993,7 +1988,6 @@ ImageFilters.Twril = function (srcImageData, centerX, centerY, radius, angle, ed } else { // nearest neighbor // round tx, ty - // TODO edge actions!! srcIndex = ((ty + 0.5 | 0) * srcWidth + (tx + 0.5 | 0)) << 2; dstPixels[dstIndex] = srcPixels[srcIndex]; dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1]; diff --git a/libs/jquery.js b/libs/jquery.js index 39265b6..3ae1cdc 100644 --- a/libs/jquery.js +++ b/libs/jquery.js @@ -1,5 +1,4 @@ -/*! jQuery v1.12.0 | (c) jQuery Foundation | jquery.org/license */ -!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="1.12.0",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(e=arguments[h]))for(d in e)a=g[d],c=e[d],g!==c&&(j&&c&&(n.isPlainObject(c)||(b=n.isArray(c)))?(b?(b=!1,f=a&&n.isArray(a)?a:[]):f=a&&n.isPlainObject(a)?a:{},g[d]=n.extend(j,f,c)):void 0!==c&&(g[d]=c));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray||function(a){return"array"===n.type(a)},isWindow:function(a){return null!=a&&a==a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},isPlainObject:function(a){var b;if(!a||"object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;try{if(a.constructor&&!k.call(a,"constructor")&&!k.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}if(!l.ownFirst)for(b in a)return k.call(a,b);for(b in a);return void 0===b||k.call(a,b)},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(b){b&&n.trim(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){var d;if(b){if(h)return h.call(b,a,c);for(d=b.length,c=c?0>c?Math.max(0,d+c):c:0;d>c;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,b){var c=+b.length,d=0,e=a.length;while(c>d)a[e++]=b[d++];if(c!==c)while(void 0!==b[d])a[e++]=b[d++];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(f=a[b],b=a,a=f),n.isFunction(a)?(c=e.call(arguments,2),d=function(){return a.apply(b||this,c.concat(e.call(arguments)))},d.guid=a.guid=a.guid||n.guid++,d):void 0},now:function(){return+new Date},support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="    ",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++db;b++)d+=a[b].value;return d}function ra(a,b,c){var d=b.dir,e=c&&"parentNode"===d,f=x++;return b.first?function(b,c,f){while(b=b[d])if(1===b.nodeType||e)return a(b,c,f)}:function(b,c,g){var h,i,j,k=[w,f];if(g){while(b=b[d])if((1===b.nodeType||e)&&a(b,c,g))return!0}else while(b=b[d])if(1===b.nodeType||e){if(j=b[u]||(b[u]={}),i=j[b.uniqueID]||(j[b.uniqueID]={}),(h=i[d])&&h[0]===w&&h[1]===f)return k[2]=h[2];if(i[d]=k,k[2]=a(b,c,g))return!0}}}function sa(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function ta(a,b,c){for(var d=0,e=b.length;e>d;d++)fa(a,b[d],c);return c}function ua(a,b,c,d,e){for(var f,g=[],h=0,i=a.length,j=null!=b;i>h;h++)(f=a[h])&&(!c||c(f,d,e))&&(g.push(f),j&&b.push(h));return g}function va(a,b,c,d,e,f){return d&&!d[u]&&(d=va(d)),e&&!e[u]&&(e=va(e,f)),ha(function(f,g,h,i){var j,k,l,m=[],n=[],o=g.length,p=f||ta(b||"*",h.nodeType?[h]:h,[]),q=!a||!f&&b?p:ua(p,m,a,h,i),r=c?e||(f?a:o||d)?[]:g:q;if(c&&c(q,r,h,i),d){j=ua(r,n),d(j,[],h,i),k=j.length;while(k--)(l=j[k])&&(r[n[k]]=!(q[n[k]]=l))}if(f){if(e||a){if(e){j=[],k=r.length;while(k--)(l=r[k])&&j.push(q[k]=l);e(null,r=[],j,i)}k=r.length;while(k--)(l=r[k])&&(j=e?J(f,l):m[k])>-1&&(f[j]=!(g[j]=l))}}else r=ua(r===g?r.splice(o,r.length):r),e?e(null,g,r,i):H.apply(g,r)})}function wa(a){for(var b,c,e,f=a.length,g=d.relative[a[0].type],h=g||d.relative[" "],i=g?1:0,k=ra(function(a){return a===b},h,!0),l=ra(function(a){return J(b,a)>-1},h,!0),m=[function(a,c,d){var e=!g&&(d||c!==j)||((b=c).nodeType?k(a,c,d):l(a,c,d));return b=null,e}];f>i;i++)if(c=d.relative[a[i].type])m=[ra(sa(m),c)];else{if(c=d.filter[a[i].type].apply(null,a[i].matches),c[u]){for(e=++i;f>e;e++)if(d.relative[a[e].type])break;return va(i>1&&sa(m),i>1&&qa(a.slice(0,i-1).concat({value:" "===a[i-2].type?"*":""})).replace(Q,"$1"),c,e>i&&wa(a.slice(i,e)),f>e&&wa(a=a.slice(e)),f>e&&qa(a))}m.push(c)}return sa(m)}function xa(a,b){var c=b.length>0,e=a.length>0,f=function(f,g,h,i,k){var l,o,q,r=0,s="0",t=f&&[],u=[],v=j,x=f||e&&d.find.TAG("*",k),y=w+=null==v?1:Math.random()||.1,z=x.length;for(k&&(j=g===n||g||k);s!==z&&null!=(l=x[s]);s++){if(e&&l){o=0,g||l.ownerDocument===n||(m(l),h=!p);while(q=a[o++])if(q(l,g||n,h)){i.push(l);break}k&&(w=y)}c&&((l=!q&&l)&&r--,f&&t.push(l))}if(r+=s,c&&s!==r){o=0;while(q=b[o++])q(t,u,g,h);if(f){if(r>0)while(s--)t[s]||u[s]||(u[s]=F.call(i));u=ua(u)}H.apply(i,u),k&&!f&&u.length>0&&r+b.length>1&&fa.uniqueSort(i)}return k&&(w=y,j=v),t};return c?ha(f):f}return h=fa.compile=function(a,b){var c,d=[],e=[],f=A[a+" "];if(!f){b||(b=g(a)),c=b.length;while(c--)f=wa(b[c]),f[u]?d.push(f):e.push(f);f=A(a,xa(e,d)),f.selector=a}return f},i=fa.select=function(a,b,e,f){var i,j,k,l,m,n="function"==typeof a&&a,o=!f&&g(a=n.selector||a);if(e=e||[],1===o.length){if(j=o[0]=o[0].slice(0),j.length>2&&"ID"===(k=j[0]).type&&c.getById&&9===b.nodeType&&p&&d.relative[j[1].type]){if(b=(d.find.ID(k.matches[0].replace(ba,ca),b)||[])[0],!b)return e;n&&(b=b.parentNode),a=a.slice(j.shift().value.length)}i=W.needsContext.test(a)?0:j.length;while(i--){if(k=j[i],d.relative[l=k.type])break;if((m=d.find[l])&&(f=m(k.matches[0].replace(ba,ca),_.test(j[0].type)&&oa(b.parentNode)||b))){if(j.splice(i,1),a=f.length&&qa(j),!a)return H.apply(e,f),e;break}}}return(n||h(a,o))(f,b,!p,e,!b||_.test(a)&&oa(b.parentNode)||b),e},c.sortStable=u.split("").sort(B).join("")===u,c.detectDuplicates=!!l,m(),c.sortDetached=ia(function(a){return 1&a.compareDocumentPosition(n.createElement("div"))}),ia(function(a){return a.innerHTML="","#"===a.firstChild.getAttribute("href")})||ja("type|href|height|width",function(a,b,c){return c?void 0:a.getAttribute(b,"type"===b.toLowerCase()?1:2)}),c.attributes&&ia(function(a){return a.innerHTML="",a.firstChild.setAttribute("value",""),""===a.firstChild.getAttribute("value")})||ja("value",function(a,b,c){return c||"input"!==a.nodeName.toLowerCase()?void 0:a.defaultValue}),ia(function(a){return null==a.getAttribute("disabled")})||ja(K,function(a,b,c){var d;return c?void 0:a[b]===!0?b.toLowerCase():(d=a.getAttributeNode(b))&&d.specified?d.value:null}),fa}(a);n.find=t,n.expr=t.selectors,n.expr[":"]=n.expr.pseudos,n.uniqueSort=n.unique=t.uniqueSort,n.text=t.getText,n.isXMLDoc=t.isXML,n.contains=t.contains;var u=function(a,b,c){var d=[],e=void 0!==c;while((a=a[b])&&9!==a.nodeType)if(1===a.nodeType){if(e&&n(a).is(c))break;d.push(a)}return d},v=function(a,b){for(var c=[];a;a=a.nextSibling)1===a.nodeType&&a!==b&&c.push(a);return c},w=n.expr.match.needsContext,x=/^<([\w-]+)\s*\/?>(?:<\/\1>|)$/,y=/^.[^:#\[\.,]*$/;function z(a,b,c){if(n.isFunction(b))return n.grep(a,function(a,d){return!!b.call(a,d,a)!==c});if(b.nodeType)return n.grep(a,function(a){return a===b!==c});if("string"==typeof b){if(y.test(b))return n.filter(b,a,c);b=n.filter(b,a)}return n.grep(a,function(a){return n.inArray(a,b)>-1!==c})}n.filter=function(a,b,c){var d=b[0];return c&&(a=":not("+a+")"),1===b.length&&1===d.nodeType?n.find.matchesSelector(d,a)?[d]:[]:n.find.matches(a,n.grep(b,function(a){return 1===a.nodeType}))},n.fn.extend({find:function(a){var b,c=[],d=this,e=d.length;if("string"!=typeof a)return this.pushStack(n(a).filter(function(){for(b=0;e>b;b++)if(n.contains(d[b],this))return!0}));for(b=0;e>b;b++)n.find(a,d[b],c);return c=this.pushStack(e>1?n.unique(c):c),c.selector=this.selector?this.selector+" "+a:a,c},filter:function(a){return this.pushStack(z(this,a||[],!1))},not:function(a){return this.pushStack(z(this,a||[],!0))},is:function(a){return!!z(this,"string"==typeof a&&w.test(a)?n(a):a||[],!1).length}});var A,B=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=n.fn.init=function(a,b,c){var e,f;if(!a)return this;if(c=c||A,"string"==typeof a){if(e="<"===a.charAt(0)&&">"===a.charAt(a.length-1)&&a.length>=3?[null,a,null]:B.exec(a),!e||!e[1]&&b)return!b||b.jquery?(b||c).find(a):this.constructor(b).find(a);if(e[1]){if(b=b instanceof n?b[0]:b,n.merge(this,n.parseHTML(e[1],b&&b.nodeType?b.ownerDocument||b:d,!0)),x.test(e[1])&&n.isPlainObject(b))for(e in b)n.isFunction(this[e])?this[e](b[e]):this.attr(e,b[e]);return this}if(f=d.getElementById(e[2]),f&&f.parentNode){if(f.id!==e[2])return A.find(a);this.length=1,this[0]=f}return this.context=d,this.selector=a,this}return a.nodeType?(this.context=this[0]=a,this.length=1,this):n.isFunction(a)?"undefined"!=typeof c.ready?c.ready(a):a(n):(void 0!==a.selector&&(this.selector=a.selector,this.context=a.context),n.makeArray(a,this))};C.prototype=n.fn,A=n(d);var D=/^(?:parents|prev(?:Until|All))/,E={children:!0,contents:!0,next:!0,prev:!0};n.fn.extend({has:function(a){var b,c=n(a,this),d=c.length;return this.filter(function(){for(b=0;d>b;b++)if(n.contains(this,c[b]))return!0})},closest:function(a,b){for(var c,d=0,e=this.length,f=[],g=w.test(a)||"string"!=typeof a?n(a,b||this.context):0;e>d;d++)for(c=this[d];c&&c!==b;c=c.parentNode)if(c.nodeType<11&&(g?g.index(c)>-1:1===c.nodeType&&n.find.matchesSelector(c,a))){f.push(c);break}return this.pushStack(f.length>1?n.uniqueSort(f):f)},index:function(a){return a?"string"==typeof a?n.inArray(this[0],n(a)):n.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(a,b){return this.pushStack(n.uniqueSort(n.merge(this.get(),n(a,b))))},addBack:function(a){return this.add(null==a?this.prevObject:this.prevObject.filter(a))}});function F(a,b){do a=a[b];while(a&&1!==a.nodeType);return a}n.each({parent:function(a){var b=a.parentNode;return b&&11!==b.nodeType?b:null},parents:function(a){return u(a,"parentNode")},parentsUntil:function(a,b,c){return u(a,"parentNode",c)},next:function(a){return F(a,"nextSibling")},prev:function(a){return F(a,"previousSibling")},nextAll:function(a){return u(a,"nextSibling")},prevAll:function(a){return u(a,"previousSibling")},nextUntil:function(a,b,c){return u(a,"nextSibling",c)},prevUntil:function(a,b,c){return u(a,"previousSibling",c)},siblings:function(a){return v((a.parentNode||{}).firstChild,a)},children:function(a){return v(a.firstChild)},contents:function(a){return n.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:n.merge([],a.childNodes)}},function(a,b){n.fn[a]=function(c,d){var e=n.map(this,b,c);return"Until"!==a.slice(-5)&&(d=c),d&&"string"==typeof d&&(e=n.filter(d,e)),this.length>1&&(E[a]||(e=n.uniqueSort(e)),D.test(a)&&(e=e.reverse())),this.pushStack(e)}});var G=/\S+/g;function H(a){var b={};return n.each(a.match(G)||[],function(a,c){b[c]=!0}),b}n.Callbacks=function(a){a="string"==typeof a?H(a):n.extend({},a);var b,c,d,e,f=[],g=[],h=-1,i=function(){for(e=a.once,d=b=!0;g.length;h=-1){c=g.shift();while(++h-1)f.splice(c,1),h>=c&&h--}),this},has:function(a){return a?n.inArray(a,f)>-1:f.length>0},empty:function(){return f&&(f=[]),this},disable:function(){return e=g=[],f=c="",this},disabled:function(){return!f},lock:function(){return e=!0,c||j.disable(),this},locked:function(){return!!e},fireWith:function(a,c){return e||(c=c||[],c=[a,c.slice?c.slice():c],g.push(c),b||i()),this},fire:function(){return j.fireWith(this,arguments),this},fired:function(){return!!d}};return j},n.extend({Deferred:function(a){var b=[["resolve","done",n.Callbacks("once memory"),"resolved"],["reject","fail",n.Callbacks("once memory"),"rejected"],["notify","progress",n.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return n.Deferred(function(c){n.each(b,function(b,f){var g=n.isFunction(a[b])&&a[b];e[f[1]](function(){var a=g&&g.apply(this,arguments);a&&n.isFunction(a.promise)?a.promise().progress(c.notify).done(c.resolve).fail(c.reject):c[f[0]+"With"](this===d?c.promise():this,g?[a]:arguments)})}),a=null}).promise()},promise:function(a){return null!=a?n.extend(a,d):d}},e={};return d.pipe=d.then,n.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[1^a][2].disable,b[2][2].lock),e[f[0]]=function(){return e[f[0]+"With"](this===e?d:this,arguments),this},e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=e.call(arguments),d=c.length,f=1!==d||a&&n.isFunction(a.promise)?d:0,g=1===f?a:n.Deferred(),h=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?e.call(arguments):d,c===i?g.notifyWith(b,c):--f||g.resolveWith(b,c)}},i,j,k;if(d>1)for(i=new Array(d),j=new Array(d),k=new Array(d);d>b;b++)c[b]&&n.isFunction(c[b].promise)?c[b].promise().progress(h(b,j,i)).done(h(b,k,c)).fail(g.reject):--f;return f||g.resolveWith(k,c),g.promise()}});var I;n.fn.ready=function(a){return n.ready.promise().done(a),this},n.extend({isReady:!1,readyWait:1,holdReady:function(a){a?n.readyWait++:n.ready(!0)},ready:function(a){(a===!0?--n.readyWait:n.isReady)||(n.isReady=!0,a!==!0&&--n.readyWait>0||(I.resolveWith(d,[n]),n.fn.triggerHandler&&(n(d).triggerHandler("ready"),n(d).off("ready"))))}});function J(){d.addEventListener?(d.removeEventListener("DOMContentLoaded",K),a.removeEventListener("load",K)):(d.detachEvent("onreadystatechange",K),a.detachEvent("onload",K))}function K(){(d.addEventListener||"load"===a.event.type||"complete"===d.readyState)&&(J(),n.ready())}n.ready.promise=function(b){if(!I)if(I=n.Deferred(),"complete"===d.readyState)a.setTimeout(n.ready);else if(d.addEventListener)d.addEventListener("DOMContentLoaded",K),a.addEventListener("load",K);else{d.attachEvent("onreadystatechange",K),a.attachEvent("onload",K);var c=!1;try{c=null==a.frameElement&&d.documentElement}catch(e){}c&&c.doScroll&&!function f(){if(!n.isReady){try{c.doScroll("left")}catch(b){return a.setTimeout(f,50)}J(),n.ready()}}()}return I.promise(b)},n.ready.promise();var L;for(L in n(l))break;l.ownFirst="0"===L,l.inlineBlockNeedsLayout=!1,n(function(){var a,b,c,e;c=d.getElementsByTagName("body")[0],c&&c.style&&(b=d.createElement("div"),e=d.createElement("div"),e.style.cssText="position:absolute;border:0;width:0;height:0;top:0;left:-9999px",c.appendChild(e).appendChild(b),"undefined"!=typeof b.style.zoom&&(b.style.cssText="display:inline;margin:0;border:0;padding:1px;width:1px;zoom:1",l.inlineBlockNeedsLayout=a=3===b.offsetWidth,a&&(c.style.zoom=1)),c.removeChild(e))}),function(){var a=d.createElement("div");l.deleteExpando=!0;try{delete a.test}catch(b){l.deleteExpando=!1}a=null}();var M=function(a){var b=n.noData[(a.nodeName+" ").toLowerCase()],c=+a.nodeType||1;return 1!==c&&9!==c?!1:!b||b!==!0&&a.getAttribute("classid")===b},N=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,O=/([A-Z])/g;function P(a,b,c){if(void 0===c&&1===a.nodeType){var d="data-"+b.replace(O,"-$1").toLowerCase();if(c=a.getAttribute(d),"string"==typeof c){try{c="true"===c?!0:"false"===c?!1:"null"===c?null:+c+""===c?+c:N.test(c)?n.parseJSON(c):c}catch(e){}n.data(a,b,c)}else c=void 0}return c}function Q(a){var b;for(b in a)if(("data"!==b||!n.isEmptyObject(a[b]))&&"toJSON"!==b)return!1; -return!0}function R(a,b,d,e){if(M(a)){var f,g,h=n.expando,i=a.nodeType,j=i?n.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||n.guid++:h),j[k]||(j[k]=i?{}:{toJSON:n.noop}),("object"==typeof b||"function"==typeof b)&&(e?j[k]=n.extend(j[k],b):j[k].data=n.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void 0!==d&&(g[n.camelCase(b)]=d),"string"==typeof b?(f=g[b],null==f&&(f=g[n.camelCase(b)])):f=g,f}}function S(a,b,c){if(M(a)){var d,e,f=a.nodeType,g=f?n.cache:a,h=f?a[n.expando]:n.expando;if(g[h]){if(b&&(d=c?g[h]:g[h].data)){n.isArray(b)?b=b.concat(n.map(b,n.camelCase)):b in d?b=[b]:(b=n.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;while(e--)delete d[b[e]];if(c?!Q(d):!n.isEmptyObject(d))return}(c||(delete g[h].data,Q(g[h])))&&(f?n.cleanData([a],!0):l.deleteExpando||g!=g.window?delete g[h]:g[h]=void 0)}}}n.extend({cache:{},noData:{"applet ":!0,"embed ":!0,"object ":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(a){return a=a.nodeType?n.cache[a[n.expando]]:a[n.expando],!!a&&!Q(a)},data:function(a,b,c){return R(a,b,c)},removeData:function(a,b){return S(a,b)},_data:function(a,b,c){return R(a,b,c,!0)},_removeData:function(a,b){return S(a,b,!0)}}),n.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=n.data(f),1===f.nodeType&&!n._data(f,"parsedAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=n.camelCase(d.slice(5)),P(f,d,e[d])));n._data(f,"parsedAttrs",!0)}return e}return"object"==typeof a?this.each(function(){n.data(this,a)}):arguments.length>1?this.each(function(){n.data(this,a,b)}):f?P(f,a,n.data(f,a)):void 0},removeData:function(a){return this.each(function(){n.removeData(this,a)})}}),n.extend({queue:function(a,b,c){var d;return a?(b=(b||"fx")+"queue",d=n._data(a,b),c&&(!d||n.isArray(c)?d=n._data(a,b,n.makeArray(c)):d.push(c)),d||[]):void 0},dequeue:function(a,b){b=b||"fx";var c=n.queue(a,b),d=c.length,e=c.shift(),f=n._queueHooks(a,b),g=function(){n.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return n._data(a,c)||n._data(a,c,{empty:n.Callbacks("once memory").add(function(){n._removeData(a,b+"queue"),n._removeData(a,c)})})}}),n.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.lengthh;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},Z=/^(?:checkbox|radio)$/i,$=/<([\w:-]+)/,_=/^$|\/(?:java|ecma)script/i,aa=/^\s+/,ba="abbr|article|aside|audio|bdi|canvas|data|datalist|details|dialog|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|picture|progress|section|summary|template|time|video";function ca(a){var b=ba.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}!function(){var a=d.createElement("div"),b=d.createDocumentFragment(),c=d.createElement("input");a.innerHTML="
    a",l.leadingWhitespace=3===a.firstChild.nodeType,l.tbody=!a.getElementsByTagName("tbody").length,l.htmlSerialize=!!a.getElementsByTagName("link").length,l.html5Clone="<:nav>"!==d.createElement("nav").cloneNode(!0).outerHTML,c.type="checkbox",c.checked=!0,b.appendChild(c),l.appendChecked=c.checked,a.innerHTML="",l.noCloneChecked=!!a.cloneNode(!0).lastChild.defaultValue,b.appendChild(a),c=d.createElement("input"),c.setAttribute("type","radio"),c.setAttribute("checked","checked"),c.setAttribute("name","t"),a.appendChild(c),l.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,l.noCloneEvent=!!a.addEventListener,a[n.expando]=1,l.attributes=!a.getAttribute(n.expando)}();var da={option:[1,""],legend:[1,"
    ","
    "],area:[1,"",""],param:[1,"",""],thead:[1,"","
    "],tr:[2,"","
    "],col:[2,"","
    "],td:[3,"","
    "],_default:l.htmlSerialize?[0,"",""]:[1,"X
    ","
    "]};da.optgroup=da.option,da.tbody=da.tfoot=da.colgroup=da.caption=da.thead,da.th=da.td;function ea(a,b){var c,d,e=0,f="undefined"!=typeof a.getElementsByTagName?a.getElementsByTagName(b||"*"):"undefined"!=typeof a.querySelectorAll?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||n.nodeName(d,b)?f.push(d):n.merge(f,ea(d,b));return void 0===b||b&&n.nodeName(a,b)?n.merge([a],f):f}function fa(a,b){for(var c,d=0;null!=(c=a[d]);d++)n._data(c,"globalEval",!b||n._data(b[d],"globalEval"))}var ga=/<|&#?\w+;/,ha=/r;r++)if(g=a[r],g||0===g)if("object"===n.type(g))n.merge(q,g.nodeType?[g]:g);else if(ga.test(g)){i=i||p.appendChild(b.createElement("div")),j=($.exec(g)||["",""])[1].toLowerCase(),m=da[j]||da._default,i.innerHTML=m[1]+n.htmlPrefilter(g)+m[2],f=m[0];while(f--)i=i.lastChild;if(!l.leadingWhitespace&&aa.test(g)&&q.push(b.createTextNode(aa.exec(g)[0])),!l.tbody){g="table"!==j||ha.test(g)?""!==m[1]||ha.test(g)?0:i:i.firstChild,f=g&&g.childNodes.length;while(f--)n.nodeName(k=g.childNodes[f],"tbody")&&!k.childNodes.length&&g.removeChild(k)}n.merge(q,i.childNodes),i.textContent="";while(i.firstChild)i.removeChild(i.firstChild);i=p.lastChild}else q.push(b.createTextNode(g));i&&p.removeChild(i),l.appendChecked||n.grep(ea(q,"input"),ia),r=0;while(g=q[r++])if(d&&n.inArray(g,d)>-1)e&&e.push(g);else if(h=n.contains(g.ownerDocument,g),i=ea(p.appendChild(g),"script"),h&&fa(i),c){f=0;while(g=i[f++])_.test(g.type||"")&&c.push(g)}return i=null,p}!function(){var b,c,e=d.createElement("div");for(b in{submit:!0,change:!0,focusin:!0})c="on"+b,(l[b]=c in a)||(e.setAttribute(c,"t"),l[b]=e.attributes[c].expando===!1);e=null}();var ka=/^(?:input|select|textarea)$/i,la=/^key/,ma=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,na=/^(?:focusinfocus|focusoutblur)$/,oa=/^([^.]*)(?:\.(.+)|)/;function pa(){return!0}function qa(){return!1}function ra(){try{return d.activeElement}catch(a){}}function sa(a,b,c,d,e,f){var g,h;if("object"==typeof b){"string"!=typeof c&&(d=d||c,c=void 0);for(h in b)sa(a,h,c,d,b[h],f);return a}if(null==d&&null==e?(e=c,d=c=void 0):null==e&&("string"==typeof c?(e=d,d=void 0):(e=d,d=c,c=void 0)),e===!1)e=qa;else if(!e)return a;return 1===f&&(g=e,e=function(a){return n().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=n.guid++)),a.each(function(){n.event.add(this,b,e,d,c)})}n.event={global:{},add:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n._data(a);if(r){c.handler&&(i=c,c=i.handler,e=i.selector),c.guid||(c.guid=n.guid++),(g=r.events)||(g=r.events={}),(k=r.handle)||(k=r.handle=function(a){return"undefined"==typeof n||a&&n.event.triggered===a.type?void 0:n.event.dispatch.apply(k.elem,arguments)},k.elem=a),b=(b||"").match(G)||[""],h=b.length;while(h--)f=oa.exec(b[h])||[],o=q=f[1],p=(f[2]||"").split(".").sort(),o&&(j=n.event.special[o]||{},o=(e?j.delegateType:j.bindType)||o,j=n.event.special[o]||{},l=n.extend({type:o,origType:q,data:d,handler:c,guid:c.guid,selector:e,needsContext:e&&n.expr.match.needsContext.test(e),namespace:p.join(".")},i),(m=g[o])||(m=g[o]=[],m.delegateCount=0,j.setup&&j.setup.call(a,d,p,k)!==!1||(a.addEventListener?a.addEventListener(o,k,!1):a.attachEvent&&a.attachEvent("on"+o,k))),j.add&&(j.add.call(a,l),l.handler.guid||(l.handler.guid=c.guid)),e?m.splice(m.delegateCount++,0,l):m.push(l),n.event.global[o]=!0);a=null}},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,o,p,q,r=n.hasData(a)&&n._data(a);if(r&&(k=r.events)){b=(b||"").match(G)||[""],j=b.length;while(j--)if(h=oa.exec(b[j])||[],o=q=h[1],p=(h[2]||"").split(".").sort(),o){l=n.event.special[o]||{},o=(d?l.delegateType:l.bindType)||o,m=k[o]||[],h=h[2]&&new RegExp("(^|\\.)"+p.join("\\.(?:.*\\.|)")+"(\\.|$)"),i=f=m.length;while(f--)g=m[f],!e&&q!==g.origType||c&&c.guid!==g.guid||h&&!h.test(g.namespace)||d&&d!==g.selector&&("**"!==d||!g.selector)||(m.splice(f,1),g.selector&&m.delegateCount--,l.remove&&l.remove.call(a,g));i&&!m.length&&(l.teardown&&l.teardown.call(a,p,r.handle)!==!1||n.removeEvent(a,o,r.handle),delete k[o])}else for(o in k)n.event.remove(a,o+b[j],c,d,!0);n.isEmptyObject(k)&&(delete r.handle,n._removeData(a,"events"))}},trigger:function(b,c,e,f){var g,h,i,j,l,m,o,p=[e||d],q=k.call(b,"type")?b.type:b,r=k.call(b,"namespace")?b.namespace.split("."):[];if(i=m=e=e||d,3!==e.nodeType&&8!==e.nodeType&&!na.test(q+n.event.triggered)&&(q.indexOf(".")>-1&&(r=q.split("."),q=r.shift(),r.sort()),h=q.indexOf(":")<0&&"on"+q,b=b[n.expando]?b:new n.Event(q,"object"==typeof b&&b),b.isTrigger=f?2:3,b.namespace=r.join("."),b.rnamespace=b.namespace?new RegExp("(^|\\.)"+r.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,b.result=void 0,b.target||(b.target=e),c=null==c?[b]:n.makeArray(c,[b]),l=n.event.special[q]||{},f||!l.trigger||l.trigger.apply(e,c)!==!1)){if(!f&&!l.noBubble&&!n.isWindow(e)){for(j=l.delegateType||q,na.test(j+q)||(i=i.parentNode);i;i=i.parentNode)p.push(i),m=i;m===(e.ownerDocument||d)&&p.push(m.defaultView||m.parentWindow||a)}o=0;while((i=p[o++])&&!b.isPropagationStopped())b.type=o>1?j:l.bindType||q,g=(n._data(i,"events")||{})[b.type]&&n._data(i,"handle"),g&&g.apply(i,c),g=h&&i[h],g&&g.apply&&M(i)&&(b.result=g.apply(i,c),b.result===!1&&b.preventDefault());if(b.type=q,!f&&!b.isDefaultPrevented()&&(!l._default||l._default.apply(p.pop(),c)===!1)&&M(e)&&h&&e[q]&&!n.isWindow(e)){m=e[h],m&&(e[h]=null),n.event.triggered=q;try{e[q]()}catch(s){}n.event.triggered=void 0,m&&(e[h]=m)}return b.result}},dispatch:function(a){a=n.event.fix(a);var b,c,d,f,g,h=[],i=e.call(arguments),j=(n._data(this,"events")||{})[a.type]||[],k=n.event.special[a.type]||{};if(i[0]=a,a.delegateTarget=this,!k.preDispatch||k.preDispatch.call(this,a)!==!1){h=n.event.handlers.call(this,a,j),b=0;while((f=h[b++])&&!a.isPropagationStopped()){a.currentTarget=f.elem,c=0;while((g=f.handlers[c++])&&!a.isImmediatePropagationStopped())(!a.rnamespace||a.rnamespace.test(g.namespace))&&(a.handleObj=g,a.data=g.data,d=((n.event.special[g.origType]||{}).handle||g.handler).apply(f.elem,i),void 0!==d&&(a.result=d)===!1&&(a.preventDefault(),a.stopPropagation()))}return k.postDispatch&&k.postDispatch.call(this,a),a.result}},handlers:function(a,b){var c,d,e,f,g=[],h=b.delegateCount,i=a.target;if(h&&i.nodeType&&("click"!==a.type||isNaN(a.button)||a.button<1))for(;i!=this;i=i.parentNode||this)if(1===i.nodeType&&(i.disabled!==!0||"click"!==a.type)){for(d=[],c=0;h>c;c++)f=b[c],e=f.selector+" ",void 0===d[e]&&(d[e]=f.needsContext?n(e,this).index(i)>-1:n.find(e,this,null,[i]).length),d[e]&&d.push(f);d.length&&g.push({elem:i,handlers:d})}return h]","i"),va=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:-]+)[^>]*)\/>/gi,wa=/\s*$/g,Aa=ca(d),Ba=Aa.appendChild(d.createElement("div"));function Ca(a,b){return n.nodeName(a,"table")&&n.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function Da(a){return a.type=(null!==n.find.attr(a,"type"))+"/"+a.type,a}function Ea(a){var b=ya.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function Fa(a,b){if(1===b.nodeType&&n.hasData(a)){var c,d,e,f=n._data(a),g=n._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)n.event.add(b,c,h[c][d])}g.data&&(g.data=n.extend({},g.data))}}function Ga(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!l.noCloneEvent&&b[n.expando]){e=n._data(b);for(d in e.events)n.removeEvent(b,d,e.handle);b.removeAttribute(n.expando)}"script"===c&&b.text!==a.text?(Da(b).text=a.text,Ea(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),l.html5Clone&&a.innerHTML&&!n.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&Z.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}function Ha(a,b,c,d){b=f.apply([],b);var e,g,h,i,j,k,m=0,o=a.length,p=o-1,q=b[0],r=n.isFunction(q);if(r||o>1&&"string"==typeof q&&!l.checkClone&&xa.test(q))return a.each(function(e){var f=a.eq(e);r&&(b[0]=q.call(this,e,f.html())),Ha(f,b,c,d)});if(o&&(k=ja(b,a[0].ownerDocument,!1,a,d),e=k.firstChild,1===k.childNodes.length&&(k=e),e||d)){for(i=n.map(ea(k,"script"),Da),h=i.length;o>m;m++)g=k,m!==p&&(g=n.clone(g,!0,!0),h&&n.merge(i,ea(g,"script"))),c.call(a[m],g,m);if(h)for(j=i[i.length-1].ownerDocument,n.map(i,Ea),m=0;h>m;m++)g=i[m],_.test(g.type||"")&&!n._data(g,"globalEval")&&n.contains(j,g)&&(g.src?n._evalUrl&&n._evalUrl(g.src):n.globalEval((g.text||g.textContent||g.innerHTML||"").replace(za,"")));k=e=null}return a}function Ia(a,b,c){for(var d,e=b?n.filter(b,a):a,f=0;null!=(d=e[f]);f++)c||1!==d.nodeType||n.cleanData(ea(d)),d.parentNode&&(c&&n.contains(d.ownerDocument,d)&&fa(ea(d,"script")),d.parentNode.removeChild(d));return a}n.extend({htmlPrefilter:function(a){return a.replace(va,"<$1>")},clone:function(a,b,c){var d,e,f,g,h,i=n.contains(a.ownerDocument,a);if(l.html5Clone||n.isXMLDoc(a)||!ua.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(Ba.innerHTML=a.outerHTML,Ba.removeChild(f=Ba.firstChild)),!(l.noCloneEvent&&l.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||n.isXMLDoc(a)))for(d=ea(f),h=ea(a),g=0;null!=(e=h[g]);++g)d[g]&&Ga(e,d[g]);if(b)if(c)for(h=h||ea(a),d=d||ea(f),g=0;null!=(e=h[g]);g++)Fa(e,d[g]);else Fa(a,f);return d=ea(f,"script"),d.length>0&&fa(d,!i&&ea(a,"script")),d=h=e=null,f},cleanData:function(a,b){for(var d,e,f,g,h=0,i=n.expando,j=n.cache,k=l.attributes,m=n.event.special;null!=(d=a[h]);h++)if((b||M(d))&&(f=d[i],g=f&&j[f])){if(g.events)for(e in g.events)m[e]?n.event.remove(d,e):n.removeEvent(d,e,g.handle);j[f]&&(delete j[f],k||"undefined"==typeof d.removeAttribute?d[i]=void 0:d.removeAttribute(i),c.push(f))}}}),n.fn.extend({domManip:Ha,detach:function(a){return Ia(this,a,!0)},remove:function(a){return Ia(this,a)},text:function(a){return Y(this,function(a){return void 0===a?n.text(this):this.empty().append((this[0]&&this[0].ownerDocument||d).createTextNode(a))},null,a,arguments.length)},append:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.appendChild(a)}})},prepend:function(){return Ha(this,arguments,function(a){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var b=Ca(this,a);b.insertBefore(a,b.firstChild)}})},before:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this)})},after:function(){return Ha(this,arguments,function(a){this.parentNode&&this.parentNode.insertBefore(a,this.nextSibling)})},empty:function(){for(var a,b=0;null!=(a=this[b]);b++){1===a.nodeType&&n.cleanData(ea(a,!1));while(a.firstChild)a.removeChild(a.firstChild);a.options&&n.nodeName(a,"select")&&(a.options.length=0)}return this},clone:function(a,b){return a=null==a?!1:a,b=null==b?a:b,this.map(function(){return n.clone(this,a,b)})},html:function(a){return Y(this,function(a){var b=this[0]||{},c=0,d=this.length;if(void 0===a)return 1===b.nodeType?b.innerHTML.replace(ta,""):void 0;if("string"==typeof a&&!wa.test(a)&&(l.htmlSerialize||!ua.test(a))&&(l.leadingWhitespace||!aa.test(a))&&!da[($.exec(a)||["",""])[1].toLowerCase()]){a=n.htmlPrefilter(a);try{for(;d>c;c++)b=this[c]||{},1===b.nodeType&&(n.cleanData(ea(b,!1)),b.innerHTML=a);b=0}catch(e){}}b&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(){var a=[];return Ha(this,arguments,function(b){var c=this.parentNode;n.inArray(this,a)<0&&(n.cleanData(ea(this)),c&&c.replaceChild(b,this))},a)}}),n.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){n.fn[a]=function(a){for(var c,d=0,e=[],f=n(a),h=f.length-1;h>=d;d++)c=d===h?this:this.clone(!0),n(f[d])[b](c),g.apply(e,c.get());return this.pushStack(e)}});var Ja,Ka={HTML:"block",BODY:"block"};function La(a,b){var c=n(b.createElement(a)).appendTo(b.body),d=n.css(c[0],"display");return c.detach(),d}function Ma(a){var b=d,c=Ka[a];return c||(c=La(a,b),"none"!==c&&c||(Ja=(Ja||n("