@vitrosoftware/common-ui-ts 1.1.230 → 1.1.232

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

@@ -21208,7 +21208,7 @@ const defaultOptions = {
     kind: OptionKind.WORKER
   },
   workerSrc: {
-    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.230",
+    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.232",
     kind: OptionKind.WORKER
   }
 };
@@ -37426,12 +37426,27 @@ const DOC_B = 'docB';
 let currentDocFileVersionList;
 let docAFileVersionList;
 let docBFileVersionList;
+fillVal = 'transparent';
 
 function initContextMenuCanvas() {
     var pages = '#viewer .page:not(.has-new-svg)';
     $.contextMenu({
         selector: pages,
         trigger: 'right',
+        build: function ($triggerElement, e) {
+            if ($('.svgsketch-wrap').hasClass('measures') || (e?.target && $(e?.target)?.hasClass('pdf-note'))
+                || e?.target && ($(e?.target)?.attr('id') === MARKUP_EDIT_OUTLINE_ID || $(e?.target)?.hasClass(CSS_CLASS_MARKUP_RESIZER))) {
+                return false;
+            } else if (isTargetSvgMarkup(e)) {
+                return {
+                    callback: function (key, options) { },
+                    items: getMarkupEditContextMenuItemList($triggerElement, e, true)
+                }
+            } else {
+                return {
+                    callback: function (key, options) {
+                        $(document).trigger(key, [options, $triggerElement, e]);
+                    },
         items: {
             "addNote": {
                 name: context.createLocale('app.viewer.pdf.contextMenu.addNote'),
@@ -37448,14 +37463,6 @@ function initContextMenuCanvas() {
                     setContainerInset(0);
                 }
             }
-        },
-        build: function ($triggerElement, e) {
-            if ($('.svgsketch-wrap').hasClass('measures') || (e?.target && $(e?.target)?.hasClass('pdf-note'))) {
-                return false;
-            } else {
-                return {
-                    callback: function (key, options) {
-                        $(document).trigger(key, [options, $triggerElement, e]);
                     }
                 };
             }
@@ -38974,6 +38981,15 @@ const CSS_CLASS_MARKUP_RESIZER = 'vitro-markup-resizer';
 const CSS_CLASS_PDF_NOTE = 'pdf-note';
 const CSS_CLASS_PAGE = 'page';
 const MARKUP_EDIT_OUTLINE_ID = 'markupEditOutline';
+const CSS_CLASS_CONTEXT_MENU_ICON = 'context-menu-icon';
+const CSS_CLASS_CONTEXT_MENU_ICON_EDIT = 'context-menu-icon-edit';
+const CSS_CLASS_CONTEXT_MENU_ICON_END_EDIT = 'context-menu-icon-end-edit';
+const CSS_CLASS_CONTEXT_MENU_ICON_CANCEL = 'context-menu-icon-quit';
+const CSS_CLASS_TOGGLED = 'toggled';
+const CONTEXT_MENU_SEP = "---------";
+const LOCALE_CONTEXT_MENU_EDIT = 'app.viewer.pdf.contextMenu.edit';
+const LOCALE_CONTEXT_MENU_END_EDIT = 'app.viewer.pdf.contextMenu.endEdit';
+const LOCALE_CONTEXT_MENU_CANCEL = 'app.viewer.pdf.contextMenu.cancel';
 let isMarkupEdit;
 let isMarkupMove;
 let isMarkupResize;
@@ -38983,13 +38999,13 @@ let markupUnderEditingSettings = {};
 let markupEditOutlineSettings = {};
 
 
-function onMarkupEditStart(e) {
+function onMarkupEditStart(e, targetId) {
     setPdfViewerCursorToolMode();
     if (isMarkupEdit) {
         endMarkupEdit();
     }
     isMarkupEdit = true;
-    createMarkupEditOutline(e);
+    createMarkupEditOutline(e, targetId);
     bindMouseUpEventHandler();
     bindOnMarkupEditEndHandler();
 }
@@ -39019,11 +39035,31 @@ function onMouseMove(e) {
 }
 
 function onMarkupMove(mouseX, mouseY) {
-    const x = markupEditOutlineSettings.position.x - markupMoveCoordinates.start.x + mouseX;
-    const y = markupEditOutlineSettings.position.y - markupMoveCoordinates.start.y + mouseY;
+    let x = markupEditOutlineSettings.position.x - markupMoveCoordinates.start.x + mouseX;
+    x = checkMarkupCoordinateX(x);
+    let y = markupEditOutlineSettings.position.y - markupMoveCoordinates.start.y + mouseY;
+    y = checkMarkupCoordinateY(y);
     setMarkupOutlinePosition($('#' + MARKUP_EDIT_OUTLINE_ID), x, y);
 }
 
+function checkMarkupCoordinateX(x) {
+    if (x < 0) {
+        return 0;
+    } else if (x + $('#' + MARKUP_EDIT_OUTLINE_ID).width() > $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width()) {
+        return $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - $('#' + MARKUP_EDIT_OUTLINE_ID).width();
+    }
+    return x;
+}
+
+function checkMarkupCoordinateY(y) {
+    if (y < 0) {
+        return 0;
+    } else if (y + $('#' + MARKUP_EDIT_OUTLINE_ID).height() > $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height()) {
+        return $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - $('#' + MARKUP_EDIT_OUTLINE_ID).height();
+    }
+    return y;
+}
+
 function onMarkupMoveEnd() {
     isMarkupMove = false;
     markupMoveCoordinates = {};
@@ -39042,14 +39078,14 @@ function refreshMarkupSimple() {
     let labelPosition = { ...markupEditOutlineSettings.position };
     const rotation = getPdfPagesRotation();
     if (rotation == 90) {
-        labelPosition.x = labelPosition.x + $('#markupEditOutline').height() + 1;
+        labelPosition.x = labelPosition.x + $('#' + MARKUP_EDIT_OUTLINE_ID).height() + 1;
     }
     if (rotation == 180) {
-        labelPosition.x = labelPosition.x + $('#markupEditOutline').width() + 1;
-        labelPosition.y = labelPosition.y + $('#markupEditOutline').height() + 1;
+        labelPosition.x = labelPosition.x + $('#' + MARKUP_EDIT_OUTLINE_ID).width() + 1;
+        labelPosition.y = labelPosition.y + $('#' + MARKUP_EDIT_OUTLINE_ID).height() + 1;
     }
     if (rotation == 270) {
-        labelPosition.y = labelPosition.y + $('#markupEditOutline').width() + 1;
+        labelPosition.y = labelPosition.y + $('#' + MARKUP_EDIT_OUTLINE_ID).width() + 1;
     }
     $('.pdf-note#' + markupUnderEditingSettings.issueId).css('left', labelPosition.x)
         .css('top', labelPosition.y);
@@ -39215,11 +39251,11 @@ function setMarkupSimpleUnderEditingSettingsNew() {
     const page = $('.' + CSS_CLASS_PAGE + '[data-page-number="' + markupUnderEditingSettings.markup.pageNr + '"]');
     const pageW = page.width();
     const pageH = page.height();
-    
 
-    if (rotation == 90) { 
+
+    if (rotation == 90) {
         position.x = labelPos.top / scale;
-        position.y = pageW/scale - (labelPos.left / scale + labelElmHeight);
+        position.y = pageW / scale - (labelPos.left / scale + labelElmHeight);
     } else if (rotation == 180) {
         position.x = pageW / scale - (labelPos.left / scale + labelElmWidth);
         position.y = pageH / scale - (labelPos.top / scale + labelElmHeight);
@@ -39227,9 +39263,9 @@ function setMarkupSimpleUnderEditingSettingsNew() {
         position.x = pageH / scale - (labelPos.top / scale + labelElmWidth);
         position.y = labelPos.left / scale;
     } else {
-        position.x = labelPos.left / scale;  
-        position.y = labelPos.top / scale;  
-    } 
+        position.x = labelPos.left / scale;
+        position.y = labelPos.top / scale;
+    }
 
     markupUnderEditingSettings.markup.position.x = position.x;
     markupUnderEditingSettings.markup.position.y = position.y;
@@ -39298,97 +39334,249 @@ function onMarkupResize(mouseX, mouseY) {
 }
 
 function getMarkupEditOutlineSettingsOnResizeTL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY) {
+    let posX, posY, maxWidth, maxHeight;
+    let x = (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth);
+    let y = (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight);
+
+    if ((markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth)) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth - deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth - deltaX);
+
+    if ((markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight - deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight - deltaY);
+
     const settings = {
         position: {
-            x: (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth),
-            y: (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight)
+            x: posX,
+            y: posY
         },
-        width: Math.abs(outlineWidth - deltaX),
-        height: Math.abs(outlineHeight - deltaY)
+        width: newWidth,
+        height: newHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeTC(outlineWidth, outlineHeight, mouseY, deltaY) {
+    let posY, maxHeight;
+    let y = (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight);
+
+    if ((markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight - deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight - deltaY);
+
     const settings = {
         position: {
             x: markupEditOutlineSettings.position.x,
-            y: (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight)
+            y: posY
         },
         width: outlineWidth,
-        height: Math.abs(outlineHeight - deltaY)
+        height: newHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeTR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY) {
+    let posX, posY, maxWidth, maxHeight;
+    let x = (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x
+    let y = (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight);
+
+    if (deltaX < 0 && Math.abs(deltaX) > outlineWidth) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth + deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth + deltaX);
+    if ((markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight - deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight - deltaY);
+
     const settings = {
         position: {
-            x: (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x,
-            y: (markupEditOutlineSettings.position.y + deltaY) <= (markupEditOutlineSettings.position.y + outlineHeight) ? (markupEditOutlineSettings.position.y + deltaY) : (markupEditOutlineSettings.position.y + outlineHeight)
+            x: posX,
+            y: posY
         },
-        width: Math.abs(outlineWidth + deltaX),
-        height: Math.abs(outlineHeight - deltaY)
+        width: newWidth,
+        height: newHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeCL(outlineWidth, outlineHeight, mouseX, deltaX) {
+    let posX, maxWidth;
+    let x = (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth);
+
+    if ((markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth)) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth - deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth - deltaX);
+
     const settings = {
         position: {
-            x: (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth),
-            y: markupEditOutlineSettings.position.y,
+            x: posX,
+            y: markupEditOutlineSettings.position.y
         },
-        width: Math.abs(outlineWidth - deltaX),
+        width: newWidth,
         height: outlineHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeCR(outlineWidth, outlineHeight, mouseX, deltaX) {
+    let posX, maxWidth;
+    let x = (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x
+    if (deltaX < 0 && Math.abs(deltaX) > outlineWidth) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth + deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth + deltaX);
     const settings = {
         position: {
-            x: (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x,
+            x: posX,
             y: markupEditOutlineSettings.position.y,
         },
-        width: Math.abs(outlineWidth + deltaX),
+        width: newWidth,
         height: outlineHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeBL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY) {
+    let posX, posY, maxWidth, maxHeight;
+    let x = (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth);
+    let y = (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y;
+
+    if ((markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth)) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth - deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth - deltaX);
+
+    if ((deltaY < 0 && Math.abs(deltaY) > outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight + deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight + deltaY);
+
     const settings = {
         position: {
-            x: (markupEditOutlineSettings.position.x + deltaX) <= (markupEditOutlineSettings.position.x + outlineWidth) ? (markupEditOutlineSettings.position.x + deltaX) : (markupEditOutlineSettings.position.x + outlineWidth),
-            y: (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y
+            x: posX,
+            y: posY
         },
-        width: Math.abs(outlineWidth - deltaX),
-        height: Math.abs(outlineHeight + deltaY)
+        width: newWidth,
+        height: newHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeBC(outlineWidth, outlineHeight, mouseY, deltaY) {
+    let posY, maxHeight;
+    let y = (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y;
+    if ((deltaY < 0 && Math.abs(deltaY) > outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight + deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight + deltaY);
     const settings = {
         position: {
             x: markupEditOutlineSettings.position.x,
             y: (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y
         },
         width: outlineWidth,
-        height: Math.abs(outlineHeight + deltaY)
+        height: newHeight
     };
     return settings;
 }
 
 function getMarkupEditOutlineSettingsOnResizeBR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY) {
+    let posX, posY, maxWidth, maxHeight;
+    let x = (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x;
+    let y = (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y;
+    if (deltaX < 0 && Math.abs(deltaX) > outlineWidth) {
+        const safeX = checkMarkupCoordinateX(x);
+        deltaX = deltaX - (x - safeX);
+        posX = safeX;
+        maxWidth = markupEditOutlineSettings.position.x + outlineWidth;
+    } else {
+        posX = x;
+        maxWidth = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').width() - x;
+    }
+    const newWidth = Math.abs(outlineWidth + deltaX) > maxWidth ? maxWidth : Math.abs(outlineWidth + deltaX);
+    if ((deltaY < 0 && Math.abs(deltaY) > outlineHeight)) {
+        const safeY = checkMarkupCoordinateY(y);
+        deltaY = deltaY - (y - safeY);
+        posY = safeY;
+        maxHeight = markupEditOutlineSettings.position.y + outlineHeight;
+    } else {
+        posY = y;
+        maxHeight = $('#' + MARKUP_EDIT_OUTLINE_ID).closest('.page').height() - y;
+    }
+    const newHeight = Math.abs(outlineHeight + deltaY) > maxHeight ? maxHeight : Math.abs(outlineHeight + deltaY);
     const settings = {
         position: {
-            x: (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x,
-            y: (deltaY < 0 && Math.abs(deltaY) > outlineHeight) ? (markupEditOutlineSettings.position.y - Math.abs(deltaY) + outlineHeight) : markupEditOutlineSettings.position.y
+            x: posX,
+            y: posY
         },
-        width: Math.abs(outlineWidth + deltaX),
-        height: Math.abs(outlineHeight + deltaY)
+        width: newWidth,
+        height: newHeight
     };
     return settings;
 }
@@ -39418,19 +39606,34 @@ function setMarkupEditOutlineSettingsNew() {
 }
 
 function bindOnMarkupEditEndHandler() {
-    window.addEventListener('keydown', onMarkupEditEnd);
+    window.addEventListener('keydown', onMarkupEditEndKeydownHandler);
+    window.addEventListener('mousedown', onMarkupEditEndMousedownHandler);
 }
 
 function unbindOnMarkupEditEndHandler() {
-    window.removeEventListener('keydown', onMarkupEditEnd);
+    window.removeEventListener('keydown', onMarkupEditEndKeydownHandler);
+    window.removeEventListener('mousedown', onMarkupEditEndMousedownHandler);
+}
+
+function onMarkupEditEndKeydownHandler(e) {
+    if ((e.key === 'Escape' && isMarkupEdit) || (isClickOutsideMarkupEdit(e))) {
+        endMarkupEdit();
+    }
 }
 
-function onMarkupEditEnd(e) {
-    if (e.key === 'Escape' && isMarkupEdit) {
+function onMarkupEditEndMousedownHandler(e) {
+    if (e.button === 0 && isClickOutsideMarkupEdit(e)) {
         endMarkupEdit();
     }
 }
 
+function isClickOutsideMarkupEdit(e) {
+    return !(e.target && ($(e?.target)?.hasClass(CSS_CLASS_MARKUP_RESIZER) || $(e?.target)?.attr('id') === MARKUP_EDIT_OUTLINE_ID)
+        || $(e?.target)?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_CANCEL) || $(e?.target)?.parent()?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_CANCEL)
+        || $(e?.target)?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_END_EDIT) || $(e?.target)?.parent()?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_END_EDIT)
+        || $(e?.target)?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_EDIT) || $(e?.target)?.parent()?.hasClass(CSS_CLASS_CONTEXT_MENU_ICON_EDIT));
+}
+
 function endMarkupEdit() {
     isMarkupEdit = false;
     saveMarkup();
@@ -39455,11 +39658,11 @@ function removeMarkupEditOutline() {
     document.getElementById(MARKUP_EDIT_OUTLINE_ID)?.remove();
 }
 
-function createMarkupEditOutline(e) {
+function createMarkupEditOutline(e, targetId) {
     if (e?.target) {
         removeMarkupEditOutline();
         const page = $(e.target).closest('.' + CSS_CLASS_PAGE);
-        const markupSettings = getMarkupSettings(e.target);
+        const markupSettings = getMarkupSettings(e.target, targetId);
         doCreateMarkupEditOutline(page, markupSettings);
     }
 }
@@ -39628,8 +39831,9 @@ function getMarkupEditOutlinePositionRotation270Deg(markupSettings, scale, svgsk
     return position;
 }
 
-function getMarkupSettings(target) {
-    const issue = context.issueList.find(item => item.id === target.id);
+function getMarkupSettings(target, targetId) {
+    const id = targetId ? targetId : target.id;
+    const issue = context.issueList.find(item => item.id === id);
     if (issue) {
         const markup = issue?.markup ? JSON.parse(issue?.markup) : undefined;
         markupUnderEditingSettings = { issueId: issue.id, markup: markup }
@@ -39681,37 +39885,109 @@ function initMarkupEditContextMenu() {
     });
 }
 
-function getMarkupEditContextMenuItemList($triggerElement, e) {
-    const menuItems = {
-        "editMarkup": {
-            name: context.createLocale('app.viewer.pdf.contextMenu.edit'),
-            callback: function (key, options) {
-                onMarkupEditStart(e);
+function initMarkupOutlineEditContextMenu() {
+    const selector = '#' + MARKUP_EDIT_OUTLINE_ID;
+    $.contextMenu({
+        selector: selector,
+        trigger: 'right',
+        build: function ($triggerElement, e) {
+            return {
+                callback: function (key, options) { },
+                items: getMarkupEditContextMenuItemList($triggerElement, e)
+            }
+        }
+    });
+}
+
+function getMarkupEditContextMenuItemList($triggerElement, e, isSvgMarkup) {
+    const menuItems = {};
+    if (isMarkupEdit && (markupUnderEditingSettings.issueId === $triggerElement.attr('id')
+        || $triggerElement.attr('id') === MARKUP_EDIT_OUTLINE_ID)) {
+        menuItems.endEditMarkup = getMarkupEditContextMenuItemEndEditMarkup();
+    } else {
+        menuItems.editMarkup = getMarkupEditContextMenuItemEditMarkup(e, isSvgMarkup);
+    }
+    menuItems.sep1 = getMarkupEditContextMenuSep();
+    menuItems.quit = getMarkupEditContextMenuItemCancel();
+    return menuItems;
+}
+
+function getMarkupEditContextMenuItemEditMarkup(e, isSvgMarkup) {
+    return {
+        name: context.createLocale(LOCALE_CONTEXT_MENU_EDIT),
+        callback: function (key, options) {
+            let targetId;
+            if (isSvgMarkup) {
+                targetId = e.target.id?.replace('svg-', '');
             }
+            onMarkupEditStart(e, targetId);
         },
-        "sep1": "---------",
-        "quit": {
-            name: context.createLocale('app.viewer.pdf.contextMenu.cancel'),
-            icon: function () {
-                return 'context-menu-icon context-menu-icon-quit';
-            },
+        icon: function () {
+            return CSS_CLASS_CONTEXT_MENU_ICON + ' ' + CSS_CLASS_CONTEXT_MENU_ICON_EDIT;
+        }
+    };
+}
+
+function getMarkupEditContextMenuItemEndEditMarkup() {
+    return {
+        name: context.createLocale(LOCALE_CONTEXT_MENU_END_EDIT),
+        callback: function (key, options) {
+            endMarkupEdit();
+        },
+        icon: function () {
+            return CSS_CLASS_CONTEXT_MENU_ICON + ' ' + CSS_CLASS_CONTEXT_MENU_ICON_END_EDIT;
         }
     };
-    return menuItems;
+}
+
+function getMarkupEditContextMenuItemCancel() {
+    return {
+        name: context.createLocale(LOCALE_CONTEXT_MENU_CANCEL),
+        icon: function () {
+            return CSS_CLASS_CONTEXT_MENU_ICON + ' ' + CSS_CLASS_CONTEXT_MENU_ICON_CANCEL;
+        }
+    };
+}
+
+function getMarkupEditContextMenuSep() {
+    return CONTEXT_MENU_SEP;
 }
 
 function setPdfViewerCursorToolMode() {
     const btnCursorTool = $('#cursorSelectTool');
     const btnDrawAnnotation = $('#btnDrawAnnotation');
-    if (btnDrawAnnotation.hasClass('toggled')) {
+    if (btnDrawAnnotation.hasClass(CSS_CLASS_TOGGLED)) {
         btnDrawAnnotation.click();
     }
-    if (!btnCursorTool.hasClass('toggled')) {
+    if (!btnCursorTool.hasClass(CSS_CLASS_TOGGLED)) {
         btnCursorTool.click();
     }
 }
 
-initMarkupEditContextMenu();
+function isTargetSvgMarkup(e) {
+    return (e?.target && !e?.target?.id?.startsWith('surface-') && (e?.target.tagName === 'rect' || e?.target.tagName === 'path'
+        || e?.target.tagName === 'line' || e?.target.tagName === 'polygon'
+        || e?.target.tagName === 'ellipse'));
+}
+
+function bindSvgSketchpadMouseEventHandler() {
+    window.addEventListener('mousedown', svgSketchpadMouseDownEventHandler);
+    window.addEventListener('mouseup', svgSketchpadMouseUpEventHandler);
+}
+
+function svgSketchpadMouseDownEventHandler(e) {
+    if (e.button == 0 && !$(e.target)?.closest('.page')?.find('.svgsketch-wrap')?.hasClass('active')) {
+        $(e?.target)?.closest('.page')?.find('.svgsketch-wrap')?.addClass('to-bg');
+    }
+}
+
+function svgSketchpadMouseUpEventHandler(e) {
+    $(e?.target)?.closest('.page')?.find('.svgsketch-wrap')?.removeClass('to-bg');
+}
+
+initMarkupEditContextMenu();
+initMarkupOutlineEditContextMenu();
+bindSvgSketchpadMouseEventHandler();
 $(document).ready(function() {
     context.openFile();