beginnings of new event-ui system

src/Calendar.ts

@@ -18,13 +18,13 @@ import reselector from './util/reselector'
 import { mapHash, assignTo } from './util/object'
 import { DateRangeInput } from './datelib/date-range'
 import DateProfileGenerator from './DateProfileGenerator'
-import { EventSourceInput, parseEventSource, EventSourceHash } from './structs/event-source'
-import { EventInput, EventDefHash, parseEvent } from './structs/event'
+import { EventSourceInput, parseEventSource } from './structs/event-source'
+import { EventInput, parseEvent } from './structs/event'
 import { CalendarState, Action } from './reducers/types'
 import EventSourceApi from './api/EventSourceApi'
 import EventApi from './api/EventApi'
 import { createEmptyEventStore, EventStore, eventTupleToStore } from './structs/event-store'
-import { computeEventDefUis, EventUiHash } from './component/event-rendering'
+import { computeEventDefUis, processScopedUiProps, EventUi, EventUiHash } from './component/event-ui'
 import PointerDragging, { PointerDragEvent } from './dnd/PointerDragging'
 import EventDragging from './interactions/EventDragging'
 import { buildViewSpecs, ViewSpecHash, ViewSpec } from './structs/view-spec'
@@ -62,9 +62,13 @@ export default class Calendar {
   triggerWith: EmitterInterface['triggerWith']
   hasHandlers: EmitterInterface['hasHandlers']
 
-  buildDateEnv: any
-  buildTheme: any
-  computeEventDefUis: (eventDefs: EventDefHash, eventSources: EventSourceHash, options: any) => EventUiHash
+  buildDateEnv = reselector(buildDateEnv)
+  buildTheme = reselector(buildTheme)
+  buildBaseEventUi = reselector(processScopedUiProps)
+  computeEventDefUis = reselector(computeEventDefUis)
+
+  baseEventUi: EventUi
+  renderableEventUis: EventUiHash
 
   optionsManager: OptionsManager
   viewSpecs: ViewSpecHash
@@ -92,7 +96,7 @@ export default class Calendar {
   isRendering: boolean = false // currently in the executeRender function?
   renderingPauseDepth: number = 0
   renderableEventStore: EventStore
-  buildDelayedRerender: any
+  buildDelayedRerender = reselector(buildDelayedRerender)
   delayedRerender: any
   afterSizingTriggers: any = {}
   isViewNew: boolean = false
@@ -108,11 +112,6 @@ export default class Calendar {
     this.optionsManager = new OptionsManager(overrides)
     this.pluginSystem = new PluginSystem()
 
-    this.buildDateEnv = reselector(buildDateEnv)
-    this.buildTheme = reselector(buildTheme)
-    this.buildDelayedRerender = reselector(buildDelayedRerender)
-    this.computeEventDefUis = reselector(computeEventDefUis)
-
     // only do once. don't do in handleOptions. because can't remove plugins
     let pluginDefs = Calendar.defaultPlugins.concat(
       this.optionsManager.computed.plugins || []
@@ -389,17 +388,19 @@ export default class Calendar {
       throw new Error(`View type "${viewType}" is not valid`)
     }
 
+    this.baseEventUi = this.buildBaseEventUi(viewSpec.options, this)
+
     // if event sources are still loading and progressive rendering hasn't been enabled,
     // keep rendering the last fully loaded set of events
     let renderableEventStore = this.renderableEventStore =
       (state.eventSourceLoadingLevel && !this.opt('progressiveEventRendering')) ?
         this.renderableEventStore :
         state.eventStore
 
-    let eventUis = this.computeEventDefUis(
+    this.renderableEventUis = this.computeEventDefUis( // will access baseEventUi
       renderableEventStore.defs,
       state.eventSources,
-      viewSpec.options
+      this
     )
 
     if (needsFull || !component) {
@@ -423,7 +424,7 @@ export default class Calendar {
         dateProfile: state.dateProfile,
         dateProfileGenerator: this.dateProfileGenerators[viewType],
         eventStore: renderableEventStore,
-        eventUis,
+        eventUis: this.renderableEventUis,
         dateSelection: state.dateSelection,
         eventSelection: state.eventSelection,
         eventDrag: state.eventDrag,

src/CalendarComponent.ts

@@ -7,7 +7,7 @@ import { prependToElement, createElement, removeElement, appendToElement, applyS
 import { rangeContainsMarker, DateRange } from './datelib/date-range';
 import { assignTo } from './util/object';
 import { EventStore } from './structs/event-store'
-import { EventUiHash } from './component/event-rendering'
+import { EventUiHash } from './component/event-ui'
 import { DateSpan } from './structs/date-span'
 import { EventInteractionUiState } from './interactions/event-interaction-state'
 import { BusinessHoursInput, parseBusinessHours } from './structs/business-hours'

src/View.ts

@@ -9,7 +9,8 @@ import { createElement } from './util/dom-manip'
 import { ComponentContext } from './component/Component'
 import DateComponent from './component/DateComponent'
 import { EventStore } from './structs/event-store'
-import { EventUiHash, sliceEventStore, EventRenderRange } from './component/event-rendering'
+import { EventUiHash } from './component/event-ui'
+import { sliceEventStore, EventRenderRange } from './component/event-rendering'
 import { DateSpan } from './structs/date-span'
 import { EventInteractionUiState } from './interactions/event-interaction-state'
 import { memoizeRendering } from './component/memoized-rendering'

src/agenda/AbstractAgendaView.ts

@@ -15,12 +15,13 @@ import { createFormatter } from '../datelib/formatting'
 import { EventStore, filterEventStoreDefs } from '../structs/event-store'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import reselector from '../util/reselector'
-import { EventUiHash, hasBgRendering } from '../component/event-rendering'
+import { hasBgRendering } from '../component/event-rendering'
 import { buildGotoAnchorHtml, getAllDayHtml } from '../component/date-rendering'
 import { diffDays } from '../datelib/marker'
 import { ComponentContext } from '../component/Component'
 import { ViewSpec } from '../structs/view-spec'
 import DateProfileGenerator from '../DateProfileGenerator'
+import { EventUiHash } from '../component/event-ui'
 
 const AGENDA_ALL_DAY_EVENT_LIMIT = 5
 const WEEK_HEADER_FORMAT = createFormatter({ week: 'short' })

src/agenda/SimpleTimeGrid.ts

@@ -2,7 +2,7 @@ import TimeGrid, { TimeGridSeg } from './TimeGrid'
 import DateComponent from '../component/DateComponent'
 import { DateProfile } from '../DateProfileGenerator'
 import { EventStore } from '../structs/event-store'
-import { EventUiHash } from '../component/event-rendering'
+import { EventUiHash } from '../component/event-ui'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import { DateSpan } from '../structs/date-span'
 import reselector from '../util/reselector'

src/api/EventApi.ts

@@ -1,5 +1,5 @@
 import Calendar from '../Calendar'
-import { EventDef, EventInstance, EventTuple } from '../structs/event'
+import { EventDef, EventInstance, EventTuple, pluckNonDateProps } from '../structs/event'
 import { EventMutation } from '../structs/event-mutation'
 import { DateInput } from '../datelib/env'
 import { diffDates, computeAlignedDayRange } from '../util/misc'
@@ -237,17 +237,17 @@ export default class EventApi implements EventTuple {
   get allDay(): boolean { return this.def.allDay }
   get title(): string { return this.def.title }
   get url(): string { return this.def.url }
-  get startEditable(): boolean { return this.def.startEditable }
-  get durationEditable(): boolean { return this.def.durationEditable }
-  get constraint(): any { return this.def.constraint }
-  get overlap(): any { return this.def.overlap }
-  get rendering(): string { return this.def.rendering }
-  get backgroundColor(): string { return this.def.backgroundColor }
-  get borderColor(): string { return this.def.borderColor }
-  get textColor(): string { return this.def.textColor }
+  get startEditable(): boolean { return this.def.ui.startEditable }
+  get durationEditable(): boolean { return this.def.ui.durationEditable }
+  get constraint(): any { return this.def.ui.constraint }
+  get overlap(): any { return this.def.ui.overlap }
+  get rendering(): string { return this.def.ui.rendering }
+  get backgroundColor(): string { return this.def.ui.backgroundColor }
+  get borderColor(): string { return this.def.ui.borderColor }
+  get textColor(): string { return this.def.ui.textColor }
 
   // NOTE: user can't modify these because Object.freeze was called in event-def parsing
-  get classNames(): string[] { return this.def.classNames }
+  get classNames(): string[] { return this.def.ui.classNames }
   get extendedProps(): any { return this.def.extendedProps }
 
 }

src/basic/SimpleDayGrid.ts

@@ -1,7 +1,7 @@
 import DayGrid, { DayGridSeg } from './DayGrid'
 import { DateProfile } from '../DateProfileGenerator'
 import { EventStore } from '../structs/event-store'
-import { EventUiHash } from '../component/event-rendering'
+import { EventUiHash } from '../component/event-ui'
 import { DateSpan } from '../structs/date-span'
 import { EventInteractionUiState } from '../interactions/event-interaction-state'
 import DayTable from '../common/DayTable'

src/common/slicing-utils.ts

@@ -1,6 +1,7 @@
 import { DateRange } from '../datelib/date-range'
 import { EventStore } from '../structs/event-store'
-import { EventUiHash, sliceEventStore, EventRenderRange } from '../component/event-rendering'
+import { EventUiHash } from '../component/event-ui'
+import { sliceEventStore, EventRenderRange } from '../component/event-rendering'
 import { DateProfile } from '../DateProfileGenerator'
 import { Seg, EventSegUiInteractionState } from '../component/DateComponent'
 import { DateSpan, fabricateEventRange } from '../structs/date-span'

src/component/event-rendering.ts

@@ -1,26 +1,12 @@
-import { EventDef, EventDefHash, EventTuple } from '../structs/event'
+import { EventDef, EventTuple } from '../structs/event'
 import { EventStore } from '../structs/event-store'
 import { DateRange, invertRanges, intersectRanges } from '../datelib/date-range'
-import { EventSourceHash } from '../structs/event-source'
-import { mapHash } from '../util/object'
-import { parseClassName } from '../util/html'
 import { Duration } from '../datelib/duration'
 import { computeVisibleDayRange } from '../util/misc'
 import { Seg } from './DateComponent'
 import View from '../View'
 import EventApi from '../api/EventApi'
-
-export interface EventUi {
-  startEditable: boolean
-  durationEditable: boolean
-  backgroundColor: string
-  borderColor: string
-  textColor: string,
-  rendering: string,
-  classNames: string[]
-}
-
-export type EventUiHash = { [defId: string]: EventUi }
+import { EventUi, EventUiHash } from './event-ui'
 
 export interface EventRenderRange extends EventTuple {
   ui: EventUi
@@ -29,7 +15,6 @@ export interface EventRenderRange extends EventTuple {
   isEnd: boolean
 }
 
-
 /*
 Specifying nextDayThreshold signals that all-day ranges should be sliced.
 */
@@ -176,66 +161,3 @@ function setElSeg(el: HTMLElement, seg: Seg) {
 export function getElSeg(el: HTMLElement): Seg | null {
   return (el as any).fcSeg || null
 }
-
-
-// UI Props
-// ----------------------------------------------------------------------------------------------------
-
-export function computeEventDefUis(eventDefs: EventDefHash, eventSources: EventSourceHash, options) {
-  return mapHash(eventDefs, function(eventDef) {
-    return computeEventDefUi(eventDef, eventSources, options)
-  })
-}
-
-export function computeEventDefUi(eventDef: EventDef, eventSources: EventSourceHash, options) {
-
-  // lowest to highest priority
-  // TODO: hook for resources, using refineScopedUi
-  let refinedHashes = [
-    refineScopedUi(options),
-    refineUnscopedUi(eventSources[eventDef.sourceId] || {}),
-    refineUnscopedUi(eventDef)
-  ]
-
-  return refinedHashes.reduce(combineUis)
-}
-
-// has word "event" in prop names
-// FYI: startEditable/durationEditable might end up being null
-function refineScopedUi(input): EventUi {
-  return {
-    startEditable: (input.startEditable != null) ? input.startEditable : input.editable,
-    durationEditable: (input.durationEditable != null) ? input.durationEditable : input.editable,
-    backgroundColor: input.eventBackgroundColor || input.eventColor || '',
-    borderColor: input.eventBorderColor || input.eventColor || '',
-    textColor: input.eventTextColor || '',
-    rendering: input.eventRendering || '',
-    classNames: parseClassName(input.eventClassNames || input.eventClassName) // probs already parsed
-  }
-}
-
-// does NOT have the word "event" in prop names
-// FYI: startEditable/durationEditable might end up being null
-function refineUnscopedUi(input): EventUi {
-  return {
-    startEditable: (input.startEditable != null) ? input.startEditable : input.editable,
-    durationEditable: (input.durationEditable != null) ? input.durationEditable : input.editable,
-    backgroundColor: input.backgroundColor || input.color || '',
-    borderColor: input.borderColor || input.color || '',
-    textColor: input.textColor || '',
-    rendering: input.rendering || '',
-    classNames: parseClassName(input.classNames || input.className) // probs already parsed
-  }
-}
-
-function combineUis(hash0, hash1): EventUi { // hash1 has higher precedence
-  return {
-    startEditable: (hash1.startEditable != null) ? hash1.startEditable : hash0.startEditable,
-    durationEditable: (hash1.durationEditable != null) ? hash1.durationEditable : hash0.durationEditable,
-    backgroundColor: hash1.backgroundColor || hash0.backgroundColor,
-    borderColor: hash1.borderColor || hash0.borderColor,
-    textColor: hash1.textColor || hash0.textColor,
-    rendering: hash1.rendering || hash0.rendering,
-    classNames: hash0.classNames.concat(hash1.classNames)
-  }
-}