setEditingKeySignatureRegionId(null)}
+ onSelectRegion={selectGlobalRegion}
+ onCreateAtBar={createKeySignatureAtBar}
+ onResizeRegion={resizeKeySignatureRegion}
+ onChangeKeySignature={updateKeySignatureRegion}
+ onOpenPicker={beginEditingKeySignatureRegion}
+ />
) : (
({
isReservedProjectName: vi.fn(() => false),
RESERVED_PROJECT_NAME: 'Untitled Project',
}));
-vi.mock('../core/KGCore', () => ({ KGCore: { instance: vi.fn(() => ({ getCurrentProject: vi.fn(() => ({ getTracks: () => [] })) })) } }));
+vi.mock('../core/KGCore', () => ({ KGCore: { instance: vi.fn(() => ({ getCurrentProject: vi.fn(() => ({ getTracks: () => [] })), executeCommand: executeCommandMock })) } }));
vi.mock('../core/midi-input/KGMidiInput', () => ({ KGMidiInput: { instance: vi.fn(() => ({ getConnectedInputCount: () => 0 })) } }));
vi.mock('../core/region/KGMidiRegion', () => ({ KGMidiRegion: class {} }));
vi.mock('../core/track/KGAudioTrack', () => ({ KGAudioTrack: class {} }));
@@ -207,7 +211,11 @@ describe('Toolbar settings side-panel behavior', () => {
storeState.showKGOnePanel = true;
storeState.showEventListPanel = false;
storeState.keySignature = 'C major';
+ storeState.playheadPosition = 0;
+ storeState.globalTracks = createDefaultGlobalTracks();
storeState.setKeySignature.mockClear();
+ storeState.refreshProjectState.mockClear();
+ executeCommandMock.mockClear();
});
it('suppresses active styling for side-panel buttons while Settings is visible', () => {
@@ -273,4 +281,24 @@ describe('Toolbar settings side-panel behavior', () => {
expect(storeState.setKeySignature).toHaveBeenCalledWith('E minor');
expect(storeState.setStatus).toHaveBeenCalledWith('Key signature changed to E minor');
});
+
+ it('shows the effective region key at the playhead and updates that region instead of the project default', () => {
+ const signatureTrack = storeState.globalTracks.find(track => track.getType() === 'signature');
+ signatureTrack?.setRegions([
+ new KGKeySignatureRegion('sig-1', signatureTrack.getId(), signatureTrack.getTrackIndex(), 'G major', 2, 4, 4),
+ ]);
+ storeState.playheadPosition = 8;
+
+ render();
+
+ expect(screen.getByRole('button', { name: /choose key signature, current G major/i })).toHaveTextContent('G major');
+
+ fireEvent.click(screen.getByRole('button', { name: /choose key signature/i }));
+ fireEvent.click(screen.getByRole('button', { name: 'Select E minor' }));
+
+ expect(executeCommandMock).toHaveBeenCalledTimes(1);
+ expect(storeState.setKeySignature).not.toHaveBeenCalled();
+ expect(storeState.refreshProjectState).toHaveBeenCalled();
+ expect(storeState.setStatus).toHaveBeenCalledWith('Key signature changed to E minor');
+ });
});
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 00bd63c..99a28cd 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -15,7 +15,9 @@ import {
FaCog, FaMagnet, FaCut, FaCircle, FaCompress
} from 'react-icons/fa';
import { KGProject, type KeySignature } from '../core/KGProject';
+import { GlobalTrackType } from '../core/global-track';
import { KGMidiInput } from '../core/midi-input/KGMidiInput';
+import { KGKeySignatureRegion } from '../core/region/KGKeySignatureRegion';
import { KGMidiRegion } from '../core/region/KGMidiRegion';
import { KGAudioTrack } from '../core/track/KGAudioTrack';
import { plainToInstance } from 'class-transformer';
@@ -36,6 +38,7 @@ import PianoIcon from './common/icons/PianoIcon';
import MetronomeIcon from './common/icons/MetronomeIcon';
import { mergeSelectedMidiRegions, splitSelectedRegionAtPlayhead } from '../util/regionEditUtil';
import { showAlert, showChoice, showConfirm, showPrompt, showTimeSigPrompt } from '../util/dialogUtil';
+import { UpdateKeySignatureRegionCommand } from '../core/commands';
const Toolbar: React.FC = () => {
const {
@@ -47,6 +50,7 @@ const Toolbar: React.FC = () => {
maxBars, setMaxBars,
barWidthMultiplier, setBarWidthMultiplier,
isLooping, toggleLoop,
+ globalTracks,
canUndo, canRedo, undoDescription, redoDescription, undo, redo,
toggleChatBox, toggleSettings, toggleKGOnePanel, toggleEventListPanel, activateSidePanel, showKGOnePanel, showEventListPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
isRecording, startRecording, stopRecording,
@@ -66,6 +70,16 @@ const Toolbar: React.FC = () => {
// State for key signature dropdown
const [showKeySignatureDropdown, setShowKeySignatureDropdown] = React.useState(false);
+ const signatureTrack = globalTracks.find(track => track.getType() === GlobalTrackType.Signature) ?? null;
+ const signatureRegions = (signatureTrack?.getRegions() ?? [])
+ .filter((region): region is KGKeySignatureRegion => region instanceof KGKeySignatureRegion)
+ .sort((left, right) => left.getStartBar() - right.getStartBar());
+ const playheadBar = Math.floor(playheadPosition / timeSignature.numerator);
+ const activeKeySignatureRegion = signatureRegions.find(
+ region => playheadBar >= region.getStartBar() && playheadBar < region.getEndBar()
+ ) ?? null;
+ const displayedKeySignature = activeKeySignatureRegion?.getKeySignature() ?? keySignature;
+
// State for export dropdown
const [showExportDropdown, setShowExportDropdown] = React.useState(false);
@@ -691,10 +705,18 @@ const Toolbar: React.FC = () => {
const handleKeySignatureChange = (newKeySignature: string) => {
if (DEBUG_MODE.TOOLBAR) {
- console.log("Key signature changed from", keySignature, "to", newKeySignature);
+ console.log("Key signature changed from", displayedKeySignature, "to", newKeySignature);
}
- setKeySignature(newKeySignature as KeySignature);
+ if (activeKeySignatureRegion) {
+ KGCore.instance().executeCommand(new UpdateKeySignatureRegionCommand(
+ activeKeySignatureRegion.getId(),
+ newKeySignature as KeySignature
+ ));
+ refreshProjectState();
+ } else {
+ setKeySignature(newKeySignature as KeySignature);
+ }
setStatus(`Key signature changed to ${newKeySignature}`);
setShowKeySignatureDropdown(false);
};
@@ -1167,13 +1189,13 @@ const Toolbar: React.FC = () => {
onClick={() => setShowKeySignatureDropdown((current) => !current)}
aria-haspopup="dialog"
aria-expanded={showKeySignatureDropdown}
- aria-label={`Choose key signature, current ${keySignature}`}
+ aria-label={`Choose key signature, current ${displayedKeySignature}`}
>
- {keySignature}
+ {displayedKeySignature}
)}
>
-
+
diff --git a/src/components/common/FloatingPopup.tsx b/src/components/common/FloatingPopup.tsx
index c746d8b..0e98476 100644
--- a/src/components/common/FloatingPopup.tsx
+++ b/src/components/common/FloatingPopup.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { createPortal } from 'react-dom';
import './FloatingPopup.css';
type FloatingPopupPlacement = 'bottom' | 'top' | 'left' | 'right';
@@ -14,6 +15,7 @@ interface FloatingPopupProps {
contentClassName?: string;
panelClassName?: string;
arrowClassName?: string;
+ renderInPortal?: boolean;
}
const FloatingPopup: React.FC = ({
@@ -27,8 +29,63 @@ const FloatingPopup: React.FC = ({
contentClassName = '',
panelClassName = '',
arrowClassName = '',
+ renderInPortal = false,
}) => {
const rootRef = React.useRef(null);
+ const triggerRef = React.useRef(null);
+ const [portalStyle, setPortalStyle] = React.useState(undefined);
+
+ React.useLayoutEffect(() => {
+ if (!isOpen || !renderInPortal || !triggerRef.current) {
+ return;
+ }
+
+ const updatePortalStyle = () => {
+ if (!triggerRef.current) {
+ return;
+ }
+
+ const rect = triggerRef.current.getBoundingClientRect();
+ const centerX = rect.left + rect.width / 2;
+ const placementOffset = 14;
+
+ if (placement === 'bottom') {
+ setPortalStyle({
+ position: 'fixed',
+ top: `${rect.bottom + placementOffset}px`,
+ left: `${centerX}px`,
+ transform: 'translateX(-50%)',
+ });
+ return;
+ }
+
+ if (placement === 'top') {
+ setPortalStyle({
+ position: 'fixed',
+ bottom: `${window.innerHeight - rect.top + placementOffset}px`,
+ left: `${centerX}px`,
+ transform: 'translateX(-50%)',
+ });
+ return;
+ }
+
+ setPortalStyle({
+ position: 'fixed',
+ top: `${rect.bottom + placementOffset}px`,
+ left: `${centerX}px`,
+ transform: 'translateX(-50%)',
+ });
+ };
+
+ updatePortalStyle();
+ window.addEventListener('resize', updatePortalStyle);
+ window.addEventListener('scroll', updatePortalStyle, true);
+
+ return () => {
+ window.removeEventListener('resize', updatePortalStyle);
+ window.removeEventListener('scroll', updatePortalStyle, true);
+ };
+ }, [isOpen, placement, renderInPortal]);
React.useEffect(() => {
if (!isOpen) {
@@ -56,28 +113,31 @@ const FloatingPopup: React.FC = ({
};
}, [isOpen, onClose]);
+ const popupSurface = isOpen ? (
+
+ ) : null;
+
return (
-
+
{trigger}
- {isOpen && (
-
- )}
+ {renderInPortal && popupSurface ? createPortal(popupSurface, document.body) : popupSurface}
);
};
diff --git a/src/components/global-track/GlobalKeySignatureLane.test.tsx b/src/components/global-track/GlobalKeySignatureLane.test.tsx
new file mode 100644
index 0000000..d39353c
--- /dev/null
+++ b/src/components/global-track/GlobalKeySignatureLane.test.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import GlobalKeySignatureLane from './GlobalKeySignatureLane';
+import { KGKeySignatureRegion } from '../../core/region/KGKeySignatureRegion';
+
+describe('GlobalKeySignatureLane', () => {
+ const baseRegion = new KGKeySignatureRegion('sig-1', 'global-signature', 2, 'C major', 0, 4, 4);
+
+ beforeEach(() => {
+ document.documentElement.style.setProperty('--track-grid-bar-width', '40');
+ });
+
+ it('opens the key signature picker for an existing region', () => {
+ const onOpenPicker = vi.fn();
+
+ render(
+
+ );
+
+ fireEvent.doubleClick(screen.getByText('C major'));
+ expect(onOpenPicker).toHaveBeenCalledWith('sig-1');
+ });
+
+ it('creates a new region at a bar-aligned position on empty-lane double click', () => {
+ const onCreateAtBar = vi.fn();
+
+ const { container } = render(
+
+ );
+
+ const lane = container.querySelector('.global-key-signature-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 });
+ expect(onCreateAtBar).toHaveBeenCalledWith(3);
+ });
+});
diff --git a/src/components/global-track/GlobalKeySignatureLane.tsx b/src/components/global-track/GlobalKeySignatureLane.tsx
new file mode 100644
index 0000000..66a48a6
--- /dev/null
+++ b/src/components/global-track/GlobalKeySignatureLane.tsx
@@ -0,0 +1,364 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { KeySignature } from '../../core/KGProject';
+import { KGKeySignatureRegion } from '../../core/region/KGKeySignatureRegion';
+import type { RegionClickOptions } from '../interfaces';
+import { isModifierKeyPressed } from '../../util/osUtil';
+import { TOOLBAR_CONSTANTS } from '../../constants';
+import FloatingPopup from '../common/FloatingPopup';
+import KeySignaturePickerPopup from '../KeySignaturePickerPopup';
+
+interface GlobalKeySignatureLaneProps {
+ signatureRegions: KGKeySignatureRegion[];
+ maxBars: number;
+ barWidthMultiplier: number;
+ timeSignature: { numerator: number; denominator: number };
+ selectedRegionIds: string[];
+ pickerRegionId: string | null;
+ onClosePicker: () => void;
+ onSelectRegion: (regionId: string, options?: RegionClickOptions) => void;
+ onCreateAtBar: (startBar: number) => void;
+ onResizeRegion: (regionId: string, edge: 'start' | 'end', bar: number) => void;
+ onChangeKeySignature: (regionId: string, keySignature: KeySignature) => void;
+ onOpenPicker: (regionId: string) => void;
+}
+
+type ResizeEdge = 'start' | 'end' | null;
+
+const REGION_EDGE_HITBOX_PX = 8;
+const DRAG_THRESHOLD_PX = 4;
+
+const GlobalKeySignatureLane: React.FC
= ({
+ signatureRegions,
+ maxBars,
+ barWidthMultiplier,
+ timeSignature,
+ selectedRegionIds,
+ pickerRegionId,
+ onClosePicker,
+ onSelectRegion,
+ onCreateAtBar,
+ onResizeRegion,
+ onChangeKeySignature,
+ onOpenPicker,
+}) => {
+ const laneRef = useRef(null);
+ const [previewBars, setPreviewBars] = useState>({});
+ const [hoverEdges, setHoverEdges] = useState>({});
+ const [isModifierPressed, setIsModifierPressed] = useState(false);
+ const interactionRef = useRef<{
+ mode: 'resize' | null;
+ regionId: string;
+ resizeEdge: ResizeEdge;
+ initialMouseX: number;
+ moved: boolean;
+ } | null>(null);
+
+ const barWidth = useMemo(
+ () => TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * barWidthMultiplier,
+ [barWidthMultiplier]
+ );
+
+ const regionOrder = useMemo(
+ () => signatureRegions.map(region => region.getId()),
+ [signatureRegions]
+ );
+
+ const getRegionIndex = (regionId: string) => regionOrder.findIndex(candidateId => candidateId === regionId);
+ const canResizeEdge = (regionId: string, edge: 'start' | 'end') => {
+ const regionIndex = getRegionIndex(regionId);
+ if (regionIndex === -1) {
+ return false;
+ }
+
+ if (edge === 'start') {
+ return regionIndex > 0;
+ }
+
+ return regionIndex < signatureRegions.length - 1;
+ };
+
+ const getRenderedBarState = (region: KGKeySignatureRegion) => (
+ previewBars[region.getId()] ?? {
+ startBar: region.getStartBar(),
+ lengthBars: region.getLengthBars(),
+ }
+ );
+
+ 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;
+ };
+
+ const getBarFromClientX = (clientX: number) => {
+ if (!laneRef.current) {
+ return 0;
+ }
+
+ const rect = laneRef.current.getBoundingClientRect();
+ const relativeX = clientX - rect.left;
+ return Math.max(0, Math.min(maxBars, Math.round(relativeX / barWidth)));
+ };
+
+ const getCreateBarFromClientX = (clientX: number) => {
+ if (!laneRef.current) {
+ return 0;
+ }
+
+ const rect = laneRef.current.getBoundingClientRect();
+ const relativeX = clientX - rect.left;
+ return Math.max(0, Math.min(maxBars - 1, Math.floor(relativeX / barWidth)));
+ };
+
+ useEffect(() => {
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (isModifierKeyPressed(event)) {
+ setIsModifierPressed(true);
+ }
+
+ if (event.key === 'Escape') {
+ onClosePicker();
+ }
+ };
+
+ 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);
+ };
+ }, [onClosePicker]);
+
+ 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 !== 'resize' || !interaction.resizeEdge) {
+ return;
+ }
+
+ const targetRegion = signatureRegions.find(region => region.getId() === interaction.regionId);
+ if (!targetRegion) {
+ return;
+ }
+
+ const targetIndex = getRegionIndex(interaction.regionId);
+ const desiredBoundaryBar = getBarFromClientX(event.clientX);
+
+ if (interaction.resizeEdge === 'start' && targetIndex > 0) {
+ const previousRegion = signatureRegions[targetIndex - 1];
+ const targetEndBar = targetRegion.getEndBar();
+ const clampedBoundaryBar = Math.max(
+ previousRegion.getStartBar() + 1,
+ Math.min(desiredBoundaryBar, targetEndBar - 1)
+ );
+
+ setPreviewBars({
+ [previousRegion.getId()]: {
+ startBar: previousRegion.getStartBar(),
+ lengthBars: clampedBoundaryBar - previousRegion.getStartBar(),
+ },
+ [targetRegion.getId()]: {
+ startBar: clampedBoundaryBar,
+ lengthBars: targetEndBar - clampedBoundaryBar,
+ },
+ });
+ return;
+ }
+
+ if (interaction.resizeEdge === 'end' && targetIndex < signatureRegions.length - 1) {
+ const nextRegion = signatureRegions[targetIndex + 1];
+ const nextEndBar = nextRegion.getEndBar();
+ const clampedBoundaryBar = Math.max(
+ targetRegion.getStartBar() + 1,
+ Math.min(desiredBoundaryBar, nextEndBar - 1)
+ );
+
+ setPreviewBars({
+ [targetRegion.getId()]: {
+ startBar: targetRegion.getStartBar(),
+ lengthBars: clampedBoundaryBar - targetRegion.getStartBar(),
+ },
+ [nextRegion.getId()]: {
+ startBar: clampedBoundaryBar,
+ lengthBars: nextEndBar - clampedBoundaryBar,
+ },
+ });
+ }
+ };
+
+ const handleMouseUp = (event: MouseEvent) => {
+ if (!interactionRef.current) {
+ return;
+ }
+
+ const interaction = interactionRef.current;
+ interactionRef.current = null;
+ const resizeEdge = interaction.resizeEdge;
+ const shouldResize = interaction.moved && resizeEdge !== null;
+ setPreviewBars({});
+
+ if (!shouldResize) {
+ onSelectRegion(interaction.regionId, { shiftKey: event.shiftKey });
+ return;
+ }
+
+ onResizeRegion(interaction.regionId, resizeEdge, getBarFromClientX(event.clientX));
+ };
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [getBarFromClientX, onResizeRegion, onSelectRegion, signatureRegions]);
+
+ const handleLaneMouseDown = (event: React.MouseEvent) => {
+ if (event.button !== 0) {
+ return;
+ }
+
+ if (!(event.target instanceof HTMLElement) || event.target.closest('.global-key-signature-region')) {
+ return;
+ }
+
+ if (!isModifierKeyPressed(event)) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+ onCreateAtBar(getCreateBarFromClientX(event.clientX));
+ };
+
+ const handleLaneDoubleClick = (event: React.MouseEvent) => {
+ if (!(event.target instanceof HTMLElement) || event.target.closest('.global-key-signature-region')) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+ onCreateAtBar(getCreateBarFromClientX(event.clientX));
+ };
+
+ return (
+ <>
+
+ {signatureRegions.map(region => {
+ const rendered = getRenderedBarState(region);
+ const isSelected = selectedRegionIds.includes(region.getId());
+ const left = rendered.startBar * barWidth;
+ const clampedEndBar = Math.max(rendered.startBar, Math.min(rendered.startBar + rendered.lengthBars, maxBars));
+ const widthBars = Math.max(0, clampedEndBar - rendered.startBar);
+ const width = Math.max(barWidth, widthBars * barWidth);
+
+ if (rendered.startBar >= maxBars || widthBars <= 0) {
+ return null;
+ }
+
+ return (
+
setHoverEdges(prev => ({ ...prev, [region.getId()]: null }))}
+ onMouseMove={(event) => {
+ const nextEdge = getResizeEdgeFromMouseEvent(event);
+ const normalizedEdge = nextEdge && canResizeEdge(region.getId(), nextEdge) ? nextEdge : null;
+ setHoverEdges(prev => ({ ...prev, [region.getId()]: normalizedEdge }));
+ }}
+ onMouseLeave={() => setHoverEdges(prev => ({ ...prev, [region.getId()]: null }))}
+ onMouseDown={(event) => {
+ if (event.button !== 0) {
+ return;
+ }
+
+ const nextEdge = getResizeEdgeFromMouseEvent(event);
+ const normalizedEdge = nextEdge && canResizeEdge(region.getId(), nextEdge) ? nextEdge : null;
+ if (!normalizedEdge) {
+ return;
+ }
+
+ event.preventDefault();
+ event.stopPropagation();
+ interactionRef.current = {
+ mode: 'resize',
+ regionId: region.getId(),
+ resizeEdge: normalizedEdge,
+ initialMouseX: event.clientX,
+ moved: false,
+ };
+ }}
+ onClick={(event) => {
+ event.stopPropagation();
+ onSelectRegion(region.getId(), { shiftKey: event.shiftKey });
+ }}
+ onDoubleClick={(event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ onOpenPicker(region.getId());
+ }}
+ >
+ {region.getKeySignature()}
+
+ )}
+ >
+ onChangeKeySignature(region.getId(), keySignature)}
+ />
+
+
+ );
+ })}
+