レイヤーパレット上のツールバー的なものをどこに配置したものだろうか。
もっとも、ツールバーと言っても、とりあえず実装するのはカレントレイヤーの削除と新規レイヤーの追加くらいである。前者は対象がカレントレイヤーであるのだから、そのためのボタンをパレット上のカレントレイヤー領域のどこかに配置するのが当然、自然だろう。
一方で後者が難しい。新規レイヤーが常に最前面への追加なら、カレントレイヤーは関係ないのでツールバー的な領域を新設してそこへボタンを置けばいいが、カレントレイヤーの手前に追加と言った動作ならこれもパレット内のカレントレイヤー領域内に置くのが多少は自然に思える。
多少はというのは、確かに動作の起点はカレントレイヤーなのだが、動作の対象は別の新規レイヤーなのでそこに若干のズレを感じないこともないということだ。
難しい。どうしたものか。
レイヤーパレットというものに正式な定義があるわけではないが、大体のイメージはPhotoshop 3.0から実装されたアレである。
これを整理してみるとこの中に存在するオブジェクトは
とこんな感じになる。面白いのは合成モード云々が上にまとめられていることだ。これらは当然各レイヤーの属性なので、本来はレイヤーリスト中の各レイヤー項目内に配置されて然るべきものなのだが、おそらくパレットの面積の都合で上にまとめられている。
これに対して、レイヤーの可視状態とリンク状態はまとめられてない。この切り分けにどういう理由があるのかは分からない。可視・不可視の状態は全体を俯瞰できた方がよいということか。
そんなこんなを勘案しつつ、桃のレイヤーパレットはこんな感じにしてみたい。
上部にはチェックボックスひとつしか置いてないが、ここには可視・不可視の状態や透明部分の保護といった各種フラグ群を表示する。また、合成モードと不透明度のためのUIは画像の通りの場所に配置する。
画像の通りといえば見ての通り、各レイヤーを横に配置している。これはちょっとチャレンジングで、これが使いやすいかどうかは実際にドッグフーディングしてみないと分からない。もしかしたら何だこのクソUIは！！となるかもしれない。
貼り付けの動作について整理しておきたい。
Photoshopの場合、「ペースト」を行うと新規レイヤーが生成され、そこにクリップボード上の画像が配置される。また、「選択範囲へペースト」を行うと新規レイヤーが生成され、選択範囲がレイヤーマスクに設定された上でクリップボード上の画像が配置される。CSなんちゃらではもう少し貼り付けの仕方にバリエーションが増えるが、基本的な動作は割とシンプル。
一方gimpはなんかよく分からなくて、とにかくメニュー項目がたくさんあり:
これ多分作った人も使い分けできないよね。貼り付けの動作自体も若干複雑で、レイヤーではなくフローティング選択範囲というものが生成される。その状態で新規レイヤーを生成すればそれに固定される。一方レイヤーの固定という機能を呼ぶとカレントのレイヤーに固定される。
ということでベースとしてはPhotoshopを参考にしたい。ただレイヤーマスクはまだ作るわけじゃないので「選択範囲へペースト」は後回し。
さて貼り付けを作る場合、桃にとって最も大きいインパクトは、従来はレイヤーが3枚に固定されていたのを基本的に制限なしに自由に増減できるようにしないとならないということだ。
内部的な機構についてはそのようにできるようにするためにいろいろ書き換えてきたので問題はないのだが、めんどくさいのはいわゆるレイヤーパレットというものを作らないといけないのである。つまり、UIの問題だ。
というわけでコピー処理を書く。
とりあえずこの辺を参考にする。というより、仕様がばんばん変わっていくのでここ以外はすぐ鮮度が落ちてしまう。強いて言えば、この辺りも手助けになるかもしれない。とは言えこのページにしても、例えば ClipboardItem とはなんぞやというところとかがいまいち説明不足だったりするのだがそこは引っかからなくていい。
気をつけるべき点として
クリップボード操作は https なページ上じゃないとできない
クリップボードへの書き込みは、現状の Chrome の実装では、パーミッションは特に必要ない
クリップボードへの画像の書き込みは、7月末にリリースされた Chrome 76 からやっとできるようになった。それ以外のブラウザでは「まだ」できない
そんなこんなで
こんな感じで選択してメニューからコピーを選択すれば
こんな感じでクリップボード経由で他のアプリケーションとやり取りできる。うーん普通だ。
上記の通りクリップボードは https なページ上じゃないと動かないので、ローカルで試すには自己証明書を作らないといけない。とりあえずこの辺りを参考にした。
次は貼り付けを作る。
そんなわけでメニューバー的なものを書いた。
ただメニューバー的なものがメニューバー的に動作するだけなので、特に他に書くことがない。
桃に組み合わせるとこんな感じになる。次はクリップボード周りを書いてみよう。
選択範囲がある時、描画がその中へ限定される処理を書いた。
さてこの選択範囲をどうこうするための、クリップボードに関するメニューというものが必要になるのだけど。どこへ追加したものだろうか。
桃の上部のパネルは、別に意識したわけではないのだけど、Microsoft 製アプリで言うところのリボンUIのように見えるので、クリップボード操作に関してもそれを模倣するという方法もあるが、リボンが優れたUIとはちょっと思えないのでそれは採らない。普通に「ファイル」「編集」云々の伝統的なメニューバーがほしい。
そういうものをちょちょいと出してくれる素敵なライブラリなんかないかな。
Chromiumで、拡張に割り当てられた記憶領域（chrome.storage.local）に対して明らかに空き容量があるのに「残り容量がないエラー」になる謎の現象があって困る。もしかしたらpsdとの相性が悪いのか？ 試しにpsdの対象から外したら発生しなくなった、気がする。
とかなんとかやってたらChromeが更新されたので試してみた所、謎のCPU浪費をしなくなっているようなので戻した。
というわけでChromeでこの記事を書いているのだが、basic認証をさせるページでユーザーにプロンプトを出して入力を求めるより前にリクエストが行われてしまって認証エラーになる現象が発生している。どうもまだ安定状態には一進一退という感じだ。
現代のブラウザは規模が大きくなりすぎてテストが行き届かなくなっているのかもしれない。
＊ ＊ ＊
CPU浪費問題。おかし、直ってないじゃねえか！
選択範囲の表示をやってみた。
このトピックについてめんどくさい点は、Photoshop等に倣うなら、範囲表示の境界線がキャンバスの倍率によらず常に1ピクセルであるということだ。このための下準備がめんどくさい。蟻が行進するのは意外とめんどくさくない。
もう一つめんどくさいのは、選択範囲を決定する前段階の仮線の表示だ。何がめんどくさいかと言うと、やはりPhotoshopに倣うならばこの仮線はキャンバスの画像を反転した色で表示する必要があるのだ。
この反転表示と蟻の行進を組み合わせて表示するのが多少めんどくさい。ちなみにPhotoshopではなくgimpに倣えば、この手の仮線はxorではなく縁取りされた実線になるのだけど、これはどのピクセルを選択しているのかわかりづらいのでよくないと思う。
ともあれ、選択範囲の表示についての基礎の部分はできた。まだ実装してないけど選択範囲の集合論的な演算（範囲の追加、削除、インターセクションなど）も無理なく組み入れられると思う。
ということで次に考えるべきめんどくさいことは、この選択範囲をどうするかという点と、選択範囲に対する描画という点だ。前者はクリップボードとのやり取りという話に繋がるのでなかなか大掛かりにめんどくさい。また後者はつまり描画のクリッピングなのだが、おそらくcanvasの機能で一発ということにはならないのでこれまためんどくさい。
この記事めんどくさい言い過ぎだ。
apacheとgitリポジトリを保持しているUbuntu Serverを動かしているVirtualBoxを動かしているWindows10マシンがこの夏を乗り越えられずに寿命を迎えた。享年13なので大往生なんだろうか。さて、どうしようかな。
ということで適当なノートにUbuntu Serverを入れ直したい。仮想じゃなくなる。
ところでUbuntu Server 18.04.3をインストールしてもOperating system not found的なエラーになって起動しない。unetbootinではなく、Ubuntu公式のブータブルUSB作成ツールで作ってそこからインストールしても起動しない。はて…？ 試しにXubuntu desktop 18.04をインストールしてみるとそれは起動する。うーん入れたいのはserverの方なんだけどな…まあ…いいかな！ やり直すのめんどくさいし（雑な仕事）。
たぶん16.04とかなら入って、そこからアップグレードさせるのが正解だったのだろうと思うけど色々入れちゃったので後の祭り。そういうわけでdesktop OSをサーバ代わりに使うアホな人が一人誕生したのだった。
範囲選択機能を作る際、めんどくさいことは大まかに分けて2つあり:
まず内部表現から考えると選択範囲とは頂点の配列のことだ。それを結んで多角形とし、その内部に描画を限ることで範囲選択がなされる。
多角形によるクリッピングというのはキャンバスのネイティブの機能を用いて実現してもよいのだが、その場合アンチエイリアスが効いてしまう（アンチエイリアス自体はキャンバスの仕様に必要な要件ではなかったはずなのだが、どういうわけか全てのブラウザがそういうふうに動作する）ので自前でアンチエイリアスをかけない多角形塗りつぶし機能というのが必要だ。
というわけで書いた。
アンチエリアスをかけない描画メソッドというのはすでに線分と円についても作ってあるが、どれもなかなか面白く、グラフィックスの教科書をおさらいしてる気分になる。
＊ ＊ ＊
ポリゴンの内部をキャンバスの機能で塗りつぶし、輪郭だけアンチエイリアスなしの線分描画関数で上書きすれば10倍くらい速くなることに気付いてしまった。ぐぬぬ…。