solid-pianoroll 0.0.24 → 0.0.25

package/dist/dev.jsx

@@ -0,0 +1,1130 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/PianoRoll.module.css
+var _default = {};
+
+// src/PianoRoll.tsx
+import { Show as Show6, mergeProps as mergeProps4 } from "solid-js";
+
+// src/PianoRollContext.tsx
+import { createContext, splitProps, useContext } from "solid-js";
+
+// src/usePianoRollState.ts
+import { mergeProps } from "solid-js";
+import { createStore } from "solid-js/store";
+var defaultState = {
+  ppq: 0,
+  mode: "keys",
+  position: 0,
+  zoom: 10,
+  verticalZoom: 5,
+  verticalPosition: 44,
+  verticalTrackZoom: 0.5,
+  verticalTrackPosition: 0,
+  playHeadPosition: 0,
+  gridDivision: 4,
+  snapToGrid: true,
+  duration: 0,
+  tracks: [],
+  selectedTrackIndex: 0,
+  pressedKeys: {},
+  notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
+  tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 }
+};
+var propNameToHandlerName = /* @__PURE__ */ __name((name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`, "propNameToHandlerName");
+var pianoRollStatePropNames = [
+  ...Object.keys(defaultState),
+  ...Object.keys(defaultState).map(propNameToHandlerName),
+  "onNoteChange",
+  "onInsertNote",
+  "onRemoveNote",
+  "onNoteDown",
+  "onNoteUp",
+  "isKeyDown",
+  "snapValueToGridIfEnabled"
+];
+var createPianoRollstate = /* @__PURE__ */ __name((initialState) => {
+  const [state, setState] = createStore({
+    ...defaultState,
+    ...initialState
+  });
+  const handlers = Object.fromEntries(
+    Object.entries(state).map((entry) => {
+      const handlerName = propNameToHandlerName(entry[0]);
+      return [
+        handlerName,
+        (value, originalEvent) => {
+          const handler = initialState?.[handlerName];
+          setState(entry[0], value);
+          if (handler) {
+            handler(value, originalEvent);
+          }
+        }
+      ];
+    })
+  );
+  const onPlayheadPositionChange = /* @__PURE__ */ __name((playheadPosition, originalEvent) => {
+    handlers.onPlayHeadPositionChange(
+      snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey)
+    );
+  }, "onPlayheadPositionChange");
+  const updateNotes = /* @__PURE__ */ __name(async (trackIndex, getNotes) => {
+    const track = state.tracks[trackIndex];
+    if (!track)
+      return;
+    const notes = track.notes;
+    handlers.onTracksChange([
+      ...state.tracks.slice(0, trackIndex),
+      { ...track, notes: getNotes(notes) },
+      ...state.tracks.slice(trackIndex + 1)
+    ]);
+  }, "updateNotes");
+  const onNoteChange = /* @__PURE__ */ __name((trackIndex, noteIndex, note) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      note,
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((trackIndex, note) => {
+    const track = state.tracks[trackIndex];
+    if (!track)
+      return -1;
+    const notes = track.notes;
+    const newNoteIndex = Math.max(
+      notes.findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
+    updateNotes(trackIndex, (notes2) => [
+      ...notes2.slice(0, newNoteIndex),
+      note,
+      ...notes2.slice(newNoteIndex)
+    ]);
+    return newNoteIndex;
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((trackIndex, noteIndex) => {
+    updateNotes(trackIndex, (notes) => [
+      ...notes.slice(0, noteIndex),
+      ...notes.slice(noteIndex + 1)
+    ]);
+  }, "onRemoveNote");
+  const updateKeyPressedState = /* @__PURE__ */ __name((trackIndex, keyNumber, value) => {
+    handlers.onPressedKeysChange?.({
+      ...state.pressedKeys,
+      [trackIndex]: {
+        ...state.pressedKeys[trackIndex],
+        [keyNumber]: value
+      }
+    });
+  }, "updateKeyPressedState");
+  const onNoteDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, true);
+  }, "onNoteDown");
+  const onNoteUp = /* @__PURE__ */ __name((trackIndex, keyNumber) => {
+    updateKeyPressedState(trackIndex, keyNumber, false);
+  }, "onNoteUp");
+  const isKeyDown = /* @__PURE__ */ __name((trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber], "isKeyDown");
+  const snapValueToGridIfEnabled = /* @__PURE__ */ __name((value, altKey) => {
+    const gridDivisionTicks = state.ppq * 4 / state.gridDivision;
+    return state.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks) * gridDivisionTicks : value;
+  }, "snapValueToGridIfEnabled");
+  return mergeProps(state, {
+    ...handlers,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote,
+    onNoteDown,
+    onNoteUp,
+    isKeyDown,
+    snapValueToGridIfEnabled,
+    onPlayheadPositionChange
+  });
+}, "createPianoRollstate");
+var usePianoRollState_default = createPianoRollstate;
+
+// src/PianoRollContext.tsx
+var PianoRollContext = createContext();
+var PianoRollContextProvider = PianoRollContext.Provider;
+var usePianoRollContext = /* @__PURE__ */ __name(() => {
+  const context = useContext(PianoRollContext);
+  if (!context)
+    throw new Error("No PianoRollContext found");
+  return context;
+}, "usePianoRollContext");
+var splitContextProps = /* @__PURE__ */ __name((allProps) => splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]), "splitContextProps");
+
+// src/PianoRollKeys.module.css
+var _default2 = {};
+
+// src/PianoRollKeys.tsx
+import { createEffect as createEffect3, createMemo as createMemo2, createSignal, Index, Show } from "solid-js";
+
+// src/viewport/ScrollZoomViewPort.tsx
+import { createContext as createContext2, useContext as useContext2 } from "solid-js";
+
+// src/viewport/createViewPortDimension.ts
+import { createEffect } from "solid-js";
+import { createStore as createStore2 } from "solid-js/store";
+function createViewPortDimension(getState) {
+  const getStateWithFunctions = /* @__PURE__ */ __name(() => {
+    const state2 = getState();
+    const onZoomChange = /* @__PURE__ */ __name((zoom) => state2.onZoomChange?.(clamp(zoom, state2.minZoom, state2.maxZoom)), "onZoomChange");
+    const onPositionChange = /* @__PURE__ */ __name((position) => state2.onPositionChange?.(position), "onPositionChange");
+    return {
+      ...state2,
+      onZoomChange,
+      onPositionChange,
+      calculatePixelOffset,
+      calculatePixelValue,
+      calculatePosition,
+      calculatePixelDimensions,
+      calculateVisibleRange,
+      calculateMaxPosition,
+      isVisible
+    };
+  }, "getStateWithFunctions");
+  const [state, setState] = createStore2(getStateWithFunctions());
+  createEffect(() => setState(getStateWithFunctions()));
+  function calculatePixelValue(position = state.position) {
+    const virtualSize = state.pixelSize * state.zoom;
+    return position / state.range * virtualSize;
+  }
+  __name(calculatePixelValue, "calculatePixelValue");
+  function calculatePixelOffset(position) {
+    return calculatePixelValue(position) - calculatePixelValue(state.position);
+  }
+  __name(calculatePixelOffset, "calculatePixelOffset");
+  function calculatePosition(offset) {
+    const percentX = (offset - state.pixelOffset) / state.pixelSize;
+    const position = state.position + percentX * calculateVisibleRange();
+    return position;
+  }
+  __name(calculatePosition, "calculatePosition");
+  function calculateVisibleRange() {
+    return state.range / state.zoom;
+  }
+  __name(calculateVisibleRange, "calculateVisibleRange");
+  function calculateMaxPosition() {
+    return state.range - state.range / state.zoom;
+  }
+  __name(calculateMaxPosition, "calculateMaxPosition");
+  function calculatePixelDimensions(position, length) {
+    const offset = calculatePixelOffset(position);
+    const size = calculatePixelValue(length);
+    return { offset, size };
+  }
+  __name(calculatePixelDimensions, "calculatePixelDimensions");
+  function isVisible({ offset, size }) {
+    return offset + size > 0 && offset < state.pixelSize;
+  }
+  __name(isVisible, "isVisible");
+  return state;
+}
+__name(createViewPortDimension, "createViewPortDimension");
+var clamp = /* @__PURE__ */ __name((value, min, max) => Math.max(min, Math.min(max, value)), "clamp");
+
+// src/viewport/ScrollZoomViewPort.tsx
+var defaultViewPortProps = {
+  pixelOffset: 0,
+  position: 0,
+  range: 1,
+  zoom: 1,
+  minZoom: 1,
+  maxZoom: Infinity
+};
+var ScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+  const viewPorts = Object.entries(props.dimensions).map(
+    ([name, viewPortProps]) => createViewPortDimension(() => ({
+      name,
+      ...defaultViewPortProps,
+      ...viewPortProps()
+    }))
+  );
+  const parentViewPorts = useContext2(ScrollZoomViewPortContext);
+  return <ScrollZoomViewPortContext.Provider value={[...parentViewPorts, ...viewPorts]}>{props.children}</ScrollZoomViewPortContext.Provider>;
+}, "ScrollZoomViewPort");
+var ScrollZoomViewPortContext = createContext2([]);
+var useViewPortDimension = /* @__PURE__ */ __name((name) => {
+  const viewPorts = useContext2(ScrollZoomViewPortContext);
+  const viewPort = name ? viewPorts.find((viewPort2) => viewPort2.name === name) : viewPorts[viewPorts.length - 1];
+  if (!viewPort)
+    throw new Error(`ViewPort dimension "${name}" not found.`);
+  return viewPort;
+}, "useViewPortDimension");
+
+// src/viewport/ScrollZoomContainer.tsx
+import { createEffect as createEffect2, createMemo, mergeProps as mergeProps2, splitProps as splitProps2 } from "solid-js";
+
+// src/viewport/ScrollZoomContainer.module.css
+var _default3 = {};
+
+// src/viewport/ScrollZoomContainer.tsx
+var ScrollZoomContainer = /* @__PURE__ */ __name((props) => {
+  let scrollContentRef;
+  const [ownProps, divProps] = splitProps2(props, [
+    "ref",
+    "verticalDimensionName",
+    "horizontalDimensionName",
+    "showScrollbar"
+  ]);
+  const propsWithDefaults = mergeProps2(
+    {
+      verticalDimensionName: "vertical",
+      horizontalDimensionName: "horizontal",
+      showScrollbar: true
+    },
+    ownProps
+  );
+  const verticalViewPort = createMemo(
+    () => useViewPortDimension(propsWithDefaults.verticalDimensionName)
+  );
+  const horizontalViewPort = createMemo(
+    () => useViewPortDimension(propsWithDefaults.horizontalDimensionName)
+  );
+  const handleScroll = /* @__PURE__ */ __name((event) => {
+    event.preventDefault();
+    if (didUpdateScroll) {
+      didUpdateScroll = false;
+      return;
+    }
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = event.currentTarget;
+    const scrollTopAmount = scrollTop / (scrollHeight - height);
+    const scrollLeftAmount = scrollLeft / (scrollWidth - width);
+    verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
+    horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
+  }, "handleScroll");
+  const handleWheel = /* @__PURE__ */ __name((event) => {
+    if (event.altKey) {
+      event.preventDefault();
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        horizontalViewPort()?.onZoomChange?.(
+          horizontalViewPort().zoom / (1 + event.deltaX / horizontalViewPort().pixelSize)
+        );
+        const maxPosition = horizontalViewPort().calculateMaxPosition();
+        horizontalViewPort()?.onPositionChange?.(
+          Math.min(maxPosition, horizontalViewPort()?.position)
+        );
+      } else {
+        verticalViewPort()?.onZoomChange?.(
+          verticalViewPort().zoom / (1 + event.deltaY / verticalViewPort().pixelSize)
+        );
+        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+        verticalViewPort()?.onPositionChange?.(
+          Math.min(maxVerticalPosition, verticalViewPort()?.position)
+        );
+      }
+    } else if (!props.showScrollbar) {
+      event.preventDefault();
+      event.currentTarget.scrollLeft += event.deltaX;
+      event.currentTarget.scrollTop += event.deltaY;
+    }
+  }, "handleWheel");
+  let didUpdateScroll = false;
+  createEffect2(() => {
+    const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
+    const maxPosition = horizontalViewPort().calculateMaxPosition();
+    const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
+    const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
+    const height = verticalViewPort().pixelSize;
+    const width = horizontalViewPort().pixelSize;
+    if (!scrollContentRef?.parentElement)
+      return;
+    const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
+    const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+    const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
+    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 <div
+    ref={props.ref}
+    onScroll={handleScroll}
+    onWheel={handleWheel}
+    {...divProps}
+    style={{
+      overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
+      ...typeof divProps.style === "object" && divProps.style
+    }}
+    classList={{
+      [_default3.ScrollZoomContainer]: true,
+      ...divProps.classList
+    }}
+  ><div ref={scrollContentRef}><div
+    style={{
+      top: 0,
+      left: 0,
+      height: `${verticalViewPort().pixelSize}px`,
+      width: `${horizontalViewPort().pixelSize}px`,
+      position: "sticky",
+      display: "flex"
+    }}
+  ><div
+    style={{
+      position: "relative",
+      height: `${verticalViewPort().pixelSize}px`,
+      width: `${horizontalViewPort().pixelSize}px`
+    }}
+  >{props.children}</div></div></div></div>;
+}, "ScrollZoomContainer");
+var ScrollZoomContainer_default = ScrollZoomContainer;
+
+// src/PianoRollKeys.tsx
+var PianoRollKeys = /* @__PURE__ */ __name(() => {
+  const verticalViewPort = createMemo2(() => useViewPortDimension("vertical"));
+  const horizontalViewPort = createMemo2(() => useViewPortDimension("horizontalKeys"));
+  const [isMouseDown, setIsMouseDown] = createSignal(false);
+  const context = usePianoRollContext();
+  const handleMouseUp = /* @__PURE__ */ __name(() => {
+    setIsMouseDown(false);
+  }, "handleMouseUp");
+  createEffect3(() => {
+    if (isMouseDown()) {
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+  });
+  return <div class={_default2.PianoRollKeys} style={{ width: `${horizontalViewPort().pixelSize}px` }}><ScrollZoomContainer_default horizontalDimensionName="horizontalKeys" showScrollbar={false}><Index each={keys}>{(key) => {
+    const isDown = createMemo2(
+      () => context.isKeyDown(context.selectedTrackIndex, key().number)
+    );
+    const virtualDimensions = createMemo2(
+      () => verticalViewPort().calculatePixelDimensions(127 - key().number, 1)
+    );
+    const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
+    const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
+    return <Show when={verticalViewPort().isVisible(virtualDimensions())}><div
+      classList={{
+        [_default2["Key"]]: true,
+        [_default2["black"]]: key().isBlack,
+        [_default2["white"]]: !key().isBlack,
+        [_default2["down"]]: isDown()
+      }}
+      onMouseDown={() => {
+        setIsMouseDown(true);
+        context.onNoteDown(context.selectedTrackIndex, key().number);
+      }}
+      onMouseUp={() => {
+        context.onNoteUp(context.selectedTrackIndex, key().number);
+      }}
+      onMouseEnter={() => {
+        if (isMouseDown()) {
+          context.onNoteDown(context.selectedTrackIndex, key().number);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isMouseDown()) {
+          context.onNoteUp(context.selectedTrackIndex, key().number);
+        }
+      }}
+      title={key().name}
+      data-index={key().number % 12}
+      style={{
+        top: `${virtualDimensions().offset - virtualDimensions().size * (!key().isBlack ? nextIsBlack ? 1 / 2 : 0 : 0)}px`,
+        height: `${virtualDimensions().size + (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) + (!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
+        "box-shadow": `0px 0px ${Math.min(virtualDimensions().size / 20, 1)}px ${Math.min(
+          virtualDimensions().size / 50,
+          1
+        )}px rgba(0, 0, 0, 0.5) ${key().isBlack ? "" : "inset"}` + isDown() ? `0px 0px ${Math.min(virtualDimensions().size / 8, 2)}px ${Math.min(
+          virtualDimensions().size / 20,
+          2
+        )}px rgba(0, 0, 0, 0.5) inset` : ""
+      }}
+    /></Show>;
+  }}</Index></ScrollZoomContainer_default></div>;
+}, "PianoRollKeys");
+var blackKeys = [1, 3, 6, 8, 10];
+var keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+var keys = Array.from({ length: 128 }).map((_, index) => ({
+  number: index,
+  name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
+  isBlack: blackKeys.includes(index % 12)
+}));
+var PianoRollKeys_default = PianoRollKeys;
+
+// src/PianoRollNotes.tsx
+import { createMemo as createMemo3, createSignal as createSignal2, For, Show as Show2 } from "solid-js";
+
+// src/PianoRollNotes.module.css
+var _default4 = {};
+
+// src/PianoRollNotes.tsx
+var PianoRollNotes = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const verticalViewPort = createMemo3(
+    () => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks")
+  );
+  const horizontalViewPort = createMemo3(() => useViewPortDimension("horizontal"));
+  const gridDivisionTicks = createMemo3(() => context.ppq * 4 / context.gridDivision);
+  const [isDragging, setIsDragging] = createSignal2(false);
+  const [noteDragMode, setNoteDragMode] = createSignal2();
+  const [currentNoteIndex, setCurrentNoteIndex] = createSignal2(-1);
+  const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal2(-1);
+  const [diffPosition, setDiffPosition] = createSignal2(0);
+  const [getInitialNote, setInitialNote] = createSignal2();
+  const calculateNoteDragValues = /* @__PURE__ */ __name((event) => {
+    const targetTrackIndex = context.mode === "tracks" ? clamp(
+      Math.floor(verticalViewPort().calculatePosition(event.clientY)),
+      0,
+      context.tracks.length - 1
+    ) : currentNoteTrackIndex() > -1 ? currentNoteTrackIndex() : context.selectedTrackIndex;
+    const midi = context.mode === "keys" ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY)) : getInitialNote()?.midi ?? 60;
+    const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
+    return {
+      targetTrackIndex,
+      midi,
+      horiontalPosition
+    };
+  }, "calculateNoteDragValues");
+  const handleMouseMove = /* @__PURE__ */ __name((mouseMoveEvent) => {
+    mouseMoveEvent.preventDefault();
+    mouseMoveEvent.stopPropagation();
+    const note = getInitialNote();
+    if (!note)
+      return;
+    const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
+    const ticks = context.snapValueToGridIfEnabled(
+      horiontalPosition - diffPosition(),
+      mouseMoveEvent.altKey
+    );
+    const updatedNote = {
+      ...note,
+      midi,
+      ...noteDragMode() === "move" && { ticks },
+      ...noteDragMode() === "trimStart" && {
+        ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : context.snapValueToGridIfEnabled(
+          horiontalPosition - note.ticks,
+          mouseMoveEvent.altKey
+        )
+      },
+      ...noteDragMode() === "trimEnd" && {
+        ticks: ticks < note.ticks ? ticks : note.ticks,
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : context.snapValueToGridIfEnabled(
+          horiontalPosition - note.ticks,
+          mouseMoveEvent.altKey
+        )
+      }
+    };
+    const previousTrackIndex = currentNoteTrackIndex();
+    const previousNoteIndex = currentNoteIndex();
+    if (targetTrackIndex === previousTrackIndex) {
+      context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
+    } else {
+      if (context.onInsertNote) {
+        context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+        const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+        setCurrentNoteTrackIndex(targetTrackIndex);
+        setCurrentNoteIndex(newNoteIndex);
+      }
+    }
+  }, "handleMouseMove");
+  const stopDragging = /* @__PURE__ */ __name(() => {
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", stopDragging);
+    setIsDragging(false);
+    setCurrentNoteIndex(-1);
+    setCurrentNoteTrackIndex(-1);
+  }, "stopDragging");
+  const startDragging = /* @__PURE__ */ __name(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", stopDragging);
+  }, "startDragging");
+  const getClasses = /* @__PURE__ */ __name((noteDragMode2) => {
+    return noteDragMode2 ? [_default4.Note, _default4[noteDragMode2]] : [_default4.Note];
+  }, "getClasses");
+  return <div
+    classList={{ [_default4.PianoRollNotes]: true }}
+    ref={props.ref}
+    onMouseDown={(mouseDownEvent) => {
+      mouseDownEvent.preventDefault();
+      mouseDownEvent.stopPropagation();
+      const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
+      const ticks = context.snapValueToGridIfEnabled(
+        horiontalPosition,
+        mouseDownEvent.altKey,
+        context
+      );
+      const durationTicks = gridDivisionTicks();
+      const newNote = {
+        midi,
+        ticks,
+        durationTicks,
+        velocity: 100
+      };
+      const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
+      setIsDragging(true);
+      setCurrentNoteTrackIndex(targetTrackIndex);
+      setCurrentNoteIndex(newNoteIndex);
+      setInitialNote(newNote);
+      setDiffPosition(0);
+      setNoteDragMode("trimEnd");
+      startDragging();
+    }}
+  ><For each={context.tracks}>{(track, trackIndex) => {
+    return <Show2
+      when={trackIndex() === context.selectedTrackIndex || context.showAllTracks || context.mode === "tracks"}
+    ><For each={track.notes}>{(note, noteIndex) => {
+      const verticalVirtualDimensions = createMemo3(
+        () => verticalViewPort().calculatePixelDimensions(
+          context.mode === "keys" ? 127 - note.midi : trackIndex(),
+          1
+        )
+      );
+      const horizontalDimensions = createMemo3(
+        () => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks)
+      );
+      return <Show2
+        when={verticalViewPort().isVisible(verticalVirtualDimensions()) && horizontalViewPort().isVisible(horizontalDimensions())}
+      ><div
+        class={getClasses(noteDragMode()).join(" ")}
+        draggable={false}
+        onMouseMove={(event) => {
+          if (isDragging())
+            return;
+          event.stopPropagation();
+          const relativeX = horizontalViewPort().calculatePixelValue(
+            horizontalViewPort().calculatePosition(event.clientX)
+          );
+          const noteStartX = horizontalViewPort().calculatePixelValue(note.ticks);
+          const noteEndX = horizontalViewPort().calculatePixelValue(
+            note.ticks + note.durationTicks
+          );
+          setNoteDragMode(
+            relativeX - noteStartX < 3 ? "trimStart" : noteEndX - relativeX < 3 ? "trimEnd" : "move"
+          );
+        }}
+        onDblClick={(event) => {
+          event.stopPropagation();
+          context.onRemoveNote?.(trackIndex(), noteIndex());
+        }}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+          const initialPosition = horizontalViewPort().calculatePosition(
+            event.clientX
+          );
+          setDiffPosition(
+            noteDragMode() === "trimEnd" ? -(note.ticks + note.durationTicks - initialPosition) : initialPosition - note.ticks
+          );
+          setIsDragging(true);
+          setCurrentNoteIndex(noteIndex());
+          setCurrentNoteTrackIndex(trackIndex());
+          setInitialNote(note);
+          startDragging();
+        }}
+        style={{
+          "background-color": `${track.color}`,
+          opacity: (note.velocity / 128 + 2) / 3,
+          top: `${verticalVirtualDimensions().offset}px`,
+          height: `${verticalVirtualDimensions().size}px`,
+          left: `${horizontalDimensions().offset}px`,
+          width: `${horizontalDimensions().size}px`
+        }}
+      /></Show2>;
+    }}</For></Show2>;
+  }}</For></div>;
+}, "PianoRollNotes");
+var PianoRollNotes_default = PianoRollNotes;
+
+// src/PianoRollGrid.tsx
+import { createMemo as createMemo5, For as For2, Index as Index2, Show as Show3 } from "solid-js";
+
+// src/PianoRollGrid.module.css
+var _default5 = {};
+
+// src/usePianoRollGrid.ts
+import { createMemo as createMemo4 } from "solid-js";
+var usePianoRollGrid = /* @__PURE__ */ __name(() => {
+  const context = usePianoRollContext();
+  const horizontalViewPort = createMemo4(() => useViewPortDimension("horizontal"));
+  const measureTicks = createMemo4(() => context.ppq * 4);
+  const selectedGridDivisorTicks = createMemo4(() => measureTicks() / context.gridDivision);
+  function calculateVisibleGridDivisorTicks(value) {
+    const visibleRange = horizontalViewPort().calculateVisibleRange();
+    if (visibleRange <= 0)
+      return 0;
+    if (visibleRange / value > 100) {
+      return calculateVisibleGridDivisorTicks(value * 2);
+    }
+    if (visibleRange / value < 30) {
+      return calculateVisibleGridDivisorTicks(value / 2);
+    }
+    return value;
+  }
+  __name(calculateVisibleGridDivisorTicks, "calculateVisibleGridDivisorTicks");
+  const gridDivisorTicks = createMemo4(
+    () => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks())
+  );
+  const gridArray = createMemo4(() => {
+    const numberOfLines = Math.ceil(
+      horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1
+    );
+    const startIndex = Math.floor(context.position / gridDivisorTicks());
+    return Array.from({ length: numberOfLines }).map((_, i) => {
+      const index = i + startIndex;
+      const ticks = index * gridDivisorTicks();
+      const measurePosition = ticks / context.ppq / 4 + 1;
+      const bars = Math.floor(measurePosition);
+      const beats = Math.floor((measurePosition - bars) * 4);
+      const label = `${bars}${beats ? `.${beats}` : ""}`;
+      return {
+        index,
+        ticks,
+        isHighlighted: Math.ceil((index + 1) * selectedGridDivisorTicks() / measureTicks()) % 2 === 0,
+        hasHighlightedBorder: index * gridDivisorTicks() % selectedGridDivisorTicks() === 0,
+        showLabel: index * selectedGridDivisorTicks() / measureTicks() % 2 === 0,
+        virtualDimensions: horizontalViewPort().calculatePixelDimensions(ticks, gridDivisorTicks()),
+        label
+      };
+    });
+  });
+  return gridArray;
+}, "usePianoRollGrid");
+var usePianoRollGrid_default = usePianoRollGrid;
+
+// src/PianoRollGrid.tsx
+var PianoRollGrid = /* @__PURE__ */ __name(() => {
+  const context = usePianoRollContext();
+  const verticalViewPort = createMemo5(
+    () => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks")
+  );
+  const horizontalViewPort = createMemo5(() => useViewPortDimension("horizontal"));
+  const gridArray = usePianoRollGrid_default();
+  return <div class={_default5.PianoRollGrid}>
+    <Index2 each={gridArray()}>{(entry) => {
+      return <Show3 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
+        classList={{
+          [_default5["PianoRollGrid-Time"]]: true,
+          [_default5["Highlighted"]]: entry().isHighlighted,
+          [_default5["HighlightedBorder"]]: entry().hasHighlightedBorder
+        }}
+        style={{
+          left: `${entry().virtualDimensions.offset}px`,
+          width: `${entry().virtualDimensions.size}px`
+        }}
+      /></Show3>;
+    }}</Index2>
+    <Show3 when={context.mode === "keys"}><Index2 each={keys}>{(key) => {
+      const virtualDimensions = createMemo5(
+        () => verticalViewPort().calculatePixelDimensions(127 - key().number, 1)
+      );
+      return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
+        classList={{
+          [_default5["PianoRollGrid-Row"]]: true,
+          [_default5["Key"]]: true,
+          [_default5["IsDark"]]: key().isBlack,
+          [_default5["IsBlackAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12)
+        }}
+        style={{
+          top: `${virtualDimensions().offset}px`,
+          height: `${virtualDimensions().size}px`
+        }}
+      /></Show3>;
+    }}</Index2></Show3>
+    <Show3 when={context.mode === "tracks"}><For2 each={context.tracks}>{(track, index) => {
+      const virtualDimensions = createMemo5(
+        () => verticalViewPort().calculatePixelDimensions(index(), 1)
+      );
+      return <Show3 when={verticalViewPort().isVisible(virtualDimensions())}><div
+        classList={{
+          [_default5["PianoRollGrid-Row"]]: true,
+          [_default5["IsDark"]]: index() % 2 === 0
+        }}
+        style={{
+          top: `${virtualDimensions().offset}px`,
+          height: `${virtualDimensions().size}px`
+        }}
+      /></Show3>;
+    }}</For2></Show3>
+  </div>;
+}, "PianoRollGrid");
+var PianoRollGrid_default = PianoRollGrid;
+
+// src/viewport/ZoomSliderControl.tsx
+import { createMemo as createMemo6, mergeProps as mergeProps3 } from "solid-js";
+var ZoomSliderControl = /* @__PURE__ */ __name((props) => {
+  const propsWithDefaults = mergeProps3({ orientation: "horizontal" }, props);
+  const dimension = createMemo6(
+    () => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation)
+  );
+  return <input
+    min={dimension().minZoom}
+    max={dimension().maxZoom}
+    step={0.01}
+    {...props}
+    value={dimension().zoom}
+    onInput={(event) => {
+      const value = event.currentTarget.valueAsNumber;
+      dimension().onZoomChange?.(value);
+    }}
+    type="range"
+    {...{ orient: propsWithDefaults.orientation }}
+    style={propsWithDefaults.orientation === "vertical" ? {
+      margin: 0,
+      "margin-left": "4px",
+      "margin-right": "4px",
+      width: "16px",
+      transform: "rotate(180deg)",
+      ...{
+        "writing-mode": "bt-lr",
+        "-webkit-appearance": "slider-vertical"
+      },
+      ...typeof props.style === "object" && props.style
+    } : {
+      margin: 0,
+      "margin-top": "4px",
+      "margin-bottom": "4px",
+      ...typeof props.style === "object" && props.style
+    }}
+  />;
+}, "ZoomSliderControl");
+var ZoomSliderControl_default = ZoomSliderControl;
+
+// src/PianoRollTrackList.module.css
+var _default6 = {};
+
+// src/PianoRollTrackList.tsx
+import { createMemo as createMemo7, Index as Index3, Show as Show4 } from "solid-js";
+var PianoRollTrackList = /* @__PURE__ */ __name(() => {
+  const viewPort = createMemo7(() => useViewPortDimension("verticalTracks"));
+  const context = usePianoRollContext();
+  return <div class={_default6.PianoRollTrackList}><Index3 each={context.tracks}>{(track, index) => {
+    const virtualDimensions = createMemo7(() => viewPort().calculatePixelDimensions(index, 1));
+    return <Show4 when={virtualDimensions().size > 0}><div
+      classList={{
+        [_default6["Track"]]: true,
+        [_default6["selected"]]: index === context.selectedTrackIndex
+      }}
+      title={track().name}
+      style={{
+        top: `${virtualDimensions().offset}px`,
+        height: `${virtualDimensions().size}px`
+      }}
+      onClick={() => context.onSelectedTrackIndexChange?.(index)}
+    >
+      {index}
+      {" "}
+      {track().name || "[unnamed track]"}
+    </div></Show4>;
+  }}</Index3></div>;
+}, "PianoRollTrackList");
+var PianoRollTrackList_default = PianoRollTrackList;
+
+// src/PianoRollScrollZoomViewPort.tsx
+var PianoRollScrollZoomViewPort = /* @__PURE__ */ __name((props) => {
+  const zoomFactor = 500;
+  const context = usePianoRollContext();
+  return <ScrollZoomViewPort
+    dimensions={{
+      horizontal: () => ({
+        pixelOffset: context.notesScrollerClientRect.left,
+        pixelSize: context.notesScrollerClientRect.width,
+        position: context.position,
+        range: context.duration,
+        zoom: context.zoom * (zoomFactor / context.notesScrollerClientRect.width),
+        onPositionChange: context.onPositionChange,
+        onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
+        minZoom: 1,
+        maxZoom: 500
+      }),
+      vertical: () => ({
+        pixelOffset: context.notesScrollerClientRect.top,
+        pixelSize: context.notesScrollerClientRect.height,
+        position: context.verticalPosition,
+        range: 128,
+        zoom: context.verticalZoom * (zoomFactor / context.notesScrollerClientRect.height),
+        onPositionChange: context.onVerticalPositionChange,
+        onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(
+          verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)
+        ),
+        minZoom: 1,
+        maxZoom: 10
+      }),
+      horizontalTracks: () => ({
+        pixelOffset: 0,
+        pixelSize: context.tracksScrollerClientRect.width
+      }),
+      verticalTracks: () => ({
+        pixelOffset: context.tracksScrollerClientRect.top,
+        pixelSize: context.tracksScrollerClientRect.height,
+        position: context.verticalTrackPosition,
+        range: context.tracks.length,
+        zoom: context.verticalTrackZoom * (zoomFactor / context.tracksScrollerClientRect.height),
+        onPositionChange: context.onVerticalTrackPositionChange,
+        onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(
+          verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)
+        ),
+        minZoom: 0.8,
+        maxZoom: 3
+      }),
+      horizontalKeys: () => ({ pixelSize: 60 })
+    }}
+  >{props.children}</ScrollZoomViewPort>;
+}, "PianoRollScrollZoomViewPort");
+var PianoRollScrollZoomViewPort_default = PianoRollScrollZoomViewPort;
+
+// src/PianoRollNotesScroller.tsx
+import { createEffect as createEffect5, createSignal as createSignal4 } from "solid-js";
+
+// src/useBoundingClientRect.ts
+import { createEffect as createEffect4, createSignal as createSignal3 } from "solid-js";
+var defaultRect = {
+  left: 0,
+  width: 0,
+  top: 0,
+  height: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0
+};
+function useBoundingClientRect(containerRef) {
+  const [boundingClientRect, setBoundingClientRect] = createSignal3(defaultRect);
+  createEffect4(() => {
+    const container = containerRef();
+    if (!container)
+      return;
+    const updateBoundingClientRect = /* @__PURE__ */ __name(() => {
+      setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
+    }, "updateBoundingClientRect");
+    const resizeObserver = new ResizeObserver(updateBoundingClientRect);
+    resizeObserver.observe(container);
+    updateBoundingClientRect();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  return boundingClientRect;
+}
+__name(useBoundingClientRect, "useBoundingClientRect");
+
+// src/PianoRollNotesScroller.tsx
+var PianoRollNotesScroller = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = createSignal4();
+  const clientRect = useBoundingClientRect(ref);
+  createEffect5(() => {
+    context.onNotesScrollerClientRectChange(clientRect());
+  });
+  return <ScrollZoomContainer_default
+    ref={setRef}
+    verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}
+  >{props.children}</ScrollZoomContainer_default>;
+}, "PianoRollNotesScroller");
+var PianoRollNotesScroller_default = PianoRollNotesScroller;
+
+// src/PianoRollTrackListScroller.tsx
+import { createEffect as createEffect6, createSignal as createSignal5 } from "solid-js";
+var PianoRollTrackListScroller = /* @__PURE__ */ __name((props) => {
+  const context = usePianoRollContext();
+  const [ref, setRef] = createSignal5();
+  const clientRect = useBoundingClientRect(ref);
+  createEffect6(() => {
+    context.onTracksScrollerClientRectChange(clientRect());
+  });
+  return <ScrollZoomContainer_default
+    ref={setRef}
+    horizontalDimensionName="horizontalTracks"
+    verticalDimensionName="verticalTracks"
+    showScrollbar={context.mode === "keys"}
+  >{props.children}</ScrollZoomContainer_default>;
+}, "PianoRollTrackListScroller");
+var PianoRollTrackListScroller_default = PianoRollTrackListScroller;
+
+// src/PianoRollScale.tsx
+import { createMemo as createMemo8, Index as Index4, Show as Show5 } from "solid-js";
+
+// src/PianoRollScale.module.css
+var _default7 = {};
+
+// src/PianoRollScale.tsx
+var PianoRollScale = /* @__PURE__ */ __name(() => {
+  const horizontalViewPort = createMemo8(() => useViewPortDimension("horizontal"));
+  const grid = usePianoRollGrid_default();
+  const context = usePianoRollContext();
+  const updatePlayheadPosition = /* @__PURE__ */ __name((event) => {
+    const position = horizontalViewPort().calculatePosition(event.clientX);
+    context.onPlayHeadPositionChange(position, event);
+  }, "updatePlayheadPosition");
+  return <div
+    class={_default7.PianoRollScale}
+    onMouseDown={(event) => {
+      updatePlayheadPosition(event);
+      const handleMouseUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", updatePlayheadPosition);
+        window.removeEventListener("mouseup", handleMouseUp);
+      }, "handleMouseUp");
+      window.addEventListener("mousemove", updatePlayheadPosition);
+      window.addEventListener("mouseup", handleMouseUp);
+    }}
+  ><Index4 each={grid()}>{(entry) => {
+    return <Show5 when={horizontalViewPort().isVisible(entry().virtualDimensions)}><div
+      classList={{
+        [_default7["PianoRollScale-Time"]]: true,
+        [_default7["Highlighted"]]: entry().isHighlighted,
+        [_default7["HighlightedBorder"]]: entry().hasHighlightedBorder
+      }}
+      style={{
+        left: `${entry().virtualDimensions.offset}px`,
+        width: `${entry().virtualDimensions.size}px`
+      }}
+    ><Show5 when={entry().showLabel}><div class={_default7["PianoRollScale-Label"]}>{entry().label}</div></Show5></div></Show5>;
+  }}</Index4></div>;
+}, "PianoRollScale");
+var PianoRollScale_default = PianoRollScale;
+
+// src/PianoRoll.tsx
+var PianoRoll = /* @__PURE__ */ __name((allProps) => {
+  const propsWithDefaults = mergeProps4({ showAllTracks: false }, allProps);
+  const [context, divProps] = splitContextProps(propsWithDefaults);
+  return <PianoRollContextProvider value={context}><div {...divProps} class={_default.PianoRoll}><PianoRollScrollZoomViewPort_default>
+    <div class={_default.PianoRollContainer}>
+      <ZoomSliderControl_default orientation="vertical" dimensionName="verticalTracks" />
+      <div
+        classList={{
+          [_default.PianoRollLeftColumn]: true,
+          [_default.showTrackList]: context.showTrackList
+        }}
+      >
+        <Show6 when={context.showTrackList}><div
+          style={{
+            height: "30px",
+            "border-right": "1px black solid"
+          }}
+        ><button
+          title={context.mode === "keys" ? "Tracks Mode" : "Keys Mode"}
+          onClick={() => context.onModeChange(context.mode === "keys" ? "tracks" : "keys")}
+          style={{
+            "font-size": "16px",
+            "line-height": "16px",
+            cursor: "pointer",
+            overflow: "hidden"
+          }}
+        ><div>{context.mode === "keys" ? "\u2261" : "\u{1F3B9}"}</div></button></div></Show6>
+        <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+          <Show6 when={context.showTrackList}><PianoRollTrackListScroller_default><PianoRollTrackList_default /></PianoRollTrackListScroller_default></Show6>
+          <Show6 when={context.mode === "keys"}><PianoRollKeys_default /></Show6>
+        </div>
+      </div>
+      <PianoRollNotesScroller_default>
+        {allProps.children}
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            height: "100%",
+            "flex-direction": "column",
+            overflow: "hidden"
+          }}
+        >
+          <div style={{ height: "30px" }}><PianoRollScale_default /></div>
+          <div style={{ flex: 1, position: "relative", overflow: "hidden" }}>
+            <PianoRollGrid_default />
+            <PianoRollNotes_default />
+          </div>
+        </div>
+      </PianoRollNotesScroller_default>
+      <ZoomSliderControl_default orientation="vertical" disabled={context.mode !== "keys"} />
+    </div>
+    <ZoomSliderControl_default
+      orientation="horizontal"
+      style={{
+        "margin-left": `${context.tracksScrollerClientRect.width + 24}px`,
+        "margin-right": "24px"
+      }}
+    />
+  </PianoRollScrollZoomViewPort_default></div></PianoRollContextProvider>;
+}, "PianoRoll");
+var PianoRoll_default = PianoRoll;
+
+// src/viewport/PlayHead.tsx
+import { createEffect as createEffect7, createMemo as createMemo9, splitProps as splitProps3 } from "solid-js";
+var PlayHead = /* @__PURE__ */ __name((allProps) => {
+  const [props, divProps] = splitProps3(allProps, [
+    "position",
+    "sync",
+    "onPositionChange",
+    "dimensionName"
+  ]);
+  const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
+  createEffect7(() => {
+    if (!props.sync)
+      return;
+    const maxPosition = viewPort.range;
+    const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
+    viewPort.onPositionChange?.(newPosition);
+  });
+  const leftPosition = createMemo9(() => viewPort.calculatePixelOffset(props.position));
+  return <div
+    class="PlayHead"
+    {...divProps}
+    style={{
+      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 = /* @__PURE__ */ __name((event2) => {
+        const newPosition = viewPort.calculatePosition(event2.clientX);
+        props.onPositionChange?.(newPosition, event2);
+      }, "handleMouseMove");
+      const handleMouseUp = /* @__PURE__ */ __name(() => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      }, "handleMouseUp");
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }}
+  />;
+}, "PlayHead");
+var PlayHead_default = PlayHead;
+
+// src/useNotes.ts
+import { createSignal as createSignal6 } from "solid-js";
+var useNotes = /* @__PURE__ */ __name(() => {
+  const [notes, onNotesChange] = createSignal6([]);
+  const onNoteChange = /* @__PURE__ */ __name((index, note) => {
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
+  }, "onNoteChange");
+  const onInsertNote = /* @__PURE__ */ __name((note) => {
+    const index = Math.max(
+      notes().findIndex(({ ticks }) => ticks > note.ticks),
+      0
+    );
+    onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
+    return index;
+  }, "onInsertNote");
+  const onRemoveNote = /* @__PURE__ */ __name((index) => {
+    onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
+  }, "onRemoveNote");
+  return {
+    notes,
+    onNotesChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote
+  };
+}, "useNotes");
+var useNotes_default = useNotes;
+export {
+  PianoRoll_default as PianoRoll,
+  PlayHead_default as PlayHead,
+  usePianoRollState_default as createPianoRollstate,
+  useNotes_default as useNotes
+};