postext 1.46.4 → 1.48.0

package/dist/design/layout.js

@@ -1,11 +1,13 @@
 import { flowTextWidth, getMeasureWritingMode, lineBaselineOffset, withMeasureWritingMode } from '../measure/vertical';
-import { isLogicalEdge, physicalEdge, physicalPlacement } from './logicalEdges';
+import { edgeSide, isLogicalEdge, physicalEdge, physicalPlacement, sideFraction } from './logicalEdges';
 import { bitmapLayoutSize } from '../bitmapResolution';
 import { comicArtCrop } from '../comics/art';
 import { dimensionToPx } from '../units';
+import { borderSidesPx, cornerRadiiPx, isCornerRadii, normalizeBoxStyle, uniformRadius } from './boxShape';
 import { resolveTextDots } from '../textDots';
 import { resolveDesignLineHeight } from '../defaults/headerFooter';
 import { createBoundingBox, pictureTraits } from '../vdt';
+import { mapPath, parseSvgPathCached, pathViewBox } from './svgPath';
 import { buildFontString } from '../measure';
 import { graphemeCount } from '../measure/graphemes';
 import { joiningScriptIn } from '../measure/joining';
@@ -15,6 +17,8 @@ import { withLineEndHyphen } from '../measure/geminate';
 import { BREAKING_SPACE_RUNS_SPLIT_RE, NO_BREAK_SPACES, isBreakingSpaceRun } from '../measure/spaces';
 import { LEADER_MARK, resolveDesignResourceId, resolveDesignText, } from './placeholders';
 import { fitLeader } from '../measure/leader';
+import { layoutConnector } from './connector';
+import { repeatInstance } from '../composed/templates';
 import { hasJoiningScript, joinsWithNext } from '../bidi';
 import { designBaseDirection, directRuns, directedTextWidth, measuresRunsAsPainted, paintedRunWidth } from './bidiText';
 import { composeCjkDesignParagraph, composesDesignAsCjk } from './cjkText';
@@ -94,13 +98,29 @@ function resolvePadding(padding, dpi, baseFontSizePx) {
 function resolveBox(style, dpi, baseFontSizePx) {
     if (!style)
         return undefined;
-    return {
+    const padding = resolvePadding(style.padding, dpi, baseFontSizePx);
+    if (!isCornerRadii(style.borderRadius) && style.borderSides === undefined) {
+        return {
+            backgroundColor: style.backgroundColor?.hex,
+            borderColor: style.borderColor?.hex,
+            borderWidthPx: dimPx(style.borderWidth, dpi, baseFontSizePx),
+            borderRadiusPx: dimPx(uniformRadius(style.borderRadius), dpi, baseFontSizePx),
+            padding,
+        };
+    }
+    // Corners of their own and a border per side (#1059), folded back to
+    // the plain fields where they say no more.
+    const toPx = (d) => dimPx(d, dpi, baseFontSizePx);
+    const whole = { enabled: true, color: style.borderColor, width: style.borderWidth };
+    const shape = normalizeBoxStyle({
         backgroundColor: style.backgroundColor?.hex,
         borderColor: style.borderColor?.hex,
         borderWidthPx: dimPx(style.borderWidth, dpi, baseFontSizePx),
-        borderRadiusPx: dimPx(style.borderRadius, dpi, baseFontSizePx),
-        padding: resolvePadding(style.padding, dpi, baseFontSizePx),
-    };
+        borderRadiusPx: 0,
+        borderRadiiPx: cornerRadiiPx(style.borderRadius, toPx),
+        ...(style.borderSides !== undefined ? { borderSides: borderSidesPx(whole, style.borderSides, toPx) } : {}),
+    });
+    return { ...shape, padding };
 }
 function colorHex(c) {
     return c?.hex ?? '#000000';
@@ -115,10 +135,17 @@ function overrideColor(c, overrides) {
 function overrideBoxStyle(style, overrides) {
     if (!style)
         return style;
+    const sides = style.borderSides;
     return {
         ...style,
         backgroundColor: overrideColor(style.backgroundColor, overrides),
         borderColor: overrideColor(style.borderColor, overrides),
+        // Each side's own colour too (#1059).
+        ...(sides && typeof sides === 'object'
+            ? {
+                borderSides: Object.fromEntries(Object.entries(sides).map(([k, v]) => [k, v && typeof v === 'object' && v.color ? { ...v, color: overrideColor(v.color, overrides) } : v])),
+            }
+            : {}),
     };
 }
 /** The element with every palette-linked colour (text colour, rule colour,
@@ -140,6 +167,14 @@ export function applyPaletteOverrides(el, overrides) {
             return { ...el, color: overrideColor(el.color, overrides) ?? el.color };
         case 'box':
             return { ...el, style: overrideBoxStyle(el.style, overrides) ?? el.style };
+        case 'path':
+            return {
+                ...el,
+                ...(el.fill ? { fill: overrideColor(el.fill, overrides) } : {}),
+                ...(el.stroke ? { stroke: overrideColor(el.stroke, overrides) } : {}),
+            };
+        case 'connector':
+            return { ...el, color: overrideColor(el.color, overrides) ?? el.color };
         default:
             return el;
     }
@@ -736,6 +771,25 @@ function edgeYFromPin(anchorY, pinY, height) {
 // ---------------------------------------------------------------------------
 // Main engine
 // ---------------------------------------------------------------------------
+/**
+ * `anchor` (the point of `edge` on `ref`) moved along the side the edge
+ * stands on to `at` (#1055): from the side's start — the left of a top or
+ * bottom side, its right when the page starts on the right (`startRight`),
+ * the top of a left or right side — a fraction of its length. Along the
+ * side the element is centred on that point (a rule's thickness on a
+ * frame's middle); across it the edge's pin stays (`below` hangs under the
+ * side, `bottom` stands inside on it). `center`, and an `at` that is no
+ * side position, leave the anchor as it is.
+ */
+function alongSide(anchor, edge, at, ref, startRight) {
+    const side = edgeSide(edge);
+    const f = sideFraction(at);
+    if (!side || f === undefined)
+        return anchor;
+    if (side === 'left' || side === 'right')
+        return { ...anchor, anchorY: ref.y + f * ref.height, pinY: 'middle' };
+    return { ...anchor, anchorX: ref.x + (startRight ? 1 - f : f) * ref.width, pinX: 'middle' };
+}
 /** A size written as `{ to, edge }` (#928). */
 function isSizeTo(size) {
     return typeof size === 'object' && size !== null && 'to' in size && 'edge' in size;
@@ -752,11 +806,12 @@ function withSizesTo(el, pin, refOf) {
         return el;
     const along = (s, axis) => {
         const ref = refOf(s.to);
-        const edges = axis === 'x' ? { left: 'start', right: 'end' } : { top: 'start', bottom: 'end' };
-        const side = edges[s.edge];
-        if (!ref || !side)
+        // `center` (#1055): the box's middle on the axis being sized.
+        const edges = axis === 'x' ? { left: 0, center: 0.5, right: 1 } : { top: 0, center: 0.5, bottom: 1 };
+        const side = Object.prototype.hasOwnProperty.call(edges, s.edge) ? edges[s.edge] : undefined;
+        if (!ref || side === undefined)
             return 'fill';
-        const at = axis === 'x' ? (side === 'start' ? ref.x : ref.x + ref.width) : (side === 'start' ? ref.y : ref.y + ref.height);
+        const at = axis === 'x' ? ref.x + side * ref.width : ref.y + side * ref.height;
         const from = axis === 'x' ? pin.anchorX : pin.anchorY;
         const p = axis === 'x' ? pin.pinX : pin.pinY;
         const room = p === 'start' ? at - from : p === 'end' ? from - at : 2 * Math.abs(at - from);
@@ -771,6 +826,81 @@ function withSizesTo(el, pin, refOf) {
         out.maxWidth = along(size.maxWidth, 'x');
     return { ...el, placement: { ...el.placement, size: out } };
 }
+/**
+ * A connector (#1056) between the boxes it names: another element of the
+ * slot, else a frame or group of the page (`frames.named`, or the declared
+ * boxes with `pin`). `#card[*]` in `to` is every instance of `card` the
+ * page has, in item order. An end on a box the page does not show (absent
+ * from `named`, or in `frames.absent`) is dropped with a
+ * `connectorDropped` issue; with no `from` or no `to` left nothing is
+ * drawn.
+ */
+function layoutConnectorElement(el, resolvedGeo, frames, issues, dpi, startRight) {
+    const boxes = (el.pin ? frames.declared : undefined) ?? frames.named ?? {};
+    const boxOf = (name) => {
+        const dep = resolvedGeo.get(name);
+        if (dep)
+            return { x: dep.x, y: dep.y, width: dep.width, height: dep.height };
+        if (frames.absent?.has(name))
+            return undefined;
+        return Object.prototype.hasOwnProperty.call(boxes, name) ? boxes[name] : undefined;
+    };
+    const endOf = (end) => {
+        const to = end?.to;
+        if (typeof to !== 'string' || !to.startsWith('#'))
+            return null;
+        const name = to.slice(1);
+        const box = boxOf(name);
+        if (!box) {
+            issues.push({ kind: 'connectorDropped', elementId: el.id, targetId: name });
+            return undefined;
+        }
+        const anchor = end.anchor;
+        if (typeof anchor === 'string' && anchor !== '' && !resolvedGeo.has(name)) {
+            // An anchor of the frame's picture (#1057): the end is that point, a
+            // box of no size the line arrives at.
+            const at = frames.anchorPoint?.(name, anchor) ?? { known: [] };
+            if ('hidden' in at) {
+                // The point is cut off by its frame (a picture past the frame's
+                // foot): nothing to point at on this page.
+                issues.push({ kind: 'connectorDropped', elementId: el.id, targetId: name });
+                return undefined;
+            }
+            if (!('x' in at)) {
+                issues.push({ kind: 'connectorAnchorUnknown', elementId: el.id, targetId: name, anchor, ...(at.resourceId !== undefined ? { resourceId: at.resourceId } : {}), known: at.known });
+                return undefined;
+            }
+            return { name, box: { x: at.x, y: at.y, width: 0, height: 0 }, end: end };
+        }
+        return { name, box, end: end };
+    };
+    const from = endOf(el.from);
+    if (!from)
+        return undefined;
+    const written = Array.isArray(el.to) ? el.to : el.to ? [el.to] : [];
+    const ends = [];
+    for (const end of written) {
+        const to = end?.to;
+        if (typeof to === 'string' && to.endsWith('[*]')) {
+            // Every instance of the frame the page has (#1061), in item order.
+            const frame = to.slice(1, -3);
+            const items = Object.keys(boxes)
+                .map((n) => ({ n, at: repeatInstance(n) }))
+                .filter((x) => x.at?.frame === frame)
+                .sort((a, b) => a.at.item - b.at.item);
+            for (const { n } of items) {
+                const e = endOf({ ...end, to: `#${n}` });
+                if (e)
+                    ends.push(e);
+            }
+            continue;
+        }
+        const e = endOf(end);
+        if (e)
+            ends.push(e);
+    }
+    return layoutConnector(el, from, ends, { dpi, startRight });
+}
 /** Layout one design slot against its container. */
 export function layoutDesignSlot(slot, context, pageIndex) {
     const issues = [];
@@ -787,10 +917,14 @@ export function layoutDesignSlot(slot, context, pageIndex) {
         .filter((el) => pageMatchesParity(pageIndex, el.parity) && pageMatchesRole(el.pages, context.pageRole))
         .map((el) => (overrides && Object.keys(overrides).length > 0 ? applyPaletteOverrides(el, overrides) : el))
         // Start and end edges read as the physical ones of this page (#936).
-        .map((el) => (isLogicalEdge(el.placement.anchor.edge) ? { ...el, placement: physicalPlacement(el.placement, context.startRight === true) } : el));
+        .map((el) => (el.kind !== 'connector' && isLogicalEdge(el.placement.anchor.edge) ? { ...el, placement: physicalPlacement(el.placement, context.startRight === true) } : el));
+    // Connectors (#1056) are laid after every placed element, between the
+    // boxes they join; only where there are frames to join (a composed
+    // page's decoration).
+    const placed = candidates.filter((el) => el.kind !== 'connector');
     // Topologically sort (dependencies first) to resolve geometry; paint
     // order is still the array order (first = back), restored below.
-    const ordered = topoSort(candidates, issues, context.frames?.named);
+    const ordered = topoSort(placed, issues, context.frames?.named);
     // Precompute: resolved text contents (placeholder-expanded), with the
     // `\n` escape of the template and of attribute values turned into a
     // newline before any case transform (which would make it `\N`).
@@ -847,9 +981,13 @@ export function layoutDesignSlot(slot, context, pageIndex) {
                     fillRef = refGeo;
             }
         }
-        const anchor = useElementEdge
+        const onEdge = useElementEdge
             ? resolveElementAnchor(given.placement.anchor.edge, refGeo)
             : resolveContainerAnchor(given.placement.anchor.edge, refGeo);
+        // A point along a side of another element, a frame or a group (#1055).
+        const anchor = target && !frame && refGeo !== containerRef && given.placement.anchor.at !== undefined
+            ? alongSide(onEdge, given.placement.anchor.edge, given.placement.anchor.at, refGeo, context.startRight === true)
+            : onEdge;
         // A text element's offset may be written in ems of its own size (a
         // running head four characters below the type area).
         const emPx = given.kind === 'text' ? dimPx(given.fontSize, context.dpi) : undefined;
@@ -903,6 +1041,14 @@ export function layoutDesignSlot(slot, context, pageIndex) {
             resolvedGeo.set(el.id, prim);
             primsByElement.set(given, [prim]);
         }
+        else if (el.kind === 'path') {
+            // Data that cannot be read draws nothing; the box still stands for
+            // the elements anchored to it.
+            const prim = layoutPathElement(el, { anchorX, anchorY, pinX: anchor.pinX, pinY: anchor.pinY }, fillRef, context.dpi);
+            resolvedGeo.set(el.id, prim);
+            if (prim.subpaths.length > 0)
+                primsByElement.set(given, [prim]);
+        }
         else if (el.kind === 'image') {
             const prim = layoutImageElement(el, {
                 anchorX,
@@ -926,6 +1072,15 @@ export function layoutDesignSlot(slot, context, pageIndex) {
             primsByElement.set(given, [prim]);
         }
     }
+    if (context.frames?.named) {
+        for (const el of candidates) {
+            if (el.kind !== 'connector')
+                continue;
+            const prim = layoutConnectorElement(el, resolvedGeo, context.frames, issues, context.dpi, context.startRight === true);
+            if (prim)
+                primsByElement.set(el, [prim]);
+        }
+    }
     const primitives = [];
     const elementIds = [];
     for (const el of candidates) {
@@ -1788,6 +1943,53 @@ function altTextOf(el, resource) {
     const altText = designImageAltText(resource);
     return altText ? { altText } : {};
 }
+/** The black of a path that sets neither a fill nor an outline (an SVG
+ *  path's default fill). */
+const DEFAULT_PATH_FILL = '#000000';
+/** An outline's width when the element gives none: 0.5 pt, a rule's. */
+const DEFAULT_PATH_STROKE_WIDTH = { value: 0.5, unit: 'pt' };
+/** A path element (#1060): its box sized and pinned as a box's, its
+ *  `viewBox` stretched to the box (`'none'`) or fitted inside it, centred
+ *  (`'meet'`), the outline in page px. Path data that cannot be read, or a
+ *  `viewBox` with no area, gives no outline. */
+function layoutPathElement(el, pin, container, dpi) {
+    const widthSize = resolveFixedSize(el.placement.size?.width, dpi);
+    const heightSize = resolveFixedSize(el.placement.size?.height, dpi);
+    const width = typeof widthSize === 'number' ? widthSize : Math.max(0, fillToContainerEdge(pin.anchorX, pin.pinX, container));
+    const height = typeof heightSize === 'number' ? heightSize : Math.max(0, fillToContainerEdgeY(pin.anchorY, pin.pinY, container));
+    const x = edgeXFromPin(pin.anchorX, pin.pinX, width);
+    const y = edgeYFromPin(pin.anchorY, pin.pinY, height);
+    const prim = { kind: 'path', id: el.id, x, y, width, height, subpaths: [] };
+    const vb = pathViewBox(el.viewBox);
+    const parsed = typeof el.d === 'string' ? parseSvgPathCached(el.d) : undefined;
+    if (!vb || !parsed?.ok)
+        return prim;
+    let sx = width / vb[0];
+    let sy = height / vb[1];
+    let ox = x;
+    let oy = y;
+    if (el.preserveAspectRatio === 'meet') {
+        const k = Math.min(sx, sy);
+        ox += (width - vb[0] * k) / 2;
+        oy += (height - vb[1] * k) / 2;
+        sx = k;
+        sy = k;
+    }
+    prim.subpaths = mapPath(parsed.subpaths, ox, oy, sx, sy);
+    const fill = el.fill?.hex ?? (el.stroke ? undefined : DEFAULT_PATH_FILL);
+    if (fill)
+        prim.fill = fill;
+    if (el.stroke?.hex) {
+        const widthPx = dimPx(el.width ?? DEFAULT_PATH_STROKE_WIDTH, dpi);
+        const dash = (Array.isArray(el.dash) ? el.dash : []).map((d) => Math.max(0, dimPx(d, dpi)));
+        prim.stroke = {
+            color: el.stroke.hex,
+            widthPx: Math.max(0, widthPx),
+            ...(dash.length > 0 && dash.some((v) => v > 0) ? { dash } : {}),
+        };
+    }
+    return prim;
+}
 function layoutBoxElement(el, pin, container, dpi) {
     const widthSize = resolveFixedSize(el.placement.size?.width, dpi);
     const heightSize = resolveFixedSize(el.placement.size?.height, dpi);