aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/DragManager.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util/DragManager.ts')
-rw-r--r--src/client/util/DragManager.ts107
1 files changed, 37 insertions, 70 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 0ee7ed2b3..f95b2c29d 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -4,36 +4,27 @@ import { CollectionDockingView } from "../views/collections/CollectionDockingVie
import { CollectionView } from "../views/collections/CollectionView";
import { DocumentDecorations } from "../views/DocumentDecorations";
import { DocumentView } from "../views/nodes/DocumentView";
+import { returnFalse } from "../../Utils";
-export function setupDrag(
- _reference: React.RefObject<HTMLDivElement>,
- docFunc: () => Document,
- removeFunc: (containingCollection: CollectionView) => void = () => { },
- copyOnDrop: boolean = false
-) {
- let onRowMove = action(
- (e: PointerEvent): void => {
- e.stopPropagation();
- e.preventDefault();
+export function setupDrag(_reference: React.RefObject<HTMLDivElement>, docFunc: () => Document, moveFunc?: DragManager.MoveFunction, copyOnDrop: boolean = false) {
+ let onRowMove = action((e: PointerEvent): void => {
+ e.stopPropagation();
+ e.preventDefault();
- // TODO: bcz -- this needs to have a drag threshold so that it doesn't trigger when just selecting.
- document.removeEventListener("pointermove", onRowMove);
- document.removeEventListener("pointerup", onRowUp);
- var dragData = new DragManager.DocumentDragData([docFunc()]);
- dragData.copyOnDrop = copyOnDrop;
- dragData.removeDocument = removeFunc;
- DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
- }
- );
- let onRowUp = action(
- (e: PointerEvent): void => {
- document.removeEventListener("pointermove", onRowMove);
- document.removeEventListener("pointerup", onRowUp);
- }
- );
+ document.removeEventListener("pointermove", onRowMove);
+ document.removeEventListener('pointerup', onRowUp);
+ var dragData = new DragManager.DocumentDragData([docFunc()]);
+ dragData.copyOnDrop = copyOnDrop;
+ dragData.moveDocument = moveFunc;
+ DragManager.StartDocumentDrag([_reference.current!], dragData, e.x, e.y);
+ });
+ let onRowUp = action((e: PointerEvent): void => {
+ document.removeEventListener("pointermove", onRowMove);
+ document.removeEventListener('pointerup', onRowUp);
+ });
let onItemDown = (e: React.PointerEvent) => {
// if (this.props.isSelected() || this.props.isTopMost) {
- if (e.button == 0) {
+ if (e.button === 0) {
e.stopPropagation();
if (e.shiftKey) {
CollectionDockingView.Instance.StartOtherDrag([docFunc()], e);
@@ -104,7 +95,7 @@ export namespace DragManager {
"Element is already droppable, can't make it droppable again"
);
}
- element.dataset["canDrop"] = "true";
+ element.dataset.canDrop = "true";
const handler = (e: Event) => {
const ce = e as CustomEvent<DropEvent>;
options.handlers.drop(e, ce.detail);
@@ -112,10 +103,11 @@ export namespace DragManager {
element.addEventListener("dashOnDrop", handler);
return () => {
element.removeEventListener("dashOnDrop", handler);
- delete element.dataset["canDrop"];
+ delete element.dataset.canDrop
};
}
+ export type MoveFunction = (document: Document, targetCollection: Document, addDocument: (document: Document) => boolean) => boolean;
export class DocumentDragData {
constructor(dragDoc: Document[]) {
this.draggedDocuments = dragDoc;
@@ -127,24 +119,13 @@ export namespace DragManager {
yOffset?: number;
aliasOnDrop?: boolean;
copyOnDrop?: boolean;
- removeDocument?: (collectionDrop: CollectionView) => void;
+ moveDocument?: MoveFunction;
[id: string]: any;
}
- export function StartDocumentDrag(
- eles: HTMLElement[],
- dragData: DocumentDragData,
- downX: number,
- downY: number,
- options?: DragOptions
- ) {
+ export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions) {
StartDrag(eles, dragData, downX, downY, options,
- (dropData: { [id: string]: any }) =>
- (dropData.droppedDocuments = dragData.aliasOnDrop
- ? dragData.draggedDocuments.map(d => d.CreateAlias())
- : dragData.copyOnDrop ? dragData.draggedDocuments.map(d => d.Copy(true) as Document) :
- dragData.draggedDocuments)
- );
+ (dropData: { [id: string]: any }) => (dropData.droppedDocuments = dragData.aliasOnDrop ? dragData.draggedDocuments.map(d => d.CreateAlias()) : dragData.copyOnDrop ? dragData.draggedDocuments.map(d => d.Copy(true) as Document) : dragData.draggedDocuments));
}
export class LinkDragData {
@@ -155,21 +136,12 @@ export namespace DragManager {
linkSourceDocumentView: DocumentView;
[id: string]: any;
}
- export function StartLinkDrag(
- ele: HTMLElement,
- dragData: LinkDragData,
- downX: number, downY: number,
- options?: DragOptions
- ) {
+
+ export function StartLinkDrag(ele: HTMLElement, dragData: LinkDragData, downX: number, downY: number, options?: DragOptions) {
StartDrag([ele], dragData, downX, downY, options);
}
- function StartDrag(
- eles: HTMLElement[],
- dragData: { [id: string]: any },
- downX: number, downY: number,
- options?: DragOptions,
- finishDrag?: (dropData: { [id: string]: any }) => void
- ) {
+
+ function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: { [id: string]: any }) => void) {
if (!dragDiv) {
dragDiv = document.createElement("div");
dragDiv.className = "dragManager-dragDiv";
@@ -217,11 +189,11 @@ export namespace DragManager {
// let thumbnail = docs[0].GetT(KeyStore.Thumbnail, ImageField);
// if (pdfBox && pdfBox.childElementCount && thumbnail) {
// let img = new Image();
- // img!.src = thumbnail.toString();
- // img!.style.position = "absolute";
- // img!.style.width = `${rect.width / scaleX}px`;
- // img!.style.height = `${rect.height / scaleY}px`;
- // pdfBox.replaceChild(img!, pdfBox.children[0]);
+ // img.src = thumbnail.toString();
+ // img.style.position = "absolute";
+ // img.style.width = `${rect.width / scaleX}px`;
+ // img.style.height = `${rect.height / scaleY}px`;
+ // pdfBox.replaceChild(img, pdfBox.children[0])
// }
// }
@@ -255,6 +227,7 @@ export namespace DragManager {
button: 0
});
}
+ //TODO: Why can't we use e.movementX and e.movementY?
let moveX = e.pageX - lastX;
let moveY = e.pageY - lastY;
lastX = e.pageX;
@@ -279,13 +252,7 @@ export namespace DragManager {
document.addEventListener("pointerup", upHandler);
}
- function FinishDrag(
- dragEles: HTMLElement[],
- e: PointerEvent,
- dragData: { [index: string]: any },
- options?: DragOptions,
- finishDrag?: (dragData: { [index: string]: any }) => void
- ) {
+ function FinishDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions, finishDrag?: (dragData: { [index: string]: any }) => void) {
let removed = dragEles.map(dragEle => {
let parent = dragEle.parentElement;
if (parent) parent.removeChild(dragEle);
@@ -293,9 +260,9 @@ export namespace DragManager {
});
const target = document.elementFromPoint(e.x, e.y);
removed.map(r => {
- let dragEle: HTMLElement = r[0]!;
- let parent: HTMLElement | null = r[1];
- if (parent) parent.appendChild(dragEle);
+ let dragEle = r[0];
+ let parent = r[1];
+ if (parent && dragEle) parent.appendChild(dragEle);
});
if (target) {
if (finishDrag) finishDrag(dragData);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 01:50:03 +0000