solid-pianoroll 0.0.11 → 0.0.13

package/dist/source/PianoRollNotes.jsx

@@ -12,7 +12,9 @@ const PianoRollNotes = (props) => {
         : value;
     const insertOrUpdateNote = (event) => {
         const position = horizontalViewPort().calculatePosition(event.clientX);
-        const midi = 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+        const midi = context.condensed
+            ? 60
+            : 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
         const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
         const velocity = 127;
         const existingNote = newNote();
@@ -37,9 +39,11 @@ const PianoRollNotes = (props) => {
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
-    return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={() => {
+    return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={(event) => {
             console.log("down");
             setIsMouseDown(true);
+            const index = insertOrUpdateNote(event);
+            setNewNoteIndex(index);
         }} onMouseMove={(event) => {
             if (isDragging())
                 return;
@@ -48,7 +52,6 @@ const PianoRollNotes = (props) => {
                 return;
             }
             const index = insertOrUpdateNote(event);
-            console.log({ index });
             setNewNoteIndex(index);
         }} onMouseUp={(event) => {
             setIsMouseDown(false);
@@ -68,9 +71,10 @@ const PianoRollNotes = (props) => {
         }}>
       <Index each={context.notes}>
         {(note, index) => {
-            const verticalVirtualDimensionss = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
+            const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
             const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
-            return (<Show when={!!verticalVirtualDimensionss().size && !!horizontalDimensions().size}>
+            return (<Show when={(verticalViewPort().isVisible(verticalVirtualDimensions()) || context.condensed) &&
+                    horizontalViewPort().isVisible(horizontalDimensions())}>
               <div class={getClasses(noteDragMode()).join(" ")} onMouseMove={(event) => {
                     if (isDragging())
                         return;
@@ -96,7 +100,8 @@ const PianoRollNotes = (props) => {
                             diffPosition, 0), mouseMoveEvent.altKey);
                         context.onNoteChange?.(index, {
                             ...note(),
-                            ...(noteDragMode() === "move" && {
+                            ...(noteDragMode() === "move" &&
+                                !context.condensed && {
                                 midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
                             }),
                             ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
@@ -120,8 +125,12 @@ const PianoRollNotes = (props) => {
                     window.addEventListener("mouseup", handleMouseUp);
                 }} style={{
                     "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
-                    top: `${verticalVirtualDimensionss().offset}px`,
-                    height: `${verticalVirtualDimensionss().size}px`,
+                    ...(context.condensed
+                        ? { top: 0, height: "100%" }
+                        : {
+                            top: `${verticalVirtualDimensions().offset}px`,
+                            height: `${verticalVirtualDimensions().size}px`,
+                        }),
                     left: `${horizontalDimensions().offset}px`,
                     width: `${horizontalDimensions().size}px`,
                 }}></div>

package/dist/source/index.jsx

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

package/dist/source/useNotes.js

@@ -0,0 +1,23 @@
+import { createSignal } from "solid-js";
+const useNotes = () => {
+    const [notes, onNotesChange] = createSignal([]);
+    const onNoteChange = (index, note) => {
+        onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
+    };
+    const onInsertNote = (note) => {
+        const index = Math.max(notes().findIndex(({ ticks }) => ticks > note.ticks), 0);
+        onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
+        return index;
+    };
+    const onRemoveNote = (index) => {
+        onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
+    };
+    return {
+        notes,
+        onNotesChange,
+        onNoteChange,
+        onInsertNote,
+        onRemoveNote,
+    };
+};
+export default useNotes;

package/dist/source/usePianoRoll.js

@@ -1,31 +1,14 @@
-import { createEffect, createSignal } from "solid-js";
+import { createSignal } from "solid-js";
 const usePianoRoll = () => {
     const [ppq, onPpqChange] = createSignal(120);
+    const [condensed, onCondensedChange] = createSignal(false);
     const [position, onPositionChange] = createSignal(0);
     const [zoom, onZoomChange] = createSignal(10);
     const [verticalZoom, onVerticalZoomChange] = createSignal(5);
     const [verticalPosition, onVerticalPositionChange] = createSignal(64);
-    const [gridDivision, onGridDivisionChange] = createSignal(16);
+    const [gridDivision, onGridDivisionChange] = createSignal(4);
     const [snapToGrid, onSnapToGridChange] = createSignal(true);
-    const [notes, onNotesChange] = createSignal([]);
     const [duration, onDurationChange] = createSignal(0);
-    const onNoteChange = (index, note) => {
-        onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
-    };
-    const onInsertNote = (note) => {
-        const index = Math.max(notes().findIndex(({ ticks }) => ticks > note.ticks), 0);
-        onNotesChange([...notes().slice(0, index), note, ...notes().splice(index)]);
-        return index;
-    };
-    const onRemoveNote = (index) => {
-        onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
-    };
-    createEffect(() => {
-        const minDuration = Math.max((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4);
-        if (duration() < minDuration) {
-            onDurationChange(minDuration);
-        }
-    });
     return {
         ppq,
         onPpqChange,
@@ -41,11 +24,8 @@ const usePianoRoll = () => {
         onGridDivisionChange,
         snapToGrid,
         onSnapToGridChange,
-        notes,
-        onNotesChange,
-        onNoteChange,
-        onInsertNote,
-        onRemoveNote,
+        condensed,
+        onCondensedChange,
         duration,
         onDurationChange,
     };

package/dist/source/viewport/HorizontalZoomControl.jsx

@@ -4,6 +4,7 @@ const HorizontalZoomControl = (props) => {
     return (<input max="500" min="1" step={0.01} {...props} value={context.zoom} onInput={(event) => context.onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" style={{
             "margin-left": "50px",
             "margin-right": "16px",
+            ...(typeof props.style === "object" && props.style),
         }}/>);
 };
 export default HorizontalZoomControl;

package/dist/source/viewport/createViewPortDimension.js

@@ -8,6 +8,7 @@ export default function createViewPortDimension(getState) {
         calculatePixelDimensions,
         calculateVisibleRange,
         calculateMaxPosition,
+        isVisible,
     });
     const [state, setState] = createStore(getStateWithFunctions());
     createEffect(() => setState(getStateWithFunctions()));
@@ -34,6 +35,9 @@ export default function createViewPortDimension(getState) {
         const size = calculatePixelValue(length);
         return { offset, size };
     }
+    function isVisible({ offset, size }) {
+        return offset + size > 0 && offset < state.pixelSize;
+    }
     return state;
 }
 export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));

package/dist/types/MultiTrackPianoRoll.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from "solid-js";
+import { TrackJSON } from "@tonejs/midi";
+import { PianoRollProps } from "./PianoRoll";
+export type MultiTrackPianoRollProps = Omit<PianoRollProps, "notes" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "condensed"> & {
+    tracks: TrackJSON[];
+    selectedTrack?: TrackJSON;
+    onSelectedTrackChange: (track?: TrackJSON) => void;
+} & JSX.IntrinsicElements["div"];
+declare const MultiTrackPianoRoll: (allProps: MultiTrackPianoRollProps) => JSX.Element;
+export default MultiTrackPianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -1,3 +1,4 @@
 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) => [Pick<PianoRollProps, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">, Omit<PianoRollProps, "position" | "condensed" | "zoom" | "onZoomChange" | "onPositionChange" | "notes" | "duration" | "gridDivision" | "ppq" | "snapToGrid" | "verticalPosition" | "verticalZoom" | "onInsertNote" | "onNoteChange" | "onRemoveNote" | "onVerticalPositionChange" | "onVerticalZoomChange">];

package/dist/types/index.d.ts

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

package/dist/types/useNotes.d.ts

@@ -0,0 +1,9 @@
+import { Note } from "./types";
+declare const useNotes: () => {
+    notes: import("solid-js").Accessor<Note[]>;
+    onNotesChange: import("solid-js").Setter<Note[]>;
+    onNoteChange: (index: number, note: Note) => void;
+    onInsertNote: (note: Note) => number;
+    onRemoveNote: (index: number) => void;
+};
+export default useNotes;

package/dist/types/usePianoRoll.d.ts

@@ -1,5 +1,4 @@
 import { GridDivision } from "./PianoRoll";
-import { Note } from "./types";
 declare const usePianoRoll: () => {
     ppq: import("solid-js").Accessor<number>;
     onPpqChange: import("solid-js").Setter<number>;
@@ -15,11 +14,8 @@ declare const usePianoRoll: () => {
     onGridDivisionChange: import("solid-js").Setter<GridDivision>;
     snapToGrid: import("solid-js").Accessor<boolean>;
     onSnapToGridChange: import("solid-js").Setter<boolean>;
-    notes: import("solid-js").Accessor<Note[]>;
-    onNotesChange: import("solid-js").Setter<Note[]>;
-    onNoteChange: (index: number, note: Note) => void;
-    onInsertNote: (note: Note) => number;
-    onRemoveNote: (index: number) => void;
+    condensed: import("solid-js").Accessor<boolean>;
+    onCondensedChange: import("solid-js").Setter<boolean>;
     duration: import("solid-js").Accessor<number>;
     onDurationChange: import("solid-js").Setter<number>;
 };

package/dist/types/viewport/ScrollZoomViewPort.d.ts

@@ -12,6 +12,10 @@ export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
     };
     calculateVisibleRange: () => number;
     calculateMaxPosition: () => number;
+    isVisible: ({ offset, size }: {
+        offset: number;
+        size: number;
+    }) => boolean;
     position: number;
     range: number;
     pixelOffset: number;

package/dist/types/viewport/createViewPortDimension.d.ts

@@ -19,6 +19,10 @@ export default function createViewPortDimension(getState: () => ViewPortDimensio
     };
     calculateVisibleRange: () => number;
     calculateMaxPosition: () => number;
+    isVisible: ({ offset, size }: {
+        offset: number;
+        size: number;
+    }) => boolean;
     position: number;
     range: number;
     pixelOffset: number;

package/package.json

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