@vitrosoftware/common-ui-ts 1.1.227 → 1.1.229

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.227",
+    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.229",
     kind: OptionKind.WORKER
   }
 };
@@ -35538,6 +35538,7 @@ function initZoomPageEvent() {
             if(e.pageNumber == getCurrentPage()) {
                 $(document).trigger('needZoom');
             }
+            reloadMarkupEditOutlineSettings(e.pageNumber, true);
         });
         // PDFViewerApplication.eventBus.on('pagechange', function(e) {
         //      console.log('pagechange', e);
@@ -37418,6 +37419,13 @@ const EVENT_SEARCH_ISSUE_LIST = 'vitro.search.issue.list';
 const EVENT_ISSUE_LIST_REFRESH = 'vitro.issue.list.refresh';
 const EVENT_ISSUE_LIST_SELECT_ITEM = 'vitro.issue.list.select.item';
 const EVENT_ITEM_CHANGED = 'vitro.item.changed';
+const ITEM_SELECT_DIALOG = 'ItemSelectDialog';
+const FILE_EXTENSION_PDF = '.pdf';
+const DOC_A = 'docA';
+const DOC_B = 'docB';
+let currentDocFileVersionList;
+let docAFileVersionList;
+let docBFileVersionList;
 
 function initContextMenuCanvas() {
     var pages = '#viewer .page:not(.has-new-svg)';
@@ -37442,7 +37450,7 @@ function initContextMenuCanvas() {
             }
         },
         build: function ($triggerElement, e) {
-            if ($('.svgsketch-wrap').hasClass('measures')) {
+            if ($('.svgsketch-wrap').hasClass('measures') || (e?.target && $(e?.target)?.hasClass('pdf-note'))) {
                 return false;
             } else {
                 return {
@@ -37525,6 +37533,8 @@ function initCompare() {
     bindCompareDlgPageChange();
     bindBtnsCompareDocsSelect();
     bindCompareDlgVersionChange();
+    initButtonSelectFileDocA();
+    initButtonSelectFileDocB();
 
     let fileName = context.file.fieldValueMap.name;
     $('div.compare-dlg_doc-a_name').text(fileName);
@@ -37542,26 +37552,8 @@ function initCompare() {
         }));
     });
 
-    let loadedVersionId = getLoadedVersionId();
-    let version = context.fileVersionList.find(item => item.id == loadedVersionId);
-    let loadedVersion = `v${version.name}`;
-    $('#docAVersion').val(loadedVersion);
-    let loadedVersionArray = version.name.split('.');
-    let loadedVersionMinor = loadedVersionArray[1];
-    let loadedVersionMajor = loadedVersionArray[0];
-    if (loadedVersionId != context.currentVersionId) {
-        let lastVersion = context.fileVersionList.find(item => item.id == context.currentVersionId);
-        let lastVersionLabel = `v${lastVersion.name}`;
-        $('#docBVersion').val(lastVersionLabel);
-    } else {
-        if (context.fileVersionList.length > 1) {
-            let previousVersion = context.fileVersionList[1];
-            let previousVersionLabel = `v${previousVersion.name}`;
-            $('#docBVersion').val(previousVersionLabel);
-        } else {
-            $('#docBVersion').val(loadedVersion);
-        }
-    }
+    currentDocFileVersionList = context.fileVersionList;
+    initDocVersion();
     $('#docAPage').val(1);
     $('#docBPage').val(1);
 }
@@ -37577,14 +37569,12 @@ function getLoadedVersionId() {
 function showDlgCompare() {
     $('.compare-dlg-wrap').show();
 
-    let currentPage = getCurrentPage();
-    $("#docAPage").val(currentPage);
-    $("#docBPage").val(currentPage);
+    resetDocFileVersionList();
+    resetDocPage();
+    initDocVersion();
 
     compareObjList = getCompareObjList();
-
     loadDocAObj(compareObjList.docA.url);
-
     loadDocBObj(compareObjList.docB.url);
 }
 
@@ -37602,6 +37592,7 @@ function getDocA() {
     let docAVersion = docAVersionValue.substring(1);
     let docAPage = Number($("#docAPage").val());
     let docAVersionFile = context.fileVersionList.find(item => item.name == docAVersion);
+    docAFileVersionList = context.fileVersionList;
     let docA = {
         name: fileName,
         version: docAVersionValue,
@@ -37621,6 +37612,7 @@ function getDocB() {
     let docBVersion = docBVersionValue.substring(1);
     let docBPage = Number($("#docBPage").val());
     let docBVersionFile = context.fileVersionList.find(item => item.name == docBVersion);
+    docBFileVersionList = context.fileVersionList;
     let docB = {
         name: fileName,
         version: docBVersionValue,
@@ -37758,14 +37750,14 @@ function isComparedDocumentCurrentOpened(url) {
 
 function bindCompareDlgDcoAVersionChange() {
     $('#docAVersion').on('change', function () {
-        compareObjList.docA = getDocA();
+        refreshCompareObjListDocA();
         loadDocAObj(compareObjList.docA.url);
     });
 }
 
 function bindCompareDlgDcoBVersionChange() {
     $('#docBVersion').on('change', function () {
-        compareObjList.docB = getDocB();
+        refreshCompareObjListDocB();
         loadDocBObj(compareObjList.docB.url);
     });
 }
@@ -37787,7 +37779,7 @@ function bindCompareDlgDcoAPageChange() {
         } else {
             enableAllpagesInOtherDropDown($('#docBPage'));
         }
-        compareObjList.docA = getDocA();
+        compareObjList.docA.page = Number($('#docAPage').val());
         reloadCompareThumb(pdfDocObjA, thumbContainer, Number($(this).val()));
     });
 }
@@ -37800,7 +37792,7 @@ function bindCompareDlgDcoBPageChange() {
         } else {
             enableAllpagesInOtherDropDown($('#docAPage'));
         }
-        compareObjList.docB = getDocB();
+        compareObjList.docB.page = Number($('#docBPage').val());
         reloadCompareThumb(pdfDocObjB, thumbContainer, Number($(this).val()));
     });
 }
@@ -38226,24 +38218,13 @@ function updatePage(e) {
         refreshIssueList();
     }
 
-    if (e.type === context.updateIssueEvent && markup) {
-        const itemId = {
-            id: item.id,
-            contentTypeId: item.contentTypeId,
-            listId: item.listId,
-            parentId: item.parentId,
-            siteId: item.siteId
-        };
-
-        const event = new CustomEvent('vitro.item.changed', {
-            detail: {
-                itemIdList: [itemId],
-                listId: item.listId
-            }
-        });
-        window.dispatchEvent(event);
-        refreshIssueList();
-        updateContextIssueList = true;
+    if (e.type === context.updateIssueEvent) {
+        if (!$('#btnToggleSidebarNotes').hasClass('toggled')) {
+            refreshIssueList();
+        }
+        if (markup) {
+            updateContextIssueList = true;
+        }
     }
 
     removeNewSvg();
@@ -38667,13 +38648,15 @@ function initItemChangedEventListener() {
     window.addEventListener(EVENT_ITEM_CHANGED, onItemChanged);
 }
 
-function onItemChanged() {
-    const width = $('.vitro-issue-detail').width();
-    if (width) {
-        setContainerInset(width);
-    }
-    if (!$('.vitro-issue-detail').resizable('instance')) {
-        initResizable($('.vitro-issue-detail'));
+function onItemChanged(e) {
+    if (!isEventItemSelectDialog(e)) {
+        const width = $('.vitro-issue-detail').width();
+        if (width && $('.vitro-issue-detail').is(':visible')) {
+            setContainerInset(width);
+        }
+        if (!$('.vitro-issue-detail').resizable('instance')) {
+            initResizable($('.vitro-issue-detail'));
+        }
     }
 }
 
@@ -38774,7 +38757,961 @@ function bindOnSidebarToggle() {
 function isScaleModeRelative() {
     const currentScaleMode = PDFViewerApplication.pdfViewer._currentScaleValue;
     return currentScaleMode == 'page-width' || currentScaleMode == 'page-fit' || currentScaleMode == 'auto';
+}
+
+function initButtonSelectFileDocA() {
+    const btn = $('<a id="btnSelectFileDocA">' + context.selectFileBtnText + '</a>');
+    btn.on('click', onClickButtonSelectFileDocA);
+    $('.compare-dlg_doc-a_file-select').append(btn);
+}
+
+async function onClickButtonSelectFileDocA(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const idList = await context.getItemIdList();
+    const id = idList?.length ? idList[0] : false;
+    onSelectFileDocA(id);
+}
+
+async function onSelectFileDocA(id) {
+    if (isSelectedFileChanged(id, getDocFileIdFromUrl(compareObjList.docA.url))) {
+        const docObj = await getDocObj(id, $('#docAVersionList'), $("#docAVersion"), $("#docAPage"), $('div.compare-dlg_doc-a_name'), DOC_A);
+        if (docObj) {
+            compareObjList.docA = docObj;
+            loadDocAObj(compareObjList.docA.url);
+        }
+    }
+}
+
+function isSelectedFileChanged(id, compareObjListDocId) {
+    return id && (context.file.id !== id || (context.file.id === id && id !== compareObjListDocId));
+}
+
+async function getDocObj(id, fileVersionListElm, docVersionElm, docPageElm, fileNameElm, docType) {
+    const file = await context.itemService.get(id);
+    const fileName = file.fieldValueMap.name;
+
+    if (isValidDocumentFormat(fileName)) {
+        const fileId = file.id;
+        const versionList = await context.fileService.get(id);
+        const fileVersionList = getFileVersionList(versionList);
+        setDocFileVersionList(docType, fileVersionList);
+        const fileVersion = file.fieldValueMap.version.fieldValueMap.name;
+        setDlgDocFileName(fileNameElm, fileName);
+        refreshVersionList(fileVersionListElm, fileVersionList);
+        const docVersionValue = 'v' + fileVersion;
+        docVersionElm.val(docVersionValue);
+        docPageElm.val(1);
+        const docVersionFile = fileVersionList.find(item => item.name == fileVersion);
+
+        const doc = {
+            name: fileName,
+            version: docVersionValue,
+            page: 1,
+            uploadBy: docVersionFile.userName,
+            uploadDate: docVersionFile.date,
+            url: `/api/file/getByItemId/${fileId}/${fileVersion}`
+        };
+
+        return doc;
+    }
+
+    return false;
+}
+
+function setDocFileVersionList(docType, fileVersionList) {
+    if (docType === DOC_A) {
+        docAFileVersionList = fileVersionList;
+    } else {
+        docBFileVersionList = fileVersionList;
+    }
+}
+
+function refreshVersionList(fileVersionListElm, fileVersionList) {
+    fileVersionListElm.html(null);
+    $.each(fileVersionList, function (i, item) {
+        const value = 'v' + item.name;
+        fileVersionListElm.append($('<li>', {
+            value: value,
+            text: value,
+        }));
+    });
+}
+
+function getFileVersionList(versionList) {
+    const list = versionList?.map(version => {
+        return {
+            id: version.id,
+            name: version.fieldValueMap.name,
+            userName: version.insertUserName,
+            date: context.getDateText(version.insertDate)
+        };
+    });
+
+    return list;
+};
+
+function setDlgDocFileName(fileNameElm, fileName) {
+    fileNameElm.text(fileName);
+}
+
+function initButtonSelectFileDocB() {
+    const btn = $('<a id="btnSelectFileDocB">' + context.selectFileBtnText + '</a>');
+    btn.on('click', onClickButtonSelectFileDocB);
+    $('.compare-dlg_doc-b_file-select').append(btn);
+}
+
+async function onClickButtonSelectFileDocB(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const idList = await context.getItemIdList();
+    const id = idList?.length ? idList[0] : false;
+    onSelectFileDocB(id);
+}
+
+async function onSelectFileDocB(id) {
+    if (isSelectedFileChanged(id, getDocFileIdFromUrl(compareObjList.docB.url))) {
+        const docObj = await getDocObj(id, $('#docBVersionList'), $("#docBVersion"), $("#docBPage"), $('div.compare-dlg_doc-b_name'), DOC_B);
+        if (docObj) {
+            compareObjList.docB = docObj;
+            loadDocBObj(compareObjList.docB.url);
+        }
+
+    }
+}
+
+function getDocFileIdFromUrl(url) {
+    const urlArr = url.split('/');
+    return itemId = urlArr[urlArr.length - 2];
+}
+
+function refreshCompareObjListDocA() {
+    refreshCompareObjListDoc(DOC_A);
+};
+
+function refreshCompareObjListDocB() {
+    refreshCompareObjListDoc(DOC_B);
+};
+
+function refreshCompareObjListDoc(docType) {
+    const docVersionValue = $("#" + docType + "Version").val();
+    const docVersion = docVersionValue.substring(1);
+    const docPage = Number($("#" + docType + "Page").val());
+    let docVersionFile;
+    if (docType === DOC_A) {
+        docVersionFile = docAFileVersionList.find(item => item.name == docVersion);
+    } else {
+        docVersionFile = docBFileVersionList.find(item => item.name == docVersion);
+    }
+    compareObjList[docType].page = docPage;
+    compareObjList[docType].version = docVersionValue;
+    compareObjList[docType].uploadBy = docVersionFile.userName;
+    compareObjList[docType].uploadDate = docVersionFile.date;
+    compareObjList[docType].url = getDocVersionUrl(compareObjList[docType].url, docVersion);
+}
+
+function getDocVersionUrl(url, version) {
+    const lastSlashIndex = url.lastIndexOf('/');
+    if (lastSlashIndex === -1) {
+        return url;
+    }
+    const partBeforeLastSlash = url.slice(0, lastSlashIndex + 1);
+    return partBeforeLastSlash + version;
+}
+
+function resetDocFileVersionList() {
+    docAFileVersionList = currentDocFileVersionList;
+    docBFileVersionList = currentDocFileVersionList;
+}
+
+function resetDocPage() {
+    const currentPage = getCurrentPage();
+    $("#docAPage").val(currentPage);
+    $("#docBPage").val(currentPage);
+}
+
+function initDocVersion() {
+    const loadedVersion = getInitVersionDocA();
+    const versionDocB = getInitVersionDocB(loadedVersion);
+    $('#docAVersion').val(loadedVersion);
+    $('#docBVersion').val(versionDocB);
+}
+
+function getInitVersionDocA() {
+    const loadedVersionId = getLoadedVersionId();
+    const version = context.fileVersionList.find(item => item.id == loadedVersionId);
+    const loadedVersion = `v${version.name}`;
+    return loadedVersion;
+}
+
+function getInitVersionDocB(loadedVersion) {
+    const loadedVersionId = getLoadedVersionId();
+    if (loadedVersionId != context.currentVersionId) {
+        const lastVersion = context.fileVersionList.find(item => item.id == context.currentVersionId);
+        const lastVersionLabel = `v${lastVersion.name}`;
+        return lastVersionLabel;
+    } else {
+        if (context.fileVersionList.length > 1) {
+            const previousVersion = context.fileVersionList[1];
+            const previousVersionLabel = `v${previousVersion.name}`;
+            return previousVersionLabel;
+        } else {
+            return loadedVersion;
+        }
+    }
+}
+
+function isValidDocumentFormat(filename) {
+    const lowercasedFilename = filename.toLowerCase();
+    return lowercasedFilename.endsWith(FILE_EXTENSION_PDF);
+}
+
+function isEventItemSelectDialog(e) {
+    return e?.detail?.eventScopeId?.startsWith(ITEM_SELECT_DIALOG);
 }
+const MARKUP_RESIZER_ID_PREFIX = 'markupResizer';
+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';
+let isMarkupEdit;
+let isMarkupMove;
+let isMarkupResize;
+let markupResizeCoordinates = {}; // {start: {mouseX, mouseY}, end: {mouseX, mouseY}, type: tl|tc|tr|...}
+let markupMoveCoordinates = {}; // {start: {mouseX, mouseY}, end: {mouseX, mouseY}}
+let markupUnderEditingSettings = {};
+let markupEditOutlineSettings = {};
+
+
+function onMarkupEditStart(e) {
+    setPdfViewerCursorToolMode();
+    if (isMarkupEdit) {
+        endMarkupEdit();
+    }
+    isMarkupEdit = true;
+    createMarkupEditOutline(e);
+    bindMouseUpEventHandler();
+    bindOnMarkupEditEndHandler();
+}
+
+function onMarkupEditOutlineMouseDown(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    isMarkupMove = true;
+    markupMoveCoordinates.start = { x: e.clientX, y: e.clientY };
+    bindOnMouseMoveEventHandler();
+}
+
+function onMarkupEditOutlineMouseUp(e) {
+    markupMoveCoordinates.end = { x: e.clientX, y: e.clientY };
+    unbindOnMouseMoveEventHandler()
+    onMarkupMoveEnd();
+}
+
+function onMouseMove(e) {
+    if (isMarkupEdit && isMarkupMove) {
+        onMarkupMove(e.clientX, e.clientY);
+    }
+    if (isMarkupEdit && isMarkupResize) {
+        onMarkupResize(e.clientX, e.clientY);
+    }
+}
+
+function onMarkupMove(mouseX, mouseY) {
+    const x = markupEditOutlineSettings.position.x - markupMoveCoordinates.start.x + mouseX;
+    const y = markupEditOutlineSettings.position.y - markupMoveCoordinates.start.y + mouseY;
+    setMarkupOutlinePosition($('#' + MARKUP_EDIT_OUTLINE_ID), x, y);
+}
+
+function onMarkupMoveEnd() {
+    isMarkupMove = false;
+    markupMoveCoordinates = {};
+    setMarkupEditOutlinePositionNew();
+    if (markupEditOutlineSettings.isSimple) {
+        refreshMarkupSimple();
+        setMarkupSimpleUnderEditingSettingsNew();
+    } else {
+        setMarkupUnderEditingSettingsNew(false);
+        refreshMarkup();
+    }
+    updateMarkupInContextIssueList();
+}
+
+function refreshMarkupSimple() {
+    let labelPosition = { ...markupEditOutlineSettings.position };
+    const rotation = getPdfPagesRotation();
+    if (rotation == 90) {
+        labelPosition.x = labelPosition.x + $('#markupEditOutline').height() + 1;
+    }
+    if (rotation == 180) {
+        labelPosition.x = labelPosition.x + $('#markupEditOutline').width() + 1;
+        labelPosition.y = labelPosition.y + $('#markupEditOutline').height() + 1;
+    }
+    if (rotation == 270) {
+        labelPosition.y = labelPosition.y + $('#markupEditOutline').width() + 1;
+    }
+    $('.pdf-note#' + markupUnderEditingSettings.issueId).css('left', labelPosition.x)
+        .css('top', labelPosition.y);
+}
+
+function refreshMarkup() {
+    const markupSvgData = { ...markupUnderEditingSettings.markup.svg };
+    if (!$('#' + markupSvgData.id)?.length) {
+        markupSvgData.id = markupUnderEditingSettings.issueId;
+    }
+    loadSvgShape(markupSvgData);
+    refreshMarkupLabel(markupSvgData);
+}
+
+function refreshMarkupLabel(markupSvgData) {
+    const rotation = getPdfPagesRotation();
+    const scale = getPdfCanvasScale();
+    const labelPosition = getMarkupLabelPositionBySvgType(markupSvgData, markupUnderEditingSettings.markup.position);
+    const labelPositionScaled = { x: labelPosition.x * scale, y: labelPosition.y * scale };
+    let labelPositionWithRotation = { ...labelPositionScaled };
+    if (rotation > 0) {
+        const data = {
+            position: { ...labelPositionScaled },
+            pageNr: markupUnderEditingSettings.markup.pageNr
+        };
+        labelPositionWithRotation = getNoteLabelPositionWithRotation(data, rotation);
+    }
+    const markupLabelElm = $('#' + markupUnderEditingSettings.issueId);
+    markupLabelElm.css('left', labelPositionWithRotation.x).css('top', labelPositionWithRotation.y);
+}
+
+function updateMarkupInContextIssueList() {
+    const issueIndex = context.issueList.findIndex(item => item.id === markupUnderEditingSettings.issueId);
+    context.issueList[issueIndex].markup = JSON.stringify(markupUnderEditingSettings.markup);
+}
+
+function setMarkupEditOutlinePositionNew() {
+    const markupEditOutlinePosition = $('#' + MARKUP_EDIT_OUTLINE_ID).position();
+    markupEditOutlineSettings.position.x = markupEditOutlinePosition?.left;
+    markupEditOutlineSettings.position.y = markupEditOutlinePosition?.top;
+}
+
+function getMarkupEditOutlineSettingsNormalized() {
+    const svgsketchElm = $('#svgsketch-' + markupUnderEditingSettings.markup.pageNr);
+    const svgsketchWidth = svgsketchElm.width();
+    const svgsketchHeight = svgsketchElm.height();
+    const scale = getPdfCanvasScale();
+    const rotation = getPdfPagesRotation();
+
+    if (rotation === 90) {
+        return getMarkupEditOutlineSettingsNormalizedRotation90Deg(scale, svgsketchWidth);
+    } else if (rotation === 180) {
+        return getMarkupEditOutlineSettingsNormalizedRotation180Deg(scale, svgsketchWidth, svgsketchHeight);
+    } else if (rotation === 270) {
+        return getMarkupEditOutlineSettingsNormalizedRotation270Deg(scale, svgsketchHeight);
+    } else {
+        return getMarkupEditOutlineSettingsNormalizedRotation0Deg(scale);
+    }
+}
+
+function getMarkupEditOutlineSettingsNormalizedRotation0Deg(scale) {
+    const settings = {
+        position: {
+            x: markupEditOutlineSettings.position.x / scale,
+            y: markupEditOutlineSettings.position.y / scale
+        },
+        width: markupEditOutlineSettings.width / scale,
+        height: markupEditOutlineSettings.height / scale
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsNormalizedRotation90Deg(scale, svgsketchWidth) {
+    const settings = {
+        position: {
+            x: markupEditOutlineSettings.position.y / scale,
+            y: (svgsketchWidth - markupEditOutlineSettings.width - markupEditOutlineSettings.position.x) / scale
+        },
+        width: markupEditOutlineSettings.height / scale,
+        height: markupEditOutlineSettings.width / scale
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsNormalizedRotation180Deg(scale, svgsketchWidth, svgsketchHeight) {
+    const settings = {
+        position: {
+            x: (svgsketchWidth - markupEditOutlineSettings.width - markupEditOutlineSettings.position.x) / scale,
+            y: (svgsketchHeight - markupEditOutlineSettings.height - markupEditOutlineSettings.position.y) / scale
+        },
+        width: markupEditOutlineSettings.width / scale,
+        height: markupEditOutlineSettings.height / scale
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsNormalizedRotation270Deg(scale, svgsketchHeight) {
+    const settings = {
+        position: {
+            x: (svgsketchHeight - markupEditOutlineSettings.height - markupEditOutlineSettings.position.y) / scale,
+            y: markupEditOutlineSettings.position.x / scale
+        },
+        width: markupEditOutlineSettings.height / scale,
+        height: markupEditOutlineSettings.width / scale
+    };
+    return settings;
+}
+
+function getMarkupLabelPosition(svgData) {
+    var topFix = 15;
+    var leftFix = 20;
+
+    var relX = svgData.position.x - leftFix;
+    var relY = svgData.position.y - topFix;
+
+    var position = {
+        x: relX,
+        y: relY
+    };
+
+    return position;
+}
+
+function getMarkupLabelPositionBySvgType(svgData, labelPosition) {
+    let markupLabelPosition = { ...labelPosition };
+    if (svgData.type == 'ellipse' || svgData.type == 'polygon') {
+        markupLabelPosition.y = labelPosition.y + svgData.height / 2;
+    } else if (svgData.type == 'line' || svgData.type == 'arrow' || svgData.type == 'msr_line') {
+        if (svgData.direction == 'bltr') {
+            markupLabelPosition.y = labelPosition.y + svgData.height;
+        } else if (svgData.direction == 'trbl') {
+            markupLabelPosition.x = labelPosition.x + svgData.width;
+        } else if (svgData.direction == 'brtl') {
+            markupLabelPosition.x = labelPosition.x + svgData.width;
+            markupLabelPosition.y = labelPosition.y + svgData.height;
+        }
+    }
+    return markupLabelPosition;
+}
+
+function setMarkupUnderEditingSettingsNew(isSetSize) {
+    const markupEditOutlineSettingsNormalized = getMarkupEditOutlineSettingsNormalized();
+    if (isSetSize) {
+        markupUnderEditingSettings.markup.svg.width = markupEditOutlineSettingsNormalized.width;
+        markupUnderEditingSettings.markup.svg.height = markupEditOutlineSettingsNormalized.height;
+    }
+    markupUnderEditingSettings.markup.svg.position.x = markupEditOutlineSettingsNormalized.position.x;
+    markupUnderEditingSettings.markup.svg.position.y = markupEditOutlineSettingsNormalized.position.y;
+    const labelPosition = getMarkupLabelPosition(markupUnderEditingSettings.markup.svg);
+    markupUnderEditingSettings.markup.position = labelPosition;
+}
+
+function setMarkupSimpleUnderEditingSettingsNew() {
+    let position = {};
+
+    const scale = getPdfCanvasScale();
+    const rotation = getPdfPagesRotation();
+
+    const labelElm = $('#' + markupUnderEditingSettings.issueId);
+    const labelPos = labelElm.position();
+    const labelElmWidth = labelElm.outerWidth();
+    const labelElmHeight = labelElm.outerHeight();
+    const page = $('.' + CSS_CLASS_PAGE + '[data-page-number="' + markupUnderEditingSettings.markup.pageNr + '"]');
+    const pageW = page.width();
+    const pageH = page.height();
+    
+
+    if (rotation == 90) { 
+        position.x = labelPos.top / scale;
+        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);
+    } else if (rotation == 270) {
+        position.x = pageH / scale - (labelPos.top / scale + labelElmWidth);
+        position.y = labelPos.left / scale;
+    } else {
+        position.x = labelPos.left / scale;  
+        position.y = labelPos.top / scale;  
+    } 
+
+    markupUnderEditingSettings.markup.position.x = position.x;
+    markupUnderEditingSettings.markup.position.y = position.y;
+}
+
+function onMarkupResizerMouseDown(e) {
+    isMarkupMove = false;
+    e.stopPropagation();
+    e.preventDefault();
+
+    isMarkupResize = true;
+    markupResizeCoordinates.start = { x: e.clientX, y: e.clientY };
+    markupResizeCoordinates.type = getMarkupResizeType(e);
+    bindOnMouseMoveEventHandler();
+}
+
+function getMarkupResizeType(e) {
+    return e?.target?.id?.replace(MARKUP_RESIZER_ID_PREFIX, '')?.toLowerCase();
+}
+
+function bindOnMouseMoveEventHandler() {
+    window.addEventListener('mousemove', onMouseMove);
+}
+
+function unbindOnMouseMoveEventHandler() {
+    window.removeEventListener('mousemove', onMouseMove);
+}
+
+function onMarkupResize(mouseX, mouseY) {
+    let settings;
+    const outlineElm = $('#' + MARKUP_EDIT_OUTLINE_ID);
+    const outlineHeight = markupEditOutlineSettings.height;
+    const outlineWidth = markupEditOutlineSettings.width;
+    const deltaY = mouseY - markupResizeCoordinates.start.y;
+    const deltaX = mouseX - markupResizeCoordinates.start.x;
+
+    if (markupResizeCoordinates.type === 'tl') {
+        settings = getMarkupEditOutlineSettingsOnResizeTL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY);
+    }
+    if (markupResizeCoordinates.type === 'tc') {
+        settings = getMarkupEditOutlineSettingsOnResizeTC(outlineWidth, outlineHeight, mouseY, deltaY);
+    }
+    if (markupResizeCoordinates.type === 'tr') {
+        settings = getMarkupEditOutlineSettingsOnResizeTR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY);
+    }
+    if (markupResizeCoordinates.type === 'cl') {
+        settings = getMarkupEditOutlineSettingsOnResizeCL(outlineWidth, outlineHeight, mouseX, deltaX);
+    }
+    if (markupResizeCoordinates.type === 'cr') {
+        settings = getMarkupEditOutlineSettingsOnResizeCR(outlineWidth, outlineHeight, mouseX, deltaX);
+    }
+    if (markupResizeCoordinates.type === 'bl') {
+        settings = getMarkupEditOutlineSettingsOnResizeBL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY);
+    }
+    if (markupResizeCoordinates.type === 'bc') {
+        settings = getMarkupEditOutlineSettingsOnResizeBC(outlineWidth, outlineHeight, mouseY, deltaY);
+    }
+    if (markupResizeCoordinates.type === 'br') {
+        settings = getMarkupEditOutlineSettingsOnResizeBR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, deltaY);
+    }
+
+    if (settings) {
+        setMarkupOutlinePosition(outlineElm, settings.position.x, settings.position.y);
+        setMarkupOutlineSize(outlineElm, settings.width, settings.height);
+    }
+}
+
+function getMarkupEditOutlineSettingsOnResizeTL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, 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)
+        },
+        width: Math.abs(outlineWidth - deltaX),
+        height: Math.abs(outlineHeight - deltaY)
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeTC(outlineWidth, outlineHeight, mouseY, 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)
+        },
+        width: outlineWidth,
+        height: Math.abs(outlineHeight - deltaY)
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeTR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, 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)
+        },
+        width: Math.abs(outlineWidth + deltaX),
+        height: Math.abs(outlineHeight - deltaY)
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeCL(outlineWidth, outlineHeight, mouseX, 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,
+        },
+        width: Math.abs(outlineWidth - deltaX),
+        height: outlineHeight
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeCR(outlineWidth, outlineHeight, mouseX, deltaX) {
+    const settings = {
+        position: {
+            x: (deltaX < 0 && Math.abs(deltaX) > outlineWidth) ? (markupEditOutlineSettings.position.x - Math.abs(deltaX) + outlineWidth) : markupEditOutlineSettings.position.x,
+            y: markupEditOutlineSettings.position.y,
+        },
+        width: Math.abs(outlineWidth + deltaX),
+        height: outlineHeight
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeBL(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, 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
+        },
+        width: Math.abs(outlineWidth - deltaX),
+        height: Math.abs(outlineHeight + deltaY)
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeBC(outlineWidth, outlineHeight, mouseY, 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)
+    };
+    return settings;
+}
+
+function getMarkupEditOutlineSettingsOnResizeBR(outlineWidth, outlineHeight, mouseX, mouseY, deltaX, 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
+        },
+        width: Math.abs(outlineWidth + deltaX),
+        height: Math.abs(outlineHeight + deltaY)
+    };
+    return settings;
+}
+
+function onMarkupResizerMouseUp(e) {
+    markupResizeCoordinates.end = { x: e.clientX, y: e.clientY };
+    unbindOnMouseMoveEventHandler();
+    onMarkupResizeEnd();
+}
+
+function onMarkupResizeEnd() {
+    isMarkupResize = false;
+    markupResizeCoordinates = {};
+    setMarkupEditOutlineSettingsNew();
+    setMarkupUnderEditingSettingsNew(true);
+    updateMarkupInContextIssueList();
+    refreshMarkup();
+}
+
+function setMarkupEditOutlineSettingsNew() {
+    const markupEditOutlineElm = $('#' + MARKUP_EDIT_OUTLINE_ID);
+    const markupEditOutlinePosition = markupEditOutlineElm.position();
+    markupEditOutlineSettings.position.x = markupEditOutlinePosition?.left;
+    markupEditOutlineSettings.position.y = markupEditOutlinePosition?.top;
+    markupEditOutlineSettings.width = markupEditOutlineElm.width();
+    markupEditOutlineSettings.height = markupEditOutlineElm.height();
+}
+
+function bindOnMarkupEditEndHandler() {
+    window.addEventListener('keydown', onMarkupEditEnd);
+}
+
+function unbindOnMarkupEditEndHandler() {
+    window.removeEventListener('keydown', onMarkupEditEnd);
+}
+
+function onMarkupEditEnd(e) {
+    if (e.key === 'Escape' && isMarkupEdit) {
+        endMarkupEdit();
+    }
+}
+
+function endMarkupEdit() {
+    isMarkupEdit = false;
+    saveMarkup();
+    removeMarkupEditOutline();
+    unbindOnMarkupEditEndHandler();
+}
+
+function saveMarkup() {
+    if (markupUnderEditingSettings.issueId) {
+        const issueIndex = context.issueList.findIndex(item => item.id === markupUnderEditingSettings.issueId);
+        if (context.issueList[issueIndex]) {
+            const changedFieldValueMap = new Map();
+            changedFieldValueMap.set('markup', { ...markupUnderEditingSettings.markup });
+            markupEditOutlineSettings = {};
+            markupUnderEditingSettings = {};
+            context.onIssueTileChange(context.issueList[issueIndex].item, changedFieldValueMap);
+        }
+    }
+}
+
+function removeMarkupEditOutline() {
+    document.getElementById(MARKUP_EDIT_OUTLINE_ID)?.remove();
+}
+
+function createMarkupEditOutline(e) {
+    if (e?.target) {
+        removeMarkupEditOutline();
+        const page = $(e.target).closest('.' + CSS_CLASS_PAGE);
+        const markupSettings = getMarkupSettings(e.target);
+        doCreateMarkupEditOutline(page, markupSettings);
+    }
+}
+
+function reloadMarkupEditOutlineSettings(page, isEventPageRendered) {
+    if (markupUnderEditingSettings?.markup?.pageNr && page === markupUnderEditingSettings.markup.pageNr) {
+        if (markupUnderEditingSettings.isSimple) {
+            doCreateMarkupEditOutline($('.' + CSS_CLASS_PAGE + '[data-page-number="' + page + '"]'), markupUnderEditingSettings);
+        } else {
+            let svgsketch = getSvgSketchElmByPageNr(markupUnderEditingSettings.markup.pageNr);
+            if (isEventPageRendered && !(svgsketch?.length)) {
+                const interval = setInterval(() => {
+                    svgsketch = getSvgSketchElmByPageNr(markupUnderEditingSettings.markup.pageNr);
+                    if (svgsketch?.length) {
+                        clearInterval(interval);
+                        doCreateMarkupEditOutline($('.' + CSS_CLASS_PAGE + '[data-page-number="' + page + '"]'), markupUnderEditingSettings);
+                    }
+                }, 50);
+            } else {
+                doCreateMarkupEditOutline($('.' + CSS_CLASS_PAGE + '[data-page-number="' + page + '"]'), markupUnderEditingSettings);
+            }
+        }
+    }
+}
+
+function doCreateMarkupEditOutline(page, markupSettings) {
+    const outline = $('<div id="' + MARKUP_EDIT_OUTLINE_ID + '"></div>');
+    const isMarkupSipmle = markupSettings.markup.svg ? false : true;
+    if (!isMarkupSipmle) {
+        addResizerToMarkupEditOutline(outline);
+    }
+    bindMarkupEditOutlineMouseDownHandler(outline);
+    const outlineSettings = getMarkupEditOutlineSettings(markupSettings, isMarkupSipmle);
+    markupEditOutlineSettings = outlineSettings;
+    if (isMarkupSipmle) {
+        markupEditOutlineSettings.isSimple = true;
+    }
+    setMarkupOutlineEditStyles(outline, outlineSettings);
+    page.append(outline);
+}
+
+function setMarkupOutlineEditStyles(outlineElm, outlineSettings) {
+    setMarkupOutlinePosition(outlineElm, outlineSettings.position.x, outlineSettings.position.y);
+    setMarkupOutlineSize(outlineElm, outlineSettings.width, outlineSettings.height);
+    if (markupEditOutlineSettings.isSimple) {
+        const rotation = getPdfPagesRotation();
+        outlineElm.css('transform-origin', 'top left').css('transform', 'rotate(' + rotation + 'deg)');
+    }
+}
+
+function setMarkupOutlinePosition(outlineElm, x, y) {
+    outlineElm.css('top', y + 'px');
+    outlineElm.css('left', x + 'px');
+}
+
+function setMarkupOutlineSize(outlineElm, width, height) {
+    outlineElm.width(width);
+    outlineElm.height(height);
+}
+
+function getMarkupEditOutlineSettings(markupSettings, isMarkupSimple) {
+    const rotation = getPdfPagesRotation();
+    const scale = getPdfCanvasScale();
+    const size = getMarkupEditOutlineSize(markupSettings, rotation, scale, isMarkupSimple);
+
+    const settings = {
+        position: getMarkupEditOutlinePosition(markupSettings, rotation, scale, isMarkupSimple),
+        width: size.width,
+        height: size.height
+    };
+
+    return settings;
+}
+
+function getMarkupEditOutlineSize(markupSettings, rotation, scale, isMarkupSimple) {
+    if (isMarkupSimple) {
+        return getMarkupSimpleEditOutlineSize(markupSettings, scale);
+    } else {
+        if (rotation === 0 || rotation === 180) {
+            return {
+                width: markupSettings.markup.svg.width * scale,
+                height: markupSettings.markup.svg.height * scale
+            };
+        }
+        if (rotation === 90 || rotation === 270) {
+            return {
+                width: markupSettings.markup.svg.height * scale,
+                height: markupSettings.markup.svg.width * scale
+            };
+        }
+    }
+}
+
+function getMarkupSimpleEditOutlineSize(markupSettings, scale) {
+    const elm = $('.pdf-note#' + markupSettings.issueId);
+    return {
+        width: (elm.outerWidth() * scale + 1),
+        height: (elm.outerHeight() * scale + 1)
+    };
+}
+
+function getSvgSketchElmByPageNr(pageNr) {
+    return svgsketchElm = $('#svgsketch-' + pageNr);
+}
+
+function getMarkupEditOutlinePosition(markupSettings, rotation, scale, isMarkupSimple) {
+    if (isMarkupSimple) {
+        return getMarkupSimpleEditOutlinePosition(markupSettings, scale, rotation);
+    } else {
+        const svgsketchElm = getSvgSketchElmByPageNr(markupSettings.markup.pageNr);
+        const svgsketchWidth = svgsketchElm.width();
+        const svgsketchHeight = svgsketchElm.height();
+        if (rotation === 90) {
+            return getMarkupEditOutlinePositionRotation90Deg(markupSettings, scale, svgsketchWidth);
+        } else if (rotation === 180) {
+            return getMarkupEditOutlinePositionRotation180Deg(markupSettings, scale, svgsketchWidth, svgsketchHeight);
+        } else if (rotation === 270) {
+            return getMarkupEditOutlinePositionRotation270Deg(markupSettings, scale, svgsketchHeight);
+        } else {
+            return getMarkupEditOutlinePositionRotation0Deg(markupSettings, scale);
+        }
+    }
+}
+
+function getMarkupSimpleEditOutlinePosition(markupSettings, scale, rotation) {
+    const data = {
+        position: {
+            x: markupSettings.markup.position.x * scale,
+            y: markupSettings.markup.position.y * scale,
+        },
+        pageNr: markupSettings.markup.pageNr
+    };
+    const positionWithRotation = rotation > 0 ? getNoteLabelPositionWithRotation(data, rotation) : data.position;
+    return positionWithRotation;
+}
+
+function getMarkupEditOutlinePositionRotation0Deg(markupSettings, scale) {
+    const position = {
+        x: markupSettings.markup.svg.position.x * scale,
+        y: markupSettings.markup.svg.position.y * scale
+    };
+    return position;
+}
+
+function getMarkupEditOutlinePositionRotation90Deg(markupSettings, scale, svgsketchWidth) {
+    const position = {
+        x: svgsketchWidth - (markupSettings.markup.svg.position.y + markupSettings.markup.svg.height) * scale,
+        y: markupSettings.markup.svg.position.x * scale
+    };
+    return position;
+}
+
+function getMarkupEditOutlinePositionRotation180Deg(markupSettings, scale, svgsketchWidth, svgsketchHeight) {
+    const position = {
+        x: svgsketchWidth - (markupSettings.markup.svg.position.x + markupSettings.markup.svg.width) * scale,
+        y: svgsketchHeight - (markupSettings.markup.svg.position.y + markupSettings.markup.svg.height) * scale
+    };
+    return position;
+}
+
+function getMarkupEditOutlinePositionRotation270Deg(markupSettings, scale, svgsketchHeight) {
+    const position = {
+        x: markupSettings.markup.svg.position.y * scale,
+        y: svgsketchHeight - (markupSettings.markup.svg.position.x + markupSettings.markup.svg.width) * scale
+    };
+    return position;
+}
+
+function getMarkupSettings(target) {
+    const issue = context.issueList.find(item => item.id === target.id);
+    if (issue) {
+        const markup = issue?.markup ? JSON.parse(issue?.markup) : undefined;
+        markupUnderEditingSettings = { issueId: issue.id, markup: markup }
+    }
+    return markupUnderEditingSettings;
+}
+
+function bindMarkupEditOutlineMouseDownHandler(outline) {
+    outline.on('mousedown', onMarkupEditOutlineMouseDown);
+}
+
+function bindMouseUpEventHandler() {
+    window.addEventListener('mouseup', onMouseUpEventHandler);
+}
+
+function unbindMouseUpEventHandler() {
+    window.removeEventListener('mouseup', onMouseUpEventHandler);
+}
+
+function onMouseUpEventHandler(e) {
+    if (isMarkupEdit && isMarkupMove) {
+        onMarkupEditOutlineMouseUp(e);
+    }
+    if (isMarkupEdit && isMarkupResize) {
+        onMarkupResizerMouseUp(e);
+    }
+}
+
+function addResizerToMarkupEditOutline(outlineElm) {
+    const resizerIdSuffixList = ['TL', 'TC', 'TR', 'CL', 'CR', 'BL', 'BC', 'BR'];
+    resizerIdSuffixList.forEach(function (suffix) {
+        const resizer = $('<div id="' + MARKUP_RESIZER_ID_PREFIX + suffix + '" class="' + CSS_CLASS_MARKUP_RESIZER + ' ' + CSS_CLASS_MARKUP_RESIZER + '-' + suffix.toLowerCase() + '" />');
+        resizer.on('mousedown', onMarkupResizerMouseDown);
+        outlineElm.append(resizer);
+    });
+}
+
+function initMarkupEditContextMenu() {
+    const selector = '.' + CSS_CLASS_PDF_NOTE;
+    $.contextMenu({
+        selector: selector,
+        trigger: 'right',
+        build: function ($triggerElement, e) {
+            return {
+                callback: function (key, options) { },
+                items: getMarkupEditContextMenuItemList($triggerElement, e)
+            }
+        }
+    });
+}
+
+function getMarkupEditContextMenuItemList($triggerElement, e) {
+    const menuItems = {
+        "editMarkup": {
+            name: context.createLocale('app.viewer.pdf.contextMenu.edit'),
+            callback: function (key, options) {
+                onMarkupEditStart(e);
+            }
+        },
+        "sep1": "---------",
+        "quit": {
+            name: context.createLocale('app.viewer.pdf.contextMenu.cancel'),
+            icon: function () {
+                return 'context-menu-icon context-menu-icon-quit';
+            },
+        }
+    };
+    return menuItems;
+}
+
+function setPdfViewerCursorToolMode() {
+    const btnCursorTool = $('#cursorSelectTool');
+    const btnDrawAnnotation = $('#btnDrawAnnotation');
+    if (btnDrawAnnotation.hasClass('toggled')) {
+        btnDrawAnnotation.click();
+    }
+    if (!btnCursorTool.hasClass('toggled')) {
+        btnCursorTool.click();
+    }
+}
+
+initMarkupEditContextMenu();
 $(document).ready(function() {
     context.openFile();