@m2c2kit/addons 0.3.13 → 0.3.14
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.d.ts +115 -57
- package/dist/index.js +269 -141
- package/dist/index.js.map +1 -0
- package/dist/index.min.js +1 -0
- package/package.json +10 -8
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Canvas } from 'canvaskit-wasm';
|
|
2
|
-
import { CompositeOptions, Size, RgbaColor, Composite,
|
|
2
|
+
import { CompositeOptions, Size, RgbaColor, Composite, M2Node, GlobalVariables, TextOptions, IText, M2NodeEvent, CallbackOptions, Point, ShapeOptions, LabelHorizontalAlignmentMode, Transition, StoryOptions, Story, Scene, SceneOptions } from '@m2c2kit/core';
|
|
3
3
|
|
|
4
4
|
interface GridOptions extends CompositeOptions {
|
|
5
5
|
/** Number of rows in the grid. Must be 1 or greater */
|
|
@@ -16,7 +16,7 @@ interface GridOptions extends CompositeOptions {
|
|
|
16
16
|
gridLineColor?: RgbaColor;
|
|
17
17
|
}
|
|
18
18
|
interface GridChild {
|
|
19
|
-
|
|
19
|
+
node: M2Node;
|
|
20
20
|
row: number;
|
|
21
21
|
column: number;
|
|
22
22
|
}
|
|
@@ -32,11 +32,11 @@ declare class Grid extends Composite {
|
|
|
32
32
|
gridChildren: GridChild[];
|
|
33
33
|
private _gridBackground?;
|
|
34
34
|
/**
|
|
35
|
-
* A rectangular grid that supports placement of
|
|
35
|
+
* A rectangular grid that supports placement of nodes within the grid's
|
|
36
36
|
* cells.
|
|
37
37
|
*
|
|
38
|
-
* @remarks This composite
|
|
39
|
-
* has convenience functions for placing and clearing
|
|
38
|
+
* @remarks This composite node is composed of rectangles and lines. It
|
|
39
|
+
* has convenience functions for placing and clearing nodes on the grid
|
|
40
40
|
* by row and column position (zero-based indexing)
|
|
41
41
|
*
|
|
42
42
|
* @param options - {@link GridOptions}
|
|
@@ -47,13 +47,13 @@ declare class Grid extends Composite {
|
|
|
47
47
|
private set gridBackground(value);
|
|
48
48
|
dispose(): void;
|
|
49
49
|
/**
|
|
50
|
-
* Duplicates
|
|
50
|
+
* Duplicates a node using deep copy.
|
|
51
51
|
*
|
|
52
|
-
* @remarks This is a deep recursive clone (
|
|
53
|
-
* The uuid property of all duplicated
|
|
52
|
+
* @remarks This is a deep recursive clone (node and children).
|
|
53
|
+
* The uuid property of all duplicated nodes will be newly created,
|
|
54
54
|
* because uuid must be unique.
|
|
55
55
|
*
|
|
56
|
-
* @param newName - optional name of the new, duplicated
|
|
56
|
+
* @param newName - optional name of the new, duplicated node. If not
|
|
57
57
|
* provided, name will be the new uuid
|
|
58
58
|
*/
|
|
59
59
|
duplicate(newName?: string): Grid;
|
|
@@ -65,26 +65,26 @@ declare class Grid extends Composite {
|
|
|
65
65
|
*/
|
|
66
66
|
removeAllChildren(): void;
|
|
67
67
|
/**
|
|
68
|
-
* Adds
|
|
68
|
+
* Adds a node to the grid at the specified row and column position.
|
|
69
69
|
*
|
|
70
|
-
* @param
|
|
71
|
-
* @param row - row position within grid to add
|
|
72
|
-
* @param column - column position within grid to add
|
|
70
|
+
* @param node - node to add to the grid
|
|
71
|
+
* @param row - row position within grid to add node; zero-based indexing
|
|
72
|
+
* @param column - column position within grid to add node; zero-based indexing
|
|
73
73
|
*/
|
|
74
|
-
addAtCell(
|
|
74
|
+
addAtCell(node: M2Node, row: number, column: number): void;
|
|
75
75
|
/**
|
|
76
|
-
* Removes all child
|
|
76
|
+
* Removes all child nodes at the specified row and column position.
|
|
77
77
|
*
|
|
78
78
|
* @param row - row position within grid at which to remove children; zero-based indexing
|
|
79
79
|
* @param column - column position within grid at which to remove children; zero-based indexing
|
|
80
80
|
*/
|
|
81
81
|
removeAllAtCell(row: number, column: number): void;
|
|
82
82
|
/**
|
|
83
|
-
* Removes the child
|
|
83
|
+
* Removes the child node from the grid.
|
|
84
84
|
*
|
|
85
|
-
* @param
|
|
85
|
+
* @param node - node to remove
|
|
86
86
|
*/
|
|
87
|
-
removeChild(
|
|
87
|
+
removeChild(node: M2Node): void;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
declare global {
|
|
@@ -117,7 +117,7 @@ declare class Button extends Composite implements IText {
|
|
|
117
117
|
/**
|
|
118
118
|
* A simple button of rectangle with text centered inside.
|
|
119
119
|
*
|
|
120
|
-
* @remarks This composite
|
|
120
|
+
* @remarks This composite node is composed of a rectangle and text. To
|
|
121
121
|
* respond to user taps, the isUserInteractionEnabled property must be set
|
|
122
122
|
* to true and an appropriate callback must be set to handle the tap event.
|
|
123
123
|
*
|
|
@@ -133,13 +133,13 @@ declare class Button extends Composite implements IText {
|
|
|
133
133
|
get fontColor(): RgbaColor;
|
|
134
134
|
set fontColor(fontColor: RgbaColor);
|
|
135
135
|
/**
|
|
136
|
-
* Duplicates
|
|
136
|
+
* Duplicates a node using deep copy.
|
|
137
137
|
*
|
|
138
|
-
* @remarks This is a deep recursive clone (
|
|
139
|
-
* The uuid property of all duplicated
|
|
138
|
+
* @remarks This is a deep recursive clone (node and children).
|
|
139
|
+
* The uuid property of all duplicated nodes will be newly created,
|
|
140
140
|
* because uuid must be unique.
|
|
141
141
|
*
|
|
142
|
-
* @param newName - optional name of the new, duplicated
|
|
142
|
+
* @param newName - optional name of the new, duplicated node. If not
|
|
143
143
|
* provided, name will be the new uuid
|
|
144
144
|
*/
|
|
145
145
|
duplicate(newName?: string): Button;
|
|
@@ -169,7 +169,7 @@ declare enum DialogResult {
|
|
|
169
169
|
Positive = "Positive",
|
|
170
170
|
Negative = "Negative"
|
|
171
171
|
}
|
|
172
|
-
interface DialogEvent extends
|
|
172
|
+
interface DialogEvent extends M2NodeEvent {
|
|
173
173
|
dialogResult: DialogResult;
|
|
174
174
|
}
|
|
175
175
|
declare class Dialog extends Composite {
|
|
@@ -186,20 +186,20 @@ declare class Dialog extends Composite {
|
|
|
186
186
|
private backgroundPaint?;
|
|
187
187
|
constructor(options?: DialogOptions);
|
|
188
188
|
show(): void;
|
|
189
|
-
onDialogResult(callback: (dialogResultEvent: DialogEvent) => void,
|
|
189
|
+
onDialogResult(callback: (dialogResultEvent: DialogEvent) => void, options?: CallbackOptions): void;
|
|
190
190
|
initialize(): void;
|
|
191
191
|
get backgroundColor(): RgbaColor;
|
|
192
192
|
set backgroundColor(backgroundColor: RgbaColor);
|
|
193
193
|
get fontColor(): RgbaColor;
|
|
194
194
|
set fontColor(fontColor: RgbaColor);
|
|
195
195
|
/**
|
|
196
|
-
* Duplicates
|
|
196
|
+
* Duplicates a node using deep copy.
|
|
197
197
|
*
|
|
198
|
-
* @remarks This is a deep recursive clone (
|
|
199
|
-
* The uuid property of all duplicated
|
|
198
|
+
* @remarks This is a deep recursive clone (node and children).
|
|
199
|
+
* The uuid property of all duplicated nodes will be newly created,
|
|
200
200
|
* because uuid must be unique.
|
|
201
201
|
*
|
|
202
|
-
* @param newName - optional name of the new, duplicated
|
|
202
|
+
* @param newName - optional name of the new, duplicated node. If not
|
|
203
203
|
* provided, name will be the new uuid
|
|
204
204
|
*/
|
|
205
205
|
duplicate(newName?: string): Dialog;
|
|
@@ -236,7 +236,7 @@ declare const DrawPadEventType: {
|
|
|
236
236
|
readonly StrokeEnd: "StrokeEnd";
|
|
237
237
|
};
|
|
238
238
|
type DrawPadEventType = (typeof DrawPadEventType)[keyof typeof DrawPadEventType];
|
|
239
|
-
interface DrawPadEvent extends
|
|
239
|
+
interface DrawPadEvent extends M2NodeEvent {
|
|
240
240
|
type: DrawPadEventType;
|
|
241
241
|
position: Point;
|
|
242
242
|
}
|
|
@@ -245,7 +245,7 @@ declare const DrawPadItemEventType: {
|
|
|
245
245
|
readonly StrokeLeave: "StrokeLeave";
|
|
246
246
|
};
|
|
247
247
|
type DrawPadItemEventType = (typeof DrawPadItemEventType)[keyof typeof DrawPadItemEventType];
|
|
248
|
-
interface DrawPadItemEvent extends
|
|
248
|
+
interface DrawPadItemEvent extends M2NodeEvent {
|
|
249
249
|
type: DrawPadItemEventType;
|
|
250
250
|
}
|
|
251
251
|
interface StrokeInteraction {
|
|
@@ -303,7 +303,7 @@ declare class DrawPad extends Composite {
|
|
|
303
303
|
/**
|
|
304
304
|
* A rectangular area on which the user can draw strokes (lines).
|
|
305
305
|
*
|
|
306
|
-
* @remarks This composite
|
|
306
|
+
* @remarks This composite node is composed of a rectangle Shape and
|
|
307
307
|
* another Shape that is formed from a path of points.
|
|
308
308
|
*
|
|
309
309
|
* @param options - {@link DrawPadOptions}
|
|
@@ -349,20 +349,20 @@ declare class DrawPad extends Composite {
|
|
|
349
349
|
*/
|
|
350
350
|
onStrokeEnd(callback: (ev: DrawPadEvent) => void, options?: CallbackOptions): void;
|
|
351
351
|
/**
|
|
352
|
-
* Adds
|
|
352
|
+
* Adds a node to the DrawPad.
|
|
353
353
|
*
|
|
354
|
-
* @remarks After the
|
|
354
|
+
* @remarks After the node is added to the DrawPad, its
|
|
355
355
|
* position is adjusted to be relative to the DrawPad's coordinate
|
|
356
356
|
* system, and it is made interactive. The method returns an object
|
|
357
|
-
* which is the
|
|
358
|
-
* properties, and events specific to it now being on a DrawPad. The
|
|
357
|
+
* which is the node as a DrawPadItem, which has additional methods,
|
|
358
|
+
* properties, and events specific to it now being on a DrawPad. The node
|
|
359
359
|
* now **must** be manipulated only using the DrawPadItem object. Using
|
|
360
|
-
* the original
|
|
360
|
+
* the original node object will result in undefined behavior.
|
|
361
361
|
*
|
|
362
|
-
* @param
|
|
363
|
-
* @returns the
|
|
362
|
+
* @param node - the node to add to the DrawPad
|
|
363
|
+
* @returns the node as a DrawPadItem
|
|
364
364
|
*/
|
|
365
|
-
addItem<T extends
|
|
365
|
+
addItem<T extends M2Node>(node: T): T & DrawPadItem;
|
|
366
366
|
/**
|
|
367
367
|
* Takes a screenshot of the DrawPad.
|
|
368
368
|
*
|
|
@@ -454,7 +454,7 @@ interface VirtualKeyboardOptions extends CompositeOptions {
|
|
|
454
454
|
/** If true, a preview of the key that will be pressed will be shown. */
|
|
455
455
|
showKeyDownPreview?: boolean;
|
|
456
456
|
}
|
|
457
|
-
interface VirtualKeyboardEvent extends
|
|
457
|
+
interface VirtualKeyboardEvent extends M2NodeEvent {
|
|
458
458
|
/** String that is generated when key is pressed, with any modifiers (e.g., Shift) applied. */
|
|
459
459
|
key: string;
|
|
460
460
|
/** Code for the key, not taking into account any modifiers. */
|
|
@@ -501,29 +501,21 @@ declare class VirtualKeyboard extends Composite {
|
|
|
501
501
|
* Executes a callback when the user presses down on a key.
|
|
502
502
|
*
|
|
503
503
|
* @param callback - function to execute
|
|
504
|
-
* @param
|
|
505
|
-
* any existing callbacks of the same event type on this entity? Usually
|
|
506
|
-
* there should be only one callback defined, instead of chaining multiple
|
|
507
|
-
* ones. It is strongly recommended not to change this, unless you have a
|
|
508
|
-
* special use case. Default is true.
|
|
504
|
+
* @param options
|
|
509
505
|
*/
|
|
510
|
-
onKeyDown(callback: (virtualKeyboardEvent: VirtualKeyboardEvent) => void,
|
|
506
|
+
onKeyDown(callback: (virtualKeyboardEvent: VirtualKeyboardEvent) => void, options?: CallbackOptions): void;
|
|
511
507
|
/**
|
|
512
508
|
* Executes a callback when the user releases a key.
|
|
513
509
|
*
|
|
514
510
|
* @param callback - function to execute
|
|
515
|
-
* @param
|
|
516
|
-
* any existing callbacks of the same event type on this entity? Usually
|
|
517
|
-
* there should be only one callback defined, instead of chaining multiple
|
|
518
|
-
* ones. It is strongly recommended not to change this, unless you have a
|
|
519
|
-
* special use case. Default is true.
|
|
511
|
+
* @param options
|
|
520
512
|
*/
|
|
521
|
-
onKeyUp(callback: (virtualKeyboardEvent: VirtualKeyboardEvent) => void,
|
|
513
|
+
onKeyUp(callback: (virtualKeyboardEvent: VirtualKeyboardEvent) => void, options?: CallbackOptions): void;
|
|
522
514
|
private addVirtualKeyboardEventListener;
|
|
523
515
|
update(): void;
|
|
524
516
|
draw(canvas: Canvas): void;
|
|
525
517
|
warmup(canvas: Canvas): void;
|
|
526
|
-
duplicate(newName?: string | undefined):
|
|
518
|
+
duplicate(newName?: string | undefined): M2Node;
|
|
527
519
|
}
|
|
528
520
|
|
|
529
521
|
interface InstructionScene {
|
|
@@ -618,12 +610,78 @@ interface InstructionsOptions extends StoryOptions {
|
|
|
618
610
|
}
|
|
619
611
|
declare class Instructions extends Story {
|
|
620
612
|
/**
|
|
621
|
-
*
|
|
613
|
+
* Creates an array of scenes containing instructions on how to complete the assessment
|
|
622
614
|
*
|
|
623
615
|
* @param options - {@link InstructionsOptions}
|
|
624
|
-
* @returns
|
|
616
|
+
* @returns instruction scenes
|
|
617
|
+
*/
|
|
618
|
+
static create(options: InstructionsOptions): Array<Scene>;
|
|
619
|
+
/**
|
|
620
|
+
* Creates an array of scenes containing instructions on how to complete the assessment
|
|
621
|
+
*
|
|
622
|
+
* @deprecated Use {@link Instructions.create} instead (lower case method name "create")
|
|
623
|
+
*
|
|
624
|
+
* @param options - {@link InstructionsOptions}
|
|
625
|
+
* @returns instruction scenes
|
|
625
626
|
*/
|
|
626
627
|
static Create(options: InstructionsOptions): Array<Scene>;
|
|
627
628
|
}
|
|
628
629
|
|
|
629
|
-
|
|
630
|
+
interface CountdownSceneOptions extends SceneOptions {
|
|
631
|
+
/** Duration of the countdown, in milliseconds. */
|
|
632
|
+
milliseconds: number;
|
|
633
|
+
/** Duration of the slide transition, in milliseconds, to the next scene after the countdown completes. Default is 500. */
|
|
634
|
+
transitionDurationMilliseconds?: number;
|
|
635
|
+
/** A custom transition to use to present next scene after the countdown completes. */
|
|
636
|
+
transition?: Transition;
|
|
637
|
+
/** Duration in milliseconds to stay on zero before transitioning to the next scene. Default is zero. This option should be used if `transition` is set to `Transition.none()`. Otherwise, the zero will flash for a single frame before presenting the next scene. */
|
|
638
|
+
zeroDwellMilliseconds?: number;
|
|
639
|
+
/** Text shown below the countdown shape. Default is "GET READY". */
|
|
640
|
+
text?: string;
|
|
641
|
+
/** Font name for text */
|
|
642
|
+
textFontName?: string;
|
|
643
|
+
/** Font size for text. Default is 50. */
|
|
644
|
+
textFontSize?: number;
|
|
645
|
+
/** Font color for text. Default is black. */
|
|
646
|
+
textFontColor?: RgbaColor;
|
|
647
|
+
/** Distance between bottom of countdown shape and text. Default is 32. */
|
|
648
|
+
textMarginTop?: number;
|
|
649
|
+
/** Font name for timer numbers. */
|
|
650
|
+
timerNumbersFontName?: string;
|
|
651
|
+
/** Font size for timer numbers. Default is 50. */
|
|
652
|
+
timerNumbersFontSize?: number;
|
|
653
|
+
/** Font size for timer numbers. Default is white. */
|
|
654
|
+
timerNumbersFontColor?: RgbaColor;
|
|
655
|
+
/** String to show when the timer reaches zero. Default is "0". This could be changed to another value, such as "GO!" */
|
|
656
|
+
timerZeroString?: string;
|
|
657
|
+
/** Shape of the timer. Default is a Royal Blue circle with a radius of 100 centered vertically. */
|
|
658
|
+
timerShape?: TimerShape;
|
|
659
|
+
}
|
|
660
|
+
interface TimerShape {
|
|
661
|
+
circle?: {
|
|
662
|
+
/** Radius of the circle timer shape. */
|
|
663
|
+
radius: number;
|
|
664
|
+
};
|
|
665
|
+
rectangle?: {
|
|
666
|
+
/** Width of the rectangle timer shape. */
|
|
667
|
+
width: number;
|
|
668
|
+
/** Height of the rectangle timer shape. */
|
|
669
|
+
height: number;
|
|
670
|
+
/** Corner radius of the rectangle timer shape. Default is 0. */
|
|
671
|
+
cornerRadius?: number;
|
|
672
|
+
};
|
|
673
|
+
/** Color of the timer shape. Default is Royal Blue. */
|
|
674
|
+
fillColor?: RgbaColor;
|
|
675
|
+
/** Default is to center the timer shape vertically within the scene (verticalBias = .5). Setting verticalBias less than .5 will pull the shape towards the top. Setting verticalBias greater than .5 will pull the shape towards the bottom. */
|
|
676
|
+
verticalBias?: number;
|
|
677
|
+
}
|
|
678
|
+
declare class CountdownScene extends Scene {
|
|
679
|
+
/**
|
|
680
|
+
* A scene that counts down from a specified number to zero, then transitions to the next scene.
|
|
681
|
+
*
|
|
682
|
+
* @param options - {@link CountdownSceneOptions}
|
|
683
|
+
*/
|
|
684
|
+
constructor(options: CountdownSceneOptions);
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
export { Button, type ButtonOptions, CountdownScene, type CountdownSceneOptions, Dialog, type DialogEvent, type DialogOptions, DialogResult, DrawPad, type DrawPadEvent, DrawPadEventType, type DrawPadItem, type DrawPadItemEvent, DrawPadItemEventType, type DrawPadOptions, type DrawPadStroke, Grid, type GridOptions, type InstructionScene, Instructions, type InstructionsOptions, type KeyConfiguration, type KeyTapMetadata, type StrokeInteraction, type TimerShape, VirtualKeyboard, type VirtualKeyboardEvent, type VirtualKeyboardOptions, type VirtualKeyboardRow };
|