@pie-lib/math-input 6.6.1-next.45 → 6.6.1-next.506

package/src/keypad/index.jsx

@@ -40,14 +40,17 @@ const LatexButton = withStyles(theme => ({
       width: '30px',
       marginTop: '0 !important',
       borderTop: '2px solid black',
+      fontFamily: 'Roboto, Helvetica, Arial, sans-serif !important',
+
       '&.mq-arrow-both': {
+        top: '5px !important',
         '& *': {
           lineHeight: '1 !important'
         },
         '&:before': {
           fontSize: '80%',
           left: 'calc(-13%)',
-          top: '-0.25em'
+          top: '-0.31em'
         },
         '&:after': {
           fontSize: '80% !important',
@@ -57,12 +60,12 @@ const LatexButton = withStyles(theme => ({
         '&.mq-empty:before': {
           fontSize: '80%',
           left: 'calc(-13%)',
-          top: '-0.25em'
+          top: '-0.26em'
         },
         '&.mq-empty:after': {
           fontSize: '80%',
           right: 'calc(-13%)',
-          top: '-0.25em'
+          top: '-0.26em'
         },
         '&.mq-empty': {
           minHeight: '1.4em'
@@ -71,7 +74,7 @@ const LatexButton = withStyles(theme => ({
       '&.mq-arrow-right:before': {
         fontSize: '80%',
         right: 'calc(-13%)',
-        top: '-0.25em'
+        top: '-0.26em'
       },
       '& .mq-overarrow-inner': {
         border: 'none !important'
@@ -104,10 +107,28 @@ const LatexButton = withStyles(theme => ({
     },
     '& .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.94em !important'
+      }
+    }
   }
 }))(props => {
   let buttonClass;
@@ -118,9 +139,29 @@ const LatexButton = withStyles(theme => ({
       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} />
@@ -128,15 +169,29 @@ const LatexButton = withStyles(theme => ({
   );
 });
 
+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
+    noDecimal: PropTypes.bool,
+    mode: PropTypes.string
   };
   static defaultProps = {
     baseSet: baseSet,
@@ -168,17 +223,42 @@ export class KeyPad extends React.Component {
   };
 
   render() {
-    const { classes, className, baseSet, additionalKeys, onFocus } = this.props;
+    const {
+      classes,
+      className,
+      baseSet,
+      additionalKeys,
+      layoutForKeyPad,
+      onFocus,
+      mode
+    } = this.props;
 
-    const allKeys = this.flowKeys(baseSet, additionalKeys || []); //, ...sortKeys(additionalKeys)];
+    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))`
+        shift}, minmax(min-content, 150px))`,
+      ...createCustomLayout(layoutForKeyPad)
     };
     return (
-      <div className={classNames(classes.keys, className)} style={style} onFocus={onFocus}>
+      <div
+        className={classNames(classes.keys, className, classes[mode])}
+        style={style}
+        onFocus={onFocus}
+      >
         {allKeys.map((k, index) => {
           const onClick = this.buttonClick.bind(this, k);
 
@@ -190,12 +270,15 @@ export class KeyPad extends React.Component {
             onClick,
             className: classNames(
               classes.labelButton,
-              classes[k.category],
+              !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}`
+            key: `${k.label || k.latex || k.command}-${index}`,
+            ...(k.actions || {}),
+            ...(k.extraProps || {})
           };
 
           if (k.latex) {
@@ -231,6 +314,9 @@ const styles = theme => ({
     gridColumnGap: '0px',
     gridAutoFlow: 'column'
   },
+  character: {
+    textTransform: 'initial !important'
+  },
   holder: {
     position: 'relative',
     width: '100%',

package/src/keys/constants.js

@@ -17,3 +17,19 @@ export const eulers = set({
   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/src/keys/geometry.js

@@ -14,7 +14,7 @@ export const overRightArrow = set({
 
 export const overLeftRightArrow = set({
   name: 'Overline',
-  latex: '\\overleftrightarrow{}',
+  latex: '\\overleftrightarrow{\\overline{}}', // used this notation to display the pink box
   symbol: 'AB',
   command: '\\overleftrightarrow'
 });
@@ -51,7 +51,7 @@ export const angle = set({
 });
 export const overArc = set({
   name: 'Over arc',
-  latex: '\\overarc{}',
+  latex: '\\overarc{\\overline{}}', // used this notation to display the pink box
   command: '\\overarc'
 });
 export const measureOfAngle = set({
@@ -66,6 +66,12 @@ export const triangle = set({
   command: '\\triangle'
 });
 
+export const square = set({
+  name: 'Square',
+  latex: '\\square',
+  command: '\\square'
+});
+
 export const parallelogram = set({
   name: 'Parallelogram',
   latex: '\\parallelogram',
@@ -114,3 +120,21 @@ export const doublePrimeArcSecond = set({
   latex: '"',
   write: '"'
 });
+
+export const leftArrow = set({
+  name: 'Left Arrow',
+  latex: '\\leftarrow',
+  command: '\\leftarrow'
+});
+
+export const rightArrow = set({
+  name: 'Right Arrow',
+  latex: '\\rightarrow',
+  command: '\\rightarrow'
+});
+
+export const leftrightArrow = set({
+  name: 'Left Right Arrow',
+  latex: '\\leftrightarrow',
+  command: '\\leftrightarrow'
+});

package/src/keys/grades.js

@@ -14,18 +14,27 @@ import * as basicOperators from './basic-operators';
 import * as matrices from './matrices';
 import digits from './digits';
 import * as logic from './logic';
+import * as nav from './navigation';
+import * as edit from './edit';
 
 const hs = [
-  [vars.x, vars.y, exponent.squared, exponent.squareRoot, vars.theta],
-  [fractions.xOverBlank, subSup.subscript, exponent.xToPowerOfN, exponent.nthRoot],
-  [comparison.lessThanEqual, comparison.greaterThanEqual, misc.plusMinus, misc.absValue],
-  [constants.pi, { name: 'i', latex: 'i', write: 'i' }, misc.parenthesis, misc.brackets],
-  [trigonometry.sin, trigonometry.cos, trigonometry.tan, geometry.degree]
+  [fractions.blankOverBlank, misc.percentage, vars.x, exponent.squared, exponent.squareRoot],
+  [operators.circleDot, vars.y, subSup.subscript, exponent.xToPowerOfN, exponent.nthRoot],
+  [
+    misc.plusMinus,
+    comparison.lessThan,
+    comparison.greaterThan,
+    comparison.lessThanEqual,
+    comparison.greaterThanEqual
+  ],
+  [constants.pi, vars.theta, misc.parenthesis, misc.brackets, misc.absValue],
+  [misc.notEqual, trigonometry.sin, trigonometry.cos, trigonometry.tan, geometry.degree]
 ];
 
 const advancedAlgebra = (() => {
   const out = [...hs.map(arr => [...arr])];
 
+  out[0].push({ name: 'i', latex: 'i', write: 'i' });
   out[1].push(log.log);
   out[2].push(log.logSubscript);
   out[3].push(log.ln);
@@ -35,10 +44,11 @@ const advancedAlgebra = (() => {
 
 const statisticsSet = (() => {
   const out = [...hs.map(arr => [...arr])];
-  out[1].push(statistics.mu);
-  out[2].push(statistics.xBar);
-  out[3].push(statistics.yBar);
-  out[4].push(statistics.sigma);
+  out[0].push(statistics.mu);
+  out[1].push(statistics.xBar);
+  out[2].push(statistics.yBar);
+  out[3].push(statistics.sigma);
+  out[4].push(statistics.smallSigma);
   return out;
 })();
 
@@ -54,109 +64,148 @@ export const gradeSets = [
   {
     predicate: n => n >= 6 && n <= 7,
     set: [
-      [vars.x, vars.y, exponent.squared, exponent.squareRoot, operators.circleDot],
-      [fractions.xOverBlank, fractions.xBlankBlank, exponent.xToPowerOfN, exponent.nthRoot, logic.longDivision],
-      [comparison.lessThan, comparison.greaterThan, misc.plusMinus, misc.absValue],
-      [comparison.lessThanEqual, comparison.greaterThanEqual, misc.parenthesis, constants.pi],
-      [trigonometry.sin, trigonometry.cos, trigonometry.tan, geometry.degree]
+      [geometry.degree, comparison.lessThan, comparison.greaterThan],
+      [operators.circleDot, comparison.lessThanEqual, comparison.greaterThanEqual],
+      [vars.x, vars.y, exponent.squared, exponent.xToPowerOfN],
+      [misc.plusMinus, fractions.xOverBlank, fractions.xBlankBlank, exponent.squareRoot],
+      [constants.pi, misc.parenthesis, misc.absValue, exponent.nthRoot]
     ]
   },
   {
     predicate: n => n >= 8 || n === 'HS',
+    set: hs
+  },
+  {
+    predicate: 'non-negative-integers',
     set: [
-      [vars.x, vars.y, exponent.squared, exponent.squareRoot, operators.circleDot],
-      [fractions.xOverBlank, subSup.subscript, exponent.xToPowerOfN, exponent.nthRoot],
-      [
-        comparison.lessThanEqual,
-        comparison.greaterThanEqual,
-        misc.plusMinus,
-        misc.absValue
-        // matrices.singleCellMatrix
-      ],
-      [
-        constants.pi,
-        { name: 'i', latex: 'i', write: 'i' },
-        misc.parenthesis,
-        misc.brackets
-        // matrices.doubleCellMatrix
-      ],
-      [trigonometry.sin, trigonometry.cos, trigonometry.tan, geometry.degree]
+      [digits.seven, digits.eight, digits.nine],
+      [digits.four, digits.five, digits.six],
+      [digits.one, digits.two, digits.three],
+      [digits.zero, { name: '', latex: '', write: '' }, { name: '', latex: '', write: '' }],
+      [nav.left, nav.right, edit.del]
+    ]
+  },
+  {
+    predicate: 'integers',
+    set: [
+      [digits.seven, digits.eight, digits.nine],
+      [digits.four, digits.five, digits.six],
+      [digits.one, digits.two, digits.three],
+      [digits.zero, { name: '', latex: '', write: '' }, basicOperators.minus],
+      [nav.left, nav.right, edit.del]
+    ]
+  },
+  {
+    predicate: 'decimals',
+    set: [
+      [digits.seven, digits.eight, digits.nine],
+      [digits.four, digits.five, digits.six],
+      [digits.one, digits.two, digits.three],
+      [digits.zero, digits.decimalPoint, basicOperators.minus],
+      [nav.left, nav.right, edit.del]
+    ]
+  },
+  {
+    predicate: 'fractions',
+    set: [
+      [digits.seven, digits.eight, digits.nine],
+      [digits.four, digits.five, digits.six],
+      [digits.one, digits.two, digits.three],
+      [digits.zero, fractions.blankOverBlank, basicOperators.minus],
+      [nav.left, nav.right, edit.del]
     ]
   },
   {
     predicate: 'geometry',
     set: [
       [
+        fractions.blankOverBlank,
         geometry.degree,
         geometry.primeArcminute,
         geometry.doublePrimeArcSecond,
-        geometry.triangle,
-        fractions.xOverBlank
+        geometry.congruentTo,
+        geometry.similarTo
       ],
       [
+        operators.circleDot,
         geometry.angle,
         geometry.measureOfAngle,
-        geometry.similarTo,
-        geometry.congruentTo,
-        exponent.squareRoot
-      ],
-      [trigonometry.sin, trigonometry.cos, trigonometry.tan, trigonometry.sec, exponent.nthRoot],
-      [trigonometry.csc, trigonometry.cot, exponent.xToPowerOfN, constants.pi, subSup.subscript],
-      [
-        geometry.overline,
-        geometry.overRightArrow,
-        geometry.overLeftRightArrow,
-        geometry.overArc,
-        vars.theta
-      ]
-    ]
-  },
-  {
-    predicate: 'miscellaneous',
-    set: [
-      [
-        subSup.superscript,
-        subSup.subscript,
-        fractions.blankOverBlank,
-        misc.percentage,
-        geometry.segment,
-        geometry.parallel
+        geometry.triangle,
+        geometry.notCongruentTo,
+        misc.notSimilar
       ],
       [
+        trigonometry.sin,
+        trigonometry.cos,
+        trigonometry.tan,
+        constants.pi,
         exponent.squareRoot,
-        exponent.nthRoot,
-        misc.absValue,
-        misc.parenthesis,
-        geometry.perpindicular,
-        geometry.angle
+        exponent.nthRoot
       ],
       [
-        comparison.lessThan,
-        comparison.greaterThan,
-        geometry.degree,
-        misc.approx,
-        geometry.measureOfAngle,
-        geometry.triangle
-      ],
-      [
-        misc.nApprox,
-        misc.notEqual,
-        geometry.congruentTo,
-        geometry.notCongruentTo,
-        geometry.parallelogram,
-        geometry.circledDot
+        trigonometry.csc,
+        trigonometry.sec,
+        trigonometry.cot,
+        vars.theta,
+        subSup.subscript,
+        exponent.xToPowerOfN
       ],
       [
-        misc.similar,
-        misc.notSimilar,
-        comparison.lessThanEqual,
-        comparison.greaterThanEqual,
-        vars.x,
-        vars.y
+        geometry.overline,
+        geometry.overRightArrow,
+        geometry.overLeftRightArrow,
+        geometry.overArc,
+        geometry.perpindicular,
+        geometry.parallel
       ]
     ]
   },
   // {
+  //   predicate: 'miscellaneous',
+  //   set: [
+  //     [
+  //       subSup.superscript,
+  //       subSup.subscript,
+  //       fractions.blankOverBlank,
+  //       misc.percentage,
+  //       geometry.segment,
+  //       geometry.parallel
+  //     ],
+  //     [
+  //       exponent.squareRoot,
+  //       exponent.nthRoot,
+  //       misc.absValue,
+  //       misc.parenthesis,
+  //       geometry.perpindicular,
+  //       geometry.angle
+  //     ],
+  //     [
+  //       comparison.lessThan,
+  //       comparison.greaterThan,
+  //       geometry.degree,
+  //       misc.approx,
+  //       geometry.measureOfAngle,
+  //       geometry.triangle
+  //     ],
+  //     [
+  //       misc.nApprox,
+  //       misc.notEqual,
+  //       geometry.congruentTo,
+  //       geometry.notCongruentTo,
+  //       geometry.parallelogram,
+  //       geometry.circledDot
+  //     ],
+  //     [
+  //       misc.similar,
+  //       misc.notSimilar,
+  //       comparison.lessThanEqual,
+  //       comparison.greaterThanEqual,
+  //       vars.x,
+  //       vars.y
+  //     ]
+  //   ]
+  // },
+  // {
   //   predicate: 'everything',
   //   set: [
   //     [
@@ -208,6 +257,71 @@ export const gradeSets = [
   {
     predicate: 'statistics',
     set: statisticsSet
+  },
+  {
+    predicate: 'item-authoring',
+    set: [
+      [
+        basicOperators.divide,
+        fractions.blankOverBlank,
+        logic.longDivision,
+        constants.halfInfinity,
+        exponent.squared,
+        exponent.squareRoot,
+        geometry.overline,
+        geometry.overRightArrow,
+        geometry.overLeftRightArrow,
+        log.log
+      ],
+      [
+        basicOperators.multiply,
+        operators.circleDot,
+        { name: '', latex: '', write: '' },
+        subSup.subscript,
+        exponent.xToPowerOfN,
+        exponent.nthRoot,
+        geometry.perpindicular,
+        geometry.parallel,
+        geometry.overArc,
+        log.logSubscript
+      ],
+      [
+        misc.plusMinus,
+        constants.pi,
+        vars.theta,
+        geometry.degree,
+        geometry.angle,
+        geometry.leftArrow,
+        geometry.rightArrow,
+        geometry.triangle,
+        geometry.square,
+        log.ln
+      ],
+      [
+        misc.notEqual,
+        misc.absValue,
+        statistics.smallSigma,
+        statistics.mu,
+        logic.therefore,
+        statistics.sigma,
+        geometry.leftrightArrow,
+        trigonometry.sin,
+        trigonometry.cos,
+        trigonometry.tan
+      ],
+      [
+        comparison.lessThanEqual,
+        comparison.greaterThanEqual,
+        { name: '', latex: '', write: '' },
+        { name: '', latex: '', write: '' },
+        constants.infinity,
+        { name: '', latex: '', write: '' },
+        { name: '', latex: '', write: '' },
+        trigonometry.csc,
+        trigonometry.sec,
+        trigonometry.cot
+      ]
+    ]
   }
 ];
 
@@ -260,6 +374,6 @@ export const normalizeAdditionalKeys = additionalKeys => {
         latex === key.otherNotation
     );
 
-    return predefinedKey || additionalkey;
+    return !latex ? additionalkey : predefinedKey || additionalkey;
   });
 };

package/src/keys/log.js

@@ -12,7 +12,7 @@ export const logSubscript = set({
   name: 'Log with subscript',
   label: 'log s',
   latex: '\\log_{}',
-  command: ['\\log', '_']
+  command: ['\\log', '_', ' ']
 });
 export const ln = set({
   name: 'Ln',

package/src/keys/statistics.js

@@ -27,3 +27,10 @@ export const sigma = set({
   latex: '\\Sigma',
   write: '\\Sigma'
 });
+
+export const smallSigma = set({
+  name: 'sigma',
+  label: '\\sigma',
+  latex: '\\sigma',
+  write: '\\sigma'
+});

package/src/mq/input.jsx

@@ -134,6 +134,41 @@ export class Input extends React.Component {
       this.write('\\embed{newLine}[]');
       this.onInputEdit();
     }
+
+    if (event.charCode === 47) {
+      // Whenever the math editor cursor is positioned after an integer
+      // (i.e. a sequence of 1 or more digits) followed immediately by a space followed immediately by another integer,
+      // then a side effect of pressing the forward slash key or clicking the B fraction button should be to remove
+      // the space between the first integer and the second integer (which is now the numerator of a new fraction).
+      // E.g. if the user were trying to enter the mixed number one and two-thirds, and typed [1], [space], [2], [forward slash],
+      // producing the latex 1\ \frac{2}{|} (where | is not actually part of the representation, but rather
+      // represents the position of the cursor), this should be automatically transformed to 1\frac{2}{|}
+      // (with | again representing the position of the cursor).
+      // Similarly, if the user had typed [1], [2], [space], [3], [4], [forward slash], then the resulting representation should
+      // be transformed from 12\ \frac{34}{|} to 12\frac{34}{|}.
+      const latex = this.mathField.latex();
+
+      if (latex.match(/([1-9])\\ /)) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.clear();
+
+        const indexOfSpace = latex.lastIndexOf('\\ ');
+        // split the latex by the last space added
+        const firstPart = latex.slice(0, indexOfSpace);
+        const secondPart = latex.slice(indexOfSpace + 2);
+
+        // reconstruct the latex without the extra space
+        const newLatex = firstPart + '\\frac{' + secondPart + '}{}';
+
+        this.mathField.latex(newLatex);
+        // trigger pressing keydown to move focus on the denominator
+        this.mathField.el().dispatchEvent(new KeyboardEvent('keydown', { keyCode: 37 }));
+
+        this.onInputEdit();
+      }
+    }
   };
 
   shouldComponentUpdate(nextProps) {