feat: FingerBoard supports mute and open lines

threedalpeng · Feb 6, 2024 · f2d9ca6 · f2d9ca6
1 parent c44bf09
commit f2d9ca6
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 40 deletions.
diff --git a/src/lib/canvas/core/events.ts b/src/lib/canvas/core/events.ts
@@ -102,7 +102,7 @@ export class CanvasEventHandler {
 		const [r, g, b] = this.context2d.getImageData(Math.floor(x), Math.floor(y), 1, 1).data;
 
 		const hitCode = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-		// console.log(hitCode);
+
 		let currentPointerInfo = this.#pointerInfoMap.get(ev.pointerId);
 		if (currentPointerInfo === undefined) {
 			currentPointerInfo = {
@@ -218,10 +218,7 @@ export class CanvasEventHandler {
 
 			pointerInfo.hitCode = unpolledInfo.hitCode;
 			pointerInfo.position = unpolledInfo.position;
-
-			// if (hitEventTypes.length !== 0) {
-			// 	console.log(hitEventTypes);
-			// }
+
 			hitEventTypes.forEach(([type, button]) => {
 				if (onHit)
 					onHit({

diff --git a/src/lib/canvas/elements/Crop.svelte b/src/lib/canvas/elements/Crop.svelte
@@ -57,6 +57,7 @@
 			width={sourceArea.width ?? width}
 			height={sourceArea.height ?? height}
 			lineWidth={4}
+			active={false}
 		/>
 	{/if}
 {/if}
diff --git a/src/lib/canvas/elements/Ellipse.svelte b/src/lib/canvas/elements/Ellipse.svelte
@@ -2,7 +2,7 @@
 	import { onCanvasRender } from '..';
 	import HitRegion from './HitRegion.svelte';
 
-	export let active: boolean = true;
+	export let active: boolean = false;
 	export let x: number;
 	export let y: number;
 	export let radiusX: number;

diff --git a/src/lib/canvas/elements/Line.svelte b/src/lib/canvas/elements/Line.svelte
@@ -2,7 +2,7 @@
 	import { onCanvasRender } from '../core/hooks';
 	import HitRegion from './HitRegion.svelte';
 
-	export let active: boolean = true;
+	export let active: boolean = false;
 	export let points: { x: number; y: number }[];
 	export let strokeStyle: string | CanvasGradient | CanvasPattern = '#000';
 	export let lineCap: CanvasLineCap = 'butt';

diff --git a/src/lib/canvas/elements/Rectangle.svelte b/src/lib/canvas/elements/Rectangle.svelte
@@ -2,7 +2,7 @@
 	import { onCanvasRender } from '..';
 	import HitRegion from './HitRegion.svelte';
 
-	export let active: boolean = true;
+	export let active: boolean = false;
 	export let x: number;
 	export let y: number;
 	export let width: number;

diff --git a/src/lib/canvas/elements/Text.svelte b/src/lib/canvas/elements/Text.svelte
@@ -27,7 +27,7 @@
 		| 'pt';
 	type Length = `${number}${LengthUnit}` | 0;
 
-	export let active: boolean = true;
+	export let active: boolean = false;
 	export let text: string;
 	export let fontStyle: 'normal' | 'italic' | 'oblique' | `oblique ${Angle}` = 'normal';
 	export let fontVariant: 'normal' | 'small-caps' = 'normal';

diff --git a/src/lib/guitar/FingerBoard/FingerBoard.svelte b/src/lib/guitar/FingerBoard/FingerBoard.svelte
@@ -11,12 +11,15 @@
 	import FingerBoardBackground from './components/FingerBoardBackground.svelte';
 	import FingerBoardPoisitionIndicator from './components/FingerBoardPoisitionIndicator.svelte';
 	import { getXFromFretNumber, getYFromStringNumber, setFingerBoardContext } from './context';
+	import HitRegion from '$/lib/canvas/elements/HitRegion.svelte';
 
 	const dispatch = createEventDispatcher<{ click: FingerPosition; hover: FingerPosition }>();
 
-	const { FRET_START, FRET_GAP, STRING_START, STRING_GAP, FINGER_RADIUS, FRET_MAX } =
+	const { FRET_START, FRET_WIDTH, FRET_GAP, STRING_START, STRING_GAP, FINGER_RADIUS, FRET_MAX } =
 		setFingerBoardContext();
 
+	export let readonly: boolean = false;
+
 	export let fretRange: {
 		start: number;
 		end: number;
@@ -46,10 +49,11 @@
 		width={FRET_START * 2 + FRET_GAP * FRET_MAX}
 		height={STRING_START * 2 + STRING_GAP * 5}
 		sourceArea={{
-			x: getXFromFretNumber(fretRange.start - fretNumberPadding),
+			x: getXFromFretNumber(fretRange.start) - FRET_WIDTH - 4,
 			width: fretRangeWidth
 		}}
 		destArea={{ x: FRET_START }}
+		debug={false}
 	>
 		<FingerBoardBackground {inlayVisible} />
 		{#each fingersOnFret as finger}
@@ -60,22 +64,42 @@
 				radius={FINGER_RADIUS}
 			/>
 		{/each}
-		{#each Array(fretRange.end - fretRange.start) as _, i}
-			{@const fretNum = i + 1 + fretRange.start}
-			{@const leftX = getXFromFretNumber(fretNum - 1)}
-			{#each Array(6) as _, j}
-				{@const lineNum = j + 1}
-				{@const centerY = getYFromStringNumber(lineNum)}
-				<FingerBoardPoisitionIndicator
-					{leftX}
-					{centerY}
-					on:click={() => {
-						dispatch('click', { fret: fretNum, line: lineNum });
-					}}
-				></FingerBoardPoisitionIndicator>
+		{#if !readonly}
+			{#each Array(fretRange.end - fretRange.start) as _, i}
+				{@const fretNum = i + 1 + fretRange.start}
+				{@const leftX = getXFromFretNumber(fretNum - 1)}
+				{#each Array(6) as _, j}
+					{@const lineNum = j + 1}
+					{@const centerY = getYFromStringNumber(lineNum)}
+					<FingerBoardPoisitionIndicator
+						{leftX}
+						{centerY}
+						on:click={(ev) => {
+							if (ev.detail.button === 0) {
+								dispatch('click', { fret: fretNum, line: lineNum });
+							} else if (ev.detail.button === 2) {
+								dispatch('click', { fret: 'mute', line: lineNum });
+							}
+						}}
+					/>
+				{/each}
 			{/each}
-		{/each}
+		{/if}
 	</Crop>
+	{#each Array(6) as _, j}
+		{@const lineNum = j + 1}
+		{@const centerY = getYFromStringNumber(lineNum)}
+		<HitRegion
+			on:click={() => {
+				dispatch('click', { fret: 'open', line: lineNum });
+			}}
+			render={(ctx) => {
+				const width = FRET_GAP;
+				const height = STRING_GAP;
+				ctx.fillRect(FRET_START - FRET_GAP, centerY - height / 2, width, height);
+			}}
+		></HitRegion>
+	{/each}
 	{#each noneFingers as noneFinger}
 		<Text
 			fontSize="20px"

diff --git a/src/lib/guitar/FingerBoard/components/FingerBoardPoisitionIndicator.svelte b/src/lib/guitar/FingerBoard/components/FingerBoardPoisitionIndicator.svelte
@@ -19,8 +19,8 @@
 	active={false}
 	x={leftX + FRET_GAP / 2}
 	y={centerY}
-	fillStyle="#bbbbbb"
-	strokeStyle="#bbbbbb"
+	fillStyle="#888888"
+	strokeStyle="#888888"
 	radius={$indicatorSize}
 ></Circle>
 <HitRegion

diff --git a/src/lib/notation/PitchNotation.svelte b/src/lib/notation/PitchNotation.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { getChordNotations, type ChordName, type ChordRoot } from '$/utils/music/chords';
+
+	export let note: ChordRoot;
+	export let octave: number;
+
+	$: chordNotations = getChordNotations(note, 'none');
+</script>
+
+<span class="font-chord">{chordNotations.default.short}</span><span class="font-jazz">{octave}</span
+>
diff --git a/src/routes/practice/render-sample/+page.svelte b/src/routes/practice/render-sample/+page.svelte
@@ -104,21 +104,24 @@
 		};
 	});
 
-	let fingers: FingerPosition[] = [];
+	let fingers: Record<number, FingerPosition> = {};
+	function updateFingerPosition(position: FingerPosition) {
+		if (fingers[position.line]?.fret === position.fret) {
+			delete fingers[position.line];
+		} else {
+			fingers[position.line] = position;
+		}
+		fingers = fingers;
+	}
 </script>
 
 <div class="h-full w-screen">
 	<Board
 		root="G"
 		name="halfDiminishedSeventh"
-		{fingers}
+		fingers={Object.values(fingers)}
 		on:click={({ detail: { fret, line } }) => {
-			const idx = fingers.findIndex((f) => f.fret === fret && f.line === line);
-			if (idx === -1) {
-				fingers = fingers.concat({ fret, line });
-			} else {
-				fingers = fingers.filter((f) => f.fret !== fret || f.line !== line);
-			}
+			updateFingerPosition({ fret, line });
 		}}
 	></Board>
 	<!-- <MetronomeProvider><RandomBox {components} /></MetronomeProvider> -->

diff --git a/src/routes/practice/render-sample/Board.svelte b/src/routes/practice/render-sample/Board.svelte
@@ -13,9 +13,5 @@
 	<ChordNotation {root} {name} />
 </div>
 {#if !isFingerboardHidden}
-	<FingerBoard
-		{fingers}
-		fretRange={{ start: 0, end: 12, visibility: 'all' }}
-		on:click
-	/>
+	<FingerBoard {fingers} fretRange={{ start: 0, end: 12, visibility: 'all' }} on:click />
 {/if}