ggaction 0.0.4 → 0.0.6

package/src/actions/guides/axes/parallel.js

@@ -0,0 +1,228 @@
+import { action } from "../../../core/action.js";
+import { validateOptionObject } from "../../../core/validation.js";
+import { resolvePlotGraphicPlacement } from
+  "../../../materialization/graphicHierarchy.js";
+import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
+  "../../../theme/defaults.js";
+import {
+  requireParallelAxisLayer,
+  resolveParallelAxisTarget,
+  resolveParallelAxisValues
+} from "./parallel/resolve.js";
+
+const CREATE_OPTIONS = Object.freeze(["target", "coordinate"]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["target"]);
+
+export const rematerializeParallelAxes = action(
+  {
+    op: "rematerializeParallelAxes",
+    description: "Recompute concrete Parallel dimension axes."
+  },
+  function (args = {}) {
+    validateOptionObject(
+      args,
+      REMATERIALIZE_OPTIONS,
+      "rematerializeParallelAxes"
+    );
+    const target = resolveParallelAxisTarget(
+      this,
+      args.target ?? this.guideConfigs.axis?.parallel?.axes?.target
+    );
+    const { dimensions } = requireParallelAxisLayer(this, target);
+    const { axes, bounds } = resolveParallelAxisValues(this, dimensions);
+    const ticks = axes.flatMap(axis => axis.values.map((value, index) => ({
+      x: axis.x,
+      y: axis.y[index],
+      value,
+      text: axis.labels[index]
+    })));
+    let next = this
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "length",
+        value: axes.length
+      })
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "x1",
+        value: axes.map(axis => axis.x)
+      })
+      .editGraphics({ target: "parallelAxisLines", property: "y1", value: bounds.y })
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "x2",
+        value: axes.map(axis => axis.x)
+      })
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "y2",
+        value: bounds.y + bounds.height
+      })
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "stroke",
+        value: DEFAULT_COLORS.axis
+      })
+      .editGraphics({
+        target: "parallelAxisLines",
+        property: "strokeWidth",
+        value: 1.25
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "length",
+        value: ticks.length
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "x1",
+        value: ticks.map(tick => tick.x - 4)
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "y1",
+        value: ticks.map(tick => tick.y)
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "x2",
+        value: ticks.map(tick => tick.x + 4)
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "y2",
+        value: ticks.map(tick => tick.y)
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "stroke",
+        value: DEFAULT_COLORS.mutedText
+      })
+      .editGraphics({
+        target: "parallelAxisTicks",
+        property: "strokeWidth",
+        value: 1
+      })
+      .editGraphics({
+        target: "parallelAxisLabels",
+        property: "length",
+        value: ticks.length
+      })
+      .editGraphics({
+        target: "parallelAxisLabels",
+        property: "x",
+        value: ticks.map(tick => tick.x - 9)
+      })
+      .editGraphics({
+        target: "parallelAxisLabels",
+        property: "y",
+        value: ticks.map(tick => tick.y)
+      })
+      .editGraphics({
+        target: "parallelAxisLabels",
+        property: "text",
+        value: ticks.map(tick => tick.text)
+      })
+      .editGraphics({ target: "parallelAxisLabels", property: "fill", value: DEFAULT_COLORS.axis })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontSize", value: 11 })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontFamily", value: DEFAULT_FONT_FAMILY })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontWeight", value: "normal" })
+      .editGraphics({ target: "parallelAxisLabels", property: "textAlign", value: "right" })
+      .editGraphics({ target: "parallelAxisLabels", property: "textBaseline", value: "middle" })
+      .editGraphics({
+        target: "parallelAxisTitles",
+        property: "length",
+        value: axes.length
+      })
+      .editGraphics({
+        target: "parallelAxisTitles",
+        property: "x",
+        value: axes.map(axis => axis.x)
+      })
+      .editGraphics({
+        target: "parallelAxisTitles",
+        property: "y",
+        value: bounds.y - 20
+      })
+      .editGraphics({
+        target: "parallelAxisTitles",
+        property: "text",
+        value: axes.map(axis => axis.title)
+      })
+      .editGraphics({ target: "parallelAxisTitles", property: "fill", value: DEFAULT_COLORS.axisTitle })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontSize", value: 13 })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontFamily", value: DEFAULT_FONT_FAMILY })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontWeight", value: 600 })
+      .editGraphics({ target: "parallelAxisTitles", property: "textAlign", value: "center" })
+      .editGraphics({ target: "parallelAxisTitles", property: "textBaseline", value: "middle" });
+    return next._withGuideConfig("parallel", "axes", {
+      target,
+      scales: dimensions.map(dimension => dimension.scale)
+    });
+  }
+);
+
+export const createParallelAxes = action(
+  {
+    op: "createParallelAxes",
+    description: "Create ordinary line and text graphics for Parallel dimensions."
+  },
+  function (args = {}) {
+    validateOptionObject(args, CREATE_OPTIONS, "createParallelAxes");
+    const target = resolveParallelAxisTarget(this, args.target);
+    const { coordinate, dimensions } = requireParallelAxisLayer(this, target);
+    if (args.coordinate !== undefined && args.coordinate !== coordinate.id) {
+      throw new Error(
+        `Parallel layer "${target}" uses coordinate "${coordinate.id}".`
+      );
+    }
+    for (const id of [
+      "parallelAxisLines", "parallelAxisTicks", "parallelAxisLabels",
+      "parallelAxisTitles"
+    ]) {
+      if (this.graphicSpec.objects[id] !== undefined) {
+        throw new Error("createParallelAxes requires missing Parallel axes.");
+      }
+    }
+    const placement = resolvePlotGraphicPlacement(this);
+    let next = this
+      .editSemantic({
+        property: "guide.axis.parallel.target",
+        value: target
+      })
+      .editSemantic({
+        property: "guide.axis.parallel.coordinate",
+        value: coordinate.id
+      })
+      .editSemantic({
+        property: "guide.axis.parallel.scales",
+        value: dimensions.map(dimension => dimension.scale)
+      })
+      .createGraphics({ id: "parallelAxisLines", type: "line", length: 0, ...placement })
+      .editGraphics({ target: "parallelAxisLines", property: "stroke", value: DEFAULT_COLORS.axis })
+      .editGraphics({ target: "parallelAxisLines", property: "strokeWidth", value: 1.25 })
+      .createGraphics({ id: "parallelAxisTicks", type: "line", length: 0, ...placement })
+      .editGraphics({ target: "parallelAxisTicks", property: "stroke", value: DEFAULT_COLORS.mutedText })
+      .editGraphics({ target: "parallelAxisTicks", property: "strokeWidth", value: 1 })
+      .createGraphics({ id: "parallelAxisLabels", type: "text", length: 0, ...placement })
+      .editGraphics({ target: "parallelAxisLabels", property: "fill", value: DEFAULT_COLORS.axis })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontSize", value: 11 })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontFamily", value: DEFAULT_FONT_FAMILY })
+      .editGraphics({ target: "parallelAxisLabels", property: "fontWeight", value: "normal" })
+      .editGraphics({ target: "parallelAxisLabels", property: "textAlign", value: "right" })
+      .editGraphics({ target: "parallelAxisLabels", property: "textBaseline", value: "middle" })
+      .createGraphics({ id: "parallelAxisTitles", type: "text", length: 0, ...placement })
+      .editGraphics({ target: "parallelAxisTitles", property: "fill", value: DEFAULT_COLORS.axisTitle })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontSize", value: 13 })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontFamily", value: DEFAULT_FONT_FAMILY })
+      .editGraphics({ target: "parallelAxisTitles", property: "fontWeight", value: 600 })
+      .editGraphics({ target: "parallelAxisTitles", property: "textAlign", value: "center" })
+      .editGraphics({ target: "parallelAxisTitles", property: "textBaseline", value: "middle" });
+    return next.rematerializeParallelAxes({ target });
+  }
+);
+
+export function registerParallelAxisActions(ProgramClass) {
+  ProgramClass.prototype.createParallelAxes = createParallelAxes;
+  ProgramClass.prototype.rematerializeParallelAxes = rematerializeParallelAxes;
+}

package/src/actions/guides/axes/titles.js

@@ -24,6 +24,7 @@ import {
 } from "./policy.js";
 import { findCanvasGraphic, resolvePlotGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import { resolveTextBounds } from "../../../core/textMetrics.js";
 
 const CREATE_OPTIONS = Object.freeze([
   "text", "scale", "position", "at", "offset", "rotation", "color",
@@ -132,17 +133,19 @@ function resolveGeometry(program, channel, config) {
     offset: config.offset
   });
   const text = program.semanticSpec.guides.axis?.[channel]?.title ?? "";
-  const width = [...text].length * config.fontSize * 0.6;
-  const height = config.fontSize;
-  const cosine = Math.cos(config.rotation);
-  const sine = Math.sin(config.rotation);
-  const extentX = Math.abs(cosine) * width / 2 + Math.abs(sine) * height / 2;
-  const extentY = Math.abs(sine) * width / 2 + Math.abs(cosine) * height / 2;
+  const titleBounds = resolveTextBounds({
+    ...geometry,
+    text,
+    fontSize: config.fontSize,
+    textAlign: "center",
+    textBaseline: "middle",
+    rotation: config.rotation
+  });
   const canvas = findCanvasGraphic(program)?.properties;
   const newEdgeFits = config.position === "top"
-    ? geometry.y - extentY >= 0
+    ? titleBounds.top >= 0
     : config.position === "right"
-      ? geometry.x + extentX <= canvas?.width
+      ? titleBounds.right <= canvas?.width
       : true;
   if (!canvas || !newEdgeFits) {
     throw new Error(`The ${channel}-axis title does not fit the Canvas margin.`);

package/src/actions/guides/guides.js

@@ -5,6 +5,9 @@ import {
   resolveAutomaticGridOptions,
   resolveGuideApplicability
 } from "./applicability.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { findUpstreamTransform } from
+  "../../materialization/dataProvenance.js";
 
 const OPTIONS = Object.freeze(["axes", "grid", "legend"]);
 
@@ -21,16 +24,51 @@ function validateOptions(args) {
   validateGuideOption(args.legend, "createGuides legend");
 }
 
-function inferAxesOptions(program) {
+function inferAxesOptions(program, applicability) {
   const horizontalInterval = program.semanticSpec.layers.some(layer =>
     layer.mark?.type === "rule" &&
     layer.encoding?.x?.fieldType === "quantitative" &&
     layer.encoding?.x2?.fieldType === "quantitative" &&
     ["nominal", "ordinal", "temporal"].includes(layer.encoding?.y?.fieldType)
   );
-  return horizontalInterval
+  const inferred = horizontalInterval
     ? { x: { ticksAndLabels: { count: 7 } } }
     : {};
+  const directions = applicability.axes.directions;
+  const hasStoredY = program.semanticSpec.layers.some(
+    layer => layer.encoding?.y !== undefined
+  );
+  if (!directions.y && hasStoredY) inferred.y = false;
+  const horizonLayers = program.semanticSpec.layers.filter(layer =>
+    findUpstreamTransform(
+      program,
+      findDataset(program, layer.data),
+      "horizon"
+    ) !== undefined
+  );
+  if (horizonLayers.length === 1 && directions.x && !directions.y) {
+    const scaleId = horizonLayers[0].encoding?.x?.scale;
+    const domain = program.resolvedScales?.[scaleId]?.domain;
+    if (
+      Array.isArray(domain) &&
+      domain.length === 2 &&
+      domain.every(Number.isFinite) &&
+      domain[0] !== domain[1]
+    ) {
+      const low = Math.min(...domain);
+      const high = Math.max(...domain);
+      inferred.x = {
+        ...(inferred.x ?? {}),
+        ticksAndLabels: {
+          values: Array.from(
+            { length: 6 },
+            (_, index) => low + (high - low) * index / 5
+          )
+        }
+      };
+    }
+  }
+  return inferred;
 }
 
 function selectOption(explicit, applicable) {
@@ -39,6 +77,17 @@ function selectOption(explicit, applicable) {
   return applicable ? {} : undefined;
 }
 
+function mergeInferredOptions(inferred, explicit) {
+  if (!isPlainObject(inferred) || !isPlainObject(explicit)) return explicit;
+  const merged = { ...inferred };
+  for (const [key, value] of Object.entries(explicit)) {
+    merged[key] = isPlainObject(value) && isPlainObject(inferred[key])
+      ? mergeInferredOptions(inferred[key], value)
+      : value;
+  }
+  return merged;
+}
+
 const createGuides = action(
   {
     op: "createGuides",
@@ -47,10 +96,16 @@ const createGuides = action(
   function (args = {}) {
     validateOptions(args);
     const applicability = resolveGuideApplicability(this);
-    const hasAxes = applicability.axes.cartesian || applicability.axes.polar;
+    const hasAxes = applicability.axes.cartesian || applicability.axes.polar ||
+      applicability.axes.parallel;
+    const inferredAxes = applicability.axes.cartesian
+      ? inferAxesOptions(this, applicability)
+      : {};
     const axes = args.axes === undefined && applicability.axes.cartesian
-      ? inferAxesOptions(this)
-      : selectOption(args.axes, hasAxes);
+      ? inferredAxes
+      : args.axes !== undefined && args.axes !== false && hasAxes
+        ? mergeInferredOptions(inferredAxes, args.axes)
+        : selectOption(args.axes, hasAxes);
     const grid = args.grid === undefined &&
         (applicability.grid.cartesian || applicability.grid.polar)
       ? resolveAutomaticGridOptions(this)

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
     );
@@ -323,14 +360,25 @@ export const createLegend = action(
         symbol
       });
       if (requestedPoint.encoding?.size?.scale !== undefined) {
-        next = next.createSizeLegend({
-          target: requestedPoint.id,
-          ...(count === undefined ? {} : { count }),
-          inheritAppearance:
-            categoricalArgs.position === "left" ||
-            categoricalArgs.labels !== undefined ||
-            categoricalArgs.titleStyle !== undefined
-        });
+        const existingSize = next.guideConfigs.legend?.size;
+        if (existingSize === undefined) {
+          next = next.createSizeLegend({
+            target: requestedPoint.id,
+            ...(count === undefined ? {} : { count }),
+            inheritAppearance:
+              categoricalArgs.position === "left" ||
+              categoricalArgs.labels !== undefined ||
+              categoricalArgs.titleStyle !== undefined
+          });
+        } else if (existingSize.target !== requestedPoint.id) {
+          throw new Error(
+            "Combined point series legend requires the active size legend to share its target."
+          );
+        } else if (count !== undefined && count !== existingSize.count) {
+          throw new Error(
+            "Existing size legend count must be edited before recreating the categorical block."
+          );
+        }
         next = next.rematerializeLegend();
       }
       return next;

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

@@ -49,7 +49,7 @@ const DEFAULT_BORDER = Object.freeze({
 export const validatePositive = validatePositiveFinite;
 export const validateNonNegative = validateNonNegativeFinite;
 
-function validateTextOptions(value, label, defaults) {
+export function normalizeLegendTextOptions(value, label, defaults) {
   if (value === undefined) return { ...defaults };
   if (!isPlainObject(value)) {
     throw new TypeError(`${label} must be a plain object.`);
@@ -132,12 +132,12 @@ export function normalizeContinuousLegend(args, kind) {
     count,
     title: args.title,
     inferredTitle: args.title === undefined,
-    labels: validateTextOptions(
+    labels: normalizeLegendTextOptions(
       args.labels,
       "createLegend.labels",
       DEFAULT_LABELS
     ),
-    titleStyle: validateTextOptions(
+    titleStyle: normalizeLegendTextOptions(
       args.titleStyle,
       "createLegend.titleStyle",
       DEFAULT_TITLE

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

@@ -3,6 +3,7 @@ import { validateOptionObject } from "../../../core/validation.js";
 import { normalizeOptions } from "./categorical/options.js";
 import { symbolGraphic } from "./categorical/layout.js";
 import {
+  normalizeLegendTextOptions,
   normalizeContinuousLegend,
   validatePositive
 } from "./continuous/common.js";
@@ -12,6 +13,10 @@ import { findLayer } from "../../../selectors/layers.js";
 import { resolveLegendGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 import { resolveLegendTarget } from "./target.js";
+import {
+  STROKE_WIDTH_LEGEND_LABELS,
+  STROKE_WIDTH_LEGEND_TITLE_STYLE
+} from "./strokeWidth.js";
 
 const OPTIONS = Object.freeze([
   "target", "position", "align", "direction", "columns", "offset",
@@ -163,6 +168,61 @@ function editInterval(program, previous, args) {
   return next.rematerializeIntervalLegend();
 }
 
+function editStrokeWidth(program, previous, args) {
+  const allowed = ["target", "title", "count", "labels", "titleStyle"];
+  for (const key of Object.keys(args)) {
+    if (!allowed.includes(key)) {
+      throw new Error(`stroke-width legend does not accept ${key}.`);
+    }
+  }
+  const count = args.count ?? previous.count;
+  if (!Number.isInteger(count) || count < 2) {
+    throw new RangeError(
+      "Stroke-width legend count must be an integer of at least 2."
+    );
+  }
+  const layer = findLayer(program, previous.target);
+  const titleMode = args.title;
+  const inferredTitle = titleMode === "auto"
+    ? true
+    : typeof titleMode === "string" ? false : previous.inferredTitle;
+  const titleVisible = titleMode === false
+    ? false
+    : titleMode === undefined ? previous.titleVisible !== false : true;
+  const title = titleMode === "auto"
+    ? layer?.encoding?.strokeWidth?.field
+    : typeof titleMode === "string" ? titleMode : previous.title;
+  const config = {
+    ...previous,
+    title,
+    inferredTitle,
+    titleVisible,
+    count,
+    labels: normalizeLegendTextOptions(
+      args.labels,
+      "editLegend.labels",
+      previous.labels ?? STROKE_WIDTH_LEGEND_LABELS
+    ),
+    titleStyle: normalizeLegendTextOptions(
+      args.titleStyle,
+      "editLegend.titleStyle",
+      previous.titleStyle ?? STROKE_WIDTH_LEGEND_TITLE_STYLE
+    )
+  };
+  let next = program;
+  if (titleMode === "auto" || typeof titleMode === "string") {
+    next = next.editSemantic({
+      property: "guide.legend.strokeWidth.title",
+      value: title
+    });
+  }
+  next = next._withLegendConfig("strokeWidth", config);
+  next = reconcileGraphic(next, "strokeWidthLegendTitle", titleVisible, {
+    type: "text"
+  });
+  return next.rematerializeStrokeWidthLegend();
+}
+
 function categoricalSymbolIds(config) {
   return new Set(config.symbol.layers.map(layer => symbolGraphic(config, layer.type)));
 }
@@ -284,6 +344,9 @@ export const editLegend = action(
     if (configs.interval?.target === target) {
       return editInterval(this, configs.interval, args);
     }
+    if (configs.strokeWidth?.target === target) {
+      return editStrokeWidth(this, configs.strokeWidth, args);
+    }
     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;
 }