Adding Text Labels in Ketcher File

Q

How to add text labels in a Ketcher file?

✍: FYIcenter.com

A

You can insert a "text" object structure into the "nodes" array to add a text label in a Ketcher file as shown below:

    {
        "type": "text",
        "data": {
            "content": <text-definition>,
            "position": <location-object>,
            "pos": <bounding-box>
        }
    }

The <text-definition> is a JSON encoded string defining the text label blocks and their display styles. For example, the following string defines a "Carbon Dioxide" label with the default display style:

"{\"blocks\":[{\"text\":\"Carbon Dioxide\",\"type\":\"unstyled\",
\"depth\":0,\"inlineStyleRanges\":[],\"entityRanges\":[],
\"data\":{}}],\"entityMap\":{}}"

The following string defines a "Carbon Dioxide" label with 2 words displayed in different styles:

"{\"blocks\":[{\"text\":\"Carbon Dioxide\",\"type\":\"unstyled\",
\"depth\":0,\"inlineStyleRanges\":[
  {\"offset\":0,\"length\":6,\"style\":\"BOLD\"},
  {\"offset\":0,\"length\":6,\"style\":\"CUSTOM_FONT_SIZE_12px\"},
  {\"offset\":7,\"length\":7,\"style\":\"ITALIC\"},
  {\"offset\":7,\"length\":7,\"style\":\"CUSTOM_FONT_SIZE_16px\"}],
\"entityRanges\":[],\"data\":{}}],\"entityMap\":{}}",

The <location-object> is 3-D coordinate object specifying the location of the top-left corner of the text label.

{ "x": 1, "y": -3, "z": 0 }

The <bounding-box> is an array of 3-D coordinates of the 4 corners of the bounding box of the text label, starting from the top-left corner, going counter clockwise to other corners.

[
    { "x": 1, "y": -2, "z": 0 },
    { "x": 1, "y": -3.5, "z": 0 },
    { "x": 3.45, "y": -3.5, "z": 0 },
    { "x": 3.45, "y": -3, "z": 0 }
]

Here is a Ketcher file representing a carbon dioxide molecule with a text label "Carbon Dioxide" displayed in mixed styles:

{
    "root": {
        "nodes": [
            { "$ref": "mol0" },
            {
                "type": "text",
                "data": {
                    "content": "{\"blocks\":[{\"key\":\"af55a\",\"text\":\"Carbon Dioxide\",\"type\":\"unstyled\",\"depth\":0,\"inlineStyleRanges\":[{\"offset\":0,\"length\":6,\"style\":\"BOLD\"},{\"offset\":0,\"length\":6,\"style\":\"CUSTOM_FONT_SIZE_12px\"},{\"offset\":7,\"length\":7,\"style\":\"ITALIC\"},{\"offset\":7,\"length\":7,\"style\":\"CUSTOM_FONT_SIZE_16px\"}],\"entityRanges\":[],\"data\":{}}],\"entityMap\":{}}",
                    "position": { "x": 0, "y": -1, "z": 0 },
                    "pos": [
                        { "x": 0, "y": -1, "z": 0 },
                        { "x": 0, "y": -2.5, "z": 0 },
                        { "x": 2.45, "y": -2.5, "z": 0 },
                        { "x": 2.45, "y": -2, "z": 0 }
                    ]
                }
            }
        ]
    },
    "mol0": {
        "type": "molecule",
        "atoms": [
            {
                "label": "O",
                "location": [ 0, 0, 0 ]
            },
            {
                "label": "C",
                "location": [ 1, 0, 0 ]
            },
            {
                "label": "O",
                "location": [ 2, 0, 0 ]
            }
        ],
        "bonds": [
            {
                "type": 1,
                "atoms": [ 0, 1 ]
            },
            {
                "type": 1,
                "atoms": [ 1, 2 ]
            }
        ]
    }
}

 

Ketcher File Structure for Reaction

Molecule with Substituted Functional Group

Ketcher File Format for Chemical Structures

⇑⇑ Ketcher - Chemical Structure Editor

2024-02-28, 182🔥, 0💬