feat: 🎸 [Timeline] Added initialDateTime prop to auto scroll

✅ Closes: #77

src/KonvaTimeline/index.stories.tsx

@@ -66,6 +66,13 @@ export const HiddenResources: Story = {
   },
 };
 
+export const InitialDateTime: Story = {
+  args: {
+    ...Primary.args,
+    initialDateTime: (range.start + range.end) / 2,
+  },
+};
+
 export const MixedDateTimeFormats: Story = {
   args: {
     ...Primary.args,

src/timeline/TimelineContext.tsx

@@ -33,6 +33,10 @@ export type TimelineProviderProps = PropsWithChildren<TimelineInput> & {
    * Enables resize operation on tasks
    */
   enableResize?: boolean;
+  /**
+   * Initial date time to scroll to
+   */
+  initialDateTime?: number | string;
   /**
    * Callback invoked when errors are thrown
    */
@@ -63,6 +67,7 @@ type TimelineContextType = Required<
   drawRange: InternalTimeRange;
   enableDrag: boolean;
   enableResize: boolean;
+  initialDateTime?: number;
   interval: Interval;
   onErrors?: (errors: KonvaTimelineError[]) => void;
   onTaskClick?: (task: TaskData) => void;
@@ -93,6 +98,7 @@ export const TimelineProvider = ({
   enableDrag = true,
   enableResize = true,
   hideResources = false,
+  initialDateTime: externalInitialDateTime,
   onErrors,
   onTaskClick,
   onTaskChange,
@@ -103,9 +109,6 @@ export const TimelineProvider = ({
   rowHeight: externalRowHeight,
   theme: externalTheme = "light",
 }: TimelineProviderProps) => {
-  // logWarn("TimelineProvider", `Debug ${debug ? "ON" : "OFF"}`);
-  // window.__MELFORE_KONVA_TIMELINE_DEBUG__ = debug;
-
   const [drawRange, setDrawRange] = useState(DEFAULT_DRAW_RANGE);
 
   useEffect(() => {
@@ -121,6 +124,15 @@ export const TimelineProvider = ({
     return { start, end };
   }, [externalRange]);
 
+  const initialDateTime = useMemo(() => {
+    let initial = !externalInitialDateTime ? DateTime.now().toMillis() : getValidTime(externalInitialDateTime);
+    if (initial < range.start || initial > range.end) {
+      return;
+    }
+
+    return initial;
+  }, [externalInitialDateTime, range]);
+
   const validTasks = useMemo(() => validateTasks(externalTasks, range), [externalTasks, range]);
 
   const interval = useMemo(
@@ -235,6 +247,7 @@ export const TimelineProvider = ({
         enableDrag,
         enableResize,
         hideResources,
+        initialDateTime,
         interval,
         onErrors,
         onTaskClick,

src/timeline/index.tsx

@@ -1,6 +1,7 @@
 import React, { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Stage } from "react-konva";
 import Konva from "konva";
+import { DateTime } from "luxon";
 
 import GridLayer from "../grid/Layer";
 import ResourcesLayer from "../resources/components/Layer";
@@ -23,8 +24,11 @@ const DEFAULT_STAGE_SIZE: StageSize = { height: 0, width: 0 };
 const Timeline: FC<TimelineProps> = () => {
   const {
     hideResources,
+    initialDateTime,
+    interval: { start: intervalStart },
     columnWidth,
     resourcesContentHeight,
+    resolution,
     setDrawRange,
     theme: { color: themeColor },
     timeBlocks,
@@ -90,6 +94,16 @@ const Timeline: FC<TimelineProps> = () => {
     onWindowResize();
   }, [hideResources, onWindowResize]);
 
+  useEffect(() => {
+    if (!wrapper.current || !initialDateTime) {
+      return;
+    }
+
+    const timeStart = DateTime.fromMillis(initialDateTime);
+    const startOffsetInUnit = timeStart.diff(intervalStart!).as(resolution.unit);
+    wrapper.current.scrollTo({ left: (startOffsetInUnit * columnWidth) / resolution.sizeInUnits });
+  }, [columnWidth, initialDateTime, intervalStart, resolution.sizeInUnits, resolution.unit]);
+
   const fullTimelineWidth = useMemo(() => columnWidth * timeBlocks.length, [columnWidth, timeBlocks]);
 
   // const stageHeight = useMemo(() => size.height, [size]);