aboutsummaryrefslogtreecommitdiffstats
path: root/front/dragging.ts
diff options
context:
space:
mode:
Diffstat (limited to 'front/dragging.ts')
-rw-r--r--front/dragging.ts74
1 files changed, 23 insertions, 51 deletions
diff --git a/front/dragging.ts b/front/dragging.ts
index b65f1f4..bcf6e9f 100644
--- a/front/dragging.ts
+++ b/front/dragging.ts
@@ -2,16 +2,15 @@
export class Draggable {
el: HTMLElement;
- canDragX: boolean = true;
- canDragY: boolean = true;
reparent: boolean = true;
lockSize: boolean = true;
onBeforeDragStart: () => void = null;
onAfterDragEnd: () => void = null;
+ customMoveHandler: (x: number, y: number) => void = null;
- Draggable(el: HTMLElement) {
+ constructor(el: HTMLElement) {
this.el = el;
}
}
@@ -31,11 +30,6 @@ export var dragging_offset_x = 0, dragging_offset_y = 0;
export var dragging_candidate: Draggable = null;
export var dragging_candidate_x, dragging_candidate_y;
-// If we're dragging a fileview, this is set to the fileview class instance itself, because 'dragging' is just a DOM object
-// The placeholder is a dummy DIV that we insert in the object's place on the grid to keep things nicely aligned
-// export var dragging_fileview: FileView;
-// export var dragging_placeholder = null;
-
export function set_dragging_candidate(e, candidate: Draggable) {
dragging_candidate = candidate;
dragging_candidate_x = e.clientX;
@@ -46,6 +40,8 @@ export function set_dragging_candidate(e, candidate: Draggable) {
// Start dragging the 'obj' DOM element
// e is a DOM event, this should only get called in response of a DOM event
export function begin_drag(e, d: Draggable) {
+ if (d.onBeforeDragStart)
+ d.onBeforeDragStart()
set_iframe_enabled(false);
dragging = d;
dragging_candidate = null;
@@ -55,42 +51,27 @@ export function begin_drag(e, d: Draggable) {
dragging_offset_x = e.clientX - elemRect.left;
dragging_offset_y = -e.clientY + elemRect.top;
- //if (dragging_placeholder)
- // dragging.el.parentNode.insertBefore(dragging_placeholder, dragging.el);
-
- dragging.el.style.left = (e.clientX - dragging_offset_x) + "px";
- dragging.el.style.top = (e.clientY + dragging_offset_y) + "px";
if (dragging.lockSize) {
+ dragging.el.style.left = (e.clientX - dragging_offset_x) + "px";
+ dragging.el.style.top = (e.clientY + dragging_offset_y) + "px";
dragging.el.style.width = elemRect.width + "px";
dragging.el.style.height = elemRect.height + "px";
+ dragging.el.style.position = "absolute";
}
- dragging.el.style.position = "absolute";
- document.body.appendChild(dragging.el);
+
+
+ if (dragging.reparent)
+ document.body.appendChild(dragging.el);
}
export function end_drag(_e) {
set_iframe_enabled(true);
- // If there's a dragging placeholder remove it and put the dragged node back into its place
- if (dragging_placeholder) {
- dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
- dragging_placeholder.remove();
- dragging_placeholder = null;
- }
-
- // If we were dragging a FileView, we need to reset some CSS
- if (dragging_fileview) {
- dragging.style.removeProperty("position");
- dragging.style.removeProperty("width");
- dragging.style.removeProperty("height");
- dragging.style.removeProperty("left");
- dragging.style.removeProperty("top");
- dragging_fileview = null;
- }
-
- dragging.classList.remove("dragged");
+ dragging.el.classList.remove("dragged");
+ if (dragging.onAfterDragEnd)
+ dragging.onAfterDragEnd();
dragging = null;
}
@@ -109,30 +90,21 @@ document.body.onmouseup = (_e) => {
document.body.onmousemove = (e) => {
if (dragging) {
- dragging.style.left = (e.clientX - dragging_offset_x) + "px";
- dragging.style.top = (e.clientY + dragging_offset_y) + "px";
+ const x = e.clientX - dragging_offset_x;
+ const y = e.clientY + dragging_offset_y;
+ if (dragging.customMoveHandler) {
+ dragging.customMoveHandler(x, y)
+ } else {
+ dragging.el.style.left = x + "px";
+ dragging.el.style.top = y + "px";
+ }
}
else if (dragging_candidate) {
var d = Math.abs(e.clientX - dragging_candidate_x) + Math.abs(e.clientY - dragging_candidate_y);
if (d > 15)
- begin_drag(e, dragging_candidate, true);
+ begin_drag(e, dragging_candidate);
}
}
-// Dragging a fileview is a bit different from dragging a window
-// This does some setup work before calling the common begin_drag
-export function begin_drag_fileview(e, fileview) {
- if (dragging)
- end_drag(e);
-
- // The dragging_placeholder is inserted into its place by the begin_drag function
- dragging_placeholder = document.createElement('div');
- dragging_fileview = fileview;
-
- dragging = fileview.visuals;
- dragging.style.zIndex = 50000;
-
- begin_drag(e, fileview.visuals);
-}
export function oncontextmenu_hook(e) {
if (dragging) {