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

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

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

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

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

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

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

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

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

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