solid-pianoroll 0.0.13 → 0.0.14

package/dist/esm/index.js

@@ -40,11 +40,11 @@ const usePianoRollContext = () => {
 };
 const splitContextProps = allProps => splitProps(allProps, ["condensed", "duration", "gridDivision", "notes", "position", "ppq", "snapToGrid", "verticalPosition", "verticalZoom", "zoom", "onInsertNote", "onNoteChange", "onPositionChange", "onRemoveNote", "onVerticalPositionChange", "onVerticalZoomChange", "onZoomChange"]);
 
-const _tmpl$$7 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
+const _tmpl$$8 = /*#__PURE__*/template(`<input max="500" min="1" step="0.01">`, 1);
 const HorizontalZoomControl = props => {
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$$7.cloneNode(true);
+    const _el$ = _tmpl$$8.cloneNode(true);
     spread(_el$, mergeProps(props, {
       get value() {
         return context.zoom;
@@ -66,6 +66,7 @@ const HorizontalZoomControl = props => {
 function createViewPortDimension(getState) {
   const getStateWithFunctions = () => ({
     ...getState(),
+    calculatePixelOffset,
     calculatePixelValue,
     calculatePosition,
     calculatePixelDimensions,
@@ -138,7 +139,7 @@ var css_248z$2 = ".PianoRollNotes-module_PianoRollNotes__6pF-y {\n  position: ab
 var styles$2 = {"PianoRollNotes":"PianoRollNotes-module_PianoRollNotes__6pF-y","Note":"PianoRollNotes-module_Note__-jxLb","trimStart":"PianoRollNotes-module_trimStart__vuBlj","trimEnd":"PianoRollNotes-module_trimEnd__zPdjr"};
 styleInject(css_248z$2);
 
-const _tmpl$$6 = /*#__PURE__*/template(`<div></div>`, 2);
+const _tmpl$$7 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollNotes = props => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -175,7 +176,7 @@ const PianoRollNotes = props => {
     return noteDragMode ? [styles$2.Note, styles$2[noteDragMode]] : [styles$2.Note];
   };
   return (() => {
-    const _el$ = _tmpl$$6.cloneNode(true);
+    const _el$ = _tmpl$$7.cloneNode(true);
     _el$.$$click = event => {
       if (newNote()) {
         setNewNoteIndex(-1);
@@ -221,7 +222,7 @@ const PianoRollNotes = props => {
             return memo(() => !!(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed))() && horizontalViewPort().isVisible(horizontalDimensions());
           },
           get children() {
-            const _el$2 = _tmpl$$6.cloneNode(true);
+            const _el$2 = _tmpl$$7.cloneNode(true);
             _el$2.$$mousedown = event => {
               event.stopPropagation();
               setIsDragging(true);
@@ -297,7 +298,7 @@ const PianoRollNotes = props => {
 };
 delegateEvents(["mousedown", "mousemove", "mouseup", "dblclick", "click"]);
 
-const _tmpl$$5 = /*#__PURE__*/template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
+const _tmpl$$6 = /*#__PURE__*/template(`<div class="PianoRoll-Scroller"><div><div><div></div></div></div></div>`, 8);
 const ScrollContainer = props => {
   let scrollContentRef;
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -359,7 +360,7 @@ const ScrollContainer = props => {
     });
   });
   return (() => {
-    const _el$ = _tmpl$$5.cloneNode(true),
+    const _el$ = _tmpl$$6.cloneNode(true),
       _el$2 = _el$.firstChild,
       _el$3 = _el$2.firstChild,
       _el$4 = _el$3.firstChild;
@@ -404,11 +405,11 @@ var css_248z$1 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: rela
 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 _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollKeys = () => {
   const viewPort = createMemo(() => useViewPortDimension("vertical"));
   return (() => {
-    const _el$ = _tmpl$$4.cloneNode(true);
+    const _el$ = _tmpl$$5.cloneNode(true);
     insert(_el$, createComponent(Index, {
       each: keys,
       children: key => {
@@ -418,7 +419,7 @@ const PianoRollKeys = () => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$$4.cloneNode(true);
+            const _el$2 = _tmpl$$5.cloneNode(true);
             effect(_p$ => {
               const _v$ = {
                   [styles$1["Key"]]: true,
@@ -467,7 +468,7 @@ var css_248z = ".PianoRollGrid-module_PianoRollGrid__tG119 {\n  position: relati
 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 _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
   const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
@@ -475,10 +476,12 @@ const PianoRollGrid = () => {
   const measureTicks = createMemo(() => context.ppq * 4);
   const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
   function calculateVisibleGridDivisorTicks(value) {
-    if (horizontalViewPort().calculateVisibleRange() / value > 100) {
+    const visibleRange = horizontalViewPort().calculateVisibleRange();
+    if (visibleRange <= 0) return 0;
+    if (visibleRange / value > 100) {
       return calculateVisibleGridDivisorTicks(value * 2);
     }
-    if (horizontalViewPort().calculateVisibleRange() / value < 30) {
+    if (visibleRange / value < 30) {
       return calculateVisibleGridDivisorTicks(value / 2);
     }
     return value;
@@ -495,7 +498,7 @@ const PianoRollGrid = () => {
     }));
   });
   return (() => {
-    const _el$ = _tmpl$$3.cloneNode(true);
+    const _el$ = _tmpl$$4.cloneNode(true);
     insert(_el$, createComponent(Index, {
       get each() {
         return gridArray();
@@ -507,7 +510,7 @@ const PianoRollGrid = () => {
             return virtualDimensions().size > 0;
           },
           get children() {
-            const _el$2 = _tmpl$$3.cloneNode(true);
+            const _el$2 = _tmpl$$4.cloneNode(true);
             effect(_p$ => {
               const _v$ = styles["PianoRollGrid-Time"],
                 _v$2 = Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
@@ -546,7 +549,7 @@ const PianoRollGrid = () => {
                 return virtualDimensions().size > 0;
               },
               get children() {
-                const _el$3 = _tmpl$$3.cloneNode(true);
+                const _el$3 = _tmpl$$4.cloneNode(true);
                 _el$3.style.setProperty("width", "100%");
                 effect(_p$ => {
                   const _v$6 = styles["PianoRollGrid-Key"],
@@ -631,11 +634,11 @@ function useBoundingClientRect(containerRef) {
   return boundingClientRect;
 }
 
-const _tmpl$$2 = /*#__PURE__*/template(`<input min="1" max="11" step="0.01">`, 1);
+const _tmpl$$3 = /*#__PURE__*/template(`<input min="1" max="11" step="0.01">`, 1);
 const VerticalZoomControl = props => {
   const context = usePianoRollContext();
   return (() => {
-    const _el$ = _tmpl$$2.cloneNode(true);
+    const _el$ = _tmpl$$3.cloneNode(true);
     spread(_el$, mergeProps(props, {
       get value() {
         return context.verticalZoom;
@@ -659,15 +662,21 @@ const VerticalZoomControl = props => {
   })();
 };
 
-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 _tmpl$$2 = /*#__PURE__*/template(`<div><ul></ul></div>`, 4),
+  _tmpl$2 = /*#__PURE__*/template(`<ul></ul>`, 2),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div></div></div>`, 4),
+  _tmpl$4 = /*#__PURE__*/template(`<div></div>`, 2),
+  _tmpl$5 = /*#__PURE__*/template(`<li></li>`, 2);
 const MultiTrackPianoRoll = allProps => {
-  const condensed = createMemo(() => !allProps.selectedTrack);
-  const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrack"]);
+  const selectedTrack = createMemo(() => allProps.tracks[allProps.selectedTrackIndex]);
+  const condensed = createMemo(() => !selectedTrack());
+  const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrackIndex"]);
   const [contextProps, divProps] = splitContextProps(mergeProps$1(restProps, {
     notes: [],
-    condensed: false
+    condensed: false,
+    onNoteChange: () => undefined,
+    onInsertNote: () => -1,
+    onRemoveNote: () => undefined
   }));
   const [scrollerRef, setScrollerRef] = createSignal();
   const clientRect = useBoundingClientRect(scrollerRef);
@@ -676,179 +685,201 @@ const MultiTrackPianoRoll = allProps => {
   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, {
+  return (() => {
+    const _el$ = _tmpl$4.cloneNode(true);
+    spread(_el$, mergeProps(divProps, {
+      get style() {
+        return {
+          display: "flex",
+          flex: 1,
+          height: "100%",
+          "flex-direction": "row",
+          overflow: "hidden",
+          ...(typeof divProps.style === "object" && divProps.style)
+        };
+      }
+    }), false, true);
+    insert(_el$, 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() {
+            return [(() => {
+              const _el$2 = _tmpl$$2.cloneNode(true),
+                _el$3 = _el$2.firstChild;
+              _el$2.style.setProperty("width", "250px");
+              _el$2.style.setProperty("display", "flex");
+              _el$2.style.setProperty("flex-direction", "row");
+              _el$3.style.setProperty("margin-block-start", "0");
+              _el$3.style.setProperty("padding-inline-start", "0");
+              _el$3.style.setProperty("flex", "1");
+              _el$3.style.setProperty("position", "relative");
+              insert(_el$3, 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;
-                        }
-                      });
+                children: (track, noteIndex) => (() => {
+                  const _el$7 = _tmpl$5.cloneNode(true);
+                  _el$7.$$click = () => {
+                    if (noteIndex === allProps.selectedTrackIndex) {
+                      allProps.onSelectedTrackIndexChange(-1);
+                    } else {
+                      allProps.onSelectedTrackIndexChange(noteIndex);
                     }
+                  };
+                  _el$7.style.setProperty("width", "100%");
+                  _el$7.style.setProperty("height", "30px");
+                  _el$7.style.setProperty("list-style", "none");
+                  _el$7.style.setProperty("display", "flex");
+                  _el$7.style.setProperty("align-items", "center");
+                  _el$7.style.setProperty("border-top", "1px black solid");
+                  _el$7.style.setProperty("cursor", "pointer");
+                  insert(_el$7, () => track().name);
+                  effect(() => _el$7.style.setProperty("background", noteIndex === allProps.selectedTrackIndex ? "lightgray" : "none"));
+                  return _el$7;
+                })()
+              }));
+              insert(_el$2, createComponent(Show, {
+                get when() {
+                  return !condensed();
+                },
+                get children() {
+                  return createComponent(PianoRollKeys, {});
+                }
+              }), null);
+              return _el$2;
+            })(), (() => {
+              const _el$4 = _tmpl$3.cloneNode(true),
+                _el$5 = _el$4.firstChild;
+              _el$4.style.setProperty("flex", "1");
+              insert(_el$5, createComponent(ScrollContainer, {
+                ref: setScrollerRef,
+                get children() {
+                  return [memo(() => allProps.children), (() => {
+                    const _el$6 = _tmpl$2.cloneNode(true);
+                    _el$6.style.setProperty("margin", "0");
+                    _el$6.style.setProperty("margin-block-start", "0");
+                    _el$6.style.setProperty("padding-inline-start", "0");
+                    insert(_el$6, createComponent(Index, {
+                      get each() {
+                        return allProps.tracks;
+                      },
+                      children: (track, trackIndex) => {
+                        const notes = useNotes();
+                        createEffect(() => {
+                          notes.onNotesChange(track().notes);
+                        });
+                        const [context, setContext] = createStore({
+                          ...contextProps
+                        });
+                        createEffect(() => {
+                          setContext({
+                            ...contextProps,
+                            condensed: condensed(),
+                            notes: track()?.notes,
+                            onNoteChange: (noteIndex, note) => allProps?.onNoteChange?.(trackIndex, noteIndex, note),
+                            onInsertNote: note => allProps.onInsertNote?.(trackIndex, note) ?? -1,
+                            onRemoveNote: noteIndex => allProps.onRemoveNote?.(trackIndex, noteIndex)
+                          });
+                        });
+                        const verticalViewPort = useViewPortDimension("vertical");
+                        return createComponent(Show, {
+                          get when() {
+                            return condensed() || allProps.selectedTrackIndex === trackIndex;
+                          },
+                          get children() {
+                            return createComponent(PianoRollContextProvider, {
+                              value: context,
+                              get children() {
+                                const _el$8 = _tmpl$5.cloneNode(true);
+                                _el$8.style.setProperty("display", "flex");
+                                _el$8.style.setProperty("position", "relative");
+                                _el$8.style.setProperty("list-style", "none");
+                                _el$8.style.setProperty("flex-direction", "row");
+                                _el$8.style.setProperty("border-top", "1px black solid");
+                                insert(_el$8, createComponent(PianoRollNotes, {}), null);
+                                insert(_el$8, createComponent(PianoRollGrid, {}), null);
+                                effect(() => _el$8.style.setProperty("height", condensed() ? "30px" : `${verticalViewPort.pixelSize}px`));
+                                return _el$8;
+                              }
+                            });
+                          }
+                        });
+                      }
+                    }));
+                    return _el$6;
+                  })()];
+                }
+              }), null);
+              insert(_el$5, createComponent(Show, {
+                get when() {
+                  return !condensed();
+                },
+                get children() {
+                  return createComponent(VerticalZoomControl, {
+                    get value() {
+                      return contextProps.verticalZoom;
+                    },
+                    onInput: event => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)
                   });
                 }
-              }));
-              return _el$5;
-            }
-          }), null);
-          insert(_el$4, createComponent(Show, {
-            get when() {
-              return !condensed();
-            },
-            get children() {
-              return createComponent(VerticalZoomControl, {
+              }), null);
+              insert(_el$4, createComponent(HorizontalZoomControl, {
+                style: {
+                  width: "100%",
+                  "margin-left": 0
+                },
                 get value() {
-                  return contextProps.verticalZoom;
+                  return contextProps.zoom;
                 },
-                onInput: event => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)
+                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$4, _p$._v$ = _v$);
+                _v$2 !== _p$._v$2 && className(_el$5, _p$._v$2 = _v$2);
+                return _p$;
+              }, {
+                _v$: undefined,
+                _v$2: undefined
               });
-            }
-          }), 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$;
-        }
-      });
-    }
-  });
+              return _el$4;
+            })()];
+          }
+        });
+      }
+    }));
+    return _el$;
+  })();
 };
 delegateEvents(["click"]);
 
-const _tmpl$ = /*#__PURE__*/template(`<div><div></div></div>`, 4);
+const _tmpl$$1 = /*#__PURE__*/template(`<div><div></div></div>`, 4);
 const PianoRoll = allProps => {
   const [contextProps, divProps] = splitContextProps(allProps);
   const [scrollerRef, setScrollerRef] = createSignal();
@@ -861,7 +892,7 @@ const PianoRoll = allProps => {
   return createComponent(PianoRollContextProvider, {
     value: contextProps,
     get children() {
-      const _el$ = _tmpl$.cloneNode(true),
+      const _el$ = _tmpl$$1.cloneNode(true),
         _el$2 = _el$.firstChild;
       spread(_el$, mergeProps(divProps, {
         get ["class"]() {
@@ -893,7 +924,7 @@ const PianoRoll = allProps => {
           return [createComponent(PianoRollKeys, {}), createComponent(ScrollContainer, {
             ref: setScrollerRef,
             get children() {
-              return [createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
+              return [memo(() => allProps.children), createComponent(PianoRollGrid, {}), createComponent(PianoRollNotes, {})];
             }
           }), createComponent(VerticalZoomControl, {
             get min() {
@@ -919,6 +950,60 @@ const PianoRoll = allProps => {
   });
 };
 
+const _tmpl$ = /*#__PURE__*/template(`<div class="PlayHead"></div>`, 2);
+const PlayHead = allProps => {
+  const propsWithDefauls = mergeProps$1({
+    playHeadPosition: 0,
+    sync: false
+  }, allProps);
+  const [props, divProps] = splitProps(propsWithDefauls, ["playHeadPosition", "sync", "onPlayHeadPositionChange", "onPositionChange"]);
+  const viewPort = useViewPortDimension("horizontal");
+  createEffect(() => {
+    if (!props.sync) return;
+    const maxPosition = viewPort.range;
+    const newPosition = clamp(props.playHeadPosition - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
+    props.onPositionChange?.(newPosition);
+  });
+  const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.playHeadPosition));
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+    spread(_el$, mergeProps(divProps, {
+      get style() {
+        return {
+          position: "absolute",
+          height: "100%",
+          width: "2px",
+          left: `${leftPosition()}px`,
+          "background-color": "green",
+          cursor: "pointer",
+          ...(typeof divProps.style === "object" && divProps.style)
+        };
+      },
+      "onMouseDown": event => {
+        event.preventDefault();
+        event.stopPropagation();
+        const handleMouseMove = ({
+          movementX
+        }) => {
+          const {
+            parentElement
+          } = event.currentTarget;
+          if (!parentElement) return;
+          const newPosition = viewPort.calculatePosition(leftPosition() + movementX);
+          props.onPlayHeadPositionChange?.(newPosition);
+        };
+        const handleMouseUp = () => {
+          window.removeEventListener("mousemove", handleMouseMove);
+          window.removeEventListener("mouseup", handleMouseUp);
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+      }
+    }), false, false);
+    return _el$;
+  })();
+};
+
 const usePianoRoll = () => {
   const [ppq, onPpqChange] = createSignal(120);
   const [condensed, onCondensedChange] = createSignal(false);
@@ -951,5 +1036,5 @@ const usePianoRoll = () => {
   };
 };
 
-export { MultiTrackPianoRoll, PianoRoll, useNotes, usePianoRoll };
+export { MultiTrackPianoRoll, PianoRoll, PlayHead, useNotes, usePianoRoll };
 //# sourceMappingURL=index.js.map