Add functionality for creating loops with an intro (#61)

mamar-web/src/app/doc/SegmentMap.tsx

@@ -6,6 +6,7 @@ import styles from "./SegmentMap.module.scss"
 
 import TrackControls from "../emu/TrackControls"
 import { useBgm, useDoc, useVariation } from "../store"
+import { variationReducer } from "../store/variation"
 import useSelection, { SelectionProvider } from "../util/hooks/useSelection"
 
 interface Loop {
@@ -81,6 +82,16 @@ function PianoRollThumbnail({ trackIndex, trackListIndex }: { trackIndex: number
     }
 }
 
+function useAddNewSegment() {
+    const [variation, dispatch] = useVariation()
+    return () => dispatch({ type: "add_segment", id: variation?.segments.length ?? 1, trackList: variation?.segments.length ?? 1 }) // new action
+}
+
+function useAddLoopStart() {
+    const [variation, dispatch] = useVariation()
+    return () => dispatch({ type: "add_loop_start", id: variation?.segments.length ?? 1, iterCount: 0 }) // new action
+}
+
 function Container() {
     const [variation] = useVariation()
     const selection = useSelection()
@@ -126,12 +137,18 @@ function Container() {
                     }
                 })}
             </tr>)}
+
         </tbody>}
     </table>
+
 }
 
 export default function SegmentMap() {
+    const addLoopStart = useAddLoopStart()
+    const addNewSegment = useAddNewSegment()
     return <SelectionProvider>
         <Container />
+        <button onClick={addLoopStart}>Add loop start</button>
+        <button onClick={addNewSegment}>Add new region</button>
     </SelectionProvider>
 }

mamar-web/src/app/store/variation.ts

@@ -12,6 +12,14 @@ export type VariationAction = {
     type: "move_segment"
     id: number
     toIndex: number
+} | {
+    type: "add_segment"
+    id: number
+    trackList: number
+} | {
+    type: "add_loop_start"
+    id: number
+    iterCount: number
 }
 
 export function variationReducer(variation: Variation, action: VariationAction): Variation {
@@ -73,6 +81,47 @@ export function variationReducer(variation: Variation, action: VariationAction):
         } else {
             return variation
         }
+    case "add_segment":
+        const newSeg: Segment = {
+            type: "Subseg",
+            id: action.id,
+            trackList: action.trackList,
+        }
+        return {
+            ...variation,
+            segments: [
+                ...variation.segments,
+                newSeg,
+            ],
+        }
+    case "add_loop_start": {
+
+        const startLoopSeg: Segment = {
+            id: action.id,
+            type: "StartLoop",
+            label_index: variation.segments.length ?? 0,
+        }
+        const loopSubSeg: Segment = {
+            type: "Subseg",
+            id: action.id + 1,
+            trackList: variation.segments.length + 1,
+        }
+        const endLoopSeg: Segment = {
+            type: "EndLoop",
+            id: action.id + 2,
+            label_index: variation.segments.length + 2,
+            iter_count: action.iterCount,
+        }
+        return {
+            ...variation,
+            segments: [
+                ...variation.segments,
+                startLoopSeg,
+                loopSubSeg,
+                endLoopSeg,
+            ],
+        }
+    }
     }
 }