Hufe921
3 years ago
committed by
Hufe
parent
8202c1c67b
commit
c2330a8c11
|
After Width: | Height: | Size: 398 B |
@ -0,0 +1,97 @@
|
|||||||
|
import { ZERO } from '../../../dataset/constant/Common'
|
||||||
|
import { ulStyleMapping } from '../../../dataset/constant/List'
|
||||||
|
import { KeyMap } from '../../../dataset/enum/KeyMap'
|
||||||
|
import { ListStyle, ListType, UlStyle } from '../../../dataset/enum/List'
|
||||||
|
import { DeepRequired } from '../../../interface/Common'
|
||||||
|
import { IEditorOption } from '../../../interface/Editor'
|
||||||
|
import { IElement, IElementPosition } from '../../../interface/Element'
|
||||||
|
import { IRow } from '../../../interface/Row'
|
||||||
|
import { Draw } from '../Draw'
|
||||||
|
|
||||||
|
export class ListParticle {
|
||||||
|
|
||||||
|
private options: DeepRequired<IEditorOption>
|
||||||
|
|
||||||
|
// 非递增样式直接返回默认值
|
||||||
|
private readonly UN_COUNT_STYLE_WIDTH = 20
|
||||||
|
private readonly MEASURE_BASE_TEXT = '0'
|
||||||
|
private readonly LIST_GAP = 10
|
||||||
|
|
||||||
|
constructor(draw: Draw) {
|
||||||
|
this.options = draw.getOptions()
|
||||||
|
}
|
||||||
|
|
||||||
|
public computeListStyle(ctx: CanvasRenderingContext2D, elementList: IElement[]): Map<string, number> {
|
||||||
|
const listStyleMap = new Map<string, number>()
|
||||||
|
let start = 0
|
||||||
|
let curListId = elementList[start].listId
|
||||||
|
let curElementList: IElement[] = []
|
||||||
|
const elementLength = elementList.length
|
||||||
|
while (start < elementLength) {
|
||||||
|
const curElement = elementList[start]
|
||||||
|
if (curListId && curListId === curElement.listId) {
|
||||||
|
curElementList.push(curElement)
|
||||||
|
} else {
|
||||||
|
if (curElement.listId && curElement.listId !== curListId) {
|
||||||
|
// 列表结束
|
||||||
|
if (curElementList.length) {
|
||||||
|
const width = this.getListStyleWidth(ctx, curElementList)
|
||||||
|
listStyleMap.set(curListId!, width)
|
||||||
|
}
|
||||||
|
curListId = curElement.listId
|
||||||
|
curElementList = curListId ? [curElement] : []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
start++
|
||||||
|
}
|
||||||
|
if (curElementList.length) {
|
||||||
|
const width = this.getListStyleWidth(ctx, curElementList)
|
||||||
|
listStyleMap.set(curListId!, width)
|
||||||
|
}
|
||||||
|
return listStyleMap
|
||||||
|
}
|
||||||
|
|
||||||
|
public getListStyleWidth(ctx: CanvasRenderingContext2D, listElementList: IElement[]): number {
|
||||||
|
const startElement = listElementList[0]
|
||||||
|
// 非递增样式返回固定值
|
||||||
|
if (startElement.listStyle && startElement.listStyle !== ListStyle.DECIMAL) {
|
||||||
|
return this.UN_COUNT_STYLE_WIDTH
|
||||||
|
}
|
||||||
|
// 计算列表数量
|
||||||
|
const count = listElementList.reduce((pre, cur) => {
|
||||||
|
if (cur.value === ZERO) {
|
||||||
|
pre += 1
|
||||||
|
}
|
||||||
|
return pre
|
||||||
|
}, 0)
|
||||||
|
if (!count) return 0
|
||||||
|
// 以递增样式最大宽度为准
|
||||||
|
const text = `${this.MEASURE_BASE_TEXT.repeat(String(count).length)}${KeyMap.PERIOD}`
|
||||||
|
const textMetrics = ctx.measureText(text)
|
||||||
|
return Math.ceil(textMetrics.width + this.LIST_GAP)
|
||||||
|
}
|
||||||
|
|
||||||
|
public drawListStyle(ctx: CanvasRenderingContext2D, row: IRow, position: IElementPosition) {
|
||||||
|
const { elementList, offsetX, listIndex, ascent } = row
|
||||||
|
const startElement = elementList[0]
|
||||||
|
if (startElement.value !== ZERO) return
|
||||||
|
let text = ''
|
||||||
|
if (startElement.listType === ListType.UL) {
|
||||||
|
if (startElement.listStyle) {
|
||||||
|
text = ulStyleMapping[<UlStyle><unknown>startElement.listStyle]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
text = `${listIndex! + 1}${KeyMap.PERIOD}`
|
||||||
|
}
|
||||||
|
if (!text) return
|
||||||
|
const { coordinate: { leftTop: [startX, startY] } } = position
|
||||||
|
const x = startX - offsetX!
|
||||||
|
const y = startY + ascent
|
||||||
|
const { defaultFont, defaultSize, scale } = this.options
|
||||||
|
ctx.save()
|
||||||
|
ctx.font = `${defaultSize * scale}px ${defaultFont}`
|
||||||
|
ctx.fillText(text, x, y)
|
||||||
|
ctx.restore()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { UlStyle } from '../enum/List'
|
||||||
|
|
||||||
|
export const ulStyleMapping: Record<UlStyle, string> = {
|
||||||
|
[UlStyle.DISC]: '•',
|
||||||
|
[UlStyle.CIRCLE]: '◦',
|
||||||
|
[UlStyle.SQUARE]: '▫︎'
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
export enum ListType {
|
||||||
|
UL = 'ul',
|
||||||
|
OL = 'ol'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum UlStyle {
|
||||||
|
DISC = 'disc', // 实心圆点
|
||||||
|
CIRCLE = 'circle', // 空心圆点
|
||||||
|
SQUARE = 'square', // 实心方块
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum OlStyle {
|
||||||
|
DECIMAL = 'decimal' // 阿拉伯数字
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ListStyle {
|
||||||
|
DISC = UlStyle.DISC,
|
||||||
|
CIRCLE = UlStyle.CIRCLE,
|
||||||
|
SQUARE = UlStyle.SQUARE,
|
||||||
|
DECIMAL = OlStyle.DECIMAL
|
||||||
|
}
|
||||||
Loading…
Reference in new issue