From d536e9a952e5465db604b6464627362d23ec8bec Mon Sep 17 00:00:00 2001 From: Nicolas Pennec Date: Wed, 4 Oct 2023 12:01:20 +0200 Subject: [PATCH] [preview] fix comparison mode and annotation layer --- src/components/mixins/annotation.js | 16 +- src/components/mixins/fullscreen.js | 2 +- src/components/previews/BrowsingBar.vue | 1 + src/components/previews/PictureViewer.vue | 10 +- src/components/previews/PreviewPlayer.vue | 203 +++++++++++++--------- src/components/previews/VideoViewer.vue | 28 +-- src/components/sides/TaskInfo.vue | 4 +- 7 files changed, 138 insertions(+), 126 deletions(-) diff --git a/src/components/mixins/annotation.js b/src/components/mixins/annotation.js index f263438bc4..70f4155e38 100644 --- a/src/components/mixins/annotation.js +++ b/src/components/mixins/annotation.js @@ -504,22 +504,22 @@ export const annotationMixin = { let path, text let scaleMultiplierX = 1 let scaleMultiplierY = 1 - if (annotation && annotation.width) { - scaleMultiplierX = this.fabricCanvas.width / annotation.width - scaleMultiplierY = this.fabricCanvas.width / annotation.width + if (annotation?.width) { + scaleMultiplierX = canvas.width / annotation.width + scaleMultiplierY = canvas.width / annotation.width } - if (annotation && annotation.height) { - scaleMultiplierY = this.fabricCanvas.height / annotation.height + if (annotation?.height) { + scaleMultiplierY = canvas.height / annotation.height } const canvasWidth = obj.canvasWidth || annotation.width const canvasHeight = obj.canvasHeight if (canvasWidth) { - scaleMultiplierX = this.fabricCanvas.width / canvasWidth - scaleMultiplierY = this.fabricCanvas.width / canvasWidth + scaleMultiplierX = canvas.width / canvasWidth + scaleMultiplierY = canvas.width / canvasWidth } if (canvasHeight) { - scaleMultiplierY = this.fabricCanvas.height / canvasHeight + scaleMultiplierY = canvas.height / canvasHeight } const base = { diff --git a/src/components/mixins/fullscreen.js b/src/components/mixins/fullscreen.js index d273f9f5bc..14edb4beaf 100644 --- a/src/components/mixins/fullscreen.js +++ b/src/components/mixins/fullscreen.js @@ -34,7 +34,7 @@ export const fullScreenMixin = { documentExitFullScreen() { if (document.exitFullscreen) { - document.exitFullscreen() + return document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitCancelFullScreen) { diff --git a/src/components/previews/BrowsingBar.vue b/src/components/previews/BrowsingBar.vue index 1651f7b1e1..b4a99d6217 100644 --- a/src/components/previews/BrowsingBar.vue +++ b/src/components/previews/BrowsingBar.vue @@ -143,5 +143,6 @@ export default { .current-index { cursor: pointer; + white-space: nowrap; } diff --git a/src/components/previews/PictureViewer.vue b/src/components/previews/PictureViewer.vue index 70a8e71188..f777677db5 100644 --- a/src/components/previews/PictureViewer.vue +++ b/src/components/previews/PictureViewer.vue @@ -222,15 +222,7 @@ export default { }, onWindowResize() { - const now = new Date().getTime() - this.lastCall = this.lastCall || 0 - if (now - this.lastCall > 600) { - this.lastCall = now - this.$nextTick(this.resetPicture) - setTimeout(() => { - this.resetPicture() - }, 400) - } + this.resetPicture() }, // Configuration diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue index c555105cc4..3f05a787e9 100644 --- a/src/components/previews/PreviewPlayer.vue +++ b/src/components/previews/PreviewPlayer.vue @@ -8,37 +8,34 @@ ref="canvas-wrapper" oncontextmenu="return false;" @click="onCanvasClicked" - v-show="!isZoomPan" + v-show="!isZoomPan && isAnnotationsDisplayed" > -
- - -
+ +
-
- - -
+
@@ -654,7 +652,6 @@ export default { }, mounted() { - if (!this.container) return this.configureEvents() this.setupFabricCanvas() this.reloadAnnotations() @@ -665,6 +662,7 @@ export default { // hide canvas this.fixCanvasSize({ width: 0, height: 0, left: 0, top: 0 }) } + new ResizeObserver(this.comparisonViewer.resize).observe(this.container) }, beforeDestroy() { @@ -712,6 +710,10 @@ export default { return this.$refs['preview-container'] }, + commentContainer() { + return this.$refs['task-info-player'] + }, + progress() { return this.$refs.progress }, @@ -1092,9 +1094,9 @@ export default { getDimensions() { const dimensions = { width: 0, height: 0 } - if (this.container) { - dimensions.width = this.container.offsetWidth - dimensions.height = this.container.offsetHeight + if (this.previewContainer) { + dimensions.width = this.previewContainer.offsetWidth + dimensions.height = this.previewContainer.offsetHeight } return dimensions }, @@ -1123,27 +1125,36 @@ export default { if (!this.fabricCanvas) { return } - const { height, left, top, width } = dimensions - this.canvasWrapper.style.top = top + 'px' this.canvasWrapper.style.left = left + 'px' this.canvasWrapper.style.width = width + 'px' this.canvasWrapper.style.height = height + 'px' - // const calcOffset = this.fabricCanvas.calcOffset() - this.fabricCanvas.setDimensions({ width, height }) - - this.width = this.getDimensions().width + if ( + this.fabricCanvas.width !== width || + this.fabricCanvas.height !== height + ) { + this.fabricCanvas.setDimensions({ width, height }) + } + this.refreshCanvas() + }, - if (this.isComparing && !this.isComparisonOverlay) { - this.canvasComparisonWrapper.style.top = top + 'px' - this.canvasComparisonWrapper.style.left = left + width + 'px' - this.canvasComparisonWrapper.style.width = width + 'px' - this.canvasComparisonWrapper.style.height = height + 'px' - // this.fabricCanvasComparison.calcOffset() + fixCanvasComparisonSize(dimensions) { + if (!this.fabricCanvasComparison) { + return + } + const { height, left, top, width } = dimensions + this.canvasComparisonWrapper.style.top = top + 'px' + this.canvasComparisonWrapper.style.left = + this.getDimensions().width / 2 + left + 'px' + this.canvasComparisonWrapper.style.width = width + 'px' + this.canvasComparisonWrapper.style.height = height + 'px' + if ( + this.fabricCanvasComparison.width !== width || + this.fabricCanvasComparison.height !== height + ) { this.fabricCanvasComparison.setDimensions({ width, height }) } - this.refreshCanvas() }, @@ -1160,25 +1171,34 @@ export default { // fallback for legacy browsers this.fullScreen = true } - this.container.setAttribute('data-fullscreen', !!true) this.$nextTick(() => { // Needed to avoid fullscreen button to be called with space bar. this.clearFocus() - this.previewViewer.resize() }) }, exitFullScreen() { this.endAnnotationSaving() - this.documentExitFullScreen() - this.container.setAttribute('data-fullscreen', !!false) + const promise = this.documentExitFullScreen() + if (promise) { + promise.then(() => { + this.fullScreen = false + this.$nextTick(() => { + this.previewViewer.resize() + this.comparisonViewer.resize() + }) + }) + } else { + // fallback for legacy browsers + this.fullScreen = false + } this.isComparing = false - this.fullScreen = false this.isCommentsHidden = true this.$nextTick(() => { // Needed to avoid fullscreen button to be called with space bar. this.clearFocus() this.previewViewer.resize() + this.comparisonViewer.resize() }) }, @@ -1199,14 +1219,19 @@ export default { this.isCommentsHidden = true this.endAnnotationSaving() this.$nextTick(() => { - this.previewViewer.resetVideo() - this.previewViewer.resetPicture() + this.previewViewer.resize() + this.comparisonViewer.resize() this.clearFocus() this.$nextTick(() => { this.loadAnnotation() }) }) } + // fix edge cases on toggling fullscreen + setTimeout(() => { + this.previewViewer.resize() + this.comparisonViewer.resize() + }, 500) }, // Comparison @@ -1362,6 +1387,7 @@ export default { this.isAnnotationsDisplayed = !this.isAnnotationsDisplayed this.isZoomPan = false this.previewViewer.resetZoom() + this.comparisonViewer.resetZoom() }, saveAnnotations() { @@ -1585,20 +1611,16 @@ export default { onCommentClicked() { const height = this.previewContainer.offsetHeight this.isCommentsHidden = !this.isCommentsHidden + if (!this.isCommentsHidden) { + this.commentContainer.$el.style.height = `${height}px` + this.commentContainer.focusCommentTextarea() + } + this.endAnnotationSaving() this.$nextTick(() => { - if (!this.isCommentsHidden) { - this.$refs['task-info-player'].$el.style.height = `${height}px` - this.$refs['task-info-player'].focusCommentTextarea() - } - this.previewViewer.resetVideo() - this.previewViewer.resetPicture() - this.endAnnotationSaving() - this.$nextTick(() => { - this.previewViewer.resize() - this.comparisonViewer.resize() - this.reloadAnnotations() - this.loadAnnotation() - }) + this.previewViewer.resize() + this.comparisonViewer.resize() + this.reloadAnnotations() + this.loadAnnotation() }) }, @@ -1796,27 +1818,25 @@ export default { currentPreview() { this.endAnnotationSaving() this.reloadAnnotations() + this.isComparing = false if (this.isMovie) { this.configureVideo() this.pause() this.maxDuration = '00:00.000' this.isDrawing = false - if (this.isComparing) this.isComparing = false setTimeout(() => { this.movieDimensions = this.previewViewer.getNaturalDimensions() - }, 10) + this.previewViewer.resize() + this.comparisonViewer.resize() + }, 500) } else if (this.isPicture) { this.pause() this.isDrawing = false this.refreshCanvas() setTimeout(() => { - this.previewViewer.resetPicture() - }, 10) - if (this.comparisonViewer) { - setTimeout(() => { - this.comparisonViewer.resetPicture() - }, 20) - } + this.previewViewer.resize() + this.comparisonViewer.resize() + }, 500) } else if (this.isSound || this.isFile || this.is3DModel) { // hide canvas this.fixCanvasSize({ width: 0, height: 0, left: 0, top: 0 }) @@ -1838,6 +1858,13 @@ export default { lastIndex = this.currentIndex }, + previewToCompare() { + this.$nextTick(() => { + this.previewViewer.resize() + this.comparisonViewer.resize() + }) + }, + previewToCompareId() { this.$nextTick(() => { const currentFrame = this.currentFrame @@ -1871,21 +1898,23 @@ export default { this.previewToCompareId = '' } this.$nextTick(() => { - // Hack needed to reset positioning. - window.dispatchEvent(new Event('resize')) + this.previewViewer.resize() + this.comparisonViewer.resize() this.previewViewer.resetZoom() + this.comparisonViewer.resetZoom() }) }, light() { this.endAnnotationSaving() this.previewViewer.resize() + this.comparisonViewer.resize() }, extraWide() { this.endAnnotationSaving() - this.previewViewer.resetPicture() this.previewViewer.resize() + this.comparisonViewer.resize() }, isDrawing() { @@ -1899,8 +1928,8 @@ export default { isOrdering() { this.$nextTick(() => { - this.previewViewer.resetVideo() - this.previewViewer.resetPicture() + this.previewViewer.resize() + this.comparisonViewer.resize() }) }, @@ -1921,6 +1950,7 @@ export default { if (this.isAnnotationsDisplayed) { this.$nextTick(() => { this.previewViewer.resetZoom() + this.comparisonViewer.resetZoom() }) } if (!this.isAnnotationsDisplayed) { @@ -1930,8 +1960,8 @@ export default { isComparisonOverlay() { this.$nextTick(() => { - // Hack needed to reset positioning. - window.dispatchEvent(new Event('resize')) + this.previewViewer.resize() + this.comparisonViewer.resize() }) } } @@ -2068,11 +2098,17 @@ export default { } .canvas-wrapper { - width: 100%; position: absolute; + width: 100%; left: 0; z-index: 500; } +.canvas-comparison-wrapper { + position: absolute; + width: 100%; + left: 0; + z-index: 5; +} .center { display: flex; @@ -2090,7 +2126,7 @@ export default { .preview { position: relative; - align-items: center; + align-items: flex-start; background: black; display: flex; justify-content: center; @@ -2119,13 +2155,13 @@ export default { } } -.comparision-preview-viewer, -.preview-viewer { +.preview-viewer, +.comparison-preview-viewer { flex: 1 1 0; + overflow: hidden; } .preview-viewer { - overflow: hidden; z-index: 1; } @@ -2160,9 +2196,4 @@ export default { #annotation-snapshot { display: none; } - -.canvas-comparison-wrapper { - position: absolute; - z-index: 5; -} diff --git a/src/components/previews/VideoViewer.vue b/src/components/previews/VideoViewer.vue index d9d46dbc80..54c2b0e6f7 100644 --- a/src/components/previews/VideoViewer.vue +++ b/src/components/previews/VideoViewer.vue @@ -8,7 +8,6 @@ }" >
-
+