solid-pianoroll 0.0.19 → 0.0.21

package/dist/cjs/index.js

@@ -33,6 +33,73 @@ var css_248z$5 = ".PianoRoll-module_PianoRoll__rkRYx {\n  box-sizing: border-box
 var styles$5 = {"PianoRoll":"PianoRoll-module_PianoRoll__rkRYx","PianoRollContainer":"PianoRoll-module_PianoRollContainer__Oyxr7"};
 styleInject(css_248z$5);
 
+const defaultState = {
+  ppq: 0,
+  mode: "keys",
+  position: 0,
+  zoom: 10,
+  verticalZoom: 5,
+  verticalPosition: 44,
+  verticalTrackZoom: 0.5,
+  verticalTrackPosition: 0,
+  gridDivision: 4,
+  snapToGrid: true,
+  duration: 0,
+  tracks: [],
+  selectedTrackIndex: 0,
+  pressedKeys: []
+};
+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"];
+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 updateNotes = async (trackIndex, getNotes) => {
+    const track = state.tracks[trackIndex];
+    if (!track) return;
+    const notes = track.notes;
+    handlers.onTracksChange([...state.tracks.slice(0, trackIndex), {
+      ...track,
+      notes: getNotes(notes)
+    }, ...state.tracks.slice(trackIndex + 1)]);
+  };
+  const onNoteChange = (trackIndex, noteIndex, note) => {
+    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), note, ...notes.slice(noteIndex + 1)]);
+  };
+  const onInsertNote = (trackIndex, note) => {
+    const track = state.tracks[trackIndex];
+    if (!track) return -1;
+    const notes = track.notes;
+    const newNoteIndex = Math.max(notes.findIndex(({
+      ticks
+    }) => ticks > note.ticks), 0);
+    updateNotes(trackIndex, notes => [...notes.slice(0, newNoteIndex), note, ...notes.slice(newNoteIndex)]);
+    return newNoteIndex;
+  };
+  const onRemoveNote = (trackIndex, noteIndex) => {
+    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), ...notes.slice(noteIndex + 1)]);
+  };
+  const onNoteDown = keyNumber => {
+    handlers.onPressedKeysChange?.([...state.pressedKeys, keyNumber]);
+  };
+  const onNoteUp = keyNumber => {
+    handlers.onPressedKeysChange?.([...state.pressedKeys].filter(number => number !== keyNumber));
+  };
+  return solidJs.mergeProps(state, {
+    ...handlers,
+    onNoteChange,
+    onInsertNote,
+    onRemoveNote,
+    onNoteDown,
+    onNoteUp
+  });
+};
+
 const PianoRollContext = solidJs.createContext();
 const PianoRollContextProvider = PianoRollContext.Provider;
 const usePianoRollContext = () => {
@@ -40,7 +107,7 @@ const usePianoRollContext = () => {
   if (!context) throw new Error("No PianoRollContext found");
   return context;
 };
-const splitContextProps = allProps => solidJs.splitProps(allProps, ["ppq", "mode", "position", "zoom", "verticalZoom", "verticalPosition", "verticalTrackZoom", "verticalTrackPosition", "gridDivision", "snapToGrid", "duration", "tracks", "selectedTrackIndex", "pressedKeys", "onPpqChange", "onModeChange", "onPositionChange", "onZoomChange", "onVerticalZoomChange", "onVerticalPositionChange", "onVerticalTrackZoomChange", "onVerticalTrackPositionChange", "onGridDivisionChange", "onSnapToGridChange", "onDurationChange", "onTracksChange", "onNoteChange", "onInsertNote", "onRemoveNote", "onSelectedTrackIndexChange", "onPressedKeysChange", "showAllTracks", "showTrackList"]);
+const splitContextProps = allProps => solidJs.splitProps(allProps, [...pianoRollStatePropNames, "showAllTracks", "showTrackList"]);
 
 var css_248z$4 = ".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}\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}\n\n.PianoRollKeys-module_white__fR2Lm {\n  background: white;\n  border-top-width: 0.5px;\n  border-bottom-width: 0.5px;\n}\n\n.PianoRollKeys-module_down__GcNeZ {\n  transition: none;\n  background: red;\n}\n";
 var styles$4 = {"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"};
@@ -286,12 +353,6 @@ const PianoRollKeys = () => {
           each: keys,
           children: key => {
             const isDown = solidJs.createMemo(() => context.pressedKeys.includes(key().number));
-            const handleKeyDown = () => {
-              context.onPressedKeysChange?.([...context.pressedKeys, key().number]);
-            };
-            const handleKeyUp = () => {
-              context.onPressedKeysChange?.([...context.pressedKeys].filter(number => number !== key().number));
-            };
             const virtualDimensions = solidJs.createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
             const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
             const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
@@ -303,20 +364,20 @@ const PianoRollKeys = () => {
                 const _el$2 = _tmpl$$6.cloneNode(true);
                 _el$2.addEventListener("mouseleave", () => {
                   if (isMouseDown()) {
-                    handleKeyUp();
+                    context.onNoteUp(key().number);
                   }
                 });
                 _el$2.addEventListener("mouseenter", () => {
                   if (isMouseDown()) {
-                    handleKeyDown();
+                    context.onNoteDown(key().number);
                   }
                 });
                 _el$2.$$mouseup = () => {
-                  handleKeyUp();
+                  context.onNoteUp(key().number);
                 };
                 _el$2.$$mousedown = () => {
                   setIsMouseDown(true);
-                  handleKeyDown();
+                  context.onNoteDown(key().number);
                 };
                 web.insert(_el$2, web.createComponent(solidJs.Show, {
                   get when() {
@@ -948,7 +1009,7 @@ const PianoRoll = allProps => {
           }),
           horizontalTracks: () => ({
             pixelOffset: 0,
-            pixelSize: notesScrollerClientRect().width
+            pixelSize: tracksScrollerClientRect().width
           }),
           verticalTracks: () => ({
             pixelOffset: tracksScrollerClientRect().top,
@@ -1068,13 +1129,9 @@ const PlayHead = allProps => {
         event.preventDefault();
         event.stopPropagation();
         const handleMouseMove = ({
-          movementX
+          clientX
         }) => {
-          const {
-            parentElement
-          } = event.currentTarget;
-          if (!parentElement) return;
-          const newPosition = viewPort.calculatePosition(leftPosition() + movementX);
+          const newPosition = viewPort.calculatePosition(clientX);
           props.onPlayHeadPositionChange?.(newPosition);
         };
         const handleMouseUp = () => {
@@ -1113,84 +1170,6 @@ const useNotes = () => {
   };
 };
 
-const createPianoRollstate = defaultState => {
-  const [state, setState] = store.createStore({
-    ppq: 0,
-    mode: "keys",
-    position: 0,
-    zoom: 10,
-    verticalZoom: 5,
-    verticalPosition: 44,
-    verticalTrackZoom: 0.5,
-    verticalTrackPosition: 0,
-    gridDivision: 4,
-    snapToGrid: true,
-    duration: 0,
-    tracks: [],
-    selectedTrackIndex: 0,
-    pressedKeys: [],
-    ...defaultState
-  });
-  const updateNotes = async (trackIndex, getNotes) => {
-    const track = state.tracks[trackIndex];
-    if (!track) return;
-    const notes = track.notes;
-    onTracksChange([...state.tracks.slice(0, trackIndex), {
-      ...track,
-      notes: getNotes(notes)
-    }, ...state.tracks.slice(trackIndex + 1)]);
-  };
-  const onNoteChange = (trackIndex, noteIndex, note) => {
-    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), note, ...notes.slice(noteIndex + 1)]);
-  };
-  const onInsertNote = (trackIndex, note) => {
-    const track = state.tracks[trackIndex];
-    if (!track) return -1;
-    const notes = track.notes;
-    const newNoteIndex = Math.max(notes.findIndex(({
-      ticks
-    }) => ticks > note.ticks), 0);
-    updateNotes(trackIndex, notes => [...notes.slice(0, newNoteIndex), note, ...notes.slice(newNoteIndex)]);
-    return newNoteIndex;
-  };
-  const onRemoveNote = (trackIndex, noteIndex) => {
-    updateNotes(trackIndex, notes => [...notes.slice(0, noteIndex), ...notes.slice(noteIndex + 1)]);
-  };
-  const onPpqChange = ppq => setState("ppq", ppq);
-  const onModeChange = mode => setState("mode", mode);
-  const onPositionChange = position => setState("position", position);
-  const onZoomChange = zoom => setState("zoom", zoom);
-  const onVerticalZoomChange = verticalZoom => setState("verticalZoom", verticalZoom);
-  const onVerticalPositionChange = verticalPosition => setState("verticalPosition", verticalPosition);
-  const onVerticalTrackZoomChange = verticalTrackZoom => setState("verticalTrackZoom", verticalTrackZoom);
-  const onVerticalTrackPositionChange = verticalTrackPosition => setState("verticalTrackPosition", verticalTrackPosition);
-  const onGridDivisionChange = gridDivision => setState("gridDivision", gridDivision);
-  const onSnapToGridChange = snapToGrid => setState("snapToGrid", snapToGrid);
-  const onDurationChange = duration => setState("duration", duration);
-  const onTracksChange = tracks => setState("tracks", tracks);
-  const onSelectedTrackIndexChange = selectedTrackIndex => setState("selectedTrackIndex", selectedTrackIndex);
-  const onPressedKeysChange = pressedKeys => setState("pressedKeys", pressedKeys);
-  return solidJs.mergeProps(state, {
-    onPpqChange,
-    onModeChange,
-    onPositionChange,
-    onZoomChange,
-    onVerticalZoomChange,
-    onVerticalPositionChange,
-    onVerticalTrackZoomChange,
-    onVerticalTrackPositionChange,
-    onGridDivisionChange,
-    onSnapToGridChange,
-    onDurationChange,
-    onTracksChange,
-    onNoteChange,
-    onInsertNote,
-    onRemoveNote,
-    onSelectedTrackIndexChange,
-    onPressedKeysChange
-  });
-};
-
 exports.PianoRoll = PianoRoll;
 exports.PlayHead = PlayHead;
 exports.createPianoRollstate = createPianoRollstate;