fix:优化代码风格

pr675
黄云飞 4 years ago
parent ad9f60abdc
commit 37c44f7986

@ -18,35 +18,35 @@ export class CursorAgent {
this.canvas.parentNode?.append(agentCursorDom)
this.agentCursorDom = agentCursorDom
// 事件
agentCursorDom.onkeydown = (evt: KeyboardEvent) => this.keyDown(evt)
agentCursorDom.oninput = debounce(this.input.bind(this), 0)
agentCursorDom.onpaste = (evt: ClipboardEvent) => this.paste(evt)
agentCursorDom.addEventListener('compositionstart', this.compositionstart.bind(this))
agentCursorDom.addEventListener('compositionend', this.compositionend.bind(this))
agentCursorDom.onkeydown = (evt: KeyboardEvent) => this._keyDown(evt)
agentCursorDom.oninput = debounce(this._input.bind(this), 0)
agentCursorDom.onpaste = (evt: ClipboardEvent) => this._paste(evt)
agentCursorDom.addEventListener('compositionstart', this._compositionstart.bind(this))
agentCursorDom.addEventListener('compositionend', this._compositionend.bind(this))
}
public getAgentCursorDom(): HTMLTextAreaElement {
return this.agentCursorDom
}
keyDown(evt: KeyboardEvent) {
private _keyDown(evt: KeyboardEvent) {
this.canvasEvent.keydown(evt)
}
input(evt: InputEvent) {
private _input(evt: InputEvent) {
if (!evt.data) return
this.canvasEvent.input(evt.data)
}
paste(evt: ClipboardEvent) {
private _paste(evt: ClipboardEvent) {
this.canvasEvent.paste(evt)
}
compositionstart() {
private _compositionstart() {
this.canvasEvent.compositionstart()
}
compositionend() {
private _compositionend() {
this.canvasEvent.compositionend()
}

@ -82,7 +82,7 @@ export class Draw {
this.painterStyle = null
this.searchMatchList = null
this.setDefaultRange()
this._setDefaultRange()
}
public getOptions(): Required<IEditorOption> {
@ -144,7 +144,7 @@ export class Draw {
this.searchMatchList = payload
}
private setDefaultRange() {
private _setDefaultRange() {
if (!this.elementList.length) return
setTimeout(() => {
const curIndex = this.elementList.length - 1
@ -153,12 +153,12 @@ export class Draw {
})
}
private getFont(el: IElement): string {
private _getFont(el: IElement): string {
const { defaultSize, defaultFont } = this.options
return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${el.size || defaultSize}px ${el.font || defaultFont}`
}
private computeRowList() {
private _computeRowList() {
const { defaultSize } = this.options
const canvasRect = this.canvas.getBoundingClientRect()
const { width } = canvasRect
@ -201,7 +201,7 @@ export class Draw {
metrics.boundingBoxDescent = element.height!
} else {
metrics.height = element.size || this.options.defaultSize
this.ctx.font = this.getFont(element)
this.ctx.font = this._getFont(element)
const fontMetrics = this.ctx.measureText(element.value)
metrics.width = fontMetrics.width
metrics.boundingBoxAscent = element.value === ZERO ? defaultSize : fontMetrics.actualBoundingBoxAscent
@ -263,7 +263,7 @@ export class Draw {
this.margin.render(canvasRect)
// 计算行信息
if (isComputeRowList) {
this.computeRowList()
this._computeRowList()
}
// 渲染元素
let x = leftTopPoint[0]

@ -6,7 +6,7 @@ export class Background {
this.ctx = ctx
}
render(canvasRect: DOMRect) {
public render(canvasRect: DOMRect) {
const { width, height } = canvasRect
this.ctx.save()
this.ctx.fillStyle = '#ffffff'

@ -10,7 +10,7 @@ export class Margin {
this.options = options
}
render(canvasRect: DOMRect) {
public render(canvasRect: DOMRect) {
const { width, height } = canvasRect
const { marginIndicatorColor, marginIndicatorSize, margins } = this.options
this.ctx.save()

@ -16,7 +16,7 @@ export class Search {
this.position = draw.getPosition()
}
render() {
public render() {
const searchMatch = this.draw.getSearchMathch()
if (!searchMatch || !searchMatch.length) return
const searchMatchList = searchMatch.flat()

@ -30,7 +30,7 @@ export class ImageParticle {
this.curElement = null
this.curPosition = null
this.imageCache = new Map()
const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } = this.createResizerDom()
const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } = this._createResizerDom()
this.resizerSelection = resizerSelection
this.resizerHandleList = resizerHandleList
this.resizerImageContainer = resizerImageContainer
@ -42,7 +42,7 @@ export class ImageParticle {
this.curHandleIndex = 0 // 默认右下角
}
private createResizerDom(): IImageParticleCreateResult {
private _createResizerDom(): IImageParticleCreateResult {
// 拖拽边框
const resizerSelection = document.createElement('div')
resizerSelection.classList.add('resizer-selection')
@ -54,7 +54,7 @@ export class ImageParticle {
handleDom.style.background = this.options.resizerColor
handleDom.classList.add(`handle-${i}`)
handleDom.setAttribute('data-index', String(i))
handleDom.onmousedown = this.handleMousedown.bind(this)
handleDom.onmousedown = this._handleMousedown.bind(this)
resizerSelection.append(handleDom)
resizerHandleList.push(handleDom)
}
@ -69,7 +69,7 @@ export class ImageParticle {
return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
}
private handleMousedown(evt: MouseEvent) {
private _handleMousedown(evt: MouseEvent) {
if (!this.curPosition || !this.curElement) return
this.mousedownX = evt.x
this.mousedownY = evt.y
@ -88,7 +88,7 @@ export class ImageParticle {
this.resizerImage.style.width = `${this.curElement.width}px`
this.resizerImage.style.height = `${this.curElement.height}px`
// 追加全局事件
const mousemoveFn = this.mousemove.bind(this)
const mousemoveFn = this._mousemove.bind(this)
document.addEventListener('mousemove', mousemoveFn)
document.addEventListener('mouseup', () => {
// 改变尺寸
@ -109,7 +109,7 @@ export class ImageParticle {
evt.preventDefault()
}
private mousemove(evt: MouseEvent) {
private _mousemove(evt: MouseEvent) {
if (!this.curElement) return
let dx = 0
let dy = 0

@ -18,14 +18,14 @@ export class TextParticle {
}
public complete() {
this.render()
this._render()
this.text = ''
}
public record(element: IRowElement, x: number, y: number) {
// 主动完成的重设起始点
if (!this.text) {
this.setCurXY(x, y)
this._setCurXY(x, y)
}
// 样式发生改变
if (
@ -33,19 +33,19 @@ export class TextParticle {
(element.color !== this.curColor)
) {
this.complete()
this.setCurXY(x, y)
this._setCurXY(x, y)
}
this.text += element.value
this.curStyle = element.style
this.curColor = element.color
}
private setCurXY(x: number, y: number) {
private _setCurXY(x: number, y: number) {
this.curX = x
this.curY = y
}
private render() {
private _render() {
if (!this.text || !~this.curX || !~this.curX) return
this.ctx.save()
this.ctx.font = this.curStyle

@ -10,7 +10,7 @@ export class Highlight {
this.options = options
}
render(color: string, x: number, y: number, width: number, height: number) {
public render(color: string, x: number, y: number, width: number, height: number) {
const { highlightAlpha } = this.options
this.ctx.save()
this.ctx.globalAlpha = highlightAlpha

@ -10,7 +10,7 @@ export class Strikeout {
this.options = options
}
render(x: number, y: number, width: number) {
public render(x: number, y: number, width: number) {
const { strikeoutColor } = this.options
this.ctx.save()
this.ctx.strokeStyle = strikeoutColor

@ -10,7 +10,7 @@ export class Underline {
this.options = options
}
render(x: number, y: number, width: number) {
public render(x: number, y: number, width: number) {
const { underlineColor } = this.options
this.ctx.save()
this.ctx.strokeStyle = underlineColor

@ -24,7 +24,7 @@ export class GlobalEvent {
this.imageParticle = draw.getImageParticle()
}
register() {
public register() {
this.cursor = this.draw.getCursor()
document.addEventListener('keyup', () => {
this.setRangeStyle()
@ -37,7 +37,7 @@ export class GlobalEvent {
})
}
recoverEffect(evt: MouseEvent) {
public recoverEffect(evt: MouseEvent) {
if (!this.cursor) return
const cursorDom = this.cursor.getCursorDom()
const agentDom = this.cursor.getAgentDom()
@ -62,11 +62,11 @@ export class GlobalEvent {
this.imageParticle.clearResizer()
}
setDragState() {
public setDragState() {
this.canvasEvent.setIsAllowDrag(false)
}
setRangeStyle() {
public setRangeStyle() {
this.range.setRangeStyle()
}

Loading…
Cancel
Save