ggaction 0.0.15 → 0.0.16

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

@@ -1,4 +1,4 @@
-import { action } from "../../../../core/action.js";
+import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import { validateKeys } from "../../../../core/validation.js";
 import { mapScaleConsumerValues } from "../../../../materialization/scales/map.js";
@@ -7,6 +7,7 @@ import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import {
   assertLegendBoundsInsideCanvas,
   editLegendBackground,
+  editGraphicProperties,
   formatContinuousValues,
   normalizeContinuousLegend,
   requireResolvedLegendScale,
@@ -26,7 +27,7 @@ export const DEFAULT_GRADIENT_SIZE = Object.freeze({ length: 120, thickness: 12
 
 const GRADIENT_OPTIONS = Object.freeze(["length", "thickness"]);
 
-export function resolveGradientLayout(program, config, scale) {
+export function resolveGradientLayout(program, config, scale, label = "Gradient legend") {
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const length = config.gradient.length;
@@ -111,25 +112,25 @@ export function resolveGradientLayout(program, config, scale) {
     bottom: Math.max(tick.y1, tick.y2) + 0.5
   }));
   const labelBounds = labels.map((label, index) =>
-    resolveLegendTextBounds(label, texts[index], config.labels)
+    resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
   const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
     title,
     config.title,
     config.titleStyle
-  );
+  , program.materializationConfigs.textMetrics);
   const occupiedBounds = [stripBounds, ...tickBounds, ...labelBounds,
     ...(config.titleVisible === false ? [] : [titleBounds])];
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
     canvas,
-    "Gradient legend layout", config
+    `${label} layout`, config
   );
   const background = resolveLegendBackgroundFromBounds(
     occupiedBounds,
     config.border,
     canvas,
-    "Gradient legend", config
+    label, config
   );
   return {
     vertical, x, y, length, thickness, values, texts, labels, ticks, title,
@@ -137,11 +138,11 @@ export function resolveGradientLayout(program, config, scale) {
   };
 }
 
-function resolveGradientConfig(program, config) {
-  const layer = resolveContinuousColorLayer(program, config.target);
-  const encoding = layer.encoding.color;
+export function resolveGradientConfig(program, config, channel = "color") {
+  const layer = resolveContinuousColorLayer(program, config.target, channel);
+  const encoding = layer.encoding[channel];
   if (!["quantitative", "temporal"].includes(encoding.fieldType)) {
-    throw new Error("Gradient legend requires quantitative or temporal color.");
+    throw new Error(`${channel === "color" ? "Gradient" : "Stroke gradient"} legend requires quantitative or temporal ${channel}.`);
   }
   const scale = requireResolvedLegendScale(
     program,
@@ -163,153 +164,84 @@ function resolveGradientConfig(program, config) {
   };
 }
 
-export const rematerializeGradientLegend = action(
+// Both channels use the same positions and width policy. Their paint and
+// semantic/graphic namespaces remain explicit channel-owned choices.
+export function materializeGradientLegend(program, resolved, appearance) {
+  const stroke = appearance !== undefined;
+  const channel = stroke ? "stroke" : "color";
+  const kind = stroke ? "strokeGradient" : "gradient";
+  const prefix = `${channel}Gradient`;
+  const { scale, encoding, config: currentConfig } = resolved;
+  const config = resolveEffectiveLegendBlockConfig(program, kind, currentConfig);
+  const layout = resolveGradientLayout(program, config, scale,
+    stroke ? "Stroke gradient legend" : "Gradient legend");
+  const stripCount = 60;
+  const stripSize = layout.length / stripCount;
+  const strips = Array.from({ length: stripCount }, (_, index) => {
+    const fraction = (index + 0.5) / stripCount;
+    const position = layout.vertical ? 1 - fraction : fraction;
+    const samplingScale = scale.midpoint === undefined ? { ...scale, domain: [0, 1] } : scale;
+    const value = scale.midpoint === undefined ? position : interpolateNumber(...scale.domain, position);
+    const [color] = mapScaleConsumerValues([value], samplingScale, channel);
+    return {
+      x: layout.x + (layout.vertical ? 0 : index * stripSize),
+      y: layout.y + (layout.vertical ? index * stripSize : 0),
+      width: layout.vertical ? layout.thickness : stripSize,
+      height: layout.vertical ? stripSize : layout.thickness,
+      fill: stroke ? appearance.fill : color,
+      stroke: color,
+      strokeWidth: stroke ? appearance.strokeWidth : 0
+    };
+  });
+  let next = program
+    .editSemantic({ property: `guide.legend.${channel}.scale`, value: encoding.scale })
+    .editSemantic({ property: `guide.legend.${channel}.title`, value: config.title })
+    ._withLegendConfig(kind, currentConfig);
+  // Preserve each channel's established primitive trace order.
+  if (!stroke) next = next.editGraphics({ target: `${prefix}Strips`, property: "length", value: strips.length });
+  next = editLegendBackground(next, `${prefix}Background`, layout.background, config.border);
+  if (stroke) next = next.editGraphics({ target: `${prefix}Strips`, property: "length", value: strips.length });
+  for (const property of ["x", "y", "width", "height", "fill", "stroke", "strokeWidth"]) {
+    next = next.editGraphics({ target: `${prefix}Strips`, property, value: strips.map(strip => strip[property]) });
+  }
+  next = next.editGraphics({ target: `${prefix}Ticks`, property: "length", value: layout.ticks.length });
+  for (const property of ["x1", "y1", "x2", "y2"]) {
+    next = next.editGraphics({ target: `${prefix}Ticks`, property, value: layout.ticks.map(tick => tick[property]) });
+  }
+  next = editGraphicProperties(next, `${prefix}Ticks`, { stroke: DEFAULT_COLORS.mutedText, strokeWidth: 1 });
+  next = editGraphicProperties(next, `${prefix}Labels`, {
+    length: layout.labels.length, x: layout.labels.map(label => label.x),
+    y: layout.labels.map(label => label.y), text: layout.texts
+  });
+  next = styleContinuousText(next, `${prefix}Labels`, config.labels, { align: layout.labels[0].align });
+  if (config.titleVisible === false) return next;
+  next = editGraphicProperties(next, `${prefix}Title`, { x: layout.title.x, y: layout.title.y, text: config.title });
+  return styleContinuousText(next, `${prefix}Title`, config.titleStyle, { align: layout.title.align });
+}
+
+export const rematerializeGradientLegend = /* @__PURE__ */ closedAction(
   {
     op: "rematerializeGradientLegend",
     description: "Rematerialize a continuous color gradient legend."
-  },
+  }, [],
   function (args = {}) {
-    validateKeys(args, [], "rematerializeGradientLegend");
     const stored = this.guideConfigs.legend?.gradient;
     if (stored === undefined) {
       throw new Error("Gradient legend requires stored configuration.");
     }
-    const { scale, encoding, config: currentConfig } = resolveGradientConfig(this, stored);
-    const config = resolveEffectiveLegendBlockConfig(this, "gradient", currentConfig);
-    const layout = resolveGradientLayout(this, config, scale);
-    const stripCount = 60;
-    const stripSize = layout.length / stripCount;
-    const strips = Array.from({ length: stripCount }, (_, index) => {
-      const fraction = (index + 0.5) / stripCount;
-      const position = layout.vertical ? 1 - fraction : fraction;
-      // Keep legacy uniform samples exact without a value/domain round trip.
-      const samplingScale = scale.midpoint === undefined ? { ...scale, domain: [0, 1] } : scale;
-      const value = scale.midpoint === undefined ? position : interpolateNumber(...scale.domain, position);
-      const [color] = mapScaleConsumerValues([value], samplingScale, "color");
-      return {
-        x: layout.x + (layout.vertical ? 0 : index * stripSize),
-        y: layout.y + (layout.vertical ? index * stripSize : 0),
-        width: layout.vertical ? layout.thickness : stripSize,
-        height: layout.vertical ? stripSize : layout.thickness,
-        fill: color,
-        stroke: color,
-        strokeWidth: 0
-      };
-    });
-    let next = this
-      .editSemantic({
-        property: "guide.legend.color.scale",
-        value: encoding.scale
-      })
-      .editSemantic({
-        property: "guide.legend.color.title",
-        value: config.title
-      })
-      ._withLegendConfig("gradient", currentConfig)
-      .editGraphics({
-        target: "colorGradientStrips",
-        property: "length",
-        value: strips.length
-      });
-    next = editLegendBackground(
-      next,
-      "colorGradientBackground",
-      layout.background,
-      config.border
-    );
-    for (const property of [
-      "x", "y", "width", "height", "fill", "stroke", "strokeWidth"
-    ]) {
-      next = next.editGraphics({
-        target: "colorGradientStrips",
-        property,
-        value: strips.map(strip => strip[property])
-      });
-    }
-    next = next.editGraphics({
-      target: "colorGradientTicks",
-      property: "length",
-      value: layout.ticks.length
-    });
-    for (const property of ["x1", "y1", "x2", "y2"]) {
-      next = next.editGraphics({
-        target: "colorGradientTicks",
-        property,
-        value: layout.ticks.map(tick => tick[property])
-      });
-    }
-    next = next
-      .editGraphics({
-        target: "colorGradientTicks",
-        property: "stroke",
-        value: DEFAULT_COLORS.mutedText
-      })
-      .editGraphics({
-        target: "colorGradientTicks",
-        property: "strokeWidth",
-        value: 1
-      })
-      .editGraphics({
-        target: "colorGradientLabels",
-        property: "length",
-        value: layout.labels.length
-      })
-      .editGraphics({
-        target: "colorGradientLabels",
-        property: "x",
-        value: layout.labels.map(label => label.x)
-      })
-      .editGraphics({
-        target: "colorGradientLabels",
-        property: "y",
-        value: layout.labels.map(label => label.y)
-      })
-      .editGraphics({
-        target: "colorGradientLabels",
-        property: "text",
-        value: layout.texts
-      });
-    next = styleContinuousText(
-      next,
-      "colorGradientLabels",
-      config.labels,
-      { align: layout.labels[0].align }
-    );
-    if (config.titleVisible === false) return next;
-    next = next
-      .editGraphics({
-        target: "colorGradientTitle",
-        property: "x",
-        value: layout.title.x
-      })
-      .editGraphics({
-        target: "colorGradientTitle",
-        property: "y",
-        value: layout.title.y
-      })
-      .editGraphics({
-        target: "colorGradientTitle",
-        property: "text",
-        value: config.title
-      });
-    return styleContinuousText(
-      next,
-      "colorGradientTitle",
-      config.titleStyle,
-      { align: layout.title.align }
-    );
+    return materializeGradientLegend(this, resolveGradientConfig(this, stored));
   }
 );
 
 
-export function resolveGradientLegendCreation(program, args = {}) {
+export function resolveGradientLegendCreation(program, args = {}, channel = "color") {
   const config = normalizeContinuousLegend(args, "gradient");
   if (args.channels !== undefined && (
     !Array.isArray(args.channels) ||
     args.channels.length !== 1 ||
-    args.channels[0] !== "color"
+    args.channels[0] !== channel
   )) {
-    throw new Error('Gradient legend requires channels: ["color"].');
+    throw new Error(`Gradient legend requires channels: ["${channel}"].`);
   }
   if (args.gradient !== undefined && !isPlainObject(args.gradient)) {
     throw new TypeError("createLegend.gradient must be a plain object.");
@@ -326,62 +258,64 @@ export function resolveGradientLegendCreation(program, args = {}) {
   config.titleVisible = true;
   validatePositive(config.gradient.length, "Gradient length");
   validatePositive(config.gradient.thickness, "Gradient thickness");
-  const resolved = resolveGradientConfig(program, config);
+  const resolved = resolveGradientConfig(program, config, channel);
   return resolved;
 }
 
-export function createGradientLegendFromConfig(program, config) {
-  const resolved = resolveGradientConfig(program, config);
-  resolveGradientLayout(program, resolved.config, resolved.scale);
+export function createGradientLegendFromConfig(program, config, channel = "color") {
+  const prefix = `${channel}Gradient`;
+  const kind = channel === "color" ? "gradient" : "strokeGradient";
+  const resolved = resolveGradientConfig(program, config, channel);
+  resolveGradientLayout(program, resolved.config, resolved.scale, channel === "color" ? "Gradient legend" : "Stroke gradient legend");
   let next = program
     .editSemantic({
-      property: "guide.legend.color.scale",
+      property: `guide.legend.${channel}.scale`,
       value: resolved.encoding.scale
     })
     .editSemantic({
-      property: "guide.legend.color.title",
+      property: `guide.legend.${channel}.title`,
       value: resolved.config.title
     })
-    ._withLegendConfig("gradient", resolved.config);
+    ._withLegendConfig(kind, resolved.config);
   if (resolved.config.border !== false) {
     next = next.createGraphics({
-      id: "colorGradientBackground",
+      id: `${prefix}Background`,
       type: "rect",
       ...resolveLegendGraphicPlacement(next)
     });
   }
   next = next
     .createGraphics({
-      id: "colorGradientStrips",
+      id: `${prefix}Strips`,
       type: "rect",
       length: 0,
       ...resolveLegendGraphicPlacement(next, resolved.config.border === false
         ? {}
-        : { after: "colorGradientBackground" })
+        : { after: `${prefix}Background` })
     })
     .createGraphics({
-      id: "colorGradientTicks",
+      id: `${prefix}Ticks`,
       type: "line",
       length: 0,
       ...resolveLegendGraphicPlacement(next)
     })
     .createGraphics({
-      id: "colorGradientLabels",
+      id: `${prefix}Labels`,
       type: "text",
       length: 0,
       ...resolveLegendGraphicPlacement(next)
     });
   if (resolved.config.titleVisible !== false) {
     next = next.createGraphics({
-      id: "colorGradientTitle",
+      id: `${prefix}Title`,
       type: "text",
       ...resolveLegendGraphicPlacement(next)
     });
   }
-  return next.rematerializeGradientLegend();
+  return next[channel === "color" ? "rematerializeGradientLegend" : "rematerializeStrokeGradientLegend"]();
 }
 
-export const createGradientLegend = action(
+export const createGradientLegend = /* @__PURE__ */ action(
   {
     op: "createGradientLegend",
     description: "Create a continuous color gradient legend."

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

@@ -1,5 +1,5 @@
 import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
-import { action } from "../../../../core/action.js";
+import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import {
   validateKeys,
@@ -86,15 +86,16 @@ export function normalizeIntervalLegend(args) {
   };
 }
 
-export function resolveIntervalConfig(program, stored) {
-  const layer = resolveContinuousColorLayer(program, stored.target);
-  const encoding = layer.encoding.color;
+export function resolveIntervalConfig(program, stored, channel = "color") {
+  const label = channel === "color" ? "Interval legend" : "Stroke interval legend";
+  const layer = resolveContinuousColorLayer(program, stored.target, channel);
+  const encoding = layer.encoding[channel];
   if (encoding.fieldType !== "quantitative") {
-    throw new Error("Interval legend requires quantitative color.");
+    throw new Error(`${label} requires quantitative ${channel}.`);
   }
   const scale = program.resolvedScales[encoding.scale];
   if (!["quantize", "quantile", "threshold"].includes(scale?.type)) {
-    throw new Error(`Interval legend requires a resolved discretized scale "${encoding.scale}".`);
+    throw new Error(`${label} requires a resolved discretized scale "${encoding.scale}".`);
   }
   return { encoding, scale, config: {
       ...stored,
@@ -104,32 +105,31 @@ export function resolveIntervalConfig(program, stored) {
     } };
 }
 
-export function resolveIntervalLayout(program, config, scale) {
+export function resolveIntervalLayout(program, config, scale, label = "Interval legend") {
   const { plot, canvas } = resolveContinuousBounds(program);
   const labels = formatDiscretizedIntervals(scale.thresholds, config.labels.format);
-  const layout = resolveLegendItemLayout(plot, config, labels, config.symbol);
+  const layout = resolveLegendItemLayout(plot, config, labels, config.symbol, undefined, program.materializationConfigs.textMetrics);
   const occupiedBounds = layout.bounds;
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
     canvas,
-    "Interval legend layout", config
+    `${label} layout`, config
   );
   const background = resolveLegendBackgroundFromBounds(
     occupiedBounds,
     config.border,
     canvas,
-    "Interval legend", config
+    label, config
   );
   return { labels, ...layout, background };
 }
 
-export const rematerializeIntervalLegend = /* @__PURE__ */ action(
+export const rematerializeIntervalLegend = /* @__PURE__ */ closedAction(
   {
     op: "rematerializeIntervalLegend",
     description: "Rematerialize a discretized color interval legend."
-  },
+  }, [],
   function (args = {}) {
-    validateKeys(args, [], "rematerializeIntervalLegend");
     const stored = this.guideConfigs.legend?.interval;
     if (stored === undefined) {
       throw new Error("Interval legend requires stored configuration.");

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

@@ -1,4 +1,5 @@
-import { action } from "../../../../core/action.js";
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
+import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import { validateKeys } from "../../../../core/validation.js";
 import { mapLinearValues } from "../../../../grammar/scales/index.js";
@@ -94,7 +95,7 @@ function resolveOpacityLayout(program, config, scale) {
     config.labels.format
   );
   const symbolExtent = config.symbol.radius + (config.symbol.strokeWidth ?? 0) / 2;
-  const labelWidths = texts.map(text => measureTextWidth(text, config.labels));
+  const labelWidths = texts.map(text => measureTextWidth(text, config.labels, program.materializationConfigs.textMetrics));
   let symbols;
   let labels;
   let title;
@@ -124,7 +125,7 @@ function resolveOpacityLayout(program, config, scale) {
       align: config.position === "right" ? "left" : "right"
     };
   } else if (config.titlePosition === "left") {
-    const titleWidth = config.titleVisible === false ? 0 : measureTextWidth(config.title, config.titleStyle);
+    const titleWidth = config.titleVisible === false ? 0 : measureTextWidth(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
     const titlePrefix = config.titleVisible === false ? 0 : titleWidth + 20;
     const samplesWidth = labelWidths.reduce(
       (sum, width) => sum + symbolExtent * 2 + config.labels.offset + width,
@@ -187,9 +188,9 @@ function resolveOpacityLayout(program, config, scale) {
     title,
     config.title,
     config.titleStyle
-  );
+  , program.materializationConfigs.textMetrics);
   const labelBounds = labels.map((label, index) =>
-    resolveLegendTextBounds(label, texts[index], config.labels)
+    resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
   const symbolBounds = symbols.map(symbol => ({
     left: symbol.x - symbolExtent,
@@ -212,13 +213,12 @@ function resolveOpacityLayout(program, config, scale) {
   return { values, texts, symbols, labels, title, background };
 }
 
-export const rematerializeOpacityLegend = /* @__PURE__ */ action(
+export const rematerializeOpacityLegend = /* @__PURE__ */ closedAction(
   {
     op: "rematerializeOpacityLegend",
     description: "Rematerialize a field-opacity sample legend."
-  },
+  }, [],
   function (args = {}) {
-    validateKeys(args, [], "rematerializeOpacityLegend");
     const stored = this.guideConfigs.legend?.opacity;
     if (stored === undefined) {
       throw new Error("Opacity legend requires stored configuration.");
@@ -229,7 +229,7 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
     const opacities = mapLinearValues(layout.values, scale.domain, scale.range, {
       clamp: scale.clamp ?? false
     });
-    let next = this
+    let next = editGraphicProperties(editGraphicProperties(editGraphicProperties(this
       .editSemantic({
         property: "guide.legend.opacity.scale",
         value: encoding.scale
@@ -238,57 +238,20 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
         property: "guide.legend.opacity.title",
         value: config.title
       })
-      ._withLegendConfig("opacity", currentConfig)
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "length",
-        value: layout.values.length
-      })
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "x",
-        value: layout.symbols.map(symbol => symbol.x)
-      })
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "y",
-        value: layout.symbols.map(symbol => symbol.y)
-      })
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "radius",
-        value: config.symbol.radius
-      })
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "fill",
-        value: config.symbol.fill
-      })
-      .editGraphics({
-        target: "opacityLegendSymbols",
-        property: "opacity",
-        value: opacities
-      })
-      .editGraphics({
-        target: "opacityLegendLabels",
-        property: "length",
-        value: layout.values.length
-      })
-      .editGraphics({
-        target: "opacityLegendLabels",
-        property: "x",
-        value: layout.labels.map(label => label.x)
-      })
-      .editGraphics({
-        target: "opacityLegendLabels",
-        property: "y",
-        value: layout.labels.map(label => label.y)
-      })
-      .editGraphics({
-        target: "opacityLegendLabels",
-        property: "text",
-        value: layout.texts
-      });
+      ._withLegendConfig("opacity", currentConfig), "opacityLegendSymbols", {
+      length: layout.values.length,
+      x: layout.symbols.map(symbol => symbol.x),
+      y: layout.symbols.map(symbol => symbol.y)
+    }), "opacityLegendSymbols", {
+      radius: config.symbol.radius,
+      fill: config.symbol.fill,
+      opacity: opacities
+    }), "opacityLegendLabels", {
+      length: layout.values.length,
+      x: layout.labels.map(label => label.x),
+      y: layout.labels.map(label => label.y),
+      text: layout.texts
+    });
     next = editLegendBackground(
       next,
       "opacityLegendBackground",
@@ -316,22 +279,11 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
       { align: layout.labels[0].align }
     );
     if (config.titleVisible === false) return next;
-    next = next
-      .editGraphics({
-        target: "opacityLegendTitle",
-        property: "x",
-        value: layout.title.x
-      })
-      .editGraphics({
-        target: "opacityLegendTitle",
-        property: "y",
-        value: layout.title.y
-      })
-      .editGraphics({
-        target: "opacityLegendTitle",
-        property: "text",
-        value: config.title
-      });
+    next = editGraphicProperties(next, "opacityLegendTitle", {
+      x: layout.title.x,
+      y: layout.title.y,
+      text: config.title
+    });
     return styleContinuousText(
       next,
       "opacityLegendTitle",
@@ -419,13 +371,12 @@ export const createOpacityLegend = /* @__PURE__ */ action(
   }
 );
 
-export const removeOpacityLegend = /* @__PURE__ */ action(
+export const removeOpacityLegend = /* @__PURE__ */ closedAction(
   {
     op: "removeOpacityLegend",
     description: "Remove a field-opacity legend after switching to constant opacity."
-  },
+  }, [],
   function (args = {}) {
-    validateKeys(args, [], "removeOpacityLegend");
     if (this.guideConfigs.legend?.opacity === undefined) return this;
     const targets = [
       "opacityLegendBackground",