ggaction 0.0.13 → 0.0.15

package/src/actions/marks/line/actions.js

@@ -19,7 +19,11 @@ import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import { findDataset } from "../../../selectors/datasets.js";
 import { findLayer, resolveEligibleLayer } from "../../../selectors/layers.js";
 import { validateCurveInterpolation } from "../../../grammar/curveCommands.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import {
+  resolveCoordinateBounds,
+  resolveCoordinatePolarFrame
+} from "../../../materialization/coordinateBounds.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { canMaterializeLine } from "../../../materialization/marks/index.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
@@ -31,14 +35,20 @@ import {
 } from "./materialize.js";
 import { resolveLineBins } from "../../../grammar/lineSeries.js";
 import { requireSemanticScale } from "../../../selectors/scales.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../grammar/strokeStyle.js";
 
 const DEFAULT_LINE_STROKE = DEFAULT_COLORS.mark;
 const DEFAULT_LINE_WIDTH = 2;
 const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "stroke", "strokeWidth", "opacity", "curve", "closed"
+  "id", "data", "stroke", "strokeWidth", "opacity", "curve", "closed",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 const EDIT_OPTIONS = Object.freeze([
-  "target", "stroke", "strokeWidth", "opacity", "curve", "closed"
+  "target", "stroke", "strokeWidth", "opacity", "curve", "closed",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
@@ -71,14 +81,15 @@ function validatePolarLineConfig(layer, config) {
   }
 }
 
-function applyLineMaterialization(program, id, materialization) {
+function applyLineMaterialization(program, id, materialization, config) {
   return editMarkGraphic(program, id, {
     length: materialization.commands.length,
     commands: materialization.commands,
     stroke: materialization.strokes,
     strokeWidth: materialization.strokeWidths,
     strokeDash: materialization.strokeDashes,
-    ...(materialization.opacities === undefined ? {} : { opacity: materialization.opacities })
+    ...(materialization.opacities === undefined ? {} : { opacity: materialization.opacities }),
+    ...requestedStrokeDetails(config, "Line mark")
   });
 }
 
@@ -89,6 +100,7 @@ const createLineMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createLineMark");
+    const strokeDetails = requestedStrokeDetails(args, "createLineMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "line",
       label: "Line mark id",
@@ -139,7 +151,8 @@ const createLineMark = action(
         {
           ...(Object.hasOwn(args, "strokeWidth") ? { strokeWidth } : {}),
           ...(Object.hasOwn(args, "curve") ? { curve } : {}),
-          ...(Object.hasOwn(args, "closed") ? { closed } : {})
+          ...(Object.hasOwn(args, "closed") ? { closed } : {}),
+          ...strokeDetails
         }
       );
     created = materializeInheritedMark(created, id);
@@ -214,7 +227,7 @@ const rematerializeLineMark = action(
     }
     let resolved = this;
     if (args.scales !== false) {
-      const appearance = ["color", "strokeDash", "strokeWidth", "opacity"]
+      const appearance = ["color", "stroke", "strokeDash", "strokeWidth", "opacity"]
         .map(channel => layer.encoding?.[channel]?.scale).filter(scale => scale !== undefined);
       for (const scale of [...positions, ...appearance]) {
         resolved = resolved.rematerializeScale({ id: scale });
@@ -223,12 +236,12 @@ const rematerializeLineMark = action(
     const shared = {
       rows: dataset.values, layer, config, existingChildren,
       resolvedScales: resolved.resolvedScales,
-      bounds: resolveGraphicBounds(resolved),
+      bounds: resolveCoordinateBounds(resolved, layer.coordinate),
       defaults: { stroke: DEFAULT_LINE_STROKE, strokeWidth: DEFAULT_LINE_WIDTH }
     };
     if (parallel !== undefined) {
       return applyLineMaterialization(resolved, id,
-        resolveParallelLineMaterialization({ ...shared, parallel }));
+        resolveParallelLineMaterialization({ ...shared, parallel }), config);
     }
 
     const materialization = resolvePositionedLineMaterialization({
@@ -240,13 +253,17 @@ const rematerializeLineMark = action(
             layer,
             requireSemanticScale(resolved, xScaleId)
           ).boundaries,
-      polar
+      polar,
+      ...(polar
+        ? { polarFrame: resolveCoordinatePolarFrame(resolved, layer.coordinate) }
+        : {})
     });
 
     return applyLineMaterialization(
       resolved,
       id,
-      materialization
+      materialization,
+      config
     );
   }
 );
@@ -258,6 +275,7 @@ const editLineMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editLineMark");
+    const strokeDetails = requestedStrokeDetails(args, "editLineMark");
     if (!EDIT_OPTIONS.slice(1).some(key => Object.hasOwn(args, key))) {
       throw new Error("editLineMark requires stroke, strokeWidth, opacity, curve, or closed.");
     }
@@ -269,9 +287,12 @@ const editLineMark = action(
       predicate: candidate => candidate.mark?.type === "line",
       label: "line mark"
     });
-    if (Object.hasOwn(args, "stroke") && layer.encoding?.color !== undefined) {
+    if (Object.hasOwn(args, "stroke") && (
+      layer.encoding?.color !== undefined ||
+      layer.encoding?.stroke !== undefined
+    )) {
       throw new Error(
-        "editLineMark stroke cannot be combined with a color encoding."
+        "editLineMark stroke cannot be combined with a color encoding or a stroke encoding; use encodeStroke with value to replace it."
       );
     }
     for (const channel of ["strokeWidth", "opacity"]) {
@@ -284,6 +305,7 @@ const editLineMark = action(
       throw new Error("Line closed requires theta/radius Polar position encodings.");
     }
     const config = { ...this.markConfigs[layer.id] };
+    Object.assign(config, strokeDetails);
     for (const [key, validate] of Object.entries({
       stroke: validateNonEmptyString,
       strokeWidth: validateNonNegativeFinite,
@@ -295,9 +317,10 @@ const editLineMark = action(
     }
     validatePolarLineConfig(layer, config);
     const next = this._withMarkConfig(layer.id, config);
-    return canMaterializeLine(next, layer)
+    const materialized = canMaterializeLine(next, layer)
       ? next.rematerializeLineMark({ id: layer.id })
       : next;
+    return rematerializeExistingLegend(materialized);
   }
 );
 

package/src/actions/marks/line/materialize.js

@@ -27,7 +27,11 @@ function appearanceMapper(layer, scales, fieldValues) {
       return fallback.map(() => normalizeStrokeDashPattern(encoding.datum));
     }
     if (encoding?.scale === undefined) return fallback;
-    return mapScaleConsumerValues(fieldValues(encoding.field, channel), scales[encoding.scale], channel);
+    return mapScaleConsumerValues(
+      fieldValues(encoding.field, channel, encoding),
+      scales[encoding.scale],
+      channel
+    );
   };
 }
 
@@ -53,11 +57,15 @@ export function resolveParallelLineMaterialization({
     field => sourceRows.map(row => row[field]));
   return {
     commands: items.map(item => item.commands),
-    strokes: mapAppearance(
-      "color",
-      items.map((_, index) => config.stroke ??
-        existingValue(existingChildren, index, "stroke", defaults.stroke))
-    ),
+    strokes: layer.encoding?.stroke?.scale !== undefined
+      ? mapAppearance("stroke", items.map(() => defaults.stroke))
+      : config.stroke !== undefined
+        ? items.map(() => config.stroke)
+        : mapAppearance(
+            "color",
+            items.map((_, index) =>
+              existingValue(existingChildren, index, "stroke", defaults.stroke))
+          ),
     strokeWidths: mapAppearance(
       "strokeWidth",
       items.map((_, index) => config.strokeWidth ??
@@ -80,6 +88,7 @@ export function resolvePositionedLineMaterialization({
   config,
   existingChildren,
   polar,
+  polarFrame,
   defaults
 }) {
   const xScaleId = layer.encoding?.x?.scale;
@@ -98,7 +107,7 @@ export function resolvePositionedLineMaterialization({
         thetaFieldType: derived.thetaFieldType,
         thetaScale: resolvedScales[thetaScaleId],
         radiusScale: resolvedScales[radiusScaleId],
-        frame: resolvePolarFrame(bounds),
+        frame: polarFrame ?? resolvePolarFrame(bounds),
         closed: config.closed ?? false
       }))
     : derived.series.map(series => {
@@ -116,11 +125,21 @@ export function resolvePositionedLineMaterialization({
         );
       });
   const appearance = appearanceMapper(layer, resolvedScales,
-    (field, channel) => derivePathSeriesFieldValues(rows, derived.series, field, channel));
+    (field, channel, encoding) => derivePathSeriesFieldValues(
+      rows,
+      derived.series,
+      field,
+      channel,
+      encoding
+    ));
   return {
     commands,
-    strokes: appearance("color", commands.map((_, index) => config.stroke ??
-      existingValue(existingChildren, index, "stroke", defaults.stroke))),
+    strokes: layer.encoding?.stroke?.scale !== undefined
+      ? appearance("stroke", commands.map(() => defaults.stroke))
+      : config.stroke !== undefined
+        ? commands.map(() => config.stroke)
+        : appearance("color", commands.map((_, index) =>
+            existingValue(existingChildren, index, "stroke", defaults.stroke))),
     strokeWidths: appearance("strokeWidth", commands.map((_, index) => config.strokeWidth ??
       existingValue(existingChildren, index, "strokeWidth", defaults.strokeWidth))),
     strokeDashes: appearance("strokeDash", commands.map((_, index) =>

package/src/actions/marks/point/create.js

@@ -1,6 +1,10 @@
 import { action } from "../../../core/action.js";
 import { validatePointShape } from "../../../grammar/pointShapes.js";
 import { getPointGraphicType } from "../../../grammar/schemas/mark.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../grammar/strokeStyle.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import {
@@ -14,7 +18,8 @@ import {
 } from "../shared.js";
 
 const OPTIONS = Object.freeze([
-  "id", "data", "shape", "fill", "opacity", "stroke", "strokeWidth"
+  "id", "data", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 
 export const createPointMark = action(
@@ -24,6 +29,7 @@ export const createPointMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, OPTIONS, "createPointMark");
+    requestedStrokeDetails(args, "createPointMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "point",
       label: "Point mark id",
@@ -65,7 +71,7 @@ export const createPointMark = action(
       ._withMarkConfig(id, { shape });
     const created = materializeInheritedMark(next, id);
     const appearance = Object.fromEntries(
-      ["fill", "opacity", "stroke", "strokeWidth"]
+      ["fill", "opacity", "stroke", "strokeWidth", ...STROKE_STYLE_PROPERTIES]
         .filter(property => Object.hasOwn(args, property))
         .map(property => [property, args[property]])
     );

package/src/actions/marks/point/edit.js

@@ -6,12 +6,17 @@ import {
   validateUnitInterval
 } from "../../../core/validation.js";
 import { validatePointShape } from "../../../grammar/pointShapes.js";
+import {
+  requestedStrokeDetails,
+  STROKE_STYLE_PROPERTIES
+} from "../../../grammar/strokeStyle.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { validateMarkOptions } from "../shared.js";
 
 const OPTIONS = Object.freeze([
-  "target", "shape", "fill", "opacity", "stroke", "strokeWidth"
+  "target", "shape", "fill", "opacity", "stroke", "strokeWidth",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 
 export const editPointMark = action(
@@ -21,7 +26,11 @@ export const editPointMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, OPTIONS, "editPointMark");
-    const editable = ["shape", "fill", "opacity", "stroke", "strokeWidth"];
+    const strokeDetails = requestedStrokeDetails(args, "editPointMark");
+    const editable = [
+      "shape", "fill", "opacity", "stroke", "strokeWidth",
+      ...STROKE_STYLE_PROPERTIES
+    ];
     if (!editable.some(property => Object.hasOwn(args, property))) {
       throw new Error(
         "editPointMark requires shape, fill, opacity, stroke, or strokeWidth."
@@ -44,10 +53,16 @@ export const editPointMark = action(
         "editPointMark fill cannot be combined with a color encoding."
       );
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editPointMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     if (Object.hasOwn(args, "opacity") && layer.encoding?.opacity?.field !== undefined) {
       throw new Error("editPointMark opacity conflicts with a field encoding; use encodeOpacity with value to replace it.");
     }
     const config = { ...this.markConfigs[id] };
+    Object.assign(config, strokeDetails);
     if (Object.hasOwn(args, "shape")) {
       config.shape = validatePointShape(args.shape);
     }
@@ -85,9 +100,6 @@ export const editPointMark = action(
     const next = this
       ._withMarkConfig(id, config)
       .rematerializePointMark({ id });
-    const legend = next.guideConfigs.legend?.series;
-    return legend?.target === id && legend.channels.includes("shape")
-      ? rematerializeExistingLegend(next)
-      : next;
+    return rematerializeExistingLegend(next);
   }
 );

package/src/actions/marks/point/materialize.js

@@ -15,9 +15,12 @@ import {
   normalizePointPackingPolicy,
   resolvePointPacking
 } from "../../../grammar/pointPacking.js";
-import { polarToCartesian, resolvePolarFrame } from "../../../grammar/polar.js";
+import { polarToCartesian } from "../../../grammar/polar.js";
 import { resolveDirectionValues } from "../../../grammar/direction.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import {
+  resolveCoordinateBounds,
+  resolveCoordinatePolarFrame
+} from "../../../materialization/coordinateBounds.js";
 import { validateMarkOptions } from "../shared.js";
 import {
   DEFAULT_COLORS,
@@ -34,6 +37,8 @@ import {
   "../../../materialization/rowEncoding.js";
 import { offsetCategoryPositions } from
   "../../../materialization/categorySlotOffset.js";
+import { requestedStrokeDetails } from
+  "../../../grammar/strokeStyle.js";
 
 const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
 const DEFAULT_POINT_FILL = DEFAULT_COLORS.mark;
@@ -52,7 +57,7 @@ function resolvePointPositions(program, layer, dataset) {
   if (theta === undefined || radius === undefined) {
     return { x: undefined, y: undefined };
   }
-  const frame = resolvePolarFrame(resolveGraphicBounds(program));
+  const frame = resolveCoordinatePolarFrame(program, layer.coordinate);
   const positions = theta.map((angle, index) => {
     const distance = radius[index];
     return Number.isFinite(angle) && Number.isFinite(distance)
@@ -76,7 +81,11 @@ function incompleteShapeGraphic(shape, properties, angle) {
     ? "path"
     : getPointGraphicType(shape);
   const incomplete = type === "path"
-    ? { fill: properties.fill, opacity: properties.opacity }
+    ? {
+        fill: properties.fill,
+        opacity: properties.opacity,
+        ...requestedStrokeDetails(properties, "Point mark")
+      }
     : properties;
   return { type, properties: compactProperties(incomplete) };
 }
@@ -180,7 +189,7 @@ function applyPointJitter(program, {
       `Point jitter on "${id}" requires a resolved ${policy.channel} scale.`
     );
   }
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const entries = resolveJitterEntries({
     policy,
     dataset,
@@ -270,7 +279,7 @@ function applyPointPacking(program, {
       fixedHalfExtent: extent[policy.channel === "x" ? "y" : "x"]
     }];
   });
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const resolution = resolvePointPacking({
     target: id,
     policy,
@@ -338,6 +347,7 @@ export const rematerializePointMark = action(
 
     const positions = resolvePointPositions(resolved, layer, dataset);
     const mappedFill = resolveRowEncodingValues(resolved, layer, dataset, "color");
+    const mappedStroke = resolveRowEncodingValues(resolved, layer, dataset, "stroke");
     const area = resolveRowEncodingValues(resolved, layer, dataset, "size");
     const encodedShape = resolveRowEncodingValues(resolved, layer, dataset, "shape");
     const encodedOpacity = resolveRowEncodingValues(
@@ -348,6 +358,7 @@ export const rematerializePointMark = action(
     );
     const angles = resolveDirectionValues(dataset.values, layer.encoding?.angle);
     const config = resolved.markConfigs[id] ?? {};
+    const strokeDetails = requestedStrokeDetails(config, "Point mark");
     const fill = mappedFill ?? config.fill ?? DEFAULT_POINT_FILL;
     const shapes = encodedShape ?? dataset.values.map(() => config.shape ?? "circle");
     const existingChildren = graphic.items ?? [];
@@ -417,7 +428,8 @@ export const rematerializePointMark = action(
             x: centerX,
             y: centerY,
             fill: color,
-            opacity
+            opacity,
+            ...strokeDetails
           }, angle);
         }
         return createPointShapeGraphic({
@@ -426,12 +438,15 @@ export const rematerializePointMark = action(
           y: centerY,
           area: resolvedArea,
           fill: color,
-          ...(typeof config.stroke === "string" ? { stroke: config.stroke } : {}),
-          ...(config.strokeWidth === undefined
-            ? {}
-            : { strokeWidth: config.strokeWidth }),
+          ...(typeof (mappedStroke?.[index] ?? config.stroke) === "string"
+            ? { stroke: mappedStroke?.[index] ?? config.stroke }
+            : {}),
+          ...((mappedStroke !== undefined || config.strokeWidth !== undefined)
+            ? { strokeWidth: config.strokeWidth ?? 1 }
+            : {}),
           opacity,
-          angle
+          angle,
+          ...strokeDetails
         });
       });
       return jittered.program.editGraphics({
@@ -503,15 +518,31 @@ export const rematerializePointMark = action(
       next = next
         .editGraphics({ target: id, property: "width", value: sides })
         .editGraphics({ target: id, property: "height", value: sides })
-        .editGraphics({ target: id, property: "stroke", value: fill ?? DEFAULT_POINT_FILL })
-        .editGraphics({ target: id, property: "strokeWidth", value: 0 });
+        .editGraphics({
+          target: id,
+          property: "stroke",
+          value: mappedStroke ?? fill ?? DEFAULT_POINT_FILL
+        })
+        .editGraphics({
+          target: id,
+          property: "strokeWidth",
+          value: mappedStroke === undefined ? 0 : config.strokeWidth ?? 1
+        });
     }
     if (config.opacity !== undefined) {
       next = next.editGraphics({ target: id, property: "opacity", value: config.opacity });
     } else if (encodedOpacity !== undefined) {
       next = next.editGraphics({ target: id, property: "opacity", value: encodedOpacity });
     }
-    if (config.stroke === false) {
+    if (mappedStroke !== undefined) {
+      next = next
+        .editGraphics({ target: id, property: "stroke", value: mappedStroke })
+        .editGraphics({
+          target: id,
+          property: "strokeWidth",
+          value: config.strokeWidth ?? 1
+        });
+    } else if (config.stroke === false) {
       next = next
         .editGraphics({ target: id, property: "stroke", value: "transparent" })
         .editGraphics({ target: id, property: "strokeWidth", value: 0 });
@@ -523,6 +554,9 @@ export const rematerializePointMark = action(
         value: config.strokeWidth
       });
     }
+    for (const [property, value] of Object.entries(strokeDetails)) {
+      next = next.editGraphics({ target: id, property, value });
+    }
     return next;
   }
 );

package/src/actions/marks/rect/actions.js

@@ -19,12 +19,20 @@ import {
   resolveMarkId,
   validateMarkOptions
 } from "../shared.js";
+import { replaceGraphicItems } from "../../primitives/editGraphics.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import {
+  requestedRectStyleDetails
+} from "../../../grammar/roundedRect.js";
+import { STROKE_STYLE_PROPERTIES } from
+  "../../../grammar/strokeStyle.js";
 
 const STYLE_OPTIONS = Object.freeze([
-  "fill", "opacity", "stroke", "strokeWidth"
+  "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 const CREATE_OPTIONS = Object.freeze(["id", "data", ...STYLE_OPTIONS]);
 const EDIT_OPTIONS = Object.freeze(["target", ...STYLE_OPTIONS]);
@@ -45,6 +53,7 @@ const createRectMark = action(
   { op: "createRectMark", description: "Create a semantic rectangular cell layer." },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createRectMark");
+    requestedRectStyleDetails(args, "createRectMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "rect",
       label: "Rect mark id",
@@ -99,7 +108,13 @@ const rematerializeRectMark = action(
     const layer = findLayer(this, id);
     const graphic = this.graphicSpec.objects[id];
     if (layer?.mark?.type !== "rect") throw new Error(`Unknown rect mark "${id}".`);
-    if (graphic?.type !== "rect" || !Array.isArray(graphic.items)) {
+    const roundedCollection = graphic?.type === "collection" &&
+      Object.hasOwn(this.markConfigs[id] ?? {}, "cornerRadius") &&
+      graphic.items?.every(item => ["rect", "path"].includes(item.type));
+    if (
+      (graphic?.type !== "rect" && !roundedCollection) ||
+      !Array.isArray(graphic.items)
+    ) {
       throw new Error(`Rect mark "${id}" requires rect collection graphics.`);
     }
     if (this.markConfigs[id]?.gradientPlot?.materialized === true) {
@@ -110,13 +125,11 @@ const rematerializeRectMark = action(
       throw new Error(`Rect mark "${id}" requires an existing dataset.`);
     }
     if (!canMaterializeRect(this, layer)) {
-      return graphic.items.length === 0
-        ? this
-        : this.editGraphics({ target: id, property: "items", value: [] });
+      return replaceGraphicItems(this, id, "rect", []);
     }
     let next = this;
     if (args.scales !== false) {
-      const ids = new Set(["x", "y", "x2", "y2", "color"].flatMap(channel => {
+      const ids = new Set(["x", "y", "x2", "y2", "color", "stroke"].flatMap(channel => {
         const scale = layer.encoding?.[channel]?.scale;
         return scale === undefined ? [] : [scale];
       }));
@@ -124,11 +137,12 @@ const rematerializeRectMark = action(
         next = next.rematerializeScale({ id: scale, marks: false });
       }
     }
-    return next.editGraphics({
-      target: id,
-      property: "items",
-      value: resolveRectGraphicItems(next, layer, dataset)
-    });
+    return replaceGraphicItems(
+      next,
+      id,
+      "rect",
+      resolveRectGraphicItems(next, layer, dataset)
+    );
   }
 );
 
@@ -136,6 +150,7 @@ const editRectMark = action(
   { op: "editRectMark", description: "Edit rectangular cell appearance." },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editRectMark");
+    requestedRectStyleDetails(args, "editRectMark");
     if (!STYLE_OPTIONS.some(option => Object.hasOwn(args, option))) {
       throw new Error("editRectMark requires at least one editable property.");
     }
@@ -143,6 +158,11 @@ const editRectMark = action(
     if (Object.hasOwn(args, "fill") && layer.encoding?.color !== undefined) {
       throw new Error("editRectMark fill cannot be combined with a color encoding.");
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editRectMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     const next = this._withMarkConfig(
       layer.id,
       {
@@ -155,9 +175,10 @@ const editRectMark = action(
           : this.markConfigs[layer.id]?.fillExplicit ?? false
       }
     );
-    return canMaterializeRect(next, layer)
+    const materialized = canMaterializeRect(next, layer)
       ? next.rematerializeRectMark({ id: layer.id })
       : next;
+    return rematerializeExistingLegend(materialized);
   }
 );