feature: implement #323

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

@@ -181,6 +181,15 @@
 						</label>
 					</span>
 				</div>
+				<div class="segmentationToggle row">
+					<span class="col s12 switch">
+						<label>
+							<input id="togglePermanentSegmentHighlighting" type="checkbox">
+							<span class="lever"></span>
+							Permanently highlight segments
+						</label>
+					</span>
+				</div>
 				<div class="divider row"></div>
 				<div class="simplifyPolygonSettings row">
 					<a class="col s10 offset-s1 waves-effect waves-light btn simplifyPolygon segment-only tooltipped" data-position="bottom" data-delay="50" data-tooltip="Simplify selected polygon(s)">Simplify Polygon</a>

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

@@ -47,6 +47,9 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 	let _fixedGeometry = {};
 	let _editReadingOrder = false;
 	let _move = false;
+	let _state = {
+		isPermanentHighlightingActive: false,
+	}
 
 	let _newPolygonCounter = 0;
 	let _pastId;
@@ -1423,6 +1426,9 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 				_editor, _segmentation, _currentPage, this);
 
 			_actionController.addAndExecuteAction(actionAdd, _currentPage);
+			if(this.getState("isPermanentHighlightingActive")){
+				this.highlightSegment(newID)
+			}
 			this.openContextMenu(false, newID);
 		} else {
 			_gui.displayWarning("Region need at least three unique points. Region will be ignored.")
@@ -1881,6 +1887,14 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 			this.closeContextMenu();
 		}
 	}
+	this.highlightAllSegments = function(doHighlight = true){
+		const pageSegments = _segmentation[_currentPage] ? _segmentation[_currentPage].segments : null;
+		if (pageSegments) {
+			Object.keys(pageSegments).forEach((key) => {
+				this.highlightSegment(key, doHighlight)
+			})
+		}
+	}
 	this.highlightSegment = function (sectionID, doHighlight = true) {
 		if(doHighlight){
 			if (!_editor.isEditing || _editor.requiresSegmentHighlighting) {
@@ -1893,9 +1907,11 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 				}
 			}
 		}else{
-			_editor.highlightSegment(sectionID, doHighlight);
-			_gui.highlightSegment(sectionID, doHighlight);
-			_hoveredElement = null;
+			if(!_state.isPermanentHighlightingActive){
+				_editor.highlightSegment(sectionID, doHighlight);
+				_gui.highlightSegment(sectionID, doHighlight);
+				_hoveredElement = null;
+			}
 		}
 	}
 	this.getHoveredElement = function(){
@@ -2426,6 +2442,16 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 		return JSON.stringify(obj) === JSON.stringify({});
 	}
 
+	this.setState = function(property, state) {
+		_state[property] = state;
+	}
+
+	this.getState = function(property) {
+		if(_state[property] !== undefined){
+			return _state[property]
+		}
+	}
+
 	/** TextViewer
 	 * Updates prediction according to confidence settings
 	 *

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

@@ -96,13 +96,15 @@ function GUI(canvas, viewer, colors, accessible_modes) {
 				$('#sidebar-segment').addClass('hide');
 				$('#sidebar-lines').removeClass('hide');
 				$('#sidebar-text').addClass('hide');
+				this.resetHighlightToggle()
 				this.displayReadingOrder(false);
 				this.closeTextLineContent();
 				break;
 			case Mode.TEXT:
 				$('#sidebar-segment').addClass('hide');
 				$('#sidebar-lines').addClass('hide');
 				$('#sidebar-text').removeClass('hide');
+				this.resetHighlightToggle()
 				this.displayReadingOrder(false);
 				this.closeTextLineContent();
 				break;
@@ -955,6 +957,12 @@ function GUI(canvas, viewer, colors, accessible_modes) {
 		$("#toggleBaselineVisibility").prop("checked", false);
 	}
 
+	this.resetHighlightToggle = function(){
+		$("#togglePermanentSegmentHighlighting").prop("checked", false);
+		controller.setState("isPermanentHighlightingActive", false);
+		controller.highlightAllSegments(false);
+	}
+
 	this.updateOrientation = function(orientation){
 		$("#imageOrientation").val(orientation);
 	}

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

@@ -541,6 +541,16 @@ function GuiInput(navigationController, controller, gui, textViewer, selector, c
 		_textViewer._copyTextToClipboard(text);
 	})
 
+	$("#togglePermanentSegmentHighlighting").change(function () {
+		if(this.checked){
+			_controller.setState("isPermanentHighlightingActive", true);
+			_controller.highlightAllSegments(true);
+		} else {
+			_controller.setState("isPermanentHighlightingActive", false);
+			_controller.highlightAllSegments(false);
+		}
+	})
+
 	$("#toggleSegmentVisibility").change(function () {
 		if(this.checked){
 			_controller.hideAllSegments(true);

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

@@ -311,7 +311,9 @@ class Viewer {
 				if (doHighlight) {
 					polygon.fillColor.alpha = 0.6;
 				} else {
-					polygon.fillColor.alpha = polygon.fillColor.mainAlpha;
+					if(!controller.getState("isPermanentHighlightingActive")){
+						polygon.fillColor.alpha = polygon.fillColor.mainAlpha;
+					}
 				}
 			}
 		}