@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/data-view/view-presets/calendar/layout.js

@@ -0,0 +1,138 @@
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+const addDays = (date, days) => {
+    const current = new Date(date);
+    return startOfDay(new Date(current.getFullYear(), current.getMonth(), current.getDate() + days));
+};
+const endOfDay = (date) => addDays(date, 1) - 1;
+const toDate = (value) => value instanceof Date ? value : new Date(value);
+export const getCalendarVisibleMonthRange = (month, weekStartsOn = 0) => {
+    const cursor = toDate(month);
+    const monthStart = new Date(cursor.getFullYear(), cursor.getMonth(), 1);
+    const monthEnd = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0);
+    const startOffset = (monthStart.getDay() - weekStartsOn + 7) % 7;
+    const endOffset = (weekStartsOn + 6 - monthEnd.getDay() + 7) % 7;
+    const from = startOfDay(new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate() - startOffset));
+    const to = endOfDay(startOfDay(new Date(monthEnd.getFullYear(), monthEnd.getMonth(), monthEnd.getDate() + endOffset)));
+    return {
+        from,
+        to,
+        monthStart: startOfDay(monthStart),
+        monthEnd: endOfDay(startOfDay(monthEnd)),
+    };
+};
+const isRangeEntry = (entry) => entry.endAt != null &&
+    getRangeEndDay(entry) > startOfDay(new Date(entry.startAt));
+const getRangeEndDay = (entry) => {
+    const endAt = entry.endAt ?? entry.startAt;
+    const end = new Date(endAt);
+    if (entry.kind === 'external' &&
+        entry.allDay &&
+        endAt > entry.startAt &&
+        end.getHours() === 0 &&
+        end.getMinutes() === 0 &&
+        end.getSeconds() === 0 &&
+        end.getMilliseconds() === 0) {
+        return addDays(startOfDay(end), -1);
+    }
+    return startOfDay(end);
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getDayOffset = (days, date) => days.findIndex(day => day.date === date);
+const assignSegmentSlots = (weeks, segments) => {
+    for (let weekIndex = 0; weekIndex < weeks.length; weekIndex++) {
+        const weekSegments = segments.filter(segment => segment.weekIndex === weekIndex);
+        const slots = [];
+        for (const segment of weekSegments) {
+            let slot = 0;
+            while (slots[slot]?.some((occupied, index) => occupied &&
+                index >= segment.startIndex &&
+                index < segment.startIndex + segment.span)) {
+                slot++;
+            }
+            const slotDays = (slots[slot] ??= Array.from({ length: 7 }, () => false));
+            for (let index = segment.startIndex; index < segment.startIndex + segment.span; index++) {
+                slotDays[index] = true;
+            }
+            segment.slot = slot;
+        }
+    }
+};
+export const getCalendarDaySegmentSlots = (day, ignoredEntryId) => {
+    return Math.max(0, ...day.segments
+        .filter(segment => segment.entry.id !== ignoredEntryId)
+        .map(segment => segment.slot + 1));
+};
+export const getCalendarDayContentSlots = (day, ignoredEntryId) => {
+    return (getCalendarDaySegmentSlots(day, ignoredEntryId) +
+        day.entries.filter(entry => entry.id !== ignoredEntryId).length);
+};
+export const createCalendarMonthLayout = ({ month, entries, weekStartsOn = 0, }) => {
+    const range = getCalendarVisibleMonthRange(month, weekStartsOn);
+    const cursor = toDate(month);
+    const days = [];
+    const dayByTime = new Map();
+    for (let date = range.from; date <= range.to; date = addDays(date, 1)) {
+        const day = {
+            date,
+            inMonth: new Date(date).getMonth() === cursor.getMonth() &&
+                new Date(date).getFullYear() === cursor.getFullYear(),
+            entries: [],
+            segments: [],
+        };
+        days.push(day);
+        dayByTime.set(date, day);
+    }
+    for (const entry of entries) {
+        if (isRangeEntry(entry)) {
+            continue;
+        }
+        const day = dayByTime.get(startOfDay(new Date(entry.startAt)));
+        if (day) {
+            day.entries.push(entry);
+        }
+    }
+    const segments = [];
+    const rangeEntries = entries.filter(isRangeEntry);
+    const visibleEndDay = startOfDay(new Date(range.to));
+    for (const entry of rangeEntries) {
+        const entryStart = startOfDay(new Date(entry.startAt));
+        const entryEnd = getRangeEndDay(entry);
+        if (entryEnd < range.from || entryStart > visibleEndDay) {
+            continue;
+        }
+        const start = clamp(entryStart, range.from, visibleEndDay);
+        const end = clamp(entryEnd, range.from, visibleEndDay);
+        const startOffset = getDayOffset(days, start);
+        const endOffset = getDayOffset(days, end);
+        if (startOffset < 0 || endOffset < 0) {
+            continue;
+        }
+        let offset = startOffset;
+        while (offset <= endOffset) {
+            const weekIndex = Math.floor(offset / 7);
+            const startIndex = offset % 7;
+            const weekEndOffset = weekIndex * 7 + 6;
+            const span = Math.min(endOffset, weekEndOffset) - offset + 1;
+            const segment = {
+                entry,
+                weekIndex,
+                startIndex,
+                span,
+                slot: 0,
+                startsBeforeWeek: startOffset < weekIndex * 7,
+                endsAfterWeek: endOffset > weekEndOffset,
+            };
+            segments.push(segment);
+            for (let index = 0; index < span; index++) {
+                days[offset + index]?.segments.push(segment);
+            }
+            offset += span;
+        }
+    }
+    const weeks = [];
+    for (let index = 0; index < days.length; index += 7) {
+        weeks.push(days.slice(index, index + 7));
+    }
+    assignSegmentSlots(weeks, segments);
+    return { from: range.from, to: range.to, weeks, days, segments };
+};

package/dist/_pkgs/data-view/view-presets/calendar/pc/actions.d.ts

@@ -0,0 +1,7 @@
+import type { DataViewRootUILogic } from '../../../core/data-view.js';
+import type { CalendarSingleView } from '../calendar-view-manager.js';
+import type { CalendarEntry } from '../types.js';
+export declare const formatEntryTime: (entry: CalendarEntry) => string;
+export declare const openCalendarEntry: (root: DataViewRootUILogic, view: CalendarSingleView, entry: CalendarEntry, target: HTMLElement, options?: {
+    selectEntry?: (entryId: string | undefined) => void;
+}) => void;

package/dist/_pkgs/data-view/view-presets/calendar/pc/actions.js

@@ -0,0 +1,68 @@
+import { popMenu, popupTargetFromElement, } from '../../../../affine-components/context-menu/index.js';
+import { CalendarPanelIcon, DateTimeIcon, PinIcon, TextIcon, } from '@blocksuite/icons/lit';
+import { html } from 'lit';
+const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+});
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+});
+export const formatEntryTime = (entry) => {
+    const formatter = entry.allDay ? dateFormatter : dateTimeFormatter;
+    const start = formatter.format(new Date(entry.startAt));
+    if (!entry.endAt) {
+        return start;
+    }
+    return `${start} - ${formatter.format(new Date(entry.endAt))}`;
+};
+export const openCalendarEntry = (root, view, entry, target, options) => {
+    if (entry.kind === 'row') {
+        options?.selectEntry?.(entry.id);
+        root.openDetailPanel({
+            view,
+            rowId: entry.rowId,
+            onClose: () => options?.selectEntry?.(undefined),
+        });
+        return;
+    }
+    popMenu(popupTargetFromElement(target), {
+        options: {
+            items: [
+                () => html `
+          <div class="calendar-event-popover">
+            <div class="calendar-event-popover-title">${entry.title}</div>
+            <div class="calendar-event-popover-row">
+              <span class="calendar-event-popover-icon"
+                >${CalendarPanelIcon()}</span
+              >
+              <span>${entry.calendarName ?? 'Calendar event'}</span>
+            </div>
+            <div class="calendar-event-popover-row">
+              <span class="calendar-event-popover-icon">${DateTimeIcon()}</span>
+              <span>${formatEntryTime(entry)}</span>
+            </div>
+            ${entry.location
+                    ? html `<div class="calendar-event-popover-row">
+                    <span class="calendar-event-popover-icon"
+                      >${PinIcon()}</span
+                    >
+                    <span>${entry.location}</span>
+                  </div>`
+                    : ''}
+            ${entry.description
+                    ? html `<div class="calendar-event-popover-row">
+                    <span class="calendar-event-popover-icon"
+                      >${TextIcon()}</span
+                    >
+                    <span class="calendar-event-popover-description"
+                      >${entry.description}</span
+                    >
+                  </div>`
+                    : ''}
+          </div>
+        `,
+            ],
+        },
+    });
+};

package/dist/_pkgs/data-view/view-presets/calendar/pc/dnd.d.ts

@@ -0,0 +1,32 @@
+import type { DndController } from '../../../../std/index.js';
+import type { CalendarEntry, CalendarRowEntry } from '../types.js';
+export type CalendarDndEntity = {
+    type: 'calendar-entry';
+    entryId: string;
+} | {
+    type: 'doc';
+    docId: string;
+};
+export declare const getCalendarDndEntity: (data: unknown) => CalendarDndEntity | undefined;
+export type CalendarDndCallbacks = {
+    getEntry: (entryId: string) => CalendarEntry | undefined;
+    canDragEntry: () => boolean;
+    canDrop: (entity: CalendarDndEntity) => boolean;
+    onEntryDragStart: (entry: CalendarRowEntry) => void;
+    onEntryDragEnd: () => void;
+    onDropTargetChange: (date: number | undefined, entity?: CalendarDndEntity) => void;
+    onDrop: (entity: CalendarDndEntity, date: number) => void;
+};
+export declare class CalendarDnd {
+    private readonly dnd;
+    private readonly callbacks;
+    private readonly entryCleanups;
+    private rootCleanup?;
+    constructor(dnd: DndController | undefined, callbacks: CalendarDndCallbacks);
+    bindRoot(element?: Element): void;
+    bindEntry(key: string, entry: CalendarEntry, element?: Element, disabled?: boolean): void;
+    cleanup(): void;
+    private cleanupEntry;
+    private cleanupRoot;
+    private updateDropTarget;
+}

package/dist/_pkgs/data-view/view-presets/calendar/pc/dnd.js

@@ -0,0 +1,159 @@
+import { getCalendarDateFromPoint } from './hit-test.js';
+const isRecord = (value) => typeof value === 'object' && value !== null;
+export const getCalendarDndEntity = (data) => {
+    if (!isRecord(data)) {
+        return;
+    }
+    const bsEntity = data.bsEntity;
+    if (isRecord(bsEntity)) {
+        if (bsEntity.type === 'calendar-entry' &&
+            typeof bsEntity.entryId === 'string') {
+            return {
+                type: 'calendar-entry',
+                entryId: bsEntity.entryId,
+            };
+        }
+        if (bsEntity.type === 'doc' && typeof bsEntity.docId === 'string') {
+            return {
+                type: 'doc',
+                docId: bsEntity.docId,
+            };
+        }
+    }
+    const entity = data.entity;
+    if (isRecord(entity) &&
+        entity.type === 'doc' &&
+        typeof entity.id === 'string') {
+        return {
+            type: 'doc',
+            docId: entity.id,
+        };
+    }
+    return;
+};
+export class CalendarDnd {
+    constructor(dnd, callbacks) {
+        this.dnd = dnd;
+        this.callbacks = callbacks;
+        this.entryCleanups = new Map();
+    }
+    bindRoot(element) {
+        if (!this.dnd || !(element instanceof HTMLElement)) {
+            this.cleanupRoot();
+            return;
+        }
+        if (this.rootCleanup?.element === element) {
+            return;
+        }
+        this.cleanupRoot();
+        const cleanup = this.dnd.dropTarget({
+            element,
+            getIsSticky: () => true,
+            setDropData: ({ input }) => ({
+                date: getCalendarDateFromPoint(element, input.clientX, input.clientY),
+            }),
+            canDrop: ({ source, input }) => {
+                const entity = getCalendarDndEntity(source.data);
+                const date = getCalendarDateFromPoint(element, input.clientX, input.clientY);
+                return entity && date !== undefined
+                    ? this.callbacks.canDrop(entity)
+                    : false;
+            },
+            onDrag: ({ source, location }) => {
+                this.updateDropTarget(element, source.data, location.current.input);
+            },
+            onDragEnter: ({ source, location }) => {
+                this.updateDropTarget(element, source.data, location.current.input);
+            },
+            onDragLeave: () => {
+                this.callbacks.onDropTargetChange(undefined);
+            },
+            onDrop: ({ source, location }) => {
+                const entity = getCalendarDndEntity(source.data);
+                const date = getCalendarDateFromPoint(element, location.current.input.clientX, location.current.input.clientY);
+                if (entity && date !== undefined && this.callbacks.canDrop(entity)) {
+                    this.callbacks.onDrop(entity, date);
+                }
+                this.callbacks.onDropTargetChange(undefined);
+            },
+        });
+        this.rootCleanup = { element, cleanup };
+    }
+    bindEntry(key, entry, element, disabled = false) {
+        if (!this.dnd ||
+            !(element instanceof HTMLElement) ||
+            entry.kind !== 'row' ||
+            disabled) {
+            this.cleanupEntry(key);
+            if (element instanceof HTMLElement) {
+                element.setAttribute('draggable', 'false');
+            }
+            return;
+        }
+        const current = this.entryCleanups.get(key);
+        if (current?.element === element) {
+            return;
+        }
+        this.cleanupEntry(key);
+        const cleanup = this.dnd.draggable({
+            element,
+            canDrag: () => {
+                const currentEntry = this.callbacks.getEntry(entry.id);
+                return currentEntry?.kind === 'row'
+                    ? this.callbacks.canDragEntry()
+                    : false;
+            },
+            setDragData: () => ({
+                type: 'calendar-entry',
+                entryId: entry.id,
+            }),
+            setDragPreview: ({ container, setOffset }) => {
+                const currentEntry = this.callbacks.getEntry(entry.id);
+                const preview = document.createElement('div');
+                preview.textContent = currentEntry?.title || 'Untitled';
+                preview.style.cssText =
+                    'padding:0 6px;height:22px;line-height:22px;border-radius:4px;' +
+                        'font-size:12px;white-space:nowrap;overflow:hidden;' +
+                        'background:var(--affine-hover-color,#f5f5f5);' +
+                        'color:var(--affine-text-primary-color,#333);' +
+                        'max-width:140px;text-overflow:ellipsis;pointer-events:none;';
+                container.append(preview);
+                setOffset({ x: 10, y: 11 });
+            },
+            onDragStart: () => {
+                const currentEntry = this.callbacks.getEntry(entry.id);
+                if (currentEntry?.kind === 'row') {
+                    this.callbacks.onEntryDragStart(currentEntry);
+                }
+            },
+            onDrop: () => {
+                this.callbacks.onEntryDragEnd();
+            },
+        });
+        this.entryCleanups.set(key, { element, cleanup });
+    }
+    cleanup() {
+        this.cleanupRoot();
+        for (const key of this.entryCleanups.keys()) {
+            this.cleanupEntry(key);
+        }
+    }
+    cleanupEntry(key) {
+        this.entryCleanups.get(key)?.cleanup();
+        this.entryCleanups.delete(key);
+    }
+    cleanupRoot() {
+        this.rootCleanup?.cleanup();
+        this.rootCleanup = undefined;
+    }
+    updateDropTarget(root, data, input) {
+        const entity = getCalendarDndEntity(data);
+        const date = getCalendarDateFromPoint(root, input.clientX, input.clientY);
+        if (entity && date !== undefined && this.callbacks.canDrop(entity)) {
+            this.callbacks.onDropTargetChange(date, entity);
+        }
+        else {
+            this.callbacks.onDropTargetChange(undefined);
+        }
+    }
+}

package/dist/_pkgs/data-view/view-presets/calendar/pc/effect.d.ts

@@ -0,0 +1 @@
+export declare function pcEffects(): void;

package/dist/_pkgs/data-view/view-presets/calendar/pc/effect.js

@@ -0,0 +1,7 @@
+import { CalendarViewUI } from './view.js';
+export function pcEffects() {
+    if (customElements.get('affine-data-view-calendar')) {
+        return;
+    }
+    customElements.define('affine-data-view-calendar', CalendarViewUI);
+}

package/dist/_pkgs/data-view/view-presets/calendar/pc/hit-test.d.ts

@@ -0,0 +1 @@
+export declare const getCalendarDateFromPoint: (root: HTMLElement, clientX: number, clientY: number) => number | undefined;

package/dist/_pkgs/data-view/view-presets/calendar/pc/hit-test.js

@@ -0,0 +1,28 @@
+export const getCalendarDateFromPoint = (root, clientX, clientY) => {
+    const doc = root.ownerDocument;
+    const hitStack = doc.elementsFromPoint(clientX, clientY);
+    for (const element of hitStack) {
+        const day = element.closest('.calendar-day[data-date]');
+        if (day && root.contains(day)) {
+            return Number(day.dataset['date']);
+        }
+    }
+    for (const element of hitStack) {
+        const week = element.closest('.calendar-week') ??
+            element.closest('.calendar-segments')?.parentElement;
+        if (week && root.contains(week)) {
+            const days = week.querySelectorAll('.calendar-day');
+            for (const day of days) {
+                const rect = day.getBoundingClientRect();
+                if (clientX >= rect.left &&
+                    clientX < rect.right &&
+                    clientY >= rect.top &&
+                    clientY < rect.bottom &&
+                    day.dataset['date']) {
+                    return Number(day.dataset['date']);
+                }
+            }
+        }
+    }
+    return;
+};

package/dist/_pkgs/data-view/view-presets/calendar/pc/styles.d.ts

@@ -0,0 +1 @@
+export declare const calendarViewStyles: import("lit").CSSResult;