solid-pianoroll 0.0.8 → 0.0.10

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { createComponent, delegateEvents, effect, template, insert, className, setAttribute, use, memo, style, spread, mergeProps } from 'solid-js/web';
-import { createSignal, createEffect, createMemo, createContext, splitProps, useContext, Index, Show } from 'solid-js';
+import { createComponent, insert, effect, classList, setAttribute, className, template, delegateEvents, use, memo, spread, mergeProps } from 'solid-js/web';
+import { createContext, useContext, createEffect, createMemo, Index, Show, createSignal, splitProps } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
 function styleInject(css, ref) {
@@ -27,198 +27,132 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  padding: 16px;\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_PianoRollInnerContainer__9wdIQ {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  flex: 1;\n}\n";
-var styles$1 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7","PianoRollInnerContainer":"PianoRoll-module_PianoRollInnerContainer__9wdIQ"};
-styleInject(css_248z$1);
+var css_248z$3 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  padding-top: 16px;\n  padding-left: 16px;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n";
+var styles$3 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
+styleInject(css_248z$3);
 
-const defaultRect = {
-  left: 0,
-  width: 0,
-  top: 0,
-  height: 0,
-  bottom: 0,
-  right: 0,
-  x: 0,
-  y: 0
+const PianoRollContext = createContext();
+const PianoRollContextProvider = PianoRollContext.Provider;
+const usePianoRollContext = () => {
+  const context = useContext(PianoRollContext);
+  if (!context) throw new Error("No PianoRollContext found");
+  return context;
 };
-function useBoundingClientRect(containerRef) {
-  const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
-  createEffect(() => {
-    const container = containerRef();
-    if (!container) return;
-    const updateBoundingClientRect = () => {
-      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
-    };
-    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
-    resizeObserver.observe(container);
-    updateBoundingClientRect();
-    return () => {
-      resizeObserver.disconnect();
-    };
-  });
-  return boundingClientRect;
-}
 
-function useViewPortScaler(getState) {
-  const state = createMemo(() => getState());
-  function getScaledValue(position) {
-    const virtualSize = state().viewPortSize * state().zoom;
-    return position / state().virtualRange * virtualSize;
-  }
-  function getCoordinates(position) {
-    return getScaledValue(position) - getScaledValue(state().virtualPosition);
+var css_248z$2 = ".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$2 = {"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$2);
+
+function createViewPortDimension(getState) {
+  const getStateWithFunctions = () => ({
+    ...getState(),
+    calculatePixelValue,
+    calculatePosition,
+    calculatePixelDimensions,
+    calculateVisibleRange,
+    calculateMaxPosition
+  });
+  const [state, setState] = createStore(getStateWithFunctions());
+  createEffect(() => setState(getStateWithFunctions()));
+  function calculatePixelValue(position = state.position) {
+    const virtualSize = state.pixelSize * state.zoom;
+    return position / state.range * virtualSize;
   }
-  function getVisibleRange() {
-    return state().virtualRange / state().zoom;
+  function calculatePixelOffset(position) {
+    return calculatePixelValue(position) - calculatePixelValue(state.position);
   }
-  function getPosition(offset) {
-    const percentX = (offset - state().viewPortOffset) / state().viewPortSize;
-    const position = state().virtualPosition + percentX * getVisibleRange();
+  function calculatePosition(offset) {
+    const percentX = (offset - state.pixelOffset) / state.pixelSize;
+    const position = state.position + percentX * calculateVisibleRange();
     return position;
   }
-  function getMaxPosition() {
-    return state().virtualRange - state().virtualRange / state().zoom;
+  function calculateVisibleRange() {
+    return state.range / state.zoom;
   }
-  function getScrollSize() {
-    return clamp(state().zoom * state().viewPortSize, state().viewPortSize, 100000);
+  function calculateMaxPosition() {
+    return state.range - state.range / state.zoom;
   }
-  function getVirtualDimensions(position, length) {
-    const virtualLeft = getCoordinates(position);
-    const virtualWidth = getScaledValue(length);
-    const offset = clamp(virtualLeft, 0, state().viewPortSize);
-    const size = clamp(virtualWidth - (offset - virtualLeft), 0, state().viewPortSize - offset);
+  function calculatePixelDimensions(position, length) {
+    const offset = calculatePixelOffset(position);
+    const size = calculatePixelValue(length);
     return {
       offset,
       size
     };
   }
-  return {
-    getScaledValue,
-    getCoordinates,
-    getPosition,
-    getVirtualDimensions,
-    getVisibleRange,
-    getMaxPosition,
-    getScrollSize
-  };
+  return state;
 }
-const clamp = (value, min, max) => {
-  return Math.max(min, Math.min(max, value));
-};
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
-const PianoRollContext = createContext(undefined);
-const PianoRollContextProvider = props => {
-  const [noteDragMode, setNoteDragMode] = createSignal();
-  const [isDragging, setIsDragging] = createSignal(false);
-  const [_ownProps, contextProps] = splitProps(props, ["children", "scrollContainer"]);
-  const clientRect = useBoundingClientRect(() => props.scrollContainer);
-  const horizontalViewPort = useViewPortScaler(() => ({
-    viewPortOffset: clientRect().left,
-    viewPortSize: clientRect().width,
-    virtualPosition: props.position,
-    virtualRange: props.duration,
-    zoom: props.zoom * (500 / clientRect().width)
-  }));
-  const verticalViewPort = useViewPortScaler(() => ({
-    viewPortOffset: clientRect().top,
-    viewPortSize: clientRect().height,
-    virtualPosition: props.verticalPosition,
-    zoom: props.verticalZoom * (500 / clientRect().height),
-    virtualRange: 128
-  }));
-  const getContextValue = () => {
-    return {
-      ...contextProps,
-      horizontalViewPort,
-      verticalViewPort,
-      clientRect: clientRect(),
-      isDragging: isDragging(),
-      onIsDraggingChange: setIsDragging,
-      noteDragMode: noteDragMode(),
-      onNoteDragModeChange: setNoteDragMode
-    };
-  };
-  const [contextValue, setContextValue] = createStore(getContextValue());
-  createEffect(() => {
-    setContextValue(getContextValue());
-  });
-  return createComponent(PianoRollContext.Provider, {
-    value: contextValue,
+const ScrollZoomViewPort = props => {
+  const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({
+    name: name,
+    ...viewPortProps()
+  })));
+  const parentViewPorts = useContext(ScrollZoomViewPortContext);
+  return createComponent(ScrollZoomViewPortContext.Provider, {
+    get value() {
+      return [...parentViewPorts, ...viewPorts];
+    },
     get children() {
       return props.children;
     }
   });
 };
-const usePianoRollContext = () => {
-  const context = useContext(PianoRollContext);
-  if (!context) throw new Error("No PianoRollContext found");
-  return context;
-};
-
-const _tmpl$$6 = /*#__PURE__*/template(`<input type="range" max="500" min="1" step="0.01">`, 1);
-const HorizontalZoomControl = () => {
-  const context = usePianoRollContext();
-  return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
-    _el$.$$input = event => context.onZoomChange?.(event.currentTarget.valueAsNumber);
-    _el$.style.setProperty("margin-left", "50px");
-    _el$.style.setProperty("margin-right", "16px");
-    effect(() => _el$.value = context.zoom);
-    return _el$;
-  })();
+const ScrollZoomViewPortContext = createContext([]);
+const useViewPortDimension = name => {
+  const viewPorts = useContext(ScrollZoomViewPortContext);
+  const viewPort = name ? viewPorts.find(viewPort => viewPort.name === name) : viewPorts[viewPorts.length - 1];
+  if (!viewPort) throw new Error(`ViewPort dimension "${name}" not found.`);
+  return viewPort;
 };
-delegateEvents(["input"]);
-
-var css_248z = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  width: 50px;\n}\n\n.PianoRollKeys-module_PianoRollKeys-Key__xunQt {\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  width: 100%;\n  border-color: #000;\n  border-style: solid;\n}\n";
-var styles = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","PianoRollKeys-Key":"PianoRollKeys-module_PianoRollKeys-Key__xunQt"};
-styleInject(css_248z);
 
-const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
+const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollKeys = () => {
-  const context = usePianoRollContext();
+  const viewPort = createMemo(() => useViewPortDimension("vertical"));
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
+    const _el$ = _tmpl$$6.cloneNode(true);
     insert(_el$, createComponent(Index, {
       each: keys,
       children: key => {
-        const virtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - key().number, 1));
+        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
         return createComponent(Show, {
           get when() {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$$5.cloneNode(true);
+            const _el$2 = _tmpl$$6.cloneNode(true);
             effect(_p$ => {
-              const _v$ = styles["PianoRollKeys-Key"],
+              const _v$ = {
+                  [styles$2["Key"]]: true,
+                  [styles$2["black"]]: key().isBlack,
+                  [styles$2["white"]]: !key().isBlack,
+                  [styles$2["whiteAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
+                  [styles$2["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`,
-                _v$6 = key().isBlack ? "#000" : "#fff",
-                _v$7 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
-              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+                _v$5 = `${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 && 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);
-              _v$6 !== _p$._v$6 && _el$2.style.setProperty("background-color", _p$._v$6 = _v$6);
-              _v$7 !== _p$._v$7 && _el$2.style.setProperty("border-width", _p$._v$7 = _v$7);
               return _p$;
             }, {
               _v$: undefined,
               _v$2: undefined,
               _v$3: undefined,
               _v$4: undefined,
-              _v$5: undefined,
-              _v$6: undefined,
-              _v$7: undefined
+              _v$5: undefined
             });
             return _el$2;
           }
         });
       }
     }));
-    effect(() => className(_el$, styles.PianoRollKeys));
+    effect(() => className(_el$, styles$2.PianoRollKeys));
     return _el$;
   })();
 };
@@ -232,149 +166,186 @@ const keys = Array.from({
   isBlack: blackKeys.includes(index % 12)
 }));
 
-const _tmpl$$4 = /*#__PURE__*/template(`<div class="PianoRoll-Notes-Container"><div class="PianoRoll-Notes"></div></div>`, 4),
-  _tmpl$2$1 = /*#__PURE__*/template(`<div class="PianoRoll-Note"></div>`, 2);
+var css_248z$1 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\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: pointer;\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$1 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
+styleInject(css_248z$1);
+
+const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
+  const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+  const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const gridDivisionTicks = createMemo(() => context.ppq * 4 / context.gridDivision);
   const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
+  const insertOrUpdateNote = event => {
+    const position = horizontalViewPort().calculatePosition(event.clientX);
+    const midi = 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+    const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
+    const velocity = 127;
+    const existingNote = newNote();
+    const ticks = existingNote?.ticks ?? eventPositionTicks;
+    const durationTicks = existingNote?.ticks ? eventPositionTicks - existingNote?.ticks : gridDivisionTicks();
+    const note = {
+      midi,
+      ticks,
+      durationTicks,
+      velocity
+    };
+    if (existingNote) {
+      context.onNoteChange?.(newNoteIndex(), note);
+      return newNoteIndex();
+    } else {
+      return context.onInsertNote?.(note) ?? -1;
+    }
+  };
+  const [isDragging, setIsDragging] = createSignal(false);
+  const [noteDragMode, setNoteDragMode] = createSignal();
+  const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
+  const [isMouseDown, setIsMouseDown] = createSignal(false);
+  const newNote = createMemo(() => context.notes[newNoteIndex()]);
+  const getClasses = noteDragMode => {
+    return noteDragMode ? [styles$1.Note, styles$1[noteDragMode]] : [styles$1.Note];
+  };
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true),
-      _el$2 = _el$.firstChild;
-    _el$.style.setProperty("position", "absolute");
+    const _el$ = _tmpl$$5.cloneNode(true);
+    _el$.$$click = event => {
+      if (newNote()) {
+        setNewNoteIndex(-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);
+      console.log({
+        index
+      });
+      setNewNoteIndex(index);
+    };
+    _el$.$$mousedown = () => {
+      console.log("down");
+      setIsMouseDown(true);
+    };
     const _ref$ = props.ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$2) : props.ref = _el$2;
-    _el$2.style.setProperty("position", "relative");
-    _el$2.style.setProperty("height", "100%");
-    insert(_el$2, createComponent(Index, {
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    insert(_el$, createComponent(Index, {
       get each() {
         return context.notes;
       },
       children: (note, index) => {
-        const horizontalVirtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - note().midi, 1));
-        const verticalVirtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(note().ticks, note().durationTicks));
+        const verticalVirtualDimensionss = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
+        const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
         return createComponent(Show, {
           get when() {
-            return memo(() => !!!!horizontalVirtualDimensions().size)() && !!verticalVirtualDimensions().size;
+            return memo(() => !!!!verticalVirtualDimensionss().size)() && !!horizontalDimensions().size;
           },
           get children() {
-            const _el$3 = _tmpl$2$1.cloneNode(true);
-            _el$3.$$mousedown = event => {
-              context.onIsDraggingChange(true);
-              const initialPosition = context.horizontalViewPort.getPosition(event.clientX);
+            const _el$2 = _tmpl$$5.cloneNode(true);
+            _el$2.$$mousedown = event => {
+              event.stopPropagation();
+              setIsDragging(true);
+              const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
               const diffPosition = initialPosition - note().ticks;
               const handleMouseMove = mouseMoveEvent => {
-                const ticks = snapValueToGridIfEnabled(Math.max(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
+                const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
                 context.onNoteChange?.(index, {
                   ...note(),
-                  ...(context.noteDragMode === "move" && {
-                    midi: Math.round(127 - context.verticalViewPort.getPosition(mouseMoveEvent.clientY))
+                  ...(noteDragMode() === "move" && {
+                    midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
                   }),
-                  ...((context.noteDragMode === "move" || context.noteDragMode === "trimStart") && {
+                  ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
                     ticks
                   }),
-                  ...(context.noteDragMode === "trimStart" && {
+                  ...(noteDragMode() === "trimStart" && {
                     durationTicks: note().durationTicks + note().ticks - ticks
                   }),
-                  ...(context.noteDragMode === "trimEnd" && {
-                    durationTicks: snapValueToGridIfEnabled(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) - note().ticks, mouseMoveEvent.altKey)
+                  ...(noteDragMode() === "trimEnd" && {
+                    durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - note().ticks, mouseMoveEvent.altKey)
                   })
                 });
               };
               const handleMouseUp = () => {
-                context.onIsDraggingChange(false);
+                setIsDragging(false);
                 window.removeEventListener("mousemove", handleMouseMove);
                 window.removeEventListener("mouseup", handleMouseUp);
               };
               window.addEventListener("mousemove", handleMouseMove);
               window.addEventListener("mouseup", handleMouseUp);
             };
-            _el$3.$$dblclick = () => {
+            _el$2.$$dblclick = event => {
+              event.stopPropagation();
               context.onRemoveNote?.(index);
             };
-            _el$3.$$mousemove = event => {
-              if (context.isDragging) return;
-              const relativeX = context.horizontalViewPort.getScaledValue(context.horizontalViewPort.getPosition(event.clientX));
-              const noteStartX = context.horizontalViewPort.getScaledValue(note().ticks);
-              const noteEndX = context.horizontalViewPort.getScaledValue(note().ticks + note().durationTicks);
-              context.onNoteDragModeChange(relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move");
+            _el$2.$$mousemove = event => {
+              if (isDragging()) return;
+              event.stopPropagation();
+              const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
+              const noteStartX = horizontalViewPort().calculatePixelValue(note().ticks);
+              const noteEndX = horizontalViewPort().calculatePixelValue(note().ticks + note().durationTicks);
+              setNoteDragMode(relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move");
             };
-            _el$3.style.setProperty("z-index", "2");
-            _el$3.style.setProperty("position", "absolute");
-            _el$3.style.setProperty("box-sizing", "border-box");
-            _el$3.style.setProperty("border-width", "0.5px");
-            _el$3.style.setProperty("border-style", "solid");
-            _el$3.style.setProperty("border-color", "#a00");
             effect(_p$ => {
-              const _v$4 = `${horizontalVirtualDimensions().offset}px`,
-                _v$5 = `${horizontalVirtualDimensions().size}px`,
-                _v$6 = `${verticalVirtualDimensions().offset}px`,
-                _v$7 = `${verticalVirtualDimensions().size}px`,
-                _v$8 = `rgba(255,0,0, ${(128 + note().velocity) / 256})`;
-              _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);
-              _v$6 !== _p$._v$6 && _el$3.style.setProperty("left", _p$._v$6 = _v$6);
-              _v$7 !== _p$._v$7 && _el$3.style.setProperty("width", _p$._v$7 = _v$7);
-              _v$8 !== _p$._v$8 && _el$3.style.setProperty("background-color", _p$._v$8 = _v$8);
+              const _v$ = getClasses(noteDragMode()).join(" "),
+                _v$2 = `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
+                _v$3 = `${verticalVirtualDimensionss().offset}px`,
+                _v$4 = `${verticalVirtualDimensionss().size}px`,
+                _v$5 = `${horizontalDimensions().offset}px`,
+                _v$6 = `${horizontalDimensions().size}px`;
+              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+              _v$2 !== _p$._v$2 && _el$2.style.setProperty("background-color", _p$._v$2 = _v$2);
+              _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
+              _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
+              _v$5 !== _p$._v$5 && _el$2.style.setProperty("left", _p$._v$5 = _v$5);
+              _v$6 !== _p$._v$6 && _el$2.style.setProperty("width", _p$._v$6 = _v$6);
               return _p$;
             }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined,
               _v$4: undefined,
               _v$5: undefined,
-              _v$6: undefined,
-              _v$7: undefined,
-              _v$8: undefined
+              _v$6: undefined
             });
-            return _el$3;
+            return _el$2;
           }
         });
       }
     }));
-    effect(_p$ => {
-      const _v$ = `${context.clientRect.width}px`,
-        _v$2 = `${context.clientRect.height}px`,
-        _v$3 = `${context.clientRect.width}px`;
-      _v$ !== _p$._v$ && _el$.style.setProperty("width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("height", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined
-    });
+    effect(() => className(_el$, styles$1.PianoRollNotes));
     return _el$;
   })();
 };
-delegateEvents(["mousemove", "dblclick", "mousedown"]);
+delegateEvents(["mousedown", "mousemove", "mouseup", "dblclick", "click"]);
 
-const _tmpl$$3 = /*#__PURE__*/template(`<div class="PianoRoll-Vertical-Scroller"><div></div></div>`, 4);
+const _tmpl$$4 = /*#__PURE__*/template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
 const ScrollContainer = props => {
   let scrollContentRef;
-  const context = usePianoRollContext();
-  const gridDivisorTicks = createMemo(() => context.ppq * 4 / context.gridDivision);
-  const forwardEventToNote = event => {
-    const x = "clientX" in event ? event.clientX : event.touches[0]?.clientX ?? 0;
-    const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY ?? 0;
-    const elementUnderMouse = [...(context.notesContainer?.querySelectorAll?.("div") ?? [])].find(element => {
-      const rect = element.getBoundingClientRect();
-      return x >= rect.left && rect.left + rect.width > x && y >= rect.top && rect.top + rect.height > y;
-    });
-    if (elementUnderMouse) {
-      return elementUnderMouse.dispatchEvent(new MouseEvent(event.type, event));
-    }
-  };
+  const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+  const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const handleScroll = event => {
     event.preventDefault();
     if (didUpdateScroll) {
       didUpdateScroll = false;
       return;
     }
-    const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
-    const maxPosition = context.horizontalViewPort.getMaxPosition();
-    const {
-      width,
-      height
-    } = context.clientRect;
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
     const {
       scrollTop,
       scrollLeft,
@@ -383,23 +354,35 @@ const ScrollContainer = props => {
     } = event.currentTarget;
     const scrollTopAmount = scrollTop / (scrollHeight - height);
     const scrollLeftAmount = scrollLeft / (scrollWidth - width);
-    context.onVerticalPositionChange?.(maxVerticalPosition * scrollTopAmount);
-    context.onPositionChange?.(maxPosition * scrollLeftAmount);
+    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;
   createEffect(() => {
-    const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
-    const maxPosition = context.horizontalViewPort.getMaxPosition();
-    const scrollTopAmount = maxVerticalPosition > 0 ? context.verticalPosition / maxVerticalPosition : 0;
-    const scrollLeftAmount = maxPosition > 0 ? context.position / maxPosition : 0;
-    const {
-      height,
-      width
-    } = context.clientRect;
+    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 = context.verticalViewPort.getScrollSize();
+    const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
     const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-    const scrollDivWidth = context.horizontalViewPort.getScrollSize();
+    const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
     const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
     didUpdateScroll = true;
     scrollContentRef.style.height = `${scrollDivHeight}px`;
@@ -409,143 +392,71 @@ const ScrollContainer = props => {
       top: scrollTop
     });
   });
-  const insertOrUpdateNote = event => {
-    const position = context.horizontalViewPort.getPosition(event.clientX);
-    const midi = 127 - Math.floor(context.verticalViewPort.getPosition(event.clientY));
-    const eventPositionTicks = Math.floor(position / gridDivisorTicks()) * gridDivisorTicks();
-    const velocity = 127;
-    const existingNote = newNote();
-    const ticks = existingNote?.ticks ?? eventPositionTicks;
-    const durationTicks = existingNote?.ticks ? eventPositionTicks - existingNote?.ticks : gridDivisorTicks();
-    const note = {
-      midi,
-      ticks,
-      durationTicks,
-      velocity
-    };
-    if (existingNote) {
-      context.onNoteChange?.(newNoteIndex(), note);
-      return newNoteIndex();
-    } else {
-      return context.onInsertNote?.(note) ?? -1;
-    }
-  };
-  const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
-  const newNote = createMemo(() => context.notes[newNoteIndex()]);
-  const [isMouseDown, setIsMouseDown] = createSignal(false);
   return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true),
-      _el$2 = _el$.firstChild;
-    _el$.addEventListener("dragend", forwardEventToNote);
-    _el$.addEventListener("drag", forwardEventToNote);
-    _el$.addEventListener("dragstart", forwardEventToNote);
-    _el$.addEventListener("touchcancel", forwardEventToNote);
-    _el$.$$touchend = forwardEventToNote;
-    _el$.$$touchmove = forwardEventToNote;
-    _el$.$$touchstart = forwardEventToNote;
-    _el$.$$mouseup = event => {
-      setIsMouseDown(false);
-      if (newNote()) return;
-      if (forwardEventToNote(event)) return;
-      if (!event.altKey) return;
-      insertOrUpdateNote(event);
-    };
-    _el$.$$click = event => {
-      if (newNote()) {
-        setNewNoteIndex(-1);
-        return;
-      }
-      if (forwardEventToNote(event)) return;
-      if (!event.altKey) return;
-      insertOrUpdateNote(event);
-    };
-    _el$.$$dblclick = event => {
-      if (newNote()) return;
-      if (context.isDragging) return;
-      if (forwardEventToNote(event)) return;
-      insertOrUpdateNote(event);
-    };
-    _el$.$$mousemove = event => {
-      event.preventDefault();
-      if (forwardEventToNote(event)) return;
-      if (context.isDragging) return;
-      if (!isMouseDown()) {
-        context.onNoteDragModeChange(undefined);
-        return;
-      }
-      const index = insertOrUpdateNote(event);
-      setNewNoteIndex(index);
-    };
-    _el$.$$mousedown = event => {
-      if (forwardEventToNote(event)) return;
-      setIsMouseDown(true);
-    };
+    const _el$ = _tmpl$$4.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" ? 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" ? use(_ref$2, _el$2) : scrollContentRef = _el$2;
-    effect(_$p => style(_el$, {
-      flex: 1,
-      ...(context.noteDragMode && {
-        cursor: context.noteDragMode === "trimStart" ? "w-resize" : context.noteDragMode === "trimEnd" ? "e-resize" : "pointer"
-      }),
-      "z-index": 4,
-      overflow: "scroll",
-      "pointer-events": "auto"
-    }, _$p));
-    return _el$;
-  })();
-};
-delegateEvents(["mousedown", "mousemove", "dblclick", "click", "mouseup", "touchstart", "touchmove", "touchend"]);
-
-const _tmpl$$2 = /*#__PURE__*/template(`<input type="range" min="1" max="11" step="0.01">`, 1);
-const VerticalZoomControl = () => {
-  const context = usePianoRollContext();
-  return (() => {
-    const _el$ = _tmpl$$2.cloneNode(true);
-    _el$.$$input = event => context.onVerticalZoomChange?.(event.currentTarget.valueAsNumber);
-    spread(_el$, mergeProps({
-      get value() {
-        return context.verticalZoom;
-      }
-    }, {
-      orient: "vertical"
+    _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");
+    insert(_el$4, () => props.children);
+    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$;
     }, {
-      get style() {
-        return {
-          width: "16px",
-          ...{
-            "writing-mode": "bt-lr" /* IE */,
-            "-webkit-appearance": "slider-vertical" /* WebKit */
-          }
-        };
-      }
-    }), false, false);
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
     return _el$;
   })();
 };
-delegateEvents(["input"]);
 
-const _tmpl$$1 = /*#__PURE__*/template(`<div class="PianoRoll-Grid-Container"><div class="PianoRoll-Grid"></div></div>`, 4),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="PianoRoll-Grid-Time"></div>`, 2),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="PianoRoll-Grid-Key"></div>`, 2);
+var css_248z = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.PianoRollGrid-module_PianoRollGrid-Key__VRbiB {\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 = {"PianoRollGrid":"PianoRollGrid-module_PianoRollGrid__tG119","PianoRollGrid-Key":"PianoRollGrid-module_PianoRollGrid-Key__VRbiB","PianoRollGrid-Time":"PianoRollGrid-module_PianoRollGrid-Time__jLz3E"};
+styleInject(css_248z);
+
+const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
+  const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+  const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
   const measureTicks = createMemo(() => context.ppq * 4);
   const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
   function calculateVisibleGridDivisorTicks(value) {
-    if (context.horizontalViewPort.getVisibleRange() / value > 100) {
+    if (horizontalViewPort().calculateVisibleRange() / value > 100) {
       return calculateVisibleGridDivisorTicks(value * 2);
     }
-    if (context.horizontalViewPort.getVisibleRange() / value < 30) {
+    if (horizontalViewPort().calculateVisibleRange() / value < 30) {
       return calculateVisibleGridDivisorTicks(value / 2);
     }
     return value;
   }
   const gridDivisorTicks = createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
   const gridArray = createMemo(() => {
-    const numberOfLines = Math.ceil(context.horizontalViewPort.getVisibleRange() / gridDivisorTicks()) + 1;
+    const numberOfLines = Math.ceil(horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1);
     const startIndex = Math.floor(context.position / gridDivisorTicks());
     return Array.from({
       length: numberOfLines
@@ -555,144 +466,235 @@ const PianoRollGrid = () => {
     }));
   });
   return (() => {
-    const _el$ = _tmpl$$1.cloneNode(true),
-      _el$2 = _el$.firstChild;
-    _el$.style.setProperty("position", "absolute");
-    _el$2.style.setProperty("position", "relative");
-    _el$2.style.setProperty("height", "100%");
-    insert(_el$2, createComponent(Index, {
+    const _el$ = _tmpl$$3.cloneNode(true);
+    insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
       },
       children: entry => {
-        const virtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(entry().ticks, gridDivisorTicks()));
+        const virtualDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(entry().ticks, gridDivisorTicks()));
         return createComponent(Show, {
           get when() {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$3 = _tmpl$2.cloneNode(true);
-            _el$3.style.setProperty("z-index", "1");
-            _el$3.style.setProperty("position", "absolute");
-            _el$3.style.setProperty("box-sizing", "border-box");
-            _el$3.style.setProperty("top", "0px");
-            _el$3.style.setProperty("height", "100%");
-            _el$3.style.setProperty("border-left", "1px gray solid");
+            const _el$2 = _tmpl$$3.cloneNode(true);
             effect(_p$ => {
-              const _v$4 = Math.ceil((entry().index + 1) * selectedGridDivisorTicks() / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
-                _v$5 = `${virtualDimensions().offset}px`,
-                _v$6 = `${virtualDimensions().size}px`;
-              _v$4 !== _p$._v$4 && _el$3.style.setProperty("background", _p$._v$4 = _v$4);
-              _v$5 !== _p$._v$5 && _el$3.style.setProperty("left", _p$._v$5 = _v$5);
-              _v$6 !== _p$._v$6 && _el$3.style.setProperty("width", _p$._v$6 = _v$6);
+              const _v$ = styles["PianoRollGrid-Time"],
+                _v$2 = Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
+                _v$3 = `${virtualDimensions().offset}px`,
+                _v$4 = `${virtualDimensions().size}px`,
+                _v$5 = entry().index * gridDivisorTicks() % selectedGridDivisorTicks() === 0 ? "gray" : "#bbb";
+              _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+              _v$2 !== _p$._v$2 && _el$2.style.setProperty("background", _p$._v$2 = _v$2);
+              _v$3 !== _p$._v$3 && _el$2.style.setProperty("left", _p$._v$3 = _v$3);
+              _v$4 !== _p$._v$4 && _el$2.style.setProperty("width", _p$._v$4 = _v$4);
+              _v$5 !== _p$._v$5 && _el$2.style.setProperty("border-left-color", _p$._v$5 = _v$5);
               return _p$;
             }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined,
               _v$4: undefined,
-              _v$5: undefined,
-              _v$6: undefined
+              _v$5: undefined
             });
-            return _el$3;
+            return _el$2;
           }
         });
       }
     }), null);
-    insert(_el$2, createComponent(Index, {
-      each: keys,
-      children: key => {
-        const virtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - key().number, 1));
-        return createComponent(Show, {
-          get when() {
-            return virtualDimensions().size > 0;
-          },
-          get children() {
-            const _el$4 = _tmpl$3.cloneNode(true);
-            _el$4.style.setProperty("position", "absolute");
-            _el$4.style.setProperty("width", "100%");
-            _el$4.style.setProperty("border-style", "solid");
-            _el$4.style.setProperty("border-color", "gray");
-            _el$4.style.setProperty("z-index", "1");
-            effect(_p$ => {
-              const _v$7 = `${virtualDimensions().offset}px`,
-                _v$8 = `${virtualDimensions().size}px`,
-                _v$9 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
-                _v$10 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
-              _v$7 !== _p$._v$7 && _el$4.style.setProperty("top", _p$._v$7 = _v$7);
-              _v$8 !== _p$._v$8 && _el$4.style.setProperty("height", _p$._v$8 = _v$8);
-              _v$9 !== _p$._v$9 && _el$4.style.setProperty("background-color", _p$._v$9 = _v$9);
-              _v$10 !== _p$._v$10 && _el$4.style.setProperty("border-width", _p$._v$10 = _v$10);
-              return _p$;
-            }, {
-              _v$7: undefined,
-              _v$8: undefined,
-              _v$9: undefined,
-              _v$10: undefined
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !context.condensed;
+      },
+      get children() {
+        return createComponent(Index, {
+          each: keys,
+          children: key => {
+            const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
+            return createComponent(Show, {
+              get when() {
+                return virtualDimensions().size > 0;
+              },
+              get children() {
+                const _el$3 = _tmpl$$3.cloneNode(true);
+                _el$3.style.setProperty("width", "100%");
+                effect(_p$ => {
+                  const _v$6 = styles["PianoRollGrid-Key"],
+                    _v$7 = `${virtualDimensions().offset}px`,
+                    _v$8 = `${virtualDimensions().size}px`,
+                    _v$9 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
+                    _v$10 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
+                  _v$6 !== _p$._v$6 && className(_el$3, _p$._v$6 = _v$6);
+                  _v$7 !== _p$._v$7 && _el$3.style.setProperty("top", _p$._v$7 = _v$7);
+                  _v$8 !== _p$._v$8 && _el$3.style.setProperty("height", _p$._v$8 = _v$8);
+                  _v$9 !== _p$._v$9 && _el$3.style.setProperty("background-color", _p$._v$9 = _v$9);
+                  _v$10 !== _p$._v$10 && _el$3.style.setProperty("border-width", _p$._v$10 = _v$10);
+                  return _p$;
+                }, {
+                  _v$6: undefined,
+                  _v$7: undefined,
+                  _v$8: undefined,
+                  _v$9: undefined,
+                  _v$10: undefined
+                });
+                return _el$3;
+              }
             });
-            return _el$4;
           }
         });
       }
     }), null);
-    effect(_p$ => {
-      const _v$ = `${context.clientRect.width}px`,
-        _v$2 = `${context.clientRect.height}px`,
-        _v$3 = `${context.clientRect.width}px`;
-      _v$ !== _p$._v$ && _el$.style.setProperty("width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$.style.setProperty("height", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _el$2.style.setProperty("width", _p$._v$3 = _v$3);
-      return _p$;
+    effect(() => className(_el$, styles.PianoRollGrid));
+    return _el$;
+  })();
+};
+
+const defaultRect = {
+  left: 0,
+  width: 0,
+  top: 0,
+  height: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0
+};
+function useBoundingClientRect(containerRef) {
+  const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
+  createEffect(() => {
+    const container = containerRef();
+    if (!container) return;
+    const updateBoundingClientRect = () => {
+      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
+    };
+    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
+    resizeObserver.observe(container);
+    updateBoundingClientRect();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  return boundingClientRect;
+}
+
+const _tmpl$$2 = /*#__PURE__*/template(`<input min="1" max="11" step="0.01">`, 1);
+const VerticalZoomControl = props => {
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$$2.cloneNode(true);
+    spread(_el$, mergeProps(props, {
+      get value() {
+        return context.verticalZoom;
+      },
+      "onInput": event => context.onVerticalZoomChange?.(event.currentTarget.valueAsNumber),
+      "type": "range"
     }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined
-    });
+      orient: "vertical"
+    }, {
+      get style() {
+        return {
+          width: "16px",
+          ...{
+            "writing-mode": "bt-lr" /* IE */,
+            "-webkit-appearance": "slider-vertical" /* WebKit */
+          }
+        };
+      }
+    }), false, false);
     return _el$;
   })();
 };
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div><div></div></div></div>`, 6);
+const _tmpl$$1 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
+const HorizontalZoomControl = props => {
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$$1.cloneNode(true);
+    spread(_el$, mergeProps(props, {
+      get value() {
+        return context.zoom;
+      },
+      "onInput": event => context.onZoomChange?.(event.currentTarget.valueAsNumber),
+      "type": "range",
+      "style": {
+        "margin-left": "50px",
+        "margin-right": "16px"
+      }
+    }), false, false);
+    return _el$;
+  })();
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<div><div></div></div>`, 4);
 const PianoRoll = allProps => {
   const [contextProps, divProps] = splitProps(allProps, ["ppq", "notes", "position", "duration", "zoom", "verticalPosition", "verticalZoom", "onVerticalZoomChange", "onVerticalPositionChange", "onZoomChange", "onPositionChange", "onNoteChange", "gridDivision", "snapToGrid", "onInsertNote", "onRemoveNote"]);
-  const [scrollContainer, setScrollContainer] = createSignal();
-  const [notesContainer, setNotesContainer] = createSignal();
-  return createComponent(PianoRollContextProvider, mergeProps(contextProps, {
-    get scrollContainer() {
-      return scrollContainer();
-    },
-    get notesContainer() {
-      return notesContainer();
-    },
+  const [scrollerRef, setScrollerRef] = createSignal();
+  const clientRect = useBoundingClientRect(scrollerRef);
+  const zoomFactor = 500;
+  const minZoom = createMemo(() => 1 / (zoomFactor / clientRect().width));
+  const maxZoom = createMemo(() => 500 * (zoomFactor / clientRect().width));
+  const minVerticalZoom = createMemo(() => 1 / (zoomFactor / clientRect().height));
+  const maxVerticalZoom = createMemo(() => 10 * (zoomFactor / clientRect().height));
+  return createComponent(PianoRollContextProvider, {
+    value: contextProps,
     get children() {
       const _el$ = _tmpl$.cloneNode(true),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.firstChild;
+        _el$2 = _el$.firstChild;
       spread(_el$, mergeProps(divProps, {
         get ["class"]() {
-          return styles$1.PianoRoll;
+          return styles$3.PianoRoll;
         }
       }), false, true);
-      insert(_el$2, createComponent(PianoRollKeys, {}), _el$3);
-      insert(_el$3, createComponent(PianoRollNotes, {
-        ref: setNotesContainer
-      }), null);
-      insert(_el$3, createComponent(PianoRollGrid, {}), null);
-      insert(_el$3, createComponent(ScrollContainer, {
-        ref: setScrollContainer
+      insert(_el$2, 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()))
+          }),
+          vertical: () => ({
+            pixelOffset: clientRect().top,
+            pixelSize: clientRect().height,
+            position: contextProps.verticalPosition,
+            range: 128,
+            zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
+            onPositionChange: contextProps.onVerticalPositionChange,
+            onZoomChange: verticalZoom => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom()))
+          })
+        },
+        get children() {
+          return [createComponent(PianoRollKeys, {}), createComponent(ScrollContainer, {
+            ref: setScrollerRef,
+            get children() {
+              return [createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
+            }
+          }), createComponent(VerticalZoomControl, {
+            get min() {
+              return minVerticalZoom();
+            },
+            get max() {
+              return maxVerticalZoom();
+            }
+          })];
+        }
+      }));
+      insert(_el$, createComponent(HorizontalZoomControl, {
+        get min() {
+          return minZoom();
+        },
+        get max() {
+          return maxZoom();
+        }
       }), null);
-      insert(_el$2, createComponent(VerticalZoomControl, {}), null);
-      insert(_el$, createComponent(HorizontalZoomControl, {}), null);
-      effect(_p$ => {
-        const _v$ = styles$1.PianoRollContainer,
-          _v$2 = styles$1.PianoRollInnerContainer;
-        _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
-      });
+      effect(() => className(_el$2, styles$3.PianoRollContainer));
       return _el$;
     }
-  }));
+  });
 };
 
 const usePianoRoll = () => {
@@ -704,7 +706,7 @@ const usePianoRoll = () => {
   const [gridDivision, onGridDivisionChange] = createSignal(16);
   const [snapToGrid, onSnapToGridChange] = createSignal(true);
   const [notes, onNotesChange] = createSignal([]);
-  const [duration, setDuration] = createSignal(0);
+  const [duration, onDurationChange] = createSignal(0);
   const onNoteChange = (index, note) => {
     onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
   };
@@ -719,7 +721,10 @@ const usePianoRoll = () => {
     onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
   };
   createEffect(() => {
-    setDuration(Math.max((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4));
+    const minDuration = Math.max((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4);
+    if (duration() < minDuration) {
+      onDurationChange(minDuration);
+    }
   });
   return {
     ppq,
@@ -741,7 +746,8 @@ const usePianoRoll = () => {
     onNoteChange,
     onInsertNote,
     onRemoveNote,
-    duration
+    duration,
+    onDurationChange
   };
 };