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:

Minimal config

const hostShape = new Konva.Shape()

layer.add(hostShape)
stage.add(layer)

const vwRtxInstance = new vwRtx({
    host: hostShape,

    text: "Hello world"
})

TypeScript types

  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
    
    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.currentCharInfo getter.

export interface rtxCharInfo {
  config: rtxCharInfoConfig,
  shape: rtxCharInfoShape,
  para: rtxCharInfoPara,
  line: rtxCharInfoLine,
  word: rtxCharInfoWord,
  char: rtxCharInfoChar,
  selection: rtxCharInfoSelection
}

export interface rtxCharInfoConfig {
  rtx_name: string,
  rtx_id: string,
  host_id: string,
  autoWidth: boolean,
  autoHeight: boolean,
  locked: boolean,
  editMode: boolean,
  handleDraggable: boolean,
  handleActivation: boolean,
  handleTransformer: boolean,
  handleStageClick: boolean,
  valign: string,
  pilcrowMarks: boolean,
  boxAvailable: string,
  boxUsed: string,
  boxShape: string
}
export interface  rtxCharInfoShape { 
  x: number,
  y: number,
  width: number,
  height: number,
  fill: string,
  stroke: string,
  strokeWidth: number,
  cornerRadius: number,
  padding: number,
  textBackgroundColor: string
  rect: string
}
export interface  rtxCharInfoPara { 
  align: string,
  bulletType: string,
  bullet: string,
  indent: number,
  justify: string,
  padding: number,
  squeeze: number,
  box: string
}
export interface  rtxCharInfoLine { 
  box: string,
  baselineOffset: number,
  fontDescent: number
}
export interface  rtxCharInfoWord { 
  box: string,
  baselineOffset: number,
  fontDescent: number,
  text: string
}
export interface  rtxCharInfoChar {  
  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
 
}

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.currentSelectionInfo getter.

export interface  rtxCharInfoSelection {   
  charId: string,
  cursorVisible: boolean,
  fromId: string,
  toId: string,
  hasSelection: boolean,
  length: number
}

Action event information object

When the action event is fired its second argument is an object of the following shape:

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.