ggaction 0.0.20 → 0.0.22

package/src/materialization/facetGuides/preparation.js

@@ -2,7 +2,7 @@ import { localLegendPosition } from "../../grammar/legendGroups.js";
 import { prepareAuthoredFacetLegend, facetLegendIntent } from "./owner.js";
 import { isPlainObject } from "../../core/immutable.js";
 import { PLOT_LEGEND_POSITIONS } from "../../layout/legend.js";
-import { isContinuousColorScaleType } from "../../grammar/scales/types.js";
+import { isContinuousColorScaleType, isDiscretizedColorScaleType } from "../../grammar/scales/types.js";
 import {
   unionConcreteGraphicBounds
 } from "../../grammar/schemas/graphicBounds.js";
@@ -83,8 +83,24 @@ function continuousValues(domain, count) {
   return sampleNumericRange(domain[0], domain[1], count, "Facet legend domain");
 }
 
+function legendRequests(program) {
+  const request = legendCandidates(program);
+  const layer = findLayer(program, request.target);
+  const separate = request.channels.filter(channel => {
+    if (!["color", "stroke"].includes(channel)) return false;
+    const type = findSemanticScale(program, layer.encoding[channel].scale)?.type;
+    return isContinuousColorScaleType(type) || isDiscretizedColorScaleType(type);
+  });
+  if (separate.length === 0) return [request];
+  const categorical = request.channels.filter(channel => !separate.includes(channel));
+  return [
+    ...(categorical.length === 0 ? [] : [{ ...request, channels: categorical }]),
+    ...separate.map(channel => ({ ...request, channels: [channel] }))
+  ];
+}
+
 function prepareAutoLegendSource(child) {
-  const request = legendCandidates(child);
+  const requests = legendRequests(child);
   const canvas = child.graphicSpec.objects.canvas;
   let source = child
     ._withCanvasConfig({
@@ -99,7 +115,7 @@ function prepareAutoLegendSource(child) {
     .editGraphics({
       target: "canvas",
       property: "height",
-      value: LEGEND_SOURCE_CANVAS.height
+      value: LEGEND_SOURCE_CANVAS.height * requests.length
     });
   if (canvas?.properties.background !== undefined) {
     source = source.editGraphics({
@@ -108,27 +124,30 @@ function prepareAutoLegendSource(child) {
       value: canvas.properties.background
     });
   }
-  const scale = findSemanticScale(
-    source,
-    findLayer(source, request.target)?.encoding?.[
-      request.channels.includes("color") ? "color" : "stroke"
-    ]?.scale
-  );
-  const gradient = isContinuousColorScaleType(scale?.type);
-  const gradientPrefix = request.channels.includes("color")
-    ? "colorGradient"
-    : "strokeGradient";
-  source = source.createLegend({
-    target: request.target,
-    channels: request.channels,
-    ...(gradient ? {
-      count: 5,
-      gradient: { length: 180, thickness: 12 },
-      labels: { offset: 9, fontSize: 10 },
-      titleStyle: { color: DEFAULT_COLORS.strongText, fontSize: 11 }
-    } : {})
-  });
-  if (gradient && scale.type === "sequential") {
+  const gradients = [];
+  for (const request of requests) {
+    const colorChannel = request.channels.find(channel => ["color", "stroke"].includes(channel));
+    const scale = findSemanticScale(
+      source,
+      findLayer(source, request.target)?.encoding?.[colorChannel]?.scale
+    );
+    const gradient = isContinuousColorScaleType(scale?.type);
+    const gradientPrefix = colorChannel === "color"
+      ? "colorGradient"
+      : "strokeGradient";
+    source = source.createLegend({
+      target: request.target,
+      channels: request.channels,
+      ...(gradient ? {
+        count: 5,
+        gradient: { length: 180, thickness: 12 },
+        labels: { offset: 9, fontSize: 10 },
+        titleStyle: { color: DEFAULT_COLORS.strongText, fontSize: 11 }
+      } : {})
+    });
+    if (gradient && scale.type === "sequential") gradients.push({ scale, gradientPrefix });
+  }
+  for (const { scale, gradientPrefix } of gradients) {
     const resolved = source.resolvedScales[scale.id];
     source = source
       .editGraphics({

package/src/materialization/facetHeaders.js

@@ -1 +1 @@
-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};
+import{isPlainObject as F}from"../core/immutable.js";import{formatVisibleText as V,measureTextWidth as P,resolveTextBounds as z,textBoundsIntersect as S}from"../core/textMetrics.js";import{validateFacetHeaderRotations as W}from"../grammar/facetHeaders.js";import{resolveDisplayLabel as _}from"../grammar/displayLabels.js";import{resolveGraphicBounds as B}from"../layout/canvas.js";import{unionConcreteGraphicBounds as U}from"../grammar/schemas/graphicBounds.js";import{intersectClipBounds as K}from"../grammar/schemas/graphicClip.js";import{DEFAULT_COLORS as N,DEFAULT_FONT_FAMILY as Y}from"../theme/defaults.js";import{prepareFacetHeaderTitles as Z}from"../layout/facetHeaderTitles.js";import{cartesianAxisOwners as J,axisGraphicIds as E}from"../selectors/axes.js";import{resolveFacetOuterSides as Q}from"../grammar/facets/guides.js";import{resolveConcreteGraphicBounds as X}from"../grammar/schemas/graphicBounds.js";import{allLegendGraphicIds as tt}from"./guides/resources.js";const et=Object.freeze(["top","right","bottom","left"]),v=Object.freeze({top:0,right:0,bottom:0,left:0});function ot(t){return`${t}-headers`}function T(){return{mode:"legacy",common:{fontSize:12,fontFamily:Y,fontWeight:600,color:N.strongText,offset:10,align:"center"},row:{side:"left"},column:{side:"top"}}}function j(t){if(!F(t))throw new TypeError("Facet headers config must be a plain object.");if(W(t),t.common===void 0&&t.mode===void 0)return{...T(),common:{...T().common,...t}};if(!["legacy","roles"].includes(t.mode)||!F(t.common)||!F(t.row)||!F(t.column))throw new Error("Facet headers config must contain canonical mode and role objects.");return{mode:t.mode,common:{...t.common},row:{...t.row},column:{...t.column}}}function y(t,e){const o=j(t);return e==="all"?{...o.common}:{...o.common,...o[e]}}function b(t,e){return _(t,e.labelMap,V)}function nt(t){return new Map((t.facet.grid?.cells??[]).map(e=>[e.id,e]))}function it(t,e){const o=t.compositionSpec,c=y(e,"all"),i=nt(o);return o.children.map((n,s)=>{const r=i.get(n),a=r===void 0?b(o.facet.values[s],c):`${b(r.rowValue,c)} \xB7 ${b(r.columnValue,c)}`;return{topology:"legacy",role:"column",id:n,text:a,config:c}})}function G(t,e){const o=e==="column"?"column":"row",c=e==="column"?"columnValue":"rowValue",i=new Map;for(const n of t.facet.grid.cells){const s=i.get(n[o]);if(s===void 0)i.set(n[o],{coordinate:n[o],value:n[c],ids:[n.id]});else{if(s.value!==n[c])throw new Error(`Facet ${e} header values conflict at coordinate ${n[o]}.`);s.ids.push(n.id)}}return[...i.values()].sort((n,s)=>n.coordinate-s.coordinate)}function ct(t,e){const o=t.compositionSpec,c=y(e,"column");if(o.facet.grid===void 0)return o.children.map((r,a)=>({topology:"cell-column",role:"column",id:r,ids:[r],row:Math.floor(a/o.columns),column:a%o.columns,text:b(o.facet.values[a],c),config:c}));const i=y(e,"row"),n=G(o,"column").map(r=>({topology:"grid-column",role:"column",ids:r.ids,coordinate:r.coordinate,text:b(r.value,c),config:c})),s=G(o,"row").map(r=>({topology:"grid-row",role:"row",ids:r.ids,coordinate:r.coordinate,text:b(r.value,i),config:i}));return[...n,...s]}function x(t){return t.rotation!==void 0&&t.rotation!==0}function H(t,e){return z({x:0,y:0,text:t.text,...t.config,textAlign:"center",textBaseline:"middle"},e)}function st(t,e,o){if(x(t.config)){const c=H(t,o);return["left","right"].includes(e)?c.right-c.left:c.bottom-c.top}return["left","right"].includes(e)?P(t.text,t.config,o):t.config.fontSize}function rt(t){const e={...v};if(t.compositionSpec.spacing!=="plot")return e;for(const o of t.compositionSpec.children){const c=t.children[o],i=B(c),n=c.graphicSpec.objects.canvas.properties;e.left=Math.max(e.left,i.x),e.top=Math.max(e.top,i.y),e.right=Math.max(e.right,n.width-i.x-i.width),e.bottom=Math.max(e.bottom,n.height-i.y-i.height)}return e}function O(t,e,o,c,i){const n=st(t,e,o)+t.config.offset+(t.clearance?.[e]??0);return x(t.config)&&i?Math.max(0,n-c[e]):n}function ft(t,e,o){if(!e.some(i=>i.config.anchor==="content"))return;if(t.compositionSpec.spacing!=="plot")throw new Error("Facet header content anchor requires plot spacing.");const c=new Map;for(const i of t.compositionSpec.children){const n=t.children[i],s=B(n),r={left:s.x,right:s.x+s.width,top:s.y,bottom:s.y+s.height},a=n.semanticSpec.layers.map(f=>f.id).filter(f=>n.graphicSpec.objects[f]!==void 0),u=U(n.graphicSpec,a,o),l=n.graphicSpec.objects.canvas.properties,h=u===void 0?void 0:K(u,{left:0,right:l.width,top:0,bottom:l.height});c.set(i,h===void 0||h.left>h.right||h.top>h.bottom?r:C([r,h]))}for(const i of e)if(i.config.anchor==="content"){i.clearance={...v};for(const n of i.ids??[i.id]){const s=B(t.children[n]),r=c.get(n);for(const[a,u]of Object.entries({left:s.x-r.left,right:r.right-s.x-s.width,top:s.y-r.top,bottom:r.bottom-s.y-s.height}))i.clearance[a]=Math.max(i.clearance[a],u)}}return c}function R(t,e,o,c){const i=t.filter(n=>n.role===e&&n.text!=="");return i.length===0?0:Math.max(...i.map(n=>O(n,n.config.side,o,c,!0)))}function at(t,e){const o=t.compositionSpec,c=t.children[e],i=o.facet.guides.axes==="outer"?Q({placements:o.facet.grid?.cells??o.children.map((s,r)=>({id:s,row:Math.floor(r/o.columns),column:r%o.columns}))}):void 0,n=J(c).flatMap(s=>E(s.channel,s.id).filter((r,a)=>a>=2&&(i===void 0||i[s.config?.[["line","ticks","labels","title"][a]]?.position]?.includes(e))));for(const s of["theta","radius","parallel"])c.guideConfigs.axis?.[s]!==void 0&&n.push(...E(s).slice(2));return o.facet.guides.legend===!1&&n.push(...tt(Object.keys(c.guideConfigs.legend??{}))),n.filter(s=>c.graphicSpec.objects[s]!==void 0)}function lt(t,e){const o=t.children[e],c=B(o),i=at(t,e).map(n=>X(o.graphicSpec,n,o.materializationConfigs.textMetrics)).filter(Boolean);return{top:Math.max(0,...i.map(n=>c.y-n.top)),bottom:Math.max(0,...i.map(n=>n.bottom-c.y-c.height)),left:Math.max(0,...i.map(n=>c.x-n.left)),right:Math.max(0,...i.map(n=>n.right-c.x-c.width))}}function Et(t,e){const o=j(e),c=o.mode==="legacy"?it(t,o):ct(t,o),i=t.compositionSpec.facet.grid===void 0?Math.ceil(t.compositionSpec.children.length/t.compositionSpec.columns):Math.max(...t.compositionSpec.facet.grid.cells.map(f=>f.row))+1,n=t.materializationConfigs.textMetrics,s=["column",...t.compositionSpec.facet.grid===void 0?[]:["row"]].map(f=>[f,y(o,f)]),r=s.some(([,f])=>f.title!==void 0);if(t.compositionSpec.spacing==="plot"){const f=new Map(t.compositionSpec.children.map(p=>[p,lt(t,p)]));for(const p of c)p.clearance=Object.fromEntries(et.map(m=>{const d=Math.max(0,...(p.ids??[p.id]).map(g=>f.get(g)[m]));return[m,d>p.config.offset?d:0]}))}const a=ft(t,c,n),u=r||c.some(f=>x(f.config))?rt(t):v,l={outer:{...v},cellRows:{top:Array(i).fill(0),bottom:Array(i).fill(0)}};if(o.mode==="legacy"&&t.compositionSpec.spacing==="plot")for(const f of c){if(f.text==="")continue;const p=t.compositionSpec.children.indexOf(f.id),m=t.compositionSpec.facet.grid?.cells[p]?.row??Math.floor(p/t.compositionSpec.columns);l.cellRows.top[m]=Math.max(l.cellRows.top[m],O(f,"top",n,u,m===0))}if(o.mode==="roles"){const f=y(o,"column"),p=R(c,"column",n,u);if(t.compositionSpec.facet.grid===void 0){const m=["left","right"].includes(f.side);m&&(l.cellColumns={left:Array(t.compositionSpec.columns).fill(0),right:Array(t.compositionSpec.columns).fill(0)});for(const d of c)if(d.text!==""){const g=m?l.cellColumns:l.cellRows,M=m?d.column:d.row,$=m?t.compositionSpec.columns-1:i-1,q=["top","left"].includes(f.side)?M===0:M===$;g[f.side][M]=Math.max(g[f.side][M],O(d,f.side,n,u,q))}}else{l.outer[f.side]=p;const m=y(o,"row");l.outer[m.side]=R(c,"row",n,u)}}const h=Z({roles:s,descriptors:c,space:u,headerLayout:l,profile:n,ids:t.compositionSpec.children});return{headers:o,descriptors:c,titles:h,headerLayout:l,...a===void 0?{}:{contentById:a},...(r||c.some(f=>x(f.config)))&&n!==void 0?{profile:n}:{}}}function D(t,e){return e==="start"?{x:t.left,textAlign:"left"}:e==="end"?{x:t.right,textAlign:"right"}:{x:(t.left+t.right)/2,textAlign:"center"}}function dt(t,e){return e==="start"?{y:t.top,textBaseline:"top"}:e==="end"?{y:t.bottom,textBaseline:"bottom"}:{y:(t.top+t.bottom)/2,textBaseline:"middle"}}function C(t){return{left:Math.min(...t.map(e=>e.left)),right:Math.max(...t.map(e=>e.right)),top:Math.min(...t.map(e=>e.top)),bottom:Math.max(...t.map(e=>e.bottom))}}function w(t,e){return{left:t.x+e.x,right:t.x+e.x+e.width,top:t.y+e.y,bottom:t.y+e.y+e.height}}function A(t){return{left:t.x,right:t.x+t.width,top:t.y,bottom:t.y+t.height}}function I(t,e){return{left:t.x+e.left,right:t.x+e.right,top:t.y+e.top,bottom:t.y+e.bottom}}function L(t,e,o,c,i){return i==="start"?t-o:i==="end"?e-c:(t+e-o-c)/2}function k(t,e,o,c){const{config:i}=t,n=H(t,c),s={textAlign:"center",textBaseline:"middle",rotation:i.rotation};return["top","bottom"].includes(i.side)?{...s,x:L(e.left,e.right,n.left,n.right,i.align),y:i.side==="top"?o.top-i.offset-n.bottom:o.bottom+i.offset-n.top}:{...s,x:i.side==="left"?o.left-i.offset-n.right:o.right+i.offset-n.left,y:L(e.top,e.bottom,n.top,n.bottom,i.align)}}function ut(t,e,o,c,i,n){const s=t.ids.map(d=>e.get(d)),r=t.ids.find((d,g)=>s[g]===void 0),a=t.ids.find(d=>o.get(d)===void 0);if(r!==void 0||a!==void 0)throw new Error(`Facet header requires cell and plot bounds for "${r??a}".`);const u=t.ids.map((d,g)=>w(s[g],o.get(d))),l=C(u),h=t.config.anchor==="content"?C(t.ids.map((d,g)=>I(s[g],n.get(d)))):c==="plot"?l:C(s.map(A)),f=t.config;if(x(f)||t.topology==="role-title"){const d=k(t,l,h,i),g=["left","right"].includes(f.side)?"y":"x";return f.alongOffset!==void 0&&(d[g]+=f.alongOffset),{descriptor:t,snapshots:h,properties:d}}const p=f.anchor==="content"?0:t.clearance?.[f.side]??0;let m;if(["top","bottom"].includes(f.side)){m=D(l,f.align);const d=f.side==="top";m.y=d?h.top-p-f.offset-f.fontSize/2:h.bottom+p+f.offset+f.fontSize/2,m.textBaseline="middle"}else{m=dt(l,f.align);const d=f.side==="left";m.x=d?h.left-p-f.offset:h.right+p+f.offset,m.textAlign=d?"right":"left"}return{descriptor:t,snapshots:h,properties:m}}function mt(t,e,o,c,i,n){if(e===void 0||o===void 0)throw new Error(`Facet header requires cell and plot bounds for "${t.id}".`);const s=t.config.anchor==="content"?I(e,n.get(t.id)):w(e,o);if(x(t.config)&&c==="plot"){const r=w(e,o);return{descriptor:t,snapshots:A(e),properties:k({...t,config:{...t.config,side:"top"}},r,s,i)}}return{descriptor:t,snapshots:A(e),properties:{...D(w(e,o),t.config.align),y:c==="plot"?e.y+o.y-(t.clearance?.top??0)-t.config.offset-t.config.fontSize/2:e.y+t.config.offset,textBaseline:"middle",...x(t.config)?{rotation:t.config.rotation}:{}}}}function pt(t){const{config:e}=t.descriptor;return{type:"text",properties:{...t.properties,text:t.descriptor.text,fill:e.color,fontSize:e.fontSize,fontFamily:e.fontFamily,fontWeight:e.fontWeight}}}function ht(t,e,o,c,i,n){const s=e.map((r,a)=>t[a].descriptor.text===""?void 0:z(r.properties,c));for(const[r,a]of s.entries())if(a!==void 0&&(a.left<-1e-9||a.right>o.width+1e-9||a.top<-1e-9||a.bottom>o.height+1e-9||s.some((u,l)=>l<r&&u!==void 0&&S(u,a))||o.children.some(u=>S(a,n===void 0?o.spacing==="plot"?w(u,i.get(u.id)):A(u):I(u,n.get(u.id))))))throw new Error("Facet role headers require sufficient non-overlapping reserved space.")}function gt(t,e,o,c,i){const n=[];for(let s=0;s<t.length;s+=1){if(t[s].properties.text==="")continue;const r=z(t[s].properties,c),a=e.children[s],u=o.get(a.id);if(r.left<0||r.right>e.width||r.top<0||r.bottom>e.height||n.some(l=>S(l,r))||(e.spacing==="plot"?e.children.some(l=>S(r,i===void 0?w(l,o.get(l.id)):I(l,i.get(l.id)))):S(r,w(a,u))))throw new Error("Facet headers require sufficient non-overlapping space above every child plot.");n.push(r)}}function xt(t,e,o){const c=new Map(t.children.map(s=>[s.id,s])),i=new Map(e.map(s=>[s.id,s])),n=[...o.descriptors,...o.titles??[]].map(s=>s.topology==="legacy"?mt(s,c.get(s.id),i.get(s.id),t.spacing,o.profile,o.contentById):ut(s,c,i,t.spacing,o.profile,o.contentById));return{records:n,items:n.map(pt),plotById:i}}function Tt(t,e,o,c){const i=t.materializationConfigs.textMetrics,{records:n,items:s,plotById:r}=xt(e,o,c);c.headers.mode==="legacy"?gt(s,e,r,i,c.contentById):ht(n,s,e,i,r,c.contentById);const a=ot(t.compositionSpec.id);return t.createGraphics({id:a,type:"collection",parent:"canvas"}).editGraphics({target:a,property:"items",value:s})}export{T as createDefaultFacetHeaders,ot as facetHeaderGraphicId,Tt as materializeFacetHeaders,j as normalizeFacetHeadersConfig,Et as prepareFacetHeaders,y as resolveFacetHeaderConfig,xt as resolveFacetHeaderItems,at as retainedFacetGuideIds};

package/src/materialization/facetTopLane.js

@@ -0,0 +1,25 @@
+import { walkGraphicTreeEvents } from "../grammar/schemas/graphicTree.js";
+import { resolveConcreteGraphicBounds } from "../grammar/schemas/graphicBounds.js";
+import { assertFacetTopLaneBounds } from "../layout/facetTopLane.js";
+
+export function assertFacetTopLane(program, { layout, plots, headerId, titleIds }) {
+  if (program.compositionSpec.topLane === undefined) return;
+  const titles = [], headers = [], retained = [];
+  const graphic = program.graphicSpec, profile = program.materializationConfigs.textMetrics;
+  const collect = entry => {
+    const type = entry.object.type ?? entry.owner?.type;
+    const properties = entry.object.properties;
+    if (type !== "text" || properties === undefined || properties.text === "" || properties.opacity === 0) return;
+    const bounds = resolveConcreteGraphicBounds(graphic, entry.id, profile);
+    if (bounds === undefined) return;
+    const owner = entry.ownerId ?? entry.id;
+    if (titleIds.includes(owner)) titles.push(bounds);
+    else if (owner === headerId) headers.push(bounds);
+    else retained.push(bounds);
+  };
+  walkGraphicTreeEvents(graphic, { enter: collect, item: collect });
+  assertFacetTopLaneBounds({ canvas: graphic.objects.canvas.properties, titles, headers, retained,
+    plots: layout.children.map((cell, index) => ({ left: cell.x + plots[index].x,
+      right: cell.x + plots[index].x + plots[index].width, top: cell.y + plots[index].y,
+      bottom: cell.y + plots[index].y + plots[index].height })) });
+}

package/src/materialization/facets.js

@@ -1 +1 @@
-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};
+import{cartesianAxisOwners as W}from"../selectors/axes.js";import{resolveConcreteGraphicBounds as q,resolvePrimitiveGraphicBounds as N,resolveGraphicParentOffset as V,resolveGraphicClipBounds as Z}from"../grammar/schemas/graphicBounds.js";import{intersectClipBounds as J}from"../grammar/schemas/graphicClip.js";import{cloneAndFreeze as K,isPlainObject as Q}from"../core/immutable.js";import{walkGraphicTreeEvents as _}from"../grammar/schemas/graphicTree.js";import{textBoundsFitCanvas as U,textBoundsIntersect as L,resolveTextBounds as M,requireFiniteBounds as X}from"../core/textMetrics.js";import{axisGraphicIds as Y,allLegendGraphicIds as ee}from"./guides/resources.js";import{resolveGraphicBounds as G}from"../layout/canvas.js";import{resolvePlacedPlotBounds as te}from"../layout/composition.js";import{alignedTextAnchor as oe,buildTitleReadingBlock as ie,paintedTitleComponent as ne,resolveTitleComponentBounds as re,titleTextProperties as ce}from"../layout/title.js";import{resolveFacetLayout as se}from"../layout/facets.js";import{assertFacetTopLane as ae}from"./facetTopLane.js";import{namespaceGraphicId as R,namespaceGraphicSnapshot as pe}from"./compositionSnapshot.js";import{prepareSharedFacetLegend as I}from"./facetGuides/index.js";import{prepareFacetGuideOwnership as de}from"./facetGuides/placement.js";import{resolvePromotedFacetLegendLayout as le}from"./facetGuides/layout.js";import{attachSnapshotObject as fe,clearCompositionChildren as he,compositionChildDescriptor as ue}from"./composition.js";import{materializeFacetHeaders as me,prepareFacetHeaders as ge,facetHeaderGraphicId as B,retainedFacetGuideIds as we}from"./facetHeaders.js";const be={top:0,right:0,bottom:0,left:0},T=Object.freeze(["chartTitle","chartSubtitle"]);function z(e,i){return i===void 0?e:e===void 0?{...i}:{left:Math.min(e.left,i.left),right:Math.max(e.right,i.right),top:Math.min(e.top,i.top),bottom:Math.max(e.bottom,i.bottom)}}function De(e,{headerItems:i=[]}={}){if(e?.compositionSpec?.type!=="facet")throw new Error("Facet content measurement requires a facet composition.");const t=e.compositionSpec,r=new Map((t.facet.grid?.cells??[]).map(c=>[c.id,c])),l=t.children.map((c,f)=>({id:c,row:r.get(c)?.row??Math.floor(f/t.columns),column:r.get(c)?.column??f%t.columns})),d=I(e),n=de(e,l,d),p=new Set(t.children),o=new Map;if(!Array.isArray(i)||i.some(c=>!p.has(c?.ownerId)||c.type!=="text"||!Q(c.properties)))throw new TypeError("Facet content headers require concrete text with one observed child owner.");for(const c of i)o.has(c.ownerId)||o.set(c.ownerId,[]),o.get(c.ownerId).push(c);const s=["line","ticks","labels","title"];return K(l.map(c=>{const f=e.children[c.id],m=f.graphicSpec,b=f.materializationConfigs.textMetrics,h=G(f),x=n.children[c.id],y=new Map;for(const a of W(f)){const g=Y(a.channel,a.id);for(const[S,w]of s.entries())x.removeAxes.includes(a.id)||x.removeAxisComponents?.[a.id]?.includes(w)?y.set(g[S],"removed"):t.facet.guides.axes==="outer"&&a.channel==="x"&&a.config?.[w]?.position==="bottom"&&y.set(g[S],"footer")}for(const a of ee(x.removeLegends))y.set(a,"removed");const v=new Map,F=[],j=new Map,P=a=>{const g=F.at(-1);if(g==="removed")return;const S=a.object.type??a.owner?.type,w=a.object.properties;if(!w||S==="canvas"||w.opacity===0||S==="text"&&(w.text===""||w.fill==="none"||w.fill==="transparent"))return;const C=a.ownerId??a.id;j.has(C)||j.set(C,{offset:V(m,C),clip:Z(m,C,{rootViewport:!0})});const{offset:[O,A],clip:H}=j.get(C);let u=N(S,w,b);if(u===void 0||(u=X({left:u.left+O,right:u.right+O,top:u.top+A,bottom:u.bottom+A}),H!==void 0&&(u=J(u,H)),u.left>u.right||u.top>u.bottom))return;const $=g??"body";v.set($,z(v.get($),u))};_(m,{enter(a){F.push(F.at(-1)==="removed"?"removed":y.get(a.id)??F.at(-1)),a.object.items===void 0&&!a.object.children?.length&&P(a)},item:P,exit(){F.pop()}});let k=z({left:h.x,right:h.x+h.width,top:h.y,bottom:h.y+h.height},v.get("body"));for(const a of o.get(c.id)??[]){const g=a.properties;g.text!==""&&g.opacity!==0&&g.fill!=="none"&&g.fill!=="transparent"&&(k=z(k,M(g,b)))}const E=a=>a===void 0?void 0:{left:a.left-h.x,right:a.right-h.x,top:a.top-h.y,bottom:a.bottom-h.y};return{...c,plot:h,bounds:E(k),...v.has("footer")?{footerBounds:E(v.get("footer"))}:{}}}))}function ve(e){const i=e.materializationConfigs.facets?.[e.compositionSpec.id];if(i===void 0)throw new Error(`Facet "${e.compositionSpec.id}" requires materialization config.`);return i}function xe(e){if(e.semanticSpec.title.text===void 0)return{height:0};const i=e.titleConfig;if(i===void 0)throw new Error("Facet title requires chart title configuration.");if(i.position!=="top")throw new Error("Facet parent title currently supports only top position.");const t=ie({text:e.semanticSpec.title.text,subtitle:e.semanticSpec.title.subtitle},i),r=8+i.offset;if(r<0)throw new Error("Facet parent title offset places text outside the Canvas.");return{config:i,block:t,top:r,height:Math.ceil(r+t.height)}}function D(e,i,t,r,l,d,n){if(t.length===0)return e;const p=oe(d.x,d.width,e.titleConfig.align)+(e.titleConfig.alongOffset??0),o=ne({x:p,y:r.map(m=>n+m),lines:t,textAlign:e.titleConfig.align}),s=re(o,l,e.materializationConfigs.textMetrics);if(!U(s,e.graphicSpec.objects.canvas.properties))throw new Error("Facet parent title places text outside the Canvas.");const c=o.lines.length;let f=e.createGraphics({id:i,type:"text",...c>1?{length:c}:{},parent:"canvas"});for(const[m,b]of Object.entries(ce(o,l)))f=f.editGraphics({target:i,property:m,value:b});return f}function ye(e,i,t){let r=D(e,T[0],t.block.titleLines,t.block.titleCenters,t.config.titleStyle,i,t.top);return t.block.subtitleLines.length>0&&(r=D(r,T[1],t.block.subtitleLines,t.block.subtitleCenters,t.config.subtitleStyle,i,t.top)),r}function Se(e,i){if(e._assertCompositionProgram("resolveFacetProgramLayout"),e.compositionSpec.type!=="facet")throw new Error("resolveFacetProgramLayout requires a facet composition.");i??=I(e);const t=xe(e),r=e.compositionSpec,l=ge(e,ve(e).headers),d=new Map((r.facet.grid?.cells??[]).map(s=>[s.id,s]));let n=se({children:r.children.map((s,c)=>({...ue(s,e.children[s]),value:r.facet.values[c],...d.has(s)?{row:d.get(s).row,column:d.get(s).column}:{}})),spacing:r.spacing,topLane:r.topLane,plots:r.children.map(s=>({id:s,...G(e.children[s])})),columns:r.columns,gap:r.gap,align:r.align,padding:r.padding,titleHeight:t.height,headerLayout:l.headerLayout,sharedLegend:r.facet.guides.legend==="shared"&&i?.mode!=="promoted",...i===void 0?{}:{sharedLegendGap:i.reservation.gap,sharedLegendWidth:i.reservation.width,sharedLegendHeight:i.reservation.height,sharedLegendPosition:i.reservation.position}});const p=r.children.map(s=>({id:s,...G(e.children[s])}));let o=te({placements:n.children,plots:p});return{layout:n,plot:o}=le(e,{layout:n,plot:o,plots:p,title:t,preparedHeaders:l,prepared:i}),{layout:n,title:t,plot:o,plots:p,preparedHeaders:l}}function Ce(e,i,t){const r=[],l=i.children.map((n,p)=>({id:n.id,left:n.x+t[p].x,right:n.x+t[p].x+t[p].width,top:n.y+t[p].y,bottom:n.y+t[p].y+t[p].height}));for(const n of i.children){const p=we(e,n.id);for(const o of p){const s=R(`${e.compositionSpec.id}-${n.id}`,o);if(e.graphicSpec.objects[s]===void 0)continue;const c=q(e.graphicSpec,s,e.materializationConfigs.textMetrics);c!==void 0&&r.push({owner:n.id,bounds:c})}}const d=e.graphicSpec.objects[B(e.compositionSpec.id)];for(const n of d?.items??[])n.properties.text!==""&&r.push({owner:"headers",bounds:M(n.properties,e.materializationConfigs.textMetrics)});for(let n=0;n<r.length;n+=1){const p=r[n];if(l.some(o=>o.id!==p.owner&&L(p.bounds,o))||r.slice(0,n).some(o=>o.owner!==p.owner&&L(p.bounds,o.bounds)))throw new Error("Plot spacing gap is too small for the retained facet guides or headers.")}}function Fe(e,i){if(i.titles.length===0)return;const t=B(e.compositionSpec.id),r=e.materializationConfigs.textMetrics,l=e.graphicSpec.objects[t].items.slice(i.descriptors.length).map(n=>M(n.properties,r)),d=n=>{if((n.ownerId??n.id)===t)return;const p=n.object.type??n.owner?.type,o=n.object.properties;if(p!=="text"||o?.text===""||o?.opacity===0)return;const s=q(e.graphicSpec,n.id,r);if(s!==void 0&&l.some(c=>L(c,s)))throw new Error("Facet field title overlaps retained chart text.")};_(e.graphicSpec,{enter:d,item:d})}function We(e){const i=I(e),{layout:t,title:r,plot:l,plots:d,preparedHeaders:n}=Se(e,i),p=e.graphicSpec.objects.canvas?.properties?.background??"white";let o=he(e);o.graphicSpec.objects.canvas===void 0&&(o=o.createGraphics({id:"canvas",type:"canvas"}));for(const[s,c]of Object.entries({width:t.width,height:t.height,background:p}))o=o.editGraphics({target:"canvas",property:s,value:c});for(const s of t.children){const c=e.children[s.id],f=pe(c.graphicSpec,{namespace:`${e.compositionSpec.id}-${s.id}`,x:s.x,y:s.y});if(o=fe(o,f,f.order[0],"canvas"),t.spacing==="plot"){const m=f.order[0],b=R(`${e.compositionSpec.id}-${s.id}`,"plot-background"),h=G(c),x=o.graphicSpec.objects[m].children?.[0];o=o.editGraphics({target:m,property:"background",value:"transparent"}).createGraphics({id:b,type:"rect",parent:m,...x===void 0?{}:{before:x}});for(const[y,v]of Object.entries({...h,stroke:"none",strokeWidth:0,fill:c.graphicSpec.objects.canvas.properties.background??"transparent"}))o=o.editGraphics({target:b,property:y,value:v})}}return o=me(o,t,d,n),o=o.composeFacetGuides({layout:t,plot:l}),t.spacing==="plot"&&Ce(o,t,d),r.height>0&&(o=ye(o,l,r)),Fe(o,n),ae(o,{layout:t,plots:d,headerId:B(e.compositionSpec.id),titleIds:T}),o._withCanvasConfig({margin:be,size:{width:"auto",height:"auto"}})}export{We as materializeFacetGraphics,De as measureFacetContentChildren,Se as resolveFacetProgramLayout};

package/src/materialization/graphicHierarchy.js

@@ -5,6 +5,7 @@ import {
   graphicSiblings
 } from "../grammar/schemas/graphicTree.js";
 import { findDataset } from "../selectors/datasets.js";
+import { hasPlotUnderlays, firstOverlayGuide } from "./plotDrawOrder.js";
 
 export const CANVAS_GRAPHIC_ID = "canvas";
 export const PLOT_GRAPHIC_ID = "plot-main";
@@ -57,6 +58,10 @@ export function resolveMarkGraphicPlacement(program, { data, markType }) {
     ? dataset.transform[0]
     : undefined;
   if (transform?.type !== "regression") {
+    if (hasPlotUnderlays(program)) {
+      const before = firstOverlayGuide(program);
+      return resolvePlotGraphicPlacement(program, before === undefined ? {} : { before });
+    }
     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(

package/src/materialization/graphicTranslation.js

@@ -35,6 +35,8 @@ export function translatedProperties(type, properties, dx, dy) {
 export function translateGraphic(program, id, dx, dy) {
   const graphic = program.graphicSpec.objects[id];
   if (dx === 0 && dy === 0) return program;
+  if (graphic.clip !== undefined) program = program.editGraphics({target: id, property: "clip",
+    value: {...graphic.clip, x: graphic.clip.x + dx, y: graphic.clip.y + dy}});
   if (graphic.items !== undefined) {
     let next = program.editGraphics({
       target: id,

package/src/materialization/guides/layout.js

@@ -1 +1 @@
-import{resetLegendClipGraphics as u,hasLegendClipGraphics as c}from"../legendClip.js";import{localLegendPosition as g}from"../legendGroups.js";import{needsLegendAxisReflow as m}from"./resources.js";import{getErrorDetails as p}from"../../core/diagnostics.js";import{planCanvasRematerialization as h}from"../layout.js";import{applyMaterializationPlan as C}from"../planner.js";import{assertGuideCollisionBlocks as L}from"../../layout/guideCollisions.js";import{resolveGuideCollisionBlocks as v}from"./resources.js";import{resolveGuideCollisionBlocks as M}from"./resources.js";function G(i,d){if(i.context.deferGuideLayoutValidation===!0)return d(i);const a=i.materializationConfigs.canvas?.plot;let n=i.materializationConfigs.canvas?.margin,e;for(let s=0;;s+=1)try{let t=u(i)._withContext({deferGuideLayoutValidation:!0});s>0&&(t=t.editGraphics({target:"canvas",property:"width",value:a.width+n.left+n.right}).editGraphics({target:"canvas",property:"height",value:a.height+n.top+n.bottom})._withCanvasConfig({...t.materializationConfigs.canvas,margin:n}),t=C(t,h(t))),e=d(t),c(i)&&!c(e)&&Object.values(e.guideConfigs.legend??{}).some(o=>o.clipHeight!==void 0)&&(e=e.rematerializeLegend()),e.compositionSpec===void 0&&Object.values(e.guideConfigs.legend??{}).some(o=>["left","right"].includes(o.position))&&(e=e.rematerializeSideLegendLane()),e.compositionSpec===void 0&&m(i,e)&&(e=e.rematerializeHorizontalLegendLane()),e.compositionSpec===void 0&&(Object.keys(e.guideConfigs.legendGroups??{}).length>0||Object.values(e.guideConfigs.legend??{}).some(o=>g(o)!==void 0))&&(e=e.rematerializeLegendGroups()),a!==void 0&&e.titleConfig!==void 0&&(e=e.rematerializeTitle());break}catch(t){const o=p(t)?.canvasOverflow;if(a===void 0||o===void 0||s>=16)throw t;n=Object.fromEntries(Object.keys(n).map(l=>[l,o[l]>0?Math.ceil((n[l]+o[l])*4)/4:n[l]]))}const{deferGuideLayoutValidation:y,...f}=e.context;Object.hasOwn(i.context,"deferGuideLayoutValidation")&&(f.deferGuideLayoutValidation=i.context.deferGuideLayoutValidation);const r=e._clone({context:f});return L(v(r.graphicSpec,r.guideConfigs,r.titleConfig,r.materializationConfigs.textMetrics)),r}function S(i){return function(d){return G(this,a=>i.call(a,d))}}export{M as resolveGuideCollisionBlocks,G as withGuideLayoutTransaction,S as withGuideLayoutValidation};
+import{resetLegendClipGraphics as m,hasLegendClipGraphics as c}from"../legendClip.js";import{localLegendPosition as g}from"../legendGroups.js";import{needsLegendAxisReflow as p,needsSideLegendAxisReflow as h}from"./resources.js";import{getErrorDetails as C}from"../../core/diagnostics.js";import{planCanvasRematerialization as L}from"../layout.js";import{applyMaterializationPlan as v}from"../planner.js";import{assertGuideCollisionBlocks as G}from"../../layout/guideCollisions.js";import{resolveGuideCollisionBlocks as y}from"./resources.js";import{hasPlotUnderlays as u}from"../plotDrawOrder.js";import{resolveGuideCollisionBlocks as A}from"./resources.js";function z(i,l){if(i.context.deferGuideLayoutValidation===!0)return l(i);const a=i.materializationConfigs.canvas?.plot;let n=i.materializationConfigs.canvas?.margin,e;for(let s=0;;s+=1)try{let t=m(i)._withContext({deferGuideLayoutValidation:!0});s>0&&(t=t.editGraphics({target:"canvas",property:"width",value:a.width+n.left+n.right}).editGraphics({target:"canvas",property:"height",value:a.height+n.top+n.bottom})._withCanvasConfig({...t.materializationConfigs.canvas,margin:n}),t=v(t,L(t))),e=l(t),c(i)&&!c(e)&&Object.values(e.guideConfigs.legend??{}).some(o=>o.clipHeight!==void 0)&&(e=e.rematerializeLegend()),e.compositionSpec===void 0&&h(i,e)&&(e=e.rematerializeLegend()),e.compositionSpec===void 0&&Object.values(e.guideConfigs.legend??{}).some(o=>["left","right"].includes(o.position))&&(e=e.rematerializeSideLegendLane()),e.compositionSpec===void 0&&p(i,e)&&(e=e.rematerializeHorizontalLegendLane()),e.compositionSpec===void 0&&(Object.keys(e.guideConfigs.legendGroups??{}).length>0||Object.values(e.guideConfigs.legend??{}).some(o=>g(o)!==void 0))&&(e=e.rematerializeLegendGroups()),a!==void 0&&e.titleConfig!==void 0&&(e=e.rematerializeTitle()),(u(i)||u(e))&&(e=e.rematerializePlotDrawOrder());break}catch(t){const o=C(t)?.canvasOverflow;if(a===void 0||o===void 0||s>=16)throw t;n=Object.fromEntries(Object.keys(n).map(d=>[d,o[d]>0?Math.ceil((n[d]+o[d])*4)/4:n[d]]))}const{deferGuideLayoutValidation:w,...f}=e.context;Object.hasOwn(i.context,"deferGuideLayoutValidation")&&(f.deferGuideLayoutValidation=i.context.deferGuideLayoutValidation);const r=e._clone({context:f});return G(y(r.graphicSpec,r.guideConfigs,r.titleConfig,r.materializationConfigs.textMetrics)),r}function B(i){return function(l){return z(this,a=>i.call(a,l))}}export{A as resolveGuideCollisionBlocks,z as withGuideLayoutTransaction,B as withGuideLayoutValidation};

package/src/materialization/guides/resources.js

@@ -1 +1 @@
-import{axisGraphicIds as h}from"../../selectors/axes.js";import{localLegendPosition as m}from"../legendGroups.js";import{resolveConcreteGraphicBounds as G,unionConcreteGraphicBounds as v}from"../../grammar/schemas/graphicBounds.js";function y(e,t,s,o){const n=[],r=(i,a,l,c)=>{if(l===void 0)return;const p=c.filter(b=>e.objects[b]!==void 0),g=v(e,p,o);g!==void 0&&n.push({id:i,kind:a,position:l,bounds:g})};r("chart title","title",s?.position,["chartTitle","chartSubtitle"]);for(const[i,a]of Object.entries(t.axis??{})){const l=["line","ticks","labels","title"].map(p=>a[p]?.position).find(Boolean),c=["x","y"].includes(i)?i:["top","bottom"].includes(l)?"x":["left","right"].includes(l)?"y":void 0;if(c!==void 0)for(const[p,g]of["line","ticks","labels","title"].entries()){const b=h(c,i)[p],I=n.length;if(r(`${i}-axis ${g}`,"axis",a[g]?.position,[b]),n.length===I)continue;const z=n.at(-1);if(z.axisId=i,z.namedAxis=i!==c,["labels","title"].includes(g)){const x=e.objects[b];z.textBounds=x.items?.map(S=>G(e,S.id,o))??[z.bounds]}}}const f=T(),d=t.legend??{},u=f.find(i=>i.family==="categorical"&&d[i.kind]!==void 0),k=u!==void 0&&d.size!==void 0&&d[u.kind].target===d.size.target&&m(d[u.kind])===void 0&&m(d.size)===void 0&&(d.size.inheritPosition!==!1||d[u.kind].position===d.size.position),L=t.legendGroups??{};for(const[i,a]of Object.entries(L)){const l=f.filter(c=>d[c.kind]?.target===i&&m(d[c.kind])===void 0).flatMap(c=>c.graphicIds);r(`${i} legend group`,"legend",a.placement.position??"free",l)}for(const i of f){const a=d[i.kind];if(L[a?.target]!==void 0&&m(a)===void 0||a===void 0||k&&i.kind==="size")continue;const l=k&&i===u?[...i.graphicIds,...f.find(c=>c.kind==="size").graphicIds]:i.graphicIds;r(`${i.kind}${k&&i===u?"+size":""} legend`,"legend",m(a)??a.position,l)}return n}const O=Object.freeze(["Symbols","SymbolLines","SymbolPoints","SymbolSwatches","Labels","Title","Background"]),j=Object.freeze({colorSize:Object.freeze({semanticKind:"colorSize",family:"sampled",rematerializeOp:void 0,graphicIds:Object.freeze(["colorSizeLegendBackground","colorSizeLegendSymbols","colorSizeLegendLabels","colorSizeLegendTitle"])}),series:Object.freeze({semanticKind:"series",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(O.map(e=>`seriesLegend${e}`))}),color:Object.freeze({semanticKind:"color",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(O.map(e=>`colorLegend${e}`))}),stroke:Object.freeze({semanticKind:"stroke",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(O.map(e=>`strokeLegend${e}`))}),size:Object.freeze({semanticKind:"size",family:"size",rematerializeOp:"rematerializeSizeLegend",graphicIds:Object.freeze(["sizeLegendBackground","sizeLegendSymbols","sizeLegendLabels","sizeLegendTitle"])}),gradient:Object.freeze({semanticKind:"color",family:"continuous",rematerializeOp:"rematerializeGradientLegend",graphicIds:Object.freeze(["colorGradientBackground","colorGradientStrips","colorGradientTicks","colorGradientSymbols","colorGradientLabels","colorGradientTitle"])}),interval:Object.freeze({semanticKind:"color",family:"interval",rematerializeOp:"rematerializeIntervalLegend",graphicIds:Object.freeze(["colorLegendBackground","colorLegendSymbols","colorLegendLabels","colorLegendTitle"])}),strokeGradient:Object.freeze({semanticKind:"stroke",family:"continuous",rematerializeOp:"rematerializeStrokeGradientLegend",graphicIds:Object.freeze(["strokeGradientBackground","strokeGradientStrips","strokeGradientTicks","strokeGradientLabels","strokeGradientTitle"])}),strokeInterval:Object.freeze({semanticKind:"stroke",family:"interval",rematerializeOp:"rematerializeStrokeIntervalLegend",graphicIds:Object.freeze(["strokeIntervalBackground","strokeIntervalSymbols","strokeIntervalLabels","strokeIntervalTitle"])}),opacity:Object.freeze({semanticKind:"opacity",family:"continuous",rematerializeOp:"rematerializeOpacityLegend",graphicIds:Object.freeze(["opacityLegendBackground","opacityLegendSymbols","opacityLegendLabels","opacityLegendTitle"])}),strokeWidth:Object.freeze({semanticKind:"strokeWidth",family:"strokeWidth",rematerializeOp:"rematerializeStrokeWidthLegend",graphicIds:Object.freeze(["strokeWidthLegendBackground","strokeWidthLegendSymbols","strokeWidthLegendLabels","strokeWidthLegendTitle"])})});function B(e){return C(e).graphicIds}function C(e){const t=j[e];if(t===void 0)throw new Error(`Unknown legend graphic kind "${e}".`);return t}function T(){return Object.entries(j).map(([e,t])=>({kind:e,...t}))}function W(e){return[...new Set(e.flatMap(B))]}function w(e,t,s){if(t.inferredOffset!==!0||!["top","bottom"].includes(t.position)||t.layout==="legacy-bottom")return t.offset;const o=y(e.graphicSpec,e.guideConfigs,void 0,e.materializationConfigs.textMetrics).filter(r=>r.kind==="axis"&&r.position===t.position),n=t.position==="bottom"?Math.max(0,...o.map(r=>r.bounds.bottom-s.y-s.height)):Math.max(0,...o.map(r=>s.y-r.bounds.top));return t.offset+n}function K(e,t,s){if(t!=="size"||s.inheritPosition===!1)return s;const o=["series","color","stroke"].map(n=>e.guideConfigs.legend?.[n]).find(n=>n?.target===s.target);return o===void 0?s:{...s,position:o.position,offset:o.offset,inferredOffset:o.inferredOffset}}function M(e,t){return[e,t].some(o=>Object.entries(o.guideConfigs.legend??{}).some(([n,r])=>{const f=K(o,n,r);return f.inferredOffset===!0&&["top","bottom"].includes(f.position)&&f.layout!=="legacy-bottom"})||Object.values(o.guideConfigs.legendGroups??{}).some(n=>n.inferredOffset===!0&&["top","bottom"].includes(n.placement.position)))&&[e,t].some(o=>y(o.graphicSpec,o.guideConfigs,void 0,o.materializationConfigs.textMetrics).some(n=>n.kind==="axis"&&["top","bottom"].includes(n.position)))}export{W as allLegendGraphicIds,h as axisGraphicIds,K as effectiveLegendOffsetConfig,B as legendGraphicIds,T as legendResourcePolicies,C as legendResourcePolicy,M as needsLegendAxisReflow,y as resolveGuideCollisionBlocks,w as resolveLegendAxisOffset};
+import{axisGraphicIds as k}from"../../selectors/axes.js";import{localLegendPosition as z,localLegendPlacement as C}from"../legendGroups.js";import{resolveConcreteGraphicBounds as B,unionConcreteGraphicBounds as x}from"../../grammar/schemas/graphicBounds.js";function T(e,i,n,s){const t=[],r=(o,a,u,l)=>{if(u===void 0)return;const b=l.filter(O=>e.objects[O]!==void 0),m=x(e,b,s);m!==void 0&&t.push({id:o,kind:a,position:u,bounds:m})};r("chart title","title",n?.position,["chartTitle","chartSubtitle"]);for(const[o,a]of Object.entries(i.axis??{})){const u=["line","ticks","labels","title"].map(b=>a[b]?.position).find(Boolean),l=["x","y"].includes(o)?o:["top","bottom"].includes(u)?"x":["left","right"].includes(u)?"y":void 0;if(l!==void 0)for(const[b,m]of["line","ticks","labels","title"].entries()){const O=k(l,o)[b],I=t.length;if(r(`${o}-axis ${m}`,"axis",a[m]?.position,[O]),t.length===I)continue;const h=t.at(-1);if(h.axisId=o,h.namedAxis=o!==l,["labels","title"].includes(m)){const G=e.objects[O];h.textBounds=G.items?.map(v=>B(e,v.id,s))??[h.bounds]}}}const c=$(),d=i.legend??{},f=c.find(o=>o.family==="categorical"&&d[o.kind]!==void 0),g=f!==void 0&&d.size!==void 0&&d[f.kind].target===d.size.target&&z(d[f.kind])===void 0&&z(d.size)===void 0&&(d.size.inheritPosition!==!1||d[f.kind].position===d.size.position),p=i.legendGroups??{};for(const[o,a]of Object.entries(p)){const u=c.filter(l=>d[l.kind]?.target===o&&z(d[l.kind])===void 0).flatMap(l=>l.graphicIds);r(`${o} legend group`,"legend",a.placement.position??"free",u)}for(const o of c){const a=d[o.kind];if(p[a?.target]!==void 0&&z(a)===void 0||a===void 0||g&&o.kind==="size")continue;const u=g&&o===f?[...o.graphicIds,...c.find(l=>l.kind==="size").graphicIds]:o.graphicIds;r(`${o.kind}${g&&o===f?"+size":""} legend`,"legend",z(a)??a.position,u)}return t}const L=Object.freeze(["Symbols","SymbolLines","SymbolPoints","SymbolSwatches","Labels","Title","Background"]),j=Object.freeze({colorSize:Object.freeze({semanticKind:"colorSize",family:"sampled",rematerializeOp:void 0,graphicIds:Object.freeze(["colorSizeLegendBackground","colorSizeLegendSymbols","colorSizeLegendLabels","colorSizeLegendTitle"])}),series:Object.freeze({semanticKind:"series",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(L.map(e=>`seriesLegend${e}`))}),color:Object.freeze({semanticKind:"color",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(L.map(e=>`colorLegend${e}`))}),stroke:Object.freeze({semanticKind:"stroke",family:"categorical",rematerializeOp:void 0,graphicIds:Object.freeze(L.map(e=>`strokeLegend${e}`))}),size:Object.freeze({semanticKind:"size",family:"size",rematerializeOp:"rematerializeSizeLegend",graphicIds:Object.freeze(["sizeLegendBackground","sizeLegendSymbols","sizeLegendLabels","sizeLegendTitle"])}),gradient:Object.freeze({semanticKind:"color",family:"continuous",rematerializeOp:"rematerializeGradientLegend",graphicIds:Object.freeze(["colorGradientBackground","colorGradientStrips","colorGradientTicks","colorGradientSymbols","colorGradientLabels","colorGradientTitle"])}),interval:Object.freeze({semanticKind:"color",family:"interval",rematerializeOp:"rematerializeIntervalLegend",graphicIds:Object.freeze(["colorLegendBackground","colorLegendSymbols","colorLegendLabels","colorLegendTitle"])}),strokeGradient:Object.freeze({semanticKind:"stroke",family:"continuous",rematerializeOp:"rematerializeStrokeGradientLegend",graphicIds:Object.freeze(["strokeGradientBackground","strokeGradientStrips","strokeGradientTicks","strokeGradientLabels","strokeGradientTitle"])}),strokeInterval:Object.freeze({semanticKind:"stroke",family:"interval",rematerializeOp:"rematerializeStrokeIntervalLegend",graphicIds:Object.freeze(["strokeIntervalBackground","strokeIntervalSymbols","strokeIntervalLabels","strokeIntervalTitle"])}),opacity:Object.freeze({semanticKind:"opacity",family:"continuous",rematerializeOp:"rematerializeOpacityLegend",graphicIds:Object.freeze(["opacityLegendBackground","opacityLegendSymbols","opacityLegendLabels","opacityLegendTitle"])}),strokeWidth:Object.freeze({semanticKind:"strokeWidth",family:"strokeWidth",rematerializeOp:"rematerializeStrokeWidthLegend",graphicIds:Object.freeze(["strokeWidthLegendBackground","strokeWidthLegendSymbols","strokeWidthLegendLabels","strokeWidthLegendTitle"])})});function K(e){return w(e).graphicIds}function w(e){const i=j[e];if(i===void 0)throw new Error(`Unknown legend graphic kind "${e}".`);return i}function $(){return Object.entries(j).map(([e,i])=>({kind:e,...i}))}function R(e){return[...new Set(e.flatMap(K))]}function y(e){const i=T(e.graphicSpec,e.guideConfigs,void 0,e.materializationConfigs.textMetrics).filter(n=>n.kind==="axis");for(const n of["theta","radius"]){if(e.guideConfigs.axis?.[n]===void 0)continue;const s=k(n).slice(2).filter(r=>e.graphicSpec.objects[r]!==void 0),t=x(e.graphicSpec,s,e.materializationConfigs.textMetrics);if(t!==void 0)for(const r of["left","right","top","bottom"])i.push({id:`${n}-axis text`,kind:"axis",position:r,bounds:t})}return i}function A(e,i,n){if(i.inferredOffset!==!0||!["top","bottom","left","right"].includes(i.position)||i.layout==="legacy-bottom")return i.offset;const s=y(e).filter(r=>r.position===i.position),t=Math.max(0,...s.map(r=>({bottom:r.bounds.bottom-n.y-n.height,top:n.y-r.bounds.top,left:n.x-r.bounds.left,right:r.bounds.right-n.x-n.width})[i.position]));return i.offset+t}function S(e,i,n){if(i!=="size"||n.inheritPosition===!1)return n;const s=["series","color","stroke"].map(t=>e.guideConfigs.legend?.[t]).find(t=>t?.target===n.target);return s===void 0?n:{...n,position:s.position,offset:s.offset,inferredOffset:s.inferredOffset}}function M(e,i){return[e,i].some(s=>Object.entries(s.guideConfigs.legend??{}).some(([t,r])=>{const c=S(s,t,r);return c.inferredOffset===!0&&["top","bottom"].includes(c.position)&&c.layout!=="legacy-bottom"})||Object.values(s.guideConfigs.legendGroups??{}).some(t=>t.inferredOffset===!0&&["top","bottom"].includes(t.placement.position)))&&[e,i].some(s=>y(s).some(t=>["top","bottom"].includes(t.position)))}function N(e,i){const n=new Set;for(const t of[e,i])for(const[r,c]of Object.entries(t.guideConfigs.legend??{})){const d=C(c),f=d===void 0?t.guideConfigs.legendGroups?.[c.target]:void 0,g=S(t,r,c),p=d??f?.placement??g;(d?.inferredOffset??f?.inferredOffset??g.inferredOffset)===!0&&p.at===void 0&&["left","right"].includes(p.position)&&g.layout!=="legacy-bottom"&&n.add(p.position)}const s=t=>JSON.stringify(y(t).filter(r=>n.has(r.position)));return n.size>0&&s(e)!==s(i)}export{R as allLegendGraphicIds,k as axisGraphicIds,S as effectiveLegendOffsetConfig,K as legendGraphicIds,$ as legendResourcePolicies,w as legendResourcePolicy,M as needsLegendAxisReflow,N as needsSideLegendAxisReflow,T as resolveGuideCollisionBlocks,A as resolveLegendAxisOffset};

package/src/materialization/legends.js

@@ -2,7 +2,7 @@ import { findLayer } from "../selectors/layers.js";
 import { LEGEND_CONFIG_KINDS } from "../core/vocabulary.js";
 
 export function isOpacityLegendLayer(layer) {
-  return ["point", "line", "bar"].includes(layer.mark?.type) &&
+  return ["point", "line", "bar", "rect"].includes(layer.mark?.type) &&
     layer.encoding?.opacity?.scale !== undefined;
 }
 

package/src/materialization/markClip.js

@@ -0,0 +1,26 @@
+import { findLayer } from "../selectors/layers.js";
+import { resolvePrimitiveGraphicBounds } from "../grammar/schemas/graphicBounds.js";
+import { resolveCoordinateBounds } from "./coordinateBounds.js";
+import { markClipPositionOwner, validateMarkClipCoordinate } from "../selectors/markClip.js";
+
+// Called explicitly by the owning mark materializer, using wrapped primitive edits.
+export function materializeMarkClip(program, id) {
+  const intent = program.markConfigs[id]?.clip;
+  if (intent === undefined) return program;
+  const graphic = program.graphicSpec.objects[id];
+  if (intent === false) return graphic?.clip === undefined ? program
+    : program.editGraphics({target: id, property: "clip", value: false});
+  const layer = markClipPositionOwner(program, findLayer(program, id));
+  validateMarkClipCoordinate(program, layer, intent);
+  // Incomplete marks keep authoring intent until a coordinate and Canvas exist.
+  const bounds = layer?.coordinate === undefined ? undefined : resolveCoordinateBounds(program, layer.coordinate);
+  if (bounds === undefined) {
+    const drawable = (graphic?.items ?? (graphic ? [graphic] : [])).some(item =>
+      resolvePrimitiveGraphicBounds(item.type ?? graphic.type, item.properties) !== undefined);
+    if (drawable) throw new Error("Drawable mark clip requires a resolved Cartesian plot frame.");
+    return program;
+  }
+  const rect = {x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height};
+  if (graphic?.clip !== undefined && Object.keys(rect).every(key => rect[key] === graphic.clip[key])) return program;
+  return program.editGraphics({target: id, property: "clip", value: rect});
+}

package/src/materialization/marks/capabilities.js

@@ -190,6 +190,7 @@ export function canMaterializeText(program, layer) {
   return hasCartesianPositionScales(layer);
 }
 
-export function canMaterializeRect(_program, layer) {
-  return resolveRectMode(layer) !== undefined;
+export function canMaterializeRect(program, layer) {
+  return program.markConfigs[layer.id]?.gradientPlot?.materialized === true ||
+    resolveRectMode(layer) !== undefined;
 }

package/src/materialization/marks/grouping.js

@@ -1,13 +1,15 @@
 import { findUpstreamTransform } from "../dataProvenance.js";
-import { readPathSeriesFields, validatePathSeriesAppearance } from "../../grammar/pathSeries.js";
+import { validatePathSeriesAppearance } from "../../grammar/pathSeries.js";
 
 export function validatePathGroupAppearance(program, layer, dataset) {
-  if (layer.mark.type === "area" && findUpstreamTransform(program, dataset, "density")) {
+  const density = layer.mark.type === "area" &&
+    findUpstreamTransform(program, dataset, "density");
+  if (density) {
     // Density placement owns a category/split grain beyond the visible group field.
-    readPathSeriesFields(dataset.values, layer);
-    return;
+    return validatePathSeriesAppearance(dataset.values, layer, program.semanticSpec.scales,
+      [density.groupBy, density.placement?.split?.field].filter(Boolean));
   }
-  validatePathSeriesAppearance(dataset.values, layer);
+  validatePathSeriesAppearance(dataset.values, layer, program.semanticSpec.scales);
 }
 
 export function assertPathGroupCompatible(program, layer, dataset, group) {

package/src/materialization/marks/index.js

@@ -62,7 +62,8 @@ export function getSourceDependentMarkSteps(program, sourceId) {
       getMarkMaterializationPolicy(layer)?.sourceDependent === true;
     const statistical = program.markConfigs?.[layer.id]
       ?.statisticalReference?.source === sourceId;
-    return sourceOwned || statistical
+    const filteredCompanion = program.markConfigs?.[layer.id]?.markFilter?.owner === sourceId;
+    return sourceOwned || statistical || filteredCompanion
       ? [getMarkMaterializationStep(program, layer) ??
           getExistingMarkRematerializationStep(program, layer)].filter(
           step => step !== undefined
@@ -166,7 +167,8 @@ export function reusePlannedMarkScales(program, steps, scaleIds) {
   const resolved = new Set(scaleIds);
   return steps.map(step => {
     const layer = findLayer(program, step.args?.id);
-    if (layer === undefined || getMarkMaterializationPolicy(layer)?.acceptsResolvedScales !== true ||
+    const policy = layer === undefined ? undefined : getMarkMaterializationPolicy(layer);
+    if (policy?.acceptsResolvedScales !== true || step.op !== policy.op ||
         !getLayerScaleIds(layer).every(id => resolved.has(id))) return step;
     return { ...step, args: { ...step.args, scales: false } };
   });

package/src/materialization/marks/policies.js

@@ -48,6 +48,7 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
   area: Object.freeze({
     canMaterialize: canMaterializeArea,
     op: "rematerializeAreaMark",
+    acceptsResolvedScales: true,
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: true }),
     encoding: Object.freeze({
       sharedChannels: Object.freeze(["color", "stroke"]),
@@ -66,12 +67,14 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
   bar: Object.freeze({
     canMaterialize: canMaterializeBar,
     op: "rematerializeBarMark",
+    acceptsResolvedScales: true,
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: false }),
     scaleApplication: Object.freeze({ default: "defer" })
   }),
   rule: Object.freeze({
     canMaterialize: canMaterializeRule,
     op: "rematerializeRuleMark",
+    acceptsResolvedScales: true,
     positionEncoding: Object.freeze({ incomplete: "mark", scaleFirst: false }),
     scaleApplication: Object.freeze({ default: "defer" })
   }),
@@ -91,6 +94,7 @@ const MARK_MATERIALIZATION_POLICIES = Object.freeze({
   rect: Object.freeze({
     canMaterialize: canMaterializeRect,
     op: "rematerializeRectMark",
+    acceptsResolvedScales: true,
     positionEncoding: Object.freeze({ incomplete: "scale", scaleFirst: true }),
     encoding: Object.freeze({ scaleFirst: true }),
     scaleApplication: Object.freeze({

package/src/materialization/plotDrawOrder.js

@@ -0,0 +1,44 @@
+import { cartesianAxisOwners, axisGraphicIds, PARALLEL_AXIS_GRAPHICS } from "../selectors/axes.js";
+import { gridNames } from "../selectors/grids.js";
+import { resolvePlotDrawOrder } from "../layout/plotDrawOrder.js";
+
+export function hasPlotUnderlays(program) {
+  return program.compositionSpec === undefined && (
+    program.materializationConfigs.canvas?.plotBorder?.underlay === true ||
+    cartesianAxisOwners(program).some(owner => owner.config?.frame?.underlay === true)
+  );
+}
+
+export function plotDrawOrderResources(program) {
+  const axes = cartesianAxisOwners(program).map(owner => ({
+    ids: axisGraphicIds(owner.channel, owner.id), underlay: owner.config?.frame?.underlay === true
+  }));
+  for (const channel of ["theta", "radius"]) if (program.semanticSpec.guides.axis?.[channel] !== undefined) {
+    axes.push({ ids: axisGraphicIds(channel), underlay: false });
+  }
+  if (program.semanticSpec.guides.axis?.parallel !== undefined) axes.push({ ids: Object.values(PARALLEL_AXIS_GRAPHICS), underlay: false });
+  return {
+    children: program.graphicSpec.objects["plot-main"]?.children ?? [],
+    grids: ["horizontal", "vertical"].flatMap((direction, index) => {
+      const config = program.guideConfigs.grid?.[direction];
+      return config === undefined ? [] : [{ id: gridNames(direction).graphic, zIndex: config.zIndex, index }];
+    }),
+    border: program.materializationConfigs.canvas?.plotBorder === undefined ? undefined : {
+      id: "plotBorder", underlay: program.materializationConfigs.canvas.plotBorder.underlay === true
+    }, axes
+  };
+}
+
+export function resolveProgramPlotDrawOrder(program) {
+  return resolvePlotDrawOrder(plotDrawOrderResources(program));
+}
+
+export function firstOverlayGuide(program) {
+  const { children, grids, border, axes } = plotDrawOrderResources(program);
+  const overlay = new Set([
+    ...grids.filter(grid => grid.zIndex > 0).map(grid => grid.id),
+    ...(border?.underlay === false ? [border.id] : []),
+    ...axes.filter(axis => !axis.underlay).flatMap(axis => axis.ids)
+  ]);
+  return children.find(id => overlay.has(id));
+}

package/src/materialization/rect.js

@@ -27,7 +27,7 @@ function requiredChannels(layer, mode) {
   return [
     ...position,
     ...(layer.encoding?.color ? ["color"] : []),
-    ...(layer.encoding?.stroke ? ["stroke"] : [])
+    ...["stroke", "opacity", "strokeWidth"].filter(channel => layer.encoding?.[channel])
   ];
 }
 
@@ -96,6 +96,10 @@ export function resolveRectRows(program, layer, dataset) {
   const stroke = layer.encoding?.stroke === undefined
     ? undefined
     : mappedEncoding(program, layer, dataset, "stroke").values;
+  const opacity = layer.encoding?.opacity === undefined ? undefined
+    : mappedEncoding(program, layer, dataset, "opacity").values;
+  const strokeWidth = layer.encoding?.strokeWidth === undefined ? undefined
+    : mappedEncoding(program, layer, dataset, "strokeWidth").values;
   const config = program.markConfigs[layer.id] ?? DEFAULT_RECT_MARK;
 
   const rows = rectUsesFields(layer) ? dataset.values : [{}];
@@ -105,7 +109,9 @@ export function resolveRectRows(program, layer, dataset) {
       (x !== undefined && !Number.isFinite(x.values[index])) ||
       (y !== undefined && !Number.isFinite(y.values[index])) ||
       typeof fill !== "string" ||
-      (stroke !== undefined && typeof stroke[index] !== "string")
+      (stroke !== undefined && typeof stroke[index] !== "string") ||
+      (opacity !== undefined && !Number.isFinite(opacity[index])) ||
+      (strokeWidth !== undefined && !Number.isFinite(strokeWidth[index]))
     ) return [];
 
     let geometry;
@@ -138,7 +144,9 @@ export function resolveRectRows(program, layer, dataset) {
     return [{
       row,
       sourceIndex: index,
-      properties: { ...geometry, ...appearance(config, fill, stroke?.[index]) }
+      properties: { ...geometry, ...appearance(config, fill, stroke?.[index]),
+        ...(opacity === undefined ? {} : { opacity: opacity[index] }),
+        ...(strokeWidth === undefined ? {} : { strokeWidth: strokeWidth[index] }) }
     }];
   });
 }

package/src/materialization/scaleGuideDependencies.js

@@ -16,14 +16,22 @@ const GRIDS = Object.freeze([
   Object.freeze({ role: "radial", op: "rematerializeRadialGrid" })
 ]);
 
-export function planAxisTickGridRematerialization(program, channel, axisId = channel) {
+export function planAxisTickGridRematerialization(program, channel, axisId = channel, { syncLabels = false } = {}) {
   const ticks = program.guideConfigs.axis?.[axisId]?.ticks;
   const role = channel === "x" ? "vertical" : "horizontal";
   const config = program.guideConfigs.grid?.[role];
-  return buildMaterializationPlan({ guides:
-    config?.inferredValues === true && config.scale === ticks?.scale
-      ? GRIDS.filter(grid => grid.role === role).map(grid => ({ op: grid.op })) : []
-  });
+  const labels = syncLabels && program.guideConfigs.axis?.[axisId]?.labels
+    ? [{ op: `edit${channel.toUpperCase()}AxisLabels`, args: {
+      ...axisTargetArgs(axisId, channel),
+      ...(ticks.mode === "values" ? { values: ticks.values } : {
+        count: ticks.count,
+        ...(ticks.rounding === undefined ? {} : { rounding: ticks.rounding })
+      })
+    } }] : [];
+  return buildMaterializationPlan({ guides: [...labels,
+    ...(config?.inferredValues === true && config.scale === ticks?.scale
+      ? GRIDS.filter(grid => grid.role === role).map(grid => ({ op: grid.op })) : [])
+  ] });
 }
 
 function usesPositionalScale(program, id) {

package/src/materialization/selection/items/common.js

@@ -102,7 +102,7 @@ function collectionBounds(program, items) {
   const bounds = unionConcreteGraphicBounds(
     program.graphicSpec,
     items.map(item => item.id)
-  , program.materializationConfigs.textMetrics);
+  , program.materializationConfigs.textMetrics, {includeOwnerClips: false});
   if (bounds === undefined) return {};
   const { left, top, right, bottom } = bounds;
   return { x: left, y: top, width: right - left, height: bottom - top };

package/src/materialization/selection/items/path.js

@@ -60,6 +60,7 @@ export function resolveLineItems(program, layer, dataset) {
     dataset.values,
     layer,
     {
+      scales: program.semanticSpec.scales,
       xDomain: program.resolvedScales[x?.scale]?.domain,
       ...(x?.bin === undefined ? {} : {
           xBinBoundaries: resolveLineBins(

package/src/materialization/selection/policies/index.js

@@ -8,6 +8,7 @@ import { pointSelectionPolicy } from "./point.js";
 import { ruleSelectionPolicy } from "./rule.js";
 import { tickSelectionPolicy } from "./tick.js";
 import { rectSelectionPolicy } from "./rect.js";
+import { applyItemMissingPolicy } from "../../../grammar/itemMissing.js";
 
 const POLICIES = Object.freeze({
   arc: arcSelectionPolicy,
@@ -42,5 +43,5 @@ export function resolveMarkItems(program, target, grain = "item") {
   if (!policy.supportedGrains.includes(grain)) {
     throw new Error(`Mark "${target}" does not support ${grain} selection grain.`);
   }
-  return policy.resolveItems(program, layer, dataset, grain);
+  return policy.resolveItems(program, layer, applyItemMissingPolicy(layer, dataset), grain);
 }