solid-pianoroll 0.0.22 → 0.0.24

package/dist/source/PianoRoll.jsx

@@ -1,90 +1,81 @@
 import styles from "./PianoRoll.module.css";
-import { createSignal, Show, mergeProps } from "solid-js";
+import { Show, mergeProps } from "solid-js";
 import { PianoRollContextProvider, splitContextProps } from "./PianoRollContext";
 import PianoRollKeys from "./PianoRollKeys";
 import PianoRollNotes from "./PianoRollNotes";
-import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
 import PianoRollGrid from "./PianoRollGrid";
-import { ScrollZoomViewPort as ScrollZoomViewPort } from "./viewport/ScrollZoomViewPort";
-import useBoundingClientRect from "./useBoundingClientRect";
 import ZoomSliderControl from "./viewport/ZoomSliderControl";
 import PianoRollTrackList from "./PianoRollTrackList";
+import PianoRollScrollZoomViewPort from "./PianoRollScrollZoomViewPort";
+import PianoRollNotesScroller from "./PianoRollNotesScroller";
+import PianoRollTrackListScroller from "./PianoRollTrackListScroller";
+import PianoRollScale from "./PianoRollScale";
 const PianoRoll = (allProps) => {
     const propsWithDefaults = mergeProps({ showAllTracks: false }, allProps);
     const [context, divProps] = splitContextProps(propsWithDefaults);
-    const [notesScrollerRef, setNotesScrollerRef] = createSignal();
-    const [tracksScrollerRef, setTracksScrollerRef] = createSignal();
-    const notesScrollerClientRect = useBoundingClientRect(notesScrollerRef);
-    const tracksScrollerClientRect = useBoundingClientRect(tracksScrollerRef);
-    const zoomFactor = 500;
     return (<PianoRollContextProvider value={context}>
       <div {...divProps} class={styles.PianoRoll}>
-        <ScrollZoomViewPort dimensions={{
-            horizontal: () => ({
-                pixelOffset: notesScrollerClientRect().left,
-                pixelSize: notesScrollerClientRect().width,
-                position: context.position,
-                range: context.duration,
-                zoom: context.zoom * (zoomFactor / notesScrollerClientRect().width),
-                onPositionChange: context.onPositionChange,
-                onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / notesScrollerClientRect().width)),
-                minZoom: 1,
-                maxZoom: 500,
-            }),
-            vertical: () => ({
-                pixelOffset: notesScrollerClientRect().top,
-                pixelSize: notesScrollerClientRect().height,
-                position: context.verticalPosition,
-                range: 128,
-                zoom: context.verticalZoom * (zoomFactor / notesScrollerClientRect().height),
-                onPositionChange: context.onVerticalPositionChange,
-                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / notesScrollerClientRect().height)),
-                minZoom: 1,
-                maxZoom: 10,
-            }),
-            horizontalTracks: () => ({
-                pixelOffset: 0,
-                pixelSize: tracksScrollerClientRect().width,
-            }),
-            verticalTracks: () => ({
-                pixelOffset: tracksScrollerClientRect().top,
-                pixelSize: tracksScrollerClientRect().height,
-                position: context.verticalTrackPosition,
-                range: context.tracks.length,
-                zoom: context.verticalTrackZoom * (zoomFactor / tracksScrollerClientRect().height),
-                onPositionChange: context.onVerticalTrackPositionChange,
-                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / tracksScrollerClientRect().height)),
-                minZoom: 0.8,
-                maxZoom: 3,
-            }),
-            horizontalKeys: () => ({ pixelSize: 60 }),
-        }}>
+        <PianoRollScrollZoomViewPort>
           <div class={styles.PianoRollContainer}>
             <ZoomSliderControl orientation="vertical" dimensionName="verticalTracks"/>
-            <div class={styles.PianoRollLeftColumn}>
+            <div classList={{
+            [styles.PianoRollLeftColumn]: true,
+            [styles.showTrackList]: context.showTrackList,
+        }}>
               <Show when={context.showTrackList}>
-                <ScrollZoomContainer ref={setTracksScrollerRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
-                  <PianoRollTrackList />
-                </ScrollZoomContainer>
-              </Show>
-              <Show when={context.mode === "keys"}>
-                <PianoRollKeys />
+                <div style={{
+            height: "30px",
+            "border-right": "1px black solid",
+        }}>
+                  <button title={context.mode === "keys" ? "Tracks Mode" : "Keys Mode"} onClick={() => context.onModeChange(context.mode === "keys" ? "tracks" : "keys")} style={{
+            "font-size": "16px",
+            "line-height": "16px",
+            cursor: "pointer",
+            overflow: "hidden",
+        }}>
+                    <div>{context.mode === "keys" ? "≡" : "🎹"}</div>
+                  </button>
+                </div>
               </Show>
+              <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+                <Show when={context.showTrackList}>
+                  <PianoRollTrackListScroller>
+                    <PianoRollTrackList />
+                  </PianoRollTrackListScroller>
+                </Show>
+                <Show when={context.mode === "keys"}>
+                  <PianoRollKeys />
+                </Show>
+              </div>
             </div>
 
-            <ScrollZoomContainer ref={setNotesScrollerRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
+            <PianoRollNotesScroller>
               {allProps.children}
-              <PianoRollGrid />
-              <PianoRollNotes />
-            </ScrollZoomContainer>
+              <div style={{
+            width: "100%",
+            display: "flex",
+            height: "100%",
+            "flex-direction": "column",
+            overflow: "hidden",
+        }}>
+                <div style={{ height: "30px" }}>
+                  <PianoRollScale />
+                </div>
+
+                <div style={{ flex: 1, position: "relative", overflow: "hidden" }}>
+                  <PianoRollGrid />
+                  <PianoRollNotes />
+                </div>
+              </div>
+            </PianoRollNotesScroller>
 
             <ZoomSliderControl orientation="vertical" disabled={context.mode !== "keys"}/>
           </div>
           <ZoomSliderControl orientation="horizontal" style={{
-            "margin-left": `${tracksScrollerClientRect().width + 24}px`,
+            "margin-left": `${context.tracksScrollerClientRect.width + 24}px`,
             "margin-right": "24px",
         }}/>
-        </ScrollZoomViewPort>
+        </PianoRollScrollZoomViewPort>
       </div>
     </PianoRollContextProvider>);
 };

package/dist/source/PianoRollGrid.jsx

@@ -3,49 +3,23 @@ import { usePianoRollContext } from "./PianoRollContext";
 import { blackKeys, keys } from "./PianoRollKeys";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollGrid.module.css";
+import usePianoRollGrid from "./usePianoRollGrid";
 const PianoRollGrid = () => {
     const context = usePianoRollContext();
     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);
-    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((_, index) => ({
-            index: index + startIndex,
-            ticks: (index + startIndex) * gridDivisorTicks(),
-        }));
-    });
+    const gridArray = usePianoRollGrid();
     return (<div class={styles.PianoRollGrid}>
       <Index each={gridArray()}>
         {(entry) => {
-            const virtualDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(entry().ticks, gridDivisorTicks()));
-            return (<Show when={virtualDimensions().size > 0}>
-              <div class={styles["PianoRollGrid-Time"]} style={{
-                    background: Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) %
-                        2 ===
-                        0
-                        ? "#ddd"
-                        : "#ccc",
-                    left: `${virtualDimensions().offset}px`,
-                    width: `${virtualDimensions().size}px`,
-                    "border-left-color": (entry().index * gridDivisorTicks()) % selectedGridDivisorTicks() === 0
-                        ? "gray"
-                        : "#bbb",
+            return (<Show when={horizontalViewPort().isVisible(entry().virtualDimensions)}>
+              <div classList={{
+                    [styles["PianoRollGrid-Time"]]: true,
+                    [styles["Highlighted"]]: entry().isHighlighted,
+                    [styles["HighlightedBorder"]]: entry().hasHighlightedBorder,
+                }} style={{
+                    left: `${entry().virtualDimensions.offset}px`,
+                    width: `${entry().virtualDimensions.size}px`,
                 }}></div>
             </Show>);
         }}
@@ -54,13 +28,15 @@ const PianoRollGrid = () => {
         <Index each={keys}>
           {(key) => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
-            return (<Show when={virtualDimensions().size > 0}>
-                <div class={styles["PianoRollGrid-Row"]} style={{
+            return (<Show when={verticalViewPort().isVisible(virtualDimensions())}>
+                <div classList={{
+                    [styles["PianoRollGrid-Row"]]: true,
+                    [styles["Key"]]: true,
+                    [styles["IsDark"]]: key().isBlack,
+                    [styles["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
+                }} style={{
                     top: `${virtualDimensions().offset}px`,
                     height: `${virtualDimensions().size}px`,
-                    width: "100%",
-                    "background-color": key().isBlack ? "rgba(0,0,0,0.2)" : "none",
-                    "border-width": `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`,
                 }}></div>
               </Show>);
         }}
@@ -71,13 +47,13 @@ const PianoRollGrid = () => {
         <For each={context.tracks}>
           {(track, index) => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(index(), 1));
-            return (<Show when={virtualDimensions().size > 0}>
-                <div class={styles["PianoRollGrid-Row"]} style={{
+            return (<Show when={verticalViewPort().isVisible(virtualDimensions())}>
+                <div classList={{
+                    [styles["PianoRollGrid-Row"]]: true,
+                    [styles["IsDark"]]: index() % 2 === 0,
+                }} style={{
                     top: `${virtualDimensions().offset}px`,
                     height: `${virtualDimensions().size}px`,
-                    width: "100%",
-                    "background-color": index() % 2 === 0 ? "rgba(0,0,0,0.2)" : "none",
-                    "border-width": 0,
                 }}></div>
               </Show>);
         }}

package/dist/source/PianoRollKeys.jsx

@@ -27,7 +27,7 @@ const PianoRollKeys = () => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
             const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
             const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
-            return (<Show when={virtualDimensions().size > 0}>
+            return (<Show when={verticalViewPort().isVisible(virtualDimensions())}>
                 <div classList={{
                     [styles["Key"]]: true,
                     [styles["black"]]: key().isBlack,
@@ -52,13 +52,9 @@ const PianoRollKeys = () => {
                     height: `${virtualDimensions().size +
                         (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) +
                         (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
-                    "box-shadow": [
-                        `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(virtualDimensions().size / 50, 1)}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}`,
-                        isDown() &&
-                            `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(virtualDimensions().size / 20, 2)}px rgba(0, 0, 0, 0.5) inset`,
-                    ]
-                        .filter((item) => !!item)
-                        .join(", "),
+                    "box-shadow": `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(virtualDimensions().size / 50, 1)}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}` + isDown()
+                        ? `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(virtualDimensions().size / 20, 2)}px rgba(0, 0, 0, 0.5) inset`
+                        : "",
                 }}></div>
               </Show>);
         }}

package/dist/source/PianoRollNotes.jsx

@@ -14,9 +14,6 @@ const PianoRollNotes = (props) => {
     const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
     const [diffPosition, setDiffPosition] = createSignal(0);
     const [getInitialNote, setInitialNote] = createSignal();
-    const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
-        ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks()
-        : value;
     const calculateNoteDragValues = (event) => {
         const targetTrackIndex = context.mode === "tracks"
             ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
@@ -34,11 +31,13 @@ const PianoRollNotes = (props) => {
         };
     };
     const handleMouseMove = (mouseMoveEvent) => {
+        mouseMoveEvent.preventDefault();
+        mouseMoveEvent.stopPropagation();
         const note = getInitialNote();
         if (!note)
             return;
         const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
-        const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+        const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
         const updatedNote = {
             ...note,
             midi,
@@ -47,13 +46,13 @@ const PianoRollNotes = (props) => {
                 ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
                 durationTicks: ticks < note.ticks + note.durationTicks
                     ? note.ticks + note.durationTicks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+                    : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
             }),
             ...(noteDragMode() === "trimEnd" && {
                 ticks: ticks < note.ticks ? ticks : note.ticks,
                 durationTicks: ticks < note.ticks
                     ? note.ticks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+                    : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
             }),
         };
         const previousTrackIndex = currentNoteTrackIndex();
@@ -74,6 +73,8 @@ const PianoRollNotes = (props) => {
         window.removeEventListener("mousemove", handleMouseMove);
         window.removeEventListener("mouseup", stopDragging);
         setIsDragging(false);
+        setCurrentNoteIndex(-1);
+        setCurrentNoteTrackIndex(-1);
     };
     const startDragging = () => {
         window.addEventListener("mousemove", handleMouseMove);
@@ -83,8 +84,10 @@ const PianoRollNotes = (props) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
     return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(mouseDownEvent) => {
+            mouseDownEvent.preventDefault();
+            mouseDownEvent.stopPropagation();
             const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
-            const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
+            const ticks = context.snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey, context);
             const durationTicks = gridDivisionTicks();
             const newNote = {
                 midi,
@@ -139,7 +142,8 @@ const PianoRollNotes = (props) => {
                             setInitialNote(note);
                             startDragging();
                         }} style={{
-                            "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
+                            "background-color": `${track.color}`,
+                            opacity: (note.velocity / 128 + 2) / 3,
                             top: `${verticalVirtualDimensions().offset}px`,
                             height: `${verticalVirtualDimensions().size}px`,
                             left: `${horizontalDimensions().offset}px`,

package/dist/source/PianoRollNotesScroller.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 PianoRollNotesScroller = (props) => {
+    const context = usePianoRollContext();
+    const [ref, setRef] = createSignal();
+    const clientRect = useBoundingClientRect(ref);
+    createEffect(() => {
+        context.onNotesScrollerClientRectChange(clientRect());
+    });
+    return (<ScrollZoomContainer ref={setRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
+      {props.children}
+    </ScrollZoomContainer>);
+};
+export default PianoRollNotesScroller;

package/dist/source/PianoRollScale.jsx

@@ -0,0 +1,43 @@
+import { createMemo, Index, Show } from "solid-js";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import styles from "./PianoRollScale.module.css";
+import usePianoRollGrid from "./usePianoRollGrid";
+import { usePianoRollContext } from "./PianoRollContext";
+const PianoRollScale = () => {
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+    const grid = usePianoRollGrid();
+    const context = usePianoRollContext();
+    const updatePlayheadPosition = (event) => {
+        const position = horizontalViewPort().calculatePosition(event.clientX);
+        context.onPlayHeadPositionChange(position, event);
+    };
+    return (<div class={styles.PianoRollScale} onMouseDown={(event) => {
+            updatePlayheadPosition(event);
+            const handleMouseUp = () => {
+                window.removeEventListener("mousemove", updatePlayheadPosition);
+                window.removeEventListener("mouseup", handleMouseUp);
+            };
+            window.addEventListener("mousemove", updatePlayheadPosition);
+            window.addEventListener("mouseup", handleMouseUp);
+        }}>
+      <Index each={grid()}>
+        {(entry) => {
+            return (<Show when={horizontalViewPort().isVisible(entry().virtualDimensions)}>
+              <div classList={{
+                    [styles["PianoRollScale-Time"]]: true,
+                    [styles["Highlighted"]]: entry().isHighlighted,
+                    [styles["HighlightedBorder"]]: entry().hasHighlightedBorder,
+                }} style={{
+                    left: `${entry().virtualDimensions.offset}px`,
+                    width: `${entry().virtualDimensions.size}px`,
+                }}>
+                <Show when={entry().showLabel}>
+                  <div class={styles["PianoRollScale-Label"]}>{entry().label}</div>
+                </Show>
+              </div>
+            </Show>);
+        }}
+      </Index>
+    </div>);
+};
+export default PianoRollScale;

package/dist/source/PianoRollScrollZoomViewPort.jsx

@@ -0,0 +1,49 @@
+import { usePianoRollContext } from "./PianoRollContext";
+import { ScrollZoomViewPort } from "./viewport/ScrollZoomViewPort";
+const PianoRollScrollZoomViewPort = (props) => {
+    const zoomFactor = 500;
+    const context = usePianoRollContext();
+    return (<ScrollZoomViewPort dimensions={{
+            horizontal: () => ({
+                pixelOffset: context.notesScrollerClientRect.left,
+                pixelSize: context.notesScrollerClientRect.width,
+                position: context.position,
+                range: context.duration,
+                zoom: context.zoom * (zoomFactor / context.notesScrollerClientRect.width),
+                onPositionChange: context.onPositionChange,
+                onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
+                minZoom: 1,
+                maxZoom: 500,
+            }),
+            vertical: () => ({
+                pixelOffset: context.notesScrollerClientRect.top,
+                pixelSize: context.notesScrollerClientRect.height,
+                position: context.verticalPosition,
+                range: 128,
+                zoom: context.verticalZoom * (zoomFactor / context.notesScrollerClientRect.height),
+                onPositionChange: context.onVerticalPositionChange,
+                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)),
+                minZoom: 1,
+                maxZoom: 10,
+            }),
+            horizontalTracks: () => ({
+                pixelOffset: 0,
+                pixelSize: context.tracksScrollerClientRect.width,
+            }),
+            verticalTracks: () => ({
+                pixelOffset: context.tracksScrollerClientRect.top,
+                pixelSize: context.tracksScrollerClientRect.height,
+                position: context.verticalTrackPosition,
+                range: context.tracks.length,
+                zoom: context.verticalTrackZoom * (zoomFactor / context.tracksScrollerClientRect.height),
+                onPositionChange: context.onVerticalTrackPositionChange,
+                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)),
+                minZoom: 0.8,
+                maxZoom: 3,
+            }),
+            horizontalKeys: () => ({ pixelSize: 60 }),
+        }}>
+      {props.children}
+    </ScrollZoomViewPort>);
+};
+export default PianoRollScrollZoomViewPort;

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/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

@@ -9,12 +9,15 @@ const defaultState = {
     verticalPosition: 44,
     verticalTrackZoom: 0.5,
     verticalTrackPosition: 0,
+    playHeadPosition: 0,
     gridDivision: 4,
     snapToGrid: true,
     duration: 0,
     tracks: [],
     selectedTrackIndex: 0,
     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 = [
@@ -26,6 +29,7 @@ export const pianoRollStatePropNames = [
     "onNoteDown",
     "onNoteUp",
     "isKeyDown",
+    "snapValueToGridIfEnabled",
 ];
 const createPianoRollstate = (initialState) => {
     const [state, setState] = createStore({
@@ -33,11 +37,21 @@ const createPianoRollstate = (initialState) => {
         ...initialState,
     });
     const handlers = Object.fromEntries(Object.entries(state).map((entry) => {
+        const handlerName = propNameToHandlerName(entry[0]);
         return [
-            propNameToHandlerName(entry[0]),
-            (value) => setState(entry[0], value),
+            handlerName,
+            (value, originalEvent) => {
+                const handler = initialState?.[handlerName];
+                setState(entry[0], value);
+                if (handler) {
+                    handler(value, originalEvent);
+                }
+            },
         ];
     }));
+    const onPlayheadPositionChange = (playheadPosition, originalEvent) => {
+        handlers.onPlayHeadPositionChange(snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey));
+    };
     const updateNotes = async (trackIndex, getNotes) => {
         const track = state.tracks[trackIndex];
         if (!track)
@@ -91,6 +105,12 @@ const createPianoRollstate = (initialState) => {
         updateKeyPressedState(trackIndex, keyNumber, false);
     };
     const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
+    const snapValueToGridIfEnabled = (value, altKey) => {
+        const gridDivisionTicks = (state.ppq * 4) / state.gridDivision;
+        return state.snapToGrid && !altKey
+            ? Math.round(value / gridDivisionTicks) * gridDivisionTicks
+            : value;
+    };
     return mergeProps(state, {
         ...handlers,
         onNoteChange,
@@ -99,6 +119,8 @@ const createPianoRollstate = (initialState) => {
         onNoteDown,
         onNoteUp,
         isKeyDown,
+        snapValueToGridIfEnabled,
+        onPlayheadPositionChange,
     });
 };
 export default createPianoRollstate;

package/dist/source/viewport/PlayHead.jsx

@@ -28,9 +28,9 @@ const PlayHead = (allProps) => {
         }} onMouseDown={(event) => {
             event.preventDefault();
             event.stopPropagation();
-            const handleMouseMove = ({ clientX }) => {
-                const newPosition = viewPort.calculatePosition(clientX);
-                props.onPositionChange?.(newPosition);
+            const handleMouseMove = (event) => {
+                const newPosition = viewPort.calculatePosition(event.clientX);
+                props.onPositionChange?.(newPosition, event);
             };
             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/PianoRoll.d.ts

@@ -1,6 +1,5 @@
 import { JSX, ParentProps } from "solid-js";
 import createPianoRollstate from "./usePianoRollState";
-export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
     showAllTracks?: boolean;
     showTrackList?: boolean;