epam / epam/Indigo

Display and Layout RTF from Metadata Fields in RDF

Open
#2,401 0 comments 0 reactions 0 assignees View on GitHub
MMPK
Dominant language
C++
Stars
406
Forks
134
Avg merge
2d 11h
Merged PRs (30d)
24

Description

**Background**
Ketcher currently lacks the capability to directly associate and display text blocks with specific reactions within chemical diagrams. This functionality is critical for providing contextual information and enhancing the understanding of chemical reactions. Implementing a feature to display text blocks with reactions and manage their position above and below reaction arrows will significantly improve the expressiveness and utility of chemical diagrams.

**Precondition**
Indigo can read Rich Text fields above and below reaction's arrow from RDF, convert to Ketcher text format, keep as Rich Text fields above and below reaction's arrow in the reaction's data model - [#2397](https://github.com/epam/Indigo/issues/2397)

**Solution**
1. Prepare text block:
**Truncated text will be lost!**

**Objective:** Truncate large text to layout reactions in readable format.
**Details:**
Text above and below reaction's arrow must fit a rectangle: maximum 6 default sizes of the bond for **width** and maximum 4 default sizes of the bond for **height**.
If text line is too long to fit maximum width, than it must be broken into several lines to fit maximum width. In this case, line break must before a word which is not fitting maximum width.
If a word is too wide to fit maximum width, than the line break should be added before the symbol which is not fitting maximum width.
Text exceeding these height limits will be truncated with an ellipsis ("..."): 2 last symbols of the last word which is not fitting maximum width should be replaced by ellipsis.

![Image](https://github.com/user-attachments/assets/e2d29338-e4db-4c0d-b6e8-507106e1a2b3)
![Image](https://github.com/user-attachments/assets/9ce23994-a369-4f9f-af3d-9d94aa74e9c6)

![Image](https://github.com/user-attachments/assets/9c880b6d-678f-4cd3-a3db-d8dd3696b231)
![Image](https://github.com/user-attachments/assets/19e16648-8976-42c6-8c8e-445c3b10c92b)

2. Dynamic Positioning and Alignment:

**Text Above Reaction Arrows:**
Text block sticked to reaction's arrow with a margin, **centered horizontally above a single arrow** or **aligned to the left for multi-tailed arrows**.
**Text Below Reaction Arrows:**
Text block sticked to reaction's arrow with a margin, following the same horizontal positioning rules as the text above.
![Image](https://github.com/user-attachments/assets/b9522e43-699a-4a43-9d55-cee9d5297678)

3. Automatic Layout Adjustments:

**Objective:** Dynamically adjust the layout of reaction diagrams based on the presence and size of text annotations.
**Details:**
The layout engine should modify the vertical spacing and positioning of reactions to accommodate blocks of text, ensuring a visually balanced and uncluttered diagram.
Multi-tailed arrow's spine hight should be adjusted to fit Text Above and Below Reaction Arrows and all the reactants.
Head arrow should be centred, as it is.

Without text:
![Image](https://github.com/user-attachments/assets/59588f46-f87f-417a-ab9e-8e17014f45e4)

With text:
![Image](https://github.com/user-attachments/assets/37b44b61-1b95-4eff-b896-ef8c8d9db401)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.