solid-pianoroll 0.0.21 → 0.0.23

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/PianoRollTrackListScroller.jsx

@@ -0,0 +1,16 @@
+import { createEffect, createSignal } from "solid-js";
+import { usePianoRollContext } from "./PianoRollContext";
+import useBoundingClientRect from "./useBoundingClientRect";
+import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
+const PianoRollTrackListScroller = (props) => {
+    const context = usePianoRollContext();
+    const [ref, setRef] = createSignal();
+    const clientRect = useBoundingClientRect(ref);
+    createEffect(() => {
+        context.onTracksScrollerClientRectChange(clientRect());
+    });
+    return (<ScrollZoomContainer ref={setRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
+      {props.children}
+    </ScrollZoomContainer>);
+};
+export default PianoRollTrackListScroller;

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/usePianoRollGrid.js

@@ -0,0 +1,45 @@
+import { createMemo } from "solid-js";
+import { usePianoRollContext } from "./PianoRollContext";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+const usePianoRollGrid = () => {
+    const context = usePianoRollContext();
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+    const measureTicks = createMemo(() => context.ppq * 4);
+    const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
+    function calculateVisibleGridDivisorTicks(value) {
+        const visibleRange = horizontalViewPort().calculateVisibleRange();
+        if (visibleRange <= 0)
+            return 0;
+        if (visibleRange / value > 100) {
+            return calculateVisibleGridDivisorTicks(value * 2);
+        }
+        if (visibleRange / value < 30) {
+            return calculateVisibleGridDivisorTicks(value / 2);
+        }
+        return value;
+    }
+    const gridDivisorTicks = createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
+    const gridArray = createMemo(() => {
+        const numberOfLines = Math.ceil(horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1);
+        const startIndex = Math.floor(context.position / gridDivisorTicks());
+        return Array.from({ length: numberOfLines }).map((_, i) => {
+            const index = i + startIndex;
+            const ticks = index * gridDivisorTicks();
+            const measurePosition = ticks / context.ppq / 4 + 1;
+            const bars = Math.floor(measurePosition);
+            const beats = Math.floor((measurePosition - bars) * 4);
+            const label = `${bars}${beats ? `.${beats}` : ""}`;
+            return {
+                index,
+                ticks,
+                isHighlighted: Math.ceil(((index + 1) * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0,
+                hasHighlightedBorder: (index * gridDivisorTicks()) % selectedGridDivisorTicks() === 0,
+                showLabel: ((index * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0,
+                virtualDimensions: horizontalViewPort().calculatePixelDimensions(ticks, gridDivisorTicks()),
+                label,
+            };
+        });
+    });
+    return gridArray;
+};
+export default usePianoRollGrid;

package/dist/source/usePianoRollState.js

@@ -14,7 +14,9 @@ const defaultState = {
     duration: 0,
     tracks: [],
     selectedTrackIndex: 0,
-    pressedKeys: [],
+    pressedKeys: {},
+    notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
+    tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
 };
 const propNameToHandlerName = (name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
 export const pianoRollStatePropNames = [
@@ -25,6 +27,7 @@ export const pianoRollStatePropNames = [
     "onRemoveNote",
     "onNoteDown",
     "onNoteUp",
+    "isKeyDown",
 ];
 const createPianoRollstate = (initialState) => {
     const [state, setState] = createStore({
@@ -74,12 +77,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 +100,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/source/viewport/ScrollZoomContainer.jsx

@@ -36,12 +36,12 @@ const ScrollZoomContainer = (props) => {
         if (event.altKey) {
             event.preventDefault();
             if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-                horizontalViewPort()?.onZoomChange?.(horizontalViewPort().zoom * (1 + event.deltaX / horizontalViewPort().pixelSize));
+                horizontalViewPort()?.onZoomChange?.(horizontalViewPort().zoom / (1 + event.deltaX / horizontalViewPort().pixelSize));
                 const maxPosition = horizontalViewPort().calculateMaxPosition();
                 horizontalViewPort()?.onPositionChange?.(Math.min(maxPosition, horizontalViewPort()?.position));
             }
             else {
-                verticalViewPort()?.onZoomChange?.(verticalViewPort().zoom * (1 + event.deltaY / verticalViewPort().pixelSize));
+                verticalViewPort()?.onZoomChange?.(verticalViewPort().zoom / (1 + event.deltaY / verticalViewPort().pixelSize));
                 const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
                 verticalViewPort()?.onPositionChange?.(Math.min(maxVerticalPosition, verticalViewPort()?.position));
             }

package/dist/source/viewport/ZoomSliderControl.jsx

@@ -3,7 +3,10 @@ import { useViewPortDimension } from "./ScrollZoomViewPort";
 const ZoomSliderControl = (props) => {
     const propsWithDefaults = mergeProps({ orientation: "horizontal" }, props);
     const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
-    return (<input min={dimension().minZoom} max={dimension().maxZoom} step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" {...{ orient: propsWithDefaults.orientation }} style={propsWithDefaults.orientation === "vertical"
+    return (<input min={dimension().minZoom} max={dimension().maxZoom} step={0.01} {...props} value={dimension().zoom} onInput={(event) => {
+            const value = event.currentTarget.valueAsNumber;
+            dimension().onZoomChange?.(value);
+        }} type="range" {...{ orient: propsWithDefaults.orientation }} style={propsWithDefaults.orientation === "vertical"
             ? {
                 margin: 0,
                 "margin-left": "4px",

package/dist/types/PianoRollContext.d.ts

@@ -16,12 +16,15 @@ 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>>;
+    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: (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 +38,9 @@ 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;
+    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;
@@ -54,12 +59,15 @@ export declare const usePianoRollContext: () => {
     duration: number;
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
-    pressedKeys: 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: (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 +81,9 @@ 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;
+    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 splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
@@ -89,8 +99,10 @@ 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>>;
+    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 {
     ppq: number;
     mode: "keys" | "tracks";
     position: number;
@@ -104,5 +116,7 @@ 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>>;
+    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">];

package/dist/types/PianoRollNotesScroller.d.ts

@@ -0,0 +1,3 @@
+import { ParentProps } from "solid-js";
+declare const PianoRollNotesScroller: (props: ParentProps) => import("solid-js").JSX.Element;
+export default PianoRollNotesScroller;

package/dist/types/PianoRollScale.d.ts

@@ -0,0 +1,2 @@
+declare const PianoRollScale: () => import("solid-js").JSX.Element;
+export default PianoRollScale;

package/dist/types/PianoRollScrollZoomViewPort.d.ts

@@ -0,0 +1,3 @@
+import { ParentProps } from "solid-js";
+declare const PianoRollScrollZoomViewPort: (props: ParentProps) => import("solid-js").JSX.Element;
+export default PianoRollScrollZoomViewPort;

package/dist/types/PianoRollTrackListScroller.d.ts

@@ -0,0 +1,3 @@
+import { ParentProps } from "solid-js";
+declare const PianoRollTrackListScroller: (props: ParentProps) => import("solid-js").JSX.Element;
+export default PianoRollTrackListScroller;

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/usePianoRollGrid.d.ts

@@ -0,0 +1,13 @@
+declare const usePianoRollGrid: () => import("solid-js").Accessor<{
+    index: number;
+    ticks: number;
+    isHighlighted: boolean;
+    hasHighlightedBorder: boolean;
+    showLabel: boolean;
+    virtualDimensions: {
+        offset: number;
+        size: number;
+    };
+    label: string;
+}[]>;
+export default usePianoRollGrid;

package/dist/types/usePianoRollState.d.ts

@@ -1,5 +1,6 @@
 import { GridDivision } from "./PianoRoll";
 import { Note, Track } from "./types";
+import { ClientRect } from "./useBoundingClientRect";
 type PianoRollState = {
     ppq: number;
     mode: "keys" | "tracks";
@@ -14,9 +15,11 @@ type PianoRollState = {
     duration: number;
     tracks: Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
+    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" | "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" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown")[];
 declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) => {
     ppq: number;
     mode: "keys" | "tracks";
@@ -31,12 +34,15 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     duration: number;
     tracks: Track[];
     selectedTrackIndex: number;
-    pressedKeys: number[];
+    pressedKeys: Record<number, Record<number, boolean>>;
+    notesScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
+    tracksScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
     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 +56,8 @@ 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;
+    onNotesScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => void;
+    onTracksScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => 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.23",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",