nehan.jsでは、組版エンジンを扱う入り口として、主にPageStreamというものを提供しています。
ただしこれは柔軟に扱える反面、はじめての利用者にとっては直感的じゃなかったかもしれませんでした。
そこで、nehan.jsのversion5.0.3からは、より扱いやすい抽象化としてPagedElementというものが利用できるようになりました。
Nehan.createPagedElementで作成できるのですが、イメージとしてはdocument.createElementに近いものです。
PagedElementはDOM elementを内包しますが、通常のDOMと違って内部に複数ページを持っていて、それらを切り替えられる点が異なります。
PagedElementの作成
Nehan.createPagedElementで作成します。
var paged_element = Nehan.createPagedElement();
スタイルの設定
続いて、ページのサイズをsetStyleでセットします。
setStyleの第１引数は、セレクターです。
"body"がページのルートスタイルになります。
paged_element.setStyle("body", {
"flow":"tb-rl",
"width":640,
"height":480,
"font-size":16
});
cssのプロパティとして、camel caseが使えないことに注意してください（つまりfont-sizeをfontSizeと設定することはできない）。
なおその他の要素のスタイルも、同じようにセットできます。
paged_element.setStyle(".my-header h1", {
"font-size":"3em"
});
ページ内容をセット
ページの内容はsetContentでセットします。
setContentした直後に組版が始まるので、上述のsetStyleを先に済ませておく必要があることに注意してください。
paged_element.setContent("<h1>hello, nehan.js</h1>");
組版結果のDOMを取得
paged_elementによって組版されるDOMは、getElementで取得できます。
var element = paged_element.getElement();
document.getElementById("result").appendChild(element);
次ページ、前ページの描画
次ページの描画はsetNextPageで、前ページの描画はsetPrevPageです。
document.getElementById("next-button").onclick = function(){
paged_element.setNextPage();
};
document.getElementById("prev-button").onclick = function(){
paged_element.setPrevPage();
};
組版の非同期コールバック
ページを組版している最中の状況（パーセントみたいなもの）が欲しい場合は、setContentの第２引数にコールバックを指定します。
onProgressとonCompleteが有効です。
paged_element.setContent("適当な内容", {
onProgress : function(tree){
console.log("%d page(%d percent) is done", tree.pageNo, tree.percent);
},
onComplete : function(time){
console.log("finish! %f time", time);
}
});
ページ数、アウトラインの取得
ページ数やアウトラインは、上記のonCompleteのタイミングで確定します。
なので次のように取得すると良いでしょう。
paged_element.setContent("<h1>適当な内容</h1>", {
onComplete : function(time){
console.log("page_count = %d", paged_element.getPageCount());
console.log("outline element = %o", paged_element.engine.createOutlineElement());
}
});
createOutlineElementについては、paged_element.engineという内部エンジンを経由して呼んでいる点に注意してください。
またcreateOutlineElementは、引数にコールバックオブジェクトを与えることができます。
それによって、アウトラインをクリックした時の挙動なども設定できるのですが、詳しくはnehan.jsのsection-tree-converterを参照してください。
