From 24f46e1b35f8a259674f8d66204bce369daac90a Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 13 Apr 2022 21:43:47 +0800 Subject: [PATCH] feat:add checkbox interactive --- src/editor/core/draw/Draw.ts | 4 +-- .../core/draw/particle/CheckboxParticle.ts | 31 ++++++++++++----- src/editor/core/event/CanvasEvent.ts | 34 ++++++++++++------- src/editor/core/position/Position.ts | 7 ++++ src/editor/dataset/constant/Checkbox.ts | 4 ++- src/editor/interface/Checkbox.ts | 2 ++ src/editor/interface/Position.ts | 1 + 7 files changed, 59 insertions(+), 24 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 1539e99..6b04f6a 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -569,10 +569,10 @@ export class Draw { metrics.height = this.options.defaultSize } else if (element.type === ElementType.CHECKBOX) { const { width, height, gap } = this.options.checkbox - const elementWidth = width + gap * 2 + const elementWidth = (width + gap * 2) * scale element.width = elementWidth metrics.width = elementWidth - metrics.height = height + metrics.height = height * scale } else { // 设置上下标真实字体尺寸 const size = element.size || this.options.defaultSize diff --git a/src/editor/core/draw/particle/CheckboxParticle.ts b/src/editor/core/draw/particle/CheckboxParticle.ts index d6d6ba1..85d1704 100644 --- a/src/editor/core/draw/particle/CheckboxParticle.ts +++ b/src/editor/core/draw/particle/CheckboxParticle.ts @@ -12,24 +12,39 @@ export class CheckboxParticle { } public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { - const { checkbox: { gap, lineWidth } } = this.options + const { checkbox: { gap, lineWidth, fillStyle, fontStyle }, scale } = this.options const { metrics, checkbox } = element // left top 四舍五入避免1像素问题 const left = Math.round(x + gap) const top = Math.round(y - metrics.height + lineWidth) - const width = metrics.width - gap * 2 + const width = metrics.width - gap * 2 * scale const height = metrics.height ctx.save() ctx.beginPath() ctx.translate(0.5, 0.5) - ctx.lineWidth = lineWidth - ctx.rect(left, top, width, height) - ctx.stroke() // 绘制勾选状态 if (checkbox?.value) { - ctx.moveTo(left + 2, top + 7) - ctx.lineTo(left + 6, top + 12) - ctx.lineTo(left + 12, top + 3) + // 边框 + ctx.lineWidth = lineWidth + ctx.strokeStyle = fillStyle + ctx.rect(left, top, width, height) + ctx.stroke() + // 背景色 + ctx.beginPath() + ctx.fillStyle = fillStyle + ctx.fillRect(left, top, width, height) + // 勾选对号 + ctx.beginPath() + ctx.strokeStyle = fontStyle + ctx.lineWidth = lineWidth * 2 + ctx.moveTo(left + 2 * scale, top + 7 * scale) + ctx.lineTo(left + 7 * scale, top + 11 * scale) + ctx.moveTo(left + 6.5 * scale, top + 11 * scale) + ctx.lineTo(left + 12 * scale, top + 3 * scale) + ctx.stroke() + } else { + ctx.lineWidth = lineWidth + ctx.rect(left, top, width, height) ctx.stroke() } ctx.closePath() diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 49ec119..30c511e 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -188,6 +188,7 @@ export class CanvasEvent { const { index, isDirectHit, + isCheckbox, isControl, isImage, isTable, @@ -214,27 +215,34 @@ export class CanvasEvent { ...positionResult, index: isTable ? tdValueIndex! : index } + const elementList = this.draw.getElementList() + const positionList = this.position.getPositionList() + const curIndex = isTable ? tdValueIndex! : index + const curElement = elementList[curIndex] // 绘制 - const isDirectHitImage = isDirectHit && isImage + const isDirectHitImage = !!(isDirectHit && isImage) + const isDirectHitCheckbox = !!(isDirectHit && isCheckbox) if (~index) { - let curIndex = index - if (isTable) { - this.range.setRange(tdValueIndex!, tdValueIndex!) - curIndex = tdValueIndex! - } else { - this.range.setRange(index, index) + this.range.setRange(index, index) + // 复选框 + const isSetCheckbox = isDirectHitCheckbox && !isReadonly + if (isSetCheckbox) { + const { checkbox } = curElement + if (checkbox) { + checkbox.value = !checkbox.value + } else { + curElement.checkbox = { + value: true + } + } } this.draw.render({ curIndex, - isSubmitHistory: false, - isSetCursor: !isDirectHitImage, + isSubmitHistory: isSetCheckbox, + isSetCursor: !isDirectHitImage && !isDirectHitCheckbox, isComputeRowList: false }) } - const elementList = this.draw.getElementList() - const positionList = this.position.getPositionList() - const curIndex = isTable ? tdValueIndex! : index - const curElement = elementList[curIndex] // 图片尺寸拖拽组件 this.imageParticle.clearResizer() if (isDirectHitImage && !isReadonly) { diff --git a/src/editor/core/position/Position.ts b/src/editor/core/position/Position.ts index cccacf9..b0fb663 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -119,6 +119,13 @@ export class Position { isImage: true } } + if (element.type === ElementType.CHECKBOX) { + return { + index: curPositionIndex, + isDirectHit: true, + isCheckbox: true + } + } // 判断是否在文字中间前后 if (elementList[index].value !== ZERO) { const valueWidth = rightTop[0] - leftTop[0] diff --git a/src/editor/dataset/constant/Checkbox.ts b/src/editor/dataset/constant/Checkbox.ts index 52e223b..3c478bc 100644 --- a/src/editor/dataset/constant/Checkbox.ts +++ b/src/editor/dataset/constant/Checkbox.ts @@ -4,5 +4,7 @@ export const defaultCheckboxOption: Readonly> = { width: 14, height: 14, gap: 5, - lineWidth: 1 + lineWidth: 1, + fillStyle: '#5175f4', + fontStyle: '#ffffff' } \ No newline at end of file diff --git a/src/editor/interface/Checkbox.ts b/src/editor/interface/Checkbox.ts index b07c50f..055eedf 100644 --- a/src/editor/interface/Checkbox.ts +++ b/src/editor/interface/Checkbox.ts @@ -8,4 +8,6 @@ export interface ICheckboxOption { height?: number; gap?: number; lineWidth?: number; + fillStyle?: string; + fontStyle?: string; } \ No newline at end of file diff --git a/src/editor/interface/Position.ts b/src/editor/interface/Position.ts index 4e95072..1d15f1d 100644 --- a/src/editor/interface/Position.ts +++ b/src/editor/interface/Position.ts @@ -4,6 +4,7 @@ import { ITd } from './table/Td' export interface ICurrentPosition { index: number; + isCheckbox?: boolean; isControl?: boolean; isImage?: boolean; isTable?: boolean;