From a3cd86782201043ab995de5c648fc6f2ebfaaa34 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Mon, 14 Feb 2022 23:20:06 +0800
Subject: [PATCH] fix: fix text wrap and overflow problem

---
 packages/renderer/dev/data.js          |  9 ++---
 packages/renderer/dev/main.js          | 29 +++++++--------
 packages/renderer/src/lib/draw/text.ts | 50 ++++++++++++++++----------
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/packages/renderer/dev/data.js b/packages/renderer/dev/data.js
index 0e8c7bd..d12239a 100644
--- a/packages/renderer/dev/data.js
+++ b/packages/renderer/dev/data.js
@@ -10,8 +10,8 @@ const data = {
       type: "rect",
       desc: {
         bgColor: "#ffeb3b",
-        borderRadius: 10,
-        borderWidth: 5,
+        borderRadius: 2,
+        borderWidth: 0,
         borderColor: "#ffc107",
       },
     },
@@ -25,11 +25,12 @@ const data = {
       type: "text",
       desc: {
         fontSize: 16,
-        text: "Hello Text",
+        text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join('\r\n'),
+        // text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join(''),
         fontWeight: 'bold',
         color: "#666666",
         borderRadius: 30,
-        borderWidth: 4,
+        borderWidth: 2,
         borderColor: "#ff5722",
       },
     },
diff --git a/packages/renderer/dev/main.js b/packages/renderer/dev/main.js
index c1c9712..dddab56 100644
--- a/packages/renderer/dev/main.js
+++ b/packages/renderer/dev/main.js
@@ -9,9 +9,9 @@ const canvas = document.querySelector('#canvas');
 const opts = {
   width: 600,
   height: 400,
-  contextWidth: 600,
-  contextHeight: 400,
-  devicePixelRatio: 1,
+  contextWidth: 1200,
+  contextHeight: 800,
+  devicePixelRatio: 2,
 }
 
 const renderer = new Renderer(opts);
@@ -19,27 +19,28 @@ const renderer = new Renderer(opts);
 renderer.on('load', (e) => {
   console.log('load =', e)
 })
-renderer.on('loadComplete', (e) => {
-  console.log('loadComplete =', e)
-})
+// renderer.on('loadComplete', (e) => {
+//   console.log('loadComplete =', e)
+// })
 
-renderer.on('drawFrame', (e) => {
-  console.log('drawFrame =', e)
-})
-renderer.on('drawFrameComplete', (e) => {
-  console.log('drawFrameComplete =', e)
-})
+// renderer.on('drawFrame', (e) => {
+//   console.log('drawFrame =', e)
+// })
+// renderer.on('drawFrameComplete', (e) => {
+//   console.log('drawFrameComplete =', e)
+// })
 
 // renderer.render(canvas, data)
 // renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
 // console.log(renderer.getContext())
 
-
+canvas.style.width = opts.width;
+canvas.style.height = opts.height;
 // canvas.width = opts.width * opts.devicePixelRatio;
 // canvas.height = opts.height * opts.devicePixelRatio;
 // const ctx = new Context(canvas.getContext('2d'), opts)
 renderer.render(canvas, data);
-renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
+// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
 
 
 
diff --git a/packages/renderer/src/lib/draw/text.ts b/packages/renderer/src/lib/draw/text.ts
index dbbb0ce..3ca5d27 100644
--- a/packages/renderer/src/lib/draw/text.ts
+++ b/packages/renderer/src/lib/draw/text.ts
@@ -38,34 +38,46 @@ export function drawText(
     const fontHeight = desc.lineHeight || desc.fontSize;
     const descTextList = descText.split('\n');
     const lines: {text: string, width: number}[] = [];
-
-    descTextList.forEach((tempText) => {
+    
+    let lineNum = 0;
+    descTextList.forEach((tempText: string, idx: number) => {
       let lineText = '';
-      let lineNum = 0;
-      for (let i = 0; i < tempText.length; i++) {
-        if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
-          lineText += (tempText[i] || '');
-        } else {
-          lines.push({
-            text: lineText,
-            width: ctx.calcScreenNum(ctx.measureText(lineText).width),
-          });
-          lineText = (tempText[i] || '');
-          lineNum ++;
-        }
-        if ((lineNum + 1) * fontHeight > elem.h) {
-          break;
-        }
-        if (lineText && tempText.length - 1 === i) {
-          if ((lineNum + 1) * fontHeight < elem.h) {
+      
+      if (tempText.length > 0) {
+        for (let i = 0; i < tempText.length; i++) {
+          if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
+            lineText += (tempText[i] || '');
+          } else {
             lines.push({
               text: lineText,
               width: ctx.calcScreenNum(ctx.measureText(lineText).width),
             });
+            lineText = (tempText[i] || '');
+            lineNum ++;
+          }
+          if ((lineNum + 1) * fontHeight > elem.h) {
             break;
           }
+          if (tempText.length - 1 === i) {
+            if ((lineNum + 1) * fontHeight < elem.h) {
+              lines.push({
+                text: lineText,
+                width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+              });
+              if(idx < descTextList.length - 1){
+                lineNum ++
+              }
+              break;
+            }
+          }
         }
+      } else {
+        lines.push({
+          text: '',
+          width: 0,
+        });
       }
+      
     });
 
     // draw text lines