solid-pianoroll 0.0.15 → 0.0.17

package/dist/cjs/index.js

@@ -29,9 +29,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$4 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n";
-var styles$4 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
-styleInject(css_248z$4);
+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);
 
 const PianoRollContext = solidJs.createContext();
 const PianoRollContextProvider = PianoRollContext.Provider;
@@ -40,11 +40,11 @@ const usePianoRollContext = () => {
   if (!context) throw new Error("No PianoRollContext found");
   return context;
 };
-const splitContextProps = allProps => solidJs.splitProps(allProps, ["mode", "duration", "gridDivision", "tracks", "position", "ppq", "snapToGrid", "verticalPosition", "verticalZoom", "zoom", "onInsertNote", "onNoteChange", "onPositionChange", "onRemoveNote", "onVerticalPositionChange", "onVerticalZoomChange", "onZoomChange", "showAllTracks", "selectedTrackIndex", "onSelectedTrackIndexChange"]);
+const splitContextProps = allProps => solidJs.splitProps(allProps, ["ppq", "mode", "position", "zoom", "verticalZoom", "verticalPosition", "verticalTrackZoom", "verticalTrackPosition", "gridDivision", "snapToGrid", "duration", "tracks", "selectedTrackIndex", "pressedKeys", "onPpqChange", "onModeChange", "onPositionChange", "onZoomChange", "onVerticalZoomChange", "onVerticalPositionChange", "onVerticalTrackZoomChange", "onVerticalTrackPositionChange", "onGridDivisionChange", "onSnapToGridChange", "onDurationChange", "onTracksChange", "onNoteChange", "onInsertNote", "onRemoveNote", "onSelectedTrackIndexChange", "onPressedKeysChange", "showAllTracks", "showTrackList"]);
 
-var css_248z$3 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  width: 50px;\n}\n\n.PianoRollKeys-module_Key__jybNC {\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}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n}\n\n.PianoRollKeys-module_whiteAndNextIsWhite__PN1O8 {\n  border-top-width: 0.1px;\n}\n\n.PianoRollKeys-module_whiteAndPreviousIsWhite__-fP3q {\n  border-bottom-width: 0.1px;\n}\n";
-var styles$3 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","whiteAndNextIsWhite":"PianoRollKeys-module_whiteAndNextIsWhite__PN1O8","whiteAndPreviousIsWhite":"PianoRollKeys-module_whiteAndPreviousIsWhite__-fP3q"};
-styleInject(css_248z$3);
+var css_248z$4 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  width: 50px;\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  overflow: hidden;\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);
 
 function createViewPortDimension(getState) {
   const getStateWithFunctions = () => ({
@@ -118,55 +118,248 @@ const useViewPortDimension = name => {
   return viewPort;
 };
 
-const _tmpl$$8 = /*#__PURE__*/web.template(`<div></div>`, 2);
-const PianoRollKeys = () => {
-  const viewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+var css_248z$3 = ".ScrollContainer-module_ScrollContainer__As0vK {\n  height: 100%;\n  width: 100%;\n  z-index: 4;\n  pointer-events: auto;\n}\n";
+var styles$3 = {"ScrollContainer":"ScrollContainer-module_ScrollContainer__As0vK"};
+styleInject(css_248z$3);
+
+const _tmpl$$8 = /*#__PURE__*/web.template(`<div><div><div><div></div></div></div></div>`, 8);
+const ScrollContainer = props => {
+  let scrollContentRef;
+  const [ownProps, divProps] = solidJs.splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
+  const propsWithDefaults = solidJs.mergeProps({
+    verticalDimensionName: "vertical",
+    horizontalDimensionName: "horizontal",
+    showScrollbar: true
+  }, ownProps);
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
+  const handleScroll = event => {
+    event.preventDefault();
+    if (didUpdateScroll) {
+      didUpdateScroll = false;
+      return;
+    }
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollWidth,
+      scrollHeight
+    } = event.currentTarget;
+    const scrollTopAmount = scrollTop / (scrollHeight - height);
+    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
+    verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
+    horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
+  };
+  const handleWheel = event => {
+    if (event.altKey) {
+      event.preventDefault();
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        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));
+        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+        verticalViewPort()?.onPositionChange?.(Math.min(maxVerticalPosition, verticalViewPort()?.position));
+      }
+    } else if (!props.showScrollbar) {
+      event.preventDefault();
+      event.currentTarget.scrollLeft += event.deltaX;
+      event.currentTarget.scrollTop += event.deltaY;
+    }
+  };
+  let didUpdateScroll = false;
+  solidJs.createEffect(() => {
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
+    const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    if (!scrollContentRef?.parentElement) return;
+    const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
+    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+    const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
+    const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
+    didUpdateScroll = true;
+    scrollContentRef.style.height = `${scrollDivHeight}px`;
+    scrollContentRef.style.width = `${scrollDivWidth}px`;
+    scrollContentRef.parentElement.scrollTo({
+      left: scrollLeft,
+      top: scrollTop
+    });
+  });
   return (() => {
-    const _el$ = _tmpl$$8.cloneNode(true);
-    web.insert(_el$, web.createComponent(solidJs.Index, {
-      each: keys,
-      children: key => {
-        const virtualDimensions = solidJs.createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
-        return web.createComponent(solidJs.Show, {
-          get when() {
-            return virtualDimensions().size > 0;
-          },
-          get children() {
-            const _el$2 = _tmpl$$8.cloneNode(true);
-            web.effect(_p$ => {
-              const _v$ = {
-                  [styles$3["Key"]]: true,
-                  [styles$3["black"]]: key().isBlack,
-                  [styles$3["white"]]: !key().isBlack,
-                  [styles$3["whiteAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
-                  [styles$3["whiteAndPreviousIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number - 1) % 12)
-                },
-                _v$2 = key().name,
-                _v$3 = key().number % 12,
-                _v$4 = `${virtualDimensions().offset}px`,
-                _v$5 = `${virtualDimensions().size}px`;
-              _p$._v$ = web.classList(_el$2, _v$, _p$._v$);
-              _v$2 !== _p$._v$2 && web.setAttribute(_el$2, "title", _p$._v$2 = _v$2);
-              _v$3 !== _p$._v$3 && web.setAttribute(_el$2, "data-index", _p$._v$3 = _v$3);
-              _v$4 !== _p$._v$4 && _el$2.style.setProperty("top", _p$._v$4 = _v$4);
-              _v$5 !== _p$._v$5 && _el$2.style.setProperty("height", _p$._v$5 = _v$5);
-              return _p$;
-            }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined
-            });
-            return _el$2;
-          }
-        });
+    const _el$ = _tmpl$$8.cloneNode(true),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.firstChild;
+    _el$.addEventListener("wheel", handleWheel);
+    _el$.addEventListener("scroll", handleScroll);
+    const _ref$ = props.ref;
+    typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
+    web.spread(_el$, web.mergeProps({
+      get style() {
+        return {
+          overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
+          ...(typeof divProps.style === "object" && divProps.style)
+        };
+      },
+      get classList() {
+        return {
+          [styles$3.ScrollContainer]: true,
+          ...divProps.classList
+        };
       }
-    }));
-    web.effect(() => web.className(_el$, styles$3.PianoRollKeys));
+    }, divProps), false, true);
+    const _ref$2 = scrollContentRef;
+    typeof _ref$2 === "function" ? web.use(_ref$2, _el$2) : scrollContentRef = _el$2;
+    _el$3.style.setProperty("top", "0");
+    _el$3.style.setProperty("left", "0");
+    _el$3.style.setProperty("position", "sticky");
+    _el$3.style.setProperty("display", "flex");
+    _el$4.style.setProperty("position", "relative");
+    web.insert(_el$4, () => props.children);
+    web.effect(_p$ => {
+      const _v$ = `${verticalViewPort().pixelSize}px`,
+        _v$2 = `${horizontalViewPort().pixelSize}px`,
+        _v$3 = `${verticalViewPort().pixelSize}px`,
+        _v$4 = `${horizontalViewPort().pixelSize}px`;
+      _v$ !== _p$._v$ && _el$3.style.setProperty("height", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _el$3.style.setProperty("width", _p$._v$2 = _v$2);
+      _v$3 !== _p$._v$3 && _el$4.style.setProperty("height", _p$._v$3 = _v$3);
+      _v$4 !== _p$._v$4 && _el$4.style.setProperty("width", _p$._v$4 = _v$4);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
     return _el$;
   })();
 };
+
+const _tmpl$$7 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const PianoRollKeys = () => {
+  const viewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const [isMouseDown, setIsMouseDown] = solidJs.createSignal(false);
+  const context = usePianoRollContext();
+  const handleMouseUp = () => {
+    setIsMouseDown(false);
+  };
+  solidJs.createEffect(() => {
+    if (isMouseDown()) {
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+  });
+  return web.createComponent(ScrollContainer, {
+    get classList() {
+      return {
+        [styles$4.PianoRollKeys]: true
+      };
+    },
+    showScrollbar: false,
+    get children() {
+      return web.createComponent(solidJs.Index, {
+        each: keys,
+        children: key => {
+          const isDown = solidJs.createMemo(() => context.pressedKeys.includes(key().number));
+          const handleKeyDown = () => {
+            context.onPressedKeysChange?.([...context.pressedKeys, key().number]);
+          };
+          const handleKeyUp = () => {
+            context.onPressedKeysChange?.([...context.pressedKeys].filter(number => number !== key().number));
+          };
+          const virtualDimensions = solidJs.createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
+          const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
+          const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
+          return web.createComponent(solidJs.Show, {
+            get when() {
+              return virtualDimensions().size > 0;
+            },
+            get children() {
+              const _el$ = _tmpl$$7.cloneNode(true);
+              _el$.addEventListener("mouseleave", () => {
+                if (isMouseDown()) {
+                  handleKeyUp();
+                }
+              });
+              _el$.addEventListener("mouseenter", () => {
+                if (isMouseDown()) {
+                  handleKeyDown();
+                }
+              });
+              _el$.$$mouseup = () => {
+                handleKeyUp();
+              };
+              _el$.$$mousedown = () => {
+                setIsMouseDown(true);
+                handleKeyDown();
+              };
+              web.insert(_el$, web.createComponent(solidJs.Show, {
+                get when() {
+                  return key().isBlack && false;
+                },
+                get children() {
+                  const _el$2 = _tmpl$$7.cloneNode(true);
+                  web.effect(_p$ => {
+                    const _v$ = styles$4["black-separator"],
+                      _v$2 = `${virtualDimensions().offset}px`,
+                      _v$3 = `${virtualDimensions().size / 2 - 0.25}px`;
+                    _v$ !== _p$._v$ && web.className(_el$2, _p$._v$ = _v$);
+                    _v$2 !== _p$._v$2 && _el$2.style.setProperty("top", _p$._v$2 = _v$2);
+                    _v$3 !== _p$._v$3 && _el$2.style.setProperty("height", _p$._v$3 = _v$3);
+                    return _p$;
+                  }, {
+                    _v$: undefined,
+                    _v$2: undefined,
+                    _v$3: undefined
+                  });
+                  return _el$2;
+                }
+              }));
+              web.effect(_p$ => {
+                const _v$4 = {
+                    [styles$4["Key"]]: true,
+                    [styles$4["black"]]: key().isBlack,
+                    [styles$4["white"]]: !key().isBlack,
+                    [styles$4["down"]]: isDown()
+                  },
+                  _v$5 = key().name,
+                  _v$6 = key().number % 12,
+                  _v$7 = `${virtualDimensions().offset - (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+                  _v$8 = `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+                  _v$9 = [`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$4 = web.classList(_el$, _v$4, _p$._v$4);
+                _v$5 !== _p$._v$5 && web.setAttribute(_el$, "title", _p$._v$5 = _v$5);
+                _v$6 !== _p$._v$6 && web.setAttribute(_el$, "data-index", _p$._v$6 = _v$6);
+                _v$7 !== _p$._v$7 && _el$.style.setProperty("top", _p$._v$7 = _v$7);
+                _v$8 !== _p$._v$8 && _el$.style.setProperty("height", _p$._v$8 = _v$8);
+                _v$9 !== _p$._v$9 && _el$.style.setProperty("box-shadow", _p$._v$9 = _v$9);
+                return _p$;
+              }, {
+                _v$4: undefined,
+                _v$5: undefined,
+                _v$6: undefined,
+                _v$7: undefined,
+                _v$8: undefined,
+                _v$9: undefined
+              });
+              return _el$;
+            }
+          });
+        }
+      });
+    }
+  });
+};
 const blackKeys = [1, 3, 6, 8, 10];
 const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
 const keys = Array.from({
@@ -176,15 +369,16 @@ const keys = Array.from({
   name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
   isBlack: blackKeys.includes(index % 12)
 }));
+web.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);
 
-const _tmpl$$7 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const _tmpl$$6 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
-  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
   const gridDivisionTicks = solidJs.createMemo(() => context.ppq * 4 / context.gridDivision);
   const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
@@ -192,7 +386,7 @@ const PianoRollNotes = props => {
     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" ? Math.floor(verticalViewPort().calculatePosition(event.clientY)) : context.selectedTrackIndex ?? 0;
+    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;
@@ -220,7 +414,7 @@ const PianoRollNotes = props => {
     return noteDragMode ? [styles$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
   };
   return (() => {
-    const _el$ = _tmpl$$7.cloneNode(true);
+    const _el$ = _tmpl$$6.cloneNode(true);
     _el$.$$click = event => {
       if (currentNote()) {
         setCurrentNoteIndex(-1);
@@ -278,7 +472,7 @@ const PianoRollNotes = props => {
                     return web.memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
                   },
                   get children() {
-                    const _el$2 = _tmpl$$7.cloneNode(true);
+                    const _el$2 = _tmpl$$6.cloneNode(true);
                     _el$2.$$mousedown = event => {
                       event.stopPropagation();
                       setIsDragging(true);
@@ -307,7 +501,7 @@ const PianoRollNotes = props => {
                         };
                         const previousTrackIndex = currentNoteTrackIndex();
                         const previousNoteIndex = currentNoteIndex();
-                        const targetTrackIndex = context.mode === "tracks" ? Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)) : previousTrackIndex;
+                        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 {
@@ -381,109 +575,6 @@ const PianoRollNotes = props => {
 };
 web.delegateEvents(["mousedown", "mousemove", "mouseup", "dblclick", "click"]);
 
-const _tmpl$$6 = /*#__PURE__*/web.template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
-const ScrollContainer = props => {
-  let scrollContentRef;
-  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
-  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
-  const handleScroll = event => {
-    event.preventDefault();
-    if (didUpdateScroll) {
-      didUpdateScroll = false;
-      return;
-    }
-    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-    const maxPosition = horizontalViewPort().calculateMaxPosition();
-    const height = verticalViewPort().pixelSize;
-    const width = horizontalViewPort().pixelSize;
-    const {
-      scrollTop,
-      scrollLeft,
-      scrollWidth,
-      scrollHeight
-    } = event.currentTarget;
-    const scrollTopAmount = scrollTop / (scrollHeight - height);
-    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
-    verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
-    horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
-  };
-  const handleWheel = event => {
-    if (event.altKey) {
-      event.preventDefault();
-      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-        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));
-        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-        verticalViewPort()?.onPositionChange?.(Math.min(maxVerticalPosition, verticalViewPort()?.position));
-      }
-    }
-  };
-  let didUpdateScroll = false;
-  solidJs.createEffect(() => {
-    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-    const maxPosition = horizontalViewPort().calculateMaxPosition();
-    const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
-    const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
-    const height = verticalViewPort().pixelSize;
-    const width = horizontalViewPort().pixelSize;
-    if (!scrollContentRef?.parentElement) return;
-    const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
-    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-    const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
-    const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
-    didUpdateScroll = true;
-    scrollContentRef.style.height = `${scrollDivHeight}px`;
-    scrollContentRef.style.width = `${scrollDivWidth}px`;
-    scrollContentRef.parentElement.scrollTo({
-      left: scrollLeft,
-      top: scrollTop
-    });
-  });
-  return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      _el$4 = _el$3.firstChild;
-    _el$.addEventListener("wheel", handleWheel);
-    _el$.addEventListener("scroll", handleScroll);
-    const _ref$ = props.ref;
-    typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
-    _el$.style.setProperty("height", "100%");
-    _el$.style.setProperty("width", "100%");
-    _el$.style.setProperty("z-index", "4");
-    _el$.style.setProperty("overflow", "scroll");
-    _el$.style.setProperty("pointer-events", "auto");
-    const _ref$2 = scrollContentRef;
-    typeof _ref$2 === "function" ? web.use(_ref$2, _el$2) : scrollContentRef = _el$2;
-    _el$3.style.setProperty("top", "0");
-    _el$3.style.setProperty("left", "0");
-    _el$3.style.setProperty("position", "sticky");
-    _el$3.style.setProperty("display", "flex");
-    _el$4.style.setProperty("position", "relative");
-    web.insert(_el$4, () => props.children);
-    web.effect(_p$ => {
-      const _v$ = `${verticalViewPort().pixelSize}px`,
-        _v$2 = `${horizontalViewPort().pixelSize}px`,
-        _v$3 = `${verticalViewPort().pixelSize}px`,
-        _v$4 = `${horizontalViewPort().pixelSize}px`;
-      _v$ !== _p$._v$ && _el$3.style.setProperty("height", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$3.style.setProperty("width", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _el$4.style.setProperty("height", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && _el$4.style.setProperty("width", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-    return _el$;
-  })();
-};
-
 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);
@@ -491,7 +582,7 @@ styleInject(css_248z$1);
 const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
-  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
   const measureTicks = solidJs.createMemo(() => context.ppq * 4);
   const selectedGridDivisorTicks = solidJs.createMemo(() => measureTicks() / context.gridDivision);
@@ -674,14 +765,14 @@ function useBoundingClientRect(containerRef) {
 
 const _tmpl$$4 = /*#__PURE__*/web.template(`<input min="1" max="11" step="0.01">`, 1);
 const VerticalZoomControl = props => {
-  const context = usePianoRollContext();
+  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? "vertical"));
   return (() => {
     const _el$ = _tmpl$$4.cloneNode(true);
     web.spread(_el$, web.mergeProps(props, {
       get value() {
-        return context.verticalZoom;
+        return dimension().zoom;
       },
-      "onInput": event => context.onVerticalZoomChange?.(event.currentTarget.valueAsNumber),
+      "onInput": event => dimension().onZoomChange?.(event.currentTarget.valueAsNumber),
       "type": "range"
     }, {
       orient: "vertical"
@@ -689,6 +780,7 @@ const VerticalZoomControl = props => {
       get style() {
         return {
           width: "16px",
+          transform: "rotate(180deg)",
           ...{
             "writing-mode": "bt-lr" /* IE */,
             "-webkit-appearance": "slider-vertical" /* WebKit */
@@ -702,14 +794,14 @@ const VerticalZoomControl = props => {
 
 const _tmpl$$3 = /*#__PURE__*/web.template(`<input max="500" min="1" step="0.01">`, 1);
 const HorizontalZoomControl = props => {
-  const context = usePianoRollContext();
+  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? "horizontal"));
   return (() => {
     const _el$ = _tmpl$$3.cloneNode(true);
     web.spread(_el$, web.mergeProps(props, {
       get value() {
-        return context.zoom;
+        return dimension().zoom;
       },
-      "onInput": event => context.onZoomChange?.(event.currentTarget.valueAsNumber),
+      "onInput": event => dimension().onZoomChange?.(event.currentTarget.valueAsNumber),
       "type": "range",
       get style() {
         return {
@@ -730,7 +822,7 @@ styleInject(css_248z);
 const _tmpl$$2 = /*#__PURE__*/web.template(`<div></div>`, 2),
   _tmpl$2$1 = /*#__PURE__*/web.template(`<div> </div>`, 2);
 const PianoRollTrackList = () => {
-  const viewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const viewPort = solidJs.createMemo(() => useViewPortDimension("verticalTracks"));
   const context = usePianoRollContext();
   return (() => {
     const _el$ = _tmpl$$2.cloneNode(true);
@@ -739,7 +831,7 @@ const PianoRollTrackList = () => {
         return context.tracks;
       },
       children: (track, index) => {
-        const virtualDimensions = solidJs.createMemo(() => viewPort().calculatePixelDimensions(context.mode === "tracks" ? index : index * 8, context.mode === "tracks" ? 1 : 8));
+        const virtualDimensions = solidJs.createMemo(() => viewPort().calculatePixelDimensions(index, 1));
         return web.createComponent(solidJs.Show, {
           get when() {
             return virtualDimensions().size > 0;
@@ -783,100 +875,149 @@ const PianoRollTrackList = () => {
 };
 web.delegateEvents(["click"]);
 
-const _tmpl$$1 = /*#__PURE__*/web.template(`<div></div>`, 2),
-  _tmpl$2 = /*#__PURE__*/web.template(`<div><div></div></div>`, 4);
+const _tmpl$$1 = /*#__PURE__*/web.template(`<div><div></div></div>`, 4),
+  _tmpl$2 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRoll = allProps => {
-  const [contextProps, divProps] = splitContextProps(allProps);
+  const propsWithDefaults = solidJs.mergeProps({
+    showAllTracks: false
+  }, allProps);
+  const [context, divProps] = splitContextProps(propsWithDefaults);
   const [scrollerRef, setScrollerRef] = solidJs.createSignal();
+  const [trackScrollerRef, setTrackScrollerRef] = solidJs.createSignal();
   const clientRect = useBoundingClientRect(scrollerRef);
+  const trackClientRef = useBoundingClientRect(trackScrollerRef);
   const zoomFactor = 500;
   const minZoom = solidJs.createMemo(() => 1 / (zoomFactor / clientRect().width));
   const maxZoom = solidJs.createMemo(() => 500 * (zoomFactor / clientRect().width));
   const minVerticalZoom = solidJs.createMemo(() => 1 / (zoomFactor / clientRect().height));
   const maxVerticalZoom = solidJs.createMemo(() => 10 * (zoomFactor / clientRect().height));
+  const minVerticalTracksZoom = solidJs.createMemo(() => 0.8 / (zoomFactor / trackClientRef().height));
+  const maxVerticalTracksZoom = solidJs.createMemo(() => 3 * (zoomFactor / trackClientRef().height));
   solidJs.createEffect(isInitial => {
     if (isInitial) return false;
-    if (contextProps.mode === "tracks") {
-      contextProps.onVerticalPositionChange?.(0);
+    if (context.mode === "tracks") {
+      context.onVerticalPositionChange?.(0);
     }
   }, true);
   return web.createComponent(PianoRollContextProvider, {
-    value: contextProps,
+    value: context,
     get children() {
-      const _el$ = _tmpl$2.cloneNode(true),
-        _el$2 = _el$.firstChild;
+      const _el$ = _tmpl$2.cloneNode(true);
       web.spread(_el$, web.mergeProps(divProps, {
         get ["class"]() {
-          return styles$4.PianoRoll;
+          return styles$5.PianoRoll;
         }
       }), false, true);
-      web.insert(_el$2, web.createComponent(ScrollZoomViewPort, {
+      web.insert(_el$, web.createComponent(ScrollZoomViewPort, {
         dimensions: {
           horizontal: () => ({
             pixelOffset: clientRect().left,
             pixelSize: clientRect().width,
-            position: contextProps.position,
-            range: contextProps.duration,
-            zoom: contextProps.zoom * (zoomFactor / clientRect().width),
-            onPositionChange: contextProps.onPositionChange,
-            onZoomChange: zoom => contextProps.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom()))
+            position: context.position,
+            range: context.duration,
+            zoom: context.zoom * (zoomFactor / clientRect().width),
+            onPositionChange: context.onPositionChange,
+            onZoomChange: zoom => context.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom()))
           }),
           vertical: () => ({
             pixelOffset: clientRect().top,
             pixelSize: clientRect().height,
-            position: contextProps.verticalPosition,
-            range: contextProps.mode === "keys" ? 128 : Math.max(contextProps.tracks.length, 16),
-            zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
-            onPositionChange: contextProps.onVerticalPositionChange,
-            onZoomChange: verticalZoom => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
+            position: context.verticalPosition,
+            range: 128,
+            zoom: context.verticalZoom * (zoomFactor / clientRect().height),
+            onPositionChange: context.onVerticalPositionChange,
+            onZoomChange: verticalZoom => context.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
+          }),
+          horizontalTracks: () => ({
+            pixelOffset: clientRect().left,
+            pixelSize: clientRect().width,
+            position: 0,
+            range: 1,
+            zoom: 1
+          }),
+          verticalTracks: () => ({
+            pixelOffset: trackClientRef().top,
+            pixelSize: trackClientRef().height,
+            position: context.verticalTrackPosition,
+            range: context.tracks.length,
+            zoom: context.verticalTrackZoom * (zoomFactor / trackClientRef().height),
+            onPositionChange: context.onVerticalTrackPositionChange,
+            onZoomChange: verticalTrackZoom => context.onVerticalTrackZoomChange?.(clamp(verticalTrackZoom / (zoomFactor / trackClientRef().height), minVerticalTracksZoom(), maxVerticalTracksZoom()))
           })
         },
         get children() {
           return [(() => {
-            const _el$3 = _tmpl$$1.cloneNode(true);
+            const _el$2 = _tmpl$$1.cloneNode(true),
+              _el$3 = _el$2.firstChild;
+            web.insert(_el$2, web.createComponent(VerticalZoomControl, {
+              get min() {
+                return minVerticalTracksZoom();
+              },
+              get max() {
+                return maxVerticalTracksZoom();
+              },
+              dimensionName: "verticalTracks"
+            }), _el$3);
             _el$3.style.setProperty("display", "flex");
             _el$3.style.setProperty("width", "20%");
             web.insert(_el$3, web.createComponent(solidJs.Show, {
               get when() {
-                return allProps.showTrackList;
+                return context.showTrackList;
               },
               get children() {
-                return web.createComponent(PianoRollTrackList, {});
+                return web.createComponent(ScrollContainer, {
+                  ref: setTrackScrollerRef,
+                  horizontalDimensionName: "horizontalTracks",
+                  verticalDimensionName: "verticalTracks",
+                  get showScrollbar() {
+                    return context.mode === "keys";
+                  },
+                  get children() {
+                    return web.createComponent(PianoRollTrackList, {});
+                  }
+                });
               }
             }), null);
             web.insert(_el$3, web.createComponent(solidJs.Show, {
               get when() {
-                return contextProps.mode === "keys";
+                return context.mode === "keys";
               },
               get children() {
                 return web.createComponent(PianoRollKeys, {});
               }
             }), null);
-            return _el$3;
-          })(), web.createComponent(ScrollContainer, {
-            ref: setScrollerRef,
-            get children() {
-              return [web.memo(() => allProps.children), web.createComponent(PianoRollGrid, {}), web.createComponent(PianoRollNotes, {})];
-            }
-          }), web.createComponent(VerticalZoomControl, {
+            web.insert(_el$2, web.createComponent(ScrollContainer, {
+              ref: setScrollerRef,
+              get verticalDimensionName() {
+                return context.mode === "keys" ? "vertical" : "verticalTracks";
+              },
+              get children() {
+                return [web.memo(() => allProps.children), web.createComponent(PianoRollGrid, {}), web.createComponent(PianoRollNotes, {})];
+              }
+            }), null);
+            web.insert(_el$2, web.createComponent(VerticalZoomControl, {
+              get min() {
+                return minVerticalZoom();
+              },
+              get max() {
+                return maxVerticalZoom();
+              },
+              get disabled() {
+                return context.mode !== "keys";
+              }
+            }), null);
+            web.effect(() => web.className(_el$2, styles$5.PianoRollContainer));
+            return _el$2;
+          })(), web.createComponent(HorizontalZoomControl, {
             get min() {
-              return minVerticalZoom();
+              return minZoom();
             },
             get max() {
-              return maxVerticalZoom();
+              return maxZoom();
             }
           })];
         }
       }));
-      web.insert(_el$, web.createComponent(HorizontalZoomControl, {
-        get min() {
-          return minZoom();
-        },
-        get max() {
-          return maxZoom();
-        }
-      }), null);
-      web.effect(() => web.className(_el$2, styles$4.PianoRollContainer));
       return _el$;
     }
   });
@@ -960,40 +1101,86 @@ const useNotes = () => {
   };
 };
 
-const usePianoRoll = () => {
-  const [ppq, onPpqChange] = solidJs.createSignal(120);
-  const [mode, onModeChange] = solidJs.createSignal("tracks");
-  const [position, onPositionChange] = solidJs.createSignal(0);
-  const [zoom, onZoomChange] = solidJs.createSignal(10);
-  const [verticalZoom, onVerticalZoomChange] = solidJs.createSignal(5);
-  const [verticalPosition, onVerticalPositionChange] = solidJs.createSignal(44);
-  const [gridDivision, onGridDivisionChange] = solidJs.createSignal(4);
-  const [snapToGrid, onSnapToGridChange] = solidJs.createSignal(true);
-  const [duration, onDurationChange] = solidJs.createSignal(0);
-  return {
-    ppq,
+const createPianoRollstate = defaultState => {
+  const [state, setState] = store.createStore({
+    ppq: 0,
+    mode: "keys",
+    position: 0,
+    zoom: 10,
+    verticalZoom: 5,
+    verticalPosition: 44,
+    verticalTrackZoom: 0.5,
+    verticalTrackPosition: 0,
+    gridDivision: 4,
+    snapToGrid: true,
+    duration: 0,
+    tracks: [],
+    selectedTrackIndex: 0,
+    pressedKeys: [],
+    ...defaultState
+  });
+  const updateNotes = async (trackIndex, getNotes) => {
+    const track = state.tracks[trackIndex];
+    if (!track) return;
+    const notes = track.notes;
+    onTracksChange([...state.tracks.slice(0, trackIndex), {
+      ...track,
+      notes: getNotes(notes)
+    }, ...state.tracks.slice(trackIndex + 1)]);
+  };
+  const onNoteChange = (trackIndex, noteIndex, note) => {
+    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), note, ...notes.slice(noteIndex + 1)]);
+  };
+  const onInsertNote = (trackIndex, note) => {
+    const track = state.tracks[trackIndex];
+    if (!track) return -1;
+    const notes = track.notes;
+    const newNoteIndex = Math.max(notes.findIndex(({
+      ticks
+    }) => ticks > note.ticks), 0);
+    updateNotes(trackIndex, notes => [...notes.slice(0, newNoteIndex), note, ...notes.slice(newNoteIndex)]);
+    return newNoteIndex;
+  };
+  const onRemoveNote = (trackIndex, noteIndex) => {
+    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), ...notes.slice(noteIndex + 1)]);
+  };
+  const onPpqChange = ppq => setState("ppq", ppq);
+  const onModeChange = mode => setState("mode", mode);
+  const onPositionChange = position => setState("position", position);
+  const onZoomChange = zoom => setState("zoom", zoom);
+  const onVerticalZoomChange = verticalZoom => setState("verticalZoom", verticalZoom);
+  const onVerticalPositionChange = verticalPosition => setState("verticalPosition", verticalPosition);
+  const onVerticalTrackZoomChange = verticalTrackZoom => setState("verticalTrackZoom", verticalTrackZoom);
+  const onVerticalTrackPositionChange = verticalTrackPosition => setState("verticalTrackPosition", verticalTrackPosition);
+  const onGridDivisionChange = gridDivision => setState("gridDivision", gridDivision);
+  const onSnapToGridChange = snapToGrid => setState("snapToGrid", snapToGrid);
+  const onDurationChange = duration => setState("duration", duration);
+  const onTracksChange = tracks => setState("tracks", tracks);
+  const onSelectedTrackIndexChange = selectedTrackIndex => setState("selectedTrackIndex", selectedTrackIndex);
+  const onPressedKeysChange = pressedKeys => setState("pressedKeys", pressedKeys);
+  return solidJs.mergeProps(state, {
     onPpqChange,
-    position,
+    onModeChange,
     onPositionChange,
-    zoom,
     onZoomChange,
-    verticalPosition,
-    onVerticalPositionChange,
-    verticalZoom,
     onVerticalZoomChange,
-    gridDivision,
+    onVerticalPositionChange,
+    onVerticalTrackZoomChange,
+    onVerticalTrackPositionChange,
     onGridDivisionChange,
-    snapToGrid,
     onSnapToGridChange,
-    mode,
-    onModeChange,
-    duration,
-    onDurationChange
-  };
+    onDurationChange,
+    onTracksChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote,
+    onSelectedTrackIndexChange,
+    onPressedKeysChange
+  });
 };
 
 exports.PianoRoll = PianoRoll;
 exports.PlayHead = PlayHead;
+exports.createPianoRollstate = createPianoRollstate;
 exports.useNotes = useNotes;
-exports.usePianoRoll = usePianoRoll;
 //# sourceMappingURL=index.js.map