add offsets into handles
This commit is contained in:
@@ -68,10 +68,16 @@ for (var i = 0; i < resize_anchors.length; i++) {
|
|||||||
document.body.addEventListener("mouseup", () => {
|
document.body.addEventListener("mouseup", () => {
|
||||||
handleBeingHeld[index] = false;
|
handleBeingHeld[index] = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
resize_anchors[i].style.setProperty("--x-offset", "0px");
|
||||||
|
resize_anchors[i].style.setProperty("--y-offset", "0px");
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.addEventListener("mousemove", () => {
|
document.body.addEventListener("mousemove", () => {
|
||||||
for (var i = 0; i < handleBeingHeld.length; i++) {
|
for (var i = 0; i < handleBeingHeld.length; i++) {
|
||||||
if (!handleBeingHeld[i]) continue;
|
if (!handleBeingHeld[i]) continue;
|
||||||
|
|
||||||
|
resize_anchors[i].style.setProperty("--x-offset", "100px");
|
||||||
|
resize_anchors[i].style.setProperty("--y-offset", "100px");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -197,7 +197,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#top_left_resize {
|
#top_left_resize {
|
||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(calc(-50% + var(--x-offset)))
|
||||||
|
translateY(calc(-50% + var(--y-offset)));
|
||||||
}
|
}
|
||||||
|
|
||||||
#top_left_resize:hover {
|
#top_left_resize:hover {
|
||||||
@@ -205,7 +206,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#top_right_resize {
|
#top_right_resize {
|
||||||
transform: translateX(340px) translateY(-50%);
|
transform: translateX(calc(340px - var(--x-offset)))
|
||||||
|
translateY(calc(-50% + var(--y-offset)));
|
||||||
}
|
}
|
||||||
|
|
||||||
#top_right_resize:hover {
|
#top_right_resize:hover {
|
||||||
@@ -213,7 +215,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#bottom_left_resize {
|
#bottom_left_resize {
|
||||||
transform: translateY(340px) translateX(-50%);
|
transform: translateX(calc(-50% + var(--x-offset)))
|
||||||
|
translateY(calc(340px - var(--x-offset)));
|
||||||
}
|
}
|
||||||
|
|
||||||
#bottom_left_resize:hover {
|
#bottom_left_resize:hover {
|
||||||
@@ -221,7 +224,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#bottom_right_resize {
|
#bottom_right_resize {
|
||||||
transform: translateX(340px) translateY(340px);
|
transform: translateX(calc(340px - var(--x-offset)))
|
||||||
|
translateY(calc(340px - var(--y-offset)));
|
||||||
}
|
}
|
||||||
|
|
||||||
#bottom_right_resize:hover {
|
#bottom_right_resize:hover {
|
||||||
|
|||||||
Reference in New Issue
Block a user