solve eventUi problem with dragging

src/agenda/AgendaView.ts

@@ -16,7 +16,7 @@ import { createFormatter } from '../datelib/formatting'
 import { EventStore, filterEventStoreDefs } from '../structs/event-store'
 import { RenderForceFlags } from '../component/Component'
 import { DateComponentRenderState } from '../component/DateComponent'
-import { EventInteractionState } from '../interactions/event-interaction-state'
+import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import reselector from '../util/reselector'
 import { EventUiHash, hasBgRendering } from '../component/event-rendering'
 
@@ -433,10 +433,10 @@ function filterEventsForDayGrid(eventStore: EventStore, eventUis: EventUiHash):
   })
 }
 
-function buildInteractionForTimeGrid(state: EventInteractionState): EventInteractionState {
+function buildInteractionForTimeGrid(state: EventInteractionUiState): EventInteractionUiState {
   if (state) {
     return {
-      affectedEvents: filterEventsForTimeGrid(state.affectedEvents, state.eventUis),
+      affectedEvents: state.affectedEvents,
       mutatedEvents: filterEventsForTimeGrid(state.mutatedEvents, state.eventUis),
       eventUis: state.eventUis,
       isEvent: state.isEvent,
@@ -446,10 +446,10 @@ function buildInteractionForTimeGrid(state: EventInteractionState): EventInterac
   return null
 }
 
-function buildInteractionForDayGrid(state: EventInteractionState): EventInteractionState {
+function buildInteractionForDayGrid(state: EventInteractionUiState): EventInteractionUiState {
   if (state) {
     return {
-      affectedEvents: filterEventsForDayGrid(state.affectedEvents, state.eventUis),
+      affectedEvents: state.affectedEvents,
       mutatedEvents: filterEventsForDayGrid(state.mutatedEvents, state.eventUis),
       eventUis: state.eventUis,
       isEvent: state.isEvent,

src/component/DateComponent.ts

@@ -11,7 +11,7 @@ import { EventRenderRange, sliceEventStore, computeEventDefUi, EventUiHash, comp
 import { EventStore, expandEventStoreInstances } from '../structs/event-store'
 import { DateEnv } from '../datelib/env'
 import Theme from '../theme/Theme'
-import { EventInteractionState } from '../interactions/event-interaction-state'
+import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import { assignTo } from '../util/object'
 import browserContext from '../common/browser-context'
 import { Hit } from '../interactions/HitDragging'
@@ -27,8 +27,8 @@ export interface DateComponentRenderState {
   eventUis: EventUiHash
   dateSelection: DateSpan | null
   eventSelection: string
-  eventDrag: EventInteractionState | null
-  eventResize: EventInteractionState | null
+  eventDrag: EventInteractionUiState | null
+  eventResize: EventInteractionUiState | null
 }
 
 // NOTE: for fg-events, eventRange.range is NOT sliced,
@@ -87,8 +87,8 @@ export default abstract class DateComponent extends Component {
   eventUis: EventUiHash = null
   dateSelection: DateSpan = null
   eventSelection: string = ''
-  eventDrag: EventInteractionState = null
-  eventResize: EventInteractionState = null
+  eventDrag: EventInteractionUiState = null
+  eventResize: EventInteractionUiState = null
 
 
   constructor(_view, _options?) {
@@ -639,7 +639,7 @@ export default abstract class DateComponent extends Component {
   // ---------------------------------------------------------------------------------------------------------------
 
 
-  renderEventDragState(state: EventInteractionState) {
+  renderEventDragState(state: EventInteractionUiState) {
     this.hideSegsByHash(state.affectedEvents.instances)
     this.renderEventDrag(
       state.mutatedEvents,
@@ -694,7 +694,7 @@ export default abstract class DateComponent extends Component {
   // ---------------------------------------------------------------------------------------------------------------
 
 
-  renderEventResizeState(state: EventInteractionState) {
+  renderEventResizeState(state: EventInteractionUiState) {
     this.hideSegsByHash(state.affectedEvents.instances)
     this.renderEventResize(
       state.mutatedEvents,

src/interactions-external/ExternalElementDragging.ts

@@ -11,7 +11,6 @@ import { EventInteractionState } from '../interactions/event-interaction-state'
 import { DragMetaInput, DragMeta, parseDragMeta } from '../structs/drag-meta'
 import EventApi from '../api/EventApi'
 import { elementMatches } from '../util/dom-manip'
-import { computeEventDefUis } from '../component/event-rendering'
 
 export interface EventRes {
   def: EventDef
@@ -70,14 +69,9 @@ export default class ExternalElementDragging {
     // TODO: always store as event-store?
     let droppableEventStore = droppableEvent ? toEventStore(droppableEvent) : createEmptyEventStore()
 
-    // we need to compute UI objects. no source or original calendar options,
-    // so just compute based off event defs.
-    let eventUis = computeEventDefUis(droppableEventStore.defs, {}, {})
-
     this.displayDrag(receivingCalendar, {
       affectedEvents: createEmptyEventStore(),
       mutatedEvents: droppableEventStore,
-      eventUis,
       isEvent: this.dragMeta!.create,
       origSeg: null
     })

src/interactions/EventDragging.ts

@@ -159,7 +159,6 @@ export default class EventDragging { // TODO: rename to EventSelectingAndDraggin
     this.displayDrag(receivingCalendar, {
       affectedEvents: relatedEvents,
       mutatedEvents: mutatedRelatedEvents || createEmptyEventStore(),
-      eventUis: initialCalendar.state.eventUis,
       isEvent: true,
       origSeg: this.subjectSeg
     })
@@ -298,7 +297,6 @@ export default class EventDragging { // TODO: rename to EventSelectingAndDraggin
           state: {
             affectedEvents: state.affectedEvents,
             mutatedEvents: createEmptyEventStore(),
-            eventUis: {},
             isEvent: true,
             origSeg: state.origSeg
           }

src/interactions/EventResizing.ts

@@ -113,7 +113,6 @@ export default class EventDragging {
         state: {
           affectedEvents: relatedEvents,
           mutatedEvents: mutatedRelatedEvents,
-          eventUis: calendar.state.eventUis,
           isEvent: true,
           origSeg: this.draggingSeg
         }

src/interactions/event-interaction-state.ts

@@ -5,7 +5,10 @@ import { EventUiHash } from '../component/event-rendering'
 export interface EventInteractionState {
   affectedEvents: EventStore
   mutatedEvents: EventStore
-  eventUis: EventUiHash
   isEvent: boolean
   origSeg: Seg | null
 }
+
+export interface EventInteractionUiState extends EventInteractionState {
+  eventUis: EventUiHash
+}

src/reducers/main.ts

@@ -3,9 +3,10 @@ import reduceEventSources from './eventSources'
 import reduceEventStore from './eventStore'
 import { DateProfile, isDateProfilesEqual } from '../DateProfileGenerator'
 import { DateSpan } from '../structs/date-span'
-import { EventInteractionState } from '../interactions/event-interaction-state'
+import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import { CalendarState, Action } from './types'
 import { EventSourceHash } from '../structs/event-source'
+import { computeEventDefUis } from '../component/event-rendering'
 
 export default function(state: CalendarState, action: Action, calendar: Calendar): CalendarState {
   calendar.publiclyTrigger(action.type, action) // for testing hooks
@@ -21,8 +22,8 @@ export default function(state: CalendarState, action: Action, calendar: Calendar
     businessHours: state.businessHours,
     dateSelection: reduceDateSelection(state.dateSelection, action),
     eventSelection: reduceSelectedEvent(state.eventSelection, action),
-    eventDrag: reduceEventDrag(state.eventDrag, action),
-    eventResize: reduceEventResize(state.eventResize, action),
+    eventDrag: reduceEventDrag(state.eventDrag, action, eventSources, calendar),
+    eventResize: reduceEventResize(state.eventResize, action, eventSources, calendar),
     eventSourceLoadingLevel: computeLoadingLevel(eventSources),
     loadingLevel: computeLoadingLevel(eventSources)
   }
@@ -61,25 +62,55 @@ function reduceSelectedEvent(currentInstanceId: string, action: Action): string
   }
 }
 
-function reduceEventDrag(currentDrag: EventInteractionState | null, action: Action) {
+function reduceEventDrag(currentDrag: EventInteractionUiState | null, action: Action, sources: EventSourceHash, calendar: Calendar): EventInteractionUiState | null {
   switch (action.type) {
+
     case 'SET_EVENT_DRAG':
-      return action.state
+      let newDrag = action.state
+      let eventUis = computeEventDefUis(
+        newDrag.mutatedEvents.defs,
+        sources,
+        calendar.view ? calendar.view.options : {} // yuck
+      )
+      return {
+        affectedEvents: newDrag.affectedEvents,
+        mutatedEvents: newDrag.mutatedEvents,
+        isEvent: newDrag.isEvent,
+        origSeg: newDrag.origSeg,
+        eventUis: eventUis
+      }
+
     case 'UNSET_EVENT_DRAG':
       return null
+
     default:
       return currentDrag
   }
 }
 
-function reduceEventResize(currentEventResize: EventInteractionState | null, action: Action) {
+function reduceEventResize(currentResize: EventInteractionUiState | null, action: Action, sources: EventSourceHash, calendar: Calendar): EventInteractionUiState | null {
   switch (action.type) {
+
     case 'SET_EVENT_RESIZE':
-      return action.state
+      let newResize = action.state
+      let eventUis = computeEventDefUis(
+        newResize.mutatedEvents.defs,
+        sources,
+        calendar.view ? calendar.view.options : {} // yuck
+      )
+      return {
+        affectedEvents: newResize.affectedEvents,
+        mutatedEvents: newResize.mutatedEvents,
+        isEvent: newResize.isEvent,
+        origSeg: newResize.origSeg,
+        eventUis
+      }
+
     case 'UNSET_EVENT_RESIZE':
       return null
+
     default:
-      return currentEventResize
+      return currentResize
   }
 }