2023-08-25

Emacsのcss-modeやcustomize-face等でカラーピッカーを使う設定

以前(と言ってももうずいぶん前になりますが)Emacsで動くSVG実装のカラーピッカーを作りましたが、少し整えてからcss-modeやカスタマイズ機構で使うための設定を用意しました。作図エディタ本体の改良で忙しくカラーピッカー単体での利用の方はおろそかになっていました。ようやく手を付けられたので色々いじっているところです。

2023-08-25-color-picker.png

まず次のelispを導入します。

misohena/el-easydraw: Embedded drawing tool for Emacs

私は自分のemacs設定ディレクトリのサブモジュールになっていますが、package-vcやらstraightやらでも入れられるそうです。その辺り詳しいことは知りません。別にload-pathの通ったところに全部置いておけば済む話です。

それで、css-modeやmhtml-modeやらで使うには例えば次のようにします。

;; この辺りはパッケージ管理システムを使っていると自動的に作られているかも。
;; 一応;;;###autoload指定は入れてあるので。
(autoload 'edraw-color-picker-replace-color-at "edraw-color-picker" nil t)
(autoload 'edraw-color-picker-replace-or-insert-color-at-point "edraw-color-picker" nil t)

;; お好みでキー割り当て。
(defun my-edraw-color-picker-add-keys (map)
  ;; マウスのクリックでそこにある色名を置換。
  (define-key map [mouse-1] #'edraw-color-picker-replace-color-at)
  ;; C-c C-oでそこに色名があれば置換、無ければ挿入。
  (define-key map (kbd "C-c C-o")
              #'edraw-color-picker-replace-or-insert-color-at-point))

;; local-mapにキーを設定する関数。
(defun my-edraw-color-picker-enable ()
  (my-edraw-color-picker-add-keys (or (current-local-map)
                                      (let ((map (make-sparse-keymap)))
                                        (use-local-map map)
                                        map))))

;; お好みのモードにキー設定を追加。
(add-hook 'css-mode-hook 'my-edraw-color-picker-enable)
(add-hook 'mhtml-mode-hook 'my-edraw-color-picker-enable)
(add-hook 'web-mode-hook 'my-edraw-color-picker-enable)

EmacsのCustomize用のバッファ(customize-faceとか)で使うには次のようにします。

;; Customize用のバッファではEmacsの色名を使う。
(defun my-edraw-color-picker-enable-for-custom-mode ()
  (setq-local edraw-color-picker-insert-default-color-scheme 'emacs))
(add-hook 'Custom-mode-hook 'my-edraw-color-picker-enable-for-custom-mode)

;; フィールドのキーマップにキー設定を追加。
;; local-mapに設定するとフィールド上では効かないので。
(with-eval-after-load "cus-edit"
  (my-edraw-color-picker-add-keys custom-field-keymap))

カラーピッカーは現在デフォルトでは子フレームで表示されるようになっていますが、環境によっては正しく表示されないかもしれません。その場合は (setq edraw-color-picker-use-frame-p nil) にするとオーバーレイを使った表示になります。それはそれで無理矢理行と行の間に差し込むのでレイアウトが崩れることもあるかもしれませんが。

カラーピッカーの大きさは edraw-color-picker-near-point-scale で変えられます。デフォルトは0.75です。

無理にポイントの近くに表示しなくても (edraw-color-picker-read-color) でミニバッファから入力した方が使いやすいような気もしますがどうでしょうね……。

今後の改良点としては:

  • 他の表色系に対応
  • 置換前の表記に出来るだけ合わせる
  • 現在値の表示

辺りでしょうか。

その前に作図エディタ側からの必要性で固定パレットが入ると思います。

基本作図エディタ本体が優先なのでいつになるかは分かりませんが、そのうち。