@m2c2kit/addons 0.3.3 → 0.3.5

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 */
@@ -183,7 +183,7 @@ declare class Dialog extends Composite {
     private backgroundPaint?;
     constructor(options?: DialogOptions);
     show(): void;
-    onDialolgResult(callback: (dailogResultEvent: DialogEvent) => void, replaceExistingCallback?: boolean): void;
+    onDialogResult(callback: (dialogResultEvent: DialogEvent) => void, replaceExistingCallback?: boolean): void;
     initialize(): void;
     get backgroundColor(): RgbaColor;
     set backgroundColor(backgroundColor: RgbaColor);
@@ -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,10 +240,12 @@ 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. */
-    captialLettersOnly?: boolean;
+    capitalLettersOnly?: boolean;
     /** Color of keys. */
     keyColor?: RgbaColor;
     /** Color of keys when pressed. */
@@ -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,8 +283,9 @@ declare class VirtualKeyboard extends Composite {
     private rowsConfiguration;
     private keysPerRow;
     private fontSize;
+    private fontNames;
     private hiddenKeys;
-    private captialLettersOnly;
+    private capitalLettersOnly;
     private keyColor;
     private keyDownColor;
     private specialKeyDownColor;
@@ -379,31 +392,31 @@ interface InstructionsOptions extends StoryOptions {
     postInstructionsScene?: string;
     /** Array of instruction scenes that form the instructions */
     instructionScenes: Array<InstructionScene>;
-    /** Background color for instruction scenes. Can be overriden within a single instruction scene */
+    /** Background color for instruction scenes. Can be overridden within a single instruction scene */
     backgroundColor?: RgbaColor;
-    /** Scene transition when advancing to the next instruction scene. Default is push transition, to the left, 500 milliseconds duration. Can be overriden within a single instruction scene */
+    /** Scene transition when advancing to the next instruction scene. Default is push transition, to the left, 500 milliseconds duration. Can be overridden within a single instruction scene */
     nextSceneTransition?: Transition;
-    /** Scene transition when returning to the previous instruction scene. Default is push transition, to the right, 500 milliseconds duration. Can be overriden within a single instruction scene */
+    /** Scene transition when returning to the previous instruction scene. Default is push transition, to the right, 500 milliseconds duration. Can be overridden within a single instruction scene */
     backSceneTransition?: Transition;
-    /** Button text for the back button. Default is "Back". Can be overriden within a single instruction scene */
+    /** Button text for the back button. Default is "Back". Can be overridden within a single instruction scene */
     backButtonText?: string;
-    /** Button text for the next button. Default is "Next". Can be overriden within a single instruction scene */
+    /** Button text for the next button. Default is "Next". Can be overridden within a single instruction scene */
     nextButtonText?: string;
-    /** Width of back button. Default is 125. Can be overriden within a single instruction scene */
+    /** Width of back button. Default is 125. Can be overridden within a single instruction scene */
     backButtonWidth?: number;
-    /** Width of next button. Default is 125. Can be overriden within a single instruction scene */
+    /** Width of next button. Default is 125. Can be overridden within a single instruction scene */
     nextButtonWidth?: number;
-    /** Height of back button. Default is 50. Can be overriden within a single instruction scene */
+    /** Height of back button. Default is 50. Can be overridden within a single instruction scene */
     backButtonHeight?: number;
-    /** Height of next button. Default is 50. Can be overriden within a single instruction scene */
+    /** Height of next button. Default is 50. Can be overridden within a single instruction scene */
     nextButtonHeight?: number;
-    /** Color of back button. Default is WebColors.Black. Can be overriden within a single instruction scene */
+    /** Color of back button. Default is WebColors.Black. Can be overridden within a single instruction scene */
     backButtonBackgroundColor?: RgbaColor;
-    /** Color of back button text. Default is WebColors.White. Can be overriden within a single instruction scene */
+    /** Color of back button text. Default is WebColors.White. Can be overridden within a single instruction scene */
     backButtonFontColor?: RgbaColor;
-    /** Color of next button. Default is WebColors.Black. Can be overriden within a single instruction scene */
+    /** Color of next button. Default is WebColors.Black. Can be overridden within a single instruction scene */
     nextButtonBackgroundColor?: RgbaColor;
-    /** Color of next button text. Default is WebColors.White. Can be overriden within a single instruction scene */
+    /** Color of next button text. Default is WebColors.White. Can be overridden within a single instruction scene */
     nextButtonFontColor?: RgbaColor;
 }
 declare class Instructions extends Story {
@@ -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);
       });
     }
@@ -432,7 +435,7 @@ class Dialog extends Composite {
   show() {
     this.hidden = false;
   }
-  onDialolgResult(callback, replaceExistingCallback = true) {
+  onDialogResult(callback, replaceExistingCallback = true) {
     const eventListener = {
       type: EventType.CompositeCustom,
       entityUuid: this.uuid,
@@ -606,12 +609,27 @@ 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.captialLettersOnly = (_i = options.captialLettersOnly) != null ? _i : false;
+    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;
@@ -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 }
@@ -726,7 +748,7 @@ class VirtualKeyboard extends Composite {
         let isShift = false;
         if (typeof key === "string") {
           code = key;
-          if (this.captialLettersOnly) {
+          if (this.capitalLettersOnly) {
             label = code.toUpperCase();
           } else {
             label = code;
@@ -761,8 +783,8 @@ class VirtualKeyboard extends Composite {
     };
     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 keyboxHeight = (this.size.height - 2 * keyboardVerticalPadding) / rows.length;
-    const keyboxWidth = (this.size.width - 2 * keyboardHorizontalPadding) / this.keysPerRow;
+    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(
@@ -774,7 +796,7 @@ class VirtualKeyboard extends Composite {
       );
       let extraPadding = 0;
       if (rowSumKeyWidths < this.keysPerRow) {
-        extraPadding = (this.size.width - 2 * keyboardHorizontalPadding - keyboxWidth * rowSumKeyWidths) / 2;
+        extraPadding = (this.size.width - 2 * keyboardHorizontalPadding - keyBoxWidth * rowSumKeyWidths) / 2;
       }
       for (let k = 0; k < row.length; k++) {
         const key = row[k];
@@ -784,33 +806,33 @@ class VirtualKeyboard extends Composite {
         const keyBoxWidthsSoFar = row.slice(0, k).reduce((sum, key2) => {
           var _a2;
           return sum + ((_a2 = key2.widthRatio) != null ? _a2 : 1);
-        }, 0) * keyboxWidth;
+        }, 0) * keyBoxWidth;
         const keyBox = new Shape({
           rect: {
             size: {
-              width: keyboxWidth * ((_d = key.widthRatio) != null ? _d : 1),
-              height: keyboxHeight
+              width: keyBoxWidth * ((_d = key.widthRatio) != null ? _d : 1),
+              height: keyBoxHeight
             }
           },
           fillColor: WebColors.Transparent,
           strokeColor: WebColors.Transparent,
           lineWidth: 1,
           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
+            x: extraPadding + keyboardOrigin.x + keyboardHorizontalPadding + keyBoxWidthsSoFar + ((_e = key.widthRatio) != null ? _e : 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 * ((_f = key.widthRatio) != null ? _f : 1) - 2 * this.keyHorizontalPaddingPercent * keyBoxWidth;
+        const keyHeight = keyBoxHeight - ((_g = key.heightRatio) != null ? _g : 1) - 2 * this.keyVerticalPaddingPercent * keyBoxHeight;
         const keyShape = new Shape({
           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.3",
+  "version": "0.3.5",
   "description": "Additions to m2c2kit core functionalty, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -24,9 +24,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-babel": "6.0.3",
-    "esbuild": "0.17.17",
-    "rimraf": "5.0.0",
-    "rollup": "3.20.6",
+    "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",