Introduce components for new image diff UI
The new image diff UI will allow comparing large images not only scaled
to fit the screen (as it works currently in side-by-side diff) but also
at their original size as well as magnified by chosen factor, to review
small details. To avoid having to scroll the document, content will fill
as much of the viewport as possible and then support fluid panning at
the component level, while also showing a scaled-down version of the
image for overview.
The components in this change support switching content without losing
state about which part of the image is magnified, to facilitate an
overlay or "blink" mode where users can quickly switch back and forth
between base and revision image, to notice even subtle changes.
Change-Id: I39e93f548c981fb056f0a799ace4f06fd7fef12a
diff --git a/Documentation/js_licenses.txt b/Documentation/js_licenses.txt
index 48e729f..7ef9473 100644
--- a/Documentation/js_licenses.txt
+++ b/Documentation/js_licenses.txt
@@ -247,6 +247,38 @@
----
+[[DefinitelyTyped]]
+DefinitelyTyped
+
+* @types/resize-observer-browser
+
+[[DefinitelyTyped_license]]
+----
+ MIT License
+
+ Copyright (c) Microsoft Corporation.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE
+
+----
+
+
[[Polymer-2014]]
Polymer-2014
diff --git a/Documentation/licenses.txt b/Documentation/licenses.txt
index b7cdf8a..5f0fb65 100644
--- a/Documentation/licenses.txt
+++ b/Documentation/licenses.txt
@@ -3204,6 +3204,38 @@
----
+[[DefinitelyTyped]]
+DefinitelyTyped
+
+* @types/resize-observer-browser
+
+[[DefinitelyTyped_license]]
+----
+ MIT License
+
+ Copyright (c) Microsoft Corporation.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE
+
+----
+
+
[[Polymer-2014]]
Polymer-2014
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-overview-image.ts b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-overview-image.ts
new file mode 100644
index 0000000..42268e9
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-overview-image.ts
@@ -0,0 +1,304 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ css,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+ query,
+} from 'lit-element';
+import {StyleInfo, styleMap} from 'lit-html/directives/style-map';
+
+import {Dimensions, fitToFrame, Point, Rect} from './util';
+
+/**
+ * Displays a scaled-down version of an image with a draggable frame for
+ * choosing a portion of the image to be magnified by other components.
+ *
+ * Slotted content can be arbitrary elements, but should be limited to images or
+ * stacks of image-like elements (e.g. for overlays) with limited interactivity,
+ * to prevent confusion, as the component only captures a limited set of events.
+ * Slotted content is scaled to fit the bounds of the component, with
+ * letterboxing if aspect ratios differ. For slotted content smaller than the
+ * component, it will cap the scale at 1x and also apply letterboxing.
+ */
+@customElement('gr-overview-image')
+export class GrOverviewImage extends LitElement {
+ @property({type: Object})
+ frameRect: Rect = {origin: {x: 0, y: 0}, dimensions: {width: 0, height: 0}};
+
+ @internalProperty() protected contentStyle: StyleInfo = {};
+
+ @internalProperty() protected contentTransformStyle: StyleInfo = {};
+
+ @internalProperty() protected frameStyle: StyleInfo = {};
+
+ @internalProperty() protected overlayStyle: StyleInfo = {};
+
+ @internalProperty() protected dragging = false;
+
+ @query('.content-box') protected contentBox!: HTMLDivElement;
+
+ @query('.content') protected content!: HTMLDivElement;
+
+ @query('.content-transform') protected contentTransform!: HTMLDivElement;
+
+ @query('.frame') protected frame!: HTMLDivElement;
+
+ private contentBounds: Dimensions = {width: 0, height: 0};
+
+ private imageBounds: Dimensions = {width: 0, height: 0};
+
+ private scale = 1;
+
+ // When grabbing the frame to drag it around, this stores the offset of the
+ // cursor from the center of the frame at the start of the drag.
+ private grabOffset: Point = {x: 0, y: 0};
+
+ private readonly resizeObserver = new ResizeObserver(
+ (entries: ResizeObserverEntry[]) => {
+ for (const entry of entries) {
+ if (entry.target === this.contentBox) {
+ this.contentBounds = {
+ width: entry.contentRect.width,
+ height: entry.contentRect.height,
+ };
+ }
+ if (entry.target === this.contentTransform) {
+ this.imageBounds = {
+ width: entry.contentRect.width,
+ height: entry.contentRect.height,
+ };
+ }
+ this.updateScale();
+ }
+ }
+ );
+
+ static styles = css`
+ :host {
+ --overview-image-background-color: #000;
+ --overview-image-frame-color: #f00;
+ display: flex;
+ }
+ * {
+ box-sizing: border-box;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ .content-box {
+ border: 1px solid var(--overview-image-background-color);
+ background-color: var(--overview-iamge-background-color);
+ width: 100%;
+ position: relative;
+ }
+ .content {
+ position: absolute;
+ cursor: pointer;
+ }
+ .content-transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ .frame {
+ border: 1px solid var(--overview-image-frame-color);
+ position: absolute;
+ will-change: transform;
+ }
+ .overlay {
+ position: absolute;
+ z-index: 10000;
+ cursor: grabbing;
+ }
+ `;
+
+ render() {
+ return html`
+ <div class="content-box">
+ <div
+ class="content"
+ style="${styleMap({
+ ...this.contentStyle,
+ })}"
+ @mousemove="${this.maybeDragFrame}"
+ @mousedown=${this.clickOverview}
+ @mouseup="${this.releaseFrame}"
+ >
+ <div
+ class="content-transform"
+ style="${styleMap(this.contentTransformStyle)}"
+ >
+ <slot></slot>
+ </div>
+ <div
+ class="frame"
+ style="${styleMap({
+ ...this.frameStyle,
+ cursor: this.dragging ? 'grabbing' : 'grab',
+ })}"
+ @mousedown="${this.grabFrame}"
+ ></div>
+ </div>
+ <div
+ class="overlay"
+ style="${styleMap({
+ ...this.overlayStyle,
+ display: this.dragging ? 'block' : 'none',
+ })}"
+ @mousemove="${this.overlayMouseMove}"
+ @mouseleave="${this.releaseFrame}"
+ @mouseup="${this.releaseFrame}"
+ ></div>
+ </div>
+ `;
+ }
+
+ firstUpdated() {
+ this.resizeObserver.observe(this.contentBox);
+ this.resizeObserver.observe(this.contentTransform);
+ }
+
+ updated(changedProperties: PropertyValues) {
+ if (changedProperties.has('frameRect')) {
+ this.updateFrameStyle();
+ }
+ }
+
+ clickOverview(event: MouseEvent) {
+ event.preventDefault();
+
+ this.updateOverlaySize();
+
+ this.dragging = true;
+ const rect = this.content.getBoundingClientRect();
+ this.notifyNewCenter({
+ x: (event.clientX - rect.left) / this.scale,
+ y: (event.clientY - rect.top) / this.scale,
+ });
+ }
+
+ grabFrame(event: MouseEvent) {
+ event.preventDefault();
+ // Do not bubble up into clickOverview().
+ event.stopPropagation();
+
+ this.updateOverlaySize();
+
+ this.dragging = true;
+ const rect = this.frame.getBoundingClientRect();
+ const frameCenterX = rect.x + rect.width / 2;
+ const frameCenterY = rect.y + rect.height / 2;
+ this.grabOffset = {
+ x: event.clientX - frameCenterX,
+ y: event.clientY - frameCenterY,
+ };
+ }
+
+ maybeDragFrame(event: MouseEvent) {
+ event.preventDefault();
+ if (!this.dragging) return;
+ const rect = this.content.getBoundingClientRect();
+ const center = {
+ x: (event.clientX - rect.left - this.grabOffset.x) / this.scale,
+ y: (event.clientY - rect.top - this.grabOffset.y) / this.scale,
+ };
+ this.notifyNewCenter(center);
+ }
+
+ releaseFrame(event: MouseEvent) {
+ event.preventDefault();
+ this.dragging = false;
+ this.grabOffset = {x: 0, y: 0};
+ }
+
+ overlayMouseMove(event: MouseEvent) {
+ event.preventDefault();
+ this.maybeDragFrame(event);
+ }
+
+ private updateScale() {
+ const fitted = fitToFrame(this.imageBounds, this.contentBounds);
+ this.scale = fitted.scale;
+
+ this.contentStyle = {
+ ...this.contentStyle,
+ top: `${fitted.top}px`,
+ left: `${fitted.left}px`,
+ width: `${fitted.width}px`,
+ height: `${fitted.height}px`,
+ };
+
+ this.contentTransformStyle = {
+ transform: `scale(${this.scale})`,
+ };
+
+ this.updateFrameStyle();
+ }
+
+ private updateFrameStyle() {
+ const x = this.frameRect.origin.x * this.scale;
+ const y = this.frameRect.origin.y * this.scale;
+ const width = this.frameRect.dimensions.width * this.scale;
+ const height = this.frameRect.dimensions.height * this.scale;
+ this.frameStyle = {
+ ...this.frameStyle,
+ transform: `translate(${x}px, ${y}px)`,
+ width: `${width}px`,
+ height: `${height}px`,
+ };
+ }
+
+ private updateOverlaySize() {
+ const rect = this.contentBox.getBoundingClientRect();
+ // Create a whole-page overlay to capture mouse events, so that the drag
+ // interaction continues until the user releases the mouse button. Since
+ // innerWidth and innerHeight include scrollbars, we subtract 20 pixels each
+ // to prevent the overlay from extending offscreen under any existing
+ // scrollbar and causing the scrollbar for the other dimension to show up
+ // unnecessarily.
+ const width = window.innerWidth - 20;
+ const height = window.innerHeight - 20;
+ this.overlayStyle = {
+ ...this.overlayStyle,
+ top: `-${rect.top + 1}px`,
+ left: `-${rect.left + 1}px`,
+ width: `${width}px`,
+ height: `${height}px`,
+ };
+ }
+
+ private notifyNewCenter(center: Point) {
+ this.dispatchEvent(
+ new CustomEvent('center-updated', {
+ detail: {...center},
+ bubbles: true,
+ composed: true,
+ })
+ );
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-overview-image': GrOverviewImage;
+ }
+}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-zoomed-image.ts b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-zoomed-image.ts
new file mode 100644
index 0000000..a14a9cc
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/gr-zoomed-image.ts
@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+ css,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+} from 'lit-element';
+import {StyleInfo, styleMap} from 'lit-html/directives/style-map';
+import {Rect} from './util';
+
+/**
+ * Displays its slotted content at a given scale, centered over a given point,
+ * while ensuring the content always fills the container. The content does not
+ * have to be a single image, it can be arbitrary HTML. To prevent user
+ * confusion, it should ideally be image-like, i.e. have limited or no
+ * interactivity, as the component does not prevent events or focus from
+ * reaching the slotted content.
+ */
+@customElement('gr-zoomed-image')
+export class GrZoomedImage extends LitElement {
+ @property({type: Number}) scale = 1;
+
+ @property({type: Object})
+ frameRect: Rect = {origin: {x: 0, y: 0}, dimensions: {width: 0, height: 0}};
+
+ @internalProperty() protected imageStyles: StyleInfo = {};
+
+ static styles = css`
+ :host {
+ display: block;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ #clip {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ #transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ `;
+
+ render() {
+ return html`
+ <div id="clip">
+ <div id="transform" style="${styleMap(this.imageStyles)}">
+ <slot></slot>
+ </div>
+ </div>
+ `;
+ }
+
+ updated(changedProperties: PropertyValues) {
+ if (changedProperties.has('scale') || changedProperties.has('frameRect')) {
+ this.updateImageStyles();
+ }
+ }
+
+ private updateImageStyles() {
+ const {x, y} = this.frameRect.origin;
+ this.imageStyles = {
+ 'image-rendering': this.scale >= 1 ? 'pixelated' : 'auto',
+ transform: `translate(${-x}px, ${-y}px) scale(${this.scale})`,
+ };
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-zoomed-image': GrZoomedImage;
+ }
+}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util.ts b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util.ts
new file mode 100644
index 0000000..b42eea9
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util.ts
@@ -0,0 +1,236 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Point {
+ x: number;
+ y: number;
+}
+
+export interface Dimensions {
+ width: number;
+ height: number;
+}
+
+export interface Rect {
+ origin: Point;
+ dimensions: Dimensions;
+}
+
+export interface FittedContent {
+ top: number;
+ left: number;
+ width: number;
+ height: number;
+ scale: number;
+}
+
+function clamp(value: number, min: number, max: number) {
+ return Math.max(min, Math.min(value, max));
+}
+
+/**
+ * Fits content of the given dimensions into the given frame, maintaining the
+ * aspect ratio of the content and applying letterboxing / pillarboxing as
+ * needed.
+ */
+export function fitToFrame(
+ content: Dimensions,
+ frame: Dimensions
+): FittedContent {
+ const contentAspectRatio = content.width / content.height;
+ const frameAspectRatio = frame.width / frame.height;
+ // If the content is wider than the frame, it will be letterboxed, otherwise
+ // it will be pillarboxed. When letterboxed, content and frame width will
+ // match exactly, when pillarboxed, content and frame height will match
+ // exactly.
+ const isLetterboxed = contentAspectRatio > frameAspectRatio;
+ let width: number;
+ let height: number;
+ if (isLetterboxed) {
+ width = Math.min(frame.width, content.width);
+ height = content.height * (width / content.width);
+ } else {
+ height = Math.min(frame.height, content.height);
+ width = content.width * (height / content.height);
+ }
+ const top = (frame.height - height) / 2;
+ const left = (frame.width - width) / 2;
+ const scale = width / content.width;
+ return {top, left, width, height, scale};
+}
+
+function ensureInBounds(part: Rect, bounds: Dimensions): Rect {
+ const x =
+ part.dimensions.width <= bounds.width
+ ? clamp(part.origin.x, 0, bounds.width - part.dimensions.width)
+ : (bounds.width - part.dimensions.width) / 2;
+ const y =
+ part.dimensions.height <= bounds.height
+ ? clamp(part.origin.y, 0, bounds.height - part.dimensions.height)
+ : (bounds.height - part.dimensions.height) / 2;
+ return {origin: {x, y}, dimensions: part.dimensions};
+}
+
+/**
+ * Maintains a given frame inside given bounds, adjusting requested positions
+ * for the frame as needed. This supports the non-destructive application of a
+ * scaling factor, so that e.g. the magnification of an image can be changed
+ * easily while keeping the frame centered over the same spot. Changing bounds
+ * or frame size also keeps the frame position when possible.
+ */
+export class FrameConstrainer {
+ private center: Point = {x: 0, y: 0};
+
+ private frameSize: Dimensions = {width: 0, height: 0};
+
+ private bounds: Dimensions = {width: 0, height: 0};
+
+ private scale = 1;
+
+ private unscaledFrame: Rect = {
+ origin: {x: 0, y: 0},
+ dimensions: {width: 0, height: 0},
+ };
+
+ private scaledFrame: Rect = {
+ origin: {x: 0, y: 0},
+ dimensions: {width: 0, height: 0},
+ };
+
+ getCenter(): Point {
+ return {...this.center};
+ }
+
+ /**
+ * Returns the frame at its original size, positioned within the given bounds
+ * at the given scale; its origin will be in scaled bounds coordinates.
+ *
+ * Ex: for given bounds 100x50 and frame size 30x20, centered over (50, 25),
+ * all at 1x scale, when setting scale to 2, this will return a frame of size
+ * 30x20, centered over (100, 50), within bounds 200x100.
+ *
+ * Useful for positioning a viewport of fixed size over a magnified image.
+ */
+ getUnscaledFrame(): Rect {
+ return {
+ origin: {...this.unscaledFrame.origin},
+ dimensions: {...this.unscaledFrame.dimensions},
+ };
+ }
+
+ /**
+ * Returns the scaled down frame–a scale of 2 will result in frame dimensions
+ * being halved—position within the given bounds at 1x scale; its origin will
+ * be in unscaled bounds coordinates.
+ *
+ * Ex: for given bounds 100x50 and frame size 30x20, centered over (50, 25),
+ * all at 1x scale, when setting scale to 2, this will return a frame of size
+ * 15x10, centered over (50, 25), within bounds 100x50.
+ *
+ * Useful for highlighting the magnified portion of an image as determined by
+ * getUnscaledFrame() in an overview image of fixed size.
+ */
+ getScaledFrame(): Rect {
+ return {
+ origin: {...this.scaledFrame.origin},
+ dimensions: {...this.scaledFrame.dimensions},
+ };
+ }
+
+ /**
+ * Requests the frame to be centered over the given point, in unscaled bounds
+ * coordinates. This will keep the frame within the given bounds, also when
+ * requesting a center point fully outside the given bounds.
+ */
+ requestCenter(center: Point) {
+ this.center = {...center};
+
+ this.ensureFrameInBounds();
+ }
+
+ /**
+ * Sets the frame size, while keeping the frame within the given bounds, and
+ * maintaining the current center if possible.
+ */
+ setFrameSize(frameSize: Dimensions) {
+ if (frameSize.width <= 0 || frameSize.height <= 0) return;
+ this.frameSize = {...frameSize};
+
+ this.ensureFrameInBounds();
+ }
+
+ /**
+ * Sets the bounds, while keeping the frame within them, and maintaining the
+ * current center if possible.
+ */
+ setBounds(bounds: Dimensions) {
+ if (bounds.width <= 0 || bounds.height <= 0) return;
+ this.bounds = {...bounds};
+
+ this.ensureFrameInBounds();
+ }
+
+ /**
+ * Sets the applied scale, while keeping the frame within the given bounds,
+ * and maintaining the current center if possible (both relevant moving from
+ * a larger scale to a smaller scale).
+ */
+ setScale(scale: number) {
+ if (!scale || scale <= 0) return;
+ this.scale = scale;
+
+ this.ensureFrameInBounds();
+ }
+
+ private ensureFrameInBounds() {
+ const scaledCenter = {
+ x: this.center.x * this.scale,
+ y: this.center.y * this.scale,
+ };
+ const scaledBounds = {
+ width: this.bounds.width * this.scale,
+ height: this.bounds.height * this.scale,
+ };
+ const scaledFrameSize = {
+ width: this.frameSize.width / this.scale,
+ height: this.frameSize.height / this.scale,
+ };
+
+ const requestedUnscaledFrame = {
+ origin: {
+ x: scaledCenter.x - this.frameSize.width / 2,
+ y: scaledCenter.y - this.frameSize.height / 2,
+ },
+ dimensions: this.frameSize,
+ };
+ const requestedScaledFrame = {
+ origin: {
+ x: this.center.x - scaledFrameSize.width / 2,
+ y: this.center.y - scaledFrameSize.height / 2,
+ },
+ dimensions: scaledFrameSize,
+ };
+
+ this.unscaledFrame = ensureInBounds(requestedUnscaledFrame, scaledBounds);
+ this.scaledFrame = ensureInBounds(requestedScaledFrame, this.bounds);
+
+ this.center = {
+ x: this.scaledFrame.origin.x + this.scaledFrame.dimensions.width / 2,
+ y: this.scaledFrame.origin.y + this.scaledFrame.dimensions.height / 2,
+ };
+ }
+}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util_test.js b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util_test.js
new file mode 100644
index 0000000..80cfa36
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-image-viewer/util_test.js
@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright (C) 2021 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import '../../../test/common-test-setup-karma.js';
+import {FrameConstrainer} from './util.js';
+
+suite('FrameConstrainer tests', () => {
+ let constrainer;
+
+ setup(() => {
+ constrainer = new FrameConstrainer();
+ constrainer.setBounds({width: 100, height: 100});
+ constrainer.setFrameSize({width: 50, height: 50});
+ constrainer.requestCenter({x: 50, y: 50});
+ });
+
+ suite('changing center', () => {
+ test('moves frame to requested position', () => {
+ constrainer.requestCenter({x: 30, y: 30});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 5, y: 5}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('keeps frame in bounds for top left corner', () => {
+ constrainer.requestCenter({x: 5, y: 5});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 0, y: 0}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('keeps frame in bounds for bottom right corner', () => {
+ constrainer.requestCenter({x: 95, y: 95});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 50, y: 50}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('handles out-of-bounds center left', () => {
+ constrainer.requestCenter({x: -5, y: 50});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 0, y: 25}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('handles out-of-bounds center right', () => {
+ constrainer.requestCenter({x: 105, y: 50});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 50, y: 25}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('handles out-of-bounds center top', () => {
+ constrainer.requestCenter({x: 50, y: -5});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 25, y: 0}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('handles out-of-bounds center bottom', () => {
+ constrainer.requestCenter({x: 50, y: 105});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 25, y: 50}, dimensions: {width: 50, height: 50}});
+ });
+ });
+
+ suite('changing frame size', () => {
+ test('maintains center when decreased', () => {
+ constrainer.setFrameSize({width: 10, height: 10});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 45, y: 45}, dimensions: {width: 10, height: 10}});
+ });
+
+ test('maintains center when increased', () => {
+ constrainer.setFrameSize({width: 80, height: 80});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 10, y: 10}, dimensions: {width: 80, height: 80}});
+ });
+
+ test('updates center to remain in bounds when increased', () => {
+ constrainer.setFrameSize({width: 10, height: 10});
+ constrainer.requestCenter({x: 95, y: 95});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 90, y: 90}, dimensions: {width: 10, height: 10}});
+
+ constrainer.setFrameSize({width: 20, height: 20});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 80, y: 80}, dimensions: {width: 20, height: 20}});
+ });
+ });
+
+ suite('changing scale', () => {
+ suite('for unscaled frame', () => {
+ test('adjusts origin to maintain center when zooming in', () => {
+ constrainer.setScale(2);
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 75, y: 75}, dimensions: {width: 50, height: 50}});
+ });
+
+ test('adjusts origin to maintain center when zooming out', () => {
+ constrainer.setFrameSize({width: 20, height: 20});
+ constrainer.setScale(0.5);
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 15, y: 15}, dimensions: {width: 20, height: 20}});
+ });
+
+ test('keeps frame in bounds when zooming out', () => {
+ constrainer.setScale(5);
+ constrainer.requestCenter({x: 100, y: 100});
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 450, y: 450}, dimensions: {width: 50, height: 50}});
+
+ constrainer.setScale(1);
+ assert.deepEqual(
+ constrainer.getUnscaledFrame(),
+ {origin: {x: 50, y: 50}, dimensions: {width: 50, height: 50}});
+ });
+ });
+
+ suite('for scaled frame', () => {
+ test('decreases frame size and maintains center when zooming in', () => {
+ constrainer.setScale(2);
+ assert.deepEqual(
+ constrainer.getScaledFrame(),
+ {origin: {x: 37.5, y: 37.5}, dimensions: {width: 25, height: 25}});
+ });
+
+ test('increases frame size and maintains center when zooming out', () => {
+ constrainer.setFrameSize({width: 20, height: 20});
+ constrainer.setScale(0.5);
+ assert.deepEqual(
+ constrainer.getScaledFrame(),
+ {origin: {x: 30, y: 30}, dimensions: {width: 40, height: 40}});
+ });
+
+ test('keeps frame in bounds when zooming out', () => {
+ constrainer.setScale(5);
+ constrainer.requestCenter({x: 100, y: 100});
+ assert.deepEqual(
+ constrainer.getScaledFrame(),
+ {origin: {x: 90, y: 90}, dimensions: {width: 10, height: 10}});
+
+ constrainer.setScale(1);
+ assert.deepEqual(
+ constrainer.getScaledFrame(),
+ {origin: {x: 50, y: 50}, dimensions: {width: 50, height: 50}});
+ });
+ });
+ });
+});
\ No newline at end of file
diff --git a/polygerrit-ui/app/node_modules_licenses/licenses.ts b/polygerrit-ui/app/node_modules_licenses/licenses.ts
index 7a6253b..f03c7e6 100644
--- a/polygerrit-ui/app/node_modules_licenses/licenses.ts
+++ b/polygerrit-ui/app/node_modules_licenses/licenses.ts
@@ -254,6 +254,14 @@
license: SharedLicenses.Polymer2017
},
{
+ name: "@types/resize-observer-browser",
+ license: {
+ name: 'DefinitelyTyped',
+ type: LicenseTypes.Mit,
+ packageLicenseFile: "LICENSE"
+ }
+ },
+ {
name: "@webcomponents/shadycss",
license: SharedLicenses.Polymer2017
},
diff --git a/polygerrit-ui/app/package.json b/polygerrit-ui/app/package.json
index 3351386..5e15990 100644
--- a/polygerrit-ui/app/package.json
+++ b/polygerrit-ui/app/package.json
@@ -25,6 +25,7 @@
"@polymer/paper-tabs": "^3.1.0",
"@polymer/paper-toggle-button": "^3.0.1",
"@polymer/polymer": "^3.4.1",
+ "@types/resize-observer-browser": "^0.1.5",
"@webcomponents/shadycss": "^1.9.2",
"@webcomponents/webcomponentsjs": "^1.3.3",
"ba-linkify": "file:../../lib/ba-linkify/src/",
diff --git a/polygerrit-ui/app/yarn.lock b/polygerrit-ui/app/yarn.lock
index e544dbc..ec3b7a0 100644
--- a/polygerrit-ui/app/yarn.lock
+++ b/polygerrit-ui/app/yarn.lock
@@ -324,6 +324,11 @@
dependencies:
"@webcomponents/shadycss" "^1.9.1"
+"@types/resize-observer-browser@^0.1.5":
+ version "0.1.5"
+ resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.5.tgz#36d897708172ac2380cd486da7a3daf1161c1e23"
+ integrity sha512-8k/67Z95Goa6Lznuykxkfhq9YU3l1Qe6LNZmwde1u7802a3x8v44oq0j91DICclxatTr0rNnhXx7+VTIetSrSQ==
+
"@webcomponents/shadycss@^1.9.1", "@webcomponents/shadycss@^1.9.2":
version "1.9.4"
resolved "https://registry.yarnpkg.com/@webcomponents/shadycss/-/shadycss-1.9.4.tgz#4f9d8ea1526bab084c60b53d4854dc39fdb2bb48"
