solid-pianoroll 0.0.13 → 0.0.14

package/dist/source/PianoRollGrid.jsx

@@ -10,10 +10,13 @@ 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;

package/dist/source/PlayHead.jsx

@@ -0,0 +1,47 @@
+import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
+import { clamp } from "./viewport/createViewPortDimension";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+const PlayHead = (allProps) => {
+    const propsWithDefauls = mergeProps({ 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 (<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 = ({ 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);
+        }}/>);
+};
+export default PlayHead;

package/dist/source/index.jsx

@@ -1,5 +1,6 @@
 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 };
+export { PianoRoll, MultiTrackPianoRoll, usePianoRoll, useNotes, PlayHead };

package/dist/source/viewport/createViewPortDimension.js

@@ -3,6 +3,7 @@ import { createStore } from "solid-js/store";
 export default function createViewPortDimension(getState) {
     const getStateWithFunctions = () => ({
         ...getState(),
+        calculatePixelOffset,
         calculatePixelValue,
         calculatePosition,
         calculatePixelDimensions,

package/dist/types/MultiTrackPianoRoll.d.ts

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

package/dist/types/PianoRoll.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { JSX, ParentProps } from "solid-js";
 import { Note } from "./types";
 export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
 export type PianoRollProps = {
@@ -20,5 +20,5 @@ export type PianoRollProps = {
     onInsertNote?: (note: Note) => number;
     onRemoveNote?: (index: number) => void;
 };
-declare const PianoRoll: (allProps: PianoRollProps & JSX.IntrinsicElements["div"]) => JSX.Element;
+declare const PianoRoll: (allProps: ParentProps<PianoRollProps & JSX.IntrinsicElements["div"]>) => JSX.Element;
 export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -1,4 +1,5 @@
+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) => [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">];
+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">];

package/dist/types/PlayHead.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from "solid-js";
+declare const PlayHead: (allProps: {
+    playHeadPosition?: number;
+    sync?: boolean;
+    onPlayHeadPositionChange?: (playHeadPosition: number) => void;
+    onPositionChange?: (position: number) => void;
+} & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export default PlayHead;

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 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 };
+export { PianoRoll, MultiTrackPianoRoll, usePianoRoll, useNotes, PlayHead };

package/dist/types/types.d.ts

@@ -1,2 +1,6 @@
 import { Midi } from "@tonejs/midi";
 export type Note = Pick<ReturnType<Midi["tracks"][number]["notes"][number]["toJSON"]>, "durationTicks" | "midi" | "ticks" | "velocity">;
+export type Track = {
+    name: string;
+    notes: Note[];
+};

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

@@ -4,6 +4,7 @@ export declare const ScrollZoomViewPort: (props: ParentProps<{
     dimensions: Record<ViewPortDimensionName, () => Omit<ViewPortDimensionState, "name">>;
 }>) => import("solid-js").JSX.Element;
 export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
+    calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
     calculatePixelDimensions: (position: number, length: number) => {

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

@@ -11,6 +11,7 @@ export type ViewPortDimensionState = {
     zoom: number;
 };
 export default function createViewPortDimension(getState: () => ViewPortDimensionState): {
+    calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
     calculatePixelDimensions: (position: number, length: number) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.13",
+  "version": "0.0.14",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -44,7 +44,8 @@
     "typecheck": "tsc --noEmit"
   },
   "optionalDependencies": {
-    "@tonejs/midi": "^2.0.28"
+    "@tonejs/midi": "^2.0.28",
+    "tone": "^14.7.77"
   },
   "peerDependencies": {
     "solid-js": ">=1.0.0"