Street testing fixes

2021-12-31 10:30:31 -05:00
parent d717a742b9
commit 96584fd4a7
17 changed files with 868 additions and 116 deletions
@@ -0,0 +1,168 @@
+// 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, {SyntheticEvent} from 'react';
+import { Theme, withStyles, WithStyles,createStyles } from '@material-ui/core/styles';
+import { ZoomedControlInfo } from './PiPedalModel';
+import DialogEx from './DialogEx';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+import Slide from '@material-ui/core/Slide';
+import Typography from '@material-ui/core/Typography';
+import { PiPedalModelFactory,PiPedalModel } from './PiPedalModel';
+import ZoomedDial from './ZoomedDial';
+
+
+const styles = (theme: Theme) => createStyles({
+});
+
+
+interface ZoomedUiControlProps extends WithStyles<typeof styles> {
+    dialogOpen: boolean;
+    onDialogClose: () => void;
+    onDialogClosed: () => void;
+    controlInfo: ZoomedControlInfo | undefined
+};
+
+interface ZoomedUiControlState {
+    value: number
+};
+
+const Transition = React.forwardRef(function Transition(
+    props: TransitionProps & { children?: React.ReactElement },
+    ref: React.Ref<unknown>,
+) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+
+const ZoomedUiControl = withStyles(styles, { withTheme: true })(
+
+    class extends React.Component<ZoomedUiControlProps, ZoomedUiControlState> {
+
+        model: PiPedalModel;
+
+        constructor(props: ZoomedUiControlProps)
+        {
+            super(props);
+            this.model = PiPedalModelFactory.getInstance();
+            this.state = {
+                value: this.getCurrentValue()
+            };
+        }
+
+        getCurrentValue(): number {
+            if (!this.props.controlInfo)
+            {
+                return 0;
+            } 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;
+                return value;
+            }
+        }
+        hasControlChanged(oldProps: ZoomedUiControlProps, newProps: ZoomedUiControlProps)
+        {
+            if (oldProps.controlInfo === null) 
+            {
+                return newProps.controlInfo !== null;
+            } else if (newProps.controlInfo === null)
+            {
+                return oldProps.controlInfo !== null;
+            } else {
+                if (newProps.controlInfo?.instanceId !== oldProps.controlInfo?.instanceId) return true;
+                if (newProps.controlInfo?.uiControl.symbol !== oldProps.controlInfo?.uiControl.symbol) return true;
+            }
+            return false;
+
+        }
+
+        componentDidUpdate(oldProps: ZoomedUiControlProps, oldState: ZoomedUiControlState)
+        {
+            if (this.hasControlChanged(oldProps,this.props))
+            {
+                let currentValue = this.getCurrentValue();
+                if (this.state.value !== currentValue)
+                {
+                    this.setState({value: this.getCurrentValue()});
+                }
+            }
+        }
+
+        onDrag(e: SyntheticEvent) {
+            e.preventDefault();
+            e.stopPropagation();
+            return false;
+        }
+
+
+        render() {
+            let displayValue = this.props.controlInfo?.uiControl.formatDisplayValue(this.state.value)??"";
+            return (
+                <DialogEx tag="zoomedControlDlg" open={this.props.dialogOpen} 
+                    onClose={()=> { this.props.onDialogClose()}}
+                    onAbort={()=> { this.props.onDialogClose()}}
+                    onExited={ () => {
+                        this.props.onDialogClosed()
+                    }
+                }
+                >
+                    <div style={{ width: 300, height: 300, background: "#FFF",
+                        display: "flex", flexFlow: "column", alignItems: "center", alignContent: "center", justifyContent: "center"
+                        
+                        }}
+                        onDrag={this.onDrag}
+                        >
+                            <Typography 
+                                display="block" variant="h6" color="textPrimary" style={{textAlign: "center"}}
+                                >
+                                {this.props.controlInfo?.uiControl.name??""}
+                            </Typography>
+                            <ZoomedDial size={200} controlInfo={this.props.controlInfo}
+                                onPreviewValue={(v)=> { 
+                                    this.setState({value: v});
+                                }}
+                                onSetValue={(v)=> { 
+                                    this.setState({value: v});
+                                    if (this.props.controlInfo)
+                                    {
+                                        this.model.setPedalBoardControlValue(
+                                            this.props.controlInfo.instanceId,
+                                            this.props.controlInfo.uiControl.symbol,
+                                            v);
+                                    }
+                                }}
+                                />
+                            
+                            <Typography 
+                                display="block" variant="h6" color="textPrimary" style={{textAlign: "center"}}
+                                >
+                                {displayValue}
+                            </Typography>
+                    </div>
+
+                </DialogEx>
+            );
+        }
+    }
+);
+
+export default ZoomedUiControl;