@vitrosoftware/common-ui-ts 1.1.96 → 1.1.98

package/src/controls/PdfViewer/js/pdf-viewer.js

@@ -602,30 +602,37 @@ const PDFViewerApplication = {
   get initializedPromise() {
     return this._initializedCapability.promise;
   },
-  zoomIn(steps, scaleFactor) {
+  // @TODO.SA - changed
+  //zoomIn(steps, scaleFactor) {
+  zoomIn(steps, scaleFactor, isMouseEvt) {
     if (this.pdfViewer.isInPresentationMode) {
       return;
     }
     this.pdfViewer.increaseScale({
       drawingDelay: _app_options.AppOptions.get("defaultZoomDelay"),
       steps,
-      scaleFactor
+      scaleFactor,
+	  isMouseEvt // @TODO.SA - changed. Fix Zoom - mouse
     });
   },
-  zoomOut(steps, scaleFactor) {
+  // @TODO.SA - changed
+  //zoomOut(steps, scaleFactor) {
+  zoomOut(steps, scaleFactor, isMouseEvt) {
     if (this.pdfViewer.isInPresentationMode) {
       return;
     }
     this.pdfViewer.decreaseScale({
       drawingDelay: _app_options.AppOptions.get("defaultZoomDelay"),
       steps,
-      scaleFactor
+      scaleFactor,
+	  isMouseEvt // @TODO.SA - changed. Fix Zoom - mouse
     });
   },
   zoomReset() {
     if (this.pdfViewer.isInPresentationMode) {
       return;
     }
+    $(document).trigger('zoomResetStart'); // @TODO.SA - changed
     this.pdfViewer.currentScaleValue = _ui_utils.DEFAULT_SCALE_VALUE;
   },
   get pagesCount() {
@@ -2000,7 +2007,7 @@ function webViewerWheel(evt) {
   const isPinchToZoom = evt.ctrlKey && !PDFViewerApplication._isCtrlKeyDown && deltaMode === WheelEvent.DOM_DELTA_PIXEL && evt.deltaX === 0 && (Math.abs(scaleFactor - 1) < 0.05 || isBuiltInMac) && evt.deltaZ === 0;
   /* @TODO.SA - fix Zoom */
   if (isPinchToZoom || evt.ctrlKey && supportedMouseWheelZoomModifierKeys.ctrlKey || evt.metaKey && supportedMouseWheelZoomModifierKeys.metaKey) {
-    hidePageZoomCanvas();
+	hidePageZoomCanvas();
     hideNotesLayer();
   /* *** */
     evt.preventDefault();
@@ -2021,7 +2028,7 @@ function webViewerWheel(evt) {
         /* *** */
         PDFViewerApplication.zoomIn(null, scaleFactor);
       } else {
-        /* @TODO.SA - zoom without Ctrl-key */
+        /* @TODO.SA - zoom */
         showPageZoomCanvas();
         showNotesLayer();
         /* *** */
@@ -2044,12 +2051,14 @@ function webViewerWheel(evt) {
         /* @TODO.SA - fix Zoom Scale factor */
         ticks = -1;
         /* *** */
-        PDFViewerApplication.zoomOut(-ticks);
+        //PDFViewerApplication.zoomOut(-ticks);
+        PDFViewerApplication.zoomOut(-ticks, null, true);
       } else if (ticks > 0) {
         /* @TODO.SA - fix Zoom Scale factor */
         ticks = 1;
         /* *** */
-        PDFViewerApplication.zoomIn(ticks);
+        //PDFViewerApplication.zoomIn(ticks);
+        PDFViewerApplication.zoomIn(ticks, null, true);
       } else {
         /* @TODO.SA - zoom without Ctrl-key */
         showPageZoomCanvas();
@@ -3213,7 +3222,7 @@ const defaultOptions = {
     kind: OptionKind.WORKER
   },
   workerSrc: {
-    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.96",
+    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.98",
     kind: OptionKind.WORKER
   }
 };
@@ -9094,6 +9103,12 @@ class PDFViewer {
     return 1;
   }
   #setScale(value, options) {
+    // @TODO.SA - changed
+    if(this._currentScale != value) {
+      $(document).trigger('setScaleStart');
+    }
+    //
+
     let scale = parseFloat(value);
     if (scale > 0) {
       options.preset = false;
@@ -9688,7 +9703,9 @@ class PDFViewer {
   increaseScale({
     drawingDelay,
     scaleFactor,
-    steps
+    steps,
+	// @TODO.SA - changed
+	isMouseEvt
   } = {}) {
     if (!this.pdfDocument) {
       return;
@@ -9699,9 +9716,12 @@ class PDFViewer {
     } else {
       steps ??= 1;
       do {
-        /* @TODO.SA - fix Zoom Scale factor */
-        //newScale = Math.ceil((newScale * _ui_utils.DEFAULT_SCALE_DELTA).toFixed(2) * 10) / 10;
-        newScale = Math.round((newScale+getZoomOutScaleFactor()).toFixed(2) * 100) / 100;
+		/* @TODO.SA - fix Zoom Scale factor */
+		if(isMouseEvt) {
+			newScale = Math.round((newScale+getZoomOutScaleFactor()).toFixed(2) * 100) / 100;
+		} else {
+			newScale = Math.ceil((newScale * _ui_utils.DEFAULT_SCALE_DELTA).toFixed(2) * 10) / 10;
+		}
         /* *** */
       } while (--steps > 0 && newScale < _ui_utils.MAX_SCALE);
     }
@@ -9713,7 +9733,9 @@ class PDFViewer {
   decreaseScale({
     drawingDelay,
     scaleFactor,
-    steps
+    steps,
+	// @TODO.SA - changed
+	isMouseEvt
   } = {}) {
     if (!this.pdfDocument) {
       return;
@@ -9724,9 +9746,12 @@ class PDFViewer {
     } else {
       steps ??= 1;
       do {
-        /* @TODO.SA - fix Zoom Scale factor */
-        //newScale = Math.floor((newScale / _ui_utils.DEFAULT_SCALE_DELTA).toFixed(2) * 10) / 10;
-        newScale = Math.round((newScale-getZoomOutScaleFactor()).toFixed(2) * 100) / 100;
+		/* @TODO.SA - fix Zoom Scale factor */
+		if(isMouseEvt) {
+			newScale = Math.round((newScale-getZoomOutScaleFactor()).toFixed(2) * 100) / 100;	
+		} else {
+			newScale = Math.floor((newScale / _ui_utils.DEFAULT_SCALE_DELTA).toFixed(2) * 10) / 10;	
+		}
         /* *** */
       } while (--steps > 0 && newScale > _ui_utils.MIN_SCALE);
     }
@@ -12072,7 +12097,7 @@ class Toolbar {
       });
     });
     scaleSelect.addEventListener("change", function (e) {
-        if (e.detail.value === "custom") {
+      if (e.detail.value === "custom") {
             return;
         }
         self.eventBus.dispatch("scalechanged", {
@@ -13899,6 +13924,7 @@ function initContextMenuCanvas() {
     var pages = '#viewer .page';
     $.contextMenu({
         selector: pages,
+        trigger: 'right',
         items: {
             "addNote": {
                 name: "Add Note",
@@ -13917,11 +13943,15 @@ function initContextMenuCanvas() {
             }
         },
         build: function($triggerElement, e){
-            return {
-                callback: function(key, options){
-                    $(document).trigger(key, [options, $triggerElement, e]);
-                }
-            };
+            if($('.svgsketch-wrap').hasClass('measures')) {
+                return false;
+            } else {
+                return {
+                    callback: function(key, options){
+                        $(document).trigger(key, [options, $triggerElement, e]);
+                    }
+                };
+            }
         }
     });
 }
@@ -14694,6 +14724,9 @@ function normalizeNoteLabel270dg(pos, pageH) {
 }
 
 
+var label_deleteMeasure = "Delete Measure";
+var label_cancel = "Cancel";
+
 /* *** Sketchpad *** */
 var fillVal = 'none';
 var strokeColorVal = 'yellowgreen';
@@ -14707,25 +14740,342 @@ var offset = null;
 
 var isSketchpadActive = false;
 
+var measuresNodes = {};
+var isSketchpadMeasureActive = false;
+var measureStrokeColorVal = 'red';
+var measureStrokeWidthVal = 3;
+var measureFillVal = 'none';
+var measureBlockStrokeColorVal = 'blue'; // TODO
+var measureBlockStrokeWidthVal = 3; // TODO
+var measureFontSize = 16; 
+var measureFontFamily = 'Arial'; 
+var measureOutlineText = null;
+var measureOutlineTextBg = null;
+var measurePrecision = 0; // decimal symbols. TODO - calibration!
+var measureUnit = 'mm'; // TODO - calibration!
+var measurePxScale = 1; // TODO - calibration!
+var measureLast = null;
+
 var arrowMarkerAngle = 45;
 var arrowMarkerSize = 30;
 
 function initSketchpadCanvasByPageNr(pageNr) {
     $('#svgsketch-'+pageNr).svg({onLoad: function(svg) {
-            sketchpad[pageNr] = svg;
-            var surface = svg.rect(0, 0, '100%', '100%', {id: 'surface-'+pageNr, fill: 'transparent'});
-            $(surface).mousedown(function(eMousedown) {
-                startDrag(eMousedown, pageNr);
-            }).mousemove(function(eMousemove) {
-                dragging(eMousemove, pageNr);
-            }).mouseup(function(eMouseup) {
-                endDrag(eMouseup, pageNr);
-            });
-            resetSize(svg, '100%', '100%');
+        sketchpad[pageNr] = svg;
+        var surface = svg.rect(0, 0, '100%', '100%', {id: 'surface-'+pageNr, fill: 'transparent'});
+
+		createMeasureLineMarker(pageNr);
+		createMeasureTxtFilterBg(pageNr);
+
+		$(surface).mousedown(function(eMousedown) {
+			sketchpadCanvasMousedownHandler(eMousedown, pageNr);
+		}).mousemove(function(eMousemove) {
+			sketchpadCanvasMousemoveHandler(eMousemove, pageNr)
+		}).mouseup(function(eMouseup) {
+			sketchpadCanvasMouseupHandler(eMouseup, pageNr);
+		});
+
+        resetSize(svg, '100%', '100%');
         }
     });
 }
 
+function sketchpadCanvasMouseupHandler(eMouseup, pageNr) {
+	if(isSketchpadActive) {
+		endDrag(eMouseup, pageNr);
+	} else if(isSketchpadMeasureActive) {
+		endDragMeasure(eMouseup, pageNr);
+	}
+}
+
+function sketchpadCanvasMousemoveHandler(eMousemove, pageNr) {
+	if(isSketchpadActive) {
+		dragging(eMousemove, pageNr);
+	} else if(isSketchpadMeasureActive) {
+		draggingMeasure(eMousemove, pageNr);
+	}
+}
+
+function sketchpadCanvasMousedownHandler(eMousedown, pageNr) {
+	if(isSketchpadActive) {
+		startDrag(eMousedown, pageNr);
+	} else if(isSketchpadMeasureActive) {
+		startDragMeasure(eMousedown, pageNr);
+	}
+}
+
+function startDragMeasure(event, pageNr) {
+	startDrag(event, pageNr);
+}
+
+function isMeasureLine() {
+	return $('#btnMeasureLine').hasClass('active');
+}
+
+function isMeasureArea() {
+	return $('#btnMeasureArea').hasClass('active');
+}
+
+function getOutlineMeasureSettings() {
+	var settings = {
+        fill: measureFillVal,
+        stroke: measureStrokeColorVal,
+        strokeWidth: measureStrokeWidthVal,
+		id: 'tmpOutlineMeasure' 
+    };
+
+    return settings;
+}
+
+function getMeasureTextSettings() {
+	var settings = {
+		fontFamily: measureFontFamily,
+		fontSize: measureFontSize, 
+		fill: measureStrokeColorVal,
+		id: 'tmpOutlineMeasureTxt',
+		'font-weight': 'bold',
+		'text-anchor': 'middle'
+	};
+	
+	return settings;
+} 
+
+function getMeasureLineMarkerSettings() {
+	var settings = {
+		fill: measureFillVal,
+		stroke: measureStrokeColorVal
+	};
+	
+	return settings;
+} 
+
+function createMeasureLineMarker(pageNr) {
+	var measureLineMarkerStart = sketchpad[pageNr].marker('measureLineMarker'+pageNr, 2, 2, 4, 4, 'auto', getMeasureLineMarkerSettings());
+	sketchpad[pageNr].path(measureLineMarkerStart, 'M 2 0 L 2 4 M 0 4 L 4 0');	
+}
+
+function createMeasureTxtFilterBg(pageNr) {
+	var defs = sketchpad[pageNr].defs();
+	var filter = sketchpad[pageNr].filter(defs, 'txtFilterBg', 0, 0, 1, 1);
+	var filterHtml = '<feFlood flood-color="rgba(255,255,255, 0.85)" result="bg" />' +
+		'      <feMerge>' +
+		'        <feMergeNode in="bg"/>' +
+		'        <feMergeNode in="SourceGraphic"/>' +
+		'      </feMerge>';
+	$(filter).html(filterHtml);
+}
+
+function draggingMeasure(event, pageNr) {
+	if (!drawStart) {
+        return;
+    }
+	
+	if (!outline) {
+		var outlineSettings = getOutlineMeasureSettings();
+		var outlineTextSettings = getMeasureTextSettings();
+		outlineTextSettings.style = 'pointer-events: none; user-select: none;';
+		outlineTextSettings.filter = 'url(#txtFilterBg)';
+			
+		if(isMeasureLine()) {
+			// TODO: Path? - connectors for edit mode
+			// Measure Line
+			outlineSettings.markerStart = 'url(#measureLineMarker'+pageNr+')';
+			outlineSettings.markerEnd = 'url(#measureLineMarker'+pageNr+')';
+			outline = sketchpad[pageNr].line(0, 0, 0, 0, outlineSettings);
+			// Measure Text
+			measureOutlineText = sketchpad[pageNr].text(0, 0, '', outlineTextSettings);
+		} else if(isMeasureArea()) {
+			outline = sketchpad[pageNr].rect(0, 0, 0, 0, outlineSettings);
+			measureOutlineText = sketchpad[pageNr].text('', outlineTextSettings);
+		}
+			
+        $(outline).mouseup(function(e) {
+            endDragMeasure(e, pageNr);
+        });
+    }
+	
+	var otlineMeasureLabel;
+	var textWidth;
+	var textHeight;
+	
+	if(isMeasureLine()) {
+		sketchpad[pageNr].change(outline, {
+			x1: drawStart.X, 
+			y1: drawStart.Y, 
+			x2: (event.clientX - offset.left), 
+			y2: (event.clientY - offset.top)
+		});
+		
+		otlineMeasureLabel = getMeasureLineLabelByCoords(event.clientX, event.clientY);
+		$(sketchpad[pageNr].getElementById('tmpOutlineMeasureTxt')).html(otlineMeasureLabel);
+		
+		textWidth = measureOutlineText.getBBox().width;
+		textHeight = measureOutlineText.getBBox().height;
+		
+		textX = (drawStart.X + event.clientX - offset.left)/2;
+		textY = (drawStart.Y + event.clientY - offset.top)/2 + getMeasureLineTxtShiftY(drawStart.Y, event.clientY-offset.top);
+		
+	} else if(isMeasureArea()) {
+		var outlineWidth = Math.abs(event.clientX - offset.left - drawStart.X);
+		var outlineHeight = Math.abs(event.clientY - offset.top - drawStart.Y);
+		
+		sketchpad[pageNr].change(outline, {
+			x: Math.min(event.clientX - offset.left, drawStart.X),
+			y: Math.min(event.clientY - offset.top, drawStart.Y),
+			width: outlineWidth,
+			height: outlineHeight
+		});
+		
+		otlineMeasureLabel = getMeasureAreaLabelBySize(outlineWidth, outlineHeight);
+		$(sketchpad[pageNr].getElementById('tmpOutlineMeasureTxt')).html(otlineMeasureLabel);
+		
+		textWidth = measureOutlineText.getBBox().width;
+		textHeight = measureOutlineText.getBBox().height;
+
+		textX = (drawStart.X + event.clientX - offset.left)/2;
+		if(textWidth+10 > outlineWidth || textHeight+10 > outlineHeight) {
+			textY = Math.min(event.clientY - offset.top, drawStart.Y) - 10;
+		} else {
+			textY = (drawStart.Y + event.clientY - offset.top)/2 + 5;
+		}
+	}
+
+	sketchpad[pageNr].change(measureOutlineText, {x:textX, y:textY});
+	
+	if(isMeasureLine()) {
+		setMeasureLast(textX, textY, textWidth, textHeight, otlineMeasureLabel, getMeasureLinePxVal(event.clientX, event.clientY), 'line');
+	} else if(isMeasureArea()) {
+		setMeasureLast(textX, textY, textWidth, textHeight, otlineMeasureLabel, getMeasureAreaPxVal(outlineWidth, outlineHeight), 'rect');
+	}		
+    
+    event.preventDefault();
+}
+
+function getMeasureAreaLabelBySize(width, height) {
+	var measureVal = getMeasureAreaPxVal(width, height);
+	measureVal = getMeasureValSq(measureVal);
+	var measureLabel = getMeasureAreaLabel(measureVal);	
+	return measureLabel;
+}
+
+function getMeasureAreaPxVal(width, height) {
+	var areaVal = (width*height)/Math.pow(getPdfCanvasScale(), 2);
+	return areaVal;
+}
+
+function setMeasureLast(textX, textY, textW, textH, otlineMeasureLabel, pxVal, measureType) {
+	measureLast = {
+		txt: {
+			x: textX,
+			y: textY,
+			label: otlineMeasureLabel,
+			width: textW,
+			height: textH			
+		},
+		pxVal: pxVal,
+		type: measureType
+	};
+}
+
+function getMeasureLineTxtShiftY(yStart, y) {
+	if(Math.abs(y - yStart) > 10) {
+		return 5;
+	} else {
+		return -10;
+	}		
+}
+
+function getMeasureLineLabel(measureVal) {
+	var measureTxtVal = ' <tspan class="measure-val-lbl">' + measureVal  + '</tspan>' + ' <tspan class="measure-unit-lbl">' + measureUnit + '</tspan>';
+	return measureTxtVal;
+}
+
+function getMeasureAreaLabel(measureVal) {
+	var measureTxtVal = ' <tspan class="measure-val-lbl">' + measureVal  + '</tspan>'
+		+ ' <tspan class="measure-unit-lbl">' + measureUnit + '<tspan font-size="'+(measureFontSize-4)+'" dy="-6">2</tspan></tspan>';
+	return measureTxtVal;
+}
+
+function getMeasureLineLabelByCoords(clientX, clientY) {
+	var measureVal = getMeasureLinePxVal(clientX, clientY);
+	measureVal = getMeasureVal(measureVal);
+	var measureLabel = getMeasureLineLabel(measureVal);	
+	return measureLabel;
+}
+
+function getMeasureLinePxVal(clientX, clientY) {
+	var measureVal = Math.sqrt(Math.pow(Math.abs(clientX - offset.left - drawStart.X), 2) + Math.pow(Math.abs(clientY - offset.top - drawStart.Y), 2))/getPdfCanvasScale();
+	return measureVal;
+}
+
+function getMeasureValSqWithPxScale(measurePxVal) {
+	var measureVal = measurePxVal*Math.pow(measurePxScale, 2);
+	return measureVal;
+}
+
+function getMeasureValWithPxScale(measurePxVal) {
+	var measureVal = measurePxVal*measurePxScale;
+	return measureVal;
+}
+
+function getMeasureValWithPrecision(measureVal) {
+	if(measurePrecision) {
+		measureVal = measureVal.toFixed(measurePrecision);
+	} else {
+		measureVal = Math.round(measureVal);
+	}
+	
+	return measureVal;
+}
+
+function getMeasureValSq(measurePxVal) {
+	var measureVal = getMeasureValSqByPx(measurePxVal);
+	measureVal = getMeasureValSqWithPxScale(measureVal);
+	measureVal = getMeasureValWithPrecision(measureVal); 		
+	return measureVal;
+}
+
+function getMeasureVal(measurePxVal) {
+	var measureVal = getMeasureValByPx(measurePxVal);
+	measureVal = getMeasureValWithPxScale(measureVal);
+	measureVal = getMeasureValWithPrecision(measureVal);
+	return measureVal;
+}
+
+function getMeasureType() {
+	if(isMeasureArea())	{
+		return 'rect';
+	} else {
+		return 'line';	
+	}
+}
+
+function endDragMeasure(event, pageNr) {
+	if (!drawStart) {
+        return;
+    }
+
+    removeMeasureOutlineItems();
+
+	if(measureLast?.pxVal > 0) {
+		var shape = getMeasureType();
+		drawMeasure(drawStart.X, drawStart.Y, event.clientX - offset.left, event.clientY - offset.top, pageNr, shape);
+	}
+
+    drawStart = null;
+    event.preventDefault();
+}	
+
+function removeMeasureOutlineItems() {
+	$(measureOutlineText).remove();
+	$(measureOutlineTextBg).remove();
+	$(outline).remove();
+	
+	outline = null;
+	measureOutlineText = null;
+	measureOutlineTextBg = null;
+}
+
 function resetSize(svg, width, height) {
     svg.configure({width: width || $(svg._container).width(),
         height: height || $(svg._container).height()});
@@ -14818,6 +15168,209 @@ function isShapeTypeArrow() {
     return ($('#btnDrawArrow').length && $('#btnDrawArrow').hasClass('toggled'));
 }
 
+function getMeasureGrpId() {
+	// TODO	
+	var id = 'measure_'+Date.now();
+	return id;
+}	
+
+function getMeasureShapeId(measureGrpId) {
+	var id = measureGrpId + '_shape';
+	return id;
+}
+
+function getMeasureTxtId(measureGrpId) {
+	var id = measureGrpId + '_txt';
+	return id;
+}
+
+function drawMeasure(x1, y1, x2, y2, pageNr, shape) {
+	var left = Math.min(x1, x2);
+    var top = Math.min(y1, y2);
+    var right = Math.max(x1, x2);
+    var bottom = Math.max(y1, y2);
+	
+	var measureGrpId = getMeasureGrpId();
+	var measureGrp = sketchpad[pageNr].group(measureGrpId);
+	
+	var measureNode = null;
+	var measureText = null;
+	
+	var measureSettings = getOutlineMeasureSettings();
+	measureSettings.id = getMeasureShapeId(measureGrpId);
+	
+	var measureTextSettings = getMeasureTextSettings();
+	measureTextSettings.id = getMeasureTxtId(measureGrpId);
+	measureTextSettings.filter = 'url(#txtFilterBg)';
+
+	if (shape == 'rect') {
+	    measureNode = sketchpad[pageNr].rect(measureGrp, left, top, right - left, bottom - top, measureSettings);
+    } else if (shape == 'line') {
+		measureSettings.markerStart = 'url(#measureLineMarker'+pageNr+')';
+		measureSettings.markerEnd = 'url(#measureLineMarker'+pageNr+')';
+		measureNode = sketchpad[pageNr].line(measureGrp, x1, y1, x2, y2, measureSettings);
+    }
+	
+	//measureTextSettings.fontSize = measureTextSettings.fontSize*getPdfCanvasScale(); // ?
+	measureText = sketchpad[pageNr].text(measureGrp, measureLast.txt.x, measureLast.txt.y, '', measureTextSettings);
+	$(measureText).html(measureLast.txt.label);
+
+	// Bind context menu
+	bindMeasureContextMenu(measureSettings.id);
+	bindMeasureContextMenu(measureTextSettings.id);
+
+	var width = right - left;
+    var height = bottom - top;
+	var pagesRotation = getPdfPagesRotation();
+    var direction = getDrawDirectionByPagesRotation(x1, y1, x2, y2, pagesRotation);
+	
+	if(pagesRotation > 0) {
+		var measureData = {
+            pageNr: pageNr,
+            position: {
+                x: left,
+                y: top
+            },
+            width: width,
+            height: height
+        };
+        var measureSvgData = getNormalizedSvgData(measureData, pagesRotation);
+
+		var measureTxtSvgData = getMeasureTxtNormalizedSvgData(measureSvgData.position.x, measureSvgData.position.y, measureSvgData.width, measureSvgData.height, 
+				shape, measureLast.txt.width, measureLast.txt.height);
+		setMeasure(pageNr, measureGrpId, measureGrp, measureSvgData.position.x, measureSvgData.position.y, measureSvgData.width, measureSvgData.height,
+			shape, direction, measureLast.txt.label, {x:measureTxtSvgData.x, y:measureTxtSvgData.y, width:measureLast.txt.width, height: measureLast.txt.height}, 
+			measureLast.pxVal);
+	} else {
+		setMeasure(pageNr, measureGrpId, measureGrp, left, top, width, height, shape, direction, 
+					measureLast.txt.label, {x:measureLast.txt.x, y:measureLast.txt.y, width:measureLast.txt.width, height: measureLast.txt.height},
+					measureLast.pxVal);
+	}
+	
+	measureLast = null;	
+	
+	// TODO - save measure data to server
+	saveMeasure(pageNr, measureGrpId);
+	
+	$('#svgsketch-'+[pageNr]).focus();
+}
+
+function getMeasureTxtNormalizedSvgData(measureX, measureY, measureW, measureH, measureType, txtW, txtH) {
+	var textY;
+	var textX = (2*measureX + measureW)/2;
+
+	if(measureType == 'line') {
+		textY = (2*measureY + measureH)/2 + getMeasureLineTxtShiftY(measureY, measureY + measureH);
+	} else if(measureType == 'rect') {
+		if(txtW+10 > measureW || txtH+10 > measureH) {
+			textY = measureY - 10;
+		} else {
+			textY = (2*measureY + measureH)/2 + 5;
+		}
+	}
+	
+	var txtPosition = {
+		x: textX,
+		y: textY,
+		width: txtW,
+		height: txtH
+	};
+	
+	return txtPosition;
+}
+
+// TODO - save measure data to server
+function saveMeasure(pageNr, measureGrpId) {
+	// measuresNodes[pageNr][measureGrpId]
+}
+
+function bindMeasureContextMenu(measureElmId) {
+	$.contextMenu({
+		selector: '.svgsketch-wrap.active.measures #'+measureElmId,
+		trigger: 'left', // mouse button
+		callback: function(key, options, e) {
+			e.preventDefault();
+			e.stopPropagation();
+			$(document).trigger(key, [options.$trigger]);
+		},
+		items: {
+			"deleteMeasure": {
+				name: label_deleteMeasure,
+				icon: 'delete'
+			},
+			"sep1": "---------",
+			"quit": {
+				name: label_cancel,
+				icon: function(){
+					return 'context-menu-icon context-menu-icon-quit';
+				}
+			}
+		}
+	});
+}
+
+function bindDeleteMeasureEventHandler() {
+	$(document).on('deleteMeasure', function(e, item) {
+		var measureId = item.closest('g').attr('id');
+		var pageNr = item.closest('.page').attr('data-page-number');
+
+		// TODO -> Ajax -> send data to server
+		// ...
+		// on success -> deleteMeasure
+		deleteMeasure(measureId, pageNr);
+	});
+}
+
+function deleteMeasure(measureId, pageNr) {
+	delete measuresNodes[pageNr][measureId];
+	sketchpad[pageNr].getElementById(measureId).remove();
+}
+
+function setMeasure(pageNr, measureGrpId, measureGrp, posX, posY, width, height, shapeType, direction, measureLabel, txtOptions, measurePxVal) {
+    var scale = getPdfCanvasScale();
+	if(!measuresNodes[pageNr]) {
+		measuresNodes[pageNr] = {};		
+	}
+
+    measuresNodes[pageNr][measureGrpId] = {
+        data: {
+            id: measureGrpId,
+            pageNr: pageNr,
+            type: shapeType,
+            position: {
+                x: posX/scale,
+                y: posY/scale,
+            },
+            direction: direction,
+            width: width/scale,
+            height: height/scale,
+            stroke: {
+                color: measureStrokeColorVal,
+                width: measureStrokeWidthVal
+            },
+            fill: measureFillVal,
+			measureLabel: {
+				position: {
+					x: txtOptions.x/scale,
+					y: txtOptions.y/scale,
+				},
+				width: txtOptions.width,
+				height: txtOptions.height,
+				fontSize: measureFontSize,
+				fontFamily: measureFontFamily,
+				txt: measureLabel
+			},
+			measure: {
+				pxVal: measurePxVal,
+				pxScale: measurePxScale,
+				unit: measureUnit,
+				precision: measurePrecision
+			}
+        },
+        nodeObj: measureGrp
+    };
+}
+
 /* Draw the selected element on the canvas */
 function drawShape(x1, y1, x2, y2, pageNr, shape) {
 
@@ -15196,6 +15749,68 @@ function loadSvgShape(svgData) {
 
             setDrawNodes(svgData.pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, direction);
         // }, 50);
+        showNotesLayer();
+    }
+}
+
+
+function loadMeasureShape(measure) {
+	if(typeof measure === 'object' && measure !== null && measure !== false) {
+		
+        var scale = getPdfCanvasScale();
+		var pageNr = measure.data.pageNr;
+		var shape = measure.data.type;
+		var measureId = measure.data.id;
+		var measureObj = $('#'+measureId);
+
+        var pagesRotation = getPdfPagesRotation();
+        var nodeSvgData = measure.data;
+
+        if(pagesRotation > 0) {
+			nodeSvgData = getSvgDataWithRotation(measure.data, pagesRotation, scale);
+        }
+
+        if(measureObj.length) {
+			sketchpad[pageNr].remove(measureObj);
+        }
+
+        var x1 = nodeSvgData.position.x*scale;
+        var x2 = x1 + nodeSvgData.width*scale;
+        var y1 = nodeSvgData.position.y*scale;
+        var y2 = y1 + nodeSvgData.height*scale;
+
+        var direction = ('direction' in measure.data) ? measure.data.direction : false;
+			
+		var measureGrp = sketchpad[pageNr].group(measureId);
+
+		var measureNode = null;
+		var measureText = null;
+
+		var measureSettings = getOutlineMeasureSettings();
+		measureSettings.id = getMeasureShapeId(measureId);
+	
+		var measureTextSettings = getMeasureTextSettings();
+		measureTextSettings.id = getMeasureTxtId(measureId);
+		measureTextSettings.filter = 'url(#txtFilterBg)';
+
+		if (shape == 'rect') {
+			measureNode = sketchpad[pageNr].rect(measureGrp, x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale, measureSettings);
+		} else if (shape == 'line') {
+			measureSettings.markerStart = 'url(#measureLineMarker'+pageNr+')';
+			measureSettings.markerEnd = 'url(#measureLineMarker'+pageNr+')';
+			var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
+			measureNode = sketchpad[pageNr].line(measureGrp, linePos[0], linePos[1], linePos[2], linePos[3], measureSettings);
+		}
+		
+		var measureTxtData = getMeasureTxtNormalizedSvgData(x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale, 
+				shape, measure.data.measureLabel.width, measure.data.measureLabel.height);
+
+		//measureTextSettings.fontSize = measureTextSettings.fontSize*getPdfCanvasScale(); // ?
+		measureText = sketchpad[pageNr].text(measureGrp, measureTxtData.x, measureTxtData.y, '', measureTextSettings);
+
+		$(measureText).html(nodeSvgData.measureLabel.txt);
+
+		measuresNodes[pageNr][measureId].nodeObj = measureGrp;
     }
 }
 
@@ -15345,6 +15960,9 @@ function initSketchpadButtons() {
     initSketchpadBtnDrawCloud();
     initSketchpadBtnDrawLine();
     initSketchpadBtnDrawArrow();
+	
+    initSketchpadMeasureButtons();
+    bindDeactivateMenuSketchpadDrawButtons();
 }
 
 function initBtnDrawAnnotation() {
@@ -15353,6 +15971,8 @@ function initBtnDrawAnnotation() {
     btn.on('click', function() {
         $(this).toggleClass('toggled');
         if($(this).hasClass('toggled')) {
+			      untoggleBtnsMeasure();
+			      hideMeasureToolbar();	
             activateDrawAnnotation();
         } else {
             deactivateDrawAnnotation();
@@ -15363,7 +15983,6 @@ function initBtnDrawAnnotation() {
 
 function initBtnDrawAnnotationToolbar() {
     var btnDrawAnnotationToolbar =  $('#btnDrawAnnotationToolbarToggle');
-    var btnDrawAnnotation = $('#btnDrawAnnotation');
     btnDrawAnnotationToolbar.on('click', function() {
         $(this).toggleClass('toggled');
         if($(this).hasClass('toggled')) {
@@ -15372,17 +15991,6 @@ function initBtnDrawAnnotationToolbar() {
             hideDrawAnnotationToolbar();
         }
     });
-    $(document).on('click', '#btnCompare, #presentationMode, #print, #btnToggleNotes', function(e) {
-        hideDrawAnnotationToolbar();
-        btnDrawAnnotation.removeClass('toggled');
-        btnDrawAnnotationToolbar.removeClass('toggled');
-        if(($(this).attr('id') == 'btnToggleNotes' && !$(this).hasClass('show')) || $(this).attr('id') != 'btnToggleNotes') {
-            deactivateDrawAnnotation();
-            btnDrawAnnotation.prop('disabled', false);
-        } else if($(this).attr('id') == 'btnToggleNotes' && $(this).hasClass('show')) {
-            btnDrawAnnotation.prop('disabled', true);
-        }
-    });
     $(document).on('click', '#secondaryToolbarToggle', function(e) {
         hideDrawAnnotationToolbar();
         btnDrawAnnotationToolbar.removeClass('toggled');
@@ -15390,6 +15998,45 @@ function initBtnDrawAnnotationToolbar() {
     bindDrawAnnotationToolbarPositionOnWindowResize();
 }
 
+function bindDeactivateMenuSketchpadDrawButtons() {
+	$(document).on('click', '#btnCompare, #presentationMode, #print, #btnToggleNotes, #btnToggleMeasures', function(e) {
+		deactivateMenuSketchpadDrawAnnotationsButtons($(this));
+		deactivateMenuSketchpadDrawMeasuresButtons($(this));
+	});
+}
+
+function deactivateMenuSketchpadDrawAnnotationsButtons(elm) {
+	var btnDrawAnnotation = $('#btnDrawAnnotation');
+	var btnDrawAnnotationToolbar =  $('#btnDrawAnnotationToolbarToggle');
+
+	hideDrawAnnotationToolbar();
+	if(elm.attr('id') != 'btnToggleMeasures') {
+		btnDrawAnnotation.removeClass('toggled');
+	}
+	btnDrawAnnotationToolbar.removeClass('toggled');
+
+	if((elm.attr('id') == 'btnToggleNotes' && !elm.hasClass('show')) || elm.attr('id') != 'btnToggleNotes') {
+		deactivateDrawAnnotation();
+		btnDrawAnnotation.prop('disabled', false);
+	} else if(elm.attr('id') == 'btnToggleNotes' && elm.hasClass('show')) {
+		btnDrawAnnotation.prop('disabled', true);
+	}
+}
+
+function deactivateMenuSketchpadDrawMeasuresButtons(elm) {
+	var btnMeasuresToolbar = $('#btnMeasure');
+	if( elm.attr('id') != 'btnToggleNotes') {
+		untoggleBtnsMeasure();
+		hideMeasureToolbar();
+	}
+
+	if((elm.attr('id') == 'btnToggleMeasures' && !elm.hasClass('show')) || elm.attr('id') != 'btnToggleMeasures') {
+		btnMeasuresToolbar.prop('disabled', false);
+	} else if(elm.attr('id') == 'btnToggleMeasures' && elm.hasClass('show')) {
+		btnMeasuresToolbar.prop('disabled', true);
+	}
+}
+
 function activateDrawAnnotation() {
     var svgsketchWrap = $('.svgsketch-wrap');
     svgsketchWrap.addClass('active');
@@ -15469,9 +16116,92 @@ function bindSketchpadBtnOnclilckHandler(btnId, typeCssClass) {
         $('.btn-draw-annotation').not('#'+t_.attr('id')).removeClass('toggled');
         $('#btnDrawAnnotation').removeClass('rect ellipse polygon cloud line arrow').addClass(typeCssClass);
         hideDrawAnnotationToolbar();
+		    $('#btnDrawAnnotation').addClass('toggled');
+		    activateDrawAnnotation();
     });
 }
 
+function initSketchpadMeasureButtons() {
+	bindToggleMeasures();
+	bindMeasureToolbarBtnOnclickHandler();
+	bindMeasureLineBtnOnclickHandler();
+	bindMeasureAreaBtnOnclickHandler();
+}
+
+function bindMeasureToolbarBtnOnclickHandler() {
+	$(document).on('click', '#btnMeasure', function() {
+		$(this).toggleClass('toggled');
+		toggleMeasureToolbar();
+		if($(this).hasClass('toggled')) {
+			untoggleBtnsDrawNote();
+			activateMeasuresSketchpad();
+		} else {
+			$('.svgsketch-wrap').removeClass('active').removeClass('measures');
+			$('.measure-toolbar-btn').removeClass('active');
+		}
+	});
+}
+
+function hideMeasureToolbar() {
+	$('.measure-toolbar').removeClass('active');
+}
+
+function toggleMeasureToolbar() {
+	$('.measure-toolbar').toggleClass('active');	
+}
+
+function untoggleBtnsMeasure() {
+	$('.measure-toolbar-btn').removeClass('active');
+	$('#btnMeasure').removeClass('toggled');
+	$('.svgsketch-wrap').removeClass('measures');
+	isSketchpadMeasureActive = false;
+}
+
+// TODO - перепроверить!!!!! 
+function untoggleBtnsDrawNote() {
+	//$('.btn-draw-annotation').removeClass('toggled');
+	hideDrawAnnotationToolbar();
+	$('#btnDrawAnnotation').removeClass('toggled');
+	isSketchpadActive = false;
+}
+//
+ 
+function getSvgSketchWrap() {
+	return $('.svgsketch-wrap');
+}
+
+function activateMeasuresSketchpad() {
+	$('.svgsketch-wrap').addClass('active').addClass('measures');
+	$('#cursorSelectTool').click();
+}
+
+function bindMeasureBtnOnclickHandler(btnId, fnActive) {
+	$(document).on('click', '#'+btnId, function() {
+		$(this).toggleClass('active');
+		if($(this).hasClass('active')) {
+			var t_ = $(this);
+            $('.measure-toolbar-btn').not('#'+t_.attr('id')).removeClass('active');
+			
+			isSketchpadMeasureActive = true;
+			$('.svgsketch-wrap').addClass('active');
+			if($.isFunction(fnActive)) {
+				fnActive();
+			}
+		} else {
+			$('.svgsketch-wrap').removeClass('active');
+			isSketchpadMeasureActive = false;
+		}	
+	});
+}
+
+function bindMeasureLineBtnOnclickHandler() {
+	bindMeasureBtnOnclickHandler('btnMeasureLine', false);
+}
+
+function bindMeasureAreaBtnOnclickHandler() {
+	bindMeasureBtnOnclickHandler('btnMeasureArea', false);
+}
+
 function rotateRect90dg(rectPos, rectW, rectH, pageW) {
     var result = {
         position: {
@@ -15548,6 +16278,242 @@ function normalizeRect270dg(rectPos, rectW, rectH, pageH) {
     };
 
     return result;
+}
+
+function initMeasures() {
+	bindDeleteMeasureEventHandler();
+
+	// TODO -> load and set measures settings
+	initMeasuresSettings();
+	// TODO - load and set measures data
+	initMeasuresData();
+
+    $(document).on('webViewerPageRendered', function(e, pageNr) {
+		initMeasuresByPageNr(pageNr);
+
+        if($('#btnMeasure').hasClass('toggled')) {
+            $('.svgsketch-wrap').addClass('active').addClass('measures');
+        }
+    });
+
+	initDlgMeasures();
+}
+
+// TODO - load and set measures data
+function initMeasuresData() {
+	// measuresNodes = ...;
+}
+
+// TODO -> load and set measures settings
+function initMeasuresSettings() {
+	// measurePrecision = ...; // TODO
+	// measureUnit = ...; // TODO
+	// measurePxScale = ...; // TODO
+}
+
+function initMeasuresByPageNr(pageNr) {
+    doInitMeasuresByPageNr(pageNr);
+}
+
+function doInitMeasuresByPageNr(pageNr) {
+    var measuresList = measuresNodes[pageNr];
+    $.each(measuresList, function(index, options) {
+        loadMeasureShape(options);
+    });
+}
+
+function getMeasureValSqByPx(px) {
+	if(measureUnit == 'mm') {
+		return getMeasureMmValSqByPx(px);
+	} else if(measureUnit == 'cm') {
+		return getMeasureCmValSqByPx(px);
+	} else if(measureUnit == 'm') {
+		return getMeasureMValSqByPx(px);
+	}
+}
+
+function getMeasureMmValSqByPx(pxSq) {
+	var pixelRatio = getDevicePixelRatio();
+	var dpi = getDeviceDpi();
+	var mmValSq = (pxSq*Math.pow(25.4, 2))/Math.pow((dpi/pixelRatio), 2);
+
+	return mmValSq;
+}
+
+function getMeasureCmValSqByPx(pxSq) {
+	var cmValSq = getMeasureMmValSqByPx(pxSq)*0.01;
+
+	return cmValSq;
+}
+
+function getMeasureMValSqByPx(pxSq) {
+	var mValSq = getMeasureMmValSqByPx(pxSq)*0.000001;
+
+	return mValSq;
+}
+
+function getMeasureValByPx(px) {
+	if(measureUnit == 'mm') {
+		return getMeasureMmValByPx(px);
+	} else if(measureUnit == 'cm') {
+		return getMeasureCmValByPx(px);
+	} else if(measureUnit == 'm') {
+		return getMeasureMValByPx(px);
+	}
+}
+
+function getMeasureMmValByPx(px) {
+	var pixelRatio = getDevicePixelRatio();
+	var dpi = getDeviceDpi();
+	var mmVal = (px * 25.4) / (dpi/pixelRatio);
+
+	return mmVal;
+}
+
+function getMeasureCmValByPx(px) {
+	var cmVal = getMeasureMmValByPx(px)*0.1;
+	return cmVal;
+}
+
+function getMeasureMValByPx(px) {
+	var mVal = getMeasureMmValByPx(px)*0.001;
+	return mVal;
+}
+
+function getDevicePixelRatio() {
+	var devicePixelRatio = window.devicePixelRatio;
+	if(devicePixelRatio) {
+		return devicePixelRatio;
+	} else {
+		return 1;
+	}
+}
+
+function getDeviceDpi() {
+	var dpi = Detector.dpi;
+	if(dpi) {
+		return dpi;
+	} else {
+		return 96;
+	}
+}
+
+function initDlgMeasures() {
+	bindBtnMeasureSettingsOnclickHandler();
+	bindButtonsDlgMeasuresOnclickHandler();
+}
+function bindBtnMeasureSettingsOnclickHandler() {
+	$('#btnMeasuresSettings').on('click', function() {
+		showDlgOverlay();
+		showDlgMeasureSettings();
+	});
+}
+
+function showDlgMeasureSettings() {
+	$('.measures-dlg-wrap').show();
+}
+
+function hideDlgMeasureSettings() {
+	$('.measures-dlg-wrap').hide();
+}
+
+function bindButtonsDlgMeasuresOnclickHandler() {
+	bindDlgMeasuresBtnSave();
+	bindBtnDlgMeasuresCancel();
+	bindBtnDlgMeasuresClose();
+}
+
+function bindDlgMeasuresBtnSave() {
+	$('#btnMeasuresSettingsSave').on('click', function() {
+		saveMeasuresSettings();
+	});
+}
+
+function saveMeasuresSettings() {
+	var scaleNew = parseInt($('#measuresScale').val());
+	var unitsNew = $('#measuresUnits').val();
+	var precisionNew = parseInt($('#measuresPrecision').val());
+
+	if(scaleNew != measurePxScale || unitsNew != measureUnit || precisionNew != measurePrecision) {
+		measurePxScale = scaleNew;
+		measureUnit = unitsNew;
+		measurePrecision = precisionNew;
+
+		// TODO
+		doSaveMeasuresSettings();
+		// TODO
+		updateMeasuresData();
+	}
+	hideDlgOverlay();
+	hideDlgMeasureSettings();
+}
+
+// TODO - save to server
+function doSaveMeasuresSettings() {
+	// measurePxScale
+	// measureUnit
+	// measurePrecision
+}
+
+// TODO - update measures data and save to server
+function updateMeasuresData() {
+	$.each(measuresNodes, function(indexPage, measuresNodesPage) {
+		$.each(measuresNodesPage, function(indexItem, measuresNodesPageItem){
+			updateMeasure(measuresNodesPageItem);
+			// TODO - save to server
+			// measuresNodesPageItem['data']
+		});
+	});
+}
+
+function updateMeasure(measure) {
+	measure['data']['measure']['pxScale'] = measurePxScale;
+	measure['data']['measure']['unit'] = measureUnit;
+	measure['data']['measure']['precision'] = measurePrecision;
+
+	var measureVal;
+	var measureLabel;
+
+	if(measure['data']['type'] == 'line') {
+		measureVal = getMeasureVal(measure['data']['measure']['pxVal']);
+		measureLabel = getMeasureLineLabel(measureVal);
+	} else if(measure['data']['type']  == 'rect') {
+		measureVal = getMeasureValSq(measure['data']['measure']['pxVal']);
+		measureLabel = getMeasureAreaLabel(measureVal);
+	}
+
+	measure['data']['measureLabel']['txt'] = measureLabel;
+
+	var pageNr = measure['data']['pageNr'];
+
+	if(sketchpad[pageNr] && sketchpad[pageNr].getElementById(getMeasureTxtId(measure['data']['id']))
+		&& $(sketchpad[pageNr].getElementById(getMeasureTxtId(measure['data']['id']))).length) {
+
+		var measureTxt = sketchpad[pageNr].getElementById(getMeasureTxtId(measure['data']['id']));
+		$(measureTxt).html(measureLabel);
+		measure['data']['measureLabel']['width'] = measureTxt.getBBox().width;
+	}
+}
+
+function bindBtnDlgMeasuresCancel() {
+	$('#btnMeasuresSettingsCancel').click(function() {
+		hideDlgOverlay();
+		hideDlgMeasureSettings();
+	});
+}
+
+function bindBtnDlgMeasuresClose() {
+	$('.measures-dlg-header .close').click(function() {
+		hideDlgOverlay();
+		hideDlgMeasureSettings();
+	});
+}
+
+function bindToggleMeasures() {
+	$(document).on('click', '#btnToggleMeasures', function() {
+		$('#viewer').toggleClass('hide-measures');
+		$(this).toggleClass('show');
+	});
 }
 var needZoomEventsTimeout = 250; // ms
 var scrollStoppedEventsTimeout = 200; // ms
@@ -15563,10 +16529,34 @@ var firstTimeRendered = false; // for first check
 var pages = {};
 
 function initZoomPage() {
+    bindViewerZoomEventsHandler();
     bindZoomPageHandler();
     initZoomPageEvent();
 }
 
+function bindViewerZoomEventsHandler() {
+    bindViewerSetScaleStartEventHandler();
+    bindViewerZoomResetStartEventHandler();
+}
+
+function bindViewerSetScaleStartEventHandler() {
+    $(document).on('setScaleStart', function() {
+        setZoomCanvasTransparent();
+        hideNotesLayer();
+    });
+}
+
+function bindViewerZoomResetStartEventHandler() {
+    $(document).on('zoomResetStart', function() {
+        setZoomCanvasTransparent();
+        hideNotesLayer();
+    });
+}
+
+function setZoomCanvasTransparent() {
+    $('canvas.zoom').addClass('transparent');
+}
+
 function initZoomPageEvent() {
     PDFViewerApplication.initializedPromise.then(function() {
         // PDFViewerApplication.eventBus.on('webviewerloaded', function(e) {
@@ -17445,15 +18435,22 @@ lbl_hide = context.createLocale('app.viewer.pdf.compare.panel.hide');
 lbl_comparisonWarning = context.createLocale('app.viewer.pdf.compare.warning');
 
 
+var label_deleteMeasure = context.createLocale('app.viewer.pdf.contextMenu.deleteMeasure');
+var label_cancel = context.createLocale('app.viewer.pdf.contextMenu.cancel');
 function initContextMenuCanvas() {
     var pages = '#viewer .page';
     $.contextMenu({
         selector: pages,
+        trigger: 'right',
         items: {
             "addNote": {
                 name: context.createLocale('app.viewer.pdf.contextMenu.addNote'),
                 icon: "add"
             },
+            /*"showTxt": {
+                name: "Show / Hide Text",
+                icon: "page-facing-up", 
+            },*/
             "sep1": "---------",
             "quit": {
                 name: context.createLocale('app.viewer.pdf.contextMenu.cancel'),
@@ -17463,11 +18460,15 @@ function initContextMenuCanvas() {
             }
         },
         build: function ($triggerElement, e) {
-            return {
-                callback: function (key, options) {
-                    $(document).trigger(key, [options, $triggerElement, e]);
-                }
-            };
+            if ($('.svgsketch-wrap').hasClass('measures')) {
+                return false;
+            } else {
+                return {
+                    callback: function (key, options) {
+                        $(document).trigger(key, [options, $triggerElement, e]);
+                    }
+                };
+            }
         }
     });
 }
@@ -17786,6 +18787,7 @@ function bindSelect(select) {
             let value = $(e.target).attr('value');
             let text = $(e.target).text();
             $(input).val(text);
+            $(input).data('value', value)
             input.dispatchEvent(new CustomEvent('change', { detail: { value: value } }));
             $(select).removeClass('active');
         }
@@ -17817,6 +18819,7 @@ function bindBtnToggleSidebarNotes() {
 
         if ($(this).hasClass('toggled')) {
             if (!$('.body__sidebar').is(':visible')) {
+                $('#outerContainer').addClass('sidebarNotesOpen');
                 context.toggleIssueDetail(false);
                 if ($('#btnDrawAnnotation').hasClass('toggled')) {
                     $('#btnDrawAnnotation').click();
@@ -17825,11 +18828,20 @@ function bindBtnToggleSidebarNotes() {
                 expandSidebarNotes();
             }
         } else {
+            $('#outerContainer').removeClass('sidebarNotesOpen');
             $('.body__sidebar').hide();
         }
     });
 }
 
+function bindSidebarNotesClose() {
+    $('.body__sidebar-close').on('click', function () {
+        $('#outerContainer').removeClass('sidebarNotesOpen');
+        $('.body__sidebar').hide();
+        $('#btnToggleSidebarNotes').removeClass('toggled');
+    });
+}
+
 function saveNote(pageNr, $triggerElement, clickEvent, hasSvg, svgData) {
     var noteOptions = getNoteOptionsForSave('', pageNr, $triggerElement, clickEvent, hasSvg, svgData);
 
@@ -17977,7 +18989,7 @@ function initDlgForSvg(svgData) {
     saveNote(false, false, false, true, svgData);
 }
 
-function setDrawNodes(pageNr, nodeId, node, posX, posY, width, height, shapeType, color) {
+function setDrawNodes(pageNr, nodeId, node, posX, posY, width, height, shapeType, direction, color) {
     var scale = getPdfCanvasScale();
     drawNodes[nodeId] = {
         data: {
@@ -17988,6 +19000,7 @@ function setDrawNodes(pageNr, nodeId, node, posX, posY, width, height, shapeType
                 x: posX / scale,
                 y: posY / scale,
             },
+            direction: direction,
             width: width / scale,
             height: height / scale,
             stroke: {
@@ -18060,7 +19073,7 @@ function loadSvgShape(svgData) {
 
         var direction = ('direction' in svgData) ? svgData.direction : false;
 
-        setDrawNodes(svgData.pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, svgData.stroke.color);
+        setDrawNodes(svgData.pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, direction, svgData.stroke.color);
     }
 }
 
@@ -18075,12 +19088,12 @@ function bindUpdatePage() {
 }
 
 function updatePage(e) {
-    let item = e.detail.itemList[0];
-    let markup = JSON.parse(item.fieldValueMap.markup);
-    let page = markup ? markup.pageNr : null;
+    const item = e.detail.itemList[0];
+    const markup = JSON.parse(item.fieldValueMap.markup);
+    const page = markup ? markup.pageNr : null;
 
     if (e.type === context.deleteIssueEvent && markup) {
-        let markupData = { id: item.itemId, pageNr: page };
+        const markupData = { id: item.fieldValueMap.item_id, pageNr: page };
         removeSvg(markupData);
         context.initIssueList();
     }
@@ -18094,7 +19107,7 @@ function updatePage(e) {
             siteId: item.siteId
         };
 
-        let event = new CustomEvent('vitro.item.changed', {
+        const event = new CustomEvent('vitro.item.changed', {
             detail: {
                 itemIdList: [itemId],
                 listId: item.listId
@@ -18238,8 +19251,38 @@ function drawShape(x1, y1, x2, y2, pageNr, shape) {
     initDlgForSvg(drawNodes[nodeId]);
 
     deactivateDrawAnnotation();
+}
+
+function saveMeasuresSettings() {
+    var scaleNew = parseInt($('#measuresScale').data('value'));
+    var unitsNew = $('#measuresUnits').data('value');
+    var precisionNew = parseInt($('#measuresPrecision').data('value'));
+
+    let isChanged = false;
+    if (scaleNew && scaleNew != measurePxScale) {
+        measurePxScale = scaleNew;
+        isChanged = true;
+    }
+
+    if (unitsNew && unitsNew != measureUnit) {
+        measureUnit = unitsNew;
+        isChanged = true;
+    }
+
+    if (precisionNew && precisionNew != measurePrecision) {
+        measurePrecision = precisionNew;
+        isChanged = true;
+    }
+
+    if (isChanged) {
+        // TODO
+        doSaveMeasuresSettings();
+        // TODO
+        updateMeasuresData();
+    }
+    hideDlgOverlay();
+    hideDlgMeasureSettings();
 }
-
 $(document).ready(function() {
     context.openFile();
 
@@ -18252,6 +19295,9 @@ $(document).ready(function() {
     initSketchpadButtons();
 
     initNotes();
+
+    initMeasures();
+
     bindSidebarNotesClose();
     bindBtnToggleSidebarNotes();