solid-pianoroll 0.0.22 → 0.0.23

package/dist/source/PianoRoll.jsx

@@ -1,90 +1,77 @@
 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",
+        }}>
+                  <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"}>
-              {allProps.children}
-              <PianoRollGrid />
-              <PianoRollNotes />
-            </ScrollZoomContainer>
+            <div style={{
+            width: "100%",
+            display: "flex",
+            height: "100%",
+            "flex-direction": "column",
+            overflow: "hidden",
+        }}>
+              <div style={{ height: "30px" }}>
+                <PianoRollScale />
+              </div>
+              <PianoRollNotesScroller>
+                {allProps.children}
+                <PianoRollGrid />
+                <PianoRollNotes />
+              </PianoRollNotesScroller>
+            </div>
 
             <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

@@ -34,6 +34,8 @@ const PianoRollNotes = (props) => {
         };
     };
     const handleMouseMove = (mouseMoveEvent) => {
+        mouseMoveEvent.preventDefault();
+        mouseMoveEvent.stopPropagation();
         const note = getInitialNote();
         if (!note)
             return;
@@ -74,6 +76,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,6 +87,8 @@ 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 durationTicks = gridDivisionTicks();

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,29 @@
+import { createMemo, Index, Show } from "solid-js";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import styles from "./PianoRollScale.module.css";
+import usePianoRollGrid from "./usePianoRollGrid";
+const PianoRollScale = () => {
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+    const grid = usePianoRollGrid();
+    return (<div class={styles.PianoRollScale}>
+      <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

@@ -15,6 +15,8 @@ const defaultState = {
     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 = [

package/dist/source/viewport/ScrollZoomContainer.jsx

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

package/dist/source/viewport/ZoomSliderControl.jsx

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

package/dist/types/PianoRollContext.d.ts

@@ -17,6 +17,8 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
+    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
     onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
     onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
     onRemoveNote: (trackIndex: number, noteIndex: number) => void;
@@ -37,6 +39,8 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
     onTracksChange: (value: import("./types").Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
     onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
+    onNotesScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
+    onTracksScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
 }>;
 export declare const usePianoRollContext: () => {
     showAllTracks?: boolean;
@@ -56,6 +60,8 @@ export declare const usePianoRollContext: () => {
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
+    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
     onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
     onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
     onRemoveNote: (trackIndex: number, noteIndex: number) => void;
@@ -76,6 +82,8 @@ export declare const usePianoRollContext: () => {
     onTracksChange: (value: import("./types").Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
     onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
+    onNotesScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
+    onTracksScrollerClientRectChange: (value: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">) => void;
 };
 export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
@@ -92,7 +100,9 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
+    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
     ppq: number;
     mode: "keys" | "tracks";
     position: number;
@@ -107,4 +117,6 @@ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<Pian
     tracks: import("./types").Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">];
+    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
+} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">];

package/dist/types/PianoRollNotesScroller.d.ts

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

package/dist/types/PianoRollScale.d.ts

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

package/dist/types/PianoRollScrollZoomViewPort.d.ts

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

package/dist/types/PianoRollTrackListScroller.d.ts

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

package/dist/types/usePianoRollGrid.d.ts

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

package/dist/types/usePianoRollState.d.ts

@@ -1,5 +1,6 @@
 import { GridDivision } from "./PianoRoll";
 import { Note, Track } from "./types";
+import { ClientRect } from "./useBoundingClientRect";
 type PianoRollState = {
     ppq: number;
     mode: "keys" | "tracks";
@@ -15,8 +16,10 @@ type PianoRollState = {
     tracks: Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
+    notesScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
+    tracksScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
 };
-export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown")[];
+export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown")[];
 declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) => {
     ppq: number;
     mode: "keys" | "tracks";
@@ -32,6 +35,8 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     tracks: Track[];
     selectedTrackIndex: number;
     pressedKeys: Record<number, Record<number, boolean>>;
+    notesScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
+    tracksScrollerClientRect: Pick<ClientRect, "left" | "width" | "top" | "height">;
     onNoteChange: (trackIndex: number, noteIndex: number, note: Note) => void;
     onInsertNote: (trackIndex: number, note: Note) => number;
     onRemoveNote: (trackIndex: number, noteIndex: number) => void;
@@ -52,5 +57,7 @@ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) =>
     onTracksChange: (value: Track[]) => void;
     onSelectedTrackIndexChange: (value: number) => void;
     onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
+    onNotesScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => void;
+    onTracksScrollerClientRectChange: (value: Pick<ClientRect, "height" | "width" | "left" | "top">) => void;
 };
 export default createPianoRollstate;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.22",
+  "version": "0.0.23",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",