ggaction 0.0.13 → 0.0.15

package/src/actions/guides/legends/categorical/layout.js

@@ -1,4 +1,4 @@
-import { noOptions } from "../../../../core/validation.js";
+import { validateOptionObject } from "../../../../core/validation.js";
 import { mapOrdinalValues } from "../../../../grammar/scales/index.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import { formatVisibleText } from "../../../../core/textMetrics.js";
@@ -10,25 +10,57 @@ import {
 import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
 import { resolveConcreteGraphicBounds } from "../../../../grammar/schemas/graphicBounds.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
+import { resolveDisplayLabel } from "../../../../grammar/displayLabels.js";
+import {
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
+
+const CATEGORICAL_KINDS = Object.freeze(["series", "color", "stroke"]);
 
-export function activeConfig(program) {
-  const kinds = ["series", "color"]
+export function activeConfig(program, requested) {
+  if (requested !== undefined && !CATEGORICAL_KINDS.includes(requested)) {
+    throw new Error(`Unknown categorical legend kind "${requested}".`);
+  }
+  const kinds = CATEGORICAL_KINDS
     .filter(kind => program.guideConfigs.legend?.[kind] !== undefined);
+  if (requested !== undefined) {
+    if (!kinds.includes(requested)) {
+      throw new Error(`Missing categorical legend config "${requested}".`);
+    }
+    return {
+      kind: requested,
+      config: resolveEffectiveLegendBlockConfig(
+        program,
+        requested,
+        program.guideConfigs.legend[requested]
+      )
+    };
+  }
   if (kinds.length !== 1) {
     throw new Error("Legend component requires one categorical legend config.");
   }
   const kind = kinds[0];
-  return { kind, config: program.guideConfigs.legend[kind] };
+  return {
+    kind,
+    config: resolveEffectiveLegendBlockConfig(
+      program,
+      kind,
+      program.guideConfigs.legend[kind]
+    )
+  };
 }
 
 function prefix(config) {
-  return config.kind === "series" ? "seriesLegend" : "colorLegend";
+  return `${config.kind}Legend`;
 }
 
 export function symbolGraphic(config, type) {
   const onlyDefault = config.symbol.layers.length === 1 &&
     ((config.kind === "series" && type === "line") ||
-      (config.kind === "color" && type === "swatch"));
+      (["color", "stroke"].includes(config.kind) && type === "swatch"));
   if (onlyDefault) return `${prefix(config)}Symbols`;
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
   return `${prefix(config)}Symbol${suffix}`;
@@ -46,6 +78,14 @@ export function symbolWidth(config) {
   }));
 }
 
+export function categoricalLegendLabels(config) {
+  return config.domain.map(value => resolveDisplayLabel(
+    value,
+    config.labelMap,
+    formatVisibleText
+  ));
+}
+
 function resolveSampleBounds(program, config, width) {
   const appearance = resolveAppearance(program, config);
   return config.domain.map((_, index) => {
@@ -53,21 +93,56 @@ function resolveSampleBounds(program, config, width) {
       if (layer.type === "line") {
         const x = (width - layer.length) / 2;
         return { type: "line", properties: { x1: x, x2: x + layer.length, y1: 0, y2: 0,
-          strokeWidth: layer.lineWidth } };
+          stroke: layer.stroke ?? (config.channels.includes("stroke")
+            ? appearance.strokes[index]
+            : appearance.colors[index]),
+          strokeWidth: layer.lineWidth, opacity: layer.opacity,
+          ...requestedStrokeDetails(layer, "Legend line symbol") } };
       }
       if (layer.type === "swatch") {
-        return { type: "rect", properties: { x: (width - layer.width) / 2, y: -layer.height / 2,
-          width: layer.width, height: layer.height, strokeWidth: layer.strokeWidth } };
+        const details = requestedRectStyleDetails(layer, "Legend swatch symbol");
+        return materializeRectItem({ x: (width - layer.width) / 2, y: -layer.height / 2,
+          width: layer.width, height: layer.height, strokeWidth: layer.strokeWidth,
+          stroke: config.channels.includes("stroke")
+            ? appearance.strokes[index]
+            : layer.stroke,
+          opacity: layer.opacity,
+          ...requestedStrokeDetails(details, "Legend swatch symbol")
+        }, details.cornerRadius ?? 0);
       }
       if (config.channels.includes("shape")) {
         return createPointShapeGraphic({ shape: appearance.shapes[index], x: width / 2, y: 0,
           area: Math.PI * layer.size ** 2, fill: layer.fill ?? appearance.colors[index],
-          stroke: layer.stroke, strokeWidth: layer.strokeWidth });
+          stroke: layer.stroke, strokeWidth: layer.strokeWidth, opacity: layer.opacity,
+          ...requestedStrokeDetails(layer, "Legend point symbol") });
       }
       return { type: "circle", properties: { x: width / 2, y: 0, radius: layer.size,
-        strokeWidth: layer.strokeWidth } };
+        stroke: config.channels.includes("stroke")
+          ? appearance.strokes[index]
+          : layer.stroke,
+        strokeWidth: layer.strokeWidth, opacity: layer.opacity,
+        ...requestedStrokeDetails(layer, "Legend point symbol") } };
     });
-    return resolveConcreteGraphicBounds({ objects: { sample: { type: "collection", items } }, order: ["sample"] }, "sample");
+    return items.map((item, itemIndex) => {
+      const bounds = resolveConcreteGraphicBounds({
+        objects: { sample: item },
+        order: ["sample"]
+      }, "sample");
+      if (config.symbol.layers[itemIndex].type !== "line") return bounds;
+      const extent = config.symbol.layers[itemIndex].lineWidth / 2;
+      return {
+        ...bounds,
+        left: bounds.left - extent,
+        right: bounds.right + extent
+      };
+    }).reduce((result, bounds) => result === undefined
+      ? bounds
+      : {
+          left: Math.min(result.left, bounds.left),
+          right: Math.max(result.right, bounds.right),
+          top: Math.min(result.top, bounds.top),
+          bottom: Math.max(result.bottom, bounds.bottom)
+        }, undefined);
   });
 }
 
@@ -75,7 +150,7 @@ export function resolveLayout(program, config) {
   const { plot, canvas } = resolveContinuousBounds(program,
     "Legend layout requires Canvas bounds, width, and height.");
   const width = symbolWidth(config);
-  const layout = resolveLegendItemLayout(plot, config, config.domain.map(formatVisibleText), {
+  const layout = resolveLegendItemLayout(plot, config, categoricalLegendLabels(config), {
     width, height: 0, itemBounds: resolveSampleBounds(program, config, width)
   }, canvas);
   assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Categorical legend layout", config);
@@ -86,19 +161,26 @@ export function resolveLayout(program, config) {
 
 export function resolveAppearance(program, config) {
   let colors = config.domain.map(() => DEFAULT_COLORS.mark);
+  let strokes = config.domain.map(() => "white");
   let dashes = config.domain.map(() => []);
   let shapes = config.domain.map(() => "circle");
   for (let index = 0; index < config.channels.length; index += 1) {
     const scale = program.resolvedScales[config.scales[index]];
     const values = mapOrdinalValues(config.domain, scale.domain, scale.range);
     if (config.channels[index] === "color") colors = values;
+    if (config.channels[index] === "stroke") strokes = values;
     if (config.channels[index] === "strokeDash") dashes = values;
     if (config.channels[index] === "shape") shapes = values;
   }
-  return { colors, dashes, shapes };
+  return { colors, strokes, dashes, shapes };
 }
 
-export { noOptions };
+export function noOptions(args, operation) {
+  validateOptionObject(args, ["kind"], operation);
+  if (args.kind !== undefined && !CATEGORICAL_KINDS.includes(args.kind)) {
+    throw new Error(`Unknown categorical legend kind "${args.kind}".`);
+  }
+}
 
 export function layerFor(config, type) {
   const layer = config.symbol.layers.find(item => item.type === type);

package/src/actions/guides/legends/categorical/options.js

@@ -88,7 +88,7 @@ function normalizeBorder(border) {
   return normalized;
 }
 
-export function normalizeOptions(args, kind) {
+export function normalizeOptions(args, kind, { internalSymbol = false } = {}) {
   validateOptionObject(args, OPTIONS, "createLegend");
   if (Object.hasOwn(args, "labels")) {
     validateObject(args.labels, TEXT_OPTIONS, "createLegend.labels");
@@ -191,7 +191,7 @@ export function normalizeOptions(args, kind) {
     offset,
     titlePosition,
     title: args.title,
-    symbol: normalizeRecipe(args.symbol, kind),
+    symbol: normalizeRecipe(args.symbol, kind, { internal: internalSymbol }),
     labels,
     titleStyle,
     itemGap,

package/src/actions/guides/legends/categorical/recipes.js

@@ -5,6 +5,15 @@ import {
   positive,
   validateKeys
 } from "./validation.js";
+import {
+  requestedRectStyleDetails,
+  RECT_STYLE_PROPERTIES
+} from "../../../../grammar/roundedRect.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../../grammar/strokeStyle.js";
+import { findLayerMatching } from "../../../../selectors/layers.js";
 
 const LAYER_OPTIONS = Object.freeze({
   line: Object.freeze(["type", "length", "lineWidth"]),
@@ -24,19 +33,101 @@ const LAYER_OPTIONS = Object.freeze({
     "strokeWidth"
   ])
 });
+const INTERNAL_LAYER_OPTIONS = Object.freeze({
+  line: Object.freeze([...LAYER_OPTIONS.line, ...STROKE_STYLE_PROPERTIES]),
+  point: Object.freeze([...LAYER_OPTIONS.point, ...STROKE_STYLE_PROPERTIES]),
+  swatch: Object.freeze([...LAYER_OPTIONS.swatch, ...RECT_STYLE_PROPERTIES])
+});
 
-export function resolveLegendSymbol(program, layer, channels, requested) {
+export function resolveLegendSymbol(program, layer, channels, requested, kind) {
   if (requested !== undefined && requested !== "auto") return requested;
-  if (layer.mark?.type !== "point" || !channels?.includes("shape")) return undefined;
-  const color = channels.includes("color") ? layer.encoding?.color : undefined;
-  const hasMatchingLine = color?.scale !== undefined && program.semanticSpec.layers.some(candidate =>
-    candidate.mark?.type === "line" && candidate.encoding?.color?.field === color.field &&
-    candidate.encoding?.color?.scale === color.scale
-  );
-  return { layers: [
-    ...(hasMatchingLine ? [{ type: "line", length: 32, lineWidth: 3 }] : []),
-    { type: "point", size: Math.sqrt(64 / Math.PI), stroke: "white", strokeWidth: 0 }
-  ] };
+  const config = program.markConfigs[layer.id] ?? {};
+  const bar = config.barAppearance ?? {};
+  const styleOwner = layer.mark.type === "bar" ? bar : config;
+  const strokeDetails = requestedStrokeDetails(styleOwner, "Legend source");
+  const rectDetails = ["bar", "rect"].includes(layer.mark.type)
+    ? requestedRectStyleDetails(styleOwner, "Legend source")
+    : strokeDetails;
+  if (channels?.length === 1 && channels[0] === "stroke") {
+    const strokeWidth = bar.strokeWidth ?? config.strokeWidth ?? ({
+      point: 1,
+      line: 2,
+      area: 1,
+      bar: 0.5,
+      rect: 1,
+      arc: 1,
+      rule: 2,
+      tick: 2
+    }[layer.mark.type] ?? 1);
+    if (["line", "rule", "tick"].includes(layer.mark.type)) {
+      return { layers: [{
+        type: "line",
+        length: 32,
+        lineWidth: strokeWidth,
+        ...strokeDetails
+      }] };
+    }
+    if (layer.mark.type === "point") {
+      return { layers: [{
+        type: "point",
+        size: 5,
+        fill: config.fill ?? "#4c78a8",
+        stroke: "white",
+        strokeWidth,
+        ...strokeDetails
+      }] };
+    }
+    return { layers: [{
+      type: "swatch",
+      width: 14,
+      height: 12,
+      stroke: "white",
+      strokeWidth,
+      ...rectDetails
+    }] };
+  }
+  if (layer.mark?.type === "point" && channels?.includes("shape")) {
+    const color = channels.includes("color") ? layer.encoding?.color : undefined;
+    const matchingLine = color?.scale === undefined
+      ? undefined
+      : findLayerMatching(program, candidate =>
+        candidate.mark?.type === "line" &&
+        candidate.encoding?.color?.field === color.field &&
+        candidate.encoding?.color?.scale === color.scale
+      );
+    const lineDetails = matchingLine === undefined
+      ? {}
+      : requestedStrokeDetails(
+          program.markConfigs[matchingLine.id] ?? {},
+          "Legend line source"
+        );
+    return { layers: [
+      ...(matchingLine !== undefined ? [{
+        type: "line",
+        length: 32,
+        lineWidth: 3,
+        ...lineDetails
+      }] : []),
+      {
+        type: "point",
+        size: Math.sqrt(64 / Math.PI),
+        stroke: "white",
+        strokeWidth: 0,
+        ...strokeDetails
+      }
+    ] };
+  }
+  if (Object.keys(rectDetails).length === 0) return undefined;
+  return kind === "series"
+    ? { layers: [{ type: "line", length: 32, lineWidth: 2, ...strokeDetails }] }
+    : { layers: [{
+        type: "swatch",
+        width: 14,
+        height: 12,
+        stroke: "white",
+        strokeWidth: 0.5,
+        ...rectDetails
+      }] };
 }
 
 function defaultRecipe(kind) {
@@ -53,20 +144,20 @@ function defaultRecipe(kind) {
       };
 }
 
-function normalizeLayer(layer) {
+function normalizeLayer(layer, internal) {
   if (!isPlainObject(layer) || !Object.hasOwn(LAYER_OPTIONS, layer.type)) {
     throw new Error("Legend symbol layer type must be line, point, or swatch.");
   }
   validateKeys(
     layer,
-    LAYER_OPTIONS[layer.type],
+    internal ? INTERNAL_LAYER_OPTIONS[layer.type] : LAYER_OPTIONS[layer.type],
     `createLegend.symbol.${layer.type}`
   );
   if (layer.type === "line") {
     const normalized = { length: 32, lineWidth: 2, ...layer };
     positive(normalized.length, "Legend line symbol length");
     nonNegative(normalized.lineWidth, "Legend line symbol lineWidth");
-    return normalized;
+    return { ...normalized, ...requestedStrokeDetails(normalized, "Legend line symbol") };
   }
   if (layer.type === "point") {
     const normalized = {
@@ -85,7 +176,7 @@ function normalizeLayer(layer) {
     if (normalized.fill !== undefined) {
       nonEmptyString(normalized.fill, "Legend point symbol fill");
     }
-    return normalized;
+    return { ...normalized, ...requestedStrokeDetails(normalized, "Legend point symbol") };
   }
   const normalized = {
     width: 14,
@@ -98,10 +189,10 @@ function normalizeLayer(layer) {
   positive(normalized.height, "Legend swatch height");
   nonEmptyString(normalized.stroke, "Legend swatch stroke");
   nonNegative(normalized.strokeWidth, "Legend swatch strokeWidth");
-  return normalized;
+  return { ...normalized, ...requestedRectStyleDetails(normalized, "Legend swatch symbol") };
 }
 
-export function normalizeRecipe(symbol, kind) {
+export function normalizeRecipe(symbol, kind, { internal = false } = {}) {
   if (symbol === undefined || symbol === "auto") return defaultRecipe(kind);
   if (!isPlainObject(symbol)) {
     throw new TypeError('createLegend.symbol must be "auto" or a plain object.');
@@ -118,17 +209,17 @@ export function normalizeRecipe(symbol, kind) {
         "Legend symbol recipe supports at most one layer per type."
       );
     }
-    layers = symbol.layers.map(normalizeLayer);
+    layers = symbol.layers.map(layer => normalizeLayer(layer, internal));
   } else if (kind === "series") {
     validateKeys(symbol, ["length", "lineWidth"], "createLegend.symbol");
-    layers = [normalizeLayer({ type: "line", ...symbol })];
+    layers = [normalizeLayer({ type: "line", ...symbol }, internal)];
   } else {
     validateKeys(
       symbol,
       ["width", "height", "stroke", "strokeWidth"],
       "createLegend.symbol"
     );
-    layers = [normalizeLayer({ type: "swatch", ...symbol })];
+    layers = [normalizeLayer({ type: "swatch", ...symbol }, internal)];
   }
 
   const types = layers.map(layer => layer.type);

package/src/actions/guides/legends/categorical/resolve.js

@@ -17,8 +17,11 @@ function isCategoricalTarget(layer) {
       channel => layer.encoding?.[channel]?.scale !== undefined
     );
   }
-  return ["bar", "area", "arc", "rect"].includes(layer?.mark?.type) &&
-    layer.encoding?.color?.scale !== undefined;
+  return ["bar", "area", "arc", "rect", "rule", "tick"].includes(
+    layer?.mark?.type
+  ) && ["color", "stroke"].some(
+    channel => layer.encoding?.[channel]?.scale !== undefined
+  );
 }
 
 export function resolveTarget(program, requested) {
@@ -45,6 +48,7 @@ export function resolveTarget(program, requested) {
 export const sameValues = sameOrderedValues;
 
 function resolveLegendKind(layer, requestedChannels) {
+  if (sameValues(requestedChannels, ["stroke"])) return "stroke";
   if (["bar", "area", "arc", "rect"].includes(layer.mark.type)) return "color";
   if (
     layer.mark.type === "point" &&
@@ -78,9 +82,9 @@ function resolveOrdinalScales(program, scaleIds) {
 }
 
 export function resolveDefinition(program, layer, requestedChannels, requestedTitle, order) {
-  const channels = requestedChannels ?? (["line", "point"].includes(layer.mark.type)
-    ? CHANNELS.filter(channel => layer.encoding?.[channel]?.scale !== undefined)
-    : ["color"]);
+  const channels = requestedChannels ?? CHANNELS.filter(
+    channel => layer.encoding?.[channel]?.scale !== undefined
+  );
   const kind = resolveLegendKind(layer, channels);
   if (
     !Array.isArray(channels) ||
@@ -92,8 +96,8 @@ export function resolveDefinition(program, layer, requestedChannels, requestedTi
       "Legend channels must be a non-empty unique color/strokeDash/shape array."
     );
   }
-  if (kind === "color" && !sameValues(channels, ["color"])) {
-    throw new Error("Color legends currently support only the color channel.");
+  if (["color", "stroke"].includes(kind) && !sameValues(channels, [kind])) {
+    throw new Error(`${kind} legends currently support only the ${kind} channel.`);
   }
 
   const encodings = channels.map(channel => {
@@ -138,7 +142,7 @@ export function resolveCurrentDefinition(program, config) {
   if (guide === undefined) {
     throw new Error("Legend rematerialization requires semantic guide state.");
   }
-  const channels = config.kind === "series" ? guide.channels : ["color"];
+  const channels = config.kind === "series" ? guide.channels : [config.kind];
   return resolveDefinition(
     program,
     layer,

package/src/actions/guides/legends/categorical/symbols.js

@@ -11,6 +11,18 @@ import {
 } from "./layout.js";
 import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
+import {
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
+import { replaceGraphicItems } from "../../../primitives/editGraphics.js";
+
+function applyLayerOpacity(program, id, opacity) {
+  return opacity === undefined
+    ? program
+    : program.editGraphics({ target: id, property: "opacity", value: opacity });
+}
 
 function makeEditSymbol(type) {
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
@@ -19,20 +31,23 @@ function makeEditSymbol(type) {
     { op, description: `Rematerialize categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
+      const { config } = activeConfig(this, args.kind);
       const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       const dynamicPoint = type === "point" && config.channels.includes("shape");
-      const expected = dynamicPoint
+      const styledSwatch = type === "swatch" && Object.hasOwn(layer, "cornerRadius");
+      const expected = dynamicPoint || styledSwatch
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
-      if (this.graphicSpec.objects[id]?.type !== expected) {
+      const actual = this.graphicSpec.objects[id]?.type;
+      const compatibleStyledSwatch = styledSwatch && ["rect", "collection"].includes(actual);
+      if (actual !== expected && !compatibleStyledSwatch) {
         throw new Error(`${op} requires existing ${type} symbols.`);
       }
       const layout = resolveLayout(this, config);
       const appearance = resolveAppearance(this, config);
       let next = this;
-      if (!dynamicPoint) {
+      if (!dynamicPoint && !styledSwatch) {
         next = next.editGraphics({
           target: id,
           property: "length",
@@ -43,7 +58,7 @@ function makeEditSymbol(type) {
         const x1 = layout.symbolX.map(
           value => value + (symbolWidth(config) - layer.length) / 2
         );
-        return next
+        next = next
           .editGraphics({ target: id, property: "x1", value: x1 })
           .editGraphics({ target: id, property: "y1", value: layout.itemY })
           .editGraphics({
@@ -52,9 +67,21 @@ function makeEditSymbol(type) {
             value: x1.map(value => value + layer.length)
           })
           .editGraphics({ target: id, property: "y2", value: layout.itemY })
-          .editGraphics({ target: id, property: "stroke", value: appearance.colors })
+          .editGraphics({
+            target: id,
+            property: "stroke",
+            value: layer.stroke ?? (config.channels.includes("stroke")
+              ? appearance.strokes
+              : appearance.colors)
+          })
           .editGraphics({ target: id, property: "strokeWidth", value: layer.lineWidth })
           .editGraphics({ target: id, property: "strokeDash", value: appearance.dashes });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend line symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       if (type === "point") {
         const x = layout.symbolX.map(value => value + symbolWidth(config) / 2);
@@ -67,8 +94,12 @@ function makeEditSymbol(type) {
               y: layout.itemY[index],
               area: Math.PI * layer.size ** 2,
               fill,
-              stroke: layer.stroke,
-              strokeWidth: layer.strokeWidth
+              stroke: config.channels.includes("stroke")
+                ? appearance.strokes[index]
+                : layer.stroke,
+              strokeWidth: layer.strokeWidth,
+              opacity: layer.opacity,
+              ...requestedStrokeDetails(layer, "Legend point symbol")
             });
           });
           return next.editGraphics({
@@ -77,7 +108,7 @@ function makeEditSymbol(type) {
             value: items
           });
         }
-        return next
+        next = next
           .editGraphics({ target: id, property: "x", value: x })
           .editGraphics({ target: id, property: "y", value: layout.itemY })
           .editGraphics({ target: id, property: "radius", value: layer.size })
@@ -86,24 +117,47 @@ function makeEditSymbol(type) {
             property: "fill",
             value: layer.fill ?? appearance.colors
           })
-          .editGraphics({ target: id, property: "stroke", value: layer.stroke })
+          .editGraphics({
+            target: id,
+            property: "stroke",
+            value: config.channels.includes("stroke")
+              ? appearance.strokes
+              : layer.stroke
+          })
           .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend point symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       const x = layout.symbolX.map(
         value => value + (symbolWidth(config) - layer.width) / 2
       );
-      return next
-        .editGraphics({ target: id, property: "x", value: x })
-        .editGraphics({
-          target: id,
-          property: "y",
-          value: layout.itemY.map(value => value - layer.height / 2)
-        })
-        .editGraphics({ target: id, property: "width", value: layer.width })
-        .editGraphics({ target: id, property: "height", value: layer.height })
-        .editGraphics({ target: id, property: "fill", value: appearance.colors })
-        .editGraphics({ target: id, property: "stroke", value: layer.stroke })
-        .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+      const details = requestedRectStyleDetails(layer, "Legend swatch symbol");
+      const fills = layer.fill === undefined
+        ? appearance.colors
+        : config.domain.map(() => layer.fill);
+      const strokes = config.channels.includes("stroke")
+        ? appearance.strokes
+        : config.domain.map(() => layer.stroke);
+      return replaceGraphicItems(
+        next,
+        id,
+        "rect",
+        config.domain.map((_, index) => materializeRectItem({
+          x: x[index],
+          y: layout.itemY[index] - layer.height / 2,
+          width: layer.width,
+          height: layer.height,
+          fill: fills[index],
+          stroke: strokes[index],
+          strokeWidth: layer.strokeWidth,
+          ...(layer.opacity === undefined ? {} : { opacity: layer.opacity }),
+          ...requestedStrokeDetails(details, "Legend swatch symbol")
+        }, details.cornerRadius ?? 0))
+      );
     }
   );
 }
@@ -115,13 +169,14 @@ function makeCreateSymbol(type, edit) {
     { op, description: `Create categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
-      layerFor(config, type);
+      const { config } = activeConfig(this, args.kind);
+      const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       if (this.graphicSpec.objects[id] !== undefined) {
         throw new Error(`${op} requires missing ${type} symbols.`);
       }
-      const graphicType = type === "point" && config.channels.includes("shape")
+      const graphicType = type === "point" && config.channels.includes("shape") ||
+        type === "swatch" && (layer.cornerRadius ?? 0) > 0
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
       return this
@@ -136,7 +191,7 @@ function makeCreateSymbol(type, edit) {
             ? {}
             : { length: config.domain.length })
         })
-        [edit]();
+        [edit]({ kind: config.kind });
     }
   );
 }
@@ -161,7 +216,7 @@ export const createLegendSymbols = action(
   { op: "createLegendSymbols", description: "Create layered legend symbols." },
   function (args = {}) {
     noOptions(args, "createLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -169,7 +224,7 @@ export const createLegendSymbols = action(
         point: "createLegendSymbolPoints",
         swatch: "createLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }
@@ -179,7 +234,7 @@ export const rematerializeLegendSymbols = action(
   { op: "rematerializeLegendSymbols", description: "Rematerialize layered legend symbols." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -187,7 +242,7 @@ export const rematerializeLegendSymbols = action(
         point: "rematerializeLegendSymbolPoints",
         swatch: "rematerializeLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }