solid-pianoroll 0.0.7 → 0.0.9

package/dist/source/PianoRoll.jsx

@@ -9,22 +9,23 @@ import VerticalZoomControl from "./VerticalZoomControl";
 import PianoRollGrid from "./PianoRollGrid";
 const PianoRoll = (allProps) => {
     const [contextProps, divProps] = splitProps(allProps, [
-        "ppq",
+        "condenseKeys",
+        "duration",
+        "gridDivision",
         "notes",
         "position",
-        "duration",
-        "zoom",
+        "ppq",
+        "snapToGrid",
         "verticalPosition",
         "verticalZoom",
-        "onVerticalZoomChange",
-        "onVerticalPositionChange",
-        "onZoomChange",
-        "onPositionChange",
-        "onNoteChange",
-        "gridDivision",
-        "snapToGrid",
+        "zoom",
         "onInsertNote",
+        "onNoteChange",
+        "onPositionChange",
         "onRemoveNote",
+        "onVerticalPositionChange",
+        "onVerticalZoomChange",
+        "onZoomChange",
     ]);
     const [scrollContainer, setScrollContainer] = createSignal();
     const [notesContainer, setNotesContainer] = createSignal();

package/dist/source/PianoRollContext.jsx

@@ -13,13 +13,13 @@ export const PianoRollContextProvider = (props) => {
         viewPortSize: clientRect().width,
         virtualPosition: props.position,
         virtualRange: props.duration,
-        zoom: props.zoom,
+        zoom: props.zoom * (500 / clientRect().width),
     }));
     const verticalViewPort = useViewPortScaler(() => ({
         viewPortOffset: clientRect().top,
         viewPortSize: clientRect().height,
         virtualPosition: props.verticalPosition,
-        zoom: props.verticalZoom,
+        zoom: props.verticalZoom * (500 / clientRect().height),
         virtualRange: 128,
     }));
     const getContextValue = () => {

package/dist/source/PianoRollGrid.jsx

@@ -3,10 +3,25 @@ import { usePianoRollContext } from "./PianoRollContext";
 import { blackKeys, keys } from "./PianoRollKeys";
 const PianoRollGrid = () => {
     const context = usePianoRollContext();
-    const gridDivisorTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
+    const measureTicks = createMemo(() => context.ppq * 4);
+    const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
+    function calculateVisibleGridDivisorTicks(value) {
+        if (context.horizontalViewPort.getVisibleRange() / value > 100) {
+            return calculateVisibleGridDivisorTicks(value * 2);
+        }
+        if (context.horizontalViewPort.getVisibleRange() / value < 30) {
+            return calculateVisibleGridDivisorTicks(value / 2);
+        }
+        return value;
+    }
+    const gridDivisorTicks = createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
     const gridArray = createMemo(() => {
-        const numberOfLines = context.duration / gridDivisorTicks();
-        return Array.from({ length: numberOfLines }).map((_, index) => index * gridDivisorTicks());
+        const numberOfLines = Math.ceil(context.horizontalViewPort.getVisibleRange() / gridDivisorTicks());
+        const startIndex = Math.floor(context.position / gridDivisorTicks());
+        return Array.from({ length: numberOfLines }).map((_, index) => ({
+            index: index + startIndex,
+            ticks: (index + startIndex) * gridDivisorTicks(),
+        }));
     });
     return (<div class="PianoRoll-Grid-Container" style={{
             position: "absolute",
@@ -19,19 +34,27 @@ const PianoRollGrid = () => {
             height: "100%",
         }}>
         <Index each={gridArray()}>
-          {(tick, index) => {
-            const virtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(tick(), gridDivisorTicks()));
+          {(entry) => {
+            const virtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(entry().ticks, gridDivisorTicks()));
             return (<Show when={virtualDimensions().size > 0}>
                 <div class="PianoRoll-Grid-Time" style={{
                     "z-index": 1,
                     position: "absolute",
                     "box-sizing": "border-box",
-                    background: index % 4 === 0 ? "#ccc" : "#ddd",
+                    background: Math.ceil((entry().index + 1 * selectedGridDivisorTicks()) / measureTicks()) %
+                        2 ===
+                        0
+                        ? "#ddd"
+                        : "#ccc",
                     top: `0px`,
                     height: `100%`,
                     left: `${virtualDimensions().offset}px`,
                     width: `${virtualDimensions().size}px`,
-                    "border-left": "1px gray solid",
+                    "border-left-style": "solid",
+                    "border-left-width": "0.5px",
+                    "border-left-color": (entry().index * gridDivisorTicks()) % selectedGridDivisorTicks() === 0
+                        ? "gray"
+                        : "#bbb",
                 }}></div>
               </Show>);
         }}

package/dist/source/ScrollContainer.jsx

@@ -1,5 +1,4 @@
 import { createEffect, createMemo, createSignal } from "solid-js";
-import { clamp } from "./helpers";
 import { usePianoRollContext } from "./PianoRollContext";
 const ScrollContainer = (props) => {
     let scrollContentRef;
@@ -25,8 +24,8 @@ const ScrollContainer = (props) => {
             didUpdateScroll = false;
             return;
         }
-        const maxVerticalPosition = 128 - 128 / context.verticalZoom;
-        const maxPosition = context.duration - context.duration / context.zoom;
+        const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
+        const maxPosition = context.horizontalViewPort.getMaxPosition();
         const { width, height } = context.clientRect;
         const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = event.currentTarget;
         const scrollTopAmount = scrollTop / (scrollHeight - height);
@@ -36,16 +35,16 @@ const ScrollContainer = (props) => {
     };
     let didUpdateScroll = false;
     createEffect(() => {
-        const maxVerticalPosition = 128 - 128 / context.verticalZoom;
-        const maxPosition = context.duration - context.duration / context.zoom;
+        const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
+        const maxPosition = context.horizontalViewPort.getMaxPosition();
         const scrollTopAmount = maxVerticalPosition > 0 ? context.verticalPosition / maxVerticalPosition : 0;
         const scrollLeftAmount = maxPosition > 0 ? context.position / maxPosition : 0;
         const { height, width } = context.clientRect;
         if (!scrollContentRef?.parentElement)
             return;
-        const scrollDivHeight = clamp(context.verticalZoom * height, height, 10000);
+        const scrollDivHeight = context.verticalViewPort.getScrollSize();
         const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-        const scrollDivWidth = clamp(context.zoom * width, width, 10000);
+        const scrollDivWidth = context.horizontalViewPort.getScrollSize();
         const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
         didUpdateScroll = true;
         scrollContentRef.style.height = `${scrollDivHeight}px`;

package/dist/source/usePianoRoll.js

@@ -1,31 +1,49 @@
 import { createEffect, createSignal } from "solid-js";
 const usePianoRoll = () => {
-    const [position, setPosition] = createSignal(0);
-    const [zoom, setZoom] = createSignal(10);
-    const [verticalZoom, setVerticalZoom] = createSignal(5);
-    const [verticalPosition, setVerticalPosition] = createSignal(64);
-    const [gridDivision, setGridDivision] = createSignal(16);
-    const [snapToGrid, setSnapToGrid] = createSignal(true);
-    const [notes, setNotes] = createSignal([]);
+    const [ppq, onPpqChange] = createSignal(120);
+    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 [snapToGrid, onSnapToGridChange] = createSignal(true);
+    const [notes, onNotesChange] = createSignal([]);
     const [duration, setDuration] = 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(() => {
-        setDuration((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0));
+        setDuration(Math.max((notes()[notes().length - 1]?.ticks ?? 0) +
+            (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4));
     });
     return {
+        ppq,
+        onPpqChange,
         position,
-        setPosition,
+        onPositionChange,
         zoom,
-        setZoom,
+        onZoomChange,
         verticalPosition,
-        setVerticalPosition,
+        onVerticalPositionChange,
         verticalZoom,
-        setVerticalZoom,
+        onVerticalZoomChange,
         gridDivision,
-        setGridDivision,
+        onGridDivisionChange,
         snapToGrid,
-        setSnapToGrid,
+        onSnapToGridChange,
         notes,
-        setNotes,
+        onNotesChange,
+        onNoteChange,
+        onInsertNote,
+        onRemoveNote,
         duration,
     };
 };

package/dist/source/useViewPortScaler.js

@@ -1,5 +1,4 @@
 import { createMemo } from "solid-js";
-import { clamp } from "./helpers";
 export default function useViewPortScaler(getState) {
     const state = createMemo(() => getState());
     function getScaledValue(position) {
@@ -9,12 +8,20 @@ export default function useViewPortScaler(getState) {
     function getCoordinates(position) {
         return getScaledValue(position) - getScaledValue(state().virtualPosition);
     }
+    function getVisibleRange() {
+        return state().virtualRange / state().zoom;
+    }
     function getPosition(offset) {
-        const visibleDuration = state().virtualRange / state().zoom;
         const percentX = (offset - state().viewPortOffset) / state().viewPortSize;
-        const position = state().virtualPosition + percentX * visibleDuration;
+        const position = state().virtualPosition + percentX * getVisibleRange();
         return position;
     }
+    function getMaxPosition() {
+        return state().virtualRange - state().virtualRange / state().zoom;
+    }
+    function getScrollSize() {
+        return clamp(state().zoom * state().viewPortSize, state().viewPortSize, 100000);
+    }
     function getVirtualDimensions(position, length) {
         const virtualLeft = getCoordinates(position);
         const virtualWidth = getScaledValue(length);
@@ -27,5 +34,11 @@ export default function useViewPortScaler(getState) {
         getCoordinates,
         getPosition,
         getVirtualDimensions,
+        getVisibleRange,
+        getMaxPosition,
+        getScrollSize,
     };
 }
+export const clamp = (value, min, max) => {
+    return Math.max(min, Math.min(max, value));
+};

package/dist/types/PianoRoll.d.ts

@@ -11,6 +11,7 @@ export type PianoRollProps = {
     position: number;
     duration: number;
     zoom: number;
+    condenseKeys: boolean;
     onVerticalZoomChange?: (zoom: number) => void;
     onVerticalPositionChange?: (zoom: number) => void;
     onZoomChange?: (zoom: number) => void;

package/dist/types/usePianoRoll.d.ts

@@ -1,20 +1,25 @@
 import { GridDivision } from "./PianoRoll";
 import { Note } from "./types";
 declare const usePianoRoll: () => {
+    ppq: import("solid-js").Accessor<number>;
+    onPpqChange: import("solid-js").Setter<number>;
     position: import("solid-js").Accessor<number>;
-    setPosition: import("solid-js").Setter<number>;
+    onPositionChange: import("solid-js").Setter<number>;
     zoom: import("solid-js").Accessor<number>;
-    setZoom: import("solid-js").Setter<number>;
+    onZoomChange: import("solid-js").Setter<number>;
     verticalPosition: import("solid-js").Accessor<number>;
-    setVerticalPosition: import("solid-js").Setter<number>;
+    onVerticalPositionChange: import("solid-js").Setter<number>;
     verticalZoom: import("solid-js").Accessor<number>;
-    setVerticalZoom: import("solid-js").Setter<number>;
+    onVerticalZoomChange: import("solid-js").Setter<number>;
     gridDivision: import("solid-js").Accessor<GridDivision>;
-    setGridDivision: import("solid-js").Setter<GridDivision>;
+    onGridDivisionChange: import("solid-js").Setter<GridDivision>;
     snapToGrid: import("solid-js").Accessor<boolean>;
-    setSnapToGrid: import("solid-js").Setter<boolean>;
+    onSnapToGridChange: import("solid-js").Setter<boolean>;
     notes: import("solid-js").Accessor<Note[]>;
-    setNotes: import("solid-js").Setter<Note[]>;
+    onNotesChange: import("solid-js").Setter<Note[]>;
+    onNoteChange: (index: number, note: Note) => void;
+    onInsertNote: (note: Note) => number;
+    onRemoveNote: (index: number) => void;
     duration: import("solid-js").Accessor<number>;
 };
 export default usePianoRoll;

package/dist/types/useViewPortScaler.d.ts

@@ -13,4 +13,8 @@ export default function useViewPortScaler(getState: () => {
         offset: number;
         size: number;
     };
+    getVisibleRange: () => number;
+    getMaxPosition: () => number;
+    getScrollSize: () => number;
 };
+export declare const clamp: (value: number, min: number, max: number) => number;

package/package.json

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

package/dist/source/helpers.js

@@ -1,3 +0,0 @@
-export const clamp = (value, min, max) => {
-    return Math.max(min, Math.min(max, value));
-};

package/dist/types/helpers.d.ts

@@ -1 +0,0 @@
-export declare const clamp: (value: number, min: number, max: number) => number;