ggaction 0.0.9 → 0.0.11

package/src/actions/guides/legends/continuous/interval.js

@@ -8,9 +8,15 @@ import { formatDiscretizedIntervals } from "../../../../grammar/scales/index.js"
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../../theme/defaults.js";
 import {
-  assertLegendInsideCanvas,
+  assertLegendBoundsInsideCanvas,
+  editGraphicProperties,
+  editLegendBackground,
+  normalizeLegendBorder,
+  normalizeLegendTextOptions,
   resolveContinuousBounds,
   resolveContinuousPoint,
+  resolveLegendBackgroundFromBounds,
+  resolveLegendTextBounds,
   styleContinuousText,
   validateNonNegative,
   validatePositive
@@ -18,27 +24,13 @@ import {
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
 
-const OPTIONS = Object.freeze([
+const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title",
   "symbol", "labels", "titleStyle", "itemGap", "direction", "border"
-]);
-const SYMBOL_OPTIONS = Object.freeze([
+];
+const SYMBOL_OPTIONS = [
   "width", "height", "stroke", "strokeWidth"
-]);
-const TEXT_OPTIONS = Object.freeze([
-  "offset", "color", "fontSize", "fontFamily", "fontWeight"
-]);
-
-function textOptions(value, label, defaults) {
-  if (value !== undefined && !isPlainObject(value)) {
-    throw new TypeError(`${label} must be a plain object.`);
-  }
-  validateKeys(value ?? {}, TEXT_OPTIONS, label);
-  const result = { ...defaults, ...(value ?? {}) };
-  if (result.offset !== undefined) validateNonNegative(result.offset, `${label} offset`);
-  validatePositive(result.fontSize, `${label} fontSize`);
-  return result;
-}
+];
 
 export function normalizeIntervalLegend(args) {
   validateOptionObject(args, OPTIONS, "createLegend");
@@ -55,18 +47,16 @@ export function normalizeIntervalLegend(args) {
   if ((args.direction ?? "vertical") !== "vertical") {
     throw new Error('Interval legends currently support direction "vertical".');
   }
-  if (args.border !== undefined && args.border !== false) {
-    throw new Error("Interval legend border is not implemented yet.");
-  }
   if (args.symbol !== undefined && !isPlainObject(args.symbol)) {
     throw new TypeError("createLegend.symbol must be a plain object.");
   }
-  validateKeys(args.symbol ?? {}, SYMBOL_OPTIONS, "createLegend.symbol");
+  const source = args.symbol ?? {};
+  validateKeys(source, SYMBOL_OPTIONS, "createLegend.symbol");
   const symbol = {
-    width: args.symbol?.width ?? 14,
-    height: args.symbol?.height ?? 12,
-    stroke: args.symbol?.stroke ?? "white",
-    strokeWidth: args.symbol?.strokeWidth ?? 0.5
+    width: source.width ?? 14,
+    height: source.height ?? 12,
+    stroke: source.stroke ?? "white",
+    strokeWidth: source.strokeWidth ?? 0.5
   };
   validatePositive(symbol.width, "Legend symbol width");
   validatePositive(symbol.height, "Legend symbol height");
@@ -86,20 +76,20 @@ export function normalizeIntervalLegend(args) {
     inferredTitle: args.title === undefined,
     titleVisible: true,
     symbol,
-    labels: textOptions(args.labels, "createLegend.labels", {
+    labels: normalizeLegendTextOptions(args.labels, "createLegend.labels", {
       offset: 8,
       color: DEFAULT_COLORS.text,
       fontSize: 12,
       fontFamily: DEFAULT_FONT_FAMILY,
       fontWeight: "normal"
     }),
-    titleStyle: textOptions(args.titleStyle, "createLegend.titleStyle", {
+    titleStyle: normalizeLegendTextOptions(args.titleStyle, "createLegend.titleStyle", {
       color: DEFAULT_COLORS.text,
       fontSize: 13,
       fontFamily: DEFAULT_FONT_FAMILY,
       fontWeight: 600
     }),
-    border: false
+    border: normalizeLegendBorder(args.border)
   };
 }
 
@@ -113,17 +103,12 @@ function resolveIntervalConfig(program, stored) {
   if (!["quantize", "quantile", "threshold"].includes(scale?.type)) {
     throw new Error(`Interval legend requires a resolved discretized scale "${encoding.scale}".`);
   }
-  return {
-    layer,
-    encoding,
-    scale,
-    config: {
+  return { encoding, scale, config: {
       ...stored,
       target: layer.id,
       scale: encoding.scale,
       title: stored.inferredTitle ? encoding.field : stored.title
-    }
-  };
+    } };
 }
 
 function resolveIntervalLayout(program, config, scale) {
@@ -133,14 +118,37 @@ function resolveIntervalLayout(program, config, scale) {
   const itemY = labels.map((_, index) => plot.y + 52 + index * config.itemGap);
   const labelX = symbolX + config.symbol.width + config.labels.offset;
   const title = { x: symbolX, y: plot.y + 20 };
-  assertLegendInsideCanvas([
-    title,
-    ...itemY.flatMap(y => [
-      { x: symbolX, y },
-      { x: labelX, y }
-    ])
-  ], canvas, "Interval legend layout");
-  return { labels, symbolX, labelX, itemY, title };
+  const strokeExtent = config.symbol.strokeWidth / 2;
+  const occupiedBounds = [
+    resolveLegendTextBounds(
+      { ...title, align: "left" },
+      config.title,
+      config.titleStyle
+    ),
+    ...labels.map((label, index) => resolveLegendTextBounds(
+      { x: labelX, y: itemY[index], align: "left" },
+      label,
+      config.labels
+    )),
+    ...itemY.map(y => ({
+      left: symbolX - strokeExtent,
+      right: symbolX + config.symbol.width + strokeExtent,
+      top: y - config.symbol.height / 2 - strokeExtent,
+      bottom: y + config.symbol.height / 2 + strokeExtent
+    }))
+  ];
+  assertLegendBoundsInsideCanvas(
+    occupiedBounds,
+    canvas,
+    "Interval legend layout"
+  );
+  const background = resolveLegendBackgroundFromBounds(
+    occupiedBounds,
+    config.border,
+    canvas,
+    "Interval legend"
+  );
+  return { labels, symbolX, labelX, itemY, title, background };
 }
 
 export const rematerializeIntervalLegend = action(
@@ -156,36 +164,38 @@ export const rematerializeIntervalLegend = action(
     }
     const { encoding, scale, config } = resolveIntervalConfig(this, stored);
     const layout = resolveIntervalLayout(this, config, scale);
-    let next = this
+    let next = editGraphicProperties(this
       .editSemantic({ property: "guide.legend.color.scale", value: encoding.scale })
       .editSemantic({ property: "guide.legend.color.title", value: config.title })
-      ._withLegendConfig("interval", config)
-      .editGraphics({
-        target: "colorLegendSymbols",
-        property: "length",
-        value: scale.range.length
-      })
-      .editGraphics({ target: "colorLegendSymbols", property: "x", value: layout.symbolX })
-      .editGraphics({
-        target: "colorLegendSymbols",
-        property: "y",
-        value: layout.itemY.map(value => value - config.symbol.height / 2)
-      })
-      .editGraphics({ target: "colorLegendSymbols", property: "width", value: config.symbol.width })
-      .editGraphics({ target: "colorLegendSymbols", property: "height", value: config.symbol.height })
-      .editGraphics({ target: "colorLegendSymbols", property: "fill", value: scale.range })
-      .editGraphics({ target: "colorLegendSymbols", property: "stroke", value: config.symbol.stroke })
-      .editGraphics({ target: "colorLegendSymbols", property: "strokeWidth", value: config.symbol.strokeWidth })
-      .editGraphics({ target: "colorLegendLabels", property: "length", value: layout.labels.length })
-      .editGraphics({ target: "colorLegendLabels", property: "x", value: layout.labelX })
-      .editGraphics({ target: "colorLegendLabels", property: "y", value: layout.itemY })
-      .editGraphics({ target: "colorLegendLabels", property: "text", value: layout.labels });
+      ._withLegendConfig("interval", config), "colorLegendSymbols", {
+      length: scale.range.length,
+      x: layout.symbolX,
+      y: layout.itemY.map(value => value - config.symbol.height / 2),
+      width: config.symbol.width,
+      height: config.symbol.height,
+      fill: scale.range,
+      stroke: config.symbol.stroke,
+      strokeWidth: config.symbol.strokeWidth
+    });
+    next = editGraphicProperties(next, "colorLegendLabels", {
+      length: layout.labels.length,
+      x: layout.labelX,
+      y: layout.itemY,
+      text: layout.labels
+    });
+    next = editLegendBackground(
+      next,
+      "colorLegendBackground",
+      layout.background,
+      config.border
+    );
     next = styleContinuousText(next, "colorLegendLabels", config.labels);
     if (config.titleVisible === false) return next;
-    next = next
-      .editGraphics({ target: "colorLegendTitle", property: "x", value: layout.title.x })
-      .editGraphics({ target: "colorLegendTitle", property: "y", value: layout.title.y })
-      .editGraphics({ target: "colorLegendTitle", property: "text", value: config.title });
+    next = editGraphicProperties(next, "colorLegendTitle", {
+      x: layout.title.x,
+      y: layout.title.y,
+      text: config.title
+    });
     return styleContinuousText(next, "colorLegendTitle", config.titleStyle);
   }
 );
@@ -202,7 +212,7 @@ export const createIntervalLegend = action(
     if (this.graphicSpec.objects.colorLegendSymbols !== undefined) {
       throw new Error("createIntervalLegend requires a missing interval legend.");
     }
-    return this
+    let next = this
       .editSemantic({
         property: "guide.legend.color.scale",
         value: resolved.encoding.scale
@@ -211,23 +221,34 @@ export const createIntervalLegend = action(
         property: "guide.legend.color.title",
         value: resolved.config.title
       })
-      ._withLegendConfig("interval", resolved.config)
+      ._withLegendConfig("interval", resolved.config);
+    const placement = resolveLegendGraphicPlacement(next);
+    if (resolved.config.border !== false) {
+      next = next.createGraphics({
+        id: "colorLegendBackground",
+        type: "rect",
+        ...placement
+      });
+    }
+    return next
       .createGraphics({
         id: "colorLegendSymbols",
         type: "rect",
         length: 0,
-        ...resolveLegendGraphicPlacement(this)
+        ...resolveLegendGraphicPlacement(next, resolved.config.border === false
+          ? {}
+          : { after: "colorLegendBackground" })
       })
       .createGraphics({
         id: "colorLegendLabels",
         type: "text",
         length: 0,
-        ...resolveLegendGraphicPlacement(this)
+        ...placement
       })
       .createGraphics({
         id: "colorLegendTitle",
         type: "text",
-        ...resolveLegendGraphicPlacement(this)
+        ...placement
       })
       .rematerializeIntervalLegend();
   }

package/src/actions/guides/legends/continuous/opacity.js

@@ -5,14 +5,15 @@ import { mapLinearValues } from "../../../../grammar/scales/index.js";
 import { measureTextWidth } from "../../../../core/textMetrics.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import {
-  assertLegendInsideCanvas,
+  assertLegendBoundsInsideCanvas,
   editLegendBackground,
   formatContinuousValues,
   normalizeContinuousLegend,
   requireResolvedLegendScale,
   resolveContinuousBounds,
   resolveContinuousPoint,
-  resolveLegendBackgroundBounds,
+  resolveLegendBackgroundFromBounds,
+  resolveLegendTextBounds,
   sampleContinuousValues,
   styleContinuousText,
   validateNonNegative,
@@ -170,45 +171,34 @@ function resolveOpacityLayout(program, config, scale) {
       align: "center"
     };
   }
-  const titleWidth = measureTextWidth(config.title, config.titleStyle);
-  const titleEdge = {
-    x: title.x + (title.align === "left" ? titleWidth : -titleWidth),
-    y: title.y
-  };
-  const labelEdges = labels.map((label, index) => {
-    const width = measureTextWidth(texts[index], config.labels);
-    return {
-      x: label.x + (label.align === "left"
-        ? width
-        : label.align === "right" ? -width : width / 2),
-      y: label.y
-    };
-  });
-  assertLegendInsideCanvas(
-    [title, titleEdge, ...symbols, ...labels, ...labelEdges],
+  const strokeExtent = (config.symbol.strokeWidth ?? 0) / 2;
+  const symbolExtent = radius + strokeExtent;
+  const titleBounds = resolveLegendTextBounds(
+    title,
+    config.title,
+    config.titleStyle
+  );
+  const labelBounds = labels.map((label, index) =>
+    resolveLegendTextBounds(label, texts[index], config.labels)
+  );
+  const symbolBounds = symbols.map(symbol => ({
+    left: symbol.x - symbolExtent,
+    right: symbol.x + symbolExtent,
+    top: symbol.y - symbolExtent,
+    bottom: symbol.y + symbolExtent
+  }));
+  const occupiedBounds = [titleBounds, ...labelBounds, ...symbolBounds];
+  assertLegendBoundsInsideCanvas(
+    occupiedBounds,
     canvas,
     "Opacity legend layout"
   );
-  const background = resolveLegendBackgroundBounds([
-    title,
-    ...symbols.map(symbol => ({
-      x: symbol.x + radius,
-      y: symbol.y + radius
-    })),
-    ...symbols.map(symbol => ({
-      x: symbol.x - radius,
-      y: symbol.y - radius
-    })),
-    ...labels.map((label, index) => ({
-      x: label.x + (label.align === "left"
-        ? measureTextWidth(
-            texts[index],
-            config.labels
-          )
-        : label.align === "right" ? -42 : 0),
-      y: label.y
-    }))
-  ], config.border, canvas, "Opacity legend");
+  const background = resolveLegendBackgroundFromBounds(
+    occupiedBounds,
+    config.border,
+    canvas,
+    "Opacity legend"
+  );
   return { values, texts, symbols, labels, title, background };
 }
 

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

@@ -1,5 +1,8 @@
 import { action } from "../../../core/action.js";
-import { validateOptionObject } from "../../../core/validation.js";
+import {
+  validateGeneratedItemLimit,
+  validateOptionObject
+} from "../../../core/validation.js";
 import { normalizeOptions } from "./categorical/options.js";
 import { symbolGraphic } from "./categorical/layout.js";
 import {
@@ -170,6 +173,12 @@ function editInterval(program, previous, args) {
   next = reconcileGraphic(next, "colorLegendTitle", titleVisible, {
     type: "text"
   });
+  next = reconcileGraphic(
+    next,
+    "colorLegendBackground",
+    normalized.border !== false,
+    { type: "rect", before: "colorLegendSymbols" }
+  );
   return next.rematerializeLegend();
 }
 
@@ -186,6 +195,7 @@ function editStrokeWidth(program, previous, args) {
       "Stroke-width legend count must be an integer of at least 2."
     );
   }
+  validateGeneratedItemLimit(count, "Stroke-width legend count");
   const layer = findLayer(program, previous.target);
   const titleMode = args.title;
   const inferredTitle = titleMode === "auto"
@@ -310,6 +320,9 @@ function editCategorical(program, kind, previous, size, args) {
     if (args.count !== undefined && (!Number.isInteger(args.count) || args.count < 2)) {
       throw new RangeError("Size legend count must be an integer of at least 2.");
     }
+    if (args.count !== undefined) {
+      validateGeneratedItemLimit(args.count, "Size legend count");
+    }
     next = next._withLegendConfig("size", {
       ...size,
       count: args.count ?? size.count,

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

@@ -1,5 +1,5 @@
-import { registerCategoricalLegendActions } from "./categorical/index.js";
 import { registerContinuousLegendActions } from "./continuous/index.js";
+import { registerCategoricalLegendActions } from "./categorical/index.js";
 import { registerSizeLegendActions } from "./size.js";
 import { registerStrokeWidthLegendActions } from "./strokeWidth.js";
 import { registerFocusedLegendActions } from "./focused.js";

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

@@ -4,6 +4,7 @@ import {
   resolveConcreteGraphicBounds,
   unionConcreteGraphicBounds
 } from "../../../grammar/schemas/graphicBounds.js";
+import { finiteMidpoint } from "../../../grammar/numeric.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import {
   resolveHorizontalLegendLane,
@@ -120,7 +121,7 @@ function blockDescriptor(program, kind, config) {
     bounds,
     title,
     symbol: {
-      centerX: (symbolAnchor.left + symbolAnchor.right) / 2,
+      centerX: finiteMidpoint(symbolAnchor.left, symbolAnchor.right),
       left: symbolBounds.left,
       right: symbolBounds.right,
       bounds: symbolAnchor

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

@@ -99,6 +99,14 @@ export function removeLegendKinds(program, kinds) {
   return next;
 }
 
+export function removeOwnedColorLegends(program, target) {
+  const kinds = Object.entries(program.guideConfigs.legend ?? {})
+    .filter(([kind, config]) => config?.target === target && (
+      config.channels?.includes("color") || ["gradient", "interval"].includes(kind)
+    )).map(([kind]) => kind);
+  return kinds.length === 0 ? program : removeLegendKinds(program, kinds);
+}
+
 export const removeLegend = action(
   { op: "removeLegend", description: "Remove every legend block owned by one mark." },
   function (args = {}) {

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

@@ -1,5 +1,8 @@
 import { action } from "../../../core/action.js";
-import { validateKeys } from "../../../core/validation.js";
+import {
+  validateGeneratedItemLimit,
+  validateKeys
+} from "../../../core/validation.js";
 import { mapLinearValues } from "../../../grammar/scales/index.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
@@ -9,6 +12,12 @@ import { resolveLayout as resolveCategoricalLayout } from
 import { findLayer } from "../../../selectors/layers.js";
 import { findCanvasGraphic, resolveLegendGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import {
+  formatContinuousValues,
+  sampleContinuousValues,
+  selectLegendLayer,
+  styleContinuousText
+} from "./continuous/common.js";
 
 const SIZE_OPTIONS = Object.freeze(["target", "count"]);
 
@@ -18,13 +27,7 @@ export function isSizeLegendPoint(layer) {
 }
 
 export function resolveSizeLegendPoint(program, requested) {
-  const candidates = program.semanticSpec.layers.filter(isSizeLegendPoint);
-  const layer = requested === undefined
-    ? candidates.length === 1 ? candidates[0] : undefined
-    : (() => {
-        const candidate = findLayer(program, requested);
-        return candidates.includes(candidate) ? candidate : undefined;
-      })();
+  const layer = selectLegendLayer(program, requested, isSizeLegendPoint);
   if (layer === undefined) {
     throw new Error(
       requested === undefined
@@ -56,26 +59,6 @@ function bounds(program) {
   return value;
 }
 
-function styleText(program, id, { title = false, style } = {}) {
-  const resolved = style ?? {
-    color: title ? DEFAULT_COLORS.strongText : DEFAULT_COLORS.text,
-    fontSize: title ? 13 : 12,
-    fontFamily: DEFAULT_FONT_FAMILY,
-    fontWeight: title ? 600 : "normal"
-  };
-  return program
-    .editGraphics({
-      target: id,
-      property: "fill",
-      value: resolved.color
-    })
-    .editGraphics({ target: id, property: "fontSize", value: resolved.fontSize })
-    .editGraphics({ target: id, property: "fontFamily", value: resolved.fontFamily })
-    .editGraphics({ target: id, property: "fontWeight", value: resolved.fontWeight })
-    .editGraphics({ target: id, property: "textAlign", value: "left" })
-    .editGraphics({ target: id, property: "textBaseline", value: "middle" });
-}
-
 export const rematerializeSizeLegend = action(
   {
     op: "rematerializeSizeLegend",
@@ -107,11 +90,7 @@ export const rematerializeSizeLegend = action(
     const originX = leftLayout?.titleX ?? plot.x + plot.width + 30;
     const seriesCount = categorical?.domain.length ?? 0;
     const titleY = leftLayout?.titleY ?? plot.y + 56 + seriesCount * 34 + 22;
-    const values = Array.from(
-      { length: currentConfig.count },
-      (_, index) => scale.domain[0] +
-        index / (currentConfig.count - 1) * (scale.domain[1] - scale.domain[0])
-    );
+    const values = sampleContinuousValues(scale.domain, currentConfig.count);
     const areas = mapLinearValues(values, scale.domain, scale.range, {
       clamp: scale.clamp ?? false
     });
@@ -143,22 +122,35 @@ export const rematerializeSizeLegend = action(
       .editGraphics({
         target: "sizeLegendLabels",
         property: "text",
-        value: values.map(value => String(+value.toPrecision(3)))
+        value: formatContinuousValues(values, scale.domain, "quantitative")
       })
       .editGraphics({ target: "sizeLegendTitle", property: "x", value: originX })
       .editGraphics({ target: "sizeLegendTitle", property: "y", value: titleY })
       .editGraphics({ target: "sizeLegendTitle", property: "text", value: title });
-    next = styleText(next, "sizeLegendLabels", {
-      style: currentConfig.inheritAppearance === true
+    next = styleContinuousText(
+      next,
+      "sizeLegendLabels",
+      currentConfig.inheritAppearance === true
         ? categorical.labels
-        : undefined
-    });
-    return styleText(next, "sizeLegendTitle", {
-      title: true,
-      style: currentConfig.inheritAppearance === true
+        : {
+            color: DEFAULT_COLORS.text,
+            fontSize: 12,
+            fontFamily: DEFAULT_FONT_FAMILY,
+            fontWeight: "normal"
+          }
+    );
+    return styleContinuousText(
+      next,
+      "sizeLegendTitle",
+      currentConfig.inheritAppearance === true
         ? categorical.titleStyle
-        : undefined
-    });
+        : {
+            color: DEFAULT_COLORS.strongText,
+            fontSize: 13,
+            fontFamily: DEFAULT_FONT_FAMILY,
+            fontWeight: 600
+          }
+    );
   }
 );
 
@@ -179,6 +171,7 @@ export const createSizeLegend = action(
     if (!Number.isInteger(count) || count < 2) {
       throw new RangeError("Size legend count must be an integer of at least 2.");
     }
+    validateGeneratedItemLimit(count, "Size legend count");
     return this
       .editSemantic({ property: "guide.legend.size.scale", value: encoding.scale })
       .editSemantic({ property: "guide.legend.size.title", value: encoding.field })

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

@@ -1,5 +1,8 @@
 import { action } from "../../../core/action.js";
-import { validateKeys } from "../../../core/validation.js";
+import {
+  validateGeneratedItemLimit,
+  validateKeys
+} from "../../../core/validation.js";
 import { mapContinuousScaleValues } from "../../../grammar/scales/index.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import { resolveLegendGraphicPlacement } from
@@ -7,6 +10,12 @@ import { resolveLegendGraphicPlacement } from
 import { findLayer } from "../../../selectors/layers.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../theme/defaults.js";
+import {
+  formatContinuousValues,
+  sampleContinuousValues,
+  selectLegendLayer,
+  styleContinuousText
+} from "./continuous/common.js";
 
 const OPTIONS = Object.freeze(["target", "count"]);
 
@@ -31,13 +40,11 @@ export function isStrokeWidthLegendLayer(layer) {
 }
 
 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;
-      })();
+  const layer = selectLegendLayer(
+    program,
+    requested,
+    isStrokeWidthLegendLayer
+  );
   if (layer === undefined) {
     throw new Error(
       requested === undefined
@@ -56,16 +63,6 @@ function requireScale(program, id) {
   return scale;
 }
 
-function styleText(program, id, style) {
-  return program
-    .editGraphics({ target: id, property: "fill", value: style.color })
-    .editGraphics({ target: id, property: "fontSize", value: style.fontSize })
-    .editGraphics({ target: id, property: "fontFamily", value: style.fontFamily })
-    .editGraphics({ target: id, property: "fontWeight", value: style.fontWeight })
-    .editGraphics({ target: id, property: "textAlign", value: "left" })
-    .editGraphics({ target: id, property: "textBaseline", value: "middle" });
-}
-
 export const rematerializeStrokeWidthLegend = action(
   {
     op: "rematerializeStrokeWidthLegend",
@@ -93,11 +90,7 @@ export const rematerializeStrokeWidthLegend = action(
     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 values = sampleContinuousValues(scale.domain, config.count);
     const widths = mapContinuousScaleValues(values, scale);
     const originX = plot.x + plot.width + 30;
     const titleY = plot.y + 28;
@@ -129,15 +122,15 @@ export const rematerializeStrokeWidthLegend = action(
       .editGraphics({
         target: "strokeWidthLegendLabels",
         property: "text",
-        value: values.map(value => String(+value.toPrecision(3)))
+        value: formatContinuousValues(values, scale.domain, "quantitative")
       });
-    next = styleText(next, "strokeWidthLegendLabels", config.labels);
+    next = styleContinuousText(next, "strokeWidthLegendLabels", config.labels);
     if (config.titleVisible === false) return next;
     next = next
       .editGraphics({ target: "strokeWidthLegendTitle", property: "x", value: originX })
       .editGraphics({ target: "strokeWidthLegendTitle", property: "y", value: titleY })
       .editGraphics({ target: "strokeWidthLegendTitle", property: "text", value: title });
-    return styleText(next, "strokeWidthLegendTitle", config.titleStyle);
+    return styleContinuousText(next, "strokeWidthLegendTitle", config.titleStyle);
   }
 );
 
@@ -157,6 +150,7 @@ export const createStrokeWidthLegend = action(
         "Stroke-width legend count must be an integer of at least 2."
       );
     }
+    validateGeneratedItemLimit(count, "Stroke-width legend count");
     return this
       .editSemantic({ property: "guide.legend.strokeWidth.scale", value: encoding.scale })
       .editSemantic({ property: "guide.legend.strokeWidth.title", value: encoding.field })