search

imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.62k stars 156 forks source link

mermaid 增加缩放按键/滚轮 #644

Closed bintheext closed 2 months ago

bintheext commented 2 months ago

一个很棒的想法

mermaid 渲染的图片，我没有发现关于缩放的说明，在图片特别复杂、区域又特别小的情况下，渲染出来的图片很难看清，如果可以，增加一个缩放按键功能，会是个实用的提升。 image 就例如这幅图，基本很难看清

imzbf commented 2 months ago

这个需要找时间尝试一下，不确定一定能很好实现

bintheext commented 2 months ago

这个需要找时间尝试一下，不确定一定能很好实现 类似这样的实现 https://mermaid.live/edit#pako:eNptkT1vgzAQhv-Kc2sAOYD58JCqUoemUqduFYsFB1gCO3VstRTx32ug2eLp7HueV_LdDLVuEDjc8MuhqvFFis6IsVLEn-dB1hiez8c33StOXnEYNFnrgPT6mwiDZNLu6SG8Y7VQK0J6FIaM-I-uvdCj4eb4YLnbAblsxkZ77fAYv5AWcSCdQWEPEMCIZhSy8b-YV6EC2-OIFXBfNtgKN9gKKrV4VDirPyZVA7fGYQBGu64H3orh5m_u2gh7H8EduQoFfIYf4HFCozIu45yxU5yVLAlg8q80jQqWZwlLy4KmWVEsAfxq7QNolNM0oZTlZVbEeXZiW9zn1tzTsZFWm_d9CbVWrexg-QMhH3yC

github也有优秀的按键；但是最合理是滚轮缩放 https://github.com/mermaid-js/mermaid/issues/1860

image

imzbf commented 2 months ago

优秀的示例确实可以参考，单独拎出来是很好实现的，只是混合在markdown中，就不太一样了

bintheext commented 2 months ago

优秀的示例确实可以参考，单独拎出来是很好实现的，只是混合在markdown中，就不太一样了

emm，应该是可以在preview里面实现，隔离开markdown

imzbf commented 2 months ago

这个意思是只是单独的mermaid模块的话，可以采用组件化的思维封装一个缩放查看的功能。

可是这个编辑器的编译过程虽然有采用模块编译的方式，但是这种方式无法和各大前端框架的组件关联起来，这样就不得不让我们去对页面上已存在的内容做一些改变，比如本来没有的放大、缩小以及调整位置的按钮，我们就得采用原生方式把这些按钮添加进去，然后再考虑绑定事件，改变内容的位置等。

理论上是可以实现的，只是看要多久，要是有现成的，肯定就捡现成的用了

bintheext commented 2 months ago

或者说，为了降低难度和不影响现有布局，不增加按键；可以针对document.querySelectorAll('p.md-editor-mermaid') 这个标签的元素，增加滚轮缩放的功能

imzbf commented 2 months ago

比起使用滚轮和拖拽的话，按钮技术成本好像又更小一些，考虑在移动端的时候

imzbf commented 2 months ago

不过这种方式可以的话，倒是可以考虑直接导出一个util

bintheext commented 2 months ago

不过这种方式可以的话，倒是可以考虑直接导出一个util

看技术难度吧，如果太复杂的话，就没必要了，由用户个人实现就行

bintheext commented 2 months ago

比起使用滚轮和拖拽的话，按钮技术成本好像又更小一些，考虑在移动端的时候

移动端可以像图片一样，点击后悬浮框，支持双指缩放

imzbf commented 2 months ago

已在beta版本更新

bintheext commented 2 months ago

已在beta版本更新

功能实现得很优秀，有点小问题，就是缩放好像不是以鼠标位置为中心展开的

https://github.com/user-attachments/assets/b9f9b408-d0e7-4c34-81e7-a6f1b67a4a6d

imzbf commented 2 months ago

这个我也发现了，比较棘手，现在还没有解决方案，先beta着

imzbf commented 2 months ago

在4.19.2中已发布

bintheext commented 2 months ago

在4.19.2中已发布

好的，刚刚更新了，很棒👍🏻