@pie-element/hotspot 4.8.0 → 4.8.1-beta.587

package/configure/src/hotspot-palette.jsx

@@ -6,14 +6,14 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles } from '@material-ui/core/styles';
 
 class Palette extends React.Component {
-  onChange = (name) => event => {
+  onChange = (name) => (event) => {
     const { value } = event.target;
     const { onHotspotColorChange, onOutlineColorChange } = this.props;
 
     if (name === 'hotspot') {
       onHotspotColorChange(value);
     } else {
-      onOutlineColorChange(value)
+      onOutlineColorChange(value);
     }
   };
 
@@ -23,18 +23,9 @@ class Palette extends React.Component {
     return (
       <div className={classes.base}>
         <InputContainer label="Hot Spot" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('hotspot')}
-            value={hotspotColor}
-          >
-            {hotspotList.map(hotspot => (
-              <MenuItem
-                key={hotspot}
-                value={hotspot}
-                className={classes.item}
-                style={{ backgroundColor: hotspot }}
-              >
+          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>
+            {hotspotList.map((hotspot) => (
+              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>
                 {hotspot}
               </MenuItem>
             ))}
@@ -42,12 +33,8 @@ class Palette extends React.Component {
         </InputContainer>
 
         <InputContainer label="Response Outline" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('outline')}
-            value={outlineColor}
-          >
-            {outlineList.map(outline => (
+          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
+            {outlineList.map((outline) => (
               <MenuItem
                 key={outline}
                 value={outline}
@@ -64,21 +51,21 @@ class Palette extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
     marginTop: theme.spacing.unit * 2,
-    display: 'flex'
+    display: 'flex',
   },
   input: {
     flex: 1,
-    width: '90%'
+    width: '90%',
   },
   item: {
     borderRadius: '2px',
     height: '22px',
     marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
 });
 
@@ -89,7 +76,7 @@ Palette.propTypes = {
   onHotspotColorChange: PropTypes.func.isRequired,
   onOutlineColorChange: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
-  outlineList: PropTypes.array.isRequired
+  outlineList: PropTypes.array.isRequired,
 };
 
 export default withStyles(styles)(Palette);

package/configure/src/hotspot-polygon.jsx

@@ -6,8 +6,8 @@ import { withStyles } from '@material-ui/core/styles/index';
 class PolComponent extends React.Component {
   static getDerivedStateFromProps(nextProps) {
     const { points } = nextProps;
-    const xList = points.map(p => (p.x));
-    const yList = points.map(p => (p.y));
+    const xList = points.map((p) => p.x);
+    const yList = points.map((p) => p.y);
 
     const xOffset = Math.min(...xList);
     const yOffset = Math.max(...yList);
@@ -16,14 +16,16 @@ class PolComponent extends React.Component {
       return {
         x: xOffset,
         y: yOffset,
-        points: points.reduce((acc, point) => { return acc.concat([point.x - xOffset, point.y - yOffset]) }, [])
+        points: points.reduce((acc, point) => {
+          return acc.concat([point.x - xOffset, point.y - yOffset]);
+        }, []),
       };
     }
 
     return {
       x: 0,
       y: 0,
-      points: []
+      points: [],
     };
   }
 
@@ -31,8 +33,8 @@ class PolComponent extends React.Component {
 
   handleClick = (e) => {
     const { points } = this.props;
-    const xList = points.map(p => (p.x));
-    const yList = points.map(p => (p.y));
+    const xList = points.map((p) => p.x);
+    const yList = points.map((p) => p.y);
 
     const width = Math.max(...xList) - Math.min(...xList);
     const height = Math.max(...yList) - Math.min(...yList);
@@ -63,7 +65,7 @@ class PolComponent extends React.Component {
       if (index % 2 === 0 && index + 1 < points.length) {
         acc.push({
           x: currentPointCoordinate + e.target.x(),
-          y: points[index + 1]  + e.target.y()
+          y: points[index + 1] + e.target.y(),
         });
 
         return acc;
@@ -73,18 +75,12 @@ class PolComponent extends React.Component {
     }, []);
 
     onDragEnd(id, {
-      points: newPoints
-    })
+      points: newPoints,
+    });
   };
 
   render() {
-    const {
-      classes,
-      correct,
-      hotspotColor,
-      outlineColor,
-      strokeWidth = 5
-    } = this.props;
+    const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
     const { points, x, y } = this.state;
 
     return (
@@ -113,7 +109,7 @@ class PolComponent extends React.Component {
 const styles = () => ({
   base: {
     cursor: 'pointer',
-    opacity: 0.5
+    opacity: 0.5,
   },
 });
 
@@ -126,11 +122,13 @@ PolComponent.propTypes = {
   onClick: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
-  points: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number
-  })).isRequired,
-  strokeWidth: PropTypes.number
+  points: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  ).isRequired,
+  strokeWidth: PropTypes.number,
 };
 
 PolComponent.defaultProps = {

package/configure/src/hotspot-rectangle.jsx

@@ -26,22 +26,12 @@ class RectComponent extends React.Component {
 
     onDragEnd(id, {
       x: e.target.x(),
-      y: e.target.y()
-    })
+      y: e.target.y(),
+    });
   };
 
   render() {
-    const {
-      classes,
-      correct,
-      height,
-      hotspotColor,
-      outlineColor,
-      width,
-      x,
-      y,
-      strokeWidth = 5
-    } = this.props;
+    const { classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
 
     return (
       <Group>
@@ -69,7 +59,7 @@ class RectComponent extends React.Component {
 const styles = () => ({
   base: {
     cursor: 'pointer',
-    opacity: 0.5
+    opacity: 0.5,
   },
 });
 
@@ -86,7 +76,7 @@ RectComponent.propTypes = {
   width: PropTypes.number.isRequired,
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
-  strokeWidth: PropTypes.number
+  strokeWidth: PropTypes.number,
 };
 
 RectComponent.defaultProps = {

package/configure/src/index.js

@@ -5,6 +5,8 @@ import {
   ModelUpdatedEvent,
   DeleteImageEvent,
   InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
 } from '@pie-framework/pie-configure-events';
 
 import Root from './root';
@@ -18,7 +20,7 @@ export default class HotspotConfigure extends HTMLElement {
     ...model,
     hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,
     outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,
-    shapes: model.shapes || sensibleDefaults.model.shapes || {}
+    shapes: model.shapes || sensibleDefaults.model.shapes || {},
   });
 
   constructor() {
@@ -61,8 +63,8 @@ export default class HotspotConfigure extends HTMLElement {
     if (propertyType === 'multipleCorrect') {
       const { rectangles = [], polygons = [] } = _model.shapes || {};
 
-      _model.shapes.rectangles = rectangles.map(shape => ({ ...shape, correct: false }));
-      _model.shapes.polygons = polygons.map(shape => ({ ...shape, correct: false }));
+      _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));
+      _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));
     }
 
     this.onModelChanged(_model);
@@ -71,53 +73,53 @@ export default class HotspotConfigure extends HTMLElement {
   onColorChanged = (colorType, color) => {
     this.onModelChanged({
       ...this._model,
-      [colorType]: color
+      [colorType]: color,
     });
   };
 
-  onPromptChanged = prompt => {
+  onPromptChanged = (prompt) => {
     this.onModelChanged({
       ...this._model,
-      prompt
+      prompt,
     });
   };
 
-  onRationaleChanged = rationale => {
+  onRationaleChanged = (rationale) => {
     this.onModelChanged({
       ...this._model,
-      rationale
+      rationale,
     });
   };
 
-  onTeacherInstructionsChanged = teacherInstructions => {
+  onTeacherInstructionsChanged = (teacherInstructions) => {
     this.onModelChanged({
       ...this._model,
-      teacherInstructions
+      teacherInstructions,
     });
   };
 
-  onUpdateImageDimension = dimensions => {
+  onUpdateImageDimension = (dimensions) => {
     this.onModelChanged({
       ...this._model,
-      dimensions
+      dimensions,
     });
   };
 
-  onUpdateShapes = shapes => {
+  onUpdateShapes = (shapes) => {
     this.onModelChanged({
       ...this._model,
-      shapes
+      shapes,
     });
   };
 
-  onImageUpload = imageUrl => {
+  onImageUpload = (imageUrl) => {
     this.onModelChanged({
       ...this._model,
-      imageUrl
+      imageUrl,
     });
   };
 
-  insertImage = handler => {
+  insertImage = (handler) => {
     this.dispatchEvent(new InsertImageEvent(handler));
   };
 
@@ -125,6 +127,14 @@ export default class HotspotConfigure extends HTMLElement {
     this.dispatchEvent(new DeleteImageEvent(src, done));
   };
 
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
   _render() {
     log('_render');
     let element = React.createElement(Root, {
@@ -138,7 +148,11 @@ export default class HotspotConfigure extends HTMLElement {
       onUpdateImageDimension: this.onUpdateImageDimension,
       imageSupport: {
         add: this.insertImage,
-        delete: this.onDeleteImage
+        delete: this.onDeleteImage,
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
       },
       onUpdateShapes: this.onUpdateShapes,
       onModelChangedByConfig: this.onModelChangedByConfig,

package/configure/src/root.jsx

@@ -1,18 +1,15 @@
 import React from 'react';
-import {
-  settings,
-  layout,
-  InputContainer,
-  NumberTextField
-} from '@pie-lib/config-ui';
+import { settings, layout, InputContainer, NumberTextField } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-
+import Typography from '@material-ui/core/Typography';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
-import { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
+import classNames from 'classnames';
+import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
 
 const { Panel, toggle } = settings;
 
@@ -39,7 +36,7 @@ export class Root extends React.Component {
       dimensions,
       nextImageDimensions,
       preserveAspectRatio.enabled,
-      resizeType
+      resizeType,
     );
     // transform shapes map into shapes array
     const shapesArray = getAllShapes(shapes);
@@ -57,6 +54,7 @@ export class Root extends React.Component {
       configuration,
       model,
       imageSupport,
+      uploadSoundSupport,
       onConfigurationChanged,
       onImageUpload,
       onModelChangedByConfig,
@@ -64,21 +62,55 @@ export class Root extends React.Component {
       onRationaleChanged,
       onUpdateImageDimension,
       onTeacherInstructionsChanged,
-      onUpdateShapes
+      onUpdateShapes,
     } = this.props;
     const {
+      maxImageWidth = {},
+      maxImageHeight = {},
       multipleCorrect = {},
       partialScoring = {},
+      preserveAspectRatio = {},
       prompt = {},
-      teacherInstructions = {},
       rationale = {},
-      preserveAspectRatio = {}
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
     } = configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } = model || {};
+    const {
+      errors,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+    } = model || {};
+    const { shapesError, selectionsError } = errors || {};
+    const validationMessage = generateValidationMessage(configuration);
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
+    };
+
+    const panelSettings = {
+      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+    };
 
     return (
       <div className={classes.base}>
         <layout.ConfigLayout
+          hideSettings={settingsPanelDisabled}
           settings={
             <Panel
               model={model}
@@ -86,19 +118,8 @@ export class Root extends React.Component {
               configuration={configuration}
               onChangeConfiguration={onConfigurationChanged}
               groups={{
-                'Settings': {
-                  multipleCorrect:
-                    multipleCorrect.settings && toggle(multipleCorrect.label),
-                  partialScoring:
-                    partialScoring.settings && toggle(partialScoring.label),
-                  promptEnabled:
-                    prompt.settings && toggle(prompt.label),
-                },
-                Properties: {
-                  teacherInstructionsEnabled:
-                    teacherInstructions.settings && toggle(teacherInstructions.label),
-                  rationaleEnabled: rationale.settings && toggle(rationale.label)
-                }
+                Settings: panelSettings,
+                Properties: panelProperties,
               }}
             />
           }
@@ -111,9 +132,16 @@ export class Root extends React.Component {
                   onChange={onTeacherInstructionsChanged}
                   imageSupport={imageSupport}
                   nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />
               </InputContainer>
             )}
+
             {promptEnabled && (
               <InputContainer label={prompt.label} className={classes.prompt}>
                 <EditableHtml
@@ -121,44 +149,61 @@ export class Root extends React.Component {
                   onChange={onPromptChanged}
                   imageSupport={imageSupport}
                   nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={defaultImageMaxWidth}
+                  maxImageHeight={defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />
               </InputContainer>
             )}
 
             {rationaleEnabled && (
-              <InputContainer
-                label={rationale.label}
-                className={classes.prompt}
-              >
+              <InputContainer label={rationale.label} className={classes.prompt}>
                 <EditableHtml
                   markup={model.rationale || ''}
                   onChange={onRationaleChanged}
                   imageSupport={imageSupport}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />
               </InputContainer>
             )}
 
-            <Typography className={classes.label} variant="subheading">
-              Define Hotspot
-            </Typography>
+            <div className={classNames(classes.label, classes.flexContainer)}>
+              <Typography className={classes.subheading} variant="subheading">
+                Define Hotspot
+              </Typography>
+              <Tooltip
+                classes={{ tooltip: classes.tooltip }}
+                disableFocusListener
+                disableTouchListener
+                placement={'left'}
+                title={validationMessage}
+              >
+                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
+              </Tooltip>
+            </div>
 
             <HotspotPalette
               hotspotColor={model.hotspotColor}
               hotspotList={model.hotspotList}
               outlineColor={model.outlineColor}
               outlineList={model.outlineList}
-              onHotspotColorChange={color =>
-                this.handleColorChange('hotspot', color)
-              }
-              onOutlineColorChange={color =>
-                this.handleColorChange('outline', color)
-              }
+              onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}
+              onOutlineColorChange={(color) => this.handleColorChange('outline', color)}
             />
 
             <HotspotContainer
               dimensions={model.dimensions}
               imageUrl={model.imageUrl}
               multipleCorrect={model.multipleCorrect}
+              hasErrors={!!shapesError || !!selectionsError}
               hotspotColor={model.hotspotColor}
               outlineColor={model.outlineColor}
               onUpdateImageDimension={onUpdateImageDimension}
@@ -168,6 +213,8 @@ export class Root extends React.Component {
               strokeWidth={model.strokeWidth}
               preserveAspectRatioEnabled={preserveAspectRatio.enabled}
             />
+            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
 
             {model.imageUrl && (
               <div>
@@ -185,6 +232,7 @@ export class Root extends React.Component {
                     showErrorWhenOutsideRange
                     className={classes.field}
                   />
+
                   <NumberTextField
                     key="hotspot-manual-height"
                     label="Height"
@@ -204,35 +252,52 @@ export class Root extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
   },
   container: {
     display: 'flex',
-    marginTop: theme.spacing.unit
+    marginTop: theme.spacing.unit,
   },
   dimensions: {
-    display: 'flex'
+    display: 'flex',
   },
   field: {
     flex: 1,
-    width: '90%'
+    width: '90%',
   },
   label: {
-    marginTop: theme.spacing.unit * 4
+    marginTop: theme.spacing.unit * 4,
   },
   prompt: {
     paddingTop: theme.spacing.unit * 2,
-    width: '100%'
+    width: '100%',
+  },
+  subheading: {
+    marginRight: theme.spacing.unit,
   },
   regular: {
-    marginBottom: theme.spacing.unit * 3
+    marginBottom: theme.spacing.unit * 3,
   },
   switchElement: {
     justifyContent: 'space-between',
-    margin: 0
-  }
+    margin: 0,
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  tooltip: {
+    fontSize: '12px',
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+  errorText: {
+    fontSize: '12px',
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit,
+  },
 });
 
 Root.propTypes = {
@@ -241,7 +306,11 @@ Root.propTypes = {
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
     add: PropTypes.func,
-    delete: PropTypes.func
+    delete: PropTypes.func,
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func,
+    delete: PropTypes.func,
   }),
   onImageUpload: PropTypes.func.isRequired,
   onColorChanged: PropTypes.func.isRequired,