めも、メモる

技術的メモ. VS Code Draw.io DOA

Draw.ioでモーダルウィンドウを表示させた

github.com

 

読み込みの続き。

ノードのダブルクリックイベントは取れるようになったので、独自の編集ウィンドウを表示させたい。モーダルウィンドウを自作する?いや、その関数はあるはずで、触っていて見た画面を検索して、

EditorUi.prototype.showDialog

を使えばよいことが分かった。

コード中では、 document.createElement を使ってHTMLを組み立てている。懐かしい。

次は、このウィンドウの中身を独自に作り込んでみる。

jpGraphを読んだ

基本的に前日にやった内容を書いて、振り返りつつ、今日何をするかを書くことにしている。そうれば、リズムを作るのによい。

昨日は、巨大なjpGraph(draw.ioのオープンソース版)を読み始めた。urlに?dev=1をつけると圧縮前のjsファイルを読み込むことがわかった。draw.ioは外部サービス(dropbox, google drive,onedriveなど)にファイルを保存できる仕組みになっているのでまずそこらへんが読み込まれるが、それは今回は関係ない。

知りたいのは、オブジェクトをダブルクリックしたときのイベントをとりたいだけである。

GitHubのページに、非常に複雑なので、pullRequestは受け付けていないというようなことが書いてあった。ソースを読むと、多数読み込まれているJSファイルで、Global変数に各種クラスを宣言して、そのprototypeを拡張したりしている。これはあかんやつである。

幸いにも私の目的は、

Graph.prototype.dblClick = function(evtcell)
        {
            alert("ok");
        };

のように埋め込めばどうやら目的を達成できそうである。

次にやることは、まずこれをVS Code版の方にpluginとして埋め込んで動かすことにしよう。そのあとは、独自のEditorのUIを作ること、そして、編集結果をVS Code版Draw.ioに反映させる方法の調査となるかな。

 

Draw.io のオープンソース版を理解する

draw.ioのVS Codeにはプラグインシステムがあって、読んでいくと、package.jsonで指定したjsファイルを読みこんで、vscodeのwebviewの中でscriptタグの中身として展開してくれるようだ。なるほど。

さあ、触れてみようかと、中をのぞいてみると。

draw.ioのVS Code版は、draw.ioのオープンソース版(web)を基に作られている。このソフトウェアはmxGraphのラッピングしている。mxGraphのドキュメントを読んで触れる気でいたのだが、ラッピングといってもかなり巨大である。

だから、draw.ioのオープンソース版(web)をある程度理解する必要があるのだが、mxGraphと違ってドキュメントがない模様。StackOverfllowのタグにリンクがあるくらいだ。

ちらっと見ると、同じようなことをしようとしている(web版のままで拡張であり、VSCodeではないが)人もいるようだ。ということは、forkしているプロジェクトのソースコードを読むのも良いかもしれない。

ともかく当面はソースコードを読むことが中心になりそうだ。

Draw.io VS code版(非公式)のプラグインシステムを理解する

プラグインのwebviewのhtmlは見つかったものの、そこから参照されている、jsやcssのファイルが全くない。drawioというフォルダ以下に展開されるはずなのだが。。

ずっとwebpackとかnodeとかでビルドした結果がうまく出力されていないと思い込んでいたが、よく見ていくと、forkしてきているので、gitignoreされていたのだった。

それで、もとのプロジェクトからファイルをダウンロードして配置すると、なんと動いた・・

まあ、この種のこともわからないことだらけだから仕方ない。

表立って公開はされていないが、内部的にプラグインを差し込めるようになっているので、このプラグインシステムを理解して、ダイアグラムがダブルクリックされたときにイベントをハンドルして、独自のformを表示して、独自にデータを管理して、draw.io側で管理している表示用データを上書きする、、という仕組みをつくることが当面の目標。

JavaScriptでライブラリの読み込みができていない

エラー画面になってしまうので、デバックをしてみていたのだけど、簡単にはいかなそうなので、VSCodeのWebViewのドキュメントを読み直す。

VSCode → WebViewと、WebView → VSCodeのメッセージのやり方を理解して、もう一度デバッグしていると、WebView → VSCodeから JavaScriptの頭にある、logのイベントが出ているが、そのあと、落ちていることが判明。

どうも、外部ファイルの読み込みができていないっぽい。

 

Draw.io VS codeエクステンションが動かない

ところで、このdraw.ioのvs code拡張機能は、本家draw.ioとは非公式のもののようだ。なかなか面白い話。そもそも、draw.ioのもとになっている基盤もmxGraphとして公開されているし、この辺はとても興味深い。

vs codeのCustomEditorの解説を読んでいると、テキストエディタの在り方を学んでいるということを知る。GitHubの知見、gitコミット、プルリク、マージ、イシューのプロセスは色々な世界に応用できると思うが、vs codeの知見もまた、様々な世界に変改可能であり、私もそういう実践共同体に参画しようとしているのだな、と思った。

ここ1年ほどは、visioのアドインを書いていた。仕事で使っているから、エクセルとのデータの受け渡しとか、RDBのCreate Table文を生成させたりとか。Visioもよいのだが、APIがイケていない。公開されていないものもある。ドメインモデルが定義されているというより、汎用的な概念(cell)にいろいろな意味を無理やり追加している感が強い。

ER図のEntityの配置を自動で整理させる機能を作ろうとしていたのだが、コネクタの座標の数字を変えて位置が変わらないなど。イライラする挙動が多かった。これは移って正解だった。

まずは今、仕事でVisioでできているところまでを作ることが目的だが、それも現状からするとずいぶん先の話である。

で、Draw.ioのデバック起動である。sampleのソースコードを読みに行ってエラーになって要るっぽいので、削除してみた。そしたら、build時のエラーはなくなったが、エラー画面に飛ばされるようになった。

というわけで、今日はデバックをしていって、どこでエラーが起きているか突き止めることが目標。

開発メモを書きはじめる

最近、ER図のモデリングツールを起点として、妄想広がる拡張機能群をもったツールを自分で書きたくなって、趣味プロジェクトをなめくじのような速度で進めている。

その過程のメモがあると良いのではないかと思い、古いブログアカウントに再ログインした。

6年前は独立系のSaaSベンダーのプログラマだったが、その後、SIに移ってPM兼エンジニアとなって、今はITコンサルの仕事で、プロトタイプや簡単なツールをOfficeアドインで書くぐらい。

2週間くらいで、これまでにしたこと。

・まず、Visual Studio Code拡張機能だろうと思って、サンプルを少し読んだ。

・作りたいのはDraw.ioの機能を拡張したものなので、draw.ioを触って、拡張したいポイントや拡張して管理したデータを考えた。

VS Code版のdraw.ioをデバッグモードで立ち上げられないのが最初の壁(今も解決していない)

・draw.ioの基となっている作図ツールの基盤にmxGraphというのがあって、これが大変によくできている。これがオープンソースとはすごい。

・mxGraphをVS Codeで動かす拡張はあって、これはデバッグモードで動かせた。

・エンティティをダブルクリックしたときのイベントを拾うハンドラを挟むことはできた。

・mxGraphで画面イメージを扱い、メタデータは別形式で管理する仕組みになるのでうまく分離できそう。

・さて、もう一度、draw.ioの立ち上げでエラー、、

・そもそも、nodeのパッケージの依存についてちゃんと知っておらず、この辺で、npm installの意味を知る。

・一歩進んだが、draw.ioが扱うファイルを開くと実行すべきファイルが開けなくてエラーになる。環境変数の問題?

・このあたりでもう一度、vs codeの拡張のドキュメントを読む。

・Custom Editorは色々な技術を使うから、初めての人は関連技術について学ぶべきと書いてある、、