Side-chains

2025-09-30 19:59:47 -04:00
parent ca1d4bad69
commit 25494d6f3c
19 changed files with 723 additions and 180 deletions
@@ -0,0 +1,166 @@
+/*
+ * MIT License
+ * 
+ * Copyright (c) Robin E. R. 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 { Component } from 'react';
+import { Theme } from '@mui/material/styles';
+import { css } from '@emotion/react';
+
+import Typography from '@mui/material/Typography';
+import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+
+
+export const StandardItemSize = { width: 80, height: 140 }
+
+
+import { withStyles } from "tss-react/mui";
+import WithStyles from './WithStyles';
+import { withTheme } from './WithStyles';
+
+const styles = (theme: Theme) => {
+    return {
+        frame: css({
+            position: "relative",
+            margin: "12px"
+        }),
+        controlFrame: css({
+            display: "flex", flexDirection: "column", alignItems: "start", justifyContent: "space-between", height: 116
+        }),
+        displayValue: css({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 4,
+            textAlign: "center",
+            background: theme.mainBackground,
+            color: theme.palette.text.secondary,
+            // zIndex: -1,
+        }),
+        titleSection: css({
+            flex: "0 0 auto", alignSelf: "stretch", marginBottom: 8, marginLeft: 8, marginRight: 0
+        }),
+        midSection: css({
+            flex: "1 1 1", display: "flex", flexFlow: "column nowrap", alignContent: "center", justifyContent: "center"
+        }),
+        editSection: css({
+            flex: "0 0 0", position: "relative", width: 60, height: 28, minHeight: 28
+        })
+    }
+}
+    ;
+
+
+export interface SideChainSelectControlProps extends WithStyles<typeof styles> {
+    title: string;
+    selectItems: { instanceId: number, title: string }[];
+    selectedInstanceId: number;
+    onChanged(instanceId: number): void;
+    theme: Theme;
+}
+type SideChainSelectControlState = {
+};
+
+const SideChainSelectControl =
+    withTheme(withStyles(
+        class extends Component<SideChainSelectControlProps, SideChainSelectControlState> {
+
+            model: PiPedalModel;
+
+
+            constructor(props: SideChainSelectControlProps) {
+                super(props);
+
+                this.state = {
+                };
+                this.model = PiPedalModelFactory.getInstance();
+                this.onStateChanged = this.onStateChanged.bind(this);
+            }
+
+
+            onStateChanged(state: State) {
+            }
+            mounted: boolean = false;
+            componentDidMount() {
+                this.model.state.addOnChangedHandler(this.onStateChanged);
+                this.mounted = true;
+            }
+            componentWillUnmount() {
+                this.mounted = false;
+                this.model.state.removeOnChangedHandler(this.onStateChanged);
+            }
+            componentDidUpdate(prevProps: Readonly<SideChainSelectControlProps>, prevState: Readonly<SideChainSelectControlState>, snapshot?: any): void {
+            }
+
+            render() {
+                //const classes = withStyles.getClasses(this.props);
+
+                const classes = withStyles.getClasses(this.props);
+
+                return (
+                    <div className={classes.controlFrame}
+                        style={{ width: 120 }}>
+                        {/* TITLE SECTION */}
+                        <div className={classes.titleSection}
+                        >
+                            <Typography variant="caption" display="block" noWrap style={{
+                                width: "100%",
+                                textAlign: "start"
+                            }}> {this.props.title}</Typography>
+                        </div>
+                        {/* CONTROL SECTION */}
+
+                        <div className={classes.midSection} style={{ width: "100%", paddingLeft: 8 }}>
+                            <Select
+                                variant="standard"
+                                onChange={(event) => {
+                                    this.props.onChanged(event.target.value as number);
+                                }}
+                                value={this.props.selectedInstanceId}
+                                style={{ width: "100%", fontSize: "0.8rem" }}
+                            >
+                                {this.props.selectItems.map((item) => {
+                                    return (
+                                        <MenuItem key={item.instanceId} value={item.instanceId}
+                                            selected={item.instanceId === this.props.selectedInstanceId}>
+                                            {item.title}
+                                        </MenuItem>
+                                    );
+                                })}
+                            </Select>
+
+                        </div>
+
+                        {/* LABEL/EDIT SECTION*/}
+                        <div className={classes.editSection} >
+                        </div>
+                    </div >
+                );
+            }
+        }
+        , styles)
+    )
+    ;
+export default SideChainSelectControl;