@pie-element/image-cloze-association 10.3.0-beta.0 → 10.3.0

package/src/possible-response.jsx

@@ -40,6 +40,9 @@ const BaseContainer = styled('div')(() => ({
   '&.baseIncorrect': {
     border: `2px solid ${color.incorrect()} !important`,
   },
+  '&.selected': {
+    opacity: 0.7,
+  },
 }));
 
 const StyledSpan = styled(StaticHTMLSpan)(() => ({
@@ -50,7 +53,17 @@ const StyledSpan = styled(StaticHTMLSpan)(() => ({
   },
 }));
 
-const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }) => {
+const PossibleResponse = ({
+  canDrag,
+  containerStyle,
+  data,
+  onDragBegin,
+  answerChoiceTransparency,
+  isOverlay,
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick,
+}) => {
   const rootRef = useRef(null);
   const longPressTimer = useRef(null);
 
@@ -64,6 +77,31 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
     disabled: !canDrag,
   });
 
+  const isSelected =
+    !!selectedResponse && selectedResponse.id === data.id && selectedResponse.containerIndex === data.containerIndex;
+
+  const handleClick = (e) => {
+    if (!canDrag) return;
+
+    e.stopPropagation();
+
+    const isPlaced = data.containerIndex !== undefined;
+
+    if (isSelected) {
+      // Clicking the already-selected tile again deselects it.
+      onSelectClick?.(data);
+    } else if (selectedResponse && isPlaced) {
+      // Something else is selected, and this tile is already inside a container:
+      // place the selection into that same container (a swap/insert, handled by the
+      // existing handleOnAnswerSelect logic).
+      onPlacementClick?.(data.containerIndex);
+    } else {
+      // Nothing selected yet, or this is a pool item (pool items are never placement
+      // targets — the pool itself, in possible-responses.jsx, is): select this tile.
+      onSelectClick?.(data);
+    }
+  };
+
   const handleTouchEnd = () => {
     clearTimeout(longPressTimer.current);
   };
@@ -113,6 +151,7 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
     answerChoiceTransparency: answerChoiceTransparency && !isDragging,
     [correctnessClass]: !!correctnessClass,
     textAnswerChoiceStyle: !containsImage && !isOverlay,
+    selected: isSelected && !isDragging,
   });
 
   const promptClassNames = classNames({ hiddenSpan: data.hidden });
@@ -125,6 +164,7 @@ const PossibleResponse = ({ canDrag, containerStyle, data, onDragBegin, answerCh
         rootRef.current = ref;
         setNodeRef(ref);
       }}
+      onClick={handleClick}
       {...listeners}
       {...attributes}
     >
@@ -141,12 +181,16 @@ PossibleResponse.propTypes = {
   onDragBegin: PropTypes.func.isRequired,
   answerChoiceTransparency: PropTypes.bool,
   isOverlay: PropTypes.bool,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 PossibleResponse.defaultProps = {
   containerStyle: {},
   answerChoiceTransparency: false,
   isOverlay: false,
+  selectedResponse: null,
 };
 
 export default PossibleResponse;

package/src/possible-responses.jsx

@@ -22,22 +22,40 @@ const PossibleResponses = ({
   customStyle,
   isVertical,
   minHeight,
-}) => (
-  <BaseContainer style={customStyle}>
-    <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
-      {(data || []).map((item) => (
-        <PossibleResponse
-          canDrag={canDrag}
-          key={item.id}
-          data={item}
-          onDragBegin={onDragBegin}
-          answerChoiceTransparency={answerChoiceTransparency}
-          containerStyle={{ margin: '4px' }}
-        />
-      ))}
-    </ICADroppablePlaceholder>
-  </BaseContainer>
-);
+  selectedResponse,
+  onSelectClick,
+  onPlacementClick,
+}) => {
+  const handlePoolClick = () => {
+    if (!canDrag) return;
+
+    if (selectedResponse) {
+      // `undefined` containerIndex means "the pool" — root.jsx's placeSelectedResponse
+      // routes it to handleOnAnswerRemove.
+      onPlacementClick?.(undefined);
+    }
+  };
+
+  return (
+    <BaseContainer style={customStyle} onClick={handlePoolClick}>
+      <ICADroppablePlaceholder id="ica-board" disabled={!canDrag} isVerticalPool={isVertical} minHeight={minHeight}>
+        {(data || []).map((item) => (
+          <PossibleResponse
+            canDrag={canDrag}
+            key={item.id}
+            data={item}
+            onDragBegin={onDragBegin}
+            answerChoiceTransparency={answerChoiceTransparency}
+            containerStyle={{ margin: '4px' }}
+            selectedResponse={selectedResponse}
+            onSelectClick={onSelectClick}
+            onPlacementClick={onPlacementClick}
+          />
+        ))}
+      </ICADroppablePlaceholder>
+    </BaseContainer>
+  );
+};
 
 PossibleResponses.propTypes = {
   canDrag: PropTypes.bool.isRequired,
@@ -47,6 +65,9 @@ PossibleResponses.propTypes = {
   customStyle: PropTypes.object,
   isVertical: PropTypes.bool,
   minHeight: PropTypes.number,
+  selectedResponse: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default PossibleResponses;

package/src/root.jsx

@@ -16,9 +16,16 @@ import InteractiveSection from './interactive-section';
 import PossibleResponses from './possible-responses';
 import { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';
 import PossibleResponse from './possible-response';
+import { closestDroppableKeyboardCoordinates } from './keyboard-coordinates';
 
 const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
 
+// A click that lands right after a real drag gesture ends (pointer drag-and-drop, or
+// the browser's own synthetic click for a keyboard Space/Enter) must be ignored by the
+// click-to-select/click-to-place handlers below, or it would immediately reopen or
+// re-trigger a selection for a drag that just completed.
+const CLICK_AFTER_DRAG_GUARD_MS = 250;
+
 const StyledUiLayout = styled(UiLayout)({
   color: color.text(),
   backgroundColor: color.background(),
@@ -76,7 +83,9 @@ export class ImageClozeAssociationComponent extends React.Component {
       maxResponsePerZone: maxResponsePerZone || 1,
       showCorrect: false,
       isValidDrop: false,
+      selectedResponse: null,
     };
+    this.lastDragEndAt = 0;
   }
 
   onDragStart = (event) => {
@@ -86,6 +95,7 @@ export class ImageClozeAssociationComponent extends React.Component {
       this.setState({
         draggingElement: active.data.current,
         isValidDrop: false,
+        selectedResponse: active.data.current,
       });
     }
   };
@@ -112,6 +122,9 @@ export class ImageClozeAssociationComponent extends React.Component {
       isValidDrop: shouldDisableAnimation,
     });
 
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
+
     if (!over || !active) {
       return;
     }
@@ -121,7 +134,9 @@ export class ImageClozeAssociationComponent extends React.Component {
     }
 
     if (over.id === 'ica-board') {
-      this.handleOnAnswerRemove(draggedItem);
+      if (draggedItem.containerIndex !== undefined) {
+        this.handleOnAnswerRemove(draggedItem);
+      }
       return;
     }
 
@@ -130,6 +145,94 @@ export class ImageClozeAssociationComponent extends React.Component {
     }
   };
 
+  onDragCancel = () => {
+    this.setState({ draggingElement: { id: '', value: '' } });
+    this.cancelSelection();
+    this.lastDragEndAt = Date.now();
+  };
+
+  isSameResponse = (a, b) => !!a && !!b && a.id === b.id && a.containerIndex === b.containerIndex;
+
+  // Click-to-select semantics: selecting the currently-selected response again clears
+  // the selection instead of re-selecting it.
+  toggleResponseSelection = (data) => {
+    this.setState((state) => ({
+      selectedResponse: this.isSameResponse(state.selectedResponse, data) ? null : data,
+    }));
+  };
+
+  cancelSelection = () => {
+    this.setState({ selectedResponse: null });
+  };
+
+  // If a real dnd-kit drag (started via keyboard Space/Enter) is still live when a
+  // click completes the placement below, it needs to be cleanly ended — otherwise
+  // dnd-kit would still think a drag is in progress. Escape is already configured as
+  // this sensor's cancel key (see the keyboardCodes passed to DragProvider below), and
+  // dispatching it as a real DOM KeyboardEvent is how dnd-kit's own document-level
+  // listener is reached from outside its sensor.
+  //
+  // Only dispatch when a drag is actually live (draggingElement.id is truthy) — this is
+  // a synthetic Escape keydown on `document`, so an unconditional dispatch would also be
+  // observed by any other document-level Escape listener (host player modals/dialogs,
+  // or another mounted instance of this same component) even when nothing here actually
+  // needed cancelling.
+  endAnyLiveKeyboardDrag = () => {
+    if (!this.state.draggingElement.id) {
+      return;
+    }
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape', bubbles: true, cancelable: true }));
+  };
+
+  placeSelectedResponse = (containerIndex) => {
+    const { selectedResponse } = this.state;
+
+    if (!selectedResponse) {
+      return;
+    }
+
+    if (containerIndex === undefined) {
+      // Placing into the pool = removing it from wherever it currently is
+      if (selectedResponse.containerIndex !== undefined) {
+        this.handleOnAnswerRemove(selectedResponse);
+      }
+    } else {
+      this.handleOnAnswerSelect(selectedResponse, containerIndex);
+    }
+
+    this.cancelSelection();
+    this.endAnyLiveKeyboardDrag();
+    this.lastDragEndAt = Date.now();
+  };
+
+  isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < CLICK_AFTER_DRAG_GUARD_MS;
+
+  onResponseClick = (data) => {
+    if (this.isClickSoonAfterDragEnd()) {
+      return;
+    }
+
+    // A click that selects/deselects/switches a tile must end any dnd-kit drag that's
+    // still live from an earlier keyboard Space/Enter pick-up first — otherwise dnd-kit
+    // keeps thinking that earlier item is being dragged (it ignores new sensor
+    // activation while a drag is active) while selectedResponse visually points at
+    // whatever this click just selected. Ending the stale drag first (rather than
+    // after) matters: ending it also cancels the current selection as a side effect
+    // (see onDragCancel above), so doing it before
+    // toggleResponseSelection lets this click's own selection be the one that sticks.
+    this.endAnyLiveKeyboardDrag();
+    this.toggleResponseSelection(data);
+  };
+
+  onPlacementClick = (containerIndex) => {
+    if (this.isClickSoonAfterDragEnd()) {
+      return;
+    }
+
+    this.placeSelectedResponse(containerIndex);
+  };
+
   renderDragOverlay = () => {
     const { draggingElement } = this.state;
     const { model } = this.props;
@@ -353,6 +456,9 @@ export class ImageClozeAssociationComponent extends React.Component {
       responseContainerPadding,
       imageDropTargetPadding,
       maxResponsePerZone,
+      selectedResponse: this.state.selectedResponse,
+      onSelectClick: this.onResponseClick,
+      onPlacementClick: this.onPlacementClick,
     };
 
     const renderImage = () => (
@@ -381,13 +487,22 @@ export class ImageClozeAssociationComponent extends React.Component {
             }}
             isVertical={isVertical}
             minHeight={isVertical ? image?.height : undefined}
+            selectedResponse={this.state.selectedResponse}
+            onSelectClick={this.onResponseClick}
+            onPlacementClick={this.onPlacementClick}
           />
         </React.Fragment>
       );
     };
 
     return (
-      <DragProvider onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
+      <DragProvider
+        onDragStart={this.onDragStart}
+        onDragEnd={this.onDragEnd}
+        onDragCancel={this.onDragCancel}
+        keyboardCoordinateGetter={closestDroppableKeyboardCoordinates}
+        keyboardCodes={{ start: ['Space', 'Enter'], cancel: ['Escape'], end: ['Space', 'Enter'] }}
+      >
         <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
           {showTeacherInstructions && (
             <StyledTeacherInstructions