@m2c2kit/addons 0.3.11 → 0.3.13

package/dist/index.d.ts

@@ -111,7 +111,7 @@ declare class Button extends Composite implements IText {
     };
     cornerRadius: number;
     fontSize: number;
-    text: string;
+    private _text;
     private _fontColor;
     private backgroundPaint?;
     /**
@@ -126,6 +126,8 @@ declare class Button extends Composite implements IText {
     constructor(options: ButtonOptions);
     initialize(): void;
     dispose(): void;
+    get text(): string;
+    set text(text: string);
     get backgroundColor(): RgbaColor;
     set backgroundColor(backgroundColor: RgbaColor);
     get fontColor(): RgbaColor;
@@ -253,6 +255,8 @@ interface StrokeInteraction {
     position: Point;
     /** Device ISO8601 Timestamp of the interaction. */
     iso8601Timestamp: string;
+    /** Was the interaction's position interpolated? (clipped to DrawPad boundary) because the user drew out of bounds? @remarks Only StrokeMove and StrokeEnd can be interpolated. A StrokeStart position can never begin out of bounds. */
+    interpolated: boolean;
 }
 type DrawPadStroke = Array<StrokeInteraction>;
 interface DrawPadItem {
@@ -310,6 +314,7 @@ declare class DrawPad extends Composite {
     private initializeDrawArea;
     private dist;
     private handleTapDown;
+    private addInterpolatedStrokeMove;
     private handleTapLeave;
     private handleTapUpAny;
     private handlePointerMove;
@@ -365,6 +370,24 @@ declare class DrawPad extends Composite {
      * PNG format.
      */
     takeScreenshot(): string;
+    /**
+     * Determines whether a point is within the DrawPad.
+     *
+     * @param point - The point to check
+     * @returns True - if the point is within the DrawPad, false otherwise
+     */
+    private isPointWithinDrawPad;
+    /**
+     * Interpolates a point to the border of the DrawPad based on a line that
+     * crosses the DrawPad border. The line is formed by the current "out of
+     * bounds" point the and previous "within bounds" point.
+     *
+     * @param currentPoint - The current point
+     * @param previousPoint - The previous point
+     * @param drawPadSize - The size of the DrawPad
+     * @returns A new point on the border of the DrawPad
+     */
+    private interpolateToDrawPadBorder;
     private arrayBufferToBase64String;
     get backgroundColor(): RgbaColor;
     set backgroundColor(backgroundColor: RgbaColor);

package/dist/index.js

@@ -258,7 +258,7 @@ class Button extends Composite {
     this.size = { width: 200, height: 50 };
     this.cornerRadius = 9;
     this.fontSize = 20;
-    this.text = "";
+    this._text = "";
     this._fontColor = WebColors.White;
     if (options.text) {
       this.text = options.text;
@@ -266,10 +266,10 @@ class Button extends Composite {
     if (options.size) {
       this.size = options.size;
     }
-    if (options.cornerRadius) {
+    if (options.cornerRadius !== void 0) {
       this.cornerRadius = options.cornerRadius;
     }
-    if (options.fontSize) {
+    if (options.fontSize !== void 0) {
       this.fontSize = options.fontSize;
     }
     if (options.fontColor) {
@@ -308,6 +308,13 @@ class Button extends Composite {
   dispose() {
     CanvasKitHelpers.Dispose([this.backgroundPaint]);
   }
+  get text() {
+    return this._text;
+  }
+  set text(text) {
+    this._text = text;
+    this.needsInitialization = true;
+  }
   get backgroundColor() {
     return this._backgroundColor;
   }
@@ -674,8 +681,8 @@ class DrawPad extends Composite {
       this.drawArea.onTapUpAny(() => {
         this.handleTapUpAny();
       });
-      this.drawArea.onTapLeave(() => {
-        this.handleTapLeave();
+      this.drawArea.onTapLeave((e) => {
+        this.handleTapLeave(e);
       });
     }
     this.drawArea.fillColor = this.backgroundColor;
@@ -687,11 +694,10 @@ class DrawPad extends Composite {
   }
   handleTapDown(e) {
     if (this.isUserInteractionEnabled) {
-      const drawShape = this.drawShape;
-      if (!drawShape) {
-        throw new Error("no draw shape");
+      if (!this.drawShape?.path) {
+        throw new Error("DrawPad.handleTapDown(): no drawShape.path");
       }
-      const path = drawShape.path;
+      const path = this.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;
@@ -700,6 +706,7 @@ class DrawPad extends Composite {
           return;
         }
       }
+      this.currentStrokesNotAllowed = false;
       this.isDrawingPointerDown = true;
       path.move(e.point);
       const drawPadEvent = {
@@ -712,13 +719,43 @@ class DrawPad extends Composite {
         {
           type: DrawPadEventType.StrokeStart,
           position: e.point,
-          iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          interpolated: false
         }
       ]);
       this.raiseDrawPadEvent(drawPadEvent);
     }
   }
-  handleTapLeave() {
+  addInterpolatedStrokeMove(point) {
+    const strokeCount = this.strokes.length;
+    const strokeInteractionCount = this.strokes[strokeCount - 1].length;
+    const previousPoint = this.strokes[this.strokes.length - 1][strokeInteractionCount - 1].position;
+    const interpolatedPoint = this.interpolateToDrawPadBorder(
+      point,
+      previousPoint,
+      this.size
+    );
+    if (!this.drawShape?.path) {
+      throw new Error("DrawPad.addInterpolatedStrokeMove(): no drawShape.path");
+    }
+    const path = this.drawShape.path;
+    path.addLine(interpolatedPoint);
+    const drawPadEvent = {
+      type: DrawPadEventType.StrokeMove,
+      target: this,
+      handled: false,
+      position: interpolatedPoint
+    };
+    this.strokes[strokeCount - 1].push({
+      type: DrawPadEventType.StrokeMove,
+      position: interpolatedPoint,
+      iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      interpolated: true
+    });
+    this.raiseDrawPadEvent(drawPadEvent);
+    return interpolatedPoint;
+  }
+  handleTapLeave(e) {
     if (this.currentStrokesNotAllowed) {
       this.isDrawingPointerDown = false;
       return;
@@ -727,6 +764,12 @@ class DrawPad extends Composite {
       this.isDrawingPointerDown = false;
       const strokeCount = this.strokes.length;
       const strokeInteractionCount = this.strokes[strokeCount - 1].length;
+      let pointWasInterpolated = false;
+      let point = e.point;
+      if (!this.isPointWithinDrawPad(e.point, this.size)) {
+        point = this.addInterpolatedStrokeMove(e.point);
+        pointWasInterpolated = true;
+      }
       const drawPadEvent = {
         type: DrawPadEventType.StrokeEnd,
         position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
@@ -735,10 +778,12 @@ class DrawPad extends Composite {
       };
       this.strokes[strokeCount - 1].push({
         type: DrawPadEventType.StrokeEnd,
-        position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
-        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        position: pointWasInterpolated ? point : this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        interpolated: pointWasInterpolated
       });
       this.raiseDrawPadEvent(drawPadEvent);
+      this.currentStrokesNotAllowed = true;
     } else {
       this.pointerIsDownAndPointerLeftDrawAreaWhenDown = true;
     }
@@ -762,18 +807,18 @@ class DrawPad extends Composite {
       this.strokes[strokeCount - 1].push({
         type: DrawPadEventType.StrokeEnd,
         position: this.strokes[strokeCount - 1][strokeInteractionCount - 1].position,
-        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        interpolated: false
       });
       this.raiseDrawPadEvent(drawPadEvent);
     }
   }
   handlePointerMove(e) {
     if (this.isUserInteractionEnabled && this.isDrawingPointerDown) {
-      const drawShape = this.drawShape;
-      if (!drawShape) {
-        throw new Error("no draw shape");
+      if (!this.drawShape?.path) {
+        throw new Error("DrawPad.handlePointerMove(): no drawShape.path");
       }
-      const path = drawShape.path;
+      const path = this.drawShape.path;
       if (this.isDrawingPointerDown && !this.pointerIsDownAndPointerLeftDrawAreaWhenDown) {
         path.addLine(e.point);
       }
@@ -791,7 +836,8 @@ class DrawPad extends Composite {
       this.strokes[strokeCount - 1].push({
         type: DrawPadEventType.StrokeMove,
         position: e.point,
-        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        iso8601Timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        interpolated: false
       });
       this.raiseDrawPadEvent(drawPadEvent);
     }
@@ -820,11 +866,10 @@ class DrawPad extends Composite {
    * Removes all strokes from the DrawPad.
    */
   clear() {
-    const drawShape = this.drawShape;
-    if (!drawShape) {
-      throw new Error("no draw shape");
+    if (!this.drawShape?.path) {
+      throw new Error("DrawPad.clear(): no drawShape.path");
     }
-    const path = drawShape.path;
+    const path = this.drawShape.path;
     path.clear();
     this.strokes = new Array();
   }
@@ -994,13 +1039,9 @@ class DrawPad extends Composite {
    * 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");
+      throw new Error("DrawPad.takeScreenshot(): no drawArea");
     }
     const sx = (drawArea.absolutePosition.x - drawArea.size.width / 2) * Globals.canvasScale;
     const sy = (drawArea.absolutePosition.y - drawArea.size.height / 2) * Globals.canvasScale;
@@ -1021,15 +1062,85 @@ class DrawPad extends Composite {
       pixelData.length / sh
     );
     if (!croppedImage) {
-      throw new Error("no cropped image");
+      throw new Error("DrawPad.takeScreenshot(): no croppedImage");
     }
     const bytes = croppedImage.encodeToBytes();
     if (!bytes) {
-      throw new Error("no bytes");
+      throw new Error(
+        "DrawPad.takeScreenshot(): croppedImage.encodeToBytes() failed"
+      );
     }
     croppedImage.delete();
     return this.arrayBufferToBase64String(bytes);
   }
+  /**
+   * Determines whether a point is within the DrawPad.
+   *
+   * @param point - The point to check
+   * @returns True - if the point is within the DrawPad, false otherwise
+   */
+  isPointWithinDrawPad(point, drawPadSize) {
+    return point.x >= 0 && point.x <= drawPadSize.width && point.y >= 0 && point.y <= drawPadSize.height;
+  }
+  /**
+   * Interpolates a point to the border of the DrawPad based on a line that
+   * crosses the DrawPad border. The line is formed by the current "out of
+   * bounds" point the and previous "within bounds" point.
+   *
+   * @param currentPoint - The current point
+   * @param previousPoint - The previous point
+   * @param drawPadSize - The size of the DrawPad
+   * @returns A new point on the border of the DrawPad
+   */
+  interpolateToDrawPadBorder(currentPoint, previousPoint, drawPadSize) {
+    const slope = (currentPoint.y - previousPoint.y) / (currentPoint.x - previousPoint.x);
+    const intercept = currentPoint.y - slope * currentPoint.x;
+    const newPoint = { x: 0, y: 0 };
+    if (!Number.isFinite(slope)) {
+      newPoint.x = currentPoint.x;
+      if (currentPoint.y - previousPoint.y > 0) {
+        newPoint.y = drawPadSize.height;
+        return newPoint;
+      }
+      if (currentPoint.y - previousPoint.y < 0) {
+        newPoint.y = 0;
+        return newPoint;
+      }
+    }
+    const yLeft = slope * 0 + intercept;
+    const yRight = slope * drawPadSize.width + intercept;
+    if (yLeft >= 0 && yLeft <= drawPadSize.height) {
+      if (currentPoint.x - previousPoint.x < 0) {
+        newPoint.x = 0;
+        newPoint.y = yLeft;
+        return newPoint;
+      }
+    }
+    if (yRight >= 0 && yRight <= drawPadSize.height) {
+      if (currentPoint.x - previousPoint.x > 0) {
+        newPoint.x = drawPadSize.width;
+        newPoint.y = yRight;
+        return newPoint;
+      }
+    }
+    const xTop = (0 - intercept) / slope;
+    const xBottom = (drawPadSize.height - intercept) / slope;
+    if (xTop >= 0 && xTop <= drawPadSize.width) {
+      if (currentPoint.y - previousPoint.y < 0) {
+        newPoint.x = xTop;
+        newPoint.y = 0;
+        return newPoint;
+      }
+    }
+    if (xBottom >= 0 && xBottom <= drawPadSize.width) {
+      if (currentPoint.y - previousPoint.y > 0) {
+        newPoint.x = xBottom;
+        newPoint.y = drawPadSize.height;
+        return newPoint;
+      }
+    }
+    return currentPoint;
+  }
   arrayBufferToBase64String(buffer) {
     let binary = "";
     const bytes = new Uint8Array(buffer);
@@ -1074,7 +1185,7 @@ class DrawPad extends Composite {
     this.needsInitialization = true;
   }
   duplicate(newName) {
-    throw new Error("Method not implemented.");
+    throw new Error("DrawPad.duplicate(): Method not implemented.");
   }
 }
 
@@ -1742,7 +1853,7 @@ class Instructions extends Story {
   }
 }
 
-console.log("\u26AA @m2c2kit/addons version 0.3.11 (60325bea)");
+console.log("\u26AA @m2c2kit/addons version 0.3.13 (d8a00e86)");
 
 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.11",
+  "version": "0.3.13",
   "description": "Additions to m2c2kit core functionality, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,11 +35,11 @@
   "devDependencies": {
     "@rollup/plugin-replace": "5.0.5",
     "rimraf": "5.0.5",
-    "rollup": "4.6.1",
+    "rollup": "4.9.2",
     "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-esbuild": "6.1.0",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "engines": {
     "node": ">=18"