jspsych-tangram 0.0.16 → 0.0.18

package/dist/prep/index.js

@@ -2653,7 +2653,9 @@ function useClickController(controller, layout, pieces, clickMode, draggingId, s
 
 class InteractionTracker {
   constructor(controller, callbacks, trialParams) {
-    this.gridStep = CONFIG.layout.grid.stepPx;
+    this.completionTimes = [];
+    // Sector centers (set by GameBoard after layout computation)
+    this.sectorCenters = {};
     // Interaction state
     this.interactionIndex = 0;
     this.currentPickup = null;
@@ -2663,14 +2665,13 @@ class InteractionTracker {
     this.mouseTracking = [];
     // Interaction history (for TrialEndData)
     this.interactions = [];
-    // Construction-specific tracking
-    this.completionTimes = [];
     // Prep-specific tracking
     this.createdMacros = [];
     this.controller = controller;
     this.callbacks = callbacks;
     this.trialParams = trialParams;
     this.trialStartTime = Date.now();
+    this.gridStep = CONFIG.layout.grid.stepPx;
     this.controller.setTrackingCallbacks({
       onSectorCompleted: (sectorId) => this.recordSectorCompletion(sectorId)
     });
@@ -2800,7 +2801,13 @@ class InteractionTracker {
     });
   }
   /**
-   * Record sector completion
+   * Set sector centers (for anchor alignment)
+   */
+  setSectorCenters(centers) {
+    this.sectorCenters = centers;
+  }
+  /**
+   * Record a sector completion event
    */
   recordSectorCompletion(sectorId) {
     this.completionTimes.push({
@@ -2977,7 +2984,8 @@ class InteractionTracker {
         sectorId: sector.id,
         completed,
         pieceCount: pieces.length,
-        pieces
+        pieces,
+        center: this.sectorCenters[sector.id] ? this.toAnchorPoint(this.sectorCenters[sector.id]) : void 0
       };
       if (sectorState?.completedAt !== void 0) {
         snapshot.completedAt = sectorState.completedAt;
@@ -3205,6 +3213,16 @@ function GameBoard(props) {
       viewBox: { w: logicalBox.LOGICAL_W, h: logicalBox.LOGICAL_H }
     };
   }, [sectors, layoutMode, target, maxQuickstashSlots, primitives.length]);
+  React.useEffect(() => {
+    if (tracker && layout) {
+      const centers = {};
+      layout.sectors.forEach((s) => {
+        const rect = rectForBand(layout, s, "silhouette", 1);
+        centers[s.id] = { x: rect.cx, y: rect.cy };
+      });
+      tracker.setSectorCenters(centers);
+    }
+  }, [tracker, layout]);
   const [, force] = React.useReducer((x) => x + 1, 0);
   React.useEffect(() => {
     if (onControllerReady) {