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

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

@@ -0,0 +1,15 @@
+import { mkSet } from './utils';
+
+const set = mkSet('sub-sup');
+
+export const superscript = set({
+  name: 'Superscript',
+  latex: 'x^{}',
+  command: '^'
+});
+
+export const subscript = set({
+  name: 'Subscript',
+  latex: 'x_{}',
+  command: '_'
+});

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

@@ -0,0 +1,15 @@
+import { mkSet } from './utils';
+
+const set = mkSet('trigonometry');
+
+export const sin = set({ name: 'sin', label: 'sin', command: '\\sin', latex: '\\sin' });
+
+export const cos = set({ name: 'cos', label: 'cos', command: '\\cos', latex: '\\cos' });
+
+export const tan = set({ name: 'tan', label: 'tan', command: '\\tan', latex: '\\tan' });
+
+export const sec = set({ name: 'sec', label: 'sec', command: '\\sec', latex: '\\sec' });
+
+export const csc = set({ name: 'csc', label: 'csc', command: '\\csc', latex: '\\csc' });
+
+export const cot = set({ name: 'cot', label: 'cot', command: '\\cot', latex: '\\cot' });

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

@@ -0,0 +1,71 @@
+import _ from 'lodash';
+
+export const mkSet = category => o => ({ ...o, category });
+
+export const toArray = o => Object.keys(o).map(k => o[k]);
+
+export const toKey = category => v => {
+  if (typeof v === 'string') {
+    return {
+      name: v,
+      label: v,
+      category,
+      write: v
+    };
+  } else {
+    return {
+      ...v,
+      category
+    };
+  }
+};
+
+export const transformToKeySetStructure = (data = []) => {
+  const structure = [];
+
+  _.times(5, () => {
+    structure.push([]);
+  });
+
+  let ln = data.length;
+  let i = 0;
+  let j = 0;
+
+  while (j < ln) {
+    structure[i++].push(data[j++]);
+
+    if (i === 5) {
+      i = 0;
+    }
+  }
+
+  return structure;
+};
+
+const latexAndNameDontExist = base => k => {
+  const flattened = _.flatten(base);
+  const latexExists = flattened.some(b => b.latex === k.latex);
+  const nameExists = flattened.some(b => b.name === k.name);
+  return !latexExists && !nameExists;
+};
+
+export const extendKeySet = (base = [], keySetData = []) => {
+  keySetData = keySetData.filter(latexAndNameDontExist(base));
+
+  const final = [];
+
+  _.times(5 - base.length, () => {
+    base.push([]);
+  });
+  _.times(5, () => {
+    final.push([]);
+  });
+
+  const extra = transformToKeySetStructure(keySetData);
+
+  for (let i = 0; i < 5; i++) {
+    final[i] = [...base[i], ...extra[i]];
+  }
+
+  return final;
+};

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

@@ -0,0 +1,19 @@
+import { mkSet } from './utils';
+
+const set = mkSet('vars');
+
+export const x = set({
+  name: 'X',
+  latex: 'x',
+  write: 'x'
+});
+export const y = set({
+  name: 'Y',
+  latex: 'y',
+  write: 'y'
+});
+export const theta = set({
+  name: 'Theta',
+  latex: '\\theta',
+  write: '\\theta'
+});

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import * as mq from './mq';
+import { baseSet } from './keys';
+import KeyPad from './keypad';
+import debug from 'debug';
+
+const log = debug('pie-lib:math-input');
+
+export class MathInput extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    keyset: PropTypes.array,
+    displayMode: PropTypes.oneOf(['block', 'block-on-focus']),
+    latex: PropTypes.string,
+    onChange: PropTypes.func
+  };
+
+  static defaultProps = {
+    keyset: [],
+    displayMode: 'block'
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false
+    };
+  }
+
+  keypadPress = key => {
+    log('[keypadPress] key:', key);
+
+    if (!this.input) {
+      return;
+    }
+
+    if (key.latex && !key.command) {
+      this.input.write(key.latex);
+    } else if (key.write) {
+      this.input.write(key.write);
+    } else if (key.command) {
+      this.input.command(key.command);
+    } else if (key.keystroke) {
+      this.input.keystroke(key.keystroke);
+    }
+  };
+
+  inputFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  inputBlur = () => {
+    this.setState({ focused: false });
+  };
+
+  changeLatex = l => {
+    const { onChange } = this.props;
+
+    if (onChange && l !== this.props.latex) {
+      log('[changeLatex]', l, this.props.latex);
+      onChange(l);
+    }
+  };
+
+  render() {
+    const { classes, className, keyset, latex } = this.props;
+    const { focused } = this.state;
+
+    const showKeypad = true; // TODO: add support for different displayModes - displayMode === 'block' || focused;
+
+    return (
+      <div className={classNames(classes.mathInput, className, focused && classes.focused)}>
+        <mq.Input
+          className={classes.mqInput}
+          innerRef={r => (this.input = r)}
+          onFocus={this.inputFocus}
+          onBlur={this.inputBlur}
+          latex={latex}
+          onChange={this.changeLatex}
+        />
+        {showKeypad && (
+          <div className={classes.pad}>
+            <KeyPad baseSet={baseSet} additionalKeys={keyset} onPress={this.keypadPress} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const grey = 'rgba(0, 0, 0, 0.23)';
+const styles = theme => ({
+  formGroup: {
+    display: 'flex',
+    textAlign: 'right',
+    float: 'right'
+  },
+  pad: {
+    width: '100%',
+    display: 'flex'
+  },
+  mathInput: {
+    borderRadius: '4px',
+    border: `solid 1px ${grey}`,
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+    transition: 'border 200ms linear'
+  },
+  focused: {
+    border: `solid 1px ${theme.palette.primary.main}`
+  },
+  mqInput: {
+    width: '100%',
+    border: `solid 0px ${theme.palette.primary.light}`,
+    transition: 'border 200ms linear',
+    padding: theme.spacing.unit,
+    '&.mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: `solid 0px ${theme.palette.primary.dark}`
+    }
+  }
+});
+export default withStyles(styles)(MathInput);

package/configure/node_modules/@pie-lib/math-input/src/mq/custom-elements.js

@@ -0,0 +1,11 @@
+const registerLineBreak = function(MQ) {
+  MQ.registerEmbed('newLine', () => {
+    return {
+      htmlString: '<div class="newLine"></div>',
+      text: () => 'testText',
+      latex: () => '\\embed{newLine}[]'
+    };
+  });
+};
+
+export { registerLineBreak };

package/configure/node_modules/@pie-lib/math-input/src/mq/index.js

@@ -0,0 +1,4 @@
+import Input from './input';
+import Static from './static';
+
+export { Input, Static };

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import debug from 'debug';
+import classNames from 'classnames';
+import { registerLineBreak } from './custom-elements';
+import MathQuill from '@pie-framework/mathquill';
+
+let MQ;
+if (typeof window !== 'undefined') {
+  MQ = MathQuill.getInterface(2);
+
+  if (MQ && MQ.registerEmbed) {
+    registerLineBreak(MQ);
+  }
+}
+
+const log = debug('math-input:mq:input');
+
+/**
+ * Wrapper for MathQuill MQ.MathField.
+ */
+export class Input extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+    latex: PropTypes.string,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func
+  };
+
+  componentDidMount() {
+    if (!MQ) {
+      throw new Error('MQ is not defined - but component has mounted?');
+    }
+
+    this.mathField = MQ.MathField(this.input, {
+      handlers: {
+        edit: this.onInputEdit.bind(this)
+      }
+    });
+
+    this.updateLatex();
+  }
+
+  componentDidUpdate() {
+    this.updateLatex();
+  }
+
+  updateLatex() {
+    if (!this.mathField) {
+      return;
+    }
+    const { latex } = this.props;
+    if (latex) {
+      this.mathField.latex(latex);
+    }
+  }
+
+  clear() {
+    this.mathField.latex('');
+    return '';
+  }
+
+  blur() {
+    log('blur mathfield');
+    this.mathField.blur();
+  }
+
+  focus() {
+    log('focus mathfield...');
+    this.mathField.focus();
+  }
+
+  command(v) {
+    log('command: ', v);
+    if (Array.isArray(v)) {
+      v.forEach(vv => {
+        this.mathField.cmd(vv);
+      });
+    } else {
+      this.mathField.cmd(v);
+    }
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+
+  keystroke(v) {
+    this.mathField.keystroke(v);
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+
+  write(v) {
+    log('write: ', v);
+    this.mathField.write(v);
+    this.mathField.focus();
+    return this.mathField.latex();
+  }
+
+  onInputEdit = () => {
+    log('[onInputEdit] ...');
+    const { onChange } = this.props;
+    if (!this.mathField) {
+      return;
+    }
+
+    if (onChange) {
+      onChange(this.mathField.latex());
+    }
+  };
+
+  refresh = () => {
+    this.blur();
+    this.focus();
+  };
+
+  onKeyPress = event => {
+    const keys = Object.keys(this.mathField.__controller.options);
+
+    if (keys.indexOf('ignoreNextMousedown') < 0) {
+      // It seems like the controller has the above handler as an option
+      // when all the right events are set and everything works fine
+      // this seems to work in all cases
+      this.refresh();
+    }
+
+    if (event.charCode === 13) {
+      // if enter's pressed, we're going for a custom embedded element that'll
+      // have a block display (empty div) - for a hacked line break using ccs
+      // all because mathquill doesn't support a line break
+      this.write('\\embed{newLine}[]');
+      this.onInputEdit();
+    }
+  };
+
+  shouldComponentUpdate(nextProps) {
+    log('next: ', nextProps.latex);
+    log('current: ', this.mathField.latex());
+    return nextProps.latex !== this.mathField.latex();
+  }
+
+  render() {
+    const { onClick, onFocus, onBlur, classes, className } = this.props;
+
+    return (
+      <span
+        className={classNames(classes.input, className)}
+        onKeyPress={this.onKeyPress}
+        onClick={onClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        ref={r => (this.input = r)}
+      />
+    );
+  }
+}
+
+const styles = () => ({});
+
+export default withStyles(styles)(Input);

package/configure/node_modules/@pie-lib/math-input/src/mq/static.jsx

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import MathQuill from '@pie-framework/mathquill';
+import { updateSpans } from '../index';
+
+let MQ;
+if (typeof window !== 'undefined') {
+  MQ = MathQuill.getInterface(2);
+}
+
+const log = debug('pie-lib:math-input:mq:static');
+const REGEX = /\\MathQuillMathField\[r\d*\]\{(.*?)\}/g;
+const WHITESPACE_REGEX = / /g;
+
+function stripSpaces(string = '') {
+  return string.replace(WHITESPACE_REGEX, '');
+}
+
+/**
+ * Wrapper for MathQuill MQ.MathField.
+ */
+export default class Static extends React.Component {
+  static propTypes = {
+    latex: PropTypes.string.isRequired,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    className: PropTypes.string,
+    getFieldName: PropTypes.func,
+    onSubFieldChange: PropTypes.func,
+    onSubFieldFocus: PropTypes.func,
+    setInput: PropTypes.func
+  };
+
+  componentDidMount() {
+    this.update();
+    updateSpans();
+  }
+
+  componentDidUpdate() {
+    this.update();
+    updateSpans();
+  }
+
+  onInputEdit(field) {
+    if (!this.mathField) {
+      return;
+    }
+    const name = this.props.getFieldName(field, this.mathField.innerFields);
+    if (this.props.onSubFieldChange) {
+      this.props.onSubFieldChange(name, field.latex());
+    }
+  }
+
+  update() {
+    if (!MQ) {
+      throw new Error('MQ is not defined - but component has mounted?');
+    }
+    // this.input.innerHTML = this.props.latex;
+    if (!this.mathField) {
+      this.mathField = MQ.StaticMath(this.input, {
+        handlers: {
+          edit: this.onInputEdit.bind(this)
+        }
+      });
+    }
+
+    try {
+      this.mathField.parseLatex(this.props.latex);
+      this.mathField.latex(this.props.latex);
+    } catch (e) {
+      // default latex if received has errors
+      this.mathField.latex('\\MathQuillMathField[r1]{}');
+    }
+  }
+
+  blur() {
+    log('blur mathfield');
+    this.mathField.blur();
+  }
+
+  focus() {
+    log('focus mathfield...');
+    this.mathField.focus();
+  }
+
+  shouldComponentUpdate(nextProps) {
+    try {
+      const parsedLatex = this.mathField.parseLatex(nextProps.latex);
+      const stripped = stripSpaces(parsedLatex);
+      const newFieldCount = (nextProps.latex.match(REGEX) || []).length;
+
+      const out =
+        stripped !== stripSpaces(this.mathField.latex().trim()) ||
+        newFieldCount !== Object.keys(this.mathField.innerFields).length / 2;
+
+      log('[shouldComponentUpdate] ', out);
+      return out;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Error parsing latex:', e.message, 'skip update');
+      // eslint-disable-next-line no-console
+      console.warn(e);
+      return false;
+    }
+  }
+
+  onFocus = e => {
+    try {
+      let rootBlock = e.target.parentElement.nextSibling;
+      let id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+
+      if (!id) {
+        rootBlock = rootBlock.parentElement;
+        id = parseInt(rootBlock.getAttribute('mathquill-block-id'), 10);
+      }
+
+      const innerField = this.mathField.innerFields.find(f => f.id === id);
+
+      if (innerField) {
+        const name = this.props.getFieldName(innerField, this.mathField.innerFields);
+        if (this.props.setInput) {
+          this.props.setInput(innerField);
+        }
+        this.props.onSubFieldFocus(name, innerField);
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('error finding root block', err.message);
+    }
+  };
+
+  render() {
+    const { onBlur, className } = this.props;
+
+    return (
+      <span
+        className={className}
+        onFocus={this.onFocus}
+        onBlur={onBlur}
+        ref={r => (this.input = r)}
+      />
+    );
+  }
+}