solid-pianoroll 0.0.21 → 0.0.22

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,8 +27,8 @@ 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"};
+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);
 
 const defaultState = {
@@ -45,10 +45,10 @@ const defaultState = {
   duration: 0,
   tracks: [],
   selectedTrackIndex: 0,
-  pressedKeys: []
+  pressedKeys: {}
 };
 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 +82,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 onNoteUp = keyNumber => {
-    handlers.onPressedKeysChange?.([...state.pressedKeys].filter(number => number !== keyNumber));
+  const onNoteDown = (trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, true);
   };
+  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,7 +118,7 @@ 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 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);
 
@@ -350,7 +361,7 @@ 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);
@@ -362,69 +373,47 @@ const PianoRollKeys = () => {
                 const _el$2 = _tmpl$$6.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 = {
+                  const _v$3 = {
                       [styles$4["Key"]]: true,
                       [styles$4["black"]]: key().isBlack,
                       [styles$4["white"]]: !key().isBlack,
                       [styles$4["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`].filter(item => !!item).join(", ");
+                  _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;
               }
@@ -467,72 +456,96 @@ const PianoRollNotes = props => {
   const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const gridDivisionTicks = createMemo(() => context.ppq * 4 / context.gridDivision);
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [noteDragMode, setNoteDragMode] = createSignal();
+  const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+  const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
+  const [diffPosition, setDiffPosition] = createSignal(0);
+  const [getInitialNote, setInitialNote] = createSignal();
   const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
-  const insertOrUpdateNote = event => {
-    const position = horizontalViewPort().calculatePosition(event.clientX);
-    const existingNote = currentNote();
-    const midi = context.mode === "keys" ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY)) : existingNote?.midi ?? 60;
-    const 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,
-      ticks,
-      durationTicks,
-      velocity
+      horiontalPosition
     };
-    if (existingNote) {
-      context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
-      return currentNoteIndex();
+  };
+  const handleMouseMove = mouseMoveEvent => {
+    const note = getInitialNote();
+    if (!note) return;
+    const {
+      targetTrackIndex,
+      midi,
+      horiontalPosition
+    } = calculateNoteDragValues(mouseMoveEvent);
+    const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+    const updatedNote = {
+      ...note,
+      midi,
+      ...(noteDragMode() === "move" && {
+        ticks
+      }),
+      ...(noteDragMode() === "trimStart" && {
+        ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      }),
+      ...(noteDragMode() === "trimEnd" && {
+        ticks: ticks < note.ticks ? ticks : note.ticks,
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+      })
+    };
+    const previousTrackIndex = currentNoteTrackIndex();
+    const previousNoteIndex = currentNoteIndex();
+    if (targetTrackIndex === previousTrackIndex) {
+      context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
     } else {
-      return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
+      if (context.onInsertNote) {
+        context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+        const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+        setCurrentNoteTrackIndex(targetTrackIndex);
+        setCurrentNoteIndex(newNoteIndex);
+      }
     }
   };
-  const [isDragging, setIsDragging] = createSignal(false);
-  const [noteDragMode, setNoteDragMode] = createSignal();
-  const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
-  const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
-  const [isMouseDown, setIsMouseDown] = createSignal(false);
-  const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
+  const stopDragging = () => {
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", stopDragging);
+    setIsDragging(false);
+  };
+  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 (() => {
     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);
-      });
+    _el$.$$mousedown = mouseDownEvent => {
+      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$;
@@ -561,55 +574,13 @@ const PianoRollNotes = props => {
                     const _el$2 = _tmpl$$5.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();
@@ -661,7 +632,7 @@ const PianoRollNotes = props => {
     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"};
@@ -900,8 +871,8 @@ 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"};
+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);
 
 const _tmpl$$2 = /*#__PURE__*/template(`<div></div>`, 2),
@@ -925,29 +896,26 @@ 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["Track"]]: true,
+                  [styles["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;
           }
@@ -1032,9 +1000,6 @@ const PianoRoll = allProps => {
               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;
@@ -1076,7 +1041,16 @@ const PianoRoll = allProps => {
                 return context.mode !== "keys";
               }
             }), null);
-            effect(() => className(_el$2, styles$5.PianoRollContainer));
+            effect(_p$ => {
+              const _v$ = styles$5.PianoRollContainer,
+                _v$2 = styles$5.PianoRollLeftColumn;
+              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+              _v$2 !== _p$._v$2 && className(_el$3, _p$._v$2 = _v$2);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined
+            });
             return _el$2;
           })(), createComponent(ZoomSliderControl, {
             orientation: "horizontal",
@@ -1096,19 +1070,15 @@ const PianoRoll = allProps => {
 
 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 +1100,7 @@ const PlayHead = allProps => {
           clientX
         }) => {
           const newPosition = viewPort.calculatePosition(clientX);
-          props.onPlayHeadPositionChange?.(newPosition);
+          props.onPositionChange?.(newPosition);
         };
         const handleMouseUp = () => {
           window.removeEventListener("mousemove", handleMouseMove);