First commit.
This commit is contained in:
Robin Davies
@@ -0,0 +1,743 @@
|
||||
import React, { TouchEvent, PointerEvent, ReactNode, Component, SyntheticEvent } from 'react';
|
||||
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
|
||||
import { UiControl, ScalePoint } from './Lv2Plugin';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Input from '@material-ui/core/Input';
|
||||
import Select from '@material-ui/core/Select';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import Units from './Units';
|
||||
import Utility, {nullCast} from './Utility';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
|
||||
|
||||
const MIN_ANGLE = -135;
|
||||
const MAX_ANGLE = 135;
|
||||
const FONT_SIZE = "0.8em";
|
||||
|
||||
|
||||
|
||||
const SELECTED_OPACITY = 0.8;
|
||||
const DEFAULT_OPACITY = 0.6;
|
||||
const RANGE_SCALE = 120; // 120 pixels to move from 0 to 1.
|
||||
const FINE_RANGE_SCALE = RANGE_SCALE * 10; // 1200 pixels to move from 0 to 1.
|
||||
const ULTRA_FINE_RANGE_SCALE = RANGE_SCALE * 50; // 12000 pixels to move from 0 to 1.
|
||||
|
||||
|
||||
export const StandardItemSize = { width: 80, height: 140 }
|
||||
|
||||
|
||||
|
||||
const styles = (theme: Theme) => createStyles({
|
||||
frame: {
|
||||
position: "relative",
|
||||
margin: "12px"
|
||||
},
|
||||
switchTrack: {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
borderRadius: 14 / 2,
|
||||
zIndex: -1,
|
||||
transition: theme.transitions.create(['opacity', 'background-color'], {
|
||||
duration: theme.transitions.duration.shortest
|
||||
}),
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
opacity: theme.palette.type === 'light' ? 0.38 : 0.3
|
||||
},
|
||||
displayValue: {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 4,
|
||||
textAlign: "center",
|
||||
background: "white",
|
||||
color: "#666",
|
||||
// zIndex: -1,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export interface PluginControlProps extends WithStyles<typeof styles> {
|
||||
uiControl?: UiControl;
|
||||
value: number;
|
||||
onPreviewChange?: (value: number) => void;
|
||||
onChange: (value: number) => void;
|
||||
theme: Theme;
|
||||
requestIMEEdit: (uiControl: UiControl, value: number) => void;
|
||||
};
|
||||
type PluginControlState = {
|
||||
error: boolean;
|
||||
};
|
||||
|
||||
const PluginControl =
|
||||
withStyles(styles, { withTheme: true })(
|
||||
class extends Component<PluginControlProps, PluginControlState>
|
||||
{
|
||||
imgRef: React.RefObject<HTMLImageElement>;
|
||||
inputRef: React.RefObject<HTMLInputElement>;
|
||||
selectRef: React.RefObject<HTMLSelectElement>;
|
||||
|
||||
displayValueRef: React.RefObject<HTMLDivElement>;
|
||||
|
||||
constructor(props: PluginControlProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
error: false
|
||||
};
|
||||
|
||||
this.imgRef = React.createRef();
|
||||
this.inputRef = React.createRef();
|
||||
this.selectRef = React.createRef();
|
||||
this.displayValueRef = React.createRef();
|
||||
|
||||
|
||||
this.onPointerDown = this.onPointerDown.bind(this);
|
||||
this.onPointerUp = this.onPointerUp.bind(this);
|
||||
this.onPointerMove = this.onPointerMove.bind(this);
|
||||
this.onPointerLostCapture = this.onPointerLostCapture.bind(this);
|
||||
this.onBodyPointerDownCapture = this.onBodyPointerDownCapture.bind(this);
|
||||
|
||||
this.onTouchStart = this.onTouchStart.bind(this);
|
||||
this.onTouchMove = this.onTouchMove.bind(this);
|
||||
//this.onTouchCancel = this.onTouchCancel.bind(this);
|
||||
|
||||
this.onSelectChanged = this.onSelectChanged.bind(this);
|
||||
this.onInputChange = this.onInputChange.bind(this);
|
||||
this.onInputLostFocus = this.onInputLostFocus.bind(this);
|
||||
this.onInputFocus = this.onInputFocus.bind(this);
|
||||
this.onInputKeyPress = this.onInputKeyPress.bind(this);
|
||||
}
|
||||
|
||||
inputChanged: boolean = false;
|
||||
|
||||
onInputLostFocus(event: any): void {
|
||||
if (this.inputChanged) // validation requried?
|
||||
{
|
||||
this.inputChanged = false;
|
||||
this.validateInput(event, true);
|
||||
|
||||
}
|
||||
this.displayValueRef.current!.style.display = "block";
|
||||
}
|
||||
onInputFocus(event: SyntheticEvent): void {
|
||||
this.displayValueRef.current!.style.display = "none";
|
||||
if (Utility.hasIMEKeyboard())
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.inputRef.current?.blur();
|
||||
this.props.requestIMEEdit(nullCast(this.props.uiControl),this.props.value)
|
||||
}
|
||||
}
|
||||
onInputKeyPress(e: any): void {
|
||||
if (e.charCode === 13 && this.inputChanged) {
|
||||
this.inputChanged = false;
|
||||
this.validateInput(e, true);
|
||||
}
|
||||
}
|
||||
|
||||
onInputChange(event: any): void {
|
||||
this.inputChanged = true;
|
||||
this.validateInput(event, false);
|
||||
}
|
||||
validateInput(event: any, commitValue: boolean) {
|
||||
if (!this.inputRef.current) return;
|
||||
|
||||
let text = this.inputRef.current.value;
|
||||
let valid = false;
|
||||
let result: number = this.currentValue;
|
||||
try {
|
||||
if (text.length === 0) {
|
||||
valid = false;
|
||||
} else {
|
||||
let v = Number(text);
|
||||
if (isNaN(v)) {
|
||||
valid = false;
|
||||
} else {
|
||||
valid = true;
|
||||
result = v;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
valid = false;
|
||||
}
|
||||
|
||||
if (commitValue) {
|
||||
this.setState({ error: false });
|
||||
if (!valid) {
|
||||
result = this.currentValue; // reset the value!
|
||||
}
|
||||
// clamp and quantize.
|
||||
let range = this.valueToRange(result);
|
||||
result = this.rangeToValue(range);
|
||||
if (event.currentTarget) {
|
||||
event.currentTarget.value = this.formatValue(this.props.uiControl, result);
|
||||
}
|
||||
this.previewInputValue(result, true);
|
||||
this.inputRef.current.value = this.formatValue(this.props.uiControl, result); // no rerender because the value won't change.
|
||||
} else {
|
||||
this.setState({ error: !valid });
|
||||
if (valid) {
|
||||
this.previewInputValue(result, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
startX: number = 0;
|
||||
startY: number = 0;
|
||||
mouseDown: boolean = false;
|
||||
|
||||
onDrag(e: SyntheticEvent) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
touchDown: boolean = false;
|
||||
touchIdentifier: number = -1;
|
||||
|
||||
onTouchStart(e: TouchEvent<HTMLImageElement>) {
|
||||
}
|
||||
onTouchMove(e: TouchEvent<HTMLImageElement>) {
|
||||
// e.preventDefault();
|
||||
e.stopPropagation(); // cancels scroll!!!
|
||||
|
||||
}
|
||||
|
||||
capturedPointers: number[] = [];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pointerId: number = 0;
|
||||
pointerType: string = "";
|
||||
|
||||
isCapturedPointer(e: PointerEvent<HTMLImageElement>): boolean {
|
||||
return this.mouseDown
|
||||
&& e.pointerId === this.pointerId
|
||||
&& e.pointerType === this.pointerType;
|
||||
|
||||
}
|
||||
|
||||
lastX: number = 0;
|
||||
lastY: number = 0;
|
||||
dRange: number = 0;
|
||||
|
||||
pointersDown: number = 0;
|
||||
captureElement?: HTMLElement = undefined;
|
||||
|
||||
onPointerDown(e: PointerEvent<HTMLImageElement>): void {
|
||||
if (!this.mouseDown && this.isValidPointer(e)) {
|
||||
++this.pointersDown;
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
this.mouseDown = true;
|
||||
|
||||
this.pointerId = e.pointerId;
|
||||
this.pointerType = e.pointerType;
|
||||
this.startX = e.clientX;
|
||||
this.startY = e.clientY;
|
||||
this.lastX = e.clientX;
|
||||
this.lastY = e.clientY;
|
||||
this.dRange = 0;
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
isExtraTouch(e: PointerEvent): boolean {
|
||||
return (this.mouseDown && this.pointerType === "touch" && e.pointerType === "touch" && e.pointerId !== this.pointerId);
|
||||
|
||||
}
|
||||
|
||||
onPointerLostCapture(e: PointerEvent<HTMLImageElement>) {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
this.releaseCapture(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
updateRange(e: PointerEvent<HTMLImageElement>): number {
|
||||
|
||||
let ultraHigh = false;
|
||||
let high = false;
|
||||
if (e.ctrlKey)
|
||||
{
|
||||
ultraHigh = true;
|
||||
}
|
||||
if (e.shiftKey)
|
||||
{
|
||||
high = true;
|
||||
}
|
||||
if (e.pointerType === "touch")
|
||||
{
|
||||
if (this.pointersDown >= 3)
|
||||
{
|
||||
ultraHigh = true;
|
||||
} else if (this.pointersDown === 2)
|
||||
{
|
||||
high = true;
|
||||
}
|
||||
}
|
||||
if (ultraHigh) {
|
||||
this.dRange += (this.lastY - e.clientY) / ULTRA_FINE_RANGE_SCALE;
|
||||
|
||||
} else if (high) {
|
||||
this.dRange += (this.lastY - e.clientY) / FINE_RANGE_SCALE;
|
||||
|
||||
} else {
|
||||
this.dRange += (this.lastY - e.clientY) / RANGE_SCALE;
|
||||
}
|
||||
this.lastY = e.clientY;
|
||||
this.lastX = e.clientX;
|
||||
return this.dRange;
|
||||
}
|
||||
onPointerUp(e: PointerEvent<HTMLImageElement>) {
|
||||
|
||||
if (this.isCapturedPointer(e)) {
|
||||
--this.pointersDown;
|
||||
|
||||
|
||||
e.preventDefault();
|
||||
let dRange = this.updateRange(e)
|
||||
this.previewRange(dRange, true);
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
onPointerMove(e: PointerEvent<HTMLImageElement>): void {
|
||||
if (this.isCapturedPointer(e)) {
|
||||
e.preventDefault();
|
||||
let dRange = this.updateRange(e)
|
||||
this.previewRange(dRange, false);
|
||||
}
|
||||
}
|
||||
|
||||
previewInputValue(value: number, commitValue: boolean) {
|
||||
let range = this.valueToRange(value);
|
||||
value = this.rangeToValue(range);
|
||||
|
||||
let transform = this.rangeToRotationTransform(range);
|
||||
if (this.mouseDown && !commitValue) {
|
||||
transform += " scale(1.5, 1.5)";
|
||||
}
|
||||
let imgElement = this.imgRef.current
|
||||
if (imgElement) {
|
||||
if (imgElement.style) {
|
||||
imgElement.style.transform = transform;
|
||||
}
|
||||
}
|
||||
if (commitValue) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
if (this.props.onPreviewChange) {
|
||||
this.props.onPreviewChange(value);
|
||||
}
|
||||
|
||||
}
|
||||
previewRange(dRange: number, commitValue: boolean): void {
|
||||
let range = this.valueToRange(this.currentValue) + dRange;
|
||||
if (range > 1) range = 1;
|
||||
if (range < 0) range = 0;
|
||||
let value = this.rangeToValue(range);
|
||||
|
||||
// apply value quantization and clipping.
|
||||
range = this.valueToRange(value);
|
||||
|
||||
let imgElement = this.imgRef.current
|
||||
if (imgElement) {
|
||||
if (imgElement.style) {
|
||||
imgElement.style.transform = this.rangeToRotationTransform(range);
|
||||
}
|
||||
}
|
||||
let inputElement = this.inputRef.current;
|
||||
if (inputElement) {
|
||||
let v = this.formatValue(this.props.uiControl, value);
|
||||
inputElement.value = v;
|
||||
}
|
||||
let displayValue = this.displayValueRef.current;
|
||||
if (displayValue)
|
||||
{
|
||||
let v = this.formatDisplayValue(this.props.uiControl,value);
|
||||
displayValue.childNodes[0].textContent = v;
|
||||
}
|
||||
let selectElement = this.selectRef.current;
|
||||
if (selectElement) {
|
||||
//let v = this.formatValue(this.props.uiControl,value);
|
||||
selectElement.selectedIndex = value;
|
||||
|
||||
}
|
||||
if (commitValue) {
|
||||
this.currentValue = value;
|
||||
this.props.onChange(value);
|
||||
} else {
|
||||
if (this.props.onPreviewChange) {
|
||||
this.props.onPreviewChange(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onCheckChanged(checked: boolean): void {
|
||||
this.props.onChange(checked ? 1 : 0);
|
||||
}
|
||||
onSelectChanged(e: any, value: any) {
|
||||
let target = e.target;
|
||||
setTimeout(()=> {
|
||||
this.props.onChange(target.value);
|
||||
},0);
|
||||
|
||||
|
||||
}
|
||||
|
||||
makeSelect(control: UiControl, value: number): ReactNode {
|
||||
if (control.isOnOffSwitch()) {
|
||||
// normal gray unchecked state.
|
||||
return (
|
||||
<Switch checked={value !== 0}
|
||||
onChange={(event) => {
|
||||
this.onCheckChanged(event.target.checked);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (control.isAbToggle()) {
|
||||
// unchecked color is not gray.
|
||||
return (
|
||||
<Switch checked={value !== 0}
|
||||
onChange={(event) => {
|
||||
this.onCheckChanged(event.target.checked);
|
||||
}}
|
||||
classes={{
|
||||
track: this.props.classes.switchTrack
|
||||
}}
|
||||
style={{ color: this.props.theme.palette.secondary.main }}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Select
|
||||
ref={this.selectRef}
|
||||
value={value}
|
||||
onChange={this.onSelectChanged}
|
||||
inputProps={{
|
||||
name: control.name,
|
||||
id: 'id' + control.symbol,
|
||||
style: { fontSize: FONT_SIZE }
|
||||
}}
|
||||
style={{ marginLeft: 4, marginRight: 4, width: 140 }}
|
||||
>
|
||||
{control.scale_points.map((scale_point: ScalePoint) => (
|
||||
<MenuItem value={scale_point.value}>{scale_point.label}</MenuItem>
|
||||
|
||||
))}
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
formatDisplayValue(uiControl: UiControl | undefined, value: number): string {
|
||||
if (!uiControl) return "";
|
||||
for (let i = 0; i < uiControl.scale_points.length; ++i)
|
||||
{
|
||||
let scalePoint = uiControl.scale_points[i];
|
||||
if (scalePoint.value === value)
|
||||
{
|
||||
return scalePoint.label;
|
||||
}
|
||||
}
|
||||
let text = this.formatValue(uiControl, value);
|
||||
|
||||
switch (uiControl.units) {
|
||||
case Units.bpm:
|
||||
text += "bpm";
|
||||
break;
|
||||
case Units.cent:
|
||||
text += "cents";
|
||||
break;
|
||||
case Units.cm:
|
||||
text += "cm";
|
||||
break;
|
||||
case Units.db:
|
||||
text += "dB";
|
||||
break;
|
||||
case Units.hz:
|
||||
text += "Hz";
|
||||
break;
|
||||
case Units.khz:
|
||||
text += "kHz";
|
||||
break;
|
||||
case Units.km:
|
||||
text += "km";
|
||||
break;
|
||||
case Units.m:
|
||||
text += "m";
|
||||
break;
|
||||
case Units.mhz:
|
||||
text += "MHz";
|
||||
break;
|
||||
case Units.min:
|
||||
text += "min";
|
||||
break;
|
||||
case Units.ms:
|
||||
text += "ms";
|
||||
break;
|
||||
case Units.pc:
|
||||
text += "%";
|
||||
break;
|
||||
case Units.s:
|
||||
text += "s";
|
||||
break;
|
||||
// Midinote: not handled.
|
||||
// semitone12TET not handled.
|
||||
|
||||
|
||||
|
||||
}
|
||||
return text;
|
||||
|
||||
|
||||
}
|
||||
formatValue(uiControl: UiControl | undefined, value: number): string {
|
||||
if (!uiControl) return "";
|
||||
return uiControl.formatValue(value);
|
||||
}
|
||||
|
||||
valueToRange(value: number): number {
|
||||
let uiControl = this.props.uiControl;
|
||||
if (uiControl) {
|
||||
if (uiControl.integer_property) {
|
||||
value = Math.round(value);
|
||||
}
|
||||
let range: number;
|
||||
if (uiControl.is_logarithmic)
|
||||
{
|
||||
range = Math.log(value/uiControl.min_value)/Math.log(uiControl.max_value/uiControl.min_value);
|
||||
if (uiControl.range_steps > 1) {
|
||||
range = Math.round(range*(uiControl.range_steps-1))/(uiControl.range_steps-1);
|
||||
}
|
||||
} else {
|
||||
range = (value - uiControl.min_value) / (uiControl.max_value - uiControl.min_value);
|
||||
}
|
||||
if (range > 1) range = 1;
|
||||
if (range < 0) range = 0;
|
||||
return range;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
rangeToValue(range: number): number {
|
||||
if (range < 0) range = 0;
|
||||
if (range > 1) range = 1;
|
||||
let uiControl = this.props.uiControl;
|
||||
if (uiControl) {
|
||||
if (uiControl.range_steps > 1) {
|
||||
range = Math.round(range * uiControl.range_steps-1) / (uiControl.range_steps-1);
|
||||
}
|
||||
let value: number;
|
||||
if (uiControl.is_logarithmic)
|
||||
{
|
||||
value = uiControl.min_value*Math.pow(uiControl.max_value/uiControl.min_value,range);
|
||||
} else {
|
||||
value = range * (uiControl.max_value - uiControl.min_value) + uiControl.min_value;
|
||||
}
|
||||
if (uiControl.integer_property) {
|
||||
value = Math.round(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
rangeToRotationTransform(range: number): string {
|
||||
let angle = range * (MAX_ANGLE - MIN_ANGLE) + MIN_ANGLE;
|
||||
return "rotate(" + angle + "deg)";
|
||||
}
|
||||
|
||||
getRotationTransform(): string {
|
||||
let range = 0;
|
||||
let uiControl = this.props.uiControl;
|
||||
if (uiControl) {
|
||||
let value = this.props.value;
|
||||
range = this.valueToRange(value);
|
||||
}
|
||||
return this.rangeToRotationTransform(range);
|
||||
}
|
||||
|
||||
currentValue: number = 0;
|
||||
uiControl?: UiControl = undefined;
|
||||
|
||||
render() {
|
||||
let classes = this.props.classes;
|
||||
let t = this.props.uiControl;
|
||||
if (!t) {
|
||||
return (<div>#Error</div>);
|
||||
|
||||
}
|
||||
let control: UiControl = t;
|
||||
this.uiControl = control;
|
||||
let value = this.props.value;
|
||||
this.currentValue = value;
|
||||
let switchText = "";
|
||||
|
||||
let isSelect = control.isSelect();
|
||||
let isAbSwitch = control.isAbToggle();
|
||||
let isOnOffSwitch = control.isOnOffSwitch();
|
||||
|
||||
if (isAbSwitch) {
|
||||
switchText = control.scale_points[0].value === value ? control.scale_points[0].label : control.scale_points[1].label;
|
||||
}
|
||||
|
||||
let item_width = isSelect ? 160 : 80;
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", width: item_width, margin: 8 }}>
|
||||
{/* TITLE SECTION */}
|
||||
<div style={{ flex: "0 0 auto", width: "100%", marginBottom: 8,marginLeft: isSelect? 16: 0, marginRight: 0 }}>
|
||||
<Typography variant="caption" display="block" noWrap style={{
|
||||
width: "100%",
|
||||
textAlign: isSelect ? "left" : "center"
|
||||
}}> {control.name}</Typography>
|
||||
</div>
|
||||
{/* CONTROL SECTION */}
|
||||
|
||||
<div style={{ flex: "0 0 auto" }}>
|
||||
{(isSelect || isAbSwitch || isOnOffSwitch) ? (
|
||||
this.makeSelect(control, value)
|
||||
) : (
|
||||
<div style={{ flex: "0 1 auto" }}>
|
||||
<img ref={this.imgRef} src="img/fx_dial.svg"
|
||||
style={{ overscrollBehavior: "none", touchAction: "none", width: 36, height: 36, opacity: DEFAULT_OPACITY, transform: this.getRotationTransform() }}
|
||||
draggable="true"
|
||||
onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove}
|
||||
onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} onPointerMoveCapture={this.onPointerMove} onDrag={this.onDrag}
|
||||
alt={control.name}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* LABEL/EDIT SECTION*/}
|
||||
<div style={{ flex: "0 0 auto", position: "relative", width: 60 }}>
|
||||
{(!(isSelect || isOnOffSwitch)) &&
|
||||
(
|
||||
(isAbSwitch) ? (
|
||||
<Typography variant="caption" display="block" noWrap style={{
|
||||
width: "100%", textAlign: "center"
|
||||
}}> {switchText} </Typography>
|
||||
) : (
|
||||
<div>
|
||||
<Input key={value}
|
||||
type="number"
|
||||
defaultValue={this.formatValue(control, value)}
|
||||
error={this.state.error}
|
||||
inputProps={{
|
||||
'aria-label':
|
||||
control.symbol + " value",
|
||||
style: { textAlign: "center", fontSize: FONT_SIZE },
|
||||
}}
|
||||
inputRef={this.inputRef} onChange={this.onInputChange}
|
||||
onBlur={this.onInputLostFocus}
|
||||
onFocus={this.onInputFocus}
|
||||
|
||||
onKeyPress={this.onInputKeyPress} />
|
||||
<div className={classes.displayValue} ref={this.displayValueRef} onClick={(e) => { this.inputRef.current!.focus(); }} >
|
||||
<Typography noWrap color="inherit" style={{ fontSize: "12.8px", paddingTop:4, paddingBottom: 6 }}
|
||||
|
||||
>
|
||||
{this.formatDisplayValue(control, value)}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
/*
|
||||
isSamePointer(PointerEvent<HTMLImageElement> e): boolean
|
||||
{
|
||||
return e.pointerId === this.pointerId
|
||||
&& e.pointerType === this.pointerType;
|
||||
}
|
||||
*/
|
||||
touchPointerId: number = 0;
|
||||
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
export default PluginControl;
|
||||
Reference in New Issue
Block a user