Refactor Ruler class to centralize common functionality and enforce subclass implementation

- Converted ruler file into typescript
- created base class and subclass for Horizontal and vertical ruler
- Moved the `_updatePaintTimer` method to the base `Ruler` class to avoid duplication across `HRuler` and `VRuler`.
- Added `_updateBreakPoints` as an abstract-like method in the base class, throwing an error to enforce implementation in subclasses.
- Streamlined the initialization logic in `Ruler.initializeRuler` for better readability and modularity.

Signed-off-by: Darshan-upadhyay1110 <[email protected]>
Change-Id: I8f0187588ffab533e135023285acb3dcada832d4

Author: Darshan-upadhyay1110

browser/Makefile.am

@@ -456,8 +456,10 @@ COOL_JS_LST =\
 	src/control/Parts.js \
 	src/control/Scroll.js \
 	src/control/Styles.js \
-	src/control/Ruler.js \
+	src/control/Ruler.ts \
 	src/control/VRuler.ts \
+	src/control/HRuler.ts \
+	src/control/Ruler.ts \
 	src/slideshow/SlideCache.ts \
 	src/slideshow/SlideCompositor.ts \
 	src/slideshow/LayerRenderer.ts \
@@ -988,10 +990,11 @@ pot:
 		src/control/Control.Zotero.js \
 		src/control/Parts.js \
 		src/control/Permission.js \
-		src/control/Ruler.js \
+		src/control/Ruler.ts \
 		src/control/Signing.js \
 		src/control/Toolbar.js \
 		src/control/VRuler.ts \
+		src/control/Ruler.ts \
 		src/control/jsdialog/Definitions.Menu.ts \
 		src/control/jsdialog/Util.SnackbarController.ts \
 		src/control/jsdialog/Widget.ColorPicker.ts \

browser/css/leaflet.css

@@ -897,7 +897,8 @@ input.clipboard {
 	align-items: center;
 }
 
-.cool-ruler-tabstopcontainer {
+.cool-ruler-tabstopcontainer,
+.cool-ruler-horizontal-tabstopcontainer {
 	height: 100%;
 	position: absolute;
 }

browser/src/control/Control.UIManager.js

@@ -476,11 +476,11 @@ L.Control.UIManager = L.Control.extend({
 		if ((window.mode.isTablet() || window.mode.isDesktop()) && !app.isReadOnly()) {
 			var showRuler = this.getBooleanDocTypePref('ShowRuler');
 			var interactiveRuler = this.map.isEditMode();
-			var isRTL = document.documentElement.dir === 'rtl';
-			L.control.ruler({position: (isRTL ? 'topright' : 'topleft'), interactive:interactiveRuler, showruler: showRuler}).addTo(this.map);
-			if (!this.map.isPresentationOrDrawing())
-				L.control.vruler(this.map, {position: (isRTL ? 'topright' : 'topleft'), interactive:interactiveRuler, showruler: showRuler});
-			this.map.fire('rulerchanged');
+			// Call the static method from the Ruler class
+			app.definitions.ruler.initializeRuler(this.map, {
+				interactive: interactiveRuler,
+				showruler: showRuler
+			});
 		}
 	},