solid-pianoroll 0.0.2 → 0.0.4

package/dist/source/PianoRollGrid.jsx

@@ -0,0 +1,60 @@
+import { createMemo, Index, Show } from "solid-js";
+import { usePianoRollContext } from "./PianoRollContext";
+import { blackKeys, keys } from "./PianoRollKeys";
+const PianoRollGrid = () => {
+    const context = usePianoRollContext();
+    const gridDivisorTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
+    const gridArray = createMemo(() => {
+        const numberOfLines = context.duration / gridDivisorTicks();
+        return Array.from({ length: numberOfLines }).map((_, index) => index * gridDivisorTicks());
+    });
+    return (<div class="PianoRoll-Grid-Container" style={{
+            position: "absolute",
+            width: `${context.clientRect.width}px`,
+            height: `${context.clientRect.height}px`,
+        }}>
+      <div class="PianoRoll-Grid" style={{
+            position: "relative",
+            width: `${context.clientRect.width}px`,
+            height: "100%",
+        }}>
+        <Index each={gridArray()}>
+          {(tick, index) => {
+            const virtualDimensions = createMemo(() => context.horizontalViewPort.getVirtualDimensions(tick(), gridDivisorTicks()));
+            return (<Show when={virtualDimensions().size > 0}>
+                <div class="PianoRoll-Grid-Time" style={{
+                    "z-index": 1,
+                    position: "absolute",
+                    "box-sizing": "border-box",
+                    background: index % 4 === 0 ? "#ccc" : "#ddd",
+                    top: `0px`,
+                    height: `100%`,
+                    left: `${virtualDimensions().offset}px`,
+                    width: `${virtualDimensions().size}px`,
+                    "border-left": "1px gray solid",
+                }}></div>
+              </Show>);
+        }}
+        </Index>
+        <Index each={keys}>
+          {(key) => {
+            const virtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - key().number, 1));
+            return (<Show when={virtualDimensions().size > 0}>
+                <div class="PianoRoll-Grid-Key" style={{
+                    position: "absolute",
+                    top: `${virtualDimensions().offset}px`,
+                    height: `${virtualDimensions().size}px`,
+                    width: "100%",
+                    "background-color": key().isBlack ? "rgba(0,0,0,0.2)" : "none",
+                    "border-style": "solid",
+                    "border-color": "gray",
+                    "border-width": `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`,
+                    "z-index": 1,
+                }}></div>
+              </Show>);
+        }}
+        </Index>
+      </div>
+    </div>);
+};
+export default PianoRollGrid;

package/dist/source/PianoRollKeys.jsx

@@ -0,0 +1,29 @@
+import styles from "./PianoRollKeys.module.css";
+import { createMemo, Index, Show } from "solid-js";
+import { usePianoRollContext } from "./PianoRollContext";
+const PianoRollKeys = () => {
+    const context = usePianoRollContext();
+    return (<div class={styles.PianoRollKeys}>
+      <Index each={keys}>
+        {(key) => {
+            const virtualDimensions = createMemo(() => context.verticalViewPort.getVirtualDimensions(127 - key().number, 1));
+            return (<Show when={virtualDimensions().size > 0}>
+              <div class={styles["PianoRollKeys-Key"]} title={key().name} data-index={key().number % 12} style={{
+                    top: `${virtualDimensions().offset}px`,
+                    height: `${virtualDimensions().size}px`,
+                    "background-color": key().isBlack ? "#000" : "#fff",
+                    "border-width": `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`,
+                }}></div>
+            </Show>);
+        }}
+      </Index>
+    </div>);
+};
+export const blackKeys = [1, 3, 6, 8, 10];
+export const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+export const keys = Array.from({ length: 128 }).map((_, index) => ({
+    number: index,
+    name: `${keyNames[index % 12]} ${Math.floor(index / 12) - 2}`,
+    isBlack: blackKeys.includes(index % 12),
+}));
+export default PianoRollKeys;

package/dist/source/PianoRollNotes.jsx

@@ -0,0 +1,86 @@
+import { createMemo, Index, Show } from "solid-js";
+import { usePianoRollContext } from "./PianoRollContext";
+const PianoRollNotes = (props) => {
+    const context = usePianoRollContext();
+    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`,
+        }}>
+      <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)
+                        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
+                        ? "trimStart"
+                        : noteEndX - relativeX < 3
+                            ? "trimEnd"
+                            : "move");
+                }} onMouseDown={(event) => {
+                    context.onIsDraggingChange(true);
+                    const initialPosition = context.horizontalViewPort.getPosition(event.clientX);
+                    const diffPosition = initialPosition - note().ticks;
+                    const handleMouseMove = (mouseMoveEvent) => {
+                        const ticks = snapValueToGridIfEnabled(Math.max(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) -
+                            diffPosition, 0), mouseMoveEvent.altKey);
+                        context.onNoteChange?.(index, {
+                            ...note(),
+                            ...(context.noteDragMode === "move" && {
+                                midi: Math.round(127 - context.verticalViewPort.getPosition(mouseMoveEvent.clientY)),
+                            }),
+                            ...((context.noteDragMode === "move" ||
+                                context.noteDragMode === "trimStart") && {
+                                ticks,
+                            }),
+                            ...(context.noteDragMode === "trimStart" && {
+                                durationTicks: note().durationTicks + note().ticks - ticks,
+                            }),
+                            ...(context.noteDragMode === "trimEnd" && {
+                                durationTicks: snapValueToGridIfEnabled(context.horizontalViewPort.getPosition(mouseMoveEvent.clientX) -
+                                    note().ticks, mouseMoveEvent.altKey),
+                            }),
+                        });
+                    };
+                    const handleMouseUp = () => {
+                        context.onIsDraggingChange(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",
+                }}></div>
+              </Show>);
+        }}
+        </Index>
+      </div>
+    </div>);
+};
+export default PianoRollNotes;

package/dist/source/ScrollContainer.jsx

@@ -0,0 +1,84 @@
+import { createEffect } from "solid-js";
+import { clamp } from "./helpers";
+import { usePianoRollContext } from "./PianoRollContext";
+const ScrollContainer = (props) => {
+    let scrollContentRef;
+    const context = usePianoRollContext();
+    const forwardEventToNote = (event) => {
+        const x = "clientX" in event ? event.clientX : event.touches[0]?.clientX;
+        const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY;
+        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 = 128 - 128 / context.verticalZoom;
+        const maxPosition = context.duration - context.duration / context.zoom;
+        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 = 128 - 128 / context.verticalZoom;
+        const maxPosition = context.duration - context.duration / context.zoom;
+        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 = clamp(context.verticalZoom * height, height, 10000);
+        const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+        const scrollDivWidth = clamp(context.zoom * width, width, 10000);
+        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-Vertical-Scroller" style={{
+            flex: 1,
+            ...(context.noteDragMode && {
+                cursor: context.noteDragMode === "trimStart"
+                    ? "w-resize"
+                    : context.noteDragMode === "trimEnd"
+                        ? "e-resize"
+                        : "pointer",
+            }),
+            //"box-sizing": "border-box",
+            "z-index": 4,
+            overflow: "scroll",
+            "pointer-events": "auto",
+        }} onScroll={handleScroll} onMouseDown={forwardEventToNote} onMouseMove={(event) => {
+            if (forwardEventToNote(event))
+                return;
+            if (context.isDragging)
+                return;
+            context.onNoteDragModeChange(undefined);
+        }} onClick={forwardEventToNote} onDblClick={(event) => {
+            if (!forwardEventToNote(event)) {
+                //TODO create new note with current gutter length
+            }
+        }} onMouseUp={forwardEventToNote} 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

@@ -0,0 +1,12 @@
+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/useBoundingClientRect.js

@@ -0,0 +1,29 @@
+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/types/HorizontalZoomControl.d.ts

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

package/dist/types/PianoRoll.d.ts

@@ -1,9 +1,12 @@
 import { Midi } from "@tonejs/midi";
 import { JSX } from "solid-js";
 type Note = Pick<ReturnType<Midi["tracks"][number]["notes"][number]["toJSON"]>, "durationTicks" | "midi" | "ticks" | "velocity">;
-type PianoRollProps = {
+export type GridDivision = 1 | 2 | 4 | 8 | 16 | 32 | 64;
+export type PianoRollProps = {
     ppq: number;
     notes: Note[];
+    gridDivision: GridDivision;
+    snapToGrid: boolean;
     verticalPosition: number;
     verticalZoom: number;
     position: number;
@@ -14,6 +17,6 @@ type PianoRollProps = {
     onZoomChange?: (zoom: number) => void;
     onPositionChange?: (zoom: number) => void;
     onNoteChange?: (index: number, note: Note) => void;
-} & JSX.IntrinsicElements["div"];
-declare const PianoRoll: (allProps: PianoRollProps) => JSX.Element;
+};
+declare const PianoRoll: (allProps: PianoRollProps & JSX.IntrinsicElements["div"]) => JSX.Element;
 export default PianoRoll;

package/dist/types/PianoRollContext.d.ts

@@ -0,0 +1,23 @@
+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 {};

package/dist/types/PianoRollGrid.d.ts

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

package/dist/types/PianoRollKeys.d.ts

@@ -0,0 +1,9 @@
+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

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

package/dist/types/ScrollContainer.d.ts

@@ -0,0 +1,5 @@
+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

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

package/dist/types/useBoundingClientRect.d.ts

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

package/dist/types/useViewPortScaler.d.ts

@@ -1,3 +1,4 @@
+export type ViewPortScaler = ReturnType<typeof useViewPortScaler>;
 export default function useViewPortScaler(getState: () => {
     virtualPosition: number;
     virtualRange: number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.0.4",
   "name": "solid-pianoroll",
   "description": "Pianoroll UI Control for Solid JS apps",
   "license": "MIT",
@@ -50,12 +50,15 @@
     "solid-js": ">=1.0.0"
   },
   "devDependencies": {
+    "postcss": "^8.4.20",
     "prettier": "2.8.1",
     "rollup": "^3.7.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-preset-solid": "^2.0.1",
     "solid-js": "^1.6.4",
     "taze": "^0.8.4",
     "typescript": "^4.9.4",
+    "typescript-plugin-css-modules": "^4.1.1",
     "vite": "^4.0.0",
     "vite-plugin-solid": "^2.5.0"
   },