solid-pianoroll 0.0.23 → 0.0.24

package/dist/cjs/index.js

@@ -42,6 +42,7 @@ const defaultState = {
   verticalPosition: 44,
   verticalTrackZoom: 0.5,
   verticalTrackPosition: 0,
+  playHeadPosition: 0,
   gridDivision: 4,
   snapToGrid: true,
   duration: 0,
@@ -62,15 +63,25 @@ const defaultState = {
   }
 };
 const propNameToHandlerName = name => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
-const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown"];
+const pianoRollStatePropNames = [...Object.keys(defaultState), ...Object.keys(defaultState).map(propNameToHandlerName), "onNoteChange", "onInsertNote", "onRemoveNote", "onNoteDown", "onNoteUp", "isKeyDown", "snapValueToGridIfEnabled"];
 const createPianoRollstate = initialState => {
   const [state, setState] = store.createStore({
     ...defaultState,
     ...initialState
   });
   const handlers = Object.fromEntries(Object.entries(state).map(entry => {
-    return [propNameToHandlerName(entry[0]), value => setState(entry[0], value)];
+    const handlerName = propNameToHandlerName(entry[0]);
+    return [handlerName, (value, originalEvent) => {
+      const handler = initialState?.[handlerName];
+      setState(entry[0], value);
+      if (handler) {
+        handler(value, originalEvent);
+      }
+    }];
   }));
+  const onPlayheadPositionChange = (playheadPosition, originalEvent) => {
+    handlers.onPlayHeadPositionChange(snapValueToGridIfEnabled(playheadPosition, !!originalEvent?.altKey));
+  };
   const updateNotes = async (trackIndex, getNotes) => {
     const track = state.tracks[trackIndex];
     if (!track) return;
@@ -112,6 +123,10 @@ const createPianoRollstate = initialState => {
     updateKeyPressedState(trackIndex, keyNumber, false);
   };
   const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
+  const snapValueToGridIfEnabled = (value, altKey) => {
+    const gridDivisionTicks = state.ppq * 4 / state.gridDivision;
+    return state.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks) * gridDivisionTicks : value;
+  };
   return solidJs.mergeProps(state, {
     ...handlers,
     onNoteChange,
@@ -119,7 +134,9 @@ const createPianoRollstate = initialState => {
     onRemoveNote,
     onNoteDown,
     onNoteUp,
-    isKeyDown
+    isKeyDown,
+    snapValueToGridIfEnabled,
+    onPlayheadPositionChange
   });
 };
 
@@ -132,7 +149,7 @@ const usePianoRollContext = () => {
 };
 const splitContextProps = allProps => solidJs.splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
 
-var css_248z$5 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 200ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n  transform: rotateX(0deg);\n  perspective: 100px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n  border: 1px black outset;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n  border-top-right-radius: 4%;\n  border-bottom-right-radius: 4%;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n  transform: rotateX(0deg) rotateY(20deg);\n}\n";
+var css_248z$5 = ".PianoRollKeys-module_PianoRollKeys__5vnQ0 {\n  position: relative;\n  height: 100%;\n  border-width: 0;\n  border-color: #000;\n  border-style: solid;\n  border-right-width: 1px;\n  border-left-width: 1px;\n  background: white;\n  cursor: pointer;\n  background: black;\n}\n\n.PianoRollKeys-module_Key__jybNC {\n  transition-property: background-color, box-shadow;\n  transition-duration: 200ms;\n  transition-timing-function: ease-out;\n  border-width: 0px;\n  position: absolute;\n  box-sizing: border-box;\n  width: 120%;\n  left: -20%;\n  border-color: #000;\n  border-style: solid;\n  transform: rotateX(0deg);\n  perspective: 100px;\n}\n\n.PianoRollKeys-module_black__7rncB {\n  background: black;\n  border-top-right-radius: 12%;\n  border-bottom-right-radius: 12%;\n  margin-left: -20%;\n  z-index: 1;\n  border: 1px black outset;\n}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n  border-top-right-radius: 4%;\n  border-bottom-right-radius: 4%;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n  transform: rotateX(0deg) rotateY(20deg);\n}\n";
 var styles$5 = {"PianoRollKeys":"PianoRollKeys-module_PianoRollKeys__5vnQ0","Key":"PianoRollKeys-module_Key__jybNC","black":"PianoRollKeys-module_black__7rncB","white":"PianoRollKeys-module_white__fR2Lm","down":"PianoRollKeys-module_down__GcNeZ"};
 styleInject(css_248z$5);
 
@@ -476,7 +493,6 @@ const PianoRollNotes = props => {
   const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = solidJs.createSignal(-1);
   const [diffPosition, setDiffPosition] = solidJs.createSignal(0);
   const [getInitialNote, setInitialNote] = solidJs.createSignal();
-  const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey ? Math.round(value / gridDivisionTicks()) * gridDivisionTicks() : value;
   const calculateNoteDragValues = event => {
     const targetTrackIndex = context.mode === "tracks" ? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1) : currentNoteTrackIndex() > -1 ? currentNoteTrackIndex() : context.selectedTrackIndex;
     const midi = context.mode === "keys" ? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY)) : getInitialNote()?.midi ?? 60;
@@ -497,7 +513,7 @@ const PianoRollNotes = props => {
       midi,
       horiontalPosition
     } = calculateNoteDragValues(mouseMoveEvent);
-    const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
+    const ticks = context.snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
     const updatedNote = {
       ...note,
       midi,
@@ -506,11 +522,11 @@ const PianoRollNotes = props => {
       }),
       ...(noteDragMode() === "trimStart" && {
         ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
-        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+        durationTicks: ticks < note.ticks + note.durationTicks ? note.ticks + note.durationTicks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
       }),
       ...(noteDragMode() === "trimEnd" && {
         ticks: ticks < note.ticks ? ticks : note.ticks,
-        durationTicks: ticks < note.ticks ? note.ticks - ticks : snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
+        durationTicks: ticks < note.ticks ? note.ticks - ticks : context.snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey)
       })
     };
     const previousTrackIndex = currentNoteTrackIndex();
@@ -550,7 +566,7 @@ const PianoRollNotes = props => {
         midi,
         horiontalPosition
       } = calculateNoteDragValues(mouseDownEvent);
-      const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
+      const ticks = context.snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey, context);
       const durationTicks = gridDivisionTicks();
       const newNote = {
         midi,
@@ -617,17 +633,19 @@ const PianoRollNotes = props => {
                     web.setAttribute(_el$2, "draggable", false);
                     web.effect(_p$ => {
                       const _v$ = getClasses(noteDragMode()).join(" "),
-                        _v$2 = `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
-                        _v$3 = `${verticalVirtualDimensions().offset}px`,
-                        _v$4 = `${verticalVirtualDimensions().size}px`,
-                        _v$5 = `${horizontalDimensions().offset}px`,
-                        _v$6 = `${horizontalDimensions().size}px`;
+                        _v$2 = `${track.color}`,
+                        _v$3 = (note.velocity / 128 + 2) / 3,
+                        _v$4 = `${verticalVirtualDimensions().offset}px`,
+                        _v$5 = `${verticalVirtualDimensions().size}px`,
+                        _v$6 = `${horizontalDimensions().offset}px`,
+                        _v$7 = `${horizontalDimensions().size}px`;
                       _v$ !== _p$._v$ && web.className(_el$2, _p$._v$ = _v$);
                       _v$2 !== _p$._v$2 && _el$2.style.setProperty("background-color", _p$._v$2 = _v$2);
-                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("top", _p$._v$3 = _v$3);
-                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("height", _p$._v$4 = _v$4);
-                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("left", _p$._v$5 = _v$5);
-                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("width", _p$._v$6 = _v$6);
+                      _v$3 !== _p$._v$3 && _el$2.style.setProperty("opacity", _p$._v$3 = _v$3);
+                      _v$4 !== _p$._v$4 && _el$2.style.setProperty("top", _p$._v$4 = _v$4);
+                      _v$5 !== _p$._v$5 && _el$2.style.setProperty("height", _p$._v$5 = _v$5);
+                      _v$6 !== _p$._v$6 && _el$2.style.setProperty("left", _p$._v$6 = _v$6);
+                      _v$7 !== _p$._v$7 && _el$2.style.setProperty("width", _p$._v$7 = _v$7);
                       return _p$;
                     }, {
                       _v$: undefined,
@@ -635,7 +653,8 @@ const PianoRollNotes = props => {
                       _v$3: undefined,
                       _v$4: undefined,
                       _v$5: undefined,
-                      _v$6: undefined
+                      _v$6: undefined,
+                      _v$7: undefined
                     });
                     return _el$2;
                   }
@@ -1062,8 +1081,22 @@ const _tmpl$$2 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRollScale = () => {
   const horizontalViewPort = solidJs.createMemo(() => useViewPortDimension("horizontal"));
   const grid = usePianoRollGrid();
+  const context = usePianoRollContext();
+  const updatePlayheadPosition = event => {
+    const position = horizontalViewPort().calculatePosition(event.clientX);
+    context.onPlayHeadPositionChange(position, event);
+  };
   return (() => {
     const _el$ = _tmpl$$2.cloneNode(true);
+    _el$.$$mousedown = event => {
+      updatePlayheadPosition(event);
+      const handleMouseUp = () => {
+        window.removeEventListener("mousemove", updatePlayheadPosition);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+      window.addEventListener("mousemove", updatePlayheadPosition);
+      window.addEventListener("mouseup", handleMouseUp);
+    };
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return grid();
@@ -1112,10 +1145,12 @@ const PianoRollScale = () => {
     return _el$;
   })();
 };
+web.delegateEvents(["mousedown"]);
 
 const _tmpl$$1 = /*#__PURE__*/web.template(`<div><button><div></div></button></div>`, 6),
-  _tmpl$2 = /*#__PURE__*/web.template(`<div><div><div></div></div><div><div></div></div></div>`, 10),
-  _tmpl$3 = /*#__PURE__*/web.template(`<div></div>`, 2);
+  _tmpl$2 = /*#__PURE__*/web.template(`<div><div></div><div></div></div>`, 6),
+  _tmpl$3 = /*#__PURE__*/web.template(`<div><div><div></div></div></div>`, 6),
+  _tmpl$4 = /*#__PURE__*/web.template(`<div></div>`, 2);
 const PianoRoll = allProps => {
   const propsWithDefaults = solidJs.mergeProps({
     showAllTracks: false
@@ -1124,7 +1159,7 @@ const PianoRoll = allProps => {
   return web.createComponent(PianoRollContextProvider, {
     value: context,
     get children() {
-      const _el$ = _tmpl$3.cloneNode(true);
+      const _el$ = _tmpl$4.cloneNode(true);
       web.spread(_el$, web.mergeProps(divProps, {
         get ["class"]() {
           return styles$6.PianoRoll;
@@ -1133,11 +1168,9 @@ const PianoRoll = allProps => {
       web.insert(_el$, web.createComponent(PianoRollScrollZoomViewPort, {
         get children() {
           return [(() => {
-            const _el$2 = _tmpl$2.cloneNode(true),
+            const _el$2 = _tmpl$3.cloneNode(true),
               _el$3 = _el$2.firstChild,
-              _el$7 = _el$3.firstChild,
-              _el$8 = _el$3.nextSibling,
-              _el$9 = _el$8.firstChild;
+              _el$7 = _el$3.firstChild;
             web.insert(_el$2, web.createComponent(ZoomSliderControl, {
               orientation: "vertical",
               dimensionName: "verticalTracks"
@@ -1151,6 +1184,7 @@ const PianoRoll = allProps => {
                   _el$5 = _el$4.firstChild,
                   _el$6 = _el$5.firstChild;
                 _el$4.style.setProperty("height", "30px");
+                _el$4.style.setProperty("border-right", "1px black solid");
                 _el$5.$$click = () => context.onModeChange(context.mode === "keys" ? "tracks" : "keys");
                 _el$5.style.setProperty("font-size", "16px");
                 _el$5.style.setProperty("line-height", "16px");
@@ -1184,16 +1218,26 @@ const PianoRoll = allProps => {
                 return web.createComponent(PianoRollKeys, {});
               }
             }), null);
-            _el$8.style.setProperty("width", "100%");
-            _el$8.style.setProperty("display", "flex");
-            _el$8.style.setProperty("height", "100%");
-            _el$8.style.setProperty("flex-direction", "column");
-            _el$8.style.setProperty("overflow", "hidden");
-            _el$9.style.setProperty("height", "30px");
-            web.insert(_el$9, web.createComponent(PianoRollScale, {}));
-            web.insert(_el$8, web.createComponent(PianoRollNotesScroller, {
+            web.insert(_el$2, web.createComponent(PianoRollNotesScroller, {
               get children() {
-                return [web.memo(() => allProps.children), web.createComponent(PianoRollGrid, {}), web.createComponent(PianoRollNotes, {})];
+                return [web.memo(() => allProps.children), (() => {
+                  const _el$8 = _tmpl$2.cloneNode(true),
+                    _el$9 = _el$8.firstChild,
+                    _el$10 = _el$9.nextSibling;
+                  _el$8.style.setProperty("width", "100%");
+                  _el$8.style.setProperty("display", "flex");
+                  _el$8.style.setProperty("height", "100%");
+                  _el$8.style.setProperty("flex-direction", "column");
+                  _el$8.style.setProperty("overflow", "hidden");
+                  _el$9.style.setProperty("height", "30px");
+                  web.insert(_el$9, web.createComponent(PianoRollScale, {}));
+                  _el$10.style.setProperty("flex", "1");
+                  _el$10.style.setProperty("position", "relative");
+                  _el$10.style.setProperty("overflow", "hidden");
+                  web.insert(_el$10, web.createComponent(PianoRollGrid, {}), null);
+                  web.insert(_el$10, web.createComponent(PianoRollNotes, {}), null);
+                  return _el$8;
+                })()];
               }
             }), null);
             web.insert(_el$2, web.createComponent(ZoomSliderControl, {
@@ -1261,11 +1305,9 @@ const PlayHead = allProps => {
       "onMouseDown": event => {
         event.preventDefault();
         event.stopPropagation();
-        const handleMouseMove = ({
-          clientX
-        }) => {
-          const newPosition = viewPort.calculatePosition(clientX);
-          props.onPositionChange?.(newPosition);
+        const handleMouseMove = event => {
+          const newPosition = viewPort.calculatePosition(event.clientX);
+          props.onPositionChange?.(newPosition, event);
         };
         const handleMouseUp = () => {
           window.removeEventListener("mousemove", handleMouseMove);