@vitrosoftware/common-ui-ts 1.1.111 → 1.1.113

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

@@ -18966,19 +18966,21 @@ const PDFViewerApplication = {
         let sidebarView = _app_options.AppOptions.get("sidebarViewOnLoad");
         let scrollMode = _app_options.AppOptions.get("scrollModeOnLoad");
         let spreadMode = _app_options.AppOptions.get("spreadModeOnLoad");
-        if (stored?.page && viewOnLoad !== ViewOnLoad.INITIAL) {
-          hash = `page=${stored.page}&zoom=${zoom || stored.zoom},` + `${stored.scrollLeft},${stored.scrollTop}`;
-          rotation = parseInt(stored.rotation, 10);
-          if (sidebarView === _ui_utils.SidebarView.UNKNOWN) {
-            sidebarView = stored.sidebarView | 0;
-          }
-          if (scrollMode === _ui_utils.ScrollMode.UNKNOWN) {
-            scrollMode = stored.scrollMode | 0;
-          }
-          if (spreadMode === _ui_utils.SpreadMode.UNKNOWN) {
-            spreadMode = stored.spreadMode | 0;
-          }
-        }
+        // @TODO.SA - changed
+        // Fix: always default scale = "auto"
+        //if (stored?.page && viewOnLoad !== ViewOnLoad.INITIAL) {
+        //  hash = `page=${stored.page}&zoom=${zoom || stored.zoom},` + `${stored.scrollLeft},${stored.scrollTop}`;
+        //  rotation = parseInt(stored.rotation, 10);
+        //  if (sidebarView === _ui_utils.SidebarView.UNKNOWN) {
+        //    sidebarView = stored.sidebarView | 0;
+        //  }
+        //  if (scrollMode === _ui_utils.ScrollMode.UNKNOWN) {
+        //    scrollMode = stored.scrollMode | 0;
+        //  }
+        //  if (spreadMode === _ui_utils.SpreadMode.UNKNOWN) {
+        //    spreadMode = stored.spreadMode | 0;
+        //  }
+        //}
         if (pageMode && sidebarView === _ui_utils.SidebarView.UNKNOWN) {
           sidebarView = (0, _ui_utils.apiPageModeToSidebarView)(pageMode);
         }
@@ -21206,7 +21208,7 @@ const defaultOptions = {
     kind: OptionKind.WORKER
   },
   workerSrc: {
-    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.111",
+    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.113",
     kind: OptionKind.WORKER
   }
 };
@@ -32242,24 +32244,24 @@ function createNote(pageNr, index, options) {
     note.html(options.content.label);
 
     var currentScale = getPdfCanvasScale();
-    var scalledOptions =  jQuery.extend(true, {}, options);
+    var scalledOptions = jQuery.extend(true, {}, options);
 
     // Change default label position for ellipse, polygon, line, arrow
-    if(scalledOptions.svg && (scalledOptions.svg.type == 'ellipse' || scalledOptions.svg.type == 'polygon')) {
-        scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height/2;
-    } else if(scalledOptions.svg && (scalledOptions.svg.type == 'line' || scalledOptions.svg.type == 'arrow')) {
-        if(scalledOptions.svg.direction == 'bltr') {
+    if (scalledOptions.svg && (scalledOptions.svg.type == 'ellipse' || scalledOptions.svg.type == 'polygon')) {
+        scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height / 2;
+    } else if (scalledOptions.svg && (scalledOptions.svg.type == 'line' || scalledOptions.svg.type == 'arrow' || scalledOptions.svg.type == 'msr_line')) {
+        if (scalledOptions.svg.direction == 'bltr') {
             scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height;
-        } else if(scalledOptions.svg.direction == 'trbl') {
+        } else if (scalledOptions.svg.direction == 'trbl') {
             scalledOptions.position.x = scalledOptions.position.x + scalledOptions.svg.width;
-        } else if(scalledOptions.svg.direction == 'brtl') {
+        } else if (scalledOptions.svg.direction == 'brtl') {
             scalledOptions.position.x = scalledOptions.position.x + scalledOptions.svg.width;
             scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height;
         }
     }
 
-    scalledOptions.position.x = scalledOptions.position.x*currentScale;
-    scalledOptions.position.y = scalledOptions.position.y*currentScale;
+    scalledOptions.position.x = scalledOptions.position.x * currentScale;
+    scalledOptions.position.y = scalledOptions.position.y * currentScale;
 
     var noteCssPosLeft = scalledOptions.position.x;
     var noteCssPosTop = scalledOptions.position.y;
@@ -32267,8 +32269,8 @@ function createNote(pageNr, index, options) {
 
     var pagesRotation = getPdfPagesRotation();
 
-    if(pagesRotation > 0) {
-        var noteNormalizedPosition = getNoteLabelPositionWithRotation({pageNr: pageNr, position: scalledOptions.position}, pagesRotation);
+    if (pagesRotation > 0) {
+        var noteNormalizedPosition = getNoteLabelPositionWithRotation({ pageNr: pageNr, position: scalledOptions.position }, pagesRotation);
         noteCssPosLeft = noteNormalizedPosition.x;
         noteCssPosTop = noteNormalizedPosition.y;
         noteCssTransform += ' rotate(' + pagesRotation + 'deg)';
@@ -32277,7 +32279,7 @@ function createNote(pageNr, index, options) {
     note.css('left', noteCssPosLeft + 'px');
     note.css('top', noteCssPosTop + 'px');
 
-	var pageElm = $('.page[data-page-number="' + pageNr + '"]');
+    var pageElm = $('.page[data-page-number="' + pageNr + '"]');
     note.css('transform', noteCssTransform);
 
     bindOnClickNote(note);
@@ -32359,7 +32361,7 @@ function initDlg(pageNr, $triggerElement, clickEvent) {
     });
 }
 
-function initDlgForSvg(svgData) {
+function initDlgForSvg(svgData, fnSuccess, fnCancel, fnSuccessParam, fnCancelParam) {
     createDlgElm();
 
     dialog = getDlgElm().dialog({
@@ -32369,17 +32371,24 @@ function initDlgForSvg(svgData) {
         modal: true,
         resizable: true,
         buttons: {
-            "Add Note": function() {
+            "Add Note": function () {
                 saveNote(false, false, false, true, svgData);
+                if ($.isFunction(fnSuccess)) {
+                    fnSuccess(fnSuccessParam);
+                }
                 closeDlg();
             },
-            Cancel: function() {
-                removeSvg(svgData.data); // remove SVG
+            Cancel: function () {
+                if ($.isFunction(fnCancel)) {
+                    fnCancel(fnCancelParam);
+                }
                 closeDlg();
             }
         },
-        close: function() {
-            removeSvg(svgData.data); // remove SVG
+        close: function () {
+            if ($.isFunction(fnCancel)) {
+                fnCancel(fnCancelParam);
+            }
             closeDlg();
         }
     });
@@ -32710,7 +32719,17 @@ function normalizeNoteLabel270dg(pos, pageH) {
 
 var label_deleteMeasure = "Delete Measure";
 var label_cancel = "Cancel";
-
+var label_measures2PointHint = "Click & drag to calibrate";
+var label_errMsgCalibrationTitle = 'Настройки не были сохранены.';
+var label_errMsgNoCalibrationItem = 'Создайте пожалуйста калибровочный отрезок.';
+var label_errMsgCalibrationSizeNotDefined = 'Заполните пожалуйста поле "Size" в форме настроек "Измерений".';
+
+var label_warningCalibrationPage_title = 'Внимание!';
+var label_warningCalibrationPage_body = 'Вы ушли со страницы, для которой производится калибровка измерений. ' +
+	'Вернитесь пожалуйста на калибруемую страницу или закройте диалог настроек "Измерений" (без сохранения).';
+var label_warningCalibrationPage_btnClose = 'Закрыть настройки (без сохранения)';
+var label_warningCalibrationPage_btnGoToPage = 'Перейти на страницу калибровки';
+var label_createAnnotation = 'Create annotation';
 /* *** Sketchpad *** */
 var fillVal = 'none';
 var strokeColorVal = 'yellowgreen';
@@ -32727,6 +32746,7 @@ var isSketchpadActive = false;
 var measuresNodes = {};
 var isSketchpadMeasureActive = false;
 var measureStrokeColorVal = 'red';
+var measureCalibrationStrokeColorVal = '#4092c3';
 var measureStrokeWidthVal = 3;
 var measureFillVal = 'none';
 var measureBlockStrokeColorVal = 'blue'; // TODO
@@ -32735,10 +32755,38 @@ var measureFontSize = 16;
 var measureFontFamily = 'Arial'; 
 var measureOutlineText = null;
 var measureOutlineTextBg = null;
+// Default measure settings
 var measurePrecision = 0; // decimal symbols. TODO - calibration!
 var measureUnit = 'mm'; // TODO - calibration!
 var measurePxScale = 1; // TODO - calibration!
+//
 var measureLast = null;
+// User defined measure settings
+var measuresPageSettings = {};
+/*
+var measuresPageSettings = {
+	{pageNr}: {
+		page: ...,
+		type: ...,
+		measurePrecision: ...,
+		measureUnit: ...,
+		measurePxScale: ...
+		calibrationSize: ...,
+		calibrationSizePx: ...,
+		user: ...,
+		date: ...
+	},
+	...
+}
+*/
+var isCalibrationLineChanged = false;
+var calibrationLineChangedDataOrg = false;
+
+var measureUnitLabel = {
+	'mm': 'мм',
+	'cm': 'см',
+	'm': 'м'
+};
 
 var arrowMarkerAngle = 45;
 var arrowMarkerSize = 30;
@@ -32748,7 +32796,9 @@ function initSketchpadCanvasByPageNr(pageNr) {
         sketchpad[pageNr] = svg;
         var surface = svg.rect(0, 0, '100%', '100%', {id: 'surface-'+pageNr, fill: 'transparent'});
 
-		createMeasureLineMarker(pageNr);
+		createMeasureLineMarker(pageNr, getMeasureLineMarkerId(pageNr), getMeasureLineMarkerSettings());
+		createMeasureLineMarker(pageNr, getMeasureCalibrationLineMarkerId(pageNr), getMeasureCalibrationLineMarkerSettings());
+		createMeasureLineMarker(pageNr, getMeasureNoteLineMarkerId(pageNr), getMeasureNoteLineMarkerSettings());
 		createMeasureTxtFilterBg(pageNr);
 
 		$(surface).mousedown(function(eMousedown) {
@@ -32775,7 +32825,7 @@ function sketchpadCanvasMouseupHandler(eMouseup, pageNr) {
 function sketchpadCanvasMousemoveHandler(eMousemove, pageNr) {
 	if(isSketchpadActive) {
 		dragging(eMousemove, pageNr);
-	} else if(isSketchpadMeasureActive) {
+	} else if(isSketchpadMeasureActive && drawStart) {
 		draggingMeasure(eMousemove, pageNr);
 	}
 }
@@ -32784,6 +32834,10 @@ function sketchpadCanvasMousedownHandler(eMousedown, pageNr) {
 	if(isSketchpadActive) {
 		startDrag(eMousedown, pageNr);
 	} else if(isSketchpadMeasureActive) {
+		if(isMeasuresCalibrationActive() && measuresNodes[pageNr] && (getCalibrationShapeId(pageNr) in measuresNodes[pageNr])) {
+			return false;
+		}
+
 		startDragMeasure(eMousedown, pageNr);
 	}
 }
@@ -32831,10 +32885,40 @@ function getMeasureLineMarkerSettings() {
 	};
 	
 	return settings;
-} 
+}
 
-function createMeasureLineMarker(pageNr) {
-	var measureLineMarkerStart = sketchpad[pageNr].marker('measureLineMarker'+pageNr, 2, 2, 4, 4, 'auto', getMeasureLineMarkerSettings());
+function getMeasureNoteLineMarkerSettings() {
+	var settings = {
+		fill: fillVal,
+		stroke: strokeColorVal
+	};
+
+	return settings;
+}
+
+function getMeasureCalibrationLineMarkerSettings() {
+	var settings = {
+		fill: measureFillVal,
+		stroke: measureCalibrationStrokeColorVal
+	};
+
+	return settings;
+}
+
+function getMeasureLineMarkerId(pageNr) {
+	return 'measureLineMarker'+pageNr;
+}
+
+function getMeasureNoteLineMarkerId(pageNr) {
+	return 'measureNoteLineMarker'+pageNr;
+}
+
+function getMeasureCalibrationLineMarkerId(pageNr) {
+	return 'measureLineMarker'+pageNr+'c';
+}
+
+function createMeasureLineMarker(pageNr, markerId, markerSettings) {
+	var measureLineMarkerStart = sketchpad[pageNr].marker(markerId, 2, 2, 4, 4, 'auto', markerSettings);
 	sketchpad[pageNr].path(measureLineMarkerStart, 'M 2 0 L 2 4 M 0 4 L 4 0');	
 }
 
@@ -32853,52 +32937,68 @@ 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()) {
+		if(isMeasuresCalibrationActive()) {
+			outlineSettings.stroke = measureCalibrationStrokeColorVal;
+		} else {
+			var outlineTextSettings = getMeasureTextSettings();
+			outlineTextSettings.style = 'pointer-events: none; user-select: none;';
+			outlineTextSettings.filter = 'url(#txtFilterBg)';
+		}
+
+		if(isMeasureLine() || isMeasuresCalibrationActive()) {
 			// TODO: Path? - connectors for edit mode
 			// Measure Line
-			outlineSettings.markerStart = 'url(#measureLineMarker'+pageNr+')';
-			outlineSettings.markerEnd = 'url(#measureLineMarker'+pageNr+')';
+			var markerId = isMeasuresCalibrationActive() ? getMeasureCalibrationLineMarkerId(pageNr) : getMeasureLineMarkerId(pageNr);
+			outlineSettings.markerStart = 'url(#'+markerId+')';
+			outlineSettings.markerEnd = 'url(#'+markerId+')';
 			outline = sketchpad[pageNr].line(0, 0, 0, 0, outlineSettings);
-			// Measure Text
-			measureOutlineText = sketchpad[pageNr].text(0, 0, '', outlineTextSettings);
+
+			if(!isMeasuresCalibrationActive()) {
+				// 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) {
+
+		$(outline).mouseup(function(e) {
             endDragMeasure(e, pageNr);
         });
     }
-	
+
 	var otlineMeasureLabel;
 	var textWidth;
 	var textHeight;
 	
-	if(isMeasureLine()) {
+	if(isMeasureLine() || isMeasuresCalibrationActive()) {
 		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);
-		
+
+		if(isMeasuresCalibrationActive()) {
+			textWidth = 0;
+			textHeight = 0;
+			textX = 0;
+			textY = 0;
+			otlineMeasureLabel = '';
+		} else {
+			otlineMeasureLabel = getMeasureLineLabelByCoords(event.clientX, event.clientY, pageNr);
+			$(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);
@@ -32910,7 +33010,7 @@ function draggingMeasure(event, pageNr) {
 			height: outlineHeight
 		});
 		
-		otlineMeasureLabel = getMeasureAreaLabelBySize(outlineWidth, outlineHeight);
+		otlineMeasureLabel = getMeasureAreaLabelBySize(outlineWidth, outlineHeight, pageNr);
 		$(sketchpad[pageNr].getElementById('tmpOutlineMeasureTxt')).html(otlineMeasureLabel);
 		
 		textWidth = measureOutlineText.getBBox().width;
@@ -32924,21 +33024,25 @@ function draggingMeasure(event, pageNr) {
 		}
 	}
 
-	sketchpad[pageNr].change(measureOutlineText, {x:textX, y:textY});
-	
-	if(isMeasureLine()) {
+	if(!isMeasuresCalibrationActive()) {
+		sketchpad[pageNr].change(measureOutlineText, {x:textX, y:textY});
+	}
+
+	if(isMeasureLine() || isMeasuresCalibrationActive()) {
 		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();
+	}
+
+	event.preventDefault();
 }
 
-function getMeasureAreaLabelBySize(width, height) {
+function getMeasureAreaLabelBySize(width, height, pageNr) {
+	var measurePageSettings = getMeasurePageSettings(pageNr);
 	var measureVal = getMeasureAreaPxVal(width, height);
-	measureVal = getMeasureValSq(measureVal);
-	var measureLabel = getMeasureAreaLabel(measureVal);	
+	measureVal = getMeasureValSq(measureVal, measurePageSettings.measurePxScale, measurePageSettings.measurePrecision, measurePageSettings.measureUnit);
+	var measureLabel = getMeasureAreaLabel(measureVal, measurePageSettings.measureUnit);
+
 	return measureLabel;
 }
 
@@ -32969,42 +33073,65 @@ function getMeasureLineTxtShiftY(yStart, y) {
 	}		
 }
 
-function getMeasureLineLabel(measureVal) {
-	var measureTxtVal = ' <tspan class="measure-val-lbl">' + measureVal  + '</tspan>' + ' <tspan class="measure-unit-lbl">' + measureUnit + '</tspan>';
+function getMeasureLineLabel(measureVal, measurePageUnit) {
+	var measureTxtVal = ' <tspan class="measure-val-lbl">' + measureVal  + '</tspan>' + ' <tspan class="measure-unit-lbl">' + measureUnitLabel[measurePageUnit] + '</tspan>';
 	return measureTxtVal;
 }
 
-function getMeasureAreaLabel(measureVal) {
+function getMeasureAreaLabel(measureVal, measurePageUnit) {
 	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>';
+		+ ' <tspan class="measure-unit-lbl">' + measureUnitLabel[measurePageUnit] + '<tspan font-size="'+(measureFontSize-4)+'" dy="-6">2</tspan></tspan>';
 	return measureTxtVal;
 }
 
-function getMeasureLineLabelByCoords(clientX, clientY) {
+function getMeasureLineLabelByCoords(clientX, clientY, pageNr) {
+	var measurePageSettings = getMeasurePageSettings(pageNr);
 	var measureVal = getMeasureLinePxVal(clientX, clientY);
-	measureVal = getMeasureVal(measureVal);
-	var measureLabel = getMeasureLineLabel(measureVal);	
+	measureVal = getMeasureVal(measureVal, measurePageSettings.measurePxScale, measurePageSettings.measurePrecision, measurePageSettings.measureUnit);
+	var measureLabel = getMeasureLineLabel(measureVal, measurePageSettings.measureUnit);
+
 	return measureLabel;
 }
 
+function getMeasurePageSettings(pageNr) {
+	var settings;
+	if(pageNr in measuresPageSettings) {
+		settings = measuresPageSettings[pageNr];
+	} else {
+		settings = getMeasureDefaultSettings();
+		settings.page = pageNr;
+	}
+	return settings;
+}
+
+function getMeasureDefaultSettings() {
+	var settings = {
+		type: 'scale',
+		measurePrecision: measurePrecision,
+		measureUnit: measureUnit,
+		measurePxScale: measurePxScale
+	};
+	return settings;
+}
+
 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);
+function getMeasureValSqWithPxScale(measurePxVal, measurePagePxScale) {
+	var measureVal = measurePxVal*Math.pow(measurePagePxScale, 2);
 	return measureVal;
 }
 
-function getMeasureValWithPxScale(measurePxVal) {
-	var measureVal = measurePxVal*measurePxScale;
+function getMeasureValWithPxScale(measurePxVal, measurePagePxScale) {
+	var measureVal = measurePxVal*measurePagePxScale;
 	return measureVal;
 }
 
-function getMeasureValWithPrecision(measureVal) {
-	if(measurePrecision) {
-		measureVal = measureVal.toFixed(measurePrecision);
+function getMeasureValWithPrecision(measureVal, measurePagePrecision) {
+	if(measurePagePrecision) {
+		measureVal = measureVal.toFixed(measurePagePrecision);
 	} else {
 		measureVal = Math.round(measureVal);
 	}
@@ -33012,17 +33139,17 @@ function getMeasureValWithPrecision(measureVal) {
 	return measureVal;
 }
 
-function getMeasureValSq(measurePxVal) {
-	var measureVal = getMeasureValSqByPx(measurePxVal);
-	measureVal = getMeasureValSqWithPxScale(measureVal);
-	measureVal = getMeasureValWithPrecision(measureVal); 		
+function getMeasureValSq(measurePxVal, measurePagePxScale, measurePagePrecision, measurePageUnit) {
+	var measureVal = getMeasureValSqByPx(measurePxVal, measurePageUnit);
+	measureVal = getMeasureValSqWithPxScale(measureVal, measurePagePxScale);
+	measureVal = getMeasureValWithPrecision(measureVal, measurePagePrecision);
 	return measureVal;
 }
 
-function getMeasureVal(measurePxVal) {
-	var measureVal = getMeasureValByPx(measurePxVal);
-	measureVal = getMeasureValWithPxScale(measureVal);
-	measureVal = getMeasureValWithPrecision(measureVal);
+function getMeasureVal(measurePxVal, measurePagePxScale, measurePagePrecision, measurePageUnit) {
+	var measureVal = getMeasureValByPx(measurePxVal, measurePageUnit);
+	measureVal = getMeasureValWithPxScale(measureVal, measurePagePxScale);
+	measureVal = getMeasureValWithPrecision(measureVal, measurePagePrecision);
 	return measureVal;
 }
 
@@ -33041,9 +33168,14 @@ function endDragMeasure(event, pageNr) {
 
     removeMeasureOutlineItems();
 
-	if(measureLast?.pxVal > 0) {
+	if(measureLast.pxVal > 0) {
 		var shape = getMeasureType();
 		drawMeasure(drawStart.X, drawStart.Y, event.clientX - offset.left, event.clientY - offset.top, pageNr, shape);
+
+		if(isMeasuresCalibrationActive()) {
+			deactivateMeasuresCalibration();
+			removeMeasuresCalibrationHint();
+		}
 	}
 
     drawStart = null;
@@ -33051,8 +33183,10 @@ function endDragMeasure(event, pageNr) {
 }	
 
 function removeMeasureOutlineItems() {
-	$(measureOutlineText).remove();
-	$(measureOutlineTextBg).remove();
+	if(!isMeasuresCalibrationActive()) {
+		$(measureOutlineText).remove();
+		$(measureOutlineTextBg).remove();
+	}
 	$(outline).remove();
 	
 	outline = null;
@@ -33073,7 +33207,8 @@ function startDrag(event, pageNr) {
         offset.top -= document.documentElement.scrollTop || document.body.scrollTop;
     }
     drawStart = {X: event.clientX - offset.left, Y: event.clientY - offset.top};
-    event.preventDefault();
+
+	event.preventDefault();
 }
 
 /* Provide feedback as we drag */
@@ -33174,7 +33309,13 @@ function drawMeasure(x1, y1, x2, y2, pageNr, shape) {
     var right = Math.max(x1, x2);
     var bottom = Math.max(y1, y2);
 	
-	var measureGrpId = getMeasureGrpId();
+	var measureGrpId;
+	if(isMeasuresCalibrationActive()) {
+		measureGrpId = 'calibration_'+pageNr;
+	} else {
+		measureGrpId = getMeasureGrpId();
+	}
+
 	var measureGrp = sketchpad[pageNr].group(measureGrpId);
 	
 	var measureNode = null;
@@ -33182,32 +33323,46 @@ function drawMeasure(x1, y1, x2, y2, pageNr, shape) {
 	
 	var measureSettings = getOutlineMeasureSettings();
 	measureSettings.id = getMeasureShapeId(measureGrpId);
-	
-	var measureTextSettings = getMeasureTextSettings();
-	measureTextSettings.id = getMeasureTxtId(measureGrpId);
-	measureTextSettings.filter = 'url(#txtFilterBg)';
+
+	if(isMeasuresCalibrationActive()) {
+		measureSettings.stroke = measureCalibrationStrokeColorVal;
+	} else  {
+		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+')';
+    } else if (shape == 'line' || isMeasuresCalibrationActive()) {
+		var markerId = isMeasuresCalibrationActive() ? getMeasureCalibrationLineMarkerId(pageNr) : getMeasureLineMarkerId(pageNr);
+		measureSettings.markerStart = 'url(#'+markerId+')';
+		measureSettings.markerEnd = 'url(#'+markerId+')';
 		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);
+
+	if(!isMeasuresCalibrationActive()) {
+		//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);
+	if(!isMeasuresCalibrationActive()) {
+		bindMeasureContextMenu(measureTextSettings.id);
+	}
 
 	var width = right - left;
     var height = bottom - top;
 	var pagesRotation = getPdfPagesRotation();
     var direction = getDrawDirectionByPagesRotation(x1, y1, x2, y2, pagesRotation);
-	
+
+    var txtOptions;
+
+	if(isMeasuresCalibrationActive()) {
+		txtOptions = {x:null, y:null, width: null, height: null};
+	}
+
 	if(pagesRotation > 0) {
 		var measureData = {
             pageNr: pageNr,
@@ -33220,25 +33375,42 @@ function drawMeasure(x1, y1, x2, y2, pageNr, shape) {
         };
         var measureSvgData = getNormalizedSvgData(measureData, pagesRotation);
 
-		var measureTxtSvgData = getMeasureTxtNormalizedSvgData(measureSvgData.position.x, measureSvgData.position.y, measureSvgData.width, measureSvgData.height, 
+        if(!isMeasuresCalibrationActive()) {
+			var measureTxtSvgData = getMeasureTxtNormalizedSvgData(measureSvgData.position.x, measureSvgData.position.y, measureSvgData.width, measureSvgData.height,
 				shape, measureLast.txt.width, measureLast.txt.height);
+			txtOptions = {x:measureTxtSvgData.x, y:measureTxtSvgData.y, width:measureLast.txt.width, height: 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);
+			shape, direction, measureLast.txt.label, txtOptions, 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);
+		if(!isMeasuresCalibrationActive()) {
+			txtOptions = {x:measureLast.txt.x, y:measureLast.txt.y, width:measureLast.txt.width, height: measureLast.txt.height};
+		}
+		setMeasure(pageNr, measureGrpId, measureGrp, left, top, width, height, shape, direction, measureLast.txt.label, txtOptions, measureLast.pxVal);
+	}
+
+	if(isMeasuresCalibrationActive()) {
+		setDlgMeasureSettings2PointSizePx(measureLast.pxVal);
 	}
 	
-	measureLast = null;	
-	
-	// TODO - save measure data to server
-	saveMeasure(pageNr, measureGrpId);
+	measureLast = null;
+
+	if(!isMeasuresCalibrationActive()) {
+		// TODO - save measure data to server
+		saveMeasure(pageNr, measureGrpId);
+	} else {
+		setCalibrationItemId(measureGrpId);
+		enableBtnMeasureSettingsDelete();
+	}
 	
 	$('#svgsketch-'+[pageNr]).focus();
 }
 
+function setCalibrationItemId(id) {
+	$('#measures2PointId').val(id);
+}
+
 function getMeasureTxtNormalizedSvgData(measureX, measureY, measureW, measureH, measureType, txtW, txtH) {
 	var textY;
 	var textX = (2*measureX + measureW)/2;
@@ -33278,6 +33450,10 @@ function bindMeasureContextMenu(measureElmId) {
 			$(document).trigger(key, [options.$trigger]);
 		},
 		items: {
+			"addMeasureNote": {
+				name: label_createAnnotation,
+				icon: "add"
+			},
 			"deleteMeasure": {
 				name: label_deleteMeasure,
 				icon: 'delete'
@@ -33293,10 +33469,48 @@ function bindMeasureContextMenu(measureElmId) {
 	});
 }
 
+function bindAddMeasureNoteEventHandler() {
+	$(document).on('addMeasureNote', function(e, item) {
+		var measureId = getMeasureIdByItem(item);
+		var pageNr = getMeasurePageByItem(item);
+		var measureNode = jQuery.extend(true, {}, measuresNodes[pageNr][measureId]);
+		measureNode.data.id = Date.now();
+		measureNode.data.type = addMeasureAnnotationTypePrefix(measureNode.data.type);
+		measureNode.data.stroke.color = strokeColorVal;
+		measureNode.data.stroke.width = strokeWidthVal;
+		delete measureNode.data.measure;
+
+		initDlgForSvg(measureNode, addMeasureNoteSuccessFn, false, [pageNr, measureId/*, measureNode.data.id*/], false);
+	});
+}
+
+function addMeasureAnnotationTypePrefix(type) {
+	return 'msr_' + type;
+}
+
+function addMeasureNoteSuccessFn(arrParams) {
+	var pageNr = arrParams[0];
+	var measureId = arrParams[1];
+	//var noteId = arrParams[2];
+
+	var measureNode = measuresNodes[pageNr][measureId];
+	measureNode.data.type = addMeasureAnnotationTypePrefix(measureNode.data.type);
+	delete measureNode.data.measure;
+	delete measuresNodes[pageNr][measureId];
+	$('#'+measureId).remove();
+
+	//
+	// TODO - remove measure data from server!!!
+	//
+
+	// load shape as note-shape
+	loadSvgShape(measureNode.data);
+}
+
 function bindDeleteMeasureEventHandler() {
 	$(document).on('deleteMeasure', function(e, item) {
-		var measureId = item.closest('g').attr('id');
-		var pageNr = item.closest('.page').attr('data-page-number');
+		var measureId = getMeasureIdByItem(item);
+		var pageNr = getMeasurePageByItem(item);
 
 		// TODO -> Ajax -> send data to server
 		// ...
@@ -33305,6 +33519,14 @@ function bindDeleteMeasureEventHandler() {
 	});
 }
 
+function getMeasureIdByItem(item) {
+	return item.closest('g').attr('id');
+}
+
+function getMeasurePageByItem(item) {
+	return item.closest('.page').attr('data-page-number');
+}
+
 function deleteMeasure(measureId, pageNr) {
 	delete measuresNodes[pageNr][measureId];
 	sketchpad[pageNr].getElementById(measureId).remove();
@@ -33316,6 +33538,8 @@ function setMeasure(pageNr, measureGrpId, measureGrp, posX, posY, width, height,
 		measuresNodes[pageNr] = {};		
 	}
 
+	var settings = getMeasurePageSettings(pageNr);
+
     measuresNodes[pageNr][measureGrpId] = {
         data: {
             id: measureGrpId,
@@ -33346,9 +33570,9 @@ function setMeasure(pageNr, measureGrpId, measureGrp, posX, posY, width, height,
 			},
 			measure: {
 				pxVal: measurePxVal,
-				pxScale: measurePxScale,
-				unit: measureUnit,
-				precision: measurePrecision
+				pxScale: settings.measurePxScale,
+				unit: settings.measureUnit,
+				precision: settings.measurePrecision
 			}
         },
         nodeObj: measureGrp
@@ -33432,7 +33656,7 @@ function drawShape(x1, y1, x2, y2, pageNr, shape) {
 
     $('#svgsketch-'+[pageNr]).focus();
 
-    initDlgForSvg(drawNodes[nodeId]);
+    initDlgForSvg(drawNodes[nodeId], false, removeSvg, false, drawNodes[nodeId].data);
 }
 
 function getArrowPath(x1, y1, x2, y2) {
@@ -33678,6 +33902,7 @@ function loadSvgShape(svgData) {
     if(typeof svgData === 'object' && svgData !== null && svgData !== false) {
 
         // setTimeout(function() {
+			var pageNr = svgData.pageNr;
             var scale = getPdfCanvasScale();
 
             var node = null;
@@ -33697,7 +33922,7 @@ function loadSvgShape(svgData) {
             // }
 
             if(drawNodes[svgData.id]) {
-                sketchpad[svgData.pageNr].remove(drawNodes[svgData.id].nodeObj);
+                sketchpad[pageNr].remove(drawNodes[svgData.id].nodeObj);
             }
 
             var x1 = nodeSvgData.position.x*scale;
@@ -33707,31 +33932,63 @@ function loadSvgShape(svgData) {
 
             var direction = ('direction' in svgData) ? svgData.direction : false;
 
+            var msrGrp;
+            var msrNode;
+            if(svgData.type == 'msr_rect' || svgData.type == 'msr_line') {
+				msrGrp = sketchpad[pageNr].group(svgData.id);
+				settings.id = getMeasureShapeId(svgData.id);
+
+				node = msrGrp;
+			}
+
             if (svgData.type == 'rect') {
-                node = sketchpad[nodeSvgData.pageNr].rect(x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale, settings);
+                node = sketchpad[pageNr].rect(x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale, settings);
             } else if(svgData.type == 'ellipse') {
                 var rx = nodeSvgData.width*scale / 2;
                 var ry = nodeSvgData.height*scale / 2;
-                node = sketchpad[nodeSvgData.pageNr].ellipse(x1 + rx, y1 + ry, rx, ry, settings);
+                node = sketchpad[pageNr].ellipse(x1 + rx, y1 + ry, rx, ry, settings);
             } else if(svgData.type == 'polygon') {
                 var polygonPos = getPolygonPosByPageRotation(x1, y1, x2, y2, pagesRotation);
-                node = sketchpad[nodeSvgData.pageNr].polygon(polygonPos, settings);
+                node = sketchpad[pageNr].polygon(polygonPos, settings);
             } else if(svgData.type == 'cloud') {
                 var cloudPath = getCloudPath(x1, y1, x2, y2);
-                node = sketchpad[nodeSvgData.pageNr].path(cloudPath, settings);
+                node = sketchpad[pageNr].path(cloudPath, settings);
             }  else if(svgData.type == 'line') {
                 var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
-                node = sketchpad[nodeSvgData.pageNr].line(linePos[0], linePos[1], linePos[2], linePos[3], settings);
+                node = sketchpad[pageNr].line(linePos[0], linePos[1], linePos[2], linePos[3], settings);
             }  else if(svgData.type == 'arrow') {
                 var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
                 var arrowPath = getArrowPath(linePos[0], linePos[1], linePos[2], linePos[3]);
-                node = sketchpad[nodeSvgData.pageNr].path(arrowPath, settings);
-            }
+                node = sketchpad[pageNr].path(arrowPath, settings);
+            } else if(svgData.type == 'msr_line') {
+				var markerId = getMeasureNoteLineMarkerId(pageNr);
+				settings.markerStart = 'url(#'+markerId+')';
+				settings.markerEnd = 'url(#'+markerId+')';
+				var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
+				msrNode = sketchpad[pageNr].line(msrGrp, linePos[0], linePos[1], linePos[2], linePos[3], settings);
+			} else if(svgData.type == 'msr_rect') {
+				msrNode = sketchpad[pageNr].rect(msrGrp, x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale, settings);
+			}
 
-            var direction = ('direction' in svgData) ? svgData.direction : false;
+            if(svgData.type == 'msr_line' || svgData.type == 'msr_rect') {
+            	var measureTextSettings = getMeasureTextSettings();
+				measureTextSettings.fill = strokeColorVal;
+				measureTextSettings.id = getMeasureTxtId(svgData.id);
+				measureTextSettings.filter = 'url(#txtFilterBg)';
+				var shape = svgData.type.replace('msr_', '');
+
+				var measureTxtData = getMeasureTxtNormalizedSvgData(x1, y1, nodeSvgData.width*scale, nodeSvgData.height*scale,
+					shape, svgData.measureLabel.width, svgData.measureLabel.height);
+
+				//measureTextSettings.fontSize = measureTextSettings.fontSize*getPdfCanvasScale(); // ?
+				var measureText = sketchpad[pageNr].text(msrGrp, measureTxtData.x, measureTxtData.y, '', measureTextSettings);
 
+				$(measureText).html(nodeSvgData.measureLabel.txt);
+			}
+
+            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, direction);
+            setDrawNodes(pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, direction);
         // }, 50);
         showNotesLayer();
     }
@@ -33747,6 +34004,8 @@ function loadMeasureShape(measure) {
 		var measureId = measure.data.id;
 		var measureObj = $('#'+measureId);
 
+		var isCalibrationItem = isMeasureCalibrationItem(measureId);
+
         var pagesRotation = getPdfPagesRotation();
         var nodeSvgData = measure.data;
 
@@ -33772,32 +34031,50 @@ function loadMeasureShape(measure) {
 
 		var measureSettings = getOutlineMeasureSettings();
 		measureSettings.id = getMeasureShapeId(measureId);
-	
-		var measureTextSettings = getMeasureTextSettings();
-		measureTextSettings.id = getMeasureTxtId(measureId);
-		measureTextSettings.filter = 'url(#txtFilterBg)';
+
+		if(isCalibrationItem) {
+			measureSettings.stroke = measureCalibrationStrokeColorVal;
+		}
+
+		if(!isCalibrationItem) {
+			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 markerId;
+			if(isCalibrationItem) {
+				markerId = getMeasureCalibrationLineMarkerId(pageNr);
+			} else {
+				markerId = getMeasureLineMarkerId(pageNr);
+			}
+			measureSettings.markerStart = 'url(#'+markerId+')';
+			measureSettings.markerEnd = 'url(#'+markerId+')';
 			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, 
+
+		if(!isCalibrationItem) {
+			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);
+			//measureTextSettings.fontSize = measureTextSettings.fontSize*getPdfCanvasScale(); // ?
+			measureText = sketchpad[pageNr].text(measureGrp, measureTxtData.x, measureTxtData.y, '', measureTextSettings);
 
-		$(measureText).html(nodeSvgData.measureLabel.txt);
+			$(measureText).html(nodeSvgData.measureLabel.txt);
+		}
 
 		measuresNodes[pageNr][measureId].nodeObj = measureGrp;
     }
 }
 
+function isMeasureCalibrationItem(id) {
+	return (id.substring(0, 11) == 'calibration');
+}
+
 function getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation) {
     var linePos;
     if(pagesRotation == '90') {
@@ -33970,6 +34247,8 @@ function initBtnDrawAnnotationToolbar() {
     btnDrawAnnotationToolbar.on('click', function() {
         $(this).toggleClass('toggled');
         if($(this).hasClass('toggled')) {
+			      untoggleBtnsMeasure();
+			      hideMeasureToolbar();
             showDrawAnnotationToolbar();
         } else {
             hideDrawAnnotationToolbar();
@@ -34025,6 +34304,7 @@ function activateDrawAnnotation() {
     var svgsketchWrap = $('.svgsketch-wrap');
     svgsketchWrap.addClass('active');
     isSketchpadActive = true;
+	  $('#cursorSelectTool').click();
 }
 
 function deactivateDrawAnnotation() {
@@ -34120,7 +34400,7 @@ function bindMeasureToolbarBtnOnclickHandler() {
 			untoggleBtnsDrawNote();
 			activateMeasuresSketchpad();
 		} else {
-			$('.svgsketch-wrap').removeClass('active').removeClass('measures');
+			$('.svgsketch-wrap').removeClass('active').removeClass('measures').removeClass('measures-2-point');
 			$('.measure-toolbar-btn').removeClass('active');
 		}
 	});
@@ -34137,7 +34417,7 @@ function toggleMeasureToolbar() {
 function untoggleBtnsMeasure() {
 	$('.measure-toolbar-btn').removeClass('active');
 	$('#btnMeasure').removeClass('toggled');
-	$('.svgsketch-wrap').removeClass('measures');
+	$('.svgsketch-wrap').removeClass('measures').removeClass('measures-2-point');
 	isSketchpadMeasureActive = false;
 }
 
@@ -34161,20 +34441,24 @@ function activateMeasuresSketchpad() {
 
 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();
-			}
+		if($(this).hasClass('disabled')) {
+			return false;
 		} else {
-			$('.svgsketch-wrap').removeClass('active');
-			isSketchpadMeasureActive = false;
-		}	
+			$(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;
+			}
+		}
 	});
 }
 
@@ -34266,9 +34550,12 @@ function normalizeRect270dg(rectPos, rectW, rectH, pageH) {
 
 function initMeasures() {
 	bindDeleteMeasureEventHandler();
+	bindAddMeasureNoteEventHandler();
 
-	// TODO -> load and set measures settings
-	initMeasuresSettings();
+	// TODO -> load and set measures default settings
+	initMeasuresDefaultSettings();
+	// TODO -> load measures settings per page
+	initMeasuresPageSettings();
 	// TODO - load and set measures data
 	initMeasuresData();
 
@@ -34277,6 +34564,9 @@ function initMeasures() {
 
         if($('#btnMeasure').hasClass('toggled')) {
             $('.svgsketch-wrap').addClass('active').addClass('measures');
+			if($('body').hasClass('calibration-2-point')) {
+				$('.svgsketch-wrap').addClass('measures-2-point');
+			}
         }
     });
 
@@ -34288,13 +34578,18 @@ function initMeasuresData() {
 	// measuresNodes = ...;
 }
 
-// TODO -> load and set measures settings
-function initMeasuresSettings() {
+// TODO -> load default measures settings
+function initMeasuresDefaultSettings() {
 	// measurePrecision = ...; // TODO
 	// measureUnit = ...; // TODO
 	// measurePxScale = ...; // TODO
 }
 
+// TODO -> load measures settings
+function initMeasuresPageSettings() {
+	// measuresPageSettings = {...}};
+}
+
 function initMeasuresByPageNr(pageNr) {
     doInitMeasuresByPageNr(pageNr);
 }
@@ -34306,12 +34601,12 @@ function doInitMeasuresByPageNr(pageNr) {
     });
 }
 
-function getMeasureValSqByPx(px) {
-	if(measureUnit == 'mm') {
+function getMeasureValSqByPx(px, measurePageUnit) {
+	if(measurePageUnit == 'mm') {
 		return getMeasureMmValSqByPx(px);
-	} else if(measureUnit == 'cm') {
+	} else if(measurePageUnit == 'cm') {
 		return getMeasureCmValSqByPx(px);
-	} else if(measureUnit == 'm') {
+	} else if(measurePageUnit == 'm') {
 		return getMeasureMValSqByPx(px);
 	}
 }
@@ -34336,12 +34631,12 @@ function getMeasureMValSqByPx(pxSq) {
 	return mValSq;
 }
 
-function getMeasureValByPx(px) {
-	if(measureUnit == 'mm') {
+function getMeasureValByPx(px, measurePageUnit) {
+	if(measurePageUnit == 'mm') {
 		return getMeasureMmValByPx(px);
-	} else if(measureUnit == 'cm') {
+	} else if(measurePageUnit == 'cm') {
 		return getMeasureCmValByPx(px);
-	} else if(measureUnit == 'm') {
+	} else if(measurePageUnit == 'm') {
 		return getMeasureMValByPx(px);
 	}
 }
@@ -34385,26 +34680,138 @@ function getDeviceDpi() {
 function initDlgMeasures() {
 	bindBtnMeasureSettingsOnclickHandler();
 	bindButtonsDlgMeasuresOnclickHandler();
+	bindShowMeasuresCalibrationPageWarningHandler();
 }
 function bindBtnMeasureSettingsOnclickHandler() {
 	$('#btnMeasuresSettings').on('click', function() {
-		showDlgOverlay();
-		showDlgMeasureSettings();
+		if(isDlgMeasureSettingsOpened()) {
+			return false;
+		} else {
+			showDlgMeasureSettings();
+		}
 	});
 }
 
+function isDlgMeasureSettingsOpened() {
+	return ($('.measures-dlg-wrap').length && $('.measures-dlg-wrap').is(':visible'));
+}
+
 function showDlgMeasureSettings() {
+	var settings;
+	var pageNr = getCurrentPage();
+
+	disableMeasureDrawBtns();
+
+	if(pageNr in measuresPageSettings) {
+		settings = measuresPageSettings[pageNr];
+	} else {
+		settings = getMeasureDefaultSettings();
+		settings['page'] = pageNr;
+		hideDlgMeasureSettingsStatusbar();
+	}
+	prepareDlgMeasureSettings(settings);
+
+	$('.svgsketch-wrap').removeClass('transparent'); // TODO
+
+	$('body').addClass('measures-dlg-visible');
 	$('.measures-dlg-wrap').show();
 }
 
+function disableMeasureDrawBtns() {
+	$('#btnMeasureLine').removeClass('active').addClass('disabled');
+	$('#btnMeasureArea').removeClass('active').addClass('disabled');
+}
+
+function enableMeasureDrawBtns() {
+	$('#btnMeasureLine').removeClass('disabled');
+	$('#btnMeasureArea').removeClass('disabled');
+}
+
+function prepareDlgMeasureSettings(settings) {
+	setDlgMeasureSettingsType(settings.type);
+	setDlgMeasureSettingsPrecision(settings.measurePrecision);
+	setDlgMeasureSettingsUnits(settings.measureUnit);
+
+	if(isMeasureSettingType2Point(settings.type)) {
+		setMeasuresSettingsType2Point();
+		setDlgMeasureSettings2PointSize(settings.calibrationSize);
+		setDlgMeasureSettings2PointSizePx(settings.calibrationSizePx);
+	} else {
+		setMeasuresSettingsTypeScale();
+		setDlgMeasureSettingsScale(settings.measurePxScale);
+	}
+
+	setDlgMeasureSettingsPageNr(settings.page);
+	setDlgMeasureSettingsStatusbar(settings.user, settings.date);
+}
+
+function setDlgMeasureSettingsPageNr(pageNr) {
+	$('#measuresPageNr').val(pageNr);
+	$('#msrDlgTitlePageNr').text(pageNr);
+}
+
+function setDlgMeasureSettingsStatusbar(user, date) {
+	if(user && date) {
+		setDlgMeasureSettingsStatusbarUser(user);
+		setDlgMeasureSettingsStatusbarDate(date);
+		showDlgMeasureSettingsStatusbar();
+	}
+}
+
+function setDlgMeasureSettingsStatusbarUser(user) {
+	$('.measures-settings-user').text(user);
+}
+
+function setDlgMeasureSettingsStatusbarDate(date) {
+	$('.measures-settings-date').text(date);
+}
+
+function showDlgMeasureSettingsStatusbar() {
+	$('.measures-dlg-statusbar').addClass('show');
+}
+
+function hideDlgMeasureSettingsStatusbar() {
+	$('.measures-dlg-statusbar').removeClass('show');
+}
+
+function setDlgMeasureSettings2PointSize(size) {
+	$('#measures2PointSize').val(size);
+}
+
+function setDlgMeasureSettings2PointSizePx(sizePx) {
+	$('#measures2PointSizePx').val(sizePx);
+}
+
+function setDlgMeasureSettingsScale(scale) {
+	$('#measuresScale').val(scale);
+}
+
+function setDlgMeasureSettingsType(type) {
+	$('[name="measuresSettingsType"][value="' + type + '"]').prop('checked', true);
+}
+
+function setDlgMeasureSettingsUnits(units) {
+	$('#measuresUnits').val(units);
+}
+
+function setDlgMeasureSettingsPrecision(precision) {
+	$('#measuresPrecision').val(precision);
+}
+
 function hideDlgMeasureSettings() {
+	$('body').removeClass('measures-dlg-visible');
+	removeBodyCalibration2PointClass();
 	$('.measures-dlg-wrap').hide();
+	enableMeasureDrawBtns();
 }
 
 function bindButtonsDlgMeasuresOnclickHandler() {
 	bindDlgMeasuresBtnSave();
 	bindBtnDlgMeasuresCancel();
 	bindBtnDlgMeasuresClose();
+
+	bindMeasuresSettingsTypeChange();
+	bindBtnMeasureSettingsDelete();
 }
 
 function bindDlgMeasuresBtnSave() {
@@ -34413,57 +34820,196 @@ function bindDlgMeasuresBtnSave() {
 	});
 }
 
+function getDlgMeasuresSettingsPageNr() {
+	return parseInt($('#measuresPageNr').val());
+}
 function saveMeasuresSettings() {
-	var scaleNew = parseInt($('#measuresScale').val());
+	var pageNr = getDlgMeasuresSettingsPageNr(); // getCurrentPage();
+	var settingsTypeNew = $('[name="measuresSettingsType"]:checked').val();
 	var unitsNew = $('#measuresUnits').val();
+	var calibrationSizeNew = isMeasureSettingType2Point(settingsTypeNew) ? $('#measures2PointSize').val() : null;
+	var calibrationSizePxNew = isMeasureSettingType2Point(settingsTypeNew) ? $('#measures2PointSizePx').val() : null;
+	var scaleNew = isMeasureSettingType2Point(settingsTypeNew) ? getMeasureScaleBy2PointSize(calibrationSizeNew, calibrationSizePxNew, unitsNew) : parseInt($('#measuresScale').val());
 	var precisionNew = parseInt($('#measuresPrecision').val());
 
-	if(scaleNew != measurePxScale || unitsNew != measureUnit || precisionNew != measurePrecision) {
-		measurePxScale = scaleNew;
-		measureUnit = unitsNew;
-		measurePrecision = precisionNew;
 
+
+	var isDataValid;
+	if(isMeasureSettingType2Point(settingsTypeNew)) {
+		var validationResult = checkCalibration2PointData(pageNr);
+		isDataValid = validationResult.isCalibrationItemExist && validationResult.isFormDataValid;
+	} else {
+		isDataValid = true;
+	}
+
+	if(isDataValid) {
+		if(!isMeasuresPageSettingsExist(pageNr) || isMeasuresPageSettingsChanged(pageNr, scaleNew, settingsTypeNew, unitsNew, precisionNew, calibrationSizeNew, calibrationSizePxNew)) {
+			setMeasuresPageSettings(pageNr, settingsTypeNew, scaleNew, unitsNew, precisionNew, calibrationSizeNew, calibrationSizePxNew);
+
+			// TODO
+			doSaveMeasuresSettings(pageNr);
+			updateMeasuresData(pageNr);
+
+			if(!isMeasureSettingType2Point(settingsTypeNew)) {
+				removeCalibrationMeasureShape(pageNr);
+				removeCalibrationMeasureShapeData(pageNr);
+			} else {
+				// TODO save calibration shape data
+				doSaveCalibrationShapeData(pageNr);
+			}
+		}
+		hideDlgMeasureSettings();
+	} else {
 		// TODO
-		doSaveMeasuresSettings();
-		// TODO
-		updateMeasuresData();
+
+		var msgTxt = getMeasureSettingsValidationMsgTxt(validationResult);
+		showMeasureSettingsValidationMsg(msgTxt);
+	}
+}
+
+function getMeasureSettingsValidationMsgTxt(validationResult) {
+	var msg = label_errMsgCalibrationTitle + ' \n';
+
+	if(!validationResult.isClibrationItemExist) {
+		msg += label_errMsgNoCalibrationItem + ' \n';
+	}
+
+	if(!validationResult.isFormDataValid) {
+		msg += label_errMsgCalibrationSizeNotDefined;
+	}
+
+	return msg;
+}
+function showMeasureSettingsValidationMsg(msgTxt) {
+	// TOOD -> msg
+	alert(msgTxt);
+}
+
+function isMeasuresPageSettingsExist(pageNr) {
+	return pageNr in measuresPageSettings;
+}
+
+function isMeasuresPageSettingsChanged(pageNr, scale, type, units, precision, calibrationSize, calibrationSizePx) {
+	if(isMeasuresPageSettingsExist(pageNr)) {
+		if(isMeasuresPageSettingsScaleChanged(pageNr, scale) || isMeasuresPageSettingsTypeChanged(pageNr, type)
+			|| isMeasuresPageSettingsUnitsChanged(pageNr, units) || isMeasuresPageSettingsPrecisionChanged(pageNr, precision)
+			|| isMeasuresPageSettingsCalibrationSizeChanged(pageNr, calibrationSize)
+			|| isMeasuresPageSettingsCalibrationSizePxChanged(pageNr, calibrationSizePx)) {
+			return true;
+		} else {
+			return false;
+		}
+	} else {
+		return true;
+	}
+}
+
+function isMeasuresPageSettingsScaleChanged(pageNr, scale) {
+	return measuresPageSettings[pageNr].measurePxScale != scale;
+}
+
+function isMeasuresPageSettingsTypeChanged(pageNr, type) {
+	return measuresPageSettings[pageNr].type != type;
+}
+
+function isMeasuresPageSettingsUnitsChanged(pageNr, units) {
+	return measuresPageSettings[pageNr].measureUnit != units;
+}
+
+function isMeasuresPageSettingsPrecisionChanged(pageNr, precision) {
+	return measuresPageSettings[pageNr].measurePrecision != precision;
+}
+
+function isMeasuresPageSettingsCalibrationSizeChanged(pageNr, calibrationSize) {
+	return measuresPageSettings[pageNr].calibrationSize != calibrationSize;
+}
+
+function isMeasuresPageSettingsCalibrationSizePxChanged(pageNr, calibrationSizePx) {
+	return measuresPageSettings[pageNr].calibrationSizePx != calibrationSizePx;
+}
+
+function setMeasuresPageSettings(pageNr, type, scale, units, precision, calibrationSize, calibrationSizePx) {
+	measuresPageSettings[pageNr] = {
+		page: pageNr,
+		type: type,
+		measurePxScale: scale,
+		measureUnit: units,
+		measurePrecision: precision,
+		calibrationSize: calibrationSize,
+		calibrationSizePx: calibrationSizePx,
+		user: 'Иванов В.С.',// TODO!!!
+		date: '25.03.2023 11:42'// TODO!!!
+	};
+}
+
+function doSaveCalibrationShapeData(pageNr) {
+	var calibrationShapeId = getCalibrationShapeId(pageNr);
+	var calibrationShapeData = measuresNodes[pageNr][calibrationShapeId];
+	// TODO save calibration shape data
+}
+
+function removeCalibrationMeasureShape(pageNr) {
+	var calibrationMeasure = $('#calibration_' + pageNr);
+	if(calibrationMeasure.length) {
+		calibrationMeasure.remove();
+	}
+}
+
+function getCalibrationShapeId(pageNr) {
+	var calibrationShapeId = 'calibration_'+pageNr;
+	return calibrationShapeId;
+}
+
+function removeCalibrationMeasureShapeData(pageNr) {
+	var calibrationShapeId = getCalibrationShapeId(pageNr);
+	if(measuresNodes[pageNr] && calibrationShapeId in measuresNodes[pageNr]) {
+		delete measuresNodes[pageNr][calibrationShapeId];
+		// TODO if exist -> remove calibration shape data from server
+	}
+}
+
+function isMeasureSettingType2Point(type) {
+	return (type == '2-point');
+}
+
+function getMeasureScaleBy2PointSize(size, sizePx, measurePageUnit) {
+	if(sizePx > 0 && size > 0) {
+		return size/getMeasureValByPx(sizePx, measurePageUnit);
+	} else {
+		return  0;
 	}
-	hideDlgOverlay();
-	hideDlgMeasureSettings();
 }
 
 // TODO - save to server
-function doSaveMeasuresSettings() {
-	// measurePxScale
-	// measureUnit
-	// measurePrecision
+function doSaveMeasuresSettings(pageNr) {
+	// measuresPageSettings[pageNr]
 }
 
 // TODO - update measures data and save to server
-function updateMeasuresData() {
-	$.each(measuresNodes, function(indexPage, measuresNodesPage) {
-		$.each(measuresNodesPage, function(indexItem, measuresNodesPageItem){
-			updateMeasure(measuresNodesPageItem);
+function updateMeasuresData(pageNr) {
+	$.each(measuresNodes[pageNr], function(indexItem, measuresNodesPageItem){
+		if(!isMeasureCalibrationItem(measuresNodesPageItem.data.id)) {
+			updateMeasure(measuresNodesPageItem, pageNr);
 			// TODO - save to server
 			// measuresNodesPageItem['data']
-		});
+		}
 	});
 }
 
-function updateMeasure(measure) {
-	measure['data']['measure']['pxScale'] = measurePxScale;
-	measure['data']['measure']['unit'] = measureUnit;
-	measure['data']['measure']['precision'] = measurePrecision;
+function updateMeasure(measure, page) {
+	measure['data']['measure']['pxScale'] = measuresPageSettings[page].measurePxScale;
+	measure['data']['measure']['unit'] = measuresPageSettings[page].measureUnit;
+	measure['data']['measure']['precision'] = measuresPageSettings[page].measurePrecision;
 
 	var measureVal;
 	var measureLabel;
 
 	if(measure['data']['type'] == 'line') {
-		measureVal = getMeasureVal(measure['data']['measure']['pxVal']);
-		measureLabel = getMeasureLineLabel(measureVal);
+		measureVal = getMeasureVal(measure['data']['measure']['pxVal'], measure['data']['measure']['pxScale'], measure['data']['measure']['precision'], measure['data']['measure']['unit']);
+		measureLabel = getMeasureLineLabel(measureVal, measure['data']['measure']['unit']);
 	} else if(measure['data']['type']  == 'rect') {
-		measureVal = getMeasureValSq(measure['data']['measure']['pxVal']);
-		measureLabel = getMeasureAreaLabel(measureVal);
+		measureVal = getMeasureValSq(measure['data']['measure']['pxVal'], measure['data']['measure']['pxScale'], measure['data']['measure']['precision'], measure['data']['measure']['unit']);
+		measureLabel = getMeasureAreaLabel(measureVal, measure['data']['measure']['unit']);
 	}
 
 	measure['data']['measureLabel']['txt'] = measureLabel;
@@ -34481,23 +35027,279 @@ function updateMeasure(measure) {
 
 function bindBtnDlgMeasuresCancel() {
 	$('#btnMeasuresSettingsCancel').click(function() {
-		hideDlgOverlay();
-		hideDlgMeasureSettings();
+		closeDlgMeasuresHandler();
 	});
 }
 
 function bindBtnDlgMeasuresClose() {
 	$('.measures-dlg-header .close').click(function() {
-		hideDlgOverlay();
-		hideDlgMeasureSettings();
+		closeDlgMeasuresHandler();
 	});
 }
 
+function closeDlgMeasuresHandler() {
+	hideMeasuresCalibrationPageWarning();
+	removeMeasuresCalibrationHint();
+
+	var pageNr = getDlgMeasuresSettingsPageNr(); // getCurrentPage();
+	var calibrationShapeId = getCalibrationShapeId(pageNr);
+
+	if(!isMeasuresPageSettingsExist(pageNr) || (isMeasuresPageSettingsExist(pageNr) && !isMeasureSettingType2Point(measuresPageSettings[pageNr].type))) {
+		removeCalibrationMeasureShape(pageNr);
+		if(measuresNodes[pageNr] && calibrationShapeId in measuresNodes[pageNr]) {
+			delete measuresNodes[pageNr][calibrationShapeId];
+		}
+	}
+
+	if(isMeasuresPageSettingsExist(pageNr) && isMeasureSettingType2Point(measuresPageSettings[pageNr].type) && isCalibrationLineChanged) {
+		var calibrationShape = $('#'+calibrationShapeId);
+		if(calibrationShape.length) {
+			calibrationShape.remove();
+		}
+		loadMeasureShape(calibrationLineChangedDataOrg);
+		measuresNodes[pageNr][calibrationShapeId] = calibrationLineChangedDataOrg;
+		isCalibrationLineChanged = false;
+		calibrationLineChangedDataOrg = false;
+	}
+
+	hideDlgMeasureSettings();
+}
+
 function bindToggleMeasures() {
 	$(document).on('click', '#btnToggleMeasures', function() {
 		$('#viewer').toggleClass('hide-measures');
 		$(this).toggleClass('show');
 	});
+}
+
+function bindMeasuresSettingsTypeChange() {
+	$('[name="measuresSettingsType"]').on('change', function() {
+		measuresSettingsTypeChangeHandler();
+	});
+}
+
+function measuresSettingsTypeChangeHandler() {
+	if($('#measuresSettingsTypeScale').is(':checked')) {
+		setMeasuresSettingsTypeScale();
+	} else {
+		setMeasuresSettingsType2Point();
+	}
+}
+
+function addBodyCalibration2PointClass() {
+	$('body').addClass('calibration-2-point');
+}
+
+function removeBodyCalibration2PointClass() {
+	$('body').removeClass('calibration-2-point');
+}
+
+function enableBtnMeasuresSettingsSave() {
+	$('#btnMeasuresSettingsSave').prop('disabled', false);
+}
+
+function disableBtnMeasuresSettingsSave() {
+	$('#btnMeasuresSettingsSave').prop('disabled', 'disabled');
+}
+
+function hideBtnMeasureSettingsDelete() {
+	$('#btnMeasuresSettingsDelete').removeClass('show');
+}
+
+function showBtnMeasureSettingsDelete() {
+	$('#btnMeasuresSettingsDelete').addClass('show');
+}
+
+function disableBtnMeasureSettingsDelete() {
+	$('#btnMeasuresSettingsDelete').prop('disabled', 'disabled');
+}
+
+function enableBtnMeasureSettingsDelete() {
+	$('#btnMeasuresSettingsDelete').prop('disabled', false);
+}
+
+function bindBtnMeasureSettingsDelete() {
+	$('#btnMeasuresSettingsDelete').on('click', function() {
+		var pageNr = getDlgMeasuresSettingsPageNr();
+		deleteMeasuresCalibrationLine(pageNr);
+	});
+}
+
+function deleteMeasuresCalibrationLine(pageNr) {
+	var calibrationShapeId = getCalibrationShapeId(pageNr);
+	isCalibrationLineChanged = true;
+	calibrationLineChangedDataOrg = measuresNodes[pageNr][getCalibrationShapeId(pageNr)];
+	delete measuresNodes[pageNr][getCalibrationShapeId(pageNr)];
+	$('#'+calibrationShapeId).remove();
+	disableBtnMeasureSettingsDelete();
+	createMeasuresCalibrationHint();
+	activateMeasuresCalibration();
+}
+
+function setMeasuresSettingsTypeScale() {
+	removeMeasuresCalibrationHint();
+	removeBodyCalibration2PointClass();
+	enableBtnMeasuresSettingsSave();
+	hideBtnMeasureSettingsDelete();
+	$('.measures-settings-controls').removeClass('type-2-point').addClass('type-scale');
+}
+
+function setMeasuresSettingsType2Point() {
+	addBodyCalibration2PointClass();
+	clearCalibration2PointSizeInput();
+
+	enableBtnMeasuresSettingsSave();
+
+	var pageNr = getDlgMeasuresSettingsPageNr(); // getCurrentPage();
+	var currentPage = getCurrentPage();
+
+	if(currentPage != pageNr) {
+		showMeasuresCalibrationPageWarning();
+	}
+
+	if(pageNr in measuresPageSettings) {
+		//enableBtnMeasuresSettingsSave();
+		showBtnMeasureSettingsDelete();
+	} else {
+		//disableBtnMeasuresSettingsSave();
+		hideBtnMeasureSettingsDelete();
+	}
+
+	showBtnMeasureSettingsDelete();
+
+	if(isCalibration2PointLineExist(pageNr)) {
+		enableBtnMeasureSettingsDelete();
+	} else {
+		createMeasuresCalibrationHint();
+		disableBtnMeasureSettingsDelete();
+	}
+
+	activateMeasuresCalibration();
+
+	$('.measures-settings-controls').removeClass('type-scale').addClass('type-2-point');
+}
+
+function checkCalibration2PointData(pageNr) {
+	var checkResult = {
+		isFormDataValid: isCalibration2PointFormDataValid(),
+		isCalibrationItemExist: isCalibration2PointLineExist(pageNr)
+	}
+	return checkResult;
+}
+
+function isCalibration2PointLineExist(pageNr) {
+	var shapeId = getCalibrationShapeId(pageNr);
+
+	return $('#'+shapeId).length && $('#'+shapeId).is(':visible');
+}
+
+function isCalibration2PointFormDataValid() {
+	if($('#measures2PointSize').val() > 0) {
+		return true;
+	} else {
+		return false;
+	}
+}
+
+function clearCalibration2PointSizeInput() {
+	$('#measures2PointSize').val('');
+}
+
+function createMeasuresCalibrationHint() {
+	var hintElm = $('<div id="measures2PointHint" />');
+	hintElm.text(label_measures2PointHint);
+	$('body').append(hintElm);
+}
+
+function removeMeasuresCalibrationHint() {
+	var hintElm = $('#measures2PointHint');
+	if(hintElm.length) {
+		$('#measures2PointHint').remove();
+	}
+}
+
+function activateMeasuresCalibration() {
+	$('.svgsketch-wrap').addClass('active').addClass('measures').addClass('measures-2-point');
+	$('#cursorSelectTool').click();
+	isSketchpadMeasureActive = true;
+}
+
+function deactivateMeasuresCalibration() {
+	$('.svgsketch-wrap').removeClass('active').removeClass('measures').removeClass('measures-2-point');
+	isSketchpadMeasureActive = false;
+}
+
+function isMeasuresCalibrationActive() {
+	return $('.svgsketch-wrap').hasClass('measures-2-point');
+}
+
+function bindShowMeasuresCalibrationPageWarningHandler() {
+	$(document).on('showMeasuresCalibrationPageWarning', function() {
+		showMeasuresCalibrationPageWarning();
+	});
+}
+
+function showMeasuresCalibrationPageWarning() {
+	var currentPage = parseInt(getCurrentPage());
+	var calibrationPage = parseInt(getDlgMeasuresSettingsPageNr());
+
+	if(currentPage != calibrationPage) {
+		showMeasuresCalibrationPageWarning();
+	} else {
+		hideMeasuresCalibrationPageWarning();
+	}
+}
+
+function hideMeasuresCalibrationPageWarning() {
+	var warning = $('#calibrationPageWarning');
+	if(warning.length) {
+		warning.remove();
+	}
+	var overlay = $('#calibrationPageWarningOverlay');
+	if(overlay.length) {
+		overlay.remove();
+	}
+}
+
+function showMeasuresCalibrationPageWarning() {
+	if($('#calibrationPageWarning').length) {
+		return false;
+	} else {
+		createMeasuresCalibrationPageWarning();
+	}
+}
+
+function createMeasuresCalibrationPageWarning() {
+	var warning = $('<div class="warning-wrap" id="calibrationPageWarning"/>');
+
+	var title = $('<div class="warning-title"/>');
+	title.text(label_warningCalibrationPage_title);
+
+	var body = $('<div class="warning-body"/>');
+	body.html(label_warningCalibrationPage_body);
+
+	var footer = $('<div class="warning-footer"/>');
+	var btnCloseSettings = $('<button id="btnCalibrationPageWarningClose" class="uk-button uk-button-default uk-button-full-width" />');
+	btnCloseSettings.text(label_warningCalibrationPage_btnClose);
+	btnCloseSettings.off('click');
+	btnCloseSettings.on('click', function() {
+		closeDlgMeasuresHandler();
+	});
+	var btnGoToCalibrationPage = $('<button id="btnCalibrationPageWarning" class="uk-button uk-button-primary uk-button-full-width" />');
+	btnGoToCalibrationPage.text(label_warningCalibrationPage_btnGoToPage);
+	btnGoToCalibrationPage.off('click');
+	btnGoToCalibrationPage.on('click', function() {
+		PDFViewerApplication.page = getDlgMeasuresSettingsPageNr();
+		closeDlgMeasuresHandler();
+	});
+	footer.append(btnGoToCalibrationPage);
+	footer.append(btnCloseSettings);
+
+	warning.append(title).append(body).append(footer);
+
+	var warningOverlay = $('<div class="warning-overlay" id="calibrationPageWarningOverlay"/>');
+
+	$('#outerContainer').append(warningOverlay).append(warning);
 }
 var needZoomEventsTimeout = 250; // ms
 var scrollStoppedEventsTimeout = 200; // ms
@@ -34557,10 +35359,14 @@ function initZoomPageEvent() {
         //      console.log('pagechange', e);
         // });
         PDFViewerApplication.eventBus.on('pagechanging', function(e) {
-            // console.log('pagechanging', e);
+            //console.log('pagechanging', e);
             $('.pdfViewer .page').removeClass('current');
             $('.pdfViewer .page').eq(getCurrentPage()-1).addClass('current');
             $(document).trigger('needZoom');
+
+            if($('body').hasClass('measures-dlg-visible') && $('body').hasClass('calibration-2-point')) {
+                $(document).trigger('showMeasuresCalibrationPageWarning');
+            }
         });
         PDFViewerApplication.eventBus.on('pagesinit', function(e) {
             // console.log('pagesinit', e);
@@ -36421,6 +37227,9 @@ 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');
+var label_createAnnotation = context.createLocale('app.viewer.pdf.contextMenu.addNote');
+var label_measures2PointHint = context.createLocale('app.viewer.pdf.measures.twoPointHint');
+
 function initContextMenuCanvas() {
     var pages = '#viewer .page';
     $.contextMenu({
@@ -36908,7 +37717,7 @@ function createNote(pageNr, index, issue) {
 
     if (scalledOptions.svg && (scalledOptions.svg.type == 'ellipse' || scalledOptions.svg.type == 'polygon')) {
         scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height / 2;
-    } else if (scalledOptions.svg && (scalledOptions.svg.type == 'line' || scalledOptions.svg.type == 'arrow')) {
+    } else if (scalledOptions.svg && (scalledOptions.svg.type == 'line' || scalledOptions.svg.type == 'arrow' || scalledOptions.svg.type == 'msr_line')) {
         if (scalledOptions.svg.direction == 'bltr') {
             scalledOptions.position.y = scalledOptions.position.y + scalledOptions.svg.height;
         } else if (scalledOptions.svg.direction == 'trbl') {
@@ -37011,6 +37820,7 @@ function getShapeSettings(nodeId, color) {
 function loadSvgShape(svgData) {
     if (typeof svgData === 'object' && svgData !== null && svgData !== false) {
 
+        var pageNr = svgData.pageNr;
         var scale = getPdfCanvasScale();
 
         var node = null;
@@ -37024,7 +37834,7 @@ function loadSvgShape(svgData) {
         }
 
         if (drawNodes[svgData.id]) {
-            sketchpad[svgData.pageNr].remove(drawNodes[svgData.id].nodeObj);
+            sketchpad[pageNr].remove(drawNodes[svgData.id].nodeObj);
         }
 
         var x1 = nodeSvgData.position.x * scale;
@@ -37034,30 +37844,62 @@ function loadSvgShape(svgData) {
 
         var direction = ('direction' in svgData) ? svgData.direction : false;
 
+        var msrGrp;
+        var msrNode;
+        if (svgData.type == 'msr_rect' || svgData.type == 'msr_line') {
+            msrGrp = sketchpad[pageNr].group(svgData.id);
+            settings.id = getMeasureShapeId(svgData.id);
+
+            node = msrGrp;
+        }
+
         if (svgData.type == 'rect') {
-            node = sketchpad[nodeSvgData.pageNr].rect(x1, y1, nodeSvgData.width * scale, nodeSvgData.height * scale, settings);
+            node = sketchpad[pageNr].rect(x1, y1, nodeSvgData.width * scale, nodeSvgData.height * scale, settings);
         } else if (svgData.type == 'ellipse') {
             var rx = nodeSvgData.width * scale / 2;
             var ry = nodeSvgData.height * scale / 2;
-            node = sketchpad[nodeSvgData.pageNr].ellipse(x1 + rx, y1 + ry, rx, ry, settings);
+            node = sketchpad[pageNr].ellipse(x1 + rx, y1 + ry, rx, ry, settings);
         } else if (svgData.type == 'polygon') {
             var polygonPos = getPolygonPosByPageRotation(x1, y1, x2, y2, pagesRotation);
-            node = sketchpad[nodeSvgData.pageNr].polygon(polygonPos, settings);
+            node = sketchpad[pageNr].polygon(polygonPos, settings);
         } else if (svgData.type == 'cloud') {
             var cloudPath = getCloudPath(x1, y1, x2, y2);
-            node = sketchpad[nodeSvgData.pageNr].path(cloudPath, settings);
+            node = sketchpad[pageNr].path(cloudPath, settings);
         } else if (svgData.type == 'line') {
             var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
             node = sketchpad[nodeSvgData.pageNr].line(linePos[0], linePos[1], linePos[2], linePos[3], settings);
         } else if (svgData.type == 'arrow') {
             var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
             var arrowPath = getArrowPath(linePos[0], linePos[1], linePos[2], linePos[3]);
-            node = sketchpad[nodeSvgData.pageNr].path(arrowPath, settings);
+            node = sketchpad[pageNr].path(arrowPath, settings);
+        } else if (svgData.type == 'msr_line') {
+            var markerId = getMeasureNoteLineMarkerId(pageNr);
+            settings.markerStart = 'url(#' + markerId + ')';
+            settings.markerEnd = 'url(#' + markerId + ')';
+            var linePos = getLinePosByPagesRotation(x1, y1, x2, y2, direction, pagesRotation);
+            msrNode = sketchpad[pageNr].line(msrGrp, linePos[0], linePos[1], linePos[2], linePos[3], settings);
+        } else if (svgData.type == 'msr_rect') {
+            msrNode = sketchpad[pageNr].rect(msrGrp, x1, y1, nodeSvgData.width * scale, nodeSvgData.height * scale, settings);
+        }
+
+        if (svgData.type == 'msr_line' || svgData.type == 'msr_rect') {
+            var measureTextSettings = getMeasureTextSettings();
+            measureTextSettings.fill = svgData.stroke.color || strokeColorVal;
+            measureTextSettings.id = getMeasureTxtId(svgData.id);
+            measureTextSettings.filter = 'url(#txtFilterBg)';
+            var shape = svgData.type.replace('msr_', '');
+
+            var measureTxtData = getMeasureTxtNormalizedSvgData(x1, y1, nodeSvgData.width * scale, nodeSvgData.height * scale,
+                shape, svgData.measureLabel.width, svgData.measureLabel.height);
+
+            var measureText = sketchpad[pageNr].text(msrGrp, measureTxtData.x, measureTxtData.y, '', measureTextSettings);
+
+            $(measureText).html(nodeSvgData.measureLabel.txt);
         }
 
         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, direction, svgData.stroke.color);
+        setDrawNodes(pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, direction, svgData.stroke.color);
     }
 }
 
@@ -37125,6 +37967,8 @@ function initBtnDrawAnnotation() {
             if (isHandToolActive) {
                 $('#cursorSelectTool').click();
             }
+            untoggleBtnsMeasure();
+            hideMeasureToolbar();	
             activateDrawAnnotation();
         } else {
             if (!isHandToolActive) {
@@ -37232,40 +38076,129 @@ function drawShape(x1, y1, x2, y2, pageNr, shape) {
 
     $('#svgsketch-' + [pageNr]).focus();
 
-    initDlgForSvg(drawNodes[nodeId]);
+    initDlgForSvg(drawNodes[nodeId], false, removeSvg, false, drawNodes[nodeId].data);
 
     deactivateDrawAnnotation();
 }
 
 function saveMeasuresSettings() {
-    var scaleNew = parseInt($('#measuresScale').data('value'));
+    var pageNr = getDlgMeasuresSettingsPageNr(); // getCurrentPage();
+    var settingsTypeNew = $('[name="measuresSettingsType"]:checked').val();
     var unitsNew = $('#measuresUnits').data('value');
+    var calibrationSizeNew = isMeasureSettingType2Point(settingsTypeNew) ? $('#measures2PointSize').val() : null;
+    var calibrationSizePxNew = isMeasureSettingType2Point(settingsTypeNew) ? $('#measures2PointSizePx').val() : null;
+    var scaleNew = isMeasureSettingType2Point(settingsTypeNew) ? getMeasureScaleBy2PointSize(calibrationSizeNew, calibrationSizePxNew, unitsNew) : parseInt($('#measuresScale').data('value'));
     var precisionNew = parseInt($('#measuresPrecision').data('value'));
 
-    let isChanged = false;
-    if (scaleNew && scaleNew != measurePxScale) {
-        measurePxScale = scaleNew;
-        isChanged = true;
+    var isDataValid;
+    if (isMeasureSettingType2Point(settingsTypeNew)) {
+        var validationResult = checkCalibration2PointData(pageNr);
+        isDataValid = validationResult.isCalibrationItemExist && validationResult.isFormDataValid;
+    } else {
+        isDataValid = true;
     }
 
-    if (unitsNew && unitsNew != measureUnit) {
-        measureUnit = unitsNew;
-        isChanged = true;
+    if (isDataValid) {
+        if (!isMeasuresPageSettingsExist(pageNr) || isMeasuresPageSettingsChanged(pageNr, scaleNew, settingsTypeNew, unitsNew, precisionNew, calibrationSizeNew, calibrationSizePxNew)) {
+            setMeasuresPageSettings(pageNr, settingsTypeNew, scaleNew, unitsNew, precisionNew, calibrationSizeNew, calibrationSizePxNew);
+
+            // TODO
+            doSaveMeasuresSettings(pageNr);
+            updateMeasuresData(pageNr);
+
+            if (!isMeasureSettingType2Point(settingsTypeNew)) {
+                removeCalibrationMeasureShape(pageNr);
+                removeCalibrationMeasureShapeData(pageNr);
+            } else {
+                // TODO save calibration shape data
+                doSaveCalibrationShapeData(pageNr);
+            }
+        }
+        hideDlgMeasureSettings();
+    } else {
+        // TODO
+
+        var msgTxt = getMeasureSettingsValidationMsgTxt(validationResult);
+        showMeasureSettingsValidationMsg(msgTxt);
     }
+}
+
+function getMeasureNoteLineMarkerSettings(color) {
+    var settings = {
+        fill: fillVal,
+        stroke: color || strokeColorVal
+    };
+
+    return settings;
+}
 
-    if (precisionNew && precisionNew != measurePrecision) {
-        measurePrecision = precisionNew;
-        isChanged = true;
+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' });
+
+            createMeasureLineMarker(pageNr, getMeasureLineMarkerId(pageNr), getMeasureLineMarkerSettings());
+            createMeasureLineMarker(pageNr, getMeasureCalibrationLineMarkerId(pageNr), getMeasureCalibrationLineMarkerSettings());
+            createMeasureLineMarker(pageNr, getMeasureNoteLineMarkerId(pageNr), getMeasureNoteLineMarkerSettings('context-stroke'));
+            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 endDragMeasure(event, pageNr) {
+    if (!drawStart) {
+        return;
     }
 
-    if (isChanged) {
-        // TODO
-        doSaveMeasuresSettings();
-        // TODO
-        updateMeasuresData();
+    removeMeasureOutlineItems();
+
+    if (measureLast && measureLast.pxVal > 0) {
+        var shape = getMeasureType();
+        drawMeasure(drawStart.X, drawStart.Y, event.clientX - offset.left, event.clientY - offset.top, pageNr, shape);
+
+        if (isMeasuresCalibrationActive()) {
+            deactivateMeasuresCalibration();
+            removeMeasuresCalibrationHint();
+        }
+    }
+
+    drawStart = null;
+    event.preventDefault();
+}	
+
+function setDlgMeasureSettingsScale(scale) {
+    let child = $('#measuresScaleList').children().toArray().find(child => $(child).attr('value') === scale);
+    if (child) {
+        $('#measuresScale').val($(child).text());
+        $('#measuresScale').data('value', scale);
+    }
+}
+
+function setDlgMeasureSettingsUnits(units) {
+    let child = $('#measuresUnitsList').children().toArray().find(child => $(child).attr('value') === units);
+    if (child) {
+        $('#measuresUnits').val($(child).text());
+        $('#measuresUnits').data('value', units);
+    }
+}
+
+function setDlgMeasureSettingsPrecision(precision) {
+    let child = $('#measuresPrecisionList').children().toArray().find(child => $(child).attr('value') === precision);
+    if (child) {
+        $('#measuresPrecision').val($(child).text());
+        $('#measuresPrecision').data('value', precision);
     }
-    hideDlgOverlay();
-    hideDlgMeasureSettings();
 }
 $(document).ready(function() {
     context.openFile();