solid-pianoroll 0.0.18 → 0.0.20

package/dist/cjs/index.js

@@ -42,21 +42,28 @@ const usePianoRollContext = () => {
 };
 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$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 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);
 
 function createViewPortDimension(getState) {
-  const getStateWithFunctions = () => ({
-    ...getState(),
-    calculatePixelOffset,
-    calculatePixelValue,
-    calculatePosition,
-    calculatePixelDimensions,
-    calculateVisibleRange,
-    calculateMaxPosition,
-    isVisible
-  });
+  const getStateWithFunctions = () => {
+    const state = getState();
+    const onZoomChange = zoom => state.onZoomChange?.(clamp(zoom, state.minZoom, state.maxZoom));
+    const onPositionChange = position => state.onPositionChange?.(position);
+    return {
+      ...state,
+      onZoomChange,
+      onPositionChange,
+      calculatePixelOffset,
+      calculatePixelValue,
+      calculatePosition,
+      calculatePixelDimensions,
+      calculateVisibleRange,
+      calculateMaxPosition,
+      isVisible
+    };
+  };
   const [state, setState] = store.createStore(getStateWithFunctions());
   solidJs.createEffect(() => setState(getStateWithFunctions()));
   function calculatePixelValue(position = state.position) {
@@ -95,9 +102,18 @@ function createViewPortDimension(getState) {
 }
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
+const defaultViewPortProps = {
+  pixelOffset: 0,
+  position: 0,
+  range: 1,
+  zoom: 1,
+  minZoom: 1,
+  maxZoom: Infinity
+};
 const ScrollZoomViewPort = props => {
   const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({
     name: name,
+    ...defaultViewPortProps,
     ...viewPortProps()
   })));
   const parentViewPorts = solidJs.useContext(ScrollZoomViewPortContext);
@@ -118,12 +134,12 @@ const useViewPortDimension = name => {
   return viewPort;
 };
 
-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"};
+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);
 
-const _tmpl$$8 = /*#__PURE__*/web.template(`<div><div><div><div></div></div></div></div>`, 8);
-const ScrollContainer = props => {
+const _tmpl$$7 = /*#__PURE__*/web.template(`<div><div><div><div></div></div></div></div>`, 8);
+const ScrollZoomContainer = props => {
   let scrollContentRef;
   const [ownProps, divProps] = solidJs.splitProps(props, ["ref", "verticalDimensionName", "horizontalDimensionName", "showScrollbar"]);
   const propsWithDefaults = solidJs.mergeProps({
@@ -194,7 +210,7 @@ const ScrollContainer = props => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$$8.cloneNode(true),
+    const _el$ = _tmpl$$7.cloneNode(true),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild;
@@ -202,7 +218,7 @@ const ScrollContainer = props => {
     _el$.addEventListener("scroll", handleScroll);
     const _ref$ = props.ref;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
-    web.spread(_el$, web.mergeProps({
+    web.spread(_el$, web.mergeProps(divProps, {
       get style() {
         return {
           overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
@@ -211,11 +227,11 @@ const ScrollContainer = props => {
       },
       get classList() {
         return {
-          [styles$3.ScrollContainer]: true,
+          [styles$3.ScrollZoomContainer]: true,
           ...divProps.classList
         };
       }
-    }, divProps), false, true);
+    }), 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");
@@ -244,9 +260,10 @@ const ScrollContainer = props => {
   })();
 };
 
-const _tmpl$$7 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const _tmpl$$6 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollKeys = () => {
-  const viewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const verticalViewPort = solidJs.createMemo(() => useViewPortDimension("vertical"));
+  const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontalKeys"));
   const [isMouseDown, setIsMouseDown] = solidJs.createSignal(false);
   const context = usePianoRollContext();
   const handleMouseUp = () => {
@@ -259,106 +276,116 @@ const PianoRollKeys = () => {
       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()) {
+  return (() => {
+    const _el$ = _tmpl$$6.cloneNode(true);
+    web.insert(_el$, web.createComponent(ScrollZoomContainer, {
+      horizontalDimensionName: "horizontalKeys",
+      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(() => verticalViewPort().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$2 = _tmpl$$6.cloneNode(true);
+                _el$2.addEventListener("mouseleave", () => {
+                  if (isMouseDown()) {
+                    handleKeyUp();
+                  }
+                });
+                _el$2.addEventListener("mouseenter", () => {
+                  if (isMouseDown()) {
+                    handleKeyDown();
+                  }
+                });
+                _el$2.$$mouseup = () => {
                   handleKeyUp();
-                }
-              });
-              _el$.addEventListener("mouseenter", () => {
-                if (isMouseDown()) {
+                };
+                _el$2.$$mousedown = () => {
+                  setIsMouseDown(true);
                   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()
+                };
+                web.insert(_el$2, web.createComponent(solidJs.Show, {
+                  get when() {
+                    return key().isBlack && false;
                   },
-                  _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$;
-            }
-          });
-        }
-      });
-    }
-  });
+                  get children() {
+                    const _el$3 = _tmpl$$6.cloneNode(true);
+                    web.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 && web.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;
+                  }
+                }));
+                web.effect(_p$ => {
+                  const _v$6 = {
+                      [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 = web.classList(_el$2, _v$6, _p$._v$6);
+                  _v$7 !== _p$._v$7 && web.setAttribute(_el$2, "title", _p$._v$7 = _v$7);
+                  _v$8 !== _p$._v$8 && web.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);
+                  return _p$;
+                }, {
+                  _v$6: undefined,
+                  _v$7: undefined,
+                  _v$8: undefined,
+                  _v$9: undefined,
+                  _v$10: undefined,
+                  _v$11: undefined
+                });
+                return _el$2;
+              }
+            });
+          }
+        });
+      }
+    }));
+    web.effect(_p$ => {
+      const _v$ = styles$4.PianoRollKeys,
+        _v$2 = `${horizontalViewPort().pixelSize}px`;
+      _v$ !== _p$._v$ && web.className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && _el$.style.setProperty("width", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
 };
 const blackKeys = [1, 3, 6, 8, 10];
 const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
@@ -375,7 +402,7 @@ var css_248z$2 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: ab
 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$$6 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
@@ -414,7 +441,7 @@ const PianoRollNotes = props => {
     return noteDragMode ? [styles$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
   };
   return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
+    const _el$ = _tmpl$$5.cloneNode(true);
     _el$.$$click = event => {
       if (currentNote()) {
         setCurrentNoteIndex(-1);
@@ -472,7 +499,7 @@ const PianoRollNotes = props => {
                     return web.memo(() => !!verticalViewPort().isVisible(verticalVirtualDimensions()))() && horizontalViewPort().isVisible(horizontalDimensions());
                   },
                   get children() {
-                    const _el$2 = _tmpl$$6.cloneNode(true);
+                    const _el$2 = _tmpl$$5.cloneNode(true);
                     _el$2.$$mousedown = event => {
                       event.stopPropagation();
                       setIsDragging(true);
@@ -569,7 +596,9 @@ const PianoRollNotes = props => {
         });
       }
     }));
-    web.effect(() => web.className(_el$, styles$2.PianoRollNotes));
+    web.effect(_$p => web.classList(_el$, {
+      [styles$2.PianoRollNotes]: true
+    }, _$p));
     return _el$;
   })();
 };
@@ -579,7 +608,7 @@ var css_248z$1 = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: rela
 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);
 
-const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2);
+const _tmpl$$4 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = solidJs.createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
@@ -609,7 +638,7 @@ const PianoRollGrid = () => {
     }));
   });
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
+    const _el$ = _tmpl$$4.cloneNode(true);
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return gridArray();
@@ -621,7 +650,7 @@ const PianoRollGrid = () => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$$5.cloneNode(true);
+            const _el$2 = _tmpl$$4.cloneNode(true);
             web.effect(_p$ => {
               const _v$ = styles$1["PianoRollGrid-Time"],
                 _v$2 = Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
@@ -660,7 +689,7 @@ const PianoRollGrid = () => {
                 return virtualDimensions().size > 0;
               },
               get children() {
-                const _el$3 = _tmpl$$5.cloneNode(true);
+                const _el$3 = _tmpl$$4.cloneNode(true);
                 _el$3.style.setProperty("width", "100%");
                 web.effect(_p$ => {
                   const _v$6 = styles$1["PianoRollGrid-Row"],
@@ -704,7 +733,7 @@ const PianoRollGrid = () => {
                 return virtualDimensions().size > 0;
               },
               get children() {
-                const _el$4 = _tmpl$$5.cloneNode(true);
+                const _el$4 = _tmpl$$4.cloneNode(true);
                 _el$4.style.setProperty("width", "100%");
                 _el$4.style.setProperty("border-width", "0");
                 web.effect(_p$ => {
@@ -763,50 +792,47 @@ function useBoundingClientRect(containerRef) {
   return boundingClientRect;
 }
 
-const _tmpl$$4 = /*#__PURE__*/web.template(`<input min="1" max="11" step="0.01">`, 1);
-const VerticalZoomControl = props => {
-  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? "vertical"));
+const _tmpl$$3 = /*#__PURE__*/web.template(`<input step="0.01">`, 1);
+const ZoomSliderControl = props => {
+  const propsWithDefaults = solidJs.mergeProps({
+    orientation: "horizontal"
+  }, props);
+  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true);
-    web.spread(_el$, web.mergeProps(props, {
+    const _el$ = _tmpl$$3.cloneNode(true);
+    web.spread(_el$, web.mergeProps({
+      get min() {
+        return dimension().minZoom;
+      },
+      get max() {
+        return dimension().maxZoom;
+      }
+    }, props, {
       get value() {
         return dimension().zoom;
       },
       "onInput": event => dimension().onZoomChange?.(event.currentTarget.valueAsNumber),
       "type": "range"
-    }, {
-      orient: "vertical"
-    }, {
+    }, () => ({
+      orient: propsWithDefaults.orientation
+    }), {
       get style() {
-        return {
+        return propsWithDefaults.orientation === "vertical" ? {
+          margin: 0,
+          "margin-left": "4px",
+          "margin-right": "4px",
           width: "16px",
           transform: "rotate(180deg)",
           ...{
             "writing-mode": "bt-lr" /* IE */,
             "-webkit-appearance": "slider-vertical" /* WebKit */
-          }
-        };
-      }
-    }), false, false);
-    return _el$;
-  })();
-};
+          },
 
-const _tmpl$$3 = /*#__PURE__*/web.template(`<input max="500" min="1" step="0.01">`, 1);
-const HorizontalZoomControl = props => {
-  const dimension = solidJs.createMemo(() => useViewPortDimension(props.dimensionName ?? "horizontal"));
-  return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true);
-    web.spread(_el$, web.mergeProps(props, {
-      get value() {
-        return dimension().zoom;
-      },
-      "onInput": event => dimension().onZoomChange?.(event.currentTarget.valueAsNumber),
-      "type": "range",
-      get style() {
-        return {
-          "margin-left": "50px",
-          "margin-right": "16px",
+          ...(typeof props.style === "object" && props.style)
+        } : {
+          margin: 0,
+          "margin-top": "4px",
+          "margin-bottom": "4px",
           ...(typeof props.style === "object" && props.style)
         };
       }
@@ -882,23 +908,11 @@ const PianoRoll = allProps => {
     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 [notesScrollerRef, setNotesScrollerRef] = solidJs.createSignal();
+  const [tracksScrollerRef, setTracksScrollerRef] = solidJs.createSignal();
+  const notesScrollerClientRect = useBoundingClientRect(notesScrollerRef);
+  const tracksScrollerClientRect = useBoundingClientRect(tracksScrollerRef);
   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 (context.mode === "tracks") {
-      context.onVerticalPositionChange?.(0);
-    }
-  }, true);
   return web.createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
@@ -911,62 +925,64 @@ const PianoRoll = allProps => {
       web.insert(_el$, web.createComponent(ScrollZoomViewPort, {
         dimensions: {
           horizontal: () => ({
-            pixelOffset: clientRect().left,
-            pixelSize: clientRect().width,
+            pixelOffset: notesScrollerClientRect().left,
+            pixelSize: notesScrollerClientRect().width,
             position: context.position,
             range: context.duration,
-            zoom: context.zoom * (zoomFactor / clientRect().width),
+            zoom: context.zoom * (zoomFactor / notesScrollerClientRect().width),
             onPositionChange: context.onPositionChange,
-            onZoomChange: zoom => context.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom()))
+            onZoomChange: zoom => context.onZoomChange?.(zoom / (zoomFactor / notesScrollerClientRect().width)),
+            minZoom: 1,
+            maxZoom: 500
           }),
           vertical: () => ({
-            pixelOffset: clientRect().top,
-            pixelSize: clientRect().height,
+            pixelOffset: notesScrollerClientRect().top,
+            pixelSize: notesScrollerClientRect().height,
             position: context.verticalPosition,
             range: 128,
-            zoom: context.verticalZoom * (zoomFactor / clientRect().height),
+            zoom: context.verticalZoom * (zoomFactor / notesScrollerClientRect().height),
             onPositionChange: context.onVerticalPositionChange,
-            onZoomChange: verticalZoom => context.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
+            onZoomChange: verticalZoom => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / notesScrollerClientRect().height)),
+            minZoom: 1,
+            maxZoom: 10
           }),
           horizontalTracks: () => ({
-            pixelOffset: clientRect().left,
-            pixelSize: clientRect().width,
-            position: 0,
-            range: 1,
-            zoom: 1
+            pixelOffset: 0,
+            pixelSize: tracksScrollerClientRect().width
           }),
           verticalTracks: () => ({
-            pixelOffset: trackClientRef().top,
-            pixelSize: trackClientRef().height,
+            pixelOffset: tracksScrollerClientRect().top,
+            pixelSize: tracksScrollerClientRect().height,
             position: context.verticalTrackPosition,
             range: context.tracks.length,
-            zoom: context.verticalTrackZoom * (zoomFactor / trackClientRef().height),
+            zoom: context.verticalTrackZoom * (zoomFactor / tracksScrollerClientRect().height),
             onPositionChange: context.onVerticalTrackPositionChange,
-            onZoomChange: verticalTrackZoom => context.onVerticalTrackZoomChange?.(clamp(verticalTrackZoom / (zoomFactor / trackClientRef().height), minVerticalTracksZoom(), maxVerticalTracksZoom()))
+            onZoomChange: verticalTrackZoom => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / tracksScrollerClientRect().height)),
+            minZoom: 0.8,
+            maxZoom: 3
+          }),
+          horizontalKeys: () => ({
+            pixelSize: 60
           })
         },
         get children() {
           return [(() => {
             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();
-              },
+            web.insert(_el$2, web.createComponent(ZoomSliderControl, {
+              orientation: "vertical",
               dimensionName: "verticalTracks"
             }), _el$3);
             _el$3.style.setProperty("display", "flex");
-            _el$3.style.setProperty("width", "20%");
+            _el$3.style.setProperty("width", "30%");
+            _el$3.style.setProperty("max-width", "250px");
             web.insert(_el$3, web.createComponent(solidJs.Show, {
               get when() {
                 return context.showTrackList;
               },
               get children() {
-                return web.createComponent(ScrollContainer, {
-                  ref: setTrackScrollerRef,
+                return web.createComponent(ScrollZoomContainer, {
+                  ref: setTracksScrollerRef,
                   horizontalDimensionName: "horizontalTracks",
                   verticalDimensionName: "verticalTracks",
                   get showScrollbar() {
@@ -986,8 +1002,8 @@ const PianoRoll = allProps => {
                 return web.createComponent(PianoRollKeys, {});
               }
             }), null);
-            web.insert(_el$2, web.createComponent(ScrollContainer, {
-              ref: setScrollerRef,
+            web.insert(_el$2, web.createComponent(ScrollZoomContainer, {
+              ref: setNotesScrollerRef,
               get verticalDimensionName() {
                 return context.mode === "keys" ? "vertical" : "verticalTracks";
               },
@@ -995,25 +1011,21 @@ const PianoRoll = allProps => {
                 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();
-              },
+            web.insert(_el$2, web.createComponent(ZoomSliderControl, {
+              orientation: "vertical",
               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 minZoom();
-            },
-            get max() {
-              return maxZoom();
+          })(), web.createComponent(ZoomSliderControl, {
+            orientation: "horizontal",
+            get style() {
+              return {
+                "margin-left": `${tracksScrollerClientRect().width + 24}px`,
+                "margin-right": "24px"
+              };
             }
           })];
         }