jspsych-tangram 0.0.16 → 0.0.18

package/dist/construct/index.js

@@ -2655,7 +2655,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;
@@ -2665,14 +2667,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)
     });
@@ -2802,7 +2803,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({
@@ -2979,7 +2986,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;
@@ -3207,6 +3215,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) {