@pie-element/drawing-response 12.1.2-next.2 → 12.1.2

package/configure/src/__tests__/root.test.jsx

@@ -0,0 +1,110 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { Root } from '../root';
+import defaults from '../defaults';
+
+jest.mock('@pie-lib/config-ui', () => ({
+  settings: {
+    Panel: (props) => <div {...props} />,
+    toggle: jest.fn(),
+    radio: jest.fn(),
+    dropdown: jest.fn(),
+  },
+  layout: {
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+}));
+
+jest.mock('@pie-lib/editable-html-tip-tap', () => (props) => <div {...props} />);
+
+jest.mock('../image-container', () => (props) => <div data-testid="image-container" {...props} />);
+
+const theme = createTheme();
+
+const model = {
+  prompt: 'Test Prompt',
+  promptEnabled: true,
+  imageUrl: '',
+  imageDimensions: {
+    height: 100,
+    width: 100,
+  },
+};
+
+describe('Root', () => {
+  const onConfigurationChanged = jest.fn();
+  const onModelChanged = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderRoot = (props = {}) => {
+    const defaultProps = {
+      model,
+      configuration: defaults.configuration,
+      onConfigurationChanged,
+      onModelChanged,
+      ...props,
+    };
+    return render(
+      <ThemeProvider theme={theme}>
+        <Root {...defaultProps} />
+      </ThemeProvider>
+    );
+  };
+
+  describe('logic', () => {
+    it('onPromptChanged calls onModelChanged', () => {
+      const { container } = renderRoot();
+      // Get the Root component instance by finding the component ref
+      const rootInstance = container.querySelector('[data-testid]')?.parentElement?.__reactFiber$?.return?.stateNode;
+
+      // Since we can't easily access instance methods in RTL, we'll verify the behavior
+      // by checking that the handler is correctly bound
+      expect(onModelChanged).not.toHaveBeenCalled();
+
+      // Create a new Root instance to test the method directly
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onPromptChanged('New Prompt');
+
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ prompt: 'New Prompt' }));
+    });
+
+    it('onTeacherInstructionsChanged calls onModelChanged', () => {
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onTeacherInstructionsChanged('New Teacher Instructions');
+
+      expect(onModelChanged).toHaveBeenCalledWith(
+        expect.objectContaining({ teacherInstructions: 'New Teacher Instructions' }),
+      );
+    });
+
+    it('onUpdateImageDimension calls onModelChanged', () => {
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onUpdateImageDimension({
+        height: 200,
+        width: 200,
+      });
+
+      expect(onModelChanged).toHaveBeenCalledWith(
+        expect.objectContaining({
+          imageDimensions: {
+            height: 200,
+            width: 200,
+          },
+        }),
+      );
+    });
+
+    it('onImageUpload calls onModelChanged', () => {
+      const testInstance = new Root({ model, onModelChanged, configuration: defaults.configuration, onConfigurationChanged });
+      testInstance.onImageUpload('url');
+
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ imageUrl: 'url' }));
+    });
+  });
+});

package/configure/src/button.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+const StyledButton = styled(Button)({
+  marginLeft: 8,
+});
+
+const CustomButton = ({ label, onClick, disabled }) => (
+  <StyledButton
+    onClick={onClick}
+    disabled={disabled}
+    size="small"
+    variant="contained">
+    {label}
+  </StyledButton>
+);
+
+CustomButton.propTypes = {
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+CustomButton.defaultProps = {
+  className: '',
+  disabled: false,
+  label: 'Add',
+  onClick: () => { },
+};
+
+export default CustomButton;

package/configure/src/defaults.js

@@ -0,0 +1,80 @@
+export default {
+  model: {
+    backgroundImageEnabled: true,
+    imageDimensions: { height: 0, width: 0 },
+    imageUrl: '',
+    prompt: '',
+    promptEnabled: true,
+    spellCheckEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    backgroundImage: {
+      settings: true,
+      label: 'Background Image',
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    settingsPanelDisabled: false,
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+  },
+};

package/configure/src/image-container.jsx

@@ -0,0 +1,316 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+import Button from './button';
+
+const isImage = (file) => {
+  const imageType = /image.*/;
+  return file.type.match(imageType);
+};
+
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1),
+}));
+
+const Box = styled('div')(({ active }) => ({
+  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',
+  borderRadius: '5px',
+}));
+
+const CenteredDiv = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+});
+
+const DrawableHeight = styled('div')({
+  minHeight: 350,
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const ResizeHandle = styled('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px',
+});
+
+const HiddenInput = styled('input')({
+  display: 'none',
+});
+
+const Toolbar = styled('div')({
+  backgroundColor: '#ECEDF1',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  padding: '12px 8px',
+});
+
+export class ImageContainer extends Component {
+
+  static propTypes = {
+    imageDimensions: PropTypes.object,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      maxImageWidth: '100%',
+      maxImageHeight: 'auto',
+      dragEnabled: true,
+      dropzoneActive: false,
+    };
+    this.fakeImageHandler = {
+      cancel: () => {},
+      done: (a, url) => this.props.onImageUpload(url),
+      fileChosen: () => {},
+      progress: () => {},
+    };
+  }
+
+  componentDidMount() {
+    if (this.imageSection) {
+      const positionInfo = this.imageSection.getBoundingClientRect();
+      const { height, width } = positionInfo;
+      this.setState({
+        maxImageWidth: width,
+        maxImageHeight: height,
+      });
+    }
+  }
+
+  handleFileRead = (file) => {
+    const { onImageUpload, insertImage } = this.props;
+    const reader = new FileReader();
+
+    reader.onloadend = () => onImageUpload(reader.result);
+    reader.readAsDataURL(file);
+
+    if (insertImage) {
+      insertImage({
+        ...this.fakeImageHandler,
+        getChosenFile: () => file,
+        isPasted: true,
+      });
+    }
+  };
+
+  handleUploadImage = (e) => {
+    e.preventDefault();
+    const file = e.target.files[0];
+    this.handleFileRead(file);
+  };
+
+  makeDropzoneActive = () => this.setState({ dropzoneActive: true });
+
+  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
+
+  handleOnDrop = (e) => {
+    e.preventDefault();
+    const { items, files } = e.dataTransfer;
+
+    if (items && items[0].kind === 'file') {
+      const file = items[0].getAsFile();
+      if (isImage(file)) {
+        this.handleFileRead(file);
+      }
+    } else if (isImage(files[0])) {
+      this.handleFileRead(files[0]);
+    }
+
+    this.makeDropzoneInactive();
+  };
+
+  handleOnDragOver = (e) => {
+    e.preventDefault();
+    const { dropzoneActive } = this.state;
+
+    if (!dropzoneActive) {
+      this.makeDropzoneActive();
+    }
+  };
+
+  handleOnDragExit = (e) => {
+    e.preventDefault();
+    this.makeDropzoneInactive();
+  };
+
+  handleEnableDrag = () => this.setState({ dragEnabled: true });
+  handleDisableDrag = () => this.setState({ dragEnabled: false });
+  handleInputClick = () => {
+    const { insertImage } = this.props;
+
+    if (insertImage) {
+      insertImage(this.fakeImageHandler);
+    }
+  };
+
+  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {
+    const { onUpdateImageDimension, imageDimensions } = this.props;
+    const resizeHandle = this.resize;
+
+    const dimensions = {
+      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,
+      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,
+    };
+
+    // check if aspect ratio is not respected on replacing image
+    const imageAspectRatio = naturalWidth / naturalHeight;
+
+    if (dimensions.width !== dimensions.height * imageAspectRatio) {
+      dimensions.width = dimensions.height * imageAspectRatio;
+    }
+
+    this.setState({ dimensions });
+    onUpdateImageDimension(dimensions);
+
+    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+  };
+
+  initialiseResize = () => {
+    window.addEventListener('mousemove', this.startResizing, false);
+    window.addEventListener('mouseup', this.stopResizing, false);
+  };
+
+  stopResizing = () => {
+    const { onUpdateImageDimension } = this.props;
+    const { dimensions } = this.state;
+
+    this.handleEnableDrag();
+    onUpdateImageDimension(dimensions);
+
+    window.removeEventListener('mousemove', this.startResizing, false);
+    window.removeEventListener('mouseup', this.stopResizing, false);
+  };
+
+  startResizing = (e) => {
+    const box = this.image;
+    const { maxImageWidth, maxImageHeight, dimensions } = this.state;
+
+    const bounds = e.target.getBoundingClientRect();
+    const x = e.clientX - bounds.left;
+    const y = e.clientY - bounds.top;
+
+    const imageAspectRatio = dimensions.width / dimensions.height;
+    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
+    const hasMinimumWidth = x > 150 && y > 150;
+
+    if (fitsContainer && hasMinimumWidth && box) {
+      box.style.width = `${x}px`;
+      box.style.height = `${x / imageAspectRatio}px`;
+
+      this.setState({
+        dimensions: {
+          width: x,
+          height: x / imageAspectRatio,
+        },
+      });
+    }
+
+    this.handleDisableDrag();
+  };
+
+  renderUploadControl(label) {
+    return (
+      <div>
+        <Button label={label} onClick={this.handleInputClick} />
+        <HiddenInput
+          accept="image/*"
+          onChange={this.handleUploadImage}
+          ref={(ref) => {
+            this.input = ref;
+          }}
+          type="file"
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { imageUrl, imageDimensions } = this.props;
+    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;
+
+    return (
+      <BaseContainer>
+        <Box
+          active={dropzoneActive}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+              }
+            : {})}
+        >
+          <Toolbar>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</Toolbar>
+
+          <DrawableHeight
+            ref={(ref) => {
+              this.imageSection = ref;
+            }}
+          >
+            {imageUrl ? (
+              <StyledImageContainer>
+                <Image
+                  height="auto"
+                  onLoad={this.handleOnImageLoad}
+                  ref={(ref) => {
+                    this.image = ref;
+                  }}
+                  src={imageUrl}
+                  style={{
+                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
+                    maxWidth: maxImageWidth,
+                    maxHeight: maxImageHeight,
+                  }}
+                  alt=""
+                />
+                <ResizeHandle
+                  ref={(ref) => {
+                    this.resize = ref;
+                  }}
+                />
+              </StyledImageContainer>
+            ) : (
+              <DrawableHeight as={CenteredDiv}>
+                <label>Drag and drop or upload image from computer</label>
+                <br />
+                {this.renderUploadControl('Upload Image')}
+              </DrawableHeight>
+            )}
+          </DrawableHeight>
+        </Box>
+      </BaseContainer>
+    );
+  }
+}
+
+ImageContainer.propTypes = {
+  imageUrl: PropTypes.string.isRequired,
+  onImageUpload: PropTypes.func.isRequired,
+  onUpdateImageDimension: PropTypes.func.isRequired,
+  insertImage: PropTypes.func,
+};
+
+export default ImageContainer;

package/configure/src/index.js

@@ -0,0 +1,167 @@
+import {
+  DeleteImageEvent,
+  DeleteSoundEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  ModelUpdatedEvent,
+} from '@pie-framework/pie-configure-events';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+
+import Root from './root';
+import sensibleDefaults from './defaults';
+
+const log = debug('hotspot:configure');
+
+export default class DrawableResponseConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}, config) => {
+    const defaultModel = {
+      ...sensibleDefaults.model,
+      ...model,
+    };
+
+    // if configuration.withRubric.forceEnabled is true, then we update the model
+    // without triggering the Model Updated event (for more details, check documentation)
+    if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {
+      defaultModel.rubricEnabled = true;
+    }
+
+    return defaultModel;
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._configuration = sensibleDefaults.configuration;
+
+    // if configuration.withRubric.forceEnabled is true, then we
+    // update the configuration (we do not want to display the toggle in the Settings Panel)
+    if (this._configuration.withRubric?.forceEnabled) {
+      this._configuration.withRubric.settings = false;
+    }
+
+    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);
+    this.onModelChanged = this.onModelChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
+    this._render();
+  }
+
+  set configuration(c) {
+    const newConfiguration = {
+      ...sensibleDefaults.configuration,
+      ...c,
+    };
+
+    this._configuration = newConfiguration;
+
+    const { withRubric = {} } = c || {};
+
+    // if configuration.withRubric.forceEnabled is true, then we update the model
+    // without triggering the Model Updated event (for more details, check documentation)
+    // and also update the configuration (we do not want to display the toggle in the Settings Panel)
+    if (withRubric?.forceEnabled) {
+      this._configuration.withRubric.settings = false;
+
+      if (!this._model.rubricEnabled) {
+        this._model.rubricEnabled = true;
+      }
+    }
+
+    // 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();
+  };
+
+  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, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      imageSupport: {
+        add: this.insertImage,
+        delete: this.onDeleteImage,
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}