@event-calendar/core 5.0.6 → 5.1.0

package/src/plugins/resource-timeline/index.js

@@ -1,16 +1,14 @@
-import {btnTextDay, btnTextMonth, btnTextWeek, themeView} from '#lib';
-import {dayTimeLimits, daySlots, nestedResources, monthView} from './stores.js';
+import {btnTextDay, btnTextMonth, btnTextWeek, getPayload, themeView} from '#lib';
+import {setExtensions} from '../time-grid/lib.js';
 import {createTRROptions, createTRRParsers} from '../time-grid/options.js';
-import {createTRRStores} from '../time-grid/stores.js';
 import {createRROptions} from '../resource-time-grid/options.js';
-import {createRRStores} from '../resource-time-grid/stores.js';
 import View from './View.svelte';
 
 export default {
 	createOptions(options) {
         createTRROptions(options);
         createRROptions(options);
-        options.slotWidth = 16;
+        options.slotWidth = 32;
 		// Common options
 		options.buttonText.resourceTimelineDay = 'timeline';
 		options.buttonText.resourceTimelineWeek = 'timeline';
@@ -21,27 +19,23 @@ export default {
 		options.view = 'resourceTimelineWeek';
 		options.views.resourceTimelineDay = {
 			buttonText: btnTextDay,
-			component: View,
+			component: initViewComponent,
 			displayEventEnd: false,
 			dayHeaderFormat: {weekday: 'long'},
 			duration: {days: 1},
-            slotLabelInterval: '01:00',
-			slotDuration: '00:15',
 			theme: themeView('ec-resource ec-timeline ec-day-view'),
 			titleFormat: {year: 'numeric', month: 'long', day: 'numeric'}
 		};
 		options.views.resourceTimelineWeek = {
 			buttonText: btnTextWeek,
-			component: View,
+			component: initViewComponent,
 			displayEventEnd: false,
 			duration: {weeks: 1},
-            slotLabelInterval: '01:00',
-			slotDuration: '00:15',
 			theme: themeView('ec-resource ec-timeline ec-week-view')
 		};
 		options.views.resourceTimelineMonth = {
 			buttonText: btnTextMonth,
-			component: View,
+			component: initMonthViewComponent,
 			displayEventEnd: false,
 			dayHeaderFormat: {
 				weekday: 'short',
@@ -56,14 +50,16 @@ export default {
 
     createParsers(parsers) {
         createTRRParsers(parsers);
-    },
+    }
+}
+
+function initViewComponent(mainState) {
+	setExtensions(mainState);
+	return initMonthViewComponent(mainState);
+}
 
-	createStores(state) {
-		createTRRStores(state);
-        createRRStores(state);
-		state._dayTimeLimits = dayTimeLimits(state);  // flexible time limits per day
-        state._daySlots = daySlots(state);
-        state._monthView = monthView(state);
-		state._nestedResources = nestedResources(state);
-	}
+function initMonthViewComponent(mainState) {
+	mainState.features = ['timeline'];
+	mainState.extensions.viewResources = resources => resources.filter(resource => !getPayload(resource).hidden);
+	return View;
 }

package/src/plugins/resource-timeline/lib.js

@@ -1,67 +1,6 @@
-import {
-    addDay, addDuration, assign, bgEvent, cloneDate, createDuration, createEventChunk, datesEqual, eventIntersects, max,
-    min, outsideRange
-} from '#lib';
+import {assign, createDuration, createEventChunk, eventIntersects, max, min} from '#lib';
 
-export function createGrid($_viewDates, $_viewResources, $_dayTimeLimits, $validRange, $highlightedDates) {
-    let grid = [];
-    let gridRow = 1
-    for (let resource of $_viewResources) {
-        let days = [];
-        let gridColumn = 1;
-        for (let date of $_viewDates) {
-            let slotTimeLimits = $_dayTimeLimits[date.getTime()];
-            days.push({
-                gridColumn,
-                gridRow,
-                resource,
-                start: addDuration(cloneDate(date), slotTimeLimits.min),
-                end: addDuration(cloneDate(date), slotTimeLimits.max),
-                dayStart: date,
-                dayEnd: addDay(cloneDate(date)),
-                disabled: outsideRange(date, $validRange),
-                highlight: $highlightedDates.some(d => datesEqual(d, date))
-            });
-            ++ gridColumn;
-        }
-        grid.push(days);
-        ++ gridRow;
-    }
-    return grid;
-}
-
-export function createEventChunks($_filteredEvents, grid) {
-    let chunks = [];
-    let bgChunks = [];
-    for (let event of $_filteredEvents) {
-        for (let days of grid) {
-            if (bgEvent(event.display)) {
-                bgChunks = bgChunks.concat(createChunks(event, days));
-            } else {
-                chunks = chunks.concat(createChunks(event, days));
-            }
-        }
-    }
-    prepareChunks(chunks);
-
-    return {chunks, bgChunks};
-}
-
-export function createIEventChunks($_iEvents, grid) {
-    let iChunks = [];
-    for (let event of $_iEvents) {
-        if (!event) {
-            continue;
-        }
-        for (let days of grid) {
-            iChunks = iChunks.concat(createChunks(event, days));
-        }
-    }
-
-    return iChunks;
-}
-
-function createChunks(event, days) {
+export function createChunks(event, days) {
     let dates = [];
     let firstStart;
     let lastEnd;
@@ -131,6 +70,6 @@ export function repositionEvent(chunk, height, monthView) {
     return top;
 }
 
-export function getSlotTimeLimits($_dayTimeLimits, date) {
-    return $_dayTimeLimits[date.getTime()] ?? {min: createDuration(0), max: createDuration('24:00:00')};
+export function getSlotTimeLimits(dayTimeLimits, date) {
+    return dayTimeLimits[date.getTime()] ?? {min: createDuration(0), max: createDuration('24:00:00')};
 }

package/src/plugins/resource-timeline/state.svelte.js

@@ -0,0 +1,18 @@
+import {TRRState} from '../time-grid/state.svelte.js';
+import {RRState} from '../resource-time-grid/state.svelte.js';
+import {daySlots, dayTimeLimits, eventChunks, grid, iEventChunks, monthView, nestedResources} from './derived.js';
+
+export default class ViewState extends RRState(TRRState()) {
+    constructor(mainState) {
+        super(mainState);
+        this.dayTimeLimits = $derived.by(dayTimeLimits(mainState));  // flexible time limits per day
+        this.daySlots = $derived.by(daySlots(mainState, this));
+        this.grid = $derived.by(grid(mainState, this));
+        let {chunks, bgChunks} = $derived.by(eventChunks(mainState, this));
+        this.chunks = $derived(chunks);
+        this.bgChunks = $derived(bgChunks);
+        this.iChunks = $derived.by(iEventChunks(mainState, this));
+        this.monthView = $derived.by(monthView(mainState));
+        this.nestedResources = $derived.by(nestedResources(mainState));
+    }
+}

package/src/plugins/time-grid/Day.svelte

@@ -5,7 +5,8 @@
 
     let {day, allDay = false, noIeb, noBeb} = $props();
 
-    let {slotDuration, slotHeight} = getContext('state');
+    let {options: {slotHeight}} = $derived(getContext('state'));
+    let {snap} = $derived(getContext('view-state'));
 
     let {dayStart: date, start, resource, disabled, highlight} = $derived(day);
 
@@ -17,7 +18,11 @@
         } else {
             let dayRect = rect(el);
             let scaleY = dayRect.height / el.offsetHeight;
-            return addDuration(cloneDate(start), $slotDuration, floor((y - dayRect.top) / ($slotHeight * scaleY)));
+            return addDuration(
+                cloneDate(start),
+                snap.duration,
+                floor((y - dayRect.top) / (slotHeight * snap.ratio * scaleY))
+            );
         }
     }
 </script>

package/src/plugins/time-grid/Event.svelte

@@ -5,14 +5,14 @@
 
     let {chunk} = $props();
 
-    let {slotEventOverlap, slotDuration, slotHeight} = getContext('state');
+    let {options: {slotEventOverlap, slotDuration, slotHeight}} = $derived(getContext('state'));
 
     // Style
     let styles = $derived(style => {
-        let step = toSeconds($slotDuration);
-        let top = chunk.top / step * $slotHeight;
-        let height = chunk.height / step * $slotHeight || $slotHeight;
-        let maxHeight = chunk.maxHeight / step * $slotHeight;
+        let step = toSeconds(slotDuration);
+        let top = chunk.top / step * slotHeight;
+        let height = chunk.height / step * slotHeight || slotHeight;
+        let maxHeight = chunk.maxHeight / step * slotHeight;
         style['grid-column'] = chunk.gridColumn;
         style['inset-block-start'] = `${top}px`;
         style['min-block-size'] = `${height}px`;
@@ -23,7 +23,7 @@
             let groupColumns = chunk.group.columns.length;
             style['z-index'] = `${chunk.groupColumn + 1}`;
             style['inset-inline-start'] = `calc((${maxWidth}) / ${groupColumns} * ${chunk.groupColumn})`;
-            style['inline-size'] = `calc((${maxWidth}) / ${groupColumns} * ${($slotEventOverlap ? 0.5 * (1 + groupColumns - chunk.groupColumn) : 1)})`;
+            style['inline-size'] = `calc((${maxWidth}) / ${groupColumns} * ${(slotEventOverlap ? 0.5 * (1 + groupColumns - chunk.groupColumn) : 1)})`;
         }
         return style;
     });

package/src/plugins/time-grid/NowIndicator.svelte

@@ -4,39 +4,40 @@
 
     let {days, span = 1} = $props();
 
-    let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotHeight, theme} = getContext('state');
+    let {mainEl, now, today, options: {slotDuration, slotHeight, theme}} = $derived(getContext('state'));
+    let {sidebarWidth} = $derived(getContext('view-state'));
 
     // Layout
     let {gridColumn, start, end} = $derived.by(() => {
         for (let day of days) {
-            if (datesEqual(day.dayStart, $_today)) {
+            if (datesEqual(day.dayStart, today)) {
                 return day;
             }
         }
         return {};
     });
     let top = $derived.by(() => {
-        if ($_now < start || $_now > end) {
+        if (now < start || now > end) {
             return null;
         }
-        let step = toSeconds($slotDuration);
-        return ($_now - start) / 1000 / step * $slotHeight;
+        let step = toSeconds(slotDuration);
+        return (now - start) / 1000 / step * slotHeight;
     });
 
     // Observe intersections
     let observerOptions = $derived({
-        root: $_mainEl,
-        rootMargin: isRtl() ? `0px -${$_sidebarWidth + 5.5}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
+        root: mainEl,
+        rootMargin: isRtl() ? `0px -${sidebarWidth + 5.5}px 0px 0px` : `0px 0px 0px -${sidebarWidth + 5.5}px`,
         threshold: 0.0,
     });
     function onIntersect(el, entry) {
-        el.classList.toggle($theme.hidden, !entry.isIntersecting);
+        el.classList.toggle(theme.hidden, !entry.isIntersecting);
     }
 </script>
 
 {#if gridColumn && top !== null}
     <div {@attach intersectionObserver(onIntersect, observerOptions)}
-        class="{$theme.nowIndicator}"
+        class="{theme.nowIndicator}"
         style:grid-column="{gridColumn + 1} / span {span}"
         style:inset-block-start="{top}px"
     ></div>

package/src/plugins/time-grid/View.svelte

@@ -1,51 +1,42 @@
 <script>
-    import {getContext, tick} from 'svelte';
-    import {
-        addDuration, cloneDate, contentFrom, DAY_IN_SECONDS, resizeObserver, runReposition, subtractDay, toSeconds
-    } from '#lib';
-    import {createAllDayContent, createGrid, createEventChunks, createIEventChunks} from './lib.js';
+    import {getContext, setContext, tick} from 'svelte';
+    import {contentFrom, resizeObserver, runReposition, toSeconds} from '#lib';
+    import {createAllDayContent} from './lib.js';
+    import ViewState from './state.svelte.js';
     import {ColHead, DayHeader} from '#components';
     import Day from './Day.svelte';
     import Event from './Event.svelte';
     import AllDayEvent from './AllDayEvent.svelte';
     import NowIndicator from './NowIndicator.svelte';
 
-    let {header, nowIndicator, createGridFn} = $props();
+    let {header, nowIndicator, viewState} = $props();
 
-    let {_activeRangeExt, _mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
-        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
-        scrollTime, slotHeight, slotDuration, slotMaxTime, theme, validRange} = getContext('state');
-
-    let headerHeight = $state(0);
-    let allDayText = $derived(createAllDayContent($allDayContent));
+    let mainState = getContext('state');
+    // svelte-ignore state_referenced_locally
+    if (!viewState) {
+        viewState = new ViewState(mainState);
+    }
+    // svelte-ignore state_referenced_locally
+    setContext('view-state', viewState);
 
-    let grid = $derived(createGridFn?.() ?? createGrid($_viewDates, $_slotTimeLimits, $validRange, $highlightedDates));
-    let {chunks, bgChunks, allDayChunks, allDayBgChunks} = $derived(createEventChunks($_filteredEvents, grid));
-    let {iChunks, allDayIChunks} = $derived(createIEventChunks($_iEvents, grid));
+    let {mainEl, viewDates, options: {allDayContent, allDaySlot, columnWidth, nowIndicator: showNowIndicator,
+        scrollTime, slotHeight, slotDuration, theme}} = $derived(mainState);
+    let {allDayChunks, allDayBgChunks, allDayIChunks, bgChunks, chunks, iChunks, grid, sidebarWidth, slots,
+        slotLabelPeriodicity, slotTimeLimits} = $derived(viewState);
 
-    $effect.pre(() => {
-        $_activeRangeExt = ({start, end}) => {
-            if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
-                addDuration(subtractDay(end), $slotMaxTime);
-                let start2 = subtractDay(cloneDate(end));
-                if (start2 < start) {
-                    start = start2;
-                }
-            }
-            return {start, end};
-        };
-    });
+    let headerHeight = $state(0);
+    let allDayText = $derived(createAllDayContent(allDayContent));
 
     // Handle scrollTime
     $effect(() => {
-        $_viewDates;
-        $scrollTime;
+        viewDates;
+        scrollTime;
         tick().then(scrollToTime);
     });
     function scrollToTime() {
-        $_mainEl.scrollTop = (
-            (toSeconds($scrollTime) - toSeconds($_slotTimeLimits.min)) / toSeconds($slotDuration) - 0.5
-        ) * $slotHeight;
+        mainEl.scrollTop = (
+            (toSeconds(scrollTime) - toSeconds(slotTimeLimits.min)) / toSeconds(slotDuration) - 0.5
+        ) * slotHeight;
     }
 
     // Events reposition
@@ -57,22 +48,22 @@
 </script>
 
 <section
-    bind:this={$_mainEl}
-    class="{$theme.main}"
+    bind:this={mainState.mainEl}
+    class="{theme.main}"
     style:--ec-grid-cols="{grid.length * grid[0].length}"
     style:--ec-col-group-span="{grid[0].length}"
-    style:--ec-col-width="{$columnWidth ?? 'minmax(0, 1fr)'}"
-    style:--ec-slot-label-periodicity="{$_slotLabelPeriodicity}"
-    style:--ec-slot-height="{$slotHeight}px"
+    style:--ec-col-width="{columnWidth ?? 'minmax(0, 1fr)'}"
+    style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
+    style:--ec-slot-height="{slotHeight}px"
     style:--ec-header-height="{headerHeight}px"
-    style:--ec-sidebar-width="{$_sidebarWidth}px"
+    style:--ec-sidebar-width="{sidebarWidth}px"
     {@attach resizeObserver(reposition)}
 >
-    <header bind:offsetHeight={headerHeight} class="{$theme.header}">
-        <aside class="{$theme.sidebar}" bind:offsetWidth={$_sidebarWidth}></aside>
-        <div class="{$theme.grid}" role="row">
+    <header bind:offsetHeight={headerHeight} class="{theme.header}">
+        <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
+        <div class="{theme.grid}" role="row">
             {#if header}
-                {@render header(grid)}
+                {@render header()}
             {:else}
                 {#each grid[0] as {dayStart: date, disabled, highlight}, i}
                     <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
@@ -82,17 +73,17 @@
             {/if}
         </div>
 
-        {#if $allDaySlot}
-            <div class="{$theme.allDay}">
-                <aside class="{$theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
-                <div class="{$theme.grid}" role="row">
+        {#if allDaySlot}
+            <div class="{theme.allDay}">
+                <aside class="{theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
+                <div class="{theme.grid}" role="row">
                     {#each grid as days, i}
                         {#each days as day, j}
                             <Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
                         {/each}
                     {/each}
                 </div>
-                <div class="{$theme.events}">
+                <div class="{theme.events}">
                     {#each allDayChunks as chunk, i}
                         <!-- svelte-ignore binding_property_non_reactive -->
                         <AllDayEvent bind:this={refs[i]} {chunk}/>
@@ -108,11 +99,11 @@
         {/if}
     </header>
 
-    <div class="{$theme.body}" role="rowgroup">
-        <aside class="{$theme.sidebar}" aria-hidden="true">
-            {#each $_slots as slot, i}
+    <div class="{theme.body}" role="rowgroup">
+        <aside class="{theme.sidebar}" aria-hidden="true">
+            {#each slots as slot, i}
                 <div
-                    class={[$theme.slot, !i && $theme.hidden]}
+                    class={[theme.slot, !i && theme.hidden]}
                     style:--ec-slot-label-periodicity={slot[2]}
                 >
                     <time
@@ -122,14 +113,14 @@
                 </div>
             {/each}
         </aside>
-        <div class="{$theme.grid}" role="row">
+        <div class="{theme.grid}" role="row">
             {#each grid as days, i}
                 {#each days as day, j}
                     <Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
                 {/each}
             {/each}
         </div>
-        <div class="{$theme.events}">
+        <div class="{theme.events}">
             {#each chunks as chunk}
                 <Event {chunk}/>
             {/each}
@@ -142,9 +133,9 @@
         </div>
     </div>
 
-    {#if $showNowIndicator}
+    {#if showNowIndicator}
         {#if nowIndicator}
-            {@render nowIndicator(grid)}
+            {@render nowIndicator()}
         {:else}
             <NowIndicator days={grid[0]}/>
         {/if}

package/src/plugins/time-grid/derived.js

@@ -0,0 +1,162 @@
+import {untrack} from 'svelte';
+import {
+    addDay, addDuration, bgEvent, ceil, cloneDate, createAllDayChunks, createDate, createSlots, createSlotTimeLimits,
+    datesEqual, outsideRange, prepareAllDayChunks, setMidnight, toSeconds
+} from '#lib';
+import {createChunks, groupChunks} from './lib.js';
+
+export function grid(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {viewDates, options: {highlightedDates, validRange}} = mainState;
+        let {slotTimeLimits} = viewState;
+
+        let days = [];
+
+        untrack(() => {
+            let gridColumn = 1;
+            for (let date of viewDates) {
+                days.push({
+                    gridColumn,
+                    gridRow: 1,
+                    resource: undefined,
+                    start: addDuration(cloneDate(date), slotTimeLimits.min),
+                    end: addDuration(cloneDate(date), slotTimeLimits.max),
+                    dayStart: date,
+                    dayEnd: addDay(cloneDate(date)),
+                    disabled: outsideRange(date, validRange),
+                    highlight: highlightedDates.some(d => datesEqual(d, date))
+                });
+                ++gridColumn;
+            }
+        });
+
+        return [days];
+    };
+}
+
+export function eventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {filteredEvents} = mainState;
+        let {grid} = viewState;
+
+        let chunks = [];
+        let bgChunks = [];
+        let allDayChunks = [];
+        let allDayBgChunks = [];
+
+        untrack(() => {
+            for (let event of filteredEvents) {
+                for (let days of grid) {
+                    if (bgEvent(event.display)) {
+                        bgChunks = bgChunks.concat(createChunks(event, days));
+                        if (event.allDay) {
+                            allDayBgChunks = allDayBgChunks.concat(createAllDayChunks(event, days));
+                        }
+                    } else {
+                        if (event.allDay) {
+                            allDayChunks = allDayChunks.concat(createAllDayChunks(event, days));
+                        } else {
+                            chunks = chunks.concat(createChunks(event, days));
+                        }
+                    }
+                }
+            }
+            groupChunks(chunks);
+            prepareAllDayChunks(allDayChunks);
+        });
+
+        return {chunks, bgChunks, allDayChunks, allDayBgChunks};
+    };
+}
+
+export function iEventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {iEvents} = mainState;
+        let {grid} = viewState;
+
+        let iChunks = [];
+        let allDayIChunks = [];
+
+        for (let [, event] of iEvents) {
+            if (!event) {
+                continue;
+            }
+            untrack(() => {
+                for (let days of grid) {
+                    if (event.allDay) {
+                        allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days));
+                    } else {
+                        iChunks = iChunks.concat(createChunks(event, days));
+                    }
+                }
+            });
+        }
+
+        return {iChunks, allDayIChunks};
+    };
+}
+
+export function slotTimeLimits(mainState) {
+    return () => {
+        // Dependencies
+        let {filteredEvents, viewDates, options: {flexibleSlotTimeLimits, slotMinTime, slotMaxTime}} = mainState;
+
+        let limits;
+
+        untrack(() => {
+            limits = createSlotTimeLimits(slotMinTime, slotMaxTime, flexibleSlotTimeLimits, viewDates, filteredEvents);
+        });
+
+        return limits;
+    };
+}
+
+export function slotLabelPeriodicity(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {slotDuration, slotLabelInterval}} = mainState;
+
+        let periodicity;
+
+        untrack(() => {
+            periodicity = slotLabelInterval === undefined
+                ? toSeconds(slotDuration) < 3600 ? 2 : 1
+                : (ceil(toSeconds(slotLabelInterval) / toSeconds(slotDuration)) || 1)
+        });
+
+        return periodicity;
+    };
+}
+
+export function slots(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {options: {slotDuration}} = mainState;
+        let {intlSlotLabel, slotLabelPeriodicity, slotTimeLimits} = viewState;
+
+        let slots;
+
+        untrack(() => {
+            slots = createSlots(setMidnight(createDate()), slotDuration, slotLabelPeriodicity, slotTimeLimits, intlSlotLabel);
+        });
+
+        return slots;
+    };
+}
+
+export function snap(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {slotDuration, snapDuration}} = mainState;
+
+        snapDuration ??= slotDuration;
+
+        return {
+            duration: snapDuration,
+            ratio: toSeconds(snapDuration) / toSeconds(slotDuration)
+        };
+    };
+}