fix:优化代码风格
This commit is contained in:
@@ -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()
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user