segmentedControlを作成する

[yutteee]

No description provided.

[yutteee]

https://www.radix-ui.com/themes/docs/components/segmented-control

[yutteee]

各stepで、procedureに追加する形でstateを管理するようにする

[yutteee]

バケツリレーになっているのがこいつら

  // 折り方選択で、現在のステップを保持する変数
  const [inputStep, setInputStep] = useState<Step>("axis");
  const [procedureIndex, setProcedureIndex] = useState(1);

  // 各procedureでの、最終的に必要な情報を保持する変数
  const [origamiDescription, setOrigamiDescription] = useState("");
  const [fixBoards, setFixBoards] = useState<Board[]>([initialBoard]);
  const [moveBoards, setMoveBoards] = useState<Board[]>([]);
  const [foldingAngle, setFoldingAngle] = useState(180);
  // rotateAxisも必要

  // 最終的に保存したい情報を保持する変数。
  const [procedure, setProcedure] = useState<Procedure>({
    "1": {
      description: "",
      fixBoards: [],
      moveBoards: [],
      rotateAxis: [],
    },
  });

[yutteee]

こいつらを、procedureという一つで管理できたらいい。
jotaiでバケツリレー回避できたらさらにいい。

[yutteee]

procedure一つで管理するためには？

まずこいつら

  // 折り方選択で、現在のステップを保持する変数
  const [inputStep, setInputStep] = useState<Step>("axis");
  const [procedureIndex, setProcedureIndex] = useState(1);

• どこを表示するかを管理することができる。
• これとprocedureを合わせて管理することで、すべての表示を制御できるのではと思っている。
  • procedureIndexで、objectのどのkeyを取得するかを決められる
  • inputStepで、どの情報をとってくるかを決めることができる？
    • axisだったら、1個前のfixBoardsとmoveBoardsをまとめてfixBoardsとしてとってくる
    • targetだったら、rotateAxisと、1個前のfixBoardsとmoveBoardsをまとめてfixBoardsとして取ってくる
      • leftBoarsとrightBoardsに分けているところがあるけど、そこを板の描画と同じところに持ってくる必要がある
    • foldの場合、fixBoardsとmoveBoardsを持ってくればいい？

ちょっと面倒なのが、
leftBoards, rightBoards, isMoveBoardsRightという各stepでのみ必要な変数
こいつらは、モデルの保存には必要ないが、状態を行き来する際には必要

だから、それらの変数も同時に管理しておいて、保存の時だけfilterするようにするのが一番わかりやすいよね

[yutteee]

• procedureIndexで、objectのどのkeyを取得するかを決められる
• inputStepで、どの情報をとってくるかを決めることができる？
  • axisだったら、1個前のfixBoardsとmoveBoardsをまとめてとってくる
  • targetだったら、rightBoardsとleftBoardsをもってくる
  • foldの場合、fixBoardsとmoveBoardsをもってくる