@complat/react-spectra-editor 0.10.13-alpha.5

package/dist/components/panel/multiplicity.js

@@ -0,0 +1,405 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _ExpansionPanel = require('@material-ui/core/ExpansionPanel');
+
+var _ExpansionPanel2 = _interopRequireDefault(_ExpansionPanel);
+
+var _ExpansionPanelSummary = require('@material-ui/core/ExpansionPanelSummary');
+
+var _ExpansionPanelSummary2 = _interopRequireDefault(_ExpansionPanelSummary);
+
+var _ExpandMore = require('@material-ui/icons/ExpandMore');
+
+var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
+
+var _Divider = require('@material-ui/core/Divider');
+
+var _Divider2 = _interopRequireDefault(_Divider);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _Table = require('@material-ui/core/Table');
+
+var _Table2 = _interopRequireDefault(_Table);
+
+var _TableBody = require('@material-ui/core/TableBody');
+
+var _TableBody2 = _interopRequireDefault(_TableBody);
+
+var _TableCell = require('@material-ui/core/TableCell');
+
+var _TableCell2 = _interopRequireDefault(_TableCell);
+
+var _TableRow = require('@material-ui/core/TableRow');
+
+var _TableRow2 = _interopRequireDefault(_TableRow);
+
+var _HighlightOff = require('@material-ui/icons/HighlightOff');
+
+var _HighlightOff2 = _interopRequireDefault(_HighlightOff);
+
+var _styles = require('@material-ui/core/styles');
+
+var _Checkbox = require('@material-ui/core/Checkbox');
+
+var _Checkbox2 = _interopRequireDefault(_Checkbox);
+
+var _Button = require('@material-ui/core/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Tooltip = require('@material-ui/core/Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _RefreshOutlined = require('@material-ui/icons/RefreshOutlined');
+
+var _RefreshOutlined2 = _interopRequireDefault(_RefreshOutlined);
+
+var _multiplicity = require('../../actions/multiplicity');
+
+var _multiplicity_select = require('./multiplicity_select');
+
+var _multiplicity_select2 = _interopRequireDefault(_multiplicity_select);
+
+var _multiplicity_coupling = require('./multiplicity_coupling');
+
+var _multiplicity_coupling2 = _interopRequireDefault(_multiplicity_coupling);
+
+var _multiplicity_calc = require('../../helpers/multiplicity_calc');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = function styles(theme) {
+  return {
+    panel: {
+      backgroundColor: '#eee',
+      display: 'table-row'
+    },
+    panelSummary: {
+      backgroundColor: '#eee',
+      height: 32
+    },
+    txtBadge: {},
+    panelDetail: {
+      backgroundColor: '#fff',
+      maxHeight: 'calc(90vh - 220px)', // ROI
+      overflow: 'auto'
+    },
+    table: {
+      width: '100%'
+    },
+    tRowHeadPos: {
+      backgroundColor: '#2196f3',
+      height: 32
+    },
+    tRowHeadNeg: {
+      backgroundColor: '#fa004f',
+      height: 32
+    },
+    tTxtHead: {
+      color: 'white',
+      padding: '4px 0 4px 5px'
+    },
+    tTxtHeadXY: {
+      color: 'white',
+      padding: '4px 0 4px 90px'
+    },
+    tTxt: {
+      padding: 0
+    },
+    tRow: {
+      height: 28,
+      '&:nth-of-type(even)': {
+        backgroundColor: theme.palette.background.default
+      }
+    },
+    rmBtn: {
+      color: 'red',
+      '&:hover': {
+        borderRadius: 12,
+        backgroundColor: 'red',
+        color: 'white'
+      }
+    },
+    moCard: {
+      textAlign: 'left'
+    },
+    moCardHead: {
+      backgroundColor: '#999',
+      color: 'white'
+    },
+    moExtId: {
+      border: '2px solid white',
+      borderRadius: 12,
+      color: 'white',
+      margin: '0 5px 0 5px',
+      padding: '0 5px 0 5px'
+    },
+    moExtTxt: {
+      margin: '0 5px 0 5x',
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica'
+    },
+    moSelect: {
+      margin: '0 5x 0 5px',
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica'
+    },
+    moCBox: {
+      marginLeft: 24,
+      padding: '4px 0 4px 4px'
+    },
+    btnRf: {
+      color: '#fff',
+      float: 'right',
+      minWidth: 40,
+      right: 15
+    }
+  };
+};
+
+var cBoxStyle = function cBoxStyle() {
+  return {
+    root: {
+      color: 'white',
+      '&$checked': {
+        color: 'white'
+      }
+    },
+    checked: {}
+  };
+};
+var MUCheckbox = (0, _styles.withStyles)(cBoxStyle)(_Checkbox2.default);
+
+var createData = function createData(idx, xExtent, peaks, shift, smExtext, mpyType, js, onClick, onRefresh) {
+  return {
+    idx: idx + 1,
+    xExtent: xExtent,
+    onClick: onClick,
+    onRefresh: onRefresh,
+    peaks: peaks,
+    center: (0, _multiplicity_calc.calcMpyCenter)(peaks, shift, mpyType),
+    jStr: (0, _multiplicity_calc.calcMpyJStr)(js),
+    mpyType: mpyType,
+    isCheck: smExtext.xL === xExtent.xL && smExtext.xU === xExtent.xU
+  };
+};
+
+var pkList = function pkList(classes, row, shift, digits, rmMpyPeakByPanelAct) {
+  return row.peaks.map(function (pk) {
+    var xExtent = row.xExtent;
+
+    var cb = function cb() {
+      return rmMpyPeakByPanelAct({ peak: pk, xExtent: xExtent });
+    };
+    var rmBtn = _react2.default.createElement(_HighlightOff2.default, { onClick: cb, className: classes.rmBtn });
+
+    return _react2.default.createElement(
+      _TableRow2.default,
+      { key: pk.x, className: classes.tRow, hover: true },
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right', className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+        '(' + (pk.x - shift).toFixed(digits) + ', ' + pk.y.toExponential(2) + ')'
+      ),
+      _react2.default.createElement(
+        _TableCell2.default,
+        { align: 'right', className: (0, _classnames2.default)(classes.tTxt, 'txt-sv-panel-txt') },
+        rmBtn
+      )
+    );
+  });
+};
+
+var refreshBtn = function refreshBtn(classes, onRefresh) {
+  return _react2.default.createElement(
+    _Tooltip2.default,
+    {
+      placement: 'left',
+      title: _react2.default.createElement(
+        'span',
+        { className: 'txt-sv-tp' },
+        'Calculate Multiplicity'
+      )
+    },
+    _react2.default.createElement(
+      _Button2.default,
+      {
+        className: classes.btnRf,
+        onClick: onRefresh
+      },
+      _react2.default.createElement(_RefreshOutlined2.default, null)
+    )
+  );
+};
+
+var mpyList = function mpyList(classes, digits, multiplicitySt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct) {
+  var stack = multiplicitySt.stack,
+      shift = multiplicitySt.shift,
+      smExtext = multiplicitySt.smExtext;
+
+  var rows = stack.map(function (k, idx) {
+    var peaks = k.peaks,
+        xExtent = k.xExtent,
+        mpyType = k.mpyType,
+        js = k.js;
+
+    var onRefresh = function onRefresh() {
+      return resetMpyOneAct(xExtent);
+    };
+    var onClick = function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      clickMpyOneAct(xExtent);
+    };
+    return createData(idx, xExtent, peaks, shift, smExtext, mpyType, js, onClick, onRefresh);
+  });
+
+  return _react2.default.createElement(
+    'div',
+    null,
+    rows.map(function (row) {
+      return _react2.default.createElement(
+        'div',
+        { className: classes.moCard, key: row.idx },
+        _react2.default.createElement(
+          'div',
+          { className: classes.moCardHead },
+          _react2.default.createElement(
+            'div',
+            null,
+            _react2.default.createElement(MUCheckbox, {
+              className: classes.moCBox,
+              checked: row.isCheck,
+              onChange: row.onClick
+            }),
+            _react2.default.createElement(
+              'span',
+              { className: (0, _classnames2.default)(classes.moExtTxt, classes.moExtId, 'txt-sv-panel-head') },
+              row.idx
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: (0, _classnames2.default)(classes.moExtTxt, 'txt-sv-panel-head') },
+              row.center.toFixed(3) + ' (ppm)'
+            ),
+            _react2.default.createElement(
+              'span',
+              { className: (0, _classnames2.default)(classes.moSelect, 'txt-sv-panel-head') },
+              _react2.default.createElement(_multiplicity_select2.default, { target: row })
+            ),
+            refreshBtn(classes, row.onRefresh)
+          ),
+          _react2.default.createElement(_multiplicity_coupling2.default, {
+            row: row
+          })
+        ),
+        _react2.default.createElement(
+          _Table2.default,
+          { className: classes.table },
+          _react2.default.createElement(
+            _TableBody2.default,
+            null,
+            pkList(classes, row, shift, digits, rmMpyPeakByPanelAct)
+          )
+        )
+      );
+    })
+  );
+};
+
+var MultiplicityPanel = function MultiplicityPanel(_ref) {
+  var classes = _ref.classes,
+      expand = _ref.expand,
+      onExapnd = _ref.onExapnd,
+      multiplicitySt = _ref.multiplicitySt,
+      clickMpyOneAct = _ref.clickMpyOneAct,
+      rmMpyPeakByPanelAct = _ref.rmMpyPeakByPanelAct,
+      resetMpyOneAct = _ref.resetMpyOneAct;
+
+  var digits = 4;
+
+  return _react2.default.createElement(
+    _ExpansionPanel2.default,
+    {
+      expanded: expand,
+      onChange: onExapnd,
+      className: (0, _classnames2.default)(classes.panel),
+      TransitionProps: { unmountOnExit: true } // increase ExpansionPanel performance
+    },
+    _react2.default.createElement(
+      _ExpansionPanelSummary2.default,
+      {
+        expandIcon: _react2.default.createElement(_ExpandMore2.default, null),
+        className: (0, _classnames2.default)(classes.panelSummary)
+      },
+      _react2.default.createElement(
+        _Typography2.default,
+        { className: 'txt-panel-header' },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.txtBadge, 'txt-sv-panel-title') },
+          'Multiplicity'
+        )
+      )
+    ),
+    _react2.default.createElement(_Divider2.default, null),
+    _react2.default.createElement(
+      'div',
+      { className: (0, _classnames2.default)(classes.panelDetail) },
+      mpyList(classes, digits, multiplicitySt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct)
+    )
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {
+      integrationSt: state.integration.present,
+      multiplicitySt: state.multiplicity.present
+    }
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    clickMpyOneAct: _multiplicity.clickMpyOne,
+    rmMpyPeakByPanelAct: _multiplicity.rmMpyPeakByPanel,
+    resetMpyOneAct: _multiplicity.resetMpyOne
+  }, dispatch);
+};
+
+MultiplicityPanel.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  expand: _propTypes2.default.bool.isRequired,
+  onExapnd: _propTypes2.default.func.isRequired,
+  multiplicitySt: _propTypes2.default.object.isRequired,
+  clickMpyOneAct: _propTypes2.default.func.isRequired,
+  rmMpyPeakByPanelAct: _propTypes2.default.func.isRequired,
+  resetMpyOneAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(MultiplicityPanel));

package/dist/components/panel/multiplicity_coupling.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styles = require('@material-ui/core/styles');
+
+var _TextField = require('@material-ui/core/TextField');
+
+var _TextField2 = _interopRequireDefault(_TextField);
+
+var _InputAdornment = require('@material-ui/core/InputAdornment');
+
+var _InputAdornment2 = _interopRequireDefault(_InputAdornment);
+
+var _multiplicity = require('../../actions/multiplicity');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var styles = function styles() {
+  return {
+    jDiv: {
+      height: 28
+    },
+    jTxt: {
+      margin: '0 5px 4px 60px'
+    },
+    moExtTxt: {
+      margin: '0 5px 0 5x',
+      fontSize: '0.8rem',
+      fontFamily: 'Helvetica'
+    },
+    txtField: {
+      width: 260,
+      margin: '0 3px 0 3px'
+    },
+    txtInput: {
+      color: 'white',
+      fontSize: '0.9rem',
+      fontFamily: 'Helvetica',
+      height: 24
+    }
+  };
+};
+
+var txtJ = function txtJ() {
+  return _react2.default.createElement(
+    _InputAdornment2.default,
+    { position: 'start' },
+    _react2.default.createElement(
+      'span',
+      { className: 'txt-cmd-j' },
+      'J\xA0='
+    )
+  );
+};
+
+var txtHz = function txtHz() {
+  return _react2.default.createElement(
+    _InputAdornment2.default,
+    { position: 'end' },
+    _react2.default.createElement(
+      'span',
+      { className: 'txt-cmd-hz' },
+      'Hz'
+    )
+  );
+};
+
+var MpyCoupling = function (_React$Component) {
+  _inherits(MpyCoupling, _React$Component);
+
+  function MpyCoupling(props) {
+    _classCallCheck(this, MpyCoupling);
+
+    var _this = _possibleConstructorReturn(this, (MpyCoupling.__proto__ || Object.getPrototypeOf(MpyCoupling)).call(this, props));
+
+    _this.state = {
+      focus: false,
+      tmpVal: false
+    };
+
+    _this.onFocus = _this.onFocus.bind(_this);
+    _this.onBlur = _this.onBlur.bind(_this);
+    _this.onChange = _this.onChange.bind(_this);
+    return _this;
+  }
+
+  _createClass(MpyCoupling, [{
+    key: 'onFocus',
+    value: function onFocus() {
+      this.setState({ focus: true });
+    }
+  }, {
+    key: 'onBlur',
+    value: function onBlur() {
+      var _props = this.props,
+          row = _props.row,
+          updateMpyJAct = _props.updateMpyJAct;
+      var tmpVal = this.state.tmpVal;
+      var xExtent = row.xExtent;
+
+      this.setState({ focus: false, tmpVal: false });
+      updateMpyJAct({ xExtent: xExtent, value: tmpVal });
+    }
+  }, {
+    key: 'onChange',
+    value: function onChange(e) {
+      this.setState({ tmpVal: e.target.value });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          classes = _props2.classes,
+          row = _props2.row;
+      var _state = this.state,
+          focus = _state.focus,
+          tmpVal = _state.tmpVal;
+
+      var value = focus && (tmpVal || tmpVal === '') ? tmpVal : row.jStr;
+
+      return _react2.default.createElement(
+        'div',
+        { className: (0, _classnames2.default)(classes.jDiv) },
+        _react2.default.createElement(
+          'span',
+          { className: (0, _classnames2.default)(classes.moExtTxt, classes.jTxt, 'txt-sv-panel-head') },
+          _react2.default.createElement(_TextField2.default, {
+            className: (0, _classnames2.default)(classes.txtField, 'txt-cmd-field'),
+            placeholder: '-',
+            value: value,
+            margin: 'none',
+            InputProps: {
+              startAdornment: txtJ(),
+              endAdornment: txtHz(),
+              className: (0, _classnames2.default)(classes.txtInput, 'txt-sv-input-label')
+            },
+            onChange: this.onChange,
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            variant: 'outlined'
+          })
+        )
+      );
+    }
+  }]);
+
+  return MpyCoupling;
+}(_react2.default.Component);
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {}
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    updateMpyJAct: _multiplicity.updateMpyJ
+  }, dispatch);
+};
+
+MpyCoupling.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  row: _propTypes2.default.object.isRequired,
+  updateMpyJAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(styles)(MpyCoupling));

package/dist/components/panel/multiplicity_select.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _reactRedux = require('react-redux');
+
+var _redux = require('redux');
+
+var _FormControl = require('@material-ui/core/FormControl');
+
+var _FormControl2 = _interopRequireDefault(_FormControl);
+
+var _TextField = require('@material-ui/core/TextField');
+
+var _TextField2 = _interopRequireDefault(_TextField);
+
+var _styles = require('@material-ui/core/styles');
+
+var _multiplicity = require('../../actions/multiplicity');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Styles = function Styles() {
+  return {
+    formControl: {
+      minWidth: 50,
+      margin: '2px 3px 0 3px'
+    },
+    txtField: {
+      width: 120,
+      margin: '3px 3px 3px 3px'
+    },
+    txtInput: {
+      height: 24,
+      fontSize: '0.9rem',
+      fontFamily: 'Helvetica',
+      color: 'white'
+    }
+  };
+};
+
+var MpySelect = function MpySelect(_ref) {
+  var classes = _ref.classes,
+      target = _ref.target,
+      selectMpyTypeAct = _ref.selectMpyTypeAct;
+  var mpyType = target.mpyType,
+      xExtent = target.xExtent;
+
+  var onBlur = function onBlur(e) {
+    return selectMpyTypeAct({ xExtent: xExtent, mpyType: e.target.value });
+  };
+  var onChange = function onChange(e) {
+    return selectMpyTypeAct({ xExtent: xExtent, mpyType: e.target.value });
+  };
+  var onEnterPress = function onEnterPress(e) {
+    if (e.key === 'Enter') {
+      selectMpyTypeAct({ xExtent: xExtent, mpyType: e.target.value });
+    }
+  };
+
+  return _react2.default.createElement(
+    _FormControl2.default,
+    {
+      className: (0, _classnames2.default)(classes.formControl),
+      variant: 'outlined'
+    },
+    _react2.default.createElement(_TextField2.default, {
+      className: (0, _classnames2.default)(classes.txtField, 'txt-cmd-field'),
+      value: mpyType,
+      margin: 'none',
+      variant: 'outlined',
+      InputProps: {
+        className: (0, _classnames2.default)(classes.txtInput, 'txt-sv-input-label')
+      },
+      onChange: onChange,
+      onBlur: onBlur,
+      onKeyPress: onEnterPress
+    })
+  );
+};
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  return (// eslint-disable-line
+    {}
+  );
+};
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return (0, _redux.bindActionCreators)({
+    selectMpyTypeAct: _multiplicity.selectMpyType
+  }, dispatch);
+};
+
+MpySelect.propTypes = {
+  classes: _propTypes2.default.object.isRequired,
+  target: _propTypes2.default.object.isRequired,
+  selectMpyTypeAct: _propTypes2.default.func.isRequired
+};
+
+exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _styles.withStyles)(Styles)(MpySelect));