solid-pianoroll 0.0.23 → 0.0.25

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 (54) hide show
  1. package/dist/{cjs/index.js → dev.cjs} +446 -426
  2. package/dist/dev.css +212 -0
  3. package/dist/dev.js +1330 -0
  4. package/dist/dev.jsx +1130 -0
  5. package/dist/index.cjs +1330 -0
  6. package/dist/index.css +212 -0
  7. package/dist/index.d.ts +105 -0
  8. package/dist/{esm/index.js → index.js} +450 -425
  9. package/dist/index.jsx +1130 -0
  10. package/package.json +43 -34
  11. package/dist/cjs/index.js.map +0 -1
  12. package/dist/esm/index.js.map +0 -1
  13. package/dist/source/PianoRoll.jsx +0 -78
  14. package/dist/source/PianoRollContext.jsx +0 -11
  15. package/dist/source/PianoRollGrid.jsx +0 -64
  16. package/dist/source/PianoRollKeys.jsx +0 -72
  17. package/dist/source/PianoRollNotes.jsx +0 -162
  18. package/dist/source/PianoRollNotesScroller.jsx +0 -16
  19. package/dist/source/PianoRollScale.jsx +0 -29
  20. package/dist/source/PianoRollScrollZoomViewPort.jsx +0 -49
  21. package/dist/source/PianoRollTrackList.jsx +0 -27
  22. package/dist/source/PianoRollTrackListScroller.jsx +0 -16
  23. package/dist/source/index.jsx +0 -5
  24. package/dist/source/types.js +0 -1
  25. package/dist/source/useBoundingClientRect.js +0 -29
  26. package/dist/source/useNotes.js +0 -23
  27. package/dist/source/usePianoRollGrid.js +0 -45
  28. package/dist/source/usePianoRollState.js +0 -106
  29. package/dist/source/viewport/PlayHead.jsx +0 -43
  30. package/dist/source/viewport/ScrollZoomContainer.jsx +0 -104
  31. package/dist/source/viewport/ScrollZoomViewPort.jsx +0 -31
  32. package/dist/source/viewport/ZoomSliderControl.jsx +0 -29
  33. package/dist/source/viewport/createViewPortDimension.js +0 -51
  34. package/dist/types/PianoRoll.d.ts +0 -9
  35. package/dist/types/PianoRollContext.d.ts +0 -122
  36. package/dist/types/PianoRollGrid.d.ts +0 -2
  37. package/dist/types/PianoRollKeys.d.ts +0 -9
  38. package/dist/types/PianoRollNotes.d.ts +0 -5
  39. package/dist/types/PianoRollNotesScroller.d.ts +0 -3
  40. package/dist/types/PianoRollScale.d.ts +0 -2
  41. package/dist/types/PianoRollScrollZoomViewPort.d.ts +0 -3
  42. package/dist/types/PianoRollTrackList.d.ts +0 -2
  43. package/dist/types/PianoRollTrackListScroller.d.ts +0 -3
  44. package/dist/types/index.d.ts +0 -5
  45. package/dist/types/types.d.ts +0 -6
  46. package/dist/types/useBoundingClientRect.d.ts +0 -3
  47. package/dist/types/useNotes.d.ts +0 -9
  48. package/dist/types/usePianoRollGrid.d.ts +0 -13
  49. package/dist/types/usePianoRollState.d.ts +0 -63
  50. package/dist/types/viewport/PlayHead.d.ts +0 -8
  51. package/dist/types/viewport/ScrollZoomContainer.d.ts +0 -8
  52. package/dist/types/viewport/ScrollZoomViewPort.d.ts +0 -39
  53. package/dist/types/viewport/ZoomSliderControl.d.ts +0 -6
  54. package/dist/types/viewport/createViewPortDimension.d.ts +0 -40
package/dist/dev.css ADDED
@@ -0,0 +1,212 @@
1
+ /* src/PianoRoll.module.css */
2
+ .PianoRoll {
3
+ box-sizing: border-box;
4
+ display: flex;
5
+ overflow: hidden;
6
+ flex-direction: column;
7
+ height: 100%;
8
+ user-select: none;
9
+ }
10
+ .PianoRollContainer {
11
+ overflow: hidden;
12
+ height: 100%;
13
+ display: flex;
14
+ flex-direction: row;
15
+ }
16
+ .PianoRollLeftColumn {
17
+ display: flex;
18
+ overflow: hidden;
19
+ flex-direction: column;
20
+ max-width: 250px;
21
+ margin-top: 30px;
22
+ }
23
+ .PianoRollLeftColumn.showTrackList {
24
+ width: 30%;
25
+ margin-top: 0;
26
+ }
27
+ .PianoRollRightColumn {
28
+ display: flex;
29
+ position: relative;
30
+ flex-direction: column;
31
+ flex: 1;
32
+ height: 100%;
33
+ }
34
+
35
+ /* src/PianoRollKeys.module.css */
36
+ .PianoRollKeys {
37
+ position: relative;
38
+ height: 100%;
39
+ border-width: 0;
40
+ border-color: #000;
41
+ border-style: solid;
42
+ border-right-width: 1px;
43
+ border-left-width: 1px;
44
+ background: white;
45
+ cursor: pointer;
46
+ background: black;
47
+ }
48
+ .Key {
49
+ transition-property: background-color, box-shadow;
50
+ transition-duration: 200ms;
51
+ transition-timing-function: ease-out;
52
+ border-width: 0px;
53
+ position: absolute;
54
+ box-sizing: border-box;
55
+ width: 120%;
56
+ left: -20%;
57
+ border-color: #000;
58
+ border-style: solid;
59
+ transform: rotateX(0deg);
60
+ perspective: 100px;
61
+ }
62
+ .black {
63
+ background: black;
64
+ border-top-right-radius: 12%;
65
+ border-bottom-right-radius: 12%;
66
+ margin-left: -20%;
67
+ z-index: 1;
68
+ border: 1px black outset;
69
+ }
70
+ .white {
71
+ background: white;
72
+ border-top-width: 0.5px;
73
+ border-bottom-width: 0.5px;
74
+ border-top-right-radius: 4%;
75
+ border-bottom-right-radius: 4%;
76
+ }
77
+ .down {
78
+ transition: none;
79
+ background: red;
80
+ transform: rotateX(0deg) rotateY(20deg);
81
+ }
82
+
83
+ /* src/viewport/ScrollZoomContainer.module.css */
84
+ .ScrollZoomContainer {
85
+ height: 100%;
86
+ width: 100%;
87
+ z-index: 4;
88
+ }
89
+
90
+ /* src/PianoRollNotes.module.css */
91
+ .PianoRollNotes {
92
+ position: absolute;
93
+ flex: 1;
94
+ top: 0;
95
+ left: 0;
96
+ width: 100%;
97
+ height: 100%;
98
+ z-index: 1;
99
+ cursor: grab;
100
+ }
101
+ .Note {
102
+ position: absolute;
103
+ box-sizing: border-box;
104
+ border-width: 0.5px;
105
+ border-style: solid;
106
+ border-color: #a00;
107
+ cursor: move;
108
+ }
109
+ .Note.trimStart {
110
+ cursor: w-resize;
111
+ }
112
+ .Note.trimEnd {
113
+ cursor: e-resize;
114
+ }
115
+
116
+ /* src/PianoRollGrid.module.css */
117
+ .PianoRollGrid {
118
+ position: relative;
119
+ width: 100%;
120
+ height: 100%;
121
+ }
122
+ .PianoRollGrid-Row {
123
+ position: absolute;
124
+ border-style: solid;
125
+ border-color: gray;
126
+ width: 100%;
127
+ border-width: 0;
128
+ }
129
+ .PianoRollGrid-Row.IsDark {
130
+ background-color: rgba(0, 0, 0, 0.2);
131
+ }
132
+ .PianoRollGrid-Row.Key {
133
+ border-width: 0px 1px 0px 0;
134
+ }
135
+ .PianoRollGrid-Row.IsBlackAndNextIsWhite {
136
+ background-color: rgba(0, 0, 0, 0.2);
137
+ border-width: 0.1px 1px 0.1px 0;
138
+ }
139
+ .PianoRollGrid-Time {
140
+ position: absolute;
141
+ box-sizing: border-box;
142
+ top: 0px;
143
+ height: 100%;
144
+ border-left-style: solid;
145
+ border-left-width: 0.5px;
146
+ border-left-color: #bbb;
147
+ background: #ccc;
148
+ }
149
+ .PianoRollGrid-Time.Highlighted {
150
+ background: #ddd;
151
+ }
152
+ .PianoRollGrid-Time.HighlightedBorder {
153
+ border-left-color: gray;
154
+ }
155
+
156
+ /* src/PianoRollTrackList.module.css */
157
+ .PianoRollTrackList {
158
+ position: relative;
159
+ height: 100%;
160
+ flex: 1;
161
+ }
162
+ .Track {
163
+ border-width: 0px;
164
+ position: absolute;
165
+ box-sizing: border-box;
166
+ width: 100%;
167
+ border-color: #000;
168
+ border-style: solid;
169
+ border-right-width: 1px;
170
+ border-bottom-width: 1px;
171
+ padding: 2px;
172
+ cursor: pointer;
173
+ background: lightgrey;
174
+ }
175
+ Track.selected {
176
+ background: gray;
177
+ }
178
+
179
+ /* src/PianoRollScale.module.css */
180
+ .PianoRollScale {
181
+ position: relative;
182
+ width: 100%;
183
+ height: 100%;
184
+ }
185
+ .PianoRollScale-Time {
186
+ position: absolute;
187
+ box-sizing: border-box;
188
+ top: 0px;
189
+ height: 100%;
190
+ border-left-style: solid;
191
+ border-left-width: 0.5px;
192
+ border-left-color: x#666;
193
+ border-bottom-color: #333;
194
+ border-bottom-style: solid;
195
+ border-bottom-width: 0.5px;
196
+ background: #777;
197
+ display: flex;
198
+ align-items: center;
199
+ }
200
+ .PianoRollScale-Label {
201
+ position: absolute;
202
+ z-index: 1;
203
+ color: #ccc;
204
+ margin-left: 3px;
205
+ font-size: 0.8em;
206
+ }
207
+ .PianoRollScale-Time.Highlighted {
208
+ background: #666;
209
+ }
210
+ .PianoRollScale-Time.HighlightedBorder {
211
+ border-left-color: #111;
212
+ }