feat: add editor placeholder

src/editor/core/draw/Draw.ts

@@ -54,6 +54,7 @@ import { Zone } from '../zone/Zone'
 import { Footer } from './frame/Footer'
 import { INLINE_ELEMENT_TYPE } from '../../dataset/constant/Element'
 import { ListParticle } from './particle/ListParticle'
+import { Placeholder } from './frame/Placeholder'
 
 export class Draw {
 
@@ -91,6 +92,7 @@ export class Draw {
   private tableTool: TableTool
   private pageNumber: PageNumber
   private waterMark: Watermark
+  private placeholder: Placeholder
   private header: Header
   private footer: Footer
   private hyperlinkParticle: HyperlinkParticle
@@ -156,6 +158,7 @@ export class Draw {
     this.tableTool = new TableTool(this)
     this.pageNumber = new PageNumber(this)
     this.waterMark = new Watermark(this)
+    this.placeholder = new Placeholder(this)
     this.header = new Header(this)
     this.footer = new Footer(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
@@ -1374,6 +1377,10 @@ export class Draw {
     if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
       this.waterMark.render(ctx)
     }
+    // 绘制空白占位符
+    if (this.elementList.length <= 1) {
+      this.placeholder.render(ctx)
+    }
   }
 
   private _lazyRender() {

src/editor/core/draw/frame/Placeholder.ts

@@ -0,0 +1,94 @@
+import { IEditorOption, IElement } from '../../..'
+import { DeepRequired } from '../../../interface/Common'
+import { IElementPosition } from '../../../interface/Element'
+import { IRow } from '../../../interface/Row'
+import { formatElementList } from '../../../utils/element'
+import { Position } from '../../position/Position'
+import { Draw } from '../Draw'
+
+export class Placeholder {
+
+  private draw: Draw
+  private position: Position
+  private options: DeepRequired<IEditorOption>
+
+  private elementList: IElement[]
+  private rowList: IRow[]
+  private positionList: IElementPosition[]
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.position = draw.getPosition()
+    this.options = <DeepRequired<IEditorOption>>draw.getOptions()
+
+    this.elementList = []
+    this.rowList = []
+    this.positionList = []
+  }
+
+  private _recovery() {
+    this.elementList = []
+    this.rowList = []
+    this.positionList = []
+  }
+
+  public _compute() {
+    this._computeRowList()
+    this._computePositionList()
+  }
+
+  private _computeRowList() {
+    const innerWidth = this.draw.getInnerWidth()
+    this.rowList = this.draw.computeRowList(innerWidth, this.elementList)
+  }
+
+  private _computePositionList() {
+    const headerExtraHeight = this.draw.getHeader().getExtraHeight()
+    const innerWidth = this.draw.getInnerWidth()
+    const margins = this.draw.getMargins()
+    const startX = margins[3]
+    const startY = margins[0] + headerExtraHeight
+    this.position.computePageRowPosition({
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startRowIndex: 0,
+      startIndex: 0,
+      startX,
+      startY,
+      innerWidth
+    })
+  }
+
+  public render(ctx: CanvasRenderingContext2D) {
+    const { placeholder: { data, font, size, color, opacity } } = this.options
+    if (!data) return
+    this._recovery()
+    // 构建元素列表并格式化
+    this.elementList = [{
+      value: data,
+      font,
+      size,
+      color
+    }]
+    formatElementList(this.elementList, {
+      editorOptions: this.options
+    })
+    // 计算
+    this._compute()
+    const innerWidth = this.draw.getInnerWidth()
+    // 绘制
+    ctx.save()
+    ctx.globalAlpha = opacity
+    this.draw.drawRow(ctx, {
+      elementList: this.elementList,
+      positionList: this.positionList,
+      rowList: this.rowList,
+      pageNo: 0,
+      startIndex: 0,
+      innerWidth
+    })
+    ctx.restore()
+  }
+
+}

src/editor/dataset/constant/Placeholder.ts

@@ -0,0 +1,9 @@
+import { IPlaceholder } from '../../interface/Placeholder'
+
+export const defaultPlaceholderOption: Readonly<Required<IPlaceholder>> = {
+  data: '',
+  color: '#DCDFE6',
+  opacity: 1,
+  size: 16,
+  font: 'Yahei'
+}

src/editor/index.ts

@@ -43,6 +43,8 @@ import { defaultTitleOption } from './dataset/constant/Title'
 import { TitleLevel } from './dataset/enum/Title'
 import { ListStyle, ListType } from './dataset/enum/List'
 import { ICatalog, ICatalogItem } from './interface/Catalog'
+import { IPlaceholder } from './interface/Placeholder'
+import { defaultPlaceholderOption } from './dataset/constant/Placeholder'
 
 export default class Editor {
 
@@ -84,6 +86,10 @@ export default class Editor {
       ...defaultTitleOption,
       ...options.title
     }
+    const placeholderOptions: Required<IPlaceholder> = {
+      ...defaultPlaceholderOption,
+      ...options.placeholder
+    }
 
     const editorOptions: DeepRequired<IEditorOption> = {
       mode: EditorMode.EDIT,
@@ -127,7 +133,8 @@ export default class Editor {
       control: controlOptions,
       checkbox: checkboxOptions,
       cursor: cursorOptions,
-      title: titleOptions
+      title: titleOptions,
+      placeholder: placeholderOptions
     }
     // 数据处理
     let headerElementList: IElement[] = []

src/editor/interface/Draw.ts

@@ -23,7 +23,7 @@ export interface IDrawRowPayload {
   pageNo: number;
   startIndex: number;
   innerWidth: number;
-  zone: EditorZone;
+  zone?: EditorZone;
 }
 
 export interface IDrawPagePayload {

src/editor/interface/Editor.ts

@@ -7,6 +7,7 @@ import { IFooter } from './Footer'
 import { IHeader } from './Header'
 import { IMargin } from './Margin'
 import { IPageNumber } from './PageNumber'
+import { IPlaceholder } from './Placeholder'
 import { ITitleOption } from './Title'
 import { IWatermark } from './Watermark'
 
@@ -58,6 +59,7 @@ export interface IEditorOption {
   checkbox?: ICheckboxOption;
   cursor?: ICursorOption;
   title?: ITitleOption;
+  placeholder?: IPlaceholder;
 }
 
 export interface IEditorResult {

src/editor/interface/Placeholder.ts

@@ -0,0 +1,7 @@
+export interface IPlaceholder {
+  data: string;
+  color?: string;
+  opacity?: number;
+  size?: number;
+  font?: string;
+}

src/mock.ts

@@ -331,5 +331,8 @@ export const options: IEditorOption = {
   },
   pageNumber: {
     format: '第{pageNo}页/共{pageCount}页'
+  },
+  placeholder: {
+    data: '请输入正文'
   }
 }