double-tap to reset to default for zoomed controls.

react/src/PluginControl.tsx

@@ -427,7 +427,6 @@ const PluginControl =
                 }
             }
             onPointerTap() {
-                // yyy
                 let tapTime = Date.now();
                 let dT = tapTime-this.lastTapMs;
                 this.lastTapMs = tapTime;

react/src/ZoomedDial.tsx

@@ -49,7 +49,7 @@ interface ZoomedDialProps extends WithStyles<typeof styles> {
     size: number,
 
     controlInfo: ZoomedControlInfo | undefined,
-
+    onDoubleTap(): void,
     onPreviewValue(value: number): void,
     onSetValue(value: number): void
 }
@@ -81,6 +81,22 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
             this.onPointerLostCapture = this.onPointerLostCapture.bind(this);
 
         }
+        onPointerDoubleTap() {
+            this.props.onDoubleTap();
+        }
+
+        private lastTapMs: number = 0;
+
+        onPointerTap() {
+            let tapTime = Date.now();
+            let dT = tapTime-this.lastTapMs;
+            this.lastTapMs = tapTime;
+
+            if (dT < 500)
+            {
+                this.onPointerDoubleTap();
+            }
+        }
 
         onPointerUp(e: PointerEvent<SVGSVGElement>) {
 
@@ -94,6 +110,15 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
 
                 this.releaseCapture(e);
 
+                if (this.isTap) {
+                    let ms = Date.now() - this.tapStartMs;
+                    if (ms < 200) {
+                        this.onPointerTap();
+                    }
+                }
+
+
+
             } else {
                 --this.pointersDown;
 
@@ -101,8 +126,7 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
         }
 
 
-        releaseCapture(e: PointerEvent<SVGSVGElement>)
-        {
+        releaseCapture(e: PointerEvent<SVGSVGElement>) {
             let img = this.imgRef.current;
 
             if (img && img.style) {
@@ -229,7 +253,8 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
         }
         captureElement?: SVGSVGElement;
         pointersDown: number = 0;
-
+        private isTap: boolean = false;
+        private tapStartMs: number = 0;
         onPointerDown(e: PointerEvent<SVGSVGElement>): void {
             if (!this.mouseDown && this.isValidPointer(e)) {
                 e.preventDefault();
@@ -238,6 +263,10 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
 
 
                 this.mouseDown = true;
+
+                this.isTap = true;
+                this.tapStartMs = Date.now();
+
                 this.pointersDown = 1;
                 this.pointerId = e.pointerId;
                 this.pointerType = e.pointerType;
@@ -276,12 +305,25 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
 
         }
 
+        clickSlop() {
+            return 3.5;  // maybe larger on touch devices.
+        }
 
 
         onPointerMove(e: PointerEvent<SVGSVGElement>): void {
             if (this.isCapturedPointer(e)) {
                 e.preventDefault();
-                this.updateAngle(e)
+                this.updateAngle(e);
+
+
+                let x = e.clientX;
+                let y = e.clientY;
+                let dx = x - this.startX;
+                let dy = y - this.startY;
+                let distance = Math.sqrt(dx * dx + dy * dy);
+                if (distance >= this.clickSlop()) {
+                    this.isTap = false;
+                }
             }
         }
 
@@ -302,11 +344,9 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
                     while (dAngle < -180) dAngle += 360;
 
                     let scale = 1.0;
-                    if (this.pointersDown === 2)
-                    {
+                    if (this.pointersDown === 2) {
                         scale = FINE_RANGE_SCALE;
-                    } else if (this.pointersDown >= 3)
-                    {
+                    } else if (this.pointersDown >= 3) {
                         scale = ULTRA_FINE_RANGE_SCALE;
                     }
 
@@ -318,21 +358,17 @@ const ZoomedDial = withStyles(styles, { withTheme: true })(
                 this.lastPointerAngle = angle;
             }
         }
-        makeRotationTransform(angle: number): string
-        {
+        makeRotationTransform(angle: number): string {
             return "rotate(" + angle + "deg)";
         }
 
-        getDefaultRotationTransform(): string
-        {
+        getDefaultRotationTransform(): string {
             let v = this.getCurrentValue();
             let a = this.valueToAngle(v);
             return this.makeRotationTransform(a);
         }
-        previewValue(value: number): void
-        {
-            if (this.imgRef.current)
-            {
+        previewValue(value: number): void {
+            if (this.imgRef.current) {
                 let img = this.imgRef.current;
                 let angle = this.valueToAngle(value);
                 img.style.transform = this.makeRotationTransform(angle);

react/src/ZoomedUiControl.tsx

@@ -195,6 +195,14 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
                 );
             }
         }
+        onDoubleTap() {
+            let controlInfo = this.props.controlInfo;
+            if (!controlInfo) return;
+            let instanceId = controlInfo?.instanceId;
+            let uiControl = controlInfo?.uiControl
+            
+            this.model.setPedalboardControl(instanceId,uiControl.symbol,uiControl.default_value);
+        }
 
         render() {
             if (!this.props.controlInfo) {
@@ -241,6 +249,7 @@ const ZoomedUiControl = withStyles(styles, { withTheme: true })(
                             {uiControl.isDial() ? (
 
                                 <ZoomedDial size={200} controlInfo={this.props.controlInfo}
+                                    onDoubleTap={()=>{this.onDoubleTap();}}
                                     onPreviewValue={(v) => {
                                         this.setState({ value: v });
                                     }}