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

2
src/OnCanvasSelection.js
View File

@ -56,7 +56,7 @@ class OnCanvasSelection extends OnCanvasObject {
this.cut_out_background();
}
this.$el.append(this.canvas);
this.$handles = $Handles(this.$el, {
this.$handles = $Handles(this.$el, $canvas_area, {
outset: 2,
get_rect: ()=> ({x: this.x, y: this.y, width: this.width, height: this.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.$editor[0].focus();
this.$handles = $Handles(this.$el, {
this.$handles = $Handles(this.$el, $canvas_area, {
outset: 2,
thick: true,
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);
$canvas.attr("touch-action", "none");
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}),
set_rect: ({width, height})=> resize_canvas_and_save_dimensions(width, height),
outset: 4,