@event-calendar/core 5.0.5 → 5.1.0

package/src/plugins/resource-time-grid/index.js

@@ -1,8 +1,7 @@
-import {btnTextDay, btnTextWeek, themeView} from '#lib';
+import {assign, btnTextDay, btnTextWeek, themeView} from '#lib';
+import {setExtensions} from '../time-grid/lib.js';
 import {createTROptions, createTRROptions, createTRRParsers} from '../time-grid/options.js';
-import {createTRRStores, createTRStores} from '../time-grid/stores.js';
 import {createRROptions} from './options.js';
-import {createRRStores} from './stores.js';
 import View from './View.svelte';
 
 export default {
@@ -10,34 +9,41 @@ export default {
         createTROptions(options);
         createTRROptions(options);
         createRROptions(options);
-        options.datesAboveResources = false;
-        // Common options
-        options.buttonText.resourceTimeGridDay = 'resources';
-        options.buttonText.resourceTimeGridWeek = 'resources';
-        options.theme.colGroup = 'ec-col-group';
-        options.view = 'resourceTimeGridWeek';
-        options.views.resourceTimeGridDay = {
-            buttonText: btnTextDay,
-            component: View,
-            dayHeaderFormat: {weekday: 'long'},
-            duration: {days: 1},
-            theme: themeView('ec-resource ec-time-grid ec-day-view')
-        };
-        options.views.resourceTimeGridWeek = {
-            buttonText: btnTextWeek,
-            component: View,
-            duration: {weeks: 1},
-            theme: themeView('ec-resource ec-time-grid ec-week-view')
-        };
+        assign(options, {
+            datesAboveResources: false,
+            // Common options
+            view: 'resourceTimeGridWeek'
+        });
+        assign(options.buttonText, {
+            resourceTimeGridDay: 'resources',
+            resourceTimeGridWeek: 'resources'
+        });
+        assign(options.theme, {
+            colGroup: 'ec-col-group'
+        });
+        assign(options.views, {
+            resourceTimeGridDay: {
+                buttonText: btnTextDay,
+                component: initViewComponent,
+                dayHeaderFormat: {weekday: 'long'},
+                duration: {days: 1},
+                theme: themeView('ec-resource ec-time-grid ec-day-view')
+            },
+            resourceTimeGridWeek: {
+                buttonText: btnTextWeek,
+                component: initViewComponent,
+                duration: {weeks: 1},
+                theme: themeView('ec-resource ec-time-grid ec-week-view')
+            }
+        });
     },
 
     createParsers(parsers) {
         createTRRParsers(parsers);
-    },
-
-    createStores(state) {
-        createTRRStores(state);
-        createTRStores(state);
-        createRRStores(state);
     }
 }
+
+function initViewComponent(mainState) {
+    setExtensions(mainState);
+    return View;
+}

package/src/plugins/resource-time-grid/state.svelte.js

@@ -0,0 +1,21 @@
+import {TRRState, TRState} from '../time-grid/state.svelte.js';
+import {grid, viewResources} from './derived.js';
+
+/**
+ * ResourceTimeGrid + ResourceTimeline
+ */
+export function RRState(Base){
+    return class extends Base {
+        constructor(mainState) {
+            super(mainState);
+            this.viewResources = $derived.by(viewResources(mainState));
+        }
+    }
+}
+
+export default class ViewState extends RRState(TRState(TRRState())) {
+    constructor(mainState) {
+        super(mainState);
+        this.grid = $derived.by(grid(mainState, this));
+    }
+}

package/src/plugins/resource-timeline/Day.svelte

@@ -5,21 +5,26 @@
 
     let {day, noIeb, noBeb} = $props();
 
-    let {_monthView, slotDuration, slotWidth} = getContext('state');
+    let {options: {slotWidth}} = $derived(getContext('state'));
+    let {monthView, snap} = $derived(getContext('view-state'));
 
     let {dayStart: date, start, resource, disabled, highlight} = $derived(day);
 
     let el = $state();
 
     function dateFromPoint(x, y) {
-        if ($_monthView) {
+        if (monthView) {
             return date;
         } else {
             let dayRect = rect(el);
             let scaleX = dayRect.width / el.offsetWidth;
-            return addDuration(cloneDate(start), $slotDuration, floor((isRtl() ? dayRect.right - x : x - dayRect.left) / ($slotWidth * scaleX)));
+            return addDuration(
+                cloneDate(start),
+                snap.duration,
+                floor((isRtl() ? dayRect.right - x : x - dayRect.left) / (slotWidth * snap.ratio * scaleX))
+            );
         }
     }
 </script>
 
-<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>
+<BaseDay bind:el allDay={monthView} {date} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>

package/src/plugins/resource-timeline/Event.svelte

@@ -1,12 +1,13 @@
 <script>
     import {getContext} from 'svelte';
-    import {height, helperEvent, toSeconds} from '#lib';
+    import {height, toSeconds} from '#lib';
     import {repositionEvent} from './lib.js';
     import {InteractableEvent} from '#components';
 
     let {chunk} = $props();
 
-    let {slotDuration, slotWidth, _monthView} = getContext('state');
+    let {options: {slotDuration, slotWidth}} = $derived(getContext('state'));
+    let {monthView} = $derived(getContext('view-state'));
 
     let el = $state();
     let margin = $state(0);
@@ -15,10 +16,10 @@
     let styles = $derived(style => {
         style['grid-column'] = `${chunk.gridColumn} / span ${chunk.dates.length}`;
         style['grid-row'] = chunk.gridRow;
-        if (!$_monthView) {
-            let left = chunk.left / toSeconds($slotDuration) * $slotWidth;
+        if (!monthView) {
+            let left = chunk.left / toSeconds(slotDuration) * slotWidth;
             style['inset-inline-start'] = `${left}px`;
-            style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth}px`;
+            style['inline-size'] = `${chunk.width / toSeconds(slotDuration) * slotWidth}px`;
         }
         let marginTop = margin;
         if (event._margin) {
@@ -33,7 +34,7 @@
     });
 
     export function reposition() {
-        margin = repositionEvent(chunk, height(el), $_monthView);
+        margin = repositionEvent(chunk, height(el), monthView);
     }
 </script>
 

package/src/plugins/resource-timeline/Expander.svelte

@@ -1,10 +1,11 @@
 <script>
     import {getContext} from 'svelte';
-    import {getPayload, identity} from '#lib';
+    import {getPayload} from '#lib';
 
     let {resource} = $props();
 
-    let {resources, theme} = getContext('state');
+    let {options} = $derived(getContext('state'));
+    let {resources, theme} = $derived(options);
 
     let payload = $state.raw({});
     let expanded = $state(true);
@@ -18,7 +19,7 @@
         expanded = !expanded;
         payload.expanded = expanded;
         toggle(payload.children, expanded);
-        resources.update(identity);
+        options.resources = [...resources];
     }
 
     function toggle(children, expand) {
@@ -33,12 +34,12 @@
 </script>
 
 {#each Array(payload.level) as level}
-    <span class="{$theme.expander}"></span>
+    <span class="{theme.expander}"></span>
 {/each}
 
-<span class="{$theme.expander}">
+<span class="{theme.expander}">
     {#if payload.children?.length}
-        <button class="{$theme.button}" {onclick}>
+        <button class="{theme.button}" {onclick}>
             {#if expanded}&minus;{:else}&plus;{/if}
         </button>
     {/if}

package/src/plugins/resource-timeline/NowIndicator.svelte

@@ -2,41 +2,40 @@
     import {getContext} from 'svelte';
     import {datesEqual, toSeconds, intersectionObserver, isRtl} from '#lib';
 
-    let {grid} = $props();
-
-    let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotWidth, theme} = getContext('state');
+    let {mainEl, now, today, options: {slotDuration, slotWidth, theme}} = $derived(getContext('state'));
+    let {grid, sidebarWidth} = $derived(getContext('view-state'));
 
     // Layout
     let {gridColumn, start, end} = $derived.by(() => {
         for (let day of grid[0]) {
-            if (datesEqual(day.dayStart, $_today)) {
+            if (datesEqual(day.dayStart, today)) {
                 return day;
             }
         }
         return {};
     });
     let left = $derived.by(() => {
-        if ($_now < start || $_now > end) {
+        if (now < start || now > end) {
             return null;
         }
-        let step = toSeconds($slotDuration);
-        return ($_now - start) / 1000 / step * $slotWidth;
+        let step = toSeconds(slotDuration);
+        return (now - start) / 1000 / step * slotWidth;
     });
 
     // Observe intersections
     let observerOptions = $derived({
-        root: $_mainEl,
-        rootMargin: isRtl() ? `0px -${$_sidebarWidth + 1}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 1}px`,
+        root: mainEl,
+        rootMargin: isRtl() ? `0px -${sidebarWidth + 1}px 0px 0px` : `0px 0px 0px -${sidebarWidth + 1}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 && left !== null}
     <div {@attach intersectionObserver(onIntersect, observerOptions)}
-         class="{$theme.nowIndicator}"
+         class="{theme.nowIndicator}"
          style:grid-column="{gridColumn + 1}"
          style:grid-row="2 / span {grid.length}"
          style:inset-inline-start="{left}px"

package/src/plugins/resource-timeline/View.svelte

@@ -1,60 +1,42 @@
 <script>
-    import {getContext, tick} from 'svelte';
-    import {
-        max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, DAY_IN_SECONDS, addDuration,
-        subtractDay, cloneDate, identity
-    } from "#lib";
-    import {createGrid, createEventChunks, createIEventChunks, getSlotTimeLimits} from './lib.js';
+    import {getContext, setContext, tick} from 'svelte';
+    import {max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl} from '#lib';
+    import {getSlotTimeLimits} from './lib.js';
+    import ViewState from './state.svelte.js';
     import {ColHead, DayHeader} from '#components';
+    import Label from '../resource-time-grid/Label.svelte';
     import Day from './Day.svelte';
     import Event from './Event.svelte';
-    import Label from './Label.svelte';
     import Expander from './Expander.svelte';
     import NowIndicator from './NowIndicator.svelte';
 
-    let {_activeRangeExt, _daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
-        _slotLabelPeriodicity, _today, _viewResources, _viewDates, columnWidth, highlightedDates, nowIndicator, scrollTime,
-        slotDuration, slotHeight, slotMaxTime, slotWidth, theme, validRange} = getContext('state');
+    let mainState = getContext('state');
+    let viewState = new ViewState(mainState);
+    setContext('view-state', viewState);
 
-    let headerHeight = $state(0);
-
-    let grid = $derived(createGrid($_viewDates, $_viewResources, $_dayTimeLimits, $validRange, $highlightedDates));
-    let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
-    let iChunks = $derived(createIEventChunks($_iEvents, grid));
+    let {mainEl, today, viewDates, options: {columnWidth, nowIndicator, scrollTime, slotDuration, slotHeight, slotWidth, theme}} = $derived(mainState);
+    let {chunks, bgChunks, iChunks, daySlots, dayTimeLimits, grid, monthView, nestedResources, sidebarWidth,
+        slotLabelPeriodicity, viewResources} = $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};
-        };
-        return () => {
-            $_activeRangeExt = identity;
-        };
-    });
+    let headerHeight = $state(0);
 
     // Handle scrollTime
     $effect(() => {
-        $_viewDates;
-        $scrollTime;
+        viewDates;
+        scrollTime;
         tick().then(scrollToTime);
     });
     function scrollToTime() {
-        if ($_monthView) {
+        if (monthView) {
             return;
         }
         let scrollLeft = 0;
-        let todayOutOfView = $_today < $_viewDates[0] || $_today > $_viewDates.at(-1);
-        for (let date of $_viewDates) {
-            let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, date);
-            if (todayOutOfView || datesEqual(date, $_today)) {
+        let todayOutOfView = today < viewDates[0] || today > viewDates.at(-1);
+        for (let date of viewDates) {
+            let slotTimeLimits = getSlotTimeLimits(dayTimeLimits, date);
+            if (todayOutOfView || datesEqual(date, today)) {
                 scrollLeft += max(
-                    min(toSeconds($scrollTime), toSeconds(slotTimeLimits.max)) - toSeconds(slotTimeLimits.min),
+                    min(toSeconds(scrollTime), toSeconds(slotTimeLimits.max)) - toSeconds(slotTimeLimits.min),
                     0
                 );
                 break;
@@ -62,7 +44,7 @@
                 scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
             }
         }
-        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (isRtl() ? -1 : 1);
+        mainEl.scrollLeft = scrollLeft / toSeconds(slotDuration) * slotWidth * (isRtl() ? -1 : 1);
     }
 
     // Events reposition
@@ -74,32 +56,32 @@
 </script>
 
 <section
-    bind:this={$_mainEl}
-    class="{$theme.main}"
+    bind:this={mainState.mainEl}
+    class="{theme.main}"
     style:--ec-grid-cols="{grid[0].length}"
-    style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} minmax(auto, 1fr)"
-    style:--ec-col-width="{$columnWidth ?? 'minmax(4em, 1fr)'}"
-    style:--ec-slot-label-periodicity="{$_slotLabelPeriodicity}"
-    style:--ec-slot-height="{$slotHeight}px"
-    style:--ec-slot-width="{$slotWidth}px"
+    style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} 1fr"
+    style:--ec-col-width="{columnWidth ?? 'minmax(4em, 1fr)'}"
+    style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
+    style:--ec-slot-height="{slotHeight}px"
+    style:--ec-slot-width="{slotWidth}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">
             {#each grid[0] as {dayStart: date, disabled, highlight}, i}
                 <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
                     <DayHeader {date}/>
                 </ColHead>
             {/each}
-            {#if !$_monthView}
+            {#if !monthView}
                 {#each grid[0] as {dayStart: date, disabled, highlight}}
-                    <ColHead {date} className={$theme.slots} {disabled} {highlight} ariaHidden>
-                        {#each $_daySlots[date.getTime()] as slot}
+                    <ColHead {date} className={theme.slots} {disabled} {highlight} ariaHidden>
+                        {#each daySlots[date.getTime()] as slot}
                             <div
-                                class="{$theme.slot}"
+                                class="{theme.slot}"
                                 style:--ec-slot-label-periodicity={slot[2]}
                             >
                                 <time
@@ -114,25 +96,25 @@
         </div>
     </header>
 
-    <div class="{$theme.body}" role="rowgroup">
-        <aside class="{$theme.sidebar}">
-            {#each $_viewResources as resource}
-                <div class="{$theme.rowHead}" role="rowheader">
-                    {#if $_nestedResources}
+    <div class="{theme.body}" role="rowgroup">
+        <aside class="{theme.sidebar}">
+            {#each viewResources as resource}
+                <div class="{theme.rowHead}" role="rowheader">
+                    {#if nestedResources}
                         <Expander {resource} />
                     {/if}
                     <Label {resource}/>
                 </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={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
                 {/each}
             {/each}
         </div>
-        <div class="{$theme.events}">
+        <div class="{theme.events}">
             {#each chunks as chunk, i}
                 <!-- svelte-ignore binding_property_non_reactive -->
                 <Event bind:this={refs[i]} {chunk}/>
@@ -146,7 +128,7 @@
         </div>
     </div>
 
-    {#if $nowIndicator && !$_monthView}
-        <NowIndicator {grid} />
+    {#if nowIndicator && !monthView}
+        <NowIndicator/>
     {/if}
 </section>

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

@@ -0,0 +1,167 @@
+import {untrack} from 'svelte';
+import {
+    addDay, addDuration, bgEvent, cloneDate, createSlots, createSlotTimeLimits, datesEqual, getPayload, outsideRange,
+    toSeconds
+} from '#lib';
+import {createChunks, prepareChunks} from './lib.js';
+
+export function grid(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {viewDates, options: {highlightedDates, validRange}} = mainState;
+        let {dayTimeLimits, viewResources} = viewState;
+
+        let grid = [];
+
+        untrack(() => {
+            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 eventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {filteredEvents} = mainState;
+        let {grid} = viewState;
+
+        let chunks = [];
+        let bgChunks = [];
+
+        untrack(() => {
+            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 iEventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {iEvents} = mainState;
+        let {grid} = viewState;
+
+        let iChunks = [];
+
+        for (let [, event] of iEvents) {
+            if (!event) {
+                continue;
+            }
+            untrack(() => {
+                for (let days of grid) {
+                    iChunks = iChunks.concat(createChunks(event, days));
+                }
+            });
+        }
+
+        return iChunks;
+    };
+}
+
+// slotTimeLimits per day
+export function dayTimeLimits(mainState) {
+    return () => {
+        // Dependencies
+        let {filteredEvents, viewDates, options: {flexibleSlotTimeLimits, slotMinTime, slotMaxTime}} = mainState;
+
+        let dayTimeLimits = {};
+
+        untrack(() => {
+            for (let date of viewDates) {
+                dayTimeLimits[date.getTime()] = createSlotTimeLimits(
+                    slotMinTime,
+                    slotMaxTime,
+                    flexibleSlotTimeLimits,
+                    [date],
+                    filteredEvents
+                );
+            }
+        });
+
+        return dayTimeLimits;
+    };
+}
+
+export function daySlots(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {viewDates, options: {slotDuration}} = mainState;
+        let {dayTimeLimits, intlSlotLabel, slotLabelPeriodicity} = viewState;
+
+        let slots = {};
+
+        untrack(() => {
+            for (let date of viewDates) {
+                let key = date.getTime();
+                slots[key] = key in dayTimeLimits
+                    ? createSlots(date, slotDuration, slotLabelPeriodicity, dayTimeLimits[key], intlSlotLabel)
+                    : [];
+            }
+        });
+
+        return slots;
+    };
+}
+
+export function nestedResources(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {resources}} = mainState;
+
+        let nested;
+
+        untrack(() => {
+            nested = resources.some(resource => getPayload(resource).children.length);
+        });
+
+        return nested;
+    };
+}
+
+export function monthView(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {slotDuration}} = mainState;
+
+        let monthView;
+
+        untrack(() => {
+            monthView = !toSeconds(slotDuration);
+        });
+
+        return monthView;
+    };
+}