概要
リサイズ可能な分割パネル + React用のドラッグ＆ドロップ動的分割
@byeolnaerim/flex-layoutはリサイズ可能な分割パネルUIとドラッグ＆ドロップベースの動的分割を迅速に構成するためのReactコンポーネントです。
例えば、左側は店舗の商品リストビュー、右側は実際の着用プレビューを見るビューとして画面を構成したい場合、そして各ビューがリサイズ可能である必要がある場合、このライブラリは良いアイデアを提供できます。
起源の物語
最初の @byeolnaerim/flex-layoutは私が2年目の開発者だったとき、個人プロジェクトとしてバニラJSベースのビジネス用メッセンジャーを作ろうとしたときに生まれました。
私はそれがまるでSlackやVSCodeのように各構成間で互いにリサイズできることを望んでいました。私にとってVSCodeの左側のビュー構成が素晴らしく見えたので、私が作ったものがVSCodeに似た動作をすることを望んでいました。
時が経つにつれ、私はReactに初めて入門し、これをTypeScript、RxJS、Reactベースのコンポーネントとして再構築しました。ドラッグでリサイズ可能な既存のレガシーの分割ビュー機能から、"まるでVSCodeとほぼ同じように動作することを望む。"という私の過去の哲学のためにドラッグ＆ドロップで動的分割ビューを作成する機能まで拡張しました。
Grow Normalization
@byeolnaerim/flex-layoutを最初に作成したとき、私はflex-growを親レイアウトFlexLayout 基準として子コンテナFlexLayoutContainer の数を全体のgrowの上限としてmaxGrow, 各コンテナの比率をその中で正規化normalizeして配分すべき概念として理解していました。（これは誤った解釈でした。）
例えば、子コンテナが2つある場合、max growは2で、比率が30% / 70%であれば、実際のgrowは0.668 / 1.332であるべきだと考えていました。その仮定のもとに補正ロジックが積み重なり、今の形になりました。@byeolnaerim/flex-layoutこうなりました。