Support right to left languages

[amir-zeldes]

This would require flipping the container RTL for segmentation mode, and swapping all the offset signs for the relation structurer. The container should be set to RTL so that scrolling works correctly.

[mohamadi-sara20]

Hi,
can I ask if something has been done regarding RTL languages yet? I am using the tool for an RTL language and am willing to help, with a little guidance, if needed.

[amir-zeldes]

Hi @mohamadi-sara20 - it would be very nice if that was supported. If you're good with JavaScript you may be able to help us solve this.

Let me ask @lgessler what you think too: The Python code to render everything RTL is actually not so complicated; take a look at this:

a1e8aad#diff-f437b984a877bb1e2ae0babc54191aa9

It seems to work fine except when the window is resized, at which point all of the JSPlumb edges go crazy, as if the anchor points are staying behind even after the divs have moved due to resize. Do you have some intuition on how to update JSPlumb to the new positions? The divs seem to just accept that the container is RTL and .right is set, so they seem to be happy.

I uploaded an RTL demo document to the dev instance and hardwired it to RTL=True for testing.

[mat-sipahi]

@amir-zeldes I added a direction button to the Segmentation page which switches between rtl and ltr on front-end (I'm not sure if the same approach is applicable on structure page though): mat-sipahi@e13550c
I also played with your RTL branch dealing with structure page. One way to fix the problem with resizing is to set right position of the arrow and select elements instead of redrawing them; but I don't know where to add at and how to trigger it (it should be run on each page reload and each arrow added, right?).

[amir-zeldes]

Hi @mat-sipahi , thanks for looking into this - making this work in segmentation is also important. The page loading in RTL mode for structure seems to be working - everything renders correctly for me on load since the Python code is generating the correct initial state for RTL structure.

The problem seems to happen on the javascript side: when connecting two divs in RTL mode, arrows initially render correctly, because the anchor points for the jsplumb library work exactly the same in RTL and LTR mode. The problem I'm seeing is that on resize, the browser seems to remember some earlier positions of the anchor points from before the resize, and does not refresh the view correctly. This doesn't happen in LTR mode for some reason... Unfortunately I don't have time to look into this more deeply at the moment, but if you find a solution that doesn't disturb LTR mode, I'm happy to merge it into the next release.

[mat-sipahi]

@amir-zeldes The reason behind RTL resize problem is that jsplumb push the arrows on the canvas by fixing their left position (regardless of the direction mode), while the segment boxes are fixed by their right position if direction is RTL.
I think we can fix the problem by re-anchoring **jsplumb` shapes to right in RTL mode. I'll make an experiment and share it here.