solid-pianoroll 0.0.13 → 0.0.15

package/dist/source/PianoRollNotes.jsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, Index, Show } from "solid-js";
+import { batch, createMemo, createSignal, For, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollNotes.module.scss";
@@ -12,38 +12,44 @@ const PianoRollNotes = (props) => {
         : value;
     const insertOrUpdateNote = (event) => {
         const position = horizontalViewPort().calculatePosition(event.clientX);
-        const midi = context.condensed
-            ? 60
-            : 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+        const existingNote = currentNote();
+        const midi = context.mode === "keys"
+            ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
+            : existingNote?.midi ?? 60;
+        const targetTrackIndex = context.mode === "tracks"
+            ? Math.floor(verticalViewPort().calculatePosition(event.clientY))
+            : context.selectedTrackIndex ?? 0;
         const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
         const velocity = 127;
-        const existingNote = newNote();
         const ticks = existingNote?.ticks ?? eventPositionTicks;
         const durationTicks = existingNote?.ticks
             ? eventPositionTicks - existingNote?.ticks
             : gridDivisionTicks();
         const note = { midi, ticks, durationTicks, velocity };
         if (existingNote) {
-            context.onNoteChange?.(newNoteIndex(), note);
-            return newNoteIndex();
+            context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
+            return currentNoteIndex();
         }
         else {
-            return context.onInsertNote?.(note) ?? -1;
+            return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
         }
     };
     const [isDragging, setIsDragging] = createSignal(false);
     const [noteDragMode, setNoteDragMode] = createSignal();
-    const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
+    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+    const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
     const [isMouseDown, setIsMouseDown] = createSignal(false);
-    const newNote = createMemo(() => context.notes[newNoteIndex()]);
+    const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
     return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={(event) => {
-            console.log("down");
-            setIsMouseDown(true);
-            const index = insertOrUpdateNote(event);
-            setNewNoteIndex(index);
+            batch(() => {
+                setIsMouseDown(true);
+                const index = insertOrUpdateNote(event);
+                setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
+                setCurrentNoteIndex(index);
+            });
         }} onMouseMove={(event) => {
             if (isDragging())
                 return;
@@ -52,7 +58,7 @@ const PianoRollNotes = (props) => {
                 return;
             }
             const index = insertOrUpdateNote(event);
-            setNewNoteIndex(index);
+            setCurrentNoteIndex(index);
         }} onMouseUp={(event) => {
             setIsMouseDown(false);
             if (!event.altKey)
@@ -61,82 +67,112 @@ const PianoRollNotes = (props) => {
         }} onDblClick={(event) => {
             insertOrUpdateNote(event);
         }} onClick={(event) => {
-            if (newNote()) {
-                setNewNoteIndex(-1);
+            if (currentNote()) {
+                setCurrentNoteIndex(-1);
                 return;
             }
             if (!event.altKey)
                 return;
             insertOrUpdateNote(event);
         }}>
-      <Index each={context.notes}>
-        {(note, index) => {
-            const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
-            const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
-            return (<Show when={(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed) &&
-                    horizontalViewPort().isVisible(horizontalDimensions())}>
-              <div class={getClasses(noteDragMode()).join(" ")} onMouseMove={(event) => {
-                    if (isDragging())
-                        return;
-                    event.stopPropagation();
-                    const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
-                    const noteStartX = horizontalViewPort().calculatePixelValue(note().ticks);
-                    const noteEndX = horizontalViewPort().calculatePixelValue(note().ticks + note().durationTicks);
-                    setNoteDragMode(relativeX - noteStartX < 3
-                        ? "trimStart"
-                        : noteEndX - relativeX < 3
-                            ? "trimEnd"
-                            : "move");
-                }} onDblClick={(event) => {
-                    event.stopPropagation();
-                    context.onRemoveNote?.(index);
-                }} onMouseDown={(event) => {
-                    event.stopPropagation();
-                    setIsDragging(true);
-                    const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
-                    const diffPosition = initialPosition - note().ticks;
-                    const handleMouseMove = (mouseMoveEvent) => {
-                        const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
-                            diffPosition, 0), mouseMoveEvent.altKey);
-                        context.onNoteChange?.(index, {
-                            ...note(),
-                            ...(noteDragMode() === "move" &&
-                                !context.condensed && {
-                                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 handleMouseUp = () => {
-                        setIsDragging(false);
-                        window.removeEventListener("mousemove", handleMouseMove);
-                        window.removeEventListener("mouseup", handleMouseUp);
-                    };
-                    window.addEventListener("mousemove", handleMouseMove);
-                    window.addEventListener("mouseup", handleMouseUp);
-                }} style={{
-                    "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
-                    ...(context.condensed
-                        ? { top: 0, height: "100%" }
-                        : {
+      <For each={context.tracks}>
+        {(track, trackIndex) => {
+            return (<Show when={trackIndex() === context.selectedTrackIndex ||
+                    context.showAllTracks ||
+                    context.mode === "tracks"}>
+              <For each={track.notes}>
+                {(note, noteIndex) => {
+                    const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(context.mode === "keys" ? 127 - note.midi : trackIndex(), 1));
+                    const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks));
+                    return (<Show when={verticalViewPort().isVisible(verticalVirtualDimensions()) &&
+                            horizontalViewPort().isVisible(horizontalDimensions())}>
+                      <div class={getClasses(noteDragMode()).join(" ")} draggable={false} onMouseMove={(event) => {
+                            if (isDragging())
+                                return;
+                            event.stopPropagation();
+                            const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
+                            const noteStartX = horizontalViewPort().calculatePixelValue(note.ticks);
+                            const noteEndX = horizontalViewPort().calculatePixelValue(note.ticks + note.durationTicks);
+                            setNoteDragMode(relativeX - noteStartX < 3
+                                ? "trimStart"
+                                : noteEndX - relativeX < 3
+                                    ? "trimEnd"
+                                    : "move");
+                        }} onDblClick={(event) => {
+                            event.stopPropagation();
+                            context.onRemoveNote?.(trackIndex(), noteIndex());
+                        }} onMouseDown={(event) => {
+                            event.stopPropagation();
+                            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"
+                                    ? Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
+                                    : 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);
+                        }} style={{
+                            "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
                             top: `${verticalVirtualDimensions().offset}px`,
                             height: `${verticalVirtualDimensions().size}px`,
-                        }),
-                    left: `${horizontalDimensions().offset}px`,
-                    width: `${horizontalDimensions().size}px`,
-                }}></div>
+                            left: `${horizontalDimensions().offset}px`,
+                            width: `${horizontalDimensions().size}px`,
+                        }}></div>
+                    </Show>);
+                }}
+              </For>
             </Show>);
         }}
-      </Index>
+      </For>
     </div>);
 };
 export default PianoRollNotes;

package/dist/source/PianoRollTrackList.jsx

@@ -0,0 +1,28 @@
+import styles from "./PianoRollTrackList.module.css";
+import { createMemo, Index, Show } from "solid-js";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import { usePianoRollContext } from "./PianoRollContext";
+const PianoRollTrackList = () => {
+    const viewPort = createMemo(() => useViewPortDimension("vertical"));
+    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));
+            return (<Show when={virtualDimensions().size > 0}>
+              <div classList={{
+                    [styles["Track"]]: true,
+                }} 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>
+            </Show>);
+        }}
+      </Index>
+    </div>);
+};
+export default PianoRollTrackList;

package/dist/source/PlayHead.jsx

@@ -0,0 +1,47 @@
+import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
+import { clamp } from "./viewport/createViewPortDimension";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+const PlayHead = (allProps) => {
+    const propsWithDefauls = mergeProps({ playHeadPosition: 0, sync: false }, allProps);
+    const [props, divProps] = splitProps(propsWithDefauls, [
+        "playHeadPosition",
+        "sync",
+        "onPlayHeadPositionChange",
+        "onPositionChange",
+    ]);
+    const viewPort = useViewPortDimension("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 leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.playHeadPosition));
+    return (<div class="PlayHead" {...divProps} style={{
+            position: "absolute",
+            height: "100%",
+            width: "2px",
+            left: `${leftPosition()}px`,
+            "background-color": "green",
+            cursor: "pointer",
+            ...(typeof divProps.style === "object" && divProps.style),
+        }} onMouseDown={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const handleMouseMove = ({ movementX }) => {
+                const { parentElement } = event.currentTarget;
+                if (!parentElement)
+                    return;
+                const newPosition = viewPort.calculatePosition(leftPosition() + movementX);
+                props.onPlayHeadPositionChange?.(newPosition);
+            };
+            const handleMouseUp = () => {
+                window.removeEventListener("mousemove", handleMouseMove);
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+            window.addEventListener("mousemove", handleMouseMove);
+            window.addEventListener("mouseup", handleMouseUp);
+        }}/>);
+};
+export default PlayHead;

package/dist/source/index.jsx

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

package/dist/source/usePianoRoll.js

@@ -1,11 +1,11 @@
 import { createSignal } from "solid-js";
 const usePianoRoll = () => {
     const [ppq, onPpqChange] = createSignal(120);
-    const [condensed, onCondensedChange] = createSignal(false);
+    const [mode, onModeChange] = createSignal("tracks");
     const [position, onPositionChange] = createSignal(0);
     const [zoom, onZoomChange] = createSignal(10);
     const [verticalZoom, onVerticalZoomChange] = createSignal(5);
-    const [verticalPosition, onVerticalPositionChange] = createSignal(64);
+    const [verticalPosition, onVerticalPositionChange] = createSignal(44);
     const [gridDivision, onGridDivisionChange] = createSignal(4);
     const [snapToGrid, onSnapToGridChange] = createSignal(true);
     const [duration, onDurationChange] = createSignal(0);
@@ -24,8 +24,8 @@ const usePianoRoll = () => {
         onGridDivisionChange,
         snapToGrid,
         onSnapToGridChange,
-        condensed,
-        onCondensedChange,
+        mode,
+        onModeChange,
         duration,
         onDurationChange,
     };

package/dist/source/viewport/createViewPortDimension.js

@@ -3,6 +3,7 @@ import { createStore } from "solid-js/store";
 export default function createViewPortDimension(getState) {
     const getStateWithFunctions = () => ({
         ...getState(),
+        calculatePixelOffset,
         calculatePixelValue,
         calculatePosition,
         calculatePixelDimensions,

package/dist/types/PianoRoll.d.ts

@@ -1,12 +1,15 @@
-import { JSX } from "solid-js";
-import { Note } from "./types";
+import { JSX, ParentProps } from "solid-js";
+import { Note, Track } from "./types";
 export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
     ppq: number;
-    notes: Note[];
+    tracks: Track[];
     gridDivision: GridDivision;
     snapToGrid: boolean;
-    condensed?: boolean;
+    mode: "keys" | "tracks";
+    showAllTracks?: boolean;
+    showTrackList?: boolean;
+    selectedTrackIndex: number;
     verticalPosition: number;
     verticalZoom: number;
     position: number;
@@ -16,9 +19,10 @@ export type PianoRollProps = {
     onVerticalPositionChange?: (zoom: number) => void;
     onZoomChange?: (zoom: number) => void;
     onPositionChange?: (zoom: number) => void;
-    onNoteChange?: (index: number, note: Note) => void;
-    onInsertNote?: (note: Note) => number;
-    onRemoveNote?: (index: 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: PianoRollProps & JSX.IntrinsicElements["div"]) => JSX.Element;
+declare const PianoRoll: (allProps: ParentProps<PianoRollProps & JSX.IntrinsicElements["div"]>) => JSX.Element;
 export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -1,4 +1,5 @@
+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) => [Pick<PianoRollProps, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">, Omit<PianoRollProps, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">];
+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">];

package/dist/types/PianoRollTrackList.d.ts

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

package/dist/types/PlayHead.d.ts

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

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

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

package/dist/types/usePianoRoll.d.ts

@@ -14,8 +14,8 @@ declare const usePianoRoll: () => {
     onGridDivisionChange: import("solid-js").Setter<GridDivision>;
     snapToGrid: import("solid-js").Accessor<boolean>;
     onSnapToGridChange: import("solid-js").Setter<boolean>;
-    condensed: import("solid-js").Accessor<boolean>;
-    onCondensedChange: import("solid-js").Setter<boolean>;
+    mode: import("solid-js").Accessor<"keys" | "tracks">;
+    onModeChange: import("solid-js").Setter<"keys" | "tracks">;
     duration: import("solid-js").Accessor<number>;
     onDurationChange: import("solid-js").Setter<number>;
 };

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

@@ -4,6 +4,7 @@ export declare const ScrollZoomViewPort: (props: ParentProps<{
     dimensions: Record<ViewPortDimensionName, () => Omit<ViewPortDimensionState, "name">>;
 }>) => import("solid-js").JSX.Element;
 export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
+    calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
     calculatePixelDimensions: (position: number, length: number) => {

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

@@ -11,6 +11,7 @@ export type ViewPortDimensionState = {
     zoom: number;
 };
 export default function createViewPortDimension(getState: () => ViewPortDimensionState): {
+    calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
     calculatePixelDimensions: (position: number, length: number) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.13",
+  "version": "0.0.15",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -44,7 +44,8 @@
     "typecheck": "tsc --noEmit"
   },
   "optionalDependencies": {
-    "@tonejs/midi": "^2.0.28"
+    "@tonejs/midi": "^2.0.28",
+    "tone": "^14.7.77"
   },
   "peerDependencies": {
     "solid-js": ">=1.0.0"