ツール系のStateをJotaiに置き換え #264

front/package.json

@@ -38,6 +38,7 @@
     "date-fns-tz": "^3.2.0",
     "dotenv": "^16.5.0",
     "drizzle-orm": "^0.44.0",
+    "jotai": "^2.12.5",
     "lucide-react": "^0.511.0",
     "md5": "^2.3.0",
     "next": "15.3.2",

front/src/components/organisms/event/venueedit/palette/ColorPalette.tsx

@@ -2,20 +2,16 @@
 
 import ColorAddButton from '@/components/organisms/event/venueedit/palette/ColorAddButton'
 import ColorButton from '@/components/organisms/event/venueedit/palette/ColorButton'
-import { VenueEditTool } from '@/types/tool'
-import { isDrawingTool } from '@/lib/event/venueedit/subToolSelection'
 import { Color } from 'react-color'
 import ToggleToEraseButton from '@/components/organisms/event/venueedit/palette/ToggleToEraseButton'
+import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
 interface ColorPaletteProps {
   colors: Color[]
   selectedColor: Color
   onColorSelect: (color: Color) => void
   onAddColor?: (color: Color) => void
   onDeleteColor: (color: Color) => void
-  selectedTool: VenueEditTool
-  toggleToGenerateTool: () => void
-  toggleToEraseTool : () => void
 }
 
 export default function ColorPalette({
@@ -24,24 +20,22 @@ export default function ColorPalette({
   onColorSelect,
   onAddColor,
   onDeleteColor,
-  selectedTool,
-  toggleToGenerateTool,
-  toggleToEraseTool
 }: Readonly<ColorPaletteProps>) {
+  const { toggleToGenerateTool, isDrawingTool } = useSubToolSelection()
 
   return (
     <div className="grid grid-cols-12 lg:grid-cols-4 xl:grid-cols-8 gap-2">
       {colors.map((color) => (
         <ColorButton
           key={color.toString()}
           color={color}
-          isSelected={isDrawingTool(selectedTool) && selectedColor === color}
+          isSelected={isDrawingTool && selectedColor === color}
           onClick={() => {onColorSelect(color); toggleToGenerateTool()}} // 色の変更とツールを変更を同時に行う
           onDelete={() => onDeleteColor(color)}
         />
       ))}
       {onAddColor && <ColorAddButton onAddColor={onAddColor} />}
-      {toggleToEraseTool && <ToggleToEraseButton toggleToEraseTool={toggleToEraseTool} isSelected={!isDrawingTool(selectedTool)}/>}
+      {<ToggleToEraseButton isSelected={!isDrawingTool} />}
     </div>
   )
 } 

front/src/components/organisms/event/venueedit/palette/ColorSingleSelector.tsx

@@ -5,28 +5,22 @@ import { useState } from 'react'
 import ColorPickerDialog from '@/components/organisms/event/venueedit/palette/ColorPickerDialog'
 import ToggleToGenerateButton from '@/components/organisms/event/venueedit/palette/ToggleToGenerateButton'
 import ToggleToEraseButton from '@/components/organisms/event/venueedit/palette/ToggleToEraseButton'
-import { VenueEditTool } from '@/types/tool'
-import { isDrawingTool } from '@/lib/event/venueedit/subToolSelection'
+import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
 interface ColorSingleSelectorProps {
   selectedColor: Color
   selectedColorBackGround: Color
   setSelectedColor: (color: Color) => void
   setSelectedColorBackGround: (color: Color) => void
-  toggleToGenerateTool: () => void
-  toggleToEraseTool: () => void
-  selectedTool: VenueEditTool
 }
 
 export default function ColorSingleSelector({
   selectedColor,
   selectedColorBackGround,  
   setSelectedColor,
   setSelectedColorBackGround,
-  toggleToGenerateTool,
-  toggleToEraseTool,
-  selectedTool
 }: Readonly<ColorSingleSelectorProps>) {
+  const { isDrawingTool } = useSubToolSelection()
   const [isTextColorOpen, setIsTextColorOpen] = useState(false)
   const [isBackgroundColorOpen, setIsBackgroundColorOpen] = useState(false)
 
@@ -42,14 +36,12 @@ export default function ColorSingleSelector({
     <>
       <div className="flex gap-2 mb-4 justify-center">
         <ToggleToGenerateButton
-          onClick={toggleToGenerateTool}
           className="w-1/4 h-8"
-          isSelected={isDrawingTool(selectedTool)}
+          isSelected={isDrawingTool}
         />
         <ToggleToEraseButton
-          toggleToEraseTool={toggleToEraseTool}
           className="w-1/4 h-8"
-          isSelected={!isDrawingTool(selectedTool)}
+          isSelected={!isDrawingTool}
         />
       </div>
       <div className="grid grid-cols-4 lg:grid-cols-2 gap-2 justify-center">

front/src/components/organisms/event/venueedit/palette/ToggleToEraseButton.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import XButton from '@/components/molecules/button/XButton'
+import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
 /**
  * 削除系のツールに切り替えるボタンコンポーネント
@@ -26,15 +27,12 @@ import XButton from '@/components/molecules/button/XButton'
  * />
  * ```
  * 
- * @param toggleToEraseTool - ボタンクリック時に実行されるコールバック関数
  * @param disabled - ボタンを無効化するかどうか
  * @param isSelected - ボタンが選択されているかどうか
  * @param className - 追加のクラス名
  * @returns バツ記号を表示するボタンコンポーネント
  */
 interface ToggleToEraseButtonProps {
-  /** ボタンクリック時に実行されるコールバック関数 */
-  toggleToEraseTool: () => void
   /** ボタンを無効化するかどうか */
   disabled?: boolean
   /** ボタンが選択されているかどうか */
@@ -43,7 +41,8 @@ interface ToggleToEraseButtonProps {
   className?: string
 }
 
-export default function ToggleToEraseButton({ toggleToEraseTool, disabled, isSelected, className }: Readonly<ToggleToEraseButtonProps>) {
+export default function ToggleToEraseButton({ disabled, isSelected, className }: Readonly<ToggleToEraseButtonProps>) {
+  const { toggleToEraseTool } = useSubToolSelection()
   return (
     <XButton
       onClick={toggleToEraseTool}

front/src/components/organisms/event/venueedit/palette/ToggleToGenerateButton.tsx

@@ -1,4 +1,5 @@
 import PlusButton from '@/components/molecules/button/PlusButton'
+import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
 /**
  * 生成系ツールに切り替えるボタンコンポーネント
@@ -9,22 +10,18 @@ import PlusButton from '@/components/molecules/button/PlusButton'
  * 使用例:
  * ```tsx
  * <ToggleToGenerateButton 
- *   onClick={() => console.log('text add selected')}
  *   disabled={false}
  *   isSelected={true}
  *   className="w-8 h-8"
  * />
  * ```
  * 
- * @param onClick - ボタンクリック時に実行されるコールバック関数
  * @param disabled - ボタンを無効化するかどうか
  * @param isSelected - ボタンが選択されているかどうか
  * @param className - ボタンに適用する追加のクラス名
  * @returns テキスト追加選択ボタンコンポーネント
  */
 interface ToggleToGenerateButtonProps {
-  /** ボタンクリック時に実行されるコールバック関数 */
-  onClick: () => void
   /** ボタンを無効化するかどうか */
   disabled?: boolean
   /** ボタンが選択されているかどうか */
@@ -42,28 +39,26 @@ interface ToggleToGenerateButtonProps {
  * 使用例:
  * ```tsx
  * <ToggleToGenerateButton 
- *   onClick={() => console.log('text add selected')}
  *   disabled={false}
  *   isSelected={true}
  *   className="w-8 h-8"
  * />
  * ```
  * 
- * @param onClick - ボタンクリック時に実行されるコールバック関数
  * @param disabled - ボタンを無効化するかどうか
  * @param isSelected - ボタンが選択されているかどうか
  * @param className - ボタンに適用する追加のクラス名
  * @returns テキスト追加選択ボタンコンポーネント
  */
-export default function ToggleToGenerateButton({ 
-  onClick, 
+export default function ToggleToGenerateButton({
   disabled,
   isSelected,
   className 
 }: Readonly<ToggleToGenerateButtonProps>) {
+  const { toggleToGenerateTool } = useSubToolSelection()
   return (
     <PlusButton
-      onClick={onClick}
+      onClick={toggleToGenerateTool}
       disabled={disabled}
       className={`${isSelected ? "ring-2 ring-blue-500 ring-offset-2" : ""} ${className || ""}`}
     />

front/src/components/organisms/event/venueedit/tools/ToolButtonGroup.tsx

@@ -1,20 +1,16 @@
 import { EDITOR_TOOL_PAIR_TREE, EditorToolPairKey, VenueEditTool } from '@/types/tool'
 import MonoClomeButton from '@/components/atoms/button/MonoClomeButton'
 import { useCallback } from 'react'
+import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
-interface ToolButtonGroupProps {
-  selectedTool: VenueEditTool
-  setDrawToolFromToolKey: (toolKey: keyof typeof EDITOR_TOOL_PAIR_TREE) => void
-}
 
 /**
  * ツールボタングループ
  * 
- * @param selectedTool 現在選択されているツール
- * @param setDrawToolFromToolKey ツール選択時のコールバック
  * @returns ツールボタングループ
  */
-export default function ToolButtonGroup({ selectedTool, setDrawToolFromToolKey }: Readonly<ToolButtonGroupProps>) {
+export default function ToolButtonGroup() {
+  const { selectedTool, setDrawToolFromToolKey } = useSubToolSelection()
 
   // 現在選択されているツールがどのツールタイプに属するかを求める関数
   const isSelected = useCallback((toolKey: EditorToolPairKey) => {

front/src/components/templates/event/venueedit/VenueEditorTemplate.tsx

@@ -8,7 +8,6 @@ import { useColorPalette } from '@/hooks/event/venueedit/submenu/useColorPalette
 import { useCanvasDraw } from '@/hooks/event/venueedit/useCanvasDraw'
 import TextDialog from '@/components/organisms/event/venueedit/text/TextDialog'
 import { EventVenueEditViewModel } from '@/types/event/viewmodel'
-import { useSubToolSelection } from '@/hooks/event/venueedit/useSubToolSelection'
 
 interface Props {
   eventVenueEditViewModel: EventVenueEditViewModel
@@ -20,13 +19,6 @@ interface Props {
  * @param eventVenueEditViewModel 会場編集ビューモデル
  */
 export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonly<Props>) {
-  const {
-    selectedTool,
-    toggleToGenerateTool,
-    toggleToEraseTool,
-    setDrawToolFromToolKey
-  } = useSubToolSelection()
-
   const { 
     selectedColor,
     setSelectedColor, 
@@ -56,7 +48,6 @@ export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonl
     isPendingForSave
   } = useCanvasDraw({
     selectedColor,
-    selectedTool,
     selectedColorBackGround,
     eventVenueEditViewModel,
   })
@@ -85,9 +76,6 @@ export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonl
           </div>
           <div className="col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-4">
             <VenueToolSubMenu 
-              selectedTool={selectedTool}
-              toggleToGenerateTool={toggleToGenerateTool}
-              toggleToEraseTool={toggleToEraseTool}
               selectedColor={selectedColor}
               setSelectedColor={setSelectedColor}
               selectedColorBackGround={selectedColorBackGround}
@@ -104,10 +92,7 @@ export default function VenueEditorTemplate({ eventVenueEditViewModel }: Readonl
             />
           </div>
           <div className="col-span-1 md:col-span-1 lg:col-span-8 xl:col-span-2">
-            <VenueToolSelectionMenu 
-              selectedTool={selectedTool} 
-              setDrawToolFromToolKey={setDrawToolFromToolKey}
-            />
+            <VenueToolSelectionMenu />
           </div>
         </div>
       </div>

front/src/components/templates/event/venueedit/VenueToolSelectionMenu.tsx

@@ -1,27 +1,19 @@
-import React from 'react'
-import {EditorToolPairKey, VenueEditTool } from '@/types/tool'
-import ToolButtonGroup from '@/components/organisms/event/venueedit/tools/ToolButtonGroup'
-
-interface VenueToolSelectionMenuProps {
-  selectedTool: VenueEditTool
-  setDrawToolFromToolKey: (toolKey: EditorToolPairKey) => void
-}
+import React from 'react';
+import ToolButtonGroup from '@/components/organisms/event/venueedit/tools/ToolButtonGroup';
 
 /**
  * ツール選択メニュー
- * 
- * @param selectedTool 現在選択されているツール
- * @param setDrawToolFromToolKey ツール選択時のコールバック
+ *
  * @returns ツール選択メニュー
  */
-export default function VenueToolSelectionMenu({ selectedTool, setDrawToolFromToolKey }: Readonly<VenueToolSelectionMenuProps>) {
+export default function VenueToolSelectionMenu() {
   return (
     <div className="h-full w-full flex flex-col justify-center items-center border border-gray-900 rounded-lg">
       <div className="h-full w-full flex flex-col">
         <div className="flex-1 overflow-y-auto p-4">
-          <ToolButtonGroup selectedTool={selectedTool} setDrawToolFromToolKey={setDrawToolFromToolKey} />
+          <ToolButtonGroup />
         </div>
       </div>
     </div>
-  )
+  );
 }