@m2c2kit/core 0.3.14 → 0.3.16

package/dist/index.d.ts

@@ -726,12 +726,21 @@ interface CallbackOptions {
 }
 
 /**
- * Notifies when events in the Frame cycle occur on a Game.
+ * A Plugin is code that can be registered to run at certain points in the game loop.
  */
-interface FrameCycleEvent extends EventBase {
-    target: Game;
-    /** difference in milliseconds since the last Frame lifecycle began */
-    deltaTime: number;
+interface Plugin {
+    /** Short identifier of the plugin. */
+    id: string;
+    /** What kind of m2c2kit object does the plugin work with? */
+    type: "Game" | "Session" | "Survey";
+    /** Initialization code run when the plugin is registered with the game. */
+    initialize?: (game: Game) => Promise<void>;
+    /** Is the plugin disabled and not to be run? Default is false. @remarks Disabled plugins will still be initialized. */
+    disabled?: boolean;
+    /** Plugin code run before the frame update, but before the frame draw. */
+    beforeUpdate?: (game: Game, deltaTime: number) => void;
+    /** Plugin code run after the frame update, but before the frame draw. */
+    afterUpdate?: (game: Game, deltaTime: number) => void;
 }
 
 interface TrialData {
@@ -757,6 +766,7 @@ declare class Game implements Activity {
     private warmupFunctionQueue;
     private loaderElementsRemoved;
     private _dataStores?;
+    private plugins;
     additionalParameters?: unknown;
     staticTrialSchema: {
         [key: string]: JsonSchemaDataTypeScriptTypes;
@@ -983,7 +993,7 @@ declare class Game implements Activity {
      * is not found, then return fallback value
      *
      * @param parameterName - the name of the game parameter whose value is requested
-     * @param fallback - the value to return if parameterName is not found
+     * @param fallbackValue - the value to return if parameterName is not found
      * @returns
      */
     getParameterOrFallback<T, U>(parameterName: string, fallbackValue: U): T | U;
@@ -1171,12 +1181,14 @@ declare class Game implements Activity {
      */
     private createOutgoingScene;
     /**
-     * Executes a callback when the frame has finished simulating physics.
+     * Registers a plugin with the game.
      *
-     * @param callback - function to execute.
-     * @param options - options for the callback.
+     * @remarks Upon registration, the plugin's optional asynchronous
+     * `initialize()` method will be called.
+     *
+     * @param plugin - Plugin to register
      */
-    onFrameDidSimulatePhysics(callback: (frameCycleEvent: FrameCycleEvent) => void, options?: CallbackOptions): void;
+    registerPlugin(plugin: Plugin): Promise<void>;
     private update;
     private draw;
     private calculateFps;
@@ -1224,17 +1236,6 @@ declare class Game implements Activity {
     private htmlCanvasPointerDownHandler;
     private htmlCanvasPointerUpHandler;
     private htmlCanvasPointerMoveHandler;
-    /**
-     * Adjusts dragging behavior when the pointer leaves the canvas
-     *
-     * @remarks This is necessary because the pointerup event is not fired when
-     * the pointer leaves the canvas. On desktop, this means that the user might
-     * lift the pointer outside the canvas, but the entity will still be dragged
-     * when the pointer is moved back into the canvas.
-     *
-     * @param domPointerEvent
-     * @returns
-     */
     private htmlCanvasPointerLeaveHandler;
     /**
      * Determines if/how m2c2kit entities respond to the DOM PointerDown event
@@ -1246,6 +1247,7 @@ declare class Game implements Activity {
     private processDomPointerDown;
     private processDomPointerUp;
     private processDomPointerMove;
+    private processDomPointerLeave;
     private raiseM2PointerDownEvent;
     private raiseTapDownEvent;
     private raiseTapLeaveEvent;
@@ -1688,7 +1690,7 @@ interface EventBase {
     /** Type of event. */
     type: EventType | string;
     /** The object on which the event occurred. */
-    target: Entity | Session | Activity;
+    target: Entity | Session | Activity | Plugin;
     /** Has the event been taken care of by the listener and not be dispatched to other targets? */
     handled?: boolean;
 }
@@ -1794,10 +1796,10 @@ declare abstract class Entity implements EntityOptions {
     isShape: boolean;
     isText: boolean;
     name: string;
-    position: Point;
-    scale: number;
+    _position: Point;
+    _scale: number;
     alpha: number;
-    zRotation: number;
+    _zRotation: number;
     isUserInteractionEnabled: boolean;
     draggable: boolean;
     hidden: boolean;
@@ -2095,6 +2097,12 @@ declare abstract class Entity implements EntityOptions {
      */
     get canvasKit(): CanvasKit;
     get parentSceneAsEntity(): Entity;
+    get position(): Point;
+    set position(position: Point);
+    get zRotation(): number;
+    set zRotation(zRotation: number);
+    get scale(): number;
+    set scale(scale: number);
     /**
      * For a given directed acyclic graph, topological ordering of the vertices will be identified using BFS
      * @param adjList Adjacency List that represent a graph with vertices and edges
@@ -3263,4 +3271,4 @@ declare class WebGlInfo {
     static dispose(): void;
 }
 
-export { Action, type Activity, type ActivityKeyValueData, type ActivityLifecycleEvent, type ActivityResultsEvent, ActivityType, type BrowserImage, type CallbackOptions, CanvasKitHelpers, ColorfulMutablePath, Composite, type CompositeOptions, Constants, ConstraintType, type Constraints, CustomAction, type CustomActionOptions, type DefaultParameter, Dimensions, type DrawableOptions, type EasingFunction, Easings, Entity, type EntityEvent, type EntityEventListener, type EntityOptions, EntityType, Equals, type EventBase, type EventListenerBase, EventType, FadeAlphaAction, type FadeAlphaActionOptions, type FontData, FontManager, Game, type GameData, type GameOptions, type GameParameters, GlobalVariables, type GoToActivityOptions, GroupAction, I18n, type IDataStore, type IDrawable, type IText, ImageManager, Label, LabelHorizontalAlignmentMode, type LabelOptions, type Layout, LayoutConstraint, LoadedImage, type M2ColorfulPath, type M2DragEvent, type M2Path, type M2PointerEvent, MoveAction, type MoveActionOptions, MutablePath, NoneTransition, type Point, RandomDraws, type RectOptions, type RgbaColor, RotateAction, ScaleAction, type ScaleActionOptions, Scene, type SceneOptions, SceneTransition, SequenceAction, Session, type SessionDictionaryValues, type SessionLifecycleEvent, type SessionOptions, Shape, type ShapeOptions, ShapeType, type Size, SlideTransition, type SlideTransitionOptions, Sprite, type SpriteOptions, Story, type StoryOptions, type TapEvent, TextLine, type TextLineOptions, type TextOptions, Timer, Transition, TransitionDirection, TransitionType, type Translations, type TrialData, type TrialSchema, Uuid, WaitAction, type WaitActionOptions, WebColors, WebGlInfo, handleInterfaceOptions };
+export { Action, type Activity, type ActivityKeyValueData, type ActivityLifecycleEvent, type ActivityResultsEvent, ActivityType, type BrowserImage, type CallbackOptions, CanvasKitHelpers, ColorfulMutablePath, Composite, type CompositeOptions, Constants, ConstraintType, type Constraints, CustomAction, type CustomActionOptions, type DefaultParameter, Dimensions, type DrawableOptions, type EasingFunction, Easings, Entity, type EntityEvent, type EntityEventListener, type EntityOptions, EntityType, Equals, type EventBase, type EventListenerBase, EventType, FadeAlphaAction, type FadeAlphaActionOptions, type FontData, FontManager, Game, type GameData, type GameOptions, type GameParameters, GlobalVariables, type GoToActivityOptions, GroupAction, I18n, type IDataStore, type IDrawable, type IText, ImageManager, Label, LabelHorizontalAlignmentMode, type LabelOptions, type Layout, LayoutConstraint, LoadedImage, type M2ColorfulPath, type M2DragEvent, type M2Path, type M2PointerEvent, MoveAction, type MoveActionOptions, MutablePath, NoneTransition, type Plugin, type Point, RandomDraws, type RectOptions, type RgbaColor, RotateAction, ScaleAction, type ScaleActionOptions, Scene, type SceneOptions, SceneTransition, SequenceAction, Session, type SessionDictionaryValues, type SessionLifecycleEvent, type SessionOptions, Shape, type ShapeOptions, ShapeType, type Size, SlideTransition, type SlideTransitionOptions, Sprite, type SpriteOptions, Story, type StoryOptions, type TapEvent, TextLine, type TextLineOptions, type TextOptions, Timer, Transition, TransitionDirection, TransitionType, type Translations, type TrialData, type TrialSchema, Uuid, WaitAction, type WaitActionOptions, WebColors, WebGlInfo, handleInterfaceOptions };

package/dist/index.js

@@ -175,7 +175,7 @@ class M2c2KitHelpers {
     entities.push(drawableEntity);
     const entityPointsArray = entities.map((entity) => {
       const boundingBox = M2c2KitHelpers.calculateEntityAbsoluteBoundingBox(entity);
-      return boundingBoxToPoints(boundingBox);
+      return M2c2KitHelpers.boundingBoxToPoints(boundingBox);
     });
     for (let i = 0; i < entityPointsArray.length; i++) {
       if (!entityNeedsRotation(entities[i])) {
@@ -183,7 +183,7 @@ class M2c2KitHelpers {
       }
       const entityPoints = entityPointsArray[i];
       const radians = entities[i].zRotation;
-      const center = findCentroid(entityPoints);
+      const center = M2c2KitHelpers.findCentroid(entityPoints);
       for (let j = i; j < entities.length; j++) {
         entityPointsArray[j] = rotateRectangle(
           entityPointsArray[j],
@@ -206,7 +206,7 @@ class M2c2KitHelpers {
    * @param drawableEntity - Entity to rotate the canvas for
    */
   static rotateCanvasForDrawableEntity(canvas, drawableEntity) {
-    const rotationTransforms = calculateRotationTransforms(drawableEntity);
+    const rotationTransforms = M2c2KitHelpers.calculateRotationTransforms(drawableEntity);
     if (rotationTransforms.length === 0) {
       return;
     }
@@ -269,24 +269,167 @@ class M2c2KitHelpers {
     }
     return normalized;
   }
+  /**
+   * Checks if two points are on the same side of a line.
+   *
+   * @remarks The line is defined by two points, a and b. The function uses
+   * the cross product to determine the relative position of the points.
+   *
+   * @param p1 - point to check
+   * @param p2 - point to check
+   * @param a - point that defines one end of the line
+   * @param b - point that defines the other end of the line
+   * @returns true if p1 and p2 are on the same side of the line, or false
+   * otherwise
+   */
+  static arePointsOnSameSideOfLine(p1, p2, a, b) {
+    const cp1 = (b.x - a.x) * (p1.y - a.y) - (b.y - a.y) * (p1.x - a.x);
+    const cp2 = (b.x - a.x) * (p2.y - a.y) - (b.y - a.y) * (p2.x - a.x);
+    return cp1 * cp2 >= 0;
+  }
   /**
    * Checks if a point is inside a rectangle.
    *
+   * @remarks The rectangle may have been rotated (sides might not be parallel
+   * to the axes).
+   *
    * @param point - The Point to check
    * @param rect - An array of four Points representing the vertices of the
    * rectangle in clockwise order
    * @returns true if the Point is inside the rectangle
    */
   static isPointInsideRectangle(point, rect) {
-    for (let i = 0; i < 4; i++) {
-      const p1 = rect[i];
-      const p2 = rect[(i + 1) % 4];
-      const cross = (p2.x - p1.x) * (point.y - p1.y) - (p2.y - p1.y) * (point.x - p1.x);
-      if (cross > 0) {
-        return false;
-      }
+    if (rect.length !== 4) {
+      throw new Error("Invalid input: expected an array of four points");
+    }
+    return M2c2KitHelpers.arePointsOnSameSideOfLine(
+      point,
+      rect[2],
+      rect[0],
+      rect[1]
+    ) && M2c2KitHelpers.arePointsOnSameSideOfLine(
+      point,
+      rect[3],
+      rect[1],
+      rect[2]
+    ) && M2c2KitHelpers.arePointsOnSameSideOfLine(
+      point,
+      rect[0],
+      rect[2],
+      rect[3]
+    ) && M2c2KitHelpers.arePointsOnSameSideOfLine(point, rect[1], rect[3], rect[0]);
+  }
+  /**
+   * Checks if the entity or any of its ancestors have been rotated.
+   *
+   * @param entity - entity to check
+   * @returns true if the entity or any of its ancestors have been rotated
+   */
+  static entityOrAncestorHasBeenRotated(entity) {
+    const entities = entity.ancestors;
+    entities.push(entity);
+    return entities.some((entity2) => entityNeedsRotation(entity2));
+  }
+  /**
+   * Converts a bounding box to an array of four points representing the
+   * vertices of the rectangle.
+   *
+   * @remarks In m2c2kit, the y-axis is inverted: origin is in the upper-left.
+   * Vertices are returned in clockwise order starting from the upper-left.
+   *
+   * @param boundingBox
+   * @returns An array of four points
+   */
+  static boundingBoxToPoints(boundingBox) {
+    const { xMin, xMax, yMin, yMax } = boundingBox;
+    const points = [
+      { x: xMin, y: yMin },
+      // Top left
+      { x: xMax, y: yMin },
+      // Top right
+      { x: xMax, y: yMax },
+      // Bottom right
+      { x: xMin, y: yMax }
+      // Bottom left
+    ];
+    return points;
+  }
+  /**
+   * Finds the centroid of a rectangle.
+   *
+   * @param points - An array of four points representing the vertices of the
+   * rectangle.
+   * @returns array of points representing the centroid of the rectangle.
+   */
+  static findCentroid(points) {
+    if (points.length !== 4) {
+      throw new Error("Invalid input: expected an array of four points");
     }
-    return true;
+    let xSum = 0;
+    let ySum = 0;
+    for (const point of points) {
+      xSum += point.x;
+      ySum += point.y;
+    }
+    const xAvg = xSum / 4;
+    const yAvg = ySum / 4;
+    return { x: xAvg, y: yAvg };
+  }
+  /**
+   * Rotates a point, counterclockwise, around another point by an angle in
+   * radians.
+   *
+   * @param point - Point to rotate
+   * @param radians - angle in radians
+   * @param center - Point to rotate around
+   * @returns rotated point
+   */
+  static rotatePoint(point, radians, center) {
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    const x = dx * Math.cos(-radians) - dy * Math.sin(-radians);
+    const y = dx * Math.sin(-radians) + dy * Math.cos(-radians);
+    return {
+      x: x + center.x,
+      y: y + center.y
+    };
+  }
+  /**
+   * Calculates the rotation transforms to apply to entity, respecting any
+   * ancestor rotations.
+   *
+   * @param drawableEntity - entity to calculate rotation transforms for
+   * @returns array of rotation transforms to apply
+   */
+  static calculateRotationTransforms(drawableEntity) {
+    const rotationTransforms = [];
+    const entities = drawableEntity.ancestors;
+    entities.reverse();
+    entities.push(drawableEntity);
+    entities.forEach((entity) => {
+      if (entityNeedsRotation(entity)) {
+        const drawable = entity;
+        if (drawable.type === EntityType.Scene) {
+          const center2 = {
+            x: drawable.absolutePosition.x + drawable.size.width * 0.5,
+            y: drawable.absolutePosition.y + drawable.size.height * 0.5
+          };
+          rotationTransforms.push({
+            radians: drawable.zRotation,
+            center: center2
+          });
+          return;
+        }
+        const boundingBox = M2c2KitHelpers.calculateEntityAbsoluteBoundingBox(drawable);
+        const points = M2c2KitHelpers.boundingBoxToPoints(boundingBox);
+        const center = M2c2KitHelpers.findCentroid(points);
+        rotationTransforms.push({
+          radians: drawable.zRotation,
+          center
+        });
+      }
+    });
+    return rotationTransforms;
   }
 }
 function applyRotationTransformsToCanvas(rotationTransforms, scale, canvas) {
@@ -298,84 +441,16 @@ function applyRotationTransformsToCanvas(rotationTransforms, scale, canvas) {
     );
   });
 }
-function calculateRotationTransforms(drawableEntity) {
-  const rotationTransforms = [];
-  const entities = drawableEntity.ancestors;
-  entities.reverse();
-  entities.push(drawableEntity);
-  entities.forEach((entity) => {
-    if (entityNeedsRotation(entity)) {
-      const drawable = entity;
-      if (drawable.type === EntityType.Scene) {
-        const center2 = {
-          x: drawable.absolutePosition.x + drawable.size.width * 0.5,
-          y: drawable.absolutePosition.y + drawable.size.height * 0.5
-        };
-        rotationTransforms.push({
-          radians: drawable.zRotation,
-          center: center2
-        });
-        return;
-      }
-      const boundingBox = M2c2KitHelpers.calculateEntityAbsoluteBoundingBox(drawable);
-      const points = boundingBoxToPoints(boundingBox);
-      const center = findCentroid(points);
-      rotationTransforms.push({
-        radians: drawable.zRotation,
-        center
-      });
-    }
-  });
-  return rotationTransforms;
-}
 function entityNeedsRotation(entity) {
   return M2c2KitHelpers.normalizeAngleRadians(entity.zRotation) !== 0 && entity.isDrawable;
 }
-function boundingBoxToPoints(boundingBox) {
-  const { xMin, xMax, yMin, yMax } = boundingBox;
-  const points = [
-    { x: xMin, y: yMin },
-    // Top left
-    { x: xMin, y: yMax },
-    // Bottom left
-    { x: xMax, y: yMax },
-    // Bottom right
-    { x: xMax, y: yMin }
-    // Top right
-  ];
-  return points;
-}
-function findCentroid(points) {
-  if (points.length !== 4) {
-    throw new Error("Invalid input: expected an array of four points");
-  }
-  let xSum = 0;
-  let ySum = 0;
-  for (const point of points) {
-    xSum += point.x;
-    ySum += point.y;
-  }
-  const xAvg = xSum / 4;
-  const yAvg = ySum / 4;
-  return { x: xAvg, y: yAvg };
-}
-function rotatePoint(point, radians, center) {
-  const dx = point.x - center.x;
-  const dy = point.y - center.y;
-  const x = dx * Math.cos(-radians) - dy * Math.sin(-radians);
-  const y = dx * Math.sin(-radians) + dy * Math.cos(-radians);
-  return {
-    x: x + center.x,
-    y: y + center.y
-  };
-}
 function rotateRectangle(rect, radians, center) {
   if (rect.length !== 4) {
     throw new Error("Invalid input: expected an array of four points");
   }
   const rotated = [];
   for (const p of rect) {
-    rotated.push(rotatePoint(p, radians, center));
+    rotated.push(M2c2KitHelpers.rotatePoint(p, radians, center));
   }
   return rotated;
 }
@@ -1440,11 +1515,11 @@ class Entity {
     this.isDrawable = false;
     this.isShape = false;
     this.isText = false;
-    this.position = { x: 0, y: 0 };
+    this._position = { x: 0, y: 0 };
     // position of the entity in the parent coordinate system
-    this.scale = 1;
+    this._scale = 1;
     this.alpha = 1;
-    this.zRotation = 0;
+    this._zRotation = 0;
     this.isUserInteractionEnabled = false;
     this.draggable = false;
     this.hidden = false;
@@ -2277,6 +2352,38 @@ class Entity {
     }
     throw new Error(`Entity ${this} has not been added to a scene`);
   }
+  get position() {
+    const entity = this;
+    return {
+      get x() {
+        return entity._position.x;
+      },
+      set x(x) {
+        entity._position.x = x;
+      },
+      get y() {
+        return entity._position.y;
+      },
+      set y(y) {
+        entity._position.y = y;
+      }
+    };
+  }
+  set position(position) {
+    this._position = position;
+  }
+  get zRotation() {
+    return this._zRotation;
+  }
+  set zRotation(zRotation) {
+    this._zRotation = zRotation;
+  }
+  get scale() {
+    return this._scale;
+  }
+  set scale(scale) {
+    this._scale = scale;
+  }
   // from https://medium.com/@konduruharish/topological-sort-in-typescript-and-c-6d5ecc4bad95
   /**
    * For a given directed acyclic graph, topological ordering of the vertices will be identified using BFS
@@ -3595,6 +3702,7 @@ class Game {
     this.steppingNow = 0;
     this.warmupFunctionQueue = new Array();
     this.loaderElementsRemoved = false;
+    this.plugins = [];
     this.staticTrialSchema = {};
     this.data = {
       trials: new Array()
@@ -4042,7 +4150,7 @@ class Game {
    * is not found, then return fallback value
    *
    * @param parameterName - the name of the game parameter whose value is requested
-   * @param fallback - the value to return if parameterName is not found
+   * @param fallbackValue - the value to return if parameterName is not found
    * @returns
    */
   getParameterOrFallback(parameterName, fallbackValue) {
@@ -5037,27 +5145,34 @@ class Game {
     return outgoingScene;
   }
   /**
-   * Executes a callback when the frame has finished simulating physics.
+   * Registers a plugin with the game.
    *
-   * @param callback - function to execute.
-   * @param options - options for the callback.
+   * @remarks Upon registration, the plugin's optional asynchronous
+   * `initialize()` method will be called.
+   *
+   * @param plugin - Plugin to register
    */
-  onFrameDidSimulatePhysics(callback, options) {
-    this.addEventListener(
-      EventType.FrameDidSimulatePhysics,
-      callback,
-      options
-    );
+  async registerPlugin(plugin) {
+    if (plugin.type !== ActivityType.Game) {
+      throw new Error(
+        `registerPlugin(): plugin ${plugin.id} is not a game plugin. It is a ${plugin.type} plugin.`
+      );
+    }
+    if (this.plugins.includes(plugin) || this.plugins.map((p) => p.id).includes(plugin.id)) {
+      throw new Error(
+        `registerPlugin(): plugin ${plugin.id} already registered.`
+      );
+    }
+    this.plugins.push(plugin);
+    if (plugin.initialize) {
+      await plugin.initialize(this);
+    }
   }
   update() {
+    this.plugins.filter((p) => p.beforeUpdate !== void 0 && p.disabled !== true).forEach((p) => p.beforeUpdate(this, Globals.deltaTime));
     this.scenes.filter((scene) => scene._active).forEach((scene) => scene.update());
     this.freeEntitiesScene.update();
-    const frameDidSimulatePhysicsEvent = {
-      target: this,
-      type: EventType.FrameDidSimulatePhysics,
-      deltaTime: Globals.deltaTime
-    };
-    this.raiseActivityEventOnListeners(frameDidSimulatePhysicsEvent);
+    this.plugins.filter((p) => p.afterUpdate !== void 0 && p.disabled !== true).forEach((p) => p.afterUpdate(this, Globals.deltaTime));
   }
   draw(canvas) {
     this.scenes.filter((scene) => scene._active).forEach((scene) => scene.draw(canvas));
@@ -5471,35 +5586,26 @@ class Game {
       domPointerEvent
     );
   }
-  /**
-   * Adjusts dragging behavior when the pointer leaves the canvas
-   *
-   * @remarks This is necessary because the pointerup event is not fired when
-   * the pointer leaves the canvas. On desktop, this means that the user might
-   * lift the pointer outside the canvas, but the entity will still be dragged
-   * when the pointer is moved back into the canvas.
-   *
-   * @param domPointerEvent
-   * @returns
-   */
   htmlCanvasPointerLeaveHandler(domPointerEvent) {
     if (!this.currentScene) {
       return;
     }
-    this.currentScene.children.forEach((entity) => {
-      if (entity.dragging) {
-        const m2Event = {
-          target: entity,
-          type: EventType.DragEnd,
-          handled: false
-        };
-        entity.dragging = false;
-        entity.pressed = false;
-        entity.pressedAndWithinHitArea = false;
-        this.raiseM2DragEndEvent(entity, m2Event, domPointerEvent);
-        return;
-      }
-    });
+    domPointerEvent.preventDefault();
+    const scene = this.currentScene;
+    if (!scene || !this.sceneCanReceiveUserInteraction(scene)) {
+      return;
+    }
+    const m2Event = {
+      target: scene,
+      type: EventType.PointerLeave,
+      handled: false
+    };
+    this.processDomPointerLeave(scene, m2Event, domPointerEvent);
+    this.processDomPointerLeave(
+      this.freeEntitiesScene,
+      m2Event,
+      domPointerEvent
+    );
   }
   /**
    * Determines if/how m2c2kit entities respond to the DOM PointerDown event
@@ -5612,7 +5718,7 @@ class Game {
       entity.pressedAndWithinHitArea = false;
       this.raiseTapLeaveEvent(entity, m2Event, domPointerEvent);
     }
-    if (this.IsCanvasPointWithinEntityBounds(
+    if (entity.isUserInteractionEnabled && this.IsCanvasPointWithinEntityBounds(
       entity,
       domPointerEvent.offsetX,
       domPointerEvent.offsetY
@@ -5620,15 +5726,13 @@ class Game {
       this.raiseM2PointerMoveEvent(entity, m2Event, domPointerEvent);
       entity.withinHitArea = true;
     }
-    if (!this.IsCanvasPointWithinEntityBounds(
+    if (entity.isUserInteractionEnabled && entity.withinHitArea && !this.IsCanvasPointWithinEntityBounds(
       entity,
       domPointerEvent.offsetX,
       domPointerEvent.offsetY
     )) {
-      if (entity.withinHitArea) {
-        this.raiseM2PointerLeaveEvent(entity, m2Event, domPointerEvent);
-        entity.withinHitArea = false;
-      }
+      entity.withinHitArea = false;
+      this.raiseM2PointerLeaveEvent(entity, m2Event, domPointerEvent);
     }
     if (entity.children) {
       entity.children.filter((entity2) => !entity2.hidden).filter((entity2) => entity2.isDrawable).sort(
@@ -5638,6 +5742,46 @@ class Game {
       );
     }
   }
+  processDomPointerLeave(entity, m2Event, domPointerEvent) {
+    if (m2Event.handled) {
+      return;
+    }
+    if (entity.dragging) {
+      const m2Event2 = {
+        target: entity,
+        type: EventType.DragEnd,
+        handled: false
+      };
+      entity.dragging = false;
+      entity.pressed = false;
+      entity.pressedAndWithinHitArea = false;
+      this.raiseM2DragEndEvent(entity, m2Event2, domPointerEvent);
+      return;
+    }
+    if (entity.isUserInteractionEnabled && entity.pressed && entity.pressedAndWithinHitArea && !this.IsCanvasPointWithinEntityBounds(
+      entity,
+      domPointerEvent.offsetX,
+      domPointerEvent.offsetY
+    )) {
+      entity.pressedAndWithinHitArea = false;
+      this.raiseTapLeaveEvent(entity, m2Event, domPointerEvent);
+    }
+    if (entity.isUserInteractionEnabled && entity.withinHitArea && !this.IsCanvasPointWithinEntityBounds(
+      entity,
+      domPointerEvent.offsetX,
+      domPointerEvent.offsetY
+    )) {
+      entity.withinHitArea = false;
+      this.raiseM2PointerLeaveEvent(entity, m2Event, domPointerEvent);
+    }
+    if (entity.children) {
+      entity.children.filter((entity2) => !entity2.hidden).filter((entity2) => entity2.isDrawable).sort(
+        (a, b) => b.zPosition - a.zPosition
+      ).forEach(
+        (entity2) => this.processDomPointerLeave(entity2, m2Event, domPointerEvent)
+      );
+    }
+  }
   raiseM2PointerDownEvent(entity, m2Event, domPointerEvent) {
     m2Event.target = entity;
     m2Event.type = EventType.PointerDown;
@@ -5748,9 +5892,24 @@ class Game {
       width = radius * 2;
       height = radius * 2;
     }
-    const x = domPointerEvent.offsetX;
-    const y = domPointerEvent.offsetY;
+    let x = domPointerEvent.offsetX;
+    let y = domPointerEvent.offsetY;
     const bb = M2c2KitHelpers.calculateEntityAbsoluteBoundingBox(entity);
+    if (M2c2KitHelpers.entityOrAncestorHasBeenRotated(entity)) {
+      const transforms = M2c2KitHelpers.calculateRotationTransforms(
+        entity
+      );
+      transforms.forEach((transform) => {
+        const rotatedPoint = M2c2KitHelpers.rotatePoint(
+          { x, y },
+          // take negative because we are applying the reverse rotation
+          -transform.radians,
+          transform.center
+        );
+        x = rotatedPoint.x;
+        y = rotatedPoint.y;
+      });
+    }
     const relativeX = (x - bb.xMin) / (bb.xMax - bb.xMin) * width;
     const relativeY = (y - bb.yMin) / (bb.yMax - bb.yMin) * height;
     return { x: relativeX, y: relativeY };
@@ -7332,7 +7491,7 @@ class Session {
     this.eventListeners = new Array();
     this.sessionDictionary = /* @__PURE__ */ new Map();
     this.initialized = false;
-    this.version = "0.3.14 (60325bea)";
+    this.version = "0.3.16 (d8a00e86)";
     this.options = options;
     for (const activity of this.options.activities) {
       if (this.options.activities.filter((a) => a === activity).length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/core",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "description": "The m2c2kit core functionality",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
-    "@types/jest": "29.5.10",
+    "@types/jest": "29.5.11",
     "@types/jsdom": "21.1.6",
     "@webgpu/types": "0.1.40",
     "canvas": "2.11.2",
@@ -48,14 +48,14 @@
     "jest-environment-jsdom": "29.7.0",
     "jsdom": "23.0.1",
     "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",
     "rollup-plugin-polyfill-node": "0.13.0",
     "ts-jest": "29.1.1",
-    "ts-node": "10.9.1",
-    "typescript": "5.3.2"
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3"
   },
   "engines": {
     "node": ">=18"