Skip to content

GitLab

Commit adbbae7e authored by Saturnino Abril's avatar Saturnino Abril Committed by Carlos Tadeu Panato Junior
Browse files
Options

fix scaling issue of SVG image (#1314)

parent 3242b678
Hide whitespace changes
Inline Side-by-side
Showing with 391 additions and 6 deletions
components/single_image_view/single_image_view.jsx
View file @ adbbae7e
......@@ -180,12 +180,6 @@ export default class SingleImageView extends React.PureComponent {
</div>
);
const fileType = getFileType(fileInfo.extension);
let svgClass = '';
if (fileType === FileTypes.SVG) {
svgClass = 'post-image normal';
}
const loading = localizeMessage('view_image.loading', 'Loading');
let viewImageModal;
......@@ -202,11 +196,21 @@ export default class SingleImageView extends React.PureComponent {
width = PREVIEW_IMAGE_MIN_DIMENSION;
}
const fileType = getFileType(fileInfo.extension);
let svgClass = '';
let imageStyle = {height};
let imageLoadedStyle = {height};
let imageContainerStyle = {};
if (width < viewPortWidth && height === PREVIEW_IMAGE_MAX_HEIGHT) {
imageContainerStyle = {width};
} else if (fileType === FileTypes.SVG) {
svgClass = 'post-image normal';
imageStyle = {};
imageLoadedStyle = {};
imageContainerStyle = {
width: viewPortWidth < PREVIEW_IMAGE_MAX_HEIGHT ? viewPortWidth : PREVIEW_IMAGE_MAX_HEIGHT,
height: PREVIEW_IMAGE_MAX_HEIGHT,
};
}
if (loaded) {
......@@ -221,6 +225,10 @@ export default class SingleImageView extends React.PureComponent {
fadeInClass = 'image-fade-in';
imageStyle = {cursor: 'pointer'};
imageLoadedStyle = {};
if (fileType === FileTypes.SVG) {
imageContainerStyle = {width: viewPortWidth < PREVIEW_IMAGE_MAX_HEIGHT ? viewPortWidth : PREVIEW_IMAGE_MAX_HEIGHT};
}
} else if (this.props.isEmbedVisible) {
loadingImagePreview = (
<LoadingImagePreview
......
tests/components/__snapshots__/single_image_view.test.jsx.snap 0 → 100644
View file @ adbbae7e
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/SingleImageView should match snapshot 1`] = `
<div
className="file-view--single"
>
<div
className="file__image"
>
<a
aria-label="Toggle Embed Visibility"
className="post__embed-visibility"
key="toggle"
onClick={[Function]}
/>
<div
className="image-name"
onClick={[Function]}
>
name
</div>
<div
className="image-container"
style={Object {}}
>
<div
className="image-loaded "
style={
Object {
"height": 200,
}
}
>
<img
className=" "
onClick={[Function]}
style={
Object {
"height": 200,
}
}
/>
</div>
<div
className="image-preload"
>
<LoadingImagePreview
containerClass="file__image-loading"
loading="Loading"
/>
</div>
</div>
</div>
</div>
`;
exports[`components/SingleImageView should match snapshot 2`] = `
<div
className="file-view--single"
>
<div
className="file__image"
>
<a
aria-label="Toggle Embed Visibility"
className="post__embed-visibility"
key="toggle"
onClick={[Function]}
/>
<div
className="image-name"
onClick={[Function]}
>
name
</div>
<div
className="image-container"
style={Object {}}
>
<div
className="image-loaded image-fade-in"
style={Object {}}
>
<img
className=" "
onClick={[Function]}
style={
Object {
"cursor": "pointer",
}
}
/>
</div>
<div
className="image-preload"
/>
</div>
<Connect(ViewImageModal)
fileInfos={
Array [
Object {
"extension": "jpg",
"has_preview_image": true,
"height": 200,
"id": "file_info_id",
"name": "name",
"post_id": "post_id",
"width": 350,
},
]
}
onModalDismissed={[Function]}
show={false}
/>
</div>
</div>
`;
exports[`components/SingleImageView should match snapshot, SVG image 1`] = `
<div
className="file-view--single"
>
<div
className="file__image"
>
<a
aria-label="Toggle Embed Visibility"
className="post__embed-visibility"
key="toggle"
onClick={[Function]}
/>
<div
className="image-name"
onClick={[Function]}
>
name_svg
</div>
<div
className="image-container"
style={
Object {
"height": 350,
"width": 300,
}
}
>
<div
className="image-loaded "
style={Object {}}
>
<img
className=" post-image normal"
onClick={[Function]}
style={Object {}}
/>
</div>
<div
className="image-preload"
>
<LoadingImagePreview
containerClass="file__image-loading"
loading="Loading"
/>
</div>
</div>
</div>
</div>
`;
exports[`components/SingleImageView should match snapshot, SVG image 2`] = `
<div
className="file-view--single"
>
<div
className="file__image"
>
<a
aria-label="Toggle Embed Visibility"
className="post__embed-visibility"
key="toggle"
onClick={[Function]}
/>
<div
className="image-name"
onClick={[Function]}
>
name_svg
</div>
<div
className="image-container"
style={
Object {
"width": 300,
}
}
>
<div
className="image-loaded image-fade-in"
style={Object {}}
>
<img
className=" post-image normal"
onClick={[Function]}
style={
Object {
"cursor": "pointer",
}
}
/>
</div>
<div
className="image-preload"
/>
</div>
<Connect(ViewImageModal)
fileInfos={
Array [
Object {
"extension": "svg",
"id": "svg_file_info_id",
"name": "name_svg",
"post_id": "post_id",
},
]
}
onModalDismissed={[Function]}
show={false}
/>
</div>
</div>
`;
tests/components/single_image_view.test.jsx 0 → 100644
View file @ adbbae7e
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {shallow} from 'enzyme';
import BrowserStore from 'stores/browser_store.jsx';
import SingleImageView from 'components/single_image_view/single_image_view.jsx';
jest.mock('stores/browser_store.jsx', () => ({
setGlobalItem: jest.fn(),
}));
describe('components/SingleImageView', () => {
const baseProps = {
fileInfo: {
id: 'file_info_id',
post_id: 'post_id',
name: 'name',
extension: 'jpg',
has_preview_image: true,
width: 350,
height: 200,
},
isRhsOpen: false,
isEmbedVisible: true,
};
test('should match snapshot', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
expect(wrapper).toMatchSnapshot();
wrapper.setState({loaded: true});
expect(wrapper).toMatchSnapshot();
});
test('should match snapshot, SVG image', () => {
const fileInfo = {
id: 'svg_file_info_id',
post_id: 'post_id',
name: 'name_svg',
extension: 'svg',
};
const props = {...baseProps, fileInfo};
const wrapper = shallow(
<SingleImageView {...props}/>
);
wrapper.setState({viewPortWidth: 300});
expect(wrapper).toMatchSnapshot();
wrapper.setState({loaded: true});
expect(wrapper).toMatchSnapshot();
});
test('should call setViewPortWidth on handleResize', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
const instance = wrapper.instance();
instance.setViewPortWidth = jest.fn();
instance.handleResize();
expect(instance.setViewPortWidth).toHaveBeenCalledTimes(1);
});
test('should match state on setViewPortWidth', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
wrapper.setState({viewPortWidth: 300});
const instance = wrapper.instance();
instance.viewPort = {getBoundingClientRect: () => ({width: 500})};
instance.setViewPortWidth();
expect(wrapper.state('viewPortWidth')).toEqual(500);
});
test('should match state on handleImageClick', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
wrapper.setState({showPreviewModal: false});
wrapper.instance().handleImageClick({preventDefault: jest.fn()});
expect(wrapper.state('showPreviewModal')).toEqual(true);
});
test('should match state on showPreviewModal', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
wrapper.setState({showPreviewModal: true});
wrapper.instance().showPreviewModal();
expect(wrapper.state('showPreviewModal')).toEqual(false);
});
test('should match dimensions on computeImageDimensions', () => {
const fileInfo = {
id: 'file_info_id',
post_id: 'post_id',
name: 'name',
extension: 'jpg',
has_preview_image: true,
width: 350,
height: 200,
};
const props = {...baseProps, fileInfo};
const wrapper = shallow(
<SingleImageView {...props}/>
);
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 200, previewWidth: 350});
wrapper.setState({viewPortWidth: 100});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 57.14285714285714, previewWidth: 100});
wrapper.setState({viewPortWidth: 500});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 200, previewWidth: 350});
fileInfo.height = 600;
wrapper.setProps({fileInfo});
wrapper.setState({viewPortWidth: 500});
expect(wrapper.instance().computeImageDimensions()).toEqual({previewHeight: 350, previewWidth: 204.16666666666669});
});
test('should call BrowserStore.setGlobalItem on toggleEmbedVisibility', () => {
const wrapper = shallow(
<SingleImageView {...baseProps}/>
);
wrapper.instance().toggleEmbedVisibility();
expect(BrowserStore.setGlobalItem).toHaveBeenCalledTimes(1);
expect(BrowserStore.setGlobalItem).toBeCalledWith('isVisible_post_id', false);
});
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment