@leafer-ui/text 1.0.0-beta.8 → 1.0.0-rc.10

package/package.json

@@ -1,28 +1,31 @@
 {
   "name": "@leafer-ui/text",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.10",
   "description": "@leafer-ui/text",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/ui.git"
   },
-  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/text",
+  "homepage": "https://github.com/leaferjs/ui/tree/main/packages/partner/text",
   "bugs": "https://github.com/leaferjs/ui/issues",
   "keywords": [
     "leafer-ui",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer-ui/core": "1.0.0-beta.8"
+    "@leafer/core": "1.0.0-rc.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.8",
-    "@leafer-ui/interface": "1.0.0-beta.8"
+    "@leafer/interface": "1.0.0-rc.10",
+    "@leafer-ui/interface": "1.0.0-rc.10"
   }
 }

package/src/CharLayout.ts

@@ -1,9 +1,9 @@
-import { ITextCharData, ITextData, ITextDrawData } from '@leafer-ui/interface'
+import { ITextCharData, ITextData, ITextDrawData, ITextRowData } from '@leafer-ui/interface'
 
 
 const CharMode = 0 // data: [{char:'a', x: 0}, {char:'b', x: 5}, {char:'d', x:20}]
 const WordMode = 1 // data: [{ char:'ab', x: 0}, { char:'d', x:20}]
-const RowMode = 2 // text: 'ab  c'
+const TextMode = 2 // text: 'ab  c'
 
 export function layoutChar(drawData: ITextDrawData, style: ITextData, width: number, _height: number): void {
 
@@ -16,18 +16,13 @@ export function layoutChar(drawData: ITextDrawData, style: ITextData, width: num
 
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0
             addWordWidth = (width && textAlign === 'justify' && row.words.length > 1) ? (width - row.width - indentWidth) / (row.words.length - 1) : 0
-            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : RowMode)
+            mode = (letterSpacing || row.isOverflow) ? CharMode : (addWordWidth > 0.01 ? WordMode : TextMode)
+            if (row.isOverflow && !letterSpacing) row.textMode = true
 
-            if (mode === RowMode) {
+            if (mode === TextMode) {
 
-                row.text = ''
                 row.x += indentWidth
-
-                row.words.forEach(word => {
-                    word.data.forEach(char => {
-                        row.text += char.char
-                    })
-                })
+                toTextChar(row)
 
             } else {
 
@@ -63,6 +58,15 @@ export function layoutChar(drawData: ITextDrawData, style: ITextData, width: num
 
 }
 
+function toTextChar(row: ITextRowData): void {
+    row.text = ''
+    row.words.forEach(word => {
+        word.data.forEach(char => {
+            row.text += char.char
+        })
+    })
+}
+
 function toWordChar(data: ITextCharData[], charX: number, wordChar: ITextCharData): number {
     data.forEach(char => {
         wordChar.char += char.char

package/src/TextClip.ts

@@ -1,39 +1,59 @@
 import { Platform } from '@leafer/core'
 
-import { IOverflow, ITextCharData, ITextDrawData } from '@leafer-ui/interface'
+import { ITextCharData, ITextData, ITextDrawData, ITextRowData } from '@leafer-ui/interface'
 
 
-export function clipText(drawData: ITextDrawData, textOverflow: IOverflow | string): void {
+export function clipText(drawData: ITextDrawData, style: ITextData): void {
 
     const { rows, overflow } = drawData
+    let { textOverflow } = style
     rows.splice(overflow)
 
+
     if (textOverflow !== 'hide') {
         if (textOverflow === 'ellipsis') textOverflow = '...'
 
+        let char: ITextCharData, charRight: number
         const ellipsisWidth = Platform.canvas.measureText(textOverflow).width
-        const row = rows[overflow - 1]
-
-        let char: ITextCharData, end = row.data.length - 1, charRight: number
-
-        const { x, width } = drawData.bounds
-        const right = x + width - ellipsisWidth
-
-        for (let i = end; i > -1; i--) {
-            char = row.data[i]
-            charRight = char.x + char.width
-            if (i === end && charRight < right) {
-                break
-            } else if (charRight < right && char.char !== ' ') {
-                row.data.splice(i + 1)
-                row.width -= char.width
-                break
+        const right = style.x + style.width - ellipsisWidth
+        const list = style.textWrap === 'none' ? rows : [rows[overflow - 1]]
+
+        list.forEach(row => {
+
+            if (row.isOverflow && row.data) {
+
+                let end = row.data.length - 1
+
+                for (let i = end; i > -1; i--) {
+                    char = row.data[i]
+                    charRight = char.x + char.width
+                    if (i === end && charRight < right) {
+                        break
+                    } else if (charRight < right && char.char !== ' ') {
+                        row.data.splice(i + 1)
+                        row.width -= char.width
+                        break
+                    }
+                    row.width -= char.width
+                }
+
+                row.width += ellipsisWidth
+                row.data.push({ char: textOverflow, x: charRight })
+
+                if (row.textMode) toTextChar(row)
             }
-            row.width -= char.width
-        }
 
-        row.width += ellipsisWidth
-        row.data.push({ char: textOverflow, x: charRight })
+
+        })
+
     }
 
+}
+
+function toTextChar(row: ITextRowData): void {
+    row.text = ''
+    row.data.forEach(char => {
+        row.text += char.char
+    })
+    row.data = null
 }

package/src/TextConvert.ts

@@ -1,4 +1,4 @@
-import { MathHelper, Platform } from '@leafer/core'
+import { Platform, Direction4 } from '@leafer/core'
 
 import { ITextData, ITextDrawData } from '@leafer-ui/interface'
 
@@ -9,48 +9,79 @@ import { clipText } from './TextClip'
 import { decorationText } from './TextDecoration'
 
 
-export const TextConvert = {
+const { top, right, bottom, left } = Direction4
 
-    getDrawData(content: string, style: ITextData): ITextDrawData {
+export function getDrawData(content: string, style: ITextData): ITextDrawData {
 
-        if (typeof content !== 'string') content = String(content)
+    if (typeof content !== 'string') content = String(content)
 
-        let x = 0, y = 0
-        let { width, height, padding } = style
-        const { textDecoration, textOverflow, __font } = style
-        if (!width) width = 0
+    let x = 0, y = 0
 
-        if (padding) {
-            const [top, right, bottom, left] = MathHelper.fourNumber(padding)
-            if (width) {
-                x = left
-                width -= (right + left)
-            }
-            if (height) {
-                y = top
-                height -= (top + bottom)
-            }
-        }
+    let width = style.__getInput('width') || 0
+    let height = style.__getInput('height') || 0
+
+    const { textDecoration, __font, __padding: padding } = style
 
-        const drawData: ITextDrawData = {
-            bounds: { x, y, width, height },
-            rows: [],
-            paraNumber: 0,
-            font: Platform.canvas.font = __font
+    if (padding) {
+        if (width) {
+            x = padding[left]
+            width -= (padding[right] + padding[left])
         }
+        if (height) {
+            y = padding[top]
+            height -= (padding[top] + padding[bottom])
+        }
+    }
+
+    const drawData: ITextDrawData = {
+        bounds: { x, y, width, height },
+        rows: [],
+        paraNumber: 0,
+        font: Platform.canvas.font = __font
+    }
+
+    createRows(drawData, content, style) // set rows, paraNumber
 
-        createRows(drawData, content, style) // set rows, paraNumber
+    if (padding) padAutoText(padding, drawData, style, width, height)
 
-        layoutText(drawData, style) // set bounds
+    layoutText(drawData, style) // set bounds
 
-        layoutChar(drawData, style, width, height) // set char.x
+    layoutChar(drawData, style, width, height) // set char.x
 
-        if (drawData.overflow) clipText(drawData, textOverflow)
+    if (drawData.overflow) clipText(drawData, style)
 
-        if (textDecoration !== 'none') decorationText(drawData, style)
+    if (textDecoration !== 'none') decorationText(drawData, style)
 
-        return drawData
+    return drawData
 
+}
+
+
+function padAutoText(padding: number[], drawData: ITextDrawData, style: ITextData, width: number, height: number): void {
+    if (!width) {
+        switch (style.textAlign) {
+            case 'left':
+                offsetText(drawData, 'x', padding[left])
+                break
+            case 'right':
+                offsetText(drawData, 'x', -padding[right])
+        }
     }
 
+    if (!height) {
+        switch (style.verticalAlign) {
+            case 'top':
+                offsetText(drawData, 'y', padding[top])
+                break
+            case 'bottom':
+                offsetText(drawData, 'y', -padding[bottom])
+        }
+    }
+}
+
+
+function offsetText(drawData: ITextDrawData, attrName: 'x' | 'y', value: number): void {
+    const { bounds, rows } = drawData
+    bounds[attrName] += value
+    for (let i = 0; i < rows.length; i++) rows[i][attrName] += value
 }

package/src/TextLayout.ts

@@ -4,32 +4,30 @@ import { ITextData, ITextDrawData, ITextRowData } from '@leafer-ui/interface'
 export function layoutText(drawData: ITextDrawData, style: ITextData): void {
 
     const { rows, bounds } = drawData
-    const { __lineHeight, __baseLine, textAlign, verticalAlign, paraSpacing, textOverflow } = style
+    const { __lineHeight, __baseLine, __letterSpacing, __clipText, textAlign, verticalAlign, paraSpacing } = style
 
     let { x, y, width, height } = bounds, realHeight = __lineHeight * rows.length + (paraSpacing ? paraSpacing * (drawData.paraNumber - 1) : 0)
     let starY: number = __baseLine
 
     // verticalAlign
 
-    if (height) {
-        if (textOverflow !== 'show' && realHeight > height) {
-            realHeight = Math.max(height, __lineHeight)
-            drawData.overflow = rows.length
-        } else {
-            switch (verticalAlign) {
-                case 'middle':
-                    y += (height - realHeight) / 2
-                    break
-                case 'bottom':
-                    y += (height - realHeight)
-            }
+    if (__clipText && realHeight > height) {
+        realHeight = Math.max(height, __lineHeight)
+        drawData.overflow = rows.length
+    } else {
+        switch (verticalAlign) {
+            case 'middle':
+                y += (height - realHeight) / 2
+                break
+            case 'bottom':
+                y += (height - realHeight)
         }
-        starY += y
     }
+    starY += y
 
     // textAlign
 
-    let row: ITextRowData
+    let row: ITextRowData, rowX: number, rowWidth: number
 
     for (let i = 0, len = rows.length; i < len; i++) {
         row = rows[i]
@@ -54,7 +52,27 @@ export function layoutText(drawData: ITextDrawData, style: ITextData): void {
             drawData.overflow = i + 1
         }
 
-        if (row.width > bounds.width) bounds.width = row.width
+        rowX = row.x
+        rowWidth = row.width
+
+        if (__letterSpacing < 0) { // letterSpacing < 0, like -20% -100%
+            if (row.width < 0) {
+                rowWidth = -row.width + style.fontSize + __letterSpacing
+                rowX -= rowWidth
+                rowWidth += style.fontSize
+            } else {
+                rowWidth -= __letterSpacing
+            }
+        }
+
+        if (rowX < bounds.x) bounds.x = rowX
+        if (rowWidth > bounds.width) bounds.width = rowWidth
+
+        // clip nowrap
+        if (__clipText && width && width < rowWidth) {
+            row.isOverflow = true
+            if (!drawData.overflow) drawData.overflow = rows.length
+        }
     }
 
     bounds.y = y

package/src/TextRows.ts

@@ -11,7 +11,7 @@ const { trimRight } = TextRowHelper
 const { Letter, Single, Before, After, Symbol, Break } = CharType
 
 let word: ITextWordData, row: ITextRowData, wordWidth: number, rowWidth: number, realWidth: number
-let char: string, charWidth: number, charType: CharType, lastCharType: CharType, langBreak: boolean, afterBreak: boolean, paraStart: boolean
+let char: string, charWidth: number, startCharSize: number, charSize: number, charType: CharType, lastCharType: CharType, langBreak: boolean, afterBreak: boolean, paraStart: boolean
 let textDrawData: ITextDrawData, rows: ITextRowData[] = [], bounds: IBoundsData
 
 export function createRows(drawData: ITextDrawData, content: string, style: ITextData): void {
@@ -27,9 +27,12 @@ export function createRows(drawData: ITextDrawData, content: string, style: ITex
 
     if (charMode) {
 
+        const wrap = style.textWrap !== 'none'
+        const breakAll = style.textWrap === 'break'
+
         paraStart = true
         lastCharType = null
-        wordWidth = rowWidth = 0
+        startCharSize = charWidth = charSize = wordWidth = rowWidth = 0
         word = { data: [] }, row = { words: [] }
 
         for (let i = 0, len = content.length; i < len; i++) {
@@ -51,30 +54,44 @@ export function createRows(drawData: ITextDrawData, content: string, style: ITex
                 if (charType === Letter && textCase !== 'none') char = getTextCase(char, textCase, !wordWidth)
 
                 charWidth = canvas.measureText(char).width
-                if (__letterSpacing) charWidth += __letterSpacing
+                if (__letterSpacing) {
+                    if (__letterSpacing < 0) charSize = charWidth
+                    charWidth += __letterSpacing
+                }
 
                 langBreak = (charType === Single && (lastCharType === Single || lastCharType === Letter)) || (lastCharType === Single && charType !== After) // break  U字 文字 or 字U  字（  字*  exclude 字。
                 afterBreak = ((charType === Before || charType === Single) && (lastCharType === Symbol || lastCharType === After)) // split >(  =文 。哈  ;文
 
                 realWidth = paraStart && paraIndent ? width - paraIndent : width
 
-                if (width && rowWidth + wordWidth + charWidth > realWidth) { // wrap
-
-                    if (!afterBreak) afterBreak = charType === Letter && lastCharType == After // split ，S  
+                if (wrap && (width && rowWidth + wordWidth + charWidth > realWidth)) { // wrap
 
-                    if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+                    if (breakAll) {
 
                         if (wordWidth) addWord() // break
                         addRow()
 
                     } else {
+                        if (!afterBreak) afterBreak = charType === Letter && lastCharType == After // split ，S  
 
-                        addRow()
+                        if (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+
+                            if (wordWidth) addWord() // break
+                            addRow()
+
+                        } else {
+
+                            addRow()
+                        }
                     }
 
                 }
 
-                if (!(char === ' ' && (rowWidth + wordWidth) === 0)) {
+                if (char === ' ' && paraStart !== true && (rowWidth + wordWidth) === 0) {
+
+                    // trim space
+
+                } else {
 
                     if (charType === Break) {
 
@@ -117,6 +134,7 @@ export function createRows(drawData: ITextDrawData, content: string, style: ITex
 
 
 function addChar(char: string, width: number): void {
+    if (charSize && !startCharSize) startCharSize = charSize
     word.data.push({ char, width })
     wordWidth += width
 }
@@ -135,6 +153,13 @@ function addRow(): void {
         row.paraStart = true
         paraStart = false
     }
+
+    if (charSize) { // letterSpacing < 0, like -20% -100%
+        row.startCharSize = startCharSize
+        row.endCharSize = charSize
+        startCharSize = 0
+    }
+
     row.width = rowWidth
     if (bounds.width) trimRight(row)
     rows.push(row)

package/src/index.ts

@@ -1 +1,7 @@
-export { TextConvert } from './TextConvert'
+import { ITextConvertModule } from '@leafer-ui/interface'
+
+import { getDrawData } from './TextConvert'
+
+export const TextConvertModule: ITextConvertModule = {
+    getDrawData
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import { ITextConvertModule } from '@leafer-ui/interface';
+
+declare const TextConvertModule: ITextConvertModule;
+
+export { TextConvertModule };