@hufe921/canvas-editor 1.0.6 → 1.1.0

package/dist/src/editor/core/command/Command.d.ts

@@ -35,6 +35,10 @@ export declare class Command {
     executeRowMargin: CommandAdapt['rowMargin'];
     executeSpacingBefore: CommandAdapt['spacingBefore'];
     executeSpacingAfter: CommandAdapt['spacingAfter'];
+    executeIndentLeft: CommandAdapt['indentLeft'];
+    executeIndentRight: CommandAdapt['indentRight'];
+    executeIndentFirstLine: CommandAdapt['indentFirstLine'];
+    executeSetTabStops: CommandAdapt['setTabStops'];
     executeInsertTable: CommandAdapt['insertTable'];
     executeInsertTableTopRow: CommandAdapt['insertTableTopRow'];
     executeInsertTableBottomRow: CommandAdapt['insertTableBottomRow'];
@@ -127,6 +131,7 @@ export declare class Command {
     executeInsertControl: CommandAdapt['insertControl'];
     executeJumpControl: CommandAdapt['jumpControl'];
     executeUpdateOptions: CommandAdapt['updateOptions'];
+    executeSetBackend: CommandAdapt['setBackend'];
     executeInsertTitle: CommandAdapt['insertTitle'];
     executeFocus: CommandAdapt['focus'];
     executeComputeElementListHeight: CommandAdapt['computeElementListHeight'];

package/dist/src/editor/core/command/CommandAdapt.d.ts

@@ -1,5 +1,5 @@
 import { ImageDisplay } from '../../dataset/enum/Common';
-import { EditorMode, EditorZone, PageMode, PaperDirection } from '../../dataset/enum/Editor';
+import { BackendType, EditorMode, EditorZone, PageMode, PaperDirection } from '../../dataset/enum/Editor';
 import { ListStyle, ListType } from '../../dataset/enum/List';
 import { MoveDirection } from '../../dataset/enum/Observer';
 import { RowFlex } from '../../dataset/enum/Row';
@@ -13,7 +13,7 @@ import { IControlValidateResult, IGetControlValueOption, IGetControlValueResult,
 import { IAppendElementListOption, IDrawImagePayload, IForceUpdateOption, IGetImageOption, IGetValueOption, IPainterOption } from '../../interface/Draw';
 import { IEditorData, IEditorHTML, IEditorOption, IEditorResult, IEditorText, IFocusOption, ISetValueOption, IUpdateOption } from '../../interface/Editor';
 import { IColumnOption } from '../../interface/Column';
-import { IDeleteElementByIdOption, IElement, IElementPosition, IGetElementByIdOption, IImageCaption, IImageCrop, IInsertElementListOption, IUpdateElementByIdOption } from '../../interface/Element';
+import { IDeleteElementByIdOption, IElement, IElementPosition, IGetElementByIdOption, IImageCaption, IImageCrop, IInsertElementListOption, ITabStop, IUpdateElementByIdOption } from '../../interface/Element';
 import { ICopyOption, IPasteOption, IPositionContextByEventOption, IPositionContextByEventResult } from '../../interface/Event';
 import { IMargin } from '../../interface/Margin';
 import { IGetSurroundElementListOption, IRange, RangeContext, RangeRect } from '../../interface/Range';
@@ -77,6 +77,10 @@ export declare class CommandAdapt {
     rowMargin(payload: number): void;
     spacingBefore(payload: number): void;
     spacingAfter(payload: number): void;
+    indentLeft(payload: number): void;
+    indentRight(payload: number): void;
+    indentFirstLine(payload: number): void;
+    setTabStops(payload: ITabStop[]): void;
     insertTable(row: number, col: number): void;
     insertTableTopRow(): void;
     insertTableBottomRow(): void;
@@ -189,6 +193,7 @@ export declare class CommandAdapt {
     validate(payload?: IValidateOption): IControlValidateResult[];
     clearValidate(): void;
     setControlHighlight(payload: ISetControlHighlightOption): void;
+    setBackend(payload: BackendType): void;
     updateOptions(payload: IUpdateOption): void;
     getControlList(): IElement[];
     locationControl(controlId: string, options?: ILocationControlOption): void;

package/dist/src/editor/core/contextmenu/ContextMenu.d.ts

@@ -23,6 +23,13 @@ export declare class ContextMenu {
     private _getContext;
     private _createContextMenuContainer;
     private _render;
+    /**
+     * 按点击位置摆放菜单（left/top 为视口坐标）：
+     * 纵向优先往下展开；下方放不下而上方放得下则往上展开；
+     * 两侧都放不下时取空间大的一侧，并把菜单限高为该侧可用空间（容器自带纵向滚动）。
+     * 横向同理，右侧放不下往左，仍放不下贴视口边。
+     */
+    private _placeContextMenu;
     private _removeSubMenu;
     private _setHoverStatus;
     private _formatName;

package/dist/src/editor/core/draw/Draw.d.ts

@@ -6,6 +6,9 @@ import { IRow } from '../../interface/Row';
 import { IColumnLayout, IColumnOption } from '../../interface/Column';
 import { ColumnManager } from './column/ColumnManager';
 import { IncrementalRowComputer } from './IncrementalRowComputer';
+import { TextMeasurer } from '../layout/TextMeasurer';
+import type { RenderPage } from '../render/RenderBackend';
+import { IRenderContext } from '../render/model/RenderContext';
 import { Cursor } from '../cursor/Cursor';
 import { CanvasEvent } from '../event/CanvasEvent';
 import { GlobalEvent } from '../event/GlobalEvent';
@@ -20,6 +23,7 @@ import { Underline } from './richtext/Underline';
 import { ImageParticle } from './particle/ImageParticle';
 import { TextParticle } from './particle/TextParticle';
 import { TableParticle } from './particle/table/TableParticle';
+import { TablePaging } from './particle/table/TablePaging';
 import { TableTool } from './particle/table/TableTool';
 import { Ruler } from './ruler/Ruler';
 import { HyperlinkParticle } from './particle/HyperlinkParticle';
@@ -28,7 +32,7 @@ import { TraceParticle } from './particle/TraceParticle';
 import { Header } from './frame/Header';
 import { SuperscriptParticle } from './particle/SuperscriptParticle';
 import { SubscriptParticle } from './particle/SubscriptParticle';
-import { EditorMode, PageMode, PaperDirection } from '../../dataset/enum/Editor';
+import { BackendType, EditorMode, PageMode, PaperDirection } from '../../dataset/enum/Editor';
 import { Control } from './control/Control';
 import { CascadeManager } from '../cascade/CascadeManager';
 import { Validate } from '../validate/Validate';
@@ -61,8 +65,7 @@ import { Accessibility } from '../accessibility/Accessibility';
 export declare class Draw {
     private container;
     private pageContainer;
-    private pageList;
-    private ctxList;
+    private backend;
     private pageNo;
     private renderCount;
     private pagePixelRatio;
@@ -95,6 +98,7 @@ export declare class Draw {
     private previewer;
     private imageParticle;
     private laTexParticle;
+    private textMeasurer;
     private textParticle;
     private tableParticle;
     private tablePaging;
@@ -136,6 +140,7 @@ export declare class Draw {
     private rowList;
     private rawRowList;
     private incrementalRowComputer;
+    private layoutEngine;
     private isElementListTruncated;
     private pageRowList;
     private pageDirectionList;
@@ -143,15 +148,14 @@ export declare class Draw {
     private painterOptions;
     private visiblePageNoList;
     private intersectionPageNo;
-    private lazyRenderIntersectionObserver;
     private printModeData;
-    private controlMinWidthPlaceholderElementListSet;
     private columnManager;
     private ruler;
     constructor(rootContainer: HTMLElement, options: DeepRequired<IEditorOption>, data: IEditorData, listener: Listener, eventBus: EventBus<EventBusMap>, override: Override);
     setPrintData(): void;
     clearPrintData(): void;
     getLetterReg(): RegExp;
+    isWordLike(word: string): boolean;
     getMode(): EditorMode;
     setMode(payload: EditorMode): void;
     isReadonly(): boolean;
@@ -208,14 +212,13 @@ export declare class Draw {
     getPageNo(): number;
     setPageNo(payload: number): void;
     getRenderCount(): number;
-    getPage(pageNo?: number): HTMLCanvasElement;
-    getPageList(): HTMLCanvasElement[];
+    getPage(pageNo?: number): RenderPage;
+    getPageList(): RenderPage[];
     getPageCount(): number;
     getTableRowList(sourceElementList: IElement[]): IRow[];
     getOriginalRowList(): IRow[];
     getRowList(): IRow[];
     getPageRowList(): IRow[][];
-    getCtx(): CanvasRenderingContext2D;
     getOptions(): DeepRequired<IEditorOption>;
     getSearch(): Search;
     getSpellcheck(): Spellcheck;
@@ -230,6 +233,7 @@ export declare class Draw {
     getColumnManager(): ColumnManager;
     getRange(): RangeManager;
     getLineBreakParticle(): LineBreakParticle;
+    getTextMeasurer(): TextMeasurer;
     getTextParticle(): TextParticle;
     getStrikeout(): Strikeout;
     getUnderline(): Underline;
@@ -239,6 +243,7 @@ export declare class Draw {
     getTableElementList(sourceElementList: IElement[]): IElement[];
     getElementList(): IElement[];
     getMainElementList(): IElement[];
+    isMainElementList(elementList: IElement[]): boolean;
     getRawRowList(): IRow[];
     getMainRowList(): IRow[];
     getIncrementalRowComputer(): IncrementalRowComputer;
@@ -265,6 +270,7 @@ export declare class Draw {
     getRuler(): Ruler;
     getTableOperate(): TableOperate;
     getTableParticle(): TableParticle;
+    getTablePaging(): TablePaging;
     getBlockParticle(): BlockParticle;
     getHeader(): Header;
     getFooter(): Footer;
@@ -285,11 +291,13 @@ export declare class Draw {
     getAccessibility(): Accessibility;
     getRowCount(): number;
     getDataURL(payload?: IGetImageOption): Promise<string[]>;
+    getSvgPageList(mode: EditorMode): Promise<SVGSVGElement[]>;
     getPainterStyle(): IElementStyle | null;
     getPainterOptions(): IPainterOption | null;
     setPainterStyle(payload: IElementStyle | null, options?: IPainterOption): void;
     setDefaultRange(): void;
     getIsPagingMode(): boolean;
+    setBackend(payload: BackendType): void;
     setPageMode(payload: PageMode): void;
     setPageScale(payload: number): void;
     getPagePixelRatio(): number;
@@ -308,14 +316,13 @@ export declare class Draw {
     private _createPageContainer;
     private _createPage;
     private _updatePageSizes;
-    private _initPageContext;
     getElementFont(el: IElement, scale?: number): string;
     getElementSize(el: IElement): number;
     getElementRowMargin(el: IElement): number;
     computeRowList(payload: IComputeRowListPayload): IRow[];
     private _computePageList;
     private _drawHighlight;
-    drawRow(ctx: CanvasRenderingContext2D, payload: IDrawRowPayload): void;
+    drawRow(ctx: IRenderContext, payload: IDrawRowPayload): void;
     private _drawFloat;
     private _clearPage;
     private _drawPage;

package/dist/src/editor/core/draw/column/ColumnManager.d.ts

@@ -1,5 +1,6 @@
 import { IColumnLayout, IColumnOption } from '../../../interface/Column';
 import { PaperDirection } from '../../../dataset/enum/Editor';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class ColumnManager {
     private draw;
@@ -11,5 +12,5 @@ export declare class ColumnManager {
     getLayout(direction?: PaperDirection): IColumnLayout | null;
     setConfig(config: IColumnOption | null | undefined): void;
     getOffset(columnIndex: number | undefined, direction?: PaperDirection): number;
-    drawSeparator(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    drawSeparator(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/control/Control.d.ts

@@ -2,6 +2,7 @@ import { ControlState } from '../../../dataset/enum/Control';
 import { IControl, IControlChangeOption, IControlContext, IControlHighlight, IControlInitOption, IControlInstance, IDestroyControlOption, IGetControlValueOption, IGetControlValueResult, IInitNextControlOption, INextControlContext, IRepaintControlOption, ISetControlExtensionOption, ISetControlProperties, ISetControlRowFlexOption, ISetControlValueOption } from '../../../interface/Control';
 import { IElement, IElementPosition } from '../../../interface/Element';
 import { IRange } from '../../../interface/Range';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 interface IMoveCursorResult {
     newIndex: number;
@@ -22,7 +23,7 @@ export declare class Control {
     constructor(draw: Draw);
     setHighlightList(payload: IControlHighlight[]): void;
     computeHighlightList(): void;
-    renderHighlightList(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    renderHighlightList(ctx: IRenderContext, pageNo: number): void;
     getDraw(): Draw;
     filterAssistElement(elementList: IElement[]): IElement[];
     getIsRangeCanCaptureEvent(): boolean;
@@ -68,7 +69,7 @@ export declare class Control {
     setPropertiesListById(payload: ISetControlProperties[]): void;
     getList(): IElement[];
     recordBorderInfo(x: number, y: number, width: number, height: number): void;
-    drawBorder(ctx: CanvasRenderingContext2D): void;
+    drawBorder(ctx: IRenderContext): void;
     getPreControlContext(): INextControlContext | null;
     getNextControlContext(): INextControlContext | null;
     initNextControl(option?: IInitNextControlOption): void;

package/dist/src/editor/core/draw/control/interactive/ControlSearch.d.ts

@@ -1,6 +1,7 @@
 import { IControlHighlight, IControlHighlightRule } from '../../../../interface/Control';
 import { IElement } from '../../../../interface/Element';
 import { ISearchResult } from '../../../../interface/Search';
+import type { IRenderContext } from '../../../render/model/RenderContext';
 import { Control } from '../Control';
 type IHighlightMatchResult = (ISearchResult & IControlHighlightRule)[];
 export declare class ControlSearch {
@@ -15,6 +16,6 @@ export declare class ControlSearch {
     getHighlightList(): IControlHighlight[];
     setHighlightList(payload: IControlHighlight[]): void;
     computeHighlightList(): void;
-    renderHighlightList(ctx: CanvasRenderingContext2D, pageIndex: number): void;
+    renderHighlightList(ctx: IRenderContext, pageIndex: number): void;
 }
 export {};

package/dist/src/editor/core/draw/control/richtext/Border.d.ts

@@ -1,4 +1,5 @@
 import { IElementFillRect } from '../../../../interface/Element';
+import type { IRenderContext } from '../../../render/model/RenderContext';
 import { Draw } from '../../Draw';
 export declare class ControlBorder {
     protected borderRect: IElementFillRect;
@@ -6,5 +7,5 @@ export declare class ControlBorder {
     constructor(draw: Draw);
     clearBorderInfo(): IElementFillRect;
     recordBorderInfo(x: number, y: number, width: number, height: number): void;
-    render(ctx: CanvasRenderingContext2D): void;
+    render(ctx: IRenderContext): void;
 }

package/dist/src/editor/core/draw/frame/Background.d.ts

@@ -1,3 +1,4 @@
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Background {
     private draw;
@@ -7,5 +8,5 @@ export declare class Background {
     private _renderBackgroundColor;
     private _drawImage;
     private _renderBackgroundImage;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/Badge.d.ts

@@ -1,14 +1,16 @@
 import { IAreaBadge, IBadge } from '../../../interface/Badge';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Badge {
     private draw;
     private options;
     private imageCache;
+    private pendingImageMap;
     private mainBadge;
     private areaBadgeMap;
     constructor(draw: Draw);
     setMainBadge(payload: IBadge | null): void;
     setAreaBadgeMap(payload: IAreaBadge[]): void;
     private _drawImage;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/Footer.d.ts

@@ -1,6 +1,7 @@
 import { PaperDirection } from '../../../dataset/enum/Editor';
 import { IElement, IElementPosition } from '../../../interface/Element';
 import { IRow } from '../../../interface/Row';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Footer {
     private draw;
@@ -26,5 +27,5 @@ export declare class Footer {
     getExtraHeight(pageNo?: number, direction?: PaperDirection): number;
     private _resolveDirection;
     isDisabled(pageNo?: number): boolean;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/Header.d.ts

@@ -1,6 +1,7 @@
 import { PaperDirection } from '../../../dataset/enum/Editor';
 import { IElement, IElementPosition } from '../../../interface/Element';
 import { IRow } from '../../../interface/Row';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Header {
     private draw;
@@ -26,5 +27,5 @@ export declare class Header {
     getExtraHeight(pageNo?: number, direction?: PaperDirection): number;
     private _resolveDirection;
     isDisabled(pageNo?: number): boolean;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/LineNumber.d.ts

@@ -1,7 +1,8 @@
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class LineNumber {
     private draw;
     private options;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/Margin.d.ts

@@ -1,7 +1,8 @@
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Margin {
     private draw;
     private options;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/PageBorder.d.ts

@@ -1,3 +1,4 @@
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class PageBorder {
     private draw;
@@ -5,5 +6,5 @@ export declare class PageBorder {
     private footer;
     private options;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/PageNumber.d.ts

@@ -1,9 +1,10 @@
 import { NumberType } from '../../../dataset/enum/Common';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class PageNumber {
     private draw;
     private options;
     constructor(draw: Draw);
     static formatNumberPlaceholder(text: string, pageNo: number, replaceReg: RegExp, numberType: NumberType): string;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/frame/Placeholder.d.ts

@@ -1,4 +1,5 @@
 import { IPlaceholder } from '../../../interface/Placeholder';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export interface IPlaceholderRenderOption {
     placeholder: Required<IPlaceholder>;
@@ -16,5 +17,5 @@ export declare class Placeholder {
     _compute(options?: IPlaceholderRenderOption): void;
     private _computeRowList;
     private _computePositionList;
-    render(ctx: CanvasRenderingContext2D, options?: IPlaceholderRenderOption): void;
+    render(ctx: IRenderContext, options?: IPlaceholderRenderOption): void;
 }

package/dist/src/editor/core/draw/frame/Watermark.d.ts

@@ -1,10 +1,11 @@
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Watermark {
     private draw;
     private options;
     private imageCache;
     constructor(draw: Draw);
-    renderText(ctx: CanvasRenderingContext2D, pageNo: number): void;
-    renderImage(ctx: CanvasRenderingContext2D, pageNo: number): void;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    renderText(ctx: IRenderContext, pageNo: number): void;
+    renderImage(ctx: IRenderContext, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/graffiti/Graffiti.d.ts

@@ -1,4 +1,5 @@
 import { IGraffitiData } from '../../../interface/Graffiti';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Graffiti {
     private draw;
@@ -15,5 +16,5 @@ export declare class Graffiti {
     getValue(): IGraffitiData[];
     compute(): void;
     clear(): void;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
 }

package/dist/src/editor/core/draw/interactive/Area.d.ts

@@ -1,5 +1,6 @@
 import { Draw } from '../Draw';
 import { IAreaInfo, IDeleteAreaOption, IGetAreaValueOption, IGetAreaValueResult, IInsertAreaOption, ILocationAreaOption, ISetAreaPropertiesOption, ISetAreaValueOption } from '../../../interface/Area';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { IRange } from '../../../interface/Range';
 import { IRow } from '../../../interface/Row';
 import { IElementPosition } from '../../../interface/Element';
@@ -16,7 +17,7 @@ export declare class Area {
     getActiveAreaInfo(): IAreaInfo | null;
     isReadonly(): boolean;
     insertArea(payload: IInsertAreaOption): string | null;
-    render(ctx: CanvasRenderingContext2D, pageNo: number): void;
+    render(ctx: IRenderContext, pageNo: number): void;
     compute(): void;
     /**
      * 收集区域补高的跨页延续段：

package/dist/src/editor/core/draw/interactive/Group.d.ts

@@ -1,6 +1,7 @@
 import { IElement } from '../../../interface/Element';
 import { IPositionContext } from '../../../interface/Position';
 import { IRange } from '../../../interface/Range';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class Group {
     private draw;
@@ -14,5 +15,5 @@ export declare class Group {
     getContextByGroupId(elementList: IElement[], groupId: string): (IRange & IPositionContext) | null;
     clearFillInfo(): void;
     recordFillInfo(element: IElement, x: number, y: number, width: number, height: number): void;
-    render(ctx: CanvasRenderingContext2D): void;
+    render(ctx: IRenderContext): void;
 }

package/dist/src/editor/core/draw/interactive/Search.d.ts

@@ -1,5 +1,6 @@
 import { IElement, IElementPosition } from '../../../interface/Element';
 import { IReplaceOption, ISearchOption, ISearchResult } from '../../../interface/Search';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export interface INavigateInfo {
     index: number;
@@ -26,7 +27,7 @@ export declare class Search {
     getSearchNavigateInfo(): null | INavigateInfo;
     getMatchList(payload: string, originalElementList: IElement[]): ISearchResult[];
     compute(payload: string): void;
-    render(ctx: CanvasRenderingContext2D, pageIndex: number): void;
+    render(ctx: IRenderContext, pageIndex: number): void;
     replace(payload: string, option?: IReplaceOption): void;
     private replaceWithTrace;
 }

package/dist/src/editor/core/draw/interactive/Spellcheck.d.ts

@@ -1,4 +1,5 @@
 import type { ISpellcheckContext, ISpellcheckRange, ISpellcheckWord } from '../../../interface/Spellcheck';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import type { Draw } from '../Draw';
 export declare class Spellcheck {
     private options;
@@ -16,5 +17,5 @@ export declare class Spellcheck {
     private _isSameTablePath;
     getRangeByIndex(index: number, context?: ISpellcheckContext): ISpellcheckRange | null;
     private _drawWave;
-    render(ctx: CanvasRenderingContext2D, pageIndex: number): void;
+    render(ctx: IRenderContext, pageIndex: number): void;
 }

package/dist/src/editor/core/draw/particle/CheckboxParticle.d.ts

@@ -1,8 +1,9 @@
 import { IElement } from '../../../interface/Element';
 import { IRow } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 interface ICheckboxRenderOption {
-    ctx: CanvasRenderingContext2D;
+    ctx: IRenderContext;
     x: number;
     y: number;
     row: IRow;

package/dist/src/editor/core/draw/particle/HyperlinkParticle.d.ts

@@ -1,6 +1,7 @@
 import { IElement } from '../../..';
 import { IElementPosition } from '../../../interface/Element';
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class HyperlinkParticle {
     private draw;
@@ -13,5 +14,5 @@ export declare class HyperlinkParticle {
     drawHyperlinkPopup(element: IElement, position: IElementPosition): void;
     clearHyperlinkPopup(): void;
     openHyperlink(element: IElement): void;
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/ImageParticle.d.ts

@@ -1,11 +1,13 @@
 import { DeepRequired } from '../../../interface/Common';
 import { IEditorOption } from '../../../interface/Editor';
 import { IElement } from '../../../interface/Element';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class ImageParticle {
     private draw;
     protected options: DeepRequired<IEditorOption>;
     protected imageCache: Map<string, HTMLImageElement>;
+    private pendingImageMap;
     private container;
     private floatImageContainer;
     private floatImage;
@@ -19,5 +21,5 @@ export declare class ImageParticle {
     protected getFallbackImage(width: number, height: number): HTMLImageElement;
     private _drawImageWithCrop;
     private _renderCaption;
-    render(ctx: CanvasRenderingContext2D, element: IElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/LabelParticle.d.ts

@@ -1,8 +1,9 @@
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class LabelParticle {
     private options;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
     private _drawRoundedRect;
 }

package/dist/src/editor/core/draw/particle/LineBreakParticle.d.ts

@@ -1,4 +1,5 @@
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class LineBreakParticle {
     private options;
@@ -6,5 +7,5 @@ export declare class LineBreakParticle {
     static readonly HEIGHT = 9;
     static readonly GAP = 3;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/ListParticle.d.ts

@@ -1,6 +1,7 @@
 import { ListStyle, ListType } from '../../../dataset/enum/List';
 import { IElement, IElementPosition } from '../../../interface/Element';
 import { IRow } from '../../../interface/Row';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class ListParticle {
     private draw;
@@ -26,5 +27,5 @@ export declare class ListParticle {
     private findStyledElement;
     private getListFontStyle;
     getListStyleWidth(ctx: CanvasRenderingContext2D, listElementList: IElement[]): number;
-    drawListStyle(ctx: CanvasRenderingContext2D, row: IRow, position: IElementPosition): void;
+    drawListStyle(ctx: IRenderContext, row: IRow, position: IElementPosition): void;
 }

package/dist/src/editor/core/draw/particle/PageBreakParticle.d.ts

@@ -1,9 +1,10 @@
 import { IRowElement } from '../../../interface/Row';
+import type { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class PageBreakParticle {
     private draw;
     private options;
     private i18n;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/RadioParticle.d.ts

@@ -1,8 +1,9 @@
 import { IElement } from '../../../interface/Element';
 import { IRow } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 interface IRadioRenderOption {
-    ctx: CanvasRenderingContext2D;
+    ctx: IRenderContext;
     x: number;
     y: number;
     row: IRow;

package/dist/src/editor/core/draw/particle/SeparatorParticle.d.ts

@@ -1,7 +1,8 @@
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 import { Draw } from '../Draw';
 export declare class SeparatorParticle {
     private options;
     constructor(draw: Draw);
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/SubscriptParticle.d.ts

@@ -1,5 +1,6 @@
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 export declare class SubscriptParticle {
     getOffsetY(element: IRowElement): number;
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }

package/dist/src/editor/core/draw/particle/SuperscriptParticle.d.ts

@@ -1,5 +1,6 @@
 import { IRowElement } from '../../../interface/Row';
+import { IRenderContext } from '../../render/model/RenderContext';
 export declare class SuperscriptParticle {
     getOffsetY(element: IRowElement): number;
-    render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number): void;
+    render(ctx: IRenderContext, element: IRowElement, x: number, y: number): void;
 }