早く先に進みたいのですが、今回も主にブログに貼る都合による修正です。
今までの作りだと実行時に 1つの回路だけしか動かすことができませんでしたが、 上の画像のようにドロップダウンで複数の回路から選択して切り替えられるようにしたい。
そこで、次のようにしました。
- 指定した fodg ファイル内の複数のページをすべて
data.rb
に出力する data.rb
から読み込んだら- まず
$circuits
にセットする $circuits
の情報を使ってドロップダウンを組み立て- 選択肢には LibreOffice Draw のページ名がそのまま表示されるようにする
- 切替時にそこから選んで
$circuit
(これまでのcircuit
に相当)にセットする
- まず
ひさしぶりに libo_draw.rb
を修正。
ページ名はこれで取れますね。
# module LiboDraw # class Page def name @el["draw:name"] end
Circuit#name
も追加して、取得したページ名を回路名としてセットします。
data.rb
に出力する部分。
doc.pages
をすべて Circuit オブジェクトに変換してファイルに出力。
# preprocess.rb circuits = doc.pages.map { |page| Circuit.create( page.name, page.lines, page.rectangles ) } plain = circuits.map { |circuit| circuit.to_plain } puts "$data_json = <<EOB" print JSON.pretty_generate(plain) print "\n" puts "EOB"
data.rb
を読んで復元。
# main.rb $circuits = parse_json($data_json) .map { |plain| Circuit.from_plain(plain) }
ドロップダウンを組み立ててイベントハンドリング。
def init_circuit_list(circuits) get_els(".circuit_list_container")[0].style.display = "block" select_el = get_els(".circuit_list")[0] (0...circuits.size).each { |ci| circuit = $circuits[ci] option_el = Native(`document`).createElement("option") option_el.value = ci.to_s option_el.textContent = "(%d) %s" % [ci + 1, circuit.name] select_el.appendChild(option_el) } select_el.addEventListener( "change", lambda { on_select_circuit() }, false ) end # ... init_circuit_list($circuits) if browser?
ここは %x{...}
で JavaScript を書くのではなく、
せっかくなので Opal の練習をしようと思って
Ruby に寄せるスタイルで書いてみました。
- エディタの文法ハイライトが効いて良い
- Ruby で書けるのは良い。Opal すごい。
- ただ、「今書いているのどっちだっけ?」となる感じも若干ある。 込み入ってくると混乱するかも。
そもそも main.rb
に DOM まわりの記述を書かない方がいいかなという気持ちもあるので、
気になったら後で JavaScript で書き直して分離したりするかもしれません。
というわけで、 data_03.fodg
で試すとこのようになりました。