ggaction 0.0.13 → 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,
@@ -20,24 +21,26 @@ import {
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 export const DEFAULT_GRADIENT_SIZE = Object.freeze({ length: 120, thickness: 12 });
 
 const GRADIENT_OPTIONS = Object.freeze(["length", "thickness"]);
 
-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;
   const thickness = config.gradient.thickness;
+  const titleGap = config.blockGap ?? 12;
   let x;
   let y;
   if (config.position === "right") {
     x = plot.x + plot.width + config.offset;
-    y = plot.y + 46;
+    y = plot.y + 46 + titleGap - 12;
   } else if (config.position === "left") {
     x = plot.x - config.offset - thickness;
-    y = plot.y + 46;
+    y = plot.y + 46 + titleGap - 12;
   } else {
     x = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - length
@@ -46,13 +49,13 @@ function resolveGradientLayout(program, config, scale) {
       ? plot.y - config.offset - thickness - config.labels.offset -
         config.labels.fontSize
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12);
+        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + titleGap);
   }
   const title = vertical
     ? { x, y: plot.y + 20, align: "left" }
     : {
         x: x + length / 2,
-        y: y - 12 - config.titleStyle.fontSize / 2,
+        y: y - titleGap - config.titleStyle.fontSize / 2,
         align: "center"
       };
   const values = [...sampleContinuousValues(scale.domain, config.count)];
@@ -109,25 +112,25 @@ 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,
@@ -135,11 +138,11 @@ 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,
@@ -161,152 +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 } = resolveGradientConfig(this, stored);
-    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", config)
-      .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.");
@@ -323,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/index.js

@@ -5,6 +5,7 @@ import {
   removeOpacityLegend
 } from "./opacity.js";
 import { createIntervalLegend, rematerializeIntervalLegend } from "./interval.js";
+import { registerStrokeColorLegendActions } from "./stroke.js";
 
 export { createGradientLegend, rematerializeGradientLegend } from "./gradient.js";
 export {
@@ -20,6 +21,7 @@ export function registerContinuousLegendActions(ProgramClass) {
   ProgramClass.prototype.rematerializeOpacityLegend = rematerializeOpacityLegend;
   ProgramClass.prototype.removeOpacityLegend = removeOpacityLegend;
   registerIntervalLegendActions(ProgramClass);
+  registerStrokeColorLegendActions(ProgramClass);
 }
 
 export function registerGradientLegendActions(ProgramClass) {

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,
@@ -26,6 +26,7 @@ import {
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title",
@@ -85,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,
@@ -103,42 +105,42 @@ 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.");
     }
-    const { encoding, scale, config } = resolveIntervalConfig(this, stored);
+    const { encoding, scale, config: currentConfig } = resolveIntervalConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "interval", currentConfig);
     const layout = resolveIntervalLayout(this, config, scale);
     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), "colorLegendSymbols", {
+      ._withLegendConfig("interval", currentConfig), "colorLegendSymbols", {
       length: scale.range.length,
       x: layout.symbolX,
       y: layout.itemY.map(value => value - config.symbol.height / 2),
@@ -146,7 +148,10 @@ export const rematerializeIntervalLegend = /* @__PURE__ */ action(
       height: config.symbol.height,
       fill: scale.range,
       stroke: config.symbol.stroke,
-      strokeWidth: config.symbol.strokeWidth
+      strokeWidth: config.symbol.strokeWidth,
+      ...(config.blockSymbol?.opacity === undefined
+        ? {}
+        : { opacity: config.blockSymbol.opacity })
     });
     next = editGraphicProperties(next, "colorLegendLabels", {
       length: layout.labels.length,