solid-pianoroll 0.0.22 → 0.0.24

package/dist/types/PianoRollContext.d.ts

@@ -1,82 +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>>;
-    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;
-}>;
-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>>;
-    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;
-};
+} & 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";
@@ -86,13 +15,16 @@ 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[];
     selectedTrackIndex: number;
     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 {
+    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" | "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;
@@ -101,10 +33,13 @@ 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[];
     selectedTrackIndex: number;
     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">];
+    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" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange" | "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

@@ -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/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 { GridDivision } from "./types";
 import { Note, Track } from "./types";
+import { ClientRect } from "./useBoundingClientRect";
 type PianoRollState = {
     ppq: number;
     mode: "keys" | "tracks";
@@ -9,15 +10,23 @@ type PianoRollState = {
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
+    playHeadPosition: number;
     gridDivision: GridDivision;
     snapToGrid: boolean;
     duration: number;
     tracks: Track[];
     selectedTrackIndex: 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" | "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;
@@ -26,31 +35,39 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     verticalPosition: number;
     verticalTrackZoom: number;
     verticalTrackPosition: number;
+    playHeadPosition: number;
     gridDivision: GridDivision;
     snapToGrid: boolean;
     duration: number;
     tracks: Track[];
     selectedTrackIndex: 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: (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;
+    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.22",
+  "version": "0.0.24",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",