blockdiag 設計メモ

ノードサイズの自動調整について

ノードの大きさに関わる要素

spreadsheet

スプレッドシート。図を配置する際のマス目をあらわす。 セル(cells)とスパン(spans)から構成され、 ノードはセル上に、ノードはスパンにそれぞれ配置される。 方眼紙と異なり、各セル、スパンの大きさは行もしくは列ごとに変更できる。 (Excel のセルの大きさ調整と同等のものとイメージしてよい)

cell-size

スプレッドシート上の各セルの大きさをあらわす。 前述のとおり、spreadsheet の行および列は伸縮可能であるため、 あるセルの幅 x は同じ行のセル x_n と等しい。 同様にセルの高さ y は同じ列のセル y_n と等しい。

node-size

ノードの大きさをあらわす。 ノードはセルに内包されるため、node-size は必ず cell-size より小さい領域となる。

shape-size

ノードとして描画される領域をあらわす (ただしテキスト描画領域は含まない)。 ノードの形状によって描画結果がかわる。 ノード領域内に描画が行われるため、shape-size は必ず node-size より小さい領域となる。

icon-size

アイコンが描画される領域をあらわす。 一部のノードではアイコンが描画されないため、icon-size は値をもたない。 基本的に ノードの領域内に描画が行われるため、icon-size は 今のところ node-size より小さい領域となる。

label-size

ノード内に描画されるラベル領域の大きさをあらわす。 ノード領域内に描画が行われるため、label-size は必ず node-size より小さい領域となる。 なお、ラベルは必ずしも図形内に描画されるとは限らないため、 shape-size と異なる領域を指す可能性がある。 (例: minidiamond, beginpoint など。図形の外側にラベルが配置される) また、アイコンと描画領域が重なることがあるためアイコンの有無によって label-size の値は変化する。

connectors

ノードにおけるエッジ接続用の端点をあらわす。 上下左右 (それぞれ中央部)の 4箇所がコネクタとなる (現バージョンでは他の箇所からのエッジに対応しない)。 ノードの形状にあわせてコネクタが設定されることが多いので、 shape-size と同じ値を取ることが多いが、形状によっては shape-size の内側が端点となる可能性がある。 (現時点では存在しないが、臼形、台形などの内側に凹んでいる図形などが考えられる)

colwidth, colheight

ノードの大きさを指定する方法のひとつ。 複数のセルにまたがってノードを配置することができる。

colspan, rowspan (仮)

ノードの大きさを指定する方法のひとつ。 隣接するセルを空白セルとする。 内部的には複数のセルにまたがってセルを専有する。

基本ルール

  • 以下の順序でスプレッドシートおよびノードの大きさを確定させる

    1. ノードの大きさを仮決めする

      • diagram.node_width, diagram.node_height、node.width, node.height をベースにする

      • ラベルの大きさから label-size, node-size を逆算する

      • node.width, node.height が指定されている場合は高さ、幅を固定とする

    2. スプレッドシートの大きさを仮決めする

      • 各ノードの node-size にあわせて、スプレッドシートの各 cell-size を仮決めする

    3. ノードの大きさを確定する

      • cell-size を元にノードの大きさを確定させる

      • 他のノードより大きくしたい部分、小さくしたい部分がある場合はここでノードの大きさを微調整する

        • 例: diamond のツノ

      • label-size は変更しないこと

    4. スプレッドシートの大きさを確定する

      • 各ノードの node-size にあわせて、スプレッドシートの各 cell-size を確定させる

  • ラベルの大きさにあわせて label-size の調整を行うルール
    • label-size の調整は以下の繰り返しで行う

      • ラベルの描画領域が label-size に入りきらない場合、横幅 を 20% 大きくする

      • ラベルの描画領域が label-size に入りきらない場合、縦幅 を 20% 大きくする

    • label-size が大きくなるにあわせて、node-size の調整を行う

メモ

  • diagram.show_spread_sheet = true みたいなオプションがあるとデバッグしやすい?

  • colwidth, colheight ではなく colwidth, rowheight が正しいのでは or die

    • HTML に合わせるのであれば colspan, rowspan という名称となる

    • ピクセル単位ではないので width, height という名称は望ましくない

    • 右側を nマス開けるための設定(colspan/仮)とどう結びつけるべきか。

  • colwidth = 2, width = 100 と指定されたらどうなるのか?

  • テスト可能にしたい...

  • 以前書いたメモ:

    要検討: NodeShape#__init__() でサイズ計算しているところへの影響

NodeShpae#cellsize2textsize
   セルの大きさからテキストエリアの大きさを計算する
   resize_by_label() から利用する
NodeShpae#cellsize2shapesize
   セルの大きさからシェイプの大きさを計算する
   最終的なセルの大きさ(spreadsheet)を求める歳に利用する