Emacsの中で動く作図ツール最近の変更点(2023年1月～8月)

Emacsの中で動く作図ツールですが、前回(2022年末)からの変更点をまとめました。

misohena/el-easydraw: Embedded drawing tool for Emacs

ちなみにインストールはpackage-vcやらstraightやらで出来るらしいです。私は普通にGitのサブモジュールとしてcloneしてload-pathを通しているだけです。

接着機能

図形(の中の点)を他の図形にくっつける(移動に追従させる)機能を追加しました。図形の間を線で結んだり(パスツールでCtrlを押しながら図形をクリック)、テキストを矩形などの中心に配置し(テキストツールでCtrlを押しながら図形をクリック)、移動してもその状態を維持し続けられます。

仕様はかなり悩みました。今のところ条件は限定されており、また、残っている問題も多いです。内部的には点接続という図形内のアンカーポイントなどの点を別の図形内の点に関連付ける仕組みで実現しています。接続関係を表すデータは、SVG内にdata属性として記録しています。コンテキストメニュー内にも接着関連のコマンドをいくつか追加しました。

変形機能の改善

transform属性を図形の座標に適用
グループの変形に対応
変形方式設定を追加
グループ化解除時にtransform属性を子に適用
GUIで変形(C-t)

最低限の変形機能は出来たと思いますがまだまだ沢山の問題が残っています。

変形と一口に言っても何をどのように変えるのかはある程度選択の幅があります。図形の種類(SVG要素の種類)によっては出来ないこともあるので、そういうときにどうするかが難しいです。

別フレーム対応

プロパティエディタとシェイプピッカーは別フレームで表示できるようになりました。編集中にフレームにしたりウィンドウに戻したり柔軟に変更できます。メニューボタンやコンテキストメニューから操作できます。だだ、使ってみるとそれほど便利では無いなと思いました。それほど大きな図を描くわけではありませんし、フレームが開くのに少し時間がかかるというのもあるかもしれません。そもそも私はEmacsでフレームを使うことに慣れていません。

カスタムシェイプにラベルを追加

ほとんど例としてでてすが、二種類ほど追加しておきました。すでにカスタムシェイプリストを編集してしまっているとリセットしないと反映されないと思います。

シェイプピッカーも色々直したいところがあります。とりあえず折りたたみ状態は保持したいところ。

手書きツールの改善

生成する点の数を大幅に削減しました。

複製機能

選択図形を複製するコマンドを追加しました。単にコピーしてペーストしてもいいのですが、Dキー一つでできます。

また、選択ツールにおいて、M-ドラッグで複製しつつ平行移動します。

M-矢印キーまたはM-S-矢印キーで複製しつつ平行移動します。S付きは10px単位で移動します。C-u 数値のプレフィックスを付けると数値のピクセル数だけ移動します。

S-ドラッグによる移動方向制限

シフトキーを押しながらドラッグする操作に対応しました。ツールによって意味は異なりますが、45度単位で移動することが多いです。

切り抜き機能

マウスで範囲を指定してドキュメント全体を切り抜く機能を追加しました。全体を平行移動してドキュメントのサイズを変更します。範囲外を自動的に削除したりは しません 。図を描いたら端が余ってしまったということが良くあるのでそういうときに使います。実は小さくするときだけでなく大きくしたいときにも使えます。

日本語化

current-language-environmentが "Japanese" の時は日本語で表示されます。 edraw-msg-file 変数で無効化できます。環境によっては文字化け等正しく表示されない場合もあります。その場合は環境のフォント設定等を見直すか、諦めて無効化してください。

元々全てのメッセージをedraw-msg関数で囲っていたのはこのためでした。Emacsはメッセージが多言語化されているところがほぼありません。見つかったのはチュートリアルくらいです。それがcurrent-language-environmentによって切り替わっているので、それにならいました。そもそもEmacsのdocstringには多言語に対応する仕組みが無いのは大いに不満ですね！(最低限言語を指定するメタデータがあって、ボタン一発で翻訳するとかどうだろう)

マーカーの改善

マーカー(パスに付ける矢印や丸印)の形状をある程度カスタマイズできるようにしました。プロパティエディタから変更したり、メインメニューや変数edraw-default-marker-propertiesでデフォルトを変更できます。

将来的には形状自体を増やせるようにしたいです。そのための下ごしらえも少ししました。

パスツールのM-クリック・ドラッグ操作

Alt+クリック・ドラッグでハンドルを確実にコントロールできます。ハンドルをM-ドラッグするとそのハンドルのみを移動します(反対側のハンドルは動きません)。アンカーをM-ドラッグするとそのアンカーの二つのハンドルを再作成します(スムーズ点になります)。アンカーをM-クリックするとそのアンカーの二つのハンドルを削除します(コーナー点になります)。いわゆる切り替えツールとほぼ同じです。

点の座標指定移動

パスのアンカーやハンドルのコンテキストメニューに「座標による移動コマンド」を追加しました。精密な操作が必要な場合に有用です。

座標の表示

色々な場面で座標やサイズをメッセージ出力するようにしました。

図形に対するコンテキストメニューの「設定」によく使うプロパティの変更を追加

image要素に対するhrefとtext要素に対するfont-sizeを追加しました。

テキストツールの既存テキストクリック操作

これまでクリックは単に新しくテキストを追加するだけでしたが、既存のテキストをクリックした場合はそのテキストの文字列を(ミニバッファで)入力するようにしました。これまでプロパティエディタを開いて変更していたのですが、やっぱりその方が便利かなと思いまして。既存テキストの近くに新しいテキストを追加したい場合はC-uプレフィックスを入力してからクリックしてください。強制的に追加になります。

テキストまわりはもっと沢山の設定項目が必要です。

ツールヘルプの表示

ツールの操作は気が付きにくいものが多いので、ツール切り替え時に簡単なガイドを表示するようにしました。

選択ツールのC-ドラッグ操作

Ctrl+ドラッグで範囲と重なる図形を選択、選択解除します。

複数選択図形一括操作

複数の選択図形をプロパティエディタで変更できるようにしました。また、コンテキストメニューの「設定」でも一度にプロパティ値を変更できるようにしました。

ビューサイズの改善

表示領域自動拡大の改善: ズーム時の表示領域自動拡大の上限をウィンドウサイズに対する比率で指定出来ようにしました(edraw-editor-auto-view-enlargement-max-size変数参照)。デフォルトは幅約94%、高さ約63%に設定されています。あまり大きくすると環境によっては不安定になりそうで心配しています。
edraw-set-view-size-specの単純化: ビューのサイズ指定は、単純に高さと幅を数値で指定するだけになりました。これにより誤入力を減らせます。指定の解除はビューのリセットコマンドを使用してください。

困ったら 0 や v 0 を押してください。元に戻ります。

本当はドラッグでビューサイズを変えられると良いんですけどね。右下につまみを表示しなければなりません。

キー割り当ての追加

選択図形に対する操作
- g : グループ化
- G : グループ化解除
- D : 複製
- p f : fillを変更
- p s : strokeを変更
- p p または M-RET: プロパティエディタを開く
- M-矢印キーまたは M-S-矢印キーまたは C-u N M-矢印キー : 複製後移動
- TAB : 次の図形(M-]と同じ)
- S-TAB : 前の図形(M-[と同じ)
- C-t : インタラクティブ変形
i : 画像ツール
dvb : svg要素のviewBox属性を変更

カスタマイズ変数の追加

edraw-editor-image-scaling-factor: 大きさの微調整をします。ノートPCで少し小さいと感じたので追加しました。Emacs自体が(create-image関数が)自動スケーリング機能を持っているのですがギリギリそれが働かない解像度だったようで、それとは別に用意しました。
edraw-editor-default-tool: 起動したときに選択するツールです。これまでは矩形ツールだったのですが、選択ツールの方がいいかなと思ったので変更できるようにしました。
edraw-org-link-image-max-size variable: org-mode上でインライン画像表示するときの最大サイズを設定できるようにしました。ウィンドウからはみ出すのを防止できます。

SVGファイル・データ内のコメントを可能な限り維持

SVGファイルやデータ内にあるコメントを可能な限り維持するようにしました。  というヘッダーコメントや任意のフッターコメントを入れることを想定しています。svg要素内にあるコメントは図形の前後関係など、動作に支障を来す可能性があります。

カラーピッカーの改善

最近使った色の保存
最近使った色をキーで選択(C-1, C-2, ..., C-0)
ドラッグ時にピッカーの外に出たときの挙動を改善(境界線上の色を指定しやすくする)
色テキストを追加・置換するコマンド(カラーピッカー単独での利用)の改善
- 子フレーム対応
- set-transient-mapによる安定したキー操作
- edraw-color-picker-replace-or-insert-color-at-pointコマンドを追加
- css-modeやmhtml-modeでの設定例を追加

カラーピッカーのedraw-editor以外からの利用(応用)まではなかなか手が回らずいくつか放置されていた問題がありましたが、修正したので大分使いやすくなったと思います。私は先日書いたような設定でcss等の色が書いてある部分をいつでもカラーピッカーで変更できるようになりました。他の色形式に対応したり、元の書き方を出来るだけ変えないようにする等まだ改善点は残っています。それと子フレームは環境によっては正しく動かない可能性があるので心配しています。一応子フレームを使わないようにするカスタマイズ変数もあります。

カラーピッカー自体には、後は固定のパレットの追加と他の表色系への対応を考えています。

edrawコマンド

edraw-mode.elにedrawコマンドを追加しました。M-x edrawで新しいバッファを作成してedraw-modeを立ち上げるだけのシンプルなものです。素早く新しい図を作成したい場合に有用です。名前を付けて保存するにはC-x C-sやC-x C-wでOKですが、その時の拡張子やauto-mode-alistの設定等によってはedraw-modeが解除されてしまうのでその際は再度M-x edraw-modeしてください。

edraw-modeの改善

単体の.edraw.svgファイル(edraw-modeバッファ)を編集する際に支障がある問題を改善しました。

バッファが空の場合に表示されないバグを修正
ファイル保存時にUTF-8を強制
テキストを編集できてしまうバグを修正
(テキスト)カーソルの非表示
他のモード(xml-mode等)との確実な切り替えを確認
メインメニューの「保存」を単にsave-bufferコマンド(C-x C-s)へ変更
メインメニューにxml-modeへの切り替えを追加(単にxml-modeを呼び出すだけ)

org-modeからの利用ばかり考えていて、長らくこちらはおろそかになっていました。ちょっと試す分にはedraw-modeの方が速い気がしたので手を付けました。

README

org-modeの非同期エクスポートを有効にしている場合の設定方法を追加
org-modeの通常のファイルリンクで使う方法を追加
SVGファイル内のコメントやmagic-mode-alistでedraw-modeを使う方法を追加(.edraw.svgという長い拡張子を使わない方法)

バグ修正

一部の環境でエディタが表示されない

librsvgのバージョンによってセーブして再び開くとエディタが表示されない不具合がありました。svg要素のxmlnsが消えてしまうのが原因でした。新しめのlibrsvgはxmlnsを厳格に解釈するようなので、その影響かもしれません。それに伴いimage要素ではhrefではなくxlink:href属性を使用するようにしました。

画像ツールのファイル名入力を改善

Macで画像ファイル名の拡張子が入力されない不具合を修正しました。

また、画像は参照元のファイルがあるディレクトリかそのサブディレクトリにあるものしか表示できません。これはlibrsvgがセキュリティ上課している制限です。

マウスカーソルのちらつきを改善

マウスカーソルが画面が更新されるたびに一瞬だけ別の形状に変わるのを出来るだけ抑制しました。

その他沢山の細かい修正があります。