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

Jump to bottom

全屏后编辑区和预览区中间的分隔条拖拽点错位 #461

Closed
veitool opened this issue Jun 2, 2023 · 17 comments
Closed

全屏后编辑区和预览区中间的分隔条拖拽点错位 #461

veitool opened this issue Jun 2, 2023 · 17 comments
Labels
🐞bug Something isn't working

Comments

@veitool
Copy link

veitool commented Jun 2, 2023 •
edited
Loading

当开启预览区时，中间的分隔条拖拽触发点正常。但是全屏后，中间的分隔条拖拽点会有错位（分隔条位置并不能拖拽）
版本：v0.8.20
@RSS1102
Copy link
Collaborator

RSS1102 commented Jun 2, 2023

https://tencent.github.io/cherry-markdown/examples/multiple.html
你指的是这条线吗？没有发现错位哎？
image

@veitool
Copy link
Author

veitool commented Jun 2, 2023 •
edited
Loading

@RSS1102 1

@veitool
Copy link
Author

veitool commented Jun 2, 2023 •
edited
Loading

https://tencent.github.io/cherry-markdown/examples/multiple.html

刚测试了下你们官方演示，似乎全屏后，分隔栏好像不能拖动改变区域大小

@RSS1102
Copy link
Collaborator

RSS1102 commented Jun 2, 2023

您看下这个呢？https://tencent.github.io/cherry-markdown/examples/index.html
好像也没有发现出问题？。。
image

@veitool
Copy link
Author

veitool commented Jun 2, 2023

您看下这个呢？https://tencent.github.io/cherry-markdown/examples/index.html 好像也没有发现出问题？。。 image

刚我发GIF图的时候，忘点击回复了，您看下我上面发的gif动画图应该就明白了。您刚发的这个演示是全屏和普通屏一样的尺寸，所以不会出现错位。

@RSS1102
Copy link
Collaborator

RSS1102 commented Jun 2, 2023

您看下这个呢？https://tencent.github.io/cherry-markdown/examples/index.html 好像也没有发现出问题？。。 image

刚我发GIF图的时候，忘点击回复了，您看下我上面发的gif动画图应该就明白了。您刚发的这个演示是全屏和普通屏一样的尺寸，所以不会出现错位。

稍等 我改一下试试。

@veitool veitool changed the title 全屏后编辑区和预览区中间的分割条拖拽点错位 全屏后编辑区和预览区中间的分隔条拖拽点错位 Jun 2, 2023
@RSS1102
Copy link
Collaborator

RSS1102 commented Jun 2, 2023

复现问题了：
当进行全屏之后，分割线被移动，但是选中点依然在之前的那个位置。会尽快修复一下的，谢谢。

@veitool
Copy link
Author

veitool commented Jun 2, 2023

复现问题了： 当进行全屏之后，分割线被移动，但是选中点依然在之前的那个位置。会尽快修复一下的，谢谢。

好的。

@Victor-kawai
Copy link

复现问题了： 当进行全屏之后，分割线被移动，但是选中点依然在之前的那个位置。会尽快修复一下的，谢谢。

请问分割线的移动是不是只被mouseup事件所触发？他这里面的调用逻辑可以向您询问一下吗？

@sunsonliu
Copy link
Collaborator

sunsonliu commented Aug 1, 2023 •
edited
Loading

请问分割线的移动是不是只被mouseup事件所触发？他这里面的调用逻辑可以向您询问一下吗？

可以通过以下方式修改编辑区和预览区的宽度哈：cherry.previewer.setRealLayout('60%', '40%')，其中60%是左侧编辑区的宽度占比，40%是右侧预览区的宽度占比

@ilxqx
Copy link

ilxqx commented Aug 6, 2023

我也遇到同样的问题，我的问题是光标错位，中间分割线可拖拽的位置也错位。我已经排查出了原因，原因就是编辑器组件整体不支持resize事件的响应
举一个场景：
在Dialog框组件中使用编辑器，那么Dialog框在显示完成后，编辑器组件中的光标就错位了，这个Dialog展示的时候有Zoom动画，究其原因就是Zoom动画还没结束，编辑器可能已经渲染完毕了，在渲染的过程中肯定读取了相关Dom的尺寸属性，但是在动画过程中，Dom一直是从小到大一直变化的，也就是说编辑器渲染的过程中读取到了动画某个时间点Dom的尺寸信息，这个尺寸肯定是不对的（被缩小的），故在动画结束后也即Dialog框完全显示后编辑器光标错位，中间可拓展分割线的可拖拽点错位

解决办法，我觉得编辑器内部应该监听尺寸变化，从而重新获取相关Dom的尺寸进而重新渲染编辑器相关内容

image

@ilxqx
Copy link

ilxqx commented Aug 6, 2023

切换全屏会出现这个错误，应该是编辑器内部的错误：
image

@sunsonliu
Copy link
Collaborator

收到，我们定位下再增加下对resize事件的监听

@sunsonliu sunsonliu added the 🐞bug Something isn't working label Aug 14, 2023
@sunsonliu
Copy link
Collaborator

应该修复了，发布后可以再试试

@ccnnde
Copy link

ccnnde commented Feb 28, 2024

@sunsonliu 你好，请问这个修复大概啥时候发布啊，我看最新的 0.8.38 版本没有包含这个

@sunsonliu
Copy link
Collaborator

sunsonliu commented Feb 28, 2024 •
edited
Loading

修复全屏时编辑区和预览区中间分割线拖拽位置错位的问题

image

哦哦，当时临近春节假期，为了避免发版后引发问题导致无人快速跟进，所以我们积攒了一批提交没有发布，现在大家都回来正常上班了，我们争取尽快发版本哈

@ccnnde
Copy link

ccnnde commented Feb 28, 2024

好的，谢谢 😄

jiawei686 added a commit that referenced this issue Feb 29, 2024
@jiawei686
Merge branch 'dev'
d5f8b76 
* dev:
  chore(release): v0.8.39
  feat(client): add file right-click menu to `*.md` and directly read file content (#717)
  fix: #461 修复全屏时编辑区和预览区中间分割线拖拽位置错位的问题
  fix: #681 修复粘贴图片会出现两张图片的情况
  fix: #681 修复粘贴图片会出现两张图片的情况
  fix: #710 修复粘贴多个文件时只能上传一个文件的问题
  feat: #707 提供滚动到对应锚点的api
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐞bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@sunsonliu @ilxqx @ccnnde @veitool @RSS1102 @Victor-kawai