popweb，基于Web技术的弹窗框架

Emacs-general
15

@manateelazycat 我在尝试在popweb框架上移植fuxialexander的公式预览功能。我读了一下popweb的代码，发现似乎暂时没有单独发送js代码到页面的API。能不能添加一下？

16

有啊，你把你要做的事情先告诉我，我得先理解

1 个赞
17

我要用katex.js渲染光标下面的公式。每次移动光标之后会检测光标处是否有公式，如果有就立刻调用katex.js的函数发送到网页去渲染。网页窗口跟随光标变换位置。

如果每次都打开一个新网页会比较耗时，体验不好，体现不出katex.js的实时渲染优势。另外，根据eaf上面的经验，每次都开一个新网页往往还会伴随闪烁。

18

或者你告诉我latex文本demo，怎么用katex.js渲染，我晚上看看能否✍一个插件出来，同时因为我知道怎么改popweb的架构，所以比这种盲猜要快很多

19

他要的是这个页面上的效果

20

@manateelazycat

我要的效果其实就是 fuxialexander/emacs-webkit-katex-render 实现的效果。可以看视频。

emacs-webkit-katex-render里面关于渲染的代码都是可以用的。fuxialexander在渲染方面 已经做得很不错了。 可以直接使用的代码包括：

  • index.html
  • webkit-katex-render.el
    • Variables
      • webkit-katex-render–org-math-preprocess-function
      • webkit-katex-render–previous-math
    • Functions
      • webkit-katex-render–render
      • webkit-katex-render–tex-math-preprocess
      • webkit-katex-render–tex-math-at-point
      • webkit-katex-render–org-math-preprocess
      • webkit-katex-render–org-math-at-point
      • webkit-katex-render–math-at-point
      • webkit-katex-render-show
      • webkit-katex-render-update

webkit-katex-render–render负责实际渲染公式，渲染的时候直接调用index.html里面的js函数try_render(math)就可以了。webkit-katex-render–render需要重新实现。下面是我在eaf适配时实现的。

  (eaf-call-async "call_function_with_args" (katex-viewer--get-buffer-id) "katex_render" (url-hexify-string math)))

这里katex_rende是buffer.py里面的函数。

def katex_render(self, math):
    math_js = "try_render('{0}')".format(math)
    self.buffer_widget.eval_js(math_js)

webkit-katex-render-update是入口，用 post-command-hook 保证实时更新。

(add-hook 'post-command-hook #'webkit-katex-render-update nil t)

webkit-katex-render-update需要调整。下面是我在eaf上面适配的时候做过精简的代码。

(defun webkit-katex-render-update ()
  (let* ((math-at-point (webkit-katex-render--math-at-point))
         (pos (car math-at-point))
         (math (cdr math-at-point)))
    (if math
        (if (not (eq math webkit-katex-render--previous-math))
            (progn
              (webkit-katex-render-show math-at-point)
              (setq webkit-katex-render--previous-math math))))))

至于公式文本，倒没什么特别的。

\(x^2+y^2=z^\)
\[x^2+y^2=z^\]
$x^2+y^2$
\begin{equation}
x^2+y^2=z^2
\end{equation}

分别放在org文件和tex文件里面，只要光标在公式里面能够正确渲染就没问题了。

21

还是有点差异的。katex渲染速度要快一点，可以实时渲染，几乎感觉不到延迟。

其实mathjax的这种预览效果eaf-org-previewer已经用上了。eaf-markdown-previewer的渲 染速度也很快，就是要等到保存才生效。

22

看起来很不错啊。就是还需要PyQt就有点纠结了

23

有更轻量级的跨平台GUI库吗？

24

浏览器，系统必备，用html创建UI，用js创建交互，极强的安全性，强大的调试功能，小学生都能轻松掌握，生态极其强大。

25

我能不能理解你的需求，就是给 popweb 加一个接口，弹出窗口的时候：

  1. 能够加载本地 index.html 文件
  2. 能够执行任意 javascript code

而不是加载一个 URL ？

26

不用纠结吧，xwidget 那条路一开始就是方向性错误，而且这个 popweb 不像 EAF 对 xparent 技术有要求，只要安装 PyQt 就可以跨平台了。

PyQt本身就是一个库， Emacs那么多插件都装了，还差一个 PyQt ?

2 个赞
27

基本上就是这个意思。网页加载之后可以不断通过js来更新页面内容。当然，窗口的位置和大小也要能够不断调整。

其实eaf除了不能调整位置，都满足需要。

28

其实现在 popweb 是有 js-code 接口的，你看 bing和yoduao 那两个文件就知道了，只是需要调整两个地方：

  1. url 那个参数可以接受文件：是url就改变地址，不是就加载文件
  2. js-code 那个参数在页面加载完毕后执行一次，现在是方便隐藏网页内容，每次加载进度的时候都会执行一次 js-code

位置 popweb 已经处理了，大小的话你期望怎么控制？是传递大小参数（已支持），还是窗口根据网页大小来调整？

29

用 posframe 显示 eaf 的 buffer 就可以调整位置和大小了

30

Js那个接口我看见了的，现在似乎不能单独像eaf那样在启动窗口之后再调用，每次都要通过pop-start调？

位置大小也是一样，有是有了。不过怎么在pop-start启动之后再次调整位置？

我的需求主要是，窗口启动之后要一直存在（可以隐藏），要能够通过js或者elisp控制和调整。

现在pop-web的主要场景是每次调用重新开一个窗口，这对预览来说就太慢了。

31

这个思路倒没试过。以前只是发现两者不能同时出现在同一个位置，会互相遮挡。 :+1:

32

EAF是同时支持多个frame的

33

现在也只有一个窗口，只是没有那么灵活的控制接口

34

我再去试试。