@vitrosoftware/common-ui-ts 1.1.15 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vitrosoftware/common-ui-ts",
-    "version": "1.1.15",
+    "version": "1.1.17",
     "description": "vitro software common ui ts",
     "author": "",
     "license": "MIT",
@@ -12,7 +12,7 @@
         "node": ">=10"
     },
     "scripts": {
-        "build": "microbundle-crl --no-compress --format modern,cjs --css-modules _[name]_[local]_[hash:base64:7] && concat-glob-cli -f lib/**/*.js -o lib/third-party.js && node src/controls/PdfViewer/build.js",
+        "build": "node clean.js && microbundle-crl --no-compress --format modern,cjs --css-modules _[name]_[local]_[hash:base64:7] && concat-glob-cli -f lib/**/*.js -o lib/third-party.js && node src/controls/PdfViewer/build.js",
         "start": "microbundle-crl watch --no-compress --format modern,cjs",
         "prepare": "run-s build",
         "test": "run-s test:unit test:lint test:build",
@@ -74,7 +74,7 @@
         "rollup-plugin-postcss": "^3.1.3",
         "inversify": "6.0.1",
         "inversify-react": "1.0.2",
-        "@vitrosoftware/common-ui": "1.1.15",
+        "@vitrosoftware/common-ui": "1.1.17",
         "react-router-bootstrap": "^0.24.4"
     }
 }

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

@@ -2854,13 +2854,13 @@ function webViewerPageRendered({
   error
 }) {
   
-
-  if (pageNumber === PDFViewerApplication.page) {
-      // @TODO.SA: Add SA-custom event
-      setTimeout(function () {
-          $(document).trigger('webViewerPageRendered', [pageNumber]);
-      }, 50);
+    // @TODO.SA: Add SA-custom event
+    setTimeout(function () {
+        $(document).trigger('webViewerPageRendered', [pageNumber]);
+    }, 50);
         // ***
+  if (pageNumber === PDFViewerApplication.page) {
+      
     PDFViewerApplication.toolbar.updateLoadingIndicatorState(false);
   }
   if (PDFViewerApplication.pdfSidebar.visibleView === _ui_utils.SidebarView.THUMBS) {
@@ -16499,11 +16499,332 @@ function bindSelectList() {
     });
 }
 
+var strokeColorVal = '#EBECF0';
+
+function bindBtnToggleSidebarNotes() {
+    $(document).on('click', '#btnToggleSidebarNotes', function () {
+        $(this).toggleClass('toggled');
+
+        if ($(this).hasClass('toggled')) {
+            if (!$('.body__sidebar').is(':visible')) {
+                context.initIssueList();
+                expandSidebarNotes();
+            }
+        } else {
+            $('.body__sidebar').hide();
+        }
+    });
+}
+
+function saveNote(pageNr, $triggerElement, clickEvent, hasSvg, svgData) {
+
+    var noteOptions = getNoteOptionsForSave('', pageNr, $triggerElement, clickEvent, hasSvg, svgData);
+
+    context.onCreateIssue(noteOptions);
+
+    $('#btnToggleSidebarNotes').click();
+}
+
+function doAddNote(noteOptions) {
+    createNote(noteOptions.pageNr, getNewNoteIndex(noteOptions.pageNr), noteOptions);
+
+    if ($('.body__sidebar').is(':visible')) {
+        context.initIssueList();
+        expandSidebarNotes();
+        highlightSidebarNote(noteOptions.id)
+    }
+}
+
+async function getNewNoteIndex(pageNr) {
+    let list = await context.getIssueList();
+
+    if (list) {
+        return list.length;
+    } else {
+        return 0;
+    }
+}
+
+function initMarkupData(issue) {
+    if (issue.markup) {
+        var markupData = JSON.parse(issue.markup);
+        markupData.svg.stroke.color = issue.statusColor || strokeColorVal;
+        markupData.svg.id = issue.id;
+        markupData.id = issue.id;
+
+        return markupData;
+    }
+
+    return null;
+}
+
+function doInitNotesByPageNr(pageNr) {
+    context.getIssueList().then(list => {
+        $.each(list, function (index, issue) {
+            let markup = initMarkupData(issue);
+            if (markup && markup.pageNr == pageNr) {
+                createNote(pageNr, index, issue);
+                loadSvgShape(markup.svg);
+            }
+        });
+    });
+}
+
+function removePageAllNotes(pageNr) {
+    var notes = $('#viewer').find('.page[data-page-number="' + pageNr + '"]').find('.pdf-note');
+    notes.remove();
+}
+
+function createNote(pageNr, index, issue) {
+    var note = $('<a class="pdf-note"></a>');
+
+    note.data('pageNr', pageNr);
+    note.data('noteIndex', index);
+    note.data('noteId', issue.id);
+
+    note.attr('id', issue.id);
+
+    note.html(issue.id);
+
+    var currentScale = getPdfCanvasScale();
+    //var scalledOptions = initMarkupData(issue, issue.id, issue.statusColor);
+    var scalledOptions = initMarkupData(issue);
+
+    scalledOptions.position.x = scalledOptions.position.x * currentScale;
+    scalledOptions.position.y = scalledOptions.position.y * currentScale;
+
+    var noteCssPosLeft = scalledOptions.position.x;
+    var noteCssPosTop = scalledOptions.position.y;
+    var noteCssTransform = 'scale(' + currentScale + ')';
+
+    var pagesRotation = getPdfPagesRotation();
+
+    if (pagesRotation > 0) {
+        var noteNormalizedPosition = getNoteLabelPositionWithRotation({ pageNr: pageNr, position: scalledOptions.position }, pagesRotation);
+        noteCssPosLeft = noteNormalizedPosition.x;
+        noteCssPosTop = noteNormalizedPosition.y;
+        noteCssTransform += ' rotate(' + pagesRotation + 'deg)';
+    }
+
+    note.css('left', noteCssPosLeft + 'px');
+    note.css('top', noteCssPosTop + 'px');
+    note.css('background', scalledOptions.svg.stroke.color);
+
+    var pageElm = $('.page[data-page-number="' + pageNr + '"]');
+    note.css('transform', noteCssTransform);
+
+    bindOnClickNote(note);
+
+    pageElm.append(note);
+}
+
+function highlightSidebarNote(noteId) {
+    context.initIssueList();
+    $('.body__sidebar-note-wrap').removeClass('active');
+    $('.body__sidebar-content').children().removeClass('vitro-active');
+    var notetWrap = $('#vitro-issue-tile-' + noteId);
+    notetWrap.addClass('vitro-active');
+    autosize(notetWrap.find('textarea'));
+    var sidebarContent = $('.body__sidebar-content');
+    var sidebarOffsetTop = parseInt(sidebarContent[0].offsetTop);
+    var sidebarScrollTop = parseInt(sidebarContent[0].scrollTop);
+    sidebarContent.animate({
+        scrollTop: notetWrap.position().top - sidebarOffsetTop + sidebarScrollTop
+    }, 1000);
+}
+
+function getNoteCreator() {
+    return '';
+}
+
+function initDlgForSvg(svgData) {
+    saveNote(false, false, false, true, svgData);
+}
+
+function setDrawNodes(pageNr, nodeId, node, posX, posY, width, height, shapeType, color) {
+    var scale = getPdfCanvasScale();
+    drawNodes[nodeId] = {
+        data: {
+            id: nodeId,
+            pageNr: pageNr,
+            type: shapeType,
+            position: {
+                x: posX / scale,
+                y: posY / scale,
+            },
+            width: width / scale,
+            height: height / scale,
+            stroke: {
+                color: color,
+                width: strokeWidthVal
+            },
+            fill: fillVal,
+        },
+        nodeObj: node
+    };
+}
+
+function getShapeSettings(nodeId, color) {
+    var settings = {
+        fill: fillVal,
+        stroke: color || strokeColorVal,
+        strokeWidth: strokeWidthVal,
+        id: 'svg-' + nodeId
+    };
+
+    return settings;
+}
+
+function loadSvgShape(svgData) {
+    if (typeof svgData === 'object' && svgData !== null && svgData !== false) {
+
+        var scale = getPdfCanvasScale();
+
+        var node = null;
+        var settings = getShapeSettings(svgData.id, svgData.stroke.color);
+
+        var pagesRotation = getPdfPagesRotation();
+        var nodeSvgData = svgData;
+
+        if (pagesRotation > 0) {
+            nodeSvgData = getSvgDataWithRotation(svgData, pagesRotation, scale);
+        }
+
+        if (drawNodes[svgData.id]) {
+            sketchpad[svgData.pageNr].remove(drawNodes[svgData.id].nodeObj);
+        }
+
+        node = sketchpad[nodeSvgData.pageNr].rect(nodeSvgData.position.x * scale, nodeSvgData.position.y * scale, nodeSvgData.width * scale, nodeSvgData.height * scale, settings);
+        setDrawNodes(svgData.pageNr, svgData.id, node, svgData.position.x, svgData.position.y, svgData.width, svgData.height, svgData.type, svgData.stroke.color);
+    }
+}
+
+function bindUpdatePage() {
+    if (context.deleteIssueEvent) {
+        window.addEventListener(context.deleteIssueEvent, updatePage);
+    }
+
+    if (context.updateIssueEvent) {
+        window.addEventListener(context.updateIssueEvent, updatePage);
+    }
+}
+
+function updatePage(e) {
+    let item = e.detail.itemList[0];
+    let markup = JSON.parse(item.fieldValueMap.markup);
+    let page = markup ? markup.pageNr : null;
+
+    if (e.type === context.deleteIssueEvent && markup) {
+        let markupData = { id: item.itemId, pageNr: page };
+        removeSvg(markupData);
+    }
+
+    let newMarkupKeyList = Object.keys(drawNodes).filter(key => key.includes('new-'));
+    if (newMarkupKeyList) {
+        newMarkupKeyList.forEach(key => removeSvg({ id: key, pageNr: page }));
+    }
+
+    if (page) {
+        initNotesByPageNr(page);
+    }
+
+    context.initIssueList();
+}
+
+function bindSketchpadBtnOnclilckHandler() {
+    $(document).on('click', '#btnDrawRectangle', function () {
+        var svgsketchWrap = $('.svgsketch-wrap');
+        $(this).toggleClass('toggled');
+        svgsketchWrap.toggleClass('active');
+
+        if (svgsketchWrap.eq(0).hasClass('active')) {
+            isSketchpadActive = true;
+        } else {
+            removeNewSvg();
+            context.toggleIssueDetail(false);
+            isSketchpadActive = false;
+        }
+    });
+}
+
+function removeNewSvg() {
+    $('[id^="svg-new-"]').remove();
+}
+
+function drawShape(x1, y1, x2, y2, pageNr) {
+
+    var left = Math.min(x1, x2);
+    var top = Math.min(y1, y2);
+    var right = Math.max(x1, x2);
+    var bottom = Math.max(y1, y2);
+
+    var nodeId = 'new-' + Date.now();
+    var settings = getShapeSettings(nodeId);
+    var shape = 'rect';
+
+    var node = null;
+    if (shape == 'rect') {
+        node = sketchpad[pageNr].rect(left, top, right - left, bottom - top, settings);
+    }
+    else if (shape == 'circle') {
+        var r = Math.min(right - left, bottom - top) / 2;
+        node = sketchpad[pageNr].circle(left + r, top + r, r, settings);
+    }
+    else if (shape == 'ellipse') {
+        var rx = (right - left) / 2;
+        var ry = (bottom - top) / 2;
+        node = sketchpad[pageNr].ellipse(left + rx, top + ry, rx, ry, settings);
+    }
+    else if (shape == 'line') {
+        node = sketchpad[pageNr].line(x1, y1, x2, y2, settings);
+    }
+    else if (shape == 'polyline') {
+        node = sketchpad[pageNr].polyline([[(x1 + x2) / 2, y1], [x2, y2],
+        [x1, (y1 + y2) / 2], [x2, (y1 + y2) / 2], [x1, y2],
+        [(x1 + x2) / 2, y1]], $.extend(settings, { fill: 'none' }));
+    }
+    else if (shape == 'polygon') {
+        node = sketchpad[pageNr].polygon([[(x1 + x2) / 2, y1], [x2, y1], [x2, y2],
+        [(x1 + x2) / 2, y2], [x1, (y1 + y2) / 2]], settings);
+    }
+
+    var width = right - left;
+    var height = bottom - top;
+
+    var pagesRotation = getPdfPagesRotation();
+    if (pagesRotation > 0) {
+        var svgData = {
+            pageNr: pageNr,
+            position: {
+                x: left,
+                y: top
+            },
+            width: width,
+            height: height
+        };
+        var nodeSvgData = getNormalizedSvgData(svgData, pagesRotation);
+        setDrawNodes(pageNr, nodeId, node, nodeSvgData.position.x, nodeSvgData.position.y, nodeSvgData.width, nodeSvgData.height, shape);
+    } else {
+        setDrawNodes(pageNr, nodeId, node, left, top, width, height, shape);
+    }
+
+    $(node).mousedown(function (e) {
+        startDrag(e, pageNr);
+    }).mousemove(function (e) {
+        dragging(e, pageNr);
+    }).mouseup(function (e) {
+        endDrag(e, pageNr);
+    });
+
+    $('#svgsketch-' + [pageNr]).focus();
+
+    initDlgForSvg(drawNodes[nodeId]);
+}
+
 $(document).ready(function () {
     context.openFile();
 
     bindAddNoteEventHandler();
-    bindDeleteNoteEventHandler();
     bindToggleNotes();
     initContextMenu();
 
@@ -16513,6 +16834,7 @@ $(document).ready(function () {
     initNotes();
     bindSidebarNotesClose();
     bindBtnToggleSidebarNotes();
+    bindUpdatePage();
 
     bindSelectList();