From 4566ee65d1afc2eea44a2ca6993c81156329f63e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Attila=20Sz=C5=B1cs?= Date: Mon, 22 Apr 2024 02:45:47 +0200 Subject: [PATCH] writer: fix annotation size regression MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hidden contentNodes (in annotation) may become visible during resize. Looks like setting style.max-height also change style.display. Now i set it only if style.display is not none. Signed-off-by: Attila Szűcs Change-Id: I30f2eb75cb3ccb5b43044cef856314b0e35b9300 --- browser/src/layer/tile/CommentListSection.ts | 104 ++++++++++--------- 1 file changed, 55 insertions(+), 49 deletions(-) diff --git a/browser/src/layer/tile/CommentListSection.ts b/browser/src/layer/tile/CommentListSection.ts index 445e46f32..609377fbb 100644 --- a/browser/src/layer/tile/CommentListSection.ts +++ b/browser/src/layer/tile/CommentListSection.ts @@ -1869,11 +1869,14 @@ export class CommentSection extends CanvasSectionObject { if (this.sectionProperties.docLayer._docType === 'text') { const minMaxHeight = Number(getComputedStyle(document.documentElement).getPropertyValue('--annotation-min-size')); for (var i = 0; i < this.sectionProperties.commentList.length;i++) { - this.sectionProperties.commentList[i].sectionProperties.contentNode.setAttribute('style', 'max-height: '+minMaxHeight+'px'); + if (this.sectionProperties.commentList[i].sectionProperties.contentNode.style.display !== 'none') + this.sectionProperties.commentList[i].sectionProperties.contentNode.setAttribute('style', 'max-height: '+minMaxHeight+'px'); } if (this.sectionProperties.selectedComment) { - const maxMaxHeight = Number(getComputedStyle(document.documentElement).getPropertyValue('--annotation-max-size')); - this.sectionProperties.selectedComment.sectionProperties.contentNode.setAttribute('style', 'max-height: '+maxMaxHeight+'px'); + if (this.sectionProperties.selectedComment.sectionProperties.contentNode.style.display !== 'none') { + const maxMaxHeight = Number(getComputedStyle(document.documentElement).getPropertyValue('--annotation-max-size')); + this.sectionProperties.selectedComment.sectionProperties.contentNode.setAttribute('style', 'max-height: '+maxMaxHeight+'px'); + } } } } @@ -1887,57 +1890,60 @@ export class CommentSection extends CanvasSectionObject { const minMaxHeight = Number(getComputedStyle(document.documentElement).getPropertyValue('--annotation-min-size')); const maxMaxHeight = Number(getComputedStyle(document.documentElement).getPropertyValue('--annotation-max-size')); for (var i = 0; i < this.sectionProperties.commentList.length;i++) { - // act commentText height - var actHeight = this.sectionProperties.commentList[i].sectionProperties.contentText.getBoundingClientRect().height; - // if the comment is taller then minimal, we may want to make it taller - if (actHeight > minMaxHeight) { - // but we don't want to make it taller then the maximum - if (actHeight > maxMaxHeight) { - actHeight = maxMaxHeight; - } - // check if there is more space after this commit - var maxSize = maxMaxHeight; - if (i+1 < this.sectionProperties.commentList.length) - // max size of text should be the space between comments - size of non text parts - maxSize = this.sectionProperties.commentList[i+1].sectionProperties.container._leaflet_pos.y - - this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y - - this.sectionProperties.commentList[i].sectionProperties.author.getBoundingClientRect().height - - 3 * this.sectionProperties.marginY //top/bottom of comment window + space between comments - - 2; // not sure why + // Only if ContentNode is displayed. + if (this.sectionProperties.commentList[i].sectionProperties.contentNode.style.display !== 'none') { + // act commentText height + var actHeight = this.sectionProperties.commentList[i].sectionProperties.contentText.getBoundingClientRect().height; + // if the comment is taller then minimal, we may want to make it taller + if (actHeight > minMaxHeight) { + // but we don't want to make it taller then the maximum + if (actHeight > maxMaxHeight) { + actHeight = maxMaxHeight; + } + // check if there is more space after this commit + var maxSize = maxMaxHeight; + if (i+1 < this.sectionProperties.commentList.length) + // max size of text should be the space between comments - size of non text parts + maxSize = this.sectionProperties.commentList[i+1].sectionProperties.container._leaflet_pos.y + - this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y + - this.sectionProperties.commentList[i].sectionProperties.author.getBoundingClientRect().height + - 3 * this.sectionProperties.marginY //top/bottom of comment window + space between comments + - 2; // not sure why - if (maxSize > maxMaxHeight) { - maxSize = maxMaxHeight; - } else if (growUp && actHeight > maxSize) { - // if more space needed as we have after the comment - // check it there is any space before the comment - var spaceBefore = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y; - if (i > 0) { - spaceBefore -= this.sectionProperties.commentList[i-1].sectionProperties.container._leaflet_pos.y - + this.sectionProperties.commentList[i-1].sectionProperties.container.getBoundingClientRect().height - + this.sectionProperties.marginY; - } else { - spaceBefore += this.documentTopLeft[1]; - } - // if there is more space - if (spaceBefore > 0) { - var moveUp = 0; - if (actHeight - maxSize < spaceBefore) { - // there is enought space, move up as much as we can; - moveUp = actHeight - maxSize; + if (maxSize > maxMaxHeight) { + maxSize = maxMaxHeight; + } else if (growUp && actHeight > maxSize) { + // if more space needed as we have after the comment + // check it there is any space before the comment + var spaceBefore = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y; + if (i > 0) { + spaceBefore -= this.sectionProperties.commentList[i-1].sectionProperties.container._leaflet_pos.y + + this.sectionProperties.commentList[i-1].sectionProperties.container.getBoundingClientRect().height + + this.sectionProperties.marginY; } else { - // there is not enought space - moveUp = spaceBefore; + spaceBefore += this.documentTopLeft[1]; + } + // if there is more space + if (spaceBefore > 0) { + var moveUp = 0; + if (actHeight - maxSize < spaceBefore) { + // there is enought space, move up as much as we can; + moveUp = actHeight - maxSize; + } else { + // there is not enought space + moveUp = spaceBefore; + } + // move up + var posX = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.x; + var posY = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y-moveUp; + (new L.PosAnimation()).run(this.sectionProperties.commentList[i].sectionProperties.container, {x: Math.round(posX), y: Math.round(posY)}); + // increase comment height + maxSize += moveUp; } - // move up - var posX = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.x; - var posY = this.sectionProperties.commentList[i].sectionProperties.container._leaflet_pos.y-moveUp; - (new L.PosAnimation()).run(this.sectionProperties.commentList[i].sectionProperties.container, {x: Math.round(posX), y: Math.round(posY)}); - // increase comment height - maxSize += moveUp; } + if (maxSize > minMaxHeight) + this.sectionProperties.commentList[i].sectionProperties.contentNode.setAttribute('style', 'max-height: '+Math.round(maxSize)+'px'); } - if (maxSize > minMaxHeight) - this.sectionProperties.commentList[i].sectionProperties.contentNode.setAttribute('style', 'max-height: '+Math.round(maxSize)+'px'); } } }