@leafer-ui/text 1.9.12 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/text",
-  "version": "1.9.12",
+  "version": "1.10.0",
   "description": "@leafer-ui/text",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.9.12"
+    "@leafer/core": "1.10.0"
   },
   "devDependencies": {
-    "@leafer/interface": "1.9.12",
-    "@leafer-ui/interface": "1.9.12"
+    "@leafer/interface": "1.10.0",
+    "@leafer-ui/interface": "1.10.0"
   }
 }

package/src/CharLayout.ts

@@ -9,14 +9,24 @@ export function layoutChar(drawData: ITextDrawData, style: ITextData, width: num
 
     const { rows } = drawData
     const { textAlign, paraIndent, letterSpacing } = style
-    let charX: number, addWordWidth: number, indentWidth: number, mode: number, wordChar: ITextCharData, wordsLength: number
+
+    const justifyLast = width && textAlign.includes('both')  // 最后一行是否两端对齐
+    const justify = justifyLast || (width && textAlign.includes('justify')) // 是否两端对齐文本
+    const justifyLetter = justify && textAlign.includes('letter') // 英文是否通过加大字符间距两端对齐
+
+    let charX: number, remainingWidth: number, addWordWidth: number, addLetterWidth: number, indentWidth: number, mode: number, wordChar: ITextCharData, wordsLength: number, isLastWord: boolean, canJustify: boolean
 
     rows.forEach(row => {
         if (row.words) {
 
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length
-            addWordWidth = (width && (textAlign === 'justify' || textAlign === 'both') && wordsLength > 1) ? (width - row.width - indentWidth) / (wordsLength - 1) : 0
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode)
+            if (justify) {
+                canJustify = !row.paraEnd || justifyLast
+                remainingWidth = width - row.width - indentWidth
+                if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1) //  remainingWidth / （lettersLength - 1）
+                else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0
+            }
+            mode = (letterSpacing || row.isOverflow || justifyLetter) ? CharMode : (addWordWidth ? WordMode : TextMode)
             if (row.isOverflow && !letterSpacing) row.textMode = true
 
             if (mode === TextMode) {
@@ -40,13 +50,18 @@ export function layoutChar(drawData: ITextDrawData, style: ITextData, width: num
 
                     } else {
 
-                        charX = toChar(word.data, charX, row.data, row.isOverflow)
+                        charX = toChar(word.data, charX, row.data, row.isOverflow, canJustify && addLetterWidth)
 
                     }
 
-                    if (addWordWidth && (!row.paraEnd || textAlign === 'both') && (index !== wordsLength - 1)) {
-                        charX += addWordWidth
-                        row.width += addWordWidth
+                    if (canJustify) {
+                        isLastWord = index === wordsLength - 1
+
+                        if (addWordWidth) {
+                            if (!isLastWord) charX += addWordWidth, row.width += addWordWidth
+                        } else if (addLetterWidth) {
+                            row.width += addLetterWidth * (word.data.length - (isLastWord ? 1 : 0))
+                        }
                     }
 
                 })
@@ -75,13 +90,14 @@ function toWordChar(data: ITextCharData[], charX: number, wordChar: ITextCharDat
     return charX
 }
 
-function toChar(data: ITextCharData[], charX: number, rowData: ITextCharData[], isOverflow?: boolean): number {
+function toChar(data: ITextCharData[], charX: number, rowData: ITextCharData[], isOverflow?: boolean, addLetterWidth?: number): number {
     data.forEach(char => {
         if (isOverflow || char.char !== ' ') {
             char.x = charX
             rowData.push(char)
         }
         charX += char.width
+        addLetterWidth && (charX += addLetterWidth)
     })
     return charX
 }

package/src/TextConvert.ts

@@ -20,13 +20,13 @@ export function getDrawData(content: string | number, style: ITextData): ITextDr
     let width = style.__getInput('width') || 0
     let height = style.__getInput('height') || 0
 
-    const { textDecoration, __font, __padding: padding } = style
+    const { __padding: padding } = style
 
     if (padding) {
-        if (width) x = padding[left], width -= (padding[right] + padding[left])
+        if (width) x = padding[left], width -= (padding[right] + padding[left]), !width && (width = 0.01) // 防止变为自动宽度
         else if (!style.autoSizeAlign) x = padding[left]
 
-        if (height) y = padding[top], height -= (padding[top] + padding[bottom])
+        if (height) y = padding[top], height -= (padding[top] + padding[bottom]), !height && (height = 0.01)
         else if (!style.autoSizeAlign) y = padding[top]
     }
 
@@ -34,7 +34,7 @@ export function getDrawData(content: string | number, style: ITextData): ITextDr
         bounds: { x, y, width, height },
         rows: [],
         paraNumber: 0,
-        font: Platform.canvas.font = __font
+        font: Platform.canvas.font = style.__font
     }
 
     createRows(drawData, content, style) // set rows, paraNumber
@@ -43,11 +43,11 @@ export function getDrawData(content: string | number, style: ITextData): ITextDr
 
     layoutText(drawData, style) // set bounds
 
-    layoutChar(drawData, style, width, height) // set char.x
+    if (style.__isCharMode) layoutChar(drawData, style, width, height) // set char.x
 
     if (drawData.overflow) clipText(drawData, style, x, width)
 
-    if (textDecoration !== 'none') decorationText(drawData, style)
+    if (style.textDecoration !== 'none') decorationText(drawData, style)
 
     return drawData
 

package/src/TextRows.ts

@@ -22,11 +22,9 @@ export function createRows(drawData: ITextDrawData, content: string, style: ITex
     findMaxWidth = !bounds.width && !style.autoSizeAlign
 
     const { __letterSpacing, paraIndent, textCase } = style
-    const { canvas } = Platform
-    const { width, height } = bounds
-    const charMode = width || height || __letterSpacing || (textCase !== 'none')
+    const { canvas } = Platform, { width } = bounds
 
-    if (charMode) {
+    if (style.__isCharMode) {
 
         const wrap = style.textWrap !== 'none'
         const breakAll = style.textWrap === 'break'