Fix selection+textbox ghost inverty effect
parent
2e6732ec01
commit
216e0e270f
|
@ -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);
|
||||
|
||||
|
|
|
@ -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}) => {
|
||||
|
|
|
@ -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}),
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue