Added maxwidth attribute on text, deprecating the wordwrap attribute.

docs/essentials/displaying_text.md

@@ -24,8 +24,8 @@ The Text-tag accepts the following attributes:
 - `size`  - the font size, defaults to `32`
 - `color` - the color to display for the text, defaults to `white` and can be any of the supported Blits color formats (HTML, hexadecimal or rgb(a))
 - `letterspacing` - letterspacing in pixels, defaults to `0`
-- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `wordwrap` attribute to be set as well.
-- `wordwrap` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right
+- `align` - the alignment of the text, can be `left`, `right`, or `center`, defaults to `left`. Centering text and aligning text to the right requires the `maxwidth` attribute to be set as well.
+- `maxwidth` - the max length of a line of text in pixels, words surpassing this length will be broken and wrapped onto the next line. This attribute is required when aligning center or right. Previously this attribute was `wordwrap`, which has now been deprecated in favour of `maxwidth`.
 - `maxlines` - maximum number of lines that will be displayed
 - `maxheight` - maximum height of a text block, lines that don't fit within this height will not be displayed
 - `lineheight` - the spacing between lines in pixels
@@ -71,7 +71,7 @@ export default Blits.Component('MyComponent', {
 
 The text renderer offers the ability to display a _text overflow suffix_ when the text exceeds the bounds of the Text component.
 
-This functionality is automatically enabled, but requires that both a _horizontal_ (using `wordwrap`) and a _vertical_ boundary (using `maxlines` or `maxheight`) are specified on the Text component.
+This functionality is automatically enabled, but requires that both a _horizontal_ boundary (using `maxwidth`) and a _vertical_ boundary (using `maxlines` or `maxheight`) are specified on the Text component.
 
 The `textoverflow`-attribute itself is not required, unless you want to use another suffix than the standard `...`. If you want _no suffix_ (and just a hard cutoff), the`textoverflow`-attribute should be set to `false` or an _empty string_.
 

packages/create-blits/boilerplate/js/default/src/pages/Home.js

@@ -24,13 +24,13 @@ export default Blits.Component('Home', {
         />
         <Loader :x="1920 / 2" mount="{x: 0.5}" y="600" w="160" :alpha.transition="$loaderAlpha" :loaderColor="$color" />
         <Element y="600" :alpha.transition="$textAlpha">
-          <Text size="80" align="center" wordwrap="1920">Hello!</Text>
+          <Text size="80" align="center" maxwidth="1920">Hello!</Text>
           <Text
             size="50"
             align="center"
             y="120"
             :x="1920/2"
-            wordwrap="500"
+            maxwidth="500"
             lineheight="64"
             mount="{x: 0.5}"
             color="#ffffffaa"
@@ -39,7 +39,7 @@ export default Blits.Component('Home', {
         </Element>
       </Element>
     </Element>
-    `,
+  `,
   state() {
     return {
       /**

packages/create-blits/boilerplate/ts/default/src/pages/Home.ts

@@ -24,13 +24,13 @@ export default Blits.Component('Home', {
         />
         <Loader :x="1920 / 2" mount="{x: 0.5}" y="600" w="160" :alpha.transition="$loaderAlpha" :loaderColor="$color" />
         <Element y="600" :alpha.transition="$textAlpha">
-          <Text size="80" align="center" wordwrap="1920">Hello!</Text>
+          <Text size="80" align="center" maxwidth="1920">Hello!</Text>
           <Text
             size="50"
             align="center"
             y="120"
             :x="1920/2"
-            wordwrap="500"
+            maxwidth="500"
             lineheight="64"
             mount="{x: 0.5}"
             color="#ffffffaa"

src/engines/L3/element.js

@@ -355,6 +355,11 @@ const propsTransformer = {
     this.props['fontSize'] = v
   },
   set wordwrap(v) {
+    Log.warn('The wordwrap attribute is deprecated, use maxwidth instead')
+    this.props['width'] = v
+    this.props['contain'] = 'width'
+  },
+  set maxwidth(v) {
     this.props['width'] = v
     this.props['contain'] = 'width'
   },