Street testing fixes
This commit is contained in:
Robin Davies
@@ -0,0 +1,369 @@
|
||||
// Copyright (c) 2021 Robin Davies
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
// this software and associated documentation files (the "Software"), to deal in
|
||||
// the Software without restriction, including without limitation the rights to
|
||||
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
// the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
// subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in all
|
||||
// copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
import React, { TouchEvent, PointerEvent, SyntheticEvent } from 'react'; import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
|
||||
import { PiPedalModel, PiPedalModelFactory, ZoomedControlInfo } from './PiPedalModel';
|
||||
|
||||
const SELECTED_OPACITY = 0.8;
|
||||
const DEFAULT_OPACITY = 0.6;
|
||||
const FINE_RANGE_SCALE = 0.1; //
|
||||
const ULTRA_FINE_RANGE_SCALE = 0.02; // 12000 pixels to move from 0 to 1.
|
||||
|
||||
const MIN_ANGLE = -135;
|
||||
const MAX_ANGLE = 135;
|
||||
const DEAD_ZONE_SIZE = 5;
|
||||
|
||||
|
||||
const styles = (theme: Theme) => createStyles({
|
||||
});
|
||||
|
||||
|
||||
interface ZoomedDialProps extends WithStyles<typeof styles> {
|
||||
theme: Theme,
|
||||
size: number,
|
||||
|
||||
controlInfo: ZoomedControlInfo | undefined,
|
||||
|
||||
onPreviewValue(value: number): void,
|
||||
onSetValue(value: number): void
|
||||
};
|
||||
|
||||
interface ZoomedDialState {
|
||||
|
||||
};
|
||||
|
||||
const ZoomedDial = withStyles(styles, { withTheme: true })(
|
||||
|
||||
class extends React.Component<ZoomedDialProps, ZoomedDialState> {
|
||||
|
||||
model: PiPedalModel = PiPedalModelFactory.getInstance();
|
||||
imgRef: React.RefObject<HTMLImageElement> = React.createRef();
|
||||
|
||||
constructor(props: ZoomedDialProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
};
|
||||
|
||||
this.onTouchStart = this.onTouchStart.bind(this);
|
||||
this.onTouchMove = this.onTouchMove.bind(this);
|
||||
this.onBodyPointerDownCapture = this.onBodyPointerDownCapture.bind(this);
|
||||
|
||||
this.onPointerDown = this.onPointerDown.bind(this);
|
||||
this.onPointerUp = this.onPointerUp.bind(this);
|
||||
this.onPointerMove = this.onPointerMove.bind(this);
|
||||
this.onPointerLostCapture = this.onPointerLostCapture.bind(this);
|
||||
|
||||
}
|
||||
|
||||
onPointerUp(e: PointerEvent<HTMLImageElement>) {
|
||||
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
this.updateAngle(e);
|
||||
this.commitAngle();
|
||||
|
||||
this.releaseCapture(e);
|
||||
|
||||
} else {
|
||||
--this.pointersDown;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
releaseCapture(e: PointerEvent<HTMLImageElement>)
|
||||
{
|
||||
let img = this.imgRef.current;
|
||||
|
||||
if (img && img.style) {
|
||||
img.releasePointerCapture(e.pointerId);
|
||||
img.style.opacity = "" + DEFAULT_OPACITY;
|
||||
// they get automaticlly released.
|
||||
// for (let i = 0; i < this.capturedPointers.length; ++i)
|
||||
// {
|
||||
// img.releasePointerCapture (this.capturedPointers[i]);
|
||||
// }
|
||||
this.capturedPointers = [];
|
||||
}
|
||||
document.body.removeEventListener(
|
||||
"pointerdown",
|
||||
this.onBodyPointerDownCapture,true
|
||||
);
|
||||
|
||||
this.mouseDown = false;
|
||||
|
||||
}
|
||||
|
||||
|
||||
onPointerLostCapture(e: PointerEvent<HTMLImageElement>) {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
this.releaseCapture(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onTouchStart(e: TouchEvent<HTMLImageElement>) {
|
||||
//must be defined to get onTouchMove
|
||||
}
|
||||
onTouchMove(e: TouchEvent<HTMLImageElement>) {
|
||||
// e.preventDefault();
|
||||
e.stopPropagation(); // cancels scroll!!!
|
||||
|
||||
}
|
||||
capturedPointers: number[] = [];
|
||||
|
||||
isExtraTouch(e: PointerEvent): boolean {
|
||||
return (this.mouseDown && this.pointerType === "touch" && e.pointerType === "touch" && e.pointerId !== this.pointerId);
|
||||
}
|
||||
|
||||
mouseDown: boolean = false;
|
||||
pointerId: number = -1;
|
||||
pointerType: string = "";
|
||||
startX: number = 0;
|
||||
startY: number = 0;
|
||||
currentAngle: number = 0;
|
||||
lastPointerAngle: number = 0;
|
||||
|
||||
isValidPointer(e: PointerEvent<HTMLImageElement>): boolean {
|
||||
if (e.pointerType === "mouse") {
|
||||
return e.button === 0;
|
||||
} else if (e.pointerType === "pen") {
|
||||
return true;
|
||||
} else if (e.pointerType === "touch") {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
defaultValue: number = 0;
|
||||
|
||||
getCurrentValue(): number {
|
||||
if (this.props.controlInfo == null) {
|
||||
return this.defaultValue;
|
||||
} else {
|
||||
let uiControl = this.props.controlInfo.uiControl;
|
||||
let instanceId = this.props.controlInfo.instanceId;
|
||||
if (instanceId === -1) return 0;
|
||||
let pedalBoardItem = this.model.pedalBoard.get()?.getItem(instanceId);
|
||||
let value: number = pedalBoardItem?.getControlValue(this.props.controlInfo.uiControl.symbol) ?? 0;
|
||||
this.defaultValue = value;
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
angleToValue(angle: number): number {
|
||||
if (this.props.controlInfo) {
|
||||
if (angle > MAX_ANGLE) angle = MAX_ANGLE;
|
||||
if (angle < MIN_ANGLE) angle = MIN_ANGLE;
|
||||
|
||||
let r = (angle - MIN_ANGLE) / (MAX_ANGLE - MIN_ANGLE);
|
||||
|
||||
let uiControl = this.props.controlInfo.uiControl;
|
||||
|
||||
return r * (uiControl.max_value-uiControl.min_value)+uiControl.min_value;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
valueToAngle(value: number): number {
|
||||
if (this.props.controlInfo) {
|
||||
let uiControl = this.props.controlInfo.uiControl;
|
||||
let range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
|
||||
if (range < 0) range = 0;
|
||||
if (range > 1) range = 1;
|
||||
return (MAX_ANGLE - MIN_ANGLE) * range + MIN_ANGLE;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
pointerToAngle(e: PointerEvent<HTMLImageElement>): number {
|
||||
|
||||
if (this.imgRef.current) {
|
||||
let img = this.imgRef.current;
|
||||
let rc = img.getBoundingClientRect();
|
||||
let x = e.clientX - (rc.left+ rc.width / 2);
|
||||
let y = e.clientY - (rc.top + rc.height / 2);
|
||||
|
||||
// dead zone in center of image.
|
||||
|
||||
if (x*x+y*y < DEAD_ZONE_SIZE*DEAD_ZONE_SIZE) return NaN;
|
||||
|
||||
let angle = -Math.atan2(-y, x) * 180 / Math.PI + 90;
|
||||
|
||||
return angle;
|
||||
}
|
||||
return NaN;
|
||||
}
|
||||
captureElement?: HTMLElement;
|
||||
pointersDown: number = 0;
|
||||
|
||||
onPointerDown(e: PointerEvent<HTMLImageElement>): void {
|
||||
if (!this.mouseDown && this.isValidPointer(e)) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|
||||
|
||||
this.mouseDown = true;
|
||||
this.pointersDown = 1;
|
||||
this.pointerId = e.pointerId;
|
||||
this.pointerType = e.pointerType;
|
||||
this.startX = e.clientX;
|
||||
this.startY = e.clientY;
|
||||
this.currentAngle = this.valueToAngle(this.getCurrentValue());
|
||||
this.lastPointerAngle = this.pointerToAngle(e);
|
||||
|
||||
let img = this.imgRef.current;
|
||||
|
||||
if (img) {
|
||||
this.captureElement = img;
|
||||
document.body.addEventListener(
|
||||
"pointerdown",
|
||||
this.onBodyPointerDownCapture, true
|
||||
);
|
||||
|
||||
img.setPointerCapture(e.pointerId);
|
||||
if (img.style) {
|
||||
img.style.opacity = "" + SELECTED_OPACITY;
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
if (this.isExtraTouch(e)) {
|
||||
++this.pointersDown;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isCapturedPointer(e: PointerEvent<HTMLImageElement>): boolean {
|
||||
return this.mouseDown
|
||||
&& e.pointerId === this.pointerId
|
||||
&& e.pointerType === this.pointerType;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onPointerMove(e: PointerEvent<HTMLImageElement>): void {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
e.preventDefault();
|
||||
this.updateAngle(e)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
commitAngle() {
|
||||
let previewValue = this.angleToValue(this.currentAngle);
|
||||
this.props.onSetValue(previewValue);
|
||||
this.defaultValue = previewValue;
|
||||
|
||||
|
||||
}
|
||||
updateAngle(e: PointerEvent<HTMLImageElement>): void {
|
||||
let angle: number = this.pointerToAngle(e);
|
||||
if (!isNaN(angle)) {
|
||||
if (!isNaN(this.lastPointerAngle)) {
|
||||
let dAngle = angle-this.lastPointerAngle;
|
||||
while (dAngle > 180) dAngle -= 360;
|
||||
while (dAngle < -180) dAngle += 360;
|
||||
|
||||
let scale = 1.0;
|
||||
if (this.pointersDown === 2)
|
||||
{
|
||||
scale = FINE_RANGE_SCALE;
|
||||
} else if (this.pointersDown >= 3)
|
||||
{
|
||||
scale = ULTRA_FINE_RANGE_SCALE;
|
||||
}
|
||||
|
||||
this.currentAngle += dAngle*scale;
|
||||
let previewValue = this.angleToValue(this.currentAngle);
|
||||
this.previewValue(previewValue);
|
||||
this.props.onPreviewValue(previewValue);
|
||||
}
|
||||
this.lastPointerAngle = angle;
|
||||
}
|
||||
}
|
||||
makeRotationTransform(angle: number): string
|
||||
{
|
||||
return "rotate(" + angle + "deg)";
|
||||
}
|
||||
|
||||
getDefaultRotationTransform(): string
|
||||
{
|
||||
let v = this.getCurrentValue();
|
||||
let a = this.valueToAngle(v);
|
||||
return this.makeRotationTransform(a);
|
||||
}
|
||||
previewValue(value: number): void
|
||||
{
|
||||
if (this.imgRef.current)
|
||||
{
|
||||
let img = this.imgRef.current;
|
||||
let angle = this.valueToAngle(value);
|
||||
img.style.transform = this.makeRotationTransform(angle);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
onBodyPointerDownCapture(e_: any): any {
|
||||
let e = e_ as PointerEvent;
|
||||
if (this.isExtraTouch(e)) {
|
||||
this.captureElement!.setPointerCapture(e.pointerId);
|
||||
this.capturedPointers.push(e.pointerId);
|
||||
++this.pointersDown;
|
||||
}
|
||||
|
||||
}
|
||||
onDrag(e: SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<img ref={this.imgRef} src="img/fx_dial.svg"
|
||||
style={{
|
||||
overscrollBehavior: "none", touchAction: "none",
|
||||
width: this.props.size, height: this.props.size, opacity: DEFAULT_OPACITY,
|
||||
transform: this.getDefaultRotationTransform()
|
||||
}}
|
||||
draggable="true"
|
||||
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
|
||||
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp}
|
||||
onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default ZoomedDial;
|
||||
Reference in New Issue
Block a user