solid-pianoroll 0.0.23 → 0.0.24

package/dist/source/PianoRoll.jsx

@@ -25,6 +25,7 @@ const PianoRoll = (allProps) => {
               <Show when={context.showTrackList}>
                 <div style={{
             height: "30px",
+            "border-right": "1px black solid",
         }}>
                   <button title={context.mode === "keys" ? "Tracks Mode" : "Keys Mode"} onClick={() => context.onModeChange(context.mode === "keys" ? "tracks" : "keys")} style={{
             "font-size": "16px",
@@ -48,22 +49,25 @@ const PianoRoll = (allProps) => {
               </div>
             </div>
 
-            <div style={{
+            <PianoRollNotesScroller>
+              {allProps.children}
+              <div style={{
             width: "100%",
             display: "flex",
             height: "100%",
             "flex-direction": "column",
             overflow: "hidden",
         }}>
-              <div style={{ height: "30px" }}>
-                <PianoRollScale />
+                <div style={{ height: "30px" }}>
+                  <PianoRollScale />
+                </div>
+
+                <div style={{ flex: 1, position: "relative", overflow: "hidden" }}>
+                  <PianoRollGrid />
+                  <PianoRollNotes />
+                </div>
               </div>
-              <PianoRollNotesScroller>
-                {allProps.children}
-                <PianoRollGrid />
-                <PianoRollNotes />
-              </PianoRollNotesScroller>
-            </div>
+            </PianoRollNotesScroller>
 
             <ZoomSliderControl orientation="vertical" disabled={context.mode !== "keys"}/>
           </div>

package/dist/source/PianoRollNotes.jsx

@@ -14,9 +14,6 @@ const PianoRollNotes = (props) => {
     const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
     const [diffPosition, setDiffPosition] = createSignal(0);
     const [getInitialNote, setInitialNote] = createSignal();
-    const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
-        ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks()
-        : value;
     const calculateNoteDragValues = (event) => {
         const targetTrackIndex = context.mode === "tracks"
             ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
@@ -40,7 +37,7 @@ const PianoRollNotes = (props) => {
         if (!note)
             return;
         const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
-        const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+        const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
         const updatedNote = {
             ...note,
             midi,
@@ -49,13 +46,13 @@ const PianoRollNotes = (props) => {
                 ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
                 durationTicks: ticks < note.ticks + note.durationTicks
                     ? note.ticks + note.durationTicks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+                    : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
             }),
             ...(noteDragMode() === "trimEnd" && {
                 ticks: ticks < note.ticks ? ticks : note.ticks,
                 durationTicks: ticks < note.ticks
                     ? note.ticks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+                    : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
             }),
         };
         const previousTrackIndex = currentNoteTrackIndex();
@@ -90,7 +87,7 @@ const PianoRollNotes = (props) => {
             mouseDownEvent.preventDefault();
             mouseDownEvent.stopPropagation();
             const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
-            const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
+            const ticks = context.snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey, context);
             const durationTicks = gridDivisionTicks();
             const newNote = {
                 midi,
@@ -145,7 +142,8 @@ const PianoRollNotes = (props) => {
                             setInitialNote(note);
                             startDragging();
                         }} style={{
-                            "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
+                            "background-color": `${track.color}`,
+                            opacity: (note.velocity / 128 + 2) / 3,
                             top: `${verticalVirtualDimensions().offset}px`,
                             height: `${verticalVirtualDimensions().size}px`,
                             left: `${horizontalDimensions().offset}px`,

package/dist/source/PianoRollScale.jsx

@@ -2,10 +2,24 @@ import { createMemo, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollScale.module.css";
 import usePianoRollGrid from "./usePianoRollGrid";
+import { usePianoRollContext } from "./PianoRollContext";
 const PianoRollScale = () => {
     const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const grid = usePianoRollGrid();
-    return (<div class={styles.PianoRollScale}>
+    const context = usePianoRollContext();
+    const updatePlayheadPosition = (event) => {
+        const position = horizontalViewPort().calculatePosition(event.clientX);
+        context.onPlayHeadPositionChange(position, event);
+    };
+    return (<div class={styles.PianoRollScale} onMouseDown={(event) => {
+            updatePlayheadPosition(event);
+            const handleMouseUp = () => {
+                window.removeEventListener("mousemove", updatePlayheadPosition);
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+            window.addEventListener("mousemove", updatePlayheadPosition);
+            window.addEventListener("mouseup", handleMouseUp);
+        }}>
       <Index each={grid()}>
         {(entry) => {
             return (<Show when={horizontalViewPort().isVisible(entry().virtualDimensions)}>

package/dist/source/usePianoRollState.js

@@ -9,6 +9,7 @@ const defaultState = {
     verticalPosition: 44,
     verticalTrackZoom: 0.5,
     verticalTrackPosition: 0,
+    playHeadPosition: 0,
     gridDivision: 4,
     snapToGrid: true,
     duration: 0,
@@ -28,6 +29,7 @@ export const pianoRollStatePropNames = [
     "onNoteDown",
     "onNoteUp",
     "isKeyDown",
+    "snapValueToGridIfEnabled",
 ];
 const createPianoRollstate = (initialState) => {
     const [state, setState] = createStore({
@@ -35,11 +37,21 @@ const createPianoRollstate = (initialState) => {
         ...initialState,
     });
     const handlers = Object.fromEntries(Object.entries(state).map((entry) => {
+        const handlerName = propNameToHandlerName(entry[0]);
         return [
-            propNameToHandlerName(entry[0]),
-            (value) => setState(entry[0], value),
+            handlerName,
+            (value, originalEvent) => {
+                const handler = initialState?.[handlerName];
+                setState(entry[0], value);
+                if (handler) {
+                    handler(value, originalEvent);
+                }
+            },
         ];
     }));
+    const onPlayheadPositionChange = (playheadPosition, originalEvent) => {
+        handlers.onPlayHeadPositionChange(snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey));
+    };
     const updateNotes = async (trackIndex, getNotes) => {
         const track = state.tracks[trackIndex];
         if (!track)
@@ -93,6 +105,12 @@ const createPianoRollstate = (initialState) => {
         updateKeyPressedState(trackIndex, keyNumber, false);
     };
     const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
+    const snapValueToGridIfEnabled = (value, altKey) => {
+        const gridDivisionTicks = (state.ppq * 4) / state.gridDivision;
+        return state.snapToGrid && !altKey
+            ? Math.round(value / gridDivisionTicks) * gridDivisionTicks
+            : value;
+    };
     return mergeProps(state, {
         ...handlers,
         onNoteChange,
@@ -101,6 +119,8 @@ const createPianoRollstate = (initialState) => {
         onNoteDown,
         onNoteUp,
         isKeyDown,
+        snapValueToGridIfEnabled,
+        onPlayheadPositionChange,
     });
 };
 export default createPianoRollstate;

package/dist/source/viewport/PlayHead.jsx

@@ -28,9 +28,9 @@ const PlayHead = (allProps) => {
         }} onMouseDown={(event) => {
             event.preventDefault();
             event.stopPropagation();
-            const handleMouseMove = ({ clientX }) => {
-                const newPosition = viewPort.calculatePosition(clientX);
-                props.onPositionChange?.(newPosition);
+            const handleMouseMove = (event) => {
+                const newPosition = viewPort.calculatePosition(event.clientX);
+                props.onPositionChange?.(newPosition, event);
             };
             const handleMouseUp = () => {
                 window.removeEventListener("mousemove", handleMouseMove);

package/dist/types/PianoRoll.d.ts

@@ -1,6 +1,5 @@
 import { JSX, ParentProps } from "solid-js";
 import createPianoRollstate from "./usePianoRollState";
-export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
     showAllTracks?: boolean;
     showTrackList?: boolean;

package/dist/types/PianoRollContext.d.ts

@@ -1,90 +1,11 @@
 import { PianoRollProps } from "./PianoRoll";
-export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<{
+import createPianoRollstate from "./usePianoRollState";
+export type PianoRollContext = {
     showAllTracks?: boolean;
     showTrackList?: boolean;
-} & {
-    ppq: number;
-    mode: "keys" | "tracks";
-    position: number;
-    zoom: number;
-    verticalZoom: number;
-    verticalPosition: number;
-    verticalTrackZoom: number;
-    verticalTrackPosition: number;
-    gridDivision: import("./PianoRoll").GridDivision;
-    snapToGrid: boolean;
-    duration: number;
-    tracks: import("./types").Track[];
-    selectedTrackIndex: number;
-    pressedKeys: Record<number, Record<number, boolean>>;
-    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
-    onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
-    onRemoveNote: (trackIndex: number, noteIndex: number) => void;
-    onNoteDown: (trackIndex: number, keyNumber: number) => void;
-    onNoteUp: (trackIndex: number, keyNumber: number) => void;
-    isKeyDown: (trackIndex: number, keyNumber: number) => boolean;
-    onPpqChange: (value: number) => void;
-    onModeChange: (value: "keys" | "tracks") => void;
-    onPositionChange: (value: number) => void;
-    onZoomChange: (value: number) => void;
-    onVerticalZoomChange: (value: number) => void;
-    onVerticalPositionChange: (value: number) => void;
-    onVerticalTrackZoomChange: (value: number) => void;
-    onVerticalTrackPositionChange: (value: number) => void;
-    onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
-    onSnapToGridChange: (value: boolean) => void;
-    onDurationChange: (value: number) => void;
-    onTracksChange: (value: import("./types").Track[]) => void;
-    onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
-    onNotesScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
-    onTracksScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
-}>;
-export declare const usePianoRollContext: () => {
-    showAllTracks?: boolean;
-    showTrackList?: boolean;
-} & {
-    ppq: number;
-    mode: "keys" | "tracks";
-    position: number;
-    zoom: number;
-    verticalZoom: number;
-    verticalPosition: number;
-    verticalTrackZoom: number;
-    verticalTrackPosition: number;
-    gridDivision: import("./PianoRoll").GridDivision;
-    snapToGrid: boolean;
-    duration: number;
-    tracks: import("./types").Track[];
-    selectedTrackIndex: number;
-    pressedKeys: Record<number, Record<number, boolean>>;
-    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
-    onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
-    onRemoveNote: (trackIndex: number, noteIndex: number) => void;
-    onNoteDown: (trackIndex: number, keyNumber: number) => void;
-    onNoteUp: (trackIndex: number, keyNumber: number) => void;
-    isKeyDown: (trackIndex: number, keyNumber: number) => boolean;
-    onPpqChange: (value: number) => void;
-    onModeChange: (value: "keys" | "tracks") => void;
-    onPositionChange: (value: number) => void;
-    onZoomChange: (value: number) => void;
-    onVerticalZoomChange: (value: number) => void;
-    onVerticalPositionChange: (value: number) => void;
-    onVerticalTrackZoomChange: (value: number) => void;
-    onVerticalTrackPositionChange: (value: number) => void;
-    onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
-    onSnapToGridChange: (value: boolean) => void;
-    onDurationChange: (value: number) => void;
-    onTracksChange: (value: import("./types").Track[]) => void;
-    onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
-    onNotesScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
-    onTracksScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
-};
+} & ReturnType<typeof createPianoRollstate>;
+export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<PianoRollContext>;
+export declare const usePianoRollContext: () => PianoRollContext;
 export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
     mode: "keys" | "tracks";
@@ -94,7 +15,8 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
-    gridDivision: import("./PianoRoll").GridDivision;
+    playHeadPosition: number;
+    gridDivision: import("./types").GridDivision;
     snapToGrid: boolean;
     duration: number;
     tracks: import("./types").Track[];
@@ -102,7 +24,7 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     pressedKeys: Record<number, Record<number, boolean>>;
     notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
     tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
     mode: "keys" | "tracks";
     position: number;
@@ -111,7 +33,8 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
-    gridDivision: import("./PianoRoll").GridDivision;
+    playHeadPosition: number;
+    gridDivision: import("./types").GridDivision;
     snapToGrid: boolean;
     duration: number;
     tracks: import("./types").Track[];
@@ -119,4 +42,4 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     pressedKeys: Record<number, Record<number, boolean>>;
     notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
     tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">];
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange" | "showAllTracks" | "showTrackList">];

package/dist/types/index.d.ts

@@ -2,4 +2,5 @@ import PianoRoll from "./PianoRoll";
 import PlayHead from "./viewport/PlayHead";
 import useNotes from "./useNotes";
 import createPianoRollstate from "./usePianoRollState";
+export type { Note, Track, GridDivision } from "./types";
 export { PianoRoll, createPianoRollstate, useNotes, PlayHead };

package/dist/types/types.d.ts

@@ -1,6 +1,8 @@
 import { Midi } from "@tonejs/midi";
+export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type Note = Pick<ReturnType<Midi["tracks"][number]["notes"][number]["toJSON"]>, "durationTicks" | "midi" | "ticks" | "velocity">;
 export type Track = {
     name: string;
     notes: Note[];
+    color: string;
 };

package/dist/types/usePianoRollState.d.ts

@@ -1,4 +1,4 @@
-import { GridDivision } from "./PianoRoll";
+import { GridDivision } from "./types";
 import { Note, Track } from "./types";
 import { ClientRect } from "./useBoundingClientRect";
 type PianoRollState = {
@@ -10,6 +10,7 @@ type PianoRollState = {
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
+    playHeadPosition: number;
     gridDivision: GridDivision;
     snapToGrid: boolean;
     duration: number;
@@ -19,8 +20,13 @@ type PianoRollState = {
     notesScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
     tracksScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
 };
-export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown")[];
-declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) => {
+declare const defaultState: PianoRollState;
+type PropNameToHandlerName<PropName extends string> = `on${Capitalize<PropName>}Change`;
+type StateChangeHandlerObject = {
+    [PropName in keyof typeof defaultState as PropNameToHandlerName<PropName>]: (value: typeof defaultState[PropName], originalEvent?: MouseEvent | KeyboardEvent) => void;
+};
+export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange")[];
+declare const createPianoRollstate: (initialState?: Partial<PianoRollState & StateChangeHandlerObject>) => {
     ppq: number;
     mode: "keys" | "tracks";
     position: number;
@@ -29,6 +35,7 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
+    playHeadPosition: number;
     gridDivision: GridDivision;
     snapToGrid: boolean;
     duration: number;
@@ -43,21 +50,24 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     onNoteDown: (trackIndex: number, keyNumber: number) => void;
     onNoteUp: (trackIndex: number, keyNumber: number) => void;
     isKeyDown: (trackIndex: number, keyNumber: number) => boolean;
-    onPpqChange: (value: number) => void;
-    onModeChange: (value: "keys" | "tracks") => void;
-    onPositionChange: (value: number) => void;
-    onZoomChange: (value: number) => void;
-    onVerticalZoomChange: (value: number) => void;
-    onVerticalPositionChange: (value: number) => void;
-    onVerticalTrackZoomChange: (value: number) => void;
-    onVerticalTrackPositionChange: (value: number) => void;
-    onGridDivisionChange: (value: GridDivision) => void;
-    onSnapToGridChange: (value: boolean) => void;
-    onDurationChange: (value: number) => void;
-    onTracksChange: (value: Track[]) => void;
-    onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
-    onNotesScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => void;
-    onTracksScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => void;
+    snapValueToGridIfEnabled: (value: number, altKey: boolean) => number;
+    onPlayheadPositionChange: (playheadPosition: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onPpqChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onModeChange: (value: "keys" | "tracks", originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onPositionChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onZoomChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onVerticalZoomChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onVerticalPositionChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onVerticalTrackZoomChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onVerticalTrackPositionChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onPlayHeadPositionChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onGridDivisionChange: (value: GridDivision, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onSnapToGridChange: (value: boolean, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onDurationChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onTracksChange: (value: Track[], originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onSelectedTrackIndexChange: (value: number, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onPressedKeysChange: (value: Record<number, Record<number, boolean>>, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onNotesScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">, originalEvent?: MouseEvent | KeyboardEvent) => void;
+    onTracksScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">, originalEvent?: MouseEvent | KeyboardEvent) => void;
 };
 export default createPianoRollstate;

package/dist/types/viewport/PlayHead.d.ts

@@ -1,7 +1,7 @@
 import { JSX } from "solid-js";
 declare const PlayHead: (allProps: {
     position: number;
-    onPositionChange?: (playHeadPosition: number) => void;
+    onPositionChange?: (playHeadPosition: number, event: MouseEvent) => void;
     sync?: boolean;
     dimensionName?: string;
 } & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.23",
+  "version": "0.0.24",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",