diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 94f4f8f..e57bbb9 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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() { diff --git a/src/editor/core/draw/frame/Placeholder.ts b/src/editor/core/draw/frame/Placeholder.ts new file mode 100644 index 0000000..9e260a1 --- /dev/null +++ b/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 + + private elementList: IElement[] + private rowList: IRow[] + private positionList: IElementPosition[] + + constructor(draw: Draw) { + this.draw = draw + this.position = draw.getPosition() + this.options = >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() + } + +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Placeholder.ts b/src/editor/dataset/constant/Placeholder.ts new file mode 100644 index 0000000..a303520 --- /dev/null +++ b/src/editor/dataset/constant/Placeholder.ts @@ -0,0 +1,9 @@ +import { IPlaceholder } from '../../interface/Placeholder' + +export const defaultPlaceholderOption: Readonly> = { + data: '', + color: '#DCDFE6', + opacity: 1, + size: 16, + font: 'Yahei' +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index 551bbeb..7c45d15 100644 --- a/src/editor/index.ts +++ b/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 = { + ...defaultPlaceholderOption, + ...options.placeholder + } const editorOptions: DeepRequired = { 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[] = [] diff --git a/src/editor/interface/Draw.ts b/src/editor/interface/Draw.ts index 6fb96c0..8adffa3 100644 --- a/src/editor/interface/Draw.ts +++ b/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 { diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index 8b00226..7cbac37 100644 --- a/src/editor/interface/Editor.ts +++ b/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 { diff --git a/src/editor/interface/Placeholder.ts b/src/editor/interface/Placeholder.ts new file mode 100644 index 0000000..290e530 --- /dev/null +++ b/src/editor/interface/Placeholder.ts @@ -0,0 +1,7 @@ +export interface IPlaceholder { + data: string; + color?: string; + opacity?: number; + size?: number; + font?: string; +} \ No newline at end of file diff --git a/src/mock.ts b/src/mock.ts index 102527f..3182264 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -331,5 +331,8 @@ export const options: IEditorOption = { }, pageNumber: { format: '第{pageNo}页/共{pageCount}页' + }, + placeholder: { + data: '请输入正文' } } \ No newline at end of file