feat: enhance text element

packages/renderer/src/draw/path.ts

@@ -6,7 +6,7 @@ export function drawPath(ctx: ViewContext2D, elem: Element<'path'>, opts: Render
   const { detail } = elem;
   const { originX, originY, originW, originH } = detail;
   const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-  const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo }) || elem;
+  const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
   const scaleW = w / originW;
   const scaleH = h / originH;
   const viewOriginX = originX * scaleW;

packages/renderer/src/draw/text.ts

@@ -34,48 +34,60 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
           fontSize: fontSize,
           fontFamily: detail.fontFamily
         });
-        const detailText = detail.text.replace(/\r\n/gi, '\n');
+        let detailText = detail.text.replace(/\r\n/gi, '\n');
+        if (detail.textTransform === 'lowercase') {
+          detailText = detailText.toLowerCase();
+        } else if (detail.textTransform === 'uppercase') {
+          detailText = detailText.toUpperCase();
+        }
+
         const fontHeight = lineHeight;
         const detailTextList = detailText.split('\n');
         const lines: { text: string; width: number }[] = [];
 
         let lineNum = 0;
         detailTextList.forEach((tempText: string, idx: number) => {
-          let lineText = '';
-
-          if (tempText.length > 0) {
-            for (let i = 0; i < tempText.length; i++) {
-              if (ctx.measureText(lineText + (tempText[i] || '')).width <= ctx.$doPixelRatio(w)) {
-                lineText += tempText[i] || '';
-              } else {
-                lines.push({
-                  text: lineText,
-                  width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                });
-                lineText = tempText[i] || '';
-                lineNum++;
-              }
-              if ((lineNum + 1) * fontHeight > h) {
-                break;
-              }
-              if (tempText.length - 1 === i) {
-                if ((lineNum + 1) * fontHeight <= h) {
+          if (detail.minInlineSize === 'maxContent') {
+            lines.push({
+              text: tempText,
+              width: ctx.$undoPixelRatio(ctx.measureText(tempText).width)
+            });
+          } else {
+            let lineText = '';
+            if (tempText.length > 0) {
+              for (let i = 0; i < tempText.length; i++) {
+                if (ctx.measureText(lineText + (tempText[i] || '')).width <= ctx.$doPixelRatio(w)) {
+                  lineText += tempText[i] || '';
+                } else {
                   lines.push({
                     text: lineText,
                     width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                   });
-                  if (idx < detailTextList.length - 1) {
-                    lineNum++;
-                  }
+                  lineText = tempText[i] || '';
+                  lineNum++;
+                }
+                if ((lineNum + 1) * fontHeight > h) {
                   break;
                 }
+                if (tempText.length - 1 === i) {
+                  if ((lineNum + 1) * fontHeight <= h) {
+                    lines.push({
+                      text: lineText,
+                      width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                    });
+                    if (idx < detailTextList.length - 1) {
+                      lineNum++;
+                    }
+                    break;
+                  }
+                }
               }
+            } else {
+              lines.push({
+                text: '',
+                width: 0
+              });
             }
-          } else {
-            lines.push({
-              text: '',
-              width: 0
-            });
           }
         });
 

packages/types/src/lib/element.ts

@@ -104,6 +104,8 @@ export interface ElementTextDetail extends ElementBaseDetail {
   textShadowOffsetX?: number;
   textShadowOffsetY?: number;
   textShadowBlur?: number;
+  minInlineSize?: 'maxContent' | 'auto';
+  textTransform?: 'none' | 'uppercase' | 'lowercase';
 }
 
 export interface ElementCircleDetail extends ElementBaseDetail {