ＭＴＧ
## 補足
- サイズが決まっていない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オープン

1. アイコンを押したらモーダルが開いて

```
<div class="container">
    <div class="row">
    <!-- editable-row -->
    </div>
</div>
```
が生成される。  

2. デフォルトは`lg`だが、画面サイズをクリックすると画面サイズのその範囲だけクリックできるようになる
3. colの選択部分(点線で囲まれている)が表示され、その範囲だけクリックできるようになっている

### Chapter2 Col生成
1. **col**
    1. 選択候補を表示させる
    1. 選択部分をクリックする(col-x-1が生成される)
    1. colを選択して、右にドラッグ&ドロップして離した位置を取得してresponsive-sizeを取得する

2. **offset**
    1. colを選択して、右にドラッグ&ドロップして離した位置を取得して`offset-responsive-size`を取得する`offset-lg-{size}`


### Chapter3 Col削除
1. colのxボタンをクリックするとクリックされたcolが消える

### Chapter4 編集の取り消し
- 編集していたものを無かったことにする
    -  **Resetボタン**: モーダル開きっぱ
    -  **❎ボタン**: モーダルを閉じる

### Chapter5 Col確定
1. doneを押すと、エディターにHTMLが貼り付けられる
    1. `tmpArr`の値をfinArrに上書きする
    2. `finArr`をHTMLに変換し、Editorに貼り付け
2. モーダルが閉じられる



## タスク作成にあたっての補足[WIP]
- トーストエラー(優先度低め)
    - GridEditorUtilの中のisInGridBlockメソッドを利用する
カーソルがGridEditの中にあるのかというのをチェックしてトーストエラーをだすように設定

`:::editable row`の中で

- col移動/横幅を伸ばす/offset
- [/Web会議室/エディタ拡張(BS4 Grid 追加編集モーダル)/colのドラッグ&ドロップについて](https://dev.growi.org/5f0449623e9ccb0048ee5a59)を参考に
    - ドロップを検知してxの数字をみて近いところに置いてあげる
    - 見るべきは`bg-cols`の各カラムの真ん中のx座標
    - ライブラリに加えpositionとwidthを編集できるようにする




---

## Page Navigation

- Canonical URL: https://dev.growi.org/Web会議室/エディタ拡張(BS4%20Grid%20追加編集モーダル)/7月6日mtg
- Permalink: https://dev.growi.org/5f02d0f7c84dc30048878719
- Parent: [エディタ拡張(BS4 Grid 追加編集モーダル)](/5ed4953a82bb800048bcca3d.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 3 total
  - [colのドラッグ&ドロップについて](/5f0449623e9ccb0048ee5a59.md)
  - [路線変更詳細](/5f067a7f35ac9d00489712c4.md)
  - [配列の設定](/5f057936f9b07b00481735d3.md)
- Last updated: 2023-08-25T03:07:07.269Z by kosei-n
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5f02d0f7c84dc30048878719
