diff --git a/cypress.json b/cypress.json index 022af78..2e178e6 100644 --- a/cypress.json +++ b/cypress.json @@ -1,5 +1,5 @@ { "video": false, - "viewportWidth": 1080, + "viewportWidth": 1366, "viewportHeight": 720 } \ No newline at end of file diff --git a/cypress/integration/menus/checkbox.spec.ts b/cypress/integration/menus/checkbox.spec.ts new file mode 100644 index 0000000..a475118 --- /dev/null +++ b/cypress/integration/menus/checkbox.spec.ts @@ -0,0 +1,37 @@ +import Editor, { ElementType } from '../../../src/editor' + +describe('菜单-复选框', () => { + + beforeEach(() => { + cy.visit('http://localhost:3000/canvas-editor/') + + cy.get('canvas').first().as('canvas').should('have.length', 1) + }) + + const type: ElementType = 'checkbox' + + it('代码块', () => { + cy.getEditor().then((editor: Editor) => { + editor.listener.saved = function (payload) { + const data = payload.data[0] + + expect(data.checkbox?.value).to.eq(true) + } + + editor.command.executeSelectAll() + + editor.command.executeBackspace() + + editor.command.executeInsertElementList([{ + type, + value: '', + checkbox: { + value: true + } + }]) + + cy.get('@canvas').type('{ctrl}s') + }) + }) + +}) diff --git a/index.html b/index.html index 01d078a..68a38c4 100644 --- a/index.html +++ b/index.html @@ -169,6 +169,9 @@ +
+ +
diff --git a/src/assets/images/checkbox.svg b/src/assets/images/checkbox.svg new file mode 100644 index 0000000..d522091 --- /dev/null +++ b/src/assets/images/checkbox.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 469a4fb..6b04f6a 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -37,6 +37,8 @@ import { Watermark } from './frame/Watermark' import { EditorMode } from '../../dataset/enum/Editor' import { Control } from './control/Control' import { zipElementList } from '../../utils/element' +import { CheckboxParticle } from './particle/CheckboxParticle' +import { DeepRequired } from '../../interface/Common' export class Draw { @@ -46,7 +48,7 @@ export class Draw { private ctxList: CanvasRenderingContext2D[] private pageNo: number private mode: EditorMode - private options: Required + private options: DeepRequired private position: Position private elementList: IElement[] private listener: Listener @@ -73,6 +75,7 @@ export class Draw { private pageBreakParticle: PageBreakParticle private superscriptParticle: SuperscriptParticle private subscriptParticle: SubscriptParticle + private checkboxParticle: CheckboxParticle private control: Control private rowList: IRow[] @@ -83,7 +86,7 @@ export class Draw { constructor( container: HTMLDivElement, - options: Required, + options: DeepRequired, elementList: IElement[], listener: Listener ) { @@ -120,6 +123,7 @@ export class Draw { this.pageBreakParticle = new PageBreakParticle(this) this.superscriptParticle = new SuperscriptParticle() this.subscriptParticle = new SubscriptParticle() + this.checkboxParticle = new CheckboxParticle(this) this.control = new Control(this) new ScrollObserver(this) @@ -249,7 +253,7 @@ export class Draw { return this.ctxList[this.pageNo] } - public getOptions(): Required { + public getOptions(): DeepRequired { return this.options } @@ -563,6 +567,12 @@ export class Draw { element.width = innerWidth metrics.width = innerWidth metrics.height = this.options.defaultSize + } else if (element.type === ElementType.CHECKBOX) { + const { width, height, gap } = this.options.checkbox + const elementWidth = (width + gap * 2) * scale + element.width = elementWidth + metrics.width = elementWidth + metrics.height = height * scale } else { // 设置上下标真实字体尺寸 const size = element.size || this.options.defaultSize @@ -697,6 +707,9 @@ export class Draw { if (this.mode !== EditorMode.CLEAN) { this.pageBreakParticle.render(ctx, element, x, y) } + } else if (element.type === ElementType.CHECKBOX) { + this.textParticle.complete() + this.checkboxParticle.render(ctx, element, x, y + offsetY) } else { this.textParticle.record(ctx, element, x, y + offsetY) } diff --git a/src/editor/core/draw/particle/CheckboxParticle.ts b/src/editor/core/draw/particle/CheckboxParticle.ts new file mode 100644 index 0000000..85d1704 --- /dev/null +++ b/src/editor/core/draw/particle/CheckboxParticle.ts @@ -0,0 +1,54 @@ +import { DeepRequired } from '../../../interface/Common' +import { IEditorOption } from '../../../interface/Editor' +import { IRowElement } from '../../../interface/Row' +import { Draw } from '../Draw' + +export class CheckboxParticle { + + private options: DeepRequired + + constructor(draw: Draw) { + this.options = draw.getOptions() + } + + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { + 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 * scale + const height = metrics.height + ctx.save() + ctx.beginPath() + ctx.translate(0.5, 0.5) + // 绘制勾选状态 + if (checkbox?.value) { + // 边框 + 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() + ctx.restore() + } + +} \ No newline at end of file diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 49ec119..13b672d 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(curIndex, curIndex) + // 复选框 + 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..8fd02b5 100644 --- a/src/editor/core/position/Position.ts +++ b/src/editor/core/position/Position.ts @@ -94,9 +94,11 @@ export class Position { }) if (~tablePosition.index) { const { index: tdValueIndex } = tablePosition + const tdValueElement = td.value[tdValueIndex] return { index, - isControl: td.value[tdValueIndex].type === ElementType.CONTROL, + isCheckbox: tdValueElement.type === ElementType.CHECKBOX, + isControl: tdValueElement.type === ElementType.CONTROL, isImage: tablePosition.isImage, isDirectHit: tablePosition.isDirectHit, isTable: true, @@ -119,6 +121,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 new file mode 100644 index 0000000..3c478bc --- /dev/null +++ b/src/editor/dataset/constant/Checkbox.ts @@ -0,0 +1,10 @@ +import { ICheckboxOption } from '../../interface/Checkbox' + +export const defaultCheckboxOption: Readonly> = { + width: 14, + height: 14, + gap: 5, + lineWidth: 1, + fillStyle: '#5175f4', + fontStyle: '#ffffff' +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 3edd78f..0bafd61 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -46,7 +46,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array = [ 'url', 'colgroup', 'valueList', - 'control' + 'control', + 'checkbox' ] export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [ diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index 07c379e..e1e6c8b 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/src/editor/dataset/enum/Element.ts @@ -7,5 +7,6 @@ export enum ElementType { SUBSCRIPT = 'subscript', SEPARATOR = 'separator', PAGE_BREAK = 'pageBreak', - CONTROL = 'control' + CONTROL = 'control', + CHECKBOX = 'checkbox' } \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index b4a5f34..236c07a 100644 --- a/src/editor/index.ts +++ b/src/editor/index.ts @@ -22,6 +22,9 @@ import { defaultWatermarkOption } from './dataset/constant/Watermark' import { ControlType } from './dataset/enum/Control' import { defaultControlOption } from './dataset/constant/Control' import { IControlOption } from './interface/Control' +import { ICheckboxOption } from './interface/Checkbox' +import { defaultCheckboxOption } from './dataset/constant/Checkbox' +import { DeepRequired } from './interface/Common' export default class Editor { @@ -42,7 +45,12 @@ export default class Editor { ...defaultControlOption, ...options.control } - const editorOptions: Required = { + const checkboxOptions: Required = { + ...defaultCheckboxOption, + ...options.checkbox + } + + const editorOptions: DeepRequired = { defaultMode: EditorMode.EDIT, defaultType: 'TEXT', defaultFont: 'Yahei', @@ -76,7 +84,8 @@ export default class Editor { ...options, header: headerOptions, watermark: waterMarkOptions, - control: controlOptions + control: controlOptions, + checkbox: checkboxOptions } formatElementList(elementList, { editorOptions diff --git a/src/editor/interface/Checkbox.ts b/src/editor/interface/Checkbox.ts new file mode 100644 index 0000000..055eedf --- /dev/null +++ b/src/editor/interface/Checkbox.ts @@ -0,0 +1,13 @@ +export interface ICheckbox { + disabled?: boolean; + value: boolean | null; +} + +export interface ICheckboxOption { + width?: number; + height?: number; + gap?: number; + lineWidth?: number; + fillStyle?: string; + fontStyle?: string; +} \ No newline at end of file diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 055914b..c8d929c 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -1,5 +1,6 @@ import { IElement } from '..' import { EditorMode } from '../dataset/enum/Editor' +import { ICheckboxOption } from './Checkbox' import { IControlOption } from './Control' import { IHeader } from './Header' import { IWatermark } from './Watermark' @@ -38,6 +39,7 @@ export interface IEditorOption { header?: IHeader; watermark?: IWatermark; control?: IControlOption; + checkbox?: ICheckboxOption; } export interface IEditorResult { diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index bd2d4cd..c914eb1 100644 --- a/src/editor/interface/Element.ts +++ b/src/editor/interface/Element.ts @@ -1,6 +1,7 @@ import { ControlComponent } from '../dataset/enum/Control' import { ElementType } from '../dataset/enum/Element' import { RowFlex } from '../dataset/enum/Row' +import { ICheckbox } from './Checkbox' import { IControl } from './Control' import { IColgroup } from './table/Colgroup' import { ITr } from './table/Tr' @@ -59,6 +60,10 @@ export interface IControlElement { controlComponent?: ControlComponent; } +export interface ICheckboxElement { + checkbox?: ICheckbox; +} + export type IElement = IElementBasic & IElementStyle & ITable @@ -66,6 +71,7 @@ export type IElement = IElementBasic & ISuperscriptSubscript & ISeparator & IControlElement + & ICheckboxElement export interface IElementMetrics { width: number; 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; diff --git a/src/main.ts b/src/main.ts index a13c38f..6e28da9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -492,6 +492,15 @@ window.onload = function () { } } + const checkboxDom = document.querySelector('.menu-item__checkbox')! + checkboxDom.onclick = function () { + console.log('checkbox') + instance.command.executeInsertElementList([{ + type: ElementType.CHECKBOX, + value: '' + }]) + } + // 5. | 搜索&替换 | 打印 | const searchCollapseDom = document.querySelector('.menu-item__search__collapse')! const searchInputDom = document.querySelector('.menu-item__search__collapse__search input')! @@ -679,7 +688,8 @@ window.onload = function () { 'separator', 'codeblock', 'page-break', - 'control' + 'control', + 'checkbox' ] // 菜单操作权限 disableMenusInControlContext.forEach(menu => { diff --git a/src/mock.ts b/src/mock.ts index 16627b2..8858643 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -246,6 +246,26 @@ elementList.push({ }] }) +// 模拟checkbox +elementList.push(...[{ + value: '是否同意以上内容：' +}, { + type: ElementType.CHECKBOX, + checkbox: { + value: true + }, + value: '' +}, { + value: '同意' +}, { + type: ElementType.CHECKBOX, + value: '' +}, { + value: '否定' +}, { + value: '\n' +}]) + // 模拟结尾文本 elementList.push(...[{ value: 'E', diff --git a/src/style.css b/src/style.css index 161cdf7..a268742 100644 --- a/src/style.css +++ b/src/style.css @@ -439,6 +439,10 @@ ul { background-image: url('./assets/images/control.svg'); } +.menu-item__checkbox i { + background-image: url('./assets/images/checkbox.svg'); +} + .menu-item .menu-item__control .options { width: 55px; }