Fix touch re-ordering in the presets and bank management dialogs.

todo.txt

@@ -3,6 +3,7 @@ channel bindings help dialog. <ChannelBindingHelpDialog
 
 Tooltips on touch ui? 
 
+draggable UI: scrolloffset!?
 
 - pipewire aux in?
 

vite/src/pipedal/AppThemed.css

@@ -19,6 +19,10 @@ div {
     min-width: 0;
 }
 
+.draggable-button-base {
+    touch-action: none;
+}
+
 @media not all  /* seems to be ok in current chrome (prefers-color-scheme: light) */{
     input[type="number"].scrollMod::-webkit-outer-spin-button,
     input[type="number"].scrollMod::-webkit-inner-spin-button {

vite/src/pipedal/AppThemed.tsx

@@ -783,6 +783,11 @@ export
                     onContextMenu={(e) => {
                         if (!this.model_.debug) {
                             e.preventDefault(); e.stopPropagation();
+                        } else {
+                            if ((e.target as any).tagName === "IMG") {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }
                         }
                     }}
                 >

vite/src/pipedal/BankDialog.tsx

@@ -456,7 +456,7 @@ const BankDialog = withStyles(
                                     {(this.state.banks.getEntry(this.state.selectedItem) != null)
                                         && (
 
-                                            <div style={{ flex: "0 0 auto" }}>
+                                            <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center" }}>
                                                 <Button color="inherit" onClick={(e) => this.handleCopy()}>
                                                     Copy
                                                 </Button>

vite/src/pipedal/DraggableButtonBase.tsx

@@ -48,18 +48,12 @@ function isValidPointer(e: React.PointerEvent): boolean {
     return false;
 }
 
-function screenToClient(element: HTMLElement, point: Point): Point {
+function screenToClient(e: React.PointerEvent): Point {
-    const dpr = (window.devicePixelRatio || 1) as number;;
+    let element = e.currentTarget;
     let rect = element.getBoundingClientRect();
-    const cssScreenX = point.x / dpr;
+    const x = e.clientX + rect.left;
-    const cssScreenY = point.y / dpr;
+    const y = e.clientY + rect.right;
-    const cssWindowX = window.screenX / dpr;
+    return { x: x, y: y };
-    const cssWindowY = window.screenY / dpr;
-
-    const clientX = cssScreenX - cssWindowX - rect.left;
-    const clientY = cssScreenY - cssWindowY - rect.top;
-
-    return { x: clientX, y: clientY };
 }
 
 export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
@@ -118,6 +112,12 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
     return (
         <ButtonBase
             {...rest}
+            className="draggable-button-base"
+            onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }}
             onPointerDown={(e) => {
                 if (!isValidPointer(e)) {
                     return;
@@ -127,7 +127,7 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
                 }
                 e.currentTarget.setPointerCapture(e.pointerId);
                 setPointerId(e.pointerId);
-                setPointerDownPoint(screenToClient(e.currentTarget,{ x: e.screenX, y: e.screenY }));
+                setPointerDownPoint(screenToClient(e));
 
                 let currentTarget = e.currentTarget as HTMLButtonElement;
                 if (longPressDelay === undefined || longPressDelay >= 0)
@@ -144,6 +144,9 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
                         setSuppressClick(true);
                     }, longPressDelay??1250)); 
                 }
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
             }}
             onPointerMove={(e) => {
                 if (e.pointerId === pointerId) {
@@ -152,7 +155,7 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
                             props.onLongPressMove(e);
                         }
                     } else {
-                        let clientPoint = screenToClient(e.currentTarget as HTMLElement, {x: e.screenX, y: e.screenY} );
+                        let clientPoint = screenToClient(e);
 
                         let dx = pointerDownPoint.x- clientPoint.x;
                         let dy = pointerDownPoint.y - clientPoint.y;
@@ -161,6 +164,9 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
                         }
                     }
                 }
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
             }}
             onPointerUp={(e) => {
                 if (e.pointerId === pointerId) {
@@ -176,8 +182,17 @@ export default function DraggableButtonBase(props: DraggableButtonBaseProps) {
                         setSuppressClick(true); // only way to cancel the click
                         return;
                     }
+                    e.preventDefault();
+                    e.stopPropagation();
+
                 }
             }}
+            // onTouchStart={(e)=> {
+            //     //e.preventDefault();
+            // }}
+            // onTouchMove={(e)=> {
+            //     //e.preventDefault();
+            // }}
             onClick={(e) => {
                 if (clickSuppressed) {
                     e.stopPropagation();

vite/src/pipedal/DraggableGrid.tsx

@@ -305,8 +305,6 @@ const DraggableGrid =
             handlePointerDownCapture(e: any) {
                 // a new pointer down of any type cancels capture
                 this.cancelDrag();
-                e.preventDefault();
-                e.stopPropagation();
             }
 
             
@@ -500,6 +498,7 @@ const DraggableGrid =
                 element.style.zIndex = this.savedIndex;
                 element.style.background = this.savedBackground;
                 element.style.opacity = "1";
+                element.style.touchAction = "";
 
             }
 
@@ -575,8 +574,8 @@ const DraggableGrid =
                 let originalBounds = this.animationData[this.startIndex].originalPosition;
 
                 let newLocation = new DOMRect(
-                    originalBounds.x + clientX - this.startX,
+                    originalBounds.x + clientX - this.startX+3,
-                    originalBounds.y + clientY - this.startY,
+                    originalBounds.y + clientY - this.startY+3,
                     originalBounds.width,
                     originalBounds.height);
 
@@ -704,6 +703,7 @@ const DraggableGrid =
 
                     this.savedIndex = gridElement.style.zIndex;
                     gridElement.style.zIndex = "3";
+                    gridElement.style.touchAction = "none";
                     this.savedBackground = gridElement.style.background;
                     gridElement.style.background = isDarkMode()? "333": "#EEE";
                     gridElement.style.opacity = "0.8";
@@ -719,8 +719,8 @@ const DraggableGrid =
                 let grid = this.refGrid.current!;
                 this.gridBounds = grid.getBoundingClientRect();
 
-                window.addEventListener("touchmove",this.handleTouchMove, {passive: false});
+                window.addEventListener("touchmove",this.handleTouchMove, {capture: true, passive: false});
-                window.addEventListener("touchend",this.handleTouchEnd, {passive: false});
+                window.addEventListener("touchend",this.handleTouchEnd, {capture: true, passive: false});
 
                 this.prepareChildren();
                 
@@ -754,7 +754,7 @@ const DraggableGrid =
                 }
             }
 
-            handlePointerMove(e: PointerEvent<HTMLDivElement>): void {
+            handlePointerMove(e: PointerEvent<HTMLDivElement>): boolean {
                 if (this.isCapturedPointer(e)) {
                     if (!this.dragStarted && this.dragThresholdExceeded(e)) {
                         this.startDrag();
@@ -779,8 +779,10 @@ const DraggableGrid =
                         }
 
                         this.checkForAutoScroll(e.currentTarget);
+                        return false;
                     }
                 }
+                return true;
             }
             autoScrollTimer?: number;
 

vite/src/pipedal/FilePropertyDialog.tsx

@@ -93,20 +93,11 @@ const audioFileExtensions: { [name: string]: boolean } = {
     ".ra": true
 };
 
-
+function screenToClient(currentTarget: HTMLElement, e: React.PointerEvent): Point {
-
+    let rect = currentTarget.getBoundingClientRect();
-function screenToClient(element: HTMLDivElement, point: Point): Point {
+    const x = e.clientX + rect.left;
-    const dpr = (window.devicePixelRatio || 1) as number;;
+    const y = e.clientY + rect.right;
-    let rect = element.getBoundingClientRect();
+    return { x: x, y: y };
-    const cssScreenX = point.x / dpr;
-    const cssScreenY = point.y / dpr;
-    const cssWindowX = window.screenX / dpr;
-    const cssWindowY = window.screenY / dpr;
-
-    const clientX = cssScreenX - cssWindowX - rect.left;
-    const clientY = cssScreenY - cssWindowY - rect.top;
-
-    return { x: clientX, y: clientY };
 }
 function isAudioFile(filename: string) {
     let npos = filename.lastIndexOf('.');
@@ -265,6 +256,11 @@ export default withStyles(
         private mounted: boolean = false;
         private model: PiPedalModel;
 
+        transformDragPoint(element: HTMLElement, point: Point): Point {
+            // STUB: will have to deal with scroll offset at some point.
+            return point;
+        }
+
         private requestFiles(navPath: string) {
             if (!this.props.open) {
                 return;
@@ -355,8 +351,8 @@ export default withStyles(
                 element.style.top = "5px";
                 element.style.left = "5px";
                 element.style.background = isDarkMode() ? "#555" : "#EEF" // xxx: dark mode.
-                if (this.lastDivRef) {
+                if (this.listContainerElementRef) {
-                    this.longPressStartPoint = screenToClient(this.lastDivRef, { x: e.screenX, y: e.screenY });
+                    this.longPressStartPoint = screenToClient(currentTarget,e);
                 }
                 return true;
             } else if (!this.state.multiSelect) {
@@ -379,9 +375,9 @@ export default withStyles(
                 if (!this.isTracksDirectory()) {
                     return;
                 }
-                if (this.lastDivRef) {
+                if (this.listContainerElementRef) {
                     let element = e.target as HTMLButtonElement;
-                    let point = screenToClient(this.lastDivRef, { x: e.screenX, y: e.screenY });
+                    let point = screenToClient(e.currentTarget,e);
                     if (this.longPressStartPoint) {
                         let dy = point.y - this.longPressStartPoint.y;
                         element.style.left = (5) + "px";
@@ -929,6 +925,8 @@ export default withStyles(
             return (<InsertDriveFileIcon style={style} />);
         }
 
+        listContainerElementRef: HTMLDivElement | null = null;
+
         render() {
             const isTracksDirectory = this.isTracksDirectory();
 
@@ -1167,7 +1165,7 @@ export default withStyles(
                             </div>
 
                             <div
-                                ref={(element) => this.onMeasureRef(element)}
+                                ref={(element) => { this.listContainerElementRef = element; this.onMeasureRef(element); }}
                                 style={{
                                     flex: "1 1 100%", display: "flex", flexFlow: "row wrap",
                                     position: "relative", justifyContent: "flex-start", alignContent: "flex-start", paddingLeft: 16, paddingBottom: 16

vite/src/pipedal/PresetDialog.tsx

@@ -385,7 +385,9 @@ const PresetDialog = withStyles(
                                     {(this.state.presets.getItem(this.state.selectedItem) != null)
                                         && (
 
-                                            <div style={{ flex: "0 0 auto" }}>
+                                            <div style={{ flex: "0 0 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center"
+                                                
+                                             }}>
                                                 <Button color="inherit" onClick={(e) => this.handleCopy()}>
                                                     Copy
                                                 </Button>