aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/util/CurrentUserUtils.ts5
-rw-r--r--src/client/util/DragManager.ts96
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx41
4 files changed, 65 insertions, 79 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 35bb80f39..657ba521b 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -69,7 +69,7 @@ export interface DocumentOptions {
_showTitle?: string; // which field to display in the title area. leave empty to have no title
_showCaption?: string; // which field to display in the caption area. leave empty to have no caption
_scrollTop?: number; // scroll location for pdfs
- _noAutoscroll?: boolean;// whether collectoins autoscroll when this item is dragged
+ _noAutoscroll?: boolean;// whether collections autoscroll when this item is dragged
_chromeStatus?: string;
_viewType?: string; // sub type of a collection
_gridGap?: number; // gap between items in masonry view
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d53a6fcdb..03a75381a 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -466,7 +466,6 @@ export class CurrentUserUtils {
onClick: click ? ScriptField.MakeScript(click) : undefined,
ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined,
activeInkPen,
- _noAutoscroll: true,
backgroundColor,
removeDropProperties: new List<string>(["dropAction"]),
dragFactory,
@@ -736,13 +735,13 @@ export class CurrentUserUtils {
}
static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
- ...opts, _noAutoscroll: true, _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", forceActive: true,
+ ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", forceActive: true,
dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true
})) as any as Doc
static ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({
- ...opts, _noAutoscroll: true, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
+ ...opts, dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
})) as any as Doc
/// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 007336190..4291eee9c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -7,7 +7,7 @@ import { listSpec } from "../../fields/Schema";
import { SchemaHeaderField } from "../../fields/SchemaHeaderField";
import { ScriptField } from "../../fields/ScriptField";
import { Cast, NumCast, ScriptCast, StrCast } from "../../fields/Types";
-import { emptyFunction } from "../../Utils";
+import { emptyFunction, returnTrue } from "../../Utils";
import { Docs, DocUtils } from "../documents/Documents";
import * as globalCssVariables from "../views/globalCssVariables.scss";
import { UndoManager } from "./UndoManager";
@@ -235,7 +235,8 @@ export namespace DragManager {
e.docDragData && (e.docDragData.droppedDocuments = [bd]);
return e;
};
- options && (options.noAutoscroll = true);
+ options = options ?? {};
+ options.noAutoscroll = true; // these buttons are being dragged on the overlay layer, so scrollin the underlay is not appropriate
StartDrag(eles, new DragManager.DocumentDragData([]), downX, downY, options, finishDrag);
}
@@ -411,6 +412,8 @@ export namespace DragManager {
const yFromTop = downY - elesCont.top;
const xFromRight = elesCont.right - downX;
const yFromBottom = elesCont.bottom - downY;
+ let paused = false;
+ let scrollAwaiter: Opt<NodeJS.Timeout>;
const moveHandler = (e: PointerEvent) => {
e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop
if (dragData instanceof DocumentDragData) {
@@ -433,50 +436,55 @@ export namespace DragManager {
const target = document.elementFromPoint(e.x, e.y);
- const complete = new DragCompleteEvent(false, dragData);
-
if (target && !options?.noAutoscroll && !dragData.draggedDocuments?.some((d: any) => d._noAutoscroll)) {
- target.dispatchEvent(
- new CustomEvent<React.DragEvent>("dashDragging", {
- bubbles: true,
- detail: {
- shiftKey: e.shiftKey,
- altKey: e.altKey,
- metaKey: e.metaKey,
- ctrlKey: e.ctrlKey,
- clientX: e.clientX,
- clientY: e.clientY,
- dataTransfer: new DataTransfer,
- button: e.button,
- buttons: e.buttons,
- getModifierState: e.getModifierState,
- movementX: e.movementX,
- movementY: e.movementY,
- pageX: e.pageX,
- pageY: e.pageY,
- relatedTarget: e.relatedTarget,
- screenX: e.screenX,
- screenY: e.screenY,
- detail: e.detail,
- view: e.view ? e.view : new Window,
- nativeEvent: new DragEvent("dashDragging"),
- currentTarget: target,
- target: target,
+ scrollAwaiter && clearTimeout(scrollAwaiter);
+ scrollAwaiter = setTimeout(() => autoScrollHandler(), 250);
+ const autoScrollHandler = () => {
+ target.dispatchEvent(
+ new CustomEvent<React.DragEvent>("dashDragAutoScroll", {
bubbles: true,
- cancelable: true,
- defaultPrevented: true,
- eventPhase: e.eventPhase,
- isTrusted: true,
- preventDefault: e.preventDefault,
- isDefaultPrevented: () => true,
- stopPropagation: e.stopPropagation,
- isPropagationStopped: () => true,
- persist: emptyFunction,
- timeStamp: e.timeStamp,
- type: "dashDragging"
- }
- })
- );
+ detail: {
+ shiftKey: e.shiftKey,
+ altKey: e.altKey,
+ metaKey: e.metaKey,
+ ctrlKey: e.ctrlKey,
+ clientX: e.clientX,
+ clientY: e.clientY,
+ dataTransfer: new DataTransfer,
+ button: e.button,
+ buttons: e.buttons,
+ getModifierState: e.getModifierState,
+ movementX: e.movementX,
+ movementY: e.movementY,
+ pageX: e.pageX,
+ pageY: e.pageY,
+ relatedTarget: e.relatedTarget,
+ screenX: e.screenX,
+ screenY: e.screenY,
+ detail: e.detail,
+ view: e.view ? e.view : new Window,
+ nativeEvent: new DragEvent("dashDragAutoScroll"),
+ currentTarget: target,
+ target: target,
+ bubbles: true,
+ cancelable: true,
+ defaultPrevented: true,
+ eventPhase: e.eventPhase,
+ isTrusted: true,
+ preventDefault: () => "not implemented for this event" ? false : false,
+ isDefaultPrevented: () => "not implemented for this event" ? false : false,
+ stopPropagation: () => "not implemented for this event" ? false : false,
+ isPropagationStopped: () => "not implemented for this event" ? false : false,
+ persist: emptyFunction,
+ timeStamp: e.timeStamp,
+ type: "dashDragAutoScroll"
+ }
+ })
+ );
+
+ scrollAwaiter && clearTimeout(scrollAwaiter);
+ SnappingManager.GetIsDragging() && (scrollAwaiter = setTimeout(() => autoScrollHandler(), 25));
+ }
}
const { thisX, thisY } = snapDrag(e, xFromLeft, yFromTop, xFromRight, yFromBottom);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 01b0c81d8..412f91417 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -85,8 +85,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
private _lastY: number = 0;
private _downX: number = 0;
private _downY: number = 0;
- private _lastClientY: number | undefined = 0;
- private _lastClientX: number | undefined = 0;
private _inkToTextStartX: number | undefined;
private _inkToTextStartY: number | undefined;
private _wordPalette: Map<string, string> = new Map<string, string>();
@@ -582,7 +580,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
@action
onPointerUp = (e: PointerEvent): void => {
- this._lastClientY = this._lastClientX = undefined;
if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) return;
document.removeEventListener("pointermove", this.onPointerMove);
@@ -1152,16 +1149,12 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
(elements) => this._layoutElements = elements || [],
{ fireImmediately: true, name: "doLayout" });
- const handler = (e: any) => this.handleDragging(e, (e as CustomEvent<DragEvent>).detail);
-
- document.addEventListener("dashDragging", handler);
+ this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
}
componentWillUnmount() {
this._layoutComputeReaction?.();
-
- const handler = (e: any) => this.handleDragging(e, (e as CustomEvent<DragEvent>).detail);
- document.removeEventListener("dashDragging", handler);
+ this._marqueeRef.current?.removeEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
}
@computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); }
@@ -1176,39 +1169,25 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
// <div ref={this._marqueeRef}>
@action
- handleDragging = (e: CustomEvent<React.DragEvent>, de: DragEvent) => {
- if ((e as any).handlePan) return;
+ onDragAutoScroll = (e: CustomEvent<React.DragEvent>) => {
+ if ((e as any).handlePan || this.props.isAnnotationOverlay) return;
(e as any).handlePan = true;
- this._lastClientY = e.detail.clientY;
- this._lastClientX = e.detail.clientX;
if (this._marqueeRef?.current) {
const dragX = e.detail.clientX;
const dragY = e.detail.clientY;
const bounds = this._marqueeRef.current?.getBoundingClientRect();
- const deltaX = dragX - bounds.left < 25 ? -2 : bounds.right - dragX < 25 ? 2 : 0;
- const deltaY = dragY - bounds.top < 25 ? -2 : bounds.bottom - dragY < 25 ? 2 : 0;
- (deltaX !== 0 || deltaY !== 0) && this.continuePan(deltaX, deltaY);
+ const deltaX = dragX - bounds.left < 25 ? -(25 + (bounds.left - dragX)) : bounds.right - dragX < 25 ? 25 - (bounds.right - dragX) : 0;
+ const deltaY = dragY - bounds.top < 25 ? -(25 + (bounds.top - dragY)) : bounds.bottom - dragY < 25 ? 25 - (bounds.bottom - dragY) : 0;
+ if (deltaX !== 0 || deltaY !== 0) {
+ this.Document._panY = NumCast(this.Document._panY) + deltaY / 2;
+ this.Document._panX = NumCast(this.Document._panX) + deltaX / 2;
+ }
}
e.stopPropagation();
}
- continuePan = (deltaX: number, deltaY: number) => {
- setTimeout(action(() => {
- const dragY = this._lastClientY;
- const dragX = this._lastClientX;
- if (dragY !== undefined && dragX !== undefined && this._marqueeRef.current) {
- const bounds = this._marqueeRef.current.getBoundingClientRect();
- this.Document._panY = NumCast(this.Document._panY) + deltaY;
- this.Document._panX = NumCast(this.Document._panX) + deltaX;
- if (dragY - bounds.top < 25 || bounds.bottom - dragY < 25 || dragX - bounds.left < 25 || bounds.right - dragX < 25) {
- this.continuePan(deltaX, deltaY);
- }
- } else this._lastClientY !== undefined && this._lastClientX !== undefined && this.continuePan(deltaX, deltaY);
- }), 50);
- }
-
promoteCollection = undoBatch(action(() => {
const childDocs = this.childDocs.slice();
childDocs.forEach(doc => {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 16:34:26 +0000