@vitrosoftware/common-ui-ts 1.1.22 → 1.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vitrosoftware/common-ui-ts",
-    "version": "1.1.22",
+    "version": "1.1.25",
     "description": "vitro software common ui ts",
     "author": "",
     "license": "MIT",
@@ -72,7 +72,7 @@
         "rollup-plugin-postcss": "^3.1.3",
         "inversify": "6.0.1",
         "inversify-react": "1.0.2",
-        "@vitrosoftware/common-ui": "1.1.21",
+        "@vitrosoftware/common-ui": "1.1.24",
         "react-router-bootstrap": "^0.24.4"
     }
 }

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

@@ -16346,6 +16346,36 @@ function setTransformLayerPaneElm(elm) {
 
 
 
+function initContextMenuCanvas() {
+    var pages = '#viewer .page';
+    $.contextMenu({
+        selector: pages,
+        items: {
+            "addNote": {
+                name: context.createLocale('app.viewer.pdf.contextMenu.addNote'),
+                icon: "add"
+            },
+            "sep1": "---------",
+            "quit": {
+                name: context.createLocale('app.viewer.pdf.contextMenu.cancel'),
+                icon: function () {
+                    return 'context-menu-icon context-menu-icon-quit';
+                }
+            }
+        },
+        build: function ($triggerElement, e) {
+            return {
+                callback: function (key, options) {
+                    $(document).trigger(key, [options, $triggerElement, e]);
+                }
+            };
+        }
+    });
+}
+
+function bindContextMenuNote() {
+}
+
 function bindBtnCompareClose() {
     $('.close').click(function () {
         hideDlgOverlay();
@@ -16354,62 +16384,157 @@ function bindBtnCompareClose() {
 }
 
 function initCompare() {
+    context.getFileVersionList(context.file.id).then(versionList => {
+        context.fileVersionList = versionList;
+
+        $('#docAVersionList').html(null);
+        $('#docBVersionList').html(null);
+        $('#docAPageList').html(null);
+        $('#docBPageList').html(null);
+
+        bindBtnCompare();
+        bindBtnCompareCancel();
+        bindBtnCompareClose();
+
+        let fileName = context.file.fieldValueMap.name;
+        $('div.compare-dlg_doc-a_name').text(fileName);
+        $('div.compare-dlg_doc-b_name').text(fileName);
+
+        $.each(versionList, function (i, item) {
+            let value = 'v' + item.fieldValueMap.version_major + '.' + item.fieldValueMap.version_minor;
+            $('#docAVersionList').append($('<li>', {
+                value: value,
+                text: value,
+            }));
+            $('#docBVersionList').append($('<li>', {
+                value: value,
+                text: value,
+            }));
+        });
 
-    $(document).on('webViewerPageRendered', function (e, pageNr) {
-        context.getFileVersionList(context.file.id).then(versionList => {
-            context.fileVersionList = versionList;
-
-            $('#docAVersionList').html(null);
-            $('#docBVersionList').html(null);
-            $('#docAPageList').html(null);
-            $('#docBPageList').html(null);
-
-            bindBtnCompare();
-            bindBtnCompareCancel();
-            bindBtnCompareClose();
-
-            let fileName = context.file.fieldValueMap.name;
-            $('div.compare-dlg_doc-a_name').text(fileName);
-            $('div.compare-dlg_doc-b_name').text(fileName);
-
-            $.each(versionList, function (i, item) {
-                $('#docAVersionList').append($('<li>', {
-                    value: "v" + item.fieldValueMap.version_minor,
-                    text: "v" + item.fieldValueMap.version_minor,
-                }));
-                $('#docBVersionList').append($('<li>', {
-                    value: "v" + item.fieldValueMap.version_minor,
-                    text: "v" + item.fieldValueMap.version_minor,
-                }));
-            });
+        let version = versionList.find(item => item.fieldValueMap.file.id == context.file.fieldValueMap.file.id);
+        let versionMajor = version.fieldValueMap.version_major;
+        let versionMinor = version.fieldValueMap.version_minor;
+        let currentVersion = `v${versionMajor}.${versionMinor}`;
+        $('#docAVersion').val(currentVersion);
+        if (versionMinor > 1) {
+            $('#docBVersion').val(`v${versionMajor}.${--versionMinor}`);
+        } else {
+            $('#docBVersion').val(currentVersion);
+        }
+        $('#docAPage').val(1);
+        $('#docBPage').val(1);
 
-            let pageCount = getPdfPageCount();
-            for (var i = 1; i <= pageCount; i++) {
-                $('#docAPageList').append($('<li>', {
-                    value: i,
-                    text: i,
-                }));
-                $('#docBPageList').append($('<li>', {
-                    value: i,
-                    text: i,
-                }));
-            }
+        bindBtnDoCompare(fileName);
+        bindOnCompareDocumentsLoadedHandler();
+    })        
+
+    bindPageSelect();
+}
 
-            let version = versionList.find(item => item.fieldValueMap.file.id == context.file.fieldValueMap.file.id).fieldValueMap.version_minor;
-            $("#docAVersion").val(`v${version}`);
-            if (version > 1) {
-                $("#docBVersion").val(`v${--version}`);
-            } else {
-                $("#docBVersion").val(`v${version}`);
-            }
-            $("#docAPage").val(1);
-            $("#docBPage").val(1);
-
-            bindBtnDoCompare(fileName);
-            bindOnCompareDocumentsLoadedHandler();  
-        })
-    })
-        
+function createCompareViewerToolbar(toolbarWrap) {
+    var pane1 = $('<div class="control-grp" />');
+
+    var btnPan = $(`<div id="btnComparePan" class="compare-toolbar-btn active" title="${context.createLocale('app.viewer.pdf.compare.toolbar.pan')}" />`);
+    btnPan.off('click');
+    btnPan.on('click', function () {
+        btnPaneOnClickHandler();
+    });
+
+    var btnZoom = $(`<div id="btnCompareZoom" class="compare-toolbar-btn" title="${context.createLocale('app.viewer.pdf.compare.toolbar.zoom')}" />`);
+    btnZoom.off('click');
+    btnZoom.on('click', function () {
+        btnZoomOnClickHandler();
+    });
+
+    var btnFitToView = $(`<div id="btnFitToView" class="compare-toolbar-btn" title="${context.createLocale('app.viewer.pdf.compare.toolbar.fitToView')}" />`);
+    btnFitToView.off('click');
+    btnFitToView.on('click', function () {
+        doCompareFitToView();
+    });
+
+    pane1.append(btnPan);
+    pane1.append(btnZoom);
+    pane1.append(btnFitToView);
+
+    var pane2 = $('<div class="control-grp" />');
+    var btnCompareType = $(`<div id="btnCompareType" class="compare-toolbar-btn active type-overlay" title="${context.createLocale('app.viewer.pdf.compare.toolbar.changeCompareType')}" />`);
+    var btnCompareTypePanel = $('<div id="panelCompareType" style="display:none;" />');
+    var btnCompareTypeOverlay = $(`<div id="btnCompareTypeOverlay" class="compare-toolbar-btn active type-overlay" title="${context.createLocale('app.viewer.pdf.compare.toolbar.compareTypeOverlay')}"/>`);
+
+    btnCompareTypeOverlay.off('click');
+    btnCompareTypeOverlay.on('click', function () {
+        doCompareOverlay($(this));
+    });
+
+    var btnCompareTypeSideBySide = $(`<div id="btnCompareTypeSideBySide" class="compare-toolbar-btn type-side-by-side" title="${context.createLocale('app.viewer.pdf.compare.toolbar.compareTypeSideBySide')}"/>`);
+    btnCompareTypeSideBySide.on('click', function () {
+        doCompareSideBySide($(this));
+    });
+
+    btnCompareTypePanel.append(btnCompareTypeSideBySide);
+    btnCompareTypePanel.append(btnCompareTypeOverlay);
+
+    btnCompareType.append(btnCompareTypePanel);
+
+    btnCompareType.off('click');
+    btnCompareType.on('click', function () {
+        btnCompareTypeOnClickHandler();
+    });
+
+    var btnComparePanel = $(`<div id="btnComparePanel" class="compare-toolbar-btn active" title="${context.createLocale('app.viewer.pdf.compare.toolbar.showHideComparePanel')}"/>`);
+    btnComparePanel.off('click');
+    btnComparePanel.on('click', function () {
+        btnComparePanelOnClickHandler();
+    });
+
+    var btnCompareViewerExit = $(`<div id="btnCompareViewerExit" class="compare-toolbar-btn" title="${context.createLocale('app.viewer.pdf.compare.toolbar.exit')}" />`);
+    btnCompareViewerExit.off('click');
+    btnCompareViewerExit.on('click', function () {
+        closeCompareViewer();
+    });
+
+    pane2.append(btnCompareType);
+    pane2.append(btnComparePanel);
+    pane2.append(btnCompareViewerExit);
+
+    toolbarWrap.append(pane1);
+    toolbarWrap.append(pane2);
+}
+
+function createComparePanelToolbarButtons(toolbar) {
+    var btnHideColors = $(`<div id="hideColors" class="compare-toolbar-btn active" title="${context.createLocale('app.viewer.pdf.compare.panel.showHideColors')}" />`);
+    btnHideColors.off('click');
+    btnHideColors.on('click', function () {
+        btnHideColorsOnClickHandler($(this));
+    });
+
+    var btnAlign = $(`<div id="alignFinish" class="compare-toolbar-btn" title="${context.createLocale('app.viewer.pdf.compare.panel.align')}"/>`);
+    btnAlign.off('click');
+    btnAlign.on('click', function () {
+        btnAlignOnClickHandler($(this));
+    });
+
+    toolbar.append(btnHideColors);
+    toolbar.append(btnAlign);
+}
+
+function bindPageSelect() {
+    $(document).on('webViewerPageRendered', function (e, pageNr) {
+        $('#docAPageList').html(null);
+        $('#docBPageList').html(null);
+        let pageCount = getPdfPageCount();
+        for (var i = 1; i <= pageCount; i++) {
+            $('#docAPageList').append($('<li>', {
+                value: i,
+                text: i,
+            }));
+            $('#docBPageList').append($('<li>', {
+                value: i,
+                text: i,
+            }));
+        }
+    });
 }
 
 function bindBtnDoCompare(fileName) {
@@ -16417,30 +16542,34 @@ function bindBtnDoCompare(fileName) {
         hideDlgOverlay();
 
         var compareObjList = {};
-        var docAVersion = $("#docAVersion").val().substring(1);
-        var docBVersion = $("#docBVersion").val().substring(1);
+        let docAVersionValue = $("#docAVersion").val();
+        let docBVersionValue = $("#docBVersion").val();
+        var docAVersion = docAVersionValue.substring(1).split('.');
+        var docBVersion = docBVersionValue.substring(1).split('.');
         var docAPage = Number($("#docAPage").val());
         var docBPage = Number($("#docBPage").val());
 
-        let docAVersionFile = context.fileVersionList.find(item => item.fieldValueMap.version_minor == docAVersion);
-        let docBVersionFile = context.fileVersionList.find(item => item.fieldValueMap.version_minor == docBVersion);
+        let docAVersionFile = context.fileVersionList.find(item => item.fieldValueMap.version_major == docAVersion[0]
+            && item.fieldValueMap.version_minor == docAVersion[1]);
+        let docBVersionFile = context.fileVersionList.find(item => item.fieldValueMap.version_major == docBVersion[0]
+            && item.fieldValueMap.version_minor == docBVersion[1]);
 
         let docA = {
             name: fileName,
-            version: `v${docAVersion}`,
+            version: docAVersionValue,
             page: docAPage,
             uploadBy: docAVersionFile.insertUserName,
-            uploadDate: docAVersionFile.insertDate,
-            url: `/api/file/get/${docAVersionFile.fieldValueMap.file.id}/${fileName}`
+            uploadDate: context.createLocale('{{date, DateTime}}', { date: docAVersionFile.insertDate }),
+            url: `/api/file/get/${docAVersionFile.fieldValueMap.file.id}`
         };
 
         let docB = {
             name: fileName,
-            version: `v${docBVersion}`,
+            version: docBVersionValue,
             page: docBPage,
             uploadBy: docBVersionFile.insertUserName,
-            uploadDate: docBVersionFile.insertDate,
-            url: `/api/file/get/${docBVersionFile.fieldValueMap.file.id}/${fileName}`
+            uploadDate: context.createLocale('{{date, DateTime}}', { date: docBVersionFile.insertDate }),
+            url: `/api/file/get/${docBVersionFile.fieldValueMap.file.id}`
         };
 
         compareObjList.docA = docA;
@@ -16474,10 +16603,10 @@ function bindSelect(select) {
             let value = $(e.target).attr('value');
             let text = $(e.target).text();
             $(input).val(text);
-            input.dispatchEvent(new CustomEvent("change", { detail: { value: value } }));
+            input.dispatchEvent(new CustomEvent('change', { detail: { value: value } }));
             $(select).removeClass('active');
         }
-        else if (e.target.localName == 'input' && !$(select).hasClass('active')) {
+        else if (e.currentTarget == select && !$(select).hasClass('active')) {
             $(select).addClass('active');
         } else {
             $(select).removeClass('active');
@@ -16497,7 +16626,7 @@ function bindSelectList() {
     });
 }
 
-var strokeColorVal = '#EBECF0';
+var strokeColorVal = '#2d9cdb';
 
 function bindBtnToggleSidebarNotes() {
     $(document).on('click', '#btnToggleSidebarNotes', function () {
@@ -16528,6 +16657,13 @@ function saveNote(pageNr, $triggerElement, clickEvent, hasSvg, svgData) {
 function doAddNote(noteOptions) {
     createNote(noteOptions.pageNr, getNewNoteIndex(noteOptions.pageNr), noteOptions);
 }
+
+function bindAddNoteEventHandler() {
+    $(document).on('addNote', function (e, options, $triggerElement, clickEvent) {
+        var pageNr = parseInt($($triggerElement).attr('data-page-number'));
+        saveNote(pageNr, $triggerElement, clickEvent, false, false);
+    });
+}
 
 function showNoteDesc(note) {
     if ($('.body__sidebar').is(':visible')) {
@@ -16549,8 +16685,10 @@ async function getNewNoteIndex(pageNr) {
 function initMarkupData(issue) {
     if (issue.markup) {
         var markupData = JSON.parse(issue.markup);
-        markupData.svg.stroke.color = issue.statusColor || strokeColorVal;
-        markupData.svg.id = issue.id;
+        if (markupData.svg) {
+            markupData.svg.stroke.color = issue.statusColor || strokeColorVal;
+            markupData.svg.id = issue.id;
+        }
         markupData.id = issue.id;
 
         return markupData;
@@ -16608,7 +16746,11 @@ function createNote(pageNr, index, issue) {
 
     note.css('left', noteCssPosLeft + 'px');
     note.css('top', noteCssPosTop + 'px');
-    note.css('background', scalledOptions.svg.stroke.color);
+    if (scalledOptions.svg) {
+        note.css('background', scalledOptions.svg.stroke.color);
+    } else {
+        note.css('background', issue.statusColor || strokeColorVal);
+    }
 
     var pageElm = $('.page[data-page-number="' + pageNr + '"]');
     note.css('transform', noteCssTransform);
@@ -16736,7 +16878,7 @@ function updatePage(e) {
         window.dispatchEvent(event);
     }
 
-    removeNewSvgByPage(page);
+    removeNewSvg();
 
     if (page) {
         initNotesByPageNr(page);
@@ -16781,7 +16923,7 @@ function removeNewSvgByPage(page) {
 }
 
 function drawShape(x1, y1, x2, y2, pageNr) {
-    removeNewSvgByPage(pageNr);
+    removeNewSvg();
 
     var left = Math.min(x1, x2);
     var top = Math.min(y1, y2);