@pie-element/hotspot 9.3.4-next.0 → 10.0.0-beta.0

package/configure/src/hotspot-rectangle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Rect, Group, Transformer } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles/index';
 import DeleteWidget from './DeleteWidget';
 
 class RectComponent extends React.Component {
@@ -75,7 +74,6 @@ class RectComponent extends React.Component {
 
   render() {
     const {
-      classes,
       correct,
       height,
       hotspotColor,
@@ -92,7 +90,7 @@ class RectComponent extends React.Component {
     const { hovered } = this.state;
 
     return (
-      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>
         {hoverOutlineColor && hovered && (
           <Rect
             x={x}
@@ -106,7 +104,6 @@ class RectComponent extends React.Component {
         )}
 
         <Rect
-          classes={classes.base}
           ref={this.shapeRef}
           width={width}
           height={height}
@@ -122,6 +119,8 @@ class RectComponent extends React.Component {
           onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
+          opacity={0.5}
+          cursor="pointer"
         />
         {!this.state.isDragging && this.state.hovered && (
           <DeleteWidget id={id} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />
@@ -144,19 +143,7 @@ class RectComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-  },
-
-  group: {
-    padding: '12px',
-  },
-});
-
 RectComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   correct: PropTypes.bool,
   isDrawing: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
@@ -178,4 +165,4 @@ RectComponent.defaultProps = {
   correct: false,
 };
 
-export default withStyles(styles)(RectComponent);
+export default RectComponent;

package/configure/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debug from 'debug';
 import {
   ModelUpdatedEvent,
@@ -25,6 +25,7 @@ export default class HotspotConfigure extends HTMLElement {
 
   constructor() {
     super();
+    this._root = null;
     this._model = HotspotConfigure.createDefaultModel();
     this._configuration = sensibleDefaults.configuration;
     this.onModelChanged = this.onModelChanged.bind(this);
@@ -193,6 +194,15 @@ export default class HotspotConfigure extends HTMLElement {
       onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,
     });
 
-    ReactDOM.render(element, this);
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
   }
 }

package/configure/src/root.jsx

@@ -2,16 +2,56 @@ import React from 'react';
 import { settings, layout, InputContainer, NumberTextField } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-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 { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Info from '@mui/icons-material/Info';
+import Tooltip from '@mui/material/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
 import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
 
 const { Panel, toggle, dropdown } = settings;
 
+const DimensionsContainer = styled('div')(({ theme }) => ({
+  display: 'flex',
+  marginBottom: theme.spacing(1.5),
+}));
+
+const FieldContainer = styled('div')({
+  flex: 1,
+  width: '90%',
+});
+
+const PromptContainer = styled(InputContainer)(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%',
+}));
+
+const SubHeading = styled(Typography)(({ theme }) => ({
+  marginRight: theme.spacing(1),
+}));
+
+const FlexContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const StyledTooltip = styled(Tooltip)(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+}));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
 export class Root extends React.Component {
   handleColorChange = (fieldType, color) => {
     const { onColorChanged } = this.props;
@@ -49,7 +89,6 @@ export class Root extends React.Component {
 
   render() {
     const {
-      classes,
       configuration,
       model,
       imageSupport,
@@ -144,7 +183,7 @@ export class Root extends React.Component {
         }
       >
         {teacherInstructionsEnabled && (
-          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>
+          <PromptContainer label={teacherInstructions.label}>
             <EditableHtml
               markup={model.teacherInstructions || ''}
               onChange={onTeacherInstructionsChanged}
@@ -160,12 +199,12 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}
-          </InputContainer>
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </PromptContainer>
         )}
 
         {promptEnabled && (
-          <InputContainer label={prompt.label} className={classes.promptContainer}>
+          <PromptContainer label={prompt.label}>
             <EditableHtml
               markup={model.prompt || ''}
               onChange={onPromptChanged}
@@ -181,24 +220,23 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {promptError && <div className={classes.errorText}>{promptError}</div>}
-          </InputContainer>
+            {promptError && <ErrorText>{promptError}</ErrorText>}
+          </PromptContainer>
         )}
 
-        <div className={classes.flexContainer}>
-          <Typography className={classes.subheading} variant="subheading">
+        <FlexContainer>
+          <SubHeading variant="h6">
             Define Hotspot
-          </Typography>
-          <Tooltip
-            classes={{ tooltip: classes.tooltip }}
+          </SubHeading>
+          <StyledTooltip
             disableFocusListener
             disableTouchListener
             placement={'left'}
             title={validationMessage}
           >
             <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
-          </Tooltip>
-        </div>
+          </StyledTooltip>
+        </FlexContainer>
 
         <HotspotPalette
           hotspotColor={model.hotspotColor}
@@ -226,39 +264,41 @@ export class Root extends React.Component {
           preserveAspectRatioEnabled={preserveAspectRatio.enabled}
           insertImage={imageSupport && imageSupport.add}
         />
-        {shapesError && <div className={classes.errorText}>{shapesError}</div>}
-        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
+        {shapesError && <ErrorText>{shapesError}</ErrorText>}
+        {selectionsError && <ErrorText>{selectionsError}</ErrorText>}
 
         {model.imageUrl && (
           <React.Fragment>
-            <Typography variant="subheading">Image Dimensions</Typography>
+            <Typography variant="h6">Image Dimensions</Typography>
 
-            <div className={classes.dimensions}>
-              <NumberTextField
-                key="hotspot-manual-width"
-                label="Width"
-                value={model.dimensions.width}
-                min={0}
-                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
-                showErrorWhenOutsideRange
-                className={classes.field}
-              />
+            <DimensionsContainer>
+              <FieldContainer>
+                <NumberTextField
+                  key="hotspot-manual-width"
+                  label="Width"
+                  value={model.dimensions.width}
+                  min={0}
+                  onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
+                  showErrorWhenOutsideRange
+                />
+              </FieldContainer>
 
-              <NumberTextField
-                key="hotspot-manual-height"
-                label="Height"
-                value={model.dimensions.height}
-                min={0}
-                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
-                showErrorWhenOutsideRange
-                className={classes.field}
-              />
-            </div>
+              <FieldContainer>
+                <NumberTextField
+                  key="hotspot-manual-height"
+                  label="Height"
+                  value={model.dimensions.height}
+                  min={0}
+                  onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
+                  showErrorWhenOutsideRange
+                />
+              </FieldContainer>
+            </DimensionsContainer>
           </React.Fragment>
         )}
 
         {rationaleEnabled && (
-          <InputContainer label={rationale.label} className={classes.promptContainer}>
+          <PromptContainer label={rationale.label}>
             <EditableHtml
               markup={model.rationale || ''}
               onChange={onRationaleChanged}
@@ -273,49 +313,15 @@ export class Root extends React.Component {
               languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
               mathMlOptions={mathMlOptions}
             />
-            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}
-          </InputContainer>
+            {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+          </PromptContainer>
         )}
       </layout.ConfigLayout>
     );
   }
 }
 
-const styles = (theme) => ({
-  dimensions: {
-    display: 'flex',
-    marginBottom: theme.spacing.unit * 1.5,
-  },
-  field: {
-    flex: 1,
-    width: '90%',
-  },
-  promptContainer: {
-    paddingTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    width: '100%',
-  },
-  subheading: {
-    marginRight: theme.spacing.unit,
-  },
-  flexContainer: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  tooltip: {
-    fontSize: theme.typography.fontSize - 2,
-    whiteSpace: 'pre',
-    maxWidth: '500px',
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingTop: theme.spacing.unit,
-  },
-});
-
 Root.propTypes = {
-  classes: PropTypes.object.isRequired,
   configuration: PropTypes.object,
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
@@ -337,4 +343,4 @@ Root.propTypes = {
   onTeacherInstructionsChanged: PropTypes.func.isRequired,
 };
 
-export default withStyles(styles)(Root);
+export default Root;

package/configure/src/upload-control.jsx

@@ -1,34 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles/index';
 
 import Button from './button';
 
-const UploadControl = ({ classNameButton, classNameSection, classes, label, onInputClick, onUploadImage, setRef }) => (
-  <div className={classNameSection}>
-    <Button className={classNameButton} label={label} onClick={onInputClick} />
+const UploadControl = ({ label, onInputClick, onUploadImage, setRef }) => (
+  <>
+    <Button label={label} onClick={onInputClick} />
     <input
       accept="image/*"
-      className={classes.input}
+      style={{ display: 'none' }}
       onChange={onUploadImage}
       ref={(ref) => {
         setRef(ref);
       }}
       type="file"
     />
-  </div>
+  </>
 );
 
-const styles = () => ({
-  input: {
-    display: 'none',
-  },
-});
-
 UploadControl.propTypes = {
-  classes: PropTypes.object.isRequired,
-  classNameButton: PropTypes.string,
-  classNameSection: PropTypes.string,
   label: PropTypes.string.isRequired,
   onInputClick: PropTypes.func.isRequired,
   onUploadImage: PropTypes.func.isRequired,
@@ -40,4 +30,4 @@ UploadControl.defaultProps = {
   classNameSection: '',
 };
 
-export default withStyles(styles)(UploadControl);
+export default UploadControl;

package/controller/lib/defaults.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _default = {
+exports.default = void 0;
+var _default = exports.default = {
   dimensions: {
     height: 0,
     width: 0
@@ -30,5 +30,4 @@ var _default = {
   teacherInstructionsEnabled: true,
   toolbarEditorPosition: 'bottom'
 };
-exports["default"] = _default;
 //# sourceMappingURL=defaults.js.map

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["dimensions","height","width","hotspotColor","hotspotList","imageUrl","multipleCorrect","outlineColor","outlineList","partialScoring","prompt","promptEnabled","rationaleEnabled","shapes","rectangles","polygons","circles","strokeWidth","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition"],"mappings":";;;;;;eAAe;AACbA,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE,CAAV;AAAaC,IAAAA,KAAK,EAAE;AAApB,GADC;AAEbC,EAAAA,YAAY,EAAE,2BAFD;AAGbC,EAAAA,WAAW,EAAE,CAAC,2BAAD,CAHA;AAIbC,EAAAA,QAAQ,EAAE,EAJG;AAKbC,EAAAA,eAAe,EAAE,IALJ;AAMbC,EAAAA,YAAY,EAAE,MAND;AAObC,EAAAA,WAAW,EAAE,CAAC,MAAD,CAPA;AAQbC,EAAAA,cAAc,EAAE,KARH;AASbC,EAAAA,MAAM,EAAE,EATK;AAUbC,EAAAA,aAAa,EAAE,IAVF;AAWbC,EAAAA,gBAAgB,EAAE,IAXL;AAYbC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,UAAU,EAAE,EAAd;AAAkBC,IAAAA,QAAQ,EAAE,EAA5B;AAAgCC,IAAAA,OAAO,EAAE;AAAzC,GAZK;AAabC,EAAAA,WAAW,EAAE,CAbA;AAcbC,EAAAA,0BAA0B,EAAE,IAdf;AAebC,EAAAA,mBAAmB,EAAE,EAfR;AAgBbC,EAAAA,0BAA0B,EAAE,IAhBf;AAiBbC,EAAAA,qBAAqB,EAAE;AAjBV,C","sourcesContent":["export default {\n  dimensions: { height: 0, width: 0 },\n  hotspotColor: 'rgba(137, 183, 244, 0.25)',\n  hotspotList: ['rgba(137, 183, 244, 0.25)'],\n  imageUrl: '',\n  multipleCorrect: true,\n  outlineColor: 'blue',\n  outlineList: ['blue'],\n  partialScoring: false,\n  prompt: '',\n  promptEnabled: true,\n  rationaleEnabled: true,\n  shapes: { rectangles: [], polygons: [], circles: [] },\n  strokeWidth: 5,\n  studentInstructionsEnabled: true,\n  teacherInstructions: '',\n  teacherInstructionsEnabled: true,\n  toolbarEditorPosition: 'bottom',\n};\n"],"file":"defaults.js"}
+{"version":3,"file":"defaults.js","names":["dimensions","height","width","hotspotColor","hotspotList","imageUrl","multipleCorrect","outlineColor","outlineList","partialScoring","prompt","promptEnabled","rationaleEnabled","shapes","rectangles","polygons","circles","strokeWidth","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  dimensions: { height: 0, width: 0 },\n  hotspotColor: 'rgba(137, 183, 244, 0.25)',\n  hotspotList: ['rgba(137, 183, 244, 0.25)'],\n  imageUrl: '',\n  multipleCorrect: true,\n  outlineColor: 'blue',\n  outlineList: ['blue'],\n  partialScoring: false,\n  prompt: '',\n  promptEnabled: true,\n  rationaleEnabled: true,\n  shapes: { rectangles: [], polygons: [], circles: [] },\n  strokeWidth: 5,\n  studentInstructionsEnabled: true,\n  teacherInstructions: '',\n  teacherInstructionsEnabled: true,\n  toolbarEditorPosition: 'bottom',\n};\n"],"mappings":";;;;;;iCAAe;EACbA,UAAU,EAAE;IAAEC,MAAM,EAAE,CAAC;IAAEC,KAAK,EAAE;EAAE,CAAC;EACnCC,YAAY,EAAE,2BAA2B;EACzCC,WAAW,EAAE,CAAC,2BAA2B,CAAC;EAC1CC,QAAQ,EAAE,EAAE;EACZC,eAAe,EAAE,IAAI;EACrBC,YAAY,EAAE,MAAM;EACpBC,WAAW,EAAE,CAAC,MAAM,CAAC;EACrBC,cAAc,EAAE,KAAK;EACrBC,MAAM,EAAE,EAAE;EACVC,aAAa,EAAE,IAAI;EACnBC,gBAAgB,EAAE,IAAI;EACtBC,MAAM,EAAE;IAAEC,UAAU,EAAE,EAAE;IAAEC,QAAQ,EAAE,EAAE;IAAEC,OAAO,EAAE;EAAG,CAAC;EACrDC,WAAW,EAAE,CAAC;EACdC,0BAA0B,EAAE,IAAI;EAChCC,mBAAmB,EAAE,EAAE;EACvBC,0BAA0B,EAAE,IAAI;EAChCC,qBAAqB,EAAE;AACzB,CAAC","ignoreList":[]}