Getting character information

Your app will likely require knowledge about the current state of vwRtx instance from time to time. For example, you may want to know information about the current character, or the characters in the selection.

vwRtx provides the charInfo(charId) method for this purpose.

What is a char id?

Internally, each letter that you see displayed in a vwRtx instance is assigned a unique id. The id is only uniquely assigned while the instance exists. The id's are prefixed with 'chr' and followed by an ascending number. Note that the numbers are not in ascending sequence of the charaters in the display - they are in the sequence that rtx met them in. Adding characters by typing or pasting a string will increase the character number, and deleting characters will make gaps in them. There are also additional special characters for line breaks and other special purposes.

DANGER

Do not rely on the char ids to have any specific sequence.

Getting character information

To get information about a character we need a charId. We can get useful charId information, for example, from the rtx.selectionInfo property. This returns information about either the character where the caret is located, or if there is a selection then it gives firstCharId and lastCharId and a list of all of the charId's for the selection. Here's am example.

Image of a sample selection.

For this example we instantiate a vwRtx instance as below. The user then double-clicks the word consectetur to make a selection, which produces the following response from the subsequent call to rtx.selectionInfo. From there we take the selectionInfo.firstCharId and use that to interogate the vwRtx instance for details of the first character in the selection.

Loading the sample

const rtx = new vwRtx({

    host: hostShape,

    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod..."

});

Response from rtx.selectionInfo

console.log("Selection info is ",  rtx.selectionInfo)

/* outputs 
{
    "firstCharId": "chr29",
    "firstChar": "c",
    "lastCharId": "chr40",
    "lastChar": " ",
    "caretCharId": "chr41",
    "caretChar": "a",
    "caretPos": "(578.02, 0)",
    "caretPosObject": {
        "x": 578.015625,
        "y": 0,
        "width": 1,
        "height": 48
    },
    "caretVisible": false,
    "hasSelection": true,
    "length": 12,
    "selectedCharIds": "chr29, chr30, chr31, chr32, chr33, chr34, chr35, chr36, chr37, chr38, chr39, chr40"
}
*/

Get chr29 font info

console.log("Char info is ",  rtx.charInfo("chr29"))

/* outputs
{
    "fontVariant": "normal",
    "fontWeight": "normal",
    "fontSize": 32,
    "fontFamily": "Arial",
    "stroke": "",
    "fill": "black",
    "lineHeight": 1.5,
    "highlightColor": "",
    "italic": "normal",
    "letterSpacing": 0,
    "strikeout": "",
    "underline": "",
    "char": "c",
    "box": "(403.7, 0) 16 x 48",
    "extraWidth": 0,
    "charid": "chr29",
    "charType": "letter",
    "fontScale": 1,
    "found": true
}
*/

If we use an invalid charId value in rtx.charInfo() then the value of found in the returned object will be false. Otherwise this value is true.