solid-pianoroll 0.0.8 → 0.0.10

package/dist/source/PianoRollNotes.jsx

@@ -1,88 +1,133 @@
-import { createMemo, Index, Show } from "solid-js";
+import { createMemo, createSignal, Index, Show } from "solid-js";
 import { usePianoRollContext } from "./PianoRollContext";
+import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
+import styles from "./PianoRollNotes.module.scss";
 const PianoRollNotes = (props) => {
     const context = usePianoRollContext();
+    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
     const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
     const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
         ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks()
         : value;
-    return (<div class="PianoRoll-Notes-Container" style={{
-            position: "absolute",
-            width: `${context.clientRect.width}px`,
-            height: `${context.clientRect.height}px`,
+    const insertOrUpdateNote = (event) => {
+        const position = horizontalViewPort().calculatePosition(event.clientX);
+        const midi = 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY));
+        const eventPositionTicks = Math.floor(position / gridDivisionTicks()) * gridDivisionTicks();
+        const velocity = 127;
+        const existingNote = newNote();
+        const ticks = existingNote?.ticks ?? eventPositionTicks;
+        const durationTicks = existingNote?.ticks
+            ? eventPositionTicks - existingNote?.ticks
+            : gridDivisionTicks();
+        const note = { midi, ticks, durationTicks, velocity };
+        if (existingNote) {
+            context.onNoteChange?.(newNoteIndex(), note);
+            return newNoteIndex();
+        }
+        else {
+            return context.onInsertNote?.(note) ?? -1;
+        }
+    };
+    const [isDragging, setIsDragging] = createSignal(false);
+    const [noteDragMode, setNoteDragMode] = createSignal();
+    const [newNoteIndex, setNewNoteIndex] = createSignal(-1);
+    const [isMouseDown, setIsMouseDown] = createSignal(false);
+    const newNote = createMemo(() => context.notes[newNoteIndex()]);
+    const getClasses = (noteDragMode) => {
+        return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
+    };
+    return (<div class={styles.PianoRollNotes} ref={props.ref} onMouseDown={() => {
+            console.log("down");
+            setIsMouseDown(true);
+        }} onMouseMove={(event) => {
+            if (isDragging())
+                return;
+            if (!isMouseDown()) {
+                setNoteDragMode(undefined);
+                return;
+            }
+            const index = insertOrUpdateNote(event);
+            console.log({ index });
+            setNewNoteIndex(index);
+        }} onMouseUp={(event) => {
+            setIsMouseDown(false);
+            if (!event.altKey)
+                return;
+            insertOrUpdateNote(event);
+        }} onDblClick={(event) => {
+            insertOrUpdateNote(event);
+        }} onClick={(event) => {
+            if (newNote()) {
+                setNewNoteIndex(-1);
+                return;
+            }
+            if (!event.altKey)
+                return;
+            insertOrUpdateNote(event);
         }}>
-      <div class="PianoRoll-Notes" ref={props.ref} style={{
-            position: "relative",
-            width: `${context.clientRect.width}px`,
-            height: "100%",
-        }}>
-        <Index each={context.notes}>
-          {(note, index) => {
-            const horizontalVirtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - note().midi, 1));
-            const verticalVirtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(note().ticks, note().durationTicks));
-            return (<Show when={!!horizontalVirtualDimensions().size && !!verticalVirtualDimensions().size}>
-                <div class="PianoRoll-Note" onMouseMove={(event) => {
-                    if (context.isDragging)
+      <Index each={context.notes}>
+        {(note, index) => {
+            const verticalVirtualDimensionss = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - note().midi, 1));
+            const horizontalDimensions = createMemo(() => horizontalViewPort().calculatePixelDimensions(note().ticks, note().durationTicks));
+            return (<Show when={!!verticalVirtualDimensionss().size && !!horizontalDimensions().size}>
+              <div class={getClasses(noteDragMode()).join(" ")} onMouseMove={(event) => {
+                    if (isDragging())
                         return;
-                    const relativeX = context.horizontalViewPort.getScaledValue(context.horizontalViewPort.getPosition(event.clientX));
-                    const noteStartX = context.horizontalViewPort.getScaledValue(note().ticks);
-                    const noteEndX = context.horizontalViewPort.getScaledValue(note().ticks + note().durationTicks);
-                    context.onNoteDragModeChange(relativeX - noteStartX < 3
+                    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={() => {
+                }} onDblClick={(event) => {
+                    event.stopPropagation();
                     context.onRemoveNote?.(index);
                 }} onMouseDown={(event) => {
-                    context.onIsDraggingChange(true);
-                    const initialPosition = context.horizontalViewPort.getPosition(event.clientX);
+                    event.stopPropagation();
+                    setIsDragging(true);
+                    const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
                     const diffPosition = initialPosition - note().ticks;
                     const handleMouseMove = (mouseMoveEvent) => {
-                        const ticks = snapValueToGridIfEnabled(Math.max(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) -
+                        const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
                             diffPosition, 0), mouseMoveEvent.altKey);
                         context.onNoteChange?.(index, {
                             ...note(),
-                            ...(context.noteDragMode === "move" && {
-                                midi: Math.round(127 - context.verticalViewPort.getPosition(mouseMoveEvent.clientY)),
+                            ...(noteDragMode() === "move" && {
+                                midi: Math.round(127 - verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
                             }),
-                            ...((context.noteDragMode === "move" ||
-                                context.noteDragMode === "trimStart") && {
+                            ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
                                 ticks,
                             }),
-                            ...(context.noteDragMode === "trimStart" && {
+                            ...(noteDragMode() === "trimStart" && {
                                 durationTicks: note().durationTicks + note().ticks - ticks,
                             }),
-                            ...(context.noteDragMode === "trimEnd" && {
-                                durationTicks: snapValueToGridIfEnabled(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) -
+                            ...(noteDragMode() === "trimEnd" && {
+                                durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
                                     note().ticks, mouseMoveEvent.altKey),
                             }),
                         });
                     };
                     const handleMouseUp = () => {
-                        context.onIsDraggingChange(false);
+                        setIsDragging(false);
                         window.removeEventListener("mousemove", handleMouseMove);
                         window.removeEventListener("mouseup", handleMouseUp);
                     };
                     window.addEventListener("mousemove", handleMouseMove);
                     window.addEventListener("mouseup", handleMouseUp);
                 }} style={{
-                    "z-index": 2,
-                    position: "absolute",
-                    "box-sizing": "border-box",
-                    top: `${horizontalVirtualDimensions().offset}px`,
-                    height: `${horizontalVirtualDimensions().size}px`,
-                    left: `${verticalVirtualDimensions().offset}px`,
-                    width: `${verticalVirtualDimensions().size}px`,
-                    "border-width": "0.5px",
-                    "border-style": "solid",
                     "background-color": `rgba(255,0,0, ${(128 + note().velocity) / 256})`,
-                    "border-color": "#a00",
+                    top: `${verticalVirtualDimensionss().offset}px`,
+                    height: `${verticalVirtualDimensionss().size}px`,
+                    left: `${horizontalDimensions().offset}px`,
+                    width: `${horizontalDimensions().size}px`,
                 }}></div>
-              </Show>);
+            </Show>);
         }}
-        </Index>
-      </div>
+      </Index>
     </div>);
 };
 export default PianoRollNotes;

package/dist/source/usePianoRoll.js

@@ -8,7 +8,7 @@ const usePianoRoll = () => {
     const [gridDivision, onGridDivisionChange] = createSignal(16);
     const [snapToGrid, onSnapToGridChange] = createSignal(true);
     const [notes, onNotesChange] = createSignal([]);
-    const [duration, setDuration] = createSignal(0);
+    const [duration, onDurationChange] = createSignal(0);
     const onNoteChange = (index, note) => {
         onNotesChange([...notes().slice(0, index), note, ...notes().splice(index + 1)]);
     };
@@ -21,8 +21,10 @@ const usePianoRoll = () => {
         onNotesChange([...notes().slice(0, index), ...notes().splice(index + 1)]);
     };
     createEffect(() => {
-        setDuration(Math.max((notes()[notes().length - 1]?.ticks ?? 0) +
-            (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4));
+        const minDuration = Math.max((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4);
+        if (duration() < minDuration) {
+            onDurationChange(minDuration);
+        }
     });
     return {
         ppq,
@@ -45,6 +47,7 @@ const usePianoRoll = () => {
         onInsertNote,
         onRemoveNote,
         duration,
+        onDurationChange,
     };
 };
 export default usePianoRoll;

package/dist/source/viewport/HorizontalZoomControl.jsx

@@ -0,0 +1,9 @@
+import { usePianoRollContext } from "../PianoRollContext";
+const HorizontalZoomControl = (props) => {
+    const context = usePianoRollContext();
+    return (<input max="500" min="1" step={0.01} {...props} value={context.zoom} onInput={(event) => context.onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" style={{
+            "margin-left": "50px",
+            "margin-right": "16px",
+        }}/>);
+};
+export default HorizontalZoomControl;

package/dist/source/viewport/ScrollContainer.jsx

@@ -0,0 +1,87 @@
+import { createEffect, createMemo } from "solid-js";
+import { useViewPortDimension } from "./ScrollZoomViewPort";
+const ScrollContainer = (props) => {
+    let scrollContentRef;
+    const verticalViewPort = createMemo(() => useViewPortDimension("vertical"));
+    const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
+    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));
+            }
+        }
+    };
+    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} class="PianoRoll-Scroller" style={{
+            height: "100%",
+            width: "100%",
+            "z-index": 4,
+            overflow: "scroll",
+            "pointer-events": "auto",
+        }} onScroll={handleScroll} onWheel={handleWheel}>
+      <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 ScrollContainer;

package/dist/source/viewport/ScrollZoomViewPort.jsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "solid-js";
+import createViewPortDimension from "./createViewPortDimension";
+export const ScrollZoomViewPort = (props) => {
+    const viewPorts = Object.entries(props.dimensions).map(([name, viewPortProps]) => createViewPortDimension(() => ({ name: name, ...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/VerticalZoomControl.jsx

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

package/dist/source/viewport/createViewPortDimension.js

@@ -0,0 +1,39 @@
+import { createEffect } from "solid-js";
+import { createStore } from "solid-js/store";
+export default function createViewPortDimension(getState) {
+    const getStateWithFunctions = () => ({
+        ...getState(),
+        calculatePixelValue,
+        calculatePosition,
+        calculatePixelDimensions,
+        calculateVisibleRange,
+        calculateMaxPosition,
+    });
+    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 };
+    }
+    return state;
+}
+export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));

package/dist/types/PianoRoll.d.ts

@@ -6,6 +6,7 @@ export type PianoRollProps = {
     notes: Note[];
     gridDivision: GridDivision;
     snapToGrid: boolean;
+    condensed?: boolean;
     verticalPosition: number;
     verticalZoom: number;
     position: number;

package/dist/types/PianoRollContext.d.ts

@@ -1,23 +1,3 @@
-import { JSX } from "solid-js";
 import { PianoRollProps } from "./PianoRoll";
-import { ClientRect } from "./useBoundingClientRect";
-import { ViewPortScaler } from "./useViewPortScaler";
-export type NoteDragMode = "trimStart" | "move" | "trimEnd" | undefined;
-type PianoRollContext = {
-    horizontalViewPort: ViewPortScaler;
-    verticalViewPort: ViewPortScaler;
-    clientRect: ClientRect;
-    notesContainer?: HTMLDivElement;
-    isDragging: boolean;
-    onIsDraggingChange: (isDragging: boolean) => void;
-    noteDragMode: NoteDragMode;
-    onNoteDragModeChange: (isDragging: NoteDragMode) => void;
-} & PianoRollProps;
-declare const PianoRollContext: import("solid-js").Context<PianoRollContext>;
-export declare const PianoRollContextProvider: (props: {
-    scrollContainer?: HTMLDivElement;
-    notesContainer?: HTMLDivElement;
-    children: JSX.Element;
-} & PianoRollProps) => JSX.Element;
-export declare const usePianoRollContext: () => PianoRollContext;
-export {};
+export declare const PianoRollContextProvider: import("solid-js/types/reactive/signal").ContextProviderComponent<PianoRollProps>;
+export declare const usePianoRollContext: () => PianoRollProps;

package/dist/types/PianoRollNotes.d.ts

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

package/dist/types/usePianoRoll.d.ts

@@ -21,5 +21,6 @@ declare const usePianoRoll: () => {
     onInsertNote: (note: Note) => number;
     onRemoveNote: (index: number) => void;
     duration: import("solid-js").Accessor<number>;
+    onDurationChange: import("solid-js").Setter<number>;
 };
 export default usePianoRoll;

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { ParentProps } from "solid-js";
+import { ViewPortDimensionName, ViewPortDimensionState } from "./createViewPortDimension";
+export declare const ScrollZoomViewPort: (props: ParentProps<{
+    dimensions: Record<ViewPortDimensionName, () => Omit<ViewPortDimensionState, "name">>;
+}>) => import("solid-js").JSX.Element;
+export declare const useViewPortDimension: (name: ViewPortDimensionName) => {
+    calculatePixelValue: (position?: number) => number;
+    calculatePosition: (offset: number) => number;
+    calculatePixelDimensions: (position: number, length: number) => {
+        offset: number;
+        size: number;
+    };
+    calculateVisibleRange: () => number;
+    calculateMaxPosition: () => number;
+    position: number;
+    range: number;
+    pixelOffset: number;
+    pixelSize: number;
+    name: ViewPortDimensionName;
+    onZoomChange?: (zoom: number) => void;
+    onPositionChange?: (zoom: number) => void;
+    zoom: number;
+};

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

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

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

@@ -0,0 +1,31 @@
+export type ViewPortDimension = ReturnType<typeof createViewPortDimension>;
+export type ViewPortDimensionName = "horizontal" | "vertical";
+export type ViewPortDimensionState = {
+    position: number;
+    range: number;
+    pixelOffset: number;
+    pixelSize: number;
+    name: ViewPortDimensionName;
+    onZoomChange?: (zoom: number) => void;
+    onPositionChange?: (zoom: number) => void;
+    zoom: number;
+};
+export default function createViewPortDimension(getState: () => ViewPortDimensionState): {
+    calculatePixelValue: (position?: number) => number;
+    calculatePosition: (offset: number) => number;
+    calculatePixelDimensions: (position: number, length: number) => {
+        offset: number;
+        size: number;
+    };
+    calculateVisibleRange: () => number;
+    calculateMaxPosition: () => number;
+    position: number;
+    range: number;
+    pixelOffset: number;
+    pixelSize: number;
+    name: ViewPortDimensionName;
+    onZoomChange?: (zoom: number) => void;
+    onPositionChange?: (zoom: number) => void;
+    zoom: number;
+};
+export declare const clamp: (value: number, min: number, max: number) => number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.8",
+  "version": "0.0.10",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -50,6 +50,12 @@
     "solid-js": ">=1.0.0"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "postcss": "^8.4.20",
     "prettier": "2.8.1",
     "rollup": "^3.7.2",

package/dist/source/HorizontalZoomControl.jsx

@@ -1,9 +0,0 @@
-import { usePianoRollContext } from "./PianoRollContext";
-const HorizontalZoomControl = () => {
-    const context = usePianoRollContext();
-    return (<input value={context.zoom} onInput={(event) => context.onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" max="500" min="1" step={0.01} style={{
-            "margin-left": "50px",
-            "margin-right": "16px",
-        }}/>);
-};
-export default HorizontalZoomControl;