ggaction 0.0.4 → 0.0.5

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

@@ -5,6 +5,9 @@ import { normalizeOptions } from "./options.js";
 import { findLayer } from "../../../../selectors/layers.js";
 import { findSemanticScale } from "../../../../selectors/scales.js";
 import { isSizeLegendPoint } from "../size.js";
+import { isStrokeWidthLegendLayer } from "../strokeWidth.js";
+import { legendResourcePolicies } from
+  "../../../../materialization/guides/resources.js";
 import {
   resolveCurrentDefinition,
   resolveDefinition,
@@ -80,17 +83,13 @@ export const rematerializeLegend = action(
       ).some(highlight => highlight.target === config.target);
       if (hasHighlight) next = next.rematerializeLegendHighlights();
     }
-    if (this.guideConfigs.legend?.size !== undefined) {
-      next = next.rematerializeSizeLegend();
-    }
-    if (this.guideConfigs.legend?.gradient !== undefined) {
-      next = next.rematerializeGradientLegend();
-    }
-    if (this.guideConfigs.legend?.interval !== undefined) {
-      next = next.rematerializeIntervalLegend();
-    }
-    if (this.guideConfigs.legend?.opacity !== undefined) {
-      next = next.rematerializeOpacityLegend();
+    for (const policy of legendResourcePolicies()) {
+      if (
+        policy.rematerializeOp !== undefined &&
+        this.guideConfigs.legend?.[policy.kind] !== undefined
+      ) {
+        next = next[policy.rematerializeOp]();
+      }
     }
     return next;
   }
@@ -177,6 +176,8 @@ export const createLegend = action(
       throw new TypeError("createLegend channels must be an array.");
     }
     const explicitSize = channels?.length === 1 && channels[0] === "size";
+    const explicitStrokeWidth = channels?.length === 1 &&
+      channels[0] === "strokeWidth";
     const requestedSizeLayer = args.target === undefined
       ? undefined
       : findLayer(this, args.target);
@@ -216,6 +217,42 @@ export const createLegend = action(
         ...(count === undefined ? {} : { count })
       });
     }
+    const strokeWidthCandidates = this.semanticSpec.layers.filter(
+      isStrokeWidthLegendLayer
+    );
+    const requestedStrokeWidthLayer = args.target === undefined
+      ? undefined
+      : findLayer(this, args.target);
+    const hasOtherStrokeWidthLegendCandidate = this.semanticSpec.layers.some(
+      layer => ["color", "shape", "strokeDash", "size", "opacity"].some(
+        channel => layer.encoding?.[channel]?.scale !== undefined
+      )
+    );
+    const inferredStrokeWidth = channels === undefined && (
+      (args.target !== undefined &&
+        isStrokeWidthLegendLayer(requestedStrokeWidthLayer) &&
+        !hasNonSizeLegendEncoding(requestedStrokeWidthLayer)) ||
+      (args.target === undefined && strokeWidthCandidates.length === 1 &&
+        !hasOtherStrokeWidthLegendCandidate)
+    );
+    if (explicitStrokeWidth || inferredStrokeWidth) {
+      const { target, count, position, channels: _channels, ...unsupported } = args;
+      const unsupportedKeys = Object.keys(unsupported);
+      if (unsupportedKeys.length > 0) {
+        throw new Error(
+          `Standalone stroke-width legend does not support option "${unsupportedKeys[0]}".`
+        );
+      }
+      if (position !== undefined && position !== "right") {
+        throw new Error(
+          'Standalone stroke-width legends currently require position "right".'
+        );
+      }
+      return this.createStrokeWidthLegend({
+        ...(target === undefined ? {} : { target }),
+        ...(count === undefined ? {} : { count })
+      });
+    }
     const opacityCandidates = this.semanticSpec.layers.filter(layer =>
       layer.mark?.type === "point" && layer.encoding?.opacity?.scale !== undefined
     );

package/src/actions/guides/legends/edit.js

@@ -284,6 +284,11 @@ export const editLegend = action(
     if (configs.interval?.target === target) {
       return editInterval(this, configs.interval, args);
     }
+    if (configs.strokeWidth?.target === target) {
+      throw new Error(
+        "editLegend does not yet support stroke-width legends; edit the owning scale instead."
+      );
+    }
     const continuousKind = ["gradient", "opacity"].find(
       kind => configs[kind]?.target === target
     );

package/src/actions/guides/legends/index.js

@@ -1,6 +1,7 @@
 import { registerCategoricalLegendActions } from "./categorical/index.js";
 import { registerContinuousLegendActions } from "./continuous/index.js";
 import { registerSizeLegendActions } from "./size.js";
+import { registerStrokeWidthLegendActions } from "./strokeWidth.js";
 import { registerFocusedLegendActions } from "./focused.js";
 import { removeLegend } from "./remove.js";
 
@@ -8,6 +9,7 @@ export function registerLegendActions(ProgramClass) {
   registerCategoricalLegendActions(ProgramClass);
   registerContinuousLegendActions(ProgramClass);
   registerSizeLegendActions(ProgramClass);
+  registerStrokeWidthLegendActions(ProgramClass);
   registerFocusedLegendActions(ProgramClass);
   ProgramClass.prototype.removeLegend = removeLegend;
 }

package/src/actions/guides/legends/remove.js

@@ -1,20 +1,11 @@
 import { action } from "../../../core/action.js";
 import { validateKeys } from "../../../core/validation.js";
-import { legendGraphicIds } from
+import { legendGraphicIds, legendResourcePolicy } from
   "../../../materialization/guides/resources.js";
 import { resolveLegendTarget } from "./target.js";
 
 const OPTIONS = Object.freeze(["target"]);
 
-const SEMANTIC_KIND = Object.freeze({
-  series: "series",
-  color: "color",
-  size: "size",
-  gradient: "color",
-  interval: "color",
-  opacity: "opacity"
-});
-
 export const removeLegend = action(
   { op: "removeLegend", description: "Remove every legend block owned by one mark." },
   function (args = {}) {
@@ -23,7 +14,9 @@ export const removeLegend = action(
     const kinds = Object.entries(this.guideConfigs.legend ?? {})
       .filter(([, config]) => config?.target === target)
       .map(([kind]) => kind);
-    const semanticKinds = new Set(kinds.map(kind => SEMANTIC_KIND[kind]));
+    const semanticKinds = new Set(
+      kinds.map(kind => legendResourcePolicy(kind).semanticKind)
+    );
     let next = this;
     for (const kind of semanticKinds) {
       if (next.semanticSpec.guides.legend?.[kind] !== undefined) {

package/src/actions/guides/legends/strokeWidth.js

@@ -0,0 +1,170 @@
+import { action } from "../../../core/action.js";
+import { validateKeys } from "../../../core/validation.js";
+import { mapContinuousScaleValues } from "../../../grammar/scales/index.js";
+import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import { resolveLegendGraphicPlacement } from
+  "../../../materialization/graphicHierarchy.js";
+import { findLayer } from "../../../selectors/layers.js";
+import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+  "../../../theme/defaults.js";
+
+const OPTIONS = Object.freeze(["target", "count"]);
+
+export function isStrokeWidthLegendLayer(layer) {
+  return ["line", "rule"].includes(layer?.mark?.type) &&
+    layer.encoding?.strokeWidth?.scale !== undefined;
+}
+
+function resolveLayer(program, requested) {
+  const candidates = program.semanticSpec.layers.filter(isStrokeWidthLegendLayer);
+  const layer = requested === undefined
+    ? candidates.length === 1 ? candidates[0] : undefined
+    : (() => {
+        const candidate = findLayer(program, requested);
+        return candidates.includes(candidate) ? candidate : undefined;
+      })();
+  if (layer === undefined) {
+    throw new Error(
+      requested === undefined
+        ? "Stroke-width legend requires one eligible line or rule mark or an explicit target."
+        : `Unknown stroke-width legend target "${requested}".`
+    );
+  }
+  return layer;
+}
+
+function requireScale(program, id) {
+  const scale = program.resolvedScales[id];
+  if (scale === undefined || !["linear", "log", "pow", "sqrt", "symlog"].includes(scale.type)) {
+    throw new Error(`Stroke-width legend requires resolved quantitative scale "${id}".`);
+  }
+  return scale;
+}
+
+function styleText(program, id, { title = false } = {}) {
+  return program
+    .editGraphics({ target: id, property: "fill", value: title
+      ? DEFAULT_COLORS.strongText
+      : DEFAULT_COLORS.text })
+    .editGraphics({ target: id, property: "fontSize", value: title ? 13 : 12 })
+    .editGraphics({ target: id, property: "fontFamily", value: DEFAULT_FONT_FAMILY })
+    .editGraphics({ target: id, property: "fontWeight", value: title ? 600 : "normal" })
+    .editGraphics({ target: id, property: "textAlign", value: "left" })
+    .editGraphics({ target: id, property: "textBaseline", value: "middle" });
+}
+
+export const rematerializeStrokeWidthLegend = action(
+  {
+    op: "rematerializeStrokeWidthLegend",
+    description: "Rematerialize a quantitative stroke-width legend."
+  },
+  function (args = {}) {
+    validateKeys(args, [], "rematerializeStrokeWidthLegend");
+    const config = this.guideConfigs.legend?.strokeWidth;
+    if (config === undefined) {
+      throw new Error("Stroke-width legend requires stored configuration.");
+    }
+    const layer = findLayer(this, config.target);
+    const encoding = layer?.encoding?.strokeWidth;
+    if (encoding?.scale === undefined) {
+      throw new Error("Stroke-width legend target requires a strokeWidth encoding.");
+    }
+    const scale = requireScale(this, encoding.scale);
+    const plot = resolveGraphicBounds(this);
+    if (plot === undefined) {
+      throw new Error("Stroke-width legend requires resolved plot bounds.");
+    }
+    const values = Array.from(
+      { length: config.count },
+      (_, index) => scale.domain[0] +
+        index / (config.count - 1) * (scale.domain[1] - scale.domain[0])
+    );
+    const widths = mapContinuousScaleValues(values, scale);
+    const originX = plot.x + plot.width + 30;
+    const titleY = plot.y + 28;
+    const y = values.map((_, index) => titleY + 34 + index * 32);
+    const title = config.inferredTitle === true ? encoding.field : config.title;
+    let next = this
+      .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
+      .editSemantic({ property: "guide.legend.strokeWidth.title", value: title })
+      ._withLegendConfig("strokeWidth", {
+        ...config,
+        scale: encoding.scale,
+        title,
+        domain: scale.domain
+      })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "length", value: values.length })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "x1", value: values.map(() => originX) })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "x2", value: values.map(() => originX + 32) })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "y1", value: y })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "y2", value: y })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "stroke", value: DEFAULT_COLORS.mark })
+      .editGraphics({ target: "strokeWidthLegendSymbols", property: "strokeWidth", value: widths })
+      .editGraphics({ target: "strokeWidthLegendLabels", property: "length", value: values.length })
+      .editGraphics({ target: "strokeWidthLegendLabels", property: "x", value: values.map(() => originX + 44) })
+      .editGraphics({ target: "strokeWidthLegendLabels", property: "y", value: y })
+      .editGraphics({
+        target: "strokeWidthLegendLabels",
+        property: "text",
+        value: values.map(value => String(+value.toPrecision(3)))
+      })
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "x", value: originX })
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "y", value: titleY })
+      .editGraphics({ target: "strokeWidthLegendTitle", property: "text", value: title });
+    next = styleText(next, "strokeWidthLegendLabels");
+    return styleText(next, "strokeWidthLegendTitle", { title: true });
+  }
+);
+
+export const createStrokeWidthLegend = action(
+  {
+    op: "createStrokeWidthLegend",
+    description: "Create a quantitative stroke-width legend."
+  },
+  function (args = {}) {
+    validateKeys(args, OPTIONS, "createStrokeWidthLegend");
+    const layer = resolveLayer(this, args.target);
+    const encoding = layer.encoding.strokeWidth;
+    requireScale(this, encoding.scale);
+    const count = args.count ?? 5;
+    if (!Number.isInteger(count) || count < 2) {
+      throw new RangeError(
+        "Stroke-width legend count must be an integer of at least 2."
+      );
+    }
+    return this
+      .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
+      .editSemantic({ property: "guide.legend.strokeWidth.title", value: encoding.field })
+      ._withLegendConfig("strokeWidth", {
+        target: layer.id,
+        scale: encoding.scale,
+        title: encoding.field,
+        inferredTitle: true,
+        count
+      })
+      .createGraphics({
+        id: "strokeWidthLegendSymbols",
+        type: "line",
+        length: count,
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .createGraphics({
+        id: "strokeWidthLegendLabels",
+        type: "text",
+        length: count,
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .createGraphics({
+        id: "strokeWidthLegendTitle",
+        type: "text",
+        ...resolveLegendGraphicPlacement(this)
+      })
+      .rematerializeStrokeWidthLegend();
+  }
+);
+
+export function registerStrokeWidthLegendActions(ProgramClass) {
+  ProgramClass.prototype.createStrokeWidthLegend = createStrokeWidthLegend;
+  ProgramClass.prototype.rematerializeStrokeWidthLegend =
+    rematerializeStrokeWidthLegend;
+}

package/src/actions/index.js

@@ -1,4 +1,5 @@
 import { registerCanvasActions } from "./canvas/index.js";
+import { registerChartActions } from "./charts/index.js";
 import { registerCoordinateActions } from "./coordinates/index.js";
 import { registerCompositionActions } from "./composition/index.js";
 import { registerDataActions } from "./data/index.js";
@@ -8,12 +9,14 @@ import { registerErrorBarActions } from "./errorBars/index.js";
 import { registerFacetActions } from "./facets/index.js";
 import { registerBoxPlotActions } from "./boxPlots/index.js";
 import { registerGuideActions } from "./guides/index.js";
+import { registerGradientPlotActions } from "./gradientPlots/index.js";
 import { registerMarkActions } from "./marks/index.js";
 import { registerPrimitiveActions } from "./primitives/index.js";
 import { registerRegressionActions } from "./regression/index.js";
 import { registerScaleActions } from "./scales/index.js";
 import { registerTitleActions } from "./titles/index.js";
 import { registerSelectionActions } from "./selection/index.js";
+import { registerViolinPlotActions } from "./violinPlots/index.js";
 
 export function registerActions(ProgramClass) {
   registerPrimitiveActions(ProgramClass);
@@ -31,5 +34,8 @@ export function registerActions(ProgramClass) {
   registerErrorBarActions(ProgramClass);
   registerErrorBandActions(ProgramClass);
   registerBoxPlotActions(ProgramClass);
+  registerGradientPlotActions(ProgramClass);
+  registerViolinPlotActions(ProgramClass);
+  registerChartActions(ProgramClass);
   registerSelectionActions(ProgramClass);
 }

package/src/actions/marks/area/actions.js

@@ -5,12 +5,6 @@ import {
   validateNonNegativeFinite,
   validateUnitInterval
 } from "../../../core/validation.js";
-import {
-  deriveAreaSeries,
-  deriveDensityAreaSeries,
-  layoutDensityAreaSeries
-} from "../../../grammar/areaSeries.js";
-import { mapContinuousScaleValues, mapOrdinalValues } from "../../../grammar/scales/index.js";
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
@@ -23,17 +17,14 @@ import {
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import { findDataset } from "../../../selectors/datasets.js";
 import { findLayer } from "../../../selectors/layers.js";
-import {
-  buildAreaCurvePathCommands,
-  validateCurveInterpolation
-} from "../../../grammar/curveCommands.js";
-import { buildLinearPathCommands } from "../../../grammar/pathCommands.js";
+import { validateCurveInterpolation } from "../../../grammar/curveCommands.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { canMaterializeArea } from "../../../materialization/marks/index.js";
 import { findUpstreamTransform } from "../../../materialization/dataProvenance.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import { resolveAreaMaterialization } from "./materialize.js";
 
 const CREATE_OPTIONS = Object.freeze([
   "id", "data", "fill", "opacity", "stroke", "strokeWidth", "curve"
@@ -42,6 +33,7 @@ const EDIT_OPTIONS = Object.freeze([
   "target", "fill", "opacity", "stroke", "strokeWidth", "curve"
 ]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
+const STROKE_FROM_FILL_OPTIONS = Object.freeze(["id", "strokeWidth"]);
 
 export function validateAreaCreateOutline(args, operation = "createAreaMark") {
   if (Object.hasOwn(args, "strokeWidth") && !Object.hasOwn(args, "stroke")) {
@@ -103,6 +95,35 @@ const createAreaMark = action(
   }
 );
 
+const configureAreaStrokeFromFill = action(
+  {
+    op: "configureAreaStrokeFromFill",
+    description: "Use each area path fill as its outline color."
+  },
+  function (args = {}) {
+    validateMarkOptions(
+      args,
+      STROKE_FROM_FILL_OPTIONS,
+      "configureAreaStrokeFromFill"
+    );
+    const id = validateUserId(args.id, "Area mark id");
+    const layer = findLayer(this, id);
+    if (layer?.mark?.type !== "area") {
+      throw new Error(`Unknown area mark "${id}".`);
+    }
+    const { stroke: _stroke, ...config } = this.markConfigs[id] ?? {};
+    void _stroke;
+    return this._withMarkConfig(id, {
+      ...config,
+      strokeFromFill: true,
+      strokeWidth: validateNonNegativeFinite(
+        args.strokeWidth ?? 1,
+        "Area strokeWidth"
+      )
+    });
+  }
+);
+
 const rematerializeAreaMark = action(
   {
     op: "rematerializeAreaMark",
@@ -149,14 +170,7 @@ const rematerializeAreaMark = action(
           : `Density area mark "${id}" requires x and y scales.`
       );
     }
-    const rawDerived = densityTransform === undefined
-      ? deriveAreaSeries(dataset.values, layer)
-      : deriveDensityAreaSeries(dataset.values, layer, densityTransform);
     const colorEncoding = layer.encoding?.color;
-    const layout = colorEncoding?.layout ?? "overlay";
-    const derived = densityTransform === undefined
-      ? rawDerived
-      : layoutDensityAreaSeries(rawDerived, layout);
     let resolved = args.scales === false
       ? this
       : this
@@ -165,122 +179,17 @@ const rematerializeAreaMark = action(
     if (args.scales !== false && colorEncoding?.scale !== undefined) {
       resolved = resolved.rematerializeScale({ id: colorEncoding.scale });
     }
-    const xScale = resolved.resolvedScales[xScaleId];
-    const yScale = resolved.resolvedScales[yScaleId];
-    const densityScale = densityTransform === undefined
-      ? undefined
-      : derived.mode === "y-density" ? yScale : xScale;
-    if (
-      densityScale !== undefined &&
-      (densityScale.domain[0] > 0 || densityScale.domain[1] < 0)
-    ) {
-      throw new Error(`Density area mark "${id}" requires a scale domain containing zero.`);
-    }
-    const paths = derived.series.map(series => {
-      const curve = this.markConfigs[id]?.curve ?? "linear";
-      if (densityTransform === undefined && derived.orientation === "horizontal") {
-        const y = mapContinuousScaleValues(
-          series.values.map(value => value.y),
-          yScale
-        );
-        const lower = mapContinuousScaleValues(
-          series.values.map(value => value.x),
-          xScale
-        );
-        const upper = mapContinuousScaleValues(
-          series.values.map(value => value.x2),
-          xScale
-        );
-        return buildAreaCurvePathCommands(
-          y.map((value, index) => ({ x: lower[index], y: value })),
-          y.map((value, index) => ({ x: upper[index], y: value })),
-          curve,
-          { independentAxis: "y" }
-        );
-      }
-      if (densityTransform !== undefined && derived.mode === "x-density") {
-        const y = mapContinuousScaleValues(
-          series.values.map(value => value.y),
-          yScale
-        );
-        const upper = mapContinuousScaleValues(
-          series.values.map(value => value.x),
-          xScale
-        );
-        const baseline = mapContinuousScaleValues(
-          [0],
-          densityScale
-        )[0];
-        if (curve === "linear") {
-          return buildLinearPathCommands([
-            { x: baseline, y: y[0] },
-            ...y.map((value, index) => ({ x: upper[index], y: value })),
-            { x: baseline, y: y.at(-1) }
-          ], { close: true });
-        }
-        return buildAreaCurvePathCommands(
-          y.map(value => ({ x: baseline, y: value })),
-          y.map((value, index) => ({ x: upper[index], y: value })),
-          curve,
-          { independentAxis: "y" }
-        );
-      }
-      const x = mapContinuousScaleValues(
-        series.values.map(value => value.x),
-        xScale
-      );
-      const lowerValues = densityTransform === undefined
-        ? series.values.map(value => value.y)
-        : derived.mode === "y-density"
-          ? series.values.map(value => value.lower)
-          : series.values.map(value => value.y);
-      const lower = mapContinuousScaleValues(
-        lowerValues,
-        yScale
-      );
-      const upperValues = densityTransform === undefined
-        ? series.values.map(value => value.y2)
-        : series.values.map(value => value.upper);
-      const upper = mapContinuousScaleValues(
-        upperValues,
-        yScale
-      );
-      if (densityTransform !== undefined && layout === "overlay") {
-        const baseline = mapContinuousScaleValues(
-          [0],
-          yScale
-        )[0];
-        if (curve === "linear") {
-          return buildLinearPathCommands([
-            { x: x[0], y: baseline },
-            ...x.map((value, index) => ({ x: value, y: upper[index] })),
-            { x: x.at(-1), y: baseline }
-          ], { close: true });
-        }
-        return buildAreaCurvePathCommands(
-          x.map(value => ({ x: value, y: baseline })),
-          x.map((value, index) => ({ x: value, y: upper[index] })),
-          curve
-        );
-      }
-      return buildAreaCurvePathCommands(
-        x.map((value, index) => ({ x: value, y: lower[index] })),
-        x.map((value, index) => ({ x: value, y: upper[index] })),
-        curve
-      );
-    });
     const config = this.markConfigs[id];
-    const fills = config.errorBand?.fill !== undefined
-      ? paths.map(() => config.errorBand.fill)
-      : colorEncoding?.scale === undefined
-      ? paths.map(() => config.fill)
-      : mapOrdinalValues(
-          derived.series.map(series => series.key[colorEncoding.field]),
-          resolved.resolvedScales[colorEncoding.scale].domain,
-          resolved.resolvedScales[colorEncoding.scale].range
-        );
+    const { paths, fills } = resolveAreaMaterialization({
+      rows: dataset.values,
+      layer,
+      densityTransform,
+      resolvedScales: resolved.resolvedScales,
+      config
+    });
     const existingChildren = resolved.graphicSpec.objects[id].items ?? [];
-    const removesOutline = config.stroke === undefined && existingChildren.some(
+    const hasOutline = config.stroke !== undefined || config.strokeFromFill === true;
+    const removesOutline = !hasOutline && existingChildren.some(
       child => child.properties.stroke !== undefined
     );
     let next = removesOutline
@@ -292,9 +201,13 @@ const rematerializeAreaMark = action(
       .editGraphics({ target: id, property: "commands", value: paths })
       .editGraphics({ target: id, property: "fill", value: fills })
       .editGraphics({ target: id, property: "opacity", value: config.opacity });
-    if (config.stroke !== undefined) {
+    if (hasOutline) {
       next = next
-        .editGraphics({ target: id, property: "stroke", value: config.stroke })
+        .editGraphics({
+          target: id,
+          property: "stroke",
+          value: config.strokeFromFill === true ? fills : config.stroke
+        })
         .editGraphics({
           target: id,
           property: "strokeWidth",
@@ -347,12 +260,21 @@ const editAreaMark = action(
     }
     if (Object.hasOwn(args, "stroke")) {
       if (args.stroke === false) {
-        const { stroke: removedStroke, strokeWidth: removedWidth, ...rest } = config;
+        const {
+          stroke: removedStroke,
+          strokeFromFill: removedStrokeFromFill,
+          strokeWidth: removedWidth,
+          ...rest
+        } = config;
         void removedStroke;
+        void removedStrokeFromFill;
         void removedWidth;
         config = rest;
       } else {
-        const hadStroke = config.stroke !== undefined;
+        const hadStroke = config.stroke !== undefined || config.strokeFromFill === true;
+        const { strokeFromFill: _strokeFromFill, ...withoutFillStroke } = config;
+        void _strokeFromFill;
+        config = withoutFillStroke;
         config.stroke = validateNonEmptyString(args.stroke, "Area stroke");
         config.strokeWidth = Object.hasOwn(args, "strokeWidth")
           ? validateNonNegativeFinite(args.strokeWidth, "Area strokeWidth")
@@ -377,6 +299,8 @@ const editAreaMark = action(
 
 export function registerAreaMarkActions(ProgramClass) {
   ProgramClass.prototype.createAreaMark = createAreaMark;
+  ProgramClass.prototype.configureAreaStrokeFromFill =
+    configureAreaStrokeFromFill;
   ProgramClass.prototype.editAreaMark = editAreaMark;
   ProgramClass.prototype.rematerializeAreaMark = rematerializeAreaMark;
 }