solid-pianoroll 0.0.18 → 0.0.20

package/dist/source/PianoRoll.jsx

@@ -1,97 +1,89 @@
 import styles from "./PianoRoll.module.css";
-import { createSignal, createMemo, createEffect, Show, mergeProps, } from "solid-js";
+import { createSignal, Show, mergeProps } from "solid-js";
 import { PianoRollContextProvider, splitContextProps } from "./PianoRollContext";
 import PianoRollKeys from "./PianoRollKeys";
 import PianoRollNotes from "./PianoRollNotes";
-import ScrollContainer from "./viewport/ScrollContainer";
+import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
 import PianoRollGrid from "./PianoRollGrid";
 import { ScrollZoomViewPort as ScrollZoomViewPort } from "./viewport/ScrollZoomViewPort";
 import useBoundingClientRect from "./useBoundingClientRect";
-import { clamp } from "./viewport/createViewPortDimension";
-import VerticalZoomControl from "./viewport/VerticalZoomControl";
-import HorizontalZoomControl from "./viewport/HorizontalZoomControl";
+import ZoomSliderControl from "./viewport/ZoomSliderControl";
 import PianoRollTrackList from "./PianoRollTrackList";
 const PianoRoll = (allProps) => {
     const propsWithDefaults = mergeProps({ showAllTracks: false }, allProps);
     const [context, divProps] = splitContextProps(propsWithDefaults);
-    const [scrollerRef, setScrollerRef] = createSignal();
-    const [trackScrollerRef, setTrackScrollerRef] = createSignal();
-    const clientRect = useBoundingClientRect(scrollerRef);
-    const trackClientRef = useBoundingClientRect(trackScrollerRef);
+    const [notesScrollerRef, setNotesScrollerRef] = createSignal();
+    const [tracksScrollerRef, setTracksScrollerRef] = createSignal();
+    const notesScrollerClientRect = useBoundingClientRect(notesScrollerRef);
+    const tracksScrollerClientRect = useBoundingClientRect(tracksScrollerRef);
     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));
-    const minVerticalTracksZoom = createMemo(() => 0.8 / (zoomFactor / trackClientRef().height));
-    const maxVerticalTracksZoom = createMemo(() => 3 * (zoomFactor / trackClientRef().height));
-    createEffect((isInitial) => {
-        if (isInitial)
-            return false;
-        if (context.mode === "tracks") {
-            context.onVerticalPositionChange?.(0);
-        }
-    }, true);
     return (<PianoRollContextProvider value={context}>
       <div {...divProps} class={styles.PianoRoll}>
         <ScrollZoomViewPort dimensions={{
             horizontal: () => ({
-                pixelOffset: clientRect().left,
-                pixelSize: clientRect().width,
+                pixelOffset: notesScrollerClientRect().left,
+                pixelSize: notesScrollerClientRect().width,
                 position: context.position,
                 range: context.duration,
-                zoom: context.zoom * (zoomFactor / clientRect().width),
+                zoom: context.zoom * (zoomFactor / notesScrollerClientRect().width),
                 onPositionChange: context.onPositionChange,
-                onZoomChange: (zoom) => context.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom())),
+                onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / notesScrollerClientRect().width)),
+                minZoom: 1,
+                maxZoom: 500,
             }),
             vertical: () => ({
-                pixelOffset: clientRect().top,
-                pixelSize: clientRect().height,
+                pixelOffset: notesScrollerClientRect().top,
+                pixelSize: notesScrollerClientRect().height,
                 position: context.verticalPosition,
                 range: 128,
-                zoom: context.verticalZoom * (zoomFactor / clientRect().height),
+                zoom: context.verticalZoom * (zoomFactor / notesScrollerClientRect().height),
                 onPositionChange: context.onVerticalPositionChange,
-                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom())),
+                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / notesScrollerClientRect().height)),
+                minZoom: 1,
+                maxZoom: 10,
             }),
             horizontalTracks: () => ({
-                pixelOffset: clientRect().left,
-                pixelSize: clientRect().width,
-                position: 0,
-                range: 1,
-                zoom: 1,
+                pixelOffset: 0,
+                pixelSize: tracksScrollerClientRect().width,
             }),
             verticalTracks: () => ({
-                pixelOffset: trackClientRef().top,
-                pixelSize: trackClientRef().height,
+                pixelOffset: tracksScrollerClientRect().top,
+                pixelSize: tracksScrollerClientRect().height,
                 position: context.verticalTrackPosition,
                 range: context.tracks.length,
-                zoom: context.verticalTrackZoom * (zoomFactor / trackClientRef().height),
+                zoom: context.verticalTrackZoom * (zoomFactor / tracksScrollerClientRect().height),
                 onPositionChange: context.onVerticalTrackPositionChange,
-                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(clamp(verticalTrackZoom / (zoomFactor / trackClientRef().height), minVerticalTracksZoom(), maxVerticalTracksZoom())),
+                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / tracksScrollerClientRect().height)),
+                minZoom: 0.8,
+                maxZoom: 3,
             }),
+            horizontalKeys: () => ({ pixelSize: 60 }),
         }}>
           <div class={styles.PianoRollContainer}>
-            <VerticalZoomControl min={minVerticalTracksZoom()} max={maxVerticalTracksZoom()} dimensionName="verticalTracks"/>
-            <div style={{ display: "flex", width: "20%" }}>
+            <ZoomSliderControl orientation="vertical" dimensionName="verticalTracks"/>
+            <div style={{ display: "flex", width: "30%", "max-width": "250px" }}>
               <Show when={context.showTrackList}>
-                <ScrollContainer ref={setTrackScrollerRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
+                <ScrollZoomContainer ref={setTracksScrollerRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
                   <PianoRollTrackList />
-                </ScrollContainer>
+                </ScrollZoomContainer>
               </Show>
               <Show when={context.mode === "keys"}>
                 <PianoRollKeys />
               </Show>
             </div>
 
-            <ScrollContainer ref={setScrollerRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
+            <ScrollZoomContainer ref={setNotesScrollerRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
               {allProps.children}
               <PianoRollGrid />
               <PianoRollNotes />
-            </ScrollContainer>
+            </ScrollZoomContainer>
 
-            <VerticalZoomControl min={minVerticalZoom()} max={maxVerticalZoom()} disabled={context.mode !== "keys"}/>
+            <ZoomSliderControl orientation="vertical" disabled={context.mode !== "keys"}/>
           </div>
-          <HorizontalZoomControl min={minZoom()} max={maxZoom()}/>
+          <ZoomSliderControl orientation="horizontal" style={{
+            "margin-left": `${tracksScrollerClientRect().width + 24}px`,
+            "margin-right": "24px",
+        }}/>
         </ScrollZoomViewPort>
       </div>
     </PianoRollContextProvider>);

package/dist/source/PianoRollKeys.jsx

@@ -2,9 +2,10 @@ import styles from "./PianoRollKeys.module.css";
 import { createEffect, createMemo, createSignal, Index, Show } from "solid-js";
 import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
 import { usePianoRollContext } from "./PianoRollContext";
-import ScrollContainer from "./viewport/ScrollContainer";
+import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
 const PianoRollKeys = () => {
-    const viewPort = createMemo(() => useViewPortDimension("vertical"));
+    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontalKeys"));
     const [isMouseDown, setIsMouseDown] = createSignal(false);
     const context = usePianoRollContext();
     const handleMouseUp = () => {
@@ -18,9 +19,10 @@ const PianoRollKeys = () => {
             window.removeEventListener("mouseup", handleMouseUp);
         }
     });
-    return (<ScrollContainer classList={{ [styles.PianoRollKeys]: true }} showScrollbar={false}>
-      <Index each={keys}>
-        {(key) => {
+    return (<div class={styles.PianoRollKeys} style={{ width: `${horizontalViewPort().pixelSize}px` }}>
+      <ScrollZoomContainer horizontalDimensionName="horizontalKeys" showScrollbar={false}>
+        <Index each={keys}>
+          {(key) => {
             const isDown = createMemo(() => context.pressedKeys.includes(key().number));
             const handleKeyDown = () => {
                 context.onPressedKeysChange?.([...context.pressedKeys, key().number]);
@@ -28,11 +30,11 @@ const PianoRollKeys = () => {
             const handleKeyUp = () => {
                 context.onPressedKeysChange?.([...context.pressedKeys].filter((number) => number !== key().number));
             };
-            const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(127 - key().number, 1));
+            const virtualDimensions = createMemo(() => 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={virtualDimensions().size > 0}>
-              <div classList={{
+                <div classList={{
                     [styles["Key"]]: true,
                     [styles["black"]]: key().isBlack,
                     [styles["white"]]: !key().isBlack,
@@ -64,17 +66,18 @@ const PianoRollKeys = () => {
                         .filter((item) => !!item)
                         .join(", "),
                 }}>
-                <Show when={key().isBlack && false}>
-                  <div class={styles["black-separator"]} style={{
+                  <Show when={key().isBlack && false}>
+                    <div class={styles["black-separator"]} style={{
                     top: `${virtualDimensions().offset}px`,
                     height: `${virtualDimensions().size / 2 - 0.25}px`,
                 }}></div>
-                </Show>
-              </div>
-            </Show>);
+                  </Show>
+                </div>
+              </Show>);
         }}
-      </Index>
-    </ScrollContainer>);
+        </Index>
+      </ScrollZoomContainer>
+    </div>);
 };
 export const blackKeys = [1, 3, 6, 8, 10];
 export const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];

package/dist/source/PianoRollNotes.jsx

@@ -44,7 +44,7 @@ const PianoRollNotes = (props) => {
     const getClasses = (noteDragMode) => {
         return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
     };
-    return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={(event) => {
+    return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(event) => {
             batch(() => {
                 setIsMouseDown(true);
                 const index = insertOrUpdateNote(event);

package/dist/source/viewport/{ScrollContainer.jsx → ScrollZoomContainer.jsx}

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
 import { useViewPortDimension } from "./ScrollZoomViewPort";
-import styles from "./ScrollContainer.module.css";
-const ScrollContainer = (props) => {
+import styles from "./ScrollZoomContainer.module.css";
+const ScrollZoomContainer = (props) => {
     let scrollContentRef;
     const [ownProps, divProps] = splitProps(props, [
         "ref",
@@ -74,13 +74,13 @@ const ScrollContainer = (props) => {
             top: scrollTop,
         });
     });
-    return (<div ref={props.ref} style={{
+    return (<div ref={props.ref} onScroll={handleScroll} onWheel={handleWheel} {...divProps} style={{
             overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
             ...(typeof divProps.style === "object" && divProps.style),
         }} classList={{
-            [styles.ScrollContainer]: true,
+            [styles.ScrollZoomContainer]: true,
             ...divProps.classList,
-        }} onScroll={handleScroll} onWheel={handleWheel} {...divProps}>
+        }}>
       <div ref={scrollContentRef}>
         <div style={{
             top: 0,
@@ -101,4 +101,4 @@ const ScrollContainer = (props) => {
       </div>
     </div>);
 };
-export default ScrollContainer;
+export default ScrollZoomContainer;

package/dist/source/viewport/ScrollZoomViewPort.jsx

@@ -1,7 +1,19 @@
 import { createContext, useContext } from "solid-js";
 import createViewPortDimension from "./createViewPortDimension";
+const defaultViewPortProps = {
+    pixelOffset: 0,
+    position: 0,
+    range: 1,
+    zoom: 1,
+    minZoom: 1,
+    maxZoom: Infinity,
+};
 export const ScrollZoomViewPort = (props) => {
-    const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({ name: name, ...viewPortProps() })));
+    const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({
+        name: name,
+        ...defaultViewPortProps,
+        ...viewPortProps(),
+    })));
     const parentViewPorts = useContext(ScrollZoomViewPortContext);
     return (<ScrollZoomViewPortContext.Provider value={[...parentViewPorts, ...viewPorts]}>
       {props.children}

package/dist/source/viewport/ZoomSliderControl.jsx

@@ -0,0 +1,26 @@
+import { createMemo, mergeProps } from "solid-js";
+import { useViewPortDimension } from "./ScrollZoomViewPort";
+const ZoomSliderControl = (props) => {
+    const propsWithDefaults = mergeProps({ orientation: "horizontal" }, props);
+    const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? propsWithDefaults.orientation));
+    return (<input min={dimension().minZoom} max={dimension().maxZoom} step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().onZoomChange?.(event.currentTarget.valueAsNumber)} 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" /* IE */,
+                    "-webkit-appearance": "slider-vertical" /* WebKit */,
+                },
+                ...(typeof props.style === "object" && props.style),
+            }
+            : {
+                margin: 0,
+                "margin-top": "4px",
+                "margin-bottom": "4px",
+                ...(typeof props.style === "object" && props.style),
+            }}/>);
+};
+export default ZoomSliderControl;

package/dist/source/viewport/createViewPortDimension.js

@@ -1,16 +1,23 @@
 import { createEffect } from "solid-js";
 import { createStore } from "solid-js/store";
 export default function createViewPortDimension(getState) {
-    const getStateWithFunctions = () => ({
-        ...getState(),
-        calculatePixelOffset,
-        calculatePixelValue,
-        calculatePosition,
-        calculatePixelDimensions,
-        calculateVisibleRange,
-        calculateMaxPosition,
-        isVisible,
-    });
+    const getStateWithFunctions = () => {
+        const state = getState();
+        const onZoomChange = (zoom) => state.onZoomChange?.(clamp(zoom, state.minZoom, state.maxZoom));
+        const onPositionChange = (position) => state.onPositionChange?.(position);
+        return {
+            ...state,
+            onZoomChange,
+            onPositionChange,
+            calculatePixelOffset,
+            calculatePixelValue,
+            calculatePosition,
+            calculatePixelDimensions,
+            calculateVisibleRange,
+            calculateMaxPosition,
+            isVisible,
+        };
+    };
     const [state, setState] = createStore(getStateWithFunctions());
     createEffect(() => setState(getStateWithFunctions()));
     function calculatePixelValue(position = state.position) {

package/dist/types/viewport/{ScrollContainer.d.ts → ScrollZoomContainer.d.ts}

@@ -1,8 +1,8 @@
 import { JSX, ParentProps, Ref } from "solid-js";
-declare const ScrollContainer: (props: ParentProps<{
+declare const ScrollZoomContainer: (props: ParentProps<{
     ref?: Ref<HTMLDivElement>;
     verticalDimensionName?: string;
     horizontalDimensionName?: string;
     showScrollbar?: boolean;
 } & JSX.IntrinsicElements["div"]>) => JSX.Element;
-export default ScrollContainer;
+export default ScrollZoomContainer;

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

@@ -1,9 +1,19 @@
 import { ParentProps } from "solid-js";
 import { ViewPortDimensionName, ViewPortDimensionState } from "./createViewPortDimension";
+declare const defaultViewPortProps: {
+    pixelOffset: number;
+    position: number;
+    range: number;
+    zoom: number;
+    minZoom: number;
+    maxZoom: number;
+};
 export declare const ScrollZoomViewPort: (props: ParentProps<{
-    dimensions: Record<ViewPortDimensionName, () => Omit<ViewPortDimensionState, "name">>;
+    dimensions: Record<ViewPortDimensionName, () => Omit<ViewPortDimensionState, "name" | keyof typeof defaultViewPortProps> & Partial<Pick<ViewPortDimensionState, keyof typeof defaultViewPortProps>>>;
 }>) => import("solid-js").JSX.Element;
 export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
+    onZoomChange: (zoom: number) => void;
+    onPositionChange: (position: number) => void;
     calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
@@ -22,7 +32,8 @@ export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
     pixelOffset: number;
     pixelSize: number;
     name: string;
-    onZoomChange?: (zoom: number) => void;
-    onPositionChange?: (zoom: number) => void;
     zoom: number;
+    minZoom: number;
+    maxZoom: number;
 };
+export {};

package/dist/types/viewport/{VerticalZoomControl.d.ts → ZoomSliderControl.d.ts}

@@ -1,5 +1,6 @@
 import { JSX } from "solid-js/jsx-runtime";
-declare const VerticalZoomControl: (props: {
+declare const ZoomSliderControl: (props: {
     dimensionName?: string;
+    orientation?: "horizontal" | "vertical";
 } & JSX.IntrinsicElements["input"]) => JSX.Element;
-export default VerticalZoomControl;
+export default ZoomSliderControl;

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

@@ -9,8 +9,12 @@ export type ViewPortDimensionState = {
     onZoomChange?: (zoom: number) => void;
     onPositionChange?: (zoom: number) => void;
     zoom: number;
+    minZoom: number;
+    maxZoom: number;
 };
 export default function createViewPortDimension(getState: () => ViewPortDimensionState): {
+    onZoomChange: (zoom: number) => void;
+    onPositionChange: (position: number) => void;
     calculatePixelOffset: (position: number) => number;
     calculatePixelValue: (position?: number) => number;
     calculatePosition: (offset: number) => number;
@@ -29,8 +33,8 @@ export default function createViewPortDimension(getState: () => ViewPortDimensio
     pixelOffset: number;
     pixelSize: number;
     name: string;
-    onZoomChange?: (zoom: number) => void;
-    onPositionChange?: (zoom: number) => void;
     zoom: number;
+    minZoom: number;
+    maxZoom: number;
 };
 export declare const clamp: (value: number, min: number, max: number) => number;

package/package.json

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

package/dist/source/viewport/HorizontalZoomControl.jsx

@@ -1,11 +0,0 @@
-import { createMemo } from "solid-js";
-import { useViewPortDimension } from "./ScrollZoomViewPort";
-const HorizontalZoomControl = (props) => {
-    const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? "horizontal"));
-    return (<input max="500" min="1" step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().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/VerticalZoomControl.jsx

@@ -1,14 +0,0 @@
-import { createMemo } from "solid-js";
-import { useViewPortDimension } from "./ScrollZoomViewPort";
-const VerticalZoomControl = (props) => {
-    const dimension = createMemo(() => useViewPortDimension(props.dimensionName ?? "vertical"));
-    return (<input min="1" max="11" step={0.01} {...props} value={dimension().zoom} onInput={(event) => dimension().onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" {...{ orient: "vertical" }} style={{
-            width: "16px",
-            transform: "rotate(180deg)",
-            ...{
-                "writing-mode": "bt-lr" /* IE */,
-                "-webkit-appearance": "slider-vertical" /* WebKit */,
-            },
-        }}/>);
-};
-export default VerticalZoomControl;

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

@@ -1,5 +0,0 @@
-import { JSX } from "solid-js/jsx-runtime";
-declare const HorizontalZoomControl: (props: {
-    dimensionName?: string;
-} & JSX.IntrinsicElements["input"]) => JSX.Element;
-export default HorizontalZoomControl;