solid-pianoroll 0.0.13 → 0.0.15

package/dist/source/MultiTrackPianoRoll.jsx

@@ -1,136 +0,0 @@
-import { createSignal, mergeProps, createMemo, Index, createEffect, splitProps, Show, } from "solid-js";
-import styles from "./PianoRoll.module.css";
-import HorizontalZoomControl from "./viewport/HorizontalZoomControl";
-import { PianoRollContextProvider, splitContextProps } from "./PianoRollContext";
-import PianoRollNotes from "./PianoRollNotes";
-import ScrollContainer from "./viewport/ScrollContainer";
-import PianoRollGrid from "./PianoRollGrid";
-import useNotes from "./useNotes";
-import useBoundingClientRect from "./useBoundingClientRect";
-import { ScrollZoomViewPort, useViewPortDimension } from "./viewport/ScrollZoomViewPort";
-import { clamp } from "./viewport/createViewPortDimension";
-import { createStore } from "solid-js/store";
-import PianoRollKeys from "./PianoRollKeys";
-import VerticalZoomControl from "./viewport/VerticalZoomControl";
-const MultiTrackPianoRoll = (allProps) => {
-    const condensed = createMemo(() => !allProps.selectedTrack);
-    const [ownProps, restProps] = splitProps(allProps, ["tracks", "selectedTrack"]);
-    const [contextProps, divProps] = splitContextProps(mergeProps(restProps, { notes: [], condensed: false }));
-    const [scrollerRef, setScrollerRef] = createSignal();
-    const clientRect = useBoundingClientRect(scrollerRef);
-    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));
-    return (<PianoRollContextProvider value={{ ...contextProps }}>
-      <ScrollZoomViewPort dimensions={{
-            horizontal: () => ({
-                pixelOffset: clientRect().left,
-                pixelSize: clientRect().width,
-                position: contextProps.position,
-                range: contextProps.duration,
-                zoom: contextProps.zoom * (zoomFactor / clientRect().width),
-                onPositionChange: contextProps.onPositionChange,
-                onZoomChange: (zoom) => contextProps.onZoomChange?.(clamp(zoom / (zoomFactor / clientRect().width), minZoom(), maxZoom())),
-            }),
-            vertical: () => ({
-                pixelOffset: clientRect().top,
-                pixelSize: clientRect().height,
-                position: contextProps.verticalPosition,
-                range: 128,
-                zoom: contextProps.verticalZoom * (zoomFactor / clientRect().height),
-                onPositionChange: contextProps.onVerticalPositionChange,
-                onZoomChange: (verticalZoom) => contextProps.onVerticalZoomChange?.(clamp(verticalZoom / (zoomFactor / clientRect().height), minVerticalZoom(), maxVerticalZoom())),
-            }),
-        }}>
-        <div style={{
-            display: "flex",
-            flex: 1,
-            height: "100%",
-            "flex-direction": "row",
-        }}>
-          <ul style={{ "margin-block-start": 0, "padding-inline-start": 0, width: "150px" }}>
-            <Index each={allProps.tracks}>
-              {(track) => (<li style={{
-                width: "150px",
-                height: "30px",
-                "list-style": "none",
-                display: "flex",
-                "align-items": "center",
-                "border-top": "1px black solid",
-                background: track() === allProps.selectedTrack ? "lightgray" : "none",
-                cursor: "pointer",
-            }} onClick={() => {
-                if (track() === allProps.selectedTrack) {
-                    allProps.onSelectedTrackChange(undefined);
-                }
-                else {
-                    allProps.onSelectedTrackChange(track());
-                }
-            }}>
-                  {track().name}
-                </li>)}
-            </Index>
-          </ul>
-
-          <div class={styles.PianoRoll} style={{ flex: 1 }}>
-            <div class={styles.PianoRollContainer}>
-              <Show when={!condensed()}>
-                <PianoRollKeys />
-              </Show>
-
-              <ScrollContainer ref={setScrollerRef}>
-                <ul style={{
-            margin: 0,
-            "margin-block-start": 0,
-            "padding-inline-start": 0,
-        }}>
-                  <Index each={allProps.tracks}>
-                    {(track) => {
-            const notes = useNotes();
-            createEffect(() => {
-                notes.onNotesChange(track().notes);
-            });
-            const [context, setContext] = createStore({ ...contextProps });
-            createEffect(() => {
-                setContext({
-                    ...contextProps,
-                    condensed: condensed(),
-                    notes: notes.notes(),
-                    onNoteChange: notes.onNoteChange,
-                    onInsertNote: notes.onInsertNote,
-                    onRemoveNote: notes.onRemoveNote,
-                });
-            });
-            const verticalViewPort = useViewPortDimension("vertical");
-            return (<Show when={condensed() || allProps.selectedTrack === track()}>
-                          <PianoRollContextProvider value={context}>
-                            <li style={{
-                    display: "flex",
-                    position: "relative",
-                    "list-style": "none",
-                    "flex-direction": "row",
-                    height: condensed() ? "30px" : `${verticalViewPort.pixelSize}px`,
-                    "border-top": "1px black solid",
-                }}>
-                              <PianoRollNotes />
-                              <PianoRollGrid />
-                            </li>
-                          </PianoRollContextProvider>
-                        </Show>);
-        }}
-                  </Index>
-                </ul>
-              </ScrollContainer>
-              <Show when={!condensed()}>
-                <VerticalZoomControl value={contextProps.verticalZoom} onInput={(event) => contextProps.onVerticalZoomChange?.(event.currentTarget.valueAsNumber)}/>
-              </Show>
-            </div>
-            <HorizontalZoomControl style={{ width: "100%", "margin-left": 0 }} value={contextProps.zoom} onInput={(event) => contextProps.onZoomChange?.(event.currentTarget.valueAsNumber)}/>
-          </div>
-        </div>
-      </ScrollZoomViewPort>
-    </PianoRollContextProvider>);
-};
-export default MultiTrackPianoRoll;

package/dist/types/MultiTrackPianoRoll.d.ts

@@ -1,10 +0,0 @@
-import { JSX } from "solid-js";
-import { TrackJSON } from "@tonejs/midi";
-import { PianoRollProps } from "./PianoRoll";
-export type MultiTrackPianoRollProps = Omit<PianoRollProps, "notes" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "condensed"> & {
-    tracks: TrackJSON[];
-    selectedTrack?: TrackJSON;
-    onSelectedTrackChange: (track?: TrackJSON) => void;
-} & JSX.IntrinsicElements["div"];
-declare const MultiTrackPianoRoll: (allProps: MultiTrackPianoRollProps) => JSX.Element;
-export default MultiTrackPianoRoll;