aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/Touchable.tsx65
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.tsx94
3 files changed, 100 insertions, 60 deletions
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 7800c4019..eed72e3c5 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -8,9 +8,12 @@ const HOLD_DURATION = 1000;
export abstract class Touchable<T = {}> extends React.Component<T> {
//private holdTimer: NodeJS.Timeout | undefined;
- private holdTimer: NodeJS.Timeout | undefined;
+ holdTimer: NodeJS.Timeout | undefined;
private moveDisposer?: InteractionUtils.MultiTouchEventDisposer;
private endDisposer?: InteractionUtils.MultiTouchEventDisposer;
+ private holdMoveDisposer?: InteractionUtils.MultiTouchEventDisposer;
+ private holdEndDisposer?: InteractionUtils.MultiTouchEventDisposer;
+
protected abstract multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
protected _touchDrag: boolean = false;
@@ -65,8 +68,10 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
// clearTimeout(this.holdTimer)
// this.holdTimer = undefined;
// }
- this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(te, me), HOLD_DURATION);
- // e.stopPropagation();
+ console.log(this.holdTimer);
+ if (!this.holdTimer) {
+ this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(e, me), HOLD_DURATION);
+ }
// console.log(this.holdTimer);
break;
case 2:
@@ -128,7 +133,12 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
}
}
if (this.holdTimer) {
+ console.log(this.holdTimer);
clearTimeout(this.holdTimer);
+ console.log(this.holdTimer);
+
+ this.holdTimer = undefined;
+ console.log(this.holdTimer);
console.log("clear");
}
this._touchDrag = false;
@@ -174,10 +184,17 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
this.addEndListeners();
}
- handle1PointerHoldStart = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
+ handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
e.stopPropagation();
- e.preventDefault();
+ me.touchEvent.stopPropagation();
+ this.holdTimer = undefined;
this.removeMoveListeners();
+ this.removeEndListeners();
+ this.removeHoldMoveListeners();
+ this.removeHoldEndListeners();
+ this.addHoldMoveListeners();
+ this.addHoldEndListeners();
+
}
addMoveListeners = () => {
@@ -200,6 +217,44 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
this.endDisposer && this.endDisposer();
}
+ addHoldMoveListeners = () => {
+ const handler = (e: Event) => this.handle1PointerHoldMove(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
+ document.addEventListener("dashOnTouchHoldMove", handler);
+ this.holdMoveDisposer = () => document.removeEventListener("dashOnTouchHoldMove", handler);
+ }
+
+ addHoldEndListeners = () => {
+ const handler = (e: Event) => this.handle1PointerHoldEnd(e, (e as CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>).detail);
+ document.addEventListener("dashOnTouchHoldEnd", handler);
+ this.holdEndDisposer = () => document.removeEventListener("dashOnTouchHoldEnd", handler);
+ }
+
+ removeHoldMoveListeners = () => {
+ this.holdMoveDisposer && this.holdMoveDisposer();
+ }
+
+ removeHoldEndListeners = () => {
+ this.holdEndDisposer && this.holdEndDisposer();
+ }
+
+
+ handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+ e.stopPropagation();
+ me.touchEvent.stopPropagation();
+ }
+
+
+ handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+ e.stopPropagation();
+ me.touchEvent.stopPropagation();
+ this.removeHoldMoveListeners();
+ this.removeHoldEndListeners();
+
+ me.touchEvent.stopPropagation();
+ me.touchEvent.preventDefault();
+ }
+
+
handleHandDown = (e: React.TouchEvent) => {
// e.stopPropagation();
// e.preventDefault();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index aaa585b55..2622d9b28 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -494,6 +494,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
const pt1 = myTouches[0];
const pt2 = myTouches[1];
+ console.log(myTouches);
if (this.prevPoints.size === 2) {
const oldPoint1 = this.prevPoints.get(pt1.identifier);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0b6a284d6..ae2ee9e41 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -119,61 +119,45 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
private _firstY: number = 0;
- // handle1PointerHoldStart = (e: React.TouchEvent): any => {
- // this.onRadialMenu(e);
- // const pt = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
- // this._firstX = pt.pageX;
- // this._firstY = pt.pageY;
- // e.stopPropagation();
- // e.preventDefault();
-
- // document.removeEventListener("touchmove", this.onTouch);
- // document.removeEventListener("touchmove", this.handle1PointerHoldMove);
- // document.addEventListener("touchmove", this.handle1PointerHoldMove);
- // document.removeEventListener("touchend", this.handle1PointerHoldEnd);
- // document.addEventListener("touchend", this.handle1PointerHoldEnd);
- // }
-
- // handle1PointerHoldMove = (e: TouchEvent): void => {
- // const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
- // if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
- // this.handleRelease();
- // }
- // document.removeEventListener("touchmove", this.handle1PointerHoldMove);
- // document.addEventListener("touchmove", this.handle1PointerHoldMove);
- // document.removeEventListener("touchend", this.handle1PointerHoldEnd);
- // document.addEventListener("touchend", this.handle1PointerHoldEnd);
- // }
-
- // handleRelease() {
- // RadialMenu.Instance.closeMenu();
- // document.removeEventListener("touchmove", this.handle1PointerHoldMove);
- // document.removeEventListener("touchend", this.handle1PointerHoldEnd);
- // }
-
- // handle1PointerHoldEnd = (e: TouchEvent): void => {
- // RadialMenu.Instance.closeMenu();
- // document.removeEventListener("touchmove", this.handle1PointerHoldMove);
- // document.removeEventListener("touchend", this.handle1PointerHoldEnd);
- // }
-
- // @action
- // onRadialMenu = (e: React.TouchEvent): void => {
- // const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
-
- // RadialMenu.Instance.openMenu();
-
- // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 });
- // RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 });
- // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 });
- // RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
-
- // RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15);
- // if (!SelectionManager.IsSelected(this, true)) {
- // SelectionManager.SelectDoc(this, false);
- // }
- // e.stopPropagation();
- // }
+ handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
+ console.log("S");
+ this.onRadialMenu(e, me);
+ const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
+ this._firstX = pt.pageX;
+ this._firstY = pt.pageY;
+
+ }
+
+ handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+ console.log("K");
+ const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
+ if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
+ this.handle1PointerHoldEnd(e, me);
+ }
+ }
+
+ handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
+ console.log("E");
+ RadialMenu.Instance.closeMenu();
+ }
+
+ @action
+ onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): void => {
+ const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
+
+ RadialMenu.Instance.openMenu();
+
+ RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
+
+ RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15);
+ if (!SelectionManager.IsSelected(this, true)) {
+ SelectionManager.SelectDoc(this, false);
+ }
+ e.stopPropagation();
+ }
@action
componentDidMount() {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 18:36:16 +0000