solid-pianoroll 0.0.14 → 0.0.16

package/dist/source/PianoRollKeys.jsx

@@ -1,23 +1,42 @@
 import styles from "./PianoRollKeys.module.css";
-import { createMemo, Index, Show } from "solid-js";
+import { createMemo, createSignal, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 const PianoRollKeys = () => {
     const viewPort = createMemo(() => useViewPortDimension("vertical"));
     return (<div class={styles.PianoRollKeys}>
       <Index each={keys}>
         {(key) => {
+            const [isDown, setIsDown] = createSignal(false);
             const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
+            const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
+            const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
             return (<Show when={virtualDimensions().size > 0}>
               <div classList={{
                     [styles["Key"]]: true,
                     [styles["black"]]: key().isBlack,
                     [styles["white"]]: !key().isBlack,
-                    [styles["whiteAndNextIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number + 1) % 12),
-                    [styles["whiteAndPreviousIsWhite"]]: !key().isBlack && !blackKeys.includes((key().number - 1) % 12),
-                }} title={key().name} data-index={key().number % 12} style={{
+                    [styles["down"]]: isDown(),
+                }} onMouseDown={() => setIsDown(true)} onMouseUp={() => setIsDown(false)} title={key().name} data-index={key().number % 12} style={{
+                    top: `${virtualDimensions().offset -
+                        (!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 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`,
+                    ]
+                        .filter((item) => !!item)
+                        .join(", "),
+                }}>
+                <Show when={key().isBlack && false}>
+                  <div class={styles["black-separator"]} style={{
                     top: `${virtualDimensions().offset}px`,
-                    height: `${virtualDimensions().size}px`,
+                    height: `${virtualDimensions().size / 2 - 0.25}px`,
                 }}></div>
+                </Show>
+              </div>
             </Show>);
         }}
       </Index>

package/dist/source/PianoRollNotes.jsx

@@ -1,4 +1,4 @@
-import { createMemo, createSignal, Index, Show } from "solid-js";
+import { batch, createMemo, createSignal, For, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import styles from "./PianoRollNotes.module.scss";
@@ -12,38 +12,44 @@ const PianoRollNotes = (props) => {
         : value;
     const insertOrUpdateNote = (event) => {
         const position = horizontalViewPort().calculatePosition(event.clientX);
-        const midi = context.condensed
-            ? 60
-            : 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+        const existingNote = currentNote();
+        const midi = context.mode === "keys"
+            ? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
+            : existingNote?.midi ?? 60;
+        const targetTrackIndex = context.mode === "tracks"
+            ? Math.floor(verticalViewPort().calculatePosition(event.clientY))
+            : context.selectedTrackIndex ?? 0;
         const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
         const velocity = 127;
-        const existingNote = newNote();
         const ticks = existingNote?.ticks ?? eventPositionTicks;
         const durationTicks = existingNote?.ticks
             ? eventPositionTicks - existingNote?.ticks
             : gridDivisionTicks();
         const note = { midi, ticks, durationTicks, velocity };
         if (existingNote) {
-            context.onNoteChange?.(newNoteIndex(), note);
-            return newNoteIndex();
+            context.onNoteChange?.(currentNoteTrackIndex(), currentNoteIndex(), note);
+            return currentNoteIndex();
         }
         else {
-            return context.onInsertNote?.(note) ?? -1;
+            return context.onInsertNote?.(targetTrackIndex, note) ?? -1;
         }
     };
     const [isDragging, setIsDragging] = createSignal(false);
     const [noteDragMode, setNoteDragMode] = createSignal();
-    const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
+    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
+    const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
     const [isMouseDown, setIsMouseDown] = createSignal(false);
-    const newNote = createMemo(() => context.notes[newNoteIndex()]);
+    const currentNote = createMemo(() => context.tracks[currentNoteTrackIndex()]?.notes[currentNoteIndex()]);
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
     return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={(event) => {
-            console.log("down");
-            setIsMouseDown(true);
-            const index = insertOrUpdateNote(event);
-            setNewNoteIndex(index);
+            batch(() => {
+                setIsMouseDown(true);
+                const index = insertOrUpdateNote(event);
+                setCurrentNoteTrackIndex(context.selectedTrackIndex ?? 0);
+                setCurrentNoteIndex(index);
+            });
         }} onMouseMove={(event) => {
             if (isDragging())
                 return;
@@ -52,7 +58,7 @@ const PianoRollNotes = (props) => {
                 return;
             }
             const index = insertOrUpdateNote(event);
-            setNewNoteIndex(index);
+            setCurrentNoteIndex(index);
         }} onMouseUp={(event) => {
             setIsMouseDown(false);
             if (!event.altKey)
@@ -61,82 +67,112 @@ const PianoRollNotes = (props) => {
         }} onDblClick={(event) => {
             insertOrUpdateNote(event);
         }} onClick={(event) => {
-            if (newNote()) {
-                setNewNoteIndex(-1);
+            if (currentNote()) {
+                setCurrentNoteIndex(-1);
                 return;
             }
             if (!event.altKey)
                 return;
             insertOrUpdateNote(event);
         }}>
-      <Index each={context.notes}>
-        {(note, index) => {
-            const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
-            const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
-            return (<Show when={(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed) &&
-                    horizontalViewPort().isVisible(horizontalDimensions())}>
-              <div class={getClasses(noteDragMode()).join(" ")} 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?.(index);
-                }} onMouseDown={(event) => {
-                    event.stopPropagation();
-                    setIsDragging(true);
-                    const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
-                    const diffPosition = initialPosition - note().ticks;
-                    const handleMouseMove = (mouseMoveEvent) => {
-                        const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
-                            diffPosition, 0), mouseMoveEvent.altKey);
-                        context.onNoteChange?.(index, {
-                            ...note(),
-                            ...(noteDragMode() === "move" &&
-                                !context.condensed && {
-                                midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
-                            }),
-                            ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
-                                ticks,
-                            }),
-                            ...(noteDragMode() === "trimStart" && {
-                                durationTicks: note().durationTicks + note().ticks - ticks,
-                            }),
-                            ...(noteDragMode() === "trimEnd" && {
-                                durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
-                                    note().ticks, mouseMoveEvent.altKey),
-                            }),
-                        });
-                    };
-                    const handleMouseUp = () => {
-                        setIsDragging(false);
-                        window.removeEventListener("mousemove", handleMouseMove);
-                        window.removeEventListener("mouseup", handleMouseUp);
-                    };
-                    window.addEventListener("mousemove", handleMouseMove);
-                    window.addEventListener("mouseup", handleMouseUp);
-                }} style={{
-                    "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
-                    ...(context.condensed
-                        ? { top: 0, height: "100%" }
-                        : {
+      <For each={context.tracks}>
+        {(track, trackIndex) => {
+            return (<Show when={trackIndex() === context.selectedTrackIndex ||
+                    context.showAllTracks ||
+                    context.mode === "tracks"}>
+              <For each={track.notes}>
+                {(note, noteIndex) => {
+                    const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(context.mode === "keys" ? 127 - note.midi : trackIndex(), 1));
+                    const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks));
+                    return (<Show 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();
+                            setIsDragging(true);
+                            setCurrentNoteIndex(noteIndex());
+                            setCurrentNoteTrackIndex(trackIndex());
+                            const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
+                            const diffPosition = initialPosition - note.ticks;
+                            const handleMouseMove = (mouseMoveEvent) => {
+                                const note = currentNote();
+                                if (!note)
+                                    return;
+                                const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
+                                    diffPosition, 0), mouseMoveEvent.altKey);
+                                const updatedNote = {
+                                    ...note,
+                                    ...(noteDragMode() === "move" &&
+                                        context.mode === "keys" && {
+                                        midi: Math.round(127 -
+                                            verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
+                                    }),
+                                    ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
+                                        ticks,
+                                    }),
+                                    ...(noteDragMode() === "trimStart" && {
+                                        durationTicks: note.durationTicks + note.ticks - ticks,
+                                    }),
+                                    ...(noteDragMode() === "trimEnd" && {
+                                        durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
+                                            note.ticks, mouseMoveEvent.altKey),
+                                    }),
+                                };
+                                const previousTrackIndex = currentNoteTrackIndex();
+                                const previousNoteIndex = currentNoteIndex();
+                                const targetTrackIndex = context.mode === "tracks"
+                                    ? Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY))
+                                    : previousTrackIndex;
+                                if (targetTrackIndex === previousTrackIndex) {
+                                    context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
+                                }
+                                else {
+                                    batch(() => {
+                                        if (context.onInsertNote) {
+                                            context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
+                                            const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
+                                            setCurrentNoteTrackIndex(targetTrackIndex);
+                                            setCurrentNoteIndex(newNoteIndex);
+                                        }
+                                    });
+                                }
+                            };
+                            const handleMouseUp = () => {
+                                setIsDragging(false);
+                                setCurrentNoteIndex(-1);
+                                setCurrentNoteTrackIndex(-1);
+                                window.removeEventListener("mousemove", handleMouseMove);
+                                window.removeEventListener("mouseup", handleMouseUp);
+                            };
+                            window.addEventListener("mousemove", handleMouseMove);
+                            window.addEventListener("mouseup", handleMouseUp);
+                        }} style={{
+                            "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
                             top: `${verticalVirtualDimensions().offset}px`,
                             height: `${verticalVirtualDimensions().size}px`,
-                        }),
-                    left: `${horizontalDimensions().offset}px`,
-                    width: `${horizontalDimensions().size}px`,
-                }}></div>
+                            left: `${horizontalDimensions().offset}px`,
+                            width: `${horizontalDimensions().size}px`,
+                        }}></div>
+                    </Show>);
+                }}
+              </For>
             </Show>);
         }}
-      </Index>
+      </For>
     </div>);
 };
 export default PianoRollNotes;

package/dist/source/PianoRollTrackList.jsx

@@ -0,0 +1,28 @@
+import styles from "./PianoRollTrackList.module.css";
+import { createMemo, Index, Show } from "solid-js";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import { usePianoRollContext } from "./PianoRollContext";
+const PianoRollTrackList = () => {
+    const viewPort = createMemo(() => useViewPortDimension("vertical"));
+    const context = usePianoRollContext();
+    return (<div class={styles.PianoRollTrackList}>
+      <Index each={context.tracks}>
+        {(track, index) => {
+            const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(context.mode === "tracks" ? index : index * 8, context.mode === "tracks" ? 1 : 8));
+            return (<Show when={virtualDimensions().size > 0}>
+              <div classList={{
+                    [styles["Track"]]: true,
+                }} title={track().name} style={{
+                    top: `${virtualDimensions().offset}px`,
+                    height: `${virtualDimensions().size}px`,
+                    background: index === context.selectedTrackIndex ? "gray" : "lightgrey",
+                    cursor: "pointer",
+                }} onClick={() => context.onSelectedTrackIndexChange?.(index)}>
+                {index} {track().name || "[unnamed track]"}
+              </div>
+            </Show>);
+        }}
+      </Index>
+    </div>);
+};
+export default PianoRollTrackList;

package/dist/source/index.jsx

@@ -1,6 +1,5 @@
-import MultiTrackPianoRoll from "./MultiTrackPianoRoll";
 import PianoRoll from "./PianoRoll";
 import PlayHead from "./PlayHead";
 import useNotes from "./useNotes";
 import usePianoRoll from "./usePianoRoll";
-export { PianoRoll, MultiTrackPianoRoll, usePianoRoll, useNotes, PlayHead };
+export { PianoRoll, usePianoRoll, useNotes, PlayHead };

package/dist/source/usePianoRoll.js

@@ -1,11 +1,11 @@
 import { createSignal } from "solid-js";
 const usePianoRoll = () => {
     const [ppq, onPpqChange] = createSignal(120);
-    const [condensed, onCondensedChange] = createSignal(false);
+    const [mode, onModeChange] = createSignal("tracks");
     const [position, onPositionChange] = createSignal(0);
     const [zoom, onZoomChange] = createSignal(10);
     const [verticalZoom, onVerticalZoomChange] = createSignal(5);
-    const [verticalPosition, onVerticalPositionChange] = createSignal(64);
+    const [verticalPosition, onVerticalPositionChange] = createSignal(44);
     const [gridDivision, onGridDivisionChange] = createSignal(4);
     const [snapToGrid, onSnapToGridChange] = createSignal(true);
     const [duration, onDurationChange] = createSignal(0);
@@ -24,8 +24,8 @@ const usePianoRoll = () => {
         onGridDivisionChange,
         snapToGrid,
         onSnapToGridChange,
-        condensed,
-        onCondensedChange,
+        mode,
+        onModeChange,
         duration,
         onDurationChange,
     };

package/dist/types/PianoRoll.d.ts

@@ -1,12 +1,15 @@
 import { JSX, ParentProps } from "solid-js";
-import { Note } from "./types";
+import { Note, Track } from "./types";
 export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
     ppq: number;
-    notes: Note[];
+    tracks: Track[];
     gridDivision: GridDivision;
     snapToGrid: boolean;
-    condensed?: boolean;
+    mode: "keys" | "tracks";
+    showAllTracks?: boolean;
+    showTrackList?: boolean;
+    selectedTrackIndex: number;
     verticalPosition: number;
     verticalZoom: number;
     position: number;
@@ -16,9 +19,10 @@ export type PianoRollProps = {
     onVerticalPositionChange?: (zoom: number) => void;
     onZoomChange?: (zoom: number) => void;
     onPositionChange?: (zoom: number) => void;
-    onNoteChange?: (index: number, note: Note) => void;
-    onInsertNote?: (note: Note) => number;
-    onRemoveNote?: (index: number) => void;
+    onNoteChange?: (trackIndex: number, noteIndex: number, note: Note) => void;
+    onInsertNote?: (trackIndex: number, note: Note) => number;
+    onRemoveNote?: (trackIndex: number, noteIndex: number) => void;
+    onSelectedTrackIndexChange?: (trackIndex: number) => void;
 };
 declare const PianoRoll: (allProps: ParentProps<PianoRollProps & JSX.IntrinsicElements["div"]>) => JSX.Element;
 export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -2,4 +2,4 @@ import { JSX } from "solid-js";
 import { PianoRollProps } from "./PianoRoll";
 export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<PianoRollProps>;
 export declare const usePianoRollContext: () => PianoRollProps;
-export declare const splitContextProps: (allProps: PianoRollProps & JSX.IntrinsicElements["div"]) => [Pick<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">, Omit<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">];
+export declare const splitContextProps: (allProps: PianoRollProps & JSX.IntrinsicElements["div"]) => [Pick<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "zoom" | "mode" | "duration" | "gridDivision" | "tracks" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onPositionChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange" | "onZoomChange" | "showAllTracks" | "selectedTrackIndex" | "onSelectedTrackIndexChange">, Omit<PianoRollProps & JSX.HTMLAttributes<HTMLDivElement>, "position" | "zoom" | "mode" | "duration" | "gridDivision" | "tracks" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onPositionChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange" | "onZoomChange" | "showAllTracks" | "selectedTrackIndex" | "onSelectedTrackIndexChange">];

package/dist/types/PianoRollTrackList.d.ts

@@ -0,0 +1,2 @@
+declare const PianoRollTrackList: () => import("solid-js").JSX.Element;
+export default PianoRollTrackList;

package/dist/types/index.d.ts

@@ -1,6 +1,5 @@
-import MultiTrackPianoRoll from "./MultiTrackPianoRoll";
 import PianoRoll from "./PianoRoll";
 import PlayHead from "./PlayHead";
 import useNotes from "./useNotes";
 import usePianoRoll from "./usePianoRoll";
-export { PianoRoll, MultiTrackPianoRoll, usePianoRoll, useNotes, PlayHead };
+export { PianoRoll, usePianoRoll, useNotes, PlayHead };

package/dist/types/usePianoRoll.d.ts

@@ -14,8 +14,8 @@ declare const usePianoRoll: () => {
     onGridDivisionChange: import("solid-js").Setter<GridDivision>;
     snapToGrid: import("solid-js").Accessor<boolean>;
     onSnapToGridChange: import("solid-js").Setter<boolean>;
-    condensed: import("solid-js").Accessor<boolean>;
-    onCondensedChange: import("solid-js").Setter<boolean>;
+    mode: import("solid-js").Accessor<"keys" | "tracks">;
+    onModeChange: import("solid-js").Setter<"keys" | "tracks">;
     duration: import("solid-js").Accessor<number>;
     onDurationChange: import("solid-js").Setter<number>;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.14",
+  "version": "0.0.16",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",

package/dist/source/MultiTrackPianoRoll.jsx

@@ -1,156 +0,0 @@
-import { createSignal, mergeProps, createMemo, Index, createEffect, splitProps, Show, } from "solid-js";
-import styles from "./PianoRoll.module.css";
-import HorizontalZoomControl from "./viewport/HorizontalZoomControl";
-import { PianoRollContextProvider, splitContextProps } from "./PianoRollContext";
-import PianoRollNotes from "./PianoRollNotes";
-import ScrollContainer from "./viewport/ScrollContainer";
-import PianoRollGrid from "./PianoRollGrid";
-import useNotes from "./useNotes";
-import useBoundingClientRect from "./useBoundingClientRect";
-import { ScrollZoomViewPort, useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-import { clamp } from "./viewport/createViewPortDimension";
-import { createStore } from "solid-js/store";
-import PianoRollKeys from "./PianoRollKeys";
-import VerticalZoomControl from "./viewport/VerticalZoomControl";
-const MultiTrackPianoRoll = (allProps) => {
-    const selectedTrack = createMemo(() => allProps.tracks[allProps.selectedTrackIndex]);
-    const condensed = createMemo(() => !selectedTrack());
-    const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrackIndex"]);
-    const [contextProps, divProps] = splitContextProps(mergeProps(restProps, {
-        notes: [],
-        condensed: false,
-        onNoteChange: () => undefined,
-        onInsertNote: () => -1,
-        onRemoveNote: () => undefined,
-    }));
-    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 (<div {...divProps} style={{
-            display: "flex",
-            flex: 1,
-            height: "100%",
-            "flex-direction": "row",
-            overflow: "hidden",
-            ...(typeof divProps.style === "object" && divProps.style),
-        }}>
-      <PianoRollContextProvider value={{ ...contextProps }}>
-        <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())),
-            }),
-        }}>
-          <div style={{
-            width: "250px",
-            display: "flex",
-            "flex-direction": "row",
-        }}>
-            <ul style={{
-            "margin-block-start": 0,
-            "padding-inline-start": 0,
-            flex: 1,
-            position: "relative",
-        }}>
-              <Index each={allProps.tracks}>
-                {(track, noteIndex) => (<li style={{
-                width: "100%",
-                height: "30px",
-                "list-style": "none",
-                display: "flex",
-                "align-items": "center",
-                "border-top": "1px black solid",
-                background: noteIndex === allProps.selectedTrackIndex ? "lightgray" : "none",
-                cursor: "pointer",
-            }} onClick={() => {
-                if (noteIndex === allProps.selectedTrackIndex) {
-                    allProps.onSelectedTrackIndexChange(-1);
-                }
-                else {
-                    allProps.onSelectedTrackIndexChange(noteIndex);
-                }
-            }}>
-                    {track().name}
-                  </li>)}
-              </Index>
-            </ul>
-            <Show when={!condensed()}>
-              <PianoRollKeys />
-            </Show>
-          </div>
-
-          <div class={styles.PianoRoll} style={{ flex: 1 }}>
-            <div class={styles.PianoRollContainer}>
-              <ScrollContainer ref={setScrollerRef}>
-                {allProps.children}
-                <ul style={{
-            margin: 0,
-            "margin-block-start": 0,
-            "padding-inline-start": 0,
-        }}>
-                  <Index each={allProps.tracks}>
-                    {(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 (<Show when={condensed() || allProps.selectedTrackIndex === trackIndex}>
-                          <PianoRollContextProvider value={context}>
-                            <li style={{
-                    display: "flex",
-                    position: "relative",
-                    "list-style": "none",
-                    "flex-direction": "row",
-                    height: condensed() ? "30px" : `${verticalViewPort.pixelSize}px`,
-                    "border-top": "1px black solid",
-                }}>
-                              <PianoRollNotes />
-                              <PianoRollGrid />
-                            </li>
-                          </PianoRollContextProvider>
-                        </Show>);
-        }}
-                  </Index>
-                </ul>
-              </ScrollContainer>
-              <Show when={!condensed()}>
-                <VerticalZoomControl value={contextProps.verticalZoom} onInput={(event) => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)}/>
-              </Show>
-            </div>
-            <HorizontalZoomControl style={{ width: "100%", "margin-left": 0 }} value={contextProps.zoom} onInput={(event) => contextProps.onZoomChange?.(event.currentTarget.valueAsNumber)}/>
-          </div>
-        </ScrollZoomViewPort>
-      </PianoRollContextProvider>
-    </div>);
-};
-export default MultiTrackPianoRoll;

package/dist/types/MultiTrackPianoRoll.d.ts

@@ -1,13 +0,0 @@
-import { JSX, ParentProps } from "solid-js";
-import { PianoRollProps } from "./PianoRoll";
-import { Note, Track } from "./types";
-export type MultiTrackPianoRollProps = Omit<PianoRollProps, "condensed" | "notes" | "onNoteChange" | "onInsertNote" | "onRemoveNote"> & {
-    tracks: Track[];
-    selectedTrackIndex: number;
-    onSelectedTrackIndexChange: (trackIndex: number) => void;
-    onNoteChange?: (trackIndex: number, index: number, note: Note) => void;
-    onInsertNote?: (trackIndex: number, note: Note) => number;
-    onRemoveNote?: (trackIndex: number, index: number) => void;
-} & JSX.IntrinsicElements["div"];
-declare const MultiTrackPianoRoll: (allProps: ParentProps<MultiTrackPianoRollProps>) => JSX.Element;
-export default MultiTrackPianoRoll;