From 9522040929ab22dd46e046cffd9df9e25cf32a73 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 19 Dec 2024 12:35:20 -0800 Subject: [PATCH] Closes #7936 - Significant improvements for Time Strip imagery view ahead of user-settable swimlane heights. - Imagery container height, image height and width no longer set in code. - Imagery swimlane now uses styles and hover behavior consistent with events. --- .../imagery/components/ImageryTimeView.vue | 22 ++---- .../imagery/components/imagery-view.scss | 75 +++++++++++++++---- 2 files changed, 67 insertions(+), 30 deletions(-) diff --git a/src/plugins/imagery/components/ImageryTimeView.vue b/src/plugins/imagery/components/ImageryTimeView.vue index 9c65939e65..5f4caaa5da 100644 --- a/src/plugins/imagery/components/ImageryTimeView.vue +++ b/src/plugins/imagery/components/ImageryTimeView.vue @@ -21,7 +21,7 @@ --> @@ -37,8 +37,6 @@ import { PREVIEW_ACTION_KEY } from '@/ui/preview/PreviewAction.js'; import imageryData from '../../imagery/mixins/imageryData.js'; const PADDING = 1; -const ROW_HEIGHT = 100; -const IMAGE_SIZE = 85; const IMAGE_WIDTH_THRESHOLD = 25; const CONTAINER_CLASS = 'c-imagery-tsv-container'; const NO_ITEMS_CLASS = 'c-imagery-tsv__no-items'; @@ -73,9 +71,11 @@ export default { mounted() { this.previewAction = this.openmct.actions.getAction(PREVIEW_ACTION_KEY); - this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas')); - this.canvas.height = 0; - this.canvasContext = this.canvas.getContext('2d'); + // Why are we doing this? This element causes scroll problems in the swimlane. + // this.canvas = this.$refs.imagery.appendChild(document.createElement('canvas')); + // this.canvas.height = 0; + // this.canvas.width = 10; + // this.canvasContext = this.canvas.getContext('2d'); this.setDimensions(); this.setScaleAndPlotImagery = this.setScaleAndPlotImagery.bind(this); @@ -207,8 +207,8 @@ export default { setDimensions() { const imageryHolder = this.$refs.imagery; this.width = this.getClientWidth(); - this.height = Math.round(imageryHolder.getBoundingClientRect().height); + this.imageHeight = this.height - 10; }, setScale(timeSystem) { if (!this.width) { @@ -233,7 +233,6 @@ export default { return imageObj.time <= this.viewBounds.end && imageObj.time >= this.viewBounds.start; }, getImageryContainer() { - let containerHeight = 100; let containerWidth = this.imageHistory.length ? this.width : 200; let imageryContainer; @@ -271,7 +270,6 @@ export default { imageryContainer = component.$el.querySelector(`.${CONTAINER_CLASS}`); imageryContainer.style.maxWidth = `${containerWidth}px`; - imageryContainer.style.height = `${containerHeight}px`; } return imageryContainer; @@ -380,15 +378,11 @@ export default { //create image vertical tick indicator let imageTickElement = document.createElement('div'); imageTickElement.classList.add('c-imagery-tsv__image-handle'); - imageTickElement.style.width = '2px'; - imageTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`; imageWrapper.appendChild(imageTickElement); //create placeholder - this will also hold the actual image let imagePlaceholder = document.createElement('div'); imagePlaceholder.classList.add('c-imagery-tsv__image-placeholder'); - imagePlaceholder.style.width = `${IMAGE_SIZE}px`; - imagePlaceholder.style.height = `${IMAGE_SIZE}px`; imageWrapper.appendChild(imagePlaceholder); //create image element @@ -396,8 +390,6 @@ export default { this.setNSAttributesForElement(imageElement, { src: image.thumbnailUrl || image.url }); - imageElement.style.width = `${IMAGE_SIZE}px`; - imageElement.style.height = `${IMAGE_SIZE}px`; this.setImageDisplay(imageElement, showImagePlaceholders); //handle mousedown event to show the image in a large view diff --git a/src/plugins/imagery/components/imagery-view.scss b/src/plugins/imagery/components/imagery-view.scss index 09e8cb7d81..3cb0104b9c 100644 --- a/src/plugins/imagery/components/imagery-view.scss +++ b/src/plugins/imagery/components/imagery-view.scss @@ -509,45 +509,90 @@ /*************************************** IMAGERY IN TIMESTRIP VIEWS */ .c-imagery-tsv { - div.c-imagery-tsv__image-wrapper { + $m: $interiorMargin; + @include abs(); + + &-container { + background: $colorPlotBg; + box-shadow: inset $colorPlotAreaBorder 0 0 0 1px; // Using box-shadow instead of border to not affect box size + position: absolute; + top: $m; right: 0; bottom: $m; left: 0; + } + + .c-imagery-tsv__image-wrapper { + $m: $interiorMarginSm; cursor: pointer; position: absolute; - top: 0; + top: $m; bottom: $m; display: flex; z-index: 1; - margin-top: 5px; img { align-self: flex-end; } + &:hover { z-index: 2; - [class*='__image-handle'] { - background-color: $colorBodyFg; + .c-imagery-tsv { + &__image-handle { + box-shadow: rgba($colorEventLine, 0.5) 0 0 0px 4px; + transition: none; + } + + &__image-placeholder img { + filter: none; + } } img { + // img can be `display: none` when there's not enough space between tick lines display: block !important; } } } + &__image-placeholder { + background-color: deeppink; //pushBack($colorBodyBg, 0.3); + $m: $interiorMargin; + display: block; + position: absolute; + top: $m; right: auto; bottom: $m; left: 0; + + img { + filter: brightness(0.8); + height: 100%; + } + } + + + &__image-handle { + $lineW: $eventLineW; + $hitAreaW: 7px; + background-color: $colorEventLine; + transition: box-shadow 250ms ease-out; + top: 0; bottom: 0; + width: $lineW; + z-index: 3; + + &:before { + // Extend hit area + content: ''; + display: block; + position: absolute; + top: 0; bottom: 0; + z-index: 0; + width: $hitAreaW; + transform: translateX(($hitAreaW - $lineW) * -0.5); + } + } + &__no-items { fill: $colorBodyFg !important; } - - &__image-handle { - background-color: rgba($colorBodyFg, 0.5); - } - - &__image-placeholder { - background-color: pushBack($colorBodyBg, 0.3); - display: block; - align-self: flex-end; - } } +// DON'T THINK THIS IS BEING USED .c-image-canvas { pointer-events: auto; // This allows the image element to receive a browser-level context click position: absolute;