TypeScript definitions
Config object
Below are the TypeScript type definitions for the config object and its descendents.
It is important to stress that in the main config object, type rtxConfig, all but one of the attributes is optional. The mandatory attribute is the host shape.
The instantiation can be very simple, for example:
js
const hostShape = new Konva.Shape()
layer.add(hostShape)
stage.add(layer)
const vwRtxInstance = new vwRtx({
host: hostShape,
text: "Hello world"
})js
export type rtxConfig = {
check?: boolean, // default false
stamp?: number, // automatic
autoWidth?: boolean, // default false
autoHeight?: boolean, // default true
bulletTypes?: any, // default is internal list
caretColor?: string, // default black
caretStyle?: string, // default bar
direction?: string, // currently fixed ltr
editMode?: boolean, // default false
font?: rtxConfigFont,
handleCursorStyles?: boolean, // default true
handleDraggable?: boolean, // default true
handleActivation?: boolean, // default true
handleStageClick?: boolean, // default true
handleTransformer?: boolean, // default true
host?: any, // is mandatory in use.
ignoreFunctionKeys?: boolean, // default true
langCode?: string, // currently fixed en
libName?: string, // currently fixed 'Konva'
license?: string, // blank for demo, or valid license string
lineWrap?: boolean, // currently fixed true
locked?: boolean, // default false
para?: rtxConfigPara
pilcrowMarks?: boolean, // default false
placeHolder?: string, // default blank string
selectionColor?: string, // default #AAAAAA
shape?: rtxConfigShape,
text?: string, // default blank string
textMode?: string, // default blank = vwRtx quality.
textDef?: rtxConfigTextDef // default undefined
transformerSelector?: string, // Konva transformer selector, e.g. .myTrans, #theTrans, Transformer. Default 'Transformer'
valign?: string, // default top
callbackCharChanged?: CallableFunction | undefined,
callbackActionListener?: CallableFunction | undefined,
callbackChangeListener?: CallableFunction | undefined,
callbackClickListener?: CallableFunction | undefined,
callbackActivationListener?: CallableFunction | undefined,
callbackPositionListener?: CallableFunction | undefined,
debug?: rtxConfigDebug // default all false
}
// An internal default font is used - see docs
export interface rtxConfigFont {
fill: string,
fontFamily: string,
fontSize: string,
fontVariant: string,
fontWeight: string,
highlightColor?: string,
italic: string,
letterSpacing?: number,
lineHeight: number,
strikeout: string,
stroke?: string | undefined | null,
underline: string
}
export type rtxConfigShape = {
[index: string]: string | number | undefined | any,
focusWhen?: string, // default Always
focusColor?: string, // default rgb(0, 191, 255, 0.6)
focusDash?: string, // default '4'
focusPadding?: number, // default 4
focusWidth?: number, // default 1
x?: number, // default 0
y?: number, // default 0
width?: number, // default 0
height?: number, // default 0
cornerRadius?: number, // default 0
padding?: number, // default 0
fill?: string, // default blank
stroke?: string, // default blank
strokeWidth?: number, // default 0
textBackgroundColor?: string, // default blank
highlightColor?: string, // default blank
}
export type rtxConfigPara = {
align?: string, // default left
bulletType?: string, // default blank
justify?: string, // default false
indent?: number, // default 0
indentIncrement?: number, // default 0
padding?: number, // default 0
squeeze?: number, // default 0
squeezeIncrement?: number, // default 0
runs?: rtxConfigTextParaRun [] // default empty
}
export type rtxConfigTextDef = {
fonts?: rtxConfigFont[], // default undefined
paras?: rtxConfigPara[] // default empty
}
export type rtxConfigTextParaRun = {
style?: number, // default undefined
text: string, // default blank string
chars?: string [] // internal use
}
export type rtxConfigDebug = {
hideText?: boolean, // default false
showBlockRect?: boolean, // default false
showShapeRect?: boolean, // default false
showOutputRect?: boolean, // default false
showClickRect?: boolean, // default false
showParaRect?: boolean, // default false
showLineRect?:boolean, // default false
showWordRect?: boolean, // default false
showCharRect?: boolean, // default false
showSpacesAsDots?: boolean, // default false
showShrinkRect?: boolean // default false
}Character position info TypeScript details
Below are the TypeScript types for the data object returned in the charchanged event. It is also availbale via the rtx.info getter.
js
// The types defined in the rtxInfo interface are detailed below
export interface rtxInfo {
config: rtxConfigInfo,
shape: rtxShapeInfo,
para: rtxParaInfo,
line: rtxLineInfo,
word: rtxWordInfo,
char: rtxCharInfo,
selection: rtxSelectionInfo
}
export interface rtxConfigInfo {
rtx_name: string,
rtx_id: string,
host_id: string,
autoWidth: boolean,
autoHeight: boolean,
locked: boolean,
editMode: boolean,
mode: string, // focused | activated | sleeping
handleDraggable: boolean,
handleActivation: boolean,
handleTransformer: boolean,
handleStageClick: boolean,
valign: string,
pilcrowMarks: boolean,
boxAvailable: string,
boxUsed: string,
boxShape: string
}
export interface rtxShapeInfo {
x: number,
y: number,
width: number,
height: number,
fill: string,
stroke: string,
strokeWidth: number,
cornerRadius: number,
padding: number,
textBackgroundColor: string
rect: string
}
export interface rtxParaInfo {
align: string,
bulletType: string,
bullet: string,
indent: number,
justify: string,
padding: number,
squeeze: number,
box: string
}
export interface rtxLineInfo {
box: string,
baselineOffset: number,
fontDescent: number
}
export interface rtxWordInfo {
box: string,
baselineOffset: number,
fontDescent: number,
text: string
}
export interface rtxCharInfo {
fontVariant: string,
fontSize: number,
fontWeight: string,
fontFamily: string,
italic: string,
underline: string,
fill: string,
stroke: string,
lineHeight: number,
highlightColor: string,
strikeout: string,
letterSpacing: number,
char: string,
box: string,
extraWidth: number,
charid: string,
charType: string,
fontScale: number,
fontAscent: number,
fontDescent: number
}
export interface rtxSelectionInfo {
hasSelection: boolean,
firstCharId: string,
firstChar: string,
lastCharId: string,
lastChar: string,
caretVisible: boolean,
caretCharId: string,
caretChar: string,
caretPos: string,
caretPosObject: {x: number, y: number, width: number, height: number},
length: number,
selectedCharIds: string[]
}The current selection information object
This object comes as a sub-object in the info object received by the charchanged event, and as the info object received by the selectionchanged event. It is also availbale via the rtx.selectionInfo getter.
js
export interface rtxSelectionInfo {
hasSelection: boolean,
firstCharId: string,
firstChar: string,
lastCharId: string,
lastChar: string,
caretVisible: boolean,
caretCharId: string,
caretChar: string,
caretPos: string,
caretPosObject: {x: number, y: number, width: number, height: number},
length: number,
selectedCharIds: string[]
}Based on the bahaviour of the selection and caret, when hasSelection is true, caretVisible will be false and the other caret* values will be empty. Similarly, when there is no selection, hasSelection will be false and the firstChar and lastChar entries will be blank.
To get detailed information on any of the chars from the *charId and selectedCharIds values, use rtx.charInfo.
Action event information object
When the action event is fired its second argument is an object of the following shape:
js
export interface rtxActionEventInfo {
eventName: string,
position?: any,
key?: string,
keyCode?: string,
alt?: boolean,
ctrl?: boolean,
shift?: boolean,
meta?: boolean,
}Note: When present, position is an {x, y} object.