Fix Text word break

Author: Maxhy

example/index.html

@@ -135,6 +135,54 @@ <h3>This component render a printing template. It can be used as the core visual
             });
           }
 
+          function loadTemplate3() {
+            loadTemplate({
+              fields: [
+                {
+                  useMacros: false,
+                  value: "This is a simple test for word break into two lines",
+                  color: 0,
+                  colorFill: -1,
+                  fontFamily: "Verdana",
+                  fontSize: "12pt",
+                  fontStyle: "Normal",
+                  align: "TopLeft",
+                  scaleFont: false,
+                  autoSize: false,
+                  wordBreak: true,
+                  maxLength: 0,
+                  width: 150,
+                  height: 55,
+                  x: 57,
+                  y: 29,
+                  zIndex: 0,
+                  rotation: 0,
+                  border: {
+                    width: 1,
+                    color: 0
+                  },
+                  type: "label"
+                },
+                {
+                  useMacros: false,
+                  color: 16777215,
+                  width: 256,
+                  height: 256,
+                  x: 186,
+                  y: 256,
+                  zIndex: 0,
+                  rotation: 0,
+                  border: {
+                    width: 1,
+                    color: 0
+                  },
+                  type: "rectangle"
+                }
+              ],
+              background: {}
+            });
+          }
+
           loadTemplate();
         </script>
       </div>
@@ -143,6 +191,7 @@ <h3>This component render a printing template. It can be used as the core visual
         <p><button onclick="loadTemplate()">Empty card</button></p>
         <p><button onclick="loadTemplate1()">Template 1: Red card with Label and QR Code</button></p>
         <p><button onclick="loadTemplate2()">Template 2: Blue card with Shapes</button></p>
+        <p><button onclick="loadTemplate3()">Template 3: Out of range single Shape</button></p>
       </div>
     </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leosac/cardrendering",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "Card Rendering engine for CR-80 cards and more",
   "main": "dist/cardrendering.node.js",
   "browser": "dist/cardrendering.js",

src/lib/fieldFactory.js

@@ -41,8 +41,9 @@ function createTextField(options, scale = 1)
     text.style = style;
     text.resolution = scale;
     if (options.wordBreak) {
-        text.wordWrap = true;
-        text.wordWrapWidth = options.width;
+        text.style.wordWrap = true;
+        text.style.wordWrapWidth = options.width;
+        text.style.breakWords = true;
     }
     if (options.scaleFont) {
         let scale;
@@ -60,7 +61,7 @@ function createTextField(options, scale = 1)
         }
     }
     if (!options.autoSize) {
-        while (text.width > options.width && text.text.length > 0) {
+        while ((text.width > options.width || (options.wordBreak && text.height > options.height)) && text.text.length > 0) {
             text.text = text.text.substring(0, text.text.length - 1);
         }
     }