ggaction 0.0.16 → 0.0.18

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

@@ -1,3 +1,4 @@
+import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
 import { resolveLegendItemLayout } from "../../../../layout/legendItems.js";
 import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
@@ -13,6 +14,7 @@ import {
   assertLegendBoundsInsideCanvas,
   editGraphicProperties,
   editLegendBackground,
+  normalizeInitialLegendTitle,
   normalizeLegendBorder,
   normalizeItemLegendLayout,
   normalizeLegendTextOptions,
@@ -60,14 +62,11 @@ export function normalizeIntervalLegend(args) {
   validatePositive(symbol.width, "Legend symbol width");
   validatePositive(symbol.height, "Legend symbol height");
   validateNonNegative(symbol.strokeWidth, "Legend symbol strokeWidth");
-  if (args.title !== undefined) validateNonEmptyString(args.title, "Legend title");
   validateNonEmptyString(symbol.stroke, "Legend symbol stroke");
   return {
     target: args.target,
     ...layout,
-    title: args.title,
-    inferredTitle: args.title === undefined,
-    titleVisible: true,
+    ...normalizeInitialLegendTitle(args.title),
     symbol,
     labels: normalizeLegendTextOptions(args.labels, "createLegend.labels", {
       offset: 8,
@@ -106,6 +105,7 @@ export function resolveIntervalConfig(program, stored, channel = "color") {
 }
 
 export function resolveIntervalLayout(program, config, scale, label = "Interval legend") {
+  config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
   const labels = formatDiscretizedIntervals(scale.thresholds, config.labels.format);
   const layout = resolveLegendItemLayout(plot, config, labels, config.symbol, undefined, program.materializationConfigs.textMetrics);

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

@@ -1,3 +1,5 @@
+import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
+import { alignLegendTitle, resolveLegendTitleText } from "../../../../layout/legendText.js";
 import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action, closedAction } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
@@ -23,6 +25,7 @@ import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
 import { resolveLegendSampleValues } from "../sampling.js";
 import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
+import { legendLabelLineHeight } from "../../../../layout/legend.js";
 
 const SYMBOL_OPTIONS = Object.freeze([
   "type", "radius", "fill", "stroke", "strokeWidth"
@@ -85,6 +88,7 @@ function resolveOpacityConfig(program, config) {
 }
 
 function resolveOpacityLayout(program, config, scale) {
+  config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
   const values = resolveLegendSampleValues(config, scale, "Opacity legend");
@@ -95,6 +99,8 @@ function resolveOpacityLayout(program, config, scale) {
     config.labels.format
   );
   const symbolExtent = config.symbol.radius + (config.symbol.strokeWidth ?? 0) / 2;
+  const titleText = config.titleVisible === false ? { width: 0, height: 0 }
+    : resolveLegendTitleText(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
   const labelWidths = texts.map(text => measureTextWidth(text, config.labels, program.materializationConfigs.textMetrics));
   let symbols;
   let labels;
@@ -103,10 +109,10 @@ function resolveOpacityLayout(program, config, scale) {
     const baseX = config.position === "right"
       ? plot.x + plot.width + config.offset
       : plot.x - config.offset;
-    const itemHeight = Math.max(symbolExtent * 2, config.labels.fontSize);
+    const itemHeight = Math.max(symbolExtent * 2, legendLabelLineHeight(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);
+      : plot.y + 20 + titleText.height / 2 + 12 + itemHeight / 2);
     const y = values.map((_, index) => firstY + index * pitch);
     symbols = y.map(itemY => ({
       x: config.position === "right" ? baseX + symbolExtent : baseX - symbolExtent,
@@ -125,7 +131,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, program.materializationConfigs.textMetrics);
+    const titleWidth = titleText.width;
     const titlePrefix = config.titleVisible === false ? 0 : titleWidth + 20;
     const samplesWidth = labelWidths.reduce(
       (sum, width) => sum + symbolExtent * 2 + config.labels.offset + width,
@@ -138,7 +144,7 @@ function resolveOpacityLayout(program, config, scale) {
     const height = Math.max(
       symbolExtent * 2,
       config.labels.fontSize,
-      config.titleVisible === false ? 0 : config.titleStyle.fontSize
+      titleText.height
     );
     const centerY = config.position === "top"
       ? plot.y - config.offset - height / 2
@@ -161,13 +167,13 @@ function resolveOpacityLayout(program, config, scale) {
     const startX = config.align === "left" ? plot.x
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
-    const titleHalf = config.titleStyle.fontSize / 2;
+    const titleHalf = titleText.height / 2;
     const labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
       ? plot.y - config.offset - config.labels.fontSize -
         config.labels.offset - symbolExtent
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12) + symbolExtent;
+        (config.titleVisible === false ? 0 : titleText.height + 12) + symbolExtent;
     const samplePitch = values.length === 1 ? 0 : width / (values.length - 1);
     symbols = values.map((_, index) => ({
       x: startX + index * samplePitch,
@@ -184,11 +190,6 @@ function resolveOpacityLayout(program, config, scale) {
       align: "center"
     };
   }
-  const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
-    title,
-    config.title,
-    config.titleStyle
-  , program.materializationConfigs.textMetrics);
   const labelBounds = labels.map((label, index) =>
     resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
@@ -198,6 +199,13 @@ function resolveOpacityLayout(program, config, scale) {
     top: symbol.y - symbolExtent,
     bottom: symbol.y + symbolExtent
   }));
+  if (config.titleVisible !== false) title = alignLegendTitle(title, config.title, config.titleStyle,
+    [...labelBounds, ...symbolBounds], program.materializationConfigs.textMetrics);
+  const titleBounds = config.titleVisible === false ? undefined : resolveLegendTextBounds(
+    title,
+    config.title,
+    config.titleStyle
+  , program.materializationConfigs.textMetrics, { hardBreaks: true });
   const occupiedBounds = [...(config.titleVisible === false ? [] : [titleBounds]), ...labelBounds, ...symbolBounds];
   assertLegendBoundsInsideCanvas(
     occupiedBounds,
@@ -304,7 +312,6 @@ export function resolveOpacityLegendCreation(program, args = {}) {
     throw new Error('Opacity legend requires channels: ["opacity"].');
   }
   config.symbol = normalizeOpacitySymbol(args.symbol);
-  config.titleVisible = true;
   const resolved = resolveOpacityConfig(program, config);
   return resolved;
 }