pagyra-js 0.0.21 → 0.0.23

package/dist/src/layout/strategies/flex/alignment.js

@@ -0,0 +1,91 @@
+import { AlignItems, JustifyContent } from "../../../css/enums.js";
+import { calculateLinesCrossSize } from "./line-builder.js";
+export function resolveAlignContentLayout(lines, alignContent, containerCrossSize, crossAxisGap) {
+    const lineCrossSizes = lines.map((line) => line.crossSize);
+    if (lines.length === 0) {
+        return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+    }
+    const naturalCross = calculateLinesCrossSize(lines, crossAxisGap);
+    const freeSpace = Math.max(0, containerCrossSize - naturalCross);
+    switch (alignContent) {
+        case "stretch":
+            if (freeSpace > 0) {
+                const extraPerLine = freeSpace / lines.length;
+                for (let i = 0; i < lineCrossSizes.length; i++) {
+                    lineCrossSizes[i] += extraPerLine;
+                }
+            }
+            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+        case "flex-end":
+            return { lineCrossSizes, initialOffset: freeSpace, additionalGap: 0 };
+        case "center":
+            return { lineCrossSizes, initialOffset: freeSpace / 2, additionalGap: 0 };
+        case "space-between":
+            if (lines.length <= 1) {
+                return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+            }
+            return { lineCrossSizes, initialOffset: 0, additionalGap: freeSpace / (lines.length - 1) };
+        case "space-around": {
+            const gap = freeSpace / lines.length;
+            return { lineCrossSizes, initialOffset: gap / 2, additionalGap: gap };
+        }
+        case "space-evenly": {
+            const gap = freeSpace / (lines.length + 1);
+            return { lineCrossSizes, initialOffset: gap, additionalGap: gap };
+        }
+        case "flex-start":
+        default:
+            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
+    }
+}
+export function resolveItemAlignment(alignSelf, containerAlign) {
+    if (alignSelf && alignSelf !== "auto") {
+        return alignSelf;
+    }
+    return containerAlign;
+}
+export function computeCrossOffset(alignment, containerSize, itemSize, marginStart, marginEnd) {
+    const total = itemSize + marginStart + marginEnd;
+    const reference = Number.isFinite(containerSize) ? containerSize : total;
+    const freeSpace = reference - total;
+    if (freeSpace <= 0) {
+        return 0;
+    }
+    switch (alignment) {
+        case AlignItems.Center:
+            return freeSpace / 2;
+        case AlignItems.FlexEnd:
+            return freeSpace;
+        default:
+            return 0;
+    }
+}
+export function resolveJustifySpacing(justify, freeSpace, itemCount) {
+    if (itemCount <= 0) {
+        return { offset: 0, gap: 0 };
+    }
+    const clamped = Number.isFinite(freeSpace) ? Math.max(freeSpace, 0) : 0;
+    switch (justify) {
+        case JustifyContent.Center:
+            return { offset: clamped / 2, gap: 0 };
+        case JustifyContent.FlexEnd:
+        case JustifyContent.End:
+        case JustifyContent.Right:
+            return { offset: clamped, gap: 0 };
+        case JustifyContent.SpaceBetween:
+            if (itemCount === 1) {
+                return { offset: 0, gap: 0 };
+            }
+            return { offset: 0, gap: clamped / (itemCount - 1) };
+        case JustifyContent.SpaceAround: {
+            const gap = clamped / itemCount;
+            return { offset: gap / 2, gap };
+        }
+        case JustifyContent.SpaceEvenly: {
+            const gap = clamped / (itemCount + 1);
+            return { offset: gap, gap };
+        }
+        default:
+            return { offset: 0, gap: 0 };
+    }
+}

package/dist/src/layout/strategies/flex/distributor.d.ts

@@ -0,0 +1,5 @@
+import type { LayoutNode } from "../../../dom/node.js";
+import type { LayoutContext } from "../../pipeline/strategy.js";
+import type { FlexItemMetrics, FlexLine } from "./types.js";
+export declare function relayoutFlexItemForMainSize(container: LayoutNode, item: FlexItemMetrics, context: LayoutContext, targetMainSize: number, isRow: boolean): void;
+export declare function distributeFlexGrowAcrossLines(lines: FlexLine[], container: LayoutNode, context: LayoutContext, containerMainSize: number, mainAxisGap: number, isRow: boolean): void;

package/dist/src/layout/strategies/flex/distributor.js

@@ -0,0 +1,56 @@
+import { refreshFlexItemSizes, recomputeLineMetrics } from "./line-builder.js";
+export function relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow) {
+    if (!Number.isFinite(targetMainSize) || targetMainSize < 0) {
+        return;
+    }
+    const prevContainerWidth = container.box.contentWidth;
+    const prevContainerHeight = container.box.contentHeight;
+    const targetContribution = targetMainSize + item.mainMarginStart + item.mainMarginEnd;
+    let displayMutated = false;
+    if (item.node.style.display !== item.effectiveDisplay) {
+        item.node.style.display = item.effectiveDisplay;
+        displayMutated = true;
+    }
+    try {
+        if (isRow) {
+            container.box.contentWidth = Math.max(0, targetContribution);
+        }
+        else {
+            container.box.contentHeight = Math.max(0, targetContribution);
+        }
+        context.layoutChild(item.node);
+    }
+    finally {
+        container.box.contentWidth = prevContainerWidth;
+        container.box.contentHeight = prevContainerHeight;
+        if (displayMutated) {
+            item.node.style.display = item.originalDisplay;
+        }
+    }
+}
+export function distributeFlexGrowAcrossLines(lines, container, context, containerMainSize, mainAxisGap, isRow) {
+    if (lines.length === 0 || !(containerMainSize > 0)) {
+        return;
+    }
+    for (const line of lines) {
+        const freeSpace = containerMainSize - line.mainSizeWithGaps;
+        if (!(freeSpace > 0)) {
+            continue;
+        }
+        const growItems = line.items.filter((item) => item.flexGrow > 0);
+        const totalGrow = growItems.reduce((sum, item) => sum + item.flexGrow, 0);
+        if (!(totalGrow > 0)) {
+            continue;
+        }
+        for (const item of growItems) {
+            const delta = (freeSpace * item.flexGrow) / totalGrow;
+            const targetMainSize = Math.max(0, item.mainSize + delta);
+            if (Math.abs(targetMainSize - item.mainSize) < 0.01) {
+                continue;
+            }
+            relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow);
+            refreshFlexItemSizes(item, isRow);
+        }
+        recomputeLineMetrics(line, mainAxisGap);
+    }
+}

package/dist/src/layout/strategies/flex/line-builder.d.ts

@@ -0,0 +1,5 @@
+import type { FlexItemMetrics, FlexLine } from "./types.js";
+export declare function buildFlexLines(items: FlexItemMetrics[], containerMainSize: number, mainAxisGap: number): FlexLine[];
+export declare function calculateLinesCrossSize(lines: FlexLine[], crossAxisGap: number): number;
+export declare function refreshFlexItemSizes(item: FlexItemMetrics, isRow: boolean): void;
+export declare function recomputeLineMetrics(line: FlexLine, mainAxisGap: number): void;

package/dist/src/layout/strategies/flex/line-builder.js

@@ -0,0 +1,55 @@
+import { calculateTotalGap } from "../../utils/gap-calculator.js";
+export function buildFlexLines(items, containerMainSize, mainAxisGap) {
+    if (items.length === 0) {
+        return [];
+    }
+    const lines = [];
+    let current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
+    for (const item of items) {
+        const addition = current.items.length === 0 ? item.mainContribution : mainAxisGap + item.mainContribution;
+        const shouldWrap = current.items.length > 0 &&
+            containerMainSize > 0 &&
+            current.mainSizeWithGaps + addition > containerMainSize + 0.01;
+        if (shouldWrap) {
+            lines.push(current);
+            current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
+        }
+        if (current.items.length > 0) {
+            current.mainSizeWithGaps += mainAxisGap;
+        }
+        current.items.push(item);
+        current.mainSizeWithGaps += item.mainContribution;
+        current.crossSize = Math.max(current.crossSize, item.crossContribution);
+    }
+    if (current.items.length > 0) {
+        lines.push(current);
+    }
+    return lines;
+}
+export function calculateLinesCrossSize(lines, crossAxisGap) {
+    if (lines.length === 0) {
+        return 0;
+    }
+    const totalLines = lines.reduce((sum, line) => sum + line.crossSize, 0);
+    return totalLines + calculateTotalGap(crossAxisGap, lines.length);
+}
+export function refreshFlexItemSizes(item, isRow) {
+    item.mainSize = isRow ? item.node.box.borderBoxWidth : item.node.box.borderBoxHeight;
+    item.crossSize = isRow ? item.node.box.borderBoxHeight : item.node.box.borderBoxWidth;
+    item.mainContribution = item.mainSize + item.mainMarginStart + item.mainMarginEnd;
+    item.crossContribution = item.crossSize + item.crossMarginStart + item.crossMarginEnd;
+}
+export function recomputeLineMetrics(line, mainAxisGap) {
+    let mainSizeWithGaps = 0;
+    let crossSize = 0;
+    for (let i = 0; i < line.items.length; i++) {
+        const item = line.items[i];
+        if (i > 0) {
+            mainSizeWithGaps += mainAxisGap;
+        }
+        mainSizeWithGaps += item.mainContribution;
+        crossSize = Math.max(crossSize, item.crossContribution);
+    }
+    line.mainSizeWithGaps = mainSizeWithGaps;
+    line.crossSize = crossSize;
+}

package/dist/src/layout/strategies/flex/types.d.ts

@@ -0,0 +1,27 @@
+import { Display } from "../../../css/enums.js";
+import { LayoutNode } from "../../../dom/node.js";
+export interface FlexItemMetrics {
+    node: LayoutNode;
+    originalDisplay: Display;
+    effectiveDisplay: Display;
+    mainMarginStart: number;
+    mainMarginEnd: number;
+    crossMarginStart: number;
+    crossMarginEnd: number;
+    mainSize: number;
+    crossSize: number;
+    mainContribution: number;
+    crossContribution: number;
+    flexGrow: number;
+    flexShrink: number;
+}
+export interface FlexLine {
+    items: FlexItemMetrics[];
+    mainSizeWithGaps: number;
+    crossSize: number;
+}
+export interface AlignContentResolution {
+    lineCrossSizes: number[];
+    initialOffset: number;
+    additionalGap: number;
+}

package/dist/src/layout/strategies/flex/types.js

@@ -0,0 +1,2 @@
+import { Display } from "../../../css/enums.js";
+import { LayoutNode } from "../../../dom/node.js";

package/dist/src/layout/strategies/flex/utils.d.ts

@@ -0,0 +1,12 @@
+import { Display } from "../../../css/enums.js";
+import type { LengthLike } from "../../../css/length.js";
+import type { FlexDirection } from "../../../css/style.js";
+import { LayoutNode } from "../../../dom/node.js";
+export declare function blockifyFlexItemDisplay(display: Display): Display;
+export declare function allowsPreferredShrink(originalDisplay: Display, effectiveDisplay: Display): boolean;
+export declare function isRowDirection(direction: FlexDirection): boolean;
+export declare function isAutoMainSize(value: LengthLike | undefined): boolean;
+export declare function computePreferredInlineWidth(node: LayoutNode): number | undefined;
+export declare function offsetLayoutSubtree(node: LayoutNode, deltaX: number, deltaY: number): void;
+export declare function resolveInitialDimension(specified: number | undefined, fallback: number): number;
+export declare function resolveFlexSize(value: LengthLike | undefined, reference: number, containerWidth?: number, containerHeight?: number): number | undefined;

package/dist/src/layout/strategies/flex/utils.js

@@ -0,0 +1,113 @@
+import { Display } from "../../../css/enums.js";
+import { isAutoLength, resolveLength } from "../../../css/length.js";
+import { LayoutNode } from "../../../dom/node.js";
+export function blockifyFlexItemDisplay(display) {
+    switch (display) {
+        case Display.Inline:
+        case Display.InlineBlock:
+            return Display.Block;
+        case Display.InlineFlex:
+            return Display.Flex;
+        case Display.InlineGrid:
+            return Display.Grid;
+        case Display.InlineTable:
+            return Display.Table;
+        default:
+            return display;
+    }
+}
+export function allowsPreferredShrink(originalDisplay, effectiveDisplay) {
+    switch (effectiveDisplay) {
+        case Display.Flex:
+        case Display.InlineFlex:
+        case Display.Grid:
+        case Display.InlineGrid:
+            return false;
+        default:
+            break;
+    }
+    if (effectiveDisplay === originalDisplay) {
+        return true;
+    }
+    return originalDisplay === Display.Inline;
+}
+export function isRowDirection(direction) {
+    return direction === "row" || direction === "row-reverse";
+}
+export function isAutoMainSize(value) {
+    if (value === undefined) {
+        return true;
+    }
+    if (typeof value === "number") {
+        return false;
+    }
+    if (value === "auto") {
+        return true;
+    }
+    return isAutoLength(value);
+}
+export function computePreferredInlineWidth(node) {
+    let maxWidth = 0;
+    node.walk((desc) => {
+        if (desc.inlineRuns && desc.inlineRuns.length > 0) {
+            const localMax = desc.inlineRuns.reduce((max, run) => Math.max(max, run.lineWidth ?? run.width), 0);
+            if (localMax > maxWidth) {
+                maxWidth = localMax;
+            }
+            return;
+        }
+        if (!desc.lineBoxes || desc.lineBoxes.length === 0) {
+            return;
+        }
+        for (const line of desc.lineBoxes) {
+            if (!line) {
+                continue;
+            }
+            const width = typeof line.width === "number" ? line.width : 0;
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+        }
+    });
+    return maxWidth > 0 ? maxWidth : undefined;
+}
+export function offsetLayoutSubtree(node, deltaX, deltaY) {
+    if (deltaX === 0 && deltaY === 0) {
+        return;
+    }
+    node.walk((desc) => {
+        if (desc !== node) {
+            desc.box.x += deltaX;
+            desc.box.y += deltaY;
+        }
+        desc.box.baseline += deltaY;
+        // Update inline runs if they exist
+        if (desc.inlineRuns && desc.inlineRuns.length > 0) {
+            for (const run of desc.inlineRuns) {
+                run.startX += deltaX;
+                run.baseline += deltaY;
+            }
+        }
+    });
+}
+export function resolveInitialDimension(specified, fallback) {
+    if (specified !== undefined && Number.isFinite(specified)) {
+        return Math.max(specified, 0);
+    }
+    if (Number.isFinite(fallback)) {
+        return Math.max(fallback, 0);
+    }
+    return 0;
+}
+export function resolveFlexSize(value, reference, containerWidth = reference, containerHeight = reference) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (typeof value === "number") {
+        return value;
+    }
+    if (value === "auto" || isAutoLength(value)) {
+        return undefined;
+    }
+    return resolveLength(value, reference, { auto: "reference", containerWidth, containerHeight });
+}