ggaction 0.0.12 → 0.0.13

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

@@ -1,8 +1,10 @@
+import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
 import { action } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import {
   validateKeys,
-  validateOptionObject
+  validateOptionObject,
+  validateNonEmptyString
 } from "../../../../core/validation.js";
 import { formatDiscretizedIntervals } from "../../../../grammar/scales/index.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
@@ -12,11 +14,12 @@ import {
   editGraphicProperties,
   editLegendBackground,
   normalizeLegendBorder,
+  normalizeItemLegendLayout,
   normalizeLegendTextOptions,
+  normalizeLegendTitleOptions,
   resolveContinuousBounds,
-  resolveContinuousPoint,
+  resolveContinuousColorLayer,
   resolveLegendBackgroundFromBounds,
-  resolveLegendTextBounds,
   styleContinuousText,
   validateNonNegative,
   validatePositive
@@ -26,7 +29,7 @@ import { resolveLegendGraphicPlacement } from
 
 const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title",
-  "symbol", "labels", "titleStyle", "itemGap", "direction", "border"
+  "symbol", "labels", "titleStyle", "itemGap", "direction", "border", "layout", "columns", "titlePosition"
 ];
 const SYMBOL_OPTIONS = [
   "width", "height", "stroke", "strokeWidth"
@@ -41,12 +44,7 @@ export function normalizeIntervalLegend(args) {
   )) {
     throw new Error('Interval legend requires channels: ["color"].');
   }
-  if ((args.position ?? "right") !== "right") {
-    throw new Error('Interval legends currently support position "right".');
-  }
-  if ((args.direction ?? "vertical") !== "vertical") {
-    throw new Error('Interval legends currently support direction "vertical".');
-  }
+  const layout = normalizeItemLegendLayout(args);
   if (args.symbol !== undefined && !isPlainObject(args.symbol)) {
     throw new TypeError("createLegend.symbol must be a plain object.");
   }
@@ -61,17 +59,11 @@ export function normalizeIntervalLegend(args) {
   validatePositive(symbol.width, "Legend symbol width");
   validatePositive(symbol.height, "Legend symbol height");
   validateNonNegative(symbol.strokeWidth, "Legend symbol strokeWidth");
-  const offset = args.offset ?? 30;
-  const itemGap = args.itemGap ?? 28;
-  validateNonNegative(offset, "Legend offset");
-  validatePositive(itemGap, "Legend itemGap");
+  if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
+  validateNonEmptyString(symbol.stroke, "Legend symbol stroke");
   return {
     target: args.target,
-    position: "right",
-    direction: "vertical",
-    align: args.align ?? "center",
-    offset,
-    itemGap,
+    ...layout,
     title: args.title,
     inferredTitle: args.title === undefined,
     titleVisible: true,
@@ -83,7 +75,7 @@ export function normalizeIntervalLegend(args) {
       fontFamily: DEFAULT_FONT_FAMILY,
       fontWeight: "normal"
     }),
-    titleStyle: normalizeLegendTextOptions(args.titleStyle, "createLegend.titleStyle", {
+    titleStyle: normalizeLegendTitleOptions(args.titleStyle, "createLegend.titleStyle", {
       color: DEFAULT_COLORS.text,
       fontSize: 13,
       fontFamily: DEFAULT_FONT_FAMILY,
@@ -93,8 +85,8 @@ export function normalizeIntervalLegend(args) {
   };
 }
 
-function resolveIntervalConfig(program, stored) {
-  const layer = resolveContinuousPoint(program, stored.target, "color");
+export function resolveIntervalConfig(program, stored) {
+  const layer = resolveContinuousColorLayer(program, stored.target);
   const encoding = layer.encoding.color;
   if (encoding.fieldType !== "quantitative") {
     throw new Error("Interval legend requires quantitative color.");
@@ -111,47 +103,26 @@ function resolveIntervalConfig(program, stored) {
     } };
 }
 
-function resolveIntervalLayout(program, config, scale) {
+export function resolveIntervalLayout(program, config, scale) {
   const { plot, canvas } = resolveContinuousBounds(program);
-  const labels = formatDiscretizedIntervals(scale.thresholds);
-  const symbolX = plot.x + plot.width + config.offset;
-  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 };
-  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
-    }))
-  ];
+  const labels = formatDiscretizedIntervals(scale.thresholds, config.labels.format);
+  const layout = resolveLegendItemLayout(plot, config, labels, config.symbol);
+  const occupiedBounds = layout.bounds;
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
     canvas,
-    "Interval legend layout"
+    "Interval legend layout", config
   );
   const background = resolveLegendBackgroundFromBounds(
     occupiedBounds,
     config.border,
     canvas,
-    "Interval legend"
+    "Interval legend", config
   );
-  return { labels, symbolX, labelX, itemY, title, background };
+  return { labels, ...layout, background };
 }
 
-export const rematerializeIntervalLegend = action(
+export const rematerializeIntervalLegend = /* @__PURE__ */ action(
   {
     op: "rematerializeIntervalLegend",
     description: "Rematerialize a discretized color interval legend."
@@ -196,11 +167,57 @@ export const rematerializeIntervalLegend = action(
       y: layout.title.y,
       text: config.title
     });
-    return styleContinuousText(next, "colorLegendTitle", config.titleStyle);
+    return styleContinuousText(next, "colorLegendTitle", config.titleStyle, { align: layout.title.align });
   }
 );
 
-export const createIntervalLegend = action(
+export function createIntervalLegendFromConfig(program, config) {
+  const resolved = resolveIntervalConfig(program, config);
+  resolveIntervalLayout(program, resolved.config, resolved.scale);
+  let next = program
+    .editSemantic({
+      property: "guide.legend.color.scale",
+      value: resolved.encoding.scale
+    })
+    .editSemantic({
+      property: "guide.legend.color.title",
+      value: resolved.config.title
+    })
+    ._withLegendConfig("interval", resolved.config);
+  const placement = resolveLegendGraphicPlacement(next);
+  if (resolved.config.border !== false) {
+    next = next.createGraphics({
+      id: "colorLegendBackground",
+      type: "rect",
+      ...placement
+    });
+  }
+  next = next
+    .createGraphics({
+      id: "colorLegendSymbols",
+      type: "rect",
+      length: 0,
+      ...resolveLegendGraphicPlacement(next, resolved.config.border === false
+        ? {}
+        : { after: "colorLegendBackground" })
+    })
+    .createGraphics({
+      id: "colorLegendLabels",
+      type: "text",
+      length: 0,
+      ...placement
+    });
+  if (resolved.config.titleVisible !== false) {
+    next = next.createGraphics({
+      id: "colorLegendTitle",
+      type: "text",
+      ...placement
+    });
+  }
+  return next.rematerializeIntervalLegend();
+}
+
+export const createIntervalLegend = /* @__PURE__ */ action(
   {
     op: "createIntervalLegend",
     description: "Create a discretized color interval legend."
@@ -212,44 +229,6 @@ export const createIntervalLegend = action(
     if (this.graphicSpec.objects.colorLegendSymbols !== undefined) {
       throw new Error("createIntervalLegend requires a missing interval legend.");
     }
-    let next = this
-      .editSemantic({
-        property: "guide.legend.color.scale",
-        value: resolved.encoding.scale
-      })
-      .editSemantic({
-        property: "guide.legend.color.title",
-        value: resolved.config.title
-      })
-      ._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(next, resolved.config.border === false
-          ? {}
-          : { after: "colorLegendBackground" })
-      })
-      .createGraphics({
-        id: "colorLegendLabels",
-        type: "text",
-        length: 0,
-        ...placement
-      })
-      .createGraphics({
-        id: "colorLegendTitle",
-        type: "text",
-        ...placement
-      })
-      .rematerializeIntervalLegend();
+    return createIntervalLegendFromConfig(this, resolved.config);
   }
 );

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

@@ -11,7 +11,7 @@ import {
   normalizeContinuousLegend,
   requireResolvedLegendScale,
   resolveContinuousBounds,
-  resolveContinuousPoint,
+  resolveContinuousLegendLayer,
   resolveLegendBackgroundFromBounds,
   resolveLegendTextBounds,
   sampleContinuousValues,
@@ -62,7 +62,7 @@ export function normalizeOpacitySymbol(value) {
 }
 
 function resolveOpacityConfig(program, config) {
-  const layer = resolveContinuousPoint(program, config.target, "opacity");
+  const layer = resolveContinuousLegendLayer(program, config.target, "opacity");
   const encoding = layer.encoding.opacity;
   if (encoding.fieldType !== "quantitative") {
     throw new Error("Opacity legend requires quantitative field opacity.");
@@ -86,8 +86,14 @@ function resolveOpacityLayout(program, config, scale) {
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const values = sampleContinuousValues(scale.domain, config.count);
-  const texts = formatContinuousValues(values, scale.domain, "quantitative");
-  const radius = config.symbol.radius;
+  const texts = formatContinuousValues(
+    values,
+    scale.domain,
+    "quantitative",
+    config.labels.format
+  );
+  const symbolExtent = config.symbol.radius + (config.symbol.strokeWidth ?? 0) / 2;
+  const labelWidths = texts.map(text => measureTextWidth(text, config.labels));
   let symbols;
   let labels;
   let title;
@@ -95,57 +101,61 @@ function resolveOpacityLayout(program, config, scale) {
     const baseX = config.position === "right"
       ? plot.x + plot.width + config.offset
       : plot.x - config.offset;
-    const y = values.map((_, index) => plot.y + 46 + index * config.itemGap);
+    const itemHeight = Math.max(symbolExtent * 2, config.labels.fontSize);
+    const pitch = Math.max(config.itemGap, itemHeight);
+    const firstY = Math.max(plot.y + 46, config.titleVisible === false ? plot.y + 46
+      : plot.y + 20 + config.titleStyle.fontSize / 2 + 12 + itemHeight / 2);
+    const y = values.map((_, index) => firstY + index * pitch);
     symbols = y.map(itemY => ({
-      x: config.position === "right" ? baseX + radius : baseX - radius,
+      x: config.position === "right" ? baseX + symbolExtent : baseX - symbolExtent,
       y: itemY
     }));
     labels = y.map(itemY => ({
       x: config.position === "right"
-        ? baseX + radius * 2 + config.labels.offset - 2
-        : baseX - radius * 2 - config.labels.offset + 2,
+        ? baseX + symbolExtent * 2 + config.labels.offset
+        : baseX - symbolExtent * 2 - config.labels.offset,
       y: itemY,
       align: config.position === "right" ? "left" : "right"
     }));
     title = {
-      x: config.position === "right" ? baseX : baseX - radius * 2,
+      x: config.position === "right" ? baseX : baseX - symbolExtent * 2,
       y: plot.y + 20,
       align: config.position === "right" ? "left" : "right"
     };
   } else if (config.titlePosition === "left") {
-    const titleWidth = measureTextWidth(config.title, config.titleStyle);
-    const labelWidths = texts.map(text =>
-      measureTextWidth(text, config.labels)
-    );
+    const titleWidth = config.titleVisible === false ? 0 : measureTextWidth(config.title, config.titleStyle);
+    const titlePrefix = config.titleVisible === false ? 0 : titleWidth + 20;
     const samplesWidth = labelWidths.reduce(
-      (sum, width) => sum + radius * 2 + config.labels.offset + width,
+      (sum, width) => sum + symbolExtent * 2 + config.labels.offset + width,
       0
     ) + config.itemGap * (values.length - 1);
-    const width = titleWidth + 20 + samplesWidth;
+    const width = titlePrefix + samplesWidth;
     const startX = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
     const height = Math.max(
-      radius * 2,
+      symbolExtent * 2,
       config.labels.fontSize,
-      config.titleStyle.fontSize
+      config.titleVisible === false ? 0 : config.titleStyle.fontSize
     );
     const centerY = config.position === "top"
       ? plot.y - config.offset - height / 2
       : plot.y + plot.height + config.offset + height / 2;
     title = { x: startX, y: centerY, align: "left" };
-    let cursor = startX + titleWidth + 20;
+    let cursor = startX + titlePrefix;
     symbols = [];
     labels = [];
     for (let index = 0; index < values.length; index += 1) {
-      const symbolX = cursor + radius;
+      const symbolX = cursor + symbolExtent;
       symbols.push({ x: symbolX, y: centerY });
-      const labelX = symbolX + radius + config.labels.offset;
+      const labelX = symbolX + symbolExtent + config.labels.offset;
       labels.push({ x: labelX, y: centerY, align: "left" });
       cursor = labelX + labelWidths[index] + config.itemGap;
     }
   } else {
-    const width = (values.length - 1) * Math.max(56, config.itemGap * 2);
+    const pitch = Math.max(56, config.itemGap * 2,
+      symbolExtent * 2 + config.itemGap, Math.max(...labelWidths) + config.itemGap);
+    const width = (values.length - 1) * pitch;
     const startX = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
@@ -153,27 +163,25 @@ function resolveOpacityLayout(program, config, scale) {
     const labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
       ? plot.y - config.offset - config.labels.fontSize -
-        config.labels.offset - radius
+        config.labels.offset - symbolExtent
       : plot.y + plot.height + config.offset +
-        config.titleStyle.fontSize + 12 + radius;
+        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12) + symbolExtent;
     symbols = values.map((_, index) => ({
       x: startX + index * width / (values.length - 1),
       y
     }));
     labels = symbols.map(symbol => ({
       x: symbol.x,
-      y: symbol.y + radius + config.labels.offset + labelHalf,
+      y: symbol.y + symbolExtent + config.labels.offset + labelHalf,
       align: "center"
     }));
     title = {
       x: startX + width / 2,
-      y: y - radius - 12 - titleHalf,
+      y: y - symbolExtent - 12 - titleHalf,
       align: "center"
     };
   }
-  const strokeExtent = (config.symbol.strokeWidth ?? 0) / 2;
-  const symbolExtent = radius + strokeExtent;
-  const titleBounds = resolveLegendTextBounds(
+  const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
     title,
     config.title,
     config.titleStyle
@@ -187,22 +195,22 @@ function resolveOpacityLayout(program, config, scale) {
     top: symbol.y - symbolExtent,
     bottom: symbol.y + symbolExtent
   }));
-  const occupiedBounds = [titleBounds, ...labelBounds, ...symbolBounds];
+  const occupiedBounds = [...(config.titleVisible === false ? [] : [titleBounds]), ...labelBounds, ...symbolBounds];
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
     canvas,
-    "Opacity legend layout"
+    "Opacity legend layout", config
   );
   const background = resolveLegendBackgroundFromBounds(
     occupiedBounds,
     config.border,
     canvas,
-    "Opacity legend"
+    "Opacity legend", config
   );
   return { values, texts, symbols, labels, title, background };
 }
 
-export const rematerializeOpacityLegend = action(
+export const rematerializeOpacityLegend = /* @__PURE__ */ action(
   {
     op: "rematerializeOpacityLegend",
     description: "Rematerialize a field-opacity sample legend."
@@ -330,72 +338,85 @@ export const rematerializeOpacityLegend = action(
   }
 );
 
-export const createOpacityLegend = action(
+
+export function resolveOpacityLegendCreation(program, args = {}) {
+  const config = normalizeContinuousLegend(args, "opacity");
+  if (args.channels !== undefined && (
+    !Array.isArray(args.channels) ||
+    args.channels.length !== 1 ||
+    args.channels[0] !== "opacity"
+  )) {
+    throw new Error('Opacity legend requires channels: ["opacity"].');
+  }
+  config.symbol = normalizeOpacitySymbol(args.symbol);
+  config.titleVisible = true;
+  const resolved = resolveOpacityConfig(program, config);
+  return resolved;
+}
+
+export function createOpacityLegendFromConfig(program, config) {
+  const resolved = resolveOpacityConfig(program, config);
+  resolveOpacityLayout(program, resolved.config, resolved.scale);
+  let next = program
+    .editSemantic({
+      property: "guide.legend.opacity.scale",
+      value: resolved.encoding.scale
+    })
+    .editSemantic({
+      property: "guide.legend.opacity.title",
+      value: resolved.config.title
+    })
+    ._withLegendConfig("opacity", resolved.config);
+  if (resolved.config.border !== false) {
+    next = next.createGraphics({
+      id: "opacityLegendBackground",
+      type: "rect",
+      ...resolveLegendGraphicPlacement(next)
+    });
+  }
+  next = next
+    .createGraphics({
+      id: "opacityLegendSymbols",
+      type: "circle",
+      length: 0,
+      ...resolveLegendGraphicPlacement(next, resolved.config.border === false
+        ? {}
+        : { after: "opacityLegendBackground" })
+    })
+    .createGraphics({
+      id: "opacityLegendLabels",
+      type: "text",
+      length: 0,
+      ...resolveLegendGraphicPlacement(next)
+    });
+  if (resolved.config.titleVisible !== false) {
+    next = next.createGraphics({
+      id: "opacityLegendTitle",
+      type: "text",
+      ...resolveLegendGraphicPlacement(next)
+    });
+  }
+  return next.rematerializeOpacityLegend();
+}
+
+export const createOpacityLegend = /* @__PURE__ */ action(
   {
     op: "createOpacityLegend",
     description: "Create a field-opacity sample legend."
   },
   function (args = {}) {
-    const config = normalizeContinuousLegend(args, "opacity");
-    if (args.channels !== undefined && (
-      !Array.isArray(args.channels) ||
-      args.channels.length !== 1 ||
-      args.channels[0] !== "opacity"
-    )) {
-      throw new Error('Opacity legend requires channels: ["opacity"].');
-    }
-    config.symbol = normalizeOpacitySymbol(args.symbol);
-    config.titleVisible = true;
-    const resolved = resolveOpacityConfig(this, config);
+    const resolved = resolveOpacityLegendCreation(this, args);
     resolveOpacityLayout(this, resolved.config, resolved.scale);
     if (this.graphicSpec.objects.opacityLegendSymbols !== undefined) {
       throw new Error(
         "createOpacityLegend requires a missing opacity legend."
       );
     }
-    let next = this
-      .editSemantic({
-        property: "guide.legend.opacity.scale",
-        value: resolved.encoding.scale
-      })
-      .editSemantic({
-        property: "guide.legend.opacity.title",
-        value: resolved.config.title
-      })
-      ._withLegendConfig("opacity", resolved.config);
-    if (resolved.config.border !== false) {
-      next = next.createGraphics({
-        id: "opacityLegendBackground",
-        type: "rect",
-        ...resolveLegendGraphicPlacement(next)
-      });
-    }
-    return next
-      .createGraphics({
-        id: "opacityLegendSymbols",
-        type: "circle",
-        length: 0,
-        ...resolveLegendGraphicPlacement(next),
-        ...(resolved.config.border === false
-          ? {}
-          : { after: "opacityLegendBackground" })
-      })
-      .createGraphics({
-        id: "opacityLegendLabels",
-        type: "text",
-        length: 0,
-        ...resolveLegendGraphicPlacement(next)
-      })
-      .createGraphics({
-        id: "opacityLegendTitle",
-        type: "text",
-        ...resolveLegendGraphicPlacement(next)
-      })
-      .rematerializeOpacityLegend();
+    return createOpacityLegendFromConfig(this, resolved.config);
   }
 );
 
-export const removeOpacityLegend = action(
+export const removeOpacityLegend = /* @__PURE__ */ action(
   {
     op: "removeOpacityLegend",
     description: "Remove a field-opacity legend after switching to constant opacity."

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

@@ -0,0 +1,27 @@
+import { resolveCategoricalLegendConfig } from "./categorical/actions.js";
+import { resolveGradientLegendCreation } from "./continuous/gradient.js";
+import { resolveOpacityLegendCreation } from "./continuous/opacity.js";
+import { normalizeIntervalLegend, resolveIntervalConfig } from "./continuous/interval.js";
+import { resolveSizeLegendConfig } from "./size.js";
+import { resolveStrokeWidthLegendConfig } from "./strokeWidth.js";
+
+export function resolveLegendStepConfig(program, step) {
+  switch (step.op) {
+    case "createCategoricalLegend": {
+      const config = resolveCategoricalLegendConfig(program, step.args);
+      return { kind: config.kind, config };
+    }
+    case "createGradientLegend":
+      return { kind: "gradient", config: resolveGradientLegendCreation(program, step.args).config };
+    case "createOpacityLegend":
+      return { kind: "opacity", config: resolveOpacityLegendCreation(program, step.args).config };
+    case "createIntervalLegend":
+      return { kind: "interval", config: resolveIntervalConfig(program, normalizeIntervalLegend(step.args)).config };
+    case "createSizeLegend":
+      return { kind: "size", config: resolveSizeLegendConfig(program, step.args) };
+    case "createStrokeWidthLegend":
+      return { kind: "strokeWidth", config: resolveStrokeWidthLegendConfig(program, step.args) };
+    default: throw new Error(`Unsupported legend creation owner "${step.op}".`);
+  }
+}
+