@m2c2kit/addons 0.3.9 → 0.3.10

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, ButtonOptions, Dialog, DialogEvent, DialogOptions, DialogResult, DrawPad, DrawPadEvent, DrawPadEventType, DrawPadItem, DrawPadItemEvent, DrawPadItemEventType, DrawPadOptions, DrawPadStroke, Grid, GridOptions, InstructionScene, Instructions, InstructionsOptions, KeyConfiguration, KeyTapMetadata, StrokeInteraction, VirtualKeyboard, VirtualKeyboardEvent, VirtualKeyboardOptions, VirtualKeyboardRow };

package/dist/index.js

@@ -1,26 +1,26 @@
-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 __defProp$4 = 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 __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(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]);
+      __defNormalProp$4(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]);
+        __defNormalProp$4(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);
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Grid extends Composite {
@@ -36,19 +36,19 @@ class Grid extends Composite {
    */
   constructor(options) {
     super(options);
-    __publicField$3(this, "compositeType", "grid");
+    __publicField$4(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);
+    __publicField$4(this, "rows", 0);
+    __publicField$4(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");
+    __publicField$4(this, "gridBackgroundColor", [0, 0, 233, 0.25]);
+    __publicField$4(this, "gridLineColor", WebColors.Red);
+    __publicField$4(this, "gridLineWidth", 1);
+    __publicField$4(this, "cellWidth");
+    __publicField$4(this, "cellHeight");
+    __publicField$4(this, "gridChildren", new Array());
+    __publicField$4(this, "_gridBackground");
     if (options.size) {
       this.size = options.size;
     } else {
@@ -262,27 +262,27 @@ class Grid extends Composite {
   }
 }
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$3 = 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 __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(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]);
+      __defNormalProp$3(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+        __defNormalProp$3(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);
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class Button extends Composite {
@@ -299,15 +299,15 @@ class Button extends Composite {
    */
   constructor(options) {
     super(options);
-    __publicField$2(this, "compositeType", "button");
+    __publicField$3(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");
+    __publicField$3(this, "_backgroundColor", WebColors.Black);
+    __publicField$3(this, "size", { width: 200, height: 50 });
+    __publicField$3(this, "cornerRadius", 9);
+    __publicField$3(this, "fontSize", 20);
+    __publicField$3(this, "text", "");
+    __publicField$3(this, "_fontColor", WebColors.White);
+    __publicField$3(this, "backgroundPaint");
     if (options.text) {
       this.text = options.text;
     }
@@ -411,10 +411,10 @@ 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);
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var DialogResult = /* @__PURE__ */ ((DialogResult2) => {
@@ -428,17 +428,17 @@ 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");
+    __publicField$2(this, "compositeType", "dialog");
+    __publicField$2(this, "_backgroundColor", WebColors.White);
+    __publicField$2(this, "cornerRadius", 9);
+    __publicField$2(this, "overlayAlpha", 0.5);
+    __publicField$2(this, "contentText", "");
+    __publicField$2(this, "positiveButtonText", "");
+    __publicField$2(this, "negativeButtonText", "");
+    __publicField$2(this, "zPosition", Number.MAX_VALUE);
+    __publicField$2(this, "hidden", true);
+    __publicField$2(this, "_fontColor", WebColors.White);
+    __publicField$2(this, "backgroundPaint");
     if (!options) {
       return;
     }
@@ -626,6 +626,521 @@ class Dialog 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;
+};
+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);
+    __publicField$1(this, "compositeType", "DrawPad");
+    __publicField$1(this, "resumeDrawingOnReturn", false);
+    __publicField$1(this, "continuousDrawingOnly", false);
+    __publicField$1(this, "continuousDrawingOnlyExceptionDistance");
+    __publicField$1(this, "_backgroundColor", [0, 0, 0, 0]);
+    __publicField$1(this, "_borderColor", WebColors.Black);
+    __publicField$1(this, "_borderWidth", 1);
+    __publicField$1(this, "_lineColor", WebColors.Red);
+    __publicField$1(this, "_lineWidth", 1);
+    /** The rectangular "pad" on which to draw */
+    __publicField$1(this, "drawArea");
+    /** The lines that are drawn */
+    __publicField$1(this, "drawShape");
+    __publicField$1(this, "isDrawingPointerDown", false);
+    __publicField$1(this, "pointerIsDownAndPointerLeftDrawAreaWhenDown", false);
+    __publicField$1(this, "currentStrokesNotAllowed", false);
+    /** Array of strokes created on the DrawPad, with position and timestamps
+     * of all interactions with each DrawPadStroke.
+     */
+    __publicField$1(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();
+      mutablePath.size = this.size;
+      this.drawShape = new Shape({
+        path: mutablePath
+      });
+      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.");
+  }
+}
+
 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) => {
@@ -1327,7 +1842,7 @@ class Instructions extends Story {
   }
 }
 
-console.log("\u26AA @m2c2kit/addons version 0.3.9 (03abb9e7)");
+console.log("\u26AA @m2c2kit/addons version 0.3.10 (291d0cee)");
 
-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.10",
   "description": "Additions to m2c2kit core functionality, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",