solid-pianoroll 0.0.6 → 0.0.8

package/README.md

@@ -24,7 +24,7 @@ pnpm add solid-pianoroll
 
 Use it:
 
-### Interactive waveform
+### Interactive PianoRoll
 
 ```tsx
 import { PianoRoll } from "solid-pianoroll";

package/dist/cjs/index.js

@@ -61,10 +61,6 @@ function useBoundingClientRect(containerRef) {
   return boundingClientRect;
 }
 
-const clamp = (value, min, max) => {
-  return Math.max(min, Math.min(max, value));
-};
-
 function useViewPortScaler(getState) {
   const state = solidJs.createMemo(() => getState());
   function getScaledValue(position) {
@@ -74,12 +70,20 @@ function useViewPortScaler(getState) {
   function getCoordinates(position) {
     return getScaledValue(position) - getScaledValue(state().virtualPosition);
   }
+  function getVisibleRange() {
+    return state().virtualRange / state().zoom;
+  }
   function getPosition(offset) {
-    const visibleDuration = state().virtualRange / state().zoom;
     const percentX = (offset - state().viewPortOffset) / state().viewPortSize;
-    const position = state().virtualPosition + percentX * visibleDuration;
+    const position = state().virtualPosition + percentX * getVisibleRange();
     return position;
   }
+  function getMaxPosition() {
+    return state().virtualRange - state().virtualRange / state().zoom;
+  }
+  function getScrollSize() {
+    return clamp(state().zoom * state().viewPortSize, state().viewPortSize, 100000);
+  }
   function getVirtualDimensions(position, length) {
     const virtualLeft = getCoordinates(position);
     const virtualWidth = getScaledValue(length);
@@ -94,9 +98,15 @@ function useViewPortScaler(getState) {
     getScaledValue,
     getCoordinates,
     getPosition,
-    getVirtualDimensions
+    getVirtualDimensions,
+    getVisibleRange,
+    getMaxPosition,
+    getScrollSize
   };
 }
+const clamp = (value, min, max) => {
+  return Math.max(min, Math.min(max, value));
+};
 
 const PianoRollContext = solidJs.createContext(undefined);
 const PianoRollContextProvider = props => {
@@ -109,13 +119,13 @@ const PianoRollContextProvider = props => {
     viewPortSize: clientRect().width,
     virtualPosition: props.position,
     virtualRange: props.duration,
-    zoom: props.zoom
+    zoom: props.zoom * (500 / clientRect().width)
   }));
   const verticalViewPort = useViewPortScaler(() => ({
     viewPortOffset: clientRect().top,
     viewPortSize: clientRect().height,
     virtualPosition: props.verticalPosition,
-    zoom: props.verticalZoom,
+    zoom: props.verticalZoom * (500 / clientRect().height),
     virtualRange: 128
   }));
   const getContextValue = () => {
@@ -345,8 +355,8 @@ const ScrollContainer = props => {
   const context = usePianoRollContext();
   const gridDivisorTicks = solidJs.createMemo(() => context.ppq * 4 / context.gridDivision);
   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 x = "clientX" in event ? event.clientX : event.touches[0]?.clientX ?? 0;
+    const y = "clientY" in event ? event.clientY : event.touches[0]?.clientY ?? 0;
     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;
@@ -361,8 +371,8 @@ const ScrollContainer = props => {
       didUpdateScroll = false;
       return;
     }
-    const maxVerticalPosition = 128 - 128 / context.verticalZoom;
-    const maxPosition = context.duration - context.duration / context.zoom;
+    const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
+    const maxPosition = context.horizontalViewPort.getMaxPosition();
     const {
       width,
       height
@@ -380,8 +390,8 @@ const ScrollContainer = props => {
   };
   let didUpdateScroll = false;
   solidJs.createEffect(() => {
-    const maxVerticalPosition = 128 - 128 / context.verticalZoom;
-    const maxPosition = context.duration - context.duration / context.zoom;
+    const maxVerticalPosition = context.verticalViewPort.getMaxPosition();
+    const maxPosition = context.horizontalViewPort.getMaxPosition();
     const scrollTopAmount = maxVerticalPosition > 0 ? context.verticalPosition / maxVerticalPosition : 0;
     const scrollLeftAmount = maxPosition > 0 ? context.position / maxPosition : 0;
     const {
@@ -389,9 +399,9 @@ const ScrollContainer = props => {
       width
     } = context.clientRect;
     if (!scrollContentRef?.parentElement) return;
-    const scrollDivHeight = clamp(context.verticalZoom * height, height, 10000);
+    const scrollDivHeight = context.verticalViewPort.getScrollSize();
     const scrollTop = scrollTopAmount * (scrollDivHeight - height);
-    const scrollDivWidth = clamp(context.zoom * width, width, 10000);
+    const scrollDivWidth = context.horizontalViewPort.getScrollSize();
     const scrollLeft = scrollLeftAmount * (scrollDivWidth - width);
     didUpdateScroll = true;
     scrollContentRef.style.height = `${scrollDivHeight}px`;
@@ -401,6 +411,30 @@ const ScrollContainer = props => {
       top: scrollTop
     });
   });
+  const insertOrUpdateNote = event => {
+    const position = context.horizontalViewPort.getPosition(event.clientX);
+    const midi = 127 - Math.floor(context.verticalViewPort.getPosition(event.clientY));
+    const eventPositionTicks = Math.floor(position / gridDivisorTicks()) * gridDivisorTicks();
+    const velocity = 127;
+    const existingNote = newNote();
+    const ticks = existingNote?.ticks ?? eventPositionTicks;
+    const durationTicks = existingNote?.ticks ? eventPositionTicks - existingNote?.ticks : gridDivisorTicks();
+    const note = {
+      midi,
+      ticks,
+      durationTicks,
+      velocity
+    };
+    if (existingNote) {
+      context.onNoteChange?.(newNoteIndex(), note);
+      return newNoteIndex();
+    } else {
+      return context.onInsertNote?.(note) ?? -1;
+    }
+  };
+  const [newNoteIndex, setNewNoteIndex] = solidJs.createSignal(-1);
+  const newNote = solidJs.createMemo(() => context.notes[newNoteIndex()]);
+  const [isMouseDown, setIsMouseDown] = solidJs.createSignal(false);
   return (() => {
     const _el$ = _tmpl$$3.cloneNode(true),
       _el$2 = _el$.firstChild;
@@ -411,30 +445,43 @@ const ScrollContainer = props => {
     _el$.$$touchend = forwardEventToNote;
     _el$.$$touchmove = forwardEventToNote;
     _el$.$$touchstart = forwardEventToNote;
-    _el$.$$mouseup = forwardEventToNote;
-    _el$.$$dblclick = event => {
-      if (!forwardEventToNote(event)) {
-        const position = context.horizontalViewPort.getPosition(event.clientX);
-        const midi = 127 - Math.floor(context.verticalViewPort.getPosition(event.clientY));
-        const ticks = Math.floor(position / gridDivisorTicks()) * gridDivisorTicks();
-        const durationTicks = gridDivisorTicks();
-        const velocity = 127;
-        const note = {
-          midi,
-          ticks,
-          durationTicks,
-          velocity
-        };
-        context.onInsertNote?.(note);
+    _el$.$$mouseup = event => {
+      setIsMouseDown(false);
+      if (newNote()) return;
+      if (forwardEventToNote(event)) return;
+      if (!event.altKey) return;
+      insertOrUpdateNote(event);
+    };
+    _el$.$$click = event => {
+      if (newNote()) {
+        setNewNoteIndex(-1);
+        return;
       }
+      if (forwardEventToNote(event)) return;
+      if (!event.altKey) return;
+      insertOrUpdateNote(event);
+    };
+    _el$.$$dblclick = event => {
+      if (newNote()) return;
+      if (context.isDragging) return;
+      if (forwardEventToNote(event)) return;
+      insertOrUpdateNote(event);
     };
-    _el$.$$click = forwardEventToNote;
     _el$.$$mousemove = event => {
+      event.preventDefault();
       if (forwardEventToNote(event)) return;
       if (context.isDragging) return;
-      context.onNoteDragModeChange(undefined);
+      if (!isMouseDown()) {
+        context.onNoteDragModeChange(undefined);
+        return;
+      }
+      const index = insertOrUpdateNote(event);
+      setNewNoteIndex(index);
+    };
+    _el$.$$mousedown = event => {
+      if (forwardEventToNote(event)) return;
+      setIsMouseDown(true);
     };
-    _el$.$$mousedown = forwardEventToNote;
     _el$.addEventListener("scroll", handleScroll);
     const _ref$ = props.ref;
     typeof _ref$ === "function" ? web.use(_ref$, _el$) : props.ref = _el$;
@@ -452,7 +499,7 @@ const ScrollContainer = props => {
     return _el$;
   })();
 };
-web.delegateEvents(["mousedown", "mousemove", "click", "dblclick", "mouseup", "touchstart", "touchmove", "touchend"]);
+web.delegateEvents(["mousedown", "mousemove", "dblclick", "click", "mouseup", "touchstart", "touchmove", "touchend"]);
 
 const _tmpl$$2 = /*#__PURE__*/web.template(`<input type="range" min="1" max="11" step="0.01">`, 1);
 const VerticalZoomControl = () => {
@@ -487,12 +534,27 @@ const _tmpl$$1 = /*#__PURE__*/web.template(`<div class="PianoRoll-Grid-Container
   _tmpl$3 = /*#__PURE__*/web.template(`<div class="PianoRoll-Grid-Key"></div>`, 2);
 const PianoRollGrid = () => {
   const context = usePianoRollContext();
-  const gridDivisorTicks = solidJs.createMemo(() => context.ppq * 4 / context.gridDivision);
+  const measureTicks = solidJs.createMemo(() => context.ppq * 4);
+  const selectedGridDivisorTicks = solidJs.createMemo(() => measureTicks() / context.gridDivision);
+  function calculateVisibleGridDivisorTicks(value) {
+    if (context.horizontalViewPort.getVisibleRange() / value > 100) {
+      return calculateVisibleGridDivisorTicks(value * 2);
+    }
+    if (context.horizontalViewPort.getVisibleRange() / value < 30) {
+      return calculateVisibleGridDivisorTicks(value / 2);
+    }
+    return value;
+  }
+  const gridDivisorTicks = solidJs.createMemo(() => calculateVisibleGridDivisorTicks(selectedGridDivisorTicks()));
   const gridArray = solidJs.createMemo(() => {
-    const numberOfLines = context.duration / gridDivisorTicks();
+    const numberOfLines = Math.ceil(context.horizontalViewPort.getVisibleRange() / gridDivisorTicks()) + 1;
+    const startIndex = Math.floor(context.position / gridDivisorTicks());
     return Array.from({
       length: numberOfLines
-    }).map((_, index) => index * gridDivisorTicks());
+    }).map((_, index) => ({
+      index: index + startIndex,
+      ticks: (index + startIndex) * gridDivisorTicks()
+    }));
   });
   return (() => {
     const _el$ = _tmpl$$1.cloneNode(true),
@@ -504,8 +566,8 @@ const PianoRollGrid = () => {
       get each() {
         return gridArray();
       },
-      children: (tick, index) => {
-        const virtualDimensions = solidJs.createMemo(() => context.horizontalViewPort.getVirtualDimensions(tick(), gridDivisorTicks()));
+      children: entry => {
+        const virtualDimensions = solidJs.createMemo(() => context.horizontalViewPort.getVirtualDimensions(entry().ticks, gridDivisorTicks()));
         return web.createComponent(solidJs.Show, {
           get when() {
             return virtualDimensions().size > 0;
@@ -515,19 +577,21 @@ const PianoRollGrid = () => {
             _el$3.style.setProperty("z-index", "1");
             _el$3.style.setProperty("position", "absolute");
             _el$3.style.setProperty("box-sizing", "border-box");
-            _el$3.style.setProperty("background", index % 4 === 0 ? "#ccc" : "#ddd");
             _el$3.style.setProperty("top", "0px");
             _el$3.style.setProperty("height", "100%");
             _el$3.style.setProperty("border-left", "1px gray solid");
             web.effect(_p$ => {
-              const _v$4 = `${virtualDimensions().offset}px`,
-                _v$5 = `${virtualDimensions().size}px`;
-              _v$4 !== _p$._v$4 && _el$3.style.setProperty("left", _p$._v$4 = _v$4);
-              _v$5 !== _p$._v$5 && _el$3.style.setProperty("width", _p$._v$5 = _v$5);
+              const _v$4 = Math.ceil((entry().index + 1) * selectedGridDivisorTicks() / measureTicks()) % 2 === 0 ? "#ddd" : "#ccc",
+                _v$5 = `${virtualDimensions().offset}px`,
+                _v$6 = `${virtualDimensions().size}px`;
+              _v$4 !== _p$._v$4 && _el$3.style.setProperty("background", _p$._v$4 = _v$4);
+              _v$5 !== _p$._v$5 && _el$3.style.setProperty("left", _p$._v$5 = _v$5);
+              _v$6 !== _p$._v$6 && _el$3.style.setProperty("width", _p$._v$6 = _v$6);
               return _p$;
             }, {
               _v$4: undefined,
-              _v$5: undefined
+              _v$5: undefined,
+              _v$6: undefined
             });
             return _el$3;
           }
@@ -550,20 +614,20 @@ const PianoRollGrid = () => {
             _el$4.style.setProperty("border-color", "gray");
             _el$4.style.setProperty("z-index", "1");
             web.effect(_p$ => {
-              const _v$6 = `${virtualDimensions().offset}px`,
-                _v$7 = `${virtualDimensions().size}px`,
-                _v$8 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
-                _v$9 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
-              _v$6 !== _p$._v$6 && _el$4.style.setProperty("top", _p$._v$6 = _v$6);
-              _v$7 !== _p$._v$7 && _el$4.style.setProperty("height", _p$._v$7 = _v$7);
-              _v$8 !== _p$._v$8 && _el$4.style.setProperty("background-color", _p$._v$8 = _v$8);
-              _v$9 !== _p$._v$9 && _el$4.style.setProperty("border-width", _p$._v$9 = _v$9);
+              const _v$7 = `${virtualDimensions().offset}px`,
+                _v$8 = `${virtualDimensions().size}px`,
+                _v$9 = key().isBlack ? "rgba(0,0,0,0.2)" : "none",
+                _v$10 = `${!key().isBlack && !blackKeys.includes((key().number + 1) % 12) ? "0.1px" : 0} 1px ${!key().isBlack && !blackKeys.includes((key().number - 1) % 12) ? "0.1px" : 0} 0`;
+              _v$7 !== _p$._v$7 && _el$4.style.setProperty("top", _p$._v$7 = _v$7);
+              _v$8 !== _p$._v$8 && _el$4.style.setProperty("height", _p$._v$8 = _v$8);
+              _v$9 !== _p$._v$9 && _el$4.style.setProperty("background-color", _p$._v$9 = _v$9);
+              _v$10 !== _p$._v$10 && _el$4.style.setProperty("border-width", _p$._v$10 = _v$10);
               return _p$;
             }, {
-              _v$6: undefined,
               _v$7: undefined,
               _v$8: undefined,
-              _v$9: undefined
+              _v$9: undefined,
+              _v$10: undefined
             });
             return _el$4;
           }
@@ -633,5 +697,56 @@ const PianoRoll = allProps => {
   }));
 };
 
+const usePianoRoll = () => {
+  const [ppq, onPpqChange] = solidJs.createSignal(120);
+  const [position, onPositionChange] = solidJs.createSignal(0);
+  const [zoom, onZoomChange] = solidJs.createSignal(10);
+  const [verticalZoom, onVerticalZoomChange] = solidJs.createSignal(5);
+  const [verticalPosition, onVerticalPositionChange] = solidJs.createSignal(64);
+  const [gridDivision, onGridDivisionChange] = solidJs.createSignal(16);
+  const [snapToGrid, onSnapToGridChange] = solidJs.createSignal(true);
+  const [notes, onNotesChange] = solidJs.createSignal([]);
+  const [duration, setDuration] = solidJs.createSignal(0);
+  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)]);
+  };
+  solidJs.createEffect(() => {
+    setDuration(Math.max((notes()[notes().length - 1]?.ticks ?? 0) + (notes()[notes().length - 1]?.durationTicks ?? 0), ppq() * 4 * 4));
+  });
+  return {
+    ppq,
+    onPpqChange,
+    position,
+    onPositionChange,
+    zoom,
+    onZoomChange,
+    verticalPosition,
+    onVerticalPositionChange,
+    verticalZoom,
+    onVerticalZoomChange,
+    gridDivision,
+    onGridDivisionChange,
+    snapToGrid,
+    onSnapToGridChange,
+    notes,
+    onNotesChange,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote,
+    duration
+  };
+};
+
 exports.PianoRoll = PianoRoll;
+exports.usePianoRoll = usePianoRoll;
 //# sourceMappingURL=index.js.map