Skip to content

Commit

Permalink
fix(image): Fixed issue 2266 (#2266) (#2293)
Browse files Browse the repository at this point in the history 
* fix(image): Fixed issue 2266 (#2266)

* wip: refactor image preveiw component

* wip: zoom image with fixed mouse focus position

* fix: fixed zoom image with fixed mouse focus position on other rotation

* test(image): change the test: mouse drag to verify translate

* refactor(preview-image-foundation): Increased readability of the initialize image part of the logic

* chore(package.json): remove packageManager

* fix: fixed the `translate` CSS property can not be used in low version browser

* chore(image): remove useless code

* refactor(image): use calcBoundingRectSize() instead of document.getBoundingClientRect()

* fix: remove useless packagemanager & simplify logic

---------

Co-authored-by: zhangyumei.0319 <[email protected]>
  • Loading branch information
@l123wx @YyumeiZhang
l123wx and YyumeiZhang authored Aug 5, 2024
1 parent bf049be commit 2a5ead2
Show file tree
Hide file tree
Showing 8 changed files with 293 additions and 225 deletions.
44 changes: 9 additions & 35 deletions cypress/e2e/image.spec.js
View file
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
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,4 +241,4 @@
]
},
"license": "MIT"
}
}
7 changes: 6 additions & 1 deletion packages/semi-foundation/image/image.scss
View file
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;

&-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

0 comments on commit 2a5ead2

Please sign in to comment.