@m2c2kit/addons 0.3.9 → 0.3.11

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Canvas } from 'canvaskit-wasm';
-import { CompositeOptions, Size, RgbaColor, Composite, Entity, GlobalVariables, TextOptions, IText, EntityEvent, ShapeOptions, Point, LabelHorizontalAlignmentMode, Transition, StoryOptions, Story, Scene } from '@m2c2kit/core';
+import { CompositeOptions, Size, RgbaColor, Composite, Entity, GlobalVariables, TextOptions, IText, EntityEvent, Point, CallbackOptions, ShapeOptions, LabelHorizontalAlignmentMode, Transition, StoryOptions, Story, Scene } from '@m2c2kit/core';
 
 interface GridOptions extends CompositeOptions {
     /** Number of rows in the grid. Must be 1 or greater */
@@ -206,6 +206,179 @@ declare class Dialog extends Composite {
     warmup(canvas: Canvas): void;
 }
 
+interface DrawPadOptions extends CompositeOptions {
+    /** Size of the DrawPad */
+    size: Size;
+    /** Color of drawn lines. Default is red. */
+    lineColor?: RgbaColor;
+    /** Width of drawn lines. Default is 1 */
+    lineWidth?: number;
+    /** Background color of the DrawPad. Default is transparent. */
+    backgroundColor?: RgbaColor;
+    /** Width of the border. Default is 1 */
+    borderWidth?: number;
+    /** Color of the border. Default is black */
+    borderColor?: RgbaColor;
+    /** Does the DrawPad respond to user interaction? Default is true. */
+    isUserInteractionEnabled?: boolean;
+    /** Should drawing resume when the pointer, in a down state, returns to the DrawPad area after exiting it while drawing? Default is false. */
+    resumeDrawingOnReturn?: boolean;
+    /** Should the user be permitted to draw only one continuous line? If so, no more drawing is allowed after the first stroke ends. */
+    continuousDrawingOnly?: boolean;
+    /** If `continuousDrawingOnly`, this is the maximum pixel distance from the last stroke's end point that the user is allowed to continue drawing with a new stroke. */
+    continuousDrawingOnlyExceptionDistance?: number;
+}
+declare const DrawPadEventType: {
+    readonly StrokeStart: "StrokeStart";
+    readonly StrokeMove: "StrokeMove";
+    readonly StrokeEnd: "StrokeEnd";
+};
+type DrawPadEventType = (typeof DrawPadEventType)[keyof typeof DrawPadEventType];
+interface DrawPadEvent extends EntityEvent {
+    type: DrawPadEventType;
+    position: Point;
+}
+declare const DrawPadItemEventType: {
+    readonly StrokeEnter: "StrokeEnter";
+    readonly StrokeLeave: "StrokeLeave";
+};
+type DrawPadItemEventType = (typeof DrawPadItemEventType)[keyof typeof DrawPadItemEventType];
+interface DrawPadItemEvent extends EntityEvent {
+    type: DrawPadItemEventType;
+}
+interface StrokeInteraction {
+    /** Type of user interaction with the stroke: StrokeStart, StrokeMove, or StrokeEnd. */
+    type: DrawPadEventType;
+    /** Position on the DrawPad where the interaction occurred. In the DrawPad coordinate system, (0, 0) is the upper-left corner. */
+    position: Point;
+    /** Device ISO8601 Timestamp of the interaction. */
+    iso8601Timestamp: string;
+}
+type DrawPadStroke = Array<StrokeInteraction>;
+interface DrawPadItem {
+    /**
+     * Executes a callback when a DrawPad stroke begins on or enters the DrawPadItem.
+     *
+     * @param callback - function to execute
+     * @param options - {@link CallbackOptions}
+     */
+    onStrokeEnter(callback: (ev: DrawPadItemEvent) => void, options?: CallbackOptions): void;
+    /**
+     * Executes a callback when a DrawPad stroke leaves the DrawPadItem.
+     *
+     * @param callback - function to execute
+     * @param options - {@link CallbackOptions}
+     */
+    onStrokeLeave(callback: (ev: DrawPadItemEvent) => void, options?: CallbackOptions): void;
+    /** Is a DrawPad stroke currently within the bounds of the DrawPad item? */
+    isStrokeWithinBounds: boolean;
+    /** Position of the DrawPadItem within the DrawPad coordinate system, in which (0, 0) is the upper-left corner. */
+    drawPadPosition: Point;
+}
+declare class DrawPad extends Composite {
+    compositeType: string;
+    resumeDrawingOnReturn: boolean;
+    continuousDrawingOnly: boolean;
+    continuousDrawingOnlyExceptionDistance: number | undefined;
+    private _backgroundColor;
+    private _borderColor;
+    private _borderWidth;
+    private _lineColor;
+    private _lineWidth;
+    /** The rectangular "pad" on which to draw */
+    private drawArea?;
+    /** The lines that are drawn */
+    private drawShape?;
+    private isDrawingPointerDown;
+    private pointerIsDownAndPointerLeftDrawAreaWhenDown;
+    private currentStrokesNotAllowed;
+    /** Array of strokes created on the DrawPad, with position and timestamps
+     * of all interactions with each DrawPadStroke.
+     */
+    strokes: DrawPadStroke[];
+    /**
+     * A rectangular area on which the user can draw strokes (lines).
+     *
+     * @remarks This composite entity is composed of a rectangle Shape and
+     * another Shape that is formed from a path of points.
+     *
+     * @param options - {@link DrawPadOptions}
+     */
+    constructor(options: DrawPadOptions);
+    initialize(): void;
+    private initializeDrawShape;
+    private initializeDrawArea;
+    private dist;
+    private handleTapDown;
+    private handleTapLeave;
+    private handleTapUpAny;
+    private handlePointerMove;
+    update(): void;
+    draw(canvas: Canvas): void;
+    private raiseDrawPadEvent;
+    private raiseDrawPadItemEvent;
+    /**
+     * Removes all strokes from the DrawPad.
+     */
+    clear(): void;
+    warmup(canvas: Canvas): void;
+    /**
+     * Executes a callback when the user starts a stroke on the DrawPad.
+     *
+     * @param callback - function to execute
+     * @param options - {@link CallbackOptions}
+     */
+    onStrokeStart(callback: (ev: DrawPadEvent) => void, options?: CallbackOptions): void;
+    /**
+     * Executes a callback when the user moves a stroke on the DrawPad.
+     *
+     * @param callback - function to execute
+     * @param options - {@link CallbackOptions}
+     */
+    onStrokeMove(callback: (ev: DrawPadEvent) => void, options?: CallbackOptions): void;
+    /**
+     * Executes a callback when the user ends a stroke on the DrawPad.
+     *
+     * @param callback - function to execute
+     * @param options - {@link CallbackOptions}
+     */
+    onStrokeEnd(callback: (ev: DrawPadEvent) => void, options?: CallbackOptions): void;
+    /**
+     * Adds an entity to the DrawPad.
+     *
+     * @remarks After the entity is added to the DrawPad, its
+     * position is adjusted to be relative to the DrawPad's coordinate
+     * system, and it is made interactive. The method returns an object
+     * which is the entity as a DrawPadItem, which has additional methods,
+     * properties, and events specific to it now being on a DrawPad. The entity
+     * now **must** be manipulated only using the DrawPadItem object. Using
+     * the original entity object will result in undefined behavior.
+     *
+     * @param entity - the entity to add to the DrawPad
+     * @returns the entity as a DrawPadItem
+     */
+    addItem<T extends Entity>(entity: T): T & DrawPadItem;
+    /**
+     * Takes a screenshot of the DrawPad.
+     *
+     * @returns a base64-encoded string of the DrawPad's current state in
+     * PNG format.
+     */
+    takeScreenshot(): string;
+    private arrayBufferToBase64String;
+    get backgroundColor(): RgbaColor;
+    set backgroundColor(backgroundColor: RgbaColor);
+    get borderColor(): RgbaColor;
+    set borderColor(borderColor: RgbaColor);
+    get borderWidth(): number;
+    set borderWidth(borderWidth: number);
+    get lineColor(): RgbaColor;
+    set lineColor(lineColor: RgbaColor);
+    get lineWidth(): number;
+    set lineWidth(lineWidth: number);
+    duplicate(newName?: string): DrawPad;
+}
+
 interface KeyConfiguration {
     /** Width of the key in units of a regular key width. Default is 1. */
     widthRatio?: number;
@@ -430,4 +603,4 @@ declare class Instructions extends Story {
     static Create(options: InstructionsOptions): Array<Scene>;
 }
 
-export { Button, ButtonOptions, Dialog, DialogEvent, DialogOptions, DialogResult, Grid, GridOptions, InstructionScene, Instructions, InstructionsOptions, KeyConfiguration, KeyTapMetadata, VirtualKeyboard, VirtualKeyboardEvent, VirtualKeyboardOptions, VirtualKeyboardRow };
+export { Button, type ButtonOptions, 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, VirtualKeyboard, type VirtualKeyboardEvent, type VirtualKeyboardOptions, type VirtualKeyboardRow };

package/dist/index.js

@@ -1,28 +1,5 @@
-import { Composite, WebColors, Shape, Label, CanvasKitHelpers, EventType, Easings, Story, Transition, TransitionDirection, LabelHorizontalAlignmentMode, Scene, Dimensions, Sprite } from '@m2c2kit/core';
+import { Composite, WebColors, Shape, Label, CanvasKitHelpers, EventType, MutablePath, Easings, Story, Transition, TransitionDirection, LabelHorizontalAlignmentMode, Scene, Dimensions, Sprite } from '@m2c2kit/core';
 
-var __defProp$3 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 class Grid extends Composite {
   /**
    * A rectangular grid that supports placement of entities within the grid's
@@ -36,19 +13,16 @@ class Grid extends Composite {
    */
   constructor(options) {
     super(options);
-    __publicField$3(this, "compositeType", "grid");
+    this.compositeType = "grid";
     // Grid options
     // TODO: make getter, setter for these so they can be changed after initial construction
-    __publicField$3(this, "rows", 0);
-    __publicField$3(this, "columns", 0);
+    this.rows = 0;
+    this.columns = 0;
     // default Grid is: transparent gray, red lines, line width 1
-    __publicField$3(this, "gridBackgroundColor", [0, 0, 233, 0.25]);
-    __publicField$3(this, "gridLineColor", WebColors.Red);
-    __publicField$3(this, "gridLineWidth", 1);
-    __publicField$3(this, "cellWidth");
-    __publicField$3(this, "cellHeight");
-    __publicField$3(this, "gridChildren", new Array());
-    __publicField$3(this, "_gridBackground");
+    this.gridBackgroundColor = [0, 0, 233, 0.25];
+    this.gridLineColor = WebColors.Red;
+    this.gridLineWidth = 1;
+    this.gridChildren = new Array();
     if (options.size) {
       this.size = options.size;
     } else {
@@ -162,7 +136,9 @@ class Grid extends Composite {
    * provided, name will be the new uuid
    */
   duplicate(newName) {
-    const dest = new Grid(__spreadProps$1(__spreadValues$1(__spreadValues$1({}, this.getEntityOptions()), this.getDrawableOptions()), {
+    const dest = new Grid({
+      ...this.getEntityOptions(),
+      ...this.getDrawableOptions(),
       rows: this.rows,
       columns: this.columns,
       size: this.size,
@@ -170,7 +146,7 @@ class Grid extends Composite {
       gridLineWidth: this.gridLineWidth,
       gridLineColor: this.gridLineColor,
       name: newName
-    }));
+    });
     if (this.children.length > 0) {
       dest.children = this.children.map((child) => {
         const clonedChild = child.duplicate();
@@ -262,29 +238,6 @@ class Grid extends Composite {
   }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 class Button extends Composite {
   // todo: add getters/setters so button can respond to changes in its options
   // todo: add default "behaviors" (?) like button click animation?
@@ -299,15 +252,14 @@ class Button extends Composite {
    */
   constructor(options) {
     super(options);
-    __publicField$2(this, "compositeType", "button");
+    this.compositeType = "button";
     // Button options
-    __publicField$2(this, "_backgroundColor", WebColors.Black);
-    __publicField$2(this, "size", { width: 200, height: 50 });
-    __publicField$2(this, "cornerRadius", 9);
-    __publicField$2(this, "fontSize", 20);
-    __publicField$2(this, "text", "");
-    __publicField$2(this, "_fontColor", WebColors.White);
-    __publicField$2(this, "backgroundPaint");
+    this._backgroundColor = WebColors.Black;
+    this.size = { width: 200, height: 50 };
+    this.cornerRadius = 9;
+    this.fontSize = 20;
+    this.text = "";
+    this._fontColor = WebColors.White;
     if (options.text) {
       this.text = options.text;
     }
@@ -381,13 +333,16 @@ class Button extends Composite {
    * provided, name will be the new uuid
    */
   duplicate(newName) {
-    const dest = new Button(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, this.getEntityOptions()), this.getDrawableOptions()), this.getTextOptions()), {
+    const dest = new Button({
+      ...this.getEntityOptions(),
+      ...this.getDrawableOptions(),
+      ...this.getTextOptions(),
       size: this.size,
       cornerRadius: this.cornerRadius,
       backgroundColor: this.backgroundColor,
       fontColor: this.fontColor,
       name: newName
-    }));
+    });
     if (this.children.length > 0) {
       dest.children = this.children.map((child) => {
         const clonedChild = child.duplicate();
@@ -411,12 +366,6 @@ class Button extends Composite {
   }
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 var DialogResult = /* @__PURE__ */ ((DialogResult2) => {
   DialogResult2["Dismiss"] = "Dismiss";
   DialogResult2["Positive"] = "Positive";
@@ -428,17 +377,16 @@ class Dialog extends Composite {
   // todo: add default "behaviors" (?) like button click animation?
   constructor(options) {
     super(options);
-    __publicField$1(this, "compositeType", "dialog");
-    __publicField$1(this, "_backgroundColor", WebColors.White);
-    __publicField$1(this, "cornerRadius", 9);
-    __publicField$1(this, "overlayAlpha", 0.5);
-    __publicField$1(this, "contentText", "");
-    __publicField$1(this, "positiveButtonText", "");
-    __publicField$1(this, "negativeButtonText", "");
-    __publicField$1(this, "zPosition", Number.MAX_VALUE);
-    __publicField$1(this, "hidden", true);
-    __publicField$1(this, "_fontColor", WebColors.White);
-    __publicField$1(this, "backgroundPaint");
+    this.compositeType = "dialog";
+    this._backgroundColor = WebColors.White;
+    this.cornerRadius = 9;
+    this.overlayAlpha = 0.5;
+    this.contentText = "";
+    this.positiveButtonText = "";
+    this.negativeButtonText = "";
+    this.zPosition = Number.MAX_VALUE;
+    this.hidden = true;
+    this._fontColor = WebColors.White;
     if (!options) {
       return;
     }
@@ -626,12 +574,510 @@ class Dialog extends Composite {
   }
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
+const DrawPadEventType = {
+  StrokeStart: "StrokeStart",
+  StrokeMove: "StrokeMove",
+  StrokeEnd: "StrokeEnd"
 };
+const DrawPadItemEventType = {
+  StrokeEnter: "StrokeEnter",
+  StrokeLeave: "StrokeLeave"
+};
+class DrawPad extends Composite {
+  /**
+   * A rectangular area on which the user can draw strokes (lines).
+   *
+   * @remarks This composite entity is composed of a rectangle Shape and
+   * another Shape that is formed from a path of points.
+   *
+   * @param options - {@link DrawPadOptions}
+   */
+  constructor(options) {
+    super(options);
+    this.compositeType = "DrawPad";
+    this.resumeDrawingOnReturn = false;
+    this.continuousDrawingOnly = false;
+    this._backgroundColor = [0, 0, 0, 0];
+    this._borderColor = WebColors.Black;
+    this._borderWidth = 1;
+    this._lineColor = WebColors.Red;
+    this._lineWidth = 1;
+    this.isDrawingPointerDown = false;
+    this.pointerIsDownAndPointerLeftDrawAreaWhenDown = false;
+    this.currentStrokesNotAllowed = false;
+    /** Array of strokes created on the DrawPad, with position and timestamps
+     * of all interactions with each DrawPadStroke.
+     */
+    this.strokes = new Array();
+    if (options.isUserInteractionEnabled === void 0) {
+      this.isUserInteractionEnabled = true;
+    }
+    if (!options.size) {
+      throw new Error("DrawPad size must be specified");
+    }
+    this.size = options.size;
+    if (options.lineColor) {
+      this.lineColor = options.lineColor;
+    }
+    if (options.lineWidth) {
+      this.lineWidth = options.lineWidth;
+    }
+    if (options.backgroundColor) {
+      this.backgroundColor = options.backgroundColor;
+    }
+    if (options.borderColor) {
+      this.borderColor = options.borderColor;
+    }
+    if (options.borderWidth) {
+      this.borderWidth = options.borderWidth;
+    }
+    if (options.resumeDrawingOnReturn !== void 0) {
+      this.resumeDrawingOnReturn = options.resumeDrawingOnReturn;
+    }
+    if (options.continuousDrawingOnly !== void 0) {
+      this.continuousDrawingOnly = options.continuousDrawingOnly;
+    }
+    if (options.continuousDrawingOnlyExceptionDistance !== void 0) {
+      this.continuousDrawingOnlyExceptionDistance = options.continuousDrawingOnlyExceptionDistance;
+    }
+  }
+  initialize() {
+    this.initializeDrawShape();
+    this.initializeDrawArea();
+    this.needsInitialization = false;
+  }
+  initializeDrawShape() {
+    if (!this.drawShape) {
+      const mutablePath = new MutablePath();
+      this.drawShape = new Shape({
+        path: mutablePath,
+        size: this.size
+      });
+      this.addChild(this.drawShape);
+    }
+    this.drawShape.strokeColor = this.lineColor;
+    this.drawShape.lineWidth = this.lineWidth;
+  }
+  initializeDrawArea() {
+    if (!this.drawArea) {
+      this.drawArea = new Shape({
+        rect: { size: this.size },
+        isUserInteractionEnabled: true
+      });
+      this.addChild(this.drawArea);
+      this.drawArea.onTapDown((e) => {
+        this.handleTapDown(e);
+      });
+      this.drawArea.onPointerMove((e) => {
+        this.handlePointerMove(e);
+      });
+      this.drawArea.onTapUpAny(() => {
+        this.handleTapUpAny();
+      });
+      this.drawArea.onTapLeave(() => {
+        this.handleTapLeave();
+      });
+    }
+    this.drawArea.fillColor = this.backgroundColor;
+    this.drawArea.strokeColor = this.borderColor;
+    this.drawArea.lineWidth = this.borderWidth;
+  }
+  dist(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  }
+  handleTapDown(e) {
+    if (this.isUserInteractionEnabled) {
+      const drawShape = this.drawShape;
+      if (!drawShape) {
+        throw new Error("no draw shape");
+      }
+      const path = drawShape.path;
+      if (this.continuousDrawingOnly && path.subpaths.length !== 0) {
+        const prevPoint = path.subpaths[path.subpaths.length - 1][path.subpaths[path.subpaths.length - 1].length - 1];
+        const currentPoint = e.point;
+        if (this.continuousDrawingOnlyExceptionDistance === void 0 || this.dist(prevPoint, currentPoint) > this.continuousDrawingOnlyExceptionDistance) {
+          this.currentStrokesNotAllowed = true;
+          return;
+        }
+      }
+      this.isDrawingPointerDown = true;
+      path.move(e.point);
+      const drawPadEvent = {
+        type: DrawPadEventType.StrokeStart,
+        target: this,
+        handled: false,
+        position: e.point
+      };
+      this.strokes.push([
+        {
+          type: DrawPadEventType.StrokeStart,
+          position: e.point,
+          iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      ]);
+      this.raiseDrawPadEvent(drawPadEvent);
+    }
+  }
+  handleTapLeave() {
+    if (this.currentStrokesNotAllowed) {
+      this.isDrawingPointerDown = false;
+      return;
+    }
+    if (this.resumeDrawingOnReturn === false) {
+      this.isDrawingPointerDown = false;
+      const strokeCount = this.strokes.length;
+      const strokeInteractionCount = this.strokes[strokeCount - 1].length;
+      const drawPadEvent = {
+        type: DrawPadEventType.StrokeEnd,
+        position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
+        target: this,
+        handled: false
+      };
+      this.strokes[strokeCount - 1].push({
+        type: DrawPadEventType.StrokeEnd,
+        position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      this.raiseDrawPadEvent(drawPadEvent);
+    } else {
+      this.pointerIsDownAndPointerLeftDrawAreaWhenDown = true;
+    }
+  }
+  handleTapUpAny() {
+    if (this.currentStrokesNotAllowed) {
+      this.isDrawingPointerDown = false;
+      return;
+    }
+    if (this.isUserInteractionEnabled) {
+      this.isDrawingPointerDown = false;
+      this.pointerIsDownAndPointerLeftDrawAreaWhenDown = false;
+      const strokeCount = this.strokes.length;
+      const strokeInteractionCount = this.strokes[strokeCount - 1].length;
+      const drawPadEvent = {
+        type: DrawPadEventType.StrokeEnd,
+        position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
+        target: this,
+        handled: false
+      };
+      this.strokes[strokeCount - 1].push({
+        type: DrawPadEventType.StrokeEnd,
+        position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      this.raiseDrawPadEvent(drawPadEvent);
+    }
+  }
+  handlePointerMove(e) {
+    if (this.isUserInteractionEnabled && this.isDrawingPointerDown) {
+      const drawShape = this.drawShape;
+      if (!drawShape) {
+        throw new Error("no draw shape");
+      }
+      const path = drawShape.path;
+      if (this.isDrawingPointerDown && !this.pointerIsDownAndPointerLeftDrawAreaWhenDown) {
+        path.addLine(e.point);
+      }
+      if (this.pointerIsDownAndPointerLeftDrawAreaWhenDown) {
+        this.pointerIsDownAndPointerLeftDrawAreaWhenDown = false;
+        path.move(e.point);
+      }
+      const drawPadEvent = {
+        type: DrawPadEventType.StrokeMove,
+        target: this,
+        handled: false,
+        position: e.point
+      };
+      const strokeCount = this.strokes.length;
+      this.strokes[strokeCount - 1].push({
+        type: DrawPadEventType.StrokeMove,
+        position: e.point,
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      this.raiseDrawPadEvent(drawPadEvent);
+    }
+  }
+  update() {
+    super.update();
+  }
+  draw(canvas) {
+    super.drawChildren(canvas);
+  }
+  raiseDrawPadEvent(event) {
+    if (this.eventListeners.length > 0) {
+      this.eventListeners.filter((listener) => listener.type === event.type).forEach((listener) => {
+        listener.callback(event);
+      });
+    }
+  }
+  raiseDrawPadItemEvent(item, event) {
+    if (item.eventListeners.length > 0) {
+      item.eventListeners.filter((listener) => listener.type === event.type).forEach((listener) => {
+        listener.callback(event);
+      });
+    }
+  }
+  /**
+   * Removes all strokes from the DrawPad.
+   */
+  clear() {
+    const drawShape = this.drawShape;
+    if (!drawShape) {
+      throw new Error("no draw shape");
+    }
+    const path = drawShape.path;
+    path.clear();
+    this.strokes = new Array();
+  }
+  warmup(canvas) {
+    this.initialize();
+    this.children.filter((child) => child.isDrawable).forEach((child) => {
+      child.warmup(canvas);
+    });
+  }
+  /**
+   * Executes a callback when the user starts a stroke on the DrawPad.
+   *
+   * @param callback - function to execute
+   * @param options - {@link CallbackOptions}
+   */
+  onStrokeStart(callback, options) {
+    this.addEventListener(
+      DrawPadEventType.StrokeStart,
+      callback,
+      options
+    );
+  }
+  /**
+   * Executes a callback when the user moves a stroke on the DrawPad.
+   *
+   * @param callback - function to execute
+   * @param options - {@link CallbackOptions}
+   */
+  onStrokeMove(callback, options) {
+    this.addEventListener(
+      DrawPadEventType.StrokeMove,
+      callback,
+      options
+    );
+  }
+  /**
+   * Executes a callback when the user ends a stroke on the DrawPad.
+   *
+   * @param callback - function to execute
+   * @param options - {@link CallbackOptions}
+   */
+  onStrokeEnd(callback, options) {
+    this.addEventListener(
+      DrawPadEventType.StrokeEnd,
+      callback,
+      options
+    );
+  }
+  /**
+   * Adds an entity to the DrawPad.
+   *
+   * @remarks After the entity is added to the DrawPad, its
+   * position is adjusted to be relative to the DrawPad's coordinate
+   * system, and it is made interactive. The method returns an object
+   * which is the entity as a DrawPadItem, which has additional methods,
+   * properties, and events specific to it now being on a DrawPad. The entity
+   * now **must** be manipulated only using the DrawPadItem object. Using
+   * the original entity object will result in undefined behavior.
+   *
+   * @param entity - the entity to add to the DrawPad
+   * @returns the entity as a DrawPadItem
+   */
+  addItem(entity) {
+    Object.defineProperty(entity, "drawPadPosition", {
+      get: function() {
+        const drawPad = entity.parent;
+        return {
+          get x() {
+            return entity.position.x + drawPad.size.width / 2;
+          },
+          set x(value) {
+            entity.position.x = value - drawPad.size.width / 2;
+          },
+          get y() {
+            return entity.position.y + drawPad.size.height / 2;
+          },
+          set y(value) {
+            entity.position.y = value - drawPad.size.height / 2;
+          }
+        };
+      },
+      set: function(value) {
+        const drawPad = entity.parent;
+        entity.position.x = value.x - drawPad.size.width / 2;
+        entity.position.y = value.y - drawPad.size.height / 2;
+      }
+    });
+    Object.defineProperty(entity, "onStrokeEnter", {
+      value: function(callback, options) {
+        this.addEventListener(
+          DrawPadItemEventType.StrokeEnter,
+          callback,
+          options
+        );
+      }
+    });
+    Object.defineProperty(entity, "onStrokeLeave", {
+      value: function(callback, options) {
+        this.addEventListener(
+          DrawPadItemEventType.StrokeLeave,
+          callback,
+          options
+        );
+      }
+    });
+    Object.defineProperty(entity, "isStrokeWithinBounds", {
+      value: false,
+      writable: true
+    });
+    entity.onPointerDown(() => {
+      if (this.isDrawingPointerDown) {
+        if (entity.isStrokeWithinBounds === false) {
+          entity.isStrokeWithinBounds = true;
+          const drawPadItemEvent = {
+            type: DrawPadItemEventType.StrokeEnter,
+            target: entity
+          };
+          this.raiseDrawPadItemEvent(entity, drawPadItemEvent);
+        }
+      }
+    });
+    entity.onPointerMove(() => {
+      if (this.isDrawingPointerDown) {
+        if (entity.isStrokeWithinBounds === false) {
+          entity.isStrokeWithinBounds = true;
+          const drawPadItemEvent = {
+            type: DrawPadItemEventType.StrokeEnter,
+            target: entity
+          };
+          this.raiseDrawPadItemEvent(entity, drawPadItemEvent);
+        }
+      }
+    });
+    entity.onPointerLeave(() => {
+      if (this.isDrawingPointerDown) {
+        if (entity.isStrokeWithinBounds === true) {
+          entity.isStrokeWithinBounds = false;
+          const drawPadItemEvent = {
+            type: DrawPadItemEventType.StrokeLeave,
+            target: entity
+          };
+          this.raiseDrawPadItemEvent(entity, drawPadItemEvent);
+        }
+      }
+    });
+    entity.onPointerUp(() => {
+      if (entity.isStrokeWithinBounds === true) {
+        entity.isStrokeWithinBounds = false;
+        const drawPadItemEvent = {
+          type: DrawPadItemEventType.StrokeLeave,
+          target: entity
+        };
+        this.raiseDrawPadItemEvent(entity, drawPadItemEvent);
+      }
+    });
+    this.addChild(entity);
+    entity.zPosition = -1;
+    entity.position.x = entity.position.x - this.size.width / 2;
+    entity.position.y = entity.position.y - this.size.height / 2;
+    entity.isUserInteractionEnabled = true;
+    return entity;
+  }
+  /**
+   * Takes a screenshot of the DrawPad.
+   *
+   * @returns a base64-encoded string of the DrawPad's current state in
+   * PNG format.
+   */
+  takeScreenshot() {
+    const surface = this.game.surface;
+    if (!surface) {
+      throw new Error("no surface");
+    }
+    const drawArea = this.drawArea;
+    if (!drawArea) {
+      throw new Error("no draw area");
+    }
+    const sx = (drawArea.absolutePosition.x - drawArea.size.width / 2) * Globals.canvasScale;
+    const sy = (drawArea.absolutePosition.y - drawArea.size.height / 2) * Globals.canvasScale;
+    const sw = drawArea.size.width * Globals.canvasScale;
+    const sh = drawArea.size.height * Globals.canvasScale;
+    const imageInfo = {
+      alphaType: this.game.canvasKit.AlphaType.Unpremul,
+      colorType: this.game.canvasKit.ColorType.RGBA_8888,
+      colorSpace: this.game.canvasKit.ColorSpace.SRGB,
+      width: sw,
+      height: sh
+    };
+    const snapshot = this.game.snapshots[0];
+    const pixelData = snapshot.readPixels(sx, sy, imageInfo);
+    const croppedImage = this.game.canvasKit.MakeImage(
+      imageInfo,
+      pixelData,
+      pixelData.length / sh
+    );
+    if (!croppedImage) {
+      throw new Error("no cropped image");
+    }
+    const bytes = croppedImage.encodeToBytes();
+    if (!bytes) {
+      throw new Error("no bytes");
+    }
+    croppedImage.delete();
+    return this.arrayBufferToBase64String(bytes);
+  }
+  arrayBufferToBase64String(buffer) {
+    let binary = "";
+    const bytes = new Uint8Array(buffer);
+    for (let i = 0; i < bytes.byteLength; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(backgroundColor) {
+    this._backgroundColor = backgroundColor;
+    this.needsInitialization = true;
+  }
+  get borderColor() {
+    return this._borderColor;
+  }
+  set borderColor(borderColor) {
+    this._borderColor = borderColor;
+    this.needsInitialization = true;
+  }
+  get borderWidth() {
+    return this._borderWidth;
+  }
+  set borderWidth(borderWidth) {
+    this._borderWidth = borderWidth;
+    this.needsInitialization = true;
+  }
+  get lineColor() {
+    return this._lineColor;
+  }
+  set lineColor(lineColor) {
+    this._lineColor = lineColor;
+    this.needsInitialization = true;
+  }
+  get lineWidth() {
+    return this._lineWidth;
+  }
+  set lineWidth(lineWidth) {
+    this._lineWidth = lineWidth;
+    this.needsInitialization = true;
+  }
+  duplicate(newName) {
+    throw new Error("Method not implemented.");
+  }
+}
+
 class VirtualKeyboard extends Composite {
   /**
    * An on-screen keyboard that can be used to enter text.
@@ -639,31 +1085,15 @@ class VirtualKeyboard extends Composite {
    * @param options - {@link VirtualKeyboardOptions}
    */
   constructor(options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     super(options);
-    __publicField(this, "keyboardHorizontalPaddingPercent");
-    __publicField(this, "keyboardVerticalPaddingPercent");
-    __publicField(this, "keyHorizontalPaddingPercent");
-    __publicField(this, "keyVerticalPaddingPercent");
-    __publicField(this, "rowsConfiguration", new Array());
-    __publicField(this, "keysPerRow");
-    __publicField(this, "fontSize");
-    __publicField(this, "fontNames");
-    __publicField(this, "hiddenKeys");
-    __publicField(this, "capitalLettersOnly");
-    __publicField(this, "keyColor");
-    __publicField(this, "keyDownColor");
-    __publicField(this, "specialKeyDownColor");
-    __publicField(this, "backgroundColor");
-    __publicField(this, "showKeyDownPreview");
-    __publicField(this, "shiftActivated", false);
-    __publicField(this, "shiftKeyShape");
+    this.rowsConfiguration = new Array();
+    this.shiftActivated = false;
     this.size = options.size;
-    this.position = (_a = options.position) != null ? _a : { x: 0, y: 0 };
-    this.keyboardHorizontalPaddingPercent = (_b = options.keyboardHorizontalPaddingPercent) != null ? _b : 0.02;
-    this.keyboardVerticalPaddingPercent = (_c = options.keyboardVerticalPaddingPercent) != null ? _c : 0.025;
-    this.keyHorizontalPaddingPercent = (_d = options.keyHorizontalPaddingPercent) != null ? _d : 0.1;
-    this.keyVerticalPaddingPercent = (_e = options.keyVerticalPaddingPercent) != null ? _e : 0.1;
+    this.position = options.position ?? { x: 0, y: 0 };
+    this.keyboardHorizontalPaddingPercent = options.keyboardHorizontalPaddingPercent ?? 0.02;
+    this.keyboardVerticalPaddingPercent = options.keyboardVerticalPaddingPercent ?? 0.025;
+    this.keyHorizontalPaddingPercent = options.keyHorizontalPaddingPercent ?? 0.1;
+    this.keyVerticalPaddingPercent = options.keyVerticalPaddingPercent ?? 0.1;
     if (options.rows !== void 0) {
       this.rowsConfiguration = options.rows.map((row) => {
         const internalRow = row.map((key) => {
@@ -681,19 +1111,18 @@ class VirtualKeyboard extends Composite {
         return internalRow;
       });
     }
-    this.keysPerRow = (_f = options.keysPerRow) != null ? _f : NaN;
-    this.fontSize = (_g = options.fontSize) != null ? _g : NaN;
+    this.keysPerRow = options.keysPerRow ?? NaN;
+    this.fontSize = options.fontSize ?? NaN;
     this.fontNames = options.fontNames;
-    this.hiddenKeys = (_h = options.hiddenKeys) != null ? _h : "";
-    this.capitalLettersOnly = (_i = options.capitalLettersOnly) != null ? _i : false;
-    this.keyColor = (_j = options.keyColor) != null ? _j : WebColors.White;
-    this.keyDownColor = (_k = options.keyDownColor) != null ? _k : WebColors.Transparent;
-    this.specialKeyDownColor = (_l = options.specialKeyDownColor) != null ? _l : WebColors.LightSteelBlue;
-    this.backgroundColor = (_m = options.backgroundColor) != null ? _m : [242, 240, 244, 1];
-    this.showKeyDownPreview = (_n = options.showKeyDownPreview) != null ? _n : true;
+    this.hiddenKeys = options.hiddenKeys ?? "";
+    this.capitalLettersOnly = options.capitalLettersOnly ?? false;
+    this.keyColor = options.keyColor ?? WebColors.White;
+    this.keyDownColor = options.keyDownColor ?? WebColors.Transparent;
+    this.specialKeyDownColor = options.specialKeyDownColor ?? WebColors.LightSteelBlue;
+    this.backgroundColor = options.backgroundColor ?? [242, 240, 244, 1];
+    this.showKeyDownPreview = options.showKeyDownPreview ?? true;
   }
   initialize() {
-    var _a, _b, _c, _d, _e, _f, _g;
     if (this.rowsConfiguration.length === 0) {
       const numKeys = [
         ["1", "!"],
@@ -733,7 +1162,7 @@ class VirtualKeyboard extends Composite {
       const shiftArrowShapeOptions = {
         path: {
           // Public Domain from https://www.freesvg.org
-          svgPathString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
+          pathString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
           width: 24
         },
         lineWidth: 2,
@@ -743,7 +1172,7 @@ class VirtualKeyboard extends Composite {
       const backspaceShapeOptions = {
         path: {
           // CC0 from https://www.svgrepo.com
-          svgPathString: "M10.625 5.09 0 22.09l10.625 17H44.18v-34H10.625zm31.555 32H11.734l-9.375-15 9.375-15H42.18v30zm-23.293-6.293 7.293-7.293 7.293 7.293 1.414-1.414-7.293-7.293 7.293-7.293-1.414-1.414-7.293 7.293-7.293-7.293-1.414 1.414 7.293 7.293-7.293 7.293",
+          pathString: "M10.625 5.09 0 22.09l10.625 17H44.18v-34H10.625zm31.555 32H11.734l-9.375-15 9.375-15H42.18v30zm-23.293-6.293 7.293-7.293 7.293 7.293 1.414-1.414-7.293-7.293 7.293-7.293-1.414-1.414-7.293 7.293-7.293-7.293-1.414 1.414 7.293 7.293-7.293 7.293",
           width: 24
         },
         lineWidth: 1,
@@ -794,7 +1223,6 @@ class VirtualKeyboard extends Composite {
     this.addChild(keyboardRectangle);
     const rows = this.rowsConfiguration.map((row) => {
       return row.map((key) => {
-        var _a2, _b2, _c2, _d2;
         let widthRatio = 1;
         const heightRatio = 1;
         let code;
@@ -816,11 +1244,11 @@ class VirtualKeyboard extends Composite {
           labelShifted = key[1];
         } else {
           code = key.code;
-          label = (_a2 = key.labelText) != null ? _a2 : "";
-          labelShifted = (_b2 = key.labelTextShifted) != null ? _b2 : label;
-          widthRatio = (_c2 = key.widthRatio) != null ? _c2 : 1;
+          label = key.labelText ?? "";
+          labelShifted = key.labelTextShifted ?? label;
+          widthRatio = key.widthRatio ?? 1;
           keyIcon = key.keyIcon;
-          isShift = (_d2 = key.isShift) != null ? _d2 : false;
+          isShift = key.isShift ?? false;
         }
         return {
           widthRatio,
@@ -837,17 +1265,14 @@ class VirtualKeyboard extends Composite {
       x: -keyboardRectangle.size.width / 2,
       y: -keyboardRectangle.size.height / 2
     };
-    const keyboardVerticalPadding = ((_a = this.keyboardVerticalPaddingPercent) != null ? _a : 0.025) * this.size.height;
-    const keyboardHorizontalPadding = ((_b = this.keyboardHorizontalPaddingPercent) != null ? _b : 0.02) * this.size.width;
+    const keyboardVerticalPadding = (this.keyboardVerticalPaddingPercent ?? 0.025) * this.size.height;
+    const keyboardHorizontalPadding = (this.keyboardHorizontalPaddingPercent ?? 0.02) * this.size.width;
     const keyBoxHeight = (this.size.height - 2 * keyboardVerticalPadding) / rows.length;
     const keyBoxWidth = (this.size.width - 2 * keyboardHorizontalPadding) / this.keysPerRow;
     for (let r = 0; r < rows.length; r++) {
       const row = rows[r];
       const rowSumKeyWidths = row.reduce(
-        (sum, key) => {
-          var _a2;
-          return sum + ((_a2 = key.widthRatio) != null ? _a2 : 1);
-        },
+        (sum, key) => sum + (key.widthRatio ?? 1),
         0
       );
       let extraPadding = 0;
@@ -856,17 +1281,14 @@ class VirtualKeyboard extends Composite {
       }
       for (let k = 0; k < row.length; k++) {
         const key = row[k];
-        if ((_c = this.hiddenKeys) == null ? void 0 : _c.split(",").map((s) => s.trim()).includes(key.code)) {
+        if (this.hiddenKeys?.split(",").map((s) => s.trim()).includes(key.code)) {
           continue;
         }
-        const keyBoxWidthsSoFar = row.slice(0, k).reduce((sum, key2) => {
-          var _a2;
-          return sum + ((_a2 = key2.widthRatio) != null ? _a2 : 1);
-        }, 0) * keyBoxWidth;
+        const keyBoxWidthsSoFar = row.slice(0, k).reduce((sum, key2) => sum + (key2.widthRatio ?? 1), 0) * keyBoxWidth;
         const keyBox = new Shape({
           rect: {
             size: {
-              width: keyBoxWidth * ((_d = key.widthRatio) != null ? _d : 1),
+              width: keyBoxWidth * (key.widthRatio ?? 1),
               height: keyBoxHeight
             }
           },
@@ -874,12 +1296,12 @@ class VirtualKeyboard extends Composite {
           strokeColor: WebColors.Transparent,
           lineWidth: 1,
           position: {
-            x: extraPadding + keyboardOrigin.x + keyboardHorizontalPadding + keyBoxWidthsSoFar + ((_e = key.widthRatio) != null ? _e : 1) * keyBoxWidth / 2,
+            x: extraPadding + keyboardOrigin.x + keyboardHorizontalPadding + keyBoxWidthsSoFar + (key.widthRatio ?? 1) * keyBoxWidth / 2,
             y: keyboardOrigin.y + keyboardVerticalPadding + r * keyBoxHeight + keyBoxHeight / 2
           }
         });
-        const keyWidth = keyBoxWidth * ((_f = key.widthRatio) != null ? _f : 1) - 2 * this.keyHorizontalPaddingPercent * keyBoxWidth;
-        const keyHeight = keyBoxHeight - ((_g = key.heightRatio) != null ? _g : 1) - 2 * this.keyVerticalPaddingPercent * keyBoxHeight;
+        const keyWidth = keyBoxWidth * (key.widthRatio ?? 1) - 2 * this.keyHorizontalPaddingPercent * keyBoxWidth;
+        const keyHeight = keyBoxHeight - (key.heightRatio ?? 1) - 2 * this.keyVerticalPaddingPercent * keyBoxHeight;
         const keyShape = new Shape({
           rect: { size: { width: keyWidth, height: keyHeight } },
           cornerRadius: 4,
@@ -889,7 +1311,6 @@ class VirtualKeyboard extends Composite {
         });
         keyBox.addChild(keyShape);
         keyShape.onTapUp((tapEvent) => {
-          var _a2, _b2;
           let keyAsString = "";
           if (!key.isShift) {
             if (this.shiftActivated) {
@@ -901,14 +1322,13 @@ class VirtualKeyboard extends Composite {
                 }
               }
               rows.flatMap((k2) => k2).forEach((k2) => {
-                var _a3, _b3;
-                if (((_a3 = k2.keyLabel) == null ? void 0 : _a3.text) !== void 0) {
-                  k2.keyLabel.text = (_b3 = k2.labelText) != null ? _b3 : "";
+                if (k2.keyLabel?.text !== void 0) {
+                  k2.keyLabel.text = k2.labelText ?? "";
                 }
               });
-              keyAsString = (_a2 = key.labelTextShifted) != null ? _a2 : key.code;
+              keyAsString = key.labelTextShifted ?? key.code;
             } else {
-              keyAsString = (_b2 = key.labelText) != null ? _b2 : key.code;
+              keyAsString = key.labelText ?? key.code;
             }
             if (key.code === " " || key.code === "Backspace") {
               keyAsString = key.code;
@@ -945,7 +1365,6 @@ class VirtualKeyboard extends Composite {
           }
         });
         keyShape.onTapDown((tapEvent) => {
-          var _a2, _b2, _c2, _d2;
           if (key.isShift) {
             this.shiftActivated = !this.shiftActivated;
             if (this.shiftActivated) {
@@ -954,9 +1373,8 @@ class VirtualKeyboard extends Composite {
                 key.keyIcon.fillColor = WebColors.Black;
               }
               rows.flatMap((k2) => k2).forEach((k2) => {
-                var _a3, _b3, _c3;
-                if (((_a3 = k2.keyLabel) == null ? void 0 : _a3.text) !== void 0) {
-                  k2.keyLabel.text = (_c3 = (_b3 = k2.labelTextShifted) != null ? _b3 : k2.labelText) != null ? _c3 : "";
+                if (k2.keyLabel?.text !== void 0) {
+                  k2.keyLabel.text = k2.labelTextShifted ?? k2.labelText ?? "";
                 }
               });
             } else {
@@ -965,9 +1383,8 @@ class VirtualKeyboard extends Composite {
                 key.keyIcon.fillColor = WebColors.Transparent;
               }
               rows.flatMap((k2) => k2).forEach((k2) => {
-                var _a3, _b3;
-                if (((_a3 = k2.keyLabel) == null ? void 0 : _a3.text) !== void 0) {
-                  k2.keyLabel.text = (_b3 = k2.labelText) != null ? _b3 : "";
+                if (k2.keyLabel?.text !== void 0) {
+                  k2.keyLabel.text = k2.labelText ?? "";
                 }
               });
             }
@@ -983,15 +1400,15 @@ class VirtualKeyboard extends Composite {
               letterCircle.position.x = keyBox.position.x;
               letterCircle.position.y = keyBox.position.y - keyHeight * 1.2;
               if (this.shiftActivated) {
-                letterCircleLabel.text = (_a2 = key.labelTextShifted) != null ? _a2 : key.code;
+                letterCircleLabel.text = key.labelTextShifted ?? key.code;
               } else {
-                letterCircleLabel.text = (_b2 = key.labelText) != null ? _b2 : key.code;
+                letterCircleLabel.text = key.labelText ?? key.code;
               }
             }
             if (this.shiftActivated) {
-              keyAsString = (_c2 = key.labelTextShifted) != null ? _c2 : key.code;
+              keyAsString = key.labelTextShifted ?? key.code;
             } else {
-              keyAsString = (_d2 = key.labelText) != null ? _d2 : key.code;
+              keyAsString = key.labelText ?? key.code;
             }
           }
           if (this.eventListeners.length > 0) {
@@ -1130,38 +1547,37 @@ class Instructions extends Story {
   static Create(options) {
     const scenes = new Array();
     options.instructionScenes.forEach((s, i) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I;
-      const nextSceneTransition = (_b = (_a = s.nextSceneTransition) != null ? _a : options.nextSceneTransition) != null ? _b : Transition.slide({
+      const nextSceneTransition = s.nextSceneTransition ?? options.nextSceneTransition ?? Transition.slide({
         direction: TransitionDirection.Left,
         duration: SCENE_TRANSITION_DURATION,
         easing: SCENE_TRANSITION_EASING
       });
-      const backSceneTransition = (_d = (_c = s.backSceneTransition) != null ? _c : options.backSceneTransition) != null ? _d : Transition.slide({
+      const backSceneTransition = s.backSceneTransition ?? options.backSceneTransition ?? Transition.slide({
         direction: TransitionDirection.Right,
         duration: SCENE_TRANSITION_DURATION,
         easing: SCENE_TRANSITION_EASING
       });
-      const backButtonText = (_f = (_e = s.backButtonText) != null ? _e : options.backButtonText) != null ? _f : "Back";
-      const nextButtonText = (_h = (_g = s.nextButtonText) != null ? _g : options.nextButtonText) != null ? _h : "Next";
-      const backButtonWidth = (_j = (_i = s.backButtonWidth) != null ? _i : options.backButtonWidth) != null ? _j : 125;
-      const nextButtonWidth = (_l = (_k = s.nextButtonWidth) != null ? _k : options.nextButtonWidth) != null ? _l : 125;
-      const backButtonHeight = (_n = (_m = s.backButtonHeight) != null ? _m : options.backButtonHeight) != null ? _n : 50;
-      const nextButtonHeight = (_p = (_o = s.nextButtonHeight) != null ? _o : options.nextButtonHeight) != null ? _p : 50;
-      const backgroundColor = (_q = s.backgroundColor) != null ? _q : options.backgroundColor;
-      const imageAboveText = (_r = s.imageAboveText) != null ? _r : true;
-      const imageMarginTop = (_s = s.imageMarginTop) != null ? _s : 0;
-      const imageMarginBottom = (_t = s.imageMarginBottom) != null ? _t : 0;
-      const textMarginStart = (_u = s.textMarginStart) != null ? _u : 48;
-      const textMarginEnd = (_v = s.textMarginEnd) != null ? _v : 48;
-      const textAlignmentMode = (_w = s.textAlignmentMode) != null ? _w : LabelHorizontalAlignmentMode.Left;
-      const textFontSize = (_x = s.textFontSize) != null ? _x : 16;
-      const titleFontSize = (_y = s.titleFontSize) != null ? _y : 16;
-      const titleMarginTop = (_z = s.titleMarginTop) != null ? _z : 48;
-      const backButtonBackgroundColor = (_B = (_A = s.backButtonBackgroundColor) != null ? _A : options.backButtonBackgroundColor) != null ? _B : WebColors.Black;
-      const backButtonFontColor = (_D = (_C = s.backButtonFontColor) != null ? _C : options.backButtonFontColor) != null ? _D : WebColors.White;
-      const nextButtonBackgroundColor = (_F = (_E = s.nextButtonBackgroundColor) != null ? _E : options.nextButtonBackgroundColor) != null ? _F : WebColors.Black;
-      const nextButtonFontColor = (_H = (_G = s.nextButtonFontColor) != null ? _G : options.nextButtonFontColor) != null ? _H : WebColors.White;
-      const sceneNamePrefix = (_I = options.sceneNamePrefix) != null ? _I : "instructions";
+      const backButtonText = s.backButtonText ?? options.backButtonText ?? "Back";
+      const nextButtonText = s.nextButtonText ?? options.nextButtonText ?? "Next";
+      const backButtonWidth = s.backButtonWidth ?? options.backButtonWidth ?? 125;
+      const nextButtonWidth = s.nextButtonWidth ?? options.nextButtonWidth ?? 125;
+      const backButtonHeight = s.backButtonHeight ?? options.backButtonHeight ?? 50;
+      const nextButtonHeight = s.nextButtonHeight ?? options.nextButtonHeight ?? 50;
+      const backgroundColor = s.backgroundColor ?? options.backgroundColor;
+      const imageAboveText = s.imageAboveText ?? true;
+      const imageMarginTop = s.imageMarginTop ?? 0;
+      const imageMarginBottom = s.imageMarginBottom ?? 0;
+      const textMarginStart = s.textMarginStart ?? 48;
+      const textMarginEnd = s.textMarginEnd ?? 48;
+      const textAlignmentMode = s.textAlignmentMode ?? LabelHorizontalAlignmentMode.Left;
+      const textFontSize = s.textFontSize ?? 16;
+      const titleFontSize = s.titleFontSize ?? 16;
+      const titleMarginTop = s.titleMarginTop ?? 48;
+      const backButtonBackgroundColor = s.backButtonBackgroundColor ?? options.backButtonBackgroundColor ?? WebColors.Black;
+      const backButtonFontColor = s.backButtonFontColor ?? options.backButtonFontColor ?? WebColors.White;
+      const nextButtonBackgroundColor = s.nextButtonBackgroundColor ?? options.nextButtonBackgroundColor ?? WebColors.Black;
+      const nextButtonFontColor = s.nextButtonFontColor ?? options.nextButtonFontColor ?? WebColors.White;
+      const sceneNamePrefix = options.sceneNamePrefix ?? "instructions";
       const scene = new Scene({
         name: sceneNamePrefix + "-" + (i + 1).toString().padStart(2, "0"),
         backgroundColor
@@ -1291,9 +1707,8 @@ class Instructions extends Story {
       } else {
         if (options.postInstructionsScene !== void 0) {
           nextButton.onTapDown(() => {
-            var _a2;
             scene.game.presentScene(
-              (_a2 = options.postInstructionsScene) != null ? _a2 : "",
+              options.postInstructionsScene ?? "",
               nextSceneTransition
             );
           });
@@ -1327,7 +1742,7 @@ class Instructions extends Story {
   }
 }
 
-console.log("\u26AA @m2c2kit/addons version 0.3.9 (03abb9e7)");
+console.log("\u26AA @m2c2kit/addons version 0.3.11 (60325bea)");
 
-export { Button, Dialog, DialogResult, Grid, Instructions, VirtualKeyboard };
+export { Button, Dialog, DialogResult, DrawPad, DrawPadEventType, DrawPadItemEventType, Grid, Instructions, VirtualKeyboard };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/addons",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Additions to m2c2kit core functionality, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -30,16 +30,16 @@
   },
   "homepage": "https://m2c2-project.github.io/m2c2kit",
   "dependencies": {
-    "@m2c2kit/core": "^0.3.6"
+    "@m2c2kit/core": "^0.3.14"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "5.0.2",
-    "rimraf": "5.0.1",
-    "rollup": "3.25.3",
-    "rollup-plugin-copy": "3.4.0",
-    "rollup-plugin-dts": "5.3.0",
-    "rollup-plugin-esbuild": "5.0.0",
-    "typescript": "5.1.6"
+    "@rollup/plugin-replace": "5.0.5",
+    "rimraf": "5.0.5",
+    "rollup": "4.6.1",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-dts": "6.1.0",
+    "rollup-plugin-esbuild": "6.1.0",
+    "typescript": "5.3.2"
   },
   "engines": {
     "node": ">=18"