fix: fix bugs and improve styles

ImageMarkup · May 7, 2024 · 0f04c60 · 0f04c60
1 parent d67032e
commit 0f04c60
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 16 deletions.
diff --git a/sources/services/gallery/multiimageLesionWindow.js b/sources/services/gallery/multiimageLesionWindow.js
@@ -191,6 +191,23 @@ export default class MultiLesionWindowService {
 			this.fillRightPanel(item);
 		}});
 
+		this._leftImage.define("onClick", {
+			prev: () => {
+				const selectedId = this._leftSlider.getSelectedId();
+				const itemID = this._leftSlider.getPrevId(selectedId) ?? this._leftSlider.getLastId();
+				const item = webix.copy(this._leftSlider.getItem(itemID));
+				delete item.id;
+				this.fillLeftPanel(item);
+			},
+			next: () => {
+				const selectedId = this._leftSlider.getSelectedId();
+				const itemID = this._leftSlider.getNextId(selectedId) ?? this._leftSlider.getFirstId();
+				const item = webix.copy(this._leftSlider.getItem(itemID));
+				delete item.id;
+				this.fillLeftPanel(item);
+			}
+		});
+
 		this._topSlider.on_click["resize-icon"] = (e, id) => {
 			const currentItem = this._topSlider.getItem(id);
 			this._galleryService._imageWindowTemplateWithoutControls?.hide();
@@ -298,10 +315,12 @@ export default class MultiLesionWindowService {
 		const anchorImageID = lesionsModel.getAnchorImageID(lesionID);
 		if (itemID !== anchorImageID) {
 			this._rightContainer.show();
+			this._resizer.show();
 			lesionsModel.setRightImage(item);
 			this.fillRightPanel(item);
 		}
 		else {
+			this._resizer.hide();
 			this._rightContainer.hide();
 		}
 		const anchorImg = lesionImages.find(i => lesionsModel.getItemID(i) === anchorImageID);
@@ -442,6 +461,10 @@ export default class MultiLesionWindowService {
 				this._rightTotalButton.define("active", true);
 				break;
 		}
+		const itemToSelect = this._rightSlider
+			.find(obj => lesionsModel.getItemID(obj) === lesionsModel.getItemID(image))[0];
+		this._rightSlider.unselectAll();
+		this._rightSlider.select(itemToSelect.id);
 		this.refreshRightControls();
 	}
 
@@ -473,6 +496,10 @@ export default class MultiLesionWindowService {
 				this._leftTotalButton.define("active", true);
 				break;
 		}
+		const itemToSelect = this._leftSlider
+			.find(obj => lesionsModel.getItemID(obj) === lesionsModel.getItemID(image))[0];
+		this._leftSlider.unselectAll();
+		this._leftSlider.select(itemToSelect.id);
 		this.refreshLeftControls();
 	}
 

diff --git a/sources/styles/popups.less b/sources/styles/popups.less
@@ -199,6 +199,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
+  .zoomable-image {
+    max-height:100%;
+    max-width:100%;
+    object-fit: contain;
+  }
 }
 
 /*========== Metadata popup =============*/
@@ -249,6 +255,9 @@
       position: absolute;
       top: 0;
       left: 0;
+      .next {
+        right: 90px;
+      }
     }
     .vertical-slider-left, .vertical-slider-right {
       position: absolute;
@@ -298,6 +307,9 @@
       top: 0px;
       width: 80px !important;
       background: transparent;
+      .webix_list_item.webix_selected {
+        border-color: #46C03C;
+      }
       .webix_list_item{
         background-color: white;
         margin-top: 5px;

diff --git a/sources/views/subviews/gallery/windows/multiImageLesionWindow.js b/sources/views/subviews/gallery/windows/multiImageLesionWindow.js
@@ -66,7 +66,7 @@ function getConfig(windowTitle, closeCallback) {
 		labelAlign: "left",
 		width: 180,
 		height: 16,
-		labelWidth: 70,
+		labelWidth: 75,
 		// TODO: check options
 		options: [
 			constants.MULTI_LESION_FILTERS.TIME,
@@ -83,7 +83,7 @@ function getConfig(windowTitle, closeCallback) {
 		labelAlign: "left",
 		width: 180,
 		height: 16,
-		labelWidth: 70,
+		labelWidth: 75,
 		// TODO: check options
 		options: [
 			constants.MULTI_LESION_FILTERS.TIME,
@@ -92,7 +92,7 @@ function getConfig(windowTitle, closeCallback) {
 		]
 	};
 
-	const leftTemplateViewer = getTemplateViewer(ID_LEFT_IMAGE, false);
+	const leftTemplateViewer = getTemplateViewer(ID_LEFT_IMAGE, true);
 
 	const rightTemplateViewer = getTemplateViewer(ID_RIGHT_IMAGE, false);
 
@@ -492,24 +492,14 @@ function getVerticalSlider(id, side) {
 		id,
 		layout: "y",
 		drag: true,
-		// width: 62,
+		select: false,
 		type: {
 			width: 62,
 			height: 42,
 		},
 		css: `vertical-slider-${side}`,
 		width: 1,
 		template(obj, /* common */) {
-			const imageIconDimensions = {
-				iconContainerDimensions: {
-					width: constants.DEFAULT_GALLERY_IMAGE_ICON_CONTAINER_WIDTH / 2,
-					height: constants.DEFAULT_GALLERY_IMAGE_ICON_CONTAINER_HEIGHT / 2
-				},
-				iconDimensions: {
-					width: constants.DEFAULT_GALLERY_IMAGE_ICON_WIDTH / 2,
-					height: constants.DEFAULT_GALLERY_IMAGE_ICON_HEIGHT / 2
-				}
-			};
 			const lesionID = lesionsModel.getItemLesionID(obj);
 			const anchorImageID = lesionsModel.getAnchorImageID(lesionID);
 			const anchorIcon = lesionsModel.getItemID(obj) === anchorImageID
@@ -545,10 +535,15 @@ function getTemplateViewer(id, showButtons) {
 		css: "absolute-centered-image-template",
 		template(obj) {
 			const imageUrl = galleryImageUrl.getNormalImageUrl(lesionsModel.getItemID(obj)) || "";
+			const mode = lesionsModel.getLeftMode();
+			const lesionID = lesionsModel.getItemLesionID(obj);
+			const lesionsImages = mode === constants.MULTI_LESION_WINDOW_STATE.TIME
+				? lesionsModel.getTimePointImages(lesionID, lesionsModel.getItemTimePoint(obj))
+				: [];
 			return `<div class="image-zoom-container">
 						<img class= 'zoomable-image' src="${imageUrl}"/>
 					</div>
-						${showButtons ? '<a class="prev">&#10094;</a><a class="next">&#10095;</a>' : ""}
+						${showButtons && lesionsImages.length > 1 ? '<a class="prev">&#10094;</a><a class="next">&#10095;</a>' : ""}
 					`;
 		},
 		borderless: true
@@ -561,7 +556,7 @@ function getImageLabel(imageNameId) {
 		css: "multi-image-lesion-window__image-label",
 		width: 100,
 		id: imageNameId,
-		label: "12345678901234567890"
+		label: ""
 	};
 }