diff --git a/config.js b/config.js index ad5562e..1b11044 100644 --- a/config.js +++ b/config.js @@ -6,7 +6,6 @@ //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 diff --git a/index.html b/index.html index 220fcde..4285a70 100644 --- a/index.html +++ b/index.html @@ -64,7 +64,6 @@
Your browser doesn't support canvas.
 -
diff --git a/js/edit.js b/js/edit.js index 2a4093d..dfee9d5 100644 --- a/js/edit.js +++ b/js/edit.js @@ -94,8 +94,8 @@ function EDIT_CLASS() { tmp = new Array(); var new_name = 'Layer #' + (LAYER.layers.length + 1); LAYER.create_canvas(new_name); - LAYER.layers.push({name: new_name, title: new_name, visible: true}); - LAYER.layer_active = LAYER.layers.length - 1; + LAYER.layers.unshift({name: new_name, title: new_name, visible: true}); + LAYER.layer_active = 0; canvas_active().drawImage(PASTE_DATA, 0, 0); LAYER.layer_renew(); }; diff --git a/js/events.js b/js/events.js index 56e6b15..02e8fb1 100644 --- a/js/events.js +++ b/js/events.js @@ -279,7 +279,7 @@ function EVENTS_CLASS() { } //n - new layer else if (k == 78) - LAYER.add_layer(); + LAYER.layer_add(); GUI.zoom(); return true; diff --git a/js/file.js b/js/file.js index 29289a9..c04d885 100644 --- a/js/file.js +++ b/js/file.js @@ -192,7 +192,7 @@ function FILE_CLASS() { } //take data - for (var i in LAYER.layers) { + for(var i = LAYER.layers.length-1; i >=0; i--){ if (LAYER.layers[i].visible == false) continue; if (user_response.layers == 'Selected' && user_response.type != 'JSON' && i != LAYER.layer_active) @@ -276,10 +276,10 @@ function FILE_CLASS() { //layers export_data.layers = []; - for (var i in LAYER.layers) { + for(var i = LAYER.layers.length-1; i >=0; i--){ var layer = { name:LAYER.layers[i].name, - title:LAYER.layers[i].name, + title:LAYER.layers[i].title, visible: 1, opacity: LAYER.layers[i].opacity, }; @@ -290,7 +290,7 @@ function FILE_CLASS() { //image data export_data.image_data = []; - for (var i in LAYER.layers) { + for(var i = LAYER.layers.length-1; i >=0; i--){ var data_tmp = document.getElementById(LAYER.layers[i].name).toDataURL("image/png"); export_data.image_data.push({name: LAYER.layers[i].name, data: data_tmp}); } @@ -351,14 +351,12 @@ function FILE_CLASS() { this.load_json = function (data) { var json = JSON.parse(data); - - //delete old layers - for (var i in LAYER.layers) - LAYER.layer_remove(i); //init new file GUI.ZOOM = 100; MAIN.init(); + + LAYER.remove_all_layers(); //set attributes WIDTH = parseInt(json.info.width); @@ -369,17 +367,16 @@ function FILE_CLASS() { for(var i in json.layers){ var layer = json.layers[i]; var name = layer.name.replace(/[^0-9a-zA-Z-_\. ]/g, ""); + var title = layer.title; var visible = parseInt(layer.visible); var opacity = parseInt(layer.opacity); - 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_add(name); + //update attributes + LAYER.layers[LAYER.layer_active].title = title; + if (visible == 0) + LAYER.layer_visibility(LAYER.layer_active); + LAYER.layers[LAYER.layer_active].opacity = opacity; } LAYER.layer_renew(); diff --git a/js/gui.js b/js/gui.js index 80bed8b..af6015b 100644 --- a/js/gui.js +++ b/js/gui.js @@ -210,7 +210,7 @@ function GUI_CLASS() { //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) { + for(var i = LAYER.layers.length-1; i >=0; i--){ if (LAYER.layers[i].visible == false) continue; canvas_preview.drawImage(document.getElementById(LAYER.layers[i].name), 0, 0, WIDTH, HEIGHT); diff --git a/js/layers.js b/js/layers.js index 4fea014..75f7105 100644 --- a/js/layers.js +++ b/js/layers.js @@ -27,7 +27,132 @@ function LAYER_CLASS() { //new layer this.layer_new = function () { - this.add_layer(); + this.layer_add(); + }; + + //removes all layers + this.remove_all_layers = function(){ + //delete old layers + for (var i = LAYER.layers.length-1; i >= 0; i--) { + LAYER.layer_remove(i, true); + } + layer_max_index = 0; + this.layer_renew(); + }; + + //create layer + this.layer_add = function (name, data) { + layer_max_index++; + + //save selected area + var copy = false; + var last_layer = LAYER.layer_active; + if (DRAW.select_data != false && data == undefined) { + copy = document.createElement("canvas"); + copy.width = DRAW.select_data.w; + copy.height = DRAW.select_data.h; + copy.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); + } + + if (data == undefined) { + //empty layer + if (name == undefined) { + name = 'Layer #' + (layer_max_index); + } + var new_layer = []; + new_layer.name = name; + new_layer.title = name; + new_layer.visible = true; + new_layer.opacity = 1; + LAYER.create_canvas(name); + this.layers.unshift(new_layer); + + //add selected data + if (DRAW.select_data != false) { + //copy user selected data to new layer + canvas_active().drawImage(copy, 0, 0); + + //clear selection + DRAW.select_data = false; + canvas_front.clearRect(0, 0, WIDTH, HEIGHT); + + //switch back to old layer + LAYER.layer_active = last_layer; + } + } + else { + var img = new Image(); + if (data.substring(0, 4) == 'http') + img.crossOrigin = "Anonymous"; //data from other domain - turn on CORS + var _this = this; + + img.onload = function () { + //check size + if (img.width > WIDTH || img.height > HEIGHT) { + if (img.width > WIDTH) + WIDTH = img.width; + if (img.height > HEIGHT) + HEIGHT = img.height; + LAYER.set_canvas_size(); + } + if (_this.layers.length == 1 && EVENTS.autosize == true) { + var trim_info = IMAGE.trim_info(document.getElementById(_this.layers[0].name)); + if (trim_info.left == WIDTH) { + _this.layer_remove(0, true); + WIDTH = img.width; + HEIGHT = img.height; + LAYER.set_canvas_size(false); + } + } + + for (var i in _this.layers) { + if (_this.layers[i].name == name) { + name = 'Layer #' + (layer_max_index); + } + } + LAYER.create_canvas(name); + _this.layers.unshift({ + name: name, + title: name, + visible: true, + opacity: 1 + }); + LAYER.layer_active = 0; + + document.getElementById(name).getContext("2d").globalAlpha = 1; + document.getElementById(name).getContext('2d').drawImage(img, 0, 0); + LAYER.layer_renew(); + IMAGE.zoom_auto(true); + GUI.redraw_preview(); + }; + img.onerror = function (ex) { + POP.add({html: 'The image could not be loaded.

'}); + 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 = 0; + document.getElementById(this.layers[LAYER.layer_active].name).getContext("2d").globalAlpha = 1; + this.layer_renew(); + }; + + this.layer_remove = function (i, force) { + if (this.layers.length == 1 && force == undefined){ + //only 1 layer left + canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + return false; + } + element = document.getElementById(this.layers[i].name); + element.getContext("2d").clearRect(0, 0, WIDTH, HEIGHT); + element.parentNode.removeChild(element); + + this.layers.splice(i, 1); + if (LAYER.layer_active == i) + LAYER.layer_active = Math.max(0, LAYER.layer_active-1); + this.layer_renew(); + GUI.redraw_preview(); }; //dublicate @@ -38,9 +163,8 @@ function LAYER_CLASS() { EDIT.copy_to_clipboard(); DRAW.select_data = false; canvas_front.clearRect(0, 0, WIDTH, HEIGHT); - var tmp = LAYER.layer_active; EDIT.paste('menu'); - LAYER.layer_active = tmp; + LAYER.layer_active = 0; LAYER.layer_renew(); } else { @@ -52,10 +176,10 @@ function LAYER_CLASS() { tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0); //create - var new_name = 'Layer #' + (layer_max_index + 1); + var new_name = 'Layer #' + (layer_max_index); LAYER.create_canvas(new_name); - this.layers.push({name: new_name, title: new_name, visible: true}); - LAYER.layer_active = this.layers.length - 1; + this.layers.unshift({name: new_name, title: new_name, visible: true}); + LAYER.layer_active = 0; canvas_active().drawImage(tmp_data, 0, 0); LAYER.layer_renew(); } @@ -172,7 +296,7 @@ function LAYER_CLASS() { "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]; - if (parseInt(LAYER.layer_active) + 1 >= this.layers.length) { + if (LAYER.layer_active + 1 >= this.layers.length) { POP.add({html: 'This can not be last layer.'}); POP.show('Error', ''); return false; @@ -188,16 +312,18 @@ function LAYER_CLASS() { 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(); + LAYER.canvas_active().clearRect(0, 0, WIDTH, HEIGHT); + LAYER.canvas_active().drawImage(document.getElementById(LAYER.layers[LAYER.layer_active + 1].name), 0, 0); + if (param3 == "Composite") LAYER.canvas_active().globalCompositeOperation = param1; else @@ -214,21 +340,18 @@ function LAYER_CLASS() { 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(); + canvas_preview.clearRect(0, 0, w, h); + LAYER.layer_active++; + canvas_preview.drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); + LAYER.layer_active--; + if (param3 == "Composite") canvas_preview.globalCompositeOperation = param1; else canvas_preview.globalCompositeOperation = param2; - canvas_preview.drawImage(tmp_data, 0, 0); + canvas_preview.drawImage(LAYER.canvas_active(true), 0, 0, WIDTH, HEIGHT, 0, 0, w, h); canvas_preview.restore(); } ); @@ -239,101 +362,29 @@ function LAYER_CLASS() { EDIT.save_state(); if (this.layers.length == 1) return false; + LAYER.layer_active = 0; tmp_data = document.createElement("canvas"); tmp_data.width = WIDTH; tmp_data.height = HEIGHT; - for (var i = 1; i < this.layers.length; i++) { + for (var i = this.layers.length-2; i >= 0; 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; + LAYER.layer_active = this.layers.length-1; canvas_active().drawImage(tmp_data, 0, 0); } - for (var i = this.layers.length - 1; i > 0; i--) { - //delete layer + + //delete layers + for (var i = this.layers.length-2; i >= 0; i--) { LAYER.layer_active = i; LAYER.layer_remove(LAYER.layer_active); } LAYER.layer_renew(); }; - - //create layer - this.layer_add = function (name, data, type) { - tmp = new Array(); - layer_max_index++; - if (data == undefined) { - //empty layer - if (name == undefined) { - name = 'Layer #' + (layer_max_index + 1); - } - tmp.name = name; - tmp.title = name; - tmp.visible = true; - tmp.opacity = 1; - if (this.layers.length == 0) - tmp.primary = 1; - else - LAYER.create_canvas(name); - this.layers.push(tmp); - } - else { - var img = new Image(); - if (data.substring(0, 4) == 'http') - img.crossOrigin = "Anonymous"; //data from other domain - turn on CORS - var _this = this; - img.onload = function () { - //check size - if (img.width > WIDTH || img.height > HEIGHT) { - if (img.width > WIDTH) - WIDTH = img.width; - if (img.height > HEIGHT) - HEIGHT = img.height; - LAYER.set_canvas_size(); - } - if (_this.layers.length == 1 && EVENTS.autosize == true) { - var trim_info = IMAGE.trim_info(document.getElementById(_this.layers[0].name)); - if (trim_info.left == WIDTH) { - WIDTH = img.width; - HEIGHT = img.height; - LAYER.set_canvas_size(false); - } - } - - for (var i in _this.layers) { - if (_this.layers[i].name == name) { - name = 'Layer #' + (layer_max_index + 1); - } - } - LAYER.create_canvas(name); - _this.layers.push({ - name: name, - title: name, - visible: true, - opacity: 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(); - IMAGE.zoom_auto(true); - GUI.redraw_preview(); - }; - img.onerror = function (ex) { - POP.add({html: 'The image could not be loaded.

'}); - 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 = 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) { var new_canvas = document.createElement('canvas'); new_canvas.setAttribute('id', canvas_id); @@ -354,51 +405,39 @@ function LAYER_CLASS() { 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 = this.layers[LAYER.layer_active]; - var content = document.getElementById(this.layers[LAYER.layer_active].name); - var parent = content.parentNode; + var layer_from = this.layers[this.layer_active]; + var parent = document.getElementById('canvas_more'); + var content = document.getElementById(this.layers[this.layer_active].name); if (direction == 'up') { - if (this.layers[LAYER.layer_active - 1] == undefined) + if (this.layer_active == 0) 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); + var layer_to = this.layers[this.layer_active - 1]; + + if(this.layer_active != 1) + parent.insertBefore(content, document.getElementById(this.layers[this.layer_active-2].name)); + else + parent.insertBefore(content, null); + + this.layer_active--; } - else { - if (this.layers[LAYER.layer_active + 1] == undefined) + else if(direction == 'down') { + if (this.layer_active == this.layers.length-1) 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); + + parent.insertBefore(content, document.getElementById(this.layers[this.layer_active+1].name)); + + this.layer_active++; + } + //switch attribures + var layer_to = this.layers[this.layer_active]; + for(var i in layer_to){ + var tmp = layer_to[i]; + layer_to[i] = layer_from[i]; + layer_from[i] = tmp; } - //switch name - var tmp = layer_to.name; - layer_to.name = layer_from.name; - layer_from.name = tmp; - //switch visible - var tmp = layer_to.visible; - layer_to.visible = layer_from.visible; - layer_from.visible = tmp; - //switch opacity - var tmp = layer_to.opacity; - layer_to.opacity = layer_from.opacity; - layer_from.opacity = tmp; - - 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(); GUI.zoom(); return true; @@ -417,19 +456,7 @@ function LAYER_CLASS() { this.layer_renew(); 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); - this.layers.splice(i, 1); - if (LAYER.layer_active >= this.layers.length) - LAYER.layer_active = this.layers.length - 1; - this.layer_renew(); - GUI.redraw_preview(); - }; this.layer_move_active = function (x, y) { var distance = 10; if (EVENTS.ctrl_pressed == true) @@ -446,7 +473,7 @@ function LAYER_CLASS() { }; this.select_layer = function (i) { if (LAYER.layer_active != i) { - LAYER.layer_active = i; //select + LAYER.layer_active = parseInt(i); //select this.layer_renew(); } LAYER.shake(i); @@ -461,11 +488,7 @@ function LAYER_CLASS() { html += '
'; var title = this.layers[i].title; html += '' + HELPER.escapeHtml(title) + ''; - if (this.layers[i].primary != 1) { - html += ''; - } - else - html += ''; + html += ''; //hide if (this.layers[i].visible == true) html += ''; @@ -614,44 +637,10 @@ function LAYER_CLASS() { ); }; 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(); - } + if (base == undefined) + return document.getElementById(LAYER.layers[LAYER.layer_active].name).getContext("2d"); + else + return document.getElementById(LAYER.layers[LAYER.layer_active].name); }; this.calc_differences = function (sensitivity, canvas_preview, w, h) { @@ -714,13 +703,5 @@ function LAYER_CLASS() { } 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.'); + return LAYER.canvas_active(base); } diff --git a/js/main.js b/js/main.js index 5e017d9..288f1dd 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ /* global HELPER, EVENTS, LAYER, POP, FILE, GUI, DRAW */ -/* global WIDTH, HEIGHT, canvas_main, canvas_back, canvas_grid, COLOR, ALPHA */ +/* global WIDTH, HEIGHT, canvas_back, canvas_grid, COLOR, ALPHA */ var MAIN = new MAIN_CLASS(); document.onload = MAIN.init(true); @@ -23,12 +23,9 @@ function MAIN_CLASS() { }; DRAW.select_data = false; - for (var i = LAYER.layers.length-1; i>0; i--) { - LAYER.layer_remove(i); - } + LAYER.remove_all_layers(); LAYER.layers = []; - canvas_main.clearRect(0, 0, WIDTH, HEIGHT); - LAYER.layer_add("Background"); + LAYER.layer_add(); LAYER.set_canvas_size(); GUI.draw_background(canvas_back, WIDTH, HEIGHT); document.getElementById("canvas_preview").width = GUI.PREVIEW_SIZE.w; diff --git a/js/tools.js b/js/tools.js index 799e86d..7449c7f 100644 --- a/js/tools.js +++ b/js/tools.js @@ -135,7 +135,7 @@ function TOOLS_CLASS() { tmp.height = HEIGHT; var W = WIDTH; var H = HEIGHT; - for (var i in LAYER.layers) { + for(var i = LAYER.layers.length-1; i >=0; i--){ if (i == LAYER.layer_active) continue; //end if (LAYER.layers[i].visible == false)