Reworked multiline watermark text

razztyfication · Nov 30, 2021 · 969df52 · 969df52
1 parent bdbbf9f
commit 969df52
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,39 @@
-# [v1.0.3](https://github.com/razztyfication/vue-drawing-canvas)
+# [v1.0.4](https://github.com/razztyfication/vue-drawing-canvas)
+
+- Reworked multiline of text for watermark
+
+example:
+
+```js
+export default {
+  ...
+  data() {
+    return {
+      ...
+      watermark: {
+        type: "Text",
+        source: `This is\nWatermark
+        TEXT`,
+        x: 200,
+        y: 180,
+        fontStyle: {
+          width: 200,
+          lineHeight: 48,
+          color: '#FF0000',
+          font: 'bold 48px roboto',
+          drawType: 'fill',
+          textAlign: 'left',
+          textBaseline: 'top',
+          rotate: 0
+        }
+      }
+    }
+}
+```
+
+<br>
+
+# [v1.0.3](https://github.com/razztyfication/vue-drawing-canvas/tree/v1.0.3)
 
 - Wrap watermark text to multiline. Thanks to [mishahobanov](https://github.com/mishahobanov)
 

diff --git a/dist/vue-drawing-canvas.esm.js b/dist/vue-drawing-canvas.esm.js
@@ -361,33 +361,40 @@ var VueDrawingCanvas = /*#__PURE__*/defineComponent({
     },
 
     wrapText(context, text, x, y, maxWidth, lineHeight) {
-      var words = text.split(' ');
-      var line = '';
-
-      for (var n = 0; n < words.length; n++) {
-        var testLine = line + words[n] + ' ';
-        var metrics = context.measureText(testLine);
-        var testWidth = metrics.width;
+      const newLineRegex = /(\r\n|\n\r|\n|\r)+/g;
+      const whitespaceRegex = /\s+/g;
+      var lines = text.split(newLineRegex).filter(word => word.length > 0);
+
+      for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+        var words = lines[lineNumber].split(whitespaceRegex).filter(word => word.length > 0);
+        var line = '';
+
+        for (var n = 0; n < words.length; n++) {
+          var testLine = line + words[n] + ' ';
+          var metrics = context.measureText(testLine);
+          var testWidth = metrics.width;
+
+          if (testWidth > maxWidth && n > 0) {
+            if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
+              context.strokeText(line, x, y);
+            } else {
+              context.fillText(line, x, y);
+            }
 
-        if (testWidth > maxWidth && n > 0) {
-          if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
-            context.strokeText(line, x, y);
             line = words[n] + ' ';
             y += lineHeight;
           } else {
-            context.fillText(line, x, y);
-            line = words[n] + ' ';
-            y += lineHeight;
+            line = testLine;
           }
+        }
+
+        if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
+          context.strokeText(line, x, y);
         } else {
-          line = testLine;
+          context.fillText(line, x, y);
         }
-      }
 
-      if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
-        context.strokeText(line, x, y);
-      } else {
-        context.fillText(line, x, y);
+        y += words.length > 0 ? lineHeight : 0;
       }
     },
 

diff --git a/dist/vue-drawing-canvas.min.js b/dist/vue-drawing-canvas.min.js
diff --git a/dist/vue-drawing-canvas.ssr.js b/dist/vue-drawing-canvas.ssr.js
@@ -542,33 +542,44 @@ function _defineProperty(obj, key, value) {
       }))();
     },
     wrapText: function wrapText(context, text, x, y, maxWidth, lineHeight) {
-      var words = text.split(' ');
-      var line = '';
+      var newLineRegex = /(\r\n|\n\r|\n|\r)+/g;
+      var whitespaceRegex = /\s+/g;
+      var lines = text.split(newLineRegex).filter(function (word) {
+        return word.length > 0;
+      });
+
+      for (var lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+        var words = lines[lineNumber].split(whitespaceRegex).filter(function (word) {
+          return word.length > 0;
+        });
+        var line = '';
 
-      for (var n = 0; n < words.length; n++) {
-        var testLine = line + words[n] + ' ';
-        var metrics = context.measureText(testLine);
-        var testWidth = metrics.width;
+        for (var n = 0; n < words.length; n++) {
+          var testLine = line + words[n] + ' ';
+          var metrics = context.measureText(testLine);
+          var testWidth = metrics.width;
+
+          if (testWidth > maxWidth && n > 0) {
+            if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
+              context.strokeText(line, x, y);
+            } else {
+              context.fillText(line, x, y);
+            }
 
-        if (testWidth > maxWidth && n > 0) {
-          if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
-            context.strokeText(line, x, y);
             line = words[n] + ' ';
             y += lineHeight;
           } else {
-            context.fillText(line, x, y);
-            line = words[n] + ' ';
-            y += lineHeight;
+            line = testLine;
           }
+        }
+
+        if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
+          context.strokeText(line, x, y);
         } else {
-          line = testLine;
+          context.fillText(line, x, y);
         }
-      }
 
-      if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') {
-        context.strokeText(line, x, y);
-      } else {
-        context.fillText(line, x, y);
+        y += words.length > 0 ? lineHeight : 0;
       }
     },
     save: function save() {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-drawing-canvas",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": {
     "name": "Toni Oktoro",
     "email": "[email protected]"

diff --git a/src/VueDrawingCanvas.ts b/src/VueDrawingCanvas.ts
@@ -325,37 +325,40 @@ export default /*#__PURE__*/defineComponent({
       });
     },
     wrapText(context, text, x, y, maxWidth, lineHeight) {
-      var words = text.split(' ');
-      var line = '';
-
-      for(var n = 0; n < words.length; n++) {
-        var testLine = line + words[n] + ' ';
-        var metrics = context.measureText(testLine);
-        var testWidth = metrics.width;
-        if (testWidth > maxWidth && n > 0) {
-          if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') )
-          {
-            context.strokeText(line, x, y);
+      const newLineRegex = /(\r\n|\n\r|\n|\r)+/g
+      const whitespaceRegex = /\s+/g
+      var lines = text.split(newLineRegex).filter(word => word.length > 0)
+      for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {      
+        var words = lines[lineNumber].split(whitespaceRegex).filter(word => word.length > 0);
+        var line = '';
+
+        for(var n = 0; n < words.length; n++) {
+          var testLine = line + words[n] + ' ';
+          var metrics = context.measureText(testLine);
+          var testWidth = metrics.width;
+          if (testWidth > maxWidth && n > 0) {
+            if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') )
+            {
+              context.strokeText(line, x, y);
+            }
+            else{
+              context.fillText(line, x, y);
+            }  
             line = words[n] + ' ';
             y += lineHeight;
           }
-          else{
-            context.fillText(line, x, y);
-            line = words[n] + ' ';
-            y += lineHeight;
+          else {
+            line = testLine;
           }
-
         }
-        else {
-          line = testLine;
+        if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') )
+        {
+          context.strokeText(line, x, y);
         }
-      }
-      if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') )
-      {
-        context.strokeText(line, x, y);
-      }
-      else{
-        context.fillText(line, x, y);
+        else{
+          context.fillText(line, x, y);
+        }
+        y += words.length > 0 ? lineHeight : 0;
       }
     },
     save() {