読者です 読者をやめる 読者になる 読者になる

2017/02/26

ことはじめ。

ブログはじめました。 プログラミングの日記みたいになりそうです。

今日は、markdownでmermaidなおはなし。 mermaidはmarkdown的な記法で、図が描けるとても便利なライブラリなのだけど、キーの押し下げごとにレンダリングするにはちょっと重かった。

なので、適当に時間差でレンダリングさせるようにしたのだけど、当然レイアウトが上下するし、微妙である。 やっぱり500msecごとくらいに、全体を再レンダリングするのが妥当なのかな。

レンダラーは下のような実装にしてます。

//タイマーID格納用
var timer_mermaid = 0;

//mermaid走らせるだけの関数
var refresh_mermaid = function(){
    $(".mermaid").show();
    mermaid.init();
};

editor.on('change',function(){
    //CodeMirrorの中身をtextareaに展開
    editor.save();
    //エディタの中身をmarkedでパース
    marked_text =  marked($('#editor-div').val());
    //表示エリアに展開
    $("#preview_panel").html(marked_text);
    //mermaid.init()を充てるのを1秒後に設定
    clearTimeout(timer_mermaid);
    timer_mermaid = setTimeout(refresh_mermaid,1000);
});

react.jsみたいにrender結果を仮想DOMとかに入れるのがいいのかな。 少し知恵を絞って、SVGレンダリング回数を減らせるようなコードにしたい。

課題

  • Electron側のコードを書く