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

Fix selection+textbox ghost inverty effect

main
Isaiah Odhner 2021-02-08 20:11:06 -05:00
parent 2e6732ec01
commit 216e0e270f
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/$Handles.js
View File

@ -1,5 +1,5 @@
function $Handles($container, options){ function $Handles($handles_container, $ghost_container, options){
const outset = options.outset || 0; const outset = options.outset || 0;
const get_offset_left = options.get_offset_left || (() => 0); const get_offset_left = options.get_offset_left || (() => 0);
const get_offset_top = options.get_offset_top || (() => 0); const get_offset_top = options.get_offset_top || (() => 0);
@ -23,7 +23,7 @@ function $Handles($container, options){
const x_axis = pos[1]; const x_axis = pos[1];
const $h = $(E("div")).addClass("handle"); const $h = $(E("div")).addClass("handle");
$h.appendTo($container); $h.appendTo($handles_container);
$h.attr("touch-action", "none"); $h.attr("touch-action", "none");
@ -57,7 +57,7 @@ function $Handles($container, options){
$h.css({cursor}); $h.css({cursor});
const drag = (event) => { const drag = (event) => {
$resize_ghost.appendTo($container); $resize_ghost.appendTo($ghost_container);
dragged = true; dragged = true;
rect = options.get_rect(); rect = options.get_rect();
@ -103,8 +103,8 @@ function $Handles($container, options){
const inset = options.thick ? 3 : 0; const inset = options.thick ? 3 : 0;
$resize_ghost.css({ $resize_ghost.css({
position: "absolute", position: "absolute",
left: magnification * (new_rect.x - rect.x) + inset, left: magnification * new_rect.x + inset,
top: magnification * (new_rect.y - rect.y) + inset, top: magnification * new_rect.y + inset,
width: magnification * new_rect.width - inset * 2, width: magnification * new_rect.width - inset * 2,
height: magnification * new_rect.height - inset * 2, height: magnification * new_rect.height - inset * 2,
}); });
@ -124,7 +124,7 @@ function $Handles($container, options){
if(dragged){ if(dragged){
options.set_rect(rect); options.set_rect(rect);
} }
$container.trigger("update"); $handles_container.trigger("update");
}); });
}); });
$h.on("mousedown selectstart", event => { $h.on("mousedown selectstart", event => {
@ -155,7 +155,7 @@ function $Handles($container, options){
}); });
}; };
$container.on("update resize scroll", update_handle); $handles_container.on("update resize scroll", update_handle);
$G.on("resize theme-load", update_handle); $G.on("resize theme-load", update_handle);
setTimeout(update_handle, 50); setTimeout(update_handle, 50);

2
src/OnCanvasSelection.js
View File

@ -56,7 +56,7 @@ class OnCanvasSelection extends OnCanvasObject {
this.cut_out_background(); this.cut_out_background();
} }
this.$el.append(this.canvas); this.$el.append(this.canvas);
this.$handles = $Handles(this.$el, { this.$handles = $Handles(this.$el, $canvas_area, {
outset: 2, outset: 2,
get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}), get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}),
set_rect: ({x, y, width, height}) => { set_rect: ({x, y, width, height}) => {

2
src/OnCanvasTextBox.js
View File

@ -132,7 +132,7 @@ class OnCanvasTextBox extends OnCanvasObject {
this.$el.append(this.$editor); this.$el.append(this.$editor);
this.$editor[0].focus(); this.$editor[0].focus();
this.$handles = $Handles(this.$el, { this.$handles = $Handles(this.$el, $canvas_area, {
outset: 2, outset: 2,
thick: true, thick: true,
get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}), get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.height}),

2
src/app.js
View File

@ -309,7 +309,7 @@ const $canvas_area = $(E("div")).addClass("canvas-area").appendTo($H);
const $canvas = $(canvas).appendTo($canvas_area); const $canvas = $(canvas).appendTo($canvas_area);
$canvas.attr("touch-action", "none"); $canvas.attr("touch-action", "none");
let canvas_bounding_client_rect = canvas.getBoundingClientRect(); // cached for performance, updated later let canvas_bounding_client_rect = canvas.getBoundingClientRect(); // cached for performance, updated later
const $canvas_handles = $Handles($canvas_area, { const $canvas_handles = $Handles($canvas_area, $canvas_area, {
get_rect: ()=> ({x: 0, y: 0, width: canvas.width, height: canvas.height}), get_rect: ()=> ({x: 0, y: 0, width: canvas.width, height: canvas.height}),
set_rect: ({width, height})=> resize_canvas_and_save_dimensions(width, height), set_rect: ({width, height})=> resize_canvas_and_save_dimensions(width, height),
outset: 4, outset: 4,