[suggestion] echarts图形无法响应鼠标点击事件交互 about typora_plugin HOT 4 CLOSED

@BrazilAmando

你好，1.4.2 版本已经完成此需求。

我为每个自定义图表（echarts、kanban、markmap）添加了一个 【INTERACTIVE_MODE】 配置。处于交互模式下，将无法编辑。

退出交互模式有两种方法：

1. 点击 edit icon（默认开启）
2. ctrl+click（默认关闭）

分别对应两个配置【CLICK_EDIT_BUTTON_TO_EXIT_INTERACTIVE_MODE】【CTRL_CLICK_TO_EXIST_INTERACTIVE_MODE】

注意：如果你使用了自定义图表（kanban、markmap、echarts），那么这两个配置请至少一个置为true，否则你将不能退出交互模式，修改fence（当然，你可以通过进入源码模式修改）

from typora_plugin.

尝试了新版，效果杠杠滴。新的需求又来啦，有时候想使得echarts图表全屏，一个方法是在toolbox中添加一个按钮，添加点击事件，使得全屏。在HTML中能知道DOM元素比较好设置，请教一下在typora中如何获取echarts图表的DOM元素呢？以及如何获取echarts图表示例在全屏后执行resize()呢？感谢！

from typora_plugin.

@BrazilAmando

1. 获取 echarts 的 dom 元素：myChart._dom
2. 获取预览图表的div： myChart._dom.closest(".md-diagram-panel-preview")
3. 获取全屏div：document.querySelector("content")

所以 resize 的代码类似于

// 我没试过，可能还要修改previewer的其他CSS
myChart.on('click', params => {
    // 获取全屏的大小
    const {width, left, top, height} = document.querySelector("content").getBoundingClientRect();
    // 获取previewer
    const previewer = myChart._dom.closest(".md-diagram-panel-preview");
    previewer.style.width = width + "px";
    previewer.style.left = left + "px";
    previewer.style.top = top + "px";
    previewer.style.height = height + "px";
    myChart.resize();
});

你可以参考一下 markmap 的全屏功能

from typora_plugin.

@BrazilAmando

有两个 echarts 相关的 issue，不好管理，关闭这个。如有问题，请移步到 这个issue 继续讨论

from typora_plugin.