solid-pianoroll 0.0.21 → 0.0.23

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { createComponent, use, spread, mergeProps as mergeProps$1, insert, effect, template, delegateEvents, className, classList, setAttribute, memo } from 'solid-js/web';
-import { mergeProps, createContext, splitProps, useContext, createEffect, createMemo, createSignal, Index, Show, batch, For } from 'solid-js';
+import { createComponent, use, spread, mergeProps as mergeProps$1, insert, effect, template, delegateEvents, classList, setAttribute, className, memo } from 'solid-js/web';
+import { mergeProps, createContext, splitProps, useContext, createEffect, createMemo, createSignal, Index, Show, For } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
 function styleInject(css, ref) {
@@ -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";
-var styles$5 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
-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,
@@ -45,10 +45,22 @@ const defaultState = {
   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"];
+const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown"];
 const createPianoRollstate = initialState => {
   const [state, setState] = createStore({
     ...defaultState,
@@ -82,19 +94,30 @@ const createPianoRollstate = initialState => {
   const onRemoveNote = (trackIndex, noteIndex) => {
     updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), ...notes.slice(noteIndex + 1)]);
   };
-  const onNoteDown = keyNumber => {
-    handlers.onPressedKeysChange?.([...state.pressedKeys, keyNumber]);
+  const updateKeyPressedState = (trackIndex, keyNumber, value) => {
+    handlers.onPressedKeysChange?.({
+      ...state.pressedKeys,
+      [trackIndex]: {
+        ...state.pressedKeys[trackIndex],
+        [keyNumber]: value
+      }
+    });
+  };
+  const onNoteDown = (trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, true);
   };
-  const onNoteUp = keyNumber => {
-    handlers.onPressedKeysChange?.([...state.pressedKeys].filter(number => number !== keyNumber));
+  const onNoteUp = (trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, false);
   };
+  const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
   return mergeProps(state, {
     ...handlers,
     onNoteChange,
     onInsertNote,
     onRemoveNote,
     onNoteDown,
-    onNoteUp
+    onNoteUp,
+    isKeyDown
   });
 };
 
@@ -107,9 +130,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}\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}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\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}\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 = () => {
@@ -199,11 +222,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"]);
@@ -239,11 +262,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));
       }
@@ -275,7 +298,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;
@@ -292,7 +315,7 @@ const ScrollZoomContainer = props => {
       },
       get classList() {
         return {
-          [styles$3.ScrollZoomContainer]: true,
+          [styles$4.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
@@ -325,7 +348,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"));
@@ -342,7 +365,7 @@ const PianoRollKeys = () => {
     }
   });
   return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
+    const _el$ = _tmpl$$7.cloneNode(true);
     insert(_el$, createComponent(ScrollZoomContainer, {
       horizontalDimensionName: "horizontalKeys",
       showScrollbar: false,
@@ -350,81 +373,59 @@ const PianoRollKeys = () => {
         return createComponent(Index, {
           each: keys,
           children: 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 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(key().number);
+                    context.onNoteUp(context.selectedTrackIndex, key().number);
                   }
                 });
                 _el$2.addEventListener("mouseenter", () => {
                   if (isMouseDown()) {
-                    context.onNoteDown(key().number);
+                    context.onNoteDown(context.selectedTrackIndex, key().number);
                   }
                 });
                 _el$2.$$mouseup = () => {
-                  context.onNoteUp(key().number);
+                  context.onNoteUp(context.selectedTrackIndex, key().number);
                 };
                 _el$2.$$mousedown = () => {
                   setIsMouseDown(true);
-                  context.onNoteDown(key().number);
+                  context.onNoteDown(context.selectedTrackIndex, key().number);
                 };
-                insert(_el$2, createComponent(Show, {
-                  get when() {
-                    return key().isBlack && false;
-                  },
-                  get children() {
-                    const _el$3 = _tmpl$$6.cloneNode(true);
-                    effect(_p$ => {
-                      const _v$3 = styles$4["black-separator"],
-                        _v$4 = `${virtualDimensions().offset}px`,
-                        _v$5 = `${virtualDimensions().size / 2 - 0.25}px`;
-                      _v$3 !== _p$._v$3 && className(_el$3, _p$._v$3 = _v$3);
-                      _v$4 !== _p$._v$4 && _el$3.style.setProperty("top", _p$._v$4 = _v$4);
-                      _v$5 !== _p$._v$5 && _el$3.style.setProperty("height", _p$._v$5 = _v$5);
-                      return _p$;
-                    }, {
-                      _v$3: undefined,
-                      _v$4: undefined,
-                      _v$5: undefined
-                    });
-                    return _el$3;
-                  }
-                }));
                 effect(_p$ => {
-                  const _v$6 = {
-                      [styles$4["Key"]]: true,
-                      [styles$4["black"]]: key().isBlack,
-                      [styles$4["white"]]: !key().isBlack,
-                      [styles$4["down"]]: isDown()
+                  const _v$3 = {
+                      [styles$5["Key"]]: true,
+                      [styles$5["black"]]: key().isBlack,
+                      [styles$5["white"]]: !key().isBlack,
+                      [styles$5["down"]]: isDown()
                     },
-                    _v$7 = key().name,
-                    _v$8 = key().number % 12,
-                    _v$9 = `${virtualDimensions().offset - (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0)}px`,
-                    _v$10 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
-                    _v$11 = [`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(", ");
-                  _p$._v$6 = classList(_el$2, _v$6, _p$._v$6);
-                  _v$7 !== _p$._v$7 && setAttribute(_el$2, "title", _p$._v$7 = _v$7);
-                  _v$8 !== _p$._v$8 && setAttribute(_el$2, "data-index", _p$._v$8 = _v$8);
-                  _v$9 !== _p$._v$9 && _el$2.style.setProperty("top", _p$._v$9 = _v$9);
-                  _v$10 !== _p$._v$10 && _el$2.style.setProperty("height", _p$._v$10 = _v$10);
-                  _v$11 !== _p$._v$11 && _el$2.style.setProperty("box-shadow", _p$._v$11 = _v$11);
+                    _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` : "";
+                  _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);
+                  _v$6 !== _p$._v$6 && _el$2.style.setProperty("top", _p$._v$6 = _v$6);
+                  _v$7 !== _p$._v$7 && _el$2.style.setProperty("height", _p$._v$7 = _v$7);
+                  _v$8 !== _p$._v$8 && _el$2.style.setProperty("box-shadow", _p$._v$8 = _v$8);
                   return _p$;
                 }, {
+                  _v$3: undefined,
+                  _v$4: undefined,
+                  _v$5: undefined,
                   _v$6: undefined,
                   _v$7: undefined,
-                  _v$8: undefined,
-                  _v$9: undefined,
-                  _v$10: undefined,
-                  _v$11: undefined
+                  _v$8: undefined
                 });
                 return _el$2;
               }
@@ -434,7 +435,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);
@@ -457,82 +458,112 @@ 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"));
   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 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 = {
+  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;
+    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,
-      ticks,
-      durationTicks,
-      velocity
+      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)
+      })
     };
-    if (existingNote) {
-      context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
-      return currentNoteIndex();
+    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$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);
-    _el$.$$click = event => {
-      if (currentNote()) {
-        setCurrentNoteIndex(-1);
-        return;
-      }
-      if (!event.altKey) return;
-      insertOrUpdateNote(event);
-    };
-    _el$.$$dblclick = event => {
-      insertOrUpdateNote(event);
-    };
-    _el$.$$mouseup = event => {
-      setIsMouseDown(false);
-      if (!event.altKey) return;
-      insertOrUpdateNote(event);
-    };
-    _el$.$$mousemove = event => {
-      if (isDragging()) return;
-      if (!isMouseDown()) {
-        setNoteDragMode(undefined);
-        return;
-      }
-      const index = insertOrUpdateNote(event);
-      setCurrentNoteIndex(index);
-    };
-    _el$.$$mousedown = event => {
-      batch(() => {
-        setIsMouseDown(true);
-        const index = insertOrUpdateNote(event);
-        setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
-        setCurrentNoteIndex(index);
-      });
+    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 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();
     };
     const _ref$ = props.ref;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
@@ -558,58 +589,16 @@ 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);
+                      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();
                     };
                     _el$2.$$dblclick = event => {
                       event.stopPropagation();
@@ -656,21 +645,19 @@ const PianoRollNotes = props => {
       }
     }));
     effect(_$p => classList(_el$, {
-      [styles$2.PianoRollNotes]: true
+      [styles$3.PianoRollNotes]: true
     }, _$p));
     return _el$;
   })();
 };
-delegateEvents(["mousedown", "mousemove", "mouseup", "dblclick", "click"]);
+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);
@@ -691,43 +678,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;
           }
@@ -745,29 +751,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;
               }
@@ -789,27 +793,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;
               }
@@ -818,47 +820,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;
@@ -870,7 +844,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
@@ -900,17 +877,17 @@ const ZoomSliderControl = props => {
   })();
 };
 
-var css_248z = ".PianoRollTrackList-module_PianoRollTrackList__pyuxQ {\n  position: relative;\n  height: 100%;\n  flex: 1;\n}\n\n.PianoRollTrackList-module_Track__VZFIg {\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}\n";
-var styles = {"PianoRollTrackList":"PianoRollTrackList-module_PianoRollTrackList__pyuxQ","Track":"PianoRollTrackList-module_Track__VZFIg"};
-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;
@@ -925,135 +902,279 @@ const PianoRollTrackList = () => {
             const _el$2 = _tmpl$2$1.cloneNode(true),
               _el$3 = _el$2.firstChild;
             _el$2.$$click = () => context.onSelectedTrackIndexChange?.(index);
-            _el$2.style.setProperty("cursor", "pointer");
             insert(_el$2, index, _el$3);
             insert(_el$2, () => track().name || "[unnamed track]", null);
             effect(_p$ => {
               const _v$ = {
-                  [styles["Track"]]: true
+                  [styles$1["Track"]]: true,
+                  [styles$1["selected"]]: index === context.selectedTrackIndex
                 },
                 _v$2 = track().name,
                 _v$3 = `${virtualDimensions().offset}px`,
-                _v$4 = `${virtualDimensions().size}px`,
-                _v$5 = index === context.selectedTrackIndex ? "gray" : "lightgrey";
+                _v$4 = `${virtualDimensions().size}px`;
               _p$._v$ = classList(_el$2, _v$, _p$._v$);
               _v$2 !== _p$._v$2 && setAttribute(_el$2, "title", _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("background", _p$._v$5 = _v$5);
               return _p$;
             }, {
               _v$: undefined,
               _v$2: undefined,
               _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined
+              _v$4: undefined
             });
             return _el$2;
           }
         });
       }
     }));
-    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();
+  return (() => {
+    const _el$ = _tmpl$$2.cloneNode(true);
+    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$;
+  })();
+};
+
+const _tmpl$$1 = /*#__PURE__*/template(`<div><button><div></div></button></div>`, 6),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div><div></div></div><div><div></div></div></div>`, 10),
+  _tmpl$3 = /*#__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$3.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$2.cloneNode(true),
+              _el$3 = _el$2.firstChild,
+              _el$7 = _el$3.firstChild,
+              _el$8 = _el$3.nextSibling,
+              _el$9 = _el$8.firstChild;
             insert(_el$2, createComponent(ZoomSliderControl, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
             }), _el$3);
-            _el$3.style.setProperty("display", "flex");
-            _el$3.style.setProperty("width", "30%");
-            _el$3.style.setProperty("max-width", "250px");
             insert(_el$3, createComponent(Show, {
               get when() {
                 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$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";
               },
@@ -1061,11 +1182,14 @@ const PianoRoll = allProps => {
                 return createComponent(PianoRollKeys, {});
               }
             }), null);
-            insert(_el$2, createComponent(ScrollZoomContainer, {
-              ref: setNotesScrollerRef,
-              get verticalDimensionName() {
-                return context.mode === "keys" ? "vertical" : "verticalTracks";
-              },
+            _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, {}));
+            insert(_el$8, createComponent(PianoRollNotesScroller, {
               get children() {
                 return [memo(() => allProps.children), createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
               }
@@ -1076,13 +1200,25 @@ const PianoRoll = allProps => {
                 return context.mode !== "keys";
               }
             }), null);
-            effect(() => className(_el$2, styles$5.PianoRollContainer));
+            effect(_p$ => {
+              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$);
+              _p$._v$2 = classList(_el$3, _v$2, _p$._v$2);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined
+            });
             return _el$2;
           })(), createComponent(ZoomSliderControl, {
             orientation: "horizontal",
             get style() {
               return {
-                "margin-left": `${tracksScrollerClientRect().width + 24}px`,
+                "margin-left": `${context.tracksScrollerClientRect.width + 24}px`,
                 "margin-right": "24px"
               };
             }
@@ -1093,22 +1229,19 @@ const PianoRoll = allProps => {
     }
   });
 };
+delegateEvents(["click"]);
 
 const _tmpl$ = /*#__PURE__*/template(`<div class="PlayHead"></div>`, 2);
 const PlayHead = allProps => {
-  const propsWithDefauls = mergeProps({
-    playHeadPosition: 0,
-    sync: false
-  }, allProps);
-  const [props, divProps] = splitProps(propsWithDefauls, ["playHeadPosition", "sync", "onPlayHeadPositionChange", "onPositionChange"]);
-  const viewPort = useViewPortDimension("horizontal");
+  const [props, divProps] = splitProps(allProps, ["position", "sync", "onPositionChange", "dimensionName"]);
+  const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
   createEffect(() => {
     if (!props.sync) return;
     const maxPosition = viewPort.range;
-    const newPosition = clamp(props.playHeadPosition - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
-    props.onPositionChange?.(newPosition);
+    const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
+    viewPort.onPositionChange?.(newPosition);
   });
-  const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.playHeadPosition));
+  const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
   return (() => {
     const _el$ = _tmpl$.cloneNode(true);
     spread(_el$, mergeProps$1(divProps, {
@@ -1130,7 +1263,7 @@ const PlayHead = allProps => {
           clientX
         }) => {
           const newPosition = viewPort.calculatePosition(clientX);
-          props.onPlayHeadPositionChange?.(newPosition);
+          props.onPositionChange?.(newPosition);
         };
         const handleMouseUp = () => {
           window.removeEventListener("mousemove", handleMouseMove);