@medyll/idae-cadenzia 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @medyll/idae-cadenzia
 
+## 0.4.0
+
+### Minor Changes
+
+- - feat(améliorer): la gestion des changements d'accords avec une fonction dédiée et mise à jour des entrées d'accords ([9f58fc5](https://github.com/medyll/idae/commit/9f58fc5470ea3f0a19780fdd994e83a9d3b4a63a)) - 2024-11-19 by @medyll
+  - feat(ajouter): la gestion des informations de mesure pour les entrées d'accords ([b0641d0](https://github.com/medyll/idae/commit/b0641d0e4c236717555b6cb2a853f127092ee194)) - 2024-11-18 by @medyll
+  - feat(ajouter): des constantes musicales et améliorer la gestion des accords avec des options d'armure ([0f48cd9](https://github.com/medyll/idae/commit/0f48cd947ceabadf13a7488110c8bbdc6b32e638)) - 2024-11-16 by @medyll
+  - feat(ajouter): le composant App et les composants associés pour la visualisation des accords ([e7c9517](https://github.com/medyll/idae/commit/e7c95178e328e56f514678bed4c96015e7ef7529)) - 2024-11-16 by @medyll
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medyll/idae-cadenzia",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

package/src/lib/components/ChordTable.svelte

@@ -10,7 +10,7 @@
 	import { getScaleNotes, isChordInScale } from '$lib/functions/rules.js';
 
 	import type { ChordEntry } from '$lib/types/types.js';
-	import { chordEntries, updateCadences, toggleModifier } from '../functions/functions.svelte.js';
+	import { chordEntries, updateCadences, toggleModifier, handleChordChange } from '../functions/functions.svelte.js';
 
 	function addChordEntry() {
 		chordEntries.push({
@@ -28,9 +28,7 @@
 		updateCadences();
 	}
 
-	function handleChordChange() {
-		updateCadences();
-	}
+ 
 
 	function toggleTimeSignature(index: number) {
 		if (chordEntries[index].timeSignature) {
@@ -66,12 +64,30 @@
 	<tbody>
 		{#each chordEntries as entry, i}
 			<tr>
-				<td>{i + 1}</td>
+				<td>
+					{#if entry.measureInfo.start === entry.measureInfo.end}
+						{entry.measureInfo.start}
+					{:else}
+						{entry.measureInfo.start} - {entry.measureInfo.end}
+					{/if}
+				</td>
 				<td class="timeSignature">
 					{#if entry.timeSignature}
-						<input type="number" bind:value={entry.timeSignature.numerator} min="1" max="32" />
+						<input 
+							type="number" 
+							bind:value={entry.timeSignature.numerator} 
+							min="1" 
+							max="32" 
+							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
+						/>
 						/
-						<input type="number" bind:value={entry.timeSignature.denominator} min="1" max="32" />
+						<input 
+							type="number" 
+							bind:value={entry.timeSignature.denominator} 
+							min="1" 
+							max="32" 
+							onchange={() => handleChordChange(i, { timeSignature: entry.timeSignature })}
+						/>
 					{:else}
 						<button onclick={() => toggleTimeSignature(i)}>Add Time Signature</button>
 					{/if}
@@ -79,7 +95,11 @@
 				<td>
 					<div>
 						<label for="armor-{i}">Armor:</label>
-						<select id="armor-{i}" bind:value={entry.armor} onchange={handleChordChange}>
+						<select 
+							id="armor-{i}" 
+							bind:value={entry.armor} 
+							onchange={() => handleChordChange(i, { armor: entry.armor })}
+						>
 							{#each armorOptions as armor}
 								<option value={armor.name}>
 									{armor.name}
@@ -90,7 +110,11 @@
 					</div>
 					<div>
 						<label for="mode-{i}">Mode:</label>
-						<select id="mode-{i}" bind:value={entry.mode} onchange={handleChordChange}>
+						<select 
+							id="mode-{i}" 
+							bind:value={entry.mode} 
+							onchange={() => handleChordChange(i, { mode: entry.mode })}
+						>
 							<option value={undefined}>Select mode</option>
 							{#each modes as mode}
 								<option value={mode}>{mode}</option>
@@ -99,9 +123,18 @@
 					</div>
 				</td>
 				<td>
-					<select bind:value={entry.chord.root} onchange={handleChordChange}>
+					<select 
+						bind:value={entry.chord.root} 
+						onchange={() => handleChordChange(i, { chord: { ...entry.chord } })}
+					>
 						{#each rootNotes as note}
-							<option value={note} class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, root: note}})}>
+							<option
+								value={note}
+								class:not-in-scale={!isChordValid({
+									...entry,
+									chord: { ...entry.chord, root: note }
+								})}
+							>
 								{note}
 							</option>
 						{/each}
@@ -111,16 +144,20 @@
 					{#each Object.entries(qualities) as [group, qualityOptions]}
 						<div>
 							{#each qualityOptions as quality}
-								<label class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, quality}})}>
+								<label
+									class:not-in-scale={!isChordValid({
+										...entry,
+										chord: { ...entry.chord, quality }
+									})}
+								>
 									<input
 										type="radio"
 										name={`quality-${group}-${i}`}
 										value={quality}
 										checked={entry.chord[group] === quality}
 										onchange={() => {
-											entry.chord[group] = quality;
-											entry.chord.quality = quality;
-											handleChordChange();
+											const updatedChord = { ...entry.chord, [group]: quality, quality };
+											handleChordChange(i, { chord: updatedChord });
 										}}
 									/>
 									{quality}
@@ -132,7 +169,9 @@
 				</td>
 				<td>
 					{#each modifiers as modifier}
-						<label class:not-in-scale={!isChordValid({...entry, chord: {...entry.chord, modifier}})}>
+						<label
+							class:not-in-scale={!isChordValid({ ...entry, chord: { ...entry.chord, modifier } })}
+						>
 							<input
 								type="radio"
 								name={`modifier-${i}`}
@@ -148,7 +187,7 @@
 					<input
 						type="text"
 						bind:value={entry.chord.duration}
-						onchange={handleChordChange}
+						onchange={() => handleChordChange(i, { chord: { ...entry.chord } })}
 						placeholder="e.g., 1, 1/2, 3/4"
 					/>
 				</td>

package/src/lib/functions/functions.svelte.ts

@@ -114,3 +114,26 @@ export function updateChordEntry(index: number, updatedEntry: Partial<ChordEntry
 		updateCadences();
 	}
 }
+
+export function handleChordChange(index: number, changes: Partial<ChordEntry>) {
+	if (index >= 0 && index < chordEntries.length) {
+		const currentEntry = chordEntries[index];
+		const updatedEntry: ChordEntry = { ...currentEntry };
+
+		if (changes.chord) {
+			updatedEntry.chord = { ...currentEntry.chord, ...changes.chord };
+		}
+		if (changes.timeSignature) {
+			updatedEntry.timeSignature = changes.timeSignature;
+		}
+		if (changes.armor !== undefined) {
+			updatedEntry.armor = changes.armor;
+		}
+		if (changes.mode !== undefined) {
+			updatedEntry.mode = changes.mode;
+		}
+
+		chordEntries[index] = updatedEntry;
+		updateCadences();
+	}
+}