solid-pianoroll 0.0.22 → 0.0.24

package/dist/esm/index.js

@@ -27,9 +27,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$5 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  height: 100%;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n.PianoRoll-module_PianoRollLeftColumn__S6SZQ {\n  display: flex;\n  width: 30%;\n  max-width: 250px;\n}\n";
-var styles$5 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7","PianoRollLeftColumn":"PianoRoll-module_PianoRollLeftColumn__S6SZQ"};
-styleInject(css_248z$5);
+var css_248z$6 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  height: 100%;\n  user-select: none;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n.PianoRoll-module_PianoRollLeftColumn__S6SZQ {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  max-width: 250px;\n  margin-top: 30px;\n}\n.PianoRoll-module_PianoRollLeftColumn__S6SZQ.PianoRoll-module_showTrackList__mqsrT {\n  width: 30%;\n  margin-top: 0;\n}\n\n.PianoRoll-module_PianoRollRightColumn__V98HV {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  flex: 1;\n  height: 100%;\n}\n";
+var styles$6 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7","PianoRollLeftColumn":"PianoRoll-module_PianoRollLeftColumn__S6SZQ","showTrackList":"PianoRoll-module_showTrackList__mqsrT","PianoRollRightColumn":"PianoRoll-module_PianoRollRightColumn__V98HV"};
+styleInject(css_248z$6);
 
 const defaultState = {
   ppq: 0,
@@ -40,23 +40,46 @@ const defaultState = {
   verticalPosition: 44,
   verticalTrackZoom: 0.5,
   verticalTrackPosition: 0,
+  playHeadPosition: 0,
   gridDivision: 4,
   snapToGrid: true,
   duration: 0,
   tracks: [],
   selectedTrackIndex: 0,
-  pressedKeys: {}
+  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`;
-const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown"];
+const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown", "snapValueToGridIfEnabled"];
 const createPianoRollstate = initialState => {
   const [state, setState] = createStore({
     ...defaultState,
     ...initialState
   });
   const handlers = Object.fromEntries(Object.entries(state).map(entry => {
-    return [propNameToHandlerName(entry[0]), value => setState(entry[0], value)];
+    const handlerName = propNameToHandlerName(entry[0]);
+    return [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) return;
@@ -98,6 +121,10 @@ 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,
@@ -105,7 +132,9 @@ const createPianoRollstate = initialState => {
     onRemoveNote,
     onNoteDown,
     onNoteUp,
-    isKeyDown
+    isKeyDown,
+    snapValueToGridIfEnabled,
+    onPlayheadPositionChange
   });
 };
 
@@ -118,9 +147,9 @@ const usePianoRollContext = () => {
 };
 const splitContextProps = allProps => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
 
-var css_248z$4 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 200ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n  transform: rotateX(0deg);\n  perspective: 100px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n  border: 1px black outset;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n  border-top-right-radius: 4%;\n  border-bottom-right-radius: 4%;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n  transform: rotateX(0deg) rotateY(20deg);\n}\n";
-var styles$4 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","down":"PianoRollKeys-module_down__GcNeZ"};
-styleInject(css_248z$4);
+var css_248z$5 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n  background: black;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 200ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n  transform: rotateX(0deg);\n  perspective: 100px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n  border: 1px black outset;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n  border-top-right-radius: 4%;\n  border-bottom-right-radius: 4%;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n  transform: rotateX(0deg) rotateY(20deg);\n}\n";
+var styles$5 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","down":"PianoRollKeys-module_down__GcNeZ"};
+styleInject(css_248z$5);
 
 function createViewPortDimension(getState) {
   const getStateWithFunctions = () => {
@@ -210,11 +239,11 @@ const useViewPortDimension = name => {
   return viewPort;
 };
 
-var css_248z$3 = ".ScrollZoomContainer-module_ScrollZoomContainer__o2bRt {\n  height: 100%;\n  width: 100%;\n  z-index: 4;\n}\n";
-var styles$3 = {"ScrollZoomContainer":"ScrollZoomContainer-module_ScrollZoomContainer__o2bRt"};
-styleInject(css_248z$3);
+var css_248z$4 = ".ScrollZoomContainer-module_ScrollZoomContainer__o2bRt {\n  height: 100%;\n  width: 100%;\n  z-index: 4;\n}\n";
+var styles$4 = {"ScrollZoomContainer":"ScrollZoomContainer-module_ScrollZoomContainer__o2bRt"};
+styleInject(css_248z$4);
 
-const _tmpl$$7 = /*#__PURE__*/template(`<div><div><div><div></div></div></div></div>`, 8);
+const _tmpl$$8 = /*#__PURE__*/template(`<div><div><div><div></div></div></div></div>`, 8);
 const ScrollZoomContainer = props => {
   let scrollContentRef;
   const [ownProps, divProps] = splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
@@ -250,11 +279,11 @@ 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));
       }
@@ -286,7 +315,7 @@ const ScrollZoomContainer = props => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$$7.cloneNode(true),
+    const _el$ = _tmpl$$8.cloneNode(true),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild;
@@ -303,7 +332,7 @@ const ScrollZoomContainer = props => {
       },
       get classList() {
         return {
-          [styles$3.ScrollZoomContainer]: true,
+          [styles$4.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
@@ -336,7 +365,7 @@ const ScrollZoomContainer = props => {
   })();
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
+const _tmpl$$7 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollKeys = () => {
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontalKeys"));
@@ -353,7 +382,7 @@ const PianoRollKeys = () => {
     }
   });
   return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
+    const _el$ = _tmpl$$7.cloneNode(true);
     insert(_el$, createComponent(ScrollZoomContainer, {
       horizontalDimensionName: "horizontalKeys",
       showScrollbar: false,
@@ -367,10 +396,10 @@ const PianoRollKeys = () => {
             const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
             return createComponent(Show, {
               get when() {
-                return virtualDimensions().size > 0;
+                return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$2 = _tmpl$$6.cloneNode(true);
+                const _el$2 = _tmpl$$7.cloneNode(true);
                 _el$2.addEventListener("mouseleave", () => {
                   if (isMouseDown()) {
                     context.onNoteUp(context.selectedTrackIndex, key().number);
@@ -390,16 +419,16 @@ const PianoRollKeys = () => {
                 };
                 effect(_p$ => {
                   const _v$3 = {
-                      [styles$4["Key"]]: true,
-                      [styles$4["black"]]: key().isBlack,
-                      [styles$4["white"]]: !key().isBlack,
-                      [styles$4["down"]]: isDown()
+                      [styles$5["Key"]]: true,
+                      [styles$5["black"]]: key().isBlack,
+                      [styles$5["white"]]: !key().isBlack,
+                      [styles$5["down"]]: isDown()
                     },
                     _v$4 = key().name,
                     _v$5 = key().number % 12,
                     _v$6 = `${virtualDimensions().offset - virtualDimensions().size * (!key().isBlack ? nextIsBlack ? 1 / 2 : 0 : 0)}px`,
                     _v$7 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
-                    _v$8 = [`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(", ");
+                    _v$8 = `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` : "";
                   _p$._v$3 = classList(_el$2, _v$3, _p$._v$3);
                   _v$4 !== _p$._v$4 && setAttribute(_el$2, "title", _p$._v$4 = _v$4);
                   _v$5 !== _p$._v$5 && setAttribute(_el$2, "data-index", _p$._v$5 = _v$5);
@@ -423,7 +452,7 @@ const PianoRollKeys = () => {
       }
     }));
     effect(_p$ => {
-      const _v$ = styles$4.PianoRollKeys,
+      const _v$ = styles$5.PianoRollKeys,
         _v$2 = `${horizontalViewPort().pixelSize}px`;
       _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
       _v$2 !== _p$._v$2 && _el$.style.setProperty("width", _p$._v$2 = _v$2);
@@ -446,11 +475,11 @@ const keys = Array.from({
 }));
 delegateEvents(["mousedown", "mouseup"]);
 
-var css_248z$2 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: grab;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb {\n  position: absolute;\n  box-sizing: border-box;\n  border-width: 0.5px;\n  border-style: solid;\n  border-color: #a00;\n  cursor: move;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimStart__vuBlj {\n  cursor: w-resize;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimEnd__zPdjr {\n  cursor: e-resize;\n}";
-var styles$2 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
-styleInject(css_248z$2);
+var css_248z$3 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: grab;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb {\n  position: absolute;\n  box-sizing: border-box;\n  border-width: 0.5px;\n  border-style: solid;\n  border-color: #a00;\n  cursor: move;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimStart__vuBlj {\n  cursor: w-resize;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimEnd__zPdjr {\n  cursor: e-resize;\n}";
+var styles$3 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
+styleInject(css_248z$3);
 
-const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
+const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
@@ -462,7 +491,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) : currentNoteTrackIndex() > -1 ? currentNoteTrackIndex() : context.selectedTrackIndex;
     const midi = context.mode === "keys" ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY)) : getInitialNote()?.midi ?? 60;
@@ -474,6 +502,8 @@ const PianoRollNotes = props => {
     };
   };
   const handleMouseMove = mouseMoveEvent => {
+    mouseMoveEvent.preventDefault();
+    mouseMoveEvent.stopPropagation();
     const note = getInitialNote();
     if (!note) return;
     const {
@@ -481,7 +511,7 @@ const PianoRollNotes = props => {
       midi,
       horiontalPosition
     } = calculateNoteDragValues(mouseMoveEvent);
-    const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+    const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
     const updatedNote = {
       ...note,
       midi,
@@ -490,11 +520,11 @@ const PianoRollNotes = props => {
       }),
       ...(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)
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : 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)
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
       })
     };
     const previousTrackIndex = currentNoteTrackIndex();
@@ -514,23 +544,27 @@ const PianoRollNotes = props => {
     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$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
+    return noteDragMode ? [styles$3.Note, styles$3[noteDragMode]] : [styles$3.Note];
   };
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
+    const _el$ = _tmpl$$6.cloneNode(true);
     _el$.$$mousedown = 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,
@@ -571,7 +605,7 @@ const PianoRollNotes = props => {
                     return memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
                   },
                   get children() {
-                    const _el$2 = _tmpl$$5.cloneNode(true);
+                    const _el$2 = _tmpl$$6.cloneNode(true);
                     _el$2.$$mousedown = event => {
                       event.stopPropagation();
                       const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
@@ -597,17 +631,19 @@ const PianoRollNotes = props => {
                     setAttribute(_el$2, "draggable", false);
                     effect(_p$ => {
                       const _v$ = getClasses(noteDragMode()).join(" "),
-                        _v$2 = `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
-                        _v$3 = `${verticalVirtualDimensions().offset}px`,
-                        _v$4 = `${verticalVirtualDimensions().size}px`,
-                        _v$5 = `${horizontalDimensions().offset}px`,
-                        _v$6 = `${horizontalDimensions().size}px`;
+                        _v$2 = `${track.color}`,
+                        _v$3 = (note.velocity / 128 + 2) / 3,
+                        _v$4 = `${verticalVirtualDimensions().offset}px`,
+                        _v$5 = `${verticalVirtualDimensions().size}px`,
+                        _v$6 = `${horizontalDimensions().offset}px`,
+                        _v$7 = `${horizontalDimensions().size}px`;
                       _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
                       _v$2 !== _p$._v$2 && _el$2.style.setProperty("background-color", _p$._v$2 = _v$2);
-                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
-                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
-                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("left", _p$._v$5 = _v$5);
-                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("width", _p$._v$6 = _v$6);
+                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("opacity", _p$._v$3 = _v$3);
+                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("top", _p$._v$4 = _v$4);
+                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("height", _p$._v$5 = _v$5);
+                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("left", _p$._v$6 = _v$6);
+                      _v$7 !== _p$._v$7 && _el$2.style.setProperty("width", _p$._v$7 = _v$7);
                       return _p$;
                     }, {
                       _v$: undefined,
@@ -615,7 +651,8 @@ const PianoRollNotes = props => {
                       _v$3: undefined,
                       _v$4: undefined,
                       _v$5: undefined,
-                      _v$6: undefined
+                      _v$6: undefined,
+                      _v$7: undefined
                     });
                     return _el$2;
                   }
@@ -627,21 +664,19 @@ const PianoRollNotes = props => {
       }
     }));
     effect(_$p => classList(_el$, {
-      [styles$2.PianoRollNotes]: true
+      [styles$3.PianoRollNotes]: true
     }, _$p));
     return _el$;
   })();
 };
 delegateEvents(["mousedown", "mousemove", "dblclick"]);
 
-var css_248z$1 = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs {\n  position: absolute;\n  border-style: solid;\n  border-color: gray;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n}\n";
-var styles$1 = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Row":"PianoRollGrid-module_PianoRollGrid-Row__nRMCs","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E"};
-styleInject(css_248z$1);
+var css_248z$2 = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs {\n  position: absolute;\n  border-style: solid;\n  border-color: gray;\n  width: 100%;\n  border-width: 0;\n}\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_IsDark__jRyyy {\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_Key__8ZwPN {\n  border-width: 0px 1px 0px 0;\n}\n.PianoRollGrid-module_PianoRollGrid-Row__nRMCs.PianoRollGrid-module_IsBlackAndNextIsWhite__UF8O2 {\n  background-color: rgba(0, 0, 0, 0.2);\n  border-width: 0.1px 1px 0.1px 0;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n  border-left-color: #bbb;\n  background: #ccc;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E.PianoRollGrid-module_Highlighted__N1J6q {\n  background: #ddd;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Time__jLz3E.PianoRollGrid-module_HighlightedBorder__Vnrff {\n  border-left-color: gray;\n}\n";
+var styles$2 = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Row":"PianoRollGrid-module_PianoRollGrid-Row__nRMCs","IsDark":"PianoRollGrid-module_IsDark__jRyyy","Key":"PianoRollGrid-module_Key__8ZwPN","IsBlackAndNextIsWhite":"PianoRollGrid-module_IsBlackAndNextIsWhite__UF8O2","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E","Highlighted":"PianoRollGrid-module_Highlighted__N1J6q","HighlightedBorder":"PianoRollGrid-module_HighlightedBorder__Vnrff"};
+styleInject(css_248z$2);
 
-const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollGrid = () => {
+const usePianoRollGrid = () => {
   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);
@@ -662,43 +697,62 @@ const PianoRollGrid = () => {
     const startIndex = Math.floor(context.position / gridDivisorTicks());
     return Array.from({
       length: numberOfLines
-    }).map((_, index) => ({
-      index: index + startIndex,
-      ticks: (index + startIndex) * gridDivisorTicks()
-    }));
+    }).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;
+};
+
+const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
+const PianoRollGrid = () => {
+  const context = usePianoRollContext();
+  const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
+  const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+  const gridArray = usePianoRollGrid();
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true);
+    const _el$ = _tmpl$$5.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
       },
       children: entry => {
-        const virtualDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(entry().ticks, gridDivisorTicks()));
         return createComponent(Show, {
           get when() {
-            return virtualDimensions().size > 0;
+            return horizontalViewPort().isVisible(entry().virtualDimensions);
           },
           get children() {
-            const _el$2 = _tmpl$$4.cloneNode(true);
+            const _el$2 = _tmpl$$5.cloneNode(true);
             effect(_p$ => {
-              const _v$ = styles$1["PianoRollGrid-Time"],
-                _v$2 = Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
-                _v$3 = `${virtualDimensions().offset}px`,
-                _v$4 = `${virtualDimensions().size}px`,
-                _v$5 = entry().index * gridDivisorTicks() % selectedGridDivisorTicks() === 0 ? "gray" : "#bbb";
-              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
-              _v$2 !== _p$._v$2 && _el$2.style.setProperty("background", _p$._v$2 = _v$2);
-              _v$3 !== _p$._v$3 && _el$2.style.setProperty("left", _p$._v$3 = _v$3);
-              _v$4 !== _p$._v$4 && _el$2.style.setProperty("width", _p$._v$4 = _v$4);
-              _v$5 !== _p$._v$5 && _el$2.style.setProperty("border-left-color", _p$._v$5 = _v$5);
+              const _v$ = {
+                  [styles$2["PianoRollGrid-Time"]]: true,
+                  [styles$2["Highlighted"]]: entry().isHighlighted,
+                  [styles$2["HighlightedBorder"]]: entry().hasHighlightedBorder
+                },
+                _v$2 = `${entry().virtualDimensions.offset}px`,
+                _v$3 = `${entry().virtualDimensions.size}px`;
+              _p$._v$ = classList(_el$2, _v$, _p$._v$);
+              _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
+              _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
               return _p$;
             }, {
               _v$: undefined,
               _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined
+              _v$3: undefined
             });
             return _el$2;
           }
@@ -716,29 +770,27 @@ const PianoRollGrid = () => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
             return createComponent(Show, {
               get when() {
-                return virtualDimensions().size > 0;
+                return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$3 = _tmpl$$4.cloneNode(true);
-                _el$3.style.setProperty("width", "100%");
+                const _el$3 = _tmpl$$5.cloneNode(true);
                 effect(_p$ => {
-                  const _v$6 = styles$1["PianoRollGrid-Row"],
-                    _v$7 = `${virtualDimensions().offset}px`,
-                    _v$8 = `${virtualDimensions().size}px`,
-                    _v$9 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
-                    _v$10 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
-                  _v$6 !== _p$._v$6 && className(_el$3, _p$._v$6 = _v$6);
-                  _v$7 !== _p$._v$7 && _el$3.style.setProperty("top", _p$._v$7 = _v$7);
-                  _v$8 !== _p$._v$8 && _el$3.style.setProperty("height", _p$._v$8 = _v$8);
-                  _v$9 !== _p$._v$9 && _el$3.style.setProperty("background-color", _p$._v$9 = _v$9);
-                  _v$10 !== _p$._v$10 && _el$3.style.setProperty("border-width", _p$._v$10 = _v$10);
+                  const _v$4 = {
+                      [styles$2["PianoRollGrid-Row"]]: true,
+                      [styles$2["Key"]]: true,
+                      [styles$2["IsDark"]]: key().isBlack,
+                      [styles$2["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+                    },
+                    _v$5 = `${virtualDimensions().offset}px`,
+                    _v$6 = `${virtualDimensions().size}px`;
+                  _p$._v$4 = classList(_el$3, _v$4, _p$._v$4);
+                  _v$5 !== _p$._v$5 && _el$3.style.setProperty("top", _p$._v$5 = _v$5);
+                  _v$6 !== _p$._v$6 && _el$3.style.setProperty("height", _p$._v$6 = _v$6);
                   return _p$;
                 }, {
-                  _v$6: undefined,
-                  _v$7: undefined,
-                  _v$8: undefined,
-                  _v$9: undefined,
-                  _v$10: undefined
+                  _v$4: undefined,
+                  _v$5: undefined,
+                  _v$6: undefined
                 });
                 return _el$3;
               }
@@ -760,27 +812,25 @@ const PianoRollGrid = () => {
             const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(index(), 1));
             return createComponent(Show, {
               get when() {
-                return virtualDimensions().size > 0;
+                return verticalViewPort().isVisible(virtualDimensions());
               },
               get children() {
-                const _el$4 = _tmpl$$4.cloneNode(true);
-                _el$4.style.setProperty("width", "100%");
-                _el$4.style.setProperty("border-width", "0");
+                const _el$4 = _tmpl$$5.cloneNode(true);
                 effect(_p$ => {
-                  const _v$11 = styles$1["PianoRollGrid-Row"],
-                    _v$12 = `${virtualDimensions().offset}px`,
-                    _v$13 = `${virtualDimensions().size}px`,
-                    _v$14 = index() % 2 === 0 ? "rgba(0,0,0,0.2)" : "none";
-                  _v$11 !== _p$._v$11 && className(_el$4, _p$._v$11 = _v$11);
-                  _v$12 !== _p$._v$12 && _el$4.style.setProperty("top", _p$._v$12 = _v$12);
-                  _v$13 !== _p$._v$13 && _el$4.style.setProperty("height", _p$._v$13 = _v$13);
-                  _v$14 !== _p$._v$14 && _el$4.style.setProperty("background-color", _p$._v$14 = _v$14);
+                  const _v$7 = {
+                      [styles$2["PianoRollGrid-Row"]]: true,
+                      [styles$2["IsDark"]]: index() % 2 === 0
+                    },
+                    _v$8 = `${virtualDimensions().offset}px`,
+                    _v$9 = `${virtualDimensions().size}px`;
+                  _p$._v$7 = classList(_el$4, _v$7, _p$._v$7);
+                  _v$8 !== _p$._v$8 && _el$4.style.setProperty("top", _p$._v$8 = _v$8);
+                  _v$9 !== _p$._v$9 && _el$4.style.setProperty("height", _p$._v$9 = _v$9);
                   return _p$;
                 }, {
-                  _v$11: undefined,
-                  _v$12: undefined,
-                  _v$13: undefined,
-                  _v$14: undefined
+                  _v$7: undefined,
+                  _v$8: undefined,
+                  _v$9: undefined
                 });
                 return _el$4;
               }
@@ -789,47 +839,19 @@ const PianoRollGrid = () => {
         });
       }
     }), null);
-    effect(() => className(_el$, styles$1.PianoRollGrid));
+    effect(() => className(_el$, styles$2.PianoRollGrid));
     return _el$;
   })();
 };
 
-const defaultRect = {
-  left: 0,
-  width: 0,
-  top: 0,
-  height: 0,
-  bottom: 0,
-  right: 0,
-  x: 0,
-  y: 0
-};
-function useBoundingClientRect(containerRef) {
-  const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
-  createEffect(() => {
-    const container = containerRef();
-    if (!container) return;
-    const updateBoundingClientRect = () => {
-      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
-    };
-    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
-    resizeObserver.observe(container);
-    updateBoundingClientRect();
-    return () => {
-      resizeObserver.disconnect();
-    };
-  });
-  return boundingClientRect;
-}
-
-const _tmpl$$3 = /*#__PURE__*/template(`<input step="0.01">`, 1);
+const _tmpl$$4 = /*#__PURE__*/template(`<input step="0.01">`, 1);
 const ZoomSliderControl = props => {
   const propsWithDefaults = mergeProps({
     orientation: "horizontal"
   }, props);
   const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
   return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true);
+    const _el$ = _tmpl$$4.cloneNode(true);
     spread(_el$, mergeProps$1({
       get min() {
         return dimension().minZoom;
@@ -841,7 +863,10 @@ const ZoomSliderControl = props => {
       get value() {
         return dimension().zoom;
       },
-      "onInput": event => dimension().onZoomChange?.(event.currentTarget.valueAsNumber),
+      "onInput": event => {
+        const value = event.currentTarget.valueAsNumber;
+        dimension().onZoomChange?.(value);
+      },
       "type": "range"
     }, () => ({
       orient: propsWithDefaults.orientation
@@ -871,17 +896,17 @@ const ZoomSliderControl = props => {
   })();
 };
 
-var css_248z = ".PianoRollTrackList-module_PianoRollTrackList__-sDf0 {\n  position: relative;\n  height: 100%;\n  flex: 1;\n}\n\n.PianoRollTrackList-module_Track__mZP1K {\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  cursor: \"pointer\";\n  background: \"lightgrey\";\n}\n.PianoRollTrackList-module_Track__mZP1K.PianoRollTrackList-module_selected__0b-mf {\n  background: \"gray\";\n}";
-var styles = {"PianoRollTrackList":"PianoRollTrackList-module_PianoRollTrackList__-sDf0","Track":"PianoRollTrackList-module_Track__mZP1K","selected":"PianoRollTrackList-module_selected__0b-mf"};
-styleInject(css_248z);
+var css_248z$1 = ".PianoRollTrackList-module_PianoRollTrackList__-sDf0 {\n  position: relative;\n  height: 100%;\n  flex: 1;\n}\n\n.PianoRollTrackList-module_Track__mZP1K {\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  padding: 2px;\n  cursor: pointer;\n  background: lightgrey;\n}\n.PianoRollTrackList-module_Track__mZP1K.PianoRollTrackList-module_selected__0b-mf {\n  background: gray;\n}";
+var styles$1 = {"PianoRollTrackList":"PianoRollTrackList-module_PianoRollTrackList__-sDf0","Track":"PianoRollTrackList-module_Track__mZP1K","selected":"PianoRollTrackList-module_selected__0b-mf"};
+styleInject(css_248z$1);
 
-const _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2),
+const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2),
   _tmpl$2$1 = /*#__PURE__*/template(`<div> </div>`, 2);
 const PianoRollTrackList = () => {
   const viewPort = createMemo(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$$2.cloneNode(true);
+    const _el$ = _tmpl$$3.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return context.tracks;
@@ -900,8 +925,8 @@ const PianoRollTrackList = () => {
             insert(_el$2, () => track().name || "[unnamed track]", null);
             effect(_p$ => {
               const _v$ = {
-                  [styles["Track"]]: true,
-                  [styles["selected"]]: index === context.selectedTrackIndex
+                  [styles$1["Track"]]: true,
+                  [styles$1["selected"]]: index === context.selectedTrackIndex
                 },
                 _v$2 = track().name,
                 _v$3 = `${virtualDimensions().offset}px`,
@@ -922,80 +947,228 @@ const PianoRollTrackList = () => {
         });
       }
     }));
-    effect(() => className(_el$, styles.PianoRollTrackList));
+    effect(() => className(_el$, styles$1.PianoRollTrackList));
     return _el$;
   })();
 };
 delegateEvents(["click"]);
 
-const _tmpl$$1 = /*#__PURE__*/template(`<div><div></div></div>`, 4),
-  _tmpl$2 = /*#__PURE__*/template(`<div></div>`, 2);
+const PianoRollScrollZoomViewPort = props => {
+  const zoomFactor = 500;
+  const context = usePianoRollContext();
+  return createComponent(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
+      })
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+const defaultRect = {
+  left: 0,
+  width: 0,
+  top: 0,
+  height: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0
+};
+function useBoundingClientRect(containerRef) {
+  const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
+  createEffect(() => {
+    const container = containerRef();
+    if (!container) return;
+    const updateBoundingClientRect = () => {
+      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
+    };
+    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
+    resizeObserver.observe(container);
+    updateBoundingClientRect();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  return boundingClientRect;
+}
+
+const PianoRollNotesScroller = props => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = createSignal();
+  const clientRect = useBoundingClientRect(ref);
+  createEffect(() => {
+    context.onNotesScrollerClientRectChange(clientRect());
+  });
+  return createComponent(ScrollZoomContainer, {
+    ref: setRef,
+    get verticalDimensionName() {
+      return context.mode === "keys" ? "vertical" : "verticalTracks";
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+const PianoRollTrackListScroller = props => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = createSignal();
+  const clientRect = useBoundingClientRect(ref);
+  createEffect(() => {
+    context.onTracksScrollerClientRectChange(clientRect());
+  });
+  return createComponent(ScrollZoomContainer, {
+    ref: setRef,
+    horizontalDimensionName: "horizontalTracks",
+    verticalDimensionName: "verticalTracks",
+    get showScrollbar() {
+      return context.mode === "keys";
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+var css_248z = ".PianoRollScale-module_PianoRollScale__5wGRm {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ {\n  position: absolute;\n  box-sizing: border-box;\n  top: 0px;\n  height: 100%;\n  border-left-style: solid;\n  border-left-width: 0.5px;\n  border-left-color: x#666;\n  border-bottom-color: #333;\n  border-bottom-style: solid;\n  border-bottom-width: 0.5px;\n  background: #777;\n  display: flex;\n  align-items: center;\n}\n\n.PianoRollScale-module_PianoRollScale-Label__aoRi6 {\n  position: absolute;\n  z-index: 1;\n  color: #ccc;\n  margin-left: 3px;\n  font-size: 0.8em;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ.PianoRollScale-module_Highlighted__ziWn5 {\n  background: #666;\n}\n\n.PianoRollScale-module_PianoRollScale-Time__03hGQ.PianoRollScale-module_HighlightedBorder__-OoZE {\n  border-left-color: #111;\n}\n";
+var styles = {"PianoRollScale":"PianoRollScale-module_PianoRollScale__5wGRm","PianoRollScale-Time":"PianoRollScale-module_PianoRollScale-Time__03hGQ","PianoRollScale-Label":"PianoRollScale-module_PianoRollScale-Label__aoRi6","Highlighted":"PianoRollScale-module_Highlighted__ziWn5","HighlightedBorder":"PianoRollScale-module_HighlightedBorder__-OoZE"};
+styleInject(css_248z);
+
+const _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2);
+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 (() => {
+    const _el$ = _tmpl$$2.cloneNode(true);
+    _el$.$$mousedown = event => {
+      updatePlayheadPosition(event);
+      const handleMouseUp = () => {
+        window.removeEventListener("mousemove", updatePlayheadPosition);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+      window.addEventListener("mousemove", updatePlayheadPosition);
+      window.addEventListener("mouseup", handleMouseUp);
+    };
+    insert(_el$, createComponent(Index, {
+      get each() {
+        return grid();
+      },
+      children: entry => {
+        return createComponent(Show, {
+          get when() {
+            return horizontalViewPort().isVisible(entry().virtualDimensions);
+          },
+          get children() {
+            const _el$2 = _tmpl$$2.cloneNode(true);
+            insert(_el$2, createComponent(Show, {
+              get when() {
+                return entry().showLabel;
+              },
+              get children() {
+                const _el$3 = _tmpl$$2.cloneNode(true);
+                insert(_el$3, () => entry().label);
+                effect(() => className(_el$3, styles["PianoRollScale-Label"]));
+                return _el$3;
+              }
+            }));
+            effect(_p$ => {
+              const _v$ = {
+                  [styles["PianoRollScale-Time"]]: true,
+                  [styles["Highlighted"]]: entry().isHighlighted,
+                  [styles["HighlightedBorder"]]: entry().hasHighlightedBorder
+                },
+                _v$2 = `${entry().virtualDimensions.offset}px`,
+                _v$3 = `${entry().virtualDimensions.size}px`;
+              _p$._v$ = classList(_el$2, _v$, _p$._v$);
+              _v$2 !== _p$._v$2 && _el$2.style.setProperty("left", _p$._v$2 = _v$2);
+              _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined
+            });
+            return _el$2;
+          }
+        });
+      }
+    }));
+    effect(() => className(_el$, styles.PianoRollScale));
+    return _el$;
+  })();
+};
+delegateEvents(["mousedown"]);
+
+const _tmpl$$1 = /*#__PURE__*/template(`<div><button><div></div></button></div>`, 6),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div></div><div></div></div>`, 6),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div><div></div></div></div>`, 6),
+  _tmpl$4 = /*#__PURE__*/template(`<div></div>`, 2);
 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 createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
-      const _el$ = _tmpl$2.cloneNode(true);
+      const _el$ = _tmpl$4.cloneNode(true);
       spread(_el$, mergeProps$1(divProps, {
         get ["class"]() {
-          return styles$5.PianoRoll;
+          return styles$6.PianoRoll;
         }
       }), false, true);
-      insert(_el$, createComponent(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
-          })
-        },
+      insert(_el$, createComponent(PianoRollScrollZoomViewPort, {
         get children() {
           return [(() => {
-            const _el$2 = _tmpl$$1.cloneNode(true),
-              _el$3 = _el$2.firstChild;
+            const _el$2 = _tmpl$3.cloneNode(true),
+              _el$3 = _el$2.firstChild,
+              _el$7 = _el$3.firstChild;
             insert(_el$2, createComponent(ZoomSliderControl, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
@@ -1005,20 +1178,37 @@ const PianoRoll = allProps => {
                 return context.showTrackList;
               },
               get children() {
-                return createComponent(ScrollZoomContainer, {
-                  ref: setTracksScrollerRef,
-                  horizontalDimensionName: "horizontalTracks",
-                  verticalDimensionName: "verticalTracks",
-                  get showScrollbar() {
-                    return context.mode === "keys";
-                  },
+                const _el$4 = _tmpl$$1.cloneNode(true),
+                  _el$5 = _el$4.firstChild,
+                  _el$6 = _el$5.firstChild;
+                _el$4.style.setProperty("height", "30px");
+                _el$4.style.setProperty("border-right", "1px black solid");
+                _el$5.$$click = () => context.onModeChange(context.mode === "keys" ? "tracks" : "keys");
+                _el$5.style.setProperty("font-size", "16px");
+                _el$5.style.setProperty("line-height", "16px");
+                _el$5.style.setProperty("cursor", "pointer");
+                _el$5.style.setProperty("overflow", "hidden");
+                insert(_el$6, () => context.mode === "keys" ? "≡" : "🎹");
+                effect(() => setAttribute(_el$5, "title", context.mode === "keys" ? "Tracks Mode" : "Keys Mode"));
+                return _el$4;
+              }
+            }), _el$7);
+            _el$7.style.setProperty("flex", "1");
+            _el$7.style.setProperty("display", "flex");
+            _el$7.style.setProperty("overflow", "hidden");
+            insert(_el$7, createComponent(Show, {
+              get when() {
+                return context.showTrackList;
+              },
+              get children() {
+                return createComponent(PianoRollTrackListScroller, {
                   get children() {
                     return createComponent(PianoRollTrackList, {});
                   }
                 });
               }
             }), null);
-            insert(_el$3, createComponent(Show, {
+            insert(_el$7, createComponent(Show, {
               get when() {
                 return context.mode === "keys";
               },
@@ -1026,13 +1216,26 @@ const PianoRoll = allProps => {
                 return createComponent(PianoRollKeys, {});
               }
             }), null);
-            insert(_el$2, createComponent(ScrollZoomContainer, {
-              ref: setNotesScrollerRef,
-              get verticalDimensionName() {
-                return context.mode === "keys" ? "vertical" : "verticalTracks";
-              },
+            insert(_el$2, createComponent(PianoRollNotesScroller, {
               get children() {
-                return [memo(() => allProps.children), createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
+                return [memo(() => allProps.children), (() => {
+                  const _el$8 = _tmpl$2.cloneNode(true),
+                    _el$9 = _el$8.firstChild,
+                    _el$10 = _el$9.nextSibling;
+                  _el$8.style.setProperty("width", "100%");
+                  _el$8.style.setProperty("display", "flex");
+                  _el$8.style.setProperty("height", "100%");
+                  _el$8.style.setProperty("flex-direction", "column");
+                  _el$8.style.setProperty("overflow", "hidden");
+                  _el$9.style.setProperty("height", "30px");
+                  insert(_el$9, createComponent(PianoRollScale, {}));
+                  _el$10.style.setProperty("flex", "1");
+                  _el$10.style.setProperty("position", "relative");
+                  _el$10.style.setProperty("overflow", "hidden");
+                  insert(_el$10, createComponent(PianoRollGrid, {}), null);
+                  insert(_el$10, createComponent(PianoRollNotes, {}), null);
+                  return _el$8;
+                })()];
               }
             }), null);
             insert(_el$2, createComponent(ZoomSliderControl, {
@@ -1042,10 +1245,13 @@ const PianoRoll = allProps => {
               }
             }), null);
             effect(_p$ => {
-              const _v$ = styles$5.PianoRollContainer,
-                _v$2 = styles$5.PianoRollLeftColumn;
+              const _v$ = styles$6.PianoRollContainer,
+                _v$2 = {
+                  [styles$6.PianoRollLeftColumn]: true,
+                  [styles$6.showTrackList]: context.showTrackList
+                };
               _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
-              _v$2 !== _p$._v$2 && className(_el$3, _p$._v$2 = _v$2);
+              _p$._v$2 = classList(_el$3, _v$2, _p$._v$2);
               return _p$;
             }, {
               _v$: undefined,
@@ -1056,7 +1262,7 @@ const PianoRoll = allProps => {
             orientation: "horizontal",
             get style() {
               return {
-                "margin-left": `${tracksScrollerClientRect().width + 24}px`,
+                "margin-left": `${context.tracksScrollerClientRect.width + 24}px`,
                 "margin-right": "24px"
               };
             }
@@ -1067,6 +1273,7 @@ const PianoRoll = allProps => {
     }
   });
 };
+delegateEvents(["click"]);
 
 const _tmpl$ = /*#__PURE__*/template(`<div class="PlayHead"></div>`, 2);
 const PlayHead = allProps => {
@@ -1096,11 +1303,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);