ggaction 0.0.12 → 0.0.15

package/src/materialization/bars/aggregate.js

@@ -1,161 +1,70 @@
-import { deriveBarAggregates } from "../../grammar/bars/aggregate.js";
+import { deriveSeriesBarCells } from "../../grammar/bars/aggregate.js";
+import { resolveBarChannels, resolveBarColorLayout, resolveBarOffsetChannel } from "../../grammar/bars/policy.js";
 import {
-  BAR_ORIENTATIONS,
-  resolveBarChannels,
-  resolveBarColorLayout
-} from "../../grammar/bars/policy.js";
-import {
-  DEFAULT_SERIES_BASELINE,
-  layoutSeriesPartition
-} from "../../grammar/seriesLayout.js";
-import {
-  isDiscretePositionScaleType,
   mapContinuousScaleValues,
-  mapOrdinalPositionValues
+  mapOrdinalPositionValues,
+  readScaleField
 } from "../../grammar/scales/index.js";
 import { mapScaleConsumerValues } from "../scales/map.js";
-import {
-  DEFAULT_BAR_FILL,
-  resolveBarAppearance
-} from "./resolve.js";
-import { deriveGroupedRectangles } from "./grouped.js";
+import { DEFAULT_BAR_FILL, resolveBarAppearance } from "./resolve.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
+import { finiteMidpoint } from "../../grammar/numeric.js";
 
 export function deriveAggregateRectangles(required, resolved, widthConfig) {
   const { dataset, layer } = required;
-  const layout = resolveBarColorLayout(layer);
-  if (layout === "group") {
-    return deriveGroupedRectangles(required, resolved, widthConfig);
-  }
-
-  const xScale = resolved.resolvedScales[required.xEncoding.scale];
-  const yScale = resolved.resolvedScales[required.yEncoding.scale];
-  const channels = resolveBarChannels(layer);
-  const vertical = channels.orientation === BAR_ORIENTATIONS.vertical;
-  const categoryScale = vertical ? xScale : yScale;
-  const measureScale = vertical ? yScale : xScale;
-  const colorEncoding = layer.encoding?.color;
-  const colorScale = resolved.resolvedScales[colorEncoding?.scale];
-  if (colorEncoding !== undefined && colorScale === undefined) {
-    throw new Error(
-      `Bar mark "${layer.id}" requires a resolved color scale.`
-    );
-  }
-
-  const seriesDomain = colorScale?.domain ?? [undefined];
-  const seriesIndex = new Map(
-    seriesDomain.map((value, index) => [value, index])
-  );
-  const colors = new Map(seriesDomain.map((value, index) => [
-    value,
-    colorScale?.range[index % colorScale.range.length] ?? DEFAULT_BAR_FILL
-  ]));
-  const cells = deriveBarAggregates(dataset.values, layer).values;
-  const discreteCategory = categoryScale.type === "ordinal" ||
-    isDiscretePositionScaleType(categoryScale.type);
-  const categoryDomain = discreteCategory
-    ? categoryScale.domain
-    : [...new Set(cells.map(cell => cell[channels.category]))]
-        .sort((left, right) => left - right);
-  const categoryIndex = new Map(
-    categoryDomain.map((value, index) => [value, index])
-  );
-  const cellMap = new Map(cells.map(cell => [
-    JSON.stringify([cell[channels.category], cell.color]),
-    cell
-  ]));
-  const thickness = resolveBarWidth(
-    widthConfig,
-    Math.abs(categoryScale.bandwidth ?? categoryScale.step)
-  );
-  const baseline = DEFAULT_SERIES_BASELINE;
-  const continuousColor = colorEncoding?.fieldType === "quantitative";
-  if (continuousColor) {
-    const mappedColors = mapScaleConsumerValues(
-      cells.map(cell => cell.color), colorScale, "color"
+  const channels = resolveBarChannels(layer), vertical = channels.orientation === "vertical";
+  const categoryScale = resolved.resolvedScales[layer.encoding[channels.category].scale];
+  const measureScale = resolved.resolvedScales[layer.encoding[channels.measure].scale];
+  const color = layer.encoding.color, colorScale = resolved.resolvedScales[color?.scale];
+  const grouped = resolveBarColorLayout(layer) === "group";
+  const offsetScale = resolved.resolvedScales[layer.encoding[resolveBarOffsetChannel(layer)]?.scale];
+  if (grouped && offsetScale === undefined) throw new Error("Grouped bar requires a resolved offset scale.");
+  const temporal = categoryScale.type === "time";
+  const segments = deriveSeriesBarCells(dataset.values, layer, temporal ? undefined : categoryScale.domain,
+    grouped ? offsetScale.domain : layer.encoding.group === undefined && color?.fieldType !== "quantitative" ? colorScale?.domain : undefined);
+  const fills = color === undefined ? undefined : mapScaleConsumerValues(segments.map(segment => segment.cell.color), colorScale, "color");
+  const stroke = layer.encoding?.stroke;
+  const strokeValues = stroke === undefined ? undefined : segments.map(segment => {
+    const values = readScaleField(
+      segment.cell.sourceIndices.map(index => dataset.values[index]),
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
     );
-    const cellByCategory = new Map(
-      cells.map((cell, index) => [cell[channels.category], { cell, index }])
-    );
-    const existing = resolved.graphicSpec.objects[layer.id].items;
-    const config = resolved.markConfigs[layer.id] ?? {};
-    const appearance = config.barAppearance ?? {};
-    return categoryDomain.flatMap(categoryValue => {
-      const entry = cellByCategory.get(categoryValue);
-      if (entry === undefined) return [];
-      const { cell, index } = entry;
-      const categoryCenter = discreteCategory
-        ? mapOrdinalPositionValues([categoryValue], categoryScale)[0]
-        : mapContinuousScaleValues(
-            [categoryValue],
-            categoryScale
-          )[0];
-      const [segment] = layoutSeriesPartition(
-        [cell[channels.measure]],
-        layout,
-        { baseline }
-      );
-      if (segment === undefined) return [];
-      const [start, end] = mapContinuousScaleValues(
-        [segment.start, segment.end],
-        measureScale
-      );
-      return [{
-        x: vertical ? categoryCenter - thickness / 2 : Math.min(start, end),
-        y: vertical ? Math.min(start, end) : categoryCenter - thickness / 2,
-        width: vertical ? thickness : Math.abs(start - end),
-        height: vertical ? Math.abs(start - end) : thickness,
-        fill: mappedColors[index],
-        ...resolveBarAppearance(config, existing[index]?.properties)
-      }];
-    });
-  }
-  const segments = [];
-
-  for (const category of categoryDomain) {
-    const partition = seriesDomain.map(color =>
-      cellMap.get(JSON.stringify([category, color]))?.[channels.measure] ?? 0
-    );
-    for (const segment of layoutSeriesPartition(partition, layout, { baseline })) {
-      const color = seriesDomain[segment.index];
-      const cell = cellMap.get(JSON.stringify([category, color]));
-      if (cell === undefined) continue;
-      segments.push({ category, color, ...segment });
+    if (new Set(values).size !== 1) {
+      throw new Error("Bar stroke requires one value within each aggregate cell.");
     }
-  }
-
-  const existing = resolved.graphicSpec.objects[layer.id].items;
+    return values[0];
+  });
+  const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+    strokeValues,
+    resolved.resolvedScales[stroke.scale],
+    "stroke"
+  );
   const config = resolved.markConfigs[layer.id] ?? {};
-  const appearance = config.barAppearance ?? {};
-  return segments.map((segment, index) => {
-    const category = categoryIndex.get(segment.category);
-    const color = seriesIndex.get(segment.color);
-    if (category === undefined || color === undefined) {
-      throw new Error("Bar value is outside a resolved ordinal domain.");
+  const existing = resolved.graphicSpec.objects[layer.id].items;
+  const width = resolveBarWidth(widthConfig, grouped ? offsetScale.bandwidth : Math.abs(categoryScale.bandwidth ?? categoryScale.step));
+  const indices = new Map(categoryScale.domain.map((value, index) => [value, index]));
+  return segments.map(({ cell, start, end, seriesIndex }, index) => {
+    const categoryValue = cell[channels.category];
+    const categoryCenter = (temporal ? mapContinuousScaleValues : mapOrdinalPositionValues)([categoryValue], categoryScale)[0];
+    let position = !grouped && layer.encoding.group !== undefined && layer.encoding.group.inferredFrom === undefined && !temporal && categoryScale.step > 0
+      ? (categoryScale.start ?? categoryScale.range[0]) + indices.get(categoryValue) * categoryScale.step + categoryScale.bandwidth / 2 - width / 2
+      : categoryCenter - width / 2;
+    if (grouped) {
+      const direction = Math.sign(categoryScale.step ?? categoryScale.range[1] - categoryScale.range[0]) || 1;
+      const offsetCenter = offsetScale.start + seriesIndex * offsetScale.step + (Math.sign(offsetScale.step) || 1) * offsetScale.bandwidth / 2;
+      if (vertical && direction > 0 && offsetScale.step > 0) {
+        const categoryStart = temporal ? categoryCenter - categoryScale.bandwidth / 2
+          : (categoryScale.start ?? categoryScale.range[0]) + indices.get(categoryValue) * categoryScale.step;
+        position = categoryStart + offsetScale.start + seriesIndex * offsetScale.step + (offsetScale.bandwidth - width) / 2;
+      } else position = categoryCenter + direction * (offsetCenter - finiteMidpoint(...offsetScale.range)) - width / 2;
     }
-    const categoryCenter = discreteCategory
-      ? mapOrdinalPositionValues([segment.category], categoryScale)[0]
-      : mapContinuousScaleValues(
-          [segment.category],
-          categoryScale
-        )[0];
-    const [start, end] = mapContinuousScaleValues(
-      [segment.start, segment.end],
-      measureScale
-    );
-    return {
-      x: vertical
-        ? categoryCenter - thickness / 2
-        : Math.min(start, end),
-      y: vertical
-        ? Math.min(start, end)
-        : categoryCenter - thickness / 2,
-      width: vertical ? thickness : Math.abs(start - end),
-      height: vertical ? Math.abs(start - end) : thickness,
-      fill: segment.color === undefined
-        ? appearance.fill ?? config.fill ?? colors.get(segment.color)
-        : colors.get(segment.color),
-      ...resolveBarAppearance(config, existing[index]?.properties)
-    };
+    const [a, b] = mapContinuousScaleValues([start, end], measureScale);
+    return { x: vertical ? position : Math.min(a, b), y: vertical ? Math.min(a, b) : position,
+      width: vertical ? width : Math.abs(a - b), height: vertical ? Math.abs(a - b) : width,
+      fill: fills?.[index] ?? config.barAppearance?.fill ?? config.fill ?? DEFAULT_BAR_FILL,
+      ...resolveBarAppearance(config, existing[index]?.properties),
+      ...(strokes === undefined ? {} : { stroke: strokes[index] }) };
   });
 }

package/src/materialization/bars/histogram.js

@@ -1,5 +1,5 @@
+import { readSeriesIdentity } from "../../grammar/pathSeries.js";
 import {
-  countHistogramBins,
   findHistogramBinIndex,
   resolveHistogramBins
 } from "../../grammar/histogram.js";
@@ -7,14 +7,55 @@ import {
   mapContinuousScaleValues,
   mapOrdinalValues,
   readNominalField,
-  readQuantitativeField
+  readQuantitativeField,
+  readScaleField
 } from "../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from "../scales/map.js";
 import { resolveBarColorLayout } from "../../grammar/bars/policy.js";
 import { layoutSeriesPartition } from "../../grammar/seriesLayout.js";
 import {
   DEFAULT_BAR_FILL,
   resolveBarAppearance
 } from "./resolve.js";
+import {
+  readStatisticalWeights,
+  sumEntryWeights,
+  summarizeStatisticalWeights,
+  validateWeightedNumericFields
+} from "../../grammar/weightedStatistics.js";
+
+export function resolveHistogramInput(dataset, xEncoding) {
+  const allValues = readQuantitativeField(dataset.values, xEncoding.field);
+  if (xEncoding.weight === undefined) {
+    return {
+      rows: dataset.values,
+      values: allValues,
+      entries: dataset.values.map((row, index) => ({ row, index })),
+      mass(entries) {
+        return entries.length;
+      }
+    };
+  }
+  const weights = readStatisticalWeights(
+    dataset.values,
+    xEncoding.weight,
+    "Histogram"
+  );
+  validateWeightedNumericFields(weights.entries, [xEncoding.field], "Histogram");
+  const summary = summarizeStatisticalWeights(
+    weights.entries,
+    weights.definition.kind,
+    "Histogram data"
+  );
+  return {
+    rows: summary.positive.map(entry => entry.row),
+    values: summary.positive.map(entry => entry.row[xEncoding.field]),
+    entries: summary.positive,
+    mass(entries) {
+      return sumEntryWeights(entries, summary, "Histogram bin mass");
+    }
+  };
+}
 
 export function deriveHistogramSegments({
   dataset,
@@ -23,7 +64,8 @@ export function deriveHistogramSegments({
   xScale,
   resolvedScales
 }) {
-  const xValues = readQuantitativeField(dataset.values, xEncoding.field);
+  const input = resolveHistogramInput(dataset, xEncoding);
+  const { rows, values: xValues, entries } = input;
   const bins = resolveHistogramBins({
     values: xValues,
     bin: xEncoding.bin,
@@ -34,9 +76,37 @@ export function deriveHistogramSegments({
   const colorEncoding = layer.encoding?.color;
   const layout = resolveBarColorLayout(layer);
 
+  if (layer.encoding?.group !== undefined) {
+    const identity = readSeriesIdentity(rows, layer);
+    const cellRows = bins.boundaries.slice(0, -1).map(() => identity.domain.map(() => []));
+    const index = new Map(identity.domain.map((value, i) => [value, i]));
+    xValues.forEach((value, i) => { const bin = findHistogramBinIndex(value, bins.boundaries);
+      if (bin !== -1) cellRows[bin][index.get(identity.values[i])].push(entries[i]); });
+    return cellRows.flatMap((cells, bin) => layoutSeriesPartition(cells.map(input.mass), layout).map(segment => {
+      const members = cells[segment.index].map(entry => entry.row);
+      let color, colorValue;
+      if (colorEncoding !== undefined) {
+        const values = readNominalField(members, colorEncoding.field);
+        if (new Set(values).size !== 1) throw new Error("Histogram color requires one value within each bin/series cell.");
+        colorValue = values[0];
+        const scale = resolvedScales[colorEncoding.scale];
+        color = mapOrdinalValues([colorValue], scale.domain, scale.range)[0];
+      }
+      return { bin, start: bins.boundaries[bin], end: bins.boundaries[bin + 1],
+        category: segment.index, categoryCount: identity.domain.length,
+        stackStart: segment.start, stackEnd: segment.end, members,
+        ...(color === undefined ? {} : { color, colorValue }) };
+    }));
+  }
+
   if (colorEncoding?.scale === undefined) {
-    return countHistogramBins(xValues, bins.boundaries).flatMap((count, bin) =>
-      layoutSeriesPartition([count], layout).map(segment => ({
+    const cellRows = bins.boundaries.slice(0, -1).map(() => []);
+    xValues.forEach((value, index) => {
+      const bin = findHistogramBinIndex(value, bins.boundaries);
+      if (bin !== -1) cellRows[bin].push(entries[index]);
+    });
+    return cellRows.flatMap((cell, bin) =>
+      layoutSeriesPartition([input.mass(cell)], layout).map(segment => ({
         bin,
         start: bins.boundaries[bin],
         end: bins.boundaries[bin + 1],
@@ -44,9 +114,7 @@ export function deriveHistogramSegments({
         categoryCount: 1,
         stackStart: segment.start,
         stackEnd: segment.end,
-        members: dataset.values.filter((_, index) =>
-          findHistogramBinIndex(xValues[index], bins.boundaries) === bin
-        )
+        members: cell.map(entry => entry.row)
       }))
     );
   }
@@ -57,24 +125,24 @@ export function deriveHistogramSegments({
       `Bar mark "${layer.id}" requires a resolved color scale.`
     );
   }
-  const colorValues = readNominalField(dataset.values, colorEncoding.field);
+  const colorValues = readNominalField(rows, colorEncoding.field);
   mapOrdinalValues(colorValues, colorScale.domain, colorScale.range);
   const categoryIndex = new Map(
     colorScale.domain.map((value, index) => [value, index])
   );
-  const counts = bins.boundaries.slice(0, -1).map(() =>
-    colorScale.domain.map(() => 0)
+  const cells = bins.boundaries.slice(0, -1).map(() =>
+    colorScale.domain.map(() => [])
   );
 
   for (let index = 0; index < xValues.length; index += 1) {
     const bin = findHistogramBinIndex(xValues[index], bins.boundaries);
     const category = categoryIndex.get(colorValues[index]);
-    if (bin !== -1 && category !== undefined) counts[bin][category] += 1;
+    if (bin !== -1 && category !== undefined) cells[bin][category].push(entries[index]);
   }
 
   const segments = [];
-  for (let bin = 0; bin < counts.length; bin += 1) {
-    const partition = layoutSeriesPartition(counts[bin], layout);
+  for (let bin = 0; bin < cells.length; bin += 1) {
+    const partition = layoutSeriesPartition(cells[bin].map(input.mass), layout);
     for (const segment of partition) {
       const category = segment.index;
       segments.push({
@@ -82,13 +150,10 @@ export function deriveHistogramSegments({
         start: bins.boundaries[bin],
         end: bins.boundaries[bin + 1],
         category,
-        categoryCount: counts[bin].length,
+        categoryCount: cells[bin].length,
         stackStart: segment.start,
         stackEnd: segment.end,
-        members: dataset.values.filter((_, index) =>
-          findHistogramBinIndex(xValues[index], bins.boundaries) === bin &&
-          categoryIndex.get(colorValues[index]) === category
-        ),
+        members: cells[bin][category].map(entry => entry.row),
         color: mapOrdinalValues(
           [colorScale.domain[category]],
           colorScale.domain,
@@ -111,6 +176,24 @@ export function deriveHistogramRectangles(required, resolved) {
   const layout = resolveBarColorLayout(required.layer);
   const config = resolved.markConfigs[required.layer.id] ?? {};
   const appearance = config.barAppearance ?? {};
+  const stroke = required.layer.encoding?.stroke;
+  const strokeValues = stroke === undefined ? undefined : segments.map(segment => {
+    const values = readScaleField(
+      segment.members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (new Set(values).size !== 1) {
+      throw new Error("Histogram stroke requires one value within each bin/series cell.");
+    }
+    return values[0];
+  });
+  const strokes = strokeValues === undefined ? undefined : mapScaleConsumerValues(
+    strokeValues,
+    resolved.resolvedScales[stroke.scale],
+    "stroke"
+  );
 
   return segments.map((segment, index) => {
     const [x1, x2] = mapContinuousScaleValues(
@@ -140,7 +223,8 @@ export function deriveHistogramRectangles(required, resolved) {
         config.fill ??
         existing[index]?.properties.fill ??
         DEFAULT_BAR_FILL,
-      ...resolveBarAppearance(config, existing[index]?.properties)
+      ...resolveBarAppearance(config, existing[index]?.properties),
+      ...(strokes === undefined ? {} : { stroke: strokes[index] })
     };
   });
 }

package/src/materialization/bars/ranged.js

@@ -1,4 +1,10 @@
-import { mapContinuousScaleValues, mapOrdinalPositionValues, mapOrdinalValues } from "../../grammar/scales/index.js";
+import {
+  mapContinuousScaleValues,
+  mapOrdinalPositionValues,
+  mapOrdinalValues,
+  readScaleField
+} from "../../grammar/scales/index.js";
+import { mapScaleConsumerValues } from "../scales/map.js";
 import { resolveBarWidth } from "../../grammar/bars/geometry.js";
 import {
   DEFAULT_BAR_FILL,
@@ -36,6 +42,14 @@ export function deriveRangedRectangles(required, program, width) {
   const appearanceConfig = color === undefined
     ? config
     : { ...config, stroke: undefined };
+  const stroke = layer.encoding?.stroke;
+  const strokes = stroke === undefined ? undefined : mapScaleConsumerValues(
+    readScaleField(dataset.values, stroke.field, stroke.fieldType, {
+      temporalUnit: stroke.temporalUnit
+    }),
+    program.resolvedScales[stroke.scale],
+    "stroke"
+  );
   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],
@@ -44,7 +58,8 @@ export function deriveRangedRectangles(required, program, width) {
       undefined,
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
-    )
+    ),
+    ...(strokes === undefined ? {} : { stroke: strokes[index] })
   } : {
     x: Math.min(first[index], second[index]), y: centers[index] - band / 2,
     width: Math.abs(second[index] - first[index]), height: band, fill: fills[index],
@@ -53,6 +68,7 @@ export function deriveRangedRectangles(required, program, width) {
       undefined,
       color === undefined ? DEFAULT_BAR_STROKE : fills[index],
       1
-    )
+    ),
+    ...(strokes === undefined ? {} : { stroke: strokes[index] })
   });
 }

package/src/materialization/bars/resolve.js

@@ -3,6 +3,7 @@ import { findDataset } from "../../selectors/datasets.js";
 import { findLayer } from "../../selectors/layers.js";
 import { findSemanticScale } from "../../selectors/scales.js";
 import { BAR_GRAINS, resolveBarGrain } from "../../grammar/bars/policy.js";
+import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
 
 export const DEFAULT_BAR_FILL = DEFAULT_COLORS.mark;
 export const DEFAULT_BAR_STROKE = "white";
@@ -25,7 +26,8 @@ export function resolveBarAppearance(
       ? 0
       : appearance.strokeWidth ?? config.strokeWidth ??
         existing?.strokeWidth ?? DEFAULT_BAR_STROKE_WIDTH,
-    ...(opacity === undefined ? {} : { opacity })
+    ...(opacity === undefined ? {} : { opacity }),
+    ...requestedStrokeDetails(appearance, "Bar mark")
   };
 }
 
@@ -40,9 +42,10 @@ export function requireCompleteBar(program, id) {
     throw new Error(`Bar mark "${id}" requires an existing dataset.`);
   }
   const graphic = program.graphicSpec.objects[id];
-  const rectCollection = graphic?.type === "collection" &&
-    graphic.items?.every(child => child.type === "rect");
-  if (graphic?.type !== "rect" && !rectCollection) {
+  const roundedCollection = graphic?.type === "collection" &&
+    Object.hasOwn(program.markConfigs[id]?.barAppearance ?? {}, "cornerRadius") &&
+    graphic.items?.every(child => ["rect", "path"].includes(child.type));
+  if (graphic?.type !== "rect" && !roundedCollection) {
     throw new Error(`Bar mark "${id}" requires rect graphics.`);
   }
 

package/src/materialization/categorySlotOffset.js

@@ -0,0 +1,40 @@
+export function resolveCategorySlotOffset(program, layer) {
+  const policy = program.markConfigs[layer.id]?.categorySlotOffset;
+  if (policy === undefined) return undefined;
+  if (!["x", "y"].includes(policy.channel)) {
+    throw new Error(`Category slot offset for "${layer.id}" requires channel x or y.`);
+  }
+  if (!Number.isFinite(policy.band) || policy.band < -0.5 || policy.band > 0.5) {
+    throw new RangeError(`Category slot offset for "${layer.id}" must be within [-0.5, 0.5] band.`);
+  }
+  const encoding = layer.encoding?.[policy.channel];
+  if (!["nominal", "ordinal"].includes(encoding?.fieldType)) {
+    throw new Error(`Category slot offset for "${layer.id}" requires a categorical position.`);
+  }
+  const scale = program.resolvedScales[encoding.scale];
+  if (scale?.type !== "band" || !Number.isFinite(scale.bandwidth) || scale.bandwidth <= 0) {
+    throw new Error(`Category slot offset for "${layer.id}" requires a positive band scale.`);
+  }
+  return { channel: policy.channel, pixels: scale.bandwidth * policy.band };
+}
+
+export function offsetCategoryPositions(program, layer, positions) {
+  const offset = resolveCategorySlotOffset(program, layer);
+  if (offset === undefined || offset.pixels === 0) return positions;
+  const shift = values => values === undefined
+    ? undefined
+    : values.map(value => Number.isFinite(value) ? value + offset.pixels : value);
+  return {
+    ...positions,
+    [offset.channel]: shift(positions[offset.channel])
+  };
+}
+
+export function offsetCategoryRectangles(program, layer, rectangles) {
+  const offset = resolveCategorySlotOffset(program, layer);
+  if (offset === undefined || offset.pixels === 0) return rectangles;
+  return rectangles.map(rectangle => ({
+    ...rectangle,
+    [offset.channel]: rectangle[offset.channel] + offset.pixels
+  }));
+}

package/src/materialization/composition.js

@@ -121,6 +121,8 @@ export function clearCompositionChildren(program) {
 export function materializeCompositionGraphics(program) {
   program._assertCompositionProgram("materializeCompositionGraphics");
   const layout = resolveCompositionProgramLayout(program);
+  const background = program.graphicSpec.objects.canvas?.properties
+    ?.background ?? "white";
   let next = clearCompositionChildren(program);
   if (next.graphicSpec.objects.canvas === undefined) {
     next = next.createGraphics({ id: "canvas", type: "canvas" });
@@ -128,7 +130,7 @@ export function materializeCompositionGraphics(program) {
   for (const [property, value] of Object.entries({
     width: layout.width,
     height: layout.height,
-    background: "white"
+    background
   })) {
     next = next.editGraphics({ target: "canvas", property, value });
   }

package/src/materialization/compositionSnapshot.js

@@ -32,7 +32,7 @@ export function namespaceGraphicId(namespace, id) {
   const encode = value => Array.from(value, character =>
     character.codePointAt(0).toString(16).padStart(6, "0")
   ).join("");
-  return `g${encode(namespace)}_${encode(id)}`;
+  return `g${encode(namespace)}_${id}`;
 }
 
 function rewriteItem(item, namespace) {