solid-pianoroll 0.0.10 → 0.0.12

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-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 { spread, mergeProps, template, createComponent, delegateEvents, use, insert, memo, effect, className, style, classList, setAttribute } from 'solid-js/web';
+import { createContext, splitProps, useContext, createEffect, createMemo, createSignal, Index, Show, mergeProps as mergeProps$1 } from 'solid-js';
 import { createStore } from 'solid-js/store';
 
 function styleInject(css, ref) {
@@ -27,7 +27,7 @@ function styleInject(css, ref) {
   }
 }
 
-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 css_248z$3 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box;\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n}\n\n.PianoRoll-module_PianoRollContainer__Oyxr7 {\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n";
 var styles$3 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
 styleInject(css_248z$3);
 
@@ -38,10 +38,30 @@ const usePianoRollContext = () => {
   if (!context) throw new Error("No PianoRollContext found");
   return context;
 };
+const splitContextProps = allProps => splitProps(allProps, ["condensed", "duration", "gridDivision", "notes", "position", "ppq", "snapToGrid", "verticalPosition", "verticalZoom", "zoom", "onInsertNote", "onNoteChange", "onPositionChange", "onRemoveNote", "onVerticalPositionChange", "onVerticalZoomChange", "onZoomChange"]);
 
-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);
+const _tmpl$$7 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
+const HorizontalZoomControl = props => {
+  const context = usePianoRollContext();
+  return (() => {
+    const _el$ = _tmpl$$7.cloneNode(true);
+    spread(_el$, mergeProps(props, {
+      get value() {
+        return context.zoom;
+      },
+      "onInput": event => context.onZoomChange?.(event.currentTarget.valueAsNumber),
+      "type": "range",
+      get style() {
+        return {
+          "margin-left": "50px",
+          "margin-right": "16px",
+          ...(typeof props.style === "object" && props.style)
+        };
+      }
+    }), false, false);
+    return _el$;
+  })();
+};
 
 function createViewPortDimension(getState) {
   const getStateWithFunctions = () => ({
@@ -50,7 +70,8 @@ function createViewPortDimension(getState) {
     calculatePosition,
     calculatePixelDimensions,
     calculateVisibleRange,
-    calculateMaxPosition
+    calculateMaxPosition,
+    isVisible
   });
   const [state, setState] = createStore(getStateWithFunctions());
   createEffect(() => setState(getStateWithFunctions()));
@@ -80,6 +101,12 @@ function createViewPortDimension(getState) {
       size
     };
   }
+  function isVisible({
+    offset,
+    size
+  }) {
+    return offset + size > 0 && offset < state.pixelSize;
+  }
   return state;
 }
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
@@ -107,70 +134,11 @@ const useViewPortDimension = name => {
   return viewPort;
 };
 
-const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
-const PianoRollKeys = () => {
-  const viewPort = createMemo(() => useViewPortDimension("vertical"));
-  return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
-    insert(_el$, createComponent(Index, {
-      each: keys,
-      children: key => {
-        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
-        return createComponent(Show, {
-          get when() {
-            return virtualDimensions().size > 0;
-          },
-          get children() {
-            const _el$2 = _tmpl$$6.cloneNode(true);
-            effect(_p$ => {
-              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`;
-              _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);
-              return _p$;
-            }, {
-              _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined
-            });
-            return _el$2;
-          }
-        });
-      }
-    }));
-    effect(() => className(_el$, styles$2.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)
-}));
-
-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);
+var css_248z$2 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: absolute;\n  flex: 1;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  cursor: grab;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb {\n  position: absolute;\n  box-sizing: border-box;\n  border-width: 0.5px;\n  border-style: solid;\n  border-color: #a00;\n  cursor: move;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimStart__vuBlj {\n  cursor: w-resize;\n}\n.PianoRollNotes-module_PianoRollNotes__6pF-y .PianoRollNotes-module_Note__-jxLb.PianoRollNotes-module_trimEnd__zPdjr {\n  cursor: e-resize;\n}";
+var styles$2 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
+styleInject(css_248z$2);
 
-const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
+const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -179,7 +147,7 @@ const PianoRollNotes = props => {
   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 midi = context.condensed ? 60 : 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
     const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
     const velocity = 127;
     const existingNote = newNote();
@@ -204,10 +172,10 @@ const PianoRollNotes = props => {
   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 noteDragMode ? [styles$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
   };
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true);
+    const _el$ = _tmpl$$6.cloneNode(true);
     _el$.$$click = event => {
       if (newNote()) {
         setNewNoteIndex(-1);
@@ -231,9 +199,6 @@ const PianoRollNotes = props => {
         return;
       }
       const index = insertOrUpdateNote(event);
-      console.log({
-        index
-      });
       setNewNoteIndex(index);
     };
     _el$.$$mousedown = () => {
@@ -247,14 +212,14 @@ const PianoRollNotes = props => {
         return context.notes;
       },
       children: (note, index) => {
-        const verticalVirtualDimensionss = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
+        const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
         const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
         return createComponent(Show, {
           get when() {
-            return memo(() => !!!!verticalVirtualDimensionss().size)() && !!horizontalDimensions().size;
+            return memo(() => !!(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed))() && horizontalViewPort().isVisible(horizontalDimensions());
           },
           get children() {
-            const _el$2 = _tmpl$$5.cloneNode(true);
+            const _el$2 = _tmpl$$6.cloneNode(true);
             _el$2.$$mousedown = event => {
               event.stopPropagation();
               setIsDragging(true);
@@ -264,7 +229,7 @@ const PianoRollNotes = props => {
                 const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) - diffPosition, 0), mouseMoveEvent.altKey);
                 context.onNoteChange?.(index, {
                   ...note(),
-                  ...(noteDragMode() === "move" && {
+                  ...(noteDragMode() === "move" && !context.condensed && {
                     midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
                   }),
                   ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
@@ -300,38 +265,37 @@ const PianoRollNotes = props => {
             };
             effect(_p$ => {
               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$2 = {
+                  "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
+                  ...(context.condensed ? {
+                    top: 0,
+                    height: "100%"
+                  } : {
+                    top: `${verticalVirtualDimensions().offset}px`,
+                    height: `${verticalVirtualDimensions().size}px`
+                  }),
+                  left: `${horizontalDimensions().offset}px`,
+                  width: `${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);
+              _p$._v$2 = style(_el$2, _v$2, _p$._v$2);
               return _p$;
             }, {
               _v$: undefined,
-              _v$2: undefined,
-              _v$3: undefined,
-              _v$4: undefined,
-              _v$5: undefined,
-              _v$6: undefined
+              _v$2: undefined
             });
             return _el$2;
           }
         });
       }
     }));
-    effect(() => className(_el$, styles$1.PianoRollNotes));
+    effect(() => className(_el$, styles$2.PianoRollNotes));
     return _el$;
   })();
 };
 delegateEvents(["mousedown", "mousemove", "mouseup", "dblclick", "click"]);
 
-const _tmpl$$4 = /*#__PURE__*/template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
+const _tmpl$$5 = /*#__PURE__*/template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
 const ScrollContainer = props => {
   let scrollContentRef;
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -393,7 +357,7 @@ const ScrollContainer = props => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true),
+    const _el$ = _tmpl$$5.cloneNode(true),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild;
@@ -434,6 +398,69 @@ const ScrollContainer = props => {
   })();
 };
 
+var css_248z$1 = ".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$1 = {"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$1);
+
+const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2);
+const PianoRollKeys = () => {
+  const viewPort = createMemo(() => useViewPortDimension("vertical"));
+  return (() => {
+    const _el$ = _tmpl$$4.cloneNode(true);
+    insert(_el$, createComponent(Index, {
+      each: keys,
+      children: key => {
+        const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
+        return createComponent(Show, {
+          get when() {
+            return virtualDimensions().size > 0;
+          },
+          get children() {
+            const _el$2 = _tmpl$$4.cloneNode(true);
+            effect(_p$ => {
+              const _v$ = {
+                  [styles$1["Key"]]: true,
+                  [styles$1["black"]]: key().isBlack,
+                  [styles$1["white"]]: !key().isBlack,
+                  [styles$1["whiteAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
+                  [styles$1["whiteAndPreviousIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number - 1) % 12)
+                },
+                _v$2 = key().name,
+                _v$3 = key().number % 12,
+                _v$4 = `${virtualDimensions().offset}px`,
+                _v$5 = `${virtualDimensions().size}px`;
+              _p$._v$ = 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);
+              return _p$;
+            }, {
+              _v$: undefined,
+              _v$2: undefined,
+              _v$3: undefined,
+              _v$4: undefined,
+              _v$5: undefined
+            });
+            return _el$2;
+          }
+        });
+      }
+    }));
+    effect(() => className(_el$, styles$1.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)
+}));
+
 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);
@@ -550,6 +577,30 @@ const PianoRollGrid = () => {
   })();
 };
 
+const useNotes = () => {
+  const [notes, onNotesChange] = createSignal([]);
+  const onNoteChange = (index, note) => {
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
+  };
+  const onInsertNote = note => {
+    const index = Math.max(notes().findIndex(({
+      ticks
+    }) => ticks > note.ticks), 0);
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
+    return index;
+  };
+  const onRemoveNote = index => {
+    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
+  };
+  return {
+    notes,
+    onNotesChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote
+  };
+};
+
 const defaultRect = {
   left: 0,
   width: 0,
@@ -606,29 +657,198 @@ const VerticalZoomControl = props => {
   })();
 };
 
-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$$1 = /*#__PURE__*/template(`<ul></ul>`, 2),
+  _tmpl$2 = /*#__PURE__*/template(`<div><ul></ul><div><div></div></div></div>`, 8),
+  _tmpl$3 = /*#__PURE__*/template(`<li></li>`, 2);
+const MultiTrackPianoRoll = allProps => {
+  const condensed = createMemo(() => !allProps.selectedTrack);
+  const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrack"]);
+  const [contextProps, divProps] = splitContextProps(mergeProps$1(restProps, {
+    notes: [],
+    condensed: false
+  }));
+  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, {
+    get value() {
+      return {
+        ...contextProps
+      };
+    },
+    get children() {
+      return 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() {
+          const _el$ = _tmpl$2.cloneNode(true),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling,
+            _el$4 = _el$3.firstChild;
+          _el$.style.setProperty("display", "flex");
+          _el$.style.setProperty("flex", "1");
+          _el$.style.setProperty("height", "100%");
+          _el$.style.setProperty("flex-direction", "row");
+          _el$2.style.setProperty("margin-block-start", "0");
+          _el$2.style.setProperty("padding-inline-start", "0");
+          _el$2.style.setProperty("width", "150px");
+          insert(_el$2, createComponent(Index, {
+            get each() {
+              return allProps.tracks;
+            },
+            children: track => (() => {
+              const _el$6 = _tmpl$3.cloneNode(true);
+              _el$6.$$click = () => {
+                if (track() === allProps.selectedTrack) {
+                  allProps.onSelectedTrackChange(undefined);
+                } else {
+                  allProps.onSelectedTrackChange(track());
+                }
+              };
+              _el$6.style.setProperty("width", "150px");
+              _el$6.style.setProperty("height", "30px");
+              _el$6.style.setProperty("list-style", "none");
+              _el$6.style.setProperty("display", "flex");
+              _el$6.style.setProperty("align-items", "center");
+              _el$6.style.setProperty("border-top", "1px black solid");
+              _el$6.style.setProperty("cursor", "pointer");
+              insert(_el$6, () => track().name);
+              effect(() => _el$6.style.setProperty("background", track() === allProps.selectedTrack ? "lightgray" : "none"));
+              return _el$6;
+            })()
+          }));
+          _el$3.style.setProperty("flex", "1");
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return !condensed();
+            },
+            get children() {
+              return createComponent(PianoRollKeys, {});
+            }
+          }), null);
+          insert(_el$4, createComponent(ScrollContainer, {
+            ref: setScrollerRef,
+            get children() {
+              const _el$5 = _tmpl$$1.cloneNode(true);
+              _el$5.style.setProperty("margin", "0");
+              _el$5.style.setProperty("margin-block-start", "0");
+              _el$5.style.setProperty("padding-inline-start", "0");
+              insert(_el$5, createComponent(Index, {
+                get each() {
+                  return allProps.tracks;
+                },
+                children: track => {
+                  const notes = useNotes();
+                  createEffect(() => {
+                    notes.onNotesChange(track().notes);
+                  });
+                  const [context, setContext] = createStore({
+                    ...contextProps
+                  });
+                  createEffect(() => {
+                    setContext({
+                      ...contextProps,
+                      condensed: condensed(),
+                      notes: notes.notes(),
+                      onNoteChange: notes.onNoteChange,
+                      onInsertNote: notes.onInsertNote,
+                      onRemoveNote: notes.onRemoveNote
+                    });
+                  });
+                  const verticalViewPort = useViewPortDimension("vertical");
+                  return createComponent(Show, {
+                    get when() {
+                      return condensed() || allProps.selectedTrack === track();
+                    },
+                    get children() {
+                      return createComponent(PianoRollContextProvider, {
+                        value: context,
+                        get children() {
+                          const _el$7 = _tmpl$3.cloneNode(true);
+                          _el$7.style.setProperty("display", "flex");
+                          _el$7.style.setProperty("position", "relative");
+                          _el$7.style.setProperty("list-style", "none");
+                          _el$7.style.setProperty("flex-direction", "row");
+                          _el$7.style.setProperty("border-top", "1px black solid");
+                          insert(_el$7, createComponent(PianoRollNotes, {}), null);
+                          insert(_el$7, createComponent(PianoRollGrid, {}), null);
+                          effect(() => _el$7.style.setProperty("height", condensed() ? "30px" : `${verticalViewPort.pixelSize}px`));
+                          return _el$7;
+                        }
+                      });
+                    }
+                  });
+                }
+              }));
+              return _el$5;
+            }
+          }), null);
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return !condensed();
+            },
+            get children() {
+              return createComponent(VerticalZoomControl, {
+                get value() {
+                  return contextProps.verticalZoom;
+                },
+                onInput: event => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)
+              });
+            }
+          }), null);
+          insert(_el$3, createComponent(HorizontalZoomControl, {
+            style: {
+              width: "100%",
+              "margin-left": 0
+            },
+            get value() {
+              return contextProps.zoom;
+            },
+            onInput: event => contextProps.onZoomChange?.(event.currentTarget.valueAsNumber)
+          }), null);
+          effect(_p$ => {
+            const _v$ = styles$3.PianoRoll,
+              _v$2 = styles$3.PianoRollContainer;
+            _v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
+            _v$2 !== _p$._v$2 && className(_el$4, _p$._v$2 = _v$2);
+            return _p$;
+          }, {
+            _v$: undefined,
+            _v$2: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
 };
+delegateEvents(["click"]);
 
 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 [contextProps, divProps] = splitContextProps(allProps);
   const [scrollerRef, setScrollerRef] = createSignal();
   const clientRect = useBoundingClientRect(scrollerRef);
   const zoomFactor = 500;
@@ -699,33 +919,14 @@ const PianoRoll = allProps => {
 
 const usePianoRoll = () => {
   const [ppq, onPpqChange] = createSignal(120);
+  const [condensed, onCondensedChange] = createSignal(false);
   const [position, onPositionChange] = createSignal(0);
   const [zoom, onZoomChange] = createSignal(10);
   const [verticalZoom, onVerticalZoomChange] = createSignal(5);
   const [verticalPosition, onVerticalPositionChange] = createSignal(64);
   const [gridDivision, onGridDivisionChange] = createSignal(16);
   const [snapToGrid, onSnapToGridChange] = createSignal(true);
-  const [notes, onNotesChange] = createSignal([]);
   const [duration, onDurationChange] = createSignal(0);
-  const onNoteChange = (index, note) => {
-    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
-  };
-  const onInsertNote = note => {
-    const index = Math.max(notes().findIndex(({
-      ticks
-    }) => ticks > note.ticks), 0);
-    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
-    return index;
-  };
-  const onRemoveNote = index => {
-    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
-  };
-  createEffect(() => {
-    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,
     onPpqChange,
@@ -741,15 +942,12 @@ const usePianoRoll = () => {
     onGridDivisionChange,
     snapToGrid,
     onSnapToGridChange,
-    notes,
-    onNotesChange,
-    onNoteChange,
-    onInsertNote,
-    onRemoveNote,
+    condensed,
+    onCondensedChange,
     duration,
     onDurationChange
   };
 };
 
-export { PianoRoll, usePianoRoll };
+export { MultiTrackPianoRoll, PianoRoll, useNotes, usePianoRoll };
 //# sourceMappingURL=index.js.map