Merge pull request #310 from ryohey/fix-event-list

Fix event list value limit
ryohey · Jan 24, 2024 · 9c1add9 · 9c1add9 · vercel · Jan 24, 2024
2 parents 31ab789 + 76512ea
commit 9c1add9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/main/components/EventEditor/EventController.ts b/src/main/components/EventEditor/EventController.ts
@@ -5,6 +5,8 @@ export type EventInputProp =
   | {
       type: "number"
       value: number
+      minValue: number
+      maxValue: number
     }
   | {
       type: "text"
@@ -33,8 +35,10 @@ export function getEventController<T extends TrackEvent>(
             name:
               controllerTypeString(e.controllerType) ?? `CC${e.controllerType}`,
             value: {
-              value: e.value,
               type: "number",
+              value: e.value,
+              minValue: 0,
+              maxValue: 127,
               update: (value) => ({ value }),
             },
           }
@@ -44,11 +48,15 @@ export function getEventController<T extends TrackEvent>(
             value: {
               type: "number",
               value: e.velocity,
+              minValue: 0,
+              maxValue: 127,
               update: (velocity) => ({ velocity }),
             },
             gate: {
               type: "number",
               value: e.duration,
+              minValue: 0,
+              maxValue: Infinity,
               update: (duration) => ({ duration }),
             },
           }
@@ -58,6 +66,8 @@ export function getEventController<T extends TrackEvent>(
             value: {
               type: "number",
               value: e.value,
+              minValue: 0,
+              maxValue: 127,
               update: (value) => ({ value }),
             },
           }
@@ -67,6 +77,8 @@ export function getEventController<T extends TrackEvent>(
             value: {
               type: "number",
               value: e.value,
+              minValue: 0,
+              maxValue: 16384,
               update: (value) => ({ value }),
             },
           }
@@ -79,17 +91,19 @@ export function getEventController<T extends TrackEvent>(
           return {
             name: e.subtype,
             value: {
-              value: e.text,
               type: "text",
+              value: e.text,
               update: (text) => ({ text }),
             },
           }
         case "midiChannelPrefix":
           return {
             name: e.subtype,
             value: {
-              value: e.value,
               type: "number",
+              value: e.value,
+              minValue: 0,
+              maxValue: 127,
               update: (channel) => ({ channel }),
             },
           }

diff --git a/src/main/components/EventEditor/EventList.tsx b/src/main/components/EventEditor/EventList.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled"
 import useComponentSize from "@rehooks/component-size"
-import { isEqual } from "lodash"
+import { clamp, isEqual } from "lodash"
 import { observer } from "mobx-react-lite"
 import React, { FC, useCallback, useMemo, useRef, useState } from "react"
 import { FixedSizeList, ListChildComponentProps } from "react-window"
@@ -117,6 +117,8 @@ type InputCellProps = EventInputProp & {
   style?: React.CSSProperties
   type: "number" | "text"
   onChange: (value: number | string) => void
+  minValue?: number
+  maxValue?: number
 }
 
 const StyledInput = styled.input`
@@ -145,7 +147,14 @@ const DisabledInputCell: FC<{ style?: React.CSSProperties }> = ({ style }) => (
   </Cell>
 )
 
-const InputCell: FC<InputCellProps> = ({ value, type, style, onChange }) => {
+const InputCell: FC<InputCellProps> = ({
+  value,
+  type,
+  style,
+  minValue,
+  maxValue,
+  onChange,
+}) => {
   const [isFocus, setFocus] = useState(false)
   const [inputValue, setInputValue] = useState("")
 
@@ -154,7 +163,7 @@ const InputCell: FC<InputCellProps> = ({ value, type, style, onChange }) => {
       case "number":
         const num = parseInt(inputValue)
         if (!Number.isNaN(num)) {
-          onChange(num)
+          onChange(clamp(num, minValue ?? 0, maxValue ?? Infinity))
         }
         break
       case "text":