@leafer-ui/text 1.0.0-alpha.23 → 1.0.0-alpha.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/text",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.31",
   "description": "@leafer-ui/text",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer-ui/core": "1.0.0-alpha.23"
+    "@leafer-ui/core": "1.0.0-alpha.31"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.23",
-    "@leafer-ui/interface": "1.0.0-alpha.23"
+    "@leafer/interface": "1.0.0-alpha.31",
+    "@leafer-ui/interface": "1.0.0-alpha.31"
   }
 }

package/src/CharLayout.ts

@@ -0,0 +1,83 @@
+import { ITextCharData, ITextData, ITextDrawData } 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'
+
+export function layoutChar(drawData: ITextDrawData, style: ITextData, width: number, _height: number): void {
+
+    const { rows } = drawData
+    const { textAlign, paraIndent, letterSpacing } = style
+    let charX: number, addWordWidth: number, indentWidth: number, mode: number, wordChar: ITextCharData
+
+    rows.forEach(row => {
+        if (row.words) {
+
+            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)
+
+            if (mode === RowMode) {
+
+                row.text = ''
+                row.x += indentWidth
+
+                row.words.forEach(word => {
+                    word.data.forEach(char => {
+                        row.text += char.char
+                    })
+                })
+
+            } else {
+
+                row.x += indentWidth
+                charX = row.x
+                row.data = []
+
+                row.words.forEach(word => {
+
+                    if (mode === WordMode) {
+
+                        wordChar = { char: '', x: charX }
+                        charX = toWordChar(word.data, charX, wordChar)
+                        if (wordChar.char !== ' ') row.data.push(wordChar)
+
+                    } else {
+
+                        charX = toChar(word.data, charX, row.data)
+
+                    }
+
+                    if (!row.paraEnd && addWordWidth) {
+                        charX += addWordWidth
+                        row.width += addWordWidth
+                    }
+
+                })
+            }
+
+            row.words = null
+        }
+    })
+
+}
+
+function toWordChar(data: ITextCharData[], charX: number, wordChar: ITextCharData): number {
+    data.forEach(char => {
+        wordChar.char += char.char
+        charX += char.width
+    })
+    return charX
+}
+
+function toChar(data: ITextCharData[], charX: number, rowData: ITextCharData[]): number {
+    data.forEach(char => {
+        if (char.char !== ' ') {
+            char.x = charX
+            rowData.push(char)
+        }
+        charX += char.width
+    })
+    return charX
+}

package/src/CharType.ts

@@ -0,0 +1,57 @@
+import { IBooleanMap } from '@leafer-ui/interface'
+
+const money = '¥￥＄€£￡¢￠'
+const letter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz'
+
+const langBefore = '《（「〈『〖【〔｛┌＜’“＝' + money
+const langAfter = '》）」〉』〗】〕｝┐＞’“！？，、。：；‰'
+const langSymbol = '≮≯≈≠＝…'
+const langBreak = '—／～｜┆·'
+
+const beforeChar = '{[(<\'"' + langBefore
+const afterChar = '>)]}%!?,.:;\'"' + langAfter
+const symbolChar = afterChar + '_#~&*+\\=|' + langSymbol
+const breakChar = '- ' + langBreak
+
+function mapChar(str: string): IBooleanMap {
+    const map: IBooleanMap = {}
+    str.split('').forEach(char => map[char] = true)
+    return map
+}
+
+const letterMap = mapChar(letter)
+const beforeMap = mapChar(beforeChar)
+const afterMap = mapChar(afterChar)
+const symbolMap = mapChar(symbolChar)
+const breakMap = mapChar(breakChar)
+
+export enum CharType {
+    Letter, // en... number
+    Single, // cjk
+    Before, // (
+    After, // )
+    Symbol, // *
+    Break, // space
+}
+
+const { Letter, Single, Before, After, Symbol, Break } = CharType
+
+export function getCharType(char: string): CharType {
+
+    if (letterMap[char]) {
+        return Letter
+    } else if (breakMap[char]) {
+        return Break
+    } else if (/[\u3400-\u9FBF]/.test(char)) { // 4e00-\u9FBF cjk
+        return Single
+    } else if (beforeMap[char]) {
+        return Before
+    } else if (afterMap[char]) {
+        return After
+    } else if (symbolMap[char]) {
+        return Symbol
+    } else {
+        return Letter
+    }
+
+}

package/src/TextCase.ts

@@ -0,0 +1,14 @@
+import { ITextCase } from '@leafer-ui/interface'
+
+export function getTextCase(char: string, textCase: ITextCase, firstChar?: boolean): string {
+    switch (textCase) {
+        case 'title':
+            return firstChar ? char.toUpperCase() : char
+        case 'upper':
+            return char.toUpperCase()
+        case 'lower':
+            return char.toLowerCase()
+        default:
+            return char
+    }
+}

package/src/TextClip.ts

@@ -0,0 +1,37 @@
+import { IOverflow, ITextCharData, ITextDrawData } from '@leafer-ui/interface'
+import { Platform } from '@leafer/core'
+
+export function clipText(drawData: ITextDrawData, textOverflow: IOverflow | string): void {
+
+    const { rows, overflow } = drawData
+    rows.splice(overflow)
+
+    if (textOverflow !== 'hide') {
+        if (textOverflow === 'ellipsis') textOverflow = '...'
+
+        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
+            }
+            row.width -= char.width
+        }
+
+        row.width += ellipsisWidth
+        row.data.push({ char: textOverflow, x: charRight })
+    }
+
+}

package/src/TextConvert.ts

@@ -1,156 +1,55 @@
-import { Platform } from '@leafer/core'
+import { MathHelper, Platform } from '@leafer/core'
 
-import { ITextData, ITextDrawData, ITextRowData } from '@leafer-ui/interface'
+import { ITextData, ITextDrawData } from '@leafer-ui/interface'
+import { createRows } from './TextRows'
+import { layoutChar } from './CharLayout'
+import { layoutText } from './TextLayout'
+import { clipText } from './TextClip'
+import { decorationText } from './TextDecoration'
 
-export const TextConvert = {
 
-    getFont(style: ITextData): string {
-        const { fontFamily, fontSize, fontWeight, italic, textCase } = style
-        return `${italic ? 'italic' : ''} ${textCase === 'small-caps' ? 'small-caps' : 'normal'} ${fontWeight ? fontWeight : 'normal'} ${fontSize}px/${fontSize}px ${fontFamily}`
-    },
+export const TextConvert = {
 
     getDrawData(content: string, style: ITextData): ITextDrawData {
-        const { width, height, fontSize, textDecoration, textAlign, verticalAlign } = style
-        const { canvas } = Platform
-
-        const list: ITextRowData[] = []
-        const lineHeight = fontSize * style.lineHeight
-        const font = canvas.font = T.getFont(style)
-
-        if (width) {
-            let char: string, charWidth: number, space = '', spaceWidth = 0, spaceCharWidth: number, word = '', wordWidth = 0, text = '', textWidth = 0
-            for (let i = 0, len = content.length; i < len; i++) {
-                char = content[i]
-                switch (char) {
-                    case '\n':
-
-                        //list.push({ text: text + word + space })
-                        list.push({ text: text + word })
-                        text = word = space = ''
-                        textWidth = wordWidth = spaceWidth = 0
-
-                        break
-                    case ' ':
-
-                        if (!spaceCharWidth) spaceCharWidth = canvas.measureText(char).width
-                        space += char
-                        spaceWidth += spaceCharWidth
-
-                        break
-
-                    default:
-
-                        charWidth = canvas.measureText(char).width
 
-                        if (textWidth + wordWidth + spaceWidth + charWidth > width) {
+        if (typeof content !== 'string') content = String(content)
 
-                            if (wordWidth + spaceWidth + charWidth > width) {
-
-                                // break word
-                                list.push({ text: text + word })
-                                text = word = space = ''
-                                textWidth = wordWidth = spaceWidth = 0
-
-                            } else {
-
-                                list.push({ text })
-                                text = ''
-                                textWidth = 0
-
-                            }
-                        }
-
-                        if (space) {
-                            text += word + space
-                            textWidth += wordWidth + spaceWidth
-
-                            word = space = ''
-                            wordWidth = spaceWidth = 0
-                        }
-
-                        word += char
-                        wordWidth += charWidth
-
-                }
+        let x = 0, y = 0
+        let { width, height, padding } = style
+        const { textDecoration, textOverflow, __font } = style
+        if (!width) width = 0
 
+        if (padding) {
+            const [top, right, bottom, left] = MathHelper.fourNumber(padding)
+            if (width) {
+                x = left
+                width -= (right + left)
             }
-
-            list.push({ text: text + word + space })
-
-        } else {
-
-            content.split('\n').map(text => {
-                list.push({ text })
-            })
-
-        }
-
-        // measure
-
-        let realWidth = 0, realHeight = lineHeight * list.length
-
-        list.forEach(item => {
-            item.width = canvas.measureText(item.text).width
-            realWidth = Math.max(realWidth, item.width)
-        })
-
-
-        // align
-
-        let item: ITextRowData, starY: number = lineHeight - (lineHeight - fontSize * 0.7) / 2
-
-        if (height) {
-            switch (verticalAlign) {
-                case 'middle':
-                    starY += (height - realHeight) / 2
-                    break
-                case 'bottom':
-                    starY += (height - realHeight)
+            if (height) {
+                y = top
+                height -= (top + bottom)
             }
         }
 
+        const drawData: ITextDrawData = {
+            bounds: { x, y, width, height },
+            rows: [],
+            paraNumber: 0,
+            font: Platform.canvas.font = __font
+        }
 
-        for (let i = 0, len = list.length; i < len; i++) {
-            item = list[i]
-            item.x = 0
+        createRows(drawData, content, style) // set rows, paraNumber
 
-            if (width) {
-                switch (textAlign) {
-                    case 'center':
-                        item.x = (width - item.width) / 2
-                        break
-                    case 'right':
-                        item.x = width - item.width
-                }
-            }
+        layoutText(drawData, style) // set bounds
 
-            item.y = starY + lineHeight * i
-        }
-
-        // decoration
+        layoutChar(drawData, style, width, height) // set char.x
 
-        let decorationY: number, decorationHeight = fontSize / 11
-        switch (textDecoration) {
-            case 'underline':
-                decorationY = fontSize * 0.1
-                break
-            case 'strikethrough':
-                decorationY = -fontSize * 0.35
-        }
+        if (drawData.overflow) clipText(drawData, textOverflow)
 
+        if (textDecoration !== 'none') decorationText(drawData, style)
 
-        return {
-            list,
-            x: 0,
-            y: 0,
-            width: realWidth,
-            height: realHeight,
-            font,
-            decorationY,
-            decorationHeight
-        }
+        return drawData
 
     }
-}
 
-const T = TextConvert
+}

package/src/TextDecoration.ts

@@ -0,0 +1,13 @@
+import { ITextData, ITextDrawData } from '@leafer-ui/interface'
+
+export function decorationText(drawData: ITextDrawData, style: ITextData): void {
+    const { fontSize } = style
+    drawData.decorationHeight = fontSize / 11
+    switch (style.textDecoration) {
+        case 'underline':
+            drawData.decorationY = fontSize * 0.15
+            break
+        case 'delete':
+            drawData.decorationY = -fontSize * 0.35
+    }
+}

package/src/TextLayout.ts

@@ -0,0 +1,61 @@
+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
+
+    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)
+            }
+        }
+        starY += y
+    }
+
+    // textAlign
+
+    let row: ITextRowData
+
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i]
+        row.x = x
+
+        switch (textAlign) {
+            case 'center':
+                row.x += (width - row.width) / 2
+                break
+            case 'right':
+                row.x += width - row.width
+        }
+
+        if (row.paraStart && paraSpacing && i > 0) starY += paraSpacing
+
+        row.y = starY
+
+        starY += __lineHeight
+
+        if (drawData.overflow > i && starY > realHeight) {
+            row.isOverflow = true
+            drawData.overflow = i + 1
+        }
+    }
+
+    bounds.y = y
+    bounds.height = realHeight
+
+}

package/src/TextRowHelper.ts

@@ -0,0 +1,22 @@
+import { ITextRowData, ITextCharData } from '@leafer-ui/interface'
+
+export const TextRowHelper = {
+
+    trimRight(row: ITextRowData): void {
+        const { words } = row
+        let trimRight = 0, len = words.length, char: ITextCharData
+
+        for (let i = len - 1; i > -1; i--) {
+            char = words[i].data[0]
+            if (char.char === ' ') {
+                trimRight++
+                row.width -= char.width
+            } else {
+                break
+            }
+        }
+
+        if (trimRight) words.splice(len - trimRight, trimRight)
+    }
+
+}

package/src/TextRows.ts

@@ -0,0 +1,144 @@
+import { Platform } from '@leafer/core'
+
+import { IBoundsData, ITextData, ITextDrawData, ITextRowData, ITextWordData } from '@leafer-ui/interface'
+
+import { CharType, getCharType } from './CharType'
+import { TextRowHelper } from './TextRowHelper'
+import { getTextCase } from './TextCase'
+
+
+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 textDrawData: ITextDrawData, rows: ITextRowData[] = [], bounds: IBoundsData
+
+export function createRows(drawData: ITextDrawData, content: string, style: ITextData): void {
+
+    textDrawData = drawData
+    rows = drawData.rows
+    bounds = drawData.bounds
+
+    const { __letterSpacing, paraIndent, textCase } = style
+    const { canvas } = Platform
+    const { width, height } = bounds
+    const charMode = width || height || __letterSpacing || textCase
+
+    if (charMode) {
+
+        paraStart = true
+        lastCharType = null
+        wordWidth = rowWidth = 0
+        word = { data: [] }, row = { words: [] }
+
+        for (let i = 0, len = content.length; i < len; i++) {
+
+            char = content[i]
+
+            if (char === '\n') {
+
+                if (wordWidth) addWord()
+                row.paraEnd = true
+                addRow()
+
+                paraStart = true
+
+            } else {
+
+                charType = getCharType(char)
+
+                if (charType === Letter && textCase !== 'none') char = getTextCase(char, textCase, !wordWidth)
+
+                charWidth = canvas.measureText(char).width
+                if (__letterSpacing) 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 (langBreak || afterBreak || charType === Break || charType === Before || charType === Single || (wordWidth + charWidth > realWidth)) {
+
+                        if (wordWidth) addWord() // break
+                        addRow()
+
+                    } else {
+
+                        addRow()
+                    }
+
+                }
+
+                if (!(char === ' ' && (rowWidth + wordWidth) === 0)) {
+
+                    if (charType === Break) {
+
+                        if (char === ' ' && wordWidth) addWord()
+                        addChar(char, charWidth)
+                        addWord()
+
+                    } else if (langBreak || afterBreak) {
+
+                        if (wordWidth) addWord()
+                        addChar(char, charWidth)
+
+                    } else {
+
+                        addChar(char, charWidth)
+
+                    }
+                }
+
+                lastCharType = charType
+
+            }
+
+        }
+
+        if (wordWidth) addWord()
+        if (rowWidth) addRow()
+
+        rows[rows.length - 1].paraEnd = true
+
+    } else {
+
+        content.split('\n').forEach(content => {
+            textDrawData.paraNumber++
+            rows.push({ x: paraIndent || 0, text: content, width: canvas.measureText(content).width, paraStart: true })
+        })
+
+    }
+}
+
+
+function addChar(char: string, width: number): void {
+    word.data.push({ char, width })
+    wordWidth += width
+}
+
+function addWord(): void {
+    rowWidth += wordWidth
+    word.width = wordWidth
+    row.words.push(word)
+    word = { data: [] }
+    wordWidth = 0
+}
+
+function addRow(): void {
+    if (paraStart) {
+        textDrawData.paraNumber++
+        row.paraStart = true
+        paraStart = false
+    }
+    row.width = rowWidth
+    trimRight(row)
+    rows.push(row)
+    if (row.width > bounds.width) bounds.width = row.width
+    row = { words: [] }
+    rowWidth = 0
+}