event.stopPropagation()}
+ onClick={(event) => event.stopPropagation()}
+ onDoubleClick={(event) => event.stopPropagation()}
>
{
+ const baseRegion = new KGChordRegion('chord-1', 'global-chord', 3, 'Cmaj7', 0, 4);
+
+ beforeEach(() => {
+ document.documentElement.style.setProperty('--track-grid-bar-width', '40');
+ });
+
+ it('opens the chord popup for an existing region', () => {
+ const onOpenPopup = vi.fn();
+
+ render(
+
+ );
+
+ fireEvent.doubleClick(screen.getByText('Cmaj7'));
+ expect(onOpenPopup).toHaveBeenCalledWith('chord-1');
+ });
+
+ it('creates a new region at a bar-aligned beat on empty-lane double click and modifier click', () => {
+ const onCreateAtBeat = vi.fn();
+
+ const { container } = render(
+
+ );
+
+ const lane = container.querySelector('.global-chord-lane') as HTMLDivElement;
+ vi.spyOn(lane, 'getBoundingClientRect').mockReturnValue({
+ x: 0,
+ y: 0,
+ left: 0,
+ top: 0,
+ right: 320,
+ bottom: 24,
+ width: 320,
+ height: 24,
+ toJSON: () => ({}),
+ });
+
+ fireEvent.doubleClick(lane, { clientX: 159, clientY: 10 });
+ fireEvent.mouseDown(lane, { clientX: 81, clientY: 10, ctrlKey: true, button: 0 });
+
+ expect(onCreateAtBeat).toHaveBeenNthCalledWith(1, 16);
+ expect(onCreateAtBeat).toHaveBeenNthCalledWith(2, 8);
+ });
+
+ it('snaps drag moves to whole beats', async () => {
+ const onMoveRegion = vi.fn();
+
+ render(
+
+ );
+
+ const region = screen.getByText('Cmaj7').closest('.global-chord-region') as HTMLDivElement;
+ vi.spyOn(region, 'getBoundingClientRect').mockReturnValue({
+ x: 0,
+ y: 0,
+ left: 0,
+ top: 0,
+ right: 30,
+ bottom: 24,
+ width: 30,
+ height: 24,
+ toJSON: () => ({}),
+ });
+ fireEvent.mouseDown(region, { clientX: 15, clientY: 10, button: 0 });
+ fireEvent.mouseMove(window, { clientX: 32, clientY: 10 });
+ await waitFor(() => expect(region.style.left).toBe('20px'));
+ fireEvent.mouseUp(window, { clientX: 32, clientY: 10 });
+
+ expect(onMoveRegion).toHaveBeenCalledWith('chord-1', 2);
+ });
+});
diff --git a/src/components/global-track/GlobalChordLane.tsx b/src/components/global-track/GlobalChordLane.tsx
new file mode 100644
index 0000000..8de3611
--- /dev/null
+++ b/src/components/global-track/GlobalChordLane.tsx
@@ -0,0 +1,365 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { KGChordRegion } from '../../core/region/KGChordRegion';
+import type { RegionClickOptions } from '../interfaces';
+import { isModifierKeyPressed } from '../../util/osUtil';
+import { TOOLBAR_CONSTANTS } from '../../constants';
+import FloatingPopup from '../common/FloatingPopup';
+import ChordPickerPopup from '../ChordPickerPopup';
+
+interface GlobalChordLaneProps {
+ chordRegions: KGChordRegion[];
+ maxBars: number;
+ barWidthMultiplier: number;
+ timeSignature: { numerator: number; denominator: number };
+ selectedRegionIds: string[];
+ popupRegionId: string | null;
+ onClosePopup: () => void;
+ onSelectRegion: (regionId: string, options?: RegionClickOptions) => void;
+ onCreateAtBeat: (startBeat: number) => void;
+ onMoveRegion: (regionId: string, startBeat: number) => void;
+ onResizeRegion: (regionId: string, edge: 'start' | 'end', beat: number) => void;
+ onChangeChord: (regionId: string, symbol: string) => void;
+ onOpenPopup: (regionId: string) => void;
+ onTabNavigate: (regionId: string, direction: 'forward' | 'backward') => void;
+}
+
+type ResizeEdge = 'start' | 'end' | null;
+
+const REGION_EDGE_HITBOX_PX = 8;
+const DRAG_THRESHOLD_PX = 4;
+
+const GlobalChordLane: React.FC
= ({
+ chordRegions,
+ maxBars,
+ barWidthMultiplier,
+ timeSignature,
+ selectedRegionIds,
+ popupRegionId,
+ onClosePopup,
+ onSelectRegion,
+ onCreateAtBeat,
+ onMoveRegion,
+ onResizeRegion,
+ onChangeChord,
+ onOpenPopup,
+ onTabNavigate,
+}) => {
+ const laneRef = useRef(null);
+ const [previewBeats, setPreviewBeats] = useState>({});
+ const [hoverEdges, setHoverEdges] = useState>({});
+ const [isModifierPressed, setIsModifierPressed] = useState(false);
+ const interactionRef = useRef<{
+ mode: 'drag' | 'resize' | null;
+ regionId: string;
+ initialMouseX: number;
+ initialStartBeat: number;
+ initialLength: number;
+ resizeEdge: ResizeEdge;
+ moved: boolean;
+ } | null>(null);
+
+ const totalBeats = maxBars * timeSignature.numerator;
+ const beatWidth = useMemo(() => {
+ const barWidth = TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * barWidthMultiplier;
+ return barWidth / timeSignature.numerator;
+ }, [barWidthMultiplier, timeSignature.numerator]);
+
+ const clampStartBeat = (value: number) => Math.max(0, Math.min(totalBeats - 1, value));
+ const clampEndBeat = (value: number) => Math.max(1, Math.min(totalBeats, value));
+ const beatsPerBar = timeSignature.numerator;
+
+ const getBeatFromClientX = (clientX: number, mode: 'start' | 'end' = 'start') => {
+ if (!laneRef.current) {
+ return 0;
+ }
+
+ const rect = laneRef.current.getBoundingClientRect();
+ const relativeX = clientX - rect.left;
+ const rawBeat = relativeX / beatWidth;
+ return mode === 'end'
+ ? clampEndBeat(Math.round(rawBeat))
+ : clampStartBeat(Math.round(rawBeat));
+ };
+
+ const getBarSnappedBeatFromClientX = (clientX: number) => {
+ const beat = getBeatFromClientX(clientX);
+ return clampStartBeat(Math.floor(beat / beatsPerBar) * beatsPerBar);
+ };
+
+ const getRenderedBeatState = (region: KGChordRegion) => (
+ previewBeats[region.getId()] ?? {
+ startBeat: region.getStartFromBeat(),
+ length: region.getLength(),
+ }
+ );
+
+ const getResizeEdgeFromMouseEvent = (
+ event: React.MouseEvent
+ ): ResizeEdge => {
+ const rect = event.currentTarget.getBoundingClientRect();
+ const offsetX = event.clientX - rect.left;
+
+ if (offsetX <= REGION_EDGE_HITBOX_PX) {
+ return 'start';
+ }
+
+ if (rect.width - offsetX <= REGION_EDGE_HITBOX_PX) {
+ return 'end';
+ }
+
+ return null;
+ };
+
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (isModifierKeyPressed(event)) {
+ setIsModifierPressed(true);
+ }
+ };
+
+ const handleKeyUp = (event: KeyboardEvent) => {
+ if (!isModifierKeyPressed(event)) {
+ setIsModifierPressed(false);
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ window.addEventListener('keyup', handleKeyUp);
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ window.removeEventListener('keyup', handleKeyUp);
+ };
+ }, []);
+
+ useEffect(() => {
+ const handleMouseMove = (event: MouseEvent) => {
+ if (!interactionRef.current) {
+ return;
+ }
+
+ const interaction = interactionRef.current;
+ const deltaX = event.clientX - interaction.initialMouseX;
+ if (Math.abs(deltaX) >= DRAG_THRESHOLD_PX) {
+ interaction.moved = true;
+ }
+
+ if (interaction.mode === 'drag') {
+ const beatDelta = Math.round(deltaX / beatWidth);
+ const nextStartBeat = clampStartBeat(interaction.initialStartBeat + beatDelta);
+ setPreviewBeats({
+ [interaction.regionId]: {
+ startBeat: nextStartBeat,
+ length: interaction.initialLength,
+ },
+ });
+ return;
+ }
+
+ if (interaction.mode === 'resize') {
+ const desiredBeat = getBeatFromClientX(
+ event.clientX,
+ interaction.resizeEdge === 'end' ? 'end' : 'start'
+ );
+
+ if (interaction.resizeEdge === 'start') {
+ const nextStartBeat = Math.min(desiredBeat, interaction.initialStartBeat + interaction.initialLength - 1);
+ const endBeat = interaction.initialStartBeat + interaction.initialLength;
+ setPreviewBeats({
+ [interaction.regionId]: {
+ startBeat: nextStartBeat,
+ length: Math.max(1, endBeat - nextStartBeat),
+ },
+ });
+ return;
+ }
+
+ setPreviewBeats({
+ [interaction.regionId]: {
+ startBeat: interaction.initialStartBeat,
+ length: Math.max(1, desiredBeat - interaction.initialStartBeat),
+ },
+ });
+ }
+ };
+
+ const handleMouseUp = (event: MouseEvent) => {
+ if (!interactionRef.current) {
+ return;
+ }
+
+ const interaction = interactionRef.current;
+ interactionRef.current = null;
+
+ if (!interaction.moved) {
+ setPreviewBeats({});
+ onSelectRegion(interaction.regionId, { shiftKey: event.shiftKey });
+ return;
+ }
+
+ const preview = previewBeats[interaction.regionId];
+ setPreviewBeats({});
+
+ if (!preview) {
+ return;
+ }
+
+ if (interaction.mode === 'drag') {
+ onMoveRegion(interaction.regionId, preview.startBeat);
+ return;
+ }
+
+ if (interaction.mode === 'resize' && interaction.resizeEdge) {
+ const beat = interaction.resizeEdge === 'start'
+ ? preview.startBeat
+ : preview.startBeat + preview.length;
+ onResizeRegion(interaction.regionId, interaction.resizeEdge, beat);
+ }
+ };
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [beatWidth, onMoveRegion, onResizeRegion, onSelectRegion, previewBeats]);
+
+ const handleLaneMouseDown = (event: React.MouseEvent) => {
+ if (event.button !== 0) {
+ return;
+ }
+ if (!(event.target instanceof HTMLElement)) {
+ return;
+ }
+ if (event.target.closest('.global-chord-region')) {
+ return;
+ }
+ if (!isModifierKeyPressed(event)) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+ onCreateAtBeat(getBarSnappedBeatFromClientX(event.clientX));
+ };
+
+ const handleLaneDoubleClick = (event: React.MouseEvent) => {
+ if (!(event.target instanceof HTMLElement)) {
+ return;
+ }
+ if (event.target.closest('.global-chord-region')) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+ onCreateAtBeat(getBarSnappedBeatFromClientX(event.clientX));
+ };
+
+ return (
+
+ {chordRegions.map(region => {
+ const { startBeat, length } = getRenderedBeatState(region);
+ const isSelected = selectedRegionIds.includes(region.getId());
+ const left = startBeat * beatWidth;
+ const width = Math.max(beatWidth, length * beatWidth);
+
+ return (
+
{
+ event.preventDefault();
+ event.stopPropagation();
+ onSelectRegion(region.getId(), { shiftKey: false });
+ onOpenPopup(region.getId());
+ }}
+ onMouseMove={(event) => {
+ if (interactionRef.current?.regionId === region.getId()) {
+ return;
+ }
+
+ const resizeEdge = getResizeEdgeFromMouseEvent(event);
+ setHoverEdges((current) => (
+ current[region.getId()] === resizeEdge
+ ? current
+ : {
+ ...current,
+ [region.getId()]: resizeEdge,
+ }
+ ));
+ }}
+ onMouseLeave={() => {
+ setHoverEdges((current) => {
+ if (!current[region.getId()]) {
+ return current;
+ }
+
+ return {
+ ...current,
+ [region.getId()]: null,
+ };
+ });
+ }}
+ onMouseDown={(event) => {
+ if (event.button !== 0) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ const resizeEdge = getResizeEdgeFromMouseEvent(event);
+ interactionRef.current = {
+ mode: resizeEdge ? 'resize' : 'drag',
+ regionId: region.getId(),
+ initialMouseX: event.clientX,
+ initialStartBeat: region.getStartFromBeat(),
+ initialLength: region.getLength(),
+ resizeEdge,
+ moved: false,
+ };
+ }}
+ onClick={(event) => {
+ event.stopPropagation();
+ onSelectRegion(region.getId(), { shiftKey: event.shiftKey });
+ }}
+ >
+ {region.getSymbol()}
+ }
+ >
+ onChangeChord(region.getId(), symbol)}
+ onTabNavigate={(direction) => onTabNavigate(region.getId(), direction)}
+ />
+
+
+ );
+ })}
+