Prototype pattern mode

src/components/DroppedPattern.tsx

@@ -1,18 +1,145 @@
-import React from 'react'
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react'
 import Lane from '../scripts/Lane';
+import { supabase } from '../scripts/supa-client';
+import { retrieveBucketData } from '../scripts/main';
+import { PatternModeSection } from '../scripts/types';
 
 interface IDroppedPatternProps {
     lane: Lane;
     name: string; 
-    measures: number;
+    start: number;
+    occurances: number;
+    // unmount: () => void | null; 
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+    // topPatternMeasureRef: React.RefObject<number[][]> | null; 
+    setDroppedPatterns: React.Dispatch<React.SetStateAction<PatternModeSection[]>>;
+    id: string; 
+    data: JSON;
+
+    droppedPatternsRef: React.RefObject<PatternModeSection[]>;
+
 }
 
-const DroppedPattern: React.FC<IDroppedPatternProps> = ({ name, measures }) => {
+const DroppedPattern: React.FC<IDroppedPatternProps> = ({ lane, name, start, occurances, setMessage, setDroppedPatterns, id, data, droppedPatternsRef }) => {
+    let startMeasureRef = useRef(start);
+    const [startMeasure, setStartMeasure] = useState(startMeasureRef.current + 1); 
+
+    let currentOccurances = useRef(occurances);
+    const [occuranceState, setOccuranceState] = useState(currentOccurances.current);
+
+    const updatePattern = (updatedData: Partial<{ start: number; length: number }>) => {
+        setDroppedPatterns(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            droppedPatternsRef.current = updated; 
+            return updated;
+        }
+    );};
+
+    const removePattern = () => {
+        setDroppedPatterns(prev => {
+            const updated = prev.filter(pattern => pattern.id !== id);
+            droppedPatternsRef.current = updated; 
+            return updated;
+        }
+        );
+    };
+
+    const patternStartMeasureChange = (e: number) => {
+        if(e <= startMeasureRef.current) {
+            console.log('pattern is gone');
+            removePattern();
+        } 
+    }
+
+
+    const measureChange = (startMeasure: number, measureDifference: number) => {
+        console.log(`measure difference ${measureDifference}`);
+
+        if(measureDifference < 0) {
+            if(startMeasure == startMeasureRef.current) {
+                currentOccurances.current += measureDifference;
+                setOccuranceState(currentOccurances.current);
+                console.log(currentOccurances);
+
+            } else if(startMeasure < startMeasureRef.current) {
+                startMeasureRef.current = startMeasureRef.current + measureDifference;
+                setStartMeasure(startMeasureRef.current + 1);
+            }
+        } else if(startMeasure < startMeasureRef.current) {
+            startMeasureRef.current += measureDifference;
+            setStartMeasure(startMeasureRef.current + 1);
+        }
+
+        updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+    }
+
+    const onDeleteClick = () => {
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+        removePattern();
+        lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, 0); 
+    }
+
+    const onReloadClick = () => {
+        lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, currentOccurances.current, data)
+    }
+
+    const onOccuranceInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+        let newOccurances = parseInt(e.target.value); 
+        let code = 0; 
+
+        // updatePattern({start: startMeasureRef.current, length: newOccurances});
+
+        if(newOccurances < currentOccurances.current) {
+            lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, newOccurances);
+        } else {
+            code = lane.increasePatternOccurances(startMeasureRef.current, currentOccurances.current, newOccurances, data);
+        }
+
+        console.debug('code ', code);
+        if(code == 0) {            
+            currentOccurances.current = newOccurances;
+            setOccuranceState(currentOccurances.current);
+            updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
+
+        } else {
+            e.target.value = currentOccurances.current.toString();
+        }
+    }
+
+    useEffect(() => {        
+        currentOccurances.current = occurances;
+        setOccuranceState(currentOccurances.current);
+
+
+        lane.onPatternStartChange(patternStartMeasureChange);
+        lane.onPatternChange(measureChange);
+
+        return () => {
+            lane.removePatternStartChange(patternStartMeasureChange);
+            lane.removeOnPatternChange(measureChange);
+        }
+    }, []);
+
     return (<div className='dropped_pattern'>
         {name}
-        <input type="number" min={1} defaultValue={measures} />
-        <button>delete</button>
-
+        <input type="number" min={1} defaultValue={occurances} onChange={onOccuranceInputChange}/>
+        <button onClick={onDeleteClick}>delete</button>
+        <button onClick={onReloadClick}>reload</button>
+
+
+
+        <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div>
+        {/* <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div> */}
+
+        { startMeasureRef.current > 0 && 
+        <div className="spacer_container">
+            <div className="spacer"></div>
+            <div className="spacer"></div>
+        </div>
+        }
     </div>)
 }
 

src/components/IndividualNoteSection.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Lane from '../scripts/Lane';
+import { PatternModeSection } from '../scripts/types';
+
+interface IndividualNoteSectionProps {
+    id: string; 
+    lane: Lane;
+    start: number;
+    occurances: number;
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+
+    setIndividualNoteSections: React.Dispatch<React.SetStateAction<PatternModeSection[]>>;
+    individualNoteSectionsRef: React.RefObject<PatternModeSection[]>;
+}
+
+const IndividualNoteSection: React.FC<IndividualNoteSectionProps> = ({ lane, setMessage, start, occurances, id, setIndividualNoteSections, individualNoteSectionsRef}) => {
+    let startMeasureRef = useRef(start);
+    const [startMeasure, setStartMeasure] = useState(startMeasureRef.current + 1); 
+
+    let currentOccurances = useRef(occurances);
+    const [occuranceState, setOccuranceState] = useState(currentOccurances.current);
+
+    const removePattern = () => {
+        setIndividualNoteSections(prev => {
+            const updated = prev.filter(pattern => pattern.id !== id);
+            individualNoteSectionsRef.current = updated; 
+            console.debug(updated);
+            return updated;
+        });
+    };
+
+    const updatePattern = (updatedData: Partial<{ start: number; length: number }>) => {
+        setIndividualNoteSections(prev => {
+            const updated = prev.map(pattern =>
+                pattern.id === id ? { ...pattern, ...updatedData } : pattern
+            )
+            individualNoteSectionsRef.current = updated; 
+            return updated;
+        }
+    );};
+
+
+    const patternStartMeasureChange = (e: number) => {
+        if(e <= startMeasureRef.current) {
+            console.log('pattern is gone');
+            removePattern();
+        } 
+    }
+
+    const measureChange = (startMeasure: number, measureDifference: number) => {
+        console.log(`measure difference ${measureDifference}`);
+
+        if(measureDifference < 0) {
+            if(startMeasure == startMeasureRef.current) {
+                currentOccurances.current += measureDifference;
+                setOccuranceState(currentOccurances.current);
+                console.log(currentOccurances);
+
+            } else if(startMeasure < startMeasureRef.current) {
+                startMeasureRef.current = startMeasureRef.current + measureDifference;
+                setStartMeasure(startMeasureRef.current + 1);
+            }
+        } else if(startMeasure < startMeasureRef.current) {
+            startMeasureRef.current += measureDifference;
+            setStartMeasure(startMeasureRef.current + 1);
+        }
+
+        updatePattern({start: startMeasureRef.current, length: currentOccurances.current});
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+
+        // console.debug('measureChange from notes', startMeasure, measureDifference);
+
+        // if(measureDifference < 0 && startMeasure < startMeasureRef.current) {
+
+        //     startMeasureRef.current = startMeasureRef.current + measureDifference;
+        //     statsRef.current[0] = startMeasureRef.current;
+
+        //     // individualNotesSectionRef.current[index][0] = startMeasureRef.current;
+
+
+        //     setStartMeasure(startMeasureRef.current + 1);
+        //     setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+
+
+        // } else if(startMeasure < startMeasureRef.current) {
+        //     console.log('in here', startMeasureRef.current)
+
+        //     startMeasureRef.current += measureDifference;
+        //     statsRef.current[0] = startMeasureRef.current;
+
+        //     console.log('in here', startMeasureRef.current)
+        //     setStartMeasure(startMeasureRef.current + 1);
+        //     setEndMeasure(startMeasureRef.current + statsRef.current[1]);
+        // }
+
+        // console.debug('measureChange from notes after', statsRef.current);
+
+    }
+
+    const onDeleteClick = () => {
+        console.debug(id, startMeasureRef.current, currentOccurances.current);
+        removePattern();
+        lane.reducePatternOccuances(startMeasureRef.current, currentOccurances.current, 0); 
+    }
+
+    useEffect(() => {
+        console.debug(id); 
+        lane.onPatternChange(measureChange);
+        lane.onPatternStartChange(patternStartMeasureChange); 
+    }, []);
+
+    return (
+    <div className="individual_note_section">
+        <div>IndividualNoteSection</div>
+        <div>{`Measures ${startMeasure} - ${startMeasure + occuranceState - 1}`}</div>
+        <button onClick={onDeleteClick}>delete</button>
+    </div>)
+}
+
+export default IndividualNoteSection

src/components/LaneEditingPanel.tsx

@@ -104,7 +104,7 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
       return; 
 
     // TODO: Keep next measure index updated while adding notes in individual mode so this isn't necessary
-    lane.notes = [];
+    // lane.notes = [];
 
     setEditMode('pattern');
     changeEditMode(EDIT_MODES.PATTERN_MODE);
@@ -147,7 +147,10 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
     lane.measureCount = newMC;
     event.target.value = newMC.toString(); 
 
-    lane.patternStartMeasure = 0;
+    // lane.patternStartMeasure = 0;
+
+    if(newMC - 1 < lane.patternStartMeasure)
+      lane.setPatternStartMeasure(newMC); 
 
     lane.recalculateHeight();
     lane.cullOutOfBoundsNotes();
@@ -171,13 +174,14 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
     }
 
     setCanRepeat(lane.getRatio() < longest_lane.getRatio()); 
+    saveCurrentSessionLocally();
     drawSingleLane(lane);
   }
 
   const onRepeatClick = () => {
     if(!repeated) {
-      if(lane.notes.length > 0) 
-        lane.repeatNotes();
+      // if(lane.notes.length > 0) 
+      lane.repeatNotes();
     } else {
       // Lane has already been repeated. Toggle repeating off
       lane.unrepeatNotes();   
@@ -362,6 +366,8 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
             let newValue = parseInt(event.target.value);
             lane.subdivision = newValue;
             lane.notes = [];
+            // lane.patternStartMeasure = 0; 
+            lane.setPatternStartMeasure(0); 
             lane.translationAmount = 0;
             // TODO: Review this
             lane.recalculateNoteGap(); 
@@ -379,6 +385,7 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
             <option value="9" selected={(lane.subdivision == 9) ? true : false}>9</option>
             <option value="10" selected={(lane.subdivision == 10) ? true : false}>10</option>
             <option value="11" selected={(lane.subdivision == 11) ? true : false}>11</option>
+            <option value="16" selected={(lane.subdivision == 16) ? true : false}>16</option>
         </select>
         <label htmlFor="subdivision_select">Subdivision</label>
       </div>
@@ -461,10 +468,12 @@ const LaneEditingPanel: React.FC<ILaneEditingPanelProps> = ({ canvas }) => {
         resetPatternInCreation();
       } else {
         lane.notes = [];
-        lane.patternStartMeasure = 0; 
+        // lane.patternStartMeasure = 0; 
+        lane.setPatternStartMeasure(0); 
       }
       lane.translationAmount = 0; 
       drawSingleLane(lane);
+      saveCurrentSessionLocally(); 
     }}>clear notes</button>
 
     <button className="back_to_start" onClick={()=>{