Add dots to indicate active effects in synth designer

Ameobea · Dec 2, 2024 · e092831 · e092831
1 parent a8f7c15
commit e092831
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/src/fmSynth/ConfigureEffects.tsx b/src/fmSynth/ConfigureEffects.tsx
@@ -139,7 +139,7 @@ const combFilterTheme = { ...baseTheme, background2: 'rgb(36,64,21)' };
 const compressorTheme = { ...baseTheme, background2: 'rgb(16,24,21)' };
 const chorusTheme = { ...baseTheme, background2: 'rgb(181,97,184)' };
 
-const ThemesByType: { [K in Effect['type']]: { [key: string]: any } } = {
+export const ThemesByType: { [K in Effect['type']]: { [key: string]: any } } = {
   'spectral warping': spectralWarpTheme,
   wavecruncher: wavecruncherTheme,
   bitcrusher: bitcrusherTheme,

diff --git a/src/fmSynth/FMSynth.css b/src/fmSynth/FMSynth.css
@@ -91,6 +91,7 @@
       .operator-select {
         cursor: pointer;
         background-color: var(--highlight-2);
+        position: relative;
       }
       .operator-select[data-hovered='true'] {
         background-color: #a1b95d;
@@ -142,6 +143,15 @@
     }
   }
 
+  .effect-dot {
+    border-radius: 100%;
+    width: 4px;
+    height: 4px;
+    position: absolute;
+    bottom: 0.5px;
+    border: 1px solid #ccc;
+  }
+
   .bottom-button-wrapper {
     width: 440px;
     margin-left: auto;
@@ -158,6 +168,7 @@
       border: 1px solid #181818;
       flex: 1;
       user-select: none;
+      position: relative
     }
     .main-effect-chain-selector[data-active='true'] {
       background: linear-gradient(300deg, #ce463f, #e8180e, #c60346, #bf0bb8);

diff --git a/src/fmSynth/FMSynthUI.tsx b/src/fmSynth/FMSynthUI.tsx
@@ -11,7 +11,7 @@ import ConfigureOutputWeight from 'src/fmSynth/ConfigureOutputWeight';
 import ConfigureParamSource from 'src/fmSynth/ConfigureParamSource';
 import type { Effect } from 'src/fmSynth/Effect';
 import type { GateUngateCallbackRegistrar } from 'src/fmSynth/midiSampleUI/types';
-import ModulationMatrix from 'src/fmSynth/ModulationMatrix';
+import ModulationMatrix, { EffectDots } from 'src/fmSynth/ModulationMatrix';
 import { buildDefaultParamSource, type ParamSource } from 'src/fmSynth/ParamSource';
 import TrainingMIDIControlIndexContext from 'src/fmSynth/TrainingMIDIControlIndexContext';
 import type FMSynth from 'src/graphEditor/nodes/CustomAudio/FMSynth/FMSynth';
@@ -471,6 +471,7 @@ const FMSynthUI: React.FC<FMSynthUIProps> = ({
           modulationIndices={state.modulationMatrix}
           operatorConfigs={state.operatorConfigs}
           outputWeights={state.outputWeights}
+          operatorEffects={state.operatorEffects}
           selectedUI={selectedUI}
           onOutputWeightSelected={useCallback(
             (operatorIx: number) => setSelectedUI({ type: 'outputWeight', operatorIx }),
@@ -487,6 +488,7 @@ const FMSynthUI: React.FC<FMSynthUIProps> = ({
             onClick={() => setSelectedUI({ type: 'mainEffectChain' })}
           >
             MAIN EFFECT CHAIN
+            <EffectDots effects={state.mainEffectChain} />
           </div>
           <div
             role='button'

diff --git a/src/fmSynth/ModulationMatrix.tsx b/src/fmSynth/ModulationMatrix.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from 'react';
+import { ThemesByType } from 'src/fmSynth/ConfigureEffects';
 
 import type { OperatorConfig } from 'src/fmSynth/ConfigureOperator';
+import type { Effect } from 'src/fmSynth/Effect';
 import type { UISelection } from 'src/fmSynth/FMSynthUI';
 import type { ParamSource } from 'src/fmSynth/ParamSource';
 import TrainingMIDIControlIndexContext from 'src/fmSynth/TrainingMIDIControlIndexContext';
 import type MIDIControlValuesCache from 'src/graphEditor/nodes/CustomAudio/FMSynth/MIDIControlValuesCache';
+import { filterNils } from 'src/util';
 
 const formatOperatorConfig = (config: OperatorConfig) => {
   if (config.type === 'sample mapping') {
@@ -120,6 +123,32 @@ const FormattedParamSource: React.FC<FormattedParamSourceProps> = ({ param }) =>
   }
 };
 
+interface EffectDotProps {
+  effect: Effect;
+  effectIx: number;
+}
+
+const EffectDot: React.FC<EffectDotProps> = ({ effect, effectIx }) => (
+  <div
+    className='effect-dot'
+    style={{ background: ThemesByType[effect.type].background2, left: effectIx * 6 }}
+  />
+);
+
+interface EffectDotsProps {
+  effects: (Effect | null)[];
+}
+
+export const EffectDots: React.FC<EffectDotsProps> = ({ effects }) => (
+  <>
+    {filterNils(effects)
+      .slice(0, 7)
+      .map((effect, i) => (
+        <EffectDot key={i} effect={effect} effectIx={i} />
+      ))}
+  </>
+);
+
 interface OutputWeightSquareProps {
   operatorIx: number;
   outputWeights: ParamSource[];
@@ -192,6 +221,7 @@ interface ModulationMatrixProps {
   modulationIndices: ParamSource[][];
   operatorConfigs: OperatorConfig[];
   outputWeights: ParamSource[];
+  operatorEffects: (Effect | null)[][];
   onOutputWeightSelected: (operatorIx: number) => void;
   synthID: string;
 }
@@ -204,6 +234,7 @@ export const ModulationMatrix: React.FC<ModulationMatrixProps> = ({
   modulationIndices,
   operatorConfigs,
   outputWeights,
+  operatorEffects,
   onOutputWeightSelected,
   synthID,
 }) => {
@@ -217,7 +248,7 @@ export const ModulationMatrix: React.FC<ModulationMatrixProps> = ({
       <div className='hovered-modulation-entity'>{hoveredModulationEntity}</div>
       <div className='modulation-matrix' onMouseLeave={() => setHoveredColIx(null)}>
         {modulationIndices.map((row, srcOperatorIx) => (
-          <div className={'operator-row'} key={srcOperatorIx}>
+          <div className='operator-row' key={srcOperatorIx}>
             <div
               data-hovered={hoveredColIx === srcOperatorIx ? 'true' : 'false'}
               className={
@@ -235,6 +266,7 @@ export const ModulationMatrix: React.FC<ModulationMatrixProps> = ({
               }}
             >
               {formatOperatorConfig(operatorConfigs[srcOperatorIx])}
+              <EffectDots effects={operatorEffects[srcOperatorIx]} />
             </div>
             {row.map((val, dstOperatorIx) => (
               <div