@1771technologies/lytenyte-pro/dist/components/annotations/annotation-row-sections.js

Blazingly fast headless React data grid with 100s of features.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { splitRect, topSection, centerSection, bottomSection, } from "@1771technologies/lytenyte-shared";
import { useCutoffContext, useRowSourceContext, useColumnsContext, } from "@1771technologies/lytenyte-core/internal";
import { AnnotationRect } from "./annotation-rect.js";
import { AnnotationPointRect } from "./annotation-point-rect.js";
import { resolveRowIndex, resolveColumnIndex, useColumnIdToIndex } from "./resolve-anchor.js";
const wrapperStyle = {
    width: "100%",
    height: 0,
    display: "grid",
    gridTemplateRows: "0px",
    gridTemplateColumns: "0px",
};
function useSplitRangeAnnotations(annotations) {
    const { startCutoff, endCutoff, topCutoff, bottomCutoff } = useCutoffContext();
    const rowSource = useRowSourceContext();
    const { view } = useColumnsContext();
    const colIdToIndex = useColumnIdToIndex(view.visibleColumns);
    return useMemo(() => {
        const result = [];
        for (const annotation of annotations) {
            if (annotation.anchor.kind !== "range")
                continue;
            const rowStart = resolveRowIndex(annotation.anchor.rowStart, rowSource);
            const rowEnd = resolveRowIndex(annotation.anchor.rowEnd, rowSource);
            const colStart = resolveColumnIndex(annotation.anchor.colStart, colIdToIndex);
            const colEnd = resolveColumnIndex(annotation.anchor.colEnd, colIdToIndex);
            if (rowStart == null || rowEnd == null || colStart == null || colEnd == null)
                continue;
            const rects = splitRect({ rowStart, rowEnd, columnStart: colStart, columnEnd: colEnd }, startCutoff, endCutoff, topCutoff, bottomCutoff);
            for (const rect of rects)
                result.push({ rect, annotation });
        }
        return result;
    }, [annotations, startCutoff, endCutoff, topCutoff, bottomCutoff, rowSource, colIdToIndex]);
}
export function AnnotationRowSectionTop({ annotations, }) {
    const split = useSplitRangeAnnotations(annotations);
    const topSplit = useMemo(() => split.filter((s) => topSection[s.rect.section]), [split]);
    return (_jsx("div", { role: "presentation", style: wrapperStyle, children: topSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))) }));
}
export function AnnotationRowSectionBottom({ annotations, }) {
    const split = useSplitRangeAnnotations(annotations);
    const bottomSplit = useMemo(() => split.filter((s) => bottomSection[s.rect.section]), [split]);
    return (_jsx("div", { role: "presentation", style: wrapperStyle, children: bottomSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))) }));
}
export function AnnotationRowSectionCenter({ annotations, }) {
    const split = useSplitRangeAnnotations(annotations);
    const centerSplit = useMemo(() => split.filter((s) => centerSection[s.rect.section]), [split]);
    const points = useMemo(() => annotations.filter((a) => a.anchor.kind === "point"), [annotations]);
    return (_jsxs("div", { role: "presentation", style: wrapperStyle, children: [centerSplit.map((s, i) => (_jsx(AnnotationRect, { rect: s.rect, annotation: s.annotation }, `${s.annotation.id}-${i}`))), points.map((a) => (_jsx(AnnotationPointRect, { anchor: a.anchor, annotation: a }, a.id)))] }));
}