From f52f05cb3c7e1717aa562c53420ed2e1bf271e05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Tue, 16 Aug 2022 18:34:52 +0800 Subject: [PATCH] feat:add date picker pure logic code --- src/editor/assets/css/date/datePicker.css | 7 + src/editor/assets/css/index.css | 1 + src/editor/core/draw/Draw.ts | 6 +- .../core/draw/particle/date/DateParticle.ts | 21 ++ .../core/draw/particle/date/DatePicker.ts | 223 ++++++++++++++++++ src/editor/core/event/CanvasEvent.ts | 8 + 6 files changed, 265 insertions(+), 1 deletion(-) create mode 100644 src/editor/assets/css/date/datePicker.css create mode 100644 src/editor/core/draw/particle/date/DatePicker.ts diff --git a/src/editor/assets/css/date/datePicker.css b/src/editor/assets/css/date/datePicker.css new file mode 100644 index 0000000..1917dac --- /dev/null +++ b/src/editor/assets/css/date/datePicker.css @@ -0,0 +1,7 @@ +.date-container { + display: none; +} + +.date-container.active { + display: block; +} \ No newline at end of file diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index eb68cf1..1720cf1 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -1,4 +1,5 @@ @import './control/select.css'; +@import './date/datePicker.css'; .inputarea { width: 0; diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 4aa098a..44613b1 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -132,7 +132,7 @@ export class Draw { this.waterMark = new Watermark(this) this.header = new Header(this) this.hyperlinkParticle = new HyperlinkParticle(this) - this.dateParticle = new DateParticle() + this.dateParticle = new DateParticle(this) this.separatorParticle = new SeparatorParticle() this.pageBreakParticle = new PageBreakParticle(this) this.superscriptParticle = new SuperscriptParticle() @@ -376,6 +376,10 @@ export class Draw { return this.hyperlinkParticle } + public getDateParticle(): DateParticle { + return this.dateParticle + } + public getControl(): Control { return this.control } diff --git a/src/editor/core/draw/particle/date/DateParticle.ts b/src/editor/core/draw/particle/date/DateParticle.ts index 98f0722..dadec21 100644 --- a/src/editor/core/draw/particle/date/DateParticle.ts +++ b/src/editor/core/draw/particle/date/DateParticle.ts @@ -1,7 +1,28 @@ +import { IElement, IElementPosition } from '../../../../interface/Element' import { IRowElement } from '../../../../interface/Row' +import { Draw } from '../../Draw' +import { DatePicker } from './DatePicker' export class DateParticle { + private datePicker: DatePicker + + constructor(draw: Draw) { + this.datePicker = new DatePicker({ + mountDom: draw.getContainer() + }) + } + + public clearDatePicker() { + this.datePicker.dispose() + } + + public renderDatePicker(element: IElement, position: IElementPosition) { + console.log('element: ', element) + console.log('position: ', position) + this.datePicker.render() + } + public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) { ctx.save() ctx.font = element.style diff --git a/src/editor/core/draw/particle/date/DatePicker.ts b/src/editor/core/draw/particle/date/DatePicker.ts new file mode 100644 index 0000000..8b9e78a --- /dev/null +++ b/src/editor/core/draw/particle/date/DatePicker.ts @@ -0,0 +1,223 @@ +export interface IDatePickerOption { + mountDom?: HTMLElement +} + +interface IDatePickerDom { + container: HTMLDivElement; + title: { + preYear: HTMLSpanElement; + preMonth: HTMLSpanElement; + now: HTMLSpanElement; + nextMonth: HTMLSpanElement; + nextYear: HTMLSpanElement; + }; + day: HTMLDivElement; + menu: { + time: HTMLButtonElement; + now: HTMLButtonElement; + submit: HTMLButtonElement; + }; +} + +export class DatePicker { + + private options: IDatePickerOption + private now: Date + private dom: IDatePickerDom + + constructor(options: IDatePickerOption = {}) { + this.options = { + mountDom: document.body, + ...options + } + this.now = new Date() + this.dom = this._createDom() + this._bindEvent() + } + + private _createDom(): IDatePickerDom { + const datePickerContainer = document.createElement('div') + datePickerContainer.classList.add('date-container') + // title-切换年月、年月显示 + const datePickerTitle = document.createElement('div') + datePickerTitle.classList.add('date-title') + const preYearTitle = document.createElement('span') + preYearTitle.classList.add('date-title__pre-year') + preYearTitle.innerText = `<<` + const preMonthTitle = document.createElement('span') + preMonthTitle.classList.add('date-title__pre-month') + preMonthTitle.innerText = `<` + const nowTitle = document.createElement('span') + nowTitle.classList.add('date-title__now') + const nextMonthTitle = document.createElement('span') + nextMonthTitle.classList.add('date-title__next-month') + nextMonthTitle.innerText = `>` + const nextYearTitle = document.createElement('span') + nextYearTitle.classList.add('date-title__next-year') + nextYearTitle.innerText = `>>` + datePickerTitle.append(preYearTitle) + datePickerTitle.append(preMonthTitle) + datePickerTitle.append(nowTitle) + datePickerTitle.append(nextMonthTitle) + datePickerTitle.append(nextYearTitle) + // week-星期显示 + const datePickerWeek = document.createElement('div') + datePickerWeek.classList.add('date-week') + const weekList = ['日', '一', '二', '三', '四', '五', '六'] + weekList.forEach(week => { + const weekDom = document.createElement('span') + weekDom.innerText = `${week}` + datePickerWeek.append(weekDom) + }) + // day-天数显示 + const datePickerDay = document.createElement('div') + datePickerDay.classList.add('date-day') + // menu-选择时间、现在、确定 + const datePickerMenu = document.createElement('div') + datePickerMenu.classList.add('date-menu') + const timeMenu = document.createElement('button') + timeMenu.classList.add('date-menu__time') + timeMenu.innerText = '时间' + const nowMenu = document.createElement('button') + nowMenu.classList.add('date-menu__now') + nowMenu.innerText = '此刻' + const submitMenu = document.createElement('button') + submitMenu.classList.add('date-menu__submit') + submitMenu.innerText = '确定' + datePickerMenu.append(timeMenu) + datePickerMenu.append(nowMenu) + datePickerMenu.append(submitMenu) + // 构建 + datePickerContainer.append(datePickerTitle) + datePickerContainer.append(datePickerWeek) + datePickerContainer.append(datePickerDay) + datePickerContainer.append(datePickerMenu) + this.options.mountDom!.append(datePickerContainer) + return { + container: datePickerContainer, + title: { + preYear: preMonthTitle, + preMonth: preMonthTitle, + now: nowTitle, + nextMonth: nextMonthTitle, + nextYear: nextYearTitle + }, + day: datePickerDay, + menu: { + time: timeMenu, + now: nowMenu, + submit: submitMenu + } + } + } + + private _bindEvent() { + this.dom.title.preYear.onclick = () => { + this._preYear() + } + this.dom.title.preMonth.onclick = () => { + this._preMonth() + } + this.dom.title.nextMonth.onclick = () => { + this._nextMonth() + } + this.dom.title.nextYear.onclick = () => { + this._nextYear() + } + this.dom.menu.time.onclick = () => { + this._now() + } + this.dom.menu.submit.onclick = () => { + this.dispose() + } + } + + private _setNow() { + this.now = new Date() + } + + private _update() { + // 当前年月日 + const year = this.now.getFullYear() + const month = this.now.getMonth() + 1 + const day = this.now.getDate() + this.dom.title.now.innerText = `${year}年 ${String(month).padStart(2, '0')}月` + // 日期补差 + const curDate = new Date(year, month, 0) // 当月日期 + const curDay = curDate.getDate() // 当月总天数 + let curWeek = new Date(year, month - 1, 1).getDay() // 当月第一天星期几 + if (curWeek === 0) { + curWeek = 7 + } + const preDay = new Date(year, month - 1, 0).getDate() // 上个月天数 + // 渲染上个月日期 + const preStartDay = preDay - curWeek + 1 + for (let i = preStartDay; i <= preDay; i++) { + const dayDom = document.createElement('div') + dayDom.classList.add('disable') + dayDom.innerText = `${i}` + this.dom.day.append(dayDom) + } + // 渲染当月日期 + for (let i = 1; i <= curDay; i++) { + const dayDom = document.createElement('div') + if (i === day) { + dayDom.classList.add('active') + } + dayDom.innerText = `${i}` + this.dom.day.append(dayDom) + } + // 渲染下月日期 + const nextEndDay = 6 * 7 - curWeek - curDay + for (let i = 1; i <= nextEndDay; i++) { + const dayDom = document.createElement('div') + dayDom.classList.add('disable') + dayDom.innerText = `${i}` + this.dom.day.append(dayDom) + } + } + + private _preMonth() { + this.now.setMonth(this.now.getMonth() - 1) + this._update() + } + + private _nextMonth() { + this.now.setMonth(this.now.getMonth() + 1) + this._update() + } + + private _preYear() { + this.now.setFullYear(this.now.getFullYear() - 1) + this._update() + } + + private _nextYear() { + this.now.setFullYear(this.now.getFullYear() + 1) + this._update() + } + + private _now() { + this.now = new Date() + this._update() + } + + private _toggleVisible(isVisible: boolean) { + if (isVisible) { + this.dom.container.classList.add('active') + } else { + this.dom.container.classList.remove('active') + } + } + + public render() { + this._setNow() + this._update() + this._toggleVisible(true) + } + + public dispose() { + this._toggleVisible(false) + } + +} \ No newline at end of file diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index bed2cae..3f8793e 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/src/editor/core/event/CanvasEvent.ts @@ -21,6 +21,7 @@ import { CheckboxControl } from '../draw/control/checkbox/CheckboxControl' import { splitText } from '../../utils' import { Previewer } from '../draw/particle/previewer/Previewer' import { DeepRequired } from '../../interface/Common' +import { DateParticle } from '../draw/particle/date/DateParticle' export class CanvasEvent { @@ -39,6 +40,7 @@ export class CanvasEvent { private previewer: Previewer private tableTool: TableTool private hyperlinkParticle: HyperlinkParticle + private dateParticle: DateParticle private listener: Listener private control: Control @@ -58,6 +60,7 @@ export class CanvasEvent { this.previewer = this.draw.getPreviewer() this.tableTool = this.draw.getTableTool() this.hyperlinkParticle = this.draw.getHyperlinkParticle() + this.dateParticle = this.draw.getDateParticle() this.listener = this.draw.getListener() this.control = this.draw.getControl() } @@ -284,6 +287,11 @@ export class CanvasEvent { if (curElement.type === ElementType.HYPERLINK) { this.hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]) } + // 日期控件 + this.dateParticle.clearDatePicker() + if (curElement.type === ElementType.DATE) { + this.dateParticle.renderDatePicker(curElement, positionList[curIndex]) + } } public mouseleave(evt: MouseEvent) {