solid-pianoroll 0.0.20 → 0.0.22
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.
- package/dist/cjs/index.js +211 -262
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +213 -264
- package/dist/esm/index.js.map +1 -1
- package/dist/source/PianoRoll.jsx +1 -1
- package/dist/source/PianoRollContext.jsx +2 -35
- package/dist/source/PianoRollKeys.jsx +6 -19
- package/dist/source/PianoRollNotes.jsx +87 -110
- package/dist/source/PianoRollTrackList.jsx +2 -3
- package/dist/source/index.jsx +1 -1
- package/dist/source/usePianoRollState.js +56 -44
- package/dist/source/{PlayHead.jsx → viewport/PlayHead.jsx} +13 -17
- package/dist/types/PianoRollContext.d.ts +67 -31
- package/dist/types/index.d.ts +1 -1
- package/dist/types/usePianoRollState.d.ts +21 -17
- package/dist/types/{PlayHead.d.ts → viewport/PlayHead.d.ts} +3 -3
- package/package.json +1 -1
|
@@ -23,13 +23,7 @@ const PianoRollKeys = () => {
|
|
|
23
23
|
<ScrollZoomContainer horizontalDimensionName="horizontalKeys" showScrollbar={false}>
|
|
24
24
|
<Index each={keys}>
|
|
25
25
|
{(key) => {
|
|
26
|
-
const isDown = createMemo(() => context.
|
|
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
|
-
};
|
|
26
|
+
const isDown = createMemo(() => context.isKeyDown(context.selectedTrackIndex, key().number));
|
|
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,20 +35,20 @@ const PianoRollKeys = () => {
|
|
|
41
35
|
[styles["down"]]: isDown(),
|
|
42
36
|
}} onMouseDown={() => {
|
|
43
37
|
setIsMouseDown(true);
|
|
44
|
-
|
|
38
|
+
context.onNoteDown(context.selectedTrackIndex, key().number);
|
|
45
39
|
}} onMouseUp={() => {
|
|
46
|
-
|
|
40
|
+
context.onNoteUp(context.selectedTrackIndex, key().number);
|
|
47
41
|
}} onMouseEnter={() => {
|
|
48
42
|
if (isMouseDown()) {
|
|
49
|
-
|
|
43
|
+
context.onNoteDown(context.selectedTrackIndex, key().number);
|
|
50
44
|
}
|
|
51
45
|
}} onMouseLeave={() => {
|
|
52
46
|
if (isMouseDown()) {
|
|
53
|
-
|
|
47
|
+
context.onNoteUp(context.selectedTrackIndex, key().number);
|
|
54
48
|
}
|
|
55
49
|
}} title={key().name} data-index={key().number % 12} style={{
|
|
56
50
|
top: `${virtualDimensions().offset -
|
|
57
|
-
(!key().isBlack
|
|
51
|
+
virtualDimensions().size * (!key().isBlack ? (nextIsBlack ? 1 / 2 : 0) : 0)}px`,
|
|
58
52
|
height: `${virtualDimensions().size +
|
|
59
53
|
(!key().isBlack && nextIsBlack ? virtualDimensions().size / 2 : 0) +
|
|
60
54
|
(!key().isBlack && previousIsBlack ? virtualDimensions().size / 2 : 0)}px`,
|
|
@@ -65,14 +59,7 @@ const PianoRollKeys = () => {
|
|
|
65
59
|
]
|
|
66
60
|
.filter((item) => !!item)
|
|
67
61
|
.join(", "),
|
|
68
|
-
}}>
|
|
69
|
-
<Show when={key().isBlack && false}>
|
|
70
|
-
<div class={styles["black-separator"]} style={{
|
|
71
|
-
top: `${virtualDimensions().offset}px`,
|
|
72
|
-
height: `${virtualDimensions().size / 2 - 0.25}px`,
|
|
73
62
|
}}></div>
|
|
74
|
-
</Show>
|
|
75
|
-
</div>
|
|
76
63
|
</Show>);
|
|
77
64
|
}}
|
|
78
65
|
</Index>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { createMemo, createSignal, For, Show } from "solid-js";
|
|
2
2
|
import { usePianoRollContext } from "./PianoRollContext";
|
|
3
3
|
import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
|
|
4
4
|
import styles from "./PianoRollNotes.module.scss";
|
|
@@ -8,73 +8,98 @@ const PianoRollNotes = (props) => {
|
|
|
8
8
|
const verticalViewPort = createMemo(() => useViewPortDimension(context.mode === "keys" ? "vertical" : "verticalTracks"));
|
|
9
9
|
const horizontalViewPort = createMemo(() => useViewPortDimension("horizontal"));
|
|
10
10
|
const gridDivisionTicks = createMemo(() => (context.ppq * 4) / context.gridDivision);
|
|
11
|
+
const [isDragging, setIsDragging] = createSignal(false);
|
|
12
|
+
const [noteDragMode, setNoteDragMode] = createSignal();
|
|
13
|
+
const [currentNoteIndex, setCurrentNoteIndex] = createSignal(-1);
|
|
14
|
+
const [currentNoteTrackIndex, setCurrentNoteTrackIndex] = createSignal(-1);
|
|
15
|
+
const [diffPosition, setDiffPosition] = createSignal(0);
|
|
16
|
+
const [getInitialNote, setInitialNote] = createSignal();
|
|
11
17
|
const snapValueToGridIfEnabled = (value, altKey) => context.snapToGrid && !altKey
|
|
12
18
|
? Math.round(value / gridDivisionTicks()) * gridDivisionTicks()
|
|
13
19
|
: value;
|
|
14
|
-
const
|
|
15
|
-
const position = horizontalViewPort().calculatePosition(event.clientX);
|
|
16
|
-
const existingNote = currentNote();
|
|
17
|
-
const midi = context.mode === "keys"
|
|
18
|
-
? 127 - Math.floor(verticalViewPort().calculatePosition(event.clientY))
|
|
19
|
-
: existingNote?.midi ?? 60;
|
|
20
|
+
const calculateNoteDragValues = (event) => {
|
|
20
21
|
const targetTrackIndex = context.mode === "tracks"
|
|
21
22
|
? clamp(Math.floor(verticalViewPort().calculatePosition(event.clientY)), 0, context.tracks.length - 1)
|
|
22
|
-
:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
: currentNoteTrackIndex() > -1
|
|
24
|
+
? currentNoteTrackIndex()
|
|
25
|
+
: context.selectedTrackIndex;
|
|
26
|
+
const midi = context.mode === "keys"
|
|
27
|
+
? Math.floor(128 - verticalViewPort().calculatePosition(event.clientY))
|
|
28
|
+
: getInitialNote()?.midi ?? 60;
|
|
29
|
+
const horiontalPosition = horizontalViewPort().calculatePosition(event.clientX);
|
|
30
|
+
return {
|
|
31
|
+
targetTrackIndex,
|
|
32
|
+
midi,
|
|
33
|
+
horiontalPosition,
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
const handleMouseMove = (mouseMoveEvent) => {
|
|
37
|
+
const note = getInitialNote();
|
|
38
|
+
if (!note)
|
|
39
|
+
return;
|
|
40
|
+
const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseMoveEvent);
|
|
41
|
+
const ticks = snapValueToGridIfEnabled(horiontalPosition - diffPosition(), mouseMoveEvent.altKey);
|
|
42
|
+
const updatedNote = {
|
|
43
|
+
...note,
|
|
44
|
+
midi,
|
|
45
|
+
...(noteDragMode() === "move" && { ticks }),
|
|
46
|
+
...(noteDragMode() === "trimStart" && {
|
|
47
|
+
ticks: ticks < note.ticks + note.durationTicks ? ticks : note.ticks + note.durationTicks,
|
|
48
|
+
durationTicks: ticks < note.ticks + note.durationTicks
|
|
49
|
+
? note.ticks + note.durationTicks - ticks
|
|
50
|
+
: snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
|
|
51
|
+
}),
|
|
52
|
+
...(noteDragMode() === "trimEnd" && {
|
|
53
|
+
ticks: ticks < note.ticks ? ticks : note.ticks,
|
|
54
|
+
durationTicks: ticks < note.ticks
|
|
55
|
+
? note.ticks - ticks
|
|
56
|
+
: snapValueToGridIfEnabled(horiontalPosition - note.ticks, mouseMoveEvent.altKey),
|
|
57
|
+
}),
|
|
58
|
+
};
|
|
59
|
+
const previousTrackIndex = currentNoteTrackIndex();
|
|
60
|
+
const previousNoteIndex = currentNoteIndex();
|
|
61
|
+
if (targetTrackIndex === previousTrackIndex) {
|
|
62
|
+
context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
|
|
33
63
|
}
|
|
34
64
|
else {
|
|
35
|
-
|
|
65
|
+
if (context.onInsertNote) {
|
|
66
|
+
context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
|
|
67
|
+
const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
|
|
68
|
+
setCurrentNoteTrackIndex(targetTrackIndex);
|
|
69
|
+
setCurrentNoteIndex(newNoteIndex);
|
|
70
|
+
}
|
|
36
71
|
}
|
|
37
72
|
};
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const
|
|
73
|
+
const stopDragging = () => {
|
|
74
|
+
window.removeEventListener("mousemove", handleMouseMove);
|
|
75
|
+
window.removeEventListener("mouseup", stopDragging);
|
|
76
|
+
setIsDragging(false);
|
|
77
|
+
};
|
|
78
|
+
const startDragging = () => {
|
|
79
|
+
window.addEventListener("mousemove", handleMouseMove);
|
|
80
|
+
window.addEventListener("mouseup", stopDragging);
|
|
81
|
+
};
|
|
44
82
|
const getClasses = (noteDragMode) => {
|
|
45
83
|
return noteDragMode ? [styles.Note, styles[noteDragMode]] : [styles.Note];
|
|
46
84
|
};
|
|
47
|
-
return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
if (!event.altKey)
|
|
66
|
-
return;
|
|
67
|
-
insertOrUpdateNote(event);
|
|
68
|
-
}} onDblClick={(event) => {
|
|
69
|
-
insertOrUpdateNote(event);
|
|
70
|
-
}} onClick={(event) => {
|
|
71
|
-
if (currentNote()) {
|
|
72
|
-
setCurrentNoteIndex(-1);
|
|
73
|
-
return;
|
|
74
|
-
}
|
|
75
|
-
if (!event.altKey)
|
|
76
|
-
return;
|
|
77
|
-
insertOrUpdateNote(event);
|
|
85
|
+
return (<div classList={{ [styles.PianoRollNotes]: true }} ref={props.ref} onMouseDown={(mouseDownEvent) => {
|
|
86
|
+
const { targetTrackIndex, midi, horiontalPosition } = calculateNoteDragValues(mouseDownEvent);
|
|
87
|
+
const ticks = snapValueToGridIfEnabled(horiontalPosition, mouseDownEvent.altKey);
|
|
88
|
+
const durationTicks = gridDivisionTicks();
|
|
89
|
+
const newNote = {
|
|
90
|
+
midi,
|
|
91
|
+
ticks,
|
|
92
|
+
durationTicks,
|
|
93
|
+
velocity: 100,
|
|
94
|
+
};
|
|
95
|
+
const newNoteIndex = context.onInsertNote(targetTrackIndex, newNote);
|
|
96
|
+
setIsDragging(true);
|
|
97
|
+
setCurrentNoteTrackIndex(targetTrackIndex);
|
|
98
|
+
setCurrentNoteIndex(newNoteIndex);
|
|
99
|
+
setInitialNote(newNote);
|
|
100
|
+
setDiffPosition(0);
|
|
101
|
+
setNoteDragMode("trimEnd");
|
|
102
|
+
startDragging();
|
|
78
103
|
}}>
|
|
79
104
|
<For each={context.tracks}>
|
|
80
105
|
{(track, trackIndex) => {
|
|
@@ -104,63 +129,15 @@ const PianoRollNotes = (props) => {
|
|
|
104
129
|
context.onRemoveNote?.(trackIndex(), noteIndex());
|
|
105
130
|
}} onMouseDown={(event) => {
|
|
106
131
|
event.stopPropagation();
|
|
132
|
+
const initialPosition = horizontalViewPort().calculatePosition(event.clientX);
|
|
133
|
+
setDiffPosition(noteDragMode() === "trimEnd"
|
|
134
|
+
? -(note.ticks + note.durationTicks - initialPosition)
|
|
135
|
+
: initialPosition - note.ticks);
|
|
107
136
|
setIsDragging(true);
|
|
108
137
|
setCurrentNoteIndex(noteIndex());
|
|
109
138
|
setCurrentNoteTrackIndex(trackIndex());
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const handleMouseMove = (mouseMoveEvent) => {
|
|
113
|
-
const note = currentNote();
|
|
114
|
-
if (!note)
|
|
115
|
-
return;
|
|
116
|
-
const ticks = snapValueToGridIfEnabled(Math.max(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
|
|
117
|
-
diffPosition, 0), mouseMoveEvent.altKey);
|
|
118
|
-
const updatedNote = {
|
|
119
|
-
...note,
|
|
120
|
-
...(noteDragMode() === "move" &&
|
|
121
|
-
context.mode === "keys" && {
|
|
122
|
-
midi: Math.round(127 -
|
|
123
|
-
verticalViewPort().calculatePosition(mouseMoveEvent.clientY)),
|
|
124
|
-
}),
|
|
125
|
-
...((noteDragMode() === "move" || noteDragMode() === "trimStart") && {
|
|
126
|
-
ticks,
|
|
127
|
-
}),
|
|
128
|
-
...(noteDragMode() === "trimStart" && {
|
|
129
|
-
durationTicks: note.durationTicks + note.ticks - ticks,
|
|
130
|
-
}),
|
|
131
|
-
...(noteDragMode() === "trimEnd" && {
|
|
132
|
-
durationTicks: snapValueToGridIfEnabled(horizontalViewPort().calculatePosition(mouseMoveEvent.clientX) -
|
|
133
|
-
note.ticks, mouseMoveEvent.altKey),
|
|
134
|
-
}),
|
|
135
|
-
};
|
|
136
|
-
const previousTrackIndex = currentNoteTrackIndex();
|
|
137
|
-
const previousNoteIndex = currentNoteIndex();
|
|
138
|
-
const targetTrackIndex = context.mode === "tracks"
|
|
139
|
-
? clamp(Math.floor(verticalViewPort().calculatePosition(mouseMoveEvent.clientY)), 0, context.tracks.length - 1)
|
|
140
|
-
: previousTrackIndex;
|
|
141
|
-
if (targetTrackIndex === previousTrackIndex) {
|
|
142
|
-
context.onNoteChange?.(previousTrackIndex, previousNoteIndex, updatedNote);
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
batch(() => {
|
|
146
|
-
if (context.onInsertNote) {
|
|
147
|
-
context.onRemoveNote?.(previousTrackIndex, previousNoteIndex);
|
|
148
|
-
const newNoteIndex = context.onInsertNote(targetTrackIndex, updatedNote);
|
|
149
|
-
setCurrentNoteTrackIndex(targetTrackIndex);
|
|
150
|
-
setCurrentNoteIndex(newNoteIndex);
|
|
151
|
-
}
|
|
152
|
-
});
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
const handleMouseUp = () => {
|
|
156
|
-
setIsDragging(false);
|
|
157
|
-
setCurrentNoteIndex(-1);
|
|
158
|
-
setCurrentNoteTrackIndex(-1);
|
|
159
|
-
window.removeEventListener("mousemove", handleMouseMove);
|
|
160
|
-
window.removeEventListener("mouseup", handleMouseUp);
|
|
161
|
-
};
|
|
162
|
-
window.addEventListener("mousemove", handleMouseMove);
|
|
163
|
-
window.addEventListener("mouseup", handleMouseUp);
|
|
139
|
+
setInitialNote(note);
|
|
140
|
+
startDragging();
|
|
164
141
|
}} style={{
|
|
165
142
|
"background-color": `rgba(255,0,0, ${(128 + note.velocity) / 256})`,
|
|
166
143
|
top: `${verticalVirtualDimensions().offset}px`,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styles from "./PianoRollTrackList.module.
|
|
1
|
+
import styles from "./PianoRollTrackList.module.scss";
|
|
2
2
|
import { createMemo, Index, Show } from "solid-js";
|
|
3
3
|
import { useViewPortDimension } from "./viewport/ScrollZoomViewPort";
|
|
4
4
|
import { usePianoRollContext } from "./PianoRollContext";
|
|
@@ -12,11 +12,10 @@ const PianoRollTrackList = () => {
|
|
|
12
12
|
return (<Show when={virtualDimensions().size > 0}>
|
|
13
13
|
<div classList={{
|
|
14
14
|
[styles["Track"]]: true,
|
|
15
|
+
[styles["selected"]]: index === context.selectedTrackIndex,
|
|
15
16
|
}} title={track().name} style={{
|
|
16
17
|
top: `${virtualDimensions().offset}px`,
|
|
17
18
|
height: `${virtualDimensions().size}px`,
|
|
18
|
-
background: index === context.selectedTrackIndex ? "gray" : "lightgrey",
|
|
19
|
-
cursor: "pointer",
|
|
20
19
|
}} onClick={() => context.onSelectedTrackIndexChange?.(index)}>
|
|
21
20
|
{index} {track().name || "[unnamed track]"}
|
|
22
21
|
</div>
|
package/dist/source/index.jsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PianoRoll from "./PianoRoll";
|
|
2
|
-
import PlayHead from "./PlayHead";
|
|
2
|
+
import PlayHead from "./viewport/PlayHead";
|
|
3
3
|
import useNotes from "./useNotes";
|
|
4
4
|
import createPianoRollstate from "./usePianoRollState";
|
|
5
5
|
export { PianoRoll, createPianoRollstate, useNotes, PlayHead };
|
|
@@ -1,29 +1,49 @@
|
|
|
1
1
|
import { mergeProps } from "solid-js";
|
|
2
2
|
import { createStore } from "solid-js/store";
|
|
3
|
-
const
|
|
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
|
+
"isKeyDown",
|
|
29
|
+
];
|
|
30
|
+
const createPianoRollstate = (initialState) => {
|
|
4
31
|
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
32
|
...defaultState,
|
|
33
|
+
...initialState,
|
|
20
34
|
});
|
|
35
|
+
const handlers = Object.fromEntries(Object.entries(state).map((entry) => {
|
|
36
|
+
return [
|
|
37
|
+
propNameToHandlerName(entry[0]),
|
|
38
|
+
(value) => setState(entry[0], value),
|
|
39
|
+
];
|
|
40
|
+
}));
|
|
21
41
|
const updateNotes = async (trackIndex, getNotes) => {
|
|
22
42
|
const track = state.tracks[trackIndex];
|
|
23
43
|
if (!track)
|
|
24
44
|
return;
|
|
25
45
|
const notes = track.notes;
|
|
26
|
-
onTracksChange([
|
|
46
|
+
handlers.onTracksChange([
|
|
27
47
|
...state.tracks.slice(0, trackIndex),
|
|
28
48
|
{ ...track, notes: getNotes(notes) },
|
|
29
49
|
...state.tracks.slice(trackIndex + 1),
|
|
@@ -55,38 +75,30 @@ const createPianoRollstate = (defaultState) => {
|
|
|
55
75
|
...notes.slice(noteIndex + 1),
|
|
56
76
|
]);
|
|
57
77
|
};
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
const
|
|
71
|
-
|
|
78
|
+
const updateKeyPressedState = (trackIndex, keyNumber, value) => {
|
|
79
|
+
handlers.onPressedKeysChange?.({
|
|
80
|
+
...state.pressedKeys,
|
|
81
|
+
[trackIndex]: {
|
|
82
|
+
...state.pressedKeys[trackIndex],
|
|
83
|
+
[keyNumber]: value,
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
const onNoteDown = (trackIndex, keyNumber) => {
|
|
88
|
+
updateKeyPressedState(trackIndex, keyNumber, true);
|
|
89
|
+
};
|
|
90
|
+
const onNoteUp = (trackIndex, keyNumber) => {
|
|
91
|
+
updateKeyPressedState(trackIndex, keyNumber, false);
|
|
92
|
+
};
|
|
93
|
+
const isKeyDown = (trackIndex, keyNumber) => !!state.pressedKeys[trackIndex]?.[keyNumber];
|
|
72
94
|
return mergeProps(state, {
|
|
73
|
-
|
|
74
|
-
onModeChange,
|
|
75
|
-
onPositionChange,
|
|
76
|
-
onZoomChange,
|
|
77
|
-
onVerticalZoomChange,
|
|
78
|
-
onVerticalPositionChange,
|
|
79
|
-
onVerticalTrackZoomChange,
|
|
80
|
-
onVerticalTrackPositionChange,
|
|
81
|
-
onGridDivisionChange,
|
|
82
|
-
onSnapToGridChange,
|
|
83
|
-
onDurationChange,
|
|
84
|
-
onTracksChange,
|
|
95
|
+
...handlers,
|
|
85
96
|
onNoteChange,
|
|
86
97
|
onInsertNote,
|
|
87
98
|
onRemoveNote,
|
|
88
|
-
|
|
89
|
-
|
|
99
|
+
onNoteDown,
|
|
100
|
+
onNoteUp,
|
|
101
|
+
isKeyDown,
|
|
90
102
|
});
|
|
91
103
|
};
|
|
92
104
|
export default createPianoRollstate;
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
import { createEffect, createMemo,
|
|
2
|
-
import { clamp } from "./
|
|
3
|
-
import { useViewPortDimension } from "./
|
|
1
|
+
import { createEffect, createMemo, splitProps } from "solid-js";
|
|
2
|
+
import { clamp } from "./createViewPortDimension";
|
|
3
|
+
import { useViewPortDimension } from "./ScrollZoomViewPort";
|
|
4
4
|
const PlayHead = (allProps) => {
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
"playHeadPosition",
|
|
5
|
+
const [props, divProps] = splitProps(allProps, [
|
|
6
|
+
"position",
|
|
8
7
|
"sync",
|
|
9
|
-
"onPlayHeadPositionChange",
|
|
10
8
|
"onPositionChange",
|
|
9
|
+
"dimensionName",
|
|
11
10
|
]);
|
|
12
|
-
const viewPort = useViewPortDimension("horizontal");
|
|
11
|
+
const viewPort = useViewPortDimension(props.dimensionName ?? "horizontal");
|
|
13
12
|
createEffect(() => {
|
|
14
13
|
if (!props.sync)
|
|
15
14
|
return;
|
|
16
15
|
const maxPosition = viewPort.range;
|
|
17
|
-
const newPosition = clamp(props.
|
|
18
|
-
|
|
16
|
+
const newPosition = clamp(props.position - viewPort.range / viewPort.zoom / 2, 0, maxPosition);
|
|
17
|
+
viewPort.onPositionChange?.(newPosition);
|
|
19
18
|
});
|
|
20
|
-
const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.
|
|
19
|
+
const leftPosition = createMemo(() => viewPort.calculatePixelOffset(props.position));
|
|
21
20
|
return (<div class="PlayHead" {...divProps} style={{
|
|
22
21
|
position: "absolute",
|
|
23
22
|
height: "100%",
|
|
@@ -29,12 +28,9 @@ const PlayHead = (allProps) => {
|
|
|
29
28
|
}} onMouseDown={(event) => {
|
|
30
29
|
event.preventDefault();
|
|
31
30
|
event.stopPropagation();
|
|
32
|
-
const handleMouseMove = ({
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
return;
|
|
36
|
-
const newPosition = viewPort.calculatePosition(leftPosition() + movementX);
|
|
37
|
-
props.onPlayHeadPositionChange?.(newPosition);
|
|
31
|
+
const handleMouseMove = ({ clientX }) => {
|
|
32
|
+
const newPosition = viewPort.calculatePosition(clientX);
|
|
33
|
+
props.onPositionChange?.(newPosition);
|
|
38
34
|
};
|
|
39
35
|
const handleMouseUp = () => {
|
|
40
36
|
window.removeEventListener("mousemove", handleMouseMove);
|
|
@@ -16,24 +16,27 @@ export declare const PianoRollContextProvider: import("solid-js/types/reactive/s
|
|
|
16
16
|
duration: number;
|
|
17
17
|
tracks: import("./types").Track[];
|
|
18
18
|
selectedTrackIndex: number;
|
|
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;
|
|
19
|
+
pressedKeys: Record<number, Record<number, boolean>>;
|
|
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
|
-
|
|
36
|
-
|
|
23
|
+
onNoteDown: (trackIndex: number, keyNumber: number) => void;
|
|
24
|
+
onNoteUp: (trackIndex: number, keyNumber: number) => void;
|
|
25
|
+
isKeyDown: (trackIndex: number, keyNumber: number) => boolean;
|
|
26
|
+
onPpqChange: (value: number) => void;
|
|
27
|
+
onModeChange: (value: "keys" | "tracks") => void;
|
|
28
|
+
onPositionChange: (value: number) => void;
|
|
29
|
+
onZoomChange: (value: number) => void;
|
|
30
|
+
onVerticalZoomChange: (value: number) => void;
|
|
31
|
+
onVerticalPositionChange: (value: number) => void;
|
|
32
|
+
onVerticalTrackZoomChange: (value: number) => void;
|
|
33
|
+
onVerticalTrackPositionChange: (value: number) => void;
|
|
34
|
+
onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
|
|
35
|
+
onSnapToGridChange: (value: boolean) => void;
|
|
36
|
+
onDurationChange: (value: number) => void;
|
|
37
|
+
onTracksChange: (value: import("./types").Track[]) => void;
|
|
38
|
+
onSelectedTrackIndexChange: (value: number) => void;
|
|
39
|
+
onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
|
|
37
40
|
}>;
|
|
38
41
|
export declare const usePianoRollContext: () => {
|
|
39
42
|
showAllTracks?: boolean;
|
|
@@ -52,23 +55,56 @@ export declare const usePianoRollContext: () => {
|
|
|
52
55
|
duration: number;
|
|
53
56
|
tracks: import("./types").Track[];
|
|
54
57
|
selectedTrackIndex: number;
|
|
55
|
-
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;
|
|
58
|
+
pressedKeys: Record<number, Record<number, boolean>>;
|
|
68
59
|
onNoteChange: (trackIndex: number, noteIndex: number, note: import("./types").Note) => void;
|
|
69
60
|
onInsertNote: (trackIndex: number, note: import("./types").Note) => number;
|
|
70
61
|
onRemoveNote: (trackIndex: number, noteIndex: number) => void;
|
|
71
|
-
|
|
72
|
-
|
|
62
|
+
onNoteDown: (trackIndex: number, keyNumber: number) => void;
|
|
63
|
+
onNoteUp: (trackIndex: number, keyNumber: number) => void;
|
|
64
|
+
isKeyDown: (trackIndex: number, keyNumber: number) => boolean;
|
|
65
|
+
onPpqChange: (value: number) => void;
|
|
66
|
+
onModeChange: (value: "keys" | "tracks") => void;
|
|
67
|
+
onPositionChange: (value: number) => void;
|
|
68
|
+
onZoomChange: (value: number) => void;
|
|
69
|
+
onVerticalZoomChange: (value: number) => void;
|
|
70
|
+
onVerticalPositionChange: (value: number) => void;
|
|
71
|
+
onVerticalTrackZoomChange: (value: number) => void;
|
|
72
|
+
onVerticalTrackPositionChange: (value: number) => void;
|
|
73
|
+
onGridDivisionChange: (value: import("./PianoRoll").GridDivision) => void;
|
|
74
|
+
onSnapToGridChange: (value: boolean) => void;
|
|
75
|
+
onDurationChange: (value: number) => void;
|
|
76
|
+
onTracksChange: (value: import("./types").Track[]) => void;
|
|
77
|
+
onSelectedTrackIndexChange: (value: number) => void;
|
|
78
|
+
onPressedKeysChange: (value: Record<number, Record<number, boolean>>) => void;
|
|
73
79
|
};
|
|
74
|
-
export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "
|
|
80
|
+
export declare const splitContextProps: (allProps: PianoRollProps) => [Pick<PianoRollProps, "onDurationChange" | keyof {
|
|
81
|
+
ppq: number;
|
|
82
|
+
mode: "keys" | "tracks";
|
|
83
|
+
position: number;
|
|
84
|
+
zoom: number;
|
|
85
|
+
verticalZoom: number;
|
|
86
|
+
verticalPosition: number;
|
|
87
|
+
verticalTrackZoom: number;
|
|
88
|
+
verticalTrackPosition: number;
|
|
89
|
+
gridDivision: import("./PianoRoll").GridDivision;
|
|
90
|
+
snapToGrid: boolean;
|
|
91
|
+
duration: number;
|
|
92
|
+
tracks: import("./types").Track[];
|
|
93
|
+
selectedTrackIndex: number;
|
|
94
|
+
pressedKeys: Record<number, Record<number, boolean>>;
|
|
95
|
+
} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">, Omit<PianoRollProps, "onDurationChange" | keyof {
|
|
96
|
+
ppq: number;
|
|
97
|
+
mode: "keys" | "tracks";
|
|
98
|
+
position: number;
|
|
99
|
+
zoom: number;
|
|
100
|
+
verticalZoom: number;
|
|
101
|
+
verticalPosition: number;
|
|
102
|
+
verticalTrackZoom: number;
|
|
103
|
+
verticalTrackPosition: number;
|
|
104
|
+
gridDivision: import("./PianoRoll").GridDivision;
|
|
105
|
+
snapToGrid: boolean;
|
|
106
|
+
duration: number;
|
|
107
|
+
tracks: import("./types").Track[];
|
|
108
|
+
selectedTrackIndex: number;
|
|
109
|
+
pressedKeys: Record<number, Record<number, boolean>>;
|
|
110
|
+
} | "onPpqChange" | "onModeChange" | "onPositionChange" | "onZoomChange" | "onVerticalZoomChange" | "onVerticalPositionChange" | "onVerticalTrackZoomChange" | "onVerticalTrackPositionChange" | "onGridDivisionChange" | "onSnapToGridChange" | "onTracksChange" | "onSelectedTrackIndexChange" | "onPressedKeysChange" | "onNoteChange" | "onInsertNote" | "onRemoveNote" | "onNoteDown" | "onNoteUp" | "isKeyDown" | "showAllTracks" | "showTrackList">];
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PianoRoll from "./PianoRoll";
|
|
2
|
-
import PlayHead from "./PlayHead";
|
|
2
|
+
import PlayHead from "./viewport/PlayHead";
|
|
3
3
|
import useNotes from "./useNotes";
|
|
4
4
|
import createPianoRollstate from "./usePianoRollState";
|
|
5
5
|
export { PianoRoll, createPianoRollstate, useNotes, PlayHead };
|