solid-pianoroll 0.0.2 → 0.0.4

package/dist/esm/index.js

@@ -1,5 +1,63 @@
-import { delegateEvents, spread, mergeProps, insert, createComponent, effect, setAttribute, memo, use, style, template } from 'solid-js/web';
-import { createMemo, splitProps, createSignal, createEffect, onMount, onCleanup, Index, Show } from 'solid-js';
+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 { createStore } from 'solid-js/store';
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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);
+
+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 clamp = (value, min, max) => {
   return Math.max(min, Math.min(max, value));
@@ -38,308 +96,355 @@ function useViewPortScaler(getState) {
   };
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div><div class="PianoRoll-Keys"></div><div><div class="PianoRoll-Notes-Container"><div class="PianoRoll-Notes"></div></div><div class="PianoRoll-Vertical-Scroller"><div></div></div></div><input type="range" min="1" max="11" step="0.01"></div><input type="range" max="500" min="1" step="0.01"></div>`, 18),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="PianoRoll-Key"></div>`, 2),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="PianoRoll-Note"></div>`, 2);
-const PianoRoll = allProps => {
-  let scrollContainerRef;
-  let scrollContentRef;
-  let notesContainerRef;
-  const [props, divProps] = splitProps(allProps, ["ppq", "notes", "position", "duration", "zoom", "verticalPosition", "verticalZoom", "onVerticalZoomChange", "onVerticalPositionChange", "onZoomChange", "onPositionChange", "onNoteChange"]);
-  const [dimensions, setDimensions] = createSignal({
-    left: 0,
-    width: 0,
-    top: 0,
-    height: 0
-  });
-  const resizeObserver = new ResizeObserver(event => {
-    const {
-      left,
-      top,
-      width,
-      height
-    } = scrollContainerRef?.getBoundingClientRect() ?? {
-      left: 0,
-      width: 0,
-      top: 0,
-      height: 0
-    };
-    setDimensions({
-      left,
-      top,
-      width,
-      height
-    });
-  });
-  createEffect(() => {
-    console.log(props.notes);
-  });
-  onMount(() => {
-    if (!scrollContainerRef) return;
-    resizeObserver.observe(scrollContainerRef);
-  });
-  onCleanup(() => {
-    resizeObserver.disconnect();
-  });
+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: dimensions().left,
-    viewPortSize: dimensions().width,
+    viewPortOffset: clientRect().left,
+    viewPortSize: clientRect().width,
     virtualPosition: props.position,
     virtualRange: props.duration,
     zoom: props.zoom
   }));
   const verticalViewPort = useViewPortScaler(() => ({
-    viewPortOffset: dimensions().top,
-    viewPortSize: dimensions().height,
+    viewPortOffset: clientRect().top,
+    viewPortSize: clientRect().height,
     virtualPosition: props.verticalPosition,
-    virtualRange: 128,
-    zoom: props.verticalZoom
+    zoom: props.verticalZoom,
+    virtualRange: 128
   }));
-  const handleScroll = event => {
-    event.preventDefault();
-    if (didUpdateScroll) {
-      didUpdateScroll = false;
-      return;
-    }
-    const maxVerticalPosition = 128 - 128 / props.verticalZoom;
-    const maxPosition = props.duration - props.duration / props.zoom;
-    const {
-      width,
-      height
-    } = dimensions();
-    const {
-      scrollTop,
-      scrollLeft,
-      scrollWidth,
-      scrollHeight
-    } = event.currentTarget;
-    const scrollTopAmount = scrollTop / (scrollHeight - height);
-    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
-    props.onVerticalPositionChange?.(maxVerticalPosition * scrollTopAmount);
-    props.onPositionChange?.(maxPosition * scrollLeftAmount);
+  const getContextValue = () => {
+    return {
+      ...contextProps,
+      horizontalViewPort,
+      verticalViewPort,
+      clientRect: clientRect(),
+      isDragging: isDragging(),
+      onIsDraggingChange: setIsDragging,
+      noteDragMode: noteDragMode(),
+      onNoteDragModeChange: setNoteDragMode
+    };
   };
-  let didUpdateScroll = false;
+  const [contextValue, setContextValue] = createStore(getContextValue());
   createEffect(() => {
-    const maxVerticalPosition = 128 - 128 / props.verticalZoom;
-    const maxPosition = props.duration - props.duration / props.zoom;
-    const scrollTopAmount = maxVerticalPosition > 0 ? props.verticalPosition / maxVerticalPosition : 0;
-    const scrollLeftAmount = maxPosition > 0 ? props.position / maxPosition : 0;
-    const {
-      height,
-      width
-    } = dimensions();
-    if (!scrollContentRef?.parentElement) return;
-    const scrollDivHeight = clamp(props.verticalZoom * height, height, 10000);
-    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-    const scrollDivWidth = clamp(props.zoom * width, width, 10000);
-    const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
-    didUpdateScroll = true;
-    scrollContentRef.style.height = `${scrollDivHeight}px`;
-    scrollContentRef.style.width = `${scrollDivWidth}px`;
-    scrollContentRef.parentElement.scrollTo({
-      left: scrollLeft,
-      top: scrollTop
-    });
+    setContextValue(getContextValue());
   });
-  const forwardEventToNote = event => {
-    const x = "clientX" in event ? event.clientX : event.touches[0]?.clientX;
-    const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY;
-    const elementUnderMouse = [...(notesContainerRef?.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));
+  return createComponent(PianoRollContext.Provider, {
+    value: contextValue,
+    get children() {
+      return props.children;
     }
-  };
-  const [noteDragMode, setNoteDragMode] = createSignal();
-  const [isDragging, setIsDragging] = createSignal(false);
+  });
+};
+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$.cloneNode(true),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.firstChild,
-      _el$4 = _el$3.nextSibling,
-      _el$5 = _el$4.firstChild,
-      _el$6 = _el$5.firstChild,
-      _el$7 = _el$5.nextSibling,
-      _el$8 = _el$7.firstChild,
-      _el$9 = _el$4.nextSibling,
-      _el$10 = _el$2.nextSibling;
-    spread(_el$, mergeProps(divProps, {
-      "class": "PianoRoll",
-      get style() {
-        return {
-          "box-sizing": "border-box",
-          display: "flex",
-          overflow: "hidden",
-          "flex-direction": "column",
-          padding: "16px",
-          ...(typeof divProps.style === "object" && divProps.style)
-        };
-      }
-    }), false, true);
-    _el$2.style.setProperty("overflow", "hidden");
-    _el$2.style.setProperty("height", "100%");
-    _el$2.style.setProperty("display", "flex");
-    _el$2.style.setProperty("flex-direction", "row");
-    _el$3.style.setProperty("position", "relative");
-    _el$3.style.setProperty("height", "100%");
-    _el$3.style.setProperty("width", "50px");
-    insert(_el$3, createComponent(Index, {
+    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$;
+  })();
+};
+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 PianoRollKeys = () => {
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$$5.cloneNode(true);
+    insert(_el$, createComponent(Index, {
       each: keys,
       children: key => {
-        const virtualDimensions = createMemo(() => verticalViewPort.getVirtualDimensions(127 - key().number, 1));
+        const virtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - key().number, 1));
         return createComponent(Show, {
           get when() {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$11 = _tmpl$2.cloneNode(true);
-            _el$11.style.setProperty("position", "absolute");
-            _el$11.style.setProperty("box-sizing", "border-box");
-            _el$11.style.setProperty("left", "0");
-            _el$11.style.setProperty("width", "100%");
-            _el$11.style.setProperty("border-color", "#000");
-            _el$11.style.setProperty("border-style", "solid");
+            const _el$2 = _tmpl$$5.cloneNode(true);
             effect(_p$ => {
-              const _v$5 = key().name,
-                _v$6 = key().number % 12,
-                _v$7 = `${virtualDimensions().offset}px`,
-                _v$8 = `${virtualDimensions().size}px`,
-                _v$9 = key().isBlack ? "#000" : "#fff",
-                _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$5 !== _p$._v$5 && setAttribute(_el$11, "title", _p$._v$5 = _v$5);
-              _v$6 !== _p$._v$6 && setAttribute(_el$11, "data-index", _p$._v$6 = _v$6);
-              _v$7 !== _p$._v$7 && _el$11.style.setProperty("top", _p$._v$7 = _v$7);
-              _v$8 !== _p$._v$8 && _el$11.style.setProperty("height", _p$._v$8 = _v$8);
-              _v$9 !== _p$._v$9 && _el$11.style.setProperty("background-color", _p$._v$9 = _v$9);
-              _v$10 !== _p$._v$10 && _el$11.style.setProperty("border-width", _p$._v$10 = _v$10);
+              const _v$ = styles["PianoRollKeys-Key"],
+                _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$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$8: undefined,
-              _v$9: undefined,
-              _v$10: undefined
+              _v$7: undefined
             });
-            return _el$11;
+            return _el$2;
           }
         });
       }
     }));
-    _el$4.style.setProperty("position", "relative");
-    _el$4.style.setProperty("display", "flex");
-    _el$4.style.setProperty("overflow", "hidden");
-    _el$4.style.setProperty("flex", "1");
-    _el$5.style.setProperty("position", "absolute");
-    const _ref$ = notesContainerRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$6) : notesContainerRef = _el$6;
-    _el$6.style.setProperty("position", "relative");
-    _el$6.style.setProperty("height", "100%");
-    insert(_el$6, createComponent(Index, {
+    effect(() => className(_el$, styles.PianoRollKeys));
+    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({
+  length: 128
+}).map((_, index) => ({
+  number: index,
+  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
+  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);
+const PianoRollNotes = props => {
+  const context = usePianoRollContext();
+  const gridDivisionTicks = createMemo(() => context.ppq * 4 / context.gridDivision);
+  const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
+  return (() => {
+    const _el$ = _tmpl$$4.cloneNode(true),
+      _el$2 = _el$.firstChild;
+    _el$.style.setProperty("position", "absolute");
+    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, {
       get each() {
-        return props.notes;
+        return context.notes;
       },
       children: (note, index) => {
-        const horizontalVirtualDimensions = createMemo(() => verticalViewPort.getVirtualDimensions(127 - note().midi, 1));
-        const verticalVirtualDimensions = createMemo(() => horizontalViewPort.getVirtualDimensions(note().ticks, note().durationTicks));
+        const horizontalVirtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - note().midi, 1));
+        const verticalVirtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(note().ticks, note().durationTicks));
         return createComponent(Show, {
           get when() {
             return memo(() => !!!!horizontalVirtualDimensions().size)() && !!verticalVirtualDimensions().size;
           },
           get children() {
-            const _el$12 = _tmpl$3.cloneNode(true);
-            _el$12.$$mousedown = event => {
-              setIsDragging(true);
-              const initialPosition = horizontalViewPort.getPosition(event.clientX);
+            const _el$3 = _tmpl$2$1.cloneNode(true);
+            _el$3.$$mousedown = event => {
+              context.onIsDraggingChange(true);
+              const initialPosition = context.horizontalViewPort.getPosition(event.clientX);
               const diffPosition = initialPosition - note().ticks;
               const handleMouseMove = mouseMoveEvent => {
-                const ticks = Math.max(horizontalViewPort.getPosition(mouseMoveEvent.clientX) - diffPosition, 0);
-                props.onNoteChange?.(index, {
+                const ticks = snapValueToGridIfEnabled(Math.max(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
+                context.onNoteChange?.(index, {
                   ...note(),
-                  midi: Math.round(127 - verticalViewPort.getPosition(mouseMoveEvent.clientY)),
-                  ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
+                  ...(context.noteDragMode === "move" && {
+                    midi: Math.round(127 - context.verticalViewPort.getPosition(mouseMoveEvent.clientY))
+                  }),
+                  ...((context.noteDragMode === "move" || context.noteDragMode === "trimStart") && {
                     ticks
                   }),
-                  ...(noteDragMode() === "trimStart" && {
+                  ...(context.noteDragMode === "trimStart" && {
                     durationTicks: note().durationTicks + note().ticks - ticks
                   }),
-                  ...(noteDragMode() === "trimEnd" && {
-                    durationTicks: horizontalViewPort.getPosition(mouseMoveEvent.clientX) - note().ticks
+                  ...(context.noteDragMode === "trimEnd" && {
+                    durationTicks: snapValueToGridIfEnabled(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) - note().ticks, mouseMoveEvent.altKey)
                   })
                 });
               };
               const handleMouseUp = () => {
-                setIsDragging(false);
+                context.onIsDraggingChange(false);
                 window.removeEventListener("mousemove", handleMouseMove);
                 window.removeEventListener("mouseup", handleMouseUp);
               };
               window.addEventListener("mousemove", handleMouseMove);
               window.addEventListener("mouseup", handleMouseUp);
             };
-            _el$12.$$mousemove = event => {
-              if (isDragging()) return;
-              const relativeX = horizontalViewPort.getScaledValue(horizontalViewPort.getPosition(event.clientX));
-              const noteStartX = horizontalViewPort.getScaledValue(note().ticks);
-              const noteEndX = horizontalViewPort.getScaledValue(note().ticks + note().durationTicks);
-              setNoteDragMode(relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move");
+            _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$12.style.setProperty("z-index", "1");
-            _el$12.style.setProperty("position", "absolute");
-            _el$12.style.setProperty("box-sizing", "border-box");
-            _el$12.style.setProperty("border-width", "0.5px");
-            _el$12.style.setProperty("border-style", "solid");
-            _el$12.style.setProperty("background-color", "#f00");
-            _el$12.style.setProperty("border-color", "#a00");
+            _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$11 = `${horizontalVirtualDimensions().offset}px`,
-                _v$12 = `${horizontalVirtualDimensions().size}px`,
-                _v$13 = `${verticalVirtualDimensions().offset}px`,
-                _v$14 = `${verticalVirtualDimensions().size}px`;
-              _v$11 !== _p$._v$11 && _el$12.style.setProperty("top", _p$._v$11 = _v$11);
-              _v$12 !== _p$._v$12 && _el$12.style.setProperty("height", _p$._v$12 = _v$12);
-              _v$13 !== _p$._v$13 && _el$12.style.setProperty("left", _p$._v$13 = _v$13);
-              _v$14 !== _p$._v$14 && _el$12.style.setProperty("width", _p$._v$14 = _v$14);
+              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);
               return _p$;
             }, {
-              _v$11: undefined,
-              _v$12: undefined,
-              _v$13: undefined,
-              _v$14: undefined
+              _v$4: undefined,
+              _v$5: undefined,
+              _v$6: undefined,
+              _v$7: undefined,
+              _v$8: undefined
             });
-            return _el$12;
+            return _el$3;
           }
         });
       }
     }));
-    _el$7.addEventListener("dragend", forwardEventToNote);
-    _el$7.addEventListener("drag", forwardEventToNote);
-    _el$7.addEventListener("dragstart", forwardEventToNote);
-    _el$7.addEventListener("touchcancel", forwardEventToNote);
-    _el$7.$$touchend = forwardEventToNote;
-    _el$7.$$touchmove = forwardEventToNote;
-    _el$7.$$touchstart = forwardEventToNote;
-    _el$7.$$mouseup = forwardEventToNote;
-    _el$7.$$dblclick = event => {
+    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
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["mousemove", "mousedown"]);
+
+const _tmpl$$3 = /*#__PURE__*/template(`<div class="PianoRoll-Vertical-Scroller"><div></div></div>`, 4);
+const ScrollContainer = props => {
+  let scrollContentRef;
+  const context = usePianoRollContext();
+  const forwardEventToNote = event => {
+    const x = "clientX" in event ? event.clientX : event.touches[0]?.clientX;
+    const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY;
+    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 handleScroll = event => {
+    event.preventDefault();
+    if (didUpdateScroll) {
+      didUpdateScroll = false;
+      return;
+    }
+    const maxVerticalPosition = 128 - 128 / context.verticalZoom;
+    const maxPosition = context.duration - context.duration / context.zoom;
+    const {
+      width,
+      height
+    } = context.clientRect;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollWidth,
+      scrollHeight
+    } = event.currentTarget;
+    const scrollTopAmount = scrollTop / (scrollHeight - height);
+    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
+    context.onVerticalPositionChange?.(maxVerticalPosition * scrollTopAmount);
+    context.onPositionChange?.(maxPosition * scrollLeftAmount);
+  };
+  let didUpdateScroll = false;
+  createEffect(() => {
+    const maxVerticalPosition = 128 - 128 / context.verticalZoom;
+    const maxPosition = context.duration - context.duration / context.zoom;
+    const scrollTopAmount = maxVerticalPosition > 0 ? context.verticalPosition / maxVerticalPosition : 0;
+    const scrollLeftAmount = maxPosition > 0 ? context.position / maxPosition : 0;
+    const {
+      height,
+      width
+    } = context.clientRect;
+    if (!scrollContentRef?.parentElement) return;
+    const scrollDivHeight = clamp(context.verticalZoom * height, height, 10000);
+    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+    const scrollDivWidth = clamp(context.zoom * width, width, 10000);
+    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$$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 = forwardEventToNote;
+    _el$.$$dblclick = event => {
       if (!forwardEventToNote(event)) ;
     };
-    _el$7.$$click = forwardEventToNote;
-    _el$7.$$mousemove = event => {
+    _el$.$$click = forwardEventToNote;
+    _el$.$$mousemove = event => {
       if (forwardEventToNote(event)) return;
-      if (isDragging()) return;
-      setNoteDragMode(undefined);
+      if (context.isDragging) return;
+      context.onNoteDragModeChange(undefined);
     };
-    _el$7.$$mousedown = forwardEventToNote;
-    _el$7.addEventListener("scroll", handleScroll);
-    const _ref$2 = scrollContainerRef;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$7) : scrollContainerRef = _el$7;
-    const _ref$3 = scrollContentRef;
-    typeof _ref$3 === "function" ? use(_ref$3, _el$8) : scrollContentRef = _el$8;
-    _el$9.$$input = event => props.onVerticalZoomChange?.(event.currentTarget.valueAsNumber);
-    spread(_el$9, mergeProps({
+    _el$.$$mousedown = forwardEventToNote;
+    _el$.addEventListener("scroll", handleScroll);
+    const _ref$ = props.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
+    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"
+      }),
+      //"box-sizing": "border-box",
+      "z-index": 4,
+      overflow: "scroll",
+      "pointer-events": "auto"
+    }, _$p));
+    return _el$;
+  })();
+};
+delegateEvents(["mousedown", "mousemove", "click", "dblclick", "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 props.verticalZoom;
+        return context.verticalZoom;
       }
     }, {
       orient: "vertical"
@@ -354,48 +459,161 @@ const PianoRoll = allProps => {
         };
       }
     }), false, false);
-    _el$10.$$input = event => props.onZoomChange?.(event.currentTarget.valueAsNumber);
-    _el$10.style.setProperty("margin-left", "50px");
-    _el$10.style.setProperty("margin-right", "16px");
+    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);
+const PianoRollGrid = () => {
+  const context = usePianoRollContext();
+  const gridDivisorTicks = createMemo(() => context.ppq * 4 / context.gridDivision);
+  const gridArray = createMemo(() => {
+    const numberOfLines = context.duration / gridDivisorTicks();
+    return Array.from({
+      length: numberOfLines
+    }).map((_, index) => index * gridDivisorTicks());
+  });
+  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, {
+      get each() {
+        return gridArray();
+      },
+      children: (tick, index) => {
+        const virtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(tick(), 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("background", index % 4 === 0 ? "#ccc" : "#ddd");
+            _el$3.style.setProperty("top", "0px");
+            _el$3.style.setProperty("height", "100%");
+            _el$3.style.setProperty("border-left", "1px gray solid");
+            effect(_p$ => {
+              const _v$4 = `${virtualDimensions().offset}px`,
+                _v$5 = `${virtualDimensions().size}px`;
+              _v$4 !== _p$._v$4 && _el$3.style.setProperty("left", _p$._v$4 = _v$4);
+              _v$5 !== _p$._v$5 && _el$3.style.setProperty("width", _p$._v$5 = _v$5);
+              return _p$;
+            }, {
+              _v$4: undefined,
+              _v$5: undefined
+            });
+            return _el$3;
+          }
+        });
+      }
+    }), 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$6 = `${virtualDimensions().offset}px`,
+                _v$7 = `${virtualDimensions().size}px`,
+                _v$8 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
+                _v$9 = `${!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 && _el$4.style.setProperty("top", _p$._v$6 = _v$6);
+              _v$7 !== _p$._v$7 && _el$4.style.setProperty("height", _p$._v$7 = _v$7);
+              _v$8 !== _p$._v$8 && _el$4.style.setProperty("background-color", _p$._v$8 = _v$8);
+              _v$9 !== _p$._v$9 && _el$4.style.setProperty("border-width", _p$._v$9 = _v$9);
+              return _p$;
+            }, {
+              _v$6: undefined,
+              _v$7: undefined,
+              _v$8: undefined,
+              _v$9: undefined
+            });
+            return _el$4;
+          }
+        });
+      }
+    }), null);
     effect(_p$ => {
-      const _v$ = `${dimensions().width}px`,
-        _v$2 = `${dimensions().height}px`,
-        _v$3 = `${dimensions().width}px`,
-        _v$4 = {
-          flex: 1,
-          ...(noteDragMode() && {
-            cursor: noteDragMode() === "trimStart" ? "w-resize" : noteDragMode() === "trimEnd" ? "e-resize" : "pointer"
-          }),
-          //"box-sizing": "border-box",
-          "z-index": 1,
-          overflow: "scroll",
-          "pointer-events": "auto"
-        };
-      _v$ !== _p$._v$ && _el$5.style.setProperty("width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && _el$5.style.setProperty("height", _p$._v$2 = _v$2);
-      _v$3 !== _p$._v$3 && _el$6.style.setProperty("width", _p$._v$3 = _v$3);
-      _p$._v$4 = style(_el$7, _v$4, _p$._v$4);
+      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,
-      _v$4: undefined
+      _v$3: undefined
     });
-    effect(() => _el$10.value = props.zoom);
     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({
-  length: 128
-}).map((_, index) => ({
-  number: index,
-  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
-  isBlack: blackKeys.includes(index % 12)
-}));
-delegateEvents(["mousedown", "mousemove", "click", "dblclick", "mouseup", "touchstart", "touchmove", "touchend", "input"]);
+
+const _tmpl$ = /*#__PURE__*/template(`<div><div><div></div></div></div>`, 6);
+const PianoRoll = allProps => {
+  const [contextProps, divProps] = splitProps(allProps, ["ppq", "notes", "position", "duration", "zoom", "verticalPosition", "verticalZoom", "onVerticalZoomChange", "onVerticalPositionChange", "onZoomChange", "onPositionChange", "onNoteChange", "gridDivision", "snapToGrid"]);
+  const [scrollContainer, setScrollContainer] = createSignal();
+  const [notesContainer, setNotesContainer] = createSignal();
+  return createComponent(PianoRollContextProvider, mergeProps(contextProps, {
+    get scrollContainer() {
+      return scrollContainer();
+    },
+    get notesContainer() {
+      return notesContainer();
+    },
+    get children() {
+      const _el$ = _tmpl$.cloneNode(true),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.firstChild;
+      spread(_el$, mergeProps(divProps, {
+        get ["class"]() {
+          return styles$1.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
+      }), 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
+      });
+      return _el$;
+    }
+  }));
+};
 
 export { PianoRoll };
 //# sourceMappingURL=index.js.map