diff --git a/app.js b/app.js
index f5dac91..d6f1fdd 100644
--- a/app.js
+++ b/app.js
@@ -63,81 +63,7 @@ app.open = function(){
selection && selection.destroy();
}
});
- var s = selection = {
- x: mouse.x,
- y: mouse.y,
- w: 1,
- h: 1,
- _x: mouse.x,
- _y: mouse.y,
- _w: 1,
- _h: 1,
- instantiate: function(){
- selection.$ghost.addClass("instantiated").css({
- cursor: Cursor(["move", [8, 8], "move"])
- });
- selection.canvas = document.createElement("canvas");
- selection.canvas.width = selection._w;
- selection.canvas.height = selection._h;
- selection.ctx = selection.canvas.getContext("2d");
- selection.ctx.drawImage(
- canvas,
- selection._x, selection._y,
- selection._w, selection._h,
- 0, 0,
- selection._w, selection._h
- );
-
- // cut the selection from the canvas
- //@TODO: transparency
- //ctx.globalCompositeOperation = "destination-out";
- //ctx.drawImage()...
- ctx.fillStyle = colors[1];
- ctx.fillRect(
- selection._x, selection._y,
- selection._w, selection._h
- );
-
-
- var mox, moy;
- var mousemove = function(e){
- var m = e2c(e);
- selection._x = Math.max(Math.min(m.x - mox, canvas.width), -selection._w);
- selection._y = Math.max(Math.min(m.y - moy, canvas.height), -selection._h);
- //@TODO: DRY
- selection.$ghost.css({
- position: "absolute",
- left: selection._x + 3,
- top: selection._y + 3,
- width: selection._w,
- height: selection._h,
- });
- };
- selection.$ghost.on("mousedown", function(e){
- e.preventDefault();
- mox = e.offsetX;
- moy = e.offsetY;
- $(window).on("mousemove", mousemove);
- $(window).one("mouseup", function(){
- $(window).off("mousemove", mousemove);
- });
- });
- },
- destroy: function(){
- selection.$ghost.remove();
- $handles.show();
- },
- crop: function(){
- var c = selection.canvas;
- if(selection.canvas && undoable()){
- canvas.width = c.width;
- canvas.height = c.height;
- ctx.drawImage(c, 0, 0);
- }
- }
- };
- $handles.hide();
- selection.$ghost = $("
").appendTo($canvas_area);
+ var s = selection = new Selection(mouse.x, mouse.y, 1, 1);
$canvas.one("mousedown", function(){
if(selection === s){
selection.destroy();
@@ -485,6 +411,97 @@ app.open = function(){
"#FFFFFF","#BBBBBB","#FF0E00","#FAFF08","#00FF0B","#00FEFF","#3400FE","#FF00FE","#FBFF7A","#00FF7B","#76FEFF","#8270FE","#FF0677","#FF7D36",
];
+ function Selection(x, y, w, h){
+ this.x = x;
+ this.y = y;
+ this.w = w;
+ this.h = h;
+ this._x = x;
+ this._y = y;
+ this._w = w;
+ this._h = h;
+
+ this.$ghost = $("
").appendTo($canvas_area);
+ $canvas_handles.hide();
+ }
+ Selection.prototype.instantiate = function(_img){
+ var sel = this;
+
+ sel.$ghost.addClass("instantiated").css({
+ cursor: Cursor(["move", [8, 8], "move"])
+ });
+ sel.position();
+
+ if(!undoable()){
+ sel.destroy();
+ return;
+ }
+
+ if(_img){
+ sel.canvas = _img;
+ sel.canvas.width = sel._w;
+ sel.canvas.height = sel._h;
+ }else{
+ sel.canvas = document.createElement("canvas");
+ sel.canvas.width = sel._w;
+ sel.canvas.height = sel._h;
+ sel.ctx = sel.canvas.getContext("2d");
+ sel.ctx.drawImage(
+ canvas,
+ sel._x, sel._y,
+ sel._w, sel._h,
+ 0, 0,
+ sel._w, sel._h
+ );
+ // cut the selection from the canvas
+ //@TODO: transparency
+ //ctx.globalCompositeOperation = "destination-out";
+ //ctx.drawImage()...
+ ctx.fillStyle = colors[1];
+ ctx.fillRect(
+ sel._x, sel._y,
+ sel._w, sel._h
+ );
+ }
+
+ var mox, moy;
+ var mousemove = function(e){
+ var m = e2c(e);
+ sel._x = Math.max(Math.min(m.x - mox, canvas.width), -sel._w);
+ sel._y = Math.max(Math.min(m.y - moy, canvas.height), -sel._h);
+ sel.position();
+ };
+ sel.$ghost.on("mousedown", function(e){
+ e.preventDefault();
+ mox = e.offsetX;
+ moy = e.offsetY;
+ $(window).on("mousemove", mousemove);
+ $(window).one("mouseup", function(){
+ $(window).off("mousemove", mousemove);
+ });
+ });
+ };
+ Selection.prototype.position = function(){
+ this.$ghost.css({
+ position: "absolute",
+ left: this._x + 3,
+ top: this._y + 3,
+ width: this._w,
+ height: this._h,
+ });
+ };
+ Selection.prototype.destroy = function(){
+ this.$ghost.remove();
+ $canvas_handles.show();
+ };
+ Selection.prototype.crop = function(){
+ if(this.canvas && undoable()){
+ canvas.width = this.canvas.width;
+ canvas.height = this.canvas.height;
+ ctx.drawImage(this.canvas, 0, 0);
+ }
+ }
+
var selected_tool = tools[6];
var previous_tool = selected_tool;
var colors = [];
@@ -693,7 +710,7 @@ app.open = function(){
canvas.width = c.width;
canvas.height = c.height;
ctx.drawImage(c,0,0);
- $handles.trigger("update");
+ $canvas_handles.trigger("update");
return true;
}
@@ -712,7 +729,7 @@ app.open = function(){
canvas.width = c.width;
canvas.height = c.height;
ctx.drawImage(c,0,0);
- $handles.trigger("update");
+ $canvas_handles.trigger("update");
return true;
}
@@ -804,7 +821,7 @@ app.open = function(){
}
}
}
- $handles.trigger("update");
+ $canvas_handles.trigger("update");
});
});
}
@@ -839,9 +856,9 @@ app.open = function(){
],function(i,pos){
$Handle(pos[0], pos[1]);
});
- var $handles = $(".jspaint-handle");
+ var $canvas_handles = $(".jspaint-handle");
var update_handles = function(){
- $handles.trigger("update");
+ $canvas_handles.trigger("update");
};
$(window).on("resize", update_handles);
$canvas_area.on("scroll", update_handles);
@@ -929,9 +946,11 @@ app.open = function(){
}
function paste_img(){
//todo: make draggable selection object
- if(undoable()){
- ctx.drawImage(img,0,0);
+ if(selection){
+ selection.destroy();
}
+ selection = new Selection(0, 0, img.width, img.height);
+ selection.instantiate(img);
}
};
img.src = e.target.result;