add basic readingDirection editing

scss/viewer.scss

@@ -628,23 +628,44 @@ body{
   position: absolute;
   max-height: 40%;
   overflow-y: auto;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
+  .card{
+    margin: 0;
+  }
   ul{
     padding: 0px;
     margin: 0px;
   }
   li{
     padding: 3px 10px !important;
-    min-height: 0px;
+    min-height: 0;
   }
   .legendicon{
     height: 10px;
     width: 10px;
     display: inline-block;
     margin-right: 4px;
   }
-  .contextTypeOption{
+  .select-directions{
+    ul{
+      padding: 0;
+      margin: 0;
+    }
+    li{
+      padding: 3px 10px !important;
+      min-height: 0;
+      border-bottom: 1px solid #e0e0e0;
+    }
+  }
+  .reading-direction-item{
+    cursor: pointer;
+    &:hover{
+      background-color: $color3;
+      color: $color2;
+    }
+  }
+  .contextTypeOption, .contextReadingDirectionOption {
     cursor: pointer;
     &:hover{
       background-color: $color3;
@@ -846,7 +867,7 @@ label{
   }
 }
 
-#kb-shortcut-modal-tabs{
+.tabs{
   overflow-x: hidden;
   .indicator{
     background-color: #0277bd;

src/main/webapp/WEB-INF/tags/contextmenu.tag

@@ -2,15 +2,48 @@
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
 <div id="contextmenu" class="card hide infocus">
-	<div class="select-regions">
-		<ul class="collection highlight">
-			<c:forEach var="type" items="${regionTypes}">
-				<c:if test="${!(type.key eq 'ignore')}">
-					<li class="collection-item contextTypeOption contextregionlegend" data-type="${type.key}">
-						<div class="legendicon ${type.key}"></div>${type.key}
-					</li>
-				</c:if>
-			</c:forEach>
-		</ul>
+	<div class="card">
+		<div class="card-tabs">
+			<ul class="tabs tabs-fixed-width" id="contextMenuTab">
+				<li class="tab"><a href="#types">Types</a></li>
+				<li class="tab"><a href="#directions">Reading Direction</a></li>
+			</ul>
+		</div>
+		<div class="card-content">
+			<div id="types">
+				<div class="select-regions">
+					<ul class="collection highlight">
+						<c:forEach var="type" items="${regionTypes}">
+							<c:if test="${!(type.key eq 'ignore')}">
+								<li class="collection-item contextTypeOption contextregionlegend" data-type="${type.key}">
+									<div class="legendicon ${type.key}"></div>${type.key}
+								</li>
+							</c:if>
+						</c:forEach>
+					</ul>
+				</div>
+			</div>
+			<div id="directions">
+				<div class="select-directions">
+					<ul class="collection highlight">
+						<li class="reading-direction-item contextReadingDirectionOption" data-direction="unspecified">
+							Unspecified
+						</li>
+						<li class="reading-direction-item contextReadingDirectionOption" data-direction="left-to-right">
+							Left To Right
+						</li>
+						<li class="reading-direction-item contextReadingDirectionOption" data-direction="right-to-left">
+							Right To Left
+						</li>
+						<li class="reading-direction-item contextReadingDirectionOption" data-direction="top-to-bottom">
+							Top To Bottom
+						</li>
+						<li class="reading-direction-item contextReadingDirectionOption" data-direction="bottom-to-top">
+							Bottom To Top
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>

src/main/webapp/resources/js/viewer/actions.js

@@ -209,6 +209,48 @@ function ActionChangeTypeSegment(id, newType, viewer, textViewer, controller, se
 	}
 }
 
+function ActionChangeReadingDirection(id, newDirection, viewer, textViewer, controller, selector, segmentation, page) {
+	let _isExecuted = false;
+	let _segment = segmentation[page].segments[id];
+	const _oldDirection = _segment.readingDirection;
+
+	this.execute = function () {
+		if (!_isExecuted) {
+			_isExecuted = true;
+			if(newDirection === "unspecified"){
+				_segment.readingDirection = null
+			}else{
+				_segment.readingDirection = newDirection
+			}
+
+			if(_segment.textlines){
+				let textlines = Object.entries(_segment.textlines).map(([_,t]) => t);
+				for(let textline of textlines){
+					textViewer.updateTextLineReadingDirection(textline, newDirection)
+				}
+			}
+
+			console.log('Do - Change Reading Direction: {id:"' + id + '",[..],readingDirection:"' + newDirection + '"}');
+		}
+	}
+	this.undo = function () {
+		if (_isExecuted) {
+			_isExecuted = false;
+			_segment.readingDirection = _oldDirection
+
+			if(_segment.textlines){
+				let textlines = Object.entries(_segment.textlines).map(([_,t]) => t);
+				for(let textline of textlines){
+					textViewer.updateTextLineReadingDirection(textline, _oldDirection)
+				}
+			}
+
+			console.log('Undo - Change Reading Direction: {id:"' + id + '",[..],readingDirection:"' + _oldDirection + '"}');
+		}
+	}
+
+}
+
 function ActionAddRegionArea(id, points, type, editor, settings) {
 	let _isExecuted = false;
 	const _area = { id: id, coords: {points: points, isRelative: true}, type: type };

src/main/webapp/resources/js/viewer/controller.js

@@ -1529,6 +1529,30 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 		}
 	}
 
+	this.changeReadingDirection = function(id, direction) {
+		const polygonType = this.getIDType(id);
+		if(polygonType === ElementType.SEGMENT && this.isIDTextRegion(id)){
+			const actionChangeReadingDirection = new ActionChangeReadingDirection(id, direction, _editor, _textViewer, this, _selector, _segmentation, _currentPage, false);
+			_actionController.addAndExecuteAction(actionChangeReadingDirection, _currentPage);
+		}
+	}
+
+	this.changeReadingDirectionSelected = function (direction){
+		const selected = _selector.getSelectedSegments();
+		const selectType = _selector.getSelectedPolygonType();
+		const selectedlength = selected.length;
+		if (selectType === ElementType.SEGMENT){
+			if (selectedlength || selectedlength > 0) {
+				const actions = [];
+				for (let i = 0; i < selectedlength; i++) {
+					if(this.isIDTextRegion(selected[i])) actions.push(new ActionChangeReadingDirection(selected[i], direction, _editor, _textViewer, this, _selector, _segmentation, _currentPage, false));
+				}
+				const multiChange = new ActionMultiple(actions);
+				_actionController.addAndExecuteAction(multiChange, _currentPage);
+			}
+		}
+	}
+
 	this.openRegionSettings = function (regionType) {
 		if(regionType){
 			let region = _settings.regions[regionType];

src/main/webapp/resources/js/viewer/gui.js

@@ -156,6 +156,8 @@ function GUI(canvas, viewer, colors, accessible_modes) {
 	this.openContextMenu = function (doSelected, id) {
 		const $contextmenu = $("#contextmenu");
 		$contextmenu.removeClass("hide");
+		const $contextMenuTab = $("#contextMenuTab")
+		$contextMenuTab.tabs("select_tab", "types");
 		const fitsInWindow = _mouse.y + $contextmenu.height() < $(window).height();
 
 		if (fitsInWindow) {

src/main/webapp/resources/js/viewer/guiInput.js

@@ -214,6 +214,20 @@ function GuiInput(navigationController, controller, gui, textViewer, selector, c
 		}
 		_gui.closeContextMenu();
 	});
+	$('.contextReadingDirectionOption').click(function () {
+		const $this = $(this);
+		const $contextmenu = $("#contextmenu");
+		const doSelected = $contextmenu.data('doSelected');
+		const readingDirection = $this.data('direction');
+
+		if (doSelected) {
+			_controller.changeReadingDirectionSelected(readingDirection);
+		} else {
+			const id = $contextmenu.data('id');
+			_controller.changeReadingDirection(id, readingDirection);
+		}
+		_gui.closeContextMenu();
+	});
 
 	$('#regioneditorSave').click(() => {
 		const $regioneditor = $('#regioneditor');

src/main/webapp/resources/js/viewer/textViewer.js

@@ -162,6 +162,22 @@ class TextViewer {
 		this._displayOnly();
 	}
 
+	updateTextLineReadingDirection(textline, readingDirection){
+		const $textlinecontent = $(`.textline-container[data-id='${textline.id}']`)
+
+		switch(readingDirection){
+			case "right-to-left":
+				$textlinecontent.attr("dir", "rtl");
+				break;
+			case "left-to-right":
+				$textlinecontent.attr("dir", "ltr");
+				break;
+			default:
+				$textlinecontent.removeAttr("dir")
+				break;
+		}
+	}
+
 	/**
 	 * Display a save of the contents of a textline
 	 *