solid-pianoroll 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/index.js +74 -95
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +75 -96
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/source/PianoRollContext.jsx +2 -35
  6. package/dist/source/PianoRollKeys.jsx +4 -10
  7. package/dist/source/PlayHead.jsx +2 -5
  8. package/dist/source/usePianoRollState.js +44 -44
  9. package/dist/types/PianoRollContext.d.ts +63 -29
  10. package/dist/types/usePianoRollState.d.ts +18 -15
  11. package/package.json +1 -1
package/dist/source/PianoRollKeys.jsx CHANGED
@@ -24,12 +24,6 @@ const PianoRollKeys = () => {
24
24
  <Index each={keys}>
25
25
  {(key) => {
26
26
  const isDown = createMemo(() => context.pressedKeys.includes(key().number));
27
- const handleKeyDown = () => {
28
- context.onPressedKeysChange?.([...context.pressedKeys, key().number]);
29
- };
30
- const handleKeyUp = () => {
31
- context.onPressedKeysChange?.([...context.pressedKeys].filter((number) => number !== key().number));
32
- };
33
27
  const virtualDimensions = createMemo(() => verticalViewPort().calculatePixelDimensions(127 - key().number, 1));
34
28
  const previousIsBlack = blackKeys.includes((key().number - 1) % 12);
35
29
  const nextIsBlack = blackKeys.includes((key().number + 1) % 12);
@@ -41,16 +35,16 @@ const PianoRollKeys = () => {
41
35
  [styles["down"]]: isDown(),
42
36
  }} onMouseDown={() => {
43
37
  setIsMouseDown(true);
44
- handleKeyDown();
38
+ context.onNoteDown(key().number);
45
39
  }} onMouseUp={() => {
46
- handleKeyUp();
40
+ context.onNoteUp(key().number);
47
41
  }} onMouseEnter={() => {
48
42
  if (isMouseDown()) {
49
- handleKeyDown();
43
+ context.onNoteDown(key().number);
50
44
  }
51
45
  }} onMouseLeave={() => {
52
46
  if (isMouseDown()) {
53
- handleKeyUp();
47
+ context.onNoteUp(key().number);
54
48
  }
55
49
  }} title={key().name} data-index={key().number % 12} style={{
56
50
  top: `${virtualDimensions().offset -
package/dist/source/PlayHead.jsx CHANGED
@@ -29,11 +29,8 @@ const PlayHead = (allProps) => {
29
29
  }} onMouseDown={(event) => {
30
30
  event.preventDefault();
31
31
  event.stopPropagation();
32
- const handleMouseMove = ({ movementX }) => {
33
- const { parentElement } = event.currentTarget;
34
- if (!parentElement)
35
- return;
36
- const newPosition = viewPort.calculatePosition(leftPosition() + movementX);
32
+ const handleMouseMove = ({ clientX }) => {
33
+ const newPosition = viewPort.calculatePosition(clientX);
37
34
  props.onPlayHeadPositionChange?.(newPosition);
38
35
  };
39
36
  const handleMouseUp = () => {
package/dist/source/usePianoRollState.js CHANGED
@@ -1,29 +1,48 @@
1
1
  import { mergeProps } from "solid-js";
2
2
  import { createStore } from "solid-js/store";
3
- const createPianoRollstate = (defaultState) => {
3
+ const defaultState = {
4
+ ppq: 0,
5
+ mode: "keys",
6
+ position: 0,
7
+ zoom: 10,
8
+ verticalZoom: 5,
9
+ verticalPosition: 44,
10
+ verticalTrackZoom: 0.5,
11
+ verticalTrackPosition: 0,
12
+ gridDivision: 4,
13
+ snapToGrid: true,
14
+ duration: 0,
15
+ tracks: [],
16
+ selectedTrackIndex: 0,
17
+ pressedKeys: [],
18
+ };
19
+ const propNameToHandlerName = (name) => `on${name[0]?.toUpperCase()}${name.slice(1)}Change`;
20
+ export const pianoRollStatePropNames = [
21
+ ...Object.keys(defaultState),
22
+ ...Object.keys(defaultState).map(propNameToHandlerName),
23
+ "onNoteChange",
24
+ "onInsertNote",
25
+ "onRemoveNote",
26
+ "onNoteDown",
27
+ "onNoteUp",
28
+ ];
29
+ const createPianoRollstate = (initialState) => {
4
30
  const [state, setState] = createStore({
5
- ppq: 0,
6
- mode: "keys",
7
- position: 0,
8
- zoom: 10,
9
- verticalZoom: 5,
10
- verticalPosition: 44,
11
- verticalTrackZoom: 0.5,
12
- verticalTrackPosition: 0,
13
- gridDivision: 4,
14
- snapToGrid: true,
15
- duration: 0,
16
- tracks: [],
17
- selectedTrackIndex: 0,
18
- pressedKeys: [],
19
31
  ...defaultState,
32
+ ...initialState,
20
33
  });
34
+ const handlers = Object.fromEntries(Object.entries(state).map((entry) => {
35
+ return [
36
+ propNameToHandlerName(entry[0]),
37
+ (value) => setState(entry[0], value),
38
+ ];
39
+ }));
21
40
  const updateNotes = async (trackIndex, getNotes) => {
22
41
  const track = state.tracks[trackIndex];
23
42
  if (!track)
24
43
  return;
25
44
  const notes = track.notes;
26
- onTracksChange([
45
+ handlers.onTracksChange([
27
46
  ...state.tracks.slice(0, trackIndex),
28
47
  { ...track, notes: getNotes(notes) },
29
48
  ...state.tracks.slice(trackIndex + 1),
@@ -55,38 +74,19 @@ const createPianoRollstate = (defaultState) => {
55
74
  ...notes.slice(noteIndex + 1),
56
75
  ]);
57
76
  };
58
- const onPpqChange = (ppq) => setState("ppq", ppq);
59
- const onModeChange = (mode) => setState("mode", mode);
60
- const onPositionChange = (position) => setState("position", position);
61
- const onZoomChange = (zoom) => setState("zoom", zoom);
62
- const onVerticalZoomChange = (verticalZoom) => setState("verticalZoom", verticalZoom);
63
- const onVerticalPositionChange = (verticalPosition) => setState("verticalPosition", verticalPosition);
64
- const onVerticalTrackZoomChange = (verticalTrackZoom) => setState("verticalTrackZoom", verticalTrackZoom);
65
- const onVerticalTrackPositionChange = (verticalTrackPosition) => setState("verticalTrackPosition", verticalTrackPosition);
66
- const onGridDivisionChange = (gridDivision) => setState("gridDivision", gridDivision);
67
- const onSnapToGridChange = (snapToGrid) => setState("snapToGrid", snapToGrid);
68
- const onDurationChange = (duration) => setState("duration", duration);
69
- const onTracksChange = (tracks) => setState("tracks", tracks);
70
- const onSelectedTrackIndexChange = (selectedTrackIndex) => setState("selectedTrackIndex", selectedTrackIndex);
71
- const onPressedKeysChange = (pressedKeys) => setState("pressedKeys", pressedKeys);
77
+ const onNoteDown = (keyNumber) => {
78
+ handlers.onPressedKeysChange?.([...state.pressedKeys, keyNumber]);
79
+ };
80
+ const onNoteUp = (keyNumber) => {
81
+ handlers.onPressedKeysChange?.([...state.pressedKeys].filter((number) => number !== keyNumber));
82
+ };
72
83
  return mergeProps(state, {
73
- onPpqChange,
74
- onModeChange,
75
- onPositionChange,
76
- onZoomChange,
77
- onVerticalZoomChange,
78
- onVerticalPositionChange,
79
- onVerticalTrackZoomChange,
80
- onVerticalTrackPositionChange,
81
- onGridDivisionChange,
82
- onSnapToGridChange,
83
- onDurationChange,
84
- onTracksChange,
84
+ ...handlers,
85
85
  onNoteChange,
86
86
  onInsertNote,
87
87
  onRemoveNote,
88
- onSelectedTrackIndexChange,
89
- onPressedKeysChange,
88
+ onNoteDown,
89
+ onNoteUp,
90
90
  });
91
91
  };
92
92
  export default createPianoRollstate;
package/dist/types/PianoRollContext.d.ts CHANGED
@@ -17,23 +17,25 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
17
17
  tracks: import("./types").Track[];
18
18
  selectedTrackIndex: number;
19
19
  pressedKeys: number[];
20
- onPpqChange: (ppq: number) => void;
21
- onModeChange: (mode: "keys" | "tracks") => void;
22
- onPositionChange: (position: number) => void;
23
- onZoomChange: (zoom: number) => void;
24
- onVerticalZoomChange: (verticalZoom: number) => void;
25
- onVerticalPositionChange: (verticalPosition: number) => void;
26
- onVerticalTrackZoomChange: (verticalTrackZoom: number) => void;
27
- onVerticalTrackPositionChange: (verticalTrackPosition: number) => void;
28
- onGridDivisionChange: (gridDivision: import("./PianoRoll").GridDivision) => void;
29
- onSnapToGridChange: (snapToGrid: boolean) => void;
30
- onDurationChange: (duration: number) => void;
31
- onTracksChange: (tracks: import("./types").Track[]) => void;
32
20
  onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
33
21
  onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
34
22
  onRemoveNote: (trackIndex: number, noteIndex: number) => void;
35
- onSelectedTrackIndexChange: (selectedTrackIndex: number) => void;
36
- onPressedKeysChange: (pressedKeys: number[]) => void;
23
+ onNoteDown: (keyNumber: number) => void;
24
+ onNoteUp: (keyNumber: number) => void;
25
+ onPpqChange: (value: number) => void;
26
+ onModeChange: (value: "keys" | "tracks") => void;
27
+ onPositionChange: (value: number) => void;
28
+ onZoomChange: (value: number) => void;
29
+ onVerticalZoomChange: (value: number) => void;
30
+ onVerticalPositionChange: (value: number) => void;
31
+ onVerticalTrackZoomChange: (value: number) => void;
32
+ onVerticalTrackPositionChange: (value: number) => void;
33
+ onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
34
+ onSnapToGridChange: (value: boolean) => void;
35
+ onDurationChange: (value: number) => void;
36
+ onTracksChange: (value: import("./types").Track[]) => void;
37
+ onSelectedTrackIndexChange: (value: number) => void;
38
+ onPressedKeysChange: (value: number[]) => void;
37
39
  }>;
38
40
  export declare const usePianoRollContext: () => {
39
41
  showAllTracks?: boolean;
@@ -53,22 +55,54 @@ export declare const usePianoRollContext: () => {
53
55
  tracks: import("./types").Track[];
54
56
  selectedTrackIndex: number;
55
57
  pressedKeys: number[];
56
- onPpqChange: (ppq: number) => void;
57
- onModeChange: (mode: "keys" | "tracks") => void;
58
- onPositionChange: (position: number) => void;
59
- onZoomChange: (zoom: number) => void;
60
- onVerticalZoomChange: (verticalZoom: number) => void;
61
- onVerticalPositionChange: (verticalPosition: number) => void;
62
- onVerticalTrackZoomChange: (verticalTrackZoom: number) => void;
63
- onVerticalTrackPositionChange: (verticalTrackPosition: number) => void;
64
- onGridDivisionChange: (gridDivision: import("./PianoRoll").GridDivision) => void;
65
- onSnapToGridChange: (snapToGrid: boolean) => void;
66
- onDurationChange: (duration: number) => void;
67
- onTracksChange: (tracks: import("./types").Track[]) => void;
68
58
  onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
69
59
  onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
70
60
  onRemoveNote: (trackIndex: number, noteIndex: number) => void;
71
- onSelectedTrackIndexChange: (selectedTrackIndex: number) => void;
72
- onPressedKeysChange: (pressedKeys: number[]) => void;
61
+ onNoteDown: (keyNumber: number) => void;
62
+ onNoteUp: (keyNumber: number) => void;
63
+ onPpqChange: (value: number) => void;
64
+ onModeChange: (value: "keys" | "tracks") => void;
65
+ onPositionChange: (value: number) => void;
66
+ onZoomChange: (value: number) => void;
67
+ onVerticalZoomChange: (value: number) => void;
68
+ onVerticalPositionChange: (value: number) => void;
69
+ onVerticalTrackZoomChange: (value: number) => void;
70
+ onVerticalTrackPositionChange: (value: number) => void;
71
+ onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
72
+ onSnapToGridChange: (value: boolean) => void;
73
+ onDurationChange: (value: number) => void;
74
+ onTracksChange: (value: import("./types").Track[]) => void;
75
+ onSelectedTrackIndexChange: (value: number) => void;
76
+ onPressedKeysChange: (value: number[]) => void;
73
77
  };
74
- export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "position" | "zoom" | "onDurationChange" | "mode" | "tracks" | "duration" | "ppq" | "verticalZoom" | "verticalPosition" | "verticalTrackZoom" | "verticalTrackPosition" | "gridDivision" | "snapToGrid" | "selectedTrackIndex" | "pressedKeys" | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "position" | "zoom" | "onDurationChange" | "mode" | "tracks" | "duration" | "ppq" | "verticalZoom" | "verticalPosition" | "verticalTrackZoom" | "verticalTrackPosition" | "gridDivision" | "snapToGrid" | "selectedTrackIndex" | "pressedKeys" | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "showAllTracks" | "showTrackList">];
78
+ export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
79
+ ppq: number;
80
+ mode: "keys" | "tracks";
81
+ position: number;
82
+ zoom: number;
83
+ verticalZoom: number;
84
+ verticalPosition: number;
85
+ verticalTrackZoom: number;
86
+ verticalTrackPosition: number;
87
+ gridDivision: import("./PianoRoll").GridDivision;
88
+ snapToGrid: boolean;
89
+ duration: number;
90
+ tracks: import("./types").Track[];
91
+ selectedTrackIndex: number;
92
+ pressedKeys: number[];
93
+ } | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
94
+ ppq: number;
95
+ mode: "keys" | "tracks";
96
+ position: number;
97
+ zoom: number;
98
+ verticalZoom: number;
99
+ verticalPosition: number;
100
+ verticalTrackZoom: number;
101
+ verticalTrackPosition: number;
102
+ gridDivision: import("./PianoRoll").GridDivision;
103
+ snapToGrid: boolean;
104
+ duration: number;
105
+ tracks: import("./types").Track[];
106
+ selectedTrackIndex: number;
107
+ pressedKeys: number[];
108
+ } | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "showAllTracks" | "showTrackList">];
package/dist/types/usePianoRollState.d.ts CHANGED
@@ -16,7 +16,8 @@ type PianoRollState = {
16
16
  selectedTrackIndex: number;
17
17
  pressedKeys: number[];
18
18
  };
19
- declare const createPianoRollstate: (defaultState?: Partial<PianoRollState>) => {
19
+ export declare const pianoRollStatePropNames: ("onDurationChange" | keyof PianoRollState | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp")[];
20
+ declare const createPianoRollstate: (initialState?: Partial<PianoRollState>) => {
20
21
  ppq: number;
21
22
  mode: "keys" | "tracks";
22
23
  position: number;
@@ -31,22 +32,24 @@ declare const createPianoRollstate: (defaultState?: Partial<PianoRollState>) =>
31
32
  tracks: Track[];
32
33
  selectedTrackIndex: number;
33
34
  pressedKeys: number[];
34
- onPpqChange: (ppq: PianoRollState["ppq"]) => void;
35
- onModeChange: (mode: PianoRollState["mode"]) => void;
36
- onPositionChange: (position: PianoRollState["position"]) => void;
37
- onZoomChange: (zoom: PianoRollState["zoom"]) => void;
38
- onVerticalZoomChange: (verticalZoom: PianoRollState["verticalZoom"]) => void;
39
- onVerticalPositionChange: (verticalPosition: PianoRollState["verticalPosition"]) => void;
40
- onVerticalTrackZoomChange: (verticalTrackZoom: PianoRollState["verticalTrackZoom"]) => void;
41
- onVerticalTrackPositionChange: (verticalTrackPosition: PianoRollState["verticalTrackPosition"]) => void;
42
- onGridDivisionChange: (gridDivision: PianoRollState["gridDivision"]) => void;
43
- onSnapToGridChange: (snapToGrid: PianoRollState["snapToGrid"]) => void;
44
- onDurationChange: (duration: PianoRollState["duration"]) => void;
45
- onTracksChange: (tracks: PianoRollState["tracks"]) => void;
46
35
  onNoteChange: (trackIndex: number, noteIndex: number, note: Note) => void;
47
36
  onInsertNote: (trackIndex: number, note: Note) => number;
48
37
  onRemoveNote: (trackIndex: number, noteIndex: number) => void;
49
- onSelectedTrackIndexChange: (selectedTrackIndex: PianoRollState["selectedTrackIndex"]) => void;
50
- onPressedKeysChange: (pressedKeys: PianoRollState["pressedKeys"]) => void;
38
+ onNoteDown: (keyNumber: number) => void;
39
+ onNoteUp: (keyNumber: number) => void;
40
+ onPpqChange: (value: number) => void;
41
+ onModeChange: (value: "keys" | "tracks") => void;
42
+ onPositionChange: (value: number) => void;
43
+ onZoomChange: (value: number) => void;
44
+ onVerticalZoomChange: (value: number) => void;
45
+ onVerticalPositionChange: (value: number) => void;
46
+ onVerticalTrackZoomChange: (value: number) => void;
47
+ onVerticalTrackPositionChange: (value: number) => void;
48
+ onGridDivisionChange: (value: GridDivision) => void;
49
+ onSnapToGridChange: (value: boolean) => void;
50
+ onDurationChange: (value: number) => void;
51
+ onTracksChange: (value: Track[]) => void;
52
+ onSelectedTrackIndexChange: (value: number) => void;
53
+ onPressedKeysChange: (value: number[]) => void;
51
54
  };
52
55
  export default createPianoRollstate;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.20",
2
+ "version": "0.0.21",
3
3
  "name": "solid-pianoroll",
4
4
  "description": "Pianoroll UI Control for Solid JS apps",
5
5
  "license": "MIT",