solid-pianoroll 0.0.21 → 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 style={{ display: "flex", width: "30%", "max-width": "250px" }}>
+            <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

@@ -23,11 +23,11 @@ const PianoRollKeys = () => {
       <ScrollZoomContainer horizontalDimensionName="horizontalKeys" showScrollbar={false}>
         <Index each={keys}>
           {(key) => {
-            const isDown = createMemo(() => context.pressedKeys.includes(key().number));
+            const isDown = createMemo(() => context.isKeyDown(context.selectedTrackIndex, key().number));
             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,
@@ -35,38 +35,27 @@ const PianoRollKeys = () => {
                     [styles["down"]]: isDown(),
                 }} onMouseDown={() => {
                     setIsMouseDown(true);
-                    context.onNoteDown(key().number);
+                    context.onNoteDown(context.selectedTrackIndex, key().number);
                 }} onMouseUp={() => {
-                    context.onNoteUp(key().number);
+                    context.onNoteUp(context.selectedTrackIndex, key().number);
                 }} onMouseEnter={() => {
                     if (isMouseDown()) {
-                        context.onNoteDown(key().number);
+                        context.onNoteDown(context.selectedTrackIndex, key().number);
                     }
                 }} onMouseLeave={() => {
                     if (isMouseDown()) {
-                        context.onNoteUp(key().number);
+                        context.onNoteUp(context.selectedTrackIndex, key().number);
                     }
                 }} title={key().name} data-index={key().number % 12} style={{
                     top: `${virtualDimensions().offset -
-                        (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+                        virtualDimensions().size * (!key().isBlack ? (nextIsBlack ? 1 / 2 : 0) : 0)}px`,
                     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(", "),
-                }}>
-                  <Show when={key().isBlack && false}>
-                    <div class={styles["black-separator"]} style={{
-                    top: `${virtualDimensions().offset}px`,
-                    height: `${virtualDimensions().size / 2 - 0.25}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`
+                        : "",
                 }}></div>
-                  </Show>
-                </div>
               </Show>);
         }}
         </Index>

package/dist/source/PianoRollNotes.jsx

@@ -1,4 +1,4 @@
-import { batch, createMemo, createSignal, For, Show } from "solid-js";
+import { createMemo, createSignal, For, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollNotes.module.scss";
@@ -8,73 +8,104 @@ const PianoRollNotes = (props) => {
     const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
     const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
+    const [isDragging, setIsDragging] = createSignal(false);
+    const [noteDragMode, setNoteDragMode] = createSignal();
+    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+    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 insertOrUpdateNote = (event) => {
-        const position = horizontalViewPort().calculatePosition(event.clientX);
-        const existingNote = currentNote();
-        const midi = context.mode === "keys"
-            ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
-            : existingNote?.midi ?? 60;
+    const calculateNoteDragValues = (event) => {
         const targetTrackIndex = context.mode === "tracks"
             ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
-            : context.selectedTrackIndex ?? 0;
-        const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
-        const velocity = 127;
-        const ticks = existingNote?.ticks ?? eventPositionTicks;
-        const durationTicks = existingNote?.ticks
-            ? eventPositionTicks - existingNote?.ticks
-            : gridDivisionTicks();
-        const note = { midi, ticks, durationTicks, velocity };
-        if (existingNote) {
-            context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
-            return currentNoteIndex();
+            : currentNoteTrackIndex() > -1
+                ? currentNoteTrackIndex()
+                : context.selectedTrackIndex;
+        const midi = context.mode === "keys"
+            ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY))
+            : getInitialNote()?.midi ?? 60;
+        const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
+        return {
+            targetTrackIndex,
+            midi,
+            horiontalPosition,
+        };
+    };
+    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 updatedNote = {
+            ...note,
+            midi,
+            ...(noteDragMode() === "move" && { ticks }),
+            ...(noteDragMode() === "trimStart" && {
+                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),
+            }),
+            ...(noteDragMode() === "trimEnd" && {
+                ticks: ticks < note.ticks ? ticks : note.ticks,
+                durationTicks: ticks < note.ticks
+                    ? note.ticks - ticks
+                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
+            }),
+        };
+        const previousTrackIndex = currentNoteTrackIndex();
+        const previousNoteIndex = currentNoteIndex();
+        if (targetTrackIndex === previousTrackIndex) {
+            context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
         }
         else {
-            return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
+            if (context.onInsertNote) {
+                context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+                const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+                setCurrentNoteTrackIndex(targetTrackIndex);
+                setCurrentNoteIndex(newNoteIndex);
+            }
         }
     };
-    const [isDragging, setIsDragging] = createSignal(false);
-    const [noteDragMode, setNoteDragMode] = createSignal();
-    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
-    const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
-    const [isMouseDown, setIsMouseDown] = createSignal(false);
-    const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
+    const stopDragging = () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", stopDragging);
+        setIsDragging(false);
+        setCurrentNoteIndex(-1);
+        setCurrentNoteTrackIndex(-1);
+    };
+    const startDragging = () => {
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", stopDragging);
+    };
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
-    return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(event) => {
-            batch(() => {
-                setIsMouseDown(true);
-                const index = insertOrUpdateNote(event);
-                setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
-                setCurrentNoteIndex(index);
-            });
-        }} onMouseMove={(event) => {
-            if (isDragging())
-                return;
-            if (!isMouseDown()) {
-                setNoteDragMode(undefined);
-                return;
-            }
-            const index = insertOrUpdateNote(event);
-            setCurrentNoteIndex(index);
-        }} onMouseUp={(event) => {
-            setIsMouseDown(false);
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
-        }} onDblClick={(event) => {
-            insertOrUpdateNote(event);
-        }} onClick={(event) => {
-            if (currentNote()) {
-                setCurrentNoteIndex(-1);
-                return;
-            }
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
+    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();
+            const newNote = {
+                midi,
+                ticks,
+                durationTicks,
+                velocity: 100,
+            };
+            const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
+            setIsDragging(true);
+            setCurrentNoteTrackIndex(targetTrackIndex);
+            setCurrentNoteIndex(newNoteIndex);
+            setInitialNote(newNote);
+            setDiffPosition(0);
+            setNoteDragMode("trimEnd");
+            startDragging();
         }}>
       <For each={context.tracks}>
         {(track, trackIndex) => {
@@ -104,63 +135,15 @@ const PianoRollNotes = (props) => {
                             context.onRemoveNote?.(trackIndex(), noteIndex());
                         }} onMouseDown={(event) => {
                             event.stopPropagation();
+                            const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
+                            setDiffPosition(noteDragMode() === "trimEnd"
+                                ? -(note.ticks + note.durationTicks - initialPosition)
+                                : initialPosition - note.ticks);
                             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"
-                                    ? clamp(Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)), 0, context.tracks.length - 1)
-                                    : 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);
+                            setInitialNote(note);
+                            startDragging();
                         }} style={{
                             "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
                             top: `${verticalVirtualDimensions().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,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;