feat: add config node transition

src/flow/Node/NodeConfig/CharacterImageConfig.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+interface Props {}
+
+export default function CharacterImageConfig({}: Props) {
+  return <div></div>
+}

src/flow/Node/NodeConfig/NodeConfig.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback, useState } from 'react'
+import {
+  INodeType,
+  useFlowNodesEdges,
+} from '../../../store/useFlowNodesEdges.ts'
+import { node } from 'globals'
+import TopicConfig from '@/flow/Node/NodeConfig/TopicConfig.tsx'
+import SettingConfig from '@/flow/Node/NodeConfig/SettingConfig.tsx'
+import CharacterImageConfig from '@/flow/Node/NodeConfig/CharacterImageConfig.tsx'
+import TranslateConfig from '@/flow/Node/NodeConfig/TranslateConfig.tsx'
+import { useOnSelectionChange } from '@xyflow/react'
+import { LucideDribbble } from 'lucide-react'
+import { twMerge } from 'tailwind-merge'
+interface Props {}
+
+const TopicConfigNodeType: INodeType[] = ['TopicNode']
+const SettingConfigNodeType: INodeType[] = [
+  'MainNode',
+  'SupportNode',
+  'SettingNode',
+  'CharacterNode',
+  'ChapterNode',
+  'TopicNode',
+  'BackgroundNode',
+  'CombatNode',
+  'WorldviewNode',
+  'StoryNode',
+]
+const CharacterImageConfigNodeType: INodeType[] = ['CharacterImageNode']
+const TranslateConfigNodeType: INodeType[] = ['TranslateNode']
+
+function getConfig(nodeType: INodeType) {
+  if (TopicConfigNodeType.includes(nodeType)) return TopicConfig
+  if (SettingConfigNodeType.includes(nodeType)) return SettingConfig
+  if (CharacterImageConfigNodeType.includes(nodeType))
+    return CharacterImageConfig
+  if (TranslateConfigNodeType.includes(nodeType)) return TranslateConfig
+  throw Error('no Such node type')
+}
+
+export default function NodeConfig({}: Props) {
+  const { nodes, edges } = useFlowNodesEdges()
+  const [showWiderRing, setShowWiderRing] = useState(false)
+  const activeNode = nodes.filter((node) => {
+    return node.selected
+  })[0]
+
+  const onChange = useCallback(({}) => {
+    const timer = setTimeout(() => {
+      setShowWiderRing(false)
+      clearTimeout(timer)
+    }, 300)
+    setShowWiderRing(true)
+  }, [])
+
+  useOnSelectionChange({
+    onChange,
+  })
+
+  const Config = getConfig(activeNode.type)
+  return (
+    <div
+      className={twMerge(
+        'w-[300px] h-[600px] rounded-xl ring-8 bg-red-300',
+        'transition-shadow',
+        showWiderRing && 'ring-[15px]',
+      )}
+    >
+      <Config></Config>
+    </div>
+  )
+}

src/flow/Node/NodeConfig/SettingConfig.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+interface Props {}
+
+export default function SettingConfig({}: Props) {
+  return <div>s</div>
+}

src/flow/Node/NodeConfig/TopicConfig.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+interface Props {}
+
+export default function TopicConfig({}: Props) {
+  return <div></div>
+}

src/flow/Node/NodeConfig/TranslateConfig.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+interface Props {}
+
+export default function TranslateConfig({}: Props) {
+  return <div></div>
+}

src/flow/Node/WorldviewNode/BackgroundNode/BackgroundNode.tsx

@@ -3,7 +3,6 @@ import { Handle, Position, useNodeId, useReactFlow, Node } from '@xyflow/react'
 import { addTranslateNode } from '../../TranslateNode/addTranslateNode.ts'
 import { useHasChild } from '../../../../hooks/useHasChild.ts'
 
-import TruthSlider from './TruthSlider.tsx'
 export interface IBackgroundNode extends Node {
   type: 'BackgroundNode'
   data: Record<string, any>
@@ -18,11 +17,10 @@ export default function BackgroundNode() {
   return (
     <div
       className={twMerge(
-        'w-[200px] h-[200px] grid place-items-center bg-[#b494f4] border-[#7492f7] border-2 rounded-xl text-white',
+        'w-[200px] h-[100px] grid place-items-center bg-[#b494f4] border-[#7492f7] border-2 rounded-xl text-white',
       )}
     >
       <div className={'font-bold text-xl'}>{node.data.title}</div>
-      <TruthSlider></TruthSlider>
       {!hasChild && (
         <button
           onClick={() => {

src/flow/NodeContainer.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react'
-import { useNodeId, useReactFlow } from '@xyflow/react'
+import React, { ReactNode, useCallback, useState } from 'react'
+import { useNodeId, useOnSelectionChange, useReactFlow } from '@xyflow/react'
 import { ICustomNode } from '../store/useFlowNodesEdges.ts'
 import { setNodeSelected } from '../store/setNodeSelected.ts'
 import { twMerge } from 'tailwind-merge'
@@ -11,13 +11,24 @@ export default function NodeContainer({ children }: Props) {
   const { getNode } = useReactFlow()
   const id = useNodeId()!
   const node = getNode(id)! as unknown as ICustomNode
+  const [showWiderRing, setShowWiderRing] = useState(false)
 
   return (
     <div
       onClick={() => {
         setNodeSelected(id)
+        setShowWiderRing(true)
+        const timer = setTimeout(() => {
+          setShowWiderRing(false)
+          clearTimeout(timer)
+        }, 300)
       }}
-      className={twMerge(node.selected && 'ring-8 rounded-xl')}
+      className={twMerge(
+        node.selected && 'ring-4 rounded-xl',
+        'cursor-pointer',
+        'transition-shadow',
+        showWiderRing && 'ring-8',
+      )}
     >
       {children}
     </div>