@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/droppable-placeholder.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PlaceHolder from './placeholder';
+import PropTypes from 'prop-types';
+
+const preventInteractionStyle = {
+  flex: 1,
+};
+
+export class DroppablePlaceholder extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    connectDropTarget: PropTypes.func.isRequired,
+    isOver: PropTypes.bool,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    disabled: PropTypes.bool,
+    isVerticalPool: PropTypes.bool,
+    minHeight: PropTypes.number,
+  };
+
+  render() {
+    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
+
+    return connectDropTarget(
+      <div style={preventInteractionStyle}>
+        <PlaceHolder
+          disabled={disabled}
+          isOver={isOver}
+          choiceBoard={true}
+          className={classes}
+          isVerticalPool={isVerticalPool}
+          minHeight={minHeight}
+        >
+          {children}
+        </PlaceHolder>
+      </div>,
+    );
+  }
+}

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/ica-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/index.js

@@ -0,0 +1,23 @@
+import { DragSource, DropTarget } from 'react-dnd';
+
+import PlaceHolder from './placeholder';
+import Choice from './choice';
+import withDragContext from './with-drag-context';
+import swap from './swap';
+import * as uid from './uid-context';
+import MatchDroppablePlaceholder from './match-list-dp';
+import DragDroppablePlaceholder from './drag-in-the-blank-dp';
+import ICADroppablePlaceholder from './ica-dp';
+
+export {
+  PlaceHolder,
+  MatchDroppablePlaceholder,
+  DragDroppablePlaceholder,
+  ICADroppablePlaceholder,
+  withDragContext,
+  Choice,
+  swap,
+  uid,
+  DragSource,
+  DropTarget,
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/match-list-dp.jsx

@@ -0,0 +1,23 @@
+import { DropTarget } from 'react-dnd';
+import { DroppablePlaceholder } from './droppable-placeholder';
+import dragType from './drag-type';
+
+export const spec = {
+  canDrop: (props) => {
+    return !props.disabled;
+  },
+  drop: (props, monitor) => {
+    const item = monitor.getItem();
+
+    if (props.onRemoveAnswer) {
+      props.onRemoveAnswer(item.promptId);
+    }
+  },
+};
+
+const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+}))(DroppablePlaceholder);
+
+export default WithTarget;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/placeholder.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import grey from '@material-ui/core/colors/grey';
+import { color } from '@pie-lib/render-ui';
+
+export const PlaceHolder = (props) => {
+  const {
+    children,
+    classes,
+    className,
+    isOver,
+    type,
+    grid,
+    disabled,
+    choiceBoard,
+    isCategorize,
+    isVerticalPool,
+    minHeight,
+  } = props;
+
+  const names = classNames(
+    classes.placeholder,
+    disabled && classes.disabled,
+    isOver && classes.over,
+    classes[type],
+    className,
+  );
+
+  const style = {};
+
+  if (grid && grid.columns) {
+    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
+  }
+
+  if (grid && grid.rows) {
+    const repeatValue = grid.rowsRepeatValue || '1fr';
+
+    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
+  }
+
+  // The "type" is only sent through placement-ordering / placeholder
+  // It can be "choice" or "target"
+  // We apply a different style for the "choice" type
+  // For any other type, use a dashed black border and a white fill
+  if (type === 'choice') {
+    style.border = `1px solid ${color.borderLight()}`;
+    style.background = color.backgroundDark();
+  }
+
+  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
+
+  return (
+    <div
+      style={{ ...style, minHeight: minHeight }}
+      className={classNames(
+        classes.noSelectStyles,
+        choiceBoard ? boardStyle : names,
+        isVerticalPool && classes.verticalPool,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+PlaceHolder.propTypes = {
+  classes: PropTypes.object.isRequired,
+  choiceBoard: PropTypes.bool,
+  grid: PropTypes.shape({
+    columns: PropTypes.number,
+    rows: PropTypes.number,
+    // if a different value then 1fr is wanted
+    rowsRepeatValue: PropTypes.string,
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  className: PropTypes.string,
+  isOver: PropTypes.bool,
+  index: PropTypes.number,
+  type: PropTypes.string,
+  disabled: PropTypes.bool,
+  isCategorize: PropTypes.bool,
+  isVerticalPool: PropTypes.bool,
+  minHeight: PropTypes.number,
+};
+
+const styles = (theme) => ({
+  noSelectStyles: {
+    WebkitTouchCallout: 'none',
+    WebkitUserSelect: 'none',
+    KhtmlUserSelect: 'none',
+    MozUserSelect: 'none',
+    MsUserSelect: 'none',
+    userSelect: 'none',
+  },
+  placeholder: {
+    width: '100%',
+    height: '100%',
+    background: color.white(),
+    transition: 'background-color 200ms linear, border-color 200ms linear',
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridRowGap: `${theme.spacing.unit}px`,
+    gridColumnGap: `${theme.spacing.unit}px`,
+    padding: theme.spacing.unit * 1,
+    border: `2px dashed ${color.black()}`,
+  },
+  disabled: {
+    boxShadow: 'none',
+    background: theme.palette.background.paper,
+  },
+  over: {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
+  board: {
+    padding: theme.spacing.unit,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  categorizeBoard: {
+    padding: theme.spacing.unit / 2,
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    minHeight: '100px',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    touchAction: 'none',
+    backgroundColor: color.backgroundDark(),
+  },
+  verticalPool: {
+    display: 'flex',
+    flexFlow: 'column wrap',
+  },
+});
+
+export default withStyles(styles)(PlaceHolder);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/preview-component.jsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { usePreview } from 'react-dnd-multi-backend';
+import { PreviewPrompt, color } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+
+const styles = {
+  maskBlank: {
+    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
+    // It is styled to be identical to the drag-in-the-blank chip
+    backgroundColor: color.white(),
+    border: `1px solid ${color.text()}`,
+    color: color.text(),
+    alignItems: 'center',
+    display: 'inline-flex',
+    height: 'initial',
+    minHeight: '32px',
+    fontSize: 'inherit',
+    whiteSpace: 'pre-wrap',
+    maxWidth: '374px',
+    borderRadius: '3px',
+    padding: '12px',
+  },
+  ica: {
+    backgroundColor: color.background(),
+    border: `1px solid ${color.borderDark()}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
+    marginLeft: 2,
+    marginTop: 2,
+    width: 'fit-content',
+  },
+  categorize: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '16px',
+    borderRadius: '4px',
+    border: '1px solid',
+  },
+  matchList: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+  },
+  placementOrdering: {
+    padding: '10px',
+    boxSizing: 'border-box',
+    border: '1px solid #D1D1D1',
+    backgroundColor: color.background(),
+  },
+};
+
+const getPrompt = (itemType, item) => {
+  switch (itemType) {
+    // DRAG-IN-THE-BLANK
+    case 'MaskBlank':
+      return item?.choice?.value;
+    // IMAGE-CLOZE-ASSOCIATION
+    case 'react-dnd-response':
+      return item?.value;
+    // MATCH-LIST
+    case 'Answer':
+      return item?.value;
+    // PLACEMENT-ORDERING
+    case 'Tile':
+      return item?.value;
+    default:
+      return item?.itemType === 'categorize' ? item?.value : undefined;
+  }
+};
+
+const getCustomStyle = (itemType, item, touchPosition, style) => {
+  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
+  const top = style?.top || 0;
+  const left = style?.left || 0;
+  const position = style?.position || 'fixed';
+
+  return {
+    position,
+    top,
+    left,
+    transform,
+    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
+    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
+    ...(itemType === 'Answer' ? styles.matchList : {}),
+    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
+    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
+  };
+};
+
+const PreviewComponent = () => {
+  const preview = usePreview();
+  const { itemType, item, style, display } = preview;
+  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  const handleTouchMove = useCallback(
+    (event) => {
+      if (event.touches.length > 0) {
+        const touch = event.touches[0];
+        const touchOffset = 1;
+        setTouchPosition({
+          x: (touch.clientX + touchOffset) / zoomLevel,
+          y: (touch.clientY + touchOffset) / zoomLevel,
+        });
+      }
+    },
+    [zoomLevel],
+  );
+
+  const root = useRef(null);
+
+  useEffect(() => {
+    if (display && root.current) {
+      renderMath(root.current);
+
+      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
+      const zoomAffectedElement = document.querySelector('.padding') || document.body;
+
+      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
+    }
+  }, [display, item?.choice?.value, item?.value, itemType, item]);
+
+  useEffect(() => {
+    const touchMoveListener = (event) => handleTouchMove(event);
+    if (display) {
+      window.addEventListener('touchmove', touchMoveListener);
+    }
+    return () => {
+      window.removeEventListener('touchmove', touchMoveListener);
+    };
+  }, [display, handleTouchMove]);
+
+  if (!display) {
+    return null;
+  }
+
+  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
+
+  const prompt = getPrompt(itemType, item);
+
+  return (
+    <div ref={root} style={customStyle}>
+      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
+    </div>
+  );
+};
+
+export default PreviewComponent;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/swap.js

@@ -0,0 +1,14 @@
+import cloneDeep from 'lodash/cloneDeep';
+
+export default (arr, fromIndex, toIndex) => {
+  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
+    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);
+  }
+
+  const update = cloneDeep(arr);
+  const tmp = arr[toIndex];
+  update[toIndex] = update[fromIndex];
+  update[fromIndex] = tmp;
+
+  return update;
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/uid-context.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const { Consumer, Provider } = React.createContext(-1);
+
+export { Provider, Consumer };
+
+export const generateId = () => (Math.random() * 1000001).toFixed(0);
+
+export const withUid = (Component) => {
+  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;
+
+  return Wrapped;
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/drag/src/with-drag-context.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';
+import { DndProvider } from 'react-dnd';
+import { TouchBackend } from 'react-dnd-touch-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+import PreviewComponent from './preview-component';
+
+const backends = [
+  {
+    backend: HTML5Backend,
+    transition: MouseTransition,
+  },
+  {
+    backend: TouchBackend,
+    options: { enableMouseEvents: true, enableTouchEvents: true },
+    preview: true,
+    transition: TouchTransition,
+    skipDispatchOnTransition: true,
+  },
+];
+
+export default (Component) => (props) => {
+  const isClient = typeof window !== 'undefined';
+
+  return (
+    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>
+      <Component {...props} />
+      <PreviewComponent />
+    </DndProvider>
+  );
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/CHANGELOG.json

@@ -0,0 +1,32 @@
+[
+  {
+    "type": "feat",
+    "scope": null,
+    "subject": "made sure editor is waiting for image and sound upload before finishes editing PD-2950 (#948)",
+    "merge": null,
+    "header": "feat: made sure editor is waiting for image and sound upload before finishes editing PD-2950 (#948)",
+    "body": "feat: made sure editor is waiting for image and sound upload before finishes editing PD-2950",
+    "footer": null,
+    "notes": [],
+    "hash": "bd16707f13f824dfe2c2db7f395e58fa25eb2ffb",
+    "gitTags": "",
+    "committerDate": "2023-10-16 11:14:31 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/editable-html@11.1.0"
+  },
+  {
+    "type": "feat",
+    "scope": "mask-markup",
+    "subject": "merging with the develop branch",
+    "merge": null,
+    "header": "feat(mask-markup): merging with the develop branch",
+    "body": null,
+    "footer": null,
+    "notes": [],
+    "hash": "0153c1aba8a08ba6c974fcc69476a87b9086f6c5",
+    "gitTags": "",
+    "committerDate": "2019-05-02 07:12:59 +0300",
+    "isTagged": true,
+    "tag": "@pie-lib/editable-html@10.0.0"
+  }
+]