feat:date picker and editor debug

src/editor/assets/css/date/datePicker.css

@@ -214,6 +214,11 @@
   margin-left: 10px;
 }
 
+.date-menu button:hover {
+  color: #5175F4;
+  border-color: #5175F4;
+}
+
 .date-menu button.date-menu__time {
   border: 1px solid transparent;
   position: absolute;

src/editor/core/draw/particle/date/DateParticle.ts

@@ -15,18 +15,40 @@ export class DateParticle {
     this.draw = draw
     this.range = draw.getRange()
     this.datePicker = new DatePicker({
-      mountDom: draw.getContainer()
+      mountDom: draw.getContainer(),
+      onSubmit: this._setValue.bind(this)
     })
   }
 
-  public getDateElementList(): IElement[] {
+  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 []
+    if (!~startIndex && !~endIndex) return null
     const elementList = this.draw.getElementList()
     const startElement = elementList[startIndex]
-    if (startElement.type !== ElementType.DATE) return []
+    if (startElement.type !== ElementType.DATE) return null
     // 向左查找
     let preIndex = startIndex
     while (preIndex > 0) {
@@ -51,8 +73,8 @@ export class DateParticle {
     if (nextIndex === elementList.length) {
       rightIndex = nextIndex - 1
     }
-    if (!~leftIndex || !~rightIndex) return []
+    if (!~leftIndex || !~rightIndex) return null
-    return elementList.slice(leftIndex + 1, rightIndex + 1)
+    return [leftIndex, rightIndex]
   }
 
   public clearDatePicker() {
@@ -63,7 +85,11 @@ export class DateParticle {
     const height = this.draw.getHeight()
     const pageGap = this.draw.getPageGap()
     const startTop = this.draw.getPageNo() * (height + pageGap)
-    const value = this.getDateElementList().map(el => el.value).join('')
+    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,

src/editor/core/draw/particle/date/DatePicker.ts

@@ -1,7 +1,8 @@
 import { IElement, IElementPosition } from '../../../../interface/Element'
 
 export interface IDatePickerOption {
-  mountDom?: HTMLElement
+  mountDom?: HTMLElement;
+  onSubmit?: (date: string) => any;
 }
 
 interface IDatePickerDom {
@@ -32,7 +33,7 @@ interface IRenderOption {
   value: string;
   element: IElement;
   position: IElementPosition;
-  startTop: number;
+  startTop?: number;
 }
 
 export class DatePicker {
@@ -196,9 +197,11 @@ export class DatePicker {
     }
     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
@@ -239,7 +242,7 @@ export class DatePicker {
     } = this.renderOptions
     // 位置
     this.dom.container.style.left = `${left}px`
-    this.dom.container.style.top = `${top + startTop + lineHeight}px`
+    this.dom.container.style.top = `${top + (startTop || 0) + lineHeight}px`
   }
 
   public isInvalidDate(value: Date): boolean {
@@ -308,10 +311,11 @@ export class DatePicker {
         dayDom.classList.add('select')
       }
       dayDom.innerText = `${i}`
-      dayDom.onclick = () => {
+      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)
     }
@@ -405,6 +409,39 @@ export class DatePicker {
     }
   }
 
+  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()
@@ -417,7 +454,6 @@ export class DatePicker {
 
   public dispose() {
     this._toggleVisible(false)
-    return this.pickDate
   }
 
 }