solid-pianoroll 0.0.24 → 0.0.26

package/dist/source/viewport/ScrollZoomContainer.jsx

@@ -1,104 +0,0 @@
-import { createEffect, createMemo, mergeProps, splitProps } from "solid-js";
-import { useViewPortDimension } from "./ScrollZoomViewPort";
-import styles from "./ScrollZoomContainer.module.css";
-const ScrollZoomContainer = (props) => {
-    let scrollContentRef;
-    const [ownProps, divProps] = splitProps(props, [
-        "ref",
-        "verticalDimensionName",
-        "horizontalDimensionName",
-        "showScrollbar",
-    ]);
-    const propsWithDefaults = mergeProps({
-        verticalDimensionName: "vertical",
-        horizontalDimensionName: "horizontal",
-        showScrollbar: true,
-    }, ownProps);
-    const verticalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.verticalDimensionName));
-    const horizontalViewPort = createMemo(() => useViewPortDimension(propsWithDefaults.horizontalDimensionName));
-    const handleScroll = (event) => {
-        event.preventDefault();
-        if (didUpdateScroll) {
-            didUpdateScroll = false;
-            return;
-        }
-        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-        const maxPosition = horizontalViewPort().calculateMaxPosition();
-        const height = verticalViewPort().pixelSize;
-        const width = horizontalViewPort().pixelSize;
-        const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = event.currentTarget;
-        const scrollTopAmount = scrollTop / (scrollHeight - height);
-        const scrollLeftAmount = scrollLeft / (scrollWidth - width);
-        verticalViewPort().onPositionChange?.(maxVerticalPosition * scrollTopAmount);
-        horizontalViewPort().onPositionChange?.(maxPosition * scrollLeftAmount);
-    };
-    const handleWheel = (event) => {
-        if (event.altKey) {
-            event.preventDefault();
-            if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-                horizontalViewPort()?.onZoomChange?.(horizontalViewPort().zoom / (1 + event.deltaX / horizontalViewPort().pixelSize));
-                const maxPosition = horizontalViewPort().calculateMaxPosition();
-                horizontalViewPort()?.onPositionChange?.(Math.min(maxPosition, horizontalViewPort()?.position));
-            }
-            else {
-                verticalViewPort()?.onZoomChange?.(verticalViewPort().zoom / (1 + event.deltaY / verticalViewPort().pixelSize));
-                const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-                verticalViewPort()?.onPositionChange?.(Math.min(maxVerticalPosition, verticalViewPort()?.position));
-            }
-        }
-        else if (!props.showScrollbar) {
-            event.preventDefault();
-            event.currentTarget.scrollLeft += event.deltaX;
-            event.currentTarget.scrollTop += event.deltaY;
-        }
-    };
-    let didUpdateScroll = false;
-    createEffect(() => {
-        const maxVerticalPosition = verticalViewPort().calculateMaxPosition();
-        const maxPosition = horizontalViewPort().calculateMaxPosition();
-        const scrollTopAmount = maxVerticalPosition > 0 ? verticalViewPort().position / maxVerticalPosition : 0;
-        const scrollLeftAmount = maxPosition > 0 ? horizontalViewPort().position / maxPosition : 0;
-        const height = verticalViewPort().pixelSize;
-        const width = horizontalViewPort().pixelSize;
-        if (!scrollContentRef?.parentElement)
-            return;
-        const scrollDivHeight = verticalViewPort().zoom * verticalViewPort().pixelSize;
-        const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-        const scrollDivWidth = horizontalViewPort().zoom * horizontalViewPort().pixelSize;
-        const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
-        didUpdateScroll = true;
-        scrollContentRef.style.height = `${scrollDivHeight}px`;
-        scrollContentRef.style.width = `${scrollDivWidth}px`;
-        scrollContentRef.parentElement.scrollTo({
-            left: scrollLeft,
-            top: scrollTop,
-        });
-    });
-    return (<div ref={props.ref} onScroll={handleScroll} onWheel={handleWheel} {...divProps} style={{
-            overflow: propsWithDefaults.showScrollbar ? "scroll" : "hidden",
-            ...(typeof divProps.style === "object" && divProps.style),
-        }} classList={{
-            [styles.ScrollZoomContainer]: true,
-            ...divProps.classList,
-        }}>
-      <div ref={scrollContentRef}>
-        <div style={{
-            top: 0,
-            left: 0,
-            height: `${verticalViewPort().pixelSize}px`,
-            width: `${horizontalViewPort().pixelSize}px`,
-            position: "sticky",
-            display: "flex",
-        }}>
-          <div style={{
-            position: "relative",
-            height: `${verticalViewPort().pixelSize}px`,
-            width: `${horizontalViewPort().pixelSize}px`,
-        }}>
-            {props.children}
-          </div>
-        </div>
-      </div>
-    </div>);
-};
-export default ScrollZoomContainer;

package/dist/source/viewport/ScrollZoomViewPort.jsx

@@ -1,31 +0,0 @@
-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,
-        ...defaultViewPortProps,
-        ...viewPortProps(),
-    })));
-    const parentViewPorts = useContext(ScrollZoomViewPortContext);
-    return (<ScrollZoomViewPortContext.Provider value={[...parentViewPorts, ...viewPorts]}>
-      {props.children}
-    </ScrollZoomViewPortContext.Provider>);
-};
-const ScrollZoomViewPortContext = createContext([]);
-export const useViewPortDimension = (name) => {
-    const viewPorts = useContext(ScrollZoomViewPortContext);
-    const viewPort = name
-        ? viewPorts.find((viewPort) => viewPort.name === name)
-        : viewPorts[viewPorts.length - 1];
-    if (!viewPort)
-        throw new Error(`ViewPort dimension "${name}" not found.`);
-    return viewPort;
-};

package/dist/source/viewport/ZoomSliderControl.jsx

@@ -1,29 +0,0 @@
-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) => {
-            const value = event.currentTarget.valueAsNumber;
-            dimension().onZoomChange?.(value);
-        }} 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,51 +0,0 @@
-import { createEffect } from "solid-js";
-import { createStore } from "solid-js/store";
-export default function createViewPortDimension(getState) {
-    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) {
-        const virtualSize = state.pixelSize * state.zoom;
-        return (position / state.range) * virtualSize;
-    }
-    function calculatePixelOffset(position) {
-        return calculatePixelValue(position) - calculatePixelValue(state.position);
-    }
-    function calculatePosition(offset) {
-        const percentX = (offset - state.pixelOffset) / state.pixelSize;
-        const position = state.position + percentX * calculateVisibleRange();
-        return position;
-    }
-    function calculateVisibleRange() {
-        return state.range / state.zoom;
-    }
-    function calculateMaxPosition() {
-        return state.range - state.range / state.zoom;
-    }
-    function calculatePixelDimensions(position, length) {
-        const offset = calculatePixelOffset(position);
-        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/PianoRoll.d.ts

@@ -1,8 +0,0 @@
-import { JSX, ParentProps } from "solid-js";
-import createPianoRollstate from "./usePianoRollState";
-export type PianoRollProps = {
-    showAllTracks?: boolean;
-    showTrackList?: boolean;
-} & ReturnType<typeof createPianoRollstate> & Omit<JSX.IntrinsicElements["div"], "onDurationChange">;
-declare const PianoRoll: (allProps: ParentProps<PianoRollProps>) => JSX.Element;
-export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -1,45 +0,0 @@
-import { PianoRollProps } from "./PianoRoll";
-import createPianoRollstate from "./usePianoRollState";
-export type PianoRollContext = {
-    showAllTracks?: boolean;
-    showTrackList?: boolean;
-} & ReturnType<typeof createPianoRollstate>;
-export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<PianoRollContext>;
-export declare const usePianoRollContext: () => PianoRollContext;
-export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
-    ppq: number;
-    mode: "keys" | "tracks";
-    position: number;
-    zoom: number;
-    verticalZoom: number;
-    verticalPosition: number;
-    verticalTrackZoom: number;
-    verticalTrackPosition: number;
-    playHeadPosition: number;
-    gridDivision: import("./types").GridDivision;
-    snapToGrid: boolean;
-    duration: number;
-    tracks: import("./types").Track[];
-    selectedTrackIndex: number;
-    pressedKeys: Record<number, Record<number, boolean>>;
-    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
-    ppq: number;
-    mode: "keys" | "tracks";
-    position: number;
-    zoom: number;
-    verticalZoom: number;
-    verticalPosition: number;
-    verticalTrackZoom: number;
-    verticalTrackPosition: number;
-    playHeadPosition: number;
-    gridDivision: import("./types").GridDivision;
-    snapToGrid: boolean;
-    duration: number;
-    tracks: import("./types").Track[];
-    selectedTrackIndex: number;
-    pressedKeys: Record<number, Record<number, boolean>>;
-    notesScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-    tracksScrollerClientRect: Pick<import("./useBoundingClientRect").ClientRect, "height" | "width" | "left" | "top">;
-} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onPlayHeadPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNotesScrollerClientRectChange" | "onTracksScrollerClientRectChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "snapValueToGridIfEnabled" | "onPlayheadPositionChange" | "showAllTracks" | "showTrackList">];

package/dist/types/PianoRollGrid.d.ts

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

package/dist/types/PianoRollKeys.d.ts

@@ -1,9 +0,0 @@
-declare const PianoRollKeys: () => import("solid-js").JSX.Element;
-export declare const blackKeys: number[];
-export declare const keyNames: string[];
-export declare const keys: {
-    number: number;
-    name: string;
-    isBlack: boolean;
-}[];
-export default PianoRollKeys;

package/dist/types/PianoRollNotes.d.ts

@@ -1,5 +0,0 @@
-import { Ref } from "solid-js";
-declare const PianoRollNotes: (props: {
-    ref?: Ref<HTMLDivElement | undefined>;
-}) => import("solid-js").JSX.Element;
-export default PianoRollNotes;

package/dist/types/PianoRollNotesScroller.d.ts

@@ -1,3 +0,0 @@
-import { ParentProps } from "solid-js";
-declare const PianoRollNotesScroller: (props: ParentProps) => import("solid-js").JSX.Element;
-export default PianoRollNotesScroller;

package/dist/types/PianoRollScale.d.ts

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

package/dist/types/PianoRollScrollZoomViewPort.d.ts

@@ -1,3 +0,0 @@
-import { ParentProps } from "solid-js";
-declare const PianoRollScrollZoomViewPort: (props: ParentProps) => import("solid-js").JSX.Element;
-export default PianoRollScrollZoomViewPort;

package/dist/types/PianoRollTrackList.d.ts

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

package/dist/types/PianoRollTrackListScroller.d.ts

@@ -1,3 +0,0 @@
-import { ParentProps } from "solid-js";
-declare const PianoRollTrackListScroller: (props: ParentProps) => import("solid-js").JSX.Element;
-export default PianoRollTrackListScroller;

package/dist/types/index.d.ts

@@ -1,6 +0,0 @@
-import PianoRoll from "./PianoRoll";
-import PlayHead from "./viewport/PlayHead";
-import useNotes from "./useNotes";
-import createPianoRollstate from "./usePianoRollState";
-export type { Note, Track, GridDivision } from "./types";
-export { PianoRoll, createPianoRollstate, useNotes, PlayHead };

package/dist/types/types.d.ts

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

package/dist/types/useBoundingClientRect.d.ts

@@ -1,3 +0,0 @@
-import { Accessor } from "solid-js";
-export type ClientRect = Omit<DOMRect, "toJSON">;
-export default function useBoundingClientRect(containerRef: Accessor<HTMLElement | undefined>): Accessor<ClientRect>;

package/dist/types/useNotes.d.ts

@@ -1,9 +0,0 @@
-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/usePianoRollGrid.d.ts

@@ -1,13 +0,0 @@
-declare const usePianoRollGrid: () => import("solid-js").Accessor<{
-    index: number;
-    ticks: number;
-    isHighlighted: boolean;
-    hasHighlightedBorder: boolean;
-    showLabel: boolean;
-    virtualDimensions: {
-        offset: number;
-        size: number;
-    };
-    label: string;
-}[]>;
-export default usePianoRollGrid;

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

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

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

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

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

@@ -1,39 +0,0 @@
-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" | 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;
-    calculatePixelDimensions: (position: number, length: number) => {
-        offset: number;
-        size: number;
-    };
-    calculateVisibleRange: () => number;
-    calculateMaxPosition: () => number;
-    isVisible: ({ offset, size }: {
-        offset: number;
-        size: number;
-    }) => boolean;
-    position: number;
-    range: number;
-    pixelOffset: number;
-    pixelSize: number;
-    name: string;
-    zoom: number;
-    minZoom: number;
-    maxZoom: number;
-};
-export {};

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

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

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

@@ -1,40 +0,0 @@
-export type ViewPortDimension = ReturnType<typeof createViewPortDimension>;
-export type ViewPortDimensionName = string;
-export type ViewPortDimensionState = {
-    position: number;
-    range: number;
-    pixelOffset: number;
-    pixelSize: number;
-    name: ViewPortDimensionName;
-    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;
-    calculatePixelDimensions: (position: number, length: number) => {
-        offset: number;
-        size: number;
-    };
-    calculateVisibleRange: () => number;
-    calculateMaxPosition: () => number;
-    isVisible: ({ offset, size }: {
-        offset: number;
-        size: number;
-    }) => boolean;
-    position: number;
-    range: number;
-    pixelOffset: number;
-    pixelSize: number;
-    name: string;
-    zoom: number;
-    minZoom: number;
-    maxZoom: number;
-};
-export declare const clamp: (value: number, min: number, max: number) => number;