MTG
補足
- サイズが決まっていないcolに関しては、col-12が入る。
懸念点
- GW-2734 (フロント)Gridをクリックしてドラッグするとcolとその幅が表現され、jsx内で指定し、MarkdownGrid.jsに送れるようにする
- どのコンポーネントにどのデータをもたせたいのか
- colのメタデータ[eg, レスポンシブサイズ(md, lg, offset等)、幅]
done
を押すとcontainer
とraw
はついている- 値が何もない場合は、cancelと同じ状態にするか、アラートをだす。
- colを再クリックして消すバツボタンはあるのか?
- 単一のrowしか扱わない
- 再編集は再編集のユースケースが必要
- どのコンポーネントにどのデータをもたせたいのか
GridEditModalに関してのUML
::: drawio 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 :::
::: drawio 7Vpdb6M4FP01lmYfJgKMAT9CQjoPO9Jqu9LOPNJAEyQCGULbdH/93usPvkzbVJNo0k7VqrWvwYZ7jq/vPQmh8+3hqk52m69VmhXEsdIDoQviOJw78BcNj9LAXGVY13kqTXZnuM7/y5TRUta7PM32gwubqiqafDc0rqqyzFbNwJbUdfUwvOy2Koar7pJ1ZhiuV0lhWv/N02YjrQGzOvuXLF9v9Mq2pUa2ib5YGfabJK0eeiYaEzqvq6qRre1hnhXoO+0Xed/yidH2weqsbI65Qfn9Pinu1Lup52oe9cvCDeBX6EQPm7zJrnfJCkceAFmwbZptAT0bmuba6nHus7rJDj2TeparrNpmTf0Il+hRxuQtj63nZP+hczNzlW3Tc7HDlTFR0K7bubu3h4ZywLQz3AlneAWsEN1W8Ep9r3g/7io98HkvCBrCBY67O3SD0Frj/ysgcZzmDeyDpCAxJYFNwlg0KAk91YjmouGQiOuGPTXECI9IRD/Zf8CCJPYI90gEjQCnCpYkdkm0IHyOQ0FA0DHyJeD15XvIpzKABoyaIaJJka9LaK8A0awGAyKZwz4I1cA2T1O8PaozcEJyI6ayoL+r8rIRULCIsAXOdddU0lFianySeVVUtVibLhn+nIhEwZBEvskhN5ji0AkoxAwK2TMNtDNEE34tPRQpfCEwxhwBDSLFEwRUEiaAaNYkeQlAOF6yxc0n/0I80xfDzD7hLuHLDn05xJlaItBcCn4xA06AtKNh1OGCUQPqFv5TQ23bBtbuZ0Dbsf7O9lmjoOXt1l1q+GkPbAAp1IQAkHgLNu7z0CUBFzscNrw7wDi0hMUjIRjdZzFWXClv9jvhdcswxXAhLOLYevVIsSeK3hFXRkeL4wUGV6hzLq5MnbMyKt/UOiAz5M6Xf77+2UNaeB/ZIAOGry10yCqJGQDmdGcFEAuPgojwQPPD1kN8SBQLR4+NUvLBZJTSfFVLmDO/D+p4wzBDqRlm6FRWQk9BHc+gDp2J3LboxZEAmQDHPkQNwD20erAyBAXJwDG+hDpYhKFutEEnFrEG2oteEtEuIYH225n1A7S5DHBPByC1Clj0KrxdN+jdxTCjCdqw5Va3tzp06gtgrbAf+54Ii+/zfLOGxAPozVTGO1fM8g3iOTORcooUA88GYNRCR4xn0Nd5DcAUBerM4/GbR4d6o2Il8Ax07LOdKHwi+xD4LKoy+8nk4zYvw7puT5Zmu+t1Y11q2MgE2ICh1duegdievmhQEZGe2Z5Wm3owdR3yg+OejzSrdIr3honiuKPzw3LN84OfiSh6jmdL/DINURaBXonsoVGa7DdZqlzQc3R2yJtvynXY/o7tGVO9xaE3tHjUnRIe+ZueADu9u7Db3SZ6+r4nPb+v7uqVDknS1CT1OmsGpiwdiDgmOn1NYcL52lZnRdLk90PpZwoRtcJfyKheNeqPwHfcGRtOIt9H3dcXa0ZTeXw81Wgi6QVjIkGR9sWPY80xwtDRrHkSyQvBaHzOtgneqxFiL0x0OoToMfv6F0p3zDNll/NJd9Qsxi9Yu4PVPjlSvmN4/mHCDUepL5JjjtdgKjGuD9+Ejufjz4kYNQp3zDEZ5Z5L3aETAVCVUguROS1RWxPEeVWVPqrvRyX7qHq2NcNsLfK8i7KG2qNQwU1gnXMlzjoiDyVaPIrypuqSXPFJVCetSDwjY08vphRcJmpnOoYQRVlfpNyeYBDrVN7Q/1mR+K1zYizPeROb/WzyHDVL3Q8p94K5MpL9/YlPCc/HlWCCKxdQeLtYO6PMJzmmVbbgowJH4O0RY9yJVMI+F2NMqeZD6r9Uooykfp+bmt6k1H8KorhTRczblmoupMC3mTfMLsY15/ESzAsTna7A19+J+l0kGDrceFpMf70E88JEJ0TILCXoTBeE/XPdH1YSNgZLHTI/Psd7/5/jjTVgb0obO1HCCt3u64OS1N13MGn8Pw== :::
ユースケース
Chapter1 Modalオープン
- アイコンを押したらモーダルが開いて
<div class="container"> <div class="row"> <!-- editable-row --> </div> </div>
が生成される。
- デフォルトは
lg
だが、画面サイズをクリックすると画面サイズのその範囲だけクリックできるようになる - colの選択部分(点線で囲まれている)が表示され、その範囲だけクリックできるようになっている
Chapter2 Col生成
-
col
- 選択候補を表示させる
- 選択部分をクリックする(col-x-1が生成される)
- colを選択して、右にドラッグ&ドロップして離した位置を取得してresponsive-sizeを取得する
-
offset
- colを選択して、右にドラッグ&ドロップして離した位置を取得して
offset-responsive-size
を取得するoffset-lg-{size}
- colを選択して、右にドラッグ&ドロップして離した位置を取得して
Chapter3 Col削除
- colのxボタンをクリックするとクリックされたcolが消える
Chapter4 編集の取り消し
- 編集していたものを無かったことにする
- Resetボタン: モーダル開きっぱ
- ❎ボタン: モーダルを閉じる
Chapter5 Col確定
- doneを押すと、エディターにHTMLが貼り付けられる
tmpArr
の値をfinArrに上書きするfinArr
をHTMLに変換し、Editorに貼り付け
- モーダルが閉じられる
タスク作成にあたっての補足[WIP]
- トーストエラー(優先度低め)
- GridEditorUtilの中のisInGridBlockメソッドを利用する カーソルがGridEditの中にあるのかというのをチェックしてトーストエラーをだすように設定
:::editable row
の中で
- col移動/横幅を伸ばす/offset
- /Web会議室/エディタ拡張(BS4 Grid 追加編集モーダル)/colのドラッグ&ドロップについてを参考に
- ドロップを検知してxの数字をみて近いところに置いてあげる
- 見るべきは
bg-cols
の各カラムの真ん中のx座標 - ライブラリに加えpositionとwidthを編集できるようにする