solid-pianoroll 0.0.9 → 0.0.11

package/dist/source/ScrollContainer.jsx

@@ -1,138 +0,0 @@
-import { createEffect, createMemo, createSignal } from "solid-js";
-import { usePianoRollContext } from "./PianoRollContext";
-const ScrollContainer = (props) => {
-    let scrollContentRef;
-    const context = usePianoRollContext();
-    const gridDivisorTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
-    const forwardEventToNote = (event) => {
-        const x = "clientX" in event ? event.clientX : event.touches[0]?.clientX ?? 0;
-        const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY ?? 0;
-        const elementUnderMouse = [...(context.notesContainer?.querySelectorAll?.("div") ?? [])].find((element) => {
-            const rect = element.getBoundingClientRect();
-            return (x >= rect.left &&
-                rect.left + rect.width > x &&
-                y >= rect.top &&
-                rect.top + rect.height > y);
-        });
-        if (elementUnderMouse) {
-            return elementUnderMouse.dispatchEvent(new MouseEvent(event.type, event));
-        }
-    };
-    const handleScroll = (event) => {
-        event.preventDefault();
-        if (didUpdateScroll) {
-            didUpdateScroll = false;
-            return;
-        }
-        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);
-        const scrollLeftAmount = scrollLeft / (scrollWidth - width);
-        context.onVerticalPositionChange?.(maxVerticalPosition * scrollTopAmount);
-        context.onPositionChange?.(maxPosition * scrollLeftAmount);
-    };
-    let didUpdateScroll = false;
-    createEffect(() => {
-        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 = context.verticalViewPort.getScrollSize();
-        const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-        const scrollDivWidth = context.horizontalViewPort.getScrollSize();
-        const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
-        didUpdateScroll = true;
-        scrollContentRef.style.height = `${scrollDivHeight}px`;
-        scrollContentRef.style.width = `${scrollDivWidth}px`;
-        scrollContentRef.parentElement.scrollTo({
-            left: scrollLeft,
-            top: scrollTop,
-        });
-    });
-    const insertOrUpdateNote = (event) => {
-        const position = context.horizontalViewPort.getPosition(event.clientX);
-        const midi = 127 - Math.floor(context.verticalViewPort.getPosition(event.clientY));
-        const eventPositionTicks = Math.floor(position / gridDivisorTicks()) * gridDivisorTicks();
-        const velocity = 127;
-        const existingNote = newNote();
-        const ticks = existingNote?.ticks ?? eventPositionTicks;
-        const durationTicks = existingNote?.ticks
-            ? eventPositionTicks - existingNote?.ticks
-            : gridDivisorTicks();
-        const note = { midi, ticks, durationTicks, velocity };
-        if (existingNote) {
-            context.onNoteChange?.(newNoteIndex(), note);
-            return newNoteIndex();
-        }
-        else {
-            return context.onInsertNote?.(note) ?? -1;
-        }
-    };
-    const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
-    const newNote = createMemo(() => context.notes[newNoteIndex()]);
-    const [isMouseDown, setIsMouseDown] = createSignal(false);
-    return (<div ref={props.ref} class="PianoRoll-Vertical-Scroller" style={{
-            flex: 1,
-            ...(context.noteDragMode && {
-                cursor: context.noteDragMode === "trimStart"
-                    ? "w-resize"
-                    : context.noteDragMode === "trimEnd"
-                        ? "e-resize"
-                        : "pointer",
-            }),
-            "z-index": 4,
-            overflow: "scroll",
-            "pointer-events": "auto",
-        }} onScroll={handleScroll} onMouseDown={(event) => {
-            if (forwardEventToNote(event))
-                return;
-            setIsMouseDown(true);
-        }} onMouseMove={(event) => {
-            event.preventDefault();
-            if (forwardEventToNote(event))
-                return;
-            if (context.isDragging)
-                return;
-            if (!isMouseDown()) {
-                context.onNoteDragModeChange(undefined);
-                return;
-            }
-            const index = insertOrUpdateNote(event);
-            setNewNoteIndex(index);
-        }} onDblClick={(event) => {
-            if (newNote())
-                return;
-            if (context.isDragging)
-                return;
-            if (forwardEventToNote(event))
-                return;
-            insertOrUpdateNote(event);
-        }} onClick={(event) => {
-            if (newNote()) {
-                setNewNoteIndex(-1);
-                return;
-            }
-            if (forwardEventToNote(event))
-                return;
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
-        }} onMouseUp={(event) => {
-            setIsMouseDown(false);
-            if (newNote())
-                return;
-            if (forwardEventToNote(event))
-                return;
-            if (!event.altKey)
-                return;
-            insertOrUpdateNote(event);
-        }} onTouchStart={forwardEventToNote} onTouchMove={forwardEventToNote} onTouchEnd={forwardEventToNote} onTouchCancel={forwardEventToNote} onDragStart={forwardEventToNote} onDrag={forwardEventToNote} onDragEnd={forwardEventToNote}>
-      <div ref={scrollContentRef}></div>
-    </div>);
-};
-export default ScrollContainer;

package/dist/source/VerticalZoomControl.jsx

@@ -1,12 +0,0 @@
-import { usePianoRollContext } from "./PianoRollContext";
-const VerticalZoomControl = () => {
-    const context = usePianoRollContext();
-    return (<input value={context.verticalZoom} onInput={(event) => context.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)} type="range" min="1" max="11" step={0.01} {...{ orient: "vertical" }} style={{
-            width: "16px",
-            ...{
-                "writing-mode": "bt-lr" /* IE */,
-                "-webkit-appearance": "slider-vertical" /* WebKit */,
-            },
-        }}/>);
-};
-export default VerticalZoomControl;

package/dist/source/useViewPortScaler.js

@@ -1,44 +0,0 @@
-import { createMemo } from "solid-js";
-export default function useViewPortScaler(getState) {
-    const state = createMemo(() => getState());
-    function getScaledValue(position) {
-        const virtualSize = state().viewPortSize * state().zoom;
-        return (position / state().virtualRange) * virtualSize;
-    }
-    function getCoordinates(position) {
-        return getScaledValue(position) - getScaledValue(state().virtualPosition);
-    }
-    function getVisibleRange() {
-        return state().virtualRange / state().zoom;
-    }
-    function getPosition(offset) {
-        const percentX = (offset - state().viewPortOffset) / state().viewPortSize;
-        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);
-        const offset = clamp(virtualLeft, 0, state().viewPortSize);
-        const size = clamp(virtualWidth - (offset - virtualLeft), 0, state().viewPortSize - offset);
-        return { offset, size };
-    }
-    return {
-        getScaledValue,
-        getCoordinates,
-        getPosition,
-        getVirtualDimensions,
-        getVisibleRange,
-        getMaxPosition,
-        getScrollSize,
-    };
-}
-export const clamp = (value, min, max) => {
-    return Math.max(min, Math.min(max, value));
-};

package/dist/types/HorizontalZoomControl.d.ts

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

package/dist/types/ScrollContainer.d.ts

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

package/dist/types/VerticalZoomControl.d.ts

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

package/dist/types/useViewPortScaler.d.ts

@@ -1,20 +0,0 @@
-export type ViewPortScaler = ReturnType<typeof useViewPortScaler>;
-export default function useViewPortScaler(getState: () => {
-    virtualPosition: number;
-    virtualRange: number;
-    viewPortOffset: number;
-    viewPortSize: number;
-    zoom: number;
-}): {
-    getScaledValue: (position: number) => number;
-    getCoordinates: (position: number) => number;
-    getPosition: (offset: number) => number;
-    getVirtualDimensions: (position: number, length: number) => {
-        offset: number;
-        size: number;
-    };
-    getVisibleRange: () => number;
-    getMaxPosition: () => number;
-    getScrollSize: () => number;
-};
-export declare const clamp: (value: number, min: number, max: number) => number;