solid-pianoroll 0.0.16 → 0.0.18

package/dist/source/PianoRoll.jsx

@@ -1,5 +1,5 @@
 import styles from "./PianoRoll.module.css";
-import { createSignal, createMemo, createEffect, Show } from "solid-js";
+import { createSignal, createMemo, createEffect, Show, mergeProps, } from "solid-js";
 import { PianoRollContextProvider, splitContextProps } from "./PianoRollContext";
 import PianoRollKeys from "./PianoRollKeys";
 import PianoRollNotes from "./PianoRollNotes";
@@ -12,63 +12,87 @@ import VerticalZoomControl from "./viewport/VerticalZoomControl";
 import HorizontalZoomControl from "./viewport/HorizontalZoomControl";
 import PianoRollTrackList from "./PianoRollTrackList";
 const PianoRoll = (allProps) => {
-    const [contextProps, divProps] = splitContextProps(allProps);
+    const propsWithDefaults = mergeProps({ showAllTracks: false }, allProps);
+    const [context, divProps] = splitContextProps(propsWithDefaults);
     const [scrollerRef, setScrollerRef] = createSignal();
+    const [trackScrollerRef, setTrackScrollerRef] = createSignal();
     const clientRect = useBoundingClientRect(scrollerRef);
+    const trackClientRef = useBoundingClientRect(trackScrollerRef);
     const zoomFactor = 500;
     const minZoom = createMemo(() => 1 / (zoomFactor / clientRect().width));
     const maxZoom = createMemo(() => 500 * (zoomFactor / clientRect().width));
     const minVerticalZoom = createMemo(() => 1 / (zoomFactor / clientRect().height));
     const maxVerticalZoom = createMemo(() => 10 * (zoomFactor / clientRect().height));
+    const minVerticalTracksZoom = createMemo(() => 0.8 / (zoomFactor / trackClientRef().height));
+    const maxVerticalTracksZoom = createMemo(() => 3 * (zoomFactor / trackClientRef().height));
     createEffect((isInitial) => {
         if (isInitial)
             return false;
-        if (contextProps.mode === "tracks") {
-            contextProps.onVerticalPositionChange?.(0);
+        if (context.mode === "tracks") {
+            context.onVerticalPositionChange?.(0);
         }
     }, true);
-    return (<PianoRollContextProvider value={contextProps}>
+    return (<PianoRollContextProvider value={context}>
       <div {...divProps} class={styles.PianoRoll}>
-        <div class={styles.PianoRollContainer}>
-          <ScrollZoomViewPort dimensions={{
+        <ScrollZoomViewPort dimensions={{
             horizontal: () => ({
                 pixelOffset: clientRect().left,
                 pixelSize: clientRect().width,
-                position: contextProps.position,
-                range: contextProps.duration,
-                zoom: contextProps.zoom * (zoomFactor / clientRect().width),
-                onPositionChange: contextProps.onPositionChange,
-                onZoomChange: (zoom) => contextProps.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom())),
+                position: context.position,
+                range: context.duration,
+                zoom: context.zoom * (zoomFactor / clientRect().width),
+                onPositionChange: context.onPositionChange,
+                onZoomChange: (zoom) => context.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom())),
             }),
             vertical: () => ({
                 pixelOffset: clientRect().top,
                 pixelSize: clientRect().height,
-                position: contextProps.verticalPosition,
-                range: contextProps.mode === "keys" ? 128 : Math.max(contextProps.tracks.length, 16),
-                zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
-                onPositionChange: contextProps.onVerticalPositionChange,
-                onZoomChange: (verticalZoom) => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom())),
+                position: context.verticalPosition,
+                range: 128,
+                zoom: context.verticalZoom * (zoomFactor / clientRect().height),
+                onPositionChange: context.onVerticalPositionChange,
+                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom())),
+            }),
+            horizontalTracks: () => ({
+                pixelOffset: clientRect().left,
+                pixelSize: clientRect().width,
+                position: 0,
+                range: 1,
+                zoom: 1,
+            }),
+            verticalTracks: () => ({
+                pixelOffset: trackClientRef().top,
+                pixelSize: trackClientRef().height,
+                position: context.verticalTrackPosition,
+                range: context.tracks.length,
+                zoom: context.verticalTrackZoom * (zoomFactor / trackClientRef().height),
+                onPositionChange: context.onVerticalTrackPositionChange,
+                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(clamp(verticalTrackZoom / (zoomFactor / trackClientRef().height), minVerticalTracksZoom(), maxVerticalTracksZoom())),
             }),
         }}>
+          <div class={styles.PianoRollContainer}>
+            <VerticalZoomControl min={minVerticalTracksZoom()} max={maxVerticalTracksZoom()} dimensionName="verticalTracks"/>
             <div style={{ display: "flex", width: "20%" }}>
-              <Show when={allProps.showTrackList}>
-                <PianoRollTrackList />
+              <Show when={context.showTrackList}>
+                <ScrollContainer ref={setTrackScrollerRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
+                  <PianoRollTrackList />
+                </ScrollContainer>
               </Show>
-              <Show when={contextProps.mode === "keys"}>
+              <Show when={context.mode === "keys"}>
                 <PianoRollKeys />
               </Show>
             </div>
 
-            <ScrollContainer ref={setScrollerRef}>
+            <ScrollContainer ref={setScrollerRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
               {allProps.children}
               <PianoRollGrid />
               <PianoRollNotes />
             </ScrollContainer>
 
-            <VerticalZoomControl min={minVerticalZoom()} max={maxVerticalZoom()}/>
-          </ScrollZoomViewPort>
-        </div>
-        <HorizontalZoomControl min={minZoom()} max={maxZoom()}/>
+            <VerticalZoomControl min={minVerticalZoom()} max={maxVerticalZoom()} disabled={context.mode !== "keys"}/>
+          </div>
+          <HorizontalZoomControl min={minZoom()} max={maxZoom()}/>
+        </ScrollZoomViewPort>
       </div>
     </PianoRollContextProvider>);
 };

package/dist/source/PianoRollContext.jsx

@@ -8,24 +8,37 @@ export const usePianoRollContext = () => {
     return context;
 };
 export const splitContextProps = (allProps) => splitProps(allProps, [
+    "ppq",
     "mode",
-    "duration",
-    "gridDivision",
-    "tracks",
     "position",
-    "ppq",
-    "snapToGrid",
-    "verticalPosition",
-    "verticalZoom",
     "zoom",
-    "onInsertNote",
-    "onNoteChange",
+    "verticalZoom",
+    "verticalPosition",
+    "verticalTrackZoom",
+    "verticalTrackPosition",
+    "gridDivision",
+    "snapToGrid",
+    "duration",
+    "tracks",
+    "selectedTrackIndex",
+    "pressedKeys",
+    "onPpqChange",
+    "onModeChange",
     "onPositionChange",
-    "onRemoveNote",
-    "onVerticalPositionChange",
-    "onVerticalZoomChange",
     "onZoomChange",
-    "showAllTracks",
-    "selectedTrackIndex",
+    "onVerticalZoomChange",
+    "onVerticalPositionChange",
+    "onVerticalTrackZoomChange",
+    "onVerticalTrackPositionChange",
+    "onGridDivisionChange",
+    "onSnapToGridChange",
+    "onDurationChange",
+    "onTracksChange",
+    "onNoteChange",
+    "onInsertNote",
+    "onRemoveNote",
     "onSelectedTrackIndexChange",
+    "onPressedKeysChange",
+    "showAllTracks",
+    "showTrackList",
 ]);

package/dist/source/PianoRollGrid.jsx

@@ -5,7 +5,7 @@ import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollGrid.module.css";
 const PianoRollGrid = () => {
     const context = usePianoRollContext();
-    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+    const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
     const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const measureTicks = createMemo(() => context.ppq * 4);
     const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);

package/dist/source/PianoRollKeys.jsx

@@ -1,12 +1,33 @@
 import styles from "./PianoRollKeys.module.css";
-import { createMemo, createSignal, Index, Show } from "solid-js";
+import { createEffect, createMemo, createSignal, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import { usePianoRollContext } from "./PianoRollContext";
+import ScrollContainer from "./viewport/ScrollContainer";
 const PianoRollKeys = () => {
     const viewPort = createMemo(() => useViewPortDimension("vertical"));
-    return (<div class={styles.PianoRollKeys}>
+    const [isMouseDown, setIsMouseDown] = createSignal(false);
+    const context = usePianoRollContext();
+    const handleMouseUp = () => {
+        setIsMouseDown(false);
+    };
+    createEffect(() => {
+        if (isMouseDown()) {
+            window.addEventListener("mouseup", handleMouseUp);
+        }
+        else {
+            window.removeEventListener("mouseup", handleMouseUp);
+        }
+    });
+    return (<ScrollContainer classList={{ [styles.PianoRollKeys]: true }} showScrollbar={false}>
       <Index each={keys}>
         {(key) => {
-            const [isDown, setIsDown] = createSignal(false);
+            const isDown = createMemo(() => context.pressedKeys.includes(key().number));
+            const handleKeyDown = () => {
+                context.onPressedKeysChange?.([...context.pressedKeys, key().number]);
+            };
+            const handleKeyUp = () => {
+                context.onPressedKeysChange?.([...context.pressedKeys].filter((number) => number !== key().number));
+            };
             const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
             const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
             const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
@@ -16,7 +37,20 @@ const PianoRollKeys = () => {
                     [styles["black"]]: key().isBlack,
                     [styles["white"]]: !key().isBlack,
                     [styles["down"]]: isDown(),
-                }} onMouseDown={() => setIsDown(true)} onMouseUp={() => setIsDown(false)} title={key().name} data-index={key().number % 12} style={{
+                }} onMouseDown={() => {
+                    setIsMouseDown(true);
+                    handleKeyDown();
+                }} onMouseUp={() => {
+                    handleKeyUp();
+                }} onMouseEnter={() => {
+                    if (isMouseDown()) {
+                        handleKeyDown();
+                    }
+                }} onMouseLeave={() => {
+                    if (isMouseDown()) {
+                        handleKeyUp();
+                    }
+                }} title={key().name} data-index={key().number % 12} style={{
                     top: `${virtualDimensions().offset -
                         (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0)}px`,
                     height: `${virtualDimensions().size +
@@ -40,7 +74,7 @@ const PianoRollKeys = () => {
             </Show>);
         }}
       </Index>
-    </div>);
+    </ScrollContainer>);
 };
 export const blackKeys = [1, 3, 6, 8, 10];
 export const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];

package/dist/source/PianoRollNotes.jsx

@@ -2,9 +2,10 @@ import { batch, createMemo, createSignal, For, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollNotes.module.scss";
+import { clamp } from "./viewport/createViewPortDimension";
 const PianoRollNotes = (props) => {
     const context = usePianoRollContext();
-    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+    const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
     const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
     const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
@@ -17,7 +18,7 @@ const PianoRollNotes = (props) => {
             ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
             : existingNote?.midi ?? 60;
         const targetTrackIndex = context.mode === "tracks"
-            ? Math.floor(verticalViewPort().calculatePosition(event.clientY))
+            ? 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;
@@ -135,7 +136,7 @@ const PianoRollNotes = (props) => {
                                 const previousTrackIndex = currentNoteTrackIndex();
                                 const previousNoteIndex = currentNoteIndex();
                                 const targetTrackIndex = context.mode === "tracks"
-                                    ? Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
+                                    ? clamp(Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)), 0, context.tracks.length - 1)
                                     : previousTrackIndex;
                                 if (targetTrackIndex === previousTrackIndex) {
                                     context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);

package/dist/source/PianoRollTrackList.jsx

@@ -3,12 +3,12 @@ import { createMemo, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import { usePianoRollContext } from "./PianoRollContext";
 const PianoRollTrackList = () => {
-    const viewPort = createMemo(() => useViewPortDimension("vertical"));
+    const viewPort = createMemo(() => useViewPortDimension("verticalTracks"));
     const context = usePianoRollContext();
     return (<div class={styles.PianoRollTrackList}>
       <Index each={context.tracks}>
         {(track, index) => {
-            const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(context.mode === "tracks" ? index : index * 8, context.mode === "tracks" ? 1 : 8));
+            const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(index, 1));
             return (<Show when={virtualDimensions().size > 0}>
               <div classList={{
                     [styles["Track"]]: true,

package/dist/source/index.jsx

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

package/dist/source/usePianoRollState.js

@@ -0,0 +1,92 @@
+import { mergeProps } from "solid-js";
+import { createStore } from "solid-js/store";
+const createPianoRollstate = (defaultState) => {
+    const [state, setState] = createStore({
+        ppq: 0,
+        mode: "keys",
+        position: 0,
+        zoom: 10,
+        verticalZoom: 5,
+        verticalPosition: 44,
+        verticalTrackZoom: 0.5,
+        verticalTrackPosition: 0,
+        gridDivision: 4,
+        snapToGrid: true,
+        duration: 0,
+        tracks: [],
+        selectedTrackIndex: 0,
+        pressedKeys: [],
+        ...defaultState,
+    });
+    const updateNotes = async (trackIndex, getNotes) => {
+        const track = state.tracks[trackIndex];
+        if (!track)
+            return;
+        const notes = track.notes;
+        onTracksChange([
+            ...state.tracks.slice(0, trackIndex),
+            { ...track, notes: getNotes(notes) },
+            ...state.tracks.slice(trackIndex + 1),
+        ]);
+    };
+    const onNoteChange = (trackIndex, noteIndex, note) => {
+        updateNotes(trackIndex, (notes) => [
+            ...notes.slice(0, noteIndex),
+            note,
+            ...notes.slice(noteIndex + 1),
+        ]);
+    };
+    const onInsertNote = (trackIndex, note) => {
+        const track = state.tracks[trackIndex];
+        if (!track)
+            return -1;
+        const notes = track.notes;
+        const newNoteIndex = Math.max(notes.findIndex(({ ticks }) => ticks > note.ticks), 0);
+        updateNotes(trackIndex, (notes) => [
+            ...notes.slice(0, newNoteIndex),
+            note,
+            ...notes.slice(newNoteIndex),
+        ]);
+        return newNoteIndex;
+    };
+    const onRemoveNote = (trackIndex, noteIndex) => {
+        updateNotes(trackIndex, (notes) => [
+            ...notes.slice(0, noteIndex),
+            ...notes.slice(noteIndex + 1),
+        ]);
+    };
+    const onPpqChange = (ppq) => setState("ppq", ppq);
+    const onModeChange = (mode) => setState("mode", mode);
+    const onPositionChange = (position) => setState("position", position);
+    const onZoomChange = (zoom) => setState("zoom", zoom);
+    const onVerticalZoomChange = (verticalZoom) => setState("verticalZoom", verticalZoom);
+    const onVerticalPositionChange = (verticalPosition) => setState("verticalPosition", verticalPosition);
+    const onVerticalTrackZoomChange = (verticalTrackZoom) => setState("verticalTrackZoom", verticalTrackZoom);
+    const onVerticalTrackPositionChange = (verticalTrackPosition) => setState("verticalTrackPosition", verticalTrackPosition);
+    const onGridDivisionChange = (gridDivision) => setState("gridDivision", gridDivision);
+    const onSnapToGridChange = (snapToGrid) => setState("snapToGrid", snapToGrid);
+    const onDurationChange = (duration) => setState("duration", duration);
+    const onTracksChange = (tracks) => setState("tracks", tracks);
+    const onSelectedTrackIndexChange = (selectedTrackIndex) => setState("selectedTrackIndex", selectedTrackIndex);
+    const onPressedKeysChange = (pressedKeys) => setState("pressedKeys", pressedKeys);
+    return mergeProps(state, {
+        onPpqChange,
+        onModeChange,
+        onPositionChange,
+        onZoomChange,
+        onVerticalZoomChange,
+        onVerticalPositionChange,
+        onVerticalTrackZoomChange,
+        onVerticalTrackPositionChange,
+        onGridDivisionChange,
+        onSnapToGridChange,
+        onDurationChange,
+        onTracksChange,
+        onNoteChange,
+        onInsertNote,
+        onRemoveNote,
+        onSelectedTrackIndexChange,
+        onPressedKeysChange,
+    });
+};
+export default createPianoRollstate;

package/dist/source/viewport/HorizontalZoomControl.jsx

@@ -1,7 +1,8 @@
-import { usePianoRollContext } from "../PianoRollContext";
+import { createMemo } from "solid-js";
+import { useViewPortDimension } from "./ScrollZoomViewPort";
 const HorizontalZoomControl = (props) => {
-    const context = usePianoRollContext();
-    return (<input max="500" min="1" step={0.01} {...props} value={context.zoom} onInput={(event) => context.onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" style={{
+    const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? "horizontal"));
+    return (<input max="500" min="1" step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" style={{
             "margin-left": "50px",
             "margin-right": "16px",
             ...(typeof props.style === "object" && props.style),

package/dist/source/viewport/ScrollContainer.jsx

@@ -1,9 +1,21 @@
-import { createEffect, createMemo } from "solid-js";
+import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
 import { useViewPortDimension } from "./ScrollZoomViewPort";
+import styles from "./ScrollContainer.module.css";
 const ScrollContainer = (props) => {
     let scrollContentRef;
-    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
-    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+    const [ownProps, divProps] = splitProps(props, [
+        "ref",
+        "verticalDimensionName",
+        "horizontalDimensionName",
+        "showScrollbar",
+    ]);
+    const propsWithDefaults = mergeProps({
+        verticalDimensionName: "vertical",
+        horizontalDimensionName: "horizontal",
+        showScrollbar: true,
+    }, ownProps);
+    const verticalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
+    const horizontalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
     const handleScroll = (event) => {
         event.preventDefault();
         if (didUpdateScroll) {
@@ -34,6 +46,11 @@ const ScrollContainer = (props) => {
                 verticalViewPort()?.onPositionChange?.(Math.min(maxVerticalPosition, verticalViewPort()?.position));
             }
         }
+        else if (!props.showScrollbar) {
+            event.preventDefault();
+            event.currentTarget.scrollLeft += event.deltaX;
+            event.currentTarget.scrollTop += event.deltaY;
+        }
     };
     let didUpdateScroll = false;
     createEffect(() => {
@@ -57,13 +74,13 @@ const ScrollContainer = (props) => {
             top: scrollTop,
         });
     });
-    return (<div ref={props.ref} class="PianoRoll-Scroller" style={{
-            height: "100%",
-            width: "100%",
-            "z-index": 4,
-            overflow: "scroll",
-            "pointer-events": "auto",
-        }} onScroll={handleScroll} onWheel={handleWheel}>
+    return (<div ref={props.ref} style={{
+            overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
+            ...(typeof divProps.style === "object" && divProps.style),
+        }} classList={{
+            [styles.ScrollContainer]: true,
+            ...divProps.classList,
+        }} onScroll={handleScroll} onWheel={handleWheel} {...divProps}>
       <div ref={scrollContentRef}>
         <div style={{
             top: 0,

package/dist/source/viewport/VerticalZoomControl.jsx

@@ -1,8 +1,10 @@
-import { usePianoRollContext } from "../PianoRollContext";
+import { createMemo } from "solid-js";
+import { useViewPortDimension } from "./ScrollZoomViewPort";
 const VerticalZoomControl = (props) => {
-    const context = usePianoRollContext();
-    return (<input min="1" max="11" step={0.01} {...props} value={context.verticalZoom} onInput={(event) => context.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)} type="range" {...{ orient: "vertical" }} style={{
+    const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? "vertical"));
+    return (<input min="1" max="11" step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" {...{ orient: "vertical" }} style={{
             width: "16px",
+            transform: "rotate(180deg)",
             ...{
                 "writing-mode": "bt-lr" /* IE */,
                 "-webkit-appearance": "slider-vertical" /* WebKit */,

package/dist/types/PianoRoll.d.ts

@@ -1,28 +1,9 @@
 import { JSX, ParentProps } from "solid-js";
-import { Note, Track } from "./types";
+import createPianoRollstate from "./usePianoRollState";
 export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
-    ppq: number;
-    tracks: Track[];
-    gridDivision: GridDivision;
-    snapToGrid: boolean;
-    mode: "keys" | "tracks";
     showAllTracks?: boolean;
     showTrackList?: boolean;
-    selectedTrackIndex: number;
-    verticalPosition: number;
-    verticalZoom: number;
-    position: number;
-    duration: number;
-    zoom: number;
-    onVerticalZoomChange?: (zoom: number) => void;
-    onVerticalPositionChange?: (zoom: number) => void;
-    onZoomChange?: (zoom: number) => void;
-    onPositionChange?: (zoom: number) => void;
-    onNoteChange?: (trackIndex: number, noteIndex: number, note: Note) => void;
-    onInsertNote?: (trackIndex: number, note: Note) => number;
-    onRemoveNote?: (trackIndex: number, noteIndex: number) => void;
-    onSelectedTrackIndexChange?: (trackIndex: number) => void;
-};
-declare const PianoRoll: (allProps: ParentProps<PianoRollProps & JSX.IntrinsicElements["div"]>) => JSX.Element;
+} & ReturnType<typeof createPianoRollstate> & Omit<JSX.IntrinsicElements["div"], "onDurationChange">;
+declare const PianoRoll: (allProps: ParentProps<PianoRollProps>) => JSX.Element;
 export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -1,5 +1,74 @@
-import { JSX } from "solid-js";
 import { PianoRollProps } from "./PianoRoll";
-export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<PianoRollProps>;
-export declare const usePianoRollContext: () => PianoRollProps;
-export declare const splitContextProps: (allProps: PianoRollProps & JSX.IntrinsicElements["div"]) => [Pick<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "zoom" | "mode" | "duration" | "gridDivision" | "tracks" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onPositionChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange" | "onZoomChange" | "showAllTracks" | "selectedTrackIndex" | "onSelectedTrackIndexChange">, Omit<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "zoom" | "mode" | "duration" | "gridDivision" | "tracks" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onPositionChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange" | "onZoomChange" | "showAllTracks" | "selectedTrackIndex" | "onSelectedTrackIndexChange">];
+export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<{
+    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: number[];
+    onPpqChange: (ppq: number) => void;
+    onModeChange: (mode: "keys" | "tracks") => void;
+    onPositionChange: (position: number) => void;
+    onZoomChange: (zoom: number) => void;
+    onVerticalZoomChange: (verticalZoom: number) => void;
+    onVerticalPositionChange: (verticalPosition: number) => void;
+    onVerticalTrackZoomChange: (verticalTrackZoom: number) => void;
+    onVerticalTrackPositionChange: (verticalTrackPosition: number) => void;
+    onGridDivisionChange: (gridDivision: import("./PianoRoll").GridDivision) => void;
+    onSnapToGridChange: (snapToGrid: boolean) => void;
+    onDurationChange: (duration: number) => void;
+    onTracksChange: (tracks: import("./types").Track[]) => void;
+    onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
+    onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
+    onRemoveNote: (trackIndex: number, noteIndex: number) => void;
+    onSelectedTrackIndexChange: (selectedTrackIndex: number) => void;
+    onPressedKeysChange: (pressedKeys: number[]) => 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: number[];
+    onPpqChange: (ppq: number) => void;
+    onModeChange: (mode: "keys" | "tracks") => void;
+    onPositionChange: (position: number) => void;
+    onZoomChange: (zoom: number) => void;
+    onVerticalZoomChange: (verticalZoom: number) => void;
+    onVerticalPositionChange: (verticalPosition: number) => void;
+    onVerticalTrackZoomChange: (verticalTrackZoom: number) => void;
+    onVerticalTrackPositionChange: (verticalTrackPosition: number) => void;
+    onGridDivisionChange: (gridDivision: import("./PianoRoll").GridDivision) => void;
+    onSnapToGridChange: (snapToGrid: boolean) => void;
+    onDurationChange: (duration: number) => void;
+    onTracksChange: (tracks: import("./types").Track[]) => void;
+    onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
+    onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
+    onRemoveNote: (trackIndex: number, noteIndex: number) => void;
+    onSelectedTrackIndexChange: (selectedTrackIndex: number) => void;
+    onPressedKeysChange: (pressedKeys: number[]) => void;
+};
+export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "position" | "zoom" | "onDurationChange" | "mode" | "tracks" | "duration" | "ppq" | "verticalZoom" | "verticalPosition" | "verticalTrackZoom" | "verticalTrackPosition" | "gridDivision" | "snapToGrid" | "selectedTrackIndex" | "pressedKeys" | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "position" | "zoom" | "onDurationChange" | "mode" | "tracks" | "duration" | "ppq" | "verticalZoom" | "verticalPosition" | "verticalTrackZoom" | "verticalTrackPosition" | "gridDivision" | "snapToGrid" | "selectedTrackIndex" | "pressedKeys" | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "showAllTracks" | "showTrackList">];

package/dist/types/index.d.ts

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