radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename $ghost to $el

main
Isaiah Odhner 2016-03-24 14:32:10 -04:00
parent cdc5196ca4
commit e2f184499f
3 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@ -330,7 +330,6 @@ Prankily wait for next user input before fullscreening and bluescreening
* JS
* `Selection` and `TextBox` should inherit from a base class
* Remove either `selection.x/y/w/h` or `._x/_y/_w/_h`; and use `x/y/width/height`
* Outdated names like `sel.$ghost` being `div.jspaint-selection` (not exactly a ghost)
* Everything is in random files! "functions.js", REALLY?
* `$Window` has a `$Button` facility; `$FormWindow` overrides it with essentially a better one
* Image inversion code is duplicated in `ChooserCanvas` from tool-options.js but should go in image-manipulation.js

20
src/Selection.js
View File

@ -9,7 +9,7 @@ function Selection(x, y, w, h){
this._w = w;
this._h = h;
this.$ghost = $(E("div")).addClass("jspaint-selection").appendTo($canvas_area);
this.$el = $(E("div")).addClass("jspaint-selection").appendTo($canvas_area);
$canvas_handles.hide();
}
@ -17,10 +17,10 @@ function Selection(x, y, w, h){
Selection.prototype.instantiate = function(_img, _passive){
var sel = this;
sel.$ghost.addClass("instantiated").css({
sel.$el.addClass("instantiated").css({
cursor: Cursor(["move", [8, 8], "move"])
});
sel.$ghost.attr("touch-action", "none");
sel.$el.attr("touch-action", "none");
sel.position();
if(_passive){
@ -47,11 +47,11 @@ Selection.prototype.instantiate = function(_img, _passive){
sel.cut_out_background();
}
}
sel.$ghost.append(sel.canvas);
sel.$el.append(sel.canvas);
//sel.$handles = $Handles(sel.$ghost, sel.canvas, {outset: 2});
//sel.$handles = $Handles(sel.$el, sel.canvas, {outset: 2});
sel.$ghost.on("user-resized", function(e, x, y, width, height){
sel.$el.on("user-resized", function(e, x, y, width, height){
//tb._x = x;
//tb._y = y;
sel._w = width;
@ -118,7 +118,7 @@ Selection.prototype.cut_out_background = function(){
};
Selection.prototype.position = function(){
this.$ghost.css({
this.$el.css({
position: "absolute",
left: magnification * this._x + 3,
top: magnification * this._y + 3,
@ -159,8 +159,8 @@ Selection.prototype.replace_canvas = function(new_canvas){
sel.canvas = new_canvas;
$(sel.canvas).on("pointerdown", sel.canvas_pointerdown);
sel.$ghost.triggerHandler("new-element", [sel.canvas]);
sel.$ghost.triggerHandler("resize");//?
sel.$el.triggerHandler("new-element", [sel.canvas]);
sel.$el.triggerHandler("resize");//?
};
Selection.prototype.scale = function(factor){
@ -179,7 +179,7 @@ Selection.prototype.draw = function(){
};
Selection.prototype.destroy = function(){
this.$ghost.remove();
this.$el.remove();
$canvas_handles.show();
$G.triggerHandler("session-update");
};

24
src/TextBox.js
View File

@ -11,7 +11,7 @@ function TextBox(x, y, w, h){
tb._w = w;
tb._h = h;
tb.$ghost = $(E("div")).addClass("jspaint-textbox").appendTo($canvas_area);
tb.$el = $(E("div")).addClass("jspaint-textbox").appendTo($canvas_area);
tb.$editor = $(E("textarea")).addClass("jspaint-textbox-editor");
var update = function(){
@ -25,7 +25,7 @@ function TextBox(x, y, w, h){
fontFamily: font.family,
fontSize: font.size * magnification + "px",
fontWeight: font.bold ? "bold" : "normal",
fontStyle: font.italic ? "italic" : "none",
fontStyle: font.italic ? "italic" : "normal",
textDecoration: font.underline ? "underline" : "none",
writingMode: font.vertical ? "vertical-lr" : "",
oWritingMode: font.vertical ? "vertical-lr" : "",
@ -51,10 +51,10 @@ function TextBox(x, y, w, h){
TextBox.prototype.instantiate = function(){
var tb = this;
tb.$ghost.addClass("instantiated").css({
tb.$el.addClass("instantiated").css({
cursor: Cursor(["move", [8, 8], "move"])
});
tb.$ghost.attr("touch-action", "none");
tb.$el.attr("touch-action", "none");
tb.position();
@ -66,7 +66,7 @@ TextBox.prototype.instantiate = function(){
var $fb = TextBox.$fontbox = TextBox.$fontbox || new $FontBox();
// move the font box out of the way if it's overlapping the TextBox
var $tb = tb.$ghost;
var $tb = tb.$el;
var fb_rect = $fb[0].getBoundingClientRect();
var tb_rect = $tb[0].getBoundingClientRect();
@ -88,12 +88,12 @@ TextBox.prototype.instantiate = function(){
function instantiate(){
// this doesn't need to be a seperate function
tb.$ghost.append(tb.$editor);
tb.$el.append(tb.$editor);
tb.$editor.focus();
//tb.$handles = $Handles(tb.$ghost, tb.$editor[0], {outset: 2});
//tb.$handles = $Handles(tb.$el, tb.$editor[0], {outset: 2});
tb.$ghost.on("user-resized", function(e, x, y, width, height){
tb.$el.on("user-resized", function(e, x, y, width, height){
//tb._x = x;
//tb._y = y;
tb._w = width;
@ -112,7 +112,7 @@ TextBox.prototype.instantiate = function(){
tb.draw();
}
};
tb.$ghost.on("pointerdown", function(e){
tb.$el.on("pointerdown", function(e){
if(
e.target instanceof HTMLInputElement ||
e.target instanceof HTMLTextAreaElement
@ -121,7 +121,7 @@ TextBox.prototype.instantiate = function(){
}
e.preventDefault();
var rect = tb.$ghost[0].getBoundingClientRect();
var rect = tb.$el[0].getBoundingClientRect();
var cx = e.clientX - rect.left;
var cy = e.clientY - rect.top;
mox = ~~(cx);
@ -141,7 +141,7 @@ TextBox.prototype.instantiate = function(){
};
TextBox.prototype.position = function(){
this.$ghost.css({
this.$el.css({
position: "absolute",
left: magnification * this._x + 3,
top: magnification * this._y + 3,
@ -173,7 +173,7 @@ TextBox.prototype.draw = function(){
};
TextBox.prototype.destroy = function(){
this.$ghost.remove();
this.$el.remove();
$canvas_handles.show();
if(TextBox.$fontbox && !TextBox.$fontbox.closed){