👏

gitbucket-drawio-plugin を動くようにしたい

に公開
JavaScript
Scala
draw.io
GitBucket
tech

まだ、書きかけですが、公開します。

筆者の環境

環境 バージョン
Windows 11
GitBucket 4.43.0

gitbucket-drawio-plugin-0.1.0 を導入してみたけど…

gitbucket-drawio-plugin

最近、draw.io で作成したファイルで試してみたが、うまく表示されず。

開発者ツールでコンソールを見てみると以下のようなエラーが。

Object { message: "Not a diagram file", toString: toString() }
viewer.min.js:4083:236

ということで修正に挑戦

Scala 使ったことないけど…。

viewer.min.js を upstream の最新版に更新

src\main\resources\drawio\assets\viewer.min.js を upstream の drawio/src/main/webapp/js/viewer.min.js のものに入れ替えた。

修正の方向性を調査

修正に当たっては、Viewing a .drawio file in an HTML document · jgraph/drawio · Discussion #3430 を参考にした。

上記ページによると

<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile userAgent=\&quot;Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36\&quot; version=\&quot;8.6.5\&quot; editor=\&quot;www.draw.io\&quot;&gt;&lt;diagram id=\&quot;8d8df455-cfe5-311a-13e6-259b44eb4504\&quot; name=\&quot;Page-1\&quot;&gt;jZM7c4MwDIB/jfdgU0rX0LQd2omhswsK9sVgzjEB+usrsM3jcrkrC9InybIeJiyrh3fDW/GlS1CEHsqBsFdCaURZir+JjJ5EcexIZWTp2Qpy+QseHjztZAnXnaPVWlnZ7mGhmwYKu2PcGN3v3c5a7bO2vII7kBdc3dNvWVrhaEqfV/4BshIhc5S8OMsPLy6V0V3j8xHKzvPnzDUPZ/lCr4KXut8gdiIsM1pbJ9VDBmpqbmibi3t7YF3ubaCx/wmgLuDGVQfhxonC0GNrAMVqEgMqcNCBfcINDMcyM0aOqWnABi9MtnXc4N2Rc/V2DB3vhbSQt7yY9B7XCp2ErRVq0eKPKS0MD0uNlgbiZoKuwZoRXULAk+95WMrY6/064SjMRWymm3jG/VJVy9FrY1HwvQ3qOsPZtnkp7PQH&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}"></div>

のようなタグが存在する状態で

window.GraphViewer.processElements();

を呼び出すとSVG画像として表示できるようである。

先ほどのタグの data-mxgraph 属性には、JSON を文字列化したものが入っているようである。

その JSON の最後の属性には、draw.io の XML データが入っているようである。

まずは XML データをエスケープしてクライアント渡すように修正

src\main\scala\DrawioRenderer.scala の toHtml 関数を以下のように修正した。

  def toHtml(content: String)(implicit context: Context): String = {
    val path = context.baseUrl
    val data = content.replaceAll("&", "&amp;")
                      .replaceAll("'", "&#x27;")
                      .replaceAll("`", "&#x60;")
                      .replaceAll("\"", "&quot;")
                      .replaceAll("<", "&lt;")
                      .replaceAll(">", "&gt;")

    s"""
       |<link rel="stylesheet" type="text/css" href="$path/plugin-assets/drawio/drawio-renderer.css">
       |<script src="$path/plugin-assets/drawio/viewer.min.js"></script>
       |<script src="$path/plugin-assets/drawio/drawio-renderer.js"></script>
       |<div class="mxgraph" data-diagram-data="$data"></div>
       |""".stripMargin

  }

これでクライアント側に以下のようなタグが渡されるようになった。

<div class="mxgraph" data-diagram-data="ここに XML をエスケープした内容"></div>

渡されたデータを JavaScript で操作する

src\main\resources\drawio\assets\drawio-renderer.js を以下のように修正した。

// from https://github.com/jgraph/drawio/discussions/3430
function createMxGraphData(xml, idx = new Date().getTime()) {
    return {
        editable: false,
        highlight: "#0000ff",
        nav: false,
        toolbar: null,
        edit: null,
        resize: true,
        lightbox: "open",
        xml,
    };
}

window.addEventListener("load", function(){
    div = document.querySelector(".mxgraph") 
    xml = div.getAttribute("data-diagram-data")
    mxGraphData = createMxGraphData(xml); 
    json = JSON.stringify(mxGraphData) 
    div.setAttribute('data-mxgraph', json)
    window.GraphViewer.processElements();
})

createMxGraphData 関数は、修正の参考にしたページから拝借してきた。

window の load イベント内で以下の処理を行う。

    div = document.querySelector(".mxgraph")

クラス mxgraph の <div> タグを取得する。

    xml = div.getAttribute("data-diagram-data")

取得したタグの data-diagram-data 属性から、XML を取得する。

    mxGraphData = createMxGraphData(xml);

createMxGraphData 関数により、JSON オブジェクトに変換する。

    json = JSON.stringify(mxGraphData)

JSON オブジェクトから、JSON 文字列に変換する。

    div.setAttribute('data-mxgraph', json)

元のタグに data-mxgraph 属性を追加し、JSON 文字列を設定する。

    window.GraphViewer.processElements();

タグから、SVG 画像を生成する。

ビルド

プラグインのバージョン情報を上げたうえでビルドを行った。

ccoursier-cli で Java 17 環境を準備

Java 17 の環境をセットアップ。

cs java --jvm 17 --setup

Java 17 の環境を使用するための環境変数を取得。

cs java --env --jvm 17

結果を実行し、Java 17 を有効にした。

jar の生成

sbt assembly

target\scala-2.13 に jar ファイルが生成されるのでホームの .gitbucket\plugins に配置。

とりあえず無事に表示できた

ここまでの成果物をプレリリースした

Release Pre release 0.2.0a · yasumichi/gitbucket-drawio-plugin

upstream へ PR するか、今後検討。

GitHubで編集を提案

Discussion