react-timelane 0.0.0 → 0.0.1

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

@@ -1,375 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

@@ -1,107 +0,0 @@
-.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;
-      }
-    }
-  }
-}