@tremolo-ui/dom 0.5.0 → 0.6.0
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/index.cjs +459 -100
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +234 -39
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +234 -39
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +457 -102
- package/dist/index.js.map +1 -1
- package/package.json +4 -3
- package/src/canvas/animation.ts +49 -31
- package/src/canvas/context.ts +32 -5
- package/src/index.ts +13 -2
- package/src/midi/access.ts +83 -13
- package/src/midi/input.ts +97 -26
- package/src/midi/message.ts +37 -8
- package/src/piano/{input.ts → index.ts} +23 -3
- package/src/pointer/{dragValue.ts → drag-value.ts} +155 -19
- package/src/pointer/drag.ts +215 -20
- package/src/pointer/wheel.ts +4 -2
- package/src/selection/box.ts +136 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { PianoLayout, ValueRange } from "@tremolo-ui/functions";
|
|
2
|
-
|
|
3
2
|
//#region src/canvas/animation.d.ts
|
|
4
3
|
/** What the canvas looked like when a frame was drawn. */
|
|
5
4
|
interface AnimationFrame {
|
|
@@ -13,7 +12,7 @@ interface AnimationFrame {
|
|
|
13
12
|
deltaTime: number;
|
|
14
13
|
/** Milliseconds since the instance was created. */
|
|
15
14
|
elapsedTime: number;
|
|
16
|
-
/** Frames per second implied by `deltaTime
|
|
15
|
+
/** Frames per second implied by `deltaTime`, or 0 when no time elapsed. */
|
|
17
16
|
fps: number;
|
|
18
17
|
}
|
|
19
18
|
type CanvasDrawFunction = (context: CanvasRenderingContext2D, frame: AnimationFrame) => void;
|
|
@@ -34,7 +33,7 @@ interface AnimationCanvasOptions {
|
|
|
34
33
|
*/
|
|
35
34
|
animate?: boolean;
|
|
36
35
|
/**
|
|
37
|
-
* Size in CSS pixels. Ignored when `
|
|
36
|
+
* Size in CSS pixels. Ignored when `resizable` is on.
|
|
38
37
|
*
|
|
39
38
|
* @default { width: 100, height: 100 }
|
|
40
39
|
*/
|
|
@@ -50,7 +49,7 @@ interface AnimationCanvasOptions {
|
|
|
50
49
|
*
|
|
51
50
|
* @default false
|
|
52
51
|
*/
|
|
53
|
-
|
|
52
|
+
resizable?: boolean;
|
|
54
53
|
/**
|
|
55
54
|
* Carry the drawing across a resize, so that the canvas does not blank for a
|
|
56
55
|
* frame while the new size is drawn.
|
|
@@ -72,7 +71,7 @@ interface AnimationCanvasInstance {
|
|
|
72
71
|
* render without restarting the animation, so the frame count and the
|
|
73
72
|
* elapsed time keep running.
|
|
74
73
|
*
|
|
75
|
-
* `
|
|
74
|
+
* `resizable` and `contextAttributes` are fixed for the lifetime of the
|
|
76
75
|
* instance and are ignored here.
|
|
77
76
|
*
|
|
78
77
|
* While `animate` is off this also draws a frame, since nothing else would.
|
|
@@ -94,16 +93,22 @@ declare function createAnimationCanvas(canvas: HTMLCanvasElement, options: Anima
|
|
|
94
93
|
//#endregion
|
|
95
94
|
//#region src/canvas/context.d.ts
|
|
96
95
|
/**
|
|
97
|
-
* The
|
|
98
|
-
*
|
|
99
|
-
*
|
|
96
|
+
* The assignable parts of a 2D context's drawing state. They have to be
|
|
97
|
+
* carried across a resize by hand because setting `canvas.width` resets the
|
|
98
|
+
* context to its defaults. The transform and line dash are handled separately
|
|
99
|
+
* by {@link DrawingContext} because they are exposed through methods.
|
|
100
100
|
*
|
|
101
101
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save
|
|
102
102
|
*/
|
|
103
|
-
declare const drawingState: readonly ["strokeStyle", "fillStyle", "globalAlpha", "lineWidth", "lineCap", "lineJoin", "miterLimit", "lineDashOffset", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "globalCompositeOperation", "font", "textAlign", "textBaseline", "direction", "imageSmoothingEnabled"];
|
|
103
|
+
declare const drawingState: readonly ["strokeStyle", "fillStyle", "globalAlpha", "lineWidth", "lineCap", "lineJoin", "miterLimit", "lineDashOffset", "shadowOffsetX", "shadowOffsetY", "shadowBlur", "shadowColor", "globalCompositeOperation", "filter", "font", "fontKerning", "fontStretch", "fontVariantCaps", "textAlign", "textBaseline", "direction", "letterSpacing", "textRendering", "wordSpacing", "imageSmoothingEnabled", "imageSmoothingQuality"];
|
|
104
104
|
type DrawingState = (typeof drawingState)[number];
|
|
105
105
|
type DrawingStateValue = CanvasRenderingContext2D[DrawingState];
|
|
106
|
-
type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState
|
|
106
|
+
type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState> & {
|
|
107
|
+
/** The current line dash sequence. */
|
|
108
|
+
lineDash: number[];
|
|
109
|
+
/** The current transformation matrix. */
|
|
110
|
+
transform: DOMMatrix;
|
|
111
|
+
};
|
|
107
112
|
declare function isDrawingState(value: unknown): value is DrawingState;
|
|
108
113
|
//#endregion
|
|
109
114
|
//#region src/midi/access.d.ts
|
|
@@ -112,14 +117,34 @@ declare const PERMISSION_DENIED = "PERMISSION_DENIED";
|
|
|
112
117
|
/** @private */
|
|
113
118
|
declare const NOT_SUPPORTED = "NOT_SUPPORTED";
|
|
114
119
|
/** @private */
|
|
115
|
-
|
|
120
|
+
declare const UNAVAILABLE = "UNAVAILABLE";
|
|
121
|
+
/** @private */
|
|
122
|
+
type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED | typeof UNAVAILABLE;
|
|
123
|
+
type MIDIAccessOptions = {
|
|
124
|
+
/**
|
|
125
|
+
* Ask for system exclusive messages as well.
|
|
126
|
+
*
|
|
127
|
+
* Browsers treat this as a separate, more sensitive permission, so leave it
|
|
128
|
+
* off unless the app actually reads or sends sysex.
|
|
129
|
+
*
|
|
130
|
+
* @default false
|
|
131
|
+
*/
|
|
132
|
+
sysex?: boolean;
|
|
133
|
+
};
|
|
116
134
|
type MIDIAccessState = {
|
|
117
135
|
readonly midiAccess: MIDIAccess | null;
|
|
118
136
|
readonly error: MIDIAccessError | null;
|
|
137
|
+
/**
|
|
138
|
+
* The inputs currently connected, in the order MIDIAccess lists them.
|
|
139
|
+
*
|
|
140
|
+
* Kept up to date as devices are plugged in and unplugged, so a UI listing
|
|
141
|
+
* the devices does not have to watch `statechange` itself.
|
|
142
|
+
*/
|
|
143
|
+
readonly inputs: readonly MIDIInput[];
|
|
119
144
|
};
|
|
120
145
|
interface MIDIAccessInstance {
|
|
121
146
|
/** Request MIDI access. Safe to call more than once. */
|
|
122
|
-
request: () => void;
|
|
147
|
+
request: (options?: MIDIAccessOptions) => void;
|
|
123
148
|
getState: () => MIDIAccessState;
|
|
124
149
|
/** Snapshot for server side rendering. Always the initial state. */
|
|
125
150
|
getServerState: () => MIDIAccessState;
|
|
@@ -135,35 +160,70 @@ interface MIDIAccessInstance {
|
|
|
135
160
|
*/
|
|
136
161
|
declare function createMIDIAccess(): MIDIAccessInstance;
|
|
137
162
|
//#endregion
|
|
163
|
+
//#region src/midi/input.d.ts
|
|
164
|
+
/**
|
|
165
|
+
* Centre of the 14-bit pitch bend range: no bend.
|
|
166
|
+
*
|
|
167
|
+
* The range is not symmetric — 0 is 8192 below centre and 16383 is 8191 above
|
|
168
|
+
* — so a wheel at rest reports exactly this rather than half of the maximum.
|
|
169
|
+
*/
|
|
170
|
+
declare const PITCH_BEND_CENTER = 8192;
|
|
171
|
+
/**
|
|
172
|
+
* Every handler is given the channel last, as 0-15. MIDI channels are written
|
|
173
|
+
* 1-16 on hardware, so add one before showing it to anyone.
|
|
174
|
+
*/
|
|
175
|
+
type MIDIInputHandlers = {
|
|
176
|
+
onNoteOnEvent?: (note: number, velocity: number, channel: number) => void;
|
|
177
|
+
onNoteOffEvent?: (note: number, channel: number) => void;
|
|
178
|
+
/**
|
|
179
|
+
* The 14-bit bend, 0-16383, centred at {@link PITCH_BEND_CENTER}.
|
|
180
|
+
*
|
|
181
|
+
* The two data bytes are little-endian — the first carries the low 7 bits —
|
|
182
|
+
* which is the other way round from every other message.
|
|
183
|
+
*/
|
|
184
|
+
onPitchBendEvent?: (value: number, channel: number) => void;
|
|
185
|
+
/** `controller` is the CC number, `value` is 0-127. */
|
|
186
|
+
onControlChangeEvent?: (controller: number, value: number, channel: number) => void;
|
|
187
|
+
onProgramChangeEvent?: (program: number, channel: number) => void;
|
|
188
|
+
/** Pressure for one held note (polyphonic aftertouch). */
|
|
189
|
+
onAftertouchEvent?: (note: number, pressure: number, channel: number) => void;
|
|
190
|
+
/** Pressure for the whole channel, sent by keyboards with one sensor. */
|
|
191
|
+
onChannelPressureEvent?: (pressure: number, channel: number) => void;
|
|
192
|
+
};
|
|
193
|
+
interface MIDIInputInstance {
|
|
194
|
+
/** Replace the handlers, keeping the listeners in place. */
|
|
195
|
+
update: (handlers: MIDIInputHandlers) => void;
|
|
196
|
+
destroy: () => void;
|
|
197
|
+
}
|
|
198
|
+
/**
|
|
199
|
+
* Handle the channel voice messages of every connected input. To be used with
|
|
200
|
+
* {@link createMIDIAccess}. Internally uses {@link createMIDIMessage}, so
|
|
201
|
+
* devices plugged in later are picked up.
|
|
202
|
+
*
|
|
203
|
+
* System messages (clock, sysex, and the rest of `0xf0`-`0xff`) are not
|
|
204
|
+
* decoded here; reach for {@link createMIDIMessage} for those.
|
|
205
|
+
*/
|
|
206
|
+
declare function createMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): MIDIInputInstance;
|
|
207
|
+
//#endregion
|
|
138
208
|
//#region src/midi/message.d.ts
|
|
139
209
|
interface MIDIMessageInstance {
|
|
210
|
+
/** Replace the handler, keeping the listeners in place. */
|
|
211
|
+
update: (onMIDIMessage: (event: MIDIMessageEvent) => void) => void;
|
|
140
212
|
destroy: () => void;
|
|
141
213
|
}
|
|
142
214
|
/**
|
|
143
215
|
* Listen to raw `midimessage` events on every input of a MIDIAccess.
|
|
144
216
|
*
|
|
217
|
+
* The set of inputs is followed rather than sampled: MIDIAccess fires
|
|
218
|
+
* `statechange` when a device is plugged in or unplugged, and the listeners
|
|
219
|
+
* move with it. A keyboard connected after access was granted works without
|
|
220
|
+
* the caller having to rebuild anything.
|
|
221
|
+
*
|
|
145
222
|
* Use this when you need more detail than {@link createMIDIInput} provides.
|
|
146
223
|
*/
|
|
147
224
|
declare function createMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): MIDIMessageInstance;
|
|
148
225
|
//#endregion
|
|
149
|
-
//#region src/
|
|
150
|
-
type MIDIInputHandlers = {
|
|
151
|
-
onNoteOnEvent?: (note: number, velocity: number) => void;
|
|
152
|
-
onNoteOffEvent?: (note: number) => void;
|
|
153
|
-
onPitchBendEvent?: (msb: number, lsb: number) => void;
|
|
154
|
-
};
|
|
155
|
-
type MIDIInputInstance = MIDIMessageInstance;
|
|
156
|
-
/**
|
|
157
|
-
* Handle note on/off and pitch bend events. To be used with {@link createMIDIAccess}.
|
|
158
|
-
* Internally uses {@link createMIDIMessage}.
|
|
159
|
-
*/
|
|
160
|
-
declare function createMIDIInput(midiAccess: MIDIAccess | null, {
|
|
161
|
-
onNoteOnEvent,
|
|
162
|
-
onNoteOffEvent,
|
|
163
|
-
onPitchBendEvent
|
|
164
|
-
}: MIDIInputHandlers): MIDIInputInstance;
|
|
165
|
-
//#endregion
|
|
166
|
-
//#region src/piano/input.d.ts
|
|
226
|
+
//#region src/piano/index.d.ts
|
|
167
227
|
/**
|
|
168
228
|
* What asked for a note to sound.
|
|
169
229
|
*
|
|
@@ -234,10 +294,13 @@ declare function createPianoInput(element: Element, options: PianoInputOptions):
|
|
|
234
294
|
//#endregion
|
|
235
295
|
//#region src/pointer/drag.d.ts
|
|
236
296
|
type DragState = {
|
|
237
|
-
/** Total movement from the drag start, in screen coordinates. */
|
|
238
|
-
|
|
297
|
+
/** Total movement from the drag start, in screen coordinates. */
|
|
298
|
+
x: number;
|
|
299
|
+
y: number;
|
|
300
|
+
/** Movement since the previous event, in screen coordinates. */
|
|
239
301
|
deltaX: number;
|
|
240
|
-
deltaY: number;
|
|
302
|
+
deltaY: number;
|
|
303
|
+
/** Pointer position in viewport coordinates. */
|
|
241
304
|
clientX: number;
|
|
242
305
|
clientY: number;
|
|
243
306
|
/**
|
|
@@ -267,6 +330,40 @@ type DragOptions = {
|
|
|
267
330
|
* restored once the last one is up.
|
|
268
331
|
*/
|
|
269
332
|
cursor?: string;
|
|
333
|
+
/**
|
|
334
|
+
* Decide whether a pointerdown starts a drag at all.
|
|
335
|
+
*
|
|
336
|
+
* Checked before anything else — **before the pointer is captured** — so
|
|
337
|
+
* declining here leaves the whole gesture to whatever else is listening.
|
|
338
|
+
* Deciding later would be too late: the capture has already been taken from
|
|
339
|
+
* the element that was going to handle it.
|
|
340
|
+
*
|
|
341
|
+
* The use for it is a drag on a container that also holds draggable things
|
|
342
|
+
* of its own, such as a rubber-band selection that must not begin on top of
|
|
343
|
+
* one of the objects it would select.
|
|
344
|
+
*/
|
|
345
|
+
shouldStart?: (event: PointerEvent) => boolean;
|
|
346
|
+
/**
|
|
347
|
+
* Hide the pointer and read its movement directly, instead of following it
|
|
348
|
+
* around the screen.
|
|
349
|
+
*
|
|
350
|
+
* A relative drag — a knob, a stepper — does not care where the pointer is,
|
|
351
|
+
* only how far it moved, and letting it wander has two costs: the cursor
|
|
352
|
+
* ends up far from what it is holding, and **the drag stops at the edge of
|
|
353
|
+
* the screen**, where the operating system pins the pointer and the
|
|
354
|
+
* coordinates stop changing. A fine drag reaches that edge quickly.
|
|
355
|
+
*
|
|
356
|
+
* **Not for a drag whose value is the position pointed at** — anything on
|
|
357
|
+
* `elementMapping`. `clientX` / `clientY` freeze while the pointer is
|
|
358
|
+
* locked, so there is no position left to read.
|
|
359
|
+
*
|
|
360
|
+
* The request needs a user gesture, which a pointerdown is, but it can still
|
|
361
|
+
* be refused; the drag then carries on as an ordinary one. Read on
|
|
362
|
+
* pointerdown, so `update()` reaches the next drag rather than the current.
|
|
363
|
+
*
|
|
364
|
+
* @default false
|
|
365
|
+
*/
|
|
366
|
+
pointerLock?: boolean;
|
|
270
367
|
/**
|
|
271
368
|
* Track every pointer that goes down on the element, rather than only the
|
|
272
369
|
* first. Each one gets its own `onDragStart` / `onDrag` / `onDragEnd` and
|
|
@@ -280,6 +377,10 @@ type DragOptions = {
|
|
|
280
377
|
multiPointer?: boolean;
|
|
281
378
|
onDragStart?: (state: DragState) => void;
|
|
282
379
|
onDrag?: (state: DragState) => void;
|
|
380
|
+
/**
|
|
381
|
+
* Called exactly once for every drag that starts, whether tracking ends by
|
|
382
|
+
* pointer release, cancellation, capture or lock loss, or destruction.
|
|
383
|
+
*/
|
|
283
384
|
onDragEnd?: (state: DragState) => void;
|
|
284
385
|
};
|
|
285
386
|
interface DragInstance {
|
|
@@ -291,6 +392,7 @@ interface DragInstance {
|
|
|
291
392
|
* here.
|
|
292
393
|
*/
|
|
293
394
|
update: (options: DragOptions) => void;
|
|
395
|
+
/** End any active drags before removing the instance. */
|
|
294
396
|
destroy: () => void;
|
|
295
397
|
}
|
|
296
398
|
/**
|
|
@@ -332,7 +434,7 @@ type XYInput<T> = [T] extends [readonly unknown[]] ? readonly [x: T, y: T] : T |
|
|
|
332
434
|
*/
|
|
333
435
|
declare function toXY<T>(value: T | readonly [x: T, y: T]): XY<T>;
|
|
334
436
|
//#endregion
|
|
335
|
-
//#region src/pointer/
|
|
437
|
+
//#region src/pointer/drag-value.d.ts
|
|
336
438
|
/**
|
|
337
439
|
* How the 0-1 travel of one axis maps onto a value.
|
|
338
440
|
*
|
|
@@ -377,20 +479,41 @@ interface DragValueMapping {
|
|
|
377
479
|
* The element is read on every event, so it may be mounted after the drag is
|
|
378
480
|
* set up and may change size while a drag is in progress.
|
|
379
481
|
*/
|
|
380
|
-
declare function elementMapping(getElement: () => Element | null | undefined
|
|
482
|
+
declare function elementMapping(getElement: () => Element | null | undefined, { sensitivity }?: {
|
|
483
|
+
/**
|
|
484
|
+
* How much the movement counts, read on every move. `1` is the pointer
|
|
485
|
+
* position itself; `0.1` makes the same movement cover a tenth of the
|
|
486
|
+
* travel, which is what a fine-adjustment modifier wants.
|
|
487
|
+
*
|
|
488
|
+
* Anything but `1` turns the mapping relative: the value stops being the
|
|
489
|
+
* position pointed at and starts being where it stood when the sensitivity
|
|
490
|
+
* changed, plus the movement since. **The pointer and the value stay apart
|
|
491
|
+
* for the rest of the drag** rather than snapping back together when the
|
|
492
|
+
* key is released, since snapping would move the value nobody asked to
|
|
493
|
+
* move.
|
|
494
|
+
*/
|
|
495
|
+
sensitivity?: (state: DragState) => number;
|
|
496
|
+
}): DragValueMapping;
|
|
381
497
|
/**
|
|
382
498
|
* Move the value away from where it stood when the drag started, by the
|
|
383
499
|
* distance dragged. The pointer position itself carries no meaning, so the
|
|
384
500
|
* value can be adjusted from anywhere on the screen.
|
|
385
501
|
*/
|
|
386
|
-
declare function relativeMapping({
|
|
387
|
-
pixelRange
|
|
388
|
-
}?: {
|
|
502
|
+
declare function relativeMapping({ pixelRange, sensitivity }?: {
|
|
389
503
|
/**
|
|
390
504
|
* Pixels of movement that span the whole range.
|
|
391
505
|
* @default 100
|
|
392
506
|
*/
|
|
393
507
|
pixelRange?: XYInput<number>;
|
|
508
|
+
/**
|
|
509
|
+
* How much the movement counts, read on every move. `1` is `pixelRange` as
|
|
510
|
+
* given; `0.1` makes the same movement cover a tenth of the range, which is
|
|
511
|
+
* what a fine-adjustment modifier wants.
|
|
512
|
+
*
|
|
513
|
+
* Changing it mid-drag does not disturb the value: the travel so far is
|
|
514
|
+
* folded into the origin and measuring starts again from there.
|
|
515
|
+
*/
|
|
516
|
+
sensitivity?: (state: DragState) => number;
|
|
394
517
|
}): DragValueMapping;
|
|
395
518
|
interface DragValueOptions {
|
|
396
519
|
/** Scaling of each axis; a single value applies to both. */
|
|
@@ -417,6 +540,16 @@ interface DragValueOptions {
|
|
|
417
540
|
threshold?: number;
|
|
418
541
|
/** @see DragOptions.cursor */
|
|
419
542
|
cursor?: string;
|
|
543
|
+
/**
|
|
544
|
+
* @see DragOptions.pointerLock
|
|
545
|
+
*
|
|
546
|
+
* Only for a mapping that moves the value relative to where it stood, such
|
|
547
|
+
* as {@link relativeMapping}. {@link elementMapping} reads the pointer
|
|
548
|
+
* position, and there is none while it is locked.
|
|
549
|
+
*/
|
|
550
|
+
pointerLock?: boolean;
|
|
551
|
+
/** @see DragOptions.shouldStart */
|
|
552
|
+
shouldStart?: (event: PointerEvent) => boolean;
|
|
420
553
|
onChange?: (value: XY<number>, state: DragState) => void;
|
|
421
554
|
onDragStart?: (value: XY<number>, state: DragState) => void;
|
|
422
555
|
onDragEnd?: (value: XY<number>, state: DragState) => void;
|
|
@@ -442,6 +575,8 @@ declare function createDragValue(element: Element, options: DragValueOptions): D
|
|
|
442
575
|
//#endregion
|
|
443
576
|
//#region src/pointer/wheel.d.ts
|
|
444
577
|
interface WheelOptions {
|
|
578
|
+
/** Replace the callback through {@link WheelInstance.update}. */
|
|
579
|
+
onWheel?: (event: WheelEvent) => void;
|
|
445
580
|
/**
|
|
446
581
|
* Only report events while the focus is inside the element.
|
|
447
582
|
*
|
|
@@ -470,5 +605,65 @@ interface WheelInstance {
|
|
|
470
605
|
*/
|
|
471
606
|
declare function createWheel(element: Element, onWheel: (event: WheelEvent) => void, options?: WheelOptions): WheelInstance;
|
|
472
607
|
//#endregion
|
|
473
|
-
|
|
608
|
+
//#region src/selection/box.d.ts
|
|
609
|
+
/**
|
|
610
|
+
* A rectangle in the 0..1 space of whatever the box is drawn over, with `y`
|
|
611
|
+
* growing downwards — the same space the items are given in.
|
|
612
|
+
*/
|
|
613
|
+
interface SelectionBoxRect {
|
|
614
|
+
x: number;
|
|
615
|
+
y: number;
|
|
616
|
+
width: number;
|
|
617
|
+
height: number;
|
|
618
|
+
}
|
|
619
|
+
interface SelectionBoxOptions<Id> {
|
|
620
|
+
/**
|
|
621
|
+
* Everything the box can pick up, read on every move rather than taken as a
|
|
622
|
+
* snapshot: what is under the box changes while it is dragged, and an item
|
|
623
|
+
* may have moved since the last one.
|
|
624
|
+
*/
|
|
625
|
+
items: () => Iterable<readonly [Id, XY<number>]>;
|
|
626
|
+
/** The box as it is dragged, and `null` once it is gone. */
|
|
627
|
+
onBoxChange?: (box: SelectionBoxRect | null) => void;
|
|
628
|
+
/** What the box covers, added to whatever it started from. */
|
|
629
|
+
onSelectionChange?: (ids: Id[]) => void;
|
|
630
|
+
}
|
|
631
|
+
interface SelectionBoxBeginOptions<Id> {
|
|
632
|
+
/**
|
|
633
|
+
* Add to `selection` rather than replacing it. Ctrl / meta rather than
|
|
634
|
+
* shift, for the controls where shift is the fine-adjustment key.
|
|
635
|
+
*/
|
|
636
|
+
additive?: boolean;
|
|
637
|
+
/** What was selected before the box started. Only read when `additive`. */
|
|
638
|
+
selection?: readonly Id[];
|
|
639
|
+
}
|
|
640
|
+
interface SelectionBoxInstance<Id> {
|
|
641
|
+
/** Replace the given options, without interrupting a box in progress. */
|
|
642
|
+
update: (options: Partial<SelectionBoxOptions<Id>>) => void;
|
|
643
|
+
/** Start a box at `at`, which is one of its corners. */
|
|
644
|
+
begin: (at: XY<number>, options?: SelectionBoxBeginOptions<Id>) => void;
|
|
645
|
+
/** Drag the opposite corner to `to`. */
|
|
646
|
+
move: (to: XY<number>) => void;
|
|
647
|
+
/**
|
|
648
|
+
* Finish the box. The selection stays as it is.
|
|
649
|
+
*
|
|
650
|
+
* @returns whether a box was running, so that a caller can tell a drag from
|
|
651
|
+
* a press that selected nothing.
|
|
652
|
+
*/
|
|
653
|
+
end: () => boolean;
|
|
654
|
+
/** The box being dragged, or `null` when there is none. */
|
|
655
|
+
box: () => SelectionBoxRect | null;
|
|
656
|
+
destroy: () => void;
|
|
657
|
+
}
|
|
658
|
+
/** Whether the box covers the point, edges included. */
|
|
659
|
+
declare function selectionBoxCovers(box: SelectionBoxRect, [x, y]: XY<number>): boolean;
|
|
660
|
+
/**
|
|
661
|
+
* Selecting by dragging a box over a set of items.
|
|
662
|
+
*
|
|
663
|
+
* The drag itself is not here: the caller owns the pointer, and reports where
|
|
664
|
+
* it went in the same 0..1 space the items are given in.
|
|
665
|
+
*/
|
|
666
|
+
declare function createSelectionBox<Id>(options: SelectionBoxOptions<Id>): SelectionBoxInstance<Id>;
|
|
667
|
+
//#endregion
|
|
668
|
+
export { type AnimationCanvasInstance, type AnimationCanvasOptions, type AnimationFrame, type AxisOptions, type CanvasDrawFunction, type CanvasInitFunction, type DragInstance, type DragOptions, type DragState, type DragValueInstance, type DragValueMapping, type DragValueOptions, type DrawingContext, type DrawingState, type DrawingStateValue, type MIDIAccessError, type MIDIAccessInstance, type MIDIAccessOptions, type MIDIAccessState, type MIDIInputHandlers, type MIDIInputInstance, type MIDIMessageInstance, type MappingContext, NOT_SUPPORTED, type NoteSource, PERMISSION_DENIED, PITCH_BEND_CENTER, type PianoInputInstance, type PianoInputOptions, type SelectionBoxBeginOptions, type SelectionBoxInstance, type SelectionBoxOptions, type SelectionBoxRect, UNAVAILABLE, type WheelInstance, type WheelOptions, type XY, type XYInput, createAnimationCanvas, createDrag, createDragValue, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createSelectionBox, createWheel, drawingState, elementMapping, isDrawingState, relativeMapping, selectionBoxCovers, toXY };
|
|
474
669
|
//# sourceMappingURL=index.d.cts.map
|
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/canvas/animation.ts","../src/canvas/context.ts","../src/midi/access.ts","../src/midi/
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/canvas/animation.ts","../src/canvas/context.ts","../src/midi/access.ts","../src/midi/input.ts","../src/midi/message.ts","../src/piano/index.ts","../src/pointer/drag.ts","../src/xy.ts","../src/pointer/drag-value.ts","../src/pointer/wheel.ts","../src/selection/box.ts"],"mappings":"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"}
|