進行表
Figma
v 使用色の定義
v フォントの定義
o マージンの定義
o 汎用コンポーネントの定義 / ワイヤーフレームの作成
o Button
o ContextMenu
o Stack
o
v レイヤータイムライン
o コンポーネントの定義 / プロトタイプの作成
o
UI
o Next.js の設定
Next.js と MUIとStorybookが噛み合わない危険があるから早いうちにやろう
v Storybook の設定
v インストール
v 設定
v Story を作成
o components/ui/Button
o components/ui/ContextMenu
o 汎用コンポーネントの作成
理由
MUIを使ってコンポーネントを表現していくことに決めましたが、以下の問題があります。
インターフェースが複雑
また、MUI以外のライブラリを利用するケースに対応したい
このため、MUIのコンポーネントをラップして汎用的なUIコンポーネントのセットを作成します。
v components/ui/Button
o components/ui/Popper
o components/ui/ContextMenu
o components/ui/Stack
o プレビュー
o canvas 要素を設定する
o 編集メニュー
編集メニューでは、LayerTimelineを操作し、レイヤー上のエンティティを選択してエンティティのキーフレームを設定するということを繰り返します。
o components/model/layer/timeline/LayerTimelineを実装
v EntityInstanceをリスト表示する
o components/EntityListAddButtonを実装
o hooks/useEntityInstancesにEntityInstanceを追加するロジックを実装
o エンティティのクリック時に選択できるようにする
v エンティティのグローバルステートを書く
o TimelinePanelContainer でこれを利用する
o 渡す
o エンティティのクリックイベントを TimelinePanelContainer まで運搬する
o クリックしたら選択されるようにする
o svg をドラッグするとエンティティが矩形選択できるようにする
o ドラッグのイベントハンドラを作る
o https://github.com/AirLabsTeam/react-drag-to-select
選択対象の要素と、選択に使った box が交差するかどうかを調べている
o playHead をドラッグすると移動できるようにする
o EntityInstanceの型を定義
これはあとでやってもいいのでは？
v ID
v 表示名
o EntityInstanceProperty
o 所属するレイヤー
o EntityInstancePropertyの型を定義
o EntityInstancePropertyKeyFrame
o プラグイン
v plugin.schema.json を書く
o $ref がVSCodeで機能しない問題に対処する
o
std プラグイン
o .plugin.jsonを書く
o
未解決問題
PropertyType は EntityType ごとに設定するべきか？
マージンはどうやる？
基本的には、スタックかグリッドでUIを考えたい
つまり、コンテナ側にマージンの責務を負わせる
それ以外：