Interaction Plugins

import type { InteractionPlugin } from '@sv5ui/scheduler';

// attach runs once per grid, attachEvent once per drawn event. Both return a Svelte
// attachment: a function that receives the element and may return a cleanup.
// attach runs inside the view component, so sv5ui hooks like useEventListener work.
const plugin: InteractionPlugin = {
  name: 'my-plugin',
  attach: (context) => (node) => {
    // listen on node, read context
    return () => { /* cleanup */ };
  },
  attachEvent: (context, position) => (node) => {
    // node is one event element; position says which event and where
  }
};

<Scheduler bind:events interactions={[plugin]} />

interface InteractionContext<T> {
  // Reading the grid
  view: string;  viewLabel: string;  range: DateRange;  days: ZonedDateTime[];  columnsPerRow: number;
  scale: TimeScale;                                   // clock to pixels
  scheduler: SchedulerContext;                        // timeZone, locale, labels, editable, now...
  hitTest: (clientX, clientY) => HitTarget | null;    // { date, dayIndex, allDay, keepsTime, eventId }
  snap: (date) => ZonedDateTime;                      // to the slot grid
  getEvent: (id) => SchedulerEvent<T> | undefined;
  events: readonly SchedulerEvent<T>[];               // in range, filtered, series expanded, by start

  // State
  selectedEventId: string | null;  select: (id | null) => void;
  focus: GridFocus | null;         setFocus: (focus | null) => void;
  setPreview: (preview: { kind, event } | null) => void;   // the ghost

  // Actions
  commit: (mutation: Omit<Mutation<T>, 'id'>) => void;     // through the save pipeline
  selectSlot: (point: { date, allDay }) => void;           // fires onSelectSlot
  selectRange: (selection: SlotSelection) => void;         // creates, or opens createPanel
  step: (direction: 1 | -1) => void;  navigate: (date, view?) => void;
  newEventId: () => string;                                // an id the store has not seen
  announce: (message: string) => void;                     // the live region
}

// attachEvent runs for every drawn event, in every view, and again when the
// layout changes. position tells you which event and what shape it has.
attachEvent: (context, position) => (node) => {
  if (position.kind !== 'time') return;              // blocks only
  node.title = `${position.event.title}, ${formatTime(position.segmentStart)}`;   // a native tooltip
}

// The built-in move and resize are attachEvent plugins too. Yours run alongside
// them; a plugin with the same name runs instead of them.

// There is no "before commit" hook on the built-in gestures. To refuse a drop,
// throw in onMutate: the event slides back and the reader hears why.
onMutate={(mutation) => {
  if (mutation.after && isWeekend(mutation.after.start)) throw new Error('Not on a weekend');
  return api.save(mutation);
}}

// To see or change every patch that reaches the store, gestures and loads alike,
// use a store middleware: the next page.

// A plugin with a gesture of its own draws its ghost through setPreview: the view
// lays the event out with its normal layout and draws it as the preview. Clear it
// when the gesture ends, before or after commit.
context.setPreview({ kind: 'move', event: { ...source, start, end } });
// ...
context.setPreview(null);
context.commit({ kind: 'move', eventId: source.id, before: source, after: { ...source, start, end } });