kairo-gokko (28) 回路の選択



早く先に進みたいのですが、今回も主にブログに貼る都合による修正です。

f:id:sonota88:20200321052209p:plain

今までの作りだと実行時に 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 で試すとこのようになりました。

f:id:sonota88:20200321061253g:plain