diff --git a/react/src/ControlViewFactory.tsx b/react/src/ControlViewFactory.tsx index 8c91334..ae6698a 100644 --- a/react/src/ControlViewFactory.tsx +++ b/react/src/ControlViewFactory.tsx @@ -29,13 +29,14 @@ import IControlViewFactory from './IControlViewFactory'; import { GxTunerViewFactory } from './GxTunerView'; import ToobPowerstage2ViewFactory from './ToobPowerStage2View'; import ToobSpectrumAnalyzerViewFactory from './ToobSpectrumAnalyzerView'; -// import ToobMLViewFactory from './ToobMLView'; +import ToobMLViewFactory from './ToobMLView'; + let pluginFactories: IControlViewFactory[] = [ new GxTunerViewFactory(), new ToobPowerstage2ViewFactory(), new ToobSpectrumAnalyzerViewFactory(), - //new ToobMLViewFactory() + new ToobMLViewFactory() ]; diff --git a/react/src/Lv2Plugin.tsx b/react/src/Lv2Plugin.tsx index 978ceb1..379f219 100644 --- a/react/src/Lv2Plugin.tsx +++ b/react/src/Lv2Plugin.tsx @@ -506,7 +506,7 @@ export class UiControl implements Deserializable { this.controlType = ControlType.Vu; } } - else if (this.isValidEnumeration()) + if (this.isValidEnumeration()) { this.controlType = ControlType.Select; if (this.scale_points.length === 2) diff --git a/react/src/ToobMLView.tsx b/react/src/ToobMLView.tsx index f5fe4e1..dc69c76 100644 --- a/react/src/ToobMLView.tsx +++ b/react/src/ToobMLView.tsx @@ -25,12 +25,10 @@ import createStyles from '@mui/styles/createStyles'; import withStyles from '@mui/styles/withStyles'; import IControlViewFactory from './IControlViewFactory'; -import { PiPedalModelFactory, PiPedalModel,MonitorPortHandle } from "./PiPedalModel"; +import { PiPedalModelFactory, PiPedalModel, MonitorPortHandle } from "./PiPedalModel"; import { PedalboardItem } from './Pedalboard'; -import PluginControlView, { ControlGroup,ControlViewCustomization } from './PluginControlView'; -import ToobFrequencyResponseView from './ToobFrequencyResponseView'; - - +import PluginControlView, { ControlGroup, ControlViewCustomization } from './PluginControlView'; +// import ToobFrequencyResponseView from './ToobFrequencyResponseView'; const styles = (theme: Theme) => createStyles({ }); @@ -46,13 +44,12 @@ interface ToobMLState { const ToobMLView = withStyles(styles, { withTheme: true })( - class extends React.Component - implements ControlViewCustomization - { + class extends React.Component + implements ControlViewCustomization { model: PiPedalModel; gainRef: React.RefObject; - customizationId: number = 1; + customizationId: number = 1; constructor(props: ToobMLProps) { super(props); @@ -65,57 +62,75 @@ const ToobMLView = subscribedId?: number = undefined; monitorPortHandle?: MonitorPortHandle = undefined; - removeGainEnabledSubscription() - { - if (this.monitorPortHandle) - { + removeGainEnabledSubscription() { + if (this.monitorPortHandle) { this.model.unmonitorPort(this.monitorPortHandle); this.monitorPortHandle = undefined; } } - addGainEnabledSubscription(instanceId: number) - { + addGainEnabledSubscription(instanceId: number) { this.removeGainEnabledSubscription(); this.subscribedId = instanceId; - this.monitorPortHandle = this.model.monitorPort(instanceId,"gainEnable",0.1, + this.monitorPortHandle = this.model.monitorPort(instanceId, "gainEnable", 0.1, (value: number) => { - if (this.gainRef.current) - { - this.gainRef.current.style.opacity = value !== 0.0? "1.0": "0.4"; + if (this.gainRef.current) { + this.gainRef.current.style.opacity = value !== 0.0 ? "1.0" : "0.4"; + if (value !== 0.0) { + this.gainRef.current.style.pointerEvents = 'auto'; + } else { + this.gainRef.current.style.pointerEvents = 'none'; + } } - this.setState({gainEnabled: value !== 0.0 }); + this.setState({ gainEnabled: value !== 0.0 }); }); } - componentDidUpdate() - { - if (this.props.instanceId !== this.subscribedId) - { - this.removeGainEnabledSubscription(); - this.addGainEnabledSubscription(this.props.instanceId); + // componentDidUpdate() { + // if (this.props.instanceId !== this.subscribedId) { + // this.removeGainEnabledSubscription(); + // this.addGainEnabledSubscription(this.props.instanceId); + // } + // } + componentDidMount() { + this.addGainEnabledSubscription(this.props.instanceId); + if (this.gainRef.current) { + this.gainRef.current.style.opacity = '0.4'; + this.gainRef.current.style.pointerEvents = 'none'; } } - componentDidMount() - { - this.addGainEnabledSubscription(this.props.instanceId); - } - componentWillUnmount() - { + componentWillUnmount() { this.removeGainEnabledSubscription(); } - ModifyControls(controls: (React.ReactNode| ControlGroup)[]): (React.ReactNode| ControlGroup)[] - { - let group = controls[4] as ControlGroup; - group.controls.splice(0,0, - ( ) - ); - - let gainControl: React.ReactElement = controls[2] as React.ReactElement; - if (gainControl) + ModifyControls(controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[] { + // Find EQ group + // let group = controls.find((control) => typeof control !== 'string' && (control as ControlGroup).name === "EQ") as ControlGroup; + // if (group) { + // group.controls.splice(0,0, + // ( ) + // ); + // } + let controlIndex: number = -1; + let controlValues = this.props.item.controlValues + for (let i:number = 0; i < controlValues.length; ++i) { - controls[2] = (
{ gainControl}
); + let ctl: any = controls[i]; + let key: any = ctl?.props?.uiControl?.symbol??""; + + if (key === "gain") + { + controlIndex = i; + break; + } + } + + if (controlIndex !== -1 ) { + + let gainControl: React.ReactElement = controls[controlIndex] as React.ReactElement; + controls[controlIndex] = (
{gainControl}
); } return controls; }