@pie-element/drawing-response 12.1.0-next.28 → 12.1.1-next.0

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

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

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

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

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

@@ -1,167 +0,0 @@
-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();
-    }
-  }
-}