Broken Split controls; enable/disable Toob ML gain control.

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()
 ];
 
 

react/src/Lv2Plugin.tsx

@@ -506,7 +506,7 @@ export class  UiControl implements Deserializable<UiControl> {
                 this.controlType = ControlType.Vu;
             }
         }
-        else if (this.isValidEnumeration())
+        if (this.isValidEnumeration())
         {
             this.controlType = ControlType.Select;
             if (this.scale_points.length === 2)

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 PluginControlView, { ControlGroup, ControlViewCustomization } from './PluginControlView';
-import ToobFrequencyResponseView from './ToobFrequencyResponseView';
+// 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<ToobMLProps, ToobMLState> 
+        class extends React.Component<ToobMLProps, ToobMLState>
-        implements ControlViewCustomization
+            implements ControlViewCustomization {
-        {
             model: PiPedalModel;
             gainRef: React.RefObject<HTMLDivElement>;
 
-            customizationId: number = 1; 
+            customizationId: number = 1;
 
             constructor(props: ToobMLProps) {
                 super(props);
@@ -65,57 +62,75 @@ const ToobMLView =
 
             subscribedId?: number = undefined;
             monitorPortHandle?: MonitorPortHandle = undefined;
-            removeGainEnabledSubscription()
+            removeGainEnabledSubscription() {
-            {
+                if (this.monitorPortHandle) {
-                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)
+                        if (this.gainRef.current) {
-                        {
+                            this.gainRef.current.style.opacity = value !== 0.0 ? "1.0" : "0.4";
-                            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()
+            // componentDidUpdate() {
-            {
+            //     if (this.props.instanceId !== this.subscribedId) {
-                if (this.props.instanceId !== this.subscribedId)
+            //         this.removeGainEnabledSubscription();
-                {
+            //         this.addGainEnabledSubscription(this.props.instanceId);
-                    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()
+            componentWillUnmount() {
-            {
-                this.addGainEnabledSubscription(this.props.instanceId);
-            }
-            componentWillUnmount()
-            {
                 this.removeGainEnabledSubscription();
             }
 
-            ModifyControls(controls: (React.ReactNode| ControlGroup)[]): (React.ReactNode| ControlGroup)[]
+            ModifyControls(controls: (React.ReactNode | ControlGroup)[]): (React.ReactNode | ControlGroup)[] {
-            {
+                // Find EQ group
-                let group = controls[4] as ControlGroup;
+                // let group = controls.find((control) => typeof control !== 'string' && (control as ControlGroup).name === "EQ") as ControlGroup;
-                group.controls.splice(0,0,
+                // if (group) {
-                    ( <ToobFrequencyResponseView instanceId={this.props.instanceId} />)
+                //     group.controls.splice(0,0,
-                    );
+                //         ( <ToobFrequencyResponseView 
-
+                //             instanceId={this.props.instanceId} 
-                let gainControl: React.ReactElement = controls[2] as React.ReactElement;
+                //             />)
-                if (gainControl)
+                //         );
+                // }
+                let controlIndex: number = -1;
+                let controlValues = this.props.item.controlValues
+                for (let i:number = 0; i < controlValues.length; ++i)
                 {
-                    controls[2] = (<div ref={this.gainRef}> { gainControl} </div>);
+                    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] = (<div ref={this.gainRef}> {gainControl} </div>);
                 }
                 return controls;
             }