ggaction 0.0.17 → 0.0.19

package/src/materialization/facetHeaders.js

@@ -1,347 +1 @@
-import { isPlainObject } from "../core/immutable.js";
-import {
-  formatVisibleText,
-  measureTextWidth,
-  resolveTextBounds,
-  textBoundsIntersect
-} from "../core/textMetrics.js";
-import { resolveDisplayLabel } from "../grammar/displayLabels.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../theme/defaults.js";
-
-const SIDES = Object.freeze(["top", "right", "bottom", "left"]);
-const ZERO_SIDES = Object.freeze({ top: 0, right: 0, bottom: 0, left: 0 });
-
-export function createDefaultFacetHeaders() {
-  return {
-    mode: "legacy",
-    common: {
-      fontSize: 12,
-      fontFamily: DEFAULT_FONT_FAMILY,
-      fontWeight: 600,
-      color: DEFAULT_COLORS.strongText,
-      offset: 10,
-      align: "center"
-    },
-    row: { side: "left" },
-    column: { side: "top" }
-  };
-}
-
-export function normalizeFacetHeadersConfig(value) {
-  if (!isPlainObject(value)) {
-    throw new TypeError("Facet headers config must be a plain object.");
-  }
-  if (value.common === undefined && value.mode === undefined) {
-    return {
-      ...createDefaultFacetHeaders(),
-      common: {
-        ...createDefaultFacetHeaders().common,
-        ...value
-      }
-    };
-  }
-  if (!["legacy", "roles"].includes(value.mode) ||
-      !isPlainObject(value.common) || !isPlainObject(value.row) ||
-      !isPlainObject(value.column)) {
-    throw new Error("Facet headers config must contain canonical mode and role objects.");
-  }
-  return {
-    mode: value.mode,
-    common: { ...value.common },
-    row: { ...value.row },
-    column: { ...value.column }
-  };
-}
-
-export function resolveFacetHeaderConfig(headers, role) {
-  const normalized = normalizeFacetHeadersConfig(headers);
-  return role === "all"
-    ? { ...normalized.common }
-    : { ...normalized.common, ...normalized[role] };
-}
-
-function mappedText(value, config) {
-  return resolveDisplayLabel(value, config.labelMap, formatVisibleText);
-}
-
-function gridCellById(spec) {
-  return new Map((spec.facet.grid?.cells ?? []).map(cell => [cell.id, cell]));
-}
-
-function legacyDescriptors(program, headers) {
-  const spec = program.compositionSpec;
-  const config = resolveFacetHeaderConfig(headers, "all");
-  const cells = gridCellById(spec);
-  return spec.children.map((id, index) => {
-    const cell = cells.get(id);
-    const text = cell === undefined
-      ? mappedText(spec.facet.values[index], config)
-      : `${mappedText(cell.rowValue, config)} · ${mappedText(cell.columnValue, config)}`;
-    return { topology: "legacy", role: "column", id, text, config };
-  });
-}
-
-function uniqueGridGroups(spec, role) {
-  const coordinate = role === "column" ? "column" : "row";
-  const valueKey = role === "column" ? "columnValue" : "rowValue";
-  const groups = new Map();
-  for (const cell of spec.facet.grid.cells) {
-    const existing = groups.get(cell[coordinate]);
-    if (existing === undefined) {
-      groups.set(cell[coordinate], {
-        coordinate: cell[coordinate],
-        value: cell[valueKey],
-        ids: [cell.id]
-      });
-    } else {
-      if (existing.value !== cell[valueKey]) {
-        throw new Error(`Facet ${role} header values conflict at coordinate ${cell[coordinate]}.`);
-      }
-      existing.ids.push(cell.id);
-    }
-  }
-  return [...groups.values()].sort((left, right) =>
-    left.coordinate - right.coordinate
-  );
-}
-
-function roleDescriptors(program, headers) {
-  const spec = program.compositionSpec;
-  const column = resolveFacetHeaderConfig(headers, "column");
-  if (spec.facet.grid === undefined) {
-    return spec.children.map((id, index) => ({
-      topology: "cell-column",
-      role: "column",
-      id,
-      ids: [id],
-      row: Math.floor(index / spec.columns),
-      text: mappedText(spec.facet.values[index], column),
-      config: column
-    }));
-  }
-  const row = resolveFacetHeaderConfig(headers, "row");
-  const columns = uniqueGridGroups(spec, "column").map(group => ({
-    topology: "grid-column",
-    role: "column",
-    ids: group.ids,
-    coordinate: group.coordinate,
-    text: mappedText(group.value, column),
-    config: column
-  }));
-  const rows = uniqueGridGroups(spec, "row").map(group => ({
-    topology: "grid-row",
-    role: "row",
-    ids: group.ids,
-    coordinate: group.coordinate,
-    text: mappedText(group.value, row),
-    config: row
-  }));
-  return [...columns, ...rows];
-}
-
-function laneThickness(descriptors, role, profile) {
-  const visible = descriptors.filter(item => item.role === role && item.text !== "");
-  if (visible.length === 0) return 0;
-  if (role === "column") {
-    return Math.max(...visible.map(item => item.config.fontSize + item.config.offset));
-  }
-  return Math.max(...visible.map(item => measureTextWidth(item.text, item.config, profile) +
-    item.config.offset));
-}
-
-export function prepareFacetHeaders(program, headersConfig) {
-  const headers = normalizeFacetHeadersConfig(headersConfig);
-  const descriptors = headers.mode === "legacy"
-    ? legacyDescriptors(program, headers)
-    : roleDescriptors(program, headers);
-  const rows = program.compositionSpec.facet.grid === undefined
-    ? Math.ceil(program.compositionSpec.children.length / program.compositionSpec.columns)
-    : Math.max(...program.compositionSpec.facet.grid.cells.map(cell => cell.row)) + 1;
-  const headerLayout = {
-    outer: { ...ZERO_SIDES },
-    cellRows: { top: Array(rows).fill(0), bottom: Array(rows).fill(0) }
-  };
-  if (headers.mode === "roles") {
-    const column = resolveFacetHeaderConfig(headers, "column");
-    const columnThickness = laneThickness(descriptors, "column", program.materializationConfigs.textMetrics);
-    if (program.compositionSpec.facet.grid === undefined) {
-      for (const descriptor of descriptors) {
-        if (descriptor.text !== "") {
-          headerLayout.cellRows[column.side][descriptor.row] = Math.max(
-            headerLayout.cellRows[column.side][descriptor.row],
-            descriptor.config.fontSize + descriptor.config.offset
-          );
-        }
-      }
-    } else {
-      headerLayout.outer[column.side] = columnThickness;
-      const row = resolveFacetHeaderConfig(headers, "row");
-      headerLayout.outer[row.side] = laneThickness(descriptors, "row", program.materializationConfigs.textMetrics);
-    }
-  }
-  return { headers, descriptors, headerLayout };
-}
-
-function horizontalAnchor(bounds, align) {
-  if (align === "start") return { x: bounds.left, textAlign: "left" };
-  if (align === "end") return { x: bounds.right, textAlign: "right" };
-  return { x: (bounds.left + bounds.right) / 2, textAlign: "center" };
-}
-
-function verticalAnchor(bounds, align) {
-  if (align === "start") return { y: bounds.top, textBaseline: "top" };
-  if (align === "end") return { y: bounds.bottom, textBaseline: "bottom" };
-  return { y: (bounds.top + bounds.bottom) / 2, textBaseline: "middle" };
-}
-
-function union(items) {
-  return {
-    left: Math.min(...items.map(item => item.left)),
-    right: Math.max(...items.map(item => item.right)),
-    top: Math.min(...items.map(item => item.top)),
-    bottom: Math.max(...items.map(item => item.bottom))
-  };
-}
-
-function placedPlot(cell, plot) {
-  return {
-    left: cell.x + plot.x,
-    right: cell.x + plot.x + plot.width,
-    top: cell.y + plot.y,
-    bottom: cell.y + plot.y + plot.height
-  };
-}
-
-function placedCell(cell) {
-  return {
-    left: cell.x,
-    right: cell.x + cell.width,
-    top: cell.y,
-    bottom: cell.y + cell.height
-  };
-}
-
-function roleItem(descriptor, cells, plots) {
-  const selectedCells = descriptor.ids.map(id => cells.get(id));
-  const missingCell = descriptor.ids.find((id, index) =>
-    selectedCells[index] === undefined
-  );
-  const missingPlot = descriptor.ids.find(id => plots.get(id) === undefined);
-  if (missingCell !== undefined || missingPlot !== undefined) {
-    throw new Error(
-      `Facet header requires cell and plot bounds for "${missingCell ?? missingPlot}".`
-    );
-  }
-  const selectedPlots = descriptor.ids.map((id, index) =>
-    placedPlot(selectedCells[index], plots.get(id))
-  );
-  const plot = union(selectedPlots);
-  const snapshots = union(selectedCells.map(placedCell));
-  const config = descriptor.config;
-  let anchor;
-  if (descriptor.role === "column") {
-    anchor = horizontalAnchor(plot, config.align);
-    const top = config.side === "top";
-    anchor.y = top
-      ? snapshots.top - config.offset - config.fontSize / 2
-      : snapshots.bottom + config.offset + config.fontSize / 2;
-    anchor.textBaseline = "middle";
-  } else {
-    anchor = verticalAnchor(plot, config.align);
-    const left = config.side === "left";
-    anchor.x = left
-      ? snapshots.left - config.offset
-      : snapshots.right + config.offset;
-    anchor.textAlign = left ? "right" : "left";
-  }
-  return { descriptor, snapshots, properties: anchor };
-}
-
-function legacyItem(descriptor, cell, plot) {
-  if (cell === undefined || plot === undefined) {
-    throw new Error(`Facet header requires cell and plot bounds for "${descriptor.id}".`);
-  }
-  return {
-    descriptor,
-    snapshots: placedCell(cell),
-    properties: {
-      ...horizontalAnchor(placedPlot(cell, plot), descriptor.config.align),
-      y: cell.y + descriptor.config.offset,
-      textBaseline: "middle"
-    }
-  };
-}
-
-function styledItem(item) {
-  const { config } = item.descriptor;
-  return {
-    type: "text",
-    properties: {
-      ...item.properties,
-      text: item.descriptor.text,
-      fill: config.color,
-      fontSize: config.fontSize,
-      fontFamily: config.fontFamily,
-      fontWeight: config.fontWeight
-    }
-  };
-}
-
-function assertRoleHeadersFit(records, items, layout, profile) {
-  const bounds = items.map((item, index) => records[index].descriptor.text === ""
-    ? undefined
-    : resolveTextBounds(item.properties, profile));
-  for (const [index, current] of bounds.entries()) {
-    if (current === undefined) continue;
-    if (current.left < -1e-9 || current.right > layout.width + 1e-9 ||
-        current.top < -1e-9 || current.bottom > layout.height + 1e-9 ||
-        bounds.some((other, otherIndex) => otherIndex < index &&
-          other !== undefined && textBoundsIntersect(other, current)) ||
-        layout.children.some(cell => textBoundsIntersect(current, placedCell(cell)))) {
-      throw new Error(
-        "Facet role headers require sufficient non-overlapping reserved space."
-      );
-    }
-  }
-}
-
-function assertLegacyHeadersFit(items, layout, plotById, profile) {
-  const previous = [];
-  for (let index = 0; index < items.length; index += 1) {
-    if (items[index].properties.text === "") continue;
-    const bounds = resolveTextBounds(items[index].properties, profile);
-    const cell = layout.children[index];
-    const plot = plotById.get(cell.id);
-    if (bounds.left < 0 || bounds.right > layout.width ||
-      bounds.top < 0 || bounds.bottom > layout.height ||
-      previous.some(item => textBoundsIntersect(item, bounds)) ||
-      textBoundsIntersect(bounds, placedPlot(cell, plot))) {
-      throw new Error(
-        "Facet headers require sufficient non-overlapping space above every child plot."
-      );
-    }
-    previous.push(bounds);
-  }
-}
-
-export function materializeFacetHeaders(program, layout, plots, prepared) {
-  const profile = program.materializationConfigs.textMetrics;
-  const cells = new Map(layout.children.map(cell => [cell.id, cell]));
-  const plotById = new Map(plots.map(plot => [plot.id, plot]));
-  const records = prepared.descriptors.map(descriptor => {
-    if (descriptor.topology === "legacy") {
-      return legacyItem(descriptor, cells.get(descriptor.id), plotById.get(descriptor.id));
-    }
-    return roleItem(descriptor, cells, plotById);
-  });
-  const items = records.map(styledItem);
-  if (prepared.headers.mode === "legacy") {
-    assertLegacyHeadersFit(items, layout, plotById, profile);
-  } else {
-    assertRoleHeadersFit(records, items, layout, profile);
-  }
-  const id = `${program.compositionSpec.id}-headers`;
-  return program
-    .createGraphics({ id, type: "collection", parent: "canvas" })
-    .editGraphics({ target: id, property: "items", value: items });
-}
+import{isPlainObject as x}from"../core/immutable.js";import{formatVisibleText as E,measureTextWidth as S,resolveTextBounds as b,textBoundsIntersect as p}from"../core/textMetrics.js";import{resolveDisplayLabel as T}from"../grammar/displayLabels.js";import{DEFAULT_COLORS as I,DEFAULT_FONT_FAMILY as B}from"../theme/defaults.js";const K=Object.freeze(["top","right","bottom","left"]),D=Object.freeze({top:0,right:0,bottom:0,left:0});function F(){return{mode:"legacy",common:{fontSize:12,fontFamily:B,fontWeight:600,color:I.strongText,offset:10,align:"center"},row:{side:"left"},column:{side:"top"}}}function M(e){if(!x(e))throw new TypeError("Facet headers config must be a plain object.");if(e.common===void 0&&e.mode===void 0)return{...F(),common:{...F().common,...e}};if(!["legacy","roles"].includes(e.mode)||!x(e.common)||!x(e.row)||!x(e.column))throw new Error("Facet headers config must contain canonical mode and role objects.");return{mode:e.mode,common:{...e.common},row:{...e.row},column:{...e.column}}}function g(e,t){const n=M(e);return t==="all"?{...n.common}:{...n.common,...n[t]}}function u(e,t){return T(e,t.labelMap,E)}function H(e){return new Map((e.facet.grid?.cells??[]).map(t=>[t.id,t]))}function O(e,t){const n=e.compositionSpec,s=g(t,"all"),c=H(n);return n.children.map((i,o)=>{const r=c.get(i),f=r===void 0?u(n.facet.values[o],s):`${u(r.rowValue,s)} \xB7 ${u(r.columnValue,s)}`;return{topology:"legacy",role:"column",id:i,text:f,config:s}})}function z(e,t){const n=t==="column"?"column":"row",s=t==="column"?"columnValue":"rowValue",c=new Map;for(const i of e.facet.grid.cells){const o=c.get(i[n]);if(o===void 0)c.set(i[n],{coordinate:i[n],value:i[s],ids:[i.id]});else{if(o.value!==i[s])throw new Error(`Facet ${t} header values conflict at coordinate ${i[n]}.`);o.ids.push(i.id)}}return[...c.values()].sort((i,o)=>i.coordinate-o.coordinate)}function L(e,t){const n=e.compositionSpec,s=g(t,"column");if(n.facet.grid===void 0)return n.children.map((r,f)=>({topology:"cell-column",role:"column",id:r,ids:[r],row:Math.floor(f/n.columns),column:f%n.columns,text:u(n.facet.values[f],s),config:s}));const c=g(t,"row"),i=z(n,"column").map(r=>({topology:"grid-column",role:"column",ids:r.ids,coordinate:r.coordinate,text:u(r.value,s),config:s})),o=z(n,"row").map(r=>({topology:"grid-row",role:"row",ids:r.ids,coordinate:r.coordinate,text:u(r.value,c),config:c}));return[...i,...o]}function v(e,t,n){const s=e.filter(c=>c.role===t&&c.text!=="");return s.length===0?0:Math.max(...t==="column"?s.map(c=>c.config.fontSize+c.config.offset):s.map(c=>S(c.text,c.config,n)+c.config.offset))}function N(e,t){const n=M(t),s=n.mode==="legacy"?O(e,n):L(e,n),c=e.compositionSpec.facet.grid===void 0?Math.ceil(e.compositionSpec.children.length/e.compositionSpec.columns):Math.max(...e.compositionSpec.facet.grid.cells.map(o=>o.row))+1,i={outer:{...D},cellRows:{top:Array(c).fill(0),bottom:Array(c).fill(0)}};if(n.mode==="legacy"&&e.compositionSpec.spacing==="plot")for(const o of s){if(o.text==="")continue;const r=e.compositionSpec.children.indexOf(o.id),f=e.compositionSpec.facet.grid?.cells[r]?.row??Math.floor(r/e.compositionSpec.columns);i.cellRows.top[f]=Math.max(i.cellRows.top[f],o.config.offset+o.config.fontSize)}if(n.mode==="roles"){const o=g(n,"column"),r=v(s,"column",e.materializationConfigs.textMetrics);if(e.compositionSpec.facet.grid===void 0){const f=["left","right"].includes(o.side);f&&(i.cellColumns={left:Array(e.compositionSpec.columns).fill(0),right:Array(e.compositionSpec.columns).fill(0)});for(const l of s)if(l.text!==""){const a=f?i.cellColumns:i.cellRows,m=f?l.column:l.row,d=f?S(l.text,l.config,e.materializationConfigs.textMetrics):l.config.fontSize;a[o.side][m]=Math.max(a[o.side][m],d+l.config.offset)}}else{i.outer[o.side]=r;const f=g(n,"row");i.outer[f.side]=v(s,"row",e.materializationConfigs.textMetrics)}}return{headers:n,descriptors:s,headerLayout:i}}function A(e,t){return t==="start"?{x:e.left,textAlign:"left"}:t==="end"?{x:e.right,textAlign:"right"}:{x:(e.left+e.right)/2,textAlign:"center"}}function R(e,t){return t==="start"?{y:e.top,textBaseline:"top"}:t==="end"?{y:e.bottom,textBaseline:"bottom"}:{y:(e.top+e.bottom)/2,textBaseline:"middle"}}function C(e){return{left:Math.min(...e.map(t=>t.left)),right:Math.max(...e.map(t=>t.right)),top:Math.min(...e.map(t=>t.top)),bottom:Math.max(...e.map(t=>t.bottom))}}function h(e,t){return{left:e.x+t.x,right:e.x+t.x+t.width,top:e.y+t.y,bottom:e.y+t.y+t.height}}function y(e){return{left:e.x,right:e.x+e.width,top:e.y,bottom:e.y+e.height}}function $(e,t,n,s){const c=e.ids.map(d=>t.get(d)),i=e.ids.find((d,w)=>c[w]===void 0),o=e.ids.find(d=>n.get(d)===void 0);if(i!==void 0||o!==void 0)throw new Error(`Facet header requires cell and plot bounds for "${i??o}".`);const r=e.ids.map((d,w)=>h(c[w],n.get(d))),f=C(r),l=s==="plot"?f:C(c.map(y)),a=e.config;let m;if(["top","bottom"].includes(a.side)){m=A(f,a.align);const d=a.side==="top";m.y=d?l.top-a.offset-a.fontSize/2:l.bottom+a.offset+a.fontSize/2,m.textBaseline="middle"}else{m=R(f,a.align);const d=a.side==="left";m.x=d?l.left-a.offset:l.right+a.offset,m.textAlign=d?"right":"left"}return{descriptor:e,snapshots:l,properties:m}}function j(e,t,n,s){if(t===void 0||n===void 0)throw new Error(`Facet header requires cell and plot bounds for "${e.id}".`);return{descriptor:e,snapshots:y(t),properties:{...A(h(t,n),e.config.align),y:s==="plot"?t.y+n.y-e.config.offset-e.config.fontSize/2:t.y+e.config.offset,textBaseline:"middle"}}}function q(e){const{config:t}=e.descriptor;return{type:"text",properties:{...e.properties,text:e.descriptor.text,fill:t.color,fontSize:t.fontSize,fontFamily:t.fontFamily,fontWeight:t.fontWeight}}}function V(e,t,n,s,c){const i=t.map((o,r)=>e[r].descriptor.text===""?void 0:b(o.properties,s));for(const[o,r]of i.entries())if(r!==void 0&&(r.left<-1e-9||r.right>n.width+1e-9||r.top<-1e-9||r.bottom>n.height+1e-9||i.some((f,l)=>l<o&&f!==void 0&&p(f,r))||n.children.some(f=>p(r,n.spacing==="plot"?h(f,c.get(f.id)):y(f)))))throw new Error("Facet role headers require sufficient non-overlapping reserved space.")}function G(e,t,n,s){const c=[];for(let i=0;i<e.length;i+=1){if(e[i].properties.text==="")continue;const o=b(e[i].properties,s),r=t.children[i],f=n.get(r.id);if(o.left<0||o.right>t.width||o.top<0||o.bottom>t.height||c.some(l=>p(l,o))||(t.spacing==="plot"?t.children.some(l=>p(o,h(l,n.get(l.id)))):p(o,h(r,f))))throw new Error("Facet headers require sufficient non-overlapping space above every child plot.");c.push(o)}}function P(e,t,n){const s=new Map(e.children.map(o=>[o.id,o])),c=new Map(t.map(o=>[o.id,o])),i=n.descriptors.map(o=>o.topology==="legacy"?j(o,s.get(o.id),c.get(o.id),e.spacing):$(o,s,c,e.spacing));return{records:i,items:i.map(q),plotById:c}}function Y(e,t,n,s){const c=e.materializationConfigs.textMetrics,{records:i,items:o,plotById:r}=P(t,n,s);s.headers.mode==="legacy"?G(o,t,r,c):V(i,o,t,c,r);const f=`${e.compositionSpec.id}-headers`;return e.createGraphics({id:f,type:"collection",parent:"canvas"}).editGraphics({target:f,property:"items",value:o})}export{F as createDefaultFacetHeaders,Y as materializeFacetHeaders,M as normalizeFacetHeadersConfig,N as prepareFacetHeaders,g as resolveFacetHeaderConfig,P as resolveFacetHeaderItems};

package/src/materialization/facets.js

@@ -1,185 +1 @@
-import { resolveGraphicBounds } from "../layout/canvas.js";
-import { resolvePlacedPlotBounds } from "../layout/composition.js";
-import {
-  alignedTextAnchor,
-  buildTitleReadingBlock
-} from "../layout/title.js";
-import { resolveFacetLayout } from "../layout/facets.js";
-import { namespaceGraphicSnapshot } from "./compositionSnapshot.js";
-import { prepareSharedFacetLegend } from "./facetGuides/index.js";
-import {
-  attachSnapshotObject,
-  clearCompositionChildren,
-  compositionChildDescriptor
-} from "./composition.js";
-import {
-  materializeFacetHeaders,
-  prepareFacetHeaders
-} from "./facetHeaders.js";
-
-const ZERO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
-
-function facetConfig(program) {
-  const config = program.materializationConfigs.facets?.[program.compositionSpec.id];
-  if (config === undefined) {
-    throw new Error(`Facet "${program.compositionSpec.id}" requires materialization config.`);
-  }
-  return config;
-}
-
-function titleLayout(program) {
-  if (program.semanticSpec.title.text === undefined) {
-    return { height: 0 };
-  }
-  const config = program.titleConfig;
-  if (config === undefined) {
-    throw new Error("Facet title requires chart title configuration.");
-  }
-  if (config.position !== "top") {
-    throw new Error("Facet parent title currently supports only top position.");
-  }
-  const block = buildTitleReadingBlock({
-    text: program.semanticSpec.title.text,
-    subtitle: program.semanticSpec.title.subtitle
-  }, config);
-  const top = 8 + config.offset;
-  if (top < 0) {
-    throw new Error("Facet parent title offset places text outside the Canvas.");
-  }
-  return { config, block, top, height: Math.ceil(top + block.height) };
-}
-
-function materializeTitleComponent(program, id, lines, centers, style, plot, top) {
-  if (lines.length === 0) return program;
-  const x = alignedTextAnchor(plot.x, plot.width, program.titleConfig.align);
-  const count = lines.length;
-  let next = program.createGraphics({
-    id,
-    type: "text",
-    ...(count > 1 ? { length: count } : {}),
-    parent: "canvas"
-  });
-  for (const [property, value] of Object.entries({
-    x,
-    y: count === 1 ? top + centers[0] : centers.map(center => top + center),
-    text: count === 1 ? lines[0] : lines,
-    fill: style.color,
-    fontSize: style.fontSize,
-    fontFamily: style.fontFamily,
-    fontWeight: style.fontWeight,
-    textAlign: program.titleConfig.align,
-    textBaseline: "middle"
-  })) {
-    next = next.editGraphics({ target: id, property, value });
-  }
-  return next;
-}
-
-function materializeTitle(program, plot, title) {
-  let next = materializeTitleComponent(
-    program,
-    "chartTitle",
-    title.block.titleLines,
-    title.block.titleCenters,
-    title.config.titleStyle,
-    plot,
-    title.top
-  );
-  if (title.block.subtitleLines.length > 0) {
-    next = materializeTitleComponent(
-      next,
-      "chartSubtitle",
-      title.block.subtitleLines,
-      title.block.subtitleCenters,
-      title.config.subtitleStyle,
-      plot,
-      title.top
-    );
-  }
-  return next;
-}
-
-export function resolveFacetProgramLayout(program, preparedLegend) {
-  program._assertCompositionProgram("resolveFacetProgramLayout");
-  if (program.compositionSpec.type !== "facet") {
-    throw new Error("resolveFacetProgramLayout requires a facet composition.");
-  }
-  const title = titleLayout(program);
-  const spec = program.compositionSpec;
-  const preparedHeaders = prepareFacetHeaders(
-    program,
-    facetConfig(program).headers
-  );
-  const gridCells = new Map(
-    (spec.facet.grid?.cells ?? []).map(cell => [cell.id, cell])
-  );
-  const layout = resolveFacetLayout({
-    children: spec.children.map((id, index) => ({
-      ...compositionChildDescriptor(id, program.children[id]),
-      value: spec.facet.values[index],
-      ...(gridCells.has(id) ? {
-        row: gridCells.get(id).row,
-        column: gridCells.get(id).column
-      } : {})
-    })),
-    columns: spec.columns,
-    gap: spec.gap,
-    align: spec.align,
-    padding: spec.padding,
-    titleHeight: title.height,
-    headerLayout: preparedHeaders.headerLayout,
-    sharedLegend: spec.facet.guides.legend === "shared",
-    ...(preparedLegend === undefined ? {} : {
-      sharedLegendGap: preparedLegend.reservation.gap,
-      sharedLegendWidth: preparedLegend.reservation.width,
-      sharedLegendHeight: preparedLegend.reservation.height,
-      sharedLegendPosition: preparedLegend.reservation.position
-    })
-  });
-  const plots = spec.children.map(id => ({
-    id,
-    ...resolveGraphicBounds(program.children[id])
-  }));
-  const plot = resolvePlacedPlotBounds({
-    placements: layout.children,
-    plots
-  });
-  return { layout, title, plot, plots, preparedHeaders };
-}
-
-export function materializeFacetGraphics(program) {
-  const preparedLegend = prepareSharedFacetLegend(program);
-  const { layout, title, plot, plots, preparedHeaders } = resolveFacetProgramLayout(
-    program,
-    preparedLegend
-  );
-  const background = program.graphicSpec.objects.canvas?.properties
-    ?.background ?? "white";
-  let next = clearCompositionChildren(program);
-  if (next.graphicSpec.objects.canvas === undefined) {
-    next = next.createGraphics({ id: "canvas", type: "canvas" });
-  }
-  for (const [property, value] of Object.entries({
-    width: layout.width,
-    height: layout.height,
-    background
-  })) {
-    next = next.editGraphics({ target: "canvas", property, value });
-  }
-  for (const placement of layout.children) {
-    const child = program.children[placement.id];
-    const snapshot = namespaceGraphicSnapshot(child.graphicSpec, {
-      namespace: `${program.compositionSpec.id}-${placement.id}`,
-      x: placement.x,
-      y: placement.y
-    });
-    next = attachSnapshotObject(next, snapshot, snapshot.order[0], "canvas");
-  }
-  next = materializeFacetHeaders(next, layout, plots, preparedHeaders);
-  next = next.composeFacetGuides({ layout, plot });
-  if (title.height > 0) next = materializeTitle(next, plot, title);
-  return next._withCanvasConfig({
-    margin: ZERO_MARGIN,
-    size: { width: "auto", height: "auto" }
-  });
-}
+import{cartesianAxisOwners as C}from"../selectors/axes.js";import{resolveConcreteGraphicBounds as G}from"../grammar/schemas/graphicBounds.js";import{textBoundsFitCanvas as F,textBoundsIntersect as m,resolveTextBounds as k}from"../core/textMetrics.js";import{axisGraphicIds as L,allLegendGraphicIds as j}from"./guides/resources.js";import{resolveGraphicBounds as u}from"../layout/canvas.js";import{resolvePlacedPlotBounds as P}from"../layout/composition.js";import{alignedTextAnchor as z,buildTitleReadingBlock as T,paintedTitleComponent as B,resolveTitleComponentBounds as E,titleTextProperties as O}from"../layout/title.js";import{resolveFacetLayout as $}from"../layout/facets.js";import{namespaceGraphicId as b,namespaceGraphicSnapshot as M}from"./compositionSnapshot.js";import{prepareSharedFacetLegend as v}from"./facetGuides/index.js";import{resolvePromotedFacetLegendLayout as H}from"./facetGuides/layout.js";import{attachSnapshotObject as I,clearCompositionChildren as A,compositionChildDescriptor as q}from"./composition.js";import{materializeFacetHeaders as R,prepareFacetHeaders as _}from"./facetHeaders.js";const W={top:0,right:0,bottom:0,left:0};function D(e){const c=e.materializationConfigs.facets?.[e.compositionSpec.id];if(c===void 0)throw new Error(`Facet "${e.compositionSpec.id}" requires materialization config.`);return c}function N(e){if(e.semanticSpec.title.text===void 0)return{height:0};const c=e.titleConfig;if(c===void 0)throw new Error("Facet title requires chart title configuration.");if(c.position!=="top")throw new Error("Facet parent title currently supports only top position.");const i=T({text:e.semanticSpec.title.text,subtitle:e.semanticSpec.title.subtitle},c),o=8+c.offset;if(o<0)throw new Error("Facet parent title offset places text outside the Canvas.");return{config:c,block:i,top:o,height:Math.ceil(o+i.height)}}function w(e,c,i,o,l,d,s){if(i.length===0)return e;const r=z(d.x,d.width,e.titleConfig.align)+(e.titleConfig.alongOffset??0),t=B({x:r,y:o.map(h=>s+h),lines:i,textAlign:e.titleConfig.align}),n=E(t,l,e.materializationConfigs.textMetrics);if(!F(n,e.graphicSpec.objects.canvas.properties))throw new Error("Facet parent title places text outside the Canvas.");const a=t.lines.length;let p=e.createGraphics({id:c,type:"text",...a>1?{length:a}:{},parent:"canvas"});for(const[h,f]of Object.entries(O(t,l)))p=p.editGraphics({target:c,property:h,value:f});return p}function Z(e,c,i){let o=w(e,"chartTitle",i.block.titleLines,i.block.titleCenters,i.config.titleStyle,c,i.top);return i.block.subtitleLines.length>0&&(o=w(o,"chartSubtitle",i.block.subtitleLines,i.block.subtitleCenters,i.config.subtitleStyle,c,i.top)),o}function J(e,c){if(e._assertCompositionProgram("resolveFacetProgramLayout"),e.compositionSpec.type!=="facet")throw new Error("resolveFacetProgramLayout requires a facet composition.");c??=v(e);const i=N(e),o=e.compositionSpec,l=_(e,D(e).headers),d=new Map((o.facet.grid?.cells??[]).map(n=>[n.id,n]));let s=$({children:o.children.map((n,a)=>({...q(n,e.children[n]),value:o.facet.values[a],...d.has(n)?{row:d.get(n).row,column:d.get(n).column}:{}})),spacing:o.spacing,plots:o.children.map(n=>({id:n,...u(e.children[n])})),columns:o.columns,gap:o.gap,align:o.align,padding:o.padding,titleHeight:i.height,headerLayout:l.headerLayout,sharedLegend:o.facet.guides.legend==="shared"&&c?.mode!=="promoted",...c===void 0?{}:{sharedLegendGap:c.reservation.gap,sharedLegendWidth:c.reservation.width,sharedLegendHeight:c.reservation.height,sharedLegendPosition:c.reservation.position}});const r=o.children.map(n=>({id:n,...u(e.children[n])}));let t=P({placements:s.children,plots:r});return{layout:s,plot:t}=H(e,{layout:s,plot:t,plots:r,title:i,preparedHeaders:l,prepared:c}),{layout:s,title:i,plot:t,plots:r,preparedHeaders:l}}function K(e,c,i){const o=[],l=c.children.map((s,r)=>({id:s.id,left:s.x+i[r].x,right:s.x+i[r].x+i[r].width,top:s.y+i[r].y,bottom:s.y+i[r].y+i[r].height}));for(const s of c.children){const r=e.children[s.id],t=[...C(r).flatMap(n=>L(n.channel,n.id).slice(2)),...j(Object.keys(r.guideConfigs.legend??{}))];for(const n of t){const a=b(`${e.compositionSpec.id}-${s.id}`,n);if(e.graphicSpec.objects[a]===void 0)continue;const p=G(e.graphicSpec,a,e.materializationConfigs.textMetrics);p!==void 0&&o.push({owner:s.id,bounds:p})}}const d=e.graphicSpec.objects[`${e.compositionSpec.id}-headers`];for(const s of d?.items??[])s.properties.text!==""&&o.push({owner:"headers",bounds:k(s.properties,e.materializationConfigs.textMetrics)});for(let s=0;s<o.length;s+=1){const r=o[s];if(l.some(t=>t.id!==r.owner&&m(r.bounds,t))||o.slice(0,s).some(t=>t.owner!==r.owner&&m(r.bounds,t.bounds)))throw new Error("Plot spacing gap is too small for the retained facet guides or headers.")}}function ae(e){const c=v(e),{layout:i,title:o,plot:l,plots:d,preparedHeaders:s}=J(e,c),r=e.graphicSpec.objects.canvas?.properties?.background??"white";let t=A(e);t.graphicSpec.objects.canvas===void 0&&(t=t.createGraphics({id:"canvas",type:"canvas"}));for(const[n,a]of Object.entries({width:i.width,height:i.height,background:r}))t=t.editGraphics({target:"canvas",property:n,value:a});for(const n of i.children){const a=e.children[n.id],p=M(a.graphicSpec,{namespace:`${e.compositionSpec.id}-${n.id}`,x:n.x,y:n.y});if(t=I(t,p,p.order[0],"canvas"),i.spacing==="plot"){const h=p.order[0],f=b(`${e.compositionSpec.id}-${n.id}`,"plot-background"),y=u(a),g=t.graphicSpec.objects[h].children?.[0];t=t.editGraphics({target:h,property:"background",value:"transparent"}).createGraphics({id:f,type:"rect",parent:h,...g===void 0?{}:{before:g}});for(const[x,S]of Object.entries({...y,stroke:"none",strokeWidth:0,fill:a.graphicSpec.objects.canvas.properties.background??"transparent"}))t=t.editGraphics({target:f,property:x,value:S})}}return t=R(t,i,d,s),t=t.composeFacetGuides({layout:i,plot:l}),i.spacing==="plot"&&K(t,i,d),o.height>0&&(t=Z(t,l,o)),t._withCanvasConfig({margin:W,size:{width:"auto",height:"auto"}})}export{ae as materializeFacetGraphics,J as resolveFacetProgramLayout};

package/src/materialization/graphicHierarchy.js

@@ -1,3 +1,5 @@
+import { cartesianAxisOwners } from "../selectors/axes.js";
+import { axisGraphicIds } from "./guides/resources.js";
 import {
   findGraphicParent,
   graphicSiblings
@@ -55,8 +57,10 @@ export function resolveMarkGraphicPlacement(program, { data, markType }) {
     ? dataset.transform[0]
     : undefined;
   if (transform?.type !== "regression") {
+    const named = new Set(cartesianAxisOwners(program).filter(owner => owner.named)
+      .flatMap(owner => axisGraphicIds(owner.channel, owner.id)));
     const axis = program.graphicSpec.objects[PLOT_GRAPHIC_ID]?.children?.find(
-      id => /^(x|y)Axis/.test(id)
+      id => id === "plotBorder" || /^(x|y)Axis/.test(id) || named.has(id)
     );
     return resolvePlotGraphicPlacement(
       program,

package/src/materialization/graphicTranslation.js

@@ -0,0 +1,73 @@
+function translateCommands(commands, dx, dy) {
+  return commands.map(command => {
+    if (command.op === "Z") return { ...command };
+    const next = {
+      ...command,
+      x: command.x + dx,
+      y: command.y + dy
+    };
+    if (command.op === "C") {
+      next.x1 = command.x1 + dx;
+      next.y1 = command.y1 + dy;
+      next.x2 = command.x2 + dx;
+      next.y2 = command.y2 + dy;
+    }
+    return next;
+  });
+}
+
+export function translatedProperties(type, properties, dx, dy) {
+  const next = { ...properties };
+  if (["circle", "rect", "text", "canvas"].includes(type)) {
+    next.x = (next.x ?? 0) + dx;
+    next.y = (next.y ?? 0) + dy;
+  } else if (type === "line") {
+    next.x1 += dx;
+    next.x2 += dx;
+    next.y1 += dy;
+    next.y2 += dy;
+  } else if (type === "path") {
+    next.commands = translateCommands(next.commands, dx, dy);
+  }
+  return next;
+}
+
+export function translateGraphic(program, id, dx, dy) {
+  const graphic = program.graphicSpec.objects[id];
+  if (dx === 0 && dy === 0) return program;
+  if (graphic.items !== undefined) {
+    let next = program.editGraphics({
+      target: id,
+      property: "items",
+      value: graphic.items.map(item => ({
+        type: item.type ?? graphic.type,
+        properties: translatedProperties(
+          item.type ?? graphic.type,
+          item.properties,
+          dx,
+          dy
+        )
+      }))
+    });
+    if (graphic.type !== "canvas") {
+      for (const child of graphic.children ?? []) next = translateGraphic(next, child, dx, dy);
+    }
+    return next;
+  }
+  let next = program;
+  const properties = translatedProperties(
+    graphic.type,
+    graphic.properties,
+    dx,
+    dy
+  );
+  for (const [property, value] of Object.entries(properties)) {
+    if (value !== graphic.properties[property]) {
+      next = next.editGraphics({ target: id, property, value });
+    }
+  }
+  if (graphic.type !== "canvas") {
+    for (const child of graphic.children ?? []) next = translateGraphic(next, child, dx, dy);
+  }
+  return next;
+}