@tremolo-ui/dom 0.6.0 → 0.7.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 +383 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +269 -21
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +269 -21
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +374 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/file/accept.ts +58 -0
- package/src/file/drop-zone.ts +202 -0
- package/src/index.ts +26 -0
- package/src/input/apply-delta.ts +73 -0
- package/src/input/modifiers.ts +121 -0
- package/src/piano/index.ts +2 -2
- package/src/piano/layout.ts +183 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ValueRange } from "@tremolo-ui/functions";
|
|
2
2
|
//#region src/canvas/animation.d.ts
|
|
3
3
|
/** What the canvas looked like when a frame was drawn. */
|
|
4
4
|
interface AnimationFrame {
|
|
@@ -89,7 +89,7 @@ interface AnimationCanvasInstance {
|
|
|
89
89
|
* Drawing code works in CSS pixels: the context is scaled by the device pixel
|
|
90
90
|
* ratio, and `width` / `height` of each {@link AnimationFrame} are CSS pixels.
|
|
91
91
|
*/
|
|
92
|
-
declare function createAnimationCanvas(canvas: HTMLCanvasElement, options: AnimationCanvasOptions): AnimationCanvasInstance;
|
|
92
|
+
export declare function createAnimationCanvas(canvas: HTMLCanvasElement, options: AnimationCanvasOptions): AnimationCanvasInstance;
|
|
93
93
|
//#endregion
|
|
94
94
|
//#region src/canvas/context.d.ts
|
|
95
95
|
/**
|
|
@@ -100,7 +100,7 @@ declare function createAnimationCanvas(canvas: HTMLCanvasElement, options: Anima
|
|
|
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", "filter", "font", "fontKerning", "fontStretch", "fontVariantCaps", "textAlign", "textBaseline", "direction", "letterSpacing", "textRendering", "wordSpacing", "imageSmoothingEnabled", "imageSmoothingQuality"];
|
|
103
|
+
export 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
106
|
type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState> & {
|
|
@@ -109,15 +109,199 @@ type DrawingContext = Pick<CanvasRenderingContext2D, DrawingState> & {
|
|
|
109
109
|
/** The current transformation matrix. */
|
|
110
110
|
transform: DOMMatrix;
|
|
111
111
|
};
|
|
112
|
-
declare function isDrawingState(value: unknown): value is DrawingState;
|
|
112
|
+
export declare function isDrawingState(value: unknown): value is DrawingState;
|
|
113
|
+
//#endregion
|
|
114
|
+
//#region src/file/accept.d.ts
|
|
115
|
+
/**
|
|
116
|
+
* What an `accept` rule is matched against.
|
|
117
|
+
*
|
|
118
|
+
* `File` satisfies it, and so does `DataTransferItem` — which matters while a
|
|
119
|
+
* drag is still in the air, since the browser reports the type of what is
|
|
120
|
+
* being dragged but withholds the name.
|
|
121
|
+
*/
|
|
122
|
+
interface AcceptCandidate {
|
|
123
|
+
/** The file name, when it is known. */
|
|
124
|
+
name?: string;
|
|
125
|
+
/** The MIME type, or `''` when the browser has no type for it. */
|
|
126
|
+
type: string;
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Does a file satisfy an `accept` attribute?
|
|
130
|
+
*
|
|
131
|
+
* `accept` is written the way the HTML attribute is: a comma separated list of
|
|
132
|
+
* extensions (`.wav`), MIME types (`audio/wav`) and type groups (`audio/*`).
|
|
133
|
+
* Anything that matches one entry is accepted, and an empty or missing
|
|
134
|
+
* `accept` takes everything.
|
|
135
|
+
*
|
|
136
|
+
* **The browser's own `accept` is only a hint to the file picker.** A person
|
|
137
|
+
* can switch it to "All Files", drag a file in, or pick one the picker was
|
|
138
|
+
* never asked about, so what arrives still has to be checked.
|
|
139
|
+
*
|
|
140
|
+
* A rule that cannot be decided is not treated as a rejection: with no `name`,
|
|
141
|
+
* an extension rule says nothing either way, and `accept=".wav"` reports a
|
|
142
|
+
* match rather than refusing a file it has not seen the name of. The name is
|
|
143
|
+
* there by the time the file is dropped, which is when the answer counts.
|
|
144
|
+
*/
|
|
145
|
+
export declare function matchesAccept(candidate: AcceptCandidate, accept?: string): boolean;
|
|
146
|
+
//#endregion
|
|
147
|
+
//#region src/file/drop-zone.d.ts
|
|
148
|
+
/** What is in the air over the element. */
|
|
149
|
+
interface DropZoneState {
|
|
150
|
+
/** Files are being dragged over the element. */
|
|
151
|
+
over: boolean;
|
|
152
|
+
/**
|
|
153
|
+
* None of what is being dragged matches `accept`, as far as can be told
|
|
154
|
+
* before the drop.
|
|
155
|
+
*
|
|
156
|
+
* The browser reports the type of what is being dragged but withholds the
|
|
157
|
+
* name, so a rule written as an extension cannot be decided yet and is not
|
|
158
|
+
* counted against the drag. It is decided on the drop, where the name is.
|
|
159
|
+
*/
|
|
160
|
+
invalid: boolean;
|
|
161
|
+
}
|
|
162
|
+
interface DropZoneOptions {
|
|
163
|
+
/**
|
|
164
|
+
* Which files to take, written the way the `accept` attribute of a file
|
|
165
|
+
* input is: a comma separated list of extensions (`.wav`), MIME types
|
|
166
|
+
* (`audio/wav`) and type groups (`audio/*`).
|
|
167
|
+
*/
|
|
168
|
+
accept?: string;
|
|
169
|
+
/**
|
|
170
|
+
* Take more than one file from a single drop. With it off, only the first
|
|
171
|
+
* accepted file is reported, as a file input without `multiple` does.
|
|
172
|
+
*
|
|
173
|
+
* @default false
|
|
174
|
+
*/
|
|
175
|
+
multiple?: boolean;
|
|
176
|
+
/**
|
|
177
|
+
* Refuse the drop. The drag is still swallowed rather than let through: an
|
|
178
|
+
* unhandled drop makes the browser leave the page and open the file.
|
|
179
|
+
*
|
|
180
|
+
* @default false
|
|
181
|
+
*/
|
|
182
|
+
disabled?: boolean;
|
|
183
|
+
/** Called with the dropped files that match `accept`. */
|
|
184
|
+
onDrop?: (files: File[], event: DragEvent) => void;
|
|
185
|
+
/**
|
|
186
|
+
* Called with the dropped files that do not match `accept`, so that the
|
|
187
|
+
* reason can be shown.
|
|
188
|
+
*/
|
|
189
|
+
onReject?: (files: File[], event: DragEvent) => void;
|
|
190
|
+
/** Called whenever {@link DropZoneInstance.state} would change. */
|
|
191
|
+
onStateChange?: (state: DropZoneState) => void;
|
|
192
|
+
}
|
|
193
|
+
interface DropZoneInstance {
|
|
194
|
+
/** What is in the air over the element, right now. */
|
|
195
|
+
readonly state: DropZoneState;
|
|
196
|
+
/** Replace the given options, keeping the listeners in place. */
|
|
197
|
+
update: (options: DropZoneOptions) => void;
|
|
198
|
+
destroy: () => void;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Take files dropped onto an element.
|
|
202
|
+
*
|
|
203
|
+
* ```ts
|
|
204
|
+
* const zone = createDropZone(element, {
|
|
205
|
+
* accept: 'audio/*',
|
|
206
|
+
* onDrop: (files) => load(files[0]),
|
|
207
|
+
* })
|
|
208
|
+
* ```
|
|
209
|
+
*
|
|
210
|
+
* The element needs no attribute of its own: a drop target is made by
|
|
211
|
+
* cancelling `dragover`, which this does.
|
|
212
|
+
*/
|
|
213
|
+
export declare function createDropZone(element: Element, options?: DropZoneOptions): DropZoneInstance;
|
|
214
|
+
//#endregion
|
|
215
|
+
//#region src/input/modifiers.d.ts
|
|
216
|
+
/**
|
|
217
|
+
* Options for setting the amount of keyboard and mouse wheel changes.
|
|
218
|
+
*/
|
|
219
|
+
type InputEventOption = readonly ['normalized' | 'raw', number];
|
|
220
|
+
/**
|
|
221
|
+
* A modifier key that can carry an amount of its own.
|
|
222
|
+
*
|
|
223
|
+
* `ctrl` and `meta` are kept apart rather than folded into one "command" key:
|
|
224
|
+
* a plugin UI that mirrors a desktop host usually wants the same physical key
|
|
225
|
+
* on every platform, not the platform's own convention.
|
|
226
|
+
*/
|
|
227
|
+
type Modifier = 'shift' | 'alt' | 'ctrl' | 'meta';
|
|
228
|
+
/** The modifier flags of a `WheelEvent` or a `KeyboardEvent`. */
|
|
229
|
+
interface ModifierState {
|
|
230
|
+
shiftKey: boolean;
|
|
231
|
+
altKey: boolean;
|
|
232
|
+
ctrlKey: boolean;
|
|
233
|
+
metaKey: boolean;
|
|
234
|
+
}
|
|
235
|
+
/** One setting per modifier key, with `default` for none of them. */
|
|
236
|
+
type ModifierSetting = number | InputEventOption;
|
|
237
|
+
type ModifierMap<T extends ModifierSetting> = {
|
|
238
|
+
default: T;
|
|
239
|
+
} & Partial<Record<Modifier, T>>;
|
|
240
|
+
/**
|
|
241
|
+
* A single setting, or one per modifier key.
|
|
242
|
+
*
|
|
243
|
+
* @example
|
|
244
|
+
* ['raw', 1]
|
|
245
|
+
* { default: ['raw', 1], shift: ['raw', 0.1] }
|
|
246
|
+
*/
|
|
247
|
+
type ModifierValue<T extends ModifierSetting> = T | ModifierMap<T>;
|
|
248
|
+
/**
|
|
249
|
+
* Pick the setting that applies, given the modifier keys being held.
|
|
250
|
+
*
|
|
251
|
+
* @example
|
|
252
|
+
* selectModifier({ default: 1, shift: 0.1 }, event)
|
|
253
|
+
*/
|
|
254
|
+
export declare function selectModifier<T extends ModifierSetting>(options: ModifierValue<T>, modifiers?: ModifierState): {
|
|
255
|
+
value: T;
|
|
256
|
+
modifier: Modifier | null;
|
|
257
|
+
};
|
|
258
|
+
/**
|
|
259
|
+
* Turn every entry of a setting into another kind of setting, keeping which
|
|
260
|
+
* modifier each belongs to.
|
|
261
|
+
*
|
|
262
|
+
* A drag sensitivity is a number and a keyboard amount is a tuple, but the two
|
|
263
|
+
* describe the same thing from the caller's side. This carries one over to the
|
|
264
|
+
* other so that a component can hand a sensitivity to {@link applyDelta}
|
|
265
|
+
* without unpicking the modifier map itself — which matters, since naming a
|
|
266
|
+
* modifier is also what takes `step` out of the pipeline.
|
|
267
|
+
*
|
|
268
|
+
* @example
|
|
269
|
+
* mapModifier({ default: 1, shift: 0.1 }, (f) => ['raw', step * f])
|
|
270
|
+
* // { default: ['raw', 1], shift: ['raw', 0.1] }
|
|
271
|
+
*/
|
|
272
|
+
export declare function mapModifier<T extends ModifierSetting, U extends ModifierSetting>(options: ModifierValue<T>, fn: (value: T) => U): ModifierValue<U>;
|
|
273
|
+
//#endregion
|
|
274
|
+
//#region src/input/apply-delta.d.ts
|
|
275
|
+
/**
|
|
276
|
+
* Move a value by an amount of input, as reported by a wheel or an arrow key.
|
|
277
|
+
*
|
|
278
|
+
* The pipeline matches {@link createDragValue}: scale, then step, then clamp.
|
|
279
|
+
* Which key or which sign of `deltaY` counts as which direction is left to the
|
|
280
|
+
* caller, since it differs per component.
|
|
281
|
+
*
|
|
282
|
+
* @param direction which way, and how many times, to apply the option. The
|
|
283
|
+
* size of one step is `option[1]`, so this is normally `1` or `-1`.
|
|
284
|
+
*
|
|
285
|
+
* @param modifiers the event, for `options` that name a modifier key. See
|
|
286
|
+
* {@link selectModifier}.
|
|
287
|
+
*
|
|
288
|
+
* @example
|
|
289
|
+
* // ArrowDown on a slider whose keyboard option is ['raw', 1]
|
|
290
|
+
* applyDelta(value, -1, keyboard, { min, max, step, scale })
|
|
291
|
+
*
|
|
292
|
+
* @example
|
|
293
|
+
* // Shift+ArrowDown, where `keyboard` is { default: …, shift: ['raw', 0.1] }
|
|
294
|
+
* applyDelta(value, -1, keyboard, range, event)
|
|
295
|
+
*/
|
|
296
|
+
export declare function applyDelta(value: number, direction: number, options: ModifierValue<InputEventOption>, { min, max, step, scale }: ValueRange, modifiers?: ModifierState): number;
|
|
113
297
|
//#endregion
|
|
114
298
|
//#region src/midi/access.d.ts
|
|
115
299
|
/** @private */
|
|
116
|
-
declare const PERMISSION_DENIED = "PERMISSION_DENIED";
|
|
300
|
+
export declare const PERMISSION_DENIED = "PERMISSION_DENIED";
|
|
117
301
|
/** @private */
|
|
118
|
-
declare const NOT_SUPPORTED = "NOT_SUPPORTED";
|
|
302
|
+
export declare const NOT_SUPPORTED = "NOT_SUPPORTED";
|
|
119
303
|
/** @private */
|
|
120
|
-
declare const UNAVAILABLE = "UNAVAILABLE";
|
|
304
|
+
export declare const UNAVAILABLE = "UNAVAILABLE";
|
|
121
305
|
/** @private */
|
|
122
306
|
type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED | typeof UNAVAILABLE;
|
|
123
307
|
type MIDIAccessOptions = {
|
|
@@ -158,7 +342,7 @@ interface MIDIAccessInstance {
|
|
|
158
342
|
* The returned instance holds the state and notifies subscribers when it changes,
|
|
159
343
|
* so it can be consumed from any framework.
|
|
160
344
|
*/
|
|
161
|
-
declare function createMIDIAccess(): MIDIAccessInstance;
|
|
345
|
+
export declare function createMIDIAccess(): MIDIAccessInstance;
|
|
162
346
|
//#endregion
|
|
163
347
|
//#region src/midi/input.d.ts
|
|
164
348
|
/**
|
|
@@ -167,7 +351,7 @@ declare function createMIDIAccess(): MIDIAccessInstance;
|
|
|
167
351
|
* The range is not symmetric — 0 is 8192 below centre and 16383 is 8191 above
|
|
168
352
|
* — so a wheel at rest reports exactly this rather than half of the maximum.
|
|
169
353
|
*/
|
|
170
|
-
declare const PITCH_BEND_CENTER = 8192;
|
|
354
|
+
export declare const PITCH_BEND_CENTER = 8192;
|
|
171
355
|
/**
|
|
172
356
|
* Every handler is given the channel last, as 0-15. MIDI channels are written
|
|
173
357
|
* 1-16 on hardware, so add one before showing it to anyone.
|
|
@@ -203,7 +387,7 @@ interface MIDIInputInstance {
|
|
|
203
387
|
* System messages (clock, sysex, and the rest of `0xf0`-`0xff`) are not
|
|
204
388
|
* decoded here; reach for {@link createMIDIMessage} for those.
|
|
205
389
|
*/
|
|
206
|
-
declare function createMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): MIDIInputInstance;
|
|
390
|
+
export declare function createMIDIInput(midiAccess: MIDIAccess | null, handlers: MIDIInputHandlers): MIDIInputInstance;
|
|
207
391
|
//#endregion
|
|
208
392
|
//#region src/midi/message.d.ts
|
|
209
393
|
interface MIDIMessageInstance {
|
|
@@ -221,7 +405,71 @@ interface MIDIMessageInstance {
|
|
|
221
405
|
*
|
|
222
406
|
* Use this when you need more detail than {@link createMIDIInput} provides.
|
|
223
407
|
*/
|
|
224
|
-
declare function createMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): MIDIMessageInstance;
|
|
408
|
+
export declare function createMIDIMessage(midiAccess: MIDIAccess | null, onMIDIMessage: (event: MIDIMessageEvent) => void): MIDIMessageInstance;
|
|
409
|
+
//#endregion
|
|
410
|
+
//#region src/piano/layout.d.ts
|
|
411
|
+
type NoteRange = {
|
|
412
|
+
first: number;
|
|
413
|
+
last: number;
|
|
414
|
+
};
|
|
415
|
+
/**
|
|
416
|
+
* `[noteRange.first, noteRange.first + 1, ..., noteRange.last]`
|
|
417
|
+
*/
|
|
418
|
+
export declare function getNoteRangeArray(noteRange: NoteRange): number[];
|
|
419
|
+
/**
|
|
420
|
+
* The geometry of a drawn keyboard.
|
|
421
|
+
*
|
|
422
|
+
* One description is shared by the drawing and the hit testing, so a key cannot
|
|
423
|
+
* be drawn somewhere other than where it responds.
|
|
424
|
+
*/
|
|
425
|
+
interface PianoLayout {
|
|
426
|
+
noteRange: NoteRange;
|
|
427
|
+
/** Width of a white key, excluding {@link PianoLayout.keyGap}. */
|
|
428
|
+
whiteKeyWidth: number;
|
|
429
|
+
/**
|
|
430
|
+
* Space between two white keys. Part of the slot a white key occupies, so it
|
|
431
|
+
* still belongs to one of the keys for the purpose of hit testing.
|
|
432
|
+
*
|
|
433
|
+
* @default 1
|
|
434
|
+
*/
|
|
435
|
+
keyGap?: number;
|
|
436
|
+
/**
|
|
437
|
+
* Width of a black key, as a fraction of {@link PianoLayout.whiteKeyWidth}.
|
|
438
|
+
*
|
|
439
|
+
* @default 0.65
|
|
440
|
+
*/
|
|
441
|
+
blackKeyWidthRatio?: number;
|
|
442
|
+
/**
|
|
443
|
+
* Height of a black key, as a fraction of the height of the keyboard.
|
|
444
|
+
*
|
|
445
|
+
* @default 0.6
|
|
446
|
+
*/
|
|
447
|
+
blackKeyHeightRatio?: number;
|
|
448
|
+
}
|
|
449
|
+
/** Width of a black key in pixels. */
|
|
450
|
+
export declare function blackKeyWidth(layout: PianoLayout): number;
|
|
451
|
+
/** Width of the whole keyboard in pixels. */
|
|
452
|
+
export declare function pianoWidth(layout: PianoLayout): number;
|
|
453
|
+
/**
|
|
454
|
+
* Offset of the left edge of a key from the left edge of the keyboard, in
|
|
455
|
+
* pixels.
|
|
456
|
+
*
|
|
457
|
+
* Notes outside `noteRange` are placed too, so the value is negative below
|
|
458
|
+
* `noteRange.first`.
|
|
459
|
+
*/
|
|
460
|
+
export declare function notePosition(note: number, layout: PianoLayout): number;
|
|
461
|
+
/**
|
|
462
|
+
* The note drawn at a point, or null where there is none.
|
|
463
|
+
*
|
|
464
|
+
* Black keys are tested first, so they win where they overlap a white one. A
|
|
465
|
+
* white key covers its gap as well as its width, so the whole width of the
|
|
466
|
+
* keyboard belongs to some key and a click cannot fall between two.
|
|
467
|
+
*
|
|
468
|
+
* @param x offset from the left edge of the keyboard, in pixels
|
|
469
|
+
* @param y offset from its top edge, in pixels
|
|
470
|
+
* @param height height of the keyboard, in pixels
|
|
471
|
+
*/
|
|
472
|
+
export declare function noteAt(x: number, y: number, height: number, layout: PianoLayout): number | null;
|
|
225
473
|
//#endregion
|
|
226
474
|
//#region src/piano/index.d.ts
|
|
227
475
|
/**
|
|
@@ -290,7 +538,7 @@ interface PianoInputInstance {
|
|
|
290
538
|
*
|
|
291
539
|
* Tracks every pointer at once, so a chord can be played with several fingers.
|
|
292
540
|
*/
|
|
293
|
-
declare function createPianoInput(element: Element, options: PianoInputOptions): PianoInputInstance;
|
|
541
|
+
export declare function createPianoInput(element: Element, options: PianoInputOptions): PianoInputInstance;
|
|
294
542
|
//#endregion
|
|
295
543
|
//#region src/pointer/drag.d.ts
|
|
296
544
|
type DragState = {
|
|
@@ -406,7 +654,7 @@ interface DragInstance {
|
|
|
406
654
|
*
|
|
407
655
|
* One pointer at a time by default; see {@link DragOptions.multiPointer}.
|
|
408
656
|
*/
|
|
409
|
-
declare function createDrag(element: Element, options?: DragOptions): DragInstance;
|
|
657
|
+
export declare function createDrag(element: Element, options?: DragOptions): DragInstance;
|
|
410
658
|
//#endregion
|
|
411
659
|
//#region src/xy.d.ts
|
|
412
660
|
/**
|
|
@@ -432,7 +680,7 @@ type XYInput<T> = [T] extends [readonly unknown[]] ? readonly [x: T, y: T] : T |
|
|
|
432
680
|
* The pair is copied rather than passed along, so that the result is a tuple
|
|
433
681
|
* the caller owns even when a readonly one was given.
|
|
434
682
|
*/
|
|
435
|
-
declare function toXY<T>(value: T | readonly [x: T, y: T]): XY<T>;
|
|
683
|
+
export declare function toXY<T>(value: T | readonly [x: T, y: T]): XY<T>;
|
|
436
684
|
//#endregion
|
|
437
685
|
//#region src/pointer/drag-value.d.ts
|
|
438
686
|
/**
|
|
@@ -479,7 +727,7 @@ interface DragValueMapping {
|
|
|
479
727
|
* The element is read on every event, so it may be mounted after the drag is
|
|
480
728
|
* set up and may change size while a drag is in progress.
|
|
481
729
|
*/
|
|
482
|
-
declare function elementMapping(getElement: () => Element | null | undefined, { sensitivity }?: {
|
|
730
|
+
export declare function elementMapping(getElement: () => Element | null | undefined, { sensitivity }?: {
|
|
483
731
|
/**
|
|
484
732
|
* How much the movement counts, read on every move. `1` is the pointer
|
|
485
733
|
* position itself; `0.1` makes the same movement cover a tenth of the
|
|
@@ -499,7 +747,7 @@ declare function elementMapping(getElement: () => Element | null | undefined, {
|
|
|
499
747
|
* distance dragged. The pointer position itself carries no meaning, so the
|
|
500
748
|
* value can be adjusted from anywhere on the screen.
|
|
501
749
|
*/
|
|
502
|
-
declare function relativeMapping({ pixelRange, sensitivity }?: {
|
|
750
|
+
export declare function relativeMapping({ pixelRange, sensitivity }?: {
|
|
503
751
|
/**
|
|
504
752
|
* Pixels of movement that span the whole range.
|
|
505
753
|
* @default 100
|
|
@@ -571,7 +819,7 @@ interface DragValueInstance {
|
|
|
571
819
|
* mapping decides where the pointer sits on the 0-1 travel of each axis, and
|
|
572
820
|
* the axis options turn that into a value.
|
|
573
821
|
*/
|
|
574
|
-
declare function createDragValue(element: Element, options: DragValueOptions): DragValueInstance;
|
|
822
|
+
export declare function createDragValue(element: Element, options: DragValueOptions): DragValueInstance;
|
|
575
823
|
//#endregion
|
|
576
824
|
//#region src/pointer/wheel.d.ts
|
|
577
825
|
interface WheelOptions {
|
|
@@ -603,7 +851,7 @@ interface WheelInstance {
|
|
|
603
851
|
* The listener is registered with `passive: false` so that the handler can call
|
|
604
852
|
* `preventDefault()` to stop the page from scrolling.
|
|
605
853
|
*/
|
|
606
|
-
declare function createWheel(element: Element, onWheel: (event: WheelEvent) => void, options?: WheelOptions): WheelInstance;
|
|
854
|
+
export declare function createWheel(element: Element, onWheel: (event: WheelEvent) => void, options?: WheelOptions): WheelInstance;
|
|
607
855
|
//#endregion
|
|
608
856
|
//#region src/selection/box.d.ts
|
|
609
857
|
/**
|
|
@@ -656,14 +904,14 @@ interface SelectionBoxInstance<Id> {
|
|
|
656
904
|
destroy: () => void;
|
|
657
905
|
}
|
|
658
906
|
/** Whether the box covers the point, edges included. */
|
|
659
|
-
declare function selectionBoxCovers(box: SelectionBoxRect, [x, y]: XY<number>): boolean;
|
|
907
|
+
export declare function selectionBoxCovers(box: SelectionBoxRect, [x, y]: XY<number>): boolean;
|
|
660
908
|
/**
|
|
661
909
|
* Selecting by dragging a box over a set of items.
|
|
662
910
|
*
|
|
663
911
|
* The drag itself is not here: the caller owns the pointer, and reports where
|
|
664
912
|
* it went in the same 0..1 space the items are given in.
|
|
665
913
|
*/
|
|
666
|
-
declare function createSelectionBox<Id>(options: SelectionBoxOptions<Id>): SelectionBoxInstance<Id>;
|
|
914
|
+
export declare function createSelectionBox<Id>(options: SelectionBoxOptions<Id>): SelectionBoxInstance<Id>;
|
|
667
915
|
//#endregion
|
|
668
|
-
export {
|
|
916
|
+
export type { AcceptCandidate, AnimationCanvasInstance, AnimationCanvasOptions, AnimationFrame, AxisOptions, CanvasDrawFunction, CanvasInitFunction, DragInstance, DragOptions, DragState, DragValueInstance, DragValueMapping, DragValueOptions, DrawingContext, DrawingState, DrawingStateValue, DropZoneInstance, DropZoneOptions, DropZoneState, InputEventOption, MIDIAccessError, MIDIAccessInstance, MIDIAccessOptions, MIDIAccessState, MIDIInputHandlers, MIDIInputInstance, MIDIMessageInstance, MappingContext, Modifier, ModifierMap, ModifierState, ModifierValue, NoteRange, NoteSource, PianoInputInstance, PianoInputOptions, PianoLayout, SelectionBoxBeginOptions, SelectionBoxInstance, SelectionBoxOptions, SelectionBoxRect, WheelInstance, WheelOptions, XY, XYInput };
|
|
669
917
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","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":";;;UAQiB;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;KAGU,sBACV,SAAS,0BACT,OAAO;KAGG,sBACV,SAAS,0BACT;EAAQ;EAAe;;UAGR;;EAEf,MAAM;;EAGN,OAAO;;;;;;;EAQP;;;;;;EAOA;IAAS;IAAe;;;;;;;;;;EAUxB;;;;;;;EAQA;;;;;;;EAQA,oBAAoB;;UAGL;;;;;;;;;;;EAWf,SAAS,SAAS,QAAQ;;EAG1B;EAEA;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/canvas/animation.ts","../src/canvas/context.ts","../src/file/accept.ts","../src/file/drop-zone.ts","../src/input/modifiers.ts","../src/input/apply-delta.ts","../src/midi/access.ts","../src/midi/input.ts","../src/midi/message.ts","../src/piano/layout.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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"}
|