'use client'; import React from 'react'; import ReactFlow, { Background, // Controls, BackgroundVariant, ReactFlowProvider, Node, ReactFlowInstance, Edge, useKeyPress, SelectionMode } from 'reactflow'; import 'reactflow/dist/style.css'; import { CUSTOM_DOTBASE_NODES } from '@/components/dashboard/nodes/types/nodeTypes'; import UtilBar from '@/components/dashboard/main/UtilBar'; import Workspace from '@/components/dashboard/main/Workspace'; import useDnDStore from '@/stores/useDnDStore'; import Image from 'next/image'; import projectLogo from '@/public/assets/logo/full_wlogo.png'; import { X } from 'lucide-react'; const Dashboard = () => { const { nodes, edges, addNode, addEdge, onNodesChange, onEdgesChange, setInstance, deleteElements, duplicateSelection, setSelectedElements, undo, redo } = useDnDStore(); // Keyboard shortcuts const deletePressed = useKeyPress(['Backspace', 'Delete']); const ctrlPressed = useKeyPress(['Control', 'Meta']); const shiftPressed = useKeyPress('Shift'); const cPressed = useKeyPress('c'); // const vPressed = useKeyPress('v'); const zPressed = useKeyPress('z'); const yPressed = useKeyPress('y'); const [showTutorial, setShowTutorial] = React.useState(false); const videoRef = React.useRef(null); React.useEffect(() => { const tutorialWatched = localStorage.getItem('tutorialWatched'); if (!tutorialWatched) { setShowTutorial(true); } }, []); // Auto-play video when modal opens React.useEffect(() => { if (showTutorial && videoRef.current) { videoRef.current.play().catch(error => { console.log('Video autoplay failed:', error); }); } }, [showTutorial]); // Rest of your existing keyboard shortcuts and handlers... const handleCloseTutorial = () => { if (videoRef.current) { videoRef.current.pause(); } setShowTutorial(false); }; const handleDontShowAgain = () => { if (videoRef.current) { videoRef.current.pause(); } localStorage.setItem('tutorialWatched', 'true'); setShowTutorial(false); }; React.useEffect(() => { if (deletePressed) { deleteElements(); } }, [deletePressed, deleteElements]); React.useEffect(() => { if (ctrlPressed && cPressed) { duplicateSelection(); } if (ctrlPressed && zPressed) { if (shiftPressed || yPressed) { redo(); } else { undo(); } } }, [ctrlPressed, cPressed, zPressed, yPressed, shiftPressed, duplicateSelection, undo, redo]); const onInit = React.useCallback((instance: ReactFlowInstance) => { setInstance(instance); }, [setInstance]); const onDragOver = React.useCallback((event: React.DragEvent) => { event.preventDefault(); event.dataTransfer.dropEffect = 'move'; }, []); const onDrop = React.useCallback((event: React.DragEvent) => { event.preventDefault(); const reactFlowBounds = event.currentTarget.getBoundingClientRect(); const position = { x: event.clientX - reactFlowBounds.left, y: event.clientY - reactFlowBounds.top }; try { const nodeData = JSON.parse(event.dataTransfer.getData('application/reactflow')); const newNode: Node = { ...nodeData, position, data: { ...nodeData.data, label: nodeData.data?.label || nodeData.type }, }; addNode(newNode); } catch (error) { console.error('Error adding new node:', error); } }, [addNode]); const onSelectionChange = React.useCallback( (params: { nodes: Node[]; edges: Edge[] }) => { setSelectedElements(params.nodes, params.edges); }, [setSelectedElements] ); return (
{/* Logo */}
Project Logo
setShowTutorial(true)} /> {/* */} {showTutorial && (

Getting Started with DotBase

Quick Tips

  • Backspace Delete selected nodes
  • Ctrl + Click Select Multiple nodes
)}
); }; export default Dashboard;