@vitrosoftware/common-ui-ts 1.1.211 → 1.1.213

package/dist/src/controls/BimViewer/services/BimViewerService.d.ts

@@ -25,4 +25,6 @@ export interface BimViewerService {
     searchCriterionList?: models.Criterion[];
     isMobileView?: boolean;
     container: any;
+    getSettingsFromLocalStorage: () => any;
+    setSettingsToLocalStorage: (settings: string) => void;
 }

package/dist/src/controls/DropdownButton/DropdownButtonItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface DropdownButtonItemProps {
     text: string;
+    value?: any;
     onClick?: (value: any, e?: React.MouseEvent) => void;
     href?: string;
     imageUrl?: string;

package/dist/src/controls/DxfViewer/services/DxfViewerService.d.ts

@@ -37,4 +37,6 @@ export interface DxfViewerService {
     searchCriterionList?: models.Criterion[];
     isMobileView?: boolean;
     container: any;
+    getSettingsFromLocalStorage: () => any;
+    setSettingsToLocalStorage: (settings: string) => void;
 }

package/dist/src/controls/Header/Header.d.ts

@@ -3,9 +3,8 @@ import * as SIDEBAR from '../Sidebar/SidebarConstants';
 export declare let onChangeSidebarMode: () => void;
 interface HeaderProps {
     cfgSidebar?: any;
-    sidebar: SIDEBAR.MODE;
-    setSidebar: (mode: SIDEBAR.MODE) => any;
     children: React.ReactNode;
+    onChangeSidebar: (sidebar: SIDEBAR.MODE) => any;
 }
 export declare const Header: (props: HeaderProps) => JSX.Element;
 export {};

package/dist/src/controls/Header/HeaderNavBar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface HeaderNavBarProps {
     children: React.ReactNode;
+    onChangeSidebarMode: () => void;
 }
 export declare const HeaderNavBar: (props: HeaderNavBarProps) => JSX.Element;
 export {};

package/dist/src/controls/PdfViewer/services/PdfViewerService.d.ts

@@ -23,4 +23,6 @@ export interface PdfViewerService {
     searchCriterionList?: models.Criterion[];
     isMobileView?: boolean;
     container: any;
+    getSettingsFromLocalStorage: () => any;
+    setSettingsToLocalStorage: (settings: string) => void;
 }

package/dist/src/controls/Splitter/Splitter.d.ts

@@ -15,6 +15,8 @@ interface SplitterProps {
     onWrapperResized?: (splitter: any) => void;
     className?: string;
     children: React.ReactNode;
+    localStorageKey?: string;
+    isWidthPx?: boolean;
 }
 export declare const Splitter: (props: SplitterProps) => JSX.Element;
 export {};

package/dist/src/controls/TableView/services/TableViewService.d.ts

@@ -31,6 +31,7 @@ export interface TableViewService {
     source: any;
     refreshMode?: string;
     viewId: string;
+    visibleColumnList?: string[];
     setSearchCriterionList(searchCriterionList: models.Criterion[], searchId: string): void;
     clearSearchCriterionList(searchId: string): void;
     getSearchCriterionList(searchId?: string): models.Criterion[];

package/dist/src/controls/TableView/services/impl/TableViewServiceImpl.d.ts

@@ -14,6 +14,7 @@ export declare class TableViewServiceImpl implements services.TableViewService {
     isSendEventOnSelect?: boolean;
     filterRow: models.TableViewRow;
     viewId: string;
+    visibleColumnList: string[];
     constructor(grid: any);
     get columnList(): any;
     get columnNameList(): any;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vitrosoftware/common-ui-ts",
-    "version": "1.1.211",
+    "version": "1.1.213",
     "description": "vitro software common ui ts",
     "author": "",
     "license": "MIT",

package/src/controls/BimViewer/js/bim-viewer.js

@@ -1,11 +1,11 @@
-import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js?version=1.1.211';
+import { BIMModel, BIMCommon, BIMAnnotation } from '/resource/bimViewer/js/bim-viewer-models.js?version=1.1.213';
 
 import {
     Viewer, XKTLoaderPlugin, NavCubePlugin, SectionPlanesPlugin, math, BCFViewpointsPlugin, AnnotationsPlugin,
     ContextMenu, TreeViewPlugin, StoreyViewsPlugin, AngleMeasurementsPlugin, CameraMemento, DistanceMeasurementsPlugin,
     GLTFLoaderPlugin, utils, FastNavPlugin, MetaObject, parsers
 }
-    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.211';
+    from '/resource/bimViewer/js/xeokit/xeokit-sdk.es.js?version=1.1.213';
 
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -967,7 +967,7 @@ function setPropertyBDSets(id) {
         collapsible: true,
         heightStyle: "content"
     });
-    $('#propInspector').show();
+    showPropInspector();
 }
 
 function addPropertySet(propertySets, html) {
@@ -1003,7 +1003,7 @@ function addPropertySet(propertySets, html) {
         collapsible: true,
         heightStyle: "content"
     });
-    $('#propInspector').show();
+    showPropInspector();
 }
 
 function setPropertySets(metaObject, dictionaryName = []) {
@@ -1029,12 +1029,12 @@ function setPropertySets(metaObject, dictionaryName = []) {
         collapsible: true,
         heightStyle: "content"
     });
-    $('#propInspector').show();
+    showPropInspector();
 }
 
 function bindPropInspectorClose() {
     $('.prop-inspector-close').on('click', function () {
-        $('#propInspector').hide();
+        hidePropInspector();
     })
 }
 
@@ -3091,6 +3091,8 @@ const fastNavPlugin = new FastNavPlugin(viewer, {
 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 PANE_LEFT_MIN_WIDTH = 150;
+const PANE_RIGHT_MIN_WIDTH = 200;
 
 var notesDescriptionVisibleList = {};
 
@@ -3391,6 +3393,8 @@ function createSidebarNotesItemHeader(noteData) {
 
 function hidePropInspector() {
     $('#propInspector').hide();
+    setPositionNavCubeCanvas(0);
+    setPositionSectionPlanesOverviewCanvas(0);
 }
 
 //------------------------------------------------------------------------------------------------------------------
@@ -3844,14 +3848,7 @@ function showNotesDescription() {
 }
 
 function initIssueDetailResizable() {
-    $('#issueDetail').resizable({
-        handles: "w",
-        minWidth: 200,
-        resize: function (event, ui) {
-            $('#navCubeCanvas').css('right', $('#issueDetail').width() + 10);
-            $('#sectionPlanesOverviewCanvas').css('right', $('#issueDetail').width() + 10);
-        }
-    });
+    initResizable($('#issueDetail'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueDetailResizeHandler, onIssueDetailResizeEndHandler);
 }
 
 function addToTreeView(model, sceneModelId) {
@@ -3942,7 +3939,147 @@ function selectIssueListItem(itemId) {
     const event = new CustomEvent(EVENT_ISSUE_LIST_SELECT_ITEM, { detail: { itemId: itemId } });
     window.dispatchEvent(event);
 }
-                        
+
+function setSettings(settings) {
+    const settingsString = settings ? JSON.stringify(settings) : '';
+    context.setSettingsToLocalStorage(settingsString);
+}
+
+function getSettings() {
+    const settings = context.getSettingsFromLocalStorage();
+    return settings ? JSON.parse(settings) : {};
+}
+
+function setPaneRightSettings(width) {
+    const settings = getSettings();
+    settings.rightPaneWidth = width;
+    setSettings(settings);
+}
+
+function setPaneLeftSettings(width) {
+    const settings = getSettings();
+    settings.leftPaneWidth = width;
+    setSettings(settings);
+}
+
+function initPaneWidth() {
+    const settings = getSettings();
+    setWidthPaneRight(settings.rightPaneWidth);
+    setWidthPaneLeft(settings.leftPaneWidth);
+}
+
+function setWidthPaneRight(width) {
+    if (width) {
+        $('#sidebarWrap').width(width);
+        $('#issueDetail').width(width);
+        $('#propInspector').width(width);
+    }
+}
+
+function setWidthPaneLeft(width) {
+    if (width) {
+        $('#treeViewContainerWrap').width(width);
+        $('#storeyViewsSidebar').width(width);
+    }
+}
+
+function setPositionSectionPlanesOverviewCanvas(width) {
+    $('#sectionPlanesOverviewCanvas').css('right', width + 10);
+}
+
+function setPositionNavCubeCanvas(width) {
+    $('#navCubeCanvas').css('right', width + 10);
+}
+
+function initResizable(element, handles, minWidth, resizeHadler, onResizeEndHadler) {
+    element.resizable({
+        handles: handles,
+        minWidth: minWidth,
+        resize: function (event, ui) {
+            if (typeof resizeHadler === 'function') {
+                resizeHadler(element.width());
+            }
+        },
+        stop: function (event, ui) {
+            if (typeof onResizeEndHadler === 'function') {
+                onResizeEndHadler(event, ui);
+            }
+        }
+    });
+}
+
+function onIssueDetailResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+};
+
+function onPaneRightResizeHandler(width) {
+    setPositionNavCubeCanvas(width);
+    setPositionSectionPlanesOverviewCanvas(width);
+}
+
+function onIssueDetailResizeEndHandler(event, ui) {
+    $('#propInspector').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    $('#sidebarWrap').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    setPaneRightSettings(ui.size.width);
+}
+
+function initTreeViewPanelResizable() {
+    initResizable($('#treeViewContainerWrap'), 'e', PANE_LEFT_MIN_WIDTH, false, onTreeViewResizeEndHandler);
+}
+
+function onTreeViewResizeEndHandler(event, ui) {
+    const width = ui.size.width - $('#treeViewContainerWrap > .ui-resizable-handle').width();
+    $('#storeyViewsSidebar').width(width);
+    setPaneLeftSettings(width);
+}
+
+function initStoreyViewResizable() {
+    initResizable($('#storeyViewsSidebar'), 'e', PANE_LEFT_MIN_WIDTH, false, onStoreyViewResizeEndHandler);
+}
+
+function onStoreyViewResizeEndHandler(event, ui) {
+    $('#treeViewContainerWrap').width(ui.size.width);
+    setPaneLeftSettings(ui.size.width);
+}
+
+function initPropertySetsResizable() {
+    initResizable($('#propInspector'), 'w', PANE_RIGHT_MIN_WIDTH, onPropsInspectorResizeHandler, onPropsInspectorResizeEndHandler);
+}
+
+function onPropsInspectorResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+};
+
+function onPropsInspectorResizeEndHandler(event, ui) {
+    $('#issueDetail').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    $('#sidebarWrap').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    setPaneRightSettings(ui.size.width);
+}
+
+function initSidebarResizable() {
+    initResizable($('#sidebarWrap'), 'w', PANE_RIGHT_MIN_WIDTH, onIssueListResizeHandler, onIssueListResizeEndHandler);
+}
+
+function onIssueListResizeHandler(width) {
+    onPaneRightResizeHandler(width);
+}
+
+function onIssueListResizeEndHandler(event, ui) {
+    $('#issueDetail').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    $('#propInspector').width(ui.size.width).css('left', getPaneRightPosition(ui.size.width) + 'px');
+    setPaneRightSettings(ui.size.width);
+}
+
+function getPaneRightPosition(width) {
+    return ($('body').width() - width);
+}
+
+function showPropInspector() {
+    $('#propInspector').show();
+    const width = $('#propInspector').width();
+    setPositionNavCubeCanvas(width);
+    setPositionSectionPlanesOverviewCanvas(width);
+}                        
 //------------------------------------------------------------------------------------------------------------------
 // Do action wherever we click on an object
 //------------------------------------------------------------------------------------------------------------------
@@ -4031,6 +4168,8 @@ function init() {
     initTreeViewPanelResizable();
     initSidebarResizable();
     initIssueDetailResizable();
+    initStoreyViewResizable();
+    initPaneWidth();
 
     bindBtnToggleSidebarStoreyViews();
 

package/src/controls/DxfViewer/js/dxf-viewer.js

@@ -1,17 +1,17 @@
-import * as three from '/resource/dxfViewer/js/three/three.module.js?version=1.1.211';
-import { Matrix3, Vector2 } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.211';
-import { Batch, DxfViewer, Layer } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.211';
-import { Block as SceneBlock } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.211';
-import { Block } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.211';
-import { DxfScene, Entity, ColorCode } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.211';
-import { TextRenderer, ParseSpecialChars, HAlign, VAlign } from '/resource/dxfViewer/js/viewer/TextRenderer.js?version=1.1.211';
-import { DxfWorker } from '/resource/dxfViewer/js/viewer/DxfWorker.js?version=1.1.211';
-import { DxfFetcher } from '/resource/dxfViewer/js/viewer/DxfFetcher.js?version=1.1.211';
-import DxfParser from '/resource/dxfViewer/js/viewer/parser/DxfParser.js?version=1.1.211';
-import { RenderBatch } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.211';
-import { DynamicBuffer, NativeType } from '/resource/dxfViewer/js/viewer/DynamicBuffer.js?version=1.1.211';
-import { OrbitControls } from '/resource/dxfViewer/js/viewer/OrbitControls.js?version=1.1.211';
-import { CSS2DRenderer, CSS2DObject } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.211';
+import * as three from '/resource/dxfViewer/js/three/three.module.js?version=1.1.213';
+import { Matrix3, Vector2 } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.213';
+import { Batch, DxfViewer, Layer } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.213';
+import { Block as SceneBlock } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.213';
+import { Block } from '/resource/dxfViewer/js/viewer/DxfViewer.js?version=1.1.213';
+import { DxfScene, Entity, ColorCode } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.213';
+import { TextRenderer, ParseSpecialChars, HAlign, VAlign } from '/resource/dxfViewer/js/viewer/TextRenderer.js?version=1.1.213';
+import { DxfWorker } from '/resource/dxfViewer/js/viewer/DxfWorker.js?version=1.1.213';
+import { DxfFetcher } from '/resource/dxfViewer/js/viewer/DxfFetcher.js?version=1.1.213';
+import DxfParser from '/resource/dxfViewer/js/viewer/parser/DxfParser.js?version=1.1.213';
+import { RenderBatch } from '/resource/dxfViewer/js/viewer/DxfScene.js?version=1.1.213';
+import { DynamicBuffer, NativeType } from '/resource/dxfViewer/js/viewer/DynamicBuffer.js?version=1.1.213';
+import { OrbitControls } from '/resource/dxfViewer/js/viewer/OrbitControls.js?version=1.1.213';
+import { CSS2DRenderer, CSS2DObject } from '/resource/dxfViewer/js/three/three.module.js?version=1.1.213';
 
 let treeViewData = [];
 let notes = [];
@@ -3623,6 +3623,7 @@ function bindResizerMouseup() {
     $(document).on('mouseup', function (e) {
         e.preventDefault();
         e.stopPropagation();
+        onResizeEndPaneHandler($('.vitro-draggable').parent());
         $('.vitro-resizer').removeClass('vitro-draggable');
     });
 }
@@ -3633,15 +3634,20 @@ function bindResizerMousemove() {
             e.preventDefault();
             e.stopPropagation();
             if ($('.vitro-draggable').hasClass('vitro-left')) {
-                $('.vitro-draggable').parent().width($(document).width() - e.clientX);
+                $('.vitro-draggable').parent().width(getPaneWidth($(document).width() - e.clientX));
             } else {
-                $('.vitro-draggable').parent().width(e.clientX);
+                $('.vitro-draggable').parent().width(getPaneWidth(e.clientX));
             }
             updateCanvasContainerWidth();
         }
     });
 }
 
+function getPaneWidth(width) {
+    const maxWidth = Math.floor(($('body').width() * 40) / 100);
+    return width > maxWidth ? maxWidth : width;
+}
+
 function updateCanvasContainerWidth() {
     let insetStart = 0;
     let insetEnd = 0;
@@ -3692,6 +3698,82 @@ function reinitMarkupList() {
             }
         });
     }
+}
+
+function initPaneWidth() {
+    const settings = getSettings();
+    setWidthPaneRight(settings.rightPaneWidth);
+    setWidthPaneLeft(settings.leftPaneWidth);
+}
+
+function setSettings(settings) {
+    const settingsString = settings ? JSON.stringify(settings) : '';
+    context.setSettingsToLocalStorage(settingsString);
+}
+
+function getSettings() {
+    const settings = context.getSettingsFromLocalStorage();
+    return settings ? JSON.parse(settings) : {};
+}
+
+function setWidthPaneRight(width) {
+    if (width) {
+        $('.sidebar').width(width);
+        $('.vitro-issue-detail').width(width);
+        updateCanvasContainerWidth();
+    }
+}
+
+function setWidthPaneLeft(width) {
+    if (width) {
+        $('#sidebarContainer').width(width);
+        $('#layersContainer').width(width);
+        updateCanvasContainerWidth();
+    }
+}
+
+function onResizeEndPaneHandler(elm) {
+    const settings = getSettings();
+    if (isTargetPaneLeft(elm)) {
+        onResizeEndPaneLeftHandler(elm, settings);
+    }
+    if (isTargetPaneRight(elm)) {
+        onResizeEndPaneRightHandler(elm, settings);
+    }
+}
+
+function onResizeEndPaneLeftHandler(elm, settings) {
+    const width = elm.width();
+    settings.leftPaneWidth = width;
+    setSettings(settings);
+    if (elm.attr('id') === 'sidebarContainer') {
+        $('#layersContainer').width(width);
+    }
+    if (elm.attr('id') === 'layersContainer') {
+        $('#sidebarContainer').width(width);
+    }
+}
+
+function onResizeEndPaneRightHandler(elm, settings) {
+    let width;
+    if (elm.hasClass('sidebar')) {
+        width = $('.sidebar').width();
+        $('.vitro-issue-detail').width(width);
+    }
+    if (elm.hasClass('vitro-issue-detail')) {
+        width = $('.vitro-issue-detail').width();
+        $('.sidebar').width(width);
+    }
+    settings.rightPaneWidth = width;
+    setSettings(settings);
+}
+
+function isTargetPaneLeft(elm) {
+    return elm && $(elm).length && (elm.attr('id') === 'sidebarContainer' || elm.attr('id') === 'layersContainer');
+}
+
+function isTargetPaneRight(elm) {
+    return elm && elm.length && (elm.hasClass('sidebar') || elm.hasClass('vitro-issue-detail'));
 }
 $(document).ready(function () {
 	bindBtnToggleSidebarNotes();
@@ -3717,6 +3799,7 @@ $(document).ready(function () {
 	bindScaleSelectChange();
 	bindPanelResize();
 	bindUpdateDocumentMarkupList();
+	initPaneWidth();  
 });
 
 var userLocale =

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.211",
+    value: "resource/pdfViewer/js/pdf.worker.js?version=1.1.213",
     kind: OptionKind.WORKER
   }
 };
@@ -25740,6 +25740,12 @@ class PDFSidebar {
     window.removeEventListener("mousemove", this.#mouseMoveBound);
     window.removeEventListener("mouseup", this.#mouseUpBound);
   }
+  updateWidth(width = 0) { 
+      this.#updateWidth(width);
+  }
+  getWidth(){
+      return this.#width;
+  }
 }
 exports.PDFSidebar = PDFSidebar;
 
@@ -37408,6 +37414,7 @@ var label_measures2PointHint = context.createLocale('app.viewer.pdf.measures.two
 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';
 
 function initContextMenuCanvas() {
     var pages = '#viewer .page:not(.has-new-svg)';
@@ -37672,6 +37679,7 @@ function createComparePanel(compareObjList) {
     btnComparePanelClose.on('click', function () {
         $('#comparePanel').hide();
         $('#comparePanelVisibility').toggleClass('active');
+        $('#btnComparePanel').removeClass('active');
     });
     header.append(btnComparePanelClose);
     var body = $('<div  class="compare-panel_body" />');
@@ -38530,6 +38538,7 @@ function setDlgMeasureSettingsPrecision(precision) {
 function initSidebarResizable() {
     initResizable($('.body__sidebar'));
     initResizable($('.vitro-issue-detail'));
+    initResizeEndPaneLeftHandler();
 }
 
 function initResizable(element) {
@@ -38538,6 +38547,9 @@ function initResizable(element) {
         minWidth: 200,
         resize: function (event, ui) {
             setContainerInset(element.width());
+        },
+        stop: function (event, ui) {
+            onResizeEndPaneRightHandler(event, ui);
         }
     });
 }
@@ -38561,22 +38573,6 @@ function removeSvg(svgData) {
 
 function initNotes() {
     const searchCriterion = window.searchCriterionList ? window.searchCriterionList : [];
-    //$(document).on('webViewerPageRendered', function (e, pageNr) {
-    //    if (context.issueList) {
-    //        initNotesByPageNr(pageNr);
-    //        if (isSketchpadActive) {
-    //            $('.svgsketch-wrap').addClass('active');
-    //        }
-    //    } else {
-    //        context.getIssueList(searchCriterion).then(list => {
-    //            context.issueList = list;
-    //            initNotesByPageNr(pageNr);
-    //            if (isSketchpadActive) {
-    //                $('.svgsketch-wrap').addClass('active');
-    //            }
-    //        });
-    //    }
-    //});
     const renderedPageList = [];
 
     context.getIssueList(searchCriterion).then(list => {
@@ -38599,6 +38595,104 @@ function initMarkupByPageNr(pageNr) {
     if (isSketchpadActive) {
         $('.svgsketch-wrap').addClass('active');
     }
+}
+
+function initPaneWidth() {
+    const settings = getSettings();
+    if (settings.rightPaneWidth) {
+        setWidthPaneRight(settings.rightPaneWidth);
+    }
+    if (settings.leftPaneWidth) {
+        const interval = setInterval(() => {
+            if (PDFViewerApplication.pdfSidebar) {
+                setWidthPaneLeft(settings.leftPaneWidth);
+                clearInterval(interval);
+            }
+        }, 50);
+    }
+    initItemChangedEventListener();
+}
+
+function setWidthPaneLeft(width) {
+    PDFViewerApplication.pdfSidebar?.updateWidth(width);
+}
+
+function setWidthPaneRight(width) {
+    setWidthSidebarIssueList(width);
+    setWidthSidebarIssueDetail(width);
+    if (isSidebarIssueListVisible() || isSidebarIssueDetailVisible()) {
+        setContainerInset(width);
+    }
+}
+
+function onResizeEndPaneRightHandler(event, ui) {
+    const settings = getSettings();
+    settings.rightPaneWidth = ui.size.width;
+    setSettings(settings);
+    if (ui.element.hasClass('body__sidebar')) {
+        setWidthSidebarIssueDetail(ui.size.width);
+        $('.vitro-issue-detail').css('left', $('#viewerContainer').width() + 'px'); 
+    }
+    if (ui.element.hasClass('vitro-issue-detail')) {
+        setWidthSidebarIssueList(ui.size.width);
+        $('.body__sidebar').css('left', $('#viewerContainer').width() + 'px');
+    }
+}
+
+function isSidebarIssueDetailVisible() {
+    return $('.vitro-issue-detail').is(':visible');
+}
+
+function isSidebarIssueListVisible() {
+    return $('.body__sidebar').is(':visible');
+}
+
+function setWidthSidebarIssueDetail(width) {
+    $('.vitro-issue-detail').width(width);
+}
+
+function setWidthSidebarIssueList(width) {
+    $('.body__sidebar').width(width);
+}
+
+function setSettings(settings) {
+    const settingsString = settings ? JSON.stringify(settings) : '';
+    context.setSettingsToLocalStorage(settingsString);
+}
+
+function getSettings() {
+    const settings = context.getSettingsFromLocalStorage();
+    return settings ? JSON.parse(settings) : {};
+}
+
+function onResizeEndPaneLeftHandler(width) {
+    const settings = getSettings();
+    settings.leftPaneWidth = width;
+    setSettings(settings);
+}
+
+function initResizeEndPaneLeftHandler() {
+    PDFViewerApplication.initializedPromise.then(function () {
+        PDFViewerApplication.pdfSidebar.eventBus.on('resize', function (e) {
+            if (e.source == PDFViewerApplication.pdfSidebar) {
+                onResizeEndPaneLeftHandler(PDFViewerApplication.pdfSidebar.getWidth());
+            }
+        });
+    });
+}
+
+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'));
+    }
 }
 $(document).ready(function() {
     context.openFile();
@@ -38628,4 +38722,5 @@ $(document).ready(function() {
     initCompare();
 
     initSidebarResizable();
+    initPaneWidth();
 });}