Merge 444cc93 into 2894929

visgl · Oct 5, 2019 · 4944791 · 4944791
2 parents 2894929 + 444cc93
commit 4944791
Show file tree

Hide file tree

Showing 10 changed files with 443 additions and 43 deletions.
diff --git a/docs/layers/text-layer.md b/docs/layers/text-layer.md
@@ -149,6 +149,18 @@ Options:
 
 `radius` and `cutoff` will be applied only when `sdf` enabled.
 
+##### `wordBreak` (String, optional)
+
+* Default: `break-word`
+
+Available options are `break-all` and `break-word`. A valid `maxWidth` has to be provided to use `wordBreak`.
+
+##### `maxWidth` (Number, optional)
+
+* Default: `-1`
+
+`maxWidth` is used together with `break-word` for wrapping text. The value of `maxWidth` specifies the width limit to break the text into multiple lines.
+
 ### Data Accessors
 
 ##### `getText` ([Function](/docs/developer-guide/using-layers.md#accessors), optional)

diff --git a/examples/layer-browser/src/examples/core-layers.js b/examples/layer-browser/src/examples/core-layers.js
@@ -459,10 +459,20 @@ const TextLayerExample = {
         change('fontSettings', {...newSettings.fontSettings, cutoff: newValue});
       }
     },
+    wordBreak: {
+      name: 'wordBreak',
+      type: 'category',
+      value: ['', 'break-all', 'break-word']
+    },
     getTextAnchor: {
       name: 'textAnchor',
       type: 'category',
       value: ['start', 'middle', 'end']
+    },
+    maxWidth: {
+      name: 'maxWidth',
+      type: 'number',
+      max: 5000
     }
   },
   props: {
@@ -472,12 +482,14 @@ const TextLayerExample = {
     fontSettings: {},
     autoHighlight: true,
     pickable: true,
+    maxWidth: 500,
+    wordBreak: 'break-word',
     highlightColor: [0, 0, 128, 128],
     getText: x => `${x.LOCATION_NAME}\n${x.ADDRESS}`,
     getPosition: x => x.COORDINATES,
     getColor: x => [153, 0, 0],
     getAngle: x => 30,
-    getTextAnchor: x => 'start',
+    getTextAnchor: x => 'middle',
     getAlignmentBaseline: x => 'center',
     getPixelOffset: x => [10, 0]
   }

diff --git a/examples/website/mesh/index.html b/examples/website/mesh/index.html
@@ -14,7 +14,7 @@
       }
     </style>
   </head>
-  <body/>
+  <body>
     <div id="app"></div>
     <script src='app.js'></script>
   </body>

diff --git a/modules/layers/src/text-layer/text-layer.js b/modules/layers/src/text-layer/text-layer.js
@@ -71,6 +71,10 @@ const defaultProps = {
   lineHeight: DEFAULT_LINE_HEIGHT,
   fontSettings: {},
 
+  // auto wrapping options
+  wordBreak: 'word-break',
+  maxWidth: {type: 'number', value: -1},
+
   getText: {type: 'accessor', value: x => x.text},
   getPosition: {type: 'accessor', value: x => x.position},
   getColor: {type: 'accessor', value: DEFAULT_COLOR},
@@ -88,16 +92,23 @@ export default class TextLayer extends CompositeLayer {
     };
   }
 
+  // eslint-disable-next-line complexity
   updateState({props, oldProps, changeFlags}) {
     const fontChanged = this.fontChanged(oldProps, props);
+
     if (fontChanged) {
       this.updateFontAtlas({oldProps, props});
     }
 
+    const styleChanged =
+      props.lineHeight !== oldProps.lineHeight ||
+      props.wordBreak !== oldProps.wordBreak ||
+      props.maxWidth !== oldProps.maxWidth;
+
     const textChanged =
-      changeFlags.dataChanged ||
       fontChanged ||
-      props.lineHeight !== oldProps.lineHeight ||
+      styleChanged ||
+      changeFlags.dataChanged ||
       (changeFlags.updateTriggersChanged &&
         (changeFlags.updateTriggersChanged.all || changeFlags.updateTriggersChanged.getText));
 
@@ -180,7 +191,7 @@ export default class TextLayer extends CompositeLayer {
 
   /* eslint-disable no-loop-func */
   transformStringToLetters(dataRange = {}) {
-    const {data, lineHeight, getText} = this.props;
+    const {data, wordBreak, maxWidth, lineHeight, getText} = this.props;
     const {iconMapping} = this.state;
     const {startRow, endRow} = dataRange;
     const {iterable, objectInfo} = createIterable(data, startRow, endRow);
@@ -195,7 +206,15 @@ export default class TextLayer extends CompositeLayer {
       objectInfo.index++;
       const text = getText(object, objectInfo);
       if (text) {
-        transformParagraph(text, lineHeight, iconMapping, transformCharacter, transformedData);
+        transformParagraph(
+          text,
+          lineHeight,
+          wordBreak,
+          maxWidth,
+          iconMapping,
+          transformCharacter,
+          transformedData
+        );
       }
     }