ggaction 0.0.17 → 0.0.18

package/src/layout/legendLane.js

@@ -1,441 +1 @@
-export const SIDE_LEGEND_BLOCK_GAP = 24;
-export const HORIZONTAL_LEGEND_BLOCK_GAP = 40;
-export const SIDE_LEGEND_SYMBOL_CENTER = 16;
-export const SIDE_LEGEND_LABEL_START = 44;
-export const HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP = 12;
-
-export function isHorizontalEdgeLegend(config) {
-  return config !== undefined &&
-    ["top", "bottom"].includes(config.position) &&
-    config.layout !== "legacy-bottom";
-}
-
-export function resolveSingleHorizontalLegendPlacement({ plot, canvas, config, bounds }) {
-  if (!isHorizontalEdgeLegend(config)) {
-    throw new Error("Single legend placement requires a horizontal edge layout.");
-  }
-  const dx = config.align === "left" ? plot.x - bounds.left
-    : config.align === "right" ? plot.x + plot.width - bounds.right
-      : plot.x + plot.width / 2 - midpoint(bounds.left, bounds.right);
-  const dy = config.position === "top" ? plot.y - config.offset - bounds.bottom
-    : plot.y + plot.height + config.offset - bounds.top;
-  const occupied = translateBounds(bounds, dx, dy);
-  if (occupied.left < 0 || occupied.right > canvas.width || occupied.top < 0 || occupied.bottom > canvas.height) {
-    throw new Error(`Legend layout requires more ${config.position}-margin or Canvas space.`);
-  }
-  return { dx, dy, occupied };
-}
-
-function midpoint(start, end) {
-  const sum = start + end;
-  const result = Number.isFinite(sum) ? sum / 2 : start / 2 + end / 2;
-  return result === 0 ? 0 : result;
-}
-
-function unionBounds(bounds) {
-  return bounds.reduce((union, item) => ({
-    left: Math.min(union.left, item.left),
-    right: Math.max(union.right, item.right),
-    top: Math.min(union.top, item.top),
-    bottom: Math.max(union.bottom, item.bottom)
-  }), { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity });
-}
-
-function decoration(border) {
-  return border === false
-    ? 0
-    : border.padding + border.lineWidth / 2;
-}
-
-function horizontalExtent(blocks, labelStart) {
-  let left = 0;
-  let right = 0;
-  for (const block of blocks) {
-    const inset = block.inset ?? 0;
-    if (block.title !== undefined) right = Math.max(right, block.title.width + inset);
-    left = Math.min(left,
-      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.left - block.symbol.centerX - inset
-    );
-    right = Math.max(
-      right,
-      SIDE_LEGEND_SYMBOL_CENTER + block.symbol.right - block.symbol.centerX + inset,
-      labelStart + block.labels.width + inset
-    );
-  }
-  return { left, right };
-}
-
-function placeBlock(block, cursor, labelStart) {
-  let dy;
-  if (block.title === undefined) {
-    dy = cursor - block.bounds.top;
-  } else {
-    const desiredTitleY = Math.ceil(cursor + block.title.fontSize / 2);
-    dy = desiredTitleY - block.title.y;
-    const futureTop = block.bounds.top + dy;
-    if (futureTop < cursor) dy += cursor - futureTop;
-  }
-  const bounds = {
-    left: block.bounds.left,
-    right: block.bounds.right,
-    top: block.bounds.top + dy,
-    bottom: block.bounds.bottom + dy
-  };
-  return {
-    id: block.id,
-    dy,
-    titleDx: block.title === undefined
-      ? undefined
-      : -block.title.x,
-    symbolDx: SIDE_LEGEND_SYMBOL_CENTER - block.symbol.centerX,
-    labelDx: labelStart - block.labels.x,
-    bounds
-  };
-}
-
-function overlap(a, b) {
-  return a.left < b.right && a.right > b.left &&
-    a.top < b.bottom && a.bottom > b.top;
-}
-
-export function resolveSideLegendLane({
-  side,
-  plot,
-  canvas,
-  groups,
-  axisBounds
-}) {
-  if (!["right", "left"].includes(side)) {
-    throw new Error(`Unsupported side legend lane "${side}".`);
-  }
-  const blocks = groups.flatMap(group => group.blocks);
-  if (blocks.length < 2) return undefined;
-  const labelStart = Math.max(SIDE_LEGEND_LABEL_START, ...blocks.map(
-    block => SIDE_LEGEND_SYMBOL_CENTER + Math.abs(block.labels.x - block.symbol.centerX)
-  ));
-  const laneExtent = horizontalExtent(blocks, labelStart);
-  const offset = blocks.reduce(
-    (maximum, block) => Math.max(maximum, block.offset),
-    -Infinity
-  );
-  const titleStartX = side === "right"
-    ? plot.x + plot.width + offset
-    : plot.x - offset - laneExtent.right;
-  const symbolCenterX = titleStartX + SIDE_LEGEND_SYMBOL_CENTER;
-  const labelStartX = titleStartX + labelStart;
-  const first = blocks[0];
-  let cursor = first.title === undefined
-    ? plot.y + 12
-    : plot.y + 20 - first.title.fontSize / 2;
-  const placements = [];
-  const backgrounds = [];
-  const occupiedGroups = [];
-
-  for (const group of groups) {
-    const inset = decoration(group.border);
-    if (occupiedGroups.length > 0) cursor += inset;
-    const groupPlacements = [];
-    for (const block of group.blocks) {
-      const placement = placeBlock(block, cursor, labelStart);
-      groupPlacements.push(placement);
-      placements.push({
-        ...placement,
-        titleDx: placement.titleDx === undefined
-          ? undefined
-          : placement.titleDx + titleStartX,
-        symbolDx: placement.symbolDx + titleStartX,
-        labelDx: placement.labelDx + titleStartX
-      });
-      cursor = placement.bounds.bottom + SIDE_LEGEND_BLOCK_GAP;
-    }
-    const vertical = unionBounds(groupPlacements.map(item => item.bounds));
-    const groupExtent = horizontalExtent(group.blocks, labelStart);
-    const foreground = {
-      left: titleStartX + groupExtent.left,
-      right: titleStartX + groupExtent.right,
-      top: vertical.top,
-      bottom: vertical.bottom
-    };
-    const occupied = {
-      left: foreground.left - inset,
-      right: foreground.right + inset,
-      top: foreground.top - inset,
-      bottom: foreground.bottom + inset
-    };
-    occupiedGroups.push(occupied);
-    if (group.backgroundId !== undefined) {
-      backgrounds.push({
-        id: group.backgroundId,
-        x: foreground.left - group.border.padding,
-        y: foreground.top - group.border.padding,
-        width: foreground.right - foreground.left + group.border.padding * 2,
-        height: foreground.bottom - foreground.top + group.border.padding * 2
-      });
-    }
-    cursor = occupied.bottom + SIDE_LEGEND_BLOCK_GAP;
-  }
-
-  const occupied = unionBounds(occupiedGroups);
-  if (
-    occupied.left < 0 || occupied.right > canvas.width ||
-    occupied.top < 0 || occupied.bottom > canvas.height
-  ) {
-    throw new Error(`Legend lane requires more ${side}-margin or vertical Canvas space.`);
-  }
-  if (axisBounds !== undefined && overlap(occupied, axisBounds)) {
-    throw new Error(`${side[0].toUpperCase()}${side.slice(1)} legend lane and y-axis guides require more margin space.`);
-  }
-  return {
-    side,
-    titleStartX,
-    symbolCenterX,
-    labelStartX,
-    placements,
-    backgrounds,
-    occupied
-  };
-}
-
-function translateBounds(bounds, dx, dy) {
-  return {
-    left: bounds.left + dx,
-    right: bounds.right + dx,
-    top: bounds.top + dy,
-    bottom: bounds.bottom + dy
-  };
-}
-
-function expandBounds(bounds, inset) {
-  return {
-    left: bounds.left - inset,
-    right: bounds.right + inset,
-    top: bounds.top - inset,
-    bottom: bounds.bottom + inset
-  };
-}
-
-function packHorizontalRows(groups, plot) {
-  const rows = [];
-  let row = [];
-  let cursor = plot.x;
-  for (const group of groups) {
-    const interval = expandBounds(group.horizontal, group.inset);
-    const width = interval.right - interval.left;
-    if (width > plot.width) {
-      throw new Error("Horizontal legend block requires more plot width.");
-    }
-    let dx = cursor - interval.left;
-    let placed = translateBounds(interval, dx, 0);
-    if (row.length > 0 && placed.right > plot.x + plot.width) {
-      rows.push(row);
-      row = [];
-      cursor = plot.x;
-      dx = cursor - interval.left;
-      placed = translateBounds(interval, dx, 0);
-    }
-    row.push({ group, interval: placed, dx });
-    cursor = placed.right + HORIZONTAL_LEGEND_BLOCK_GAP;
-  }
-  if (row.length > 0) rows.push(row);
-  return rows;
-}
-
-function normalizeHorizontalRow(entries) {
-  const stacked = entries.filter(entry =>
-    entry.group.title !== undefined && entry.group.inline !== true
-  );
-  const commonTitleY = stacked[0]?.group.title.y;
-  const titleDescent = stacked.length === 0
-    ? 0
-    : stacked.reduce((maximum, entry) => Math.max(
-        maximum,
-        entry.group.title.bounds.bottom - entry.group.title.y
-      ), -Infinity);
-  const elementAnchor = commonTitleY === undefined
-    ? midpoint(
-        entries[0].group.element.top,
-        entries[0].group.element.bottom
-      )
-    : commonTitleY + titleDescent + HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP;
-  return entries.map(({ group, dx }) => {
-    if (group.atomic) {
-      const contentDy = elementAnchor - group.element.top;
-      const foreground = translateBounds(group.content, dx, contentDy);
-      return { id: group.id, dx, titleDy: contentDy, contentDy, foreground,
-        occupied: expandBounds(foreground, group.inset), padding: group.padding,
-        backgroundId: group.backgroundId };
-    }
-    const contentDy = commonTitleY === undefined
-      ? elementAnchor - midpoint(
-          group.element.top,
-          group.element.bottom
-        )
-      : elementAnchor - group.element.top;
-    const titleDy = group.title === undefined
-      ? 0
-      : group.inline === true
-        ? contentDy
-        : commonTitleY - group.title.y;
-    const foreground = unionBounds([
-      ...(group.title === undefined
-        ? []
-        : [translateBounds(group.title.bounds, dx, titleDy)]),
-      translateBounds(group.content, dx, contentDy)
-    ]);
-    return {
-      id: group.id,
-      dx,
-      titleDy,
-      contentDy,
-      foreground,
-      occupied: expandBounds(foreground, group.inset),
-      padding: group.padding,
-      backgroundId: group.backgroundId
-    };
-  });
-}
-
-function translateHorizontalPlacement(placement, dy) {
-  return {
-    ...placement,
-    titleDy: placement.titleDy + dy,
-    contentDy: placement.contentDy + dy,
-    foreground: translateBounds(placement.foreground, 0, dy),
-    occupied: translateBounds(placement.occupied, 0, dy)
-  };
-}
-
-export function resolveHorizontalLegendLane({
-  edge,
-  plot,
-  canvas,
-  groups,
-  collisionBounds = []
-}) {
-  if (!["top", "bottom"].includes(edge)) {
-    throw new Error(`Unsupported horizontal legend lane "${edge}".`);
-  }
-  if (groups.length < 2) return undefined;
-  const packed = packHorizontalRows(groups, plot);
-  const normalized = packed.map(normalizeHorizontalRow);
-  const placements = [];
-  let previousRowBounds;
-  for (let index = 0; index < normalized.length; index += 1) {
-    const row = normalized[index];
-    const rowBounds = unionBounds(row.map(item => item.occupied));
-    let dy;
-    if (index === 0) {
-      const anchor = edge === "top"
-        ? packed[index].reduce((maximum, item) => Math.max(
-            maximum,
-            item.group.horizontal.bottom
-          ), -Infinity)
-        : packed[index].reduce((minimum, item) => Math.min(
-            minimum,
-            item.group.horizontal.top
-          ), Infinity);
-      dy = edge === "top"
-        ? anchor - rowBounds.bottom
-        : anchor - rowBounds.top;
-    } else {
-      dy = edge === "bottom"
-        ? previousRowBounds.bottom + HORIZONTAL_LEGEND_BLOCK_GAP - rowBounds.top
-        : previousRowBounds.top - HORIZONTAL_LEGEND_BLOCK_GAP - rowBounds.bottom;
-    }
-    const translated = row.map(item => translateHorizontalPlacement(item, dy));
-    placements.push(...translated);
-    previousRowBounds = unionBounds(translated.map(item => item.occupied));
-  }
-  const occupied = unionBounds(placements.map(item => item.occupied));
-  if (placements.some(placement =>
-    placement.occupied.left < 0 || placement.occupied.right > canvas.width ||
-    placement.occupied.top < 0 || placement.occupied.bottom > canvas.height
-  )) {
-    throw new Error(`Legend lane requires more ${edge}-margin or Canvas space.`);
-  }
-  if (placements.some(placement =>
-    collisionBounds.some(bounds => overlap(placement.occupied, bounds))
-  )) {
-    const owner = edge === "top" ? "chart titles" : "x-axis guides";
-    throw new Error(
-      `${edge[0].toUpperCase()}${edge.slice(1)} legend lane and ${owner} require more margin space.`
-    );
-  }
-  return {
-    edge,
-    placements: placements.map(placement => ({
-      ...placement,
-      ...(placement.backgroundId === undefined
-        ? {}
-        : {
-            background: {
-              id: placement.backgroundId,
-              x: placement.foreground.left - placement.padding,
-              y: placement.foreground.top - placement.padding,
-              width: placement.foreground.right - placement.foreground.left +
-                placement.padding * 2,
-              height: placement.foreground.bottom - placement.foreground.top +
-                placement.padding * 2
-            }
-          })
-    })),
-    occupied,
-    rowCount: packed.length
-  };
-}
-
-// Compose independently measured content blocks before the outer edge lane
-// treats the whole group as one indivisible item.
-export function resolveHorizontalLegendGroup({ edge, plot, canvas, groups,
-  align, offset, border, backgroundId, collisionBounds = [] }) {
-  const inset = decoration(border);
-  const innerPlot = { ...plot, x: plot.x + inset, width: plot.width - inset * 2 };
-  const packed = packHorizontalRows(groups, innerPlot);
-  const rows = packed.map(normalizeHorizontalRow);
-  let cursor = 0;
-  const placements = [];
-  for (const row of rows) {
-    const bounds = unionBounds(row.map(item => item.occupied));
-    const dy = edge === "top" ? cursor - bounds.bottom : cursor - bounds.top;
-    const translated = row.map(item => translateHorizontalPlacement(item, dy));
-    placements.push(...translated);
-    const occupied = unionBounds(translated.map(item => item.occupied));
-    cursor = edge === "top" ? occupied.top - HORIZONTAL_LEGEND_BLOCK_GAP
-      : occupied.bottom + HORIZONTAL_LEGEND_BLOCK_GAP;
-  }
-  const foreground = unionBounds(placements.map(item => item.occupied));
-  const occupied = expandBounds(foreground, inset);
-  const width = occupied.right - occupied.left;
-  const x = align === "left" ? plot.x : align === "right" ? plot.x + plot.width - width
-    : plot.x + (plot.width - width) / 2;
-  const dx = x - occupied.left;
-  const dy = edge === "top" ? plot.y - offset - occupied.bottom
-    : plot.y + plot.height + offset - occupied.top;
-  const finalBounds = translateBounds(occupied, dx, dy);
-  if (finalBounds.left < 0 || finalBounds.right > canvas.width ||
-    finalBounds.top < 0 || finalBounds.bottom > canvas.height) {
-    throw new Error(`Combined legend requires more ${edge}-margin or Canvas space.`);
-  }
-  if (collisionBounds.some(bounds => overlap(finalBounds, bounds))) {
-    throw new Error(`Combined ${edge} legend and ${edge === "top" ? "chart titles" : "x-axis guides"} require more margin space.`);
-  }
-  return {
-    placements: placements.map(item => ({ ...item, dx: item.dx + dx,
-      titleDy: item.titleDy + dy, contentDy: item.contentDy + dy,
-      ...(item.backgroundId === undefined ? {} : { background: {
-        id: item.backgroundId,
-        x: item.foreground.left + dx - item.padding,
-        y: item.foreground.top + dy - item.padding,
-        width: item.foreground.right - item.foreground.left + item.padding * 2,
-        height: item.foreground.bottom - item.foreground.top + item.padding * 2
-      } }) })),
-    occupied: finalBounds,
-    background: backgroundId === undefined ? undefined : {
-      id: backgroundId,
-      x: foreground.left + dx - border.padding,
-      y: foreground.top + dy - border.padding,
-      width: foreground.right - foreground.left + border.padding * 2,
-      height: foreground.bottom - foreground.top + border.padding * 2
-    }
-  };
-}
+import{canvasOverflowError as S}from"./canvas.js";import{unionBounds as _}from"../core/textMetrics.js";const N=24,$=40,v=16,X=44,U=12;function K(t){return t!==void 0&&["top","bottom"].includes(t.position)&&t.layout!=="legacy-bottom"}function W({plot:t,canvas:o,config:n,bounds:r}){if(!K(n))throw new Error("Single legend placement requires a horizontal edge layout.");const i=n.align==="left"?t.x-r.left:n.align==="right"?t.x+t.width-r.right:t.x+t.width/2-B(r.left,r.right),e=n.position==="top"?t.y-n.offset-r.bottom:t.y+t.height+n.offset-r.top,s=w(r,i,e);if(s.left<0||s.right>o.width||s.top<0||s.bottom>o.height)throw S(`Legend layout requires more ${n.position}-margin or Canvas space.`,[s],o);return{dx:i,dy:e,occupied:s}}function B(t,o){const n=t+o,r=Number.isFinite(n)?n/2:t/2+o/2;return r===0?0:r}function T(t){return t===!1?0:t.padding+t.lineWidth/2}function A(t,o){let n=0,r=0;for(const i of t){const e=i.inset??0;if(i.preserveGrid){n=Math.min(n,-e),r=Math.max(r,i.bounds.right-i.bounds.left+e);continue}i.title!==void 0&&(r=Math.max(r,i.title.width+e)),n=Math.min(n,v+i.symbol.left-i.symbol.centerX-e),r=Math.max(r,v+i.symbol.right-i.symbol.centerX+e,o+i.labels.width+e)}return{left:n,right:r}}function Y(t,o,n){const r=o-t.bounds.top,i={left:t.bounds.left,right:t.bounds.right,top:t.bounds.top+r,bottom:t.bounds.bottom+r};return{id:t.id,dy:r,titleDx:t.title===void 0?void 0:t.preserveGrid?-t.bounds.left:-t.title.x,symbolDx:t.preserveGrid?-t.bounds.left:v-t.symbol.centerX,labelDx:t.preserveGrid?-t.bounds.left:n-t.labels.x,bounds:i}}function H(t,o){return t.left<o.right&&t.right>o.left&&t.top<o.bottom&&t.bottom>o.top}function j({side:t,plot:o,canvas:n,groups:r,axisBounds:i}){if(!["right","left"].includes(t))throw new Error(`Unsupported side legend lane "${t}".`);const e=r.flatMap(c=>c.blocks);if(e.length<2)return;const s=Math.max(X,...e.filter(c=>!c.preserveGrid).map(c=>v+Math.abs(c.labels.x-c.symbol.centerX))),f=A(e,s),g=e.reduce((c,x)=>Math.max(c,x.offset),-1/0),l=t==="right"?o.x+o.width+g:o.x-g-f.right,h=l+v,d=l+s;let y=o.y;const z=[],E=[],D=[];for(const c of r){const x=T(c.border);D.length>0&&(y+=x);const G=[];for(const C of c.blocks){const I=Y(C,y,s);G.push(I),z.push({...I,titleDx:I.titleDx===void 0?void 0:I.titleDx+l,symbolDx:I.symbolDx+l,labelDx:I.labelDx+l}),y=I.bounds.bottom+N}const L=_(G.map(C=>C.bounds)),u=A(c.blocks,s),b={left:l+u.left,right:l+u.right,top:L.top,bottom:L.bottom},k={left:b.left-x,right:b.right+x,top:b.top-x,bottom:b.bottom+x};D.push(k),c.backgroundId!==void 0&&E.push({id:c.backgroundId,x:b.left-c.border.padding,y:b.top-c.border.padding,width:b.right-b.left+c.border.padding*2,height:b.bottom-b.top+c.border.padding*2}),y=k.bottom+N}const a=_(D),p=o.y-a.top,m=w(a,0,p);if(m.left<0||m.right>n.width||m.top<0||m.bottom>n.height)throw S(`Legend lane requires more ${t}-margin or vertical Canvas space.`,[m],n);if(i!==void 0&&H(m,i))throw new Error(`${t[0].toUpperCase()}${t.slice(1)} legend lane and y-axis guides require more margin space.`);return{side:t,titleStartX:l,symbolCenterX:h,labelStartX:d,placements:z.map(c=>({...c,dy:c.dy+p,bounds:w(c.bounds,0,p)})),backgrounds:E.map(c=>({...c,y:c.y+p})),occupied:m}}function J({side:t,plot:o,canvas:n,bounds:r}){if(!["left","right"].includes(t))throw new Error("Single side legend placement requires a left or right edge.");const i=o.y-r.top,e=w(r,0,i);if(e.left<0||e.right>n.width||e.top<0||e.bottom>n.height)throw S(`Legend layout requires more ${t}-margin or Canvas space.`,[e],n);return{dy:i,occupied:e}}function w(t,o,n){return{left:t.left+o,right:t.right+o,top:t.top+n,bottom:t.bottom+n}}function q(t,o){return{left:t.left-o,right:t.right+o,top:t.top-o,bottom:t.bottom+o}}function O(t,o,n=!1){const r=[];let i=[],e=o.x;for(const s of t){const f=q(s.horizontal,s.inset);if(f.right-f.left>o.width&&!n)throw new Error("Horizontal legend block requires more plot width.");let l=e-f.left,h=w(f,l,0);i.length>0&&h.right>o.x+o.width&&(r.push(i),i=[],e=o.x,l=e-f.left,h=w(f,l,0)),i.push({group:s,interval:h,dx:l}),e=h.right+$}return i.length>0&&r.push(i),r}function P(t){const o=t.filter(e=>e.group.title!==void 0&&e.group.inline!==!0),n=o[0]?.group.title.y,r=o.length===0?0:o.reduce((e,s)=>Math.max(e,s.group.title.bounds.bottom-s.group.title.y),-1/0),i=n===void 0?B(t[0].group.element.top,t[0].group.element.bottom):n+r+U;return t.map(({group:e,dx:s})=>{if(e.atomic){const h=i-e.element.top,d=w(e.content,s,h);return{id:e.id,dx:s,titleDy:h,contentDy:h,foreground:d,occupied:q(d,e.inset),padding:e.padding,backgroundId:e.backgroundId}}const f=n===void 0?i-B(e.element.top,e.element.bottom):i-e.element.top,g=e.title===void 0?0:e.inline===!0?f:n-e.title.y,l=_([...e.title===void 0?[]:[w(e.title.bounds,s,g)],w(e.content,s,f)]);return{id:e.id,dx:s,titleDy:g,contentDy:f,foreground:l,occupied:q(l,e.inset),padding:e.padding,backgroundId:e.backgroundId}})}function R(t,o){return{...t,titleDy:t.titleDy+o,contentDy:t.contentDy+o,foreground:w(t.foreground,0,o),occupied:w(t.occupied,0,o)}}function Q({edge:t,plot:o,canvas:n,groups:r,collisionBounds:i=[],allowOverflow:e=!1}){if(!["top","bottom"].includes(t))throw new Error(`Unsupported horizontal legend lane "${t}".`);if(r.length<2)return;const s=O(r,o,e),f=s.map(P),g=[];let l;for(let d=0;d<f.length;d+=1){const y=f[d],z=_(y.map(a=>a.occupied));let E;if(d===0){const a=t==="top"?s[d].reduce((p,m)=>Math.max(p,m.group.horizontal.bottom),-1/0):s[d].reduce((p,m)=>Math.min(p,m.group.horizontal.top),1/0);E=t==="top"?a-z.bottom:a-z.top}else E=t==="bottom"?l.bottom+$-z.top:l.top-$-z.bottom;const D=y.map(a=>R(a,E));g.push(...D),l=_(D.map(a=>a.occupied))}const h=_(g.map(d=>d.occupied));if(g.some(d=>d.occupied.left<0||d.occupied.right>n.width||d.occupied.top<0||d.occupied.bottom>n.height))throw S(`Legend lane requires more ${t}-margin or Canvas space.`,[h],n);if(g.some(d=>i.some(y=>H(d.occupied,y)))){const d=t==="top"?"chart titles":"x-axis guides";throw new Error(`${t[0].toUpperCase()}${t.slice(1)} legend lane and ${d} require more margin space.`)}return{edge:t,placements:g.map(d=>({...d,...d.backgroundId===void 0?{}:{background:{id:d.backgroundId,x:d.foreground.left-d.padding,y:d.foreground.top-d.padding,width:d.foreground.right-d.foreground.left+d.padding*2,height:d.foreground.bottom-d.foreground.top+d.padding*2}}})),occupied:h,rowCount:s.length}}function V({edge:t,plot:o,canvas:n,groups:r,align:i,offset:e,border:s,backgroundId:f,collisionBounds:g=[],allowOverflow:l=!1}){const h=T(s),d={...o,x:o.x+h,width:o.width-h*2},z=O(r,d,l).map(P);let E=0;const D=[];for(const u of z){const b=_(u.map(M=>M.occupied)),k=t==="top"?E-b.bottom:E-b.top,C=u.map(M=>R(M,k));D.push(...C);const I=_(C.map(M=>M.occupied));E=t==="top"?I.top-$:I.bottom+$}const a=_(D.map(u=>u.occupied)),p=q(a,h),m=p.right-p.left,x=(i==="left"?o.x:i==="right"?o.x+o.width-m:o.x+(o.width-m)/2)-p.left,G=t==="top"?o.y-e-p.bottom:o.y+o.height+e-p.top,L=w(p,x,G);if(L.left<0||L.right>n.width||L.top<0||L.bottom>n.height)throw S(`Combined legend requires more ${t}-margin or Canvas space.`,[L],n);if(g.some(u=>H(L,u)))throw new Error(`Combined ${t} legend and ${t==="top"?"chart titles":"x-axis guides"} require more margin space.`);return{placements:D.map(u=>({...u,dx:u.dx+x,titleDy:u.titleDy+G,contentDy:u.contentDy+G,...u.backgroundId===void 0?{}:{background:{id:u.backgroundId,x:u.foreground.left+x-u.padding,y:u.foreground.top+G-u.padding,width:u.foreground.right-u.foreground.left+u.padding*2,height:u.foreground.bottom-u.foreground.top+u.padding*2}}})),occupied:L,background:f===void 0?void 0:{id:f,x:a.left+x-s.padding,y:a.top+G-s.padding,width:a.right-a.left+s.padding*2,height:a.bottom-a.top+s.padding*2}}}export{$ as HORIZONTAL_LEGEND_BLOCK_GAP,U as HORIZONTAL_LEGEND_TITLE_ELEMENT_GAP,N as SIDE_LEGEND_BLOCK_GAP,X as SIDE_LEGEND_LABEL_START,v as SIDE_LEGEND_SYMBOL_CENTER,K as isHorizontalEdgeLegend,V as resolveHorizontalLegendGroup,Q as resolveHorizontalLegendLane,j as resolveSideLegendLane,W as resolveSingleHorizontalLegendPlacement,J as resolveSingleSideLegendPlacement};

package/src/layout/legendText.js

@@ -0,0 +1 @@
+import{resolveTextBounds as f,resolveTextLines as m}from"../core/textMetrics.js";function s(e,t,n){const l=m(String(e),{fontSize:t.fontSize,align:"left",baseline:"middle",blockAlign:"middle"}),o=l.length>1?l:void 0,i=f({x:0,y:0,text:String(e),...t,lines:o,textAlign:"left",textBaseline:"middle"},n);return{lines:o,width:i.right-i.left,height:i.bottom-i.top,extraHeight:i.bottom-i.top-t.fontSize}}function h(e,t,n,l,o){if(n.align===void 0)return e;const i=s(t,n,o),r=f({x:e.x,y:e.y,text:t,...n,lines:i.lines,textAlign:e.align,textBaseline:"middle"},o),a=Math.min(r.left,...l.map(g=>g.left)),d=Math.max(r.right,...l.map(g=>g.right));return{...e,x:n.align==="left"?a:n.align==="right"?d:(a+d)/2,align:n.align}}export{h as alignLegendTitle,s as resolveLegendTitleText};

package/src/layout/title.js

@@ -1,16 +1,21 @@
+import { unionBounds } from "../core/textMetrics.js";
 import { measureTextWidth, resolveTextBounds, wrapText } from "./text.js";
 
 function lineCenters(lines, style, lineHeight, start) {
   return lines.map((_, index) => start + style.fontSize / 2 + index * lineHeight);
 }
 
+function wrapTitleLines(text, options) {
+  return text.split(/\r\n|\r|\n/u).flatMap(line => line === "" ? [""] : wrapText(line, options));
+}
+
 export function buildTitleReadingBlock({ text, subtitle }, config, profile) {
-  const titleLines = wrapText(text, {
+  const titleLines = wrapTitleLines(text, {
     maxWidth: config.maxWidth,
     mode: config.wrap,
     style: config.titleStyle, profile
   });
-  const subtitleLines = subtitle === undefined ? [] : wrapText(subtitle, {
+  const subtitleLines = subtitle === undefined ? [] : wrapTitleLines(subtitle, {
     maxWidth: config.maxWidth,
     mode: config.wrap,
     style: config.subtitleStyle, profile
@@ -73,14 +78,6 @@ function axisAlignedTextBounds({ x, y, text, style, align, rotation }, profile)
   }, profile);
 }
 
-function unionBounds(bounds) {
-  return bounds.reduce((union, item) => ({
-    left: Math.min(union.left, item.left),
-    right: Math.max(union.right, item.right),
-    top: Math.min(union.top, item.top),
-    bottom: Math.max(union.bottom, item.bottom)
-  }), { left: Infinity, right: -Infinity, top: Infinity, bottom: -Infinity });
-}
 
 export function resolveTitleComponentBounds(component, style, profile) {
   return unionBounds(component.lines.map((text, index) => axisAlignedTextBounds({
@@ -97,7 +94,32 @@ export function unionTitleBounds(bounds) {
   return unionBounds(bounds);
 }
 
-export function layoutBoundsIntersect(first, second) {
-  return first.left < second.right && first.right > second.left &&
-    first.top < second.bottom && first.bottom > second.top;
+export function paintedTitleComponent(component) {
+  const indices = component.lines.flatMap((line, index) => line === "" ? [] : [index]);
+  const selected = value => Array.isArray(value) ? indices.map(index => value[index]) : value;
+  return {
+    ...component,
+    lines: indices.map(index => component.lines[index]),
+    x: selected(component.x),
+    y: selected(component.y)
+  };
+}
+
+export { textBoundsIntersect as layoutBoundsIntersect } from "../core/textMetrics.js";
+
+
+export function titleTextProperties(component, style) {
+  const distributed = value => component.lines.length === 1 && Array.isArray(value) ? value[0] : value;
+  return {
+    x: distributed(component.x),
+    y: distributed(component.y),
+    text: distributed(component.lines),
+    fill: style.color,
+    fontSize: style.fontSize,
+    fontFamily: style.fontFamily,
+    fontWeight: style.fontWeight,
+    ...(style.fontStyle === undefined ? {} : { fontStyle: style.fontStyle }),
+    textAlign: component.textAlign,
+    textBaseline: "middle"
+  };
 }

package/src/materialization/bars/aggregate.js

@@ -1,3 +1,4 @@
+import { resolveBarCellOpacities } from "./resolve.js";
 import { deriveSeriesBarCells } from "../../grammar/bars/aggregate.js";
 import { resolveBarChannels, resolveBarColorLayout, resolveBarOffsetChannel } from "../../grammar/bars/policy.js";
 import {
@@ -7,7 +8,7 @@ import {
 } from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
 import { DEFAULT_BAR_FILL, resolveBarAppearance } from "./resolve.js";
-import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { resolveBarWidth, resolveBarInterval } from "../../grammar/bars/geometry.js";
 import { finiteMidpoint } from "../../grammar/numeric.js";
 
 export function deriveAggregateRectangles(required, resolved, widthConfig) {
@@ -41,16 +42,20 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
     resolved.resolvedScales[stroke.scale],
     "stroke"
   );
+  const opacities = resolveBarCellOpacities(resolved, layer, segments.map(segment => segment.cell.sourceIndices.map(index => dataset.values[index])));
   const config = resolved.markConfigs[layer.id] ?? {};
   const existing = resolved.graphicSpec.objects[layer.id].items;
-  const width = resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step));
+  if (widthConfig?.interval !== undefined && (grouped || !temporal)) throw new Error("Bar interval width requires ungrouped aggregate temporal categories.");
+  const defaultWidth = widthConfig?.interval === undefined ? resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step)) : undefined;
   const indices = new Map(categoryScale.domain.map((value, index) => [value, index]));
   return segments.map(({ cell, start, end, seriesIndex }, index) => {
     const categoryValue = cell[channels.category];
+    const interval = widthConfig?.interval === undefined ? undefined : resolveBarInterval(widthConfig, categoryValue, categoryScale);
+    const width = interval?.width ?? defaultWidth;
     const categoryCenter = (temporal ? mapContinuousScaleValues : mapOrdinalPositionValues)([categoryValue], categoryScale)[0];
-    let position = !grouped && layer.encoding.group !== undefined && layer.encoding.group.inferredFrom === undefined && !temporal && categoryScale.step > 0
+    let position = interval?.position ?? (!grouped && layer.encoding.group !== undefined && layer.encoding.group.inferredFrom === undefined && !temporal && categoryScale.step > 0
       ? (categoryScale.start ?? categoryScale.range[0]) + indices.get(categoryValue) * categoryScale.step + categoryScale.bandwidth / 2 - width / 2
-      : categoryCenter - width / 2;
+      : categoryCenter - width / 2);
     if (grouped) {
       const direction = Math.sign(categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]) || 1;
       const offsetCenter = offsetScale.start + seriesIndex * offsetScale.step + (Math.sign(offsetScale.step) || 1) * offsetScale.bandwidth / 2;
@@ -65,6 +70,7 @@ export function deriveAggregateRectangles(required, resolved, widthConfig) {
       width: vertical ? width : Math.abs(a - b), height: vertical ? Math.abs(a - b) : width,
       fill: fills?.[index] ?? config.barAppearance?.fill ?? config.fill ?? DEFAULT_BAR_FILL,
       ...resolveBarAppearance(config, existing[index]?.properties),
-      ...(strokes === undefined ? {} : { stroke: strokes[index] }) };
+      ...(strokes === undefined ? {} : { stroke: strokes[index] }),
+      ...(opacities === undefined ? {} : { opacity: opacities[index] }) };
   });
 }

package/src/materialization/bars/histogram.js

@@ -1,3 +1,4 @@
+import { resolveBarCellOpacities } from "./resolve.js";
 import { readSeriesIdentity } from "../../grammar/pathSeries.js";
 import {
   findHistogramBinIndex,
@@ -172,6 +173,7 @@ export function deriveHistogramRectangles(required, resolved) {
     ...required,
     resolvedScales: resolved.resolvedScales
   });
+  const opacities = resolveBarCellOpacities(resolved, required.layer, segments.map(segment => segment.members));
   const existing = resolved.graphicSpec.objects[required.layer.id].items;
   const layout = resolveBarColorLayout(required.layer);
   const config = resolved.markConfigs[required.layer.id] ?? {};
@@ -224,7 +226,8 @@ export function deriveHistogramRectangles(required, resolved) {
         existing[index]?.properties.fill ??
         DEFAULT_BAR_FILL,
       ...resolveBarAppearance(config, existing[index]?.properties),
-      ...(strokes === undefined ? {} : { stroke: strokes[index] })
+      ...(strokes === undefined ? {} : { stroke: strokes[index] }),
+      ...(opacities === undefined ? {} : { opacity: opacities[index] })
     };
   });
 }

package/src/materialization/bars/ranged.js

@@ -1,3 +1,4 @@
+import { resolveBarCellOpacities } from "./resolve.js";
 import {
   mapContinuousScaleValues,
   mapOrdinalPositionValues,
@@ -6,6 +7,7 @@ import {
 } from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { BAR_GRAINS, resolveBarChannels, resolveBarGrain } from "../../grammar/bars/policy.js";
 import {
   DEFAULT_BAR_FILL,
   DEFAULT_BAR_STROKE,
@@ -14,7 +16,9 @@ import {
 
 export function deriveRangedRectangles(required, program, width) {
   const { layer, dataset } = required;
-  const vertical = layer.encoding?.y2 !== undefined;
+  if (width?.interval !== undefined) throw new Error("Bar interval width requires ungrouped aggregate temporal categories.");
+  const centered = resolveBarGrain(layer) === BAR_GRAINS.centered;
+  const vertical = centered ? resolveBarChannels(layer).orientation === "vertical" : layer.encoding?.y2 !== undefined;
   const categoryChannel = vertical ? "x" : "y";
   const measureChannel = vertical ? "y" : "x";
   const secondaryChannel = `${measureChannel}2`;
@@ -23,16 +27,22 @@ export function deriveRangedRectangles(required, program, width) {
   const secondary = layer.encoding[secondaryChannel];
   const categoryScale = program.resolvedScales[category.scale];
   const measureScale = program.resolvedScales[primary.scale];
-  const centers = mapOrdinalPositionValues(dataset.values.map(row => row[category.field]), categoryScale);
+  const categoryValues = readScaleField(dataset.values, category.field, category.fieldType, {
+    temporalUnit: category.temporalUnit
+  });
+  const centers = (centered || categoryScale.type === "time" ? mapContinuousScaleValues : mapOrdinalPositionValues)(
+    categoryValues, categoryScale
+  );
   const first = mapContinuousScaleValues(
     dataset.values.map(row => row[primary.field]),
     measureScale
   );
   const second = mapContinuousScaleValues(
-    dataset.values.map(row => row[secondary.field]),
+    dataset.values.map(row => secondary === undefined ? 0 : row[secondary.field]),
     measureScale
   );
-  const band = resolveBarWidth(width, Math.abs(categoryScale.bandwidth ?? categoryScale.step));
+  if (centered && width?.band !== undefined) throw new Error("Numeric-center bars require pixel width.");
+  const band = resolveBarWidth(centered ? width ?? { pixels: 5 } : width, Math.abs(categoryScale.bandwidth ?? categoryScale.step));
   const config = program.markConfigs[layer.id] ?? {};
   const appearance = config.barAppearance ?? {};
   const color = layer.encoding?.color;
@@ -50,6 +60,7 @@ export function deriveRangedRectangles(required, program, width) {
     program.resolvedScales[stroke.scale],
     "stroke"
   );
+  const opacities = resolveBarCellOpacities(program, layer, dataset.values.map(row => [row]));
   return dataset.values.map((_, index) => vertical ? {
     x: centers[index] - band / 2, y: Math.min(first[index], second[index]), width: band,
     height: Math.abs(second[index] - first[index]), fill: fills[index],
@@ -59,7 +70,8 @@ export function deriveRangedRectangles(required, program, width) {
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
     ),
-    ...(strokes === undefined ? {} : { stroke: strokes[index] })
+    ...(strokes === undefined ? {} : { stroke: strokes[index] }),
+    ...(opacities === undefined ? {} : { opacity: opacities[index] })
   } : {
     x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
     width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
@@ -69,6 +81,7 @@ export function deriveRangedRectangles(required, program, width) {
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
     ),
-    ...(strokes === undefined ? {} : { stroke: strokes[index] })
+    ...(strokes === undefined ? {} : { stroke: strokes[index] }),
+    ...(opacities === undefined ? {} : { opacity: opacities[index] })
   });
 }