feature: allow setting distance and time delta for double click actions

OCR4all · Aug 3, 2023 · a0e6e69 · a0e6e69
1 parent 89c488d
commit a0e6e69
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 1 deletion.
diff --git a/src/main/webapp/WEB-INF/tags/settingsModal.tag b/src/main/webapp/WEB-INF/tags/settingsModal.tag
@@ -0,0 +1,36 @@
+<%@tag description="Tag for changing and displaying the settings of a region" pageEncoding="UTF-8"%>
+<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+
+<div id="settings-modal" class="modal">
+    <div class="modal-content">
+        <h4>User Settings</h4>
+        <div class="row">
+            <form class="col s12" id="settingsForm">
+                <ul class="collapsible" data-collapsible="accordion">
+                <li>
+                    <div class="collapsible-header"><i class="material-icons">mouse</i>Input</div>
+                    <div class="collapsible-body">
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <input id="settingsDoubleClickTimeDelta" placeholder="2" type="number" class="validate">
+                                <label class="active" for="settingsDoubleClickTimeDelta">Double Click Time Delta (Maximum)</label>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="input-field col s12">
+                                <input id="settingsDoubleClickDistance" placeholder="10" type="number" class="validate">
+                                <label class="active" for="settingsDoubleClickDistance">Double Click Distance (Maximum)</label>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+                </ul>
+            </form>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <a id="saveUserSettings" class="col s12 waves-effect waves-light btn doSaveUserSettings tooltipped" data-position="left"
+           data-delay="50" data-tooltip="Save and apply the user settings">Save<i class="material-icons right">save</i></a>
+        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
+    </div>
+</div>
diff --git a/src/main/webapp/WEB-INF/views/editor.jsp b/src/main/webapp/WEB-INF/views/editor.jsp
@@ -88,6 +88,7 @@
 		<title>Larex - Editor</title>
 	</b:head>
 	<t:keyboardShortcutModal/>
+	<t:settingsModal />
 	<t:batchSegmentModal/>
 	<t:metadataModal/>
 	<body>
@@ -229,6 +230,7 @@
 					<t:menuIcon jsClass="hideTextView hide" icon="description"
 						tooltip="Switch to Page View">pageView</t:menuIcon>
 				</div>
+				<t:menuIcon jsClass="rightsideMenuIcon" id="openSettings" icon="settings_applications" tooltip="Open LAREX settings">Settings</t:menuIcon>
 				<t:menuIcon jsClass="rightsideMenuIcon" id="openFullscreen" icon="fullscreen" tooltip="Open LAREX in fullscreen">Fullscreen</t:menuIcon>
 				<t:menuIcon jsClass="rightsideMenuIcon" id="showShortcuts" icon="keyboard" tooltip="Show a list of available keyboard shortcuts">Shortcuts</t:menuIcon>
 				<t:menuIcon id="reloadProject" jsClass="rightsideMenuIcon" icon="refresh"

diff --git a/src/main/webapp/resources/js/viewer/controller.js b/src/main/webapp/resources/js/viewer/controller.js
@@ -50,6 +50,7 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 	let _state = {
 		isPermanentHighlightingActive: false,
 	}
+	let _userSettings = localStorage.hasOwnProperty("user-settings") ? JSON.parse(localStorage["user-settings"]) : {}
 
 	let _newPolygonCounter = 0;
 	let _pastId;
@@ -184,6 +185,7 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 			});
 
 			this.setMode(_mode);
+			this.applyUserSettings();
 		});
 	});
 
@@ -2299,6 +2301,14 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 			$("#batchNext").addClass("disabled");
 		}
 	}
+	this.toggleSettingsModal = function() {
+		const $settingsModal = $("#settings-modal");
+		if($settingsModal.hasClass("open")){
+			$settingsModal.modal("close");
+		}else{
+			$settingsModal.modal("open");
+		}
+	}
 	this.toggleShortcutModal = function(){
 		const $shortcutModal = $("#kb-shortcut-modal");
 		const $tab = $("#kb-shortcut-modal-tabs")
@@ -2452,6 +2462,31 @@ function Controller(bookID, accessible_modes, canvasID, regionColors, colors, gl
 		}
 	}
 
+	this.setUserSetting = function(setting, value) {
+		if(value){
+			_userSettings[setting] = value
+			localStorage.setItem("user-settings", JSON.stringify(_userSettings))
+			this.applyUserSettings()
+		}
+	}
+
+	this.getUserSetting = function(setting) {
+		if(_userSettings[setting] !== "undefined"){
+			return _userSettings[setting]
+		}
+	}
+
+	this.applyUserSettings = function() {
+		if(_userSettings["doubleClickDistance"]){
+			_editor.DoubleClickListener.setMaxDistance(_userSettings["doubleClickDistance"])
+			$("#settingsDoubleClickTimeDelta").val(_userSettings["doubleClickDistance"])
+		}
+		if(_userSettings["doubleClickTimeDelta"]){
+			_editor.DoubleClickListener.setMaxTime(_userSettings["doubleClickTimeDelta"])
+			$("#settingsDoubleClickDistance").val(_userSettings["doubleClickTimeDelta"])
+		}
+	}
+
 	/** TextViewer
 	 * Updates prediction according to confidence settings
 	 *

diff --git a/src/main/webapp/resources/js/viewer/editor.js b/src/main/webapp/resources/js/viewer/editor.js
@@ -1141,7 +1141,7 @@ setImage(id) {
 
 /* Adds double click functionality for paperjs canvas */
 class DoubleClickListener{
-	constructor(action = (pos) => {}, maxTime = 500, maxDistance = 20) {
+	constructor(action = (pos) => {}, maxTime = 2, maxDistance = 10) {
 		this._lastClickedTime = undefined;
 		this._lastClickedPosition = undefined;
 		this._maxTime = maxTime;
@@ -1171,4 +1171,12 @@ class DoubleClickListener{
 	setAction(action = (pos) => {}){
 		this._action = action;
 	}
+
+	setMaxTime(time) {
+		this._maxTime = time
+	}
+
+	setMaxDistance(distance) {
+		this._maxDistance = distance
+	}
 }
diff --git a/src/main/webapp/resources/js/viewer/guiInput.js b/src/main/webapp/resources/js/viewer/guiInput.js
@@ -476,6 +476,11 @@ function GuiInput(navigationController, controller, gui, textViewer, selector, c
 	$('.modeSelect').click(function() {
 		_controller.checkNextBatch();
 	});
+	$('.doSaveUserSettings').click(function () {
+		_controller.setUserSetting("doubleClickTimeDelta", $("#settingsDoubleClickTimeDelta").val());
+		_controller.setUserSetting("doubleClickDistance", $("#settingsDoubleClickDistance").val());
+		$(".modal").modal("close");
+	})
 	$("#batchSegmentation").click(function () {
 		if($("#batchSegmentation").is(":checked")) {
 			$("#batchWarning").removeClass("hide");
@@ -578,6 +583,7 @@ function GuiInput(navigationController, controller, gui, textViewer, selector, c
 	$('#showShortcuts').click(() => _controller.toggleShortcutModal());
 	$("#metadata-save").click(() => _controller.saveMetadata());
 	$("#openFullscreen").click(() => _gui.toggleFullscreen());
+	$("#openSettings").click(() => _controller.toggleSettingsModal())
 
 	let typewatch = function(){
 		let timer = 0;