fix:优化代码风格
This commit is contained in:
@@ -18,35 +18,35 @@ export class CursorAgent {
|
|||||||
this.canvas.parentNode?.append(agentCursorDom)
|
this.canvas.parentNode?.append(agentCursorDom)
|
||||||
this.agentCursorDom = agentCursorDom
|
this.agentCursorDom = agentCursorDom
|
||||||
// 事件
|
// 事件
|
||||||
agentCursorDom.onkeydown = (evt: KeyboardEvent) => this.keyDown(evt)
|
agentCursorDom.onkeydown = (evt: KeyboardEvent) => this._keyDown(evt)
|
||||||
agentCursorDom.oninput = debounce(this.input.bind(this), 0)
|
agentCursorDom.oninput = debounce(this._input.bind(this), 0)
|
||||||
agentCursorDom.onpaste = (evt: ClipboardEvent) => this.paste(evt)
|
agentCursorDom.onpaste = (evt: ClipboardEvent) => this._paste(evt)
|
||||||
agentCursorDom.addEventListener('compositionstart', this.compositionstart.bind(this))
|
agentCursorDom.addEventListener('compositionstart', this._compositionstart.bind(this))
|
||||||
agentCursorDom.addEventListener('compositionend', this.compositionend.bind(this))
|
agentCursorDom.addEventListener('compositionend', this._compositionend.bind(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
public getAgentCursorDom(): HTMLTextAreaElement {
|
public getAgentCursorDom(): HTMLTextAreaElement {
|
||||||
return this.agentCursorDom
|
return this.agentCursorDom
|
||||||
}
|
}
|
||||||
|
|
||||||
keyDown(evt: KeyboardEvent) {
|
private _keyDown(evt: KeyboardEvent) {
|
||||||
this.canvasEvent.keydown(evt)
|
this.canvasEvent.keydown(evt)
|
||||||
}
|
}
|
||||||
|
|
||||||
input(evt: InputEvent) {
|
private _input(evt: InputEvent) {
|
||||||
if (!evt.data) return
|
if (!evt.data) return
|
||||||
this.canvasEvent.input(evt.data)
|
this.canvasEvent.input(evt.data)
|
||||||
}
|
}
|
||||||
|
|
||||||
paste(evt: ClipboardEvent) {
|
private _paste(evt: ClipboardEvent) {
|
||||||
this.canvasEvent.paste(evt)
|
this.canvasEvent.paste(evt)
|
||||||
}
|
}
|
||||||
|
|
||||||
compositionstart() {
|
private _compositionstart() {
|
||||||
this.canvasEvent.compositionstart()
|
this.canvasEvent.compositionstart()
|
||||||
}
|
}
|
||||||
|
|
||||||
compositionend() {
|
private _compositionend() {
|
||||||
this.canvasEvent.compositionend()
|
this.canvasEvent.compositionend()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -82,7 +82,7 @@ export class Draw {
|
|||||||
this.painterStyle = null
|
this.painterStyle = null
|
||||||
this.searchMatchList = null
|
this.searchMatchList = null
|
||||||
|
|
||||||
this.setDefaultRange()
|
this._setDefaultRange()
|
||||||
}
|
}
|
||||||
|
|
||||||
public getOptions(): Required<IEditorOption> {
|
public getOptions(): Required<IEditorOption> {
|
||||||
@@ -144,7 +144,7 @@ export class Draw {
|
|||||||
this.searchMatchList = payload
|
this.searchMatchList = payload
|
||||||
}
|
}
|
||||||
|
|
||||||
private setDefaultRange() {
|
private _setDefaultRange() {
|
||||||
if (!this.elementList.length) return
|
if (!this.elementList.length) return
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const curIndex = this.elementList.length - 1
|
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
|
const { defaultSize, defaultFont } = this.options
|
||||||
return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${el.size || defaultSize}px ${el.font || defaultFont}`
|
return `${el.italic ? 'italic ' : ''}${el.bold ? 'bold ' : ''}${el.size || defaultSize}px ${el.font || defaultFont}`
|
||||||
}
|
}
|
||||||
|
|
||||||
private computeRowList() {
|
private _computeRowList() {
|
||||||
const { defaultSize } = this.options
|
const { defaultSize } = this.options
|
||||||
const canvasRect = this.canvas.getBoundingClientRect()
|
const canvasRect = this.canvas.getBoundingClientRect()
|
||||||
const { width } = canvasRect
|
const { width } = canvasRect
|
||||||
@@ -201,7 +201,7 @@ export class Draw {
|
|||||||
metrics.boundingBoxDescent = element.height!
|
metrics.boundingBoxDescent = element.height!
|
||||||
} else {
|
} else {
|
||||||
metrics.height = element.size || this.options.defaultSize
|
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)
|
const fontMetrics = this.ctx.measureText(element.value)
|
||||||
metrics.width = fontMetrics.width
|
metrics.width = fontMetrics.width
|
||||||
metrics.boundingBoxAscent = element.value === ZERO ? defaultSize : fontMetrics.actualBoundingBoxAscent
|
metrics.boundingBoxAscent = element.value === ZERO ? defaultSize : fontMetrics.actualBoundingBoxAscent
|
||||||
@@ -263,7 +263,7 @@ export class Draw {
|
|||||||
this.margin.render(canvasRect)
|
this.margin.render(canvasRect)
|
||||||
// 计算行信息
|
// 计算行信息
|
||||||
if (isComputeRowList) {
|
if (isComputeRowList) {
|
||||||
this.computeRowList()
|
this._computeRowList()
|
||||||
}
|
}
|
||||||
// 渲染元素
|
// 渲染元素
|
||||||
let x = leftTopPoint[0]
|
let x = leftTopPoint[0]
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ export class Background {
|
|||||||
this.ctx = ctx
|
this.ctx = ctx
|
||||||
}
|
}
|
||||||
|
|
||||||
render(canvasRect: DOMRect) {
|
public render(canvasRect: DOMRect) {
|
||||||
const { width, height } = canvasRect
|
const { width, height } = canvasRect
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
this.ctx.fillStyle = '#ffffff'
|
this.ctx.fillStyle = '#ffffff'
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export class Margin {
|
|||||||
this.options = options
|
this.options = options
|
||||||
}
|
}
|
||||||
|
|
||||||
render(canvasRect: DOMRect) {
|
public render(canvasRect: DOMRect) {
|
||||||
const { width, height } = canvasRect
|
const { width, height } = canvasRect
|
||||||
const { marginIndicatorColor, marginIndicatorSize, margins } = this.options
|
const { marginIndicatorColor, marginIndicatorSize, margins } = this.options
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export class Search {
|
|||||||
this.position = draw.getPosition()
|
this.position = draw.getPosition()
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
public render() {
|
||||||
const searchMatch = this.draw.getSearchMathch()
|
const searchMatch = this.draw.getSearchMathch()
|
||||||
if (!searchMatch || !searchMatch.length) return
|
if (!searchMatch || !searchMatch.length) return
|
||||||
const searchMatchList = searchMatch.flat()
|
const searchMatchList = searchMatch.flat()
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ export class ImageParticle {
|
|||||||
this.curElement = null
|
this.curElement = null
|
||||||
this.curPosition = null
|
this.curPosition = null
|
||||||
this.imageCache = new Map()
|
this.imageCache = new Map()
|
||||||
const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } = this.createResizerDom()
|
const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage } = this._createResizerDom()
|
||||||
this.resizerSelection = resizerSelection
|
this.resizerSelection = resizerSelection
|
||||||
this.resizerHandleList = resizerHandleList
|
this.resizerHandleList = resizerHandleList
|
||||||
this.resizerImageContainer = resizerImageContainer
|
this.resizerImageContainer = resizerImageContainer
|
||||||
@@ -42,7 +42,7 @@ export class ImageParticle {
|
|||||||
this.curHandleIndex = 0 // 默认右下角
|
this.curHandleIndex = 0 // 默认右下角
|
||||||
}
|
}
|
||||||
|
|
||||||
private createResizerDom(): IImageParticleCreateResult {
|
private _createResizerDom(): IImageParticleCreateResult {
|
||||||
// 拖拽边框
|
// 拖拽边框
|
||||||
const resizerSelection = document.createElement('div')
|
const resizerSelection = document.createElement('div')
|
||||||
resizerSelection.classList.add('resizer-selection')
|
resizerSelection.classList.add('resizer-selection')
|
||||||
@@ -54,7 +54,7 @@ export class ImageParticle {
|
|||||||
handleDom.style.background = this.options.resizerColor
|
handleDom.style.background = this.options.resizerColor
|
||||||
handleDom.classList.add(`handle-${i}`)
|
handleDom.classList.add(`handle-${i}`)
|
||||||
handleDom.setAttribute('data-index', String(i))
|
handleDom.setAttribute('data-index', String(i))
|
||||||
handleDom.onmousedown = this.handleMousedown.bind(this)
|
handleDom.onmousedown = this._handleMousedown.bind(this)
|
||||||
resizerSelection.append(handleDom)
|
resizerSelection.append(handleDom)
|
||||||
resizerHandleList.push(handleDom)
|
resizerHandleList.push(handleDom)
|
||||||
}
|
}
|
||||||
@@ -69,7 +69,7 @@ export class ImageParticle {
|
|||||||
return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
|
return { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage }
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleMousedown(evt: MouseEvent) {
|
private _handleMousedown(evt: MouseEvent) {
|
||||||
if (!this.curPosition || !this.curElement) return
|
if (!this.curPosition || !this.curElement) return
|
||||||
this.mousedownX = evt.x
|
this.mousedownX = evt.x
|
||||||
this.mousedownY = evt.y
|
this.mousedownY = evt.y
|
||||||
@@ -88,7 +88,7 @@ export class ImageParticle {
|
|||||||
this.resizerImage.style.width = `${this.curElement.width}px`
|
this.resizerImage.style.width = `${this.curElement.width}px`
|
||||||
this.resizerImage.style.height = `${this.curElement.height}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('mousemove', mousemoveFn)
|
||||||
document.addEventListener('mouseup', () => {
|
document.addEventListener('mouseup', () => {
|
||||||
// 改变尺寸
|
// 改变尺寸
|
||||||
@@ -109,7 +109,7 @@ export class ImageParticle {
|
|||||||
evt.preventDefault()
|
evt.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
private mousemove(evt: MouseEvent) {
|
private _mousemove(evt: MouseEvent) {
|
||||||
if (!this.curElement) return
|
if (!this.curElement) return
|
||||||
let dx = 0
|
let dx = 0
|
||||||
let dy = 0
|
let dy = 0
|
||||||
|
|||||||
@@ -18,14 +18,14 @@ export class TextParticle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
public complete() {
|
public complete() {
|
||||||
this.render()
|
this._render()
|
||||||
this.text = ''
|
this.text = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
public record(element: IRowElement, x: number, y: number) {
|
public record(element: IRowElement, x: number, y: number) {
|
||||||
// 主动完成的重设起始点
|
// 主动完成的重设起始点
|
||||||
if (!this.text) {
|
if (!this.text) {
|
||||||
this.setCurXY(x, y)
|
this._setCurXY(x, y)
|
||||||
}
|
}
|
||||||
// 样式发生改变
|
// 样式发生改变
|
||||||
if (
|
if (
|
||||||
@@ -33,19 +33,19 @@ export class TextParticle {
|
|||||||
(element.color !== this.curColor)
|
(element.color !== this.curColor)
|
||||||
) {
|
) {
|
||||||
this.complete()
|
this.complete()
|
||||||
this.setCurXY(x, y)
|
this._setCurXY(x, y)
|
||||||
}
|
}
|
||||||
this.text += element.value
|
this.text += element.value
|
||||||
this.curStyle = element.style
|
this.curStyle = element.style
|
||||||
this.curColor = element.color
|
this.curColor = element.color
|
||||||
}
|
}
|
||||||
|
|
||||||
private setCurXY(x: number, y: number) {
|
private _setCurXY(x: number, y: number) {
|
||||||
this.curX = x
|
this.curX = x
|
||||||
this.curY = y
|
this.curY = y
|
||||||
}
|
}
|
||||||
|
|
||||||
private render() {
|
private _render() {
|
||||||
if (!this.text || !~this.curX || !~this.curX) return
|
if (!this.text || !~this.curX || !~this.curX) return
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
this.ctx.font = this.curStyle
|
this.ctx.font = this.curStyle
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export class Highlight {
|
|||||||
this.options = options
|
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
|
const { highlightAlpha } = this.options
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
this.ctx.globalAlpha = highlightAlpha
|
this.ctx.globalAlpha = highlightAlpha
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export class Strikeout {
|
|||||||
this.options = options
|
this.options = options
|
||||||
}
|
}
|
||||||
|
|
||||||
render(x: number, y: number, width: number) {
|
public render(x: number, y: number, width: number) {
|
||||||
const { strikeoutColor } = this.options
|
const { strikeoutColor } = this.options
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
this.ctx.strokeStyle = strikeoutColor
|
this.ctx.strokeStyle = strikeoutColor
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ export class Underline {
|
|||||||
this.options = options
|
this.options = options
|
||||||
}
|
}
|
||||||
|
|
||||||
render(x: number, y: number, width: number) {
|
public render(x: number, y: number, width: number) {
|
||||||
const { underlineColor } = this.options
|
const { underlineColor } = this.options
|
||||||
this.ctx.save()
|
this.ctx.save()
|
||||||
this.ctx.strokeStyle = underlineColor
|
this.ctx.strokeStyle = underlineColor
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ export class GlobalEvent {
|
|||||||
this.imageParticle = draw.getImageParticle()
|
this.imageParticle = draw.getImageParticle()
|
||||||
}
|
}
|
||||||
|
|
||||||
register() {
|
public register() {
|
||||||
this.cursor = this.draw.getCursor()
|
this.cursor = this.draw.getCursor()
|
||||||
document.addEventListener('keyup', () => {
|
document.addEventListener('keyup', () => {
|
||||||
this.setRangeStyle()
|
this.setRangeStyle()
|
||||||
@@ -37,7 +37,7 @@ export class GlobalEvent {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
recoverEffect(evt: MouseEvent) {
|
public recoverEffect(evt: MouseEvent) {
|
||||||
if (!this.cursor) return
|
if (!this.cursor) return
|
||||||
const cursorDom = this.cursor.getCursorDom()
|
const cursorDom = this.cursor.getCursorDom()
|
||||||
const agentDom = this.cursor.getAgentDom()
|
const agentDom = this.cursor.getAgentDom()
|
||||||
@@ -62,11 +62,11 @@ export class GlobalEvent {
|
|||||||
this.imageParticle.clearResizer()
|
this.imageParticle.clearResizer()
|
||||||
}
|
}
|
||||||
|
|
||||||
setDragState() {
|
public setDragState() {
|
||||||
this.canvasEvent.setIsAllowDrag(false)
|
this.canvasEvent.setIsAllowDrag(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
setRangeStyle() {
|
public setRangeStyle() {
|
||||||
this.range.setRangeStyle()
|
this.range.setRangeStyle()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user