feat(hotspot): enhance focus handling and default hover outline color PIE-637 PIE-640

packages/hotspot/configure/src/root.jsx

@@ -12,6 +12,8 @@ import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, get
 
 const { Panel, toggle, dropdown } = settings;
 
+const checkNullish = (value) => value !== null && value !== undefined;
+
 const DimensionsContainer = styled('div')(({ theme }) => ({
   display: 'flex',
   marginBottom: theme.spacing(1.5),
@@ -164,6 +166,7 @@ export class Root extends React.Component {
       ...props,
     });
 
+
     return (
       <layout.ConfigLayout
         extraCSSRules={extraCSSRules}
@@ -225,15 +228,8 @@ export class Root extends React.Component {
         )}
 
         <FlexContainer>
-          <SubHeading variant="h6">
-            Define Hotspot
-          </SubHeading>
-          <StyledTooltip
-            disableFocusListener
-            disableTouchListener
-            placement={'left'}
-            title={validationMessage}
-          >
+          <SubHeading variant="h6">Define Hotspot</SubHeading>
+          <StyledTooltip disableFocusListener disableTouchListener placement={'left'} title={validationMessage}>
             <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
           </StyledTooltip>
         </FlexContainer>
@@ -255,7 +251,7 @@ export class Root extends React.Component {
           hotspotColor={model.hotspotColor}
           outlineColor={model.outlineColor}
           selectedHotspotColor={model.selectedHotspotColor}
-          hoverOutlineColor={model.hoverOutlineColor}
+          hoverOutlineColor={checkNullish(model.hoverOutlineColor) ? model.hoverOutlineColor : 'black'}
           onUpdateImageDimension={onUpdateImageDimension}
           onUpdateShapes={onUpdateShapes}
           onImageUpload={onImageUpload}

packages/hotspot/controller/src/index.js

@@ -8,6 +8,8 @@ import defaults from './defaults';
 
 const log = debug('pie-elements:hotspot:controller');
 
+const checkNullish = (value) => value !== null && value !== undefined;
+
 export const normalize = (question) => ({
   ...defaults,
   ...question,
@@ -44,7 +46,7 @@ export function model(question, session, env) {
       imageUrl,
       outlineColor,
       hotspotColor,
-      hoverOutlineColor,
+      hoverOutlineColor: checkNullish(hoverOutlineColor) ? hoverOutlineColor : 'black',
       selectedHotspotColor,
       multipleCorrect,
       partialScoring,
@@ -150,25 +152,25 @@ export const getLogTrace = (model, session, env) => {
   const traceLog = [];
   const { answers } = session || {};
   const { shapes } = model || {};
-  
+
   const allShapes = [];
   if (shapes) {
     if (shapes.rectangles) allShapes.push(...shapes.rectangles);
     if (shapes.polygons) allShapes.push(...shapes.polygons);
     if (shapes.circles) allShapes.push(...shapes.circles);
   }
-  
+
   const correctShapes = allShapes.filter(shape => shape.correct);
   const totalShapes = allShapes.length;
-  
+
   traceLog.push(`Total of ${totalShapes} hotspot(s) defined, ${correctShapes.length} correct.`);
-  
+
   if (answers && answers.length > 0) {
     traceLog.push(`Student selected ${answers.length} hotspot(s).`);
-    
+
     let correctSelections = 0;
     let incorrectSelections = 0;
-    
+
     answers.forEach(answer => {
       const shape = allShapes.find(s => s.id === answer.id);
       if (shape && shape.correct) {
@@ -177,11 +179,11 @@ export const getLogTrace = (model, session, env) => {
         incorrectSelections++;
       }
     });
-    
-    const missedCorrect = correctShapes.filter(correctShape => 
+
+    const missedCorrect = correctShapes.filter(correctShape =>
       !answers.some(answer => answer.id === correctShape.id)
     ).length;
-    
+
     if (correctSelections > 0) {
       traceLog.push(`${correctSelections} correct hotspot(s) selected.`);
     }
@@ -196,14 +198,14 @@ export const getLogTrace = (model, session, env) => {
   }
 
   const partialScoringEnabled = partialScoring.enabled(model, env);
-  
+
   if (partialScoringEnabled) {
     traceLog.push(`Score calculated using partial scoring.`);
-    
+
     if (answers && answers.length > 0) {
       let correctSelections = 0;
       let incorrectSelections = 0;
-      
+
       answers.forEach(answer => {
         const shape = allShapes.find(s => s.id === answer.id);
         if (shape && shape.correct) {
@@ -212,10 +214,10 @@ export const getLogTrace = (model, session, env) => {
           incorrectSelections++;
         }
       });
-      
+
       const totalCorrectAvailable = correctShapes.length;
       traceLog.push(`Partial scoring calculation: ${correctSelections} correct selections out of ${totalCorrectAvailable} available.`);
-      
+
       if (incorrectSelections > totalCorrectAvailable) {
         const extraSelections = incorrectSelections - (totalCorrectAvailable - correctSelections);
         traceLog.push(`${extraSelections} extra incorrect selection(s) beyond required amount are deducted from score.`);
@@ -236,23 +238,23 @@ export function outcome(config, session, env = {}) {
     log('outcome...');
 
     if (!session || isEmpty(session)) {
-      resolve({ 
-        score: 0, 
-        empty: true, 
-        traceLog: ['No hotspots selected. Score: 0.'] 
+      resolve({
+        score: 0,
+        empty: true,
+        traceLog: ['No hotspots selected. Score: 0.']
       });
-    } 
+    }
 
     if (session.answers) {
       const traceLog = getLogTrace(config, session, env);
       const score = getScore(config, session, env);
 
       resolve({ score, empty: false, traceLog });
     } else {
-      resolve({ 
-        score: 0, 
-        empty: true, 
-        traceLog: ['No hotspots selected. Score: 0.'] 
+      resolve({
+        score: 0,
+        empty: true,
+        traceLog: ['No hotspots selected. Score: 0.']
       });
     }
   });

packages/hotspot/src/hotspot/circle.jsx

@@ -50,6 +50,7 @@ class CircleComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       x,
       y,
       evaluateText,
@@ -88,7 +89,7 @@ class CircleComponent extends React.Component {
       }
     }
 
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
       <Group scaleX={scale} scaleY={scale}>
@@ -128,6 +129,7 @@ CircleComponent.propTypes = {
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
@@ -145,6 +147,7 @@ CircleComponent.propTypes = {
 CircleComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };