@pie-element/complex-rubric 2.1.2-next.44 → 2.1.2-next.69

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/controls.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+export class Controls extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onClear: PropTypes.func.isRequired,
+    onWords: PropTypes.func.isRequired,
+    onSentences: PropTypes.func.isRequired,
+    onParagraphs: PropTypes.func.isRequired,
+    setCorrectMode: PropTypes.bool.isRequired,
+    onToggleCorrectMode: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { classes, onClear, onWords, onSentences, onParagraphs, setCorrectMode, onToggleCorrectMode } = this.props;
+
+    return (
+      <div className={classes.controls}>
+        <div>
+          <Button onClick={onWords} className={classes.button} size="small" color="primary" disabled={setCorrectMode}>
+            Words
+          </Button>
+          <Button
+            onClick={onSentences}
+            className={classes.button}
+            size="small"
+            color="primary"
+            disabled={setCorrectMode}
+          >
+            Sentences
+          </Button>
+          <Button
+            onClick={onParagraphs}
+            className={classes.button}
+            size="small"
+            color="primary"
+            disabled={setCorrectMode}
+          >
+            Paragraphs
+          </Button>
+          <Button className={classes.button} size="small" color="secondary" onClick={onClear} disabled={setCorrectMode}>
+            Clear
+          </Button>
+        </div>
+        <FormControlLabel
+          control={<Switch checked={setCorrectMode} onChange={onToggleCorrectMode} />}
+          label="Set correct answers"
+        />
+      </div>
+    );
+  }
+}
+export default withStyles((theme) => ({
+  button: {
+    marginRight: theme.spacing.unit,
+  },
+  controls: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+}))(Controls);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/index.jsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Controls from './controls';
+import { withStyles } from '@material-ui/core/styles';
+import { words, sentences, paragraphs } from './builder';
+import clone from 'lodash/clone';
+import isEqual from 'lodash/isEqual';
+import differenceWith from 'lodash/differenceWith';
+import classNames from 'classnames';
+import { noSelect } from '../../style-utils';
+import TokenText from './token-text';
+
+export class Tokenizer extends React.Component {
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    tokens: PropTypes.arrayOf(
+      PropTypes.shape({
+        text: PropTypes.string,
+        correct: PropTypes.bool,
+        start: PropTypes.number,
+        end: PropTypes.number,
+      }),
+    ),
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      setCorrectMode: false,
+      mode: '',
+    };
+  }
+
+  onChangeHandler = (token, mode) => {
+    this.props.onChange(token, mode);
+
+    this.setState({
+      mode,
+    });
+  };
+
+  toggleCorrectMode = () => this.setState({ setCorrectMode: !this.state.setCorrectMode });
+
+  clear = () => {
+    this.onChangeHandler([], '');
+  };
+
+  buildTokens = (type, fn) => {
+    const { text } = this.props;
+    const tokens = fn(text);
+
+    this.onChangeHandler(tokens, type);
+  };
+
+  selectToken = (newToken, tokensToRemove) => {
+    const { tokens } = this.props;
+    const update = differenceWith(clone(tokens), tokensToRemove, isEqual);
+
+    update.push(newToken);
+    this.onChangeHandler(update, this.state.mode);
+  };
+
+  tokenClick = (token) => {
+    const { setCorrectMode } = this.state;
+
+    if (setCorrectMode) {
+      this.setCorrect(token);
+    } else {
+      this.removeToken(token);
+    }
+  };
+
+  tokenIndex = (token) => {
+    const { tokens } = this.props;
+
+    return tokens.findIndex((t) => {
+      return t.text == token.text && t.start == token.start && t.end == token.end;
+    });
+  };
+
+  setCorrect = (token) => {
+    const { tokens } = this.props;
+    const index = this.tokenIndex(token);
+    if (index !== -1) {
+      const t = tokens[index];
+
+      t.correct = !t.correct;
+
+      const update = clone(tokens);
+
+      update.splice(index, 1, t);
+      this.onChangeHandler(update, this.state.mode);
+    }
+  };
+
+  removeToken = (token) => {
+    const { tokens } = this.props;
+
+    const index = this.tokenIndex(token);
+    if (index !== -1) {
+      const update = clone(tokens);
+
+      update.splice(index, 1);
+
+      this.onChangeHandler(update, this.state.mode);
+    }
+  };
+
+  render() {
+    const { text, tokens, classes, className } = this.props;
+    const { setCorrectMode } = this.state;
+
+    const tokenClassName = classNames(classes.text, setCorrectMode && classes.noselect);
+
+    const rootName = classNames(classes.tokenizer, className);
+
+    return (
+      <div className={rootName}>
+        <Controls
+          onClear={this.clear}
+          onWords={() => this.buildTokens('words', words)}
+          onSentences={() => this.buildTokens('sentence', sentences)}
+          onParagraphs={() => this.buildTokens('paragraphs', paragraphs)}
+          setCorrectMode={setCorrectMode}
+          onToggleCorrectMode={this.toggleCorrectMode}
+        />
+        <TokenText
+          className={tokenClassName}
+          text={text}
+          tokens={tokens}
+          onTokenClick={this.tokenClick}
+          onSelectToken={this.selectToken}
+        />
+      </div>
+    );
+  }
+}
+
+export default withStyles(() => ({
+  text: {
+    whiteSpace: 'pre-wrap',
+  },
+  noselect: { ...noSelect() },
+}))(Tokenizer);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/selection-utils.js

@@ -0,0 +1,49 @@
+export const clearSelection = () => {
+  if (document.getSelection) {
+    // for all new browsers (IE9+, Chrome, Firefox)
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(document.createRange());
+  } else if (window.getSelection) {
+    // equals with the document.getSelection (MSDN info)
+    if (window.getSelection().removeAllRanges) {
+      // for all new browsers (IE9+, Chrome, Firefox)
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(document.createRange());
+    } else if (window.getSelection().empty) {
+      // Chrome supports this as well
+      window.getSelection().empty();
+    }
+  } else if (document.selection) {
+    // IE8-
+    document.selection.empty();
+  }
+};
+
+export const getCaretCharacterOffsetWithin = (element) => {
+  var caretOffset = 0;
+  var doc = element.ownerDocument || element.document;
+  var win = doc.defaultView || doc.parentWindow;
+  var sel;
+  if (typeof win.getSelection !== 'undefined') {
+    sel = win.getSelection();
+    if (sel.rangeCount > 0) {
+      var range = win.getSelection().getRangeAt(0);
+      var selected = range.toString().length;
+      var preCaretRange = range.cloneRange();
+      preCaretRange.selectNodeContents(element);
+      preCaretRange.setEnd(range.endContainer, range.endOffset);
+      if (selected) {
+        caretOffset = preCaretRange.toString().length - selected;
+      } else {
+        caretOffset = preCaretRange.toString().length;
+      }
+    }
+  } else if ((sel = doc.selection) && sel.type !== 'Control') {
+    var textRange = sel.createRange();
+    var preCaretTextRange = doc.body.createTextRange();
+    preCaretTextRange.moveToElementText(element);
+    preCaretTextRange.setEndPoint('EndToEnd', textRange);
+    caretOffset = preCaretTextRange.text.length;
+  }
+  return caretOffset;
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/tokenizer/token-text.jsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { normalize, intersection } from './builder';
+import yellow from '@material-ui/core/colors/yellow';
+import green from '@material-ui/core/colors/green';
+import debug from 'debug';
+import classNames from 'classnames';
+
+import { clearSelection, getCaretCharacterOffsetWithin } from './selection-utils';
+
+const log = debug('@pie-lib:text-select:token-text');
+
+export const Text = withStyles(() => ({
+  predefined: {
+    cursor: 'pointer',
+    backgroundColor: yellow[100],
+    border: `dashed 0px ${yellow[700]}`,
+  },
+  correct: {
+    backgroundColor: green[500],
+  },
+}))(({ text, predefined, classes, onClick, correct }) => {
+  const formattedText = (text || '').replace(/\n/g, '<br>');
+
+  if (predefined) {
+    const className = classNames(classes.predefined, correct && classes.correct);
+
+    return <span onClick={onClick} className={className} dangerouslySetInnerHTML={{ __html: formattedText }} />;
+  } else {
+    return <span dangerouslySetInnerHTML={{ __html: formattedText }} />;
+  }
+});
+
+const notAllowedCharacters = ['\n', ' ', '\t'];
+
+export default class TokenText extends React.Component {
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    tokens: PropTypes.array.isRequired,
+    onTokenClick: PropTypes.func.isRequired,
+    onSelectToken: PropTypes.func.isRequired,
+    className: PropTypes.string,
+  };
+
+  /*
+   Change this to onClick instead of mouseUp because previously, in some cases
+   the onClick event from the <Text /> component was called right after the user
+   selected token and that token was then removed because the setCorrectMode was not true.
+
+   const { setCorrectMode } = this.state;
+
+   if (setCorrectMode) {
+   this.setCorrect(token);
+   } else {
+   this.removeToken(token);
+   }
+   */
+  onClick = (event) => {
+    const { onSelectToken, text, tokens } = this.props;
+
+    event.preventDefault();
+
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const selection = window.getSelection();
+    const textSelected = selection.toString();
+
+    if (textSelected.length > 0 && notAllowedCharacters.indexOf(textSelected) < 0) {
+      if (this.root) {
+        let offset = getCaretCharacterOffsetWithin(this.root);
+        /*
+         Since we implemented new line functionality (\n) using <br /> dom elements
+         and window.getSelection is not taking that into consideration, the offset might
+         be off by a few characters.
+
+         To combat that, we check if the selected text is right at the beginning of the offset.
+
+         If it's not, we add the additional offset in order for that to be accurate
+         */
+        const newLineOffset = text.slice(offset).indexOf(textSelected);
+
+        offset += newLineOffset;
+
+        if (offset !== undefined) {
+          const endIndex = offset + textSelected.length;
+
+          if (endIndex <= text.length) {
+            const i = intersection({ start: offset, end: endIndex }, tokens);
+            if (i.hasOverlap) {
+              log('hasOverlap  - do nothing');
+              clearSelection();
+            } else {
+              const tokensToRemove = i.surroundedTokens;
+              const token = {
+                text: textSelected,
+                start: offset,
+                end: endIndex,
+              };
+
+              onSelectToken(token, tokensToRemove);
+              clearSelection();
+            }
+          }
+        }
+      }
+    }
+  };
+
+  render() {
+    const { text, tokens, className, onTokenClick } = this.props;
+    const normalized = normalize(text, tokens);
+
+    return (
+      <div className={className} ref={(r) => (this.root = r)} onClick={this.onClick}>
+        {normalized.map((t, index) => {
+          return <Text key={index} {...t} onClick={() => onTokenClick(t)} />;
+        })}
+      </div>
+    );
+  }
+}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/utils.js

@@ -0,0 +1,56 @@
+const createElementFromHTML = (htmlString = '') => {
+  const div = document.createElement('div');
+
+  div.innerHTML = htmlString.trim();
+
+  return div;
+};
+
+export const parseBrs = (dom) => {
+  const brs = dom.querySelectorAll('br');
+
+  brs.forEach((br) => br.replaceWith('\n'));
+
+  dom.innerHTML = dom.innerHTML.replace(/\n\n/g, '\n');
+};
+
+export const parseParagraph = (paragraph, end) => {
+  if (end) {
+    return paragraph.innerHTML;
+  }
+
+  return `${paragraph.innerHTML}\n\n`;
+};
+
+export const parseParagraphs = (dom) => {
+  const paragraphs = dom.querySelectorAll('p');
+  // separate variable for easily debugging, if needed
+  let str = '';
+
+  paragraphs.forEach((par, index) => {
+    str += parseParagraph(par, index === paragraphs.length - 1);
+  });
+
+  return str || null;
+};
+
+export const prepareText = (text) => {
+  let txtDom = createElementFromHTML(text);
+  const allDomElements = Array.from(txtDom.querySelectorAll('*'));
+
+  if (txtDom.querySelectorAll('p').length === 0) {
+    const div = document.createElement('div');
+
+    div.innerHTML = `<p>${txtDom.innerHTML}</p>`;
+    txtDom = div;
+  }
+
+  // if no dom elements, we just return the text
+  if (allDomElements.length === 0) {
+    return text;
+  }
+
+  parseBrs(txtDom);
+
+  return parseParagraphs(txtDom);
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor-utils.js

@@ -0,0 +1,152 @@
+import { trigCalculator } from 'trigonometry-calculator';
+import Point from '@mapbox/point-geometry';
+import debug from 'debug';
+import { parse as parseOrigin } from './transform-origin';
+const log = debug('@pie-lib:tools:anchor-utils');
+
+export const toDegrees = (radians) => radians * (180 / Math.PI);
+export const toRadians = (degrees) => degrees * (Math.PI / 180);
+
+export const normalizeAngle = (a) => {
+  if (a > 360) {
+    return a % 360;
+  } else if (a < 0) {
+    return 360 + (a % 360);
+  }
+  return a;
+};
+
+export const toPoint = (rect, edge) => {
+  const out = parseOrigin(rect, edge);
+  return new Point(out.x, out.y);
+};
+
+/**
+ * Get the distance between to anchor points in a rect.
+ * @param {{width: number, height: number}} rect - the rect
+ * @param {number} degrees - the degrees
+ * @param {string} from - from anchor
+ * @param {string} to - to anchor
+ * @returns {Point} point - the distance as a Point
+ */
+export const distanceBetween = (rect, degrees, from, to) => {
+  const center = new Point(rect.width / 2, rect.height / 2);
+  const radians = toRadians(degrees);
+  const fromCenter = center.rotateAround(radians, toPoint(rect, from));
+  const toCenter = center.rotateAround(radians, toPoint(rect, to));
+  const diff = fromCenter.sub(toCenter);
+  return diff;
+};
+
+/**
+ * For a corner string, a point and a rect, return a relative x,y from that point to a corner.
+ * Note that the y value descends as it goes down (unlike for a screen's y value), so this is only really useful for math functions.
+ * @example
+ * ```
+ * getXAndY('top-left', {width: 100, height: 100}, 10, 10) //=> {x:10, y: -90}
+ * ```
+ * @param {*} corner
+ * @param {*} rect
+ * @param {*} point
+ */
+export const getXAndY = (corner, rect, point) => {
+  if (corner === 'top-left') {
+    const x = point.x * -1;
+    const y = point.y;
+    return { x, y };
+  } else if (corner === 'bottom-left') {
+    const x = point.x * -1;
+    const y = point.y - rect.height;
+    return { x, y };
+  } else if (corner === 'top-right') {
+    const x = rect.width - point.x;
+    const y = point.y;
+    return { x, y };
+  } else if (corner === 'bottom-right') {
+    const x = rect.width - point.x;
+    const y = point.y - rect.height;
+    return { x, y };
+  }
+};
+
+export const arctangent = (x, y) => toDegrees(Math.atan2(x, y));
+
+export const getAngleAndHypotenuse = (corner, rect, point) => {
+  const { x, y } = getXAndY(corner, rect, point);
+  const degrees = arctangent(x, y);
+  const hypotenuse = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  return { x, y, degrees, hypotenuse };
+};
+
+const getPosition = (side, rect, point, angle, calcAngle) => {
+  if (angle === 0) {
+    return side === 'left' ? point.x : point.y;
+  }
+  const points = anglePoints(angle);
+  const key = points[side];
+
+  const { degrees, hypotenuse } = getAngleAndHypotenuse(key, rect, point);
+
+  const ra = calcAngle(degrees);
+
+  if (ra === 0) {
+    return hypotenuse;
+  }
+
+  const t = {
+    angles: { 0: ra, 1: 90 },
+    sides: { 1: hypotenuse },
+  };
+  const out = trigCalculator(t);
+  return out.sides[2];
+};
+
+export const getTop = (rect, point, angle) => {
+  return getPosition('top', rect, point, angle, (degrees) => {
+    return Math.abs(angle + degrees);
+  });
+};
+
+export const getLeft = (rect, point, angle) => {
+  return getPosition('left', rect, point, angle, (degrees) => {
+    return Math.abs(angle + degrees + 90);
+  });
+};
+
+/**
+ * Calculate the position of an anchor within a bounding rect, if the source rect has been rotated by an angle.
+ * It does this by finding the appropriate corner of the src rect, that touches the bounding rect, calculates
+ * the hypotenuse (h) of that anchor to that point. Then using that plus the rotation it calculates
+ * the sides of the triangle and returns the length of the side that touches the bounding rect.
+ * @param {{width: number, height: number}} rect - the rect which contains the point
+ * @param {{x:number, y: number}} point - the point within the rect
+ * @param {number} angle - the angle in degrees that the rect has rotated.
+ * @returns {{left: number, top: number}} position
+ */
+export const getAnchor = (rect, point, angle) => {
+  log('[getAnchor] rect: ', rect, 'point:', point, 'angle: ', angle);
+  if (point.x > rect.width) {
+    throw new Error(`x: ${point.x} cannot be greater than width: ${rect.width}`);
+  }
+  if (point.y > rect.height) {
+    throw new Error(`y: ${point.y} cannot be greater than height: ${rect.height}`);
+  }
+  const a = normalizeAngle(angle);
+  const top = getTop(rect, point, a);
+  const left = getLeft(rect, point, a);
+
+  log('[getAnchor] top: ', top, 'left: ', left);
+  return { top, left };
+};
+
+const anglePoints = (angle) => {
+  if (angle <= 90) {
+    return { top: 'top-left', left: 'bottom-left' };
+  } else if (angle > 90 && angle <= 180) {
+    return { top: 'bottom-left', left: 'bottom-right' };
+  } else if (angle > 180 && angle <= 270) {
+    return { top: 'bottom-right', left: 'top-right' };
+  } else if (angle > 270 && angle < 360) {
+    return { top: 'top-right', left: 'top-left' };
+  }
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/tools/anchor.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+const Anchor = withStyles((theme) => ({
+  anchor: {
+    cursor: 'pointer',
+    width: '20px',
+    height: '20px',
+    position: 'absolute',
+    borderRadius: '10px',
+    backgroundColor: `var(--ruler-bg, ${theme.palette.primary.contrastText})`,
+    transition: 'background-color 200ms ease-in',
+    border: `solid 1px var(--ruler-stroke, ${theme.palette.primary.dark})`,
+    '&:hover': {
+      backgroundColor: `var(--ruler-bg-hover, ${theme.palette.primary.light})`,
+    },
+  },
+}))(({ classes, className }) => <div className={classNames(classes.anchor, className)} />);
+
+export default Anchor;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/tools/index.js

@@ -0,0 +1,6 @@
+import Protractor from './protractor';
+import Ruler from './ruler';
+import Rotatable from './rotatable';
+import * as utils from './anchor-utils';
+
+export { Protractor, Ruler, Rotatable, utils };