solid-pianoroll 0.0.2

package/dist/source/PianoRoll.jsx

@@ -0,0 +1,282 @@
+import { createMemo, splitProps, createSignal, onMount, onCleanup, Index, createEffect, Show, } from "solid-js";
+import { clamp } from "./helpers";
+import useViewPortScaler from "./useViewPortScaler";
+const PianoRoll = (allProps) => {
+    let scrollContainerRef;
+    let scrollContentRef;
+    let notesContainerRef;
+    const [props, divProps] = splitProps(allProps, [
+        "ppq",
+        "notes",
+        "position",
+        "duration",
+        "zoom",
+        "verticalPosition",
+        "verticalZoom",
+        "onVerticalZoomChange",
+        "onVerticalPositionChange",
+        "onZoomChange",
+        "onPositionChange",
+        "onNoteChange",
+    ]);
+    const [dimensions, setDimensions] = createSignal({
+        left: 0,
+        width: 0,
+        top: 0,
+        height: 0,
+    });
+    const resizeObserver = new ResizeObserver((event) => {
+        const { left, top, width, height } = scrollContainerRef?.getBoundingClientRect() ?? {
+            left: 0,
+            width: 0,
+            top: 0,
+            height: 0,
+        };
+        setDimensions({ left, top, width, height });
+    });
+    createEffect(() => {
+        console.log(props.notes);
+    });
+    onMount(() => {
+        if (!scrollContainerRef)
+            return;
+        resizeObserver.observe(scrollContainerRef);
+    });
+    onCleanup(() => {
+        resizeObserver.disconnect();
+    });
+    const horizontalViewPort = useViewPortScaler(() => ({
+        viewPortOffset: dimensions().left,
+        viewPortSize: dimensions().width,
+        virtualPosition: props.position,
+        virtualRange: props.duration,
+        zoom: props.zoom,
+    }));
+    const verticalViewPort = useViewPortScaler(() => ({
+        viewPortOffset: dimensions().top,
+        viewPortSize: dimensions().height,
+        virtualPosition: props.verticalPosition,
+        virtualRange: 128,
+        zoom: props.verticalZoom,
+    }));
+    const handleScroll = (event) => {
+        event.preventDefault();
+        if (didUpdateScroll) {
+            didUpdateScroll = false;
+            return;
+        }
+        const maxVerticalPosition = 128 - 128 / props.verticalZoom;
+        const maxPosition = props.duration - props.duration / props.zoom;
+        const { width, height } = dimensions();
+        const { scrollTop, scrollLeft, scrollWidth, scrollHeight } = event.currentTarget;
+        const scrollTopAmount = scrollTop / (scrollHeight - height);
+        const scrollLeftAmount = scrollLeft / (scrollWidth - width);
+        props.onVerticalPositionChange?.(maxVerticalPosition * scrollTopAmount);
+        props.onPositionChange?.(maxPosition * scrollLeftAmount);
+    };
+    let didUpdateScroll = false;
+    createEffect(() => {
+        const maxVerticalPosition = 128 - 128 / props.verticalZoom;
+        const maxPosition = props.duration - props.duration / props.zoom;
+        const scrollTopAmount = maxVerticalPosition > 0 ? props.verticalPosition / maxVerticalPosition : 0;
+        const scrollLeftAmount = maxPosition > 0 ? props.position / maxPosition : 0;
+        const { height, width } = dimensions();
+        if (!scrollContentRef?.parentElement)
+            return;
+        const scrollDivHeight = clamp(props.verticalZoom * height, height, 10000);
+        const scrollTop = scrollTopAmount * (scrollDivHeight - height);
+        const scrollDivWidth = clamp(props.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,
+        });
+    });
+    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 = [...(notesContainerRef?.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 [noteDragMode, setNoteDragMode] = createSignal();
+    const [isDragging, setIsDragging] = createSignal(false);
+    return (<div {...divProps} class="PianoRoll" style={{
+            "box-sizing": "border-box",
+            display: "flex",
+            overflow: "hidden",
+            "flex-direction": "column",
+            padding: "16px",
+            ...(typeof divProps.style === "object" && divProps.style),
+        }}>
+      <div style={{
+            overflow: "hidden",
+            height: "100%",
+            display: "flex",
+            "flex-direction": "row",
+        }}>
+        <div class="PianoRoll-Keys" style={{
+            position: "relative",
+            height: "100%",
+            width: `${50}px`,
+        }}>
+          <Index each={keys}>
+            {(key) => {
+            const virtualDimensions = createMemo(() => verticalViewPort.getVirtualDimensions(127 - key().number, 1));
+            return (<Show when={virtualDimensions().size > 0}>
+                  <div class="PianoRoll-Key" title={key().name} data-index={key().number % 12} style={{
+                    position: "absolute",
+                    "box-sizing": "border-box",
+                    left: 0,
+                    top: `${virtualDimensions().offset}px`,
+                    height: `${virtualDimensions().size}px`,
+                    width: "100%",
+                    "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`,
+                    "border-color": "#000",
+                    "border-style": "solid",
+                }}></div>
+                </Show>);
+        }}
+          </Index>
+        </div>
+
+        <div style={{
+            position: "relative",
+            display: "flex",
+            overflow: "hidden",
+            flex: 1,
+        }}>
+          <div class="PianoRoll-Notes-Container" style={{
+            position: "absolute",
+            width: `${dimensions().width}px`,
+            height: `${dimensions().height}px`,
+        }}>
+            <div class="PianoRoll-Notes" ref={notesContainerRef} style={{
+            position: "relative",
+            width: `${dimensions().width}px`,
+            height: "100%",
+        }}>
+              <Index each={props.notes}>
+                {(note, index) => {
+            const horizontalVirtualDimensions = createMemo(() => verticalViewPort.getVirtualDimensions(127 - note().midi, 1));
+            const verticalVirtualDimensions = createMemo(() => horizontalViewPort.getVirtualDimensions(note().ticks, note().durationTicks));
+            return (<Show when={!!horizontalVirtualDimensions().size && !!verticalVirtualDimensions().size}>
+                      <div class="PianoRoll-Note" onMouseMove={(event) => {
+                    if (isDragging())
+                        return;
+                    const relativeX = horizontalViewPort.getScaledValue(horizontalViewPort.getPosition(event.clientX));
+                    const noteStartX = horizontalViewPort.getScaledValue(note().ticks);
+                    const noteEndX = horizontalViewPort.getScaledValue(note().ticks + note().durationTicks);
+                    setNoteDragMode(relativeX - noteStartX < 3
+                        ? "trimStart"
+                        : noteEndX - relativeX < 3
+                            ? "trimEnd"
+                            : "move");
+                }} onMouseDown={(event) => {
+                    setIsDragging(true);
+                    const initialPosition = horizontalViewPort.getPosition(event.clientX);
+                    const diffPosition = initialPosition - note().ticks;
+                    const handleMouseMove = (mouseMoveEvent) => {
+                        const ticks = Math.max(horizontalViewPort.getPosition(mouseMoveEvent.clientX) - diffPosition, 0);
+                        props.onNoteChange?.(index, {
+                            ...note(),
+                            midi: Math.round(127 - verticalViewPort.getPosition(mouseMoveEvent.clientY)),
+                            ...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
+                                ticks,
+                            }),
+                            ...(noteDragMode() === "trimStart" && {
+                                durationTicks: note().durationTicks + note().ticks - ticks,
+                            }),
+                            ...(noteDragMode() === "trimEnd" && {
+                                durationTicks: horizontalViewPort.getPosition(mouseMoveEvent.clientX) -
+                                    note().ticks,
+                            }),
+                        });
+                    };
+                    const handleMouseUp = () => {
+                        setIsDragging(false);
+                        window.removeEventListener("mousemove", handleMouseMove);
+                        window.removeEventListener("mouseup", handleMouseUp);
+                    };
+                    window.addEventListener("mousemove", handleMouseMove);
+                    window.addEventListener("mouseup", handleMouseUp);
+                }} style={{
+                    "z-index": 1,
+                    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": "#f00",
+                    "border-color": "#a00",
+                }}></div>
+                    </Show>);
+        }}
+              </Index>
+            </div>
+          </div>
+          <div ref={scrollContainerRef} class="PianoRoll-Vertical-Scroller" style={{
+            flex: 1,
+            ...(noteDragMode() && {
+                cursor: noteDragMode() === "trimStart"
+                    ? "w-resize"
+                    : noteDragMode() === "trimEnd"
+                        ? "e-resize"
+                        : "pointer",
+            }),
+            //"box-sizing": "border-box",
+            "z-index": 1,
+            overflow: "scroll",
+            "pointer-events": "auto",
+        }} onScroll={handleScroll} onMouseDown={forwardEventToNote} onMouseMove={(event) => {
+            if (forwardEventToNote(event))
+                return;
+            if (isDragging())
+                return;
+            setNoteDragMode(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>
+        </div>
+
+        <input value={props.verticalZoom} onInput={(event) => props.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 */,
+            },
+        }}/>
+      </div>
+
+      <input value={props.zoom} onInput={(event) => props.onZoomChange?.(event.currentTarget.valueAsNumber)} type="range" max="500" min="1" step={0.01} style={{
+            "margin-left": "50px",
+            "margin-right": "16px",
+        }}/>
+    </div>);
+};
+const blackKeys = [1, 3, 6, 8, 10];
+const keyNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+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 PianoRoll;

package/dist/source/helpers.js

@@ -0,0 +1,3 @@
+export const clamp = (value, min, max) => {
+    return Math.max(min, Math.min(max, value));
+};

package/dist/source/index.jsx

@@ -0,0 +1,2 @@
+import PianoRoll from "./PianoRoll";
+export { PianoRoll };

package/dist/source/useViewPortScaler.js

@@ -0,0 +1,31 @@
+import { createMemo } from "solid-js";
+import { clamp } from "./helpers";
+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 getPosition(offset) {
+        const visibleDuration = state().virtualRange / state().zoom;
+        const percentX = (offset - state().viewPortOffset) / state().viewPortSize;
+        const position = state().virtualPosition + percentX * visibleDuration;
+        return position;
+    }
+    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,
+    };
+}

package/dist/types/PianoRoll.d.ts

@@ -0,0 +1,19 @@
+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 = {
+    ppq: number;
+    notes: Note[];
+    verticalPosition: number;
+    verticalZoom: number;
+    position: number;
+    duration: number;
+    zoom: number;
+    onVerticalZoomChange?: (zoom: number) => void;
+    onVerticalPositionChange?: (zoom: number) => void;
+    onZoomChange?: (zoom: number) => void;
+    onPositionChange?: (zoom: number) => void;
+    onNoteChange?: (index: number, note: Note) => void;
+} & JSX.IntrinsicElements["div"];
+declare const PianoRoll: (allProps: PianoRollProps) => JSX.Element;
+export default PianoRoll;

package/dist/types/helpers.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import PianoRoll from "./PianoRoll";
+export { PianoRoll };

package/dist/types/useViewPortScaler.d.ts

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

package/package.json

@@ -0,0 +1,65 @@
+{
+  "version": "0.0.2",
+  "name": "solid-pianoroll",
+  "description": "Pianoroll UI Control for Solid JS apps",
+  "license": "MIT",
+  "author": "jdachtera",
+  "contributors": [],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jdachtera/solid-pianoroll.git"
+  },
+  "homepage": "https://github.com/jdachtera/solid-pianoroll#readme",
+  "bugs": {
+    "url": "https://github.com/jdachtera/solid-pianoroll/issues"
+  },
+  "private": false,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "solid": "./dist/source/index.jsx",
+      "import": "./dist/esm/index.js",
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "require": "./dist/cjs/index.js",
+      "node": "./dist/cjs/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build-dev": "vite build dev",
+    "test": "echo \"test not setup\"",
+    "build": "rollup -c && yarn build-dev",
+    "prepublishOnly": "yarn build",
+    "format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"dev/**/*.{js,ts,json,css,tsx,jsx}\"",
+    "update-deps": "taze -w && yarn",
+    "typecheck": "tsc --noEmit"
+  },
+  "optionalDependencies": {
+    "@tonejs/midi": "^2.0.28"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.0.0"
+  },
+  "devDependencies": {
+    "prettier": "2.8.1",
+    "rollup": "^3.7.2",
+    "rollup-preset-solid": "^2.0.1",
+    "solid-js": "^1.6.4",
+    "taze": "^0.8.4",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.0",
+    "vite-plugin-solid": "^2.5.0"
+  },
+  "keywords": [
+    "solid"
+  ]
+}