@pie-element/ebsr 6.6.3-next.1075 → 6.6.3-next.1082

package/configure/node_modules/@pie-lib/math-input/src/keypad/index.jsx

@@ -0,0 +1,367 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { lighten, fade } from '@material-ui/core/styles/colorManipulator';
+import green from '@material-ui/core/colors/green';
+import { sortKeys } from './keys-layout';
+import * as mq from '../mq';
+import { baseSet } from '../keys';
+import debug from 'debug';
+import _ from 'lodash';
+
+const log = debug('pie-lib:math-inline:keypad');
+
+const LatexButton = withStyles(theme => ({
+  root: {
+    textTransform: 'none',
+    padding: 0,
+    margin: 0,
+    fontSize: '110% !important'
+  },
+  latexButton: {
+    pointerEvents: 'none',
+    textTransform: 'none !important',
+    '& .mq-scaled.mq-sqrt-prefix': {
+      transform: 'scale(1, 0.9) !important'
+    },
+    '& .mq-sup-only .mq-sup': {
+      marginBottom: '0.9px !important'
+    },
+    '& .mq-empty': {
+      backgroundColor: `${fade(theme.palette.secondary.main, 0.4)} !important`
+    },
+    '& .mq-overline .mq-overline-inner': {
+      borderTop: '2px solid black'
+    },
+    '& .mq-overarrow': {
+      width: '30px',
+      marginTop: '0 !important',
+      borderTop: '2px solid black',
+      '&.mq-arrow-both': {
+        '& *': {
+          lineHeight: '1 !important'
+        },
+        '&:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&:after': {
+          fontSize: '80% !important',
+          right: 'calc(-13%) !important',
+          top: '-1.5em'
+        },
+        '&.mq-empty:before': {
+          fontSize: '80%',
+          left: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&.mq-empty:after': {
+          fontSize: '80%',
+          right: 'calc(-13%)',
+          top: '-0.25em'
+        },
+        '&.mq-empty': {
+          minHeight: '1.4em'
+        }
+      },
+      '&.mq-arrow-right:before': {
+        fontSize: '80%',
+        right: 'calc(-13%)',
+        top: '-0.25em'
+      },
+      '& .mq-overarrow-inner': {
+        border: 'none !important'
+      },
+      '& .mq-overarrow-inner .mq-overarrow-inner-right': {
+        display: 'none !important'
+      }
+    },
+    '& .mq-root-block': {
+      padding: '5px'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:after': {
+      right: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-right.mq-empty:before': {
+      right: '-5px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-overarrow.mq-arrow-both.mq-empty:before': {
+      left: '-6px',
+      fontSize: '80% !important',
+      top: '-3px'
+    },
+    '& .mq-longdiv-inner': {
+      borderTop: '1px solid !important',
+      paddingTop: '1.5px !important'
+    },
+    '& .mq-parallelogram': {
+      lineHeight: 0.85
+    },
+    '& .mq-overarc': {
+      borderTop: '2px solid black !important',
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important'
+      }
+    }
+  },
+  parallelButton: {
+    fontStyle: 'italic'
+  },
+  leftRightArrowButton: {
+    '& .mq-overarrow.mq-arrow-both': {
+      '& .mq-overline-inner': {
+        borderTop: 'none !important',
+        paddingTop: '0 !important'
+      },
+      '&:after': {
+        top: '-1.64em !important'
+      }
+    }
+  }
+}))(props => {
+  let buttonClass;
+
+  if (props.latex === '\\parallel') {
+    buttonClass = classNames(
+      props.classes.latexButton,
+      props.mqClassName,
+      props.classes.parallelButton
+    );
+  } else if (props.latex === '\\overleftrightarrow{\\overline{}}') {
+    buttonClass = classNames(
+      props.classes.latexButton,
+      props.mqClassName,
+      props.classes.leftRightArrowButton
+    );
+  } else {
+    buttonClass = classNames(props.classes.latexButton, props.mqClassName);
+  }
+
+  try {
+    const MQ = MathQuill.getInterface(2);
+    const span = document.createElement('span');
+    span.innerHTML = '';
+    const mathField = MQ.StaticMath(span);
+
+    mathField.parseLatex(props.latex);
+    mathField.latex(props.latex);
+  } catch (e) {
+    // received latex has errors - do not create button
+    return <></>;
+  }
+
+  return (
+    <Button className={classNames(props.classes.root, props.className)} onClick={props.onClick}>
+      <mq.Static className={buttonClass} latex={props.latex} />
+    </Button>
+  );
+});
+
+const createCustomLayout = layoutObj => {
+  if (layoutObj) {
+    return {
+      gridTemplateColumns: `repeat(${layoutObj.columns}, minmax(min-content, 150px))`,
+      gridTemplateRows: `repeat(${layoutObj.rows}, minmax(40px, 60px))`,
+      gridAutoFlow: 'initial'
+    };
+  }
+
+  return {};
+};
+
+export class KeyPad extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    baseSet: PropTypes.array,
+    additionalKeys: PropTypes.array,
+    layoutForKeyPad: PropTypes.object,
+    onPress: PropTypes.func.isRequired,
+    onFocus: PropTypes.func,
+    noDecimal: PropTypes.bool,
+    mode: PropTypes.string
+  };
+  static defaultProps = {
+    baseSet: baseSet,
+    noDecimal: false
+  };
+
+  buttonClick = key => {
+    log('[buttonClick]', key);
+    const { onPress } = this.props;
+    onPress(key);
+  };
+
+  flowKeys = (base, extras) => {
+    const transposed = [...sortKeys(base), ...sortKeys(extras)];
+    return _.flatten(transposed);
+  };
+
+  keyIsNotAllowed = key => {
+    const { noDecimal } = this.props;
+
+    if (
+      ((key.write === '.' && key.label === '.') || (key.write === ',' && key.label === ',')) &&
+      noDecimal
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      baseSet,
+      additionalKeys,
+      layoutForKeyPad,
+      onFocus,
+      mode
+    } = this.props;
+
+    const noBaseSet = [
+      'non-negative-integers',
+      'integers',
+      'decimals',
+      'fractions',
+      'item-authoring',
+      'language'
+    ];
+
+    const keysWithoutBaseSet = noBaseSet.includes(mode);
+    const allKeys = keysWithoutBaseSet
+      ? this.flowKeys([], additionalKeys || [])
+      : this.flowKeys(baseSet, additionalKeys || []); //, ...sortKeys(additionalKeys)];
+
+    const shift = allKeys.length % 5 ? 1 : 0;
+    const style = {
+      gridTemplateColumns: `repeat(${Math.floor(allKeys.length / 5) +
+        shift}, minmax(min-content, 150px))`,
+      ...createCustomLayout(layoutForKeyPad)
+    };
+    return (
+      <div
+        className={classNames(classes.keys, className, classes[mode])}
+        style={style}
+        onFocus={onFocus}
+      >
+        {allKeys.map((k, index) => {
+          const onClick = this.buttonClick.bind(this, k);
+
+          if (!k) {
+            return <span key={`empty-${index}`} />;
+          }
+
+          const common = {
+            onClick,
+            className: classNames(
+              classes.labelButton,
+              !keysWithoutBaseSet && classes[k.category],
+              classes[k.extraClass],
+              k.label === ',' && classes.comma,
+              k.label === '.' && classes.dot
+            ),
+            disabled: this.keyIsNotAllowed(k),
+            key: `${k.label || k.latex || k.command}-${index}`,
+            ...(k.actions || {})
+          };
+
+          if (k.latex) {
+            return <LatexButton latex={k.latex} {...common} className={classes.latexButton} />;
+          }
+
+          if (k.label) {
+            return <Button {...common}>{k.label}</Button>;
+          } else {
+            const Icon = k.icon ? k.icon : 'div';
+
+            return (
+              <IconButton tabIndex={'-1'} {...common}>
+                <Icon className={classes.icon} />
+              </IconButton>
+            );
+          }
+        })}
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  keys: {
+    '& *': {
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important'
+    },
+    width: '100%',
+    display: 'grid',
+    gridTemplateRows: 'repeat(5, minmax(40px, 60px))',
+    gridRowGap: '0px',
+    gridColumnGap: '0px',
+    gridAutoFlow: 'column'
+  },
+  character: {
+    textTransform: 'initial !important'
+  },
+  holder: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#cef',
+    borderRadius: 0,
+    padding: `${theme.spacing.unit}px 0 ${theme.spacing.unit}px 0`
+  },
+  labelButton: {
+    minWidth: 'auto',
+    fontSize: '140% !important',
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7)
+    },
+    borderRadius: 0
+  },
+  latexButton: {
+    minWidth: 'auto',
+    borderRadius: 0,
+    backgroundColor: lighten(theme.palette.primary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.primary.light, 0.7)
+    }
+  },
+  base: {},
+  operators: {
+    backgroundColor: lighten(theme.palette.secondary.light, 0.5),
+    '&:hover': {
+      backgroundColor: lighten(theme.palette.secondary.light, 0.7)
+    }
+  },
+  comparison: {
+    backgroundColor: lighten(green[500], 0.5),
+    '&:hover': {
+      backgroundColor: lighten(green[500], 0.7)
+    }
+  },
+  comma: {
+    fontSize: '200% !important',
+    lineHeight: '100%'
+  },
+  dot: {
+    fontSize: '200% !important',
+    lineHeight: '100%'
+  },
+  icon: {
+    height: '30px'
+  }
+});
+
+export default withStyles(styles)(KeyPad);

package/configure/node_modules/@pie-lib/math-input/src/keypad/keys-layout.js

@@ -0,0 +1,17 @@
+import * as _ from 'lodash';
+
+/**
+ * Sort additional keys.
+ *
+ * Expects an array of rows.
+ * @param {} keys
+ */
+export const sortKeys = keys => {
+  // add any missing rows
+  _.times(5 - keys.length, () => {
+    keys.push([]);
+  });
+
+  const out = _.zip.apply(null, keys);
+  return out;
+};

package/configure/node_modules/@pie-lib/math-input/src/keys/basic-operators.js

@@ -0,0 +1,32 @@
+import { DIVIDE, MULTIPLY } from './chars';
+import { mkSet } from './utils';
+
+const set = mkSet('operators');
+
+export const equals = set({
+  write: '=',
+  label: '='
+});
+
+export const plus = set({
+  write: '+',
+  label: '+'
+});
+
+export const minus = set({
+  write: '−',
+  label: '−'
+});
+
+export const divide = set({
+  name: 'divide',
+  label: DIVIDE,
+  command: '\\divide',
+  otherNotation: '\\div'
+});
+
+export const multiply = set({
+  name: 'multiply',
+  label: MULTIPLY,
+  command: '\\times'
+});

package/configure/node_modules/@pie-lib/math-input/src/keys/chars.js

@@ -0,0 +1,5 @@
+export const DELETE = '\u232B';
+export const LEFT_ARROW = '◀';
+export const RIGHT_ARROW = '▶';
+export const DIVIDE = '\u00F7';
+export const MULTIPLY = '\u00D7';

package/configure/node_modules/@pie-lib/math-input/src/keys/comparison.js

@@ -0,0 +1,27 @@
+const set = o => ({ ...o, category: 'comparison' });
+
+export const lessThan = set({
+  name: 'Less than',
+  latex: '<',
+  command: '\\lt'
+});
+
+export const greaterThan = set({
+  name: 'Greater than',
+  latex: '>',
+  command: '\\gt'
+});
+
+export const lessThanEqual = set({
+  name: 'Less than or equal',
+  latex: '\\le',
+  symbol: '<=',
+  command: '\\le'
+});
+
+export const greaterThanEqual = set({
+  name: 'Greater than or equal',
+  symbol: '>=',
+  command: '\\ge',
+  latex: '\\ge'
+});

package/configure/node_modules/@pie-lib/math-input/src/keys/constants.js

@@ -0,0 +1,35 @@
+import { mkSet } from './utils';
+
+const set = mkSet('constants');
+
+export const pi = set({
+  name: 'Pi',
+  label: 'π',
+  latex: '\\pi',
+  command: '\\pi',
+  category: 'constants'
+});
+
+export const eulers = set({
+  name: 'Eulers',
+  label: 'e',
+  latex: 'e',
+  command: 'e',
+  category: 'constants'
+});
+
+export const infinity = set({
+  name: 'Infinity',
+  label: '\\infty',
+  latex: '\\infty',
+  command: '\\infty',
+  category: 'constants'
+});
+
+export const halfInfinity = set({
+  name: 'Half Infinity',
+  label: '\\propto',
+  latex: '\\propto',
+  command: '\\propto',
+  category: 'constants'
+});

package/configure/node_modules/@pie-lib/math-input/src/keys/digits.js

@@ -0,0 +1,40 @@
+import times from 'lodash/times';
+
+const digitMap = {
+  0: 'zero',
+  1: 'one',
+  2: 'two',
+  3: 'three',
+  4: 'four',
+  5: 'five',
+  6: 'six',
+  7: 'seven',
+  8: 'eight',
+  9: 'nine'
+};
+
+const comma = { name: 'comma', label: ',', write: ',', category: 'digit' };
+
+const decimalPoint = {
+  name: 'decimal-point',
+  label: '.',
+  write: '.',
+  category: 'digit'
+};
+
+export default times(10, String)
+  .map(n => {
+    return {
+      name: digitMap[n],
+      write: n,
+      label: n,
+      category: 'digit'
+    };
+  })
+  .reduce(
+    (acc, o) => {
+      acc[o.name] = o;
+      return acc;
+    },
+    { comma, decimalPoint }
+  );

package/configure/node_modules/@pie-lib/math-input/src/keys/edit.js

@@ -0,0 +1,3 @@
+import { DELETE } from './chars';
+
+export const del = { label: DELETE, category: 'edit', keystroke: 'Backspace' };

package/configure/node_modules/@pie-lib/math-input/src/keys/exponent.js

@@ -0,0 +1,27 @@
+import { mkSet } from './utils';
+
+const set = mkSet('exponent');
+
+export const squared = set({
+  name: 'Squared',
+  latex: 'x^2',
+  write: '^2'
+});
+
+export const xToPowerOfN = set({
+  name: 'X to the power of n',
+  latex: 'x^{}',
+  command: '^'
+});
+
+export const squareRoot = set({
+  name: 'Square root',
+  latex: '\\sqrt{}',
+  command: '\\sqrt'
+});
+
+export const nthRoot = set({
+  name: 'Nth root',
+  latex: '\\sqrt[{}]{}',
+  command: '\\nthroot'
+});

package/configure/node_modules/@pie-lib/math-input/src/keys/fractions.js

@@ -0,0 +1,23 @@
+import { mkSet } from './utils';
+
+const set = mkSet('fractions');
+
+export const blankOverBlank = set({
+  name: 'blank/blank',
+  latex: '\\frac{}{}',
+  command: '\\frac'
+});
+
+export const xOverBlank = set({
+  latex: '\\frac{x}{ }',
+  name: 'X/blank',
+  label: 'x/[]',
+  command: '/'
+});
+
+export const xBlankBlank = set({
+  name: 'X (blank/blank)',
+  latex: 'x\\frac{}{}',
+  label: 'x([]/[])',
+  command: '\\frac'
+});