react-timelane 0.0.0

package/src/components/TimelineHeader/WeeksHeader.tsx

@@ -0,0 +1,63 @@
+import { MouseEvent, ReactElement } from "react";
+import { Pixels, TimeRange } from "../../types";
+import {
+  differenceInCalendarDays,
+  eachWeekOfInterval,
+  isSunday,
+  nextSunday,
+} from "date-fns";
+import { renderWeekHeader } from "./renderingUtils";
+
+interface WeeksHeaderProps {
+  range: TimeRange;
+  pixels: Pixels;
+  setFocusedDay?: (day: Date | null) => void;
+  render?: (firstDay: Date, lastDay: Date) => ReactElement;
+  onWeekClick?: (params: {
+    firstDay: Date;
+    lastDay: Date;
+    e: MouseEvent;
+  }) => void;
+}
+
+export function WeeksHeader({
+  range,
+  pixels,
+  setFocusedDay = () => {},
+  render = renderWeekHeader,
+  onWeekClick = () => undefined,
+}: WeeksHeaderProps) {
+  return (
+    <div className="timeline-header-weeks">
+      {eachWeekOfInterval(range, { weekStartsOn: 1 }).map((firstDay, index) => {
+        if (firstDay < range.start) {
+          firstDay = range.start;
+        }
+
+        let lastDay = isSunday(firstDay) ? firstDay : nextSunday(firstDay);
+
+        if (lastDay > range.end) {
+          lastDay = range.end;
+        }
+
+        const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
+
+        return (
+          <div
+            key={index}
+            className="timeline-header-week-label"
+            style={{
+              width: `${pixels.pixelsPerDay * numberOfDays}px`,
+            }}
+            onClick={(e) => {
+              onWeekClick({ firstDay, lastDay, e });
+              setFocusedDay(firstDay);
+            }}
+          >
+            {render(firstDay, lastDay)}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/TimelineHeader/index.ts

@@ -0,0 +1,9 @@
+export { DaysHeader } from "./DaysHeader";
+export { WeeksHeader } from "./WeeksHeader";
+export { MonthsHeader } from "./MonthsHeader";
+export { TimelineHeader } from "./TimelineHeader";
+export {
+  renderDayHeader,
+  renderMonthHeader,
+  renderWeekHeader,
+} from "./renderingUtils";

package/src/components/TimelineHeader/renderingUtils.tsx

@@ -0,0 +1,57 @@
+import { differenceInCalendarDays, format } from "date-fns";
+import { ReactElement } from "react";
+
+export function renderMonthHeader(firstDay: Date, lastDay: Date): ReactElement {
+  const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
+
+  return <>{numberOfDays > 4 ? format(firstDay, "LLLL yyyy") : <></>}</>;
+}
+
+export function renderWeekHeader(firstDay: Date, lastDay: Date): ReactElement {
+  const numberOfDays = differenceInCalendarDays(lastDay, firstDay) + 1;
+
+  const title = `KW ${format(firstDay, "w")} (${format(
+    firstDay,
+    "MM-dd"
+  )} - ${format(lastDay, "MM-dd")}`;
+
+  return (
+    <div title={title}>
+      {numberOfDays > 2 ? <>KW {format(firstDay, "w")}</> : <></>}
+    </div>
+  );
+  // return (
+  //   <Tooltip
+  //     arrow
+  //     title={
+  //       <div className="timeline-header-tooltip timeline-header-week-tooltip">
+  //         KW {format(firstDay, "w")} ({format(firstDay, "MM-dd")} -{" "}
+  //         {format(lastDay, "MM-dd")}
+  //       </div>
+  //     }
+  //     disableInteractive
+  //   >
+  //     <div>{numberOfDays > 2 ? <>KW {format(firstDay, "w")}</> : <></>}</div>
+  //   </Tooltip>
+  // );
+}
+
+export function renderDayHeader(day: Date): ReactElement {
+  const title = `${format(day, "yyyy-MM-dd")}`;
+
+  return <div title={title}>{format(day, "d")}</div>;
+
+  // return (
+  //   <Tooltip
+  //     arrow
+  //     title={
+  //       <div className="timeline-header-tooltip timeline-header-day-tooltip">
+  //         {format(day, "yyyy-MM-dd")}
+  //       </div>
+  //     }
+  //     disableInteractive
+  //   >
+  //     <div>{format(day, "d")}</div>
+  //   </Tooltip>
+  // );
+}

package/src/components/TimelineSelectionLayer.tsx

@@ -0,0 +1,179 @@
+import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { ItemId, Rectangle } from "../types";
+import { doOverlap } from "./core/CoreSwimlane/utils";
+import { MouseEvent } from "react";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+
+interface TimelineSelectionLayerProps {
+  onSelect: (selection: number[]) => void;
+}
+
+export function TimelineSelectionLayer({
+  children,
+  onSelect,
+}: PropsWithChildren<TimelineSelectionLayerProps>) {
+  const [selectedItemIds, setSelectedItemIds] = useState<ItemId[]>([]);
+
+  const callbackRef = useRef<EventListener | null>(null);
+
+  const [mouseDownPos, setMouseDownPos] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const [selectionRect, setSelectionRect] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  useEffect(() => {
+    return monitorForElements({
+      onDragStart: (args) => {
+        setSelectedItemIds([args.source.data.id as number]);
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    onSelect(selectedItemIds);
+  }, [onSelect, selectedItemIds]);
+
+  function handleMouseDown(e: MouseEvent) {
+    if (!e.shiftKey && !e.ctrlKey) {
+      setSelectedItemIds([]);
+    }
+    setMouseDownPos({ x: e.clientX, y: e.clientY });
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (mouseDownPos) {
+      const selectedRect = {
+        x: Math.min(e.clientX, mouseDownPos.x),
+        y: Math.min(e.clientY, mouseDownPos.y),
+        width: Math.abs(e.clientX - mouseDownPos.x),
+        height: Math.abs(e.clientY - mouseDownPos.y),
+      };
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      setSelectionRect({
+        ...selectedRect,
+        x: selectedRect.x - rect.left,
+        y: selectedRect.y - rect.top,
+      });
+
+      document.querySelectorAll(".timeline-drop-target").forEach((row) => {
+        if (doOverlap(row.getBoundingClientRect(), selectedRect)) {
+          row.querySelectorAll(".timeline-item").forEach((item) => {
+            if (doOverlap(item.getBoundingClientRect(), selectedRect)) {
+              item.classList.add("timeline-item-marked");
+            } else {
+              item.classList.remove("timeline-item-marked");
+            }
+          });
+        }
+      });
+
+      if (
+        (selectedRect.width > 5 || selectedRect.height > 5) &&
+        !callbackRef.current
+      ) {
+        callbackRef.current = captureClick;
+        window.addEventListener("click", captureClick, true);
+      }
+    }
+  }
+
+  function handleMouseUp(e: MouseEvent) {
+    if (mouseDownPos && selectionRect) {
+      e.stopPropagation();
+      const selectedRect = {
+        x: Math.min(e.clientX, mouseDownPos.x),
+        y: Math.min(e.clientY, mouseDownPos.y),
+        width: Math.abs(e.clientX - mouseDownPos.x),
+        height: Math.abs(e.clientY - mouseDownPos.y),
+      };
+
+      const ids: ItemId[] = Array.from(
+        document.querySelectorAll(".timeline-drop-target")
+      )
+        .filter((row) => doOverlap(row.getBoundingClientRect(), selectedRect))
+        .map((row) => Array.from(row.querySelectorAll(".timeline-item")))
+        .flatMap((elements) => elements)
+        .filter((el) => doOverlap(el.getBoundingClientRect(), selectedRect))
+        .map((el) => {
+          if (el instanceof HTMLElement) {
+            return Number.parseInt(el.dataset.timelineItemId || "-1");
+          } else {
+            return -1;
+          }
+        })
+        .filter((id) => id > 0);
+
+      if (ids.length > 0) {
+        if (e.shiftKey || e.ctrlKey) {
+          setSelectedItemIds((prev) => {
+            return Array.from(new Set([...prev, ...ids]));
+          });
+        } else {
+          setSelectedItemIds(ids);
+        }
+      }
+
+      document.querySelectorAll(".timeline-item-marked").forEach((el) => {
+        el.classList.remove("timeline-item-marked");
+      });
+    }
+
+    setMouseDownPos(null);
+    setSelectionRect(null);
+
+    requestAnimationFrame(() => {
+      if (callbackRef.current && callbackRef.current !== null) {
+        window.removeEventListener("click", callbackRef.current, true);
+        callbackRef.current = null;
+      }
+    });
+  }
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      style={{
+        position: "relative",
+      }}
+    >
+      {selectionRect && <MouseSelectionIndicator rect={selectionRect} />}
+      {children}
+    </div>
+  );
+}
+
+const captureClick = (e: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+interface MouseSelectionIndicatorProps {
+  rect: Rectangle;
+}
+
+function MouseSelectionIndicator({ rect }: MouseSelectionIndicatorProps) {
+  return (
+    <div
+      id="mouse-selection-indicator"
+      style={{
+        border: "1px dashed blue",
+        position: "absolute",
+        top: `${rect.y}px`,
+        left: `${rect.x}px`,
+        width: `${rect.width}px`,
+        height: `${rect.height}px`,
+        zIndex: 1000000,
+      }}
+    ></div>
+  );
+}

package/src/components/TimelineSettingsContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+import { TimelineSettings } from "../types/TimelineSettings";
+
+const defaultTimelineSettings: TimelineSettings = {
+  start: new Date(2025, 1, 1),
+  end: new Date(2025, 5, 1),
+  pixelsPerDay: 30,
+  pixelsPerResource: 100,
+  showMonths: true,
+  showWeeks: true,
+  showDays: true,
+  allowOverlaps: true,
+  focusedDate: null,
+};
+
+export interface TimelineContextOuter {
+  settings: TimelineSettings;
+  setSettings: Dispatch<SetStateAction<TimelineSettings>>;
+}
+
+const defaultContext: TimelineContextOuter = {
+  settings: defaultTimelineSettings,
+  setSettings: () => undefined,
+};
+
+export const TimelineSettingsContext =
+  createContext<TimelineContextOuter>(defaultContext);

package/src/components/TimelineSettingsProvider.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren, useEffect, useState } from "react";
+import { TimelineSettings } from "../types/TimelineSettings";
+import { TimelineSettingsContext } from "./TimelineSettingsContext";
+
+interface TimelineSettingsProviderProps {
+  settings: TimelineSettings;
+}
+
+export const TimelineSettingsProvider = ({
+  settings: _settings,
+  children,
+}: PropsWithChildren<TimelineSettingsProviderProps>) => {
+  const [settings, setSettings] = useState<TimelineSettings>(_settings);
+
+  useEffect(() => {
+    setSettings((prev) => ({ ...prev, _settings }));
+  }, [_settings]);
+
+  return (
+    <TimelineSettingsContext.Provider value={{ settings, setSettings }}>
+      {children}
+    </TimelineSettingsContext.Provider>
+  );
+};

package/src/components/TimelineWrapper.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren } from "react";
+import { TimelineSettingsProvider } from "./TimelineSettingsProvider";
+import { SwimlaneT } from "../types";
+import "./Timeline.scss";
+
+interface TimelineWrapperProps {
+  focusedDay?: Date | null;
+  focusedSwimlane?: SwimlaneT | null;
+  start?: Date;
+  end?: Date;
+  pixelsPerDay?: number;
+  pixelsPerResource?: number;
+  showMonths?: boolean;
+  showWeeks?: boolean;
+  showDays?: boolean;
+  allowOverlaps?: boolean;
+  focusedDate?: Date | null;
+}
+
+export default function TimelineWrapper({
+  children,
+  start = new Date(2025, 1, 1),
+  end = new Date(2025, 5, 1),
+  pixelsPerDay = 30,
+  pixelsPerResource = 100,
+  showMonths = true,
+  showWeeks = true,
+  showDays = true,
+  allowOverlaps = true,
+  focusedDate = null,
+}: PropsWithChildren<TimelineWrapperProps>) {
+  return (
+    <div className="timeline">
+      <TimelineSettingsProvider
+        settings={{
+          start,
+          end,
+          pixelsPerDay,
+          pixelsPerResource,
+          showDays,
+          showMonths,
+          showWeeks,
+          allowOverlaps,
+          focusedDate,
+        }}
+      >
+        {children}
+      </TimelineSettingsProvider>
+    </div>
+  );
+}

package/src/components/core/CoreItem/CoreItemComponent.tsx

@@ -0,0 +1,69 @@
+import DragResizeComponent from "./DragResizeComponent";
+import {
+  getDropTargetDimensions,
+  getItemRectangle as getItemRectangle,
+  getUpdatedItem as getUpdatedItem,
+} from "../utils";
+import { PropsWithChildren } from "react";
+import {
+  CoreItem,
+  Position,
+  Rectangle,
+  SwimlaneT,
+  TimelineSettings,
+} from "../../../types";
+
+interface CoreItemComponentProps<T> {
+  item: CoreItem<T>;
+  swimlane: SwimlaneT;
+  settings: TimelineSettings;
+  onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+  onDrop: () => void;
+  onDrag: () => void;
+  onUpdate: (updatedItem: CoreItem<T>) => void;
+  onResizeStart: () => void;
+}
+
+export default function CoreItemComponent<T>({
+  swimlane,
+  item,
+  settings,
+  children,
+  onDragStart,
+  onDrag,
+  onDrop,
+  onUpdate,
+  onResizeStart,
+}: PropsWithChildren<CoreItemComponentProps<T>>) {
+  const rectangle = getItemRectangle(item, swimlane, settings, settings);
+  const boundingRectangle = getDropTargetDimensions(
+    swimlane,
+    settings,
+    settings
+  );
+
+  return (
+    <DragResizeComponent<T>
+      item={item}
+      rectangle={rectangle}
+      boundingRectangle={boundingRectangle}
+      onDrag={onDrag}
+      onDragStart={onDragStart}
+      onDrop={onDrop}
+      onUpdate={(rectangle: Rectangle) => {
+        const updatedItem: CoreItem<T> = getUpdatedItem(
+          item,
+          swimlane,
+          rectangle,
+          settings,
+          settings
+        );
+
+        onUpdate(updatedItem);
+      }}
+      onResizeStart={onResizeStart}
+    >
+      {children}
+    </DragResizeComponent>
+  );
+}

package/src/components/core/CoreItem/DragResizeComponent.tsx

@@ -0,0 +1,180 @@
+import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import invariant from "tiny-invariant";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { getGrabPosition } from "../utils";
+import { Resizable } from "re-resizable";
+import { Position, Rectangle, Dimensions, CoreItem } from "../../../types";
+
+interface DragResizeComponentProps<T> {
+  item: CoreItem<T>;
+  rectangle: Rectangle;
+  boundingRectangle: Dimensions;
+  onDragStart: (grabPosition: Position, relativeGrabPosition: Position) => void;
+  onDrag: () => void;
+  onDrop: () => void;
+  onUpdate: (rectangle: Rectangle) => void;
+  onResizeStart: () => void;
+}
+
+/**
+ * takes care of pixel-level drag-and-drop and resizing.
+ * will emit every event through event handlers.
+ * @param param0 t
+ * @returns
+ */
+export default function DragResizeComponent<T>({
+  item,
+  rectangle,
+  boundingRectangle,
+  children,
+  onDrag,
+  onDragStart,
+  onDrop,
+  onUpdate,
+  onResizeStart,
+}: PropsWithChildren<DragResizeComponentProps<T>>) {
+  const ref = useRef<HTMLDivElement>(null);
+  const handleRef = useRef<HTMLDivElement>(null);
+
+  const [tmpRectangle, setTmpRectangle] = useState<Rectangle>(rectangle);
+
+  useEffect(() => {
+    setTmpRectangle(rectangle);
+  }, [rectangle]);
+
+  useEffect(() => {
+    invariant(ref.current);
+    invariant(handleRef.current);
+
+    return draggable({
+      element: ref.current,
+      dragHandle: handleRef.current,
+      onDragStart: ({ source, location }) => {
+        const grabPos = getGrabPosition(source, location);
+        onDragStart(grabPos.absolute, grabPos.relative);
+      },
+      onDrag: () => {
+        onDrag();
+      },
+
+      onDrop: () => {
+        onDrop();
+      },
+      getInitialData: () => ({ ...item }),
+    });
+  }, [item, onDrag, onDragStart, onDrop]);
+
+  return (
+    <div
+      id={`timeline-item-${item.id}`}
+      className="timeline-item"
+      data-timeline-item-id={item.id}
+      ref={ref}
+      style={{
+        width: `${tmpRectangle.width}px`,
+        height: `${tmpRectangle.height}px`,
+        minWidth: `${tmpRectangle.width}px`,
+        minHeight: `${tmpRectangle.height}px`,
+        maxWidth: `${tmpRectangle.width}px`,
+        maxHeight: `${tmpRectangle.height}px`,
+        top: `${tmpRectangle.y}px`,
+        left: `${tmpRectangle.x}px`,
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <Resizable
+        enable={{
+          right: true,
+          left: true,
+          top: true,
+          bottom: true,
+        }}
+        handleClasses={{
+          left: "timeline-item-resize-handle timeline-item-resize-handle-left",
+          right:
+            "timeline-item-resize-handle timeline-item-resize-handle-right",
+        }}
+        size={{
+          width: tmpRectangle.width,
+          height: tmpRectangle.height,
+        }}
+        onResizeStart={() => {
+          onResizeStart();
+        }}
+        onResize={(e, direction, ref, d) => {
+          setTmpRectangle((el) => {
+            if (direction === "right") {
+              return {
+                ...el,
+                width: rectangle.width + d.width,
+              };
+            } else if (direction === "left") {
+              return {
+                ...el,
+                x: rectangle.x - d.width,
+                width: rectangle.width + d.width,
+              };
+            } else if (direction === "bottom") {
+              return {
+                ...el,
+                height: Math.min(
+                  rectangle.height + d.height,
+                  boundingRectangle.height - rectangle.y
+                ),
+              };
+            } else if (direction === "top") {
+              return {
+                ...el,
+                y: rectangle.y - d.height,
+                height: rectangle.height + d.height,
+              };
+            } else {
+              return el;
+            }
+          });
+        }}
+        onResizeStop={(_, direction, ref, d) => {
+          let newRectangle = rectangle;
+          if (direction === "right") {
+            newRectangle = {
+              ...rectangle,
+              width: rectangle.width + d.width,
+            };
+          } else if (direction === "left") {
+            newRectangle = {
+              ...rectangle,
+              x: rectangle.x - d.width,
+              width: rectangle.width + d.width,
+            };
+          } else if (direction === "bottom") {
+            newRectangle = {
+              ...rectangle,
+              height: Math.min(
+                rectangle.height + d.height,
+                boundingRectangle.height - rectangle.y
+              ),
+            };
+          } else if (direction === "top") {
+            newRectangle = {
+              ...rectangle,
+              y: rectangle.y - d.height,
+              height: rectangle.height + d.height,
+            };
+          }
+
+          onUpdate(newRectangle);
+        }}
+        style={{ overflow: "hidden" }}
+      >
+        <div className="timeline-item-drag-handle" ref={handleRef}>
+          {children}
+        </div>
+      </Resizable>
+    </div>
+  );
+}