来たわ来たの)というわけで、たのしい自由研究のコーナーです。高すぎる目標こういうものを作りたかった......。ネタバレしますが、ここまで作るだけで精一杯でした。ホントゆるしてください。のびちぢみ用のハンドルをつけてみる。グリッドで容易に実現可能であることが解っています。レイアウトを組むことはできても動きをつけることはできません。もののけ姫という映画の中で、主人公のアシタカが「シシ神は、傷は癒しても痣は消してくれなかった」とつぶやくシーンがありますが、まさに今そんな気持ち(伝われ)。ユーザ心理としては、画面上にいかにも動かせそうなコンポーネントがあったら「なんかマウスで摑めそう」って思うじゃないですか。何らかのインタラクションを作り込む方法を研究してみたいなぁと思いました。向けの開発基盤が用意されています。考えていた頃が僕にもありました。1次元のリストに対しては絶大な威力を発揮しますが、2次元のグリッドに適用しようとした途端に力を失います。仕様を読むうちに、コンポーネントの座標をマウスに追従させる以外のほとんどすべての処理を自力で実装しなくてはならず、思った以上の手間暇がかかりそうな予感がしてきました。いうやりたい事に限りなく近いデモが置いてありました。タグへの適用を試みましたが、おそらく内部の座標計算がバグっているのか狙った場所にドロップできない問題が速攻で発覚しました。グリッドとの相性は今ひとつなようです。ドロップのインタラクションを作り込めそうです。グリッドとの重なり判定まずはドラッグの対象物がグリッドのどの位置にあるかを調べる処理から作っていきましょう。ありがたく使わせて頂くことに。グリッドの領域との重なり判定を試したのが先週のこと。処理コストがバカにならないため、一度取得した値はキャッシュしておき、要素の位置やサイズが変わったときだけ再取得するようにします。ちなみにブラウザのウィンドウの縁をドラッグすると、リサイズイベントが大量に飛び狂うので、rxjsのdebounceTimeオペレータで適宜間引いてやります。ここまで材料が揃えば、ドラッグ中のコンポーネントに最も近いセルを、以下の手順で容易に求めることができます。最寄の占有領域の確定グリッドの縁にスナップさせるよ続いて、コンポーネントをドロップしたあと、グリッドの縁へりにぴったりくっつける実装について考えていきます。移動をアニメーションで補間してやることになります。マウスを放したときに、適当なグリッドの領域に吸い付くようにぴったりフィットさせたいと思い、さっきまでAngularのアニメーションをあれこれ試していた。2019さりげないアニメーションはよいものです。した動きは地味に心地よい。アニメーションは、状態遷移の契機となるトリガー、遷移前のスタイル、遷移後のスタイル、アニメーションの所要時間を記述する必要があります(詳しくは公式ドキュメント)。ハマりやすいのが遷移前後のスタイル定義です。相対座標指定なので、どの位置を基準にしてアニメーションのパラメータを設定すればよいのか迷うかも知れません。遷移前のスタイル遷移後のスタイル以下のように、パラメータtranslate_x、translate_Yを利用して遷移のスタイルを動的に制御します。それぞれ紐づいています。lll)マウスを離した際のイベント処理の中で座標を再計算しつつアニメーションをトリガーすると、座標は合っているはずなのに、トンでもない位置から飛び込んでくるように見えてしまう。一呼吸おくと、マトモになる。2019上記のツイートにもある通り、cdkDragReleasedイベント内でスタイルにバインドする変数の更新とアニメーションのトリガーを一度に行うと、どういうわけか初期位置がおかしくなる事象に遭遇しました。“一呼吸”の置き方は、最初、rxjsのhttps://t.co/FeO8VjX2eh()で値を送りつけ、subscribe()の中でアニメーションをトリガーする方法を考えたがうまくいかなかった。requestAnimationFrame()でフラグを回収しつつアニメーションをトリガーする方法ならうまくいく。2019これがベストな回避策かどうかは非常に怪しいですが、以下の2段階のフラグを設けてそれぞれタイミングをちょっとだけずらして更新することでアニメーションのバグが鎮まりました。使って内部フラグが立ったかどうかを毎フレームポーリングし、立っていたらアニメーションをトリガーするフラグを立てつつ内部フラグを回収するというややこしすぎるソリューションです。考えても間違いなくバッドノウハウだと思います。}まとめまだ全く目標に到達していないものの、なんだかんだでブログの記事ひとつ分を消費してしまいました。いうインタラクションを売り物に組み込んでいるエンジニアのみなさまには頭が下がる思いです。