@pie-element/hotspot 11.1.2-next.2 → 11.1.2

package/configure/src/index.js

@@ -0,0 +1,208 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+import {
+  ModelUpdatedEvent,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-framework/pie-configure-events';
+
+import Root from './root';
+import sensibleDefaults from './defaults';
+
+const log = debug('hotspot:configure');
+
+export default class HotspotConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...sensibleDefaults.model,
+    ...model,
+    hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,
+    outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,
+    shapes: model.shapes || sensibleDefaults.model.shapes || {},
+  });
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = HotspotConfigure.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = HotspotConfigure.createDefaultModel(s);
+    this._render();
+  }
+
+  set configuration(c) {
+    const newConfiguration = {
+      ...sensibleDefaults.configuration,
+      ...c,
+    };
+
+    this._configuration = newConfiguration;
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+    this.dispatchModelUpdated(reset);
+    this._render();
+  }
+
+  onConfigurationChanged = (c) => {
+    this._configuration = c;
+    this._render();
+  };
+
+  onModelChangedByConfig = (m, propertyType) => {
+    const _model = m;
+
+    if (propertyType === 'multipleCorrect') {
+      const { rectangles = [], polygons = [], circles = [] } = _model.shapes || {};
+
+      _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));
+      _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));
+      _model.shapes.circles = circles.map((shape) => ({ ...shape, correct: false }));
+    }
+
+    this.onModelChanged(_model);
+  };
+
+  onColorChanged = (colorType, color) => {
+    this.onModelChanged({
+      ...this._model,
+      [colorType]: color,
+    });
+  };
+
+  onPromptChanged = (prompt) => {
+    this.onModelChanged({
+      ...this._model,
+      prompt,
+    });
+  };
+
+  onRationaleChanged = (rationale) => {
+    this.onModelChanged({
+      ...this._model,
+      rationale,
+    });
+  };
+
+  onTeacherInstructionsChanged = (teacherInstructions) => {
+    this.onModelChanged({
+      ...this._model,
+      teacherInstructions,
+    });
+  };
+
+  onUpdateImageDimension = (dimensions) => {
+    this.onModelChanged({
+      ...this._model,
+      dimensions,
+    });
+  };
+
+  onUpdateShapes = (shapes) => {
+    this.onModelChanged({
+      ...this._model,
+      shapes,
+    });
+  };
+
+  onImageUpload = (imageUrl) => {
+    this.onModelChanged({
+      ...this._model,
+      imageUrl,
+    });
+  };
+
+  insertImage = (handler) => {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  };
+
+  onDeleteImage = (src, done) => {
+    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, {
+      configuration: this._configuration,
+      model: this._model,
+      onColorChanged: this.onColorChanged,
+      onImageUpload: this.onImageUpload,
+      onRationaleChanged: this.onRationaleChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      onPromptChanged: this.onPromptChanged,
+      onUpdateImageDimension: this.onUpdateImageDimension,
+      imageSupport: {
+        add: this.insertImage,
+        delete: this.onDeleteImage,
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+      onUpdateShapes: this.onUpdateShapes,
+      onModelChangedByConfig: this.onModelChangedByConfig,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/configure/src/root.jsx

@@ -0,0 +1,346 @@
+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-tip-tap';
+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;
+    const cType = `${fieldType}Color`;
+
+    onColorChanged(cType, color);
+  };
+
+  handleOnUpdateImageDimensions = (value, resizeType) => {
+    const {
+      model: { dimensions, shapes },
+      configuration: { preserveAspectRatio = {} },
+      onUpdateImageDimension,
+      onUpdateShapes,
+    } = this.props;
+
+    const nextImageDimensions = { ...dimensions, [resizeType]: value };
+
+    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept
+    const updatedDimensions = updateImageDimensions(
+      dimensions,
+      nextImageDimensions,
+      preserveAspectRatio.enabled,
+      resizeType,
+    );
+    // transform shapes map into shapes array
+    const shapesArray = getAllShapes(shapes);
+    // transform all the shapes to fit the re-sized image
+    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);
+    // transform shapes array back into shapes map
+
+    onUpdateShapes(groupShapes(updatedShapes));
+    onUpdateImageDimension(updatedDimensions);
+  };
+
+  render() {
+    const {
+      configuration,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onConfigurationChanged,
+      onImageUpload,
+      onModelChangedByConfig,
+      onPromptChanged,
+      onRationaleChanged,
+      onUpdateImageDimension,
+      onTeacherInstructionsChanged,
+      onUpdateShapes,
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      multipleCorrect = {},
+      partialScoring = {},
+      preserveAspectRatio = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      shapes: shapesError,
+      selections: selectionsError,
+      teacherInstructions: teacherInstructionsError,
+    } = 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),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+    };
+    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),
+    };
+
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props,
+    });
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            onChangeModel={onModelChangedByConfig}
+            configuration={configuration}
+            onChangeConfiguration={onConfigurationChanged}
+            groups={{
+              Settings: panelSettings,
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        {teacherInstructionsEnabled && (
+          <PromptContainer label={teacherInstructions.label}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={onTeacherInstructionsChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              error={teacherInstructionsError}
+              toolbarOpts={toolbarOpts}
+              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </PromptContainer>
+        )}
+
+        {promptEnabled && (
+          <PromptContainer label={prompt.label}>
+            <EditableHtml
+              markup={model.prompt || ''}
+              onChange={onPromptChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              error={promptError}
+              toolbarOpts={toolbarOpts}
+              pluginProps={getPluginProps(prompt?.inputConfiguration)}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={defaultImageMaxWidth}
+              maxImageHeight={defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {promptError && <ErrorText>{promptError}</ErrorText>}
+          </PromptContainer>
+        )}
+
+        <FlexContainer>
+          <SubHeading variant="h6">
+            Define Hotspot
+          </SubHeading>
+          <StyledTooltip
+            disableFocusListener
+            disableTouchListener
+            placement={'left'}
+            title={validationMessage}
+          >
+            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
+          </StyledTooltip>
+        </FlexContainer>
+
+        <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)}
+        />
+
+        <HotspotContainer
+          dimensions={model.dimensions}
+          imageUrl={model.imageUrl}
+          multipleCorrect={model.multipleCorrect}
+          hasErrors={!!shapesError || !!selectionsError}
+          hotspotColor={model.hotspotColor}
+          outlineColor={model.outlineColor}
+          selectedHotspotColor={model.selectedHotspotColor}
+          hoverOutlineColor={model.hoverOutlineColor}
+          onUpdateImageDimension={onUpdateImageDimension}
+          onUpdateShapes={onUpdateShapes}
+          onImageUpload={onImageUpload}
+          shapes={model.shapes}
+          strokeWidth={model.strokeWidth}
+          preserveAspectRatioEnabled={preserveAspectRatio.enabled}
+          insertImage={imageSupport && imageSupport.add}
+        />
+        {shapesError && <ErrorText>{shapesError}</ErrorText>}
+        {selectionsError && <ErrorText>{selectionsError}</ErrorText>}
+
+        {model.imageUrl && (
+          <React.Fragment>
+            <Typography variant="h6">Image Dimensions</Typography>
+
+            <DimensionsContainer>
+              <FieldContainer>
+                <NumberTextField
+                  key="hotspot-manual-width"
+                  label="Width"
+                  value={model.dimensions.width}
+                  min={0}
+                  onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
+                  showErrorWhenOutsideRange
+                />
+              </FieldContainer>
+
+              <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 && (
+          <PromptContainer label={rationale.label}>
+            <EditableHtml
+              markup={model.rationale || ''}
+              onChange={onRationaleChanged}
+              imageSupport={imageSupport}
+              error={rationaleError}
+              toolbarOpts={toolbarOpts}
+              pluginProps={getPluginProps(rationale?.inputConfiguration)}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {rationaleError && <ErrorText>{rationaleError}</ErrorText>}
+          </PromptContainer>
+        )}
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+Root.propTypes = {
+  configuration: PropTypes.object,
+  model: PropTypes.object.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func,
+    delete: PropTypes.func,
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func,
+    delete: PropTypes.func,
+  }),
+  onImageUpload: PropTypes.func.isRequired,
+  onColorChanged: PropTypes.func.isRequired,
+  onPromptChanged: PropTypes.func.isRequired,
+  onUpdateImageDimension: PropTypes.func.isRequired,
+  onUpdateShapes: PropTypes.func.isRequired,
+  onModelChangedByConfig: PropTypes.func.isRequired,
+  onRationaleChanged: PropTypes.func.isRequired,
+  onConfigurationChanged: PropTypes.func.isRequired,
+  onTeacherInstructionsChanged: PropTypes.func.isRequired,
+};
+
+export default Root;

package/configure/src/shapes/circle.js

@@ -0,0 +1,81 @@
+export class CircleShape {
+  static name = 'circle'
+
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);
+    const newCircle = {
+      id: `${highestId + 1}`,
+      radius: 0,
+      x: e.evt.layerX,
+      y: e.evt.layerY,
+      group: 'circles',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newCircle);
+
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newCircle.id,
+    };
+  }
+
+  static finalizeCreation(state, props) {
+    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = state.shapes[currentShapeIndex];
+
+      // Check if the shape is a valid circle (has more than 0 radius) before finalizing
+      if (currentShape.radius > 0) {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+        };
+      } else {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),
+        };
+      }
+    }
+
+    return {
+      ...state,
+      isDrawing: false,
+      stateShapes: false,
+      isDrawingShapeId: undefined,
+    };
+  }
+
+  static handleMouseMove(state, e) {
+    const { isDrawing, isDrawingShapeId, shapes } = state;
+
+    if (isDrawing) {
+      const tempShapes = [...shapes];
+      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);
+
+      if (resizingShapeIndex !== -1) {
+        const resizingShape = tempShapes[resizingShapeIndex];
+
+        // Calculate radius based on mouse position
+        const dx = e.evt.layerX - resizingShape.x;
+        const dy = e.evt.layerY - resizingShape.y;
+        resizingShape.radius = Math.sqrt(dx * dx + dy * dy);
+
+        return {
+          shapes: tempShapes,
+        };
+      }
+    }
+
+    return state;
+  }
+}

package/configure/src/shapes/index.js

@@ -0,0 +1,4 @@
+export * from './circle';
+export * from './rectagle';
+export * from './polygon';
+export * from './utils';