MIDI-Input: make pressed button color configurable

YeonV · Oct 4, 2024 · c410e22 · c410e22
1 parent 7a188b7
commit c410e22
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 5 deletions.
diff --git a/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx b/src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx
@@ -231,7 +231,7 @@ const EditSceneDialog = () => {
           `${midiEvent.name} Note: ${midiEvent.note} buttonNumber: ${midiEvent.button}`
         )
     }
-  }, [midiEvent])
+  }, [midiEvent, features.scenemidi])
 
   const renderPresets = (
     current_ledfx_presets: any,

diff --git a/src/components/Midi/LaunchpadButton.tsx b/src/components/Midi/LaunchpadButton.tsx
@@ -51,6 +51,7 @@ const LaunchpadButton = ({
     if (midiRecord && midiEvent.button > -1) {
         setMidiButtonNumber(midiEvent.button)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [midiEvent.button])
 
   return (

diff --git a/src/components/Midi/LaunchpadButtonMap.tsx b/src/components/Midi/LaunchpadButtonMap.tsx
@@ -20,6 +20,7 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
     const recentScenes = useStore((state) => state.recentScenes)
     const midiMapping = useStore((state) => state.midiMapping)
     const setMidiMapping = useStore((state) => state.setMidiMapping)
+    const pressedButtonColor = useStore((state) => state.midiColors.pressedButtonColor)
     const paused = useStore((state) => state.paused)
     const matrix = Array.from({ length: 9 }, () => Array.from({ length: 9 }, () => 0))
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -220,7 +221,7 @@ const LaunchpadButtonMap = ({toggleSidebar, sideBarOpen}:{toggleSidebar: () => v
           const functionalButtonNumber = btn?.buttonNumber
 
           const bgColor = midiEvent.button === (functionalButtonNumber || btnNumberInt)
-            ? theme.palette.primary.main 
+            ? pressedButtonColor || theme.palette.primary.main 
             : btn?.command && 
               btn?.command === 'scene' &&
               btn?.payload.scene === recentScenes[0]

diff --git a/src/components/Midi/LaunchpadColors.tsx b/src/components/Midi/LaunchpadColors.tsx
@@ -3,20 +3,30 @@ import Button from '@mui/material/Button'
 import useStore from '../../store/useStore'
 import DialogTitle from '@mui/material/DialogTitle'
 import LpColorPicker from './LpColorPicker'
-import { DialogContent, ListItemIcon, ListItemText, MenuItem, Stack, Typography } from '@mui/material'
-import { useState } from 'react'
+import { DialogContent, ListItemIcon, ListItemText, MenuItem, Popover, Popper, Stack, Typography, useTheme } from '@mui/material'
+import { useRef, useState } from 'react'
 import { getColorFromValue } from './lpColors'
 import { ColorLens } from '@mui/icons-material'
+import ReactGPicker from 'react-gcolor-picker'
+import useStyles from '../SchemaForm/components/GradientPicker/GradientPicker.styles'
+import useClickOutside from '../../utils/useClickOutside'
 
 const LaunchpadColors = ({component = 'Button'}:{component?: 'Button' | 'MenuItem'}) => {
+  const classes = useStyles()
   const [open, setOpen] = useState(false)
-
+  const theme = useTheme()
   const midiSceneInactiveColor = useStore((state) => state.midiColors.sceneInactiveColor)
   const midiSceneActiveColor = useStore((state) => state.midiColors.sceneActiveColor)
   const midiCommandColor = useStore((state) => state.midiColors.commandColor)
+  const pressedButtonColor = useStore((state) => state.midiColors.pressedButtonColor)
+  const setPressedButtonColor = useStore((state) => state.setPressedButtonColor)
   const setMidiSceneInactiveColor = useStore((state) => state.setMidiSceneInactiveColor)
   const setMidiSceneActiveColor = useStore((state) => state.setMidiSceneActiveColor)
   const setMidiCommandColor = useStore((state) => state.setMidiCommandColor)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const popover = useRef(null)
+  const openColor = Boolean(anchorEl)
+  const id = open ? 'simple-popper' : undefined
 
   const handleClickOpen = () => {
     setOpen(true)
@@ -26,6 +36,16 @@ const LaunchpadColors = ({component = 'Button'}:{component?: 'Button' | 'MenuIte
     setOpen(false)
   }
 
+  const handleClickColor = (event: any) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget)
+  }
+
+  const handleCloseColor = () => {
+    setAnchorEl(null)
+  }
+
+  useClickOutside(popover, handleClose)
+
   return (
     <div>
       {component === 'Button' 
@@ -58,6 +78,58 @@ const LaunchpadColors = ({component = 'Button'}:{component?: 'Button' | 'MenuIte
                         setMidiCommandColor(color)
                     }} />
                 </Stack>
+                <Stack direction={'row'} spacing={2} justifyContent={'space-between'} alignItems={'center'}>
+                    <Typography>Pressed button</Typography>                    
+                    <div
+                        style={{ 
+                          backgroundColor: pressedButtonColor || theme.palette.primary.main,
+                          height: 30,
+                          width: 65,
+                          cursor: 'pointer',
+                          border: '1px solid #999',
+                          borderRadius: 4
+                        }}
+                        aria-describedby={id}
+                        onClick={handleClickColor}
+                      />
+                    <Popover id={id} open={openColor} anchorEl={anchorEl} ref={popover && popover} onClose={handleCloseColor} 
+                      transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'right',
+                      }}
+                      anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'right',
+                      }}>
+                      <div
+                        className={`${classes.paper} gradient-picker`}
+                        style={{
+                          padding: theme.spacing(1),
+                          backgroundColor: theme.palette.background.paper,
+                        }}
+                      >
+                      <ReactGPicker
+                        showInputs={false}
+                        colorBoardHeight={150}
+                        debounce
+                        debounceMS={300}
+                        format="hex"
+                        gradient={false}
+                        solid
+                        onChange={(c) => {
+                          return setPressedButtonColor(c)
+                        }}
+                        popupWidth={288}
+                        showAlpha={false}
+                        value={pressedButtonColor || '#0dbedc'}
+                        // defaultColors={Object.values(defaultColors)}
+                      />
+                      </div>
+                    </Popover>
+                    {/* <LpColorPicker defaultColor={pressedButtonColor} onColorSelect={(color: string) => {
+                        setPressedButtonColor(color)
+                    }} /> */}
+                </Stack>
             </Stack>
         </DialogContent>
         </Dialog>

diff --git a/src/store/ui/storeMidi.tsx b/src/store/ui/storeMidi.tsx
@@ -93,6 +93,7 @@ const storeMidi = (set: any) => ({
     commandType: '90',
     sceneActiveType: '90',
     sceneInactiveType: '90',
+    pressedButtonColor: null as string | null,
   },
   setMidiCommandColor: (color: string) =>
     set(
@@ -118,6 +119,14 @@ const storeMidi = (set: any) => ({
       false,
       'setMidiSceneInactiveColor'
     ),
+  setPressedButtonColor: (color: string) =>
+    set(
+      produce((state: IStore) => {
+        state.midiColors.pressedButtonColor = color
+      }),
+      false,
+      'setPressedButtonColor'
+    ),
   midiMapping: {
     0: defaultMapping,
   } as IMapping,