Hufe
@@ -0,0 +1 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M7.5 14.154a5.654 5.654 0 100-11.308 5.654 5.654 0 000 11.308zm0 .846a6.5 6.5 0 110-13 6.5 6.5 0 010 13z" fill-rule="nonzero"/><path d="M8 8h4v1H7V4h1v4z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
@@ -0,0 +1,232 @@
|
||||
.date-container {
|
||||
display: none;
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
color: #606266;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
user-select: none;
|
||||
border: 1px solid #e4e7ed;
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.date-container.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.date-wrap.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.date-title>span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.date-title>span:not(.date-title__now) {
|
||||
font-family: cursive;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-title>span:not(.date-title__now):hover {
|
||||
color: #5175F4;
|
||||
}
|
||||
|
||||
.date-title .date-title__pre-year {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.date-title .date-title__pre-month {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.date-title .date-title__now {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.date-title .date-title__next-year {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.date-title .date-title__next-month {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.date-week {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.date-week>span {
|
||||
list-style: none;
|
||||
width: calc(100%/7);
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.date-day {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.date-day>div {
|
||||
width: calc(100%/7);
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.date-day>div:hover {
|
||||
color: #5175F4;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.date-day>div.active {
|
||||
color: #5175F4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.date-day>div.disable {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.date-day>div.select {
|
||||
color: #fff;
|
||||
background-color: #5175F4;
|
||||
}
|
||||
|
||||
.time-wrap {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
height: 286px;
|
||||
}
|
||||
|
||||
.time-wrap ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.time-wrap.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.time-wrap li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.time-wrap>li {
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-wrap>li>span {
|
||||
transform: translateY(-5px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.time-wrap>li>ol {
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e2e2e2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-wrap>li:first-child>ol {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.time-wrap>li:last-child>ol {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.time-wrap>li>ol>li {
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.time-wrap>li>ol>li:hover {
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.time-wrap>li>ol>li.active {
|
||||
color: #ffffff;
|
||||
background: #5175F4;
|
||||
}
|
||||
|
||||
.date-menu {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.date-menu button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: .1s;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
padding: 7px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.date-menu button:hover {
|
||||
color: #5175F4;
|
||||
border-color: #5175F4;
|
||||
}
|
||||
|
||||
.date-menu button.date-menu__time {
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.date-menu button.date-menu__time:hover {
|
||||
color: #5175F4;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@import './control/select.css';
|
||||
@import './date/datePicker.css';
|
||||
|
||||
.inputarea {
|
||||
width: 0;
|
||||
|
||||
@@ -44,6 +44,7 @@ import { ControlComponent } from '../../dataset/enum/Control'
|
||||
import { formatElementList } from '../../utils/element'
|
||||
import { WorkerManager } from '../worker/WorkerManager'
|
||||
import { Previewer } from './particle/previewer/Previewer'
|
||||
import { DateParticle } from './particle/date/DateParticle'
|
||||
|
||||
export class Draw {
|
||||
|
||||
@@ -78,6 +79,7 @@ export class Draw {
|
||||
private waterMark: Watermark
|
||||
private header: Header
|
||||
private hyperlinkParticle: HyperlinkParticle
|
||||
private dateParticle: DateParticle
|
||||
private separatorParticle: SeparatorParticle
|
||||
private pageBreakParticle: PageBreakParticle
|
||||
private superscriptParticle: SuperscriptParticle
|
||||
@@ -130,6 +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)
|
||||
this.separatorParticle = new SeparatorParticle()
|
||||
this.pageBreakParticle = new PageBreakParticle(this)
|
||||
this.superscriptParticle = new SuperscriptParticle()
|
||||
@@ -373,6 +376,10 @@ export class Draw {
|
||||
return this.hyperlinkParticle
|
||||
}
|
||||
|
||||
public getDateParticle(): DateParticle {
|
||||
return this.dateParticle
|
||||
}
|
||||
|
||||
public getControl(): Control {
|
||||
return this.control
|
||||
}
|
||||
@@ -801,6 +808,9 @@ export class Draw {
|
||||
} else if (element.type === ElementType.HYPERLINK) {
|
||||
this.textParticle.complete()
|
||||
this.hyperlinkParticle.render(ctx, element, x, y + offsetY)
|
||||
} else if (element.type === ElementType.DATE) {
|
||||
this.textParticle.complete()
|
||||
this.dateParticle.render(ctx, element, x, y + offsetY)
|
||||
} else if (element.type === ElementType.SUPERSCRIPT) {
|
||||
this.textParticle.complete()
|
||||
this.superscriptParticle.render(ctx, element, x, y + offsetY)
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
import { ElementType } from '../../../../dataset/enum/Element'
|
||||
import { IElement, IElementPosition } from '../../../../interface/Element'
|
||||
import { IRowElement } from '../../../../interface/Row'
|
||||
import { RangeManager } from '../../../range/RangeManager'
|
||||
import { Draw } from '../../Draw'
|
||||
import { DatePicker } from './DatePicker'
|
||||
|
||||
export class DateParticle {
|
||||
|
||||
private draw: Draw
|
||||
private range: RangeManager
|
||||
private datePicker: DatePicker
|
||||
|
||||
constructor(draw: Draw) {
|
||||
this.draw = draw
|
||||
this.range = draw.getRange()
|
||||
this.datePicker = new DatePicker({
|
||||
mountDom: draw.getContainer(),
|
||||
onSubmit: this._setValue.bind(this)
|
||||
})
|
||||
}
|
||||
|
||||
private _setValue(date: string) {
|
||||
if (!date) return
|
||||
const range = this.getDateElementRange()
|
||||
if (!range) return
|
||||
const [leftIndex, rightIndex] = range
|
||||
const elementList = this.draw.getElementList()
|
||||
const startElement = elementList[leftIndex + 1]
|
||||
// 删除旧时间
|
||||
elementList.splice(leftIndex + 1, rightIndex - leftIndex)
|
||||
this.range.setRange(leftIndex, leftIndex)
|
||||
// 插入新时间
|
||||
this.draw.insertElementList([{
|
||||
type: ElementType.DATE,
|
||||
value: '',
|
||||
dateFormat: startElement.dateFormat,
|
||||
valueList: [{
|
||||
value: date
|
||||
}]
|
||||
}])
|
||||
}
|
||||
|
||||
public getDateElementRange(): [number, number] | null {
|
||||
let leftIndex = -1
|
||||
let rightIndex = -1
|
||||
const { startIndex, endIndex } = this.range.getRange()
|
||||
if (!~startIndex && !~endIndex) return null
|
||||
const elementList = this.draw.getElementList()
|
||||
const startElement = elementList[startIndex]
|
||||
if (startElement.type !== ElementType.DATE) return null
|
||||
// 向左查找
|
||||
let preIndex = startIndex
|
||||
while (preIndex > 0) {
|
||||
const preElement = elementList[preIndex]
|
||||
if (preElement.dateId !== startElement.dateId) {
|
||||
leftIndex = preIndex
|
||||
break
|
||||
}
|
||||
preIndex--
|
||||
}
|
||||
// 向右查找
|
||||
let nextIndex = startIndex + 1
|
||||
while (nextIndex < elementList.length) {
|
||||
const nextElement = elementList[nextIndex]
|
||||
if (nextElement.dateId !== startElement.dateId) {
|
||||
rightIndex = nextIndex - 1
|
||||
break
|
||||
}
|
||||
nextIndex++
|
||||
}
|
||||
// 控件在最后
|
||||
if (nextIndex === elementList.length) {
|
||||
rightIndex = nextIndex - 1
|
||||
}
|
||||
if (!~leftIndex || !~rightIndex) return null
|
||||
return [leftIndex, rightIndex]
|
||||
}
|
||||
|
||||
public clearDatePicker() {
|
||||
this.datePicker.dispose()
|
||||
}
|
||||
|
||||
public renderDatePicker(element: IElement, position: IElementPosition) {
|
||||
const height = this.draw.getHeight()
|
||||
const pageGap = this.draw.getPageGap()
|
||||
const startTop = this.draw.getPageNo() * (height + pageGap)
|
||||
const elementList = this.draw.getElementList()
|
||||
const range = this.getDateElementRange()
|
||||
const value = range
|
||||
? elementList.slice(range[0] + 1, range[1] + 1).map(el => el.value).join('')
|
||||
: ''
|
||||
this.datePicker.render({
|
||||
value,
|
||||
element,
|
||||
position,
|
||||
startTop
|
||||
})
|
||||
}
|
||||
|
||||
public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) {
|
||||
ctx.save()
|
||||
ctx.font = element.style
|
||||
if (element.color) {
|
||||
ctx.fillStyle = element.color
|
||||
}
|
||||
ctx.fillText(element.value, x, y)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,481 @@
|
||||
import { IElement, IElementPosition } from '../../../../interface/Element'
|
||||
|
||||
export interface IDatePickerOption {
|
||||
mountDom?: HTMLElement;
|
||||
onSubmit?: (date: string) => any;
|
||||
}
|
||||
|
||||
interface IDatePickerDom {
|
||||
container: HTMLDivElement;
|
||||
dateWrap: HTMLDivElement;
|
||||
timeWrap: HTMLUListElement;
|
||||
title: {
|
||||
preYear: HTMLSpanElement;
|
||||
preMonth: HTMLSpanElement;
|
||||
now: HTMLSpanElement;
|
||||
nextMonth: HTMLSpanElement;
|
||||
nextYear: HTMLSpanElement;
|
||||
};
|
||||
day: HTMLDivElement;
|
||||
time: {
|
||||
hour: HTMLOListElement;
|
||||
minute: HTMLOListElement;
|
||||
second: HTMLOListElement;
|
||||
};
|
||||
menu: {
|
||||
time: HTMLButtonElement;
|
||||
now: HTMLButtonElement;
|
||||
submit: HTMLButtonElement;
|
||||
};
|
||||
}
|
||||
|
||||
interface IRenderOption {
|
||||
value: string;
|
||||
element: IElement;
|
||||
position: IElementPosition;
|
||||
startTop?: number;
|
||||
}
|
||||
|
||||
export class DatePicker {
|
||||
|
||||
private options: IDatePickerOption
|
||||
private now: Date
|
||||
private dom: IDatePickerDom
|
||||
private renderOptions: IRenderOption | null
|
||||
private isDatePicker: boolean
|
||||
private pickDate: Date | null
|
||||
|
||||
constructor(options: IDatePickerOption = {}) {
|
||||
this.options = {
|
||||
mountDom: document.body,
|
||||
...options
|
||||
}
|
||||
this.now = new Date()
|
||||
this.dom = this._createDom()
|
||||
this.renderOptions = null
|
||||
this.isDatePicker = true
|
||||
this.pickDate = null
|
||||
this._bindEvent()
|
||||
}
|
||||
|
||||
private _createDom(): IDatePickerDom {
|
||||
const datePickerContainer = document.createElement('div')
|
||||
datePickerContainer.classList.add('date-container')
|
||||
// title-切换年月、年月显示
|
||||
const dateWrap = document.createElement('div')
|
||||
dateWrap.classList.add('date-wrap')
|
||||
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')
|
||||
// 日期内容构建
|
||||
dateWrap.append(datePickerTitle)
|
||||
dateWrap.append(datePickerWeek)
|
||||
dateWrap.append(datePickerDay)
|
||||
// time-时间选择
|
||||
const timeWrap = document.createElement('ul')
|
||||
timeWrap.classList.add('time-wrap')
|
||||
let hourTime: HTMLOListElement
|
||||
let minuteTime: HTMLOListElement
|
||||
let secondTime: HTMLOListElement
|
||||
const timeList = ['时', '分', '秒']
|
||||
timeList.forEach((t, i) => {
|
||||
const li = document.createElement('li')
|
||||
const timeText = document.createElement('span')
|
||||
timeText.innerText = t
|
||||
li.append(timeText)
|
||||
const ol = document.createElement('ol')
|
||||
const isHour = i === 0
|
||||
const isMinute = i === 1
|
||||
const endIndex = isHour ? 24 : 60
|
||||
for (let i = 0; i < endIndex; i++) {
|
||||
const time = document.createElement('li')
|
||||
time.innerText = `${String(i).padStart(2, '0')}`
|
||||
time.setAttribute('data-id', `${i}`)
|
||||
ol.append(time)
|
||||
}
|
||||
if (isHour) {
|
||||
hourTime = ol
|
||||
} else if (isMinute) {
|
||||
minuteTime = ol
|
||||
} else {
|
||||
secondTime = ol
|
||||
}
|
||||
li.append(ol)
|
||||
timeWrap.append(li)
|
||||
})
|
||||
// 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(dateWrap)
|
||||
datePickerContainer.append(timeWrap)
|
||||
datePickerContainer.append(datePickerMenu)
|
||||
this.options.mountDom!.append(datePickerContainer)
|
||||
return {
|
||||
container: datePickerContainer,
|
||||
dateWrap,
|
||||
timeWrap,
|
||||
title: {
|
||||
preYear: preYearTitle,
|
||||
preMonth: preMonthTitle,
|
||||
now: nowTitle,
|
||||
nextMonth: nextMonthTitle,
|
||||
nextYear: nextYearTitle
|
||||
},
|
||||
day: datePickerDay,
|
||||
time: {
|
||||
hour: hourTime!,
|
||||
minute: minuteTime!,
|
||||
second: secondTime!
|
||||
},
|
||||
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.isDatePicker = !this.isDatePicker
|
||||
this._toggleDateTimePicker()
|
||||
}
|
||||
this.dom.menu.now.onclick = () => {
|
||||
this._now()
|
||||
this._submit()
|
||||
}
|
||||
this.dom.menu.submit.onclick = () => {
|
||||
this.dispose()
|
||||
this._submit()
|
||||
}
|
||||
this.dom.time.hour.onclick = (evt) => {
|
||||
if (!this.pickDate) return
|
||||
const li = <HTMLLIElement>evt.target
|
||||
const id = li.dataset.id
|
||||
if (!id) return
|
||||
this.pickDate.setHours(Number(id))
|
||||
this._setTimePick(false)
|
||||
}
|
||||
this.dom.time.minute.onclick = (evt) => {
|
||||
if (!this.pickDate) return
|
||||
const li = <HTMLLIElement>evt.target
|
||||
const id = li.dataset.id
|
||||
if (!id) return
|
||||
this.pickDate.setMinutes(Number(id))
|
||||
this._setTimePick(false)
|
||||
}
|
||||
this.dom.time.second.onclick = (evt) => {
|
||||
if (!this.pickDate) return
|
||||
const li = <HTMLLIElement>evt.target
|
||||
const id = li.dataset.id
|
||||
if (!id) return
|
||||
this.pickDate.setSeconds(Number(id))
|
||||
this._setTimePick(false)
|
||||
}
|
||||
}
|
||||
|
||||
private _setPosition() {
|
||||
if (!this.renderOptions) return
|
||||
const {
|
||||
position: {
|
||||
coordinate: {
|
||||
leftTop: [left, top]
|
||||
},
|
||||
lineHeight
|
||||
},
|
||||
startTop
|
||||
} = this.renderOptions
|
||||
// 位置
|
||||
this.dom.container.style.left = `${left}px`
|
||||
this.dom.container.style.top = `${top + (startTop || 0) + lineHeight}px`
|
||||
}
|
||||
|
||||
public isInvalidDate(value: Date): boolean {
|
||||
return value.toDateString() === 'Invalid Date'
|
||||
}
|
||||
|
||||
private _setValue() {
|
||||
const value = this.renderOptions?.value
|
||||
if (value) {
|
||||
const setDate = new Date(value)
|
||||
this.now = this.isInvalidDate(setDate) ? new Date() : setDate
|
||||
} else {
|
||||
this.now = new Date()
|
||||
}
|
||||
this.pickDate = new Date(this.now)
|
||||
}
|
||||
|
||||
private _update() {
|
||||
// 本地年月日
|
||||
const localDate = new Date()
|
||||
const localYear = localDate.getFullYear()
|
||||
const localMonth = localDate.getMonth() + 1
|
||||
const localDay = localDate.getDate()
|
||||
// 选择年月日
|
||||
let pickYear: number | null = null
|
||||
let pickMonth: number | null = null
|
||||
let pickDay: number | null = null
|
||||
if (this.pickDate) {
|
||||
pickYear = this.pickDate.getFullYear()
|
||||
pickMonth = this.pickDate.getMonth() + 1
|
||||
pickDay = this.pickDate.getDate()
|
||||
}
|
||||
// 当前年月日
|
||||
const year = this.now.getFullYear()
|
||||
const month = this.now.getMonth() + 1
|
||||
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() // 上个月天数
|
||||
this.dom.day.innerHTML = ''
|
||||
// 渲染上个月日期
|
||||
const preStartDay = preDay - curWeek + 1
|
||||
for (let i = preStartDay; i <= preDay; i++) {
|
||||
const dayDom = document.createElement('div')
|
||||
dayDom.classList.add('disable')
|
||||
dayDom.innerText = `${i}`
|
||||
dayDom.onclick = () => {
|
||||
const newMonth = month - 2
|
||||
this.now = new Date(year, newMonth, i)
|
||||
this._setDatePick(year, newMonth, i)
|
||||
}
|
||||
this.dom.day.append(dayDom)
|
||||
}
|
||||
// 渲染当月日期
|
||||
for (let i = 1; i <= curDay; i++) {
|
||||
const dayDom = document.createElement('div')
|
||||
if (localYear === year && localMonth === month && localDay === i) {
|
||||
dayDom.classList.add('active')
|
||||
}
|
||||
if (this.pickDate && pickYear === year && pickMonth === month && pickDay === i) {
|
||||
dayDom.classList.add('select')
|
||||
}
|
||||
dayDom.innerText = `${i}`
|
||||
dayDom.onclick = (evt) => {
|
||||
const newMonth = month - 1
|
||||
this.now = new Date(year, newMonth, i)
|
||||
this._setDatePick(year, newMonth, i)
|
||||
evt.stopPropagation()
|
||||
}
|
||||
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}`
|
||||
dayDom.onclick = () => {
|
||||
this.now = new Date(year, month, i)
|
||||
this._setDatePick(year, month, i)
|
||||
}
|
||||
this.dom.day.append(dayDom)
|
||||
}
|
||||
}
|
||||
|
||||
private _toggleDateTimePicker() {
|
||||
if (this.isDatePicker) {
|
||||
this.dom.dateWrap.classList.add('active')
|
||||
this.dom.timeWrap.classList.remove('active')
|
||||
this.dom.menu.time.innerText = `时间选择`
|
||||
} else {
|
||||
this.dom.dateWrap.classList.remove('active')
|
||||
this.dom.timeWrap.classList.add('active')
|
||||
this.dom.menu.time.innerText = `返回日期`
|
||||
// 设置时分秒选择
|
||||
this._setTimePick()
|
||||
}
|
||||
}
|
||||
|
||||
private _setDatePick(year: number, month: number, day: number) {
|
||||
this.now = new Date(year, month, day)
|
||||
this.pickDate?.setFullYear(year)
|
||||
this.pickDate?.setMonth(month)
|
||||
this.pickDate?.setDate(day)
|
||||
this._update()
|
||||
}
|
||||
|
||||
private _setTimePick(isIntoView = true) {
|
||||
const hour = this.pickDate?.getHours() || 0
|
||||
const minute = this.pickDate?.getMinutes() || 0
|
||||
const second = this.pickDate?.getSeconds() || 0
|
||||
const { hour: hourDom, minute: minuteDom, second: secondDom } = this.dom.time
|
||||
const timeDomList = [hourDom, minuteDom, secondDom]
|
||||
// 清空
|
||||
timeDomList.forEach(timeDom => {
|
||||
timeDom.querySelectorAll('li')
|
||||
.forEach(li => li.classList.remove('active'))
|
||||
})
|
||||
const pickList: [HTMLOListElement, number][] = [[hourDom, hour], [minuteDom, minute], [secondDom, second]]
|
||||
pickList.forEach(([dom, time]) => {
|
||||
const pickDom = dom.querySelector<HTMLLIElement>(`[data-id='${time}']`)!
|
||||
pickDom.classList.add('active')
|
||||
if (isIntoView) {
|
||||
this._scrollIntoView(dom, pickDom)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private _scrollIntoView(container: HTMLElement, selected: HTMLElement) {
|
||||
if (!selected) {
|
||||
container.scrollTop = 0
|
||||
return
|
||||
}
|
||||
const offsetParents: HTMLElement[] = []
|
||||
let pointer = <HTMLElement>selected.offsetParent
|
||||
while (pointer && container !== pointer && container.contains(pointer)) {
|
||||
offsetParents.push(pointer)
|
||||
pointer = <HTMLElement>pointer.offsetParent
|
||||
}
|
||||
const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0)
|
||||
const bottom = top + selected.offsetHeight
|
||||
const viewRectTop = container.scrollTop
|
||||
const viewRectBottom = viewRectTop + container.clientHeight
|
||||
if (top < viewRectTop) {
|
||||
container.scrollTop = top
|
||||
} else if (bottom > viewRectBottom) {
|
||||
container.scrollTop = bottom - container.clientHeight
|
||||
}
|
||||
}
|
||||
|
||||
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.pickDate = new Date()
|
||||
this.dispose()
|
||||
}
|
||||
|
||||
private _toggleVisible(isVisible: boolean) {
|
||||
if (isVisible) {
|
||||
this.dom.container.classList.add('active')
|
||||
} else {
|
||||
this.dom.container.classList.remove('active')
|
||||
}
|
||||
}
|
||||
|
||||
private _submit() {
|
||||
if (this.options.onSubmit && this.pickDate) {
|
||||
const format = this.renderOptions?.element.dateFormat
|
||||
const pickDateString = this.formatDate(this.pickDate, format)
|
||||
this.options.onSubmit(pickDateString)
|
||||
}
|
||||
}
|
||||
|
||||
public formatDate(date: Date, format = 'yyyy-MM-dd hh:mm:ss'): string {
|
||||
let dateString = format
|
||||
const dateOption = {
|
||||
'y+': date.getFullYear().toString(),
|
||||
'M+': (date.getMonth() + 1).toString(),
|
||||
'd+': date.getDate().toString(),
|
||||
'h+': date.getHours().toString(),
|
||||
'm+': date.getMinutes().toString(),
|
||||
's+': date.getSeconds().toString()
|
||||
}
|
||||
for (const k in dateOption) {
|
||||
const reg = new RegExp('(' + k + ')').exec(format)
|
||||
const key = <keyof typeof dateOption>k
|
||||
if (reg) {
|
||||
dateString = dateString.replace(
|
||||
reg[1],
|
||||
reg[1].length === 1
|
||||
? (dateOption[key])
|
||||
: (dateOption[key].padStart(reg[1].length, '0'))
|
||||
)
|
||||
}
|
||||
}
|
||||
return dateString
|
||||
}
|
||||
|
||||
public render(option: IRenderOption) {
|
||||
this.renderOptions = option
|
||||
this._setValue()
|
||||
this._update()
|
||||
this._setPosition()
|
||||
this.isDatePicker = true
|
||||
this._toggleDateTimePicker()
|
||||
this._toggleVisible(true)
|
||||
}
|
||||
|
||||
public dispose() {
|
||||
this._toggleVisible(false)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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) {
|
||||
@@ -519,7 +527,7 @@ export class CanvasEvent {
|
||||
return
|
||||
}
|
||||
const activeControl = this.control.getActiveControl()
|
||||
const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT } = ElementType
|
||||
const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType
|
||||
const text = data.replaceAll(`\n`, ZERO)
|
||||
const elementList = this.draw.getElementList()
|
||||
const agentDom = this.cursor.getAgentDom()
|
||||
@@ -545,6 +553,7 @@ export class CanvasEvent {
|
||||
element.type === TEXT
|
||||
|| (!element.type && element.value !== ZERO)
|
||||
|| (element.type === HYPERLINK && nextElement?.type === HYPERLINK)
|
||||
|| (element.type === DATE && nextElement?.type === DATE)
|
||||
|| (element.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT)
|
||||
|| (element.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
|
||||
) {
|
||||
|
||||
@@ -24,7 +24,9 @@ export const EDITOR_ELEMENT_COPY_ATTR: Array<keyof IElement> = [
|
||||
'strikeout',
|
||||
'rowFlex',
|
||||
'url',
|
||||
'hyperlinkId'
|
||||
'hyperlinkId',
|
||||
'dateId',
|
||||
'dateFormat'
|
||||
]
|
||||
|
||||
export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
|
||||
@@ -47,7 +49,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
|
||||
'colgroup',
|
||||
'valueList',
|
||||
'control',
|
||||
'checkbox'
|
||||
'checkbox',
|
||||
'dateFormat'
|
||||
]
|
||||
|
||||
export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
|
||||
@@ -55,5 +58,6 @@ export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
|
||||
ElementType.HYPERLINK,
|
||||
ElementType.SUBSCRIPT,
|
||||
ElementType.SUPERSCRIPT,
|
||||
ElementType.CONTROL
|
||||
ElementType.CONTROL,
|
||||
ElementType.DATE
|
||||
]
|
||||
@@ -10,5 +10,6 @@ export enum ElementType {
|
||||
CONTROL = 'control',
|
||||
CHECKBOX = 'checkbox',
|
||||
LATEX = 'latex',
|
||||
TAB = 'tab'
|
||||
TAB = 'tab',
|
||||
DATE = 'date'
|
||||
}
|
||||
@@ -69,6 +69,11 @@ export interface ILaTexElement {
|
||||
laTexSVG?: string;
|
||||
}
|
||||
|
||||
export interface IDateElement {
|
||||
dateFormat?: string;
|
||||
dateId?: string;
|
||||
}
|
||||
|
||||
export type IElement = IElementBasic
|
||||
& IElementStyle
|
||||
& ITable
|
||||
@@ -78,6 +83,7 @@ export type IElement = IElementBasic
|
||||
& IControlElement
|
||||
& ICheckboxElement
|
||||
& ILaTexElement
|
||||
& IDateElement
|
||||
|
||||
export interface IElementMetrics {
|
||||
width: number;
|
||||
|
||||
@@ -72,6 +72,31 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
|
||||
}
|
||||
}
|
||||
i--
|
||||
} else if (el.type === ElementType.DATE) {
|
||||
const valueList = el.valueList || []
|
||||
// 移除父节点
|
||||
elementList.splice(i, 1)
|
||||
// 追加字节点
|
||||
if (valueList.length) {
|
||||
// 元素展开
|
||||
if (valueList[0].value.length > 1) {
|
||||
const deleteValue = valueList.splice(0, 1)[0]
|
||||
const deleteTextList = splitText(deleteValue.value)
|
||||
for (let d = 0; d < deleteTextList.length; d++) {
|
||||
valueList.splice(d, 0, { ...deleteValue, value: deleteTextList[d] })
|
||||
}
|
||||
}
|
||||
const dateId = getUUID()
|
||||
for (let v = 0; v < valueList.length; v++) {
|
||||
const value = valueList[v]
|
||||
value.type = el.type
|
||||
value.dateFormat = el.dateFormat
|
||||
value.dateId = dateId
|
||||
elementList.splice(i, 0, value)
|
||||
i++
|
||||
}
|
||||
}
|
||||
i--
|
||||
} else if (el.type === ElementType.CONTROL) {
|
||||
const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control!
|
||||
const controlId = getUUID()
|
||||
@@ -302,6 +327,27 @@ export function zipElementList(payload: IElement[]): IElement[] {
|
||||
}
|
||||
hyperlinkElement.valueList = zipElementList(valueList)
|
||||
element = hyperlinkElement
|
||||
} else if (element.type === ElementType.DATE) {
|
||||
const dateId = element.dateId
|
||||
const dateElement: IElement = {
|
||||
type: ElementType.DATE,
|
||||
value: '',
|
||||
dateFormat: element.dateFormat
|
||||
}
|
||||
const valueList: IElement[] = []
|
||||
while (e < elementList.length) {
|
||||
const dateE = elementList[e]
|
||||
if (dateId !== dateE.dateId) {
|
||||
e--
|
||||
break
|
||||
}
|
||||
delete dateE.type
|
||||
delete dateE.dateFormat
|
||||
valueList.push(dateE)
|
||||
e++
|
||||
}
|
||||
dateElement.valueList = zipElementList(valueList)
|
||||
element = dateElement
|
||||
} else if (element.type === ElementType.CONTROL) {
|
||||
// 控件处理
|
||||
const controlId = element.controlId
|
||||
|
||||
+43
-1
@@ -156,7 +156,7 @@ window.onload = function () {
|
||||
instance.command.executeRowMargin(Number(li.dataset.rowmargin!))
|
||||
}
|
||||
|
||||
// 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX
|
||||
// 4. | 表格 | 图片 | 超链接 | 分割线 | 水印 | 代码块 | 分隔符 | 控件 | 复选框 | LaTeX | 日期选择器
|
||||
const tableDom = document.querySelector<HTMLDivElement>('.menu-item__table')!
|
||||
const tablePanelContainer = document.querySelector<HTMLDivElement>('.menu-item__table__collapse')!
|
||||
const tableClose = document.querySelector<HTMLDivElement>('.table-close')!
|
||||
@@ -563,6 +563,48 @@ window.onload = function () {
|
||||
})
|
||||
}
|
||||
|
||||
const dateDom = document.querySelector<HTMLDivElement>('.menu-item__date')!
|
||||
const dateDomOptionDom = dateDom.querySelector<HTMLDivElement>('.options')!
|
||||
dateDom.onclick = function () {
|
||||
console.log('date')
|
||||
dateDomOptionDom.classList.toggle('visible')
|
||||
// 定位调整
|
||||
const bodyRect = document.body.getBoundingClientRect()
|
||||
const dateDomOptionRect = dateDomOptionDom.getBoundingClientRect()
|
||||
if (dateDomOptionRect.left + dateDomOptionRect.width > bodyRect.width) {
|
||||
dateDomOptionDom.style.right = '0px'
|
||||
dateDomOptionDom.style.left = 'unset'
|
||||
} else {
|
||||
dateDomOptionDom.style.right = 'unset'
|
||||
dateDomOptionDom.style.left = '0px'
|
||||
}
|
||||
// 当前日期
|
||||
const date = new Date()
|
||||
const year = date.getFullYear().toString()
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
const hour = date.getHours().toString().padStart(2, '0')
|
||||
const minute = date.getMinutes().toString().padStart(2, '0')
|
||||
const second = date.getSeconds().toString().padStart(2, '0')
|
||||
const dateString = `${year}-${month}-${day}`
|
||||
const dateTimeString = `${dateString} ${hour}:${minute}:${second}`
|
||||
dateDomOptionDom.querySelector<HTMLLIElement>('li:first-child')!.innerText = dateString
|
||||
dateDomOptionDom.querySelector<HTMLLIElement>('li:last-child')!.innerText = dateTimeString
|
||||
}
|
||||
dateDomOptionDom.onmousedown = function (evt) {
|
||||
const li = evt.target as HTMLLIElement
|
||||
const dateFormat = li.dataset.format!
|
||||
dateDomOptionDom.classList.toggle('visible')
|
||||
instance.command.executeInsertElementList([{
|
||||
type: ElementType.DATE,
|
||||
value: '',
|
||||
dateFormat,
|
||||
valueList: [{
|
||||
value: li.innerText.trim(),
|
||||
}]
|
||||
}])
|
||||
}
|
||||
|
||||
// 5. | 搜索&替换 | 打印 |
|
||||
const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
|
||||
const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!
|
||||
|
||||
+14
@@ -279,6 +279,20 @@ elementList.push(...<IElement[]>[{
|
||||
value: '\n'
|
||||
}])
|
||||
|
||||
// 日期选择
|
||||
elementList.push(...<IElement[]>[{
|
||||
value: '签署日期：'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
valueList: [{
|
||||
value: `2022-08-10 17:30:01`
|
||||
}],
|
||||
type: ElementType.DATE
|
||||
}, {
|
||||
value: '\n'
|
||||
}])
|
||||
|
||||
// 模拟结尾文本
|
||||
elementList.push(...[{
|
||||
value: '',
|
||||
|
||||
+14
-2
@@ -59,7 +59,7 @@ ul {
|
||||
.menu-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
margin: 0 6px;
|
||||
margin: 0 8px;
|
||||
display: inline-block;
|
||||
background-color: #cfd2d8;
|
||||
}
|
||||
@@ -78,7 +78,7 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 5px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.menu-item>div:hover {
|
||||
@@ -447,6 +447,18 @@ ul {
|
||||
background-image: url('./assets/images/latex.svg');
|
||||
}
|
||||
|
||||
.menu-item__date {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item__date i {
|
||||
background-image: url('./assets/images/date.svg');
|
||||
}
|
||||
|
||||
.menu-item__date .options {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.menu-item .menu-item__control .options {
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user