@m2c2kit/addons 0.3.4 → 0.3.6

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Canvas } from 'canvaskit-wasm';
-import { CompositeOptions, Size, RgbaColor, Composite, Entity, GlobalVariables, TextOptions, IText, EntityEvent, Shape, LabelHorizontalAlignmentMode, Transition, StoryOptions, Story, Scene } from '@m2c2kit/core';
+import { CompositeOptions, Size, RgbaColor, Composite, Entity, GlobalVariables, TextOptions, IText, EntityEvent, ShapeOptions, Point, LabelHorizontalAlignmentMode, Transition, StoryOptions, Story, Scene } from '@m2c2kit/core';
 
 interface GridOptions extends CompositeOptions {
     /** Number of rows in the grid. Must be 1 or greater */
@@ -220,8 +220,8 @@ interface KeyConfiguration {
     blank?: boolean;
     /** True is the key is a shift key. */
     isShift?: boolean;
-    /** Icon to show on the key. */
-    keyIcon?: Shape;
+    /** ShapeOptions of the optional icon to show on the key. */
+    keyIconShapeOptions?: ShapeOptions;
 }
 type VirtualKeyboardRow = Array<KeyConfiguration | string | Array<string>>;
 interface VirtualKeyboardOptions extends CompositeOptions {
@@ -240,6 +240,8 @@ interface VirtualKeyboardOptions extends CompositeOptions {
     keysPerRow?: number;
     /** Size of font for keys. */
     fontSize?: number;
+    /** The fonts for the key labels, if not the default font. */
+    fontNames?: Array<string> | undefined;
     /** Comma-separated list of keys to hide. */
     hiddenKeys?: string;
     /** If true, only capital letters will be shown. */
@@ -262,6 +264,16 @@ interface VirtualKeyboardEvent extends EntityEvent {
     code: string;
     /** True if the Shift key is pressed. */
     shiftKey: boolean;
+    /** Metadata related to the key tap. */
+    keyTapMetadata: KeyTapMetadata;
+}
+interface KeyTapMetadata {
+    /** Size of the key. */
+    size: Size;
+    /** Point on the key where the tap event occurred. */
+    point: Point;
+    /** Buttons pressed when the key was tapped. */
+    buttons: number;
 }
 declare class VirtualKeyboard extends Composite {
     private keyboardHorizontalPaddingPercent;
@@ -271,6 +283,7 @@ declare class VirtualKeyboard extends Composite {
     private rowsConfiguration;
     private keysPerRow;
     private fontSize;
+    private fontNames;
     private hiddenKeys;
     private capitalLettersOnly;
     private keyColor;
@@ -416,4 +429,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, VirtualKeyboard, VirtualKeyboardEvent, VirtualKeyboardOptions, VirtualKeyboardRow };
+export { Button, ButtonOptions, Dialog, DialogEvent, DialogOptions, DialogResult, Grid, GridOptions, InstructionScene, Instructions, InstructionsOptions, KeyConfiguration, KeyTapMetadata, VirtualKeyboard, VirtualKeyboardEvent, VirtualKeyboardOptions, VirtualKeyboardRow };

package/dist/index.js

@@ -121,7 +121,10 @@ class Grid extends Composite {
         }
         const x = -this.size.width / 2 + this.cellWidth / 2 + gridChild.column * this.cellWidth;
         const y = -this.size.height / 2 + this.cellHeight / 2 + gridChild.row * this.cellHeight;
-        gridChild.entity.position = { x, y };
+        gridChild.entity.position = {
+          x: x + gridChild.entity.position.x,
+          y: y + gridChild.entity.position.y
+        };
         this.gridBackground.addChild(gridChild.entity);
       });
     }
@@ -606,10 +609,25 @@ class VirtualKeyboard extends Composite {
     this.keyHorizontalPaddingPercent = (_d = options.keyHorizontalPaddingPercent) != null ? _d : 0.1;
     this.keyVerticalPaddingPercent = (_e = options.keyVerticalPaddingPercent) != null ? _e : 0.1;
     if (options.rows !== void 0) {
-      this.rowsConfiguration = options.rows;
+      this.rowsConfiguration = options.rows.map((row) => {
+        const internalRow = row.map((key) => {
+          if (key instanceof Object && !Array.isArray(key)) {
+            const internalKeyConfig = key;
+            if (key.keyIconShapeOptions) {
+              internalKeyConfig.keyIcon = new Shape(key.keyIconShapeOptions);
+              internalKeyConfig.keyIconShapeOptions = void 0;
+            }
+            return internalKeyConfig;
+          } else {
+            return key;
+          }
+        });
+        return internalRow;
+      });
     }
     this.keysPerRow = (_f = options.keysPerRow) != null ? _f : NaN;
     this.fontSize = (_g = options.fontSize) != null ? _g : 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;
@@ -620,26 +638,6 @@ class VirtualKeyboard extends Composite {
   }
   initialize() {
     var _a, _b, _c, _d, _e, _f, _g;
-    const shiftArrowShape = new Shape({
-      path: {
-        // Public Domain from https://www.freesvg.org
-        svgString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
-        width: 24
-      },
-      lineWidth: 2,
-      strokeColor: WebColors.Black,
-      fillColor: WebColors.Transparent
-    });
-    const backspaceShape = new Shape({
-      path: {
-        // CC0 from https://www.svgrepo.com
-        svgString: "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,
-      strokeColor: WebColors.Black,
-      fillColor: WebColors.Red
-    });
     if (this.rowsConfiguration.length === 0) {
       const numKeys = [
         ["1", "!"],
@@ -676,12 +674,32 @@ class VirtualKeyboard extends Composite {
         "k",
         "l"
       ];
+      const shiftArrowShapeOptions = {
+        path: {
+          // Public Domain from https://www.freesvg.org
+          svgString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
+          width: 24
+        },
+        lineWidth: 2,
+        strokeColor: WebColors.Black,
+        fillColor: WebColors.Transparent
+      };
+      const backspaceShapeOptions = {
+        path: {
+          // CC0 from https://www.svgrepo.com
+          svgString: "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,
+        strokeColor: WebColors.Black,
+        fillColor: WebColors.Red
+      };
       const row3 = [
         {
           code: "Shift",
           isShift: true,
           widthRatio: 1.5,
-          keyIcon: shiftArrowShape
+          keyIcon: new Shape(shiftArrowShapeOptions)
         },
         "z",
         "x",
@@ -690,7 +708,11 @@ class VirtualKeyboard extends Composite {
         "b",
         "n",
         "m",
-        { code: "Backspace", widthRatio: 1.5, keyIcon: backspaceShape }
+        {
+          code: "Backspace",
+          widthRatio: 1.5,
+          keyIcon: new Shape(backspaceShapeOptions)
+        }
       ];
       const row4 = [
         { code: " ", labelText: "SPACE", widthRatio: 5 }
@@ -798,8 +820,7 @@ class VirtualKeyboard extends Composite {
           position: {
             x: extraPadding + keyboardOrigin.x + keyboardHorizontalPadding + keyBoxWidthsSoFar + ((_e = key.widthRatio) != null ? _e : 1) * keyBoxWidth / 2,
             y: keyboardOrigin.y + keyboardVerticalPadding + r * keyBoxHeight + keyBoxHeight / 2
-          },
-          isUserInteractionEnabled: true
+          }
         });
         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;
@@ -807,10 +828,11 @@ class VirtualKeyboard extends Composite {
           rect: { size: { width: keyWidth, height: keyHeight } },
           cornerRadius: 4,
           fillColor: this.keyColor,
-          lineWidth: 0
+          lineWidth: 0,
+          isUserInteractionEnabled: true
         });
         keyBox.addChild(keyShape);
-        keyBox.onTapUp(() => {
+        keyShape.onTapUp((tapEvent) => {
           var _a2, _b2;
           let keyAsString = "";
           if (!key.isShift) {
@@ -818,7 +840,9 @@ class VirtualKeyboard extends Composite {
               this.shiftActivated = false;
               if (this.shiftKeyShape) {
                 this.shiftKeyShape.fillColor = this.keyColor;
-                shiftArrowShape.fillColor = WebColors.Transparent;
+                if (key.keyIcon) {
+                  key.keyIcon.fillColor = WebColors.Transparent;
+                }
               }
               rows.flatMap((k2) => k2).forEach((k2) => {
                 var _a3, _b3;
@@ -853,19 +877,26 @@ class VirtualKeyboard extends Composite {
                 handled: false,
                 key: keyAsString,
                 code: key.code,
-                shiftKey: this.shiftActivated
+                shiftKey: this.shiftActivated,
+                keyTapMetadata: {
+                  size: keyShape.size,
+                  point: tapEvent.point,
+                  buttons: tapEvent.buttons
+                }
               };
               listener.callback(virtualKeyboardEvent);
             });
           }
         });
-        keyBox.onTapDown(() => {
+        keyShape.onTapDown((tapEvent) => {
           var _a2, _b2, _c2, _d2;
           if (key.isShift) {
             this.shiftActivated = !this.shiftActivated;
             if (this.shiftActivated) {
               keyShape.fillColor = this.specialKeyDownColor;
-              shiftArrowShape.fillColor = WebColors.Black;
+              if (key.keyIcon) {
+                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) {
@@ -874,7 +905,9 @@ class VirtualKeyboard extends Composite {
               });
             } else {
               keyShape.fillColor = this.keyColor;
-              shiftArrowShape.fillColor = WebColors.Transparent;
+              if (key.keyIcon) {
+                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) {
@@ -915,19 +948,25 @@ class VirtualKeyboard extends Composite {
                 handled: false,
                 key: keyAsString,
                 code: key.code,
-                shiftKey: this.shiftActivated
+                shiftKey: this.shiftActivated,
+                keyTapMetadata: {
+                  size: keyShape.size,
+                  point: tapEvent.point,
+                  buttons: tapEvent.buttons
+                }
               };
               listener.callback(virtualKeyboardEvent);
             });
           }
         });
-        keyBox.onTapLeave(() => {
+        keyShape.onTapLeave(() => {
           keyShape.fillColor = this.keyColor;
           letterCircle.hidden = true;
         });
         const keyLabel = new Label({
           text: key.labelText,
-          fontSize: this.fontSize
+          fontSize: this.fontSize,
+          fontNames: this.fontNames
         });
         keyBox.addChild(keyLabel);
         key.keyLabel = keyLabel;
@@ -948,7 +987,8 @@ class VirtualKeyboard extends Composite {
     keyboardRectangle.addChild(letterCircle);
     const letterCircleLabel = new Label({
       text: "",
-      fontSize: this.fontSize
+      fontSize: this.fontSize,
+      fontNames: this.fontNames
     });
     letterCircle.addChild(letterCircleLabel);
     this.needsInitialization = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/addons",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Additions to m2c2kit core functionalty, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,11 +24,11 @@
   },
   "devDependencies": {
     "@rollup/plugin-babel": "6.0.3",
-    "rimraf": "5.0.0",
-    "rollup": "3.22.0",
+    "rimraf": "5.0.1",
+    "rollup": "3.21.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-dts": "5.3.0",
     "rollup-plugin-esbuild": "5.0.0",
-    "typescript": "5.0.4"
+    "typescript": "5.1.3"
   }
 }