akfatimeline 1.0.6 → 1.2.0

package/src/hooks/useEventDragDrop.js

@@ -1,126 +1,126 @@
-import { useState } from "react";
-
-const useEventDragDrop = (events, setEvents, setDropInfo) => {
-  const [draggingEvent, setDraggingEvent] = useState(null);
-  const [dragOffset, setDragOffset] = useState(0);
-  const [mode, setMode] = useState(null); // "drag" veya "extend"
-
-  const handleDragStart = (event, eventId) => {
-    if (mode === "extend") return; // Uzatma modundaysa taşıma işlemini başlatma
-
-    event.stopPropagation();
-
-    const eventElement = event.target;
-    const eventRect = eventElement.getBoundingClientRect();
-    const offset = event.clientX - eventRect.left;
-
-    setDraggingEvent(eventId);
-    setDragOffset(offset);
-    setMode("drag"); // Modu taşıma olarak ayarla
-
-    const draggedEvent = events.find((evt) => evt.id === eventId);
-    if (draggedEvent) {
-      console.log("Dragging Event Start:", draggedEvent.startDate);
-      console.log("Dragging Event End:", draggedEvent.endDate);
-    }
-  };
-
-  const handleExtendStart = (event, eventId) => {
-    event.stopPropagation();
-
-    setDraggingEvent(eventId);
-    setMode("extend"); // Modu uzatma olarak ayarla
-  };
-
-  const handleDragOver = (event) => {
-    event.preventDefault();
-  };
-
-  const handleDrop = (event, resourceId, targetDate) => {
-    event.preventDefault();
-  
-    if (mode === "drag" && draggingEvent) {
-      const draggedEvent = events.find((evt) => evt.id === draggingEvent);
-  
-      if (draggedEvent) {
-        const duration = draggedEvent.endDate - draggedEvent.startDate;
-        const cellWidth = event.target.offsetWidth || 30;
-        const offsetDays = Math.floor(dragOffset / cellWidth);
-        const newStartDate = new Date(targetDate.getTime() - offsetDays * 24 * 60 * 60 * 1000);
-        const newEndDate = new Date(newStartDate.getTime() + duration);
-  
-        // Callback kontrolü ve loglama
-        if (setDropInfo) {
-          console.log("setDropInfo is being called with:", {
-            id: draggingEvent,
-            newResourceId: resourceId,
-            newStartDate,
-            newEndDate,
-          });
-          setDropInfo({
-            id: draggingEvent,
-            newResourceId: resourceId,
-            newStartDate,
-            newEndDate,
-          });
-        }
-  
-        // Event güncellemesi
-        setEvents((prevEvents) =>
-          prevEvents.map((evt) =>
-            evt.id === draggingEvent
-              ? {
-                  ...evt,
-                  resourceId,
-                  startDate: newStartDate,
-                  endDate: newEndDate,
-                }
-              : evt
-          )
-        );
-      }
-    }
-  
-    setDraggingEvent(null);
-    setDragOffset(0);
-    setMode(null);
-  };
-  
-
-  const handleExtend = (event, eventId, newEndDate) => {
-    if (mode !== "extend" || draggingEvent !== eventId) return;
-
-    setEvents((prevEvents) =>
-      prevEvents.map((evt) =>
-        evt.id === eventId
-          ? {
-              ...evt,
-              endDate: newEndDate,
-            }
-          : evt
-      )
-    );
-
-    console.log("Extended Event ID:", eventId, "New End Date:", newEndDate);
-
-    setDraggingEvent(null);
-    setMode(null);
-  };
-
-  const handleDragEnd = () => {
-    setDraggingEvent(null);
-    setDragOffset(0);
-    setMode(null);
-  };
-
-  return {
-    handleDragStart,
-    handleExtendStart,
-    handleDragOver,
-    handleDrop,
-    handleExtend,
-    handleDragEnd,
-  };
-};
-
-export default useEventDragDrop;
+import { useState } from "react";
+
+const useEventDragDrop = (events, setEvents, setDropInfo) => {
+  const [draggingEvent, setDraggingEvent] = useState(null);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [mode, setMode] = useState(null); // "drag" veya "extend"
+
+  const handleDragStart = (event, eventId) => {
+    if (mode === "extend") return; // Uzatma modundaysa taşıma işlemini başlatma
+
+    event.stopPropagation();
+
+    const eventElement = event.target;
+    const eventRect = eventElement.getBoundingClientRect();
+    const offset = event.clientX - eventRect.left;
+
+    setDraggingEvent(eventId);
+    setDragOffset(offset);
+    setMode("drag"); // Modu taşıma olarak ayarla
+
+    const draggedEvent = events.find((evt) => evt.id === eventId);
+    if (draggedEvent) {
+      console.log("Dragging Event Start:", draggedEvent.startDate);
+      console.log("Dragging Event End:", draggedEvent.endDate);
+    }
+  };
+
+  const handleExtendStart = (event, eventId) => {
+    event.stopPropagation();
+
+    setDraggingEvent(eventId);
+    setMode("extend"); // Modu uzatma olarak ayarla
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event, resourceId, targetDate) => {
+    event.preventDefault();
+  
+    if (mode === "drag" && draggingEvent) {
+      const draggedEvent = events.find((evt) => evt.id === draggingEvent);
+  
+      if (draggedEvent) {
+        const duration = draggedEvent.endDate - draggedEvent.startDate;
+        const cellWidth = event.target.offsetWidth || 30;
+        const offsetDays = Math.floor(dragOffset / cellWidth);
+        const newStartDate = new Date(targetDate.getTime() - offsetDays * 24 * 60 * 60 * 1000);
+        const newEndDate = new Date(newStartDate.getTime() + duration);
+  
+        // Callback kontrolü ve loglama
+        if (setDropInfo) {
+          console.log("setDropInfo is being called with:", {
+            id: draggingEvent,
+            newResourceId: resourceId,
+            newStartDate,
+            newEndDate,
+          });
+          setDropInfo({
+            id: draggingEvent,
+            newResourceId: resourceId,
+            newStartDate,
+            newEndDate,
+          });
+        }
+  
+        // Event güncellemesi
+        setEvents((prevEvents) =>
+          prevEvents.map((evt) =>
+            evt.id === draggingEvent
+              ? {
+                  ...evt,
+                  resourceId,
+                  startDate: newStartDate,
+                  endDate: newEndDate,
+                }
+              : evt
+          )
+        );
+      }
+    }
+  
+    setDraggingEvent(null);
+    setDragOffset(0);
+    setMode(null);
+  };
+  
+
+  const handleExtend = (event, eventId, newEndDate) => {
+    if (mode !== "extend" || draggingEvent !== eventId) return;
+
+    setEvents((prevEvents) =>
+      prevEvents.map((evt) =>
+        evt.id === eventId
+          ? {
+              ...evt,
+              endDate: newEndDate,
+            }
+          : evt
+      )
+    );
+
+    console.log("Extended Event ID:", eventId, "New End Date:", newEndDate);
+
+    setDraggingEvent(null);
+    setMode(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggingEvent(null);
+    setDragOffset(0);
+    setMode(null);
+  };
+
+  return {
+    handleDragStart,
+    handleExtendStart,
+    handleDragOver,
+    handleDrop,
+    handleExtend,
+    handleDragEnd,
+  };
+};
+
+export default useEventDragDrop;

package/src/hooks/useEventManagement.js

@@ -0,0 +1,173 @@
+import { useState, useCallback, useRef } from 'react';
+
+/**
+ * Event management hook - handles selection, undo/redo, copy/paste
+ * @param {Array} initialEvents - Initial events array
+ * @param {Function} onEventsChange - Callback when events change
+ * @param {number} maxHistorySize - Maximum undo/redo history size
+ */
+const useEventManagement = (initialEvents = [], onEventsChange = null, maxHistorySize = 50) => {
+  const [events, setEvents] = useState(initialEvents);
+  const [selectedEvents, setSelectedEvents] = useState([]);
+  const [copiedEvents, setCopiedEvents] = useState([]);
+  
+  // Undo/Redo history
+  const historyRef = useRef([]);
+  const historyIndexRef = useRef(-1);
+  const isUndoRedoRef = useRef(false);
+
+  // Update events and add to history
+  const updateEvents = useCallback((newEvents, addToHistory = true) => {
+    setEvents(newEvents);
+    
+    if (onEventsChange) {
+      onEventsChange(newEvents);
+    }
+
+    // Add to history (if not undo/redo operation)
+    if (addToHistory && !isUndoRedoRef.current) {
+      const history = historyRef.current;
+      const historyIndex = historyIndexRef.current;
+      
+      // Remove any history after current index (if we're not at the end)
+      const newHistory = history.slice(0, historyIndex + 1);
+      
+      // Add new state
+      newHistory.push([...newEvents]);
+      
+      // Limit history size
+      if (newHistory.length > maxHistorySize) {
+        newHistory.shift();
+      } else {
+        historyIndexRef.current = newHistory.length - 1;
+      }
+      
+      historyRef.current = newHistory;
+    }
+    
+    isUndoRedoRef.current = false;
+  }, [onEventsChange, maxHistorySize]);
+
+  // Select event
+  const selectEvent = useCallback((eventId, multiSelect = false) => {
+    setSelectedEvents((prev) => {
+      if (multiSelect) {
+        // Toggle selection
+        if (prev.includes(eventId)) {
+          return prev.filter((id) => id !== eventId);
+        } else {
+          return [...prev, eventId];
+        }
+      } else {
+        // Single selection
+        return [eventId];
+      }
+    });
+  }, []);
+
+  // Clear selection
+  const clearSelection = useCallback(() => {
+    setSelectedEvents([]);
+  }, []);
+
+  // Delete selected events
+  const deleteSelectedEvents = useCallback(() => {
+    if (selectedEvents.length === 0) return;
+    
+    const newEvents = events.filter((event) => !selectedEvents.includes(event.id));
+    updateEvents(newEvents);
+    setSelectedEvents([]);
+  }, [events, selectedEvents, updateEvents]);
+
+  // Copy selected events
+  const copySelectedEvents = useCallback(() => {
+    if (selectedEvents.length === 0) return;
+    
+    const eventsToCopy = events.filter((event) => selectedEvents.includes(event.id));
+    setCopiedEvents(eventsToCopy);
+  }, [events, selectedEvents]);
+
+  // Paste copied events
+  const pasteEvents = useCallback((targetDate = null, targetResourceId = null) => {
+    if (copiedEvents.length === 0) return;
+    
+    const newEvents = [...events];
+    const baseDate = targetDate || new Date();
+    
+    copiedEvents.forEach((event) => {
+      const newEvent = {
+        ...event,
+        id: `${event.id}-copy-${Date.now()}-${Math.random()}`,
+        startDate: targetDate 
+          ? new Date(targetDate)
+          : new Date(event.startDate),
+        endDate: targetDate
+          ? new Date(targetDate.getTime() + (new Date(event.endDate).getTime() - new Date(event.startDate).getTime()))
+          : new Date(event.endDate),
+        resourceId: targetResourceId || event.resourceId,
+      };
+      newEvents.push(newEvent);
+    });
+    
+    updateEvents(newEvents);
+  }, [events, copiedEvents, updateEvents]);
+
+  // Undo
+  const undo = useCallback(() => {
+    const history = historyRef.current;
+    const currentIndex = historyIndexRef.current;
+    
+    if (currentIndex > 0) {
+      isUndoRedoRef.current = true;
+      historyIndexRef.current = currentIndex - 1;
+      const previousState = history[currentIndex - 1];
+      setEvents([...previousState]);
+      
+      if (onEventsChange) {
+        onEventsChange([...previousState]);
+      }
+    }
+  }, [onEventsChange]);
+
+  // Redo
+  const redo = useCallback(() => {
+    const history = historyRef.current;
+    const currentIndex = historyIndexRef.current;
+    
+    if (currentIndex < history.length - 1) {
+      isUndoRedoRef.current = true;
+      historyIndexRef.current = currentIndex + 1;
+      const nextState = history[currentIndex + 1];
+      setEvents([...nextState]);
+      
+      if (onEventsChange) {
+        onEventsChange([...nextState]);
+      }
+    }
+  }, [onEventsChange]);
+
+  // Initialize history
+  if (historyRef.current.length === 0) {
+    historyRef.current = [[...events]];
+    historyIndexRef.current = 0;
+  }
+
+  return {
+    events,
+    setEvents: updateEvents,
+    selectedEvents,
+    selectEvent,
+    clearSelection,
+    deleteSelectedEvents,
+    copySelectedEvents,
+    pasteEvents,
+    copiedEvents,
+    undo,
+    redo,
+    canUndo: historyIndexRef.current > 0,
+    canRedo: historyIndexRef.current < historyRef.current.length - 1,
+  };
+};
+
+export default useEventManagement;
+

package/src/hooks/useEventSelection.js

@@ -0,0 +1,82 @@
+// src/hooks/useEventSelection.js
+
+import { useState, useCallback } from 'react';
+
+/**
+ * Event seçimi için hook
+ * @param {Array} events - Event listesi
+ * @returns {Object} - {selectedEvents, selectEvent, deselectEvent, toggleSelection, clearSelection, isSelected}
+ */
+export const useEventSelection = (events = []) => {
+  const [selectedEvents, setSelectedEvents] = useState([]);
+
+  const selectEvent = useCallback((eventId) => {
+    setSelectedEvents(prev => {
+      if (prev.includes(eventId)) {
+        return prev;
+      }
+      return [...prev, eventId];
+    });
+  }, []);
+
+  const deselectEvent = useCallback((eventId) => {
+    setSelectedEvents(prev => prev.filter(id => id !== eventId));
+  }, []);
+
+  const toggleSelection = useCallback((eventId) => {
+    setSelectedEvents(prev => {
+      if (prev.includes(eventId)) {
+        return prev.filter(id => id !== eventId);
+      }
+      return [...prev, eventId];
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedEvents([]);
+  }, []);
+
+  const selectRange = useCallback((startEventId, endEventId) => {
+    const startIndex = events.findIndex(e => e.id === startEventId);
+    const endIndex = events.findIndex(e => e.id === endEventId);
+    
+    if (startIndex === -1 || endIndex === -1) {
+      return;
+    }
+    
+    const minIndex = Math.min(startIndex, endIndex);
+    const maxIndex = Math.max(startIndex, endIndex);
+    const rangeEvents = events.slice(minIndex, maxIndex + 1).map(e => e.id);
+    
+    setSelectedEvents(prev => {
+      const newSelection = [...prev];
+      rangeEvents.forEach(id => {
+        if (!newSelection.includes(id)) {
+          newSelection.push(id);
+        }
+      });
+      return newSelection;
+    });
+  }, [events]);
+
+  const isSelected = useCallback((eventId) => {
+    return selectedEvents.includes(eventId);
+  }, [selectedEvents]);
+
+  const selectAll = useCallback(() => {
+    setSelectedEvents(events.map(e => e.id));
+  }, [events]);
+
+  return {
+    selectedEvents,
+    selectEvent,
+    deselectEvent,
+    toggleSelection,
+    clearSelection,
+    selectRange,
+    isSelected,
+    selectAll,
+    selectedCount: selectedEvents.length,
+  };
+};
+

package/src/hooks/useExtendEvent.js

@@ -1,28 +1,28 @@
-import { useCallback } from "react";
-
-const useExtendEvent = (events, setEvents) => {
-  /**
-   * Etkinliği uzatmak veya kısaltmak için kullanılan işlev.
-   * @param {number} eventId - Güncellenmesi gereken etkinliğin ID'si.
-   * @param {Date} newEndDate - Etkinliğin yeni bitiş tarihi.
-   */
-  const extendEvent = useCallback(
-    (eventId, newEndDate) => {
-      setEvents((prevEvents) =>
-        prevEvents.map((event) =>
-          event.id === eventId
-            ? {
-                ...event,
-                endDate: newEndDate, // Yeni bitiş tarihini günceller
-              }
-            : event // Diğer etkinlikler aynı kalır
-        )
-      );
-    },
-    [setEvents]
-  );
-
-  return { extendEvent };
-};
-
-export default useExtendEvent;
+import { useCallback } from "react";
+
+const useExtendEvent = (events, setEvents) => {
+  /**
+   * Etkinliği uzatmak veya kısaltmak için kullanılan işlev.
+   * @param {number} eventId - Güncellenmesi gereken etkinliğin ID'si.
+   * @param {Date} newEndDate - Etkinliğin yeni bitiş tarihi.
+   */
+  const extendEvent = useCallback(
+    (eventId, newEndDate) => {
+      setEvents((prevEvents) =>
+        prevEvents.map((event) =>
+          event.id === eventId
+            ? {
+                ...event,
+                endDate: newEndDate, // Yeni bitiş tarihini günceller
+              }
+            : event // Diğer etkinlikler aynı kalır
+        )
+      );
+    },
+    [setEvents]
+  );
+
+  return { extendEvent };
+};
+
+export default useExtendEvent;