Merge b0f0b66 into f3800d6

terrestris · Sep 28, 2018 · 28de22d · 28de22d
2 parents f3800d6 + b0f0b66
commit 28de22d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/src/Button/DigitizeButton/DigitizeButton.jsx b/src/Button/DigitizeButton/DigitizeButton.jsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 
 import { Modal, Input } from 'antd';
 
+const TextArea = Input.TextArea;
+
 import isFunction from 'lodash/isFunction.js';
 
 import OlMap from 'ol/Map';
@@ -427,7 +429,15 @@ class DigitizeButton extends React.Component {
      * See https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select.html
      * for more information.
      */
-    onFeatureSelect: PropTypes.func
+    onFeatureSelect: PropTypes.func,
+
+    /**
+     * Maximal length of feature label.
+     * If exceeded label will be divided into multiple lines. Optional.
+     *
+     * @type {Number} maxLabelLineLength
+     */
+    maxLabelLineLength: PropTypes.number
   };
 
   /**
@@ -659,6 +669,10 @@ class DigitizeButton extends React.Component {
       selectStrokeColor
     } = this.props;
 
+    if (feature.get('label')) {
+      text = feature.get('label');
+    }
+
     return new OlStyleStyle({
       image: new OlStyleCircle({
         radius: 7,
@@ -898,8 +912,17 @@ class DigitizeButton extends React.Component {
     const feature = evt.features.getArray()[0];
     if (feature.get('isLabel')) {
       this._digitizeTextFeature = feature;
+      let textLabel = '';
+
+      if (feature.getStyle() && feature.getStyle().getText()) {
+        textLabel = feature.getStyle().getText().getText();
+      } else if (feature.get('label')) {
+        textLabel = feature.get('label');
+      }
+
       this.setState({
-        showLabelPrompt: true
+        showLabelPrompt: true,
+        textLabel
       });
     }
   }
@@ -984,21 +1007,14 @@ class DigitizeButton extends React.Component {
    * Turns visibility of modal off and call `setTextOnFeature` method.
    */
   onModalLabelOk = () => {
-    const {
-      textLabel
-    } = this.state;
-
     const {
       onModalLabelOk
     } = this.props;
 
     this.setState({
       showLabelPrompt: false
     }, () => {
-      this.setTextOnFeature(this._digitizeTextFeature);
-      if (onModalLabelOk) {
-        onModalLabelOk(this._digitizeTextFeature, textLabel);
-      }
+      this.setTextOnFeature(this._digitizeTextFeature, onModalLabelOk);
     });
   }
 
@@ -1020,22 +1036,41 @@ class DigitizeButton extends React.Component {
         this._digitizeFeatures.remove(this._digitizeTextFeature);
         this._digitizeTextFeature = null;
       }
-      if (onModalLabelCancel) {
+      if (isFunction(onModalLabelCancel)) {
         onModalLabelCancel();
       }
     });
   }
 
   /**
    * Sets formatted label on feature.
+   * Calls `onModalLabelOk` callback function if provided.
    *
    * @param {OlFeature} feat The point feature to be styled with label.
+   * @param {Function} onModalOkCbk Optional callback function.
    */
-  setTextOnFeature = feat => {
-    const label = StringUtil.stringDivider(this.state.textLabel, 16, '\n');
+  setTextOnFeature = (feat, onModalOkCbk) => {
+    const {
+      maxLabelLineLength
+    } = this.props;
+
+    const {
+      textLabel
+    } = this.state;
+
+    let label = textLabel;
+    if (maxLabelLineLength) {
+      label = StringUtil.stringDivider(
+        textLabel, maxLabelLineLength, '\n'
+      );
+    }
     feat.set('label', label);
     this.setState({
       textLabel: ''
+    }, () => {
+      if (isFunction(onModalOkCbk)) {
+        onModalOkCbk(feat, label);
+      }
     });
   }
 
@@ -1113,6 +1148,7 @@ class DigitizeButton extends React.Component {
       onToggle,
       onModalLabelOk,
       onModalLabelCancel,
+      maxLabelLineLength,
       ...passThroughProps
     } = this.props;
 
@@ -1140,9 +1176,10 @@ class DigitizeButton extends React.Component {
               onOk={this.onModalLabelOk}
               onCancel={this.onModalLabelCancel}
             >
-              <Input
+              <TextArea
                 value={this.state.textLabel}
                 onChange={this.onLabelChange}
+                autosize
               />
             </Modal>
             : null

diff --git a/src/Button/DigitizeButton/DigitizeButton.spec.jsx b/src/Button/DigitizeButton/DigitizeButton.spec.jsx
@@ -446,6 +446,9 @@ describe('<DigitizeButton />', () => {
         const wrapper = setupWrapper();
         const feat = new OlFeature();
         feat.set('isLabel', true);
+        feat.setStyle(new OlStyleStyle({
+          text: new OlStyleText()
+        }));
         const mockEvt = {
           features: {}
         };