change textViewer line display based on readingDirection

OCR4all · Jan 9, 2024 · 5ca96d3 · 5ca96d3
1 parent 8cb6ce3
commit 5ca96d3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/main/webapp/resources/js/viewer/actions.js b/src/main/webapp/resources/js/viewer/actions.js
@@ -408,7 +408,7 @@ function ActionAddTextLine(id, segmentID, points, text, editor, textViewer, segm
 				segmentation[page].segments[segmentID].textlines[id] = JSON.parse(JSON.stringify(_textLine));
 			}
 			editor.addTextLine(_textLine);
-			textViewer.addTextline(_textLine);
+			textViewer.addTextline(_textLine, segmentation[page].segments[segmentID].readingDirection);
 			controller.textlineRegister[_textLine.id] = segmentID;
 			console.log('Do - Add TextLine Polygon: {id:"' + _textLine.id + '",[..],text:"' + text + '"}');
 		}
@@ -461,7 +461,7 @@ function ActionRemoveTextLine(textline, editor, textViewer, segmentation, page,
 
 			segmentation[page].segments[_segmentID].textlines = JSON.parse(JSON.stringify(_oldTextLines));
 			editor.addTextLine(JSON.parse(JSON.stringify(_oldTextLine)));
-			textViewer.addTextline(JSON.parse(JSON.stringify(_oldTextLine)));
+			textViewer.addTextline(JSON.parse(JSON.stringify(_oldTextLine)), segmentation[page].segments[_segmentID].readingDirection);
 			if(removeROAction) removeROAction.undo();
 
 			controller.textlineRegister[textline.id] = _segmentID;

diff --git a/src/main/webapp/resources/js/viewer/controller.js b/src/main/webapp/resources/js/viewer/controller.js
@@ -256,7 +256,7 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 								textLine.type = "TextLine";
 							}
 							_editor.addTextLine(textLine);
-							_textViewer.addTextline(textLine);
+							_textViewer.addTextline(textLine, pageSegment.readingDirection);
 							if(textLine["baseline"]){
 								_editor.addBaseline(textLine, textLine["baseline"]);
 							}

diff --git a/src/main/webapp/resources/js/viewer/textViewer.js b/src/main/webapp/resources/js/viewer/textViewer.js
@@ -73,8 +73,16 @@ class TextViewer {
 	/**
 	 * Add a textline to the textView with a textline-image and textline-text element
 	 */
-	addTextline(textline) {
+	addTextline(textline, readingDirection) {
 		const $textlineContainer = $(`<div class='textline-container' data-id='${textline.id}' data-difflen='0'></div>`);
+		switch(readingDirection){
+			case "right-to-left":
+				$textlineContainer.attr("dir", "rtl");
+				break;
+			case "left-to-right":
+				$textlineContainer.attr("dir", "ltr");
+				break;
+		}
 		if(textline.type === "TextLine_gt"){
 			$textlineContainer.addClass("line-corrected")
 			$textlineContainer.addClass("line-saved");