@complat/react-spectra-editor 1.7.1 → 1.8.0

package/dist/components/d3_multi/index.js

@@ -11,9 +11,12 @@ var _redux = require("redux");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _chem = require("../../helpers/chem");
 var _format = _interopRequireDefault(require("../../helpers/format"));
+var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _manager = require("../../actions/manager");
 var _ui = require("../../actions/ui");
+var _integration = require("../../actions/integration");
 var _list_ui = require("../../constants/list_ui");
+var _list_graph = require("../../constants/list_graph");
 var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
 var _multi_focus = _interopRequireDefault(require("./multi_focus"));
 var _draw = require("../common/draw");
@@ -31,9 +34,12 @@ class ViewerMulti extends _react.default.Component {
       entities,
       clickUiTargetAct,
       selectUiSweepAct,
-      scrollUiWheelAct
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     } = this.props;
-    this.rootKlass = '.d3Line';
+    this.rootKlass = `.${_list_graph.LIST_ROOT_SVG_GRAPH.LINE}`;
     this.containerRef = /*#__PURE__*/_react.default.createRef();
     this.currentSize = null;
     this.resizeObserver = null;
@@ -43,85 +49,18 @@ class ViewerMulti extends _react.default.Component {
       entities,
       clickUiTargetAct,
       selectUiSweepAct,
-      scrollUiWheelAct
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     });
     this.normChange = this.normChange.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.syncFocusActions = this.syncFocusActions.bind(this);
   }
   componentDidMount() {
-    this.renderChart(this.props, true);
     this.setupResizeObserver();
-    const {
-      curveSt,
-      seed,
-      peak,
-      cLabel,
-      xLabel,
-      yLabel,
-      feature,
-      tTrEndPts,
-      tSfPeaks,
-      editPeakSt,
-      layoutSt,
-      sweepExtentSt,
-      isUiNoBrushSt,
-      isHidden,
-      resetAllAct,
-      cyclicvoltaSt,
-      integationSt,
-      mtplySt,
-      axesUnitsSt
-    } = this.props;
-    (0, _draw.drawDestroy)(this.rootKlass);
-    resetAllAct(feature);
-    let xxLabel = xLabel;
-    let yyLabel = yLabel;
-    if (axesUnitsSt) {
-      const {
-        curveIdx
-      } = curveSt;
-      const {
-        axes
-      } = axesUnitsSt;
-      let selectedAxes = axes[curveIdx];
-      if (!selectedAxes) {
-        selectedAxes = {
-          xUnit: '',
-          yUnit: ''
-        };
-      }
-      const {
-        xUnit,
-        yUnit
-      } = selectedAxes;
-      xxLabel = xUnit === '' ? xLabel : xUnit;
-      yyLabel = yUnit === '' ? yLabel : yUnit;
-    }
-    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
-      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
-      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
-      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
-    }
-    const filterSeed = seed;
-    const filterPeak = peak;
-    (0, _draw.drawMain)(this.rootKlass, W, H);
-    this.focus.create({
-      curveSt,
-      filterSeed,
-      filterPeak,
-      tTrEndPts,
-      tSfPeaks,
-      editPeakSt,
-      layoutSt,
-      sweepExtentSt,
-      isUiNoBrushSt,
-      cyclicvoltaSt,
-      integationSt,
-      mtplySt
-    });
-    (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
-    (0, _draw.drawDisplay)(this.rootKlass, isHidden);
-    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden);
+    this.mountChart(this.props, true);
   }
   componentDidUpdate(prevProps) {
     const {
@@ -137,65 +76,50 @@ class ViewerMulti extends _react.default.Component {
       editPeakSt,
       layoutSt,
       sweepExtentSt,
+      isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       isHidden,
       cyclicvoltaSt,
-      integationSt,
+      integrationSt,
       mtplySt,
-      axesUnitsSt
+      axesUnitsSt,
+      uiSt
     } = this.props;
+    this.syncFocusActions();
     this.normChange(prevProps);
-    let xxLabel = xLabel;
-    let yyLabel = yLabel;
-    if (axesUnitsSt) {
-      const {
-        curveIdx
-      } = curveSt;
-      const {
-        axes
-      } = axesUnitsSt;
-      let selectedAxes = axes[curveIdx];
-      if (!selectedAxes) {
-        selectedAxes = {
-          xUnit: '',
-          yUnit: ''
-        };
-      }
-      const {
-        xUnit,
-        yUnit
-      } = selectedAxes;
-      xxLabel = xUnit === '' ? xLabel : xUnit;
-      yyLabel = yUnit === '' ? yLabel : yUnit;
-    }
-    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
-      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
-      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
-      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
-    }
-    const filterSeed = seed;
-    const filterPeak = peak;
     if (_format.default.isCyclicVoltaLayout(layoutSt)) {
       this.handleResize();
     }
+    const hasRelevantChange = prevProps.entities !== entities || prevProps.curveSt !== curveSt || prevProps.seed !== seed || prevProps.peak !== peak || prevProps.tTrEndPts !== tTrEndPts || prevProps.tSfPeaks !== tSfPeaks || prevProps.editPeakSt !== editPeakSt || prevProps.layoutSt !== layoutSt || prevProps.sweepExtentSt !== sweepExtentSt || prevProps.isUiNoBrushSt !== isUiNoBrushSt || prevProps.isHidden !== isHidden || prevProps.cyclicvoltaSt !== cyclicvoltaSt || prevProps.integrationSt !== integrationSt || prevProps.mtplySt !== mtplySt || prevProps.axesUnitsSt !== axesUnitsSt || prevProps.uiSt !== uiSt || prevProps.cLabel !== cLabel || prevProps.xLabel !== xLabel || prevProps.yLabel !== yLabel;
+    if (!hasRelevantChange) return;
+    const {
+      xxLabel,
+      yyLabel
+    } = this.resolveAxisLabels(this.props);
     this.focus.update({
       entities,
       curveSt,
-      filterSeed,
-      filterPeak,
+      filterSeed: seed,
+      filterPeak: peak,
       tTrEndPts,
       tSfPeaks,
       editPeakSt,
       layoutSt,
       sweepExtentSt,
+      isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       cyclicvoltaSt,
-      integationSt,
-      mtplySt
+      integrationSt,
+      mtplySt,
+      uiSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
-    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden);
+    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden || !_format.default.isAIFLayout(layoutSt));
   }
   componentWillUnmount() {
     (0, _draw.drawDestroy)(this.rootKlass);
@@ -209,7 +133,7 @@ class ViewerMulti extends _react.default.Component {
     const size = this.getContainerSize();
     if (!size) return;
     if (!this.currentSize || size.width !== this.currentSize.width || size.height !== this.currentSize.height) {
-      this.renderChart(this.props, false);
+      this.mountChart(this.props, false);
     }
   }
   getContainerSize() {
@@ -241,12 +165,69 @@ class ViewerMulti extends _react.default.Component {
     this.resizeObserver = new ResizeObserver(this.handleResize);
     this.resizeObserver.observe(this.containerRef.current);
   }
+  syncFocusActions() {
+    if (!this.focus) return;
+    const {
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    } = this.props;
+    Object.assign(this.focus, {
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    });
+  }
   teardownResizeObserver() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
       this.resizeObserver = null;
     }
   }
+  resolveAxisLabels(props) {
+    const {
+      curveSt,
+      xLabel,
+      yLabel,
+      axesUnitsSt,
+      cyclicvoltaSt
+    } = props;
+    let xxLabel = xLabel;
+    let yyLabel = yLabel;
+    if (axesUnitsSt) {
+      const {
+        curveIdx
+      } = curveSt;
+      const {
+        axes
+      } = axesUnitsSt;
+      const selectedAxes = axes[curveIdx] || {
+        xUnit: '',
+        yUnit: ''
+      };
+      const {
+        xUnit,
+        yUnit
+      } = selectedAxes;
+      xxLabel = xUnit === '' ? xLabel : xUnit;
+      yyLabel = yUnit === '' ? yLabel : yUnit;
+    }
+    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
+      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
+    }
+    return {
+      xxLabel,
+      yyLabel
+    };
+  }
   normChange(prevProps) {
     const {
       feature,
@@ -258,31 +239,50 @@ class ViewerMulti extends _react.default.Component {
       resetAllAct(feature);
     }
   }
-  renderChart(props, shouldReset) {
+  createMultiFocus(size, props) {
+    const {
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    } = props;
+    return new _multi_focus.default({
+      W: size.width,
+      H: size.height,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
+    });
+  }
+  mountChart(props, shouldReset = false) {
     const {
       curveSt,
       seed,
       peak,
       cLabel,
-      xLabel,
-      yLabel,
       feature,
       tTrEndPts,
       tSfPeaks,
       editPeakSt,
       layoutSt,
       sweepExtentSt,
+      isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       isHidden,
       resetAllAct,
       cyclicvoltaSt,
-      integationSt,
+      integrationSt,
       mtplySt,
-      axesUnitsSt,
-      entities,
-      clickUiTargetAct,
-      selectUiSweepAct,
-      scrollUiWheelAct
+      uiSt
     } = props;
     const size = this.getTargetSize(layoutSt);
     this.currentSize = size;
@@ -290,57 +290,34 @@ class ViewerMulti extends _react.default.Component {
     if (shouldReset) {
       resetAllAct(feature);
     }
-    let xxLabel = xLabel;
-    let yyLabel = yLabel;
-    if (axesUnitsSt) {
-      const {
-        curveIdx
-      } = curveSt;
-      const {
-        axes
-      } = axesUnitsSt;
-      let selectedAxes = axes[curveIdx];
-      if (!selectedAxes) {
-        selectedAxes = {
-          xUnit: '',
-          yUnit: ''
-        };
-      }
-      const {
-        xUnit,
-        yUnit
-      } = selectedAxes;
-      xxLabel = xUnit === '' ? xLabel : xUnit;
-      yyLabel = yUnit === '' ? yLabel : yUnit;
-    }
-    const filterSeed = seed;
-    const filterPeak = peak;
-    this.focus = new _multi_focus.default({
-      W: size.width,
-      H: size.height,
-      entities,
-      clickUiTargetAct,
-      selectUiSweepAct,
-      scrollUiWheelAct
-    });
+    const {
+      xxLabel,
+      yyLabel
+    } = this.resolveAxisLabels(props);
+    this.focus = this.createMultiFocus(size, props);
+    this.syncFocusActions();
     (0, _draw.drawMain)(this.rootKlass, size.width, size.height);
     this.focus.create({
       curveSt,
-      filterSeed,
-      filterPeak,
+      filterSeed: seed,
+      filterPeak: peak,
       tTrEndPts,
       tSfPeaks,
       editPeakSt,
       layoutSt,
       sweepExtentSt,
+      isUiAddIntgSt,
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt,
       isUiNoBrushSt,
       cyclicvoltaSt,
-      integationSt,
-      mtplySt
+      integrationSt,
+      mtplySt,
+      uiSt
     });
     (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
     (0, _draw.drawDisplay)(this.rootKlass, isHidden);
-    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden);
+    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden || !_format.default.isAIFLayout(layoutSt));
   }
   render() {
     const {
@@ -348,7 +325,7 @@ class ViewerMulti extends _react.default.Component {
     } = this.props;
     const isCyclicVolta = _format.default.isCyclicVoltaLayout(layoutSt);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d3Line",
+      className: _list_graph.LIST_ROOT_SVG_GRAPH.LINE,
       ref: this.containerRef,
       style: isCyclicVolta ? {
         height: '100%'
@@ -358,6 +335,7 @@ class ViewerMulti extends _react.default.Component {
 }
 const mapStateToProps = (state, props) => ({
   curveSt: state.curve,
+  uiSt: state.ui,
   seed: (0, _chem.Topic2Seed)(state, props),
   peak: (0, _chem.Feature2Peak)(state, props),
   tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
@@ -365,10 +343,13 @@ const mapStateToProps = (state, props) => ({
   editPeakSt: state.editPeak.present,
   layoutSt: state.layout,
   sweepExtentSt: state.ui.sweepExtent,
+  isUiAddIntgSt: state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_ADD,
+  isUiSplitIntgSt: _cfg.default.showIntegSplitTools(state.layout) && state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_SPLIT,
+  isUiVisualSplitIntgSt: _cfg.default.showIntegSplitTools(state.layout) && state.ui.sweepType === _list_ui.LIST_UI_SWEEP_TYPE.INTEGRATION_VISUAL_SPLIT,
   isUiNoBrushSt: _list_ui.LIST_NON_BRUSH_TYPES.indexOf(state.ui.sweepType) < 0,
   cyclicvoltaSt: state.cyclicvolta,
   maxminPeakSt: (0, _chem.Feature2MaxMinPeak)(state, props),
-  integationSt: state.integration.present,
+  integrationSt: state.integration.present,
   mtplySt: state.multiplicity.present,
   axesUnitsSt: state.axesUnits
 });
@@ -377,12 +358,16 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
   clickUiTargetAct: _ui.clickUiTarget,
   selectUiSweepAct: _ui.selectUiSweep,
   scrollUiWheelAct: _ui.scrollUiWheel,
+  splitIntegrationAct: _integration.splitIntegration,
+  addVisualSplitLineAct: _integration.addVisualSplitLine,
+  removeVisualSplitLineAct: _integration.removeVisualSplitLine,
   addNewCylicVoltaPairPeakAct: _cyclic_voltammetry.addNewCylicVoltaPairPeak,
   addCylicVoltaMaxPeakAct: _cyclic_voltammetry.addCylicVoltaMaxPeak,
   addCylicVoltaMinPeakAct: _cyclic_voltammetry.addCylicVoltaMinPeak
 }, dispatch);
 ViewerMulti.propTypes = {
   curveSt: _propTypes.default.object.isRequired,
+  uiSt: _propTypes.default.object.isRequired,
   entities: _propTypes.default.array.isRequired,
   seed: _propTypes.default.array.isRequired,
   peak: _propTypes.default.array.isRequired,
@@ -393,14 +378,20 @@ ViewerMulti.propTypes = {
   tSfPeaks: _propTypes.default.array.isRequired,
   editPeakSt: _propTypes.default.object.isRequired,
   layoutSt: _propTypes.default.string.isRequired,
-  integationSt: _propTypes.default.object.isRequired,
+  integrationSt: _propTypes.default.object.isRequired,
   mtplySt: _propTypes.default.object.isRequired,
   sweepExtentSt: _propTypes.default.object.isRequired,
+  isUiAddIntgSt: _propTypes.default.bool.isRequired,
+  isUiSplitIntgSt: _propTypes.default.bool.isRequired,
+  isUiVisualSplitIntgSt: _propTypes.default.bool.isRequired,
   isUiNoBrushSt: _propTypes.default.bool.isRequired,
   resetAllAct: _propTypes.default.func.isRequired,
   clickUiTargetAct: _propTypes.default.func.isRequired,
   selectUiSweepAct: _propTypes.default.func.isRequired,
   scrollUiWheelAct: _propTypes.default.func.isRequired,
+  splitIntegrationAct: _propTypes.default.func.isRequired,
+  addVisualSplitLineAct: _propTypes.default.func.isRequired,
+  removeVisualSplitLineAct: _propTypes.default.func.isRequired,
   isHidden: _propTypes.default.bool,
   cyclicvoltaSt: _propTypes.default.object.isRequired,
   maxminPeakSt: _propTypes.default.object,