react-timelane 0.0.0

package/src/components/core/CoreSwimlane/AvailableSpaceIndicator.tsx

@@ -0,0 +1,156 @@
+import { PropsWithChildren, useEffect, useState } from "react";
+import { dateToPixel, offsetToPixel } from "../utils";
+import { getAvailableSpace } from "./utils";
+import { addDays, setHours } from "date-fns";
+import {
+  AvailableSpace,
+  CoreItem,
+  Pixels,
+  Rectangle,
+  SwimlaneT,
+  TimeRange,
+} from "../../../types";
+
+interface AvailableSpaceIndicatorProps<T> {
+  pixels: Pixels;
+  range: TimeRange;
+  swimlane: SwimlaneT;
+  debug: boolean;
+  items: CoreItem<T>[];
+}
+
+/**
+ * A component that displays the available space at the mouse cursor position.
+ * The available space is a rectangle that does not overlap with it's surrounding items.
+ * It is determined by some heuristics.
+ *
+ * Only used for debugging purposes.
+ *
+ * @param param0
+ * @returns
+ */
+export default function AvailableSpaceIndicator<T>({
+  pixels,
+  range,
+  swimlane,
+  items,
+  debug = false,
+  children,
+}: PropsWithChildren<AvailableSpaceIndicatorProps<T>>) {
+  const [availableSpace, setAvailableSpace] = useState<AvailableSpace | null>(
+    null
+  );
+
+  function getDate(e: React.MouseEvent) {
+    const clientRect = e.currentTarget.getBoundingClientRect();
+    return setHours(
+      addDays(range.start, (e.clientX - clientRect.left) / pixels.pixelsPerDay),
+      12
+    );
+  }
+
+  function getOffset(e: React.MouseEvent) {
+    const clientRect = e.currentTarget.getBoundingClientRect();
+    const relativePxOffsetY = (e.pageY - clientRect.top) / clientRect.height;
+
+    return relativePxOffsetY * swimlane.capacity;
+  }
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+      }}
+      onMouseMove={(e) => {
+        if (!debug) return;
+
+        const clickedDate = getDate(e);
+        const clickedOffset = getOffset(e);
+
+        const availableSpace: AvailableSpace | null = getAvailableSpace(
+          clickedDate,
+          clickedOffset,
+          swimlane,
+          items,
+          range
+        );
+
+        setAvailableSpace(availableSpace);
+      }}
+      onMouseLeave={() => {
+        if (!debug) return;
+        setAvailableSpace(null);
+      }}
+    >
+      {children}
+      <AvailableSpaceIndicatorItem
+        availableSpace={availableSpace}
+        pixels={pixels}
+        swimlane={swimlane}
+        range={range}
+      />
+    </div>
+  );
+}
+
+interface AvailableSpaceIndicatorItemProps {
+  availableSpace: AvailableSpace | null;
+  range: TimeRange;
+  pixels: Pixels;
+  swimlane: SwimlaneT;
+}
+
+function AvailableSpaceIndicatorItem({
+  availableSpace,
+  range,
+  pixels,
+  swimlane,
+}: AvailableSpaceIndicatorItemProps) {
+  const [hoverRect, setHoverRect] = useState<Rectangle | null>(null);
+
+  useEffect(() => {
+    if (!availableSpace) {
+      setHoverRect(null);
+      return;
+    }
+
+    const x = dateToPixel(availableSpace.start, range.start, pixels);
+
+    const width = dateToPixel(availableSpace.end, range.start, pixels) - x;
+
+    const y = offsetToPixel(
+      availableSpace.minOffset,
+      swimlane.capacity,
+      pixels
+    );
+    const height =
+      offsetToPixel(availableSpace.maxOffset, swimlane.capacity, pixels) - y;
+
+    setHoverRect({
+      x,
+      y,
+      width,
+      height,
+    });
+  }, [availableSpace, pixels, range.start, swimlane.capacity]);
+
+  return (
+    <div
+      style={
+        hoverRect
+          ? {
+              position: "absolute",
+              top: `${hoverRect.y}px`,
+              left: `${hoverRect.x + 1}px`,
+              width: `${hoverRect.width - 1}px`,
+              height: `${hoverRect.height - 1}px`,
+              background: "purple",
+              opacity: 0.3,
+            }
+          : {}
+      }
+    ></div>
+  );
+}

package/src/components/core/CoreSwimlane/CoreSwimlane.tsx

@@ -0,0 +1,245 @@
+import DropTarget from "./DropTarget";
+import DropPreview from "./DropPreview";
+import { format } from "date-fns";
+
+import { MouseEvent, ReactElement, useState } from "react";
+import { addDays, setHours } from "date-fns";
+import {
+  getItemRectangle,
+  getDropTargetDimensions as getSwimlaneDimensions,
+  getUpdatedItem as getUpdatedItem,
+} from "../utils";
+import {
+  getAvailableSpace,
+  getDropPreviewRectangle,
+  getOverlap,
+} from "./utils";
+import CoreItemComponent from "../CoreItem/CoreItemComponent";
+import OverlapIndicator from "./OverlapIndicator";
+
+import {
+  AvailableSpace,
+  CoreItem,
+  Dimensions,
+  GrabInfo,
+  Grid,
+  Position,
+  Rectangle,
+  SwimlaneT,
+  isCoreItem,
+} from "../../../types";
+import { useTimelineContext } from "../../../hooks/useTimelineContext";
+
+interface CoreSwimlaneProps<T> {
+  swimlane: SwimlaneT;
+  items: CoreItem<T>[];
+  focused?: boolean;
+  onItemUpdate?: (item: CoreItem<T>) => void;
+  onMouseUp?: (e: MouseEvent) => void;
+  onClick?: (
+    when: Date,
+    availableSpace: AvailableSpace | null,
+    e: MouseEvent
+  ) => void;
+  onDoubleClick?: (
+    when: Date,
+    availableSpace: AvailableSpace | null,
+    e: MouseEvent
+  ) => void;
+  onContextMenu?: (when: Date, e: MouseEvent) => void;
+  renderItem?: (item: CoreItem<T>, isDragged: boolean) => ReactElement;
+  onResizeStart?: (data: T) => void;
+}
+
+export default function CoreSwimlane<T>({
+  swimlane,
+  items,
+  focused = false,
+  onItemUpdate = () => {},
+  onMouseUp = () => {},
+  onClick = () => {},
+  onDoubleClick = () => {},
+  onContextMenu = () => {},
+  renderItem = defaultRenderItem,
+  onResizeStart = () => {},
+}: CoreSwimlaneProps<T>) {
+  const { settings } = useTimelineContext();
+
+  const grid: Grid = {
+    x: settings.pixelsPerDay,
+    offsetX: settings.pixelsPerDay / 2,
+  };
+
+  const dimensions: Dimensions = getSwimlaneDimensions(
+    swimlane,
+    settings,
+    settings
+  );
+
+  const [draggedItem, setDraggedItem] = useState<CoreItem<T> | null>(null);
+
+  const [dropPreviewRect, setDropPreviewRect] = useState<Rectangle | null>(
+    null
+  );
+
+  function getMouseEventDate(e: React.MouseEvent) {
+    const clientRect = e.currentTarget.getBoundingClientRect();
+    return setHours(
+      addDays(
+        settings.start,
+        (e.clientX - clientRect.left) / settings.pixelsPerDay
+      ),
+      12
+    );
+  }
+
+  function getMouseEventOffset(e: React.MouseEvent) {
+    const clientRect = e.currentTarget.getBoundingClientRect();
+    const relativePxOffsetY = (e.pageY - clientRect.top) / clientRect.height;
+
+    return relativePxOffsetY * swimlane.capacity;
+  }
+
+  function handleDrag(mousePos: Position, grabInfo: GrabInfo, data: object) {
+    if (!isCoreItem(data)) return;
+
+    const newDropPreviewRect: Rectangle | null = getDropPreviewRectangle(
+      swimlane,
+      items,
+      data,
+      mousePos,
+      grabInfo,
+      settings,
+      grid,
+      settings,
+      settings.allowOverlaps
+    );
+
+    setDropPreviewRect(newDropPreviewRect);
+  }
+
+  function handleDrop(
+    mousePos: Position,
+    grabInfo: GrabInfo,
+    data: CoreItem<T>
+  ) {
+    if (!isCoreItem(data) || dropPreviewRect === null) return;
+
+    const updatedItem: CoreItem<T> = getUpdatedItem<T>(
+      data,
+      swimlane,
+      dropPreviewRect,
+      settings,
+      settings
+    );
+
+    onItemUpdate(updatedItem);
+    setDropPreviewRect(null);
+  }
+
+  function handleDragLeave() {
+    setDropPreviewRect(null);
+  }
+
+  function handleClick(e: React.MouseEvent, type: "single" | "double") {
+    const clickedDate = getMouseEventDate(e);
+    const clickedOffset = getMouseEventOffset(e);
+
+    const availableSpace: AvailableSpace | null = getAvailableSpace(
+      clickedDate,
+      clickedOffset,
+      swimlane,
+      items,
+      settings
+    );
+
+    if (type == "single") {
+      onClick(clickedDate, availableSpace, e);
+    } else {
+      onDoubleClick(clickedDate, availableSpace, e);
+    }
+  }
+
+  const rects = items.map((x) => ({
+    id: x.id,
+    ...getItemRectangle(x, swimlane, settings, settings),
+  }));
+
+  const overlaps: Rectangle[] = rects
+    .flatMap((x) =>
+      rects.map((y) => {
+        if (x.id < y.id) {
+          const overlap = getOverlap(x, y);
+          return overlap;
+        } else {
+          return null;
+        }
+      })
+    )
+    .filter((x) => x !== null);
+
+  return (
+    <div
+      id={`timeline-swimlane-${swimlane.id}`}
+      className={`timeline-swimlane ${
+        focused ? "timeline-swimlane-focused" : ""
+      }`}
+      data-timeline-swimlane-id={swimlane.id}
+      style={dimensions}
+      onMouseUp={onMouseUp}
+      onClick={(e) => handleClick(e, "single")}
+      onDoubleClick={(e) => handleClick(e, "double")}
+      onContextMenu={(e) => {
+        onContextMenu(getMouseEventDate(e), e);
+      }}
+    >
+      <DropTarget
+        onDrag={handleDrag}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {items.map((item, index) => (
+          <CoreItemComponent<T>
+            key={index}
+            item={item}
+            settings={settings}
+            swimlane={swimlane}
+            onDragStart={() => {
+              setDraggedItem(item);
+            }}
+            onDrag={() => {}}
+            onDrop={() => {
+              setDraggedItem(null);
+            }}
+            onUpdate={onItemUpdate}
+            onResizeStart={() => {
+              onResizeStart(item.payload);
+            }}
+          >
+            {renderItem(
+              item,
+              draggedItem !== null && draggedItem.id === item.id
+            )}
+          </CoreItemComponent>
+        ))}
+        {dropPreviewRect && <DropPreview {...dropPreviewRect}></DropPreview>}
+
+        {overlaps.map((overlap, index) => (
+          <OverlapIndicator overlap={overlap} key={index} />
+        ))}
+      </DropTarget>
+    </div>
+  );
+}
+
+function defaultRenderItem<T>(
+  item: CoreItem<T>,
+  isDragged: boolean
+): ReactElement {
+  return (
+    <div>
+      {item.id} ({format(item.start, "yyyy-mm-dd")} -{" "}
+      {format(item.end, "yyyy-mm-dd")}){isDragged ? "dragging" : ""}
+    </div>
+  );
+}

package/src/components/core/CoreSwimlane/DropPreview.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from "react";
+
+interface DropPreviewProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export default function DropPreview({
+  x,
+  y,
+  width,
+  height,
+  children,
+}: PropsWithChildren<DropPreviewProps>) {
+  return (
+    <div
+      className="timeline-drop-preview"
+      style={{
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/core/CoreSwimlane/DropTarget.tsx

@@ -0,0 +1,83 @@
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { DragLocationHistory } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { PropsWithChildren, useEffect, useRef } from "react";
+import invariant from "tiny-invariant";
+import { getGrabPosition } from "../utils";
+import { GrabInfo, Position } from "../../../types";
+
+interface DropTargetProps {
+  onDragStart?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+  onDrag?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+  onDrop?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+  onDragEnter?: (mousePos: Position, grabInfo: GrabInfo, data: any) => void;
+  onDragLeave?: (grabInfo: GrabInfo, data: any) => void;
+}
+
+export default function DropTarget({
+  children,
+  onDragStart = () => {},
+  onDrag = () => {},
+  onDrop = () => {},
+  onDragEnter = () => {},
+  onDragLeave = () => {},
+}: PropsWithChildren<DropTargetProps>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    invariant(el);
+
+    return dropTargetForElements({
+      element: el,
+      getData: () => ({ drop: "drop" }),
+      onDragStart: ({ source, location }) => {
+        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
+
+        const grabPosition = getGrabPosition(source, location);
+
+        onDragStart(relativeMousePos, grabPosition, source.data);
+      },
+      onDragEnter: ({ source, location }) => {
+        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
+
+        const grabPosition = getGrabPosition(source, location);
+        onDragEnter(relativeMousePos, grabPosition, source.data);
+      },
+      onDrag: ({ source, location }) => {
+        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
+
+        const grabPosition = getGrabPosition(source, location);
+
+        onDrag(relativeMousePos, grabPosition, source.data);
+      },
+      onDrop: ({ source, location }) => {
+        const relativeMousePos = getMousePositionRelativeToDropTarget(location);
+
+        const grabPosition = getGrabPosition(source, location);
+
+        onDrop(relativeMousePos, grabPosition, source.data);
+      },
+      onDragLeave: ({ source, location }) => {
+        const grabPosition = getGrabPosition(source, location);
+        onDragLeave(grabPosition, source.data);
+      },
+    });
+  }, [onDrag, onDragLeave, onDragStart, onDrop, onDragEnter]);
+  return (
+    <div className="timeline-drop-target" ref={ref}>
+      {children}
+    </div>
+  );
+}
+
+function getMousePositionRelativeToDropTarget(
+  location: DragLocationHistory
+): Position {
+  const targetRect =
+    location.current.dropTargets[0].element.getBoundingClientRect();
+
+  return {
+    x: location.current.input.pageX - targetRect.x,
+    y: location.current.input.pageY - targetRect.y,
+  };
+}

package/src/components/core/CoreSwimlane/OverlapIndicator.tsx

@@ -0,0 +1,22 @@
+import { Rectangle } from "../../../types";
+
+interface OverlapIndicatorProps {
+  overlap: Rectangle;
+}
+
+export default function OverlapIndicator({ overlap }: OverlapIndicatorProps) {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: `${overlap.x}px`,
+        top: `${overlap.y}px`,
+        width: `${overlap.width - 1}px`,
+        height: `${overlap.height - 1}px`,
+        background: `rgba(255,0,0, 0.3)`,
+        marginLeft: "1px",
+        pointerEvents: "none",
+      }}
+    ></div>
+  );
+}