ggaction 0.0.10 → 0.0.12

package/src/materialization/bars/grouped.js

@@ -5,11 +5,11 @@ import {
 } from "../../grammar/scales/index.js";
 import { sameOrderedValues } from "../../core/validation.js";
 import {
-  DEFAULT_BAR_STROKE,
-  DEFAULT_BAR_STROKE_WIDTH
+  resolveBarAppearance
 } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
 import { DEFAULT_SERIES_BASELINE } from "../../grammar/seriesLayout.js";
+import { finiteMidpoint } from "../../grammar/numeric.js";
 import {
   BAR_ORIENTATIONS,
   resolveBarChannels,
@@ -58,7 +58,10 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
       colorScale.range[index % colorScale.range.length]
     ])
   );
-  const offsetMidpoint = (offsetScale.range[0] + offsetScale.range[1]) / 2;
+  const offsetMidpoint = finiteMidpoint(
+    offsetScale.range[0],
+    offsetScale.range[1]
+  );
   const categoryDirection = Math.sign(
     categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]
   ) || 1;
@@ -78,7 +81,6 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
   );
   const existing = resolved.graphicSpec.objects[layer.id].items;
   const config = resolved.markConfigs[layer.id] ?? {};
-  const appearance = config.barAppearance ?? {};
 
   return cells.map((cell, index) => {
     const categoryValue = cell[channels.category];
@@ -136,20 +138,7 @@ export function deriveGroupedRectangles(required, resolved, widthConfig) {
     return {
       ...geometry,
       fill: colors.get(cell.color),
-      stroke: appearance.stroke === false
-        ? "transparent"
-        : appearance.stroke ?? config.stroke ?? existing[index]?.properties.stroke ?? DEFAULT_BAR_STROKE,
-      strokeWidth:
-        appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ??
-            DEFAULT_BAR_STROKE_WIDTH,
-      ...((appearance.opacity ?? config.opacity) === undefined
-        ? (existing[index]?.properties.opacity === undefined
-            ? {}
-            : { opacity: existing[index].properties.opacity })
-        : { opacity: appearance.opacity ?? config.opacity })
+      ...resolveBarAppearance(config, existing[index]?.properties)
     };
   });
 }

package/src/materialization/bars/histogram.js

@@ -13,8 +13,7 @@ import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
 import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
 import {
   DEFAULT_BAR_FILL,
-  DEFAULT_BAR_STROKE,
-  DEFAULT_BAR_STROKE_WIDTH
+  resolveBarAppearance
 } from "./resolve.js";
 
 export function deriveHistogramSegments({
@@ -141,23 +140,7 @@ export function deriveHistogramRectangles(required, resolved) {
         config.fill ??
         existing[index]?.properties.fill ??
         DEFAULT_BAR_FILL,
-      stroke:
-        appearance.stroke === false
-          ? "transparent"
-          : appearance.stroke ?? config.stroke ??
-            existing[index]?.properties.stroke ??
-            DEFAULT_BAR_STROKE,
-      strokeWidth:
-        appearance.stroke === false
-          ? 0
-          : appearance.strokeWidth ?? config.strokeWidth ??
-            existing[index]?.properties.strokeWidth ??
-            DEFAULT_BAR_STROKE_WIDTH,
-      ...((appearance.opacity ?? config.opacity) === undefined
-        ? (existing[index]?.properties.opacity === undefined
-            ? {}
-            : { opacity: existing[index].properties.opacity })
-        : { opacity: appearance.opacity ?? config.opacity })
+      ...resolveBarAppearance(config, existing[index]?.properties)
     };
   });
 }

package/src/materialization/bars/ranged.js

@@ -1,6 +1,10 @@
 import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales/index.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
-import { DEFAULT_BAR_FILL, DEFAULT_BAR_STROKE, DEFAULT_BAR_STROKE_WIDTH } from "./resolve.js";
+import {
+  DEFAULT_BAR_FILL,
+  DEFAULT_BAR_STROKE,
+  resolveBarAppearance
+} from "./resolve.js";
 
 export function deriveRangedRectangles(required, program, width) {
   const { layer, dataset } = required;
@@ -29,25 +33,26 @@ export function deriveRangedRectangles(required, program, width) {
   const fills = color === undefined
     ? dataset.values.map(() => appearance.fill ?? config.fill ?? DEFAULT_BAR_FILL)
     : mapOrdinalValues(dataset.values.map(row => row[color.field]), program.resolvedScales[color.scale].domain, program.resolvedScales[color.scale].range);
+  const appearanceConfig = color === undefined
+    ? config
+    : { ...config, stroke: undefined };
   return dataset.values.map((_, index) => vertical ? {
     x: centers[index] - band / 2, y: Math.min(first[index], second[index]), width: band,
     height: Math.abs(second[index] - first[index]), fill: fills[index],
-    stroke: appearance.stroke === false
-      ? "transparent"
-      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
-    strokeWidth: appearance.stroke === false
-      ? 0
-      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    opacity: appearance.opacity ?? config.opacity ?? 1
+    ...resolveBarAppearance(
+      appearanceConfig,
+      undefined,
+      color === undefined ? DEFAULT_BAR_STROKE : fills[index],
+      1
+    )
   } : {
     x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
     width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
-    stroke: appearance.stroke === false
-      ? "transparent"
-      : appearance.stroke ?? (color === undefined ? config.stroke ?? DEFAULT_BAR_STROKE : fills[index]),
-    strokeWidth: appearance.stroke === false
-      ? 0
-      : appearance.strokeWidth ?? config.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    opacity: appearance.opacity ?? config.opacity ?? 1
+    ...resolveBarAppearance(
+      appearanceConfig,
+      undefined,
+      color === undefined ? DEFAULT_BAR_STROKE : fills[index],
+      1
+    )
   });
 }

package/src/materialization/bars/resolve.js

@@ -8,6 +8,27 @@ export const DEFAULT_BAR_FILL = DEFAULT_COLORS.mark;
 export const DEFAULT_BAR_STROKE = "white";
 export const DEFAULT_BAR_STROKE_WIDTH = 0.5;
 
+export function resolveBarAppearance(
+  config,
+  existing,
+  defaultStroke = DEFAULT_BAR_STROKE,
+  defaultOpacity
+) {
+  const appearance = config.barAppearance ?? {};
+  const opacity = appearance.opacity ?? config.opacity ??
+    existing?.opacity ?? defaultOpacity;
+  return {
+    stroke: appearance.stroke === false
+      ? "transparent"
+      : appearance.stroke ?? config.stroke ?? existing?.stroke ?? defaultStroke,
+    strokeWidth: appearance.stroke === false
+      ? 0
+      : appearance.strokeWidth ?? config.strokeWidth ??
+        existing?.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
+    ...(opacity === undefined ? {} : { opacity })
+  };
+}
+
 export function requireCompleteBar(program, id) {
   const layer = findLayer(program, id);
 

package/src/materialization/facetGuides/legacyCategorical.js

@@ -1,6 +1,7 @@
 import {
   resolveSharedFacetLegends
 } from "../../grammar/facets/guides.js";
+import { formatVisibleText } from "../../core/textMetrics.js";
 import { mapOrdinalValues } from "../../grammar/scales/index.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../../theme/defaults.js";
 
@@ -10,7 +11,7 @@ function textItem(text, x, y, options = {}) {
     properties: {
       x,
       y,
-      text: String(text),
+      text: formatVisibleText(text),
       fill: options.color ?? DEFAULT_COLORS.strongText,
       fontSize: options.fontSize ?? 12,
       fontFamily: options.fontFamily ?? DEFAULT_FONT_FAMILY,
@@ -68,7 +69,13 @@ export function resolveLegacyCategoricalLegend(program) {
   return {
     mode: "legacyCategorical",
     compatibility,
-    reservation: { gap: 18, width: 132 },
+    reservation: {
+      position: "right",
+      align: "center",
+      gap: 18,
+      width: 132,
+      height: 0
+    },
     legend: {
       field: config.field,
       mark: encodings[0].layer.mark.type,

package/src/materialization/facetGuides/placement.js

@@ -1,4 +1,6 @@
 import { isPlainObject } from "../../core/immutable.js";
+import { resolveConcreteGraphicBounds } from
+  "../../grammar/schemas/graphicBounds.js";
 import { planFacetGuideOwnership } from "../../grammar/facets/guides.js";
 import {
   axisGraphicIds,
@@ -30,25 +32,29 @@ function removeNamespacedGraphics(program, namespace, ids) {
   return next;
 }
 
-function gradientAnchor(prepared, plot, layout) {
-  const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
-  if (strips?.items?.[0] === undefined) return undefined;
-  const properties = strips.items[0].properties;
-  const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
-  return {
-    sourceX: properties.x,
-    sourceY: properties.y,
-    targetX: layout.legend.x,
-    targetY: plot.y + (plot.height - length) / 2
-  };
-}
-
 function legendTranslation(prepared, plot, layout) {
-  const gradient = gradientAnchor(prepared, plot, layout);
-  if (gradient !== undefined) {
+  const position = prepared.reservation.position;
+  if (["top", "bottom"].includes(position)) {
+    const width = prepared.bounds.right - prepared.bounds.left;
+    const left = prepared.reservation.align === "left"
+      ? plot.x
+      : prepared.reservation.align === "right"
+        ? plot.x + plot.width - width
+        : plot.x + (plot.width - width) / 2;
     return {
-      x: gradient.targetX - gradient.sourceX,
-      y: gradient.targetY - gradient.sourceY
+      x: left - prepared.bounds.left,
+      y: layout.legend.y - prepared.bounds.top
+    };
+  }
+  const strips = prepared.source.graphicSpec.objects.colorGradientStrips;
+  if (strips?.items?.[0] !== undefined) {
+    const properties = strips.items[0].properties;
+    const length = prepared.source.guideConfigs.legend.gradient.gradient.length;
+    return {
+      x: layout.legend.x - (position === "left"
+        ? prepared.bounds.left
+        : properties.x),
+      y: plot.y + (plot.height - length) / 2 - properties.y
     };
   }
   const height = prepared.bounds.bottom - prepared.bounds.top;
@@ -79,6 +85,25 @@ function attachParentLegend(program, prepared, plot, layout) {
   return next;
 }
 
+function assertSharedLegendFits(program, id, layout, plot) {
+  const bounds = resolveConcreteGraphicBounds(program.graphicSpec, id);
+  if (bounds === undefined) {
+    throw new Error("Facet shared legend requires measurable concrete bounds.");
+  }
+  const outside = bounds.left < 0 || bounds.right > layout.width ||
+    bounds.top < 0 || bounds.bottom > layout.height;
+  const overlapsPlot = Math.min(bounds.right, plot.x + plot.width) >
+      Math.max(bounds.left, plot.x) &&
+    Math.min(bounds.bottom, plot.y + plot.height) >
+      Math.max(bounds.top, plot.y);
+  if (outside || overlapsPlot) {
+    throw new Error(
+      "Facet shared legend requires more space than the composed Canvas provides."
+    );
+  }
+  return program;
+}
+
 export function applyFacetGuideComposition(program, { layout, plot } = {}) {
   if (!isPlainObject(layout) || !Array.isArray(layout.children)) {
     throw new TypeError("Facet guide composition requires a resolved layout.");
@@ -119,8 +144,13 @@ export function applyFacetGuideComposition(program, { layout, plot } = {}) {
     }
   }
   if (prepared === undefined) return next;
+  let id;
   if (prepared.mode === "legacyCategorical") {
-    return materializeLegacyCategoricalLegend(next, prepared, layout);
+    id = `${program.compositionSpec.id}-legend`;
+    next = materializeLegacyCategoricalLegend(next, prepared, layout);
+  } else {
+    id = `${program.compositionSpec.id}-shared-legend`;
+    next = attachParentLegend(next, prepared, plot, layout);
   }
-  return attachParentLegend(next, prepared, plot, layout);
+  return assertSharedLegendFits(next, id, layout, plot);
 }

package/src/materialization/facetGuides/preparation.js

@@ -9,6 +9,10 @@ import { findSemanticScale } from "../../selectors/scales.js";
 import { allLegendGraphicIds } from "../guides/resources.js";
 import { DEFAULT_COLORS } from "../../theme/defaults.js";
 import { resolveLegacyCategoricalLegend } from "./legacyCategorical.js";
+import {
+  formatDistinctNumericSamples,
+  sampleNumericRange
+} from "../../grammar/numeric.js";
 
 const LEGEND_SOURCE_CANVAS = Object.freeze({
   width: 640,
@@ -71,10 +75,7 @@ function compactNumber(value) {
 }
 
 function continuousValues(domain, count) {
-  return Array.from(
-    { length: count },
-    (_, index) => domain[0] + index / (count - 1) * (domain[1] - domain[0])
-  );
+  return sampleNumericRange(domain[0], domain[1], count, "Facet legend domain");
 }
 
 function prepareAutoLegendSource(child) {
@@ -123,7 +124,10 @@ function prepareAutoLegendSource(child) {
       .editGraphics({
         target: "colorGradientLabels",
         property: "text",
-        value: continuousValues(resolved.domain, 5).map(compactNumber)
+        value: formatDistinctNumericSamples(
+          continuousValues(resolved.domain, 5),
+          compactNumber
+        )
       })
       .editGraphics({
         target: "colorGradientTitle",
@@ -145,6 +149,27 @@ function compatibleLegendChildren(program, source, inferred) {
   });
 }
 
+function promotedLegendPlacement(source, kinds) {
+  const positioned = kinds.map(kind => source.guideConfigs.legend[kind])
+    .filter(config => config.position !== undefined);
+  const positions = new Set(positioned.map(config => config.position));
+  if (positions.size > 1) {
+    throw new Error(
+      "Shared facet legends must use one common edge position."
+    );
+  }
+  const aligns = new Set(positioned.map(config => config.align ?? "center"));
+  if (aligns.size > 1) {
+    throw new Error(
+      "Shared facet legends must use one common alignment."
+    );
+  }
+  return {
+    position: positioned[0]?.position ?? "right",
+    align: positioned[0]?.align ?? "center"
+  };
+}
+
 export function prepareSharedFacetLegend(program) {
   if (program.compositionSpec.facet.guides.legend !== "shared") {
     return undefined;
@@ -172,6 +197,8 @@ export function prepareSharedFacetLegend(program) {
     throw new Error("Shared facet legend has no measurable concrete bounds.");
   }
   const gradient = kinds.includes("gradient");
+  const placement = promotedLegendPlacement(source, kinds);
+  const width = Math.ceil(bounds.right - bounds.left);
   return {
     mode: "promoted",
     source,
@@ -181,8 +208,10 @@ export function prepareSharedFacetLegend(program) {
     bounds,
     compatibility,
     reservation: {
+      ...placement,
       gap: gradient ? 24 : 18,
-      width: gradient ? 112 : Math.max(132, Math.ceil(bounds.right - bounds.left))
+      width: Math.max(gradient ? 112 : 132, width),
+      height: Math.ceil(bounds.bottom - bounds.top)
     }
   };
 }

package/src/materialization/facets.js

@@ -1,4 +1,9 @@
 import { resolveGraphicBounds } from "../layout/canvas.js";
+import {
+  formatVisibleText,
+  resolveTextBounds,
+  textBoundsIntersect
+} from "../core/textMetrics.js";
 import { resolvePlacedPlotBounds } from "../layout/composition.js";
 import {
   alignedTextAnchor,
@@ -12,9 +17,8 @@ import {
   clearCompositionChildren,
   compositionChildDescriptor
 } from "./composition.js";
-import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from "../theme/defaults.js";
 
-const ZERO_MARGIN = Object.freeze({ top: 0, right: 0, bottom: 0, left: 0 });
+const ZERO_MARGIN = { top: 0, right: 0, bottom: 0, left: 0 };
 
 function facetConfig(program) {
   const config = program.materializationConfigs.facets?.[program.compositionSpec.id];
@@ -46,29 +50,35 @@ function titleLayout(program) {
   return { config, block, top, height: Math.ceil(top + block.height) };
 }
 
-function textItem(text, x, y, options = {}) {
-  return {
-    type: "text",
-    properties: {
-      x,
-      y,
-      text: String(text),
-      fill: options.color ?? DEFAULT_COLORS.strongText,
-      fontSize: options.fontSize ?? 12,
-      fontFamily: options.fontFamily ?? DEFAULT_FONT_FAMILY,
-      fontWeight: options.fontWeight ?? "normal",
-      textAlign: options.textAlign ?? "left",
-      textBaseline: options.textBaseline ?? "middle"
-    }
-  };
-}
-
 function collection(program, id, items) {
   return program
     .createGraphics({ id, type: "collection", parent: "canvas" })
     .editGraphics({ target: id, property: "items", value: items });
 }
 
+function assertFacetHeadersFit(items, layout, plotById) {
+  const previous = [];
+  for (let index = 0; index < items.length; index += 1) {
+    const bounds = resolveTextBounds(items[index].properties);
+    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, {
+        left: cell.x + plot.x,
+        right: cell.x + plot.x + plot.width,
+        top: cell.y + plot.y,
+        bottom: cell.y + plot.y + plot.height
+      })) {
+      throw new Error(
+        "Facet headers require sufficient non-overlapping space above every child plot."
+      );
+    }
+    previous.push(bounds);
+  }
+}
+
 function materializeHeaders(program, layout, plots, config) {
   const plotById = new Map(plots.map(plot => [plot.id, plot]));
   const items = layout.children.map(cell => {
@@ -76,20 +86,22 @@ function materializeHeaders(program, layout, plots, config) {
     if (plot === undefined) {
       throw new Error(`Facet header requires plot bounds for "${cell.id}".`);
     }
-    return textItem(
-      cell.value,
-      cell.x + plot.x + plot.width / 2,
-      cell.y + config.offset,
-      {
-        color: config.color,
+    return {
+      type: "text",
+      properties: {
+        x: cell.x + plot.x + plot.width / 2,
+        y: cell.y + config.offset,
+        text: formatVisibleText(cell.value),
+        fill: config.color,
         fontSize: config.fontSize,
         fontFamily: config.fontFamily,
         fontWeight: config.fontWeight,
         textAlign: "center",
-        textBaseline: "top"
+        textBaseline: "middle"
       }
-    );
+    };
   });
+  assertFacetHeadersFit(items, layout, plotById);
   return collection(program, `${program.compositionSpec.id}-headers`, items);
 }
 
@@ -163,7 +175,9 @@ export function resolveFacetProgramLayout(program, preparedLegend) {
     sharedLegend: spec.facet.guides.legend === "shared",
     ...(preparedLegend === undefined ? {} : {
       sharedLegendGap: preparedLegend.reservation.gap,
-      sharedLegendWidth: preparedLegend.reservation.width
+      sharedLegendWidth: preparedLegend.reservation.width,
+      sharedLegendHeight: preparedLegend.reservation.height,
+      sharedLegendPosition: preparedLegend.reservation.position
     })
   });
   const plots = spec.children.map(id => ({

package/src/materialization/guides/resources.js

@@ -44,7 +44,8 @@ const LEGEND_RESOURCE_POLICIES = Object.freeze({
     family: "interval",
     rematerializeOp: "rematerializeIntervalLegend",
     graphicIds: Object.freeze([
-      "colorLegendSymbols", "colorLegendLabels", "colorLegendTitle"
+      "colorLegendBackground", "colorLegendSymbols", "colorLegendLabels",
+      "colorLegendTitle"
     ])
   }),
   opacity: Object.freeze({

package/src/materialization/marks/capabilities.js

@@ -59,7 +59,10 @@ export function canMaterializeLine(program, layer) {
   return (
     layer.mark?.type === "line" &&
     hasCartesianPositionScales(layer) &&
-    (isAggregate(layer.encoding.y.aggregate) ||
+    ((isAggregate(layer.encoding.y.aggregate) &&
+      (layer.encoding.x.fieldType === "temporal" ||
+        (layer.encoding.x.fieldType === "quantitative" &&
+          layer.encoding.x.bin !== undefined))) ||
       (layer.encoding.x.fieldType === "quantitative" &&
         layer.encoding.y.fieldType === "quantitative") ||
       ((interval || layer.encoding.y.aggregate === undefined) &&
@@ -105,11 +108,19 @@ export function isIntentionallyEmptyArea(program, layer) {
 export function canMaterializeArc(_program, layer) {
   if (
     layer.mark?.type !== "arc" ||
-    layer.encoding?.theta?.scale === undefined ||
-    !["nominal", "ordinal"].includes(layer.encoding.theta.fieldType)
+    layer.encoding?.theta?.scale === undefined
   ) {
     return false;
   }
+  if (layer.encoding.theta.fieldType === "quantitative") {
+    return (
+      layer.encoding.theta.aggregate === undefined &&
+      layer.encoding?.radius === undefined
+    );
+  }
+  if (!["nominal", "ordinal"].includes(layer.encoding.theta.fieldType)) {
+    return false;
+  }
   if (["count", "sum"].includes(layer.encoding.theta.aggregate)) {
     return layer.encoding?.radius === undefined;
   }
@@ -159,7 +170,7 @@ export function canMaterializeText(program, layer) {
   if (layer.source !== undefined) {
     const source = findLayer(program, layer.source);
     return source !== undefined &&
-      ["point", "bar", "rule", "rect"].includes(source.mark?.type) &&
+      ["point", "bar", "rule", "rect", "arc"].includes(source.mark?.type) &&
       Array.isArray(program.graphicSpec.objects[source.id]?.items);
   }
   return hasCartesianPositionScales(layer);

package/src/materialization/marks/index.js

@@ -1,4 +1,7 @@
-import { POSITION_CHANNELS } from "../../core/vocabulary.js";
+import {
+  POSITION_CHANNELS,
+  POSITION_ENCODING_CHANNELS
+} from "../../core/vocabulary.js";
 import { getMarkMaterializationPolicy } from "./policies.js";
 
 export {
@@ -42,20 +45,40 @@ export function getSourceDependentMarkSteps(program, sourceId) {
 export function getPositionEncodingMaterializationSteps(program, layer, scaleId) {
   const policy = getMarkMaterializationPolicy(layer);
   if (policy === undefined) return [];
-  const scale = { op: "rematerializeScale", args: { id: scaleId } };
   const complete = policy.canMaterialize(program, layer);
   const mark = getMarkRematerializationStep(layer);
+  const sharedConsumerMarks = (program.semanticSpec.layers ?? [])
+    .filter(candidate =>
+      candidate.id !== layer.id &&
+      POSITION_CHANNELS.some(channel =>
+        candidate.encoding?.[channel]?.scale === scaleId
+      )
+    )
+    .map(candidate => getMarkMaterializationStep(program, candidate))
+    .filter(step => step !== undefined);
+  const scale = {
+    op: "rematerializeScale",
+    args: sharedConsumerMarks.length === 0
+      ? { id: scaleId }
+      : { id: scaleId, marks: false }
+  };
   if (!complete) {
-    if (policy.positionEncoding.incomplete === "scale") return [scale];
-    return policy.positionEncoding.scaleFirst ? [scale, mark] : [mark];
+    if (policy.positionEncoding.incomplete === "scale") {
+      return [scale, ...sharedConsumerMarks];
+    }
+    return policy.positionEncoding.scaleFirst
+      ? [scale, mark, ...sharedConsumerMarks]
+      : [mark, ...sharedConsumerMarks];
   }
-  return policy.positionEncoding.scaleFirst ? [scale, mark] : [mark];
+  return policy.positionEncoding.scaleFirst
+    ? [scale, mark, ...sharedConsumerMarks]
+    : [mark, ...sharedConsumerMarks];
 }
 
 export function getScaleConsumerMaterializationMode(layer, channel) {
   const policy = getMarkMaterializationPolicy(layer);
   if (policy === undefined) return "direct";
-  if (POSITION_CHANNELS.includes(channel)) {
+  if (POSITION_ENCODING_CHANNELS.includes(channel)) {
     return policy.scaleApplication.position ?? policy.scaleApplication.default;
   }
   if (policy.scaleApplication.deferredChannels?.includes(channel)) {