solid-pianoroll 0.0.21 → 0.0.22

package/dist/source/PianoRollNotes.jsx

@@ -1,4 +1,4 @@
-import { batch, createMemo, createSignal, For, Show } from "solid-js";
+import { createMemo, createSignal, For, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollNotes.module.scss";
@@ -8,73 +8,98 @@ const PianoRollNotes = (props) => {
     const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
     const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
+    const [isDragging, setIsDragging] = createSignal(false);
+    const [noteDragMode, setNoteDragMode] = createSignal();
+    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+    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 insertOrUpdateNote = (event) => {
-        const position = horizontalViewPort().calculatePosition(event.clientX);
-        const existingNote = currentNote();
-        const midi = context.mode === "keys"
-            ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
-            : existingNote?.midi ?? 60;
+    const calculateNoteDragValues = (event) => {
         const targetTrackIndex = context.mode === "tracks"
             ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
-            : context.selectedTrackIndex ?? 0;
-        const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
-        const velocity = 127;
-        const ticks = existingNote?.ticks ?? eventPositionTicks;
-        const durationTicks = existingNote?.ticks
-            ? eventPositionTicks - existingNote?.ticks
-            : gridDivisionTicks();
-        const note = { midi, ticks, durationTicks, velocity };
-        if (existingNote) {
-            context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
-            return currentNoteIndex();
+            : currentNoteTrackIndex() > -1
+                ? currentNoteTrackIndex()
+                : context.selectedTrackIndex;
+        const midi = context.mode === "keys"
+            ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY))
+            : getInitialNote()?.midi ?? 60;
+        const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
+        return {
+            targetTrackIndex,
+            midi,
+            horiontalPosition,
+        };
+    };
+    const handleMouseMove = (mouseMoveEvent) => {
+        const note = getInitialNote();
+        if (!note)
+            return;
+        const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
+        const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+        const updatedNote = {
+            ...note,
+            midi,
+            ...(noteDragMode() === "move" && { ticks }),
+            ...(noteDragMode() === "trimStart" && {
+                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),
+            }),
+            ...(noteDragMode() === "trimEnd" && {
+                ticks: ticks < note.ticks ? ticks : note.ticks,
+                durationTicks: ticks < note.ticks
+                    ? note.ticks - ticks
+                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+            }),
+        };
+        const previousTrackIndex = currentNoteTrackIndex();
+        const previousNoteIndex = currentNoteIndex();
+        if (targetTrackIndex === previousTrackIndex) {
+            context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
         }
         else {
-            return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
+            if (context.onInsertNote) {
+                context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+                const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+                setCurrentNoteTrackIndex(targetTrackIndex);
+                setCurrentNoteIndex(newNoteIndex);
+            }
         }
     };
-    const [isDragging, setIsDragging] = createSignal(false);
-    const [noteDragMode, setNoteDragMode] = createSignal();
-    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
-    const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
-    const [isMouseDown, setIsMouseDown] = createSignal(false);
-    const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
+    const stopDragging = () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", stopDragging);
+        setIsDragging(false);
+    };
+    const startDragging = () => {
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", stopDragging);
+    };
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
-    return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(event) => {
-            batch(() => {
-                setIsMouseDown(true);
-                const index = insertOrUpdateNote(event);
-                setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
-                setCurrentNoteIndex(index);
-            });
-        }} onMouseMove={(event) => {
-            if (isDragging())
-                return;
-            if (!isMouseDown()) {
-                setNoteDragMode(undefined);
-                return;
-            }
-            const index = insertOrUpdateNote(event);
-            setCurrentNoteIndex(index);
-        }} onMouseUp={(event) => {
-            setIsMouseDown(false);
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
-        }} onDblClick={(event) => {
-            insertOrUpdateNote(event);
-        }} onClick={(event) => {
-            if (currentNote()) {
-                setCurrentNoteIndex(-1);
-                return;
-            }
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
+    return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(mouseDownEvent) => {
+            const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
+            const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
+            const durationTicks = gridDivisionTicks();
+            const newNote = {
+                midi,
+                ticks,
+                durationTicks,
+                velocity: 100,
+            };
+            const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
+            setIsDragging(true);
+            setCurrentNoteTrackIndex(targetTrackIndex);
+            setCurrentNoteIndex(newNoteIndex);
+            setInitialNote(newNote);
+            setDiffPosition(0);
+            setNoteDragMode("trimEnd");
+            startDragging();
         }}>
       <For each={context.tracks}>
         {(track, trackIndex) => {
@@ -104,63 +129,15 @@ const PianoRollNotes = (props) => {
                             context.onRemoveNote?.(trackIndex(), noteIndex());
                         }} onMouseDown={(event) => {
                             event.stopPropagation();
+                            const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
+                            setDiffPosition(noteDragMode() === "trimEnd"
+                                ? -(note.ticks + note.durationTicks - initialPosition)
+                                : initialPosition - note.ticks);
                             setIsDragging(true);
                             setCurrentNoteIndex(noteIndex());
                             setCurrentNoteTrackIndex(trackIndex());
-                            const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
-                            const diffPosition = initialPosition - note.ticks;
-                            const handleMouseMove = (mouseMoveEvent) => {
-                                const note = currentNote();
-                                if (!note)
-                                    return;
-                                const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
-                                    diffPosition, 0), mouseMoveEvent.altKey);
-                                const updatedNote = {
-                                    ...note,
-                                    ...(noteDragMode() === "move" &&
-                                        context.mode === "keys" && {
-                                        midi: Math.round(127 -
-                                            verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
-                                    }),
-                                    ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
-                                        ticks,
-                                    }),
-                                    ...(noteDragMode() === "trimStart" && {
-                                        durationTicks: note.durationTicks + note.ticks - ticks,
-                                    }),
-                                    ...(noteDragMode() === "trimEnd" && {
-                                        durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
-                                            note.ticks, mouseMoveEvent.altKey),
-                                    }),
-                                };
-                                const previousTrackIndex = currentNoteTrackIndex();
-                                const previousNoteIndex = currentNoteIndex();
-                                const targetTrackIndex = context.mode === "tracks"
-                                    ? clamp(Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)), 0, context.tracks.length - 1)
-                                    : previousTrackIndex;
-                                if (targetTrackIndex === previousTrackIndex) {
-                                    context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
-                                }
-                                else {
-                                    batch(() => {
-                                        if (context.onInsertNote) {
-                                            context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
-                                            const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
-                                            setCurrentNoteTrackIndex(targetTrackIndex);
-                                            setCurrentNoteIndex(newNoteIndex);
-                                        }
-                                    });
-                                }
-                            };
-                            const handleMouseUp = () => {
-                                setIsDragging(false);
-                                setCurrentNoteIndex(-1);
-                                setCurrentNoteTrackIndex(-1);
-                                window.removeEventListener("mousemove", handleMouseMove);
-                                window.removeEventListener("mouseup", handleMouseUp);
-                            };
-                            window.addEventListener("mousemove", handleMouseMove);
-                            window.addEventListener("mouseup", handleMouseUp);
+                            setInitialNote(note);
+                            startDragging();
                         }} style={{
                             "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
                             top: `${verticalVirtualDimensions().offset}px`,

package/dist/source/PianoRollTrackList.jsx

@@ -1,4 +1,4 @@
-import styles from "./PianoRollTrackList.module.css";
+import styles from "./PianoRollTrackList.module.scss";
 import { createMemo, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import { usePianoRollContext } from "./PianoRollContext";
@@ -12,11 +12,10 @@ const PianoRollTrackList = () => {
             return (<Show when={virtualDimensions().size > 0}>
               <div classList={{
                     [styles["Track"]]: true,
+                    [styles["selected"]]: index === context.selectedTrackIndex,
                 }} title={track().name} style={{
                     top: `${virtualDimensions().offset}px`,
                     height: `${virtualDimensions().size}px`,
-                    background: index === context.selectedTrackIndex ? "gray" : "lightgrey",
-                    cursor: "pointer",
                 }} onClick={() => context.onSelectedTrackIndexChange?.(index)}>
                 {index} {track().name || "[unnamed track]"}
               </div>

package/dist/source/index.jsx

@@ -1,5 +1,5 @@
 import PianoRoll from "./PianoRoll";
-import PlayHead from "./PlayHead";
+import PlayHead from "./viewport/PlayHead";
 import useNotes from "./useNotes";
 import createPianoRollstate from "./usePianoRollState";
 export { PianoRoll, createPianoRollstate, useNotes, PlayHead };

package/dist/source/usePianoRollState.js

@@ -14,7 +14,7 @@ const defaultState = {
     duration: 0,
     tracks: [],
     selectedTrackIndex: 0,
-    pressedKeys: [],
+    pressedKeys: {},
 };
 const propNameToHandlerName = (name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
 export const pianoRollStatePropNames = [
@@ -25,6 +25,7 @@ export const pianoRollStatePropNames = [
     "onRemoveNote",
     "onNoteDown",
     "onNoteUp",
+    "isKeyDown",
 ];
 const createPianoRollstate = (initialState) => {
     const [state, setState] = createStore({
@@ -74,12 +75,22 @@ const createPianoRollstate = (initialState) => {
             ...notes.slice(noteIndex + 1),
         ]);
     };
-    const onNoteDown = (keyNumber) => {
-        handlers.onPressedKeysChange?.([...state.pressedKeys, keyNumber]);
+    const updateKeyPressedState = (trackIndex, keyNumber, value) => {
+        handlers.onPressedKeysChange?.({
+            ...state.pressedKeys,
+            [trackIndex]: {
+                ...state.pressedKeys[trackIndex],
+                [keyNumber]: value,
+            },
+        });
     };
-    const onNoteUp = (keyNumber) => {
-        handlers.onPressedKeysChange?.([...state.pressedKeys].filter((number) => number !== keyNumber));
+    const onNoteDown = (trackIndex, keyNumber) => {
+        updateKeyPressedState(trackIndex, keyNumber, true);
     };
+    const onNoteUp = (trackIndex, keyNumber) => {
+        updateKeyPressedState(trackIndex, keyNumber, false);
+    };
+    const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
     return mergeProps(state, {
         ...handlers,
         onNoteChange,
@@ -87,6 +98,7 @@ const createPianoRollstate = (initialState) => {
         onRemoveNote,
         onNoteDown,
         onNoteUp,
+        isKeyDown,
     });
 };
 export default createPianoRollstate;

package/dist/source/{PlayHead.jsx → viewport/PlayHead.jsx}

@@ -1,23 +1,22 @@
-import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
-import { clamp } from "./viewport/createViewPortDimension";
-import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import { createEffect, createMemo, splitProps } from "solid-js";
+import { clamp } from "./createViewPortDimension";
+import { useViewPortDimension } from "./ScrollZoomViewPort";
 const PlayHead = (allProps) => {
-    const propsWithDefauls = mergeProps({ playHeadPosition: 0, sync: false }, allProps);
-    const [props, divProps] = splitProps(propsWithDefauls, [
-        "playHeadPosition",
+    const [props, divProps] = splitProps(allProps, [
+        "position",
         "sync",
-        "onPlayHeadPositionChange",
         "onPositionChange",
+        "dimensionName",
     ]);
-    const viewPort = useViewPortDimension("horizontal");
+    const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
     createEffect(() => {
         if (!props.sync)
             return;
         const maxPosition = viewPort.range;
-        const newPosition = clamp(props.playHeadPosition - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
-        props.onPositionChange?.(newPosition);
+        const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
+        viewPort.onPositionChange?.(newPosition);
     });
-    const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.playHeadPosition));
+    const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
     return (<div class="PlayHead" {...divProps} style={{
             position: "absolute",
             height: "100%",
@@ -31,7 +30,7 @@ const PlayHead = (allProps) => {
             event.stopPropagation();
             const handleMouseMove = ({ clientX }) => {
                 const newPosition = viewPort.calculatePosition(clientX);
-                props.onPlayHeadPositionChange?.(newPosition);
+                props.onPositionChange?.(newPosition);
             };
             const handleMouseUp = () => {
                 window.removeEventListener("mousemove", handleMouseMove);

package/dist/types/PianoRollContext.d.ts

@@ -16,12 +16,13 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
     duration: number;
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
     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: (keyNumber: number) => void;
-    onNoteUp: (keyNumber: 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;
@@ -35,7 +36,7 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
     onDurationChange: (value: number) => void;
     onTracksChange: (value: import("./types").Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: number[]) => void;
+    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
 }>;
 export declare const usePianoRollContext: () => {
     showAllTracks?: boolean;
@@ -54,12 +55,13 @@ export declare const usePianoRollContext: () => {
     duration: number;
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
     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: (keyNumber: number) => void;
-    onNoteUp: (keyNumber: 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;
@@ -73,7 +75,7 @@ export declare const usePianoRollContext: () => {
     onDurationChange: (value: number) => void;
     onTracksChange: (value: import("./types").Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: number[]) => void;
+    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
 };
 export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
@@ -89,8 +91,8 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     duration: number;
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
+    pressedKeys: Record<number, Record<number, boolean>>;
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
     mode: "keys" | "tracks";
     position: number;
@@ -104,5 +106,5 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     duration: number;
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "showAllTracks" | "showTrackList">];
+    pressedKeys: Record<number, Record<number, boolean>>;
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">];

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import PianoRoll from "./PianoRoll";
-import PlayHead from "./PlayHead";
+import PlayHead from "./viewport/PlayHead";
 import useNotes from "./useNotes";
 import createPianoRollstate from "./usePianoRollState";
 export { PianoRoll, createPianoRollstate, useNotes, PlayHead };

package/dist/types/usePianoRollState.d.ts

@@ -14,9 +14,9 @@ type PianoRollState = {
     duration: number;
     tracks: Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
 };
-export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp")[];
+export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown")[];
 declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) => {
     ppq: number;
     mode: "keys" | "tracks";
@@ -31,12 +31,13 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     duration: number;
     tracks: Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
     onNoteChange: (trackIndex: number, noteIndex: number, note: Note) => void;
     onInsertNote: (trackIndex: number, note: Note) => number;
     onRemoveNote: (trackIndex: number, noteIndex: number) => void;
-    onNoteDown: (keyNumber: number) => void;
-    onNoteUp: (keyNumber: 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;
@@ -50,6 +51,6 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     onDurationChange: (value: number) => void;
     onTracksChange: (value: Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
-    onPressedKeysChange: (value: number[]) => void;
+    onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
 };
 export default createPianoRollstate;

package/dist/types/{PlayHead.d.ts → viewport/PlayHead.d.ts}

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

package/package.json

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