MTG

補足

  • サイズが決まっていないcolに関しては、col-12が入る。

懸念点

  • GW-2734 (フロント)Gridをクリックしてドラッグするとcolとその幅が表現され、jsx内で指定し、MarkdownGrid.jsに送れるようにする
    • どのコンポーネントにどのデータをもたせたいのか
      • colのメタデータ[eg, レスポンシブサイズ(md, lg, offset等)、幅]
      • doneを押すとcontainerrawはついている
      • 値が何もない場合は、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>

が生成される。

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

Chapter2 Col生成

  1. col

    1. 選択候補を表示させる
    2. 選択部分をクリックする(col-x-1が生成される)
    3. 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の中で