jspsych-tangram 0.0.16 → 0.0.18

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ParameterType } from 'jspsych';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { v4 } from 'uuid';
 
@@ -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) {
@@ -3764,7 +3782,7 @@ function startConstructionTrial(display_element, params, _jsPsych) {
   return { root, display_element, jsPsych: _jsPsych };
 }
 
-const info$3 = {
+const info$4 = {
   name: "tangram-construct",
   version: "1.0.0",
   parameters: {
@@ -3896,7 +3914,7 @@ class TangramConstructPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info$3;
+    this.info = info$4;
   }
   /**
    * Launches the trial by invoking startConstructionTrial
@@ -4047,7 +4065,7 @@ function startPrepTrial(display_element, params, jsPsych) {
   return { root, display_element, jsPsych };
 }
 
-const info$2 = {
+const info$3 = {
   name: "tangram-prep",
   version: "1.0.0",
   parameters: {
@@ -4135,7 +4153,7 @@ class TangramPrepPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info$2;
+    this.info = info$3;
   }
   /**
    * Launches the trial by invoking startPrepTrial
@@ -4431,7 +4449,7 @@ function NBackView({ params }) {
   )));
 }
 
-const info$1 = {
+const info$2 = {
   name: "tangram-nback",
   version: "1.0.0",
   parameters: {
@@ -4524,7 +4542,7 @@ class TangramNBackPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info$1;
+    this.info = info$2;
   }
   /**
    * Launches the trial by invoking startNBackTrial
@@ -4807,7 +4825,7 @@ function TangramOption({
   ));
 }
 
-const info = {
+const info$1 = {
   name: "tangram-afc",
   version: "1.0.0",
   parameters: {
@@ -4885,7 +4903,7 @@ class TangramAFCPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info;
+    this.info = info$1;
   }
   /**
    * Launches the trial by invoking startAFCTrial
@@ -4919,5 +4937,521 @@ class TangramAFCPlugin {
   }
 }
 
-export { TangramAFCPlugin, TangramConstructPlugin, TangramNBackPlugin, TangramPrepPlugin };
+function startGridTrial(display_element, params, _jsPsych) {
+  const root = createRoot(display_element);
+  root.render(React.createElement(GridView, { params }));
+  return { root, display_element, jsPsych: _jsPsych };
+}
+function computeBounds(polys) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const poly of polys) {
+    for (const p of poly) {
+      minX = Math.min(minX, p.x);
+      minY = Math.min(minY, p.y);
+      maxX = Math.max(maxX, p.x);
+      maxY = Math.max(maxY, p.y);
+    }
+  }
+  return { minX, minY, maxX, maxY, width: maxX - minX, height: maxY - minY };
+}
+function GridView({ params }) {
+  const {
+    tangrams,
+    n_rows,
+    n_cols,
+    prompt_text,
+    button_text,
+    show_tangram_decomposition = false,
+    usePrimitiveColors = false,
+    primitiveColorIndices = [0, 1, 2, 3, 4],
+    onTrialEnd
+  } = params;
+  const trialStartTime = useRef(Date.now());
+  const [response, setResponse] = useState("");
+  const [cellSize, setCellSize] = useState(100);
+  const controlsRef = useRef(null);
+  const GRID_GAP = 6;
+  const CONTAINER_PADDING = 8;
+  const CELL_MARGIN = 0.05;
+  const PROGRESS_BAR_HEIGHT = 58;
+  const CELL_BORDER = CONFIG.size.stroke.bandPx;
+  const SAFETY_BUFFER = 8;
+  useEffect(() => {
+    const styleId = "tangram-grid-jspsych-override";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        .jspsych-content {
+          max-width: 100% !important;
+          width: 100% !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+    return () => {
+      const style = document.getElementById(styleId);
+      if (style) style.remove();
+    };
+  }, []);
+  const CANON = /* @__PURE__ */ new Set([
+    "square",
+    "smalltriangle",
+    "parallelogram",
+    "medtriangle",
+    "largetriangle"
+  ]);
+  const processedTangrams = useMemo(() => {
+    return tangrams.map((tangramSpec) => {
+      const filteredTans = tangramSpec.solutionTans.filter((tan) => {
+        const tanName = tan.name ?? tan.kind;
+        return CANON.has(tanName);
+      });
+      const mask = filteredTans.map((tan) => {
+        return tan.vertices.map(([x, y]) => ({
+          x: x ?? 0,
+          y: -(y ?? 0)
+        }));
+      });
+      const primitiveDecomposition = filteredTans.map((tan) => ({
+        kind: tan.name ?? tan.kind,
+        polygon: tan.vertices.map(([x, y]) => ({
+          x: x ?? 0,
+          y: -(y ?? 0)
+        }))
+      }));
+      return {
+        tangramId: tangramSpec.tangramID,
+        mask,
+        primitiveDecomposition
+      };
+    });
+  }, [tangrams]);
+  const maxTangramExtent = useMemo(() => {
+    let maxExtent = 0;
+    for (const t of processedTangrams) {
+      const bounds = computeBounds(t.mask);
+      maxExtent = Math.max(maxExtent, bounds.width, bounds.height);
+    }
+    return maxExtent || 1;
+  }, [processedTangrams]);
+  useEffect(() => {
+    const calculateCellSize = () => {
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      const controlsHeight = controlsRef.current?.offsetHeight ?? 70;
+      const availableWidth = viewportWidth - CONTAINER_PADDING * 2 - SAFETY_BUFFER;
+      const availableHeight = viewportHeight - PROGRESS_BAR_HEIGHT - controlsHeight - CONTAINER_PADDING * 2 - SAFETY_BUFFER;
+      const totalHorizontalGaps = GRID_GAP * (n_cols - 1);
+      const totalVerticalGaps = GRID_GAP * (n_rows - 1);
+      const totalHorizontalBorders = CELL_BORDER * 2 * n_cols;
+      const totalVerticalBorders = CELL_BORDER * 2 * n_rows;
+      const maxCellWidth = (availableWidth - totalHorizontalGaps - totalHorizontalBorders) / n_cols;
+      const maxCellHeight = (availableHeight - totalVerticalGaps - totalVerticalBorders) / n_rows;
+      const newCellSize = Math.floor(Math.min(maxCellWidth, maxCellHeight));
+      setCellSize(Math.max(newCellSize, 50));
+    };
+    calculateCellSize();
+    window.addEventListener("resize", calculateCellSize);
+    return () => window.removeEventListener("resize", calculateCellSize);
+  }, [n_rows, n_cols]);
+  const tangramScale = useMemo(() => {
+    const usableSize = cellSize * (1 - CELL_MARGIN * 2);
+    return usableSize / maxTangramExtent;
+  }, [cellSize, maxTangramExtent]);
+  const kindToIndex = {
+    square: 0,
+    smalltriangle: 1,
+    parallelogram: 2,
+    medtriangle: 3,
+    largetriangle: 4
+  };
+  const pathD = (poly) => {
+    if (!poly || poly.length === 0) return "";
+    const moves = poly.map(
+      (p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`
+    );
+    return moves.join(" ") + " Z";
+  };
+  const handleSubmit = () => {
+    const rt = Date.now() - trialStartTime.current;
+    const trialData = {
+      response,
+      rt,
+      n_rows,
+      n_cols,
+      tangram_ids: processedTangrams.map((t) => t.tangramId),
+      show_tangram_decomposition,
+      use_primitive_colors: usePrimitiveColors,
+      primitive_color_indices: primitiveColorIndices
+    };
+    if (onTrialEnd) {
+      onTrialEnd(trialData);
+    }
+  };
+  const renderTangram = (tangramData, index) => {
+    const { mask, primitiveDecomposition } = tangramData;
+    if (show_tangram_decomposition) {
+      const scaledPrimitives = primitiveDecomposition.map(
+        (prim) => {
+          const scaledPoly = prim.polygon.map((p) => ({
+            x: p.x * tangramScale,
+            y: p.y * tangramScale
+          }));
+          return { kind: prim.kind, polygon: scaledPoly };
+        }
+      );
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const prim of scaledPrimitives) {
+        for (const p of prim.polygon) {
+          minX = Math.min(minX, p.x);
+          minY = Math.min(minY, p.y);
+          maxX = Math.max(maxX, p.x);
+          maxY = Math.max(maxY, p.y);
+        }
+      }
+      const width = maxX - minX;
+      const height = maxY - minY;
+      const tx = cellSize / 2 - (minX + width / 2);
+      const ty = cellSize / 2 - (minY + height / 2);
+      const translatedPrimitives = scaledPrimitives.map(
+        (prim) => ({
+          kind: prim.kind,
+          polygon: prim.polygon.map((p) => ({
+            x: p.x + tx,
+            y: p.y + ty
+          }))
+        })
+      );
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          key: index,
+          width: cellSize,
+          height: cellSize,
+          viewBox: `0 0 ${cellSize} ${cellSize}`,
+          style: {
+            display: "block",
+            background: CONFIG.color.bands.silhouette.fillEven,
+            border: `${CONFIG.size.stroke.bandPx}px solid ${CONFIG.color.bands.silhouette.stroke}`,
+            borderRadius: "8px"
+          }
+        },
+        translatedPrimitives.map(
+          (prim, i) => {
+            let fillColor;
+            if (usePrimitiveColors) {
+              const primitiveIndex = kindToIndex[prim.kind];
+              if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+                const colorIndex = primitiveColorIndices[primitiveIndex];
+                const color = CONFIG.color.primitiveColors[colorIndex];
+                fillColor = color || CONFIG.color.piece.validFill;
+              } else {
+                fillColor = CONFIG.color.piece.validFill;
+              }
+            } else {
+              fillColor = CONFIG.color.piece.validFill;
+            }
+            return /* @__PURE__ */ React.createElement(
+              "path",
+              {
+                key: `prim-${i}`,
+                d: pathD(prim.polygon),
+                fill: fillColor,
+                opacity: CONFIG.opacity.piece.normal,
+                stroke: CONFIG.color.tangramDecomposition.stroke,
+                strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+              }
+            );
+          }
+        )
+      );
+    } else {
+      const scaledMask = mask.map(
+        (poly) => poly.map((p) => ({
+          x: p.x * tangramScale,
+          y: p.y * tangramScale
+        }))
+      );
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const poly of scaledMask) {
+        for (const p of poly) {
+          minX = Math.min(minX, p.x);
+          minY = Math.min(minY, p.y);
+          maxX = Math.max(maxX, p.x);
+          maxY = Math.max(maxY, p.y);
+        }
+      }
+      const width = maxX - minX;
+      const height = maxY - minY;
+      const tx = cellSize / 2 - (minX + width / 2);
+      const ty = cellSize / 2 - (minY + height / 2);
+      const placedMask = scaledMask.map(
+        (poly) => poly.map((p) => ({ x: p.x + tx, y: p.y + ty }))
+      );
+      return /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          key: index,
+          width: cellSize,
+          height: cellSize,
+          viewBox: `0 0 ${cellSize} ${cellSize}`,
+          style: {
+            display: "block",
+            background: CONFIG.color.bands.silhouette.fillEven,
+            border: `${CONFIG.size.stroke.bandPx}px solid ${CONFIG.color.bands.silhouette.stroke}`,
+            borderRadius: "8px"
+          }
+        },
+        placedMask.map((poly, i) => /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            key: `sil-${i}`,
+            d: pathD(poly),
+            fill: CONFIG.color.piece.validFill,
+            opacity: CONFIG.opacity.piece.normal,
+            stroke: "none"
+          }
+        ))
+      );
+    }
+  };
+  const isSubmitDisabled = response.trim().length === 0;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-between",
+        background: CONFIG.color.background,
+        width: "100%",
+        height: `calc(100vh - ${PROGRESS_BAR_HEIGHT}px)`,
+        overflow: "hidden",
+        fontFamily: "Roboto, sans-serif",
+        boxSizing: "border-box",
+        padding: `${CONTAINER_PADDING}px`
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          flex: "1 1 auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(${n_cols}, ${cellSize}px)`,
+            gridTemplateRows: `repeat(${n_rows}, ${cellSize}px)`,
+            gap: `${GRID_GAP}px`
+          }
+        },
+        processedTangrams.slice(0, n_rows * n_cols).map(
+          (t, i) => renderTangram(t, i)
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: controlsRef,
+        style: {
+          flex: "0 0 auto",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "4px",
+          paddingTop: "4px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            textAlign: "center",
+            maxWidth: "90vw"
+          }
+        },
+        prompt_text
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "input",
+          {
+            type: "text",
+            value: response,
+            onChange: (e) => setResponse(e.target.value),
+            style: {
+              width: "min(400px, 50vw)",
+              padding: "6px 10px",
+              fontSize: "14px",
+              borderRadius: "6px",
+              border: "2px solid #ccc",
+              fontFamily: "inherit",
+              boxSizing: "border-box"
+            },
+            placeholder: "Type your response here..."
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            className: "jspsych-btn",
+            onClick: handleSubmit,
+            disabled: isSubmitDisabled,
+            style: {
+              padding: "6px 16px",
+              fontSize: "13px",
+              cursor: isSubmitDisabled ? "not-allowed" : "pointer",
+              opacity: isSubmitDisabled ? 0.5 : 1,
+              flexShrink: 0
+            }
+          },
+          button_text
+        )
+      )
+    )
+  );
+}
+
+const info = {
+  name: "tangram-grid",
+  version: "1.0.0",
+  parameters: {
+    /** Array of tangram specifications to display in the grid */
+    tangrams: {
+      type: ParameterType.COMPLEX,
+      default: void 0,
+      description: "Array of TangramSpec objects to display in the grid"
+    },
+    /** Number of rows in the grid */
+    n_rows: {
+      type: ParameterType.INT,
+      default: 1,
+      description: "Number of rows in the tangram grid"
+    },
+    /** Number of columns in the grid */
+    n_cols: {
+      type: ParameterType.INT,
+      default: 1,
+      description: "Number of columns in the tangram grid"
+    },
+    /** Prompt text displayed above the text input */
+    prompt_text: {
+      type: ParameterType.STRING,
+      default: "",
+      description: "Text displayed above the text input field"
+    },
+    /** Label for the submit button */
+    button_text: {
+      type: ParameterType.STRING,
+      default: "Submit",
+      description: "Text displayed on the submit button"
+    },
+    /** Whether to show tangrams decomposed into primitives */
+    show_tangram_decomposition: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether to show tangrams decomposed into individual primitives"
+    },
+    /** Whether to use distinct colors for each primitive type */
+    use_primitive_colors: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color"
+    },
+    /** Indices mapping primitives to colors */
+    primitive_color_indices: {
+      type: ParameterType.OBJECT,
+      default: [0, 1, 2, 3, 4],
+      description: "Array of 5 integers indexing into primitiveColors array, mapping [square, smalltriangle, parallelogram, medtriangle, largetriangle] to colors"
+    },
+    /** Callback fired when trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: void 0,
+      description: "Callback when trial completes with full data"
+    }
+  },
+  data: {
+    /** The text response entered by the participant */
+    response: {
+      type: ParameterType.STRING,
+      description: "The text response entered by the participant"
+    },
+    /** Reaction time from trial start to submit button click */
+    rt: {
+      type: ParameterType.INT,
+      description: "Time in milliseconds from trial start to submit"
+    }
+  },
+  citations: ""
+};
+class TangramGridPlugin {
+  constructor(jsPsych) {
+    this.jsPsych = jsPsych;
+  }
+  static {
+    this.info = info;
+  }
+  /**
+   * Launches the trial by invoking startGridTrial with the display element,
+   * parameters, and jsPsych instance.
+   *
+   * REQUIRES: display_element is a valid HTMLElement, trial contains valid
+   *           parameters
+   * MODIFIES: display_element (renders React component)
+   * EFFECTS: Starts the grid trial and handles cleanup on completion
+   */
+  trial(display_element, trial) {
+    const wrappedOnTrialEnd = (data) => {
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+      const reactContext = display_element.__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+      display_element.innerHTML = "";
+      this.jsPsych.finishTrial(data);
+    };
+    const params = {
+      tangrams: trial.tangrams,
+      n_rows: trial.n_rows,
+      n_cols: trial.n_cols,
+      prompt_text: trial.prompt_text,
+      button_text: trial.button_text,
+      show_tangram_decomposition: trial.show_tangram_decomposition,
+      usePrimitiveColors: trial.use_primitive_colors,
+      primitiveColorIndices: trial.primitive_color_indices,
+      onTrialEnd: wrappedOnTrialEnd
+    };
+    const { root, display_element: element, jsPsych } = startGridTrial(
+      display_element,
+      params,
+      this.jsPsych
+    );
+    element.__reactContext = { root, jsPsych };
+  }
+}
+
+export { TangramAFCPlugin, TangramConstructPlugin, TangramGridPlugin, TangramNBackPlugin, TangramPrepPlugin };
 //# sourceMappingURL=index.js.map