Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(image): Fixed issue 2266 (#2266) #2293

Merged
merged 11 commits into from
Aug 5, 2024
Merged

fix(image): Fixed issue 2266 (#2266) #2293

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
93e518d
fix(image): Fixed issue 2266 (#2266)
l123wx Jun 12, 2024
879fb82
wip: refactor image preveiw component
l123wx Jul 25, 2024
232b85f
wip: zoom image with fixed mouse focus position
l123wx Jul 25, 2024
ca44fa2
fix: fixed zoom image with fixed mouse focus position on other rotation
l123wx Jul 26, 2024
0fb23be
test(image): change the test: mouse drag to verify translate
l123wx Jul 29, 2024
9afcd1a
refactor(preview-image-foundation): Increased readability of the init…
l123wx Jul 29, 2024
00ac20d
chore(package.json): remove packageManager
l123wx Jul 30, 2024
5e9dbb7
fix: fixed the `translate` CSS property can not be used in low versio…
l123wx Aug 1, 2024
5067d3f
chore(image): remove useless code
l123wx Aug 5, 2024
b8147bb
refactor(image): use calcBoundingRectSize() instead of document.getBo…
l123wx Aug 5, 2024
ee5425b
fix: remove useless packagemanager & simplify logic
YyumeiZhang Aug 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 9 additions & 35 deletions cypress/e2e/image.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,44 +88,18 @@ describe('image', () => {
cy.get('.semi-image-preview-footer').children('.semi-icon-plus').click();
cy.get('.semi-image-preview-footer').children('.semi-icon-plus').click();
cy.wait(200);
// 再经过两次点击放大后，预期 zoom = 1.2， 宽1728px， 高960px， top-80px， left-144px
// 再经过两次点击放大后，预期 zoom = 1.2， 宽1728px， 高960px， translate.x = 0 translate.y = 0
cy.get('.semi-image-preview-image-img').should('have.css', 'width').and('eq', '1728px');
cy.get('.semi-image-preview-image-img').should('have.css', 'height').and('eq', '960px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'top').and('eq', '-80px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'left').and('eq', '-144px');

// // 测试拖拽，拖拽长度为分别向右，向下拖拽20px
// cy.get('.semi-image-preview-image-img').trigger('mousedown', { clientX: 720, clientY: 400 });
// cy.wait(200);
// cy.get('.semi-image-preview-image-img').trigger('mousemove', { clientX: 740, clientY: 420 }).trigger('mouseup');
// // 预期经过拖拽后，宽高保持不变（宽1728px， 高960px）， top和left定位增加20px（top-60px， left-124px）
// cy.get('.semi-image-preview-image-img').should('have.css', 'width').and('eq', '1728px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'height').and('eq', '960px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'top').and('eq', '-60px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'left').and('eq', '-124px');
// // 测试拖拽边界： 内部逻辑是拖拽过程中，拖拽极限是图片边和容器边重合
// // 测试往右下方拖动极限
// cy.get('.semi-image-preview-image-img').trigger('mousedown', { clientX: 720, clientY: 400 });
// cy.wait(200);
// cy.get('.semi-image-preview-image-img').trigger('mousemove', { clientX: 844, clientY: 460 }).trigger('mouseup');
// // 鼠标移动距离为向右60px，向下130px，则此刻的top，left应该都是0
// cy.get('.semi-image-preview-image-img').should('have.css', 'top').and('eq', '0px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'left').and('eq', '0px');
// // 当上下都在图片边缘时候，再次向右下方拖动，因为已经到拖动极限，此时无法再次拖动，top，left值不会再变化
// cy.get('.semi-image-preview-image-img').trigger('mousedown', { clientX: 720, clientY: 400 });
// cy.wait(200);
// cy.get('.semi-image-preview-image-img').trigger('mousemove', { clientX: 730, clientY: 430 }).trigger('mouseup');
// cy.get('.semi-image-preview-image-img').should('have.css', 'top').and('eq', '0px');
// cy.get('.semi-image-preview-image-img').should('have.css', 'left').and('eq', '0px');

// zoom = 1.2， 宽1728px， 高960px， top-80px， left-144px, 鼠标移动 x * y = 200 * 100,
// 图片拖动策略是图片只能够拖动到图片边缘和容器边缘重合，因此预期top和left都为 0px

// zoom = 1.2， 宽1728px， 高960px， translate.x = 0 translate.y = 0, 鼠标移动 x * y = 200 * 100,
// (1728 - 1440) / 2 = 144 | (960 - 800) / 2 = 80
// 图片拖动策略是图片只能够拖动到图片边缘和容器边缘重合，因此预期 translate.y 为 144，translate.x 为 80
cy.get('.semi-image-preview-image-img').trigger('mousedown', { clientX: 0, clientY: 0 });
cy.wait(200);
cy.get('.semi-image-preview-image-img').trigger('mousemove', { clientX: 200, clientY: 100, buttons: 1 });
cy.wait(200);
cy.get('.semi-image-preview-image-img').should('have.css', 'top').and('eq', '0px');
cy.get('.semi-image-preview-image-img').should('have.css', 'left').and('eq', '0px');
cy.get('.semi-image-preview-image-img').should('have.attr', 'style').should('contain', 'translate(144px, 80px)');
});

// 测试鼠标滚动滚轮放大，缩小图片
Expand All @@ -146,7 +120,7 @@ describe('image', () => {
cy.get('.semi-image-preview-image-img').should('have.css', 'height').and('eq', '800px');
// 验证滚轮向下滚动缩小图片
cy.get('.semi-image-preview-image-img').trigger('mouseover', { clientX: 720, clientY: 400 });
// 触发 wheel 事件， 参数 deltaY 表示纵向滚动量， 验证放大
// 触发 wheel 事件， 参数 deltaY 表示纵向滚动量， 验证缩小
cy.get('.semi-image-preview-image-img').trigger('wheel', { deltaY: 10, bubbles: true });
// 单次滚动向下滚动滚轮，zoom = zoom - zoomStep = 0.9, width = '1296px'，height = '720px'
cy.get('.semi-image-preview-image-img').should('have.css', 'width').and('eq', '1296px');
Expand Down Expand Up @@ -369,9 +343,9 @@ describe('image', () => {
// 测试点击向右旋转，向左旋转按键
cy.get('.semi-icon-rotate').eq(0).click();
cy.wait(500);
cy.get('.semi-image-preview-image-img').should('have.attr', 'style').should('contain', 'transform: rotate(90deg)');
cy.get('.semi-image-preview-image-img').should('have.attr', 'style').should('contain', 'rotate(90deg)');
cy.get('.semi-icon-rotate').eq(1).click();
cy.get('.semi-image-preview-image-img').should('have.attr', 'style').should('contain', 'transform: rotate(0deg)');
cy.get('.semi-image-preview-image-img').should('have.attr', 'style').should('contain', 'rotate(0deg)');

// 测试下载按键
cy.get('.semi-icon-download').click();
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,5 +239,6 @@
"stylelint"
]
},
"license": "MIT"
}
"license": "MIT",
"packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
YyumeiZhang marked this conversation as resolved.
Show resolved Hide resolved
}
7 changes: 6 additions & 1 deletion packages/semi-foundation/image/image.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ $module: #{$prefix}-image;
align-items: center;
padding: $spacing-image_preview_header-paddingY $spacing-image_preview_header-paddingX;
z-index: $z-image_preview_header;
pointer-events: none;
YyumeiZhang marked this conversation as resolved.
Show resolved Hide resolved

&-title {
flex: 1;
Expand All @@ -113,6 +114,7 @@ $module: #{$prefix}-image;
width: $width-image_preview_header_close;
height: $height-image_preview_header_close;
border-radius: 50%;
pointer-events: auto;

&:hover {
background-color: $color-image_header_close-bg;
Expand Down Expand Up @@ -192,11 +194,14 @@ $module: #{$prefix}-image;
&-image {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;

&-img {
position: absolute;
transform: scale3d($transform_scale3d-image_preview_image_img) $transform_rotate-image_preview_image_img;
transition: transform $transition_duration-image_preview_image_img $transition_delay-image_preview_image_img;
// transition: transform $transition_duration-image_preview_image_img $transition_delay-image_preview_image_img;
z-index: 0;
user-select: none;
}
Expand Down
Loading
Loading