add drag deltas to the data state

projects/ngx-d3timeline/src/lib/drag-util.ts

@@ -2,8 +2,9 @@ import { scaleBandInvert } from './scale-util';
 import { State } from './store/state';
 import { Orientation } from './orientation';
 import { TimelineEvent } from '../public-api';
+import { DraggedTimelineEvent } from './dragged-timeline-event';
 
-export function getDropTimelineEvent(state: State) {
+export function getDropTimelineEvent(state: State): DraggedTimelineEvent {
   const draggingTimelineEvent = getDraggingTimelineEvent(state);
 
   return (
@@ -15,7 +16,7 @@ export function getDropTimelineEvent(state: State) {
   );
 }
 
-export function getDraggingTimelineEvent(state: State): TimelineEvent {
+export function getDraggingTimelineEvent(state: State): DraggedTimelineEvent {
   return state.dragEvent && state.data.find(d => d.id === state.dragEvent.id);
 }
 

projects/ngx-d3timeline/src/lib/dragged-timeline-event.ts

@@ -0,0 +1,24 @@
+import { TimelineEvent } from './timeline-event';
+
+export interface DraggedTimelineEvent extends TimelineEvent {
+  dx: number;
+  dy: number;
+  x: number;
+  y: number;
+}
+
+const initialDraggedTimelineEvent: Omit<
+  DraggedTimelineEvent,
+  keyof TimelineEvent
+> = {
+  dx: null,
+  dy: null,
+  x: null,
+  y: null
+};
+
+export function initialiseDraggedTimelineEvent(
+  timelineEvent: TimelineEvent
+): DraggedTimelineEvent {
+  return { ...timelineEvent, ...initialDraggedTimelineEvent };
+}

projects/ngx-d3timeline/src/lib/store/reducer.ts

@@ -13,11 +13,17 @@ import { EventRectangle } from '../content/event-rectangle';
 import { Orientation } from '../orientation';
 import { AxisOrientations } from '../axis-orientations';
 import { flipOrientation } from '../orientation-utils';
+import {
+  DraggedTimelineEvent,
+  initialiseDraggedTimelineEvent
+} from '../dragged-timeline-event';
 
 export function reducer(state: State, action: Actions): State {
   switch (action.type) {
     case ActionType.DataChanged: {
-      return patchStateAndUpdateScales(state, { data: action.payload });
+      return patchStateAndUpdateScales(state, {
+        data: initDraggedTimelineEvents(action.payload)
+      });
     }
 
     case ActionType.OrientationChanged: {
@@ -68,7 +74,7 @@ export function reducer(state: State, action: Actions): State {
   }
 }
 
-function dropTimelineEventOnDragEnd(state: State): TimelineEvent[] {
+function dropTimelineEventOnDragEnd(state: State): DraggedTimelineEvent[] {
   const dropEvent = getDropTimelineEvent(state);
   return state.data.map(data => (data.id === dropEvent.id ? dropEvent : data));
 }
@@ -109,3 +115,9 @@ function setAxisOrientations(timeOrientation: Orientation): AxisOrientations {
   const resourceOrientation = flipOrientation(timeOrientation);
   return { time: timeOrientation, resource: resourceOrientation };
 }
+
+function initDraggedTimelineEvents(
+  timelineEvents: TimelineEvent[]
+): DraggedTimelineEvent[] {
+  return timelineEvents.map(initialiseDraggedTimelineEvent);
+}

projects/ngx-d3timeline/src/lib/store/state.ts

@@ -4,11 +4,12 @@ import { TimeScale, BandScale } from '../scale-types';
 import { AxisOrientations } from '../axis-orientations';
 import { TimelineDragEvent } from '../content/timeline-drag-event';
 import { createSliceSelector } from '../selector/slice-selector';
+import { DraggedTimelineEvent } from '../dragged-timeline-event';
 
 export interface State {
   view: TimelineView;
   axisOrientations: AxisOrientations;
-  data: TimelineEvent[];
+  data: DraggedTimelineEvent[];
   timeScale: TimeScale;
   bandScale: BandScale;
   dragEvent: TimelineDragEvent;