react-timelane 0.0.0

package/src/components/core/CoreSwimlane/utils.ts

@@ -0,0 +1,375 @@
+import { max, min } from "date-fns";
+import {
+  getItemDimensions,
+  getItemRectangle,
+  getDropTargetDimensions,
+} from "../utils";
+import {
+  AvailableSpace,
+  CoreItem,
+  DateBounds,
+  Dimensions,
+  GrabInfo,
+  Grid,
+  OffsetBounds,
+  Pixels,
+  Position,
+  Rectangle,
+  SwimlaneT,
+  TimeRange,
+} from "../../../types";
+
+export function getDropPreviewRectangle<S, T>(
+  swimlane: SwimlaneT,
+  items: CoreItem<T>[],
+  item: CoreItem<S>,
+  mousePosition: Position | null,
+  grabInfo: GrabInfo,
+  pixels: Pixels,
+  grid: Grid,
+  range: TimeRange,
+  allowOverlaps: boolean
+): Rectangle | null {
+  if (mousePosition === null) {
+    return null;
+  }
+
+  const dropTargetDimensions: Dimensions = getDropTargetDimensions(
+    swimlane,
+    pixels,
+    range
+  );
+
+  const itemRectangles: Rectangle[] = items
+    .filter((a) => a.id !== item.id)
+    .map((a) => getItemRectangle(a, swimlane, range, pixels));
+
+  let dropPreviewRectangle: Rectangle | null = null;
+
+  dropPreviewRectangle = getRectangleUnderCursor(
+    swimlane,
+    item,
+    grabInfo,
+    pixels,
+    mousePosition
+  );
+
+  dropPreviewRectangle = fitToGrid(dropPreviewRectangle, grid);
+
+  dropPreviewRectangle = fitToDropTarget(
+    dropPreviewRectangle,
+    dropTargetDimensions
+  );
+
+  dropPreviewRectangle = getNearestDropDestinationWithoutOverlap(
+    dropPreviewRectangle,
+    itemRectangles,
+    dropTargetDimensions,
+    allowOverlaps
+  );
+
+  return dropPreviewRectangle;
+}
+
+/**
+ * computes rectangle for DropPreview that is under the cursor, in pixel coordinates relative to the current DropTarget
+ * @param dragData
+ * @param swimlane
+ * @param pixels
+ * @param mousePosition
+ * @returns
+ */
+function getRectangleUnderCursor<T>(
+  swimlane: SwimlaneT,
+  item: CoreItem<T>,
+  grabInfo: GrabInfo,
+  pixels: Pixels,
+  mousePosition: Position
+): Rectangle {
+  const { width, height } = getItemDimensions(item, swimlane, pixels);
+  const x = mousePosition.x + width * grabInfo.relative.x;
+  const y = mousePosition.y + height * grabInfo.relative.y;
+
+  return {
+    x,
+    y,
+    width,
+    height,
+  };
+}
+
+function fitToDropTarget(
+  rect: Rectangle,
+  dropTargetDimensions: Dimensions
+): Rectangle {
+  // adjust coordinates to always be in DropTarget rectangle
+
+  const x = Math.max(
+    0,
+    Math.min(rect.x, dropTargetDimensions.width - rect.width)
+  );
+  const y = Math.max(
+    0,
+    Math.min(rect.y, dropTargetDimensions.height - rect.height)
+  );
+
+  return {
+    ...rect,
+    x,
+    y,
+  };
+}
+
+function fitToGrid(rect: Rectangle, grid: Grid | null | undefined): Rectangle {
+  const destination = {
+    ...rect,
+  };
+
+  if (grid && grid.x) {
+    destination.x = roundToNearest(destination.x, grid.x, grid.offsetX || 0);
+  }
+
+  if (grid && grid.y) {
+    destination.y = roundToNearest(destination.y, grid.y, grid.offsetY || 0);
+  }
+
+  return destination;
+}
+
+function roundToNearest(
+  value: number,
+  interval: number,
+  offset: number
+): number {
+  return Math.max(
+    offset,
+    offset + Math.round((value - offset) / interval) * interval
+  );
+}
+
+function getNearestDropDestinationWithoutOverlap(
+  item: Rectangle,
+  allItems: Rectangle[],
+  targetDimensions: Dimensions,
+  allowOverlaps: boolean
+): Rectangle | null {
+  const newItem: Rectangle = {
+    ...item,
+  };
+
+  if (!allowOverlaps) {
+    let isOverlapping = true;
+
+    while (isOverlapping) {
+      const firstOverlapping: Rectangle | undefined = allItems.find((other) => {
+        return doOverlap(newItem, other);
+      });
+
+      if (firstOverlapping !== undefined) {
+        // move the element below the one it overlaps with
+        newItem.y = firstOverlapping.y + firstOverlapping.height;
+      } else {
+        isOverlapping = false;
+      }
+    }
+  }
+
+  if (!isWithinTargetDimensions(newItem, targetDimensions)) {
+    return null;
+  } else {
+    return newItem;
+  }
+}
+
+/**
+ * Returns true if two rectangles (l1, r1) and (l2, r2) overlap
+ * @param el1
+ * @param el2
+ * @returns
+ */
+export function doOverlap(el1: Rectangle, el2: Rectangle): boolean {
+  if (el1.x >= el2.x + el2.width || el2.x >= el1.x + el1.width) {
+    return false;
+  }
+
+  if (el1.y >= el2.y + el2.height || el2.y >= el1.y + el1.height) {
+    return false;
+  }
+
+  return true;
+}
+
+export function getOverlap(
+  rect1: Rectangle,
+  rect2: Rectangle
+): Rectangle | null {
+  // Calculate the coordinates of the overlapping region
+  const overlapX1 = Math.max(rect1.x, rect2.x);
+  const overlapY1 = Math.max(rect1.y, rect2.y);
+  const overlapX2 = Math.min(rect1.x + rect1.width, rect2.x + rect2.width);
+  const overlapY2 = Math.min(rect1.y + rect1.height, rect2.y + rect2.height);
+
+  // Check if there is an overlap
+  if (overlapX1 < overlapX2 && overlapY1 < overlapY2) {
+    return {
+      x: overlapX1,
+      y: overlapY1,
+      width: overlapX2 - overlapX1,
+      height: overlapY2 - overlapY1,
+    };
+  } else {
+    // No overlap
+    return null;
+  }
+}
+
+export function itemsDoOverlap<T>(a: CoreItem<T>, b: CoreItem<T>): boolean {
+  if (
+    a.start >= b.end ||
+    b.start >= a.end ||
+    a.offset >= b.offset + b.size ||
+    b.offset >= a.offset + a.size
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function isWithinTargetDimensions(
+  item: Rectangle,
+  targetDimensions: Dimensions
+): boolean {
+  return (
+    item.x >= 0 &&
+    item.y >= 0 &&
+    item.x + item.width <= targetDimensions.width &&
+    item.y + item.height <= targetDimensions.height
+  );
+}
+
+export function getAvailableSpace<T>(
+  clickedDate: Date,
+  clickedOffset: number,
+  swimlane: SwimlaneT,
+  items: CoreItem<T>[],
+  range: TimeRange
+): AvailableSpace | null {
+  const offsetBounds = getOffsetBounds(
+    clickedDate,
+    clickedOffset,
+    swimlane.capacity,
+    items
+  );
+
+  if (offsetBounds) {
+    const dateBounds = getDateBounds(
+      clickedDate,
+      range.start,
+      range.end,
+      items,
+      offsetBounds
+    );
+
+    if (dateBounds) {
+      return {
+        start: dateBounds.lower,
+        end: dateBounds.upper,
+        minOffset: offsetBounds.lower,
+        maxOffset: offsetBounds.upper,
+      };
+    }
+  }
+
+  return null;
+}
+
+function getOffsetBounds<T>(
+  clickedDate: Date,
+  clickedOffset: number,
+  maxUpperBound: number,
+  items: CoreItem<T>[]
+): null | OffsetBounds {
+  const allocationsAtDate: CoreItem<T>[] = items.filter((a) => {
+    return a.start <= clickedDate && a.end >= clickedDate;
+  });
+
+  // 1. check if there is an allocation at the place where the click occurred
+  const allocationAtClick: CoreItem<T> | undefined = allocationsAtDate.find(
+    (a) => a.offset <= clickedOffset && a.offset + a.size >= clickedOffset
+  );
+
+  if (allocationAtClick) {
+    return null;
+  }
+  // part remaining allocations by whether they are above or below the click
+  const allocationsAboveClick = allocationsAtDate.filter((a) => {
+    return a.offset + a.size <= clickedOffset;
+  });
+
+  const allocationsBelowClick = allocationsAtDate.filter((a) => {
+    return a.offset >= clickedOffset;
+  });
+
+  // the minimum available space in offset coordinates is the
+  // maximum (offset + size) of all allocations above
+  const lowerOffsetBound =
+    allocationsAboveClick.length > 0
+      ? Math.max(...allocationsAboveClick.map((a) => a.offset + a.size))
+      : 0;
+
+  const upperOffsetBound =
+    allocationsBelowClick.length > 0
+      ? Math.min(...allocationsBelowClick.map((a) => a.offset))
+      : maxUpperBound;
+
+  return {
+    lower: lowerOffsetBound,
+    upper: upperOffsetBound,
+  };
+}
+
+function getDateBounds<T>(
+  clickedDate: Date,
+  minLowerBound: Date,
+  maxUpperBound: Date,
+  items: CoreItem<T>[],
+  offsetBounds: OffsetBounds
+): DateBounds | null {
+  const dummyItem: CoreItem<null> = {
+    id: -1,
+    swimlaneId: -1,
+    start: minLowerBound,
+    end: maxUpperBound,
+    offset: offsetBounds.lower,
+    size: offsetBounds.upper - offsetBounds.lower,
+    payload: null,
+  };
+
+  const overlappingItems: CoreItem<T>[] = items.filter((a) =>
+    itemsDoOverlap(a, dummyItem)
+  );
+
+  if (overlappingItems.length === 0) {
+    return {
+      lower: minLowerBound,
+      upper: maxUpperBound,
+    };
+  }
+
+  const itemsBefore = overlappingItems.filter((a) => a.end <= clickedDate);
+
+  const itemsAfter = overlappingItems.filter((a) => a.start >= clickedDate);
+
+  // the minimum available space in offset coordinates is the
+  // maximum (offset + size) of all allocations above
+  const lowerDateBound =
+    itemsBefore.length > 0 ? max(itemsBefore.map((a) => a.end)) : minLowerBound;
+  const upperDateBound =
+    itemsAfter.length > 0 ? min(itemsAfter.map((a) => a.start)) : maxUpperBound;
+
+  return {
+    lower: lowerDateBound,
+    upper: upperDateBound,
+  };
+}

package/src/components/core/utils.ts

@@ -0,0 +1,154 @@
+import {
+  DragLocationHistory,
+  ElementDragPayload,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { addDays, differenceInCalendarDays, setHours } from "date-fns";
+import {
+  CoreItem,
+  Dimensions,
+  Pixels,
+  Position,
+  Rectangle,
+  SwimlaneT,
+  TimeRange,
+} from "../../types";
+
+export function getDropTargetDimensions(
+  swimlane: SwimlaneT,
+  pixels: Pixels,
+  range: TimeRange
+): Dimensions {
+  const width = getDropTargetWidth(swimlane, pixels, range);
+  const height = getDropTargetHeight(swimlane, pixels);
+
+  return { width, height };
+}
+
+export function getDropTargetHeight(
+  swimlane: SwimlaneT,
+  pixels: Pixels
+): number {
+  return pixels.pixelsPerResource;
+}
+
+export function getDropTargetWidth(
+  swimlane: SwimlaneT,
+  pixels: Pixels,
+  range: TimeRange
+): number {
+  return Math.abs(
+    (differenceInCalendarDays(range.end, range.start) + 1) * pixels.pixelsPerDay
+  );
+}
+
+export function getItemRectangle<T>(
+  item: CoreItem<T>,
+  swimlane: SwimlaneT,
+  range: TimeRange,
+  pixels: Pixels
+): Rectangle {
+  const dimensions = getItemDimensions(item, swimlane, pixels);
+  const position = getItemPosition(item, swimlane, range.start, pixels);
+
+  return {
+    ...dimensions,
+    ...position,
+  };
+}
+
+export function getItemDimensions<T>(
+  item: CoreItem<T>,
+  swimlane: SwimlaneT,
+  pixels: Pixels
+): Dimensions {
+  const width =
+    differenceInCalendarDays(item.end, item.start) * pixels.pixelsPerDay;
+
+  const height = (item.size / swimlane.capacity) * pixels.pixelsPerResource;
+
+  return { width, height };
+}
+
+export function dateToPixel(date: Date, start: Date, pixels: Pixels) {
+  return (
+    differenceInCalendarDays(date, start) * pixels.pixelsPerDay +
+    pixels.pixelsPerDay / 2
+  );
+}
+
+export function offsetToPixel(
+  offset: number,
+  capacity: number,
+  pixels: Pixels
+) {
+  return (offset / capacity) * pixels.pixelsPerResource;
+}
+
+export function getItemPosition<T>(
+  item: CoreItem<T>,
+  swimlane: SwimlaneT,
+  start: Date,
+  pixels: Pixels
+): Position {
+  const x = dateToPixel(item.start, start, pixels);
+  const y = offsetToPixel(item.offset, swimlane.capacity, pixels);
+
+  return { x, y };
+}
+
+export function getGrabPosition(
+  source: ElementDragPayload,
+  location: DragLocationHistory
+) {
+  const sourceRect = source.element.getBoundingClientRect();
+
+  const grabPosition: Position = {
+    x: sourceRect.x - location.initial.input.pageX,
+    y: sourceRect.y - location.initial.input.pageY,
+  };
+
+  const relativeGrabPosition: Position = {
+    x: grabPosition.x / sourceRect.width,
+    y: grabPosition.y / sourceRect.height,
+  };
+
+  return {
+    absolute: grabPosition,
+    relative: relativeGrabPosition,
+  };
+}
+
+export function getUpdatedItem<T>(
+  oldItem: CoreItem<T>,
+  swimlane: SwimlaneT,
+  dropPreviewRect: Rectangle,
+  pixels: Pixels,
+  range: TimeRange
+): CoreItem<T> {
+  // convert drop preview position to item
+  return {
+    id: oldItem.id,
+    swimlaneId: swimlane.id,
+
+    start: setHours(
+      addDays(range.start, Math.floor(dropPreviewRect.x / pixels.pixelsPerDay)),
+      12
+    ),
+    end: setHours(
+      addDays(
+        range.start,
+        Math.floor(
+          (dropPreviewRect.x + dropPreviewRect.width) / pixels.pixelsPerDay
+        )
+      ),
+      12
+    ),
+    offset: Math.floor(
+      (dropPreviewRect.y / pixels.pixelsPerResource) * swimlane.capacity
+    ),
+    size: Math.floor(
+      (dropPreviewRect.height / pixels.pixelsPerResource) * swimlane.capacity
+    ),
+    payload: oldItem.payload,
+  };
+}

package/src/components/layout/TimelineLayout.tsx

@@ -0,0 +1,93 @@
+import { PropsWithChildren, useRef } from "react";
+import "./layout.scss";
+
+function TimelineLayout({ children }: PropsWithChildren<{}>) {
+  const ref = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      className="timeline-layout"
+      onWheel={(e) => {
+        if (ref.current && (e.ctrlKey || e.shiftKey)) {
+          ref.current.scrollLeft += e.deltaY;
+          e.preventDefault();
+        }
+      }}
+      ref={ref}
+    >
+      <div className="timeline-layout-inner">{children}</div>
+    </div>
+  );
+}
+function TimelineLayoutHeader({ children }: PropsWithChildren<{}>) {
+  return <div className="timeline-layout-header">{children}</div>;
+}
+
+function TimelineLayoutBackground({ children }: PropsWithChildren<{}>) {
+  return <div className="timeline-layout-background">{children}</div>;
+}
+function TimelineLayoutBody({ children }: PropsWithChildren<{}>) {
+  return <div className="timeline-layout-body">{children}</div>;
+}
+function TimelineLayoutFooter({ children }: PropsWithChildren<{}>) {
+  return <div className="timeline-layout-footer">{children}</div>;
+}
+
+interface TimelineLayoutAsideProps {
+  side?: "left" | "right";
+}
+
+function TimelineLayoutAside({
+  side = "left",
+  children,
+}: PropsWithChildren<TimelineLayoutAsideProps>) {
+  return (
+    <div
+      className={`timeline-layout-aside ${
+        side == "left"
+          ? "timeline-layout-aside-left"
+          : "timeline-layout-aside-right"
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface TimelineLayoutCornerProps {
+  corner?: "top left" | "top right" | "bottom left" | "bottom right";
+}
+
+function TimelineLayoutCorner({
+  corner = "top left",
+  children,
+}: PropsWithChildren<TimelineLayoutCornerProps>) {
+  let className = "";
+
+  switch (corner) {
+    case "top left":
+      className = "timeline-layout-corner-top-left";
+      break;
+    case "top right":
+      className = "timeline-layout-corner-top-right";
+      break;
+    case "bottom left":
+      className = "timeline-layout-corner-bottom-left";
+      break;
+    case "bottom right":
+      className = "timeline-layout-corner-bottom-right";
+      break;
+  }
+
+  return (
+    <div className={`timeline-layout-corner ${className}`}>{children}</div>
+  );
+}
+
+TimelineLayout.Header = TimelineLayoutHeader;
+TimelineLayout.Body = TimelineLayoutBody;
+TimelineLayout.Background = TimelineLayoutBackground;
+TimelineLayout.Footer = TimelineLayoutFooter;
+TimelineLayout.Aside = TimelineLayoutAside;
+TimelineLayout.Corner = TimelineLayoutCorner;
+
+export default TimelineLayout;

package/src/components/layout/layout.scss

@@ -0,0 +1,107 @@
+.timeline-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .timeline-layout-inner {
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    display: grid;
+
+    grid-template-areas:
+      "corner-tl header corner-tr"
+      "aside-l body aside-r"
+      "corner-bl footer corner-br";
+
+    .timeline-layout-header,
+    .timeline-layout-footer,
+    .timeline-layout-aside,
+    .timeline-layout-corner {
+      background: white;
+    }
+
+    .timeline-layout-header {
+      grid-area: header;
+
+      position: sticky;
+      position: -webkit-sticky;
+      top: 0;
+      z-index: 101;
+      overflow: hidden;
+    }
+
+    .timeline-layout-body {
+      grid-area: body;
+      z-index: 100;
+    }
+
+    .timeline-layout-background {
+      grid-area: body;
+      z-index: -1;
+    }
+
+    .timeline-layout-footer {
+      grid-area: footer;
+
+      position: sticky;
+      position: -webkit-sticky;
+      bottom: 0;
+      z-index: 101;
+      border-top: 1px solid lightgray;
+    }
+
+    .timeline-layout-aside {
+      grid-area: aside-l;
+
+      position: sticky;
+      position: -webkit-sticky;
+      left: 0;
+      z-index: 101;
+
+      &.timeline-layout-aside-right {
+        grid-area: aside-r;
+
+        right: 0;
+        left: initial;
+        border-left: 1px solid lightgray;
+      }
+    }
+
+    .timeline-layout-corner {
+      position: sticky;
+      position: -webkit-sticky;
+      z-index: 102;
+
+      &.timeline-layout-corner-top-left {
+        grid-area: corner-tl;
+        top: 0;
+        left: 0;
+        border-bottom: 1px solid lightgray;
+        border-right: 1px solid lightgray;
+      }
+      &.timeline-layout-corner-top-right {
+        grid-area: corner-tr;
+        top: 0;
+        right: 0;
+        border-bottom: 1px solid lightgray;
+        border-left: 1px solid lightgray;
+      }
+      &.timeline-layout-corner-bottom-left {
+        grid-area: corner-bl;
+        bottom: 0;
+        left: 0;
+        border-top: 1px solid lightgray;
+        border-right: 1px solid lightgray;
+      }
+      &.timeline-layout-corner-bottom-right {
+        grid-area: corner-br;
+        bottom: 0;
+        right: 0;
+        border-top: 1px solid lightgray;
+        border-left: 1px solid lightgray;
+      }
+    }
+  }
+}