solid-pianoroll 0.0.23 → 0.0.25

package/dist/source/PianoRollNotes.jsx

@@ -1,162 +0,0 @@
-import { createMemo, createSignal, For, Show } from "solid-js";
-import { usePianoRollContext } from "./PianoRollContext";
-import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-import styles from "./PianoRollNotes.module.scss";
-import { clamp } from "./viewport/createViewPortDimension";
-const PianoRollNotes = (props) => {
-    const context = usePianoRollContext();
-    const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
-    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
-    const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
-    const [isDragging, setIsDragging] = createSignal(false);
-    const [noteDragMode, setNoteDragMode] = createSignal();
-    const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
-    const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
-    const [diffPosition, setDiffPosition] = createSignal(0);
-    const [getInitialNote, setInitialNote] = createSignal();
-    const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
-        ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks()
-        : value;
-    const calculateNoteDragValues = (event) => {
-        const targetTrackIndex = context.mode === "tracks"
-            ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
-            : currentNoteTrackIndex() > -1
-                ? currentNoteTrackIndex()
-                : context.selectedTrackIndex;
-        const midi = context.mode === "keys"
-            ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY))
-            : getInitialNote()?.midi ?? 60;
-        const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
-        return {
-            targetTrackIndex,
-            midi,
-            horiontalPosition,
-        };
-    };
-    const handleMouseMove = (mouseMoveEvent) => {
-        mouseMoveEvent.preventDefault();
-        mouseMoveEvent.stopPropagation();
-        const note = getInitialNote();
-        if (!note)
-            return;
-        const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
-        const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
-        const updatedNote = {
-            ...note,
-            midi,
-            ...(noteDragMode() === "move" && { ticks }),
-            ...(noteDragMode() === "trimStart" && {
-                ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
-                durationTicks: ticks < note.ticks + note.durationTicks
-                    ? note.ticks + note.durationTicks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
-            }),
-            ...(noteDragMode() === "trimEnd" && {
-                ticks: ticks < note.ticks ? ticks : note.ticks,
-                durationTicks: ticks < note.ticks
-                    ? note.ticks - ticks
-                    : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
-            }),
-        };
-        const previousTrackIndex = currentNoteTrackIndex();
-        const previousNoteIndex = currentNoteIndex();
-        if (targetTrackIndex === previousTrackIndex) {
-            context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
-        }
-        else {
-            if (context.onInsertNote) {
-                context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
-                const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
-                setCurrentNoteTrackIndex(targetTrackIndex);
-                setCurrentNoteIndex(newNoteIndex);
-            }
-        }
-    };
-    const stopDragging = () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", stopDragging);
-        setIsDragging(false);
-        setCurrentNoteIndex(-1);
-        setCurrentNoteTrackIndex(-1);
-    };
-    const startDragging = () => {
-        window.addEventListener("mousemove", handleMouseMove);
-        window.addEventListener("mouseup", stopDragging);
-    };
-    const getClasses = (noteDragMode) => {
-        return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
-    };
-    return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(mouseDownEvent) => {
-            mouseDownEvent.preventDefault();
-            mouseDownEvent.stopPropagation();
-            const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
-            const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
-            const durationTicks = gridDivisionTicks();
-            const newNote = {
-                midi,
-                ticks,
-                durationTicks,
-                velocity: 100,
-            };
-            const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
-            setIsDragging(true);
-            setCurrentNoteTrackIndex(targetTrackIndex);
-            setCurrentNoteIndex(newNoteIndex);
-            setInitialNote(newNote);
-            setDiffPosition(0);
-            setNoteDragMode("trimEnd");
-            startDragging();
-        }}>
-      <For each={context.tracks}>
-        {(track, trackIndex) => {
-            return (<Show when={trackIndex() === context.selectedTrackIndex ||
-                    context.showAllTracks ||
-                    context.mode === "tracks"}>
-              <For each={track.notes}>
-                {(note, noteIndex) => {
-                    const verticalVirtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(context.mode === "keys" ? 127 - note.midi : trackIndex(), 1));
-                    const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note.ticks, note.durationTicks));
-                    return (<Show when={verticalViewPort().isVisible(verticalVirtualDimensions()) &&
-                            horizontalViewPort().isVisible(horizontalDimensions())}>
-                      <div class={getClasses(noteDragMode()).join(" ")} draggable={false} onMouseMove={(event) => {
-                            if (isDragging())
-                                return;
-                            event.stopPropagation();
-                            const relativeX = horizontalViewPort().calculatePixelValue(horizontalViewPort().calculatePosition(event.clientX));
-                            const noteStartX = horizontalViewPort().calculatePixelValue(note.ticks);
-                            const noteEndX = horizontalViewPort().calculatePixelValue(note.ticks + note.durationTicks);
-                            setNoteDragMode(relativeX - noteStartX < 3
-                                ? "trimStart"
-                                : noteEndX - relativeX < 3
-                                    ? "trimEnd"
-                                    : "move");
-                        }} onDblClick={(event) => {
-                            event.stopPropagation();
-                            context.onRemoveNote?.(trackIndex(), noteIndex());
-                        }} onMouseDown={(event) => {
-                            event.stopPropagation();
-                            const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
-                            setDiffPosition(noteDragMode() === "trimEnd"
-                                ? -(note.ticks + note.durationTicks - initialPosition)
-                                : initialPosition - note.ticks);
-                            setIsDragging(true);
-                            setCurrentNoteIndex(noteIndex());
-                            setCurrentNoteTrackIndex(trackIndex());
-                            setInitialNote(note);
-                            startDragging();
-                        }} style={{
-                            "background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
-                            top: `${verticalVirtualDimensions().offset}px`,
-                            height: `${verticalVirtualDimensions().size}px`,
-                            left: `${horizontalDimensions().offset}px`,
-                            width: `${horizontalDimensions().size}px`,
-                        }}></div>
-                    </Show>);
-                }}
-              </For>
-            </Show>);
-        }}
-      </For>
-    </div>);
-};
-export default PianoRollNotes;

package/dist/source/PianoRollNotesScroller.jsx

@@ -1,16 +0,0 @@
-import { createEffect, createSignal } from "solid-js";
-import { usePianoRollContext } from "./PianoRollContext";
-import useBoundingClientRect from "./useBoundingClientRect";
-import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
-const PianoRollNotesScroller = (props) => {
-    const context = usePianoRollContext();
-    const [ref, setRef] = createSignal();
-    const clientRect = useBoundingClientRect(ref);
-    createEffect(() => {
-        context.onNotesScrollerClientRectChange(clientRect());
-    });
-    return (<ScrollZoomContainer ref={setRef} verticalDimensionName={context.mode === "keys" ? "vertical" : "verticalTracks"}>
-      {props.children}
-    </ScrollZoomContainer>);
-};
-export default PianoRollNotesScroller;

package/dist/source/PianoRollScale.jsx

@@ -1,29 +0,0 @@
-import { createMemo, Index, Show } from "solid-js";
-import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-import styles from "./PianoRollScale.module.css";
-import usePianoRollGrid from "./usePianoRollGrid";
-const PianoRollScale = () => {
-    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
-    const grid = usePianoRollGrid();
-    return (<div class={styles.PianoRollScale}>
-      <Index each={grid()}>
-        {(entry) => {
-            return (<Show when={horizontalViewPort().isVisible(entry().virtualDimensions)}>
-              <div classList={{
-                    [styles["PianoRollScale-Time"]]: true,
-                    [styles["Highlighted"]]: entry().isHighlighted,
-                    [styles["HighlightedBorder"]]: entry().hasHighlightedBorder,
-                }} style={{
-                    left: `${entry().virtualDimensions.offset}px`,
-                    width: `${entry().virtualDimensions.size}px`,
-                }}>
-                <Show when={entry().showLabel}>
-                  <div class={styles["PianoRollScale-Label"]}>{entry().label}</div>
-                </Show>
-              </div>
-            </Show>);
-        }}
-      </Index>
-    </div>);
-};
-export default PianoRollScale;

package/dist/source/PianoRollScrollZoomViewPort.jsx

@@ -1,49 +0,0 @@
-import { usePianoRollContext } from "./PianoRollContext";
-import { ScrollZoomViewPort } from "./viewport/ScrollZoomViewPort";
-const PianoRollScrollZoomViewPort = (props) => {
-    const zoomFactor = 500;
-    const context = usePianoRollContext();
-    return (<ScrollZoomViewPort dimensions={{
-            horizontal: () => ({
-                pixelOffset: context.notesScrollerClientRect.left,
-                pixelSize: context.notesScrollerClientRect.width,
-                position: context.position,
-                range: context.duration,
-                zoom: context.zoom * (zoomFactor / context.notesScrollerClientRect.width),
-                onPositionChange: context.onPositionChange,
-                onZoomChange: (zoom) => context.onZoomChange?.(zoom / (zoomFactor / context.notesScrollerClientRect.width)),
-                minZoom: 1,
-                maxZoom: 500,
-            }),
-            vertical: () => ({
-                pixelOffset: context.notesScrollerClientRect.top,
-                pixelSize: context.notesScrollerClientRect.height,
-                position: context.verticalPosition,
-                range: 128,
-                zoom: context.verticalZoom * (zoomFactor / context.notesScrollerClientRect.height),
-                onPositionChange: context.onVerticalPositionChange,
-                onZoomChange: (verticalZoom) => context.onVerticalZoomChange?.(verticalZoom / (zoomFactor / context.notesScrollerClientRect.height)),
-                minZoom: 1,
-                maxZoom: 10,
-            }),
-            horizontalTracks: () => ({
-                pixelOffset: 0,
-                pixelSize: context.tracksScrollerClientRect.width,
-            }),
-            verticalTracks: () => ({
-                pixelOffset: context.tracksScrollerClientRect.top,
-                pixelSize: context.tracksScrollerClientRect.height,
-                position: context.verticalTrackPosition,
-                range: context.tracks.length,
-                zoom: context.verticalTrackZoom * (zoomFactor / context.tracksScrollerClientRect.height),
-                onPositionChange: context.onVerticalTrackPositionChange,
-                onZoomChange: (verticalTrackZoom) => context.onVerticalTrackZoomChange?.(verticalTrackZoom / (zoomFactor / context.tracksScrollerClientRect.height)),
-                minZoom: 0.8,
-                maxZoom: 3,
-            }),
-            horizontalKeys: () => ({ pixelSize: 60 }),
-        }}>
-      {props.children}
-    </ScrollZoomViewPort>);
-};
-export default PianoRollScrollZoomViewPort;

package/dist/source/PianoRollTrackList.jsx

@@ -1,27 +0,0 @@
-import styles from "./PianoRollTrackList.module.scss";
-import { createMemo, Index, Show } from "solid-js";
-import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-import { usePianoRollContext } from "./PianoRollContext";
-const PianoRollTrackList = () => {
-    const viewPort = createMemo(() => useViewPortDimension("verticalTracks"));
-    const context = usePianoRollContext();
-    return (<div class={styles.PianoRollTrackList}>
-      <Index each={context.tracks}>
-        {(track, index) => {
-            const virtualDimensions = createMemo(() => viewPort().calculatePixelDimensions(index, 1));
-            return (<Show when={virtualDimensions().size > 0}>
-              <div classList={{
-                    [styles["Track"]]: true,
-                    [styles["selected"]]: index === context.selectedTrackIndex,
-                }} title={track().name} style={{
-                    top: `${virtualDimensions().offset}px`,
-                    height: `${virtualDimensions().size}px`,
-                }} onClick={() => context.onSelectedTrackIndexChange?.(index)}>
-                {index} {track().name || "[unnamed track]"}
-              </div>
-            </Show>);
-        }}
-      </Index>
-    </div>);
-};
-export default PianoRollTrackList;

package/dist/source/PianoRollTrackListScroller.jsx

@@ -1,16 +0,0 @@
-import { createEffect, createSignal } from "solid-js";
-import { usePianoRollContext } from "./PianoRollContext";
-import useBoundingClientRect from "./useBoundingClientRect";
-import ScrollZoomContainer from "./viewport/ScrollZoomContainer";
-const PianoRollTrackListScroller = (props) => {
-    const context = usePianoRollContext();
-    const [ref, setRef] = createSignal();
-    const clientRect = useBoundingClientRect(ref);
-    createEffect(() => {
-        context.onTracksScrollerClientRectChange(clientRect());
-    });
-    return (<ScrollZoomContainer ref={setRef} horizontalDimensionName="horizontalTracks" verticalDimensionName="verticalTracks" showScrollbar={context.mode === "keys"}>
-      {props.children}
-    </ScrollZoomContainer>);
-};
-export default PianoRollTrackListScroller;

package/dist/source/index.jsx

@@ -1,5 +0,0 @@
-import PianoRoll from "./PianoRoll";
-import PlayHead from "./viewport/PlayHead";
-import useNotes from "./useNotes";
-import createPianoRollstate from "./usePianoRollState";
-export { PianoRoll, createPianoRollstate, useNotes, PlayHead };

package/dist/source/types.js

@@ -1 +0,0 @@
-export {};

package/dist/source/useBoundingClientRect.js

@@ -1,29 +0,0 @@
-import { createEffect, createSignal } from "solid-js";
-const defaultRect = {
-    left: 0,
-    width: 0,
-    top: 0,
-    height: 0,
-    bottom: 0,
-    right: 0,
-    x: 0,
-    y: 0,
-};
-export default function useBoundingClientRect(containerRef) {
-    const [boundingClientRect, setBoundingClientRect] = createSignal(defaultRect);
-    createEffect(() => {
-        const container = containerRef();
-        if (!container)
-            return;
-        const updateBoundingClientRect = () => {
-            setBoundingClientRect(container.getBoundingClientRect() ?? defaultRect);
-        };
-        const resizeObserver = new ResizeObserver(updateBoundingClientRect);
-        resizeObserver.observe(container);
-        updateBoundingClientRect();
-        return () => {
-            resizeObserver.disconnect();
-        };
-    });
-    return boundingClientRect;
-}

package/dist/source/useNotes.js

@@ -1,23 +0,0 @@
-import { createSignal } from "solid-js";
-const useNotes = () => {
-    const [notes, onNotesChange] = createSignal([]);
-    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)]);
-    };
-    return {
-        notes,
-        onNotesChange,
-        onNoteChange,
-        onInsertNote,
-        onRemoveNote,
-    };
-};
-export default useNotes;

package/dist/source/usePianoRollGrid.js

@@ -1,45 +0,0 @@
-import { createMemo } from "solid-js";
-import { usePianoRollContext } from "./PianoRollContext";
-import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-const usePianoRollGrid = () => {
-    const context = usePianoRollContext();
-    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
-    const measureTicks = createMemo(() => context.ppq * 4);
-    const selectedGridDivisorTicks = createMemo(() => measureTicks() / context.gridDivision);
-    function calculateVisibleGridDivisorTicks(value) {
-        const visibleRange = horizontalViewPort().calculateVisibleRange();
-        if (visibleRange <= 0)
-            return 0;
-        if (visibleRange / value > 100) {
-            return calculateVisibleGridDivisorTicks(value * 2);
-        }
-        if (visibleRange / value < 30) {
-            return calculateVisibleGridDivisorTicks(value / 2);
-        }
-        return value;
-    }
-    const gridDivisorTicks = createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
-    const gridArray = createMemo(() => {
-        const numberOfLines = Math.ceil(horizontalViewPort().calculateVisibleRange() / gridDivisorTicks() + 1);
-        const startIndex = Math.floor(context.position / gridDivisorTicks());
-        return Array.from({ length: numberOfLines }).map((_, i) => {
-            const index = i + startIndex;
-            const ticks = index * gridDivisorTicks();
-            const measurePosition = ticks / context.ppq / 4 + 1;
-            const bars = Math.floor(measurePosition);
-            const beats = Math.floor((measurePosition - bars) * 4);
-            const label = `${bars}${beats ? `.${beats}` : ""}`;
-            return {
-                index,
-                ticks,
-                isHighlighted: Math.ceil(((index + 1) * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0,
-                hasHighlightedBorder: (index * gridDivisorTicks()) % selectedGridDivisorTicks() === 0,
-                showLabel: ((index * selectedGridDivisorTicks()) / measureTicks()) % 2 === 0,
-                virtualDimensions: horizontalViewPort().calculatePixelDimensions(ticks, gridDivisorTicks()),
-                label,
-            };
-        });
-    });
-    return gridArray;
-};
-export default usePianoRollGrid;

package/dist/source/usePianoRollState.js

@@ -1,106 +0,0 @@
-import { mergeProps } from "solid-js";
-import { createStore } from "solid-js/store";
-const defaultState = {
-    ppq: 0,
-    mode: "keys",
-    position: 0,
-    zoom: 10,
-    verticalZoom: 5,
-    verticalPosition: 44,
-    verticalTrackZoom: 0.5,
-    verticalTrackPosition: 0,
-    gridDivision: 4,
-    snapToGrid: true,
-    duration: 0,
-    tracks: [],
-    selectedTrackIndex: 0,
-    pressedKeys: {},
-    notesScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
-    tracksScrollerClientRect: { left: 0, width: 0, top: 0, height: 0 },
-};
-const propNameToHandlerName = (name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
-export const pianoRollStatePropNames = [
-    ...Object.keys(defaultState),
-    ...Object.keys(defaultState).map(propNameToHandlerName),
-    "onNoteChange",
-    "onInsertNote",
-    "onRemoveNote",
-    "onNoteDown",
-    "onNoteUp",
-    "isKeyDown",
-];
-const createPianoRollstate = (initialState) => {
-    const [state, setState] = createStore({
-        ...defaultState,
-        ...initialState,
-    });
-    const handlers = Object.fromEntries(Object.entries(state).map((entry) => {
-        return [
-            propNameToHandlerName(entry[0]),
-            (value) => setState(entry[0], value),
-        ];
-    }));
-    const updateNotes = async (trackIndex, getNotes) => {
-        const track = state.tracks[trackIndex];
-        if (!track)
-            return;
-        const notes = track.notes;
-        handlers.onTracksChange([
-            ...state.tracks.slice(0, trackIndex),
-            { ...track, notes: getNotes(notes) },
-            ...state.tracks.slice(trackIndex + 1),
-        ]);
-    };
-    const onNoteChange = (trackIndex, noteIndex, note) => {
-        updateNotes(trackIndex, (notes) => [
-            ...notes.slice(0, noteIndex),
-            note,
-            ...notes.slice(noteIndex + 1),
-        ]);
-    };
-    const onInsertNote = (trackIndex, note) => {
-        const track = state.tracks[trackIndex];
-        if (!track)
-            return -1;
-        const notes = track.notes;
-        const newNoteIndex = Math.max(notes.findIndex(({ ticks }) => ticks > note.ticks), 0);
-        updateNotes(trackIndex, (notes) => [
-            ...notes.slice(0, newNoteIndex),
-            note,
-            ...notes.slice(newNoteIndex),
-        ]);
-        return newNoteIndex;
-    };
-    const onRemoveNote = (trackIndex, noteIndex) => {
-        updateNotes(trackIndex, (notes) => [
-            ...notes.slice(0, noteIndex),
-            ...notes.slice(noteIndex + 1),
-        ]);
-    };
-    const updateKeyPressedState = (trackIndex, keyNumber, value) => {
-        handlers.onPressedKeysChange?.({
-            ...state.pressedKeys,
-            [trackIndex]: {
-                ...state.pressedKeys[trackIndex],
-                [keyNumber]: value,
-            },
-        });
-    };
-    const onNoteDown = (trackIndex, keyNumber) => {
-        updateKeyPressedState(trackIndex, keyNumber, true);
-    };
-    const onNoteUp = (trackIndex, keyNumber) => {
-        updateKeyPressedState(trackIndex, keyNumber, false);
-    };
-    const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
-    return mergeProps(state, {
-        ...handlers,
-        onNoteChange,
-        onInsertNote,
-        onRemoveNote,
-        onNoteDown,
-        onNoteUp,
-        isKeyDown,
-    });
-};
-export default createPianoRollstate;

package/dist/source/viewport/PlayHead.jsx

@@ -1,43 +0,0 @@
-import { createEffect, createMemo, splitProps } from "solid-js";
-import { clamp } from "./createViewPortDimension";
-import { useViewPortDimension } from "./ScrollZoomViewPort";
-const PlayHead = (allProps) => {
-    const [props, divProps] = splitProps(allProps, [
-        "position",
-        "sync",
-        "onPositionChange",
-        "dimensionName",
-    ]);
-    const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
-    createEffect(() => {
-        if (!props.sync)
-            return;
-        const maxPosition = viewPort.range;
-        const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
-        viewPort.onPositionChange?.(newPosition);
-    });
-    const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
-    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 = ({ clientX }) => {
-                const newPosition = viewPort.calculatePosition(clientX);
-                props.onPositionChange?.(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/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;