Port from CRT to Vite
This commit is contained in:
Robin E. R. Davies
@@ -0,0 +1,415 @@
|
||||
// Copyright (c) 2022 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 } from '@mui/material/styles';
|
||||
import WithStyles from './WithStyles';
|
||||
import { withStyles } from "tss-react/mui";
|
||||
import {createStyles} from './WithStyles';
|
||||
|
||||
import { PiPedalModel, PiPedalModelFactory, ZoomedControlInfo } from './PiPedalModel';
|
||||
import DialIcon from './svg/fx_dial.svg?react';
|
||||
|
||||
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({
|
||||
dialIcon: {
|
||||
overscrollBehavior: "none", touchAction: "none",
|
||||
fill: theme.palette.text.primary,
|
||||
opacity: DEFAULT_OPACITY,
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
interface ZoomedDialProps extends WithStyles<typeof styles> {
|
||||
size: number,
|
||||
|
||||
controlInfo: ZoomedControlInfo | undefined,
|
||||
onDoubleTap(): void,
|
||||
onPreviewValue(value: number): void,
|
||||
onSetValue(value: number): void
|
||||
}
|
||||
|
||||
interface ZoomedDialState {
|
||||
|
||||
}
|
||||
|
||||
const ZoomedDial = withStyles(
|
||||
|
||||
class extends React.Component<ZoomedDialProps, ZoomedDialState> {
|
||||
|
||||
model: PiPedalModel = PiPedalModelFactory.getInstance();
|
||||
imgRef: React.RefObject<SVGSVGElement|null> = 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);
|
||||
|
||||
}
|
||||
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>) {
|
||||
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
this.updateAngle(e);
|
||||
this.commitAngle();
|
||||
|
||||
this.releaseCapture(e);
|
||||
|
||||
if (this.isTap) {
|
||||
let ms = Date.now() - this.tapStartMs;
|
||||
if (ms < 200) {
|
||||
this.onPointerTap();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
--this.pointersDown;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
releaseCapture(e: PointerEvent<SVGSVGElement>) {
|
||||
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<SVGSVGElement>) {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
this.releaseCapture(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onTouchStart(e: TouchEvent<SVGSVGElement>) {
|
||||
//must be defined to get onTouchMove
|
||||
}
|
||||
onTouchMove(e: TouchEvent<SVGSVGElement>) {
|
||||
// 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<SVGSVGElement>): 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(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<SVGSVGElement>): 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?: 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();
|
||||
e.stopPropagation();
|
||||
|
||||
|
||||
|
||||
this.mouseDown = true;
|
||||
|
||||
this.isTap = true;
|
||||
this.tapStartMs = Date.now();
|
||||
|
||||
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<SVGSVGElement>): boolean {
|
||||
return this.mouseDown
|
||||
&& e.pointerId === this.pointerId
|
||||
&& e.pointerType === this.pointerType;
|
||||
|
||||
}
|
||||
|
||||
clickSlop() {
|
||||
return 3.5; // maybe larger on touch devices.
|
||||
}
|
||||
|
||||
|
||||
onPointerMove(e: PointerEvent<SVGSVGElement>): void {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
e.preventDefault();
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
commitAngle() {
|
||||
let previewValue = this.angleToValue(this.currentAngle);
|
||||
this.props.onSetValue(previewValue);
|
||||
this.defaultValue = previewValue;
|
||||
|
||||
|
||||
}
|
||||
updateAngle(e: PointerEvent<SVGSVGElement>): 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() {
|
||||
const classes = withStyles.getClasses(this.props);
|
||||
return (
|
||||
<DialIcon ref={this.imgRef} className={classes.dialIcon}
|
||||
style={{
|
||||
transform: this.getDefaultRotationTransform(),
|
||||
width: this.props.size, height: this.props.size,
|
||||
}}
|
||||
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
|
||||
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp}
|
||||
onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
styles
|
||||
);
|
||||
|
||||
export default ZoomedDial;
|
||||
Reference in New Issue
Block a user