feat: Establish Multiselection Mode for Multi copy of elements

TimSusa · Sep 25, 2020 · ac973c0 · ac973c0
1 parent a6764f2
commit ac973c0
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 100 deletions.
diff --git a/packages/midi-bricks/src/components/ToolTipIconButton.jsx b/packages/midi-bricks/src/components/ToolTipIconButton.jsx
@@ -7,7 +7,8 @@ import { useTheme } from '@material-ui/styles'
 export function ToolTipIconButton(props) {
   const theme = useTheme()
   const classes = makeStyles(styles.bind(this, theme))()
-  const { handleClick = () => {}, title = '', icon } = props
+  const { handleClick = () => {}, title = '', icon, isInvisible } = props
+  if (isInvisible) return <div></div>
   return (
     <Tooltip disableHoverListener={false} title={title}>
       <IconButton onClick={handleClick} className={classes.typoColorStyle}>
@@ -20,6 +21,7 @@ export function ToolTipIconButton(props) {
 ToolTipIconButton.propTypes = {
   handleClick: PropTypes.func,
   icon: PropTypes.any,
+  isInvisible: PropTypes.bool,
   title: PropTypes.string
 }
 
@@ -29,4 +31,4 @@ function styles(theme) {
       color: theme.palette.primary.contrastText
     }
   }
-}
+}
diff --git a/packages/midi-bricks/src/components/channel-strip-list/ChannelStripListCmp.jsx b/packages/midi-bricks/src/components/channel-strip-list/ChannelStripListCmp.jsx
@@ -113,8 +113,8 @@ function ChannelStripListCmp() {
           return (
             <div
               onClick={
-                !isLayoutMode &&
                 isSettingsMode &&
+                !isLayoutMode &&
                 !isSettingsDialogMode &&
                 !lastFocusedIdxs.includes(i)
                   ? handleClick.bind(this, { i })

diff --git a/packages/midi-bricks/src/components/menu-app-bar/MenuAppBarCmp.jsx b/packages/midi-bricks/src/components/menu-app-bar/MenuAppBarCmp.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { makeStyles, useTheme } from '@material-ui/styles'
 import { useDispatch, useSelector } from 'react-redux'
@@ -15,6 +15,7 @@ import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 import MenuIcon from '@material-ui/icons/Menu'
 import UndoIcon from '@material-ui/icons/Undo'
+import IconFilter from '@material-ui/icons/Filter'
 import SwapHorizIcon from '@material-ui/icons/SwapHoriz'
 import SwapVertIcon from '@material-ui/icons/SwapVert'
 import CheckIcon from '@material-ui/icons/CheckCircle'
@@ -37,6 +38,7 @@ const {
   //resetValues,
   triggerAllMidiElements,
   toggleSettingsMode,
+  toggleMultiSelectionMode,
   delete: deleteSmth,
   // toggleLayoutMode,
   toggleMidiLearnMode,
@@ -59,6 +61,7 @@ function MenuAppBarCmp(props) {
     isLiveMode = false,
     isLayoutMode = false,
     isSettingsMode,
+    isMultiSelectionMode,
     isCompactHorz = true,
     isAutoArrangeMode = true,
     isMidiLearnMode = false,
@@ -92,7 +95,6 @@ function MenuAppBarCmp(props) {
               MIDI Learn Mode Running...
             </Typography>
           )}
-
           {isLayoutMode && (
             <Typography className={classes.typoColorStyle}>
               Layout Mode Running...
@@ -176,98 +178,102 @@ function MenuAppBarCmp(props) {
           )}
           {![PAGE_TYPES.MIDI_DRIVER_MODE, PAGE_TYPES.GLOBAL_MODE].includes(
             pageType
-          ) &&
-            !isLayoutMode && (
-              <>
-                {!isMidiLearnMode && (
-                  <>
-                    <ToolTipIconButton
-                      handleClick={() => dispatch(toggleSettingsMode())}
-                      title={'Switch to Settings Mode.'}
-                      icon={<ViewSettingsIcon />}
-                    />
-
-                    {Array.isArray(lastFocusedIdxs) &&
-                      lastFocusedIdxs.length > 0 && (
-                        <>
-                          <ToolTipIconButton
-                            handleClick={() => dispatch(thunkCopyToNextPage())}
-                            title={'Copy to last page.'}
-                            icon={<CopyIcon />}
-                          />
-
-                          <ToolTipIconButton
-                            handleClick={() => {
-                              lastFocusedIdxs.forEach((id) => {
-                                dispatch(deleteSmth({ i: id, lastFocusedPage }))
-                              })
-                            }}
-                            title={'Delete.'}
-                            icon={<DeleteIcon />}
-                          />
-                        </>
-                      )}
-                  </>
-                )}
-                {!isMidiLearnMode && (
+          ) && (
+            <Fragment>
+              <ToolTipIconButton
+                handleClick={() => dispatch(toggleSettingsMode())}
+                title={'Switch to Settings Mode.'}
+                isInvisible={isMidiLearnMode || isLayoutMode}
+                icon={
+                  <ViewSettingsIcon
+                    color={isSettingsMode ? 'error' : 'inherit'}
+                  />
+                }
+              />
+              <ToolTipIconButton
+                title='Switch to MultiselectionMode'
+                isInvisible={isMidiLearnMode || !isSettingsMode || isLayoutMode}
+                icon={
+                  <IconFilter
+                    color={isMultiSelectionMode ? 'error' : 'inherit'}
+                  ></IconFilter>
+                }
+                handleClick={() => dispatch(toggleMultiSelectionMode())}
+              ></ToolTipIconButton>
+              {Array.isArray(lastFocusedIdxs) && lastFocusedIdxs.length > 0 && (
+                <>
                   <ToolTipIconButton
-                    handleClick={async () =>
-                      await dispatch(
-                        thunkToggleLayoutMode({ isLayoutMode: true })
-                      )
-                    }
-                    title={'Switch to Layout Mode.'}
-                    icon={<LayoutIcon />}
+                    handleClick={() => dispatch(thunkCopyToNextPage())}
+                    title={'Copy to last page.'}
+                    isInvisible={isMidiLearnMode || isLayoutMode}
+                    icon={<CopyIcon />}
                   />
-                )}
-                <ToolTipIconButton
-                  handleClick={toggleMidiLearn}
-                  title={
-                    isMidiLearnMode
-                      ? 'Chose assigned element and finalize MIDI-Learn Mode.'
-                      : 'Switch to MIDI Learn Mode. Please, double-click element for listening to changes.'
-                  }
-                  icon={!isMidiLearnMode ? <MidiLearnIcon /> : <CheckIcon />}
-                />
 
-                {isMidiLearnMode && (
                   <ToolTipIconButton
-                    handleClick={cancelMidiLeanMode}
-                    title={'Cancel MIDI Learn mode. Throw away changes.'}
-                    icon={<CancelIcon />}
+                    handleClick={() => {
+                      lastFocusedIdxs.forEach((id) => {
+                        dispatch(deleteSmth({ i: id, lastFocusedPage }))
+                      })
+                    }}
+                    title={'Delete.'}
+                    isInvisible={isMidiLearnMode || isLayoutMode}
+                    icon={<DeleteIcon />}
                   />
-                )}
-              </>
-            )}
-          {isLayoutMode && (
-            <ToolTipIconButton
-              handleClick={async () =>
-                await dispatch(thunkToggleLayoutMode({ isLayoutMode: false }))
-              }
-              title={'Commit changes and exit layout-mode.'}
-              icon={<CheckIcon />}
-            />
-          )}
-          {isLayoutMode && (
-            <ToolTipIconButton
-              handleClick={async () => {
-                await dispatch(thunkToggleLayoutMode({ isLayoutMode: false }))
-              }}
-              title={'Throw away changes and go back.'}
-              icon={<CancelIcon />}
-            />
-          )}
-          {
-            <>
-              {isLayoutMode && (
-                <ToolTipIconButton
-                  handleClick={() => dispatch(thunkUndoRedo({ offset: -1 }))}
-                  title='Undo'
-                  icon={<UndoIcon />}
-                />
+                </>
               )}
-            </>
-          }
+              <ToolTipIconButton
+                handleClick={async () =>
+                  await dispatch(thunkToggleLayoutMode({ isLayoutMode: true }))
+                }
+                title={'Switch to Layout Mode.'}
+                isInvisible={isMidiLearnMode || isLayoutMode}
+                icon={<LayoutIcon />}
+              />
+
+              <ToolTipIconButton
+                handleClick={toggleMidiLearn}
+                title='Chose assigned element and finalize MIDI-Learn Mode.'
+                icon={<CheckIcon />}
+                isInvisible={!isMidiLearnMode}
+              />
+              <ToolTipIconButton
+                handleClick={toggleMidiLearn}
+                title='Switch to MIDI Learn Mode. Please, click element for listening to changes.'
+                icon={<MidiLearnIcon />}
+                isInvisible={
+                  lastFocusedIdxs.length <= 0 || !isSettingsMode || isLayoutMode
+                }
+              />
+              <ToolTipIconButton
+                handleClick={cancelMidiLeanMode}
+                title={'Cancel MIDI Learn mode. Throw away changes.'}
+                isInvisible={!isMidiLearnMode || isLayoutMode}
+                icon={<CancelIcon />}
+              />
+            </Fragment>
+          )}
+          <ToolTipIconButton
+            handleClick={async () =>
+              await dispatch(thunkToggleLayoutMode({ isLayoutMode: false }))
+            }
+            title={'Commit changes and exit layout-mode.'}
+            icon={<CheckIcon />}
+            isInvisible={!isLayoutMode}
+          />
+          <ToolTipIconButton
+            handleClick={() => dispatch(thunkUndoRedo({ offset: -1 }))}
+            title='Undo'
+            icon={<UndoIcon />}
+            isInvisible={!isLayoutMode}
+          />
+          <ToolTipIconButton
+            handleClick={async () => {
+              await dispatch(thunkToggleLayoutMode({ isLayoutMode: false }))
+            }}
+            title={'Throw away changes and go back.'}
+            icon={<CancelIcon />}
+            isInvisible={!isLayoutMode}
+          />
         </Toolbar>
       </AppBar>
       <div

diff --git a/packages/midi-bricks/src/global-state/index.js b/packages/midi-bricks/src/global-state/index.js
@@ -70,6 +70,7 @@ export const viewSettingsInitState = {
   isLayoutMode: false,
   isCompactHorz: false,
   isSettingsMode: false,
+  isMultiSelectionMode: false,
   isMidiLearnMode: false,
   isAutoArrangeMode: false,
   isChangedTheme: false,

diff --git a/packages/midi-bricks/src/global-state/reducers/view-settings.js b/packages/midi-bricks/src/global-state/reducers/view-settings.js
@@ -1,4 +1,3 @@
-
 import { viewSettingsInitState } from '../'
 
 export const viewSettings = {
@@ -118,9 +117,9 @@ export const viewSettings = {
 
   setLastFocusedIndex(draftState, action) {
     const { i = '' } = action.payload || {}
-
+    const { isMultiSelectionMode } = draftState
     // Multiselection
-    if (i !== 'none' && !i.startsWith('page')) {
+    if (i !== 'none' && !i.startsWith('page') && isMultiSelectionMode) {
       draftState.lastFocusedIdx = i
       draftState.lastFocusedIdxs.push(i)
       // Remove duplicates
@@ -133,12 +132,14 @@ export const viewSettings = {
       draftState.lastFocusedIdx = i
     } else {
       draftState.lastFocusedIdx = i
-      draftState.lastFocusedIdxs = []
+      draftState.lastFocusedIdxs = [i]
     }
 
     return draftState
   },
-
+  toggleMultiSelectionMode(state, action) {
+    state.isMultiSelectionMode = action.payload || !state.isMultiSelectionMode
+  },
   swapFooterPages(state, action) {
     const { srcIdx: srcI, offset } = action.payload
     const srcItem = state.pageTargets.find((item) => item.id === srcI)
@@ -441,8 +442,8 @@ function getChannels(
         noteChannel === 'all'
           ? chDummy
           : !oldNoteChannels.includes(noteChannel)
-            ? [...oldNoteChannels, noteChannel]
-            : oldNoteChannels
+          ? [...oldNoteChannels, noteChannel]
+          : oldNoteChannels
 
       channels = getObjFromNoteChannels(old, name, noteChannels)
     }
@@ -451,8 +452,8 @@ function getChannels(
         ccChannel === 'all'
           ? chDummy
           : !oldCcChannels.includes(ccChannel)
-            ? [...oldCcChannels, ccChannel]
-            : oldCcChannels
+          ? [...oldCcChannels, ccChannel]
+          : oldCcChannels
       channels = getObjFromCcChannels(old, name, ccChannels)
     }
   } else {