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側のコードを書く