Document operation commands control document-wide functionality and settings.
History Operations
executeUndo
Undoes the last operation.
editor.command.executeUndo(): void
Example
editor.command.executeUndo()
executeRedo
Redoes the last undone operation.
editor.command.executeRedo(): void
Example
editor.command.executeRedo()
Print
executePrint
Opens the browser print dialog.
editor.command.executePrint(): void
Example
editor.command.executePrint()
Notes
- Switches editor to print mode temporarily
- Uses
printPixelRatio option for quality
Search and Replace
executeSearch
Searches for text in the document.
editor.command.executeSearch(options: ISearchOption | null): void
Parameters
options
ISearchOption | null
required
Search configuration:{
value: string // Search text
matchCase?: boolean // Case-sensitive search
matchWholeWord?: boolean // Match whole words only
}
null to clear search Example
// Search for text
editor.command.executeSearch({
value: 'canvas',
matchCase: false,
matchWholeWord: false
})
// Clear search
editor.command.executeSearch(null)
executeSearchNavigatePre
Navigates to the previous search match.
editor.command.executeSearchNavigatePre(): void
Example
editor.command.executeSearchNavigatePre()
executeSearchNavigateNext
Navigates to the next search match.
editor.command.executeSearchNavigateNext(): void
Example
editor.command.executeSearchNavigateNext()
executeReplace
Replaces text in the document.
editor.command.executeReplace(options: IReplaceOption): void
Parameters
Replace configuration:{
value: string // Text to find
replaceValue: string // Replacement text
matchCase?: boolean // Case-sensitive
matchWholeWord?: boolean // Whole words only
isReplaceAll?: boolean // Replace all matches
}
Example
// Replace next occurrence
editor.command.executeReplace({
value: 'old text',
replaceValue: 'new text',
matchCase: false
})
// Replace all occurrences
editor.command.executeReplace({
value: 'old text',
replaceValue: 'new text',
isReplaceAll: true
})
Page Mode
executePageMode
Switches between paged and continuous modes.
editor.command.executePageMode(mode: PageMode): void
Parameters
Page mode:
PageMode.PAGING - Multi-page with breaksPageMode.CONTINUITY - Continuous scroll
Example
import { PageMode } from '@hufe921/canvas-editor'
// Switch to continuous mode
editor.command.executePageMode(PageMode.CONTINUITY)
// Switch to paged mode
editor.command.executePageMode(PageMode.PAGING)
Page Scale (Zoom)
executePageScale
Sets the page zoom level.
editor.command.executePageScale(scale: number): void
Parameters
Scale factor (e.g., 1 = 100%, 1.5 = 150%, 0.5 = 50%)
Example
// Zoom to 150%
editor.command.executePageScale(1.5)
// Zoom to 75%
editor.command.executePageScale(0.75)
executePageScaleAdd
Zooms in by a fixed increment.
editor.command.executePageScaleAdd(): void
Example
editor.command.executePageScaleAdd()
executePageScaleMinus
Zooms out by a fixed decrement.
editor.command.executePageScaleMinus(): void
Example
editor.command.executePageScaleMinus()
executePageScaleRecovery
Resets zoom to 100%.
editor.command.executePageScaleRecovery(): void
Example
editor.command.executePageScaleRecovery()
Paper Settings
executePaperSize
Sets the paper size.
editor.command.executePaperSize(width: number, height: number): void
Parameters
Example
// A4 size (at 96dpi)
editor.command.executePaperSize(794, 1123)
// Letter size
editor.command.executePaperSize(816, 1056)
executePaperDirection
Sets paper orientation.
editor.command.executePaperDirection(direction: PaperDirection): void
Parameters
PaperDirection.VERTICAL - PortraitPaperDirection.HORIZONTAL - Landscape
Example
import { PaperDirection } from '@hufe921/canvas-editor'
editor.command.executePaperDirection(PaperDirection.HORIZONTAL)
executeSetPaperMargin
Sets page margins.
editor.command.executeSetPaperMargin(margins: IMargin): void
Parameters
Margin configuration:{
top: number
right: number
bottom: number
left: number
}
Example
editor.command.executeSetPaperMargin({
top: 100,
right: 120,
bottom: 100,
left: 120
})
Mode Switching
executeMode
Switches editor mode.
editor.command.executeMode(mode: EditorMode): void
Parameters
Editor mode:
EditorMode.EDIT - Full editingEditorMode.READONLY - View onlyEditorMode.FORM - Form fillingEditorMode.CLEAN - Clean viewEditorMode.PRINT - Print previewEditorMode.DESIGN - Design modeEditorMode.GRAFFITI - Drawing mode
Example
import { EditorMode } from '@hufe921/canvas-editor'
// Switch to readonly
editor.command.executeMode(EditorMode.READONLY)
// Switch to form mode
editor.command.executeMode(EditorMode.FORM)
Focus & Blur
executeFocus
Focuses the editor at a specific position.
editor.command.executeFocus(options?: IFocusOption): void
Parameters
Focus options:{
rowNo?: number // Row number to focus
range?: IRange // Range to select
position?: LocationPosition // START or END
isMoveCursorToVisible?: boolean // Scroll into view
}
Example
import { LocationPosition } from '@hufe921/canvas-editor'
// Focus at start
editor.command.executeFocus({
position: LocationPosition.START
})
// Focus specific range
editor.command.executeFocus({
range: { startIndex: 10, endIndex: 20 },
isMoveCursorToVisible: true
})
executeBlur
Removes focus from the editor.
editor.command.executeBlur(): void
Example
editor.command.executeBlur()
Complete Example
import Editor, {
PageMode,
EditorMode,
PaperDirection
} from '@hufe921/canvas-editor'
const editor = new Editor(container, data)
// Search and replace
editor.command.executeSearch({
value: 'TODO',
matchCase: false
})
editor.command.executeSearchNavigateNext()
editor.command.executeReplace({
value: 'TODO',
replaceValue: 'DONE',
isReplaceAll: true
})
// Adjust page settings
editor.command.executePaperDirection(PaperDirection.HORIZONTAL)
editor.command.executePageScale(1.25)
// Switch to readonly and print
editor.command.executeMode(EditorMode.READONLY)
editor.command.executePrint()