@pie-element/hotspot 11.2.0-beta.0 → 11.2.0-next.17

package/configure/src/index.js

@@ -1,213 +0,0 @@
-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);
-  }
-
-  connectedCallback() {
-    this._render();
-  }
-
-  disconnectedCallback() {
-    if (this._root) {
-      this._root.unmount();
-      this._root = null;
-    }
-  }
-}

package/configure/src/root.jsx

@@ -1,342 +0,0 @@
-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 checkNullish = (value) => value !== null && value !== undefined;
-
-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={checkNullish(model.hoverOutlineColor) ? model.hoverOutlineColor : 'black'}
-          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

@@ -1,81 +0,0 @@
-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

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