ggaction 0.0.6 → 0.0.8

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

@@ -39,12 +39,18 @@ function resolveGradientLayout(program, config, scale) {
       : config.align === "right" ? plot.x + plot.width - length
         : plot.x + (plot.width - length) / 2;
     y = config.position === "top"
-      ? plot.y - config.offset - thickness
-      : plot.y + plot.height + config.offset;
+      ? plot.y - config.offset - thickness - config.labels.offset -
+        config.labels.fontSize
+      : plot.y + plot.height + config.offset +
+        config.titleStyle.fontSize + 12;
   }
   const title = vertical
     ? { x, y: plot.y + 20, align: "left" }
-    : { x: x + length / 2, y: y - 20, align: "center" };
+    : {
+        x: x + length / 2,
+        y: y - 12 - config.titleStyle.fontSize / 2,
+        align: "center"
+      };
   const values = sampleContinuousValues(scale.domain, config.count);
   const fractions = values.map((_, index) => index / (values.length - 1));
   const labelOffset = config.labels.offset;
@@ -58,9 +64,7 @@ function resolveGradientLayout(program, config, scale) {
       }))
     : fractions.map(fraction => ({
         x: x + length * fraction,
-        y: config.position === "top"
-          ? y - labelOffset
-          : y + thickness + labelOffset,
+        y: y + thickness + labelOffset + config.labels.fontSize / 2,
         align: "center"
       }));
   const ticks = vertical
@@ -72,9 +76,9 @@ function resolveGradientLayout(program, config, scale) {
       }))
     : labels.map(label => ({
         x1: label.x,
-        y1: config.position === "top" ? y : y + thickness,
+        y1: y + thickness,
         x2: label.x,
-        y2: config.position === "top" ? y - 6 : y + thickness + 6
+        y2: y + thickness + 6
       }));
   assertLegendInsideCanvas([
     title,

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

@@ -15,11 +15,15 @@ export {
 export { createIntervalLegend, rematerializeIntervalLegend } from "./interval.js";
 
 export function registerContinuousLegendActions(ProgramClass) {
-  ProgramClass.prototype.createGradientLegend = createGradientLegend;
-  ProgramClass.prototype.rematerializeGradientLegend = rematerializeGradientLegend;
+  registerGradientLegendActions(ProgramClass);
   ProgramClass.prototype.createOpacityLegend = createOpacityLegend;
   ProgramClass.prototype.rematerializeOpacityLegend = rematerializeOpacityLegend;
   ProgramClass.prototype.removeOpacityLegend = removeOpacityLegend;
   ProgramClass.prototype.createIntervalLegend = createIntervalLegend;
   ProgramClass.prototype.rematerializeIntervalLegend = rematerializeIntervalLegend;
 }
+
+export function registerGradientLegendActions(ProgramClass) {
+  ProgramClass.prototype.createGradientLegend = createGradientLegend;
+  ProgramClass.prototype.rematerializeGradientLegend = rematerializeGradientLegend;
+}

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

@@ -2,6 +2,7 @@ import { action } from "../../../../core/action.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import { validateKeys } from "../../../../core/validation.js";
 import { mapLinearValues } from "../../../../grammar/scales/index.js";
+import { measureTextWidth } from "../../../../core/textMetrics.js";
 import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
 import {
   assertLegendInsideCanvas,
@@ -84,6 +85,7 @@ 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;
   let symbols;
   let labels;
@@ -109,29 +111,81 @@ function resolveOpacityLayout(program, config, scale) {
       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 samplesWidth = labelWidths.reduce(
+      (sum, width) => sum + radius * 2 + config.labels.offset + width,
+      0
+    ) + config.itemGap * (values.length - 1);
+    const width = titleWidth + 20 + 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,
+      config.labels.fontSize,
+      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;
+    symbols = [];
+    labels = [];
+    for (let index = 0; index < values.length; index += 1) {
+      const symbolX = cursor + radius;
+      symbols.push({ x: symbolX, y: centerY });
+      const labelX = symbolX + radius + 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 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 labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
-      ? plot.y - config.offset - radius
-      : plot.y + plot.height + config.offset + radius;
+      ? plot.y - config.offset - config.labels.fontSize -
+        config.labels.offset - radius
+      : plot.y + plot.height + config.offset +
+        config.titleStyle.fontSize + 12 + radius;
     symbols = values.map((_, index) => ({
       x: startX + index * width / (values.length - 1),
       y
     }));
     labels = symbols.map(symbol => ({
       x: symbol.x,
-      y: config.position === "top"
-        ? symbol.y - radius - config.labels.offset
-        : symbol.y + radius + config.labels.offset,
+      y: symbol.y + radius + config.labels.offset + labelHalf,
       align: "center"
     }));
-    title = { x: startX + width / 2, y: y - 26, align: "center" };
+    title = {
+      x: startX + width / 2,
+      y: y - radius - 12 - titleHalf,
+      align: "center"
+    };
   }
+  const titleWidth = measureTextWidth(config.title, config.titleStyle);
+  const titleEdge = {
+    x: title.x + (title.align === "left" ? titleWidth : -titleWidth),
+    y: title.y
+  };
+  const labelEdges = labels.map((label, index) => {
+    const width = measureTextWidth(texts[index], config.labels);
+    return {
+      x: label.x + (label.align === "left"
+        ? width
+        : label.align === "right" ? -width : width / 2),
+      y: label.y
+    };
+  });
   assertLegendInsideCanvas(
-    [title, ...symbols, ...labels],
+    [title, titleEdge, ...symbols, ...labels, ...labelEdges],
     canvas,
     "Opacity legend layout"
   );
@@ -145,14 +199,17 @@ function resolveOpacityLayout(program, config, scale) {
       x: symbol.x - radius,
       y: symbol.y - radius
     })),
-    ...labels.map(label => ({
-      x: label.x + (
-        label.align === "left" ? 42 : label.align === "right" ? -42 : 0
-      ),
+    ...labels.map((label, index) => ({
+      x: label.x + (label.align === "left"
+        ? measureTextWidth(
+            texts[index],
+            config.labels
+          )
+        : label.align === "right" ? -42 : 0),
       y: label.y
     }))
   ], config.border, canvas, "Opacity legend");
-  return { values, symbols, labels, title, background };
+  return { values, texts, symbols, labels, title, background };
 }
 
 export const rematerializeOpacityLegend = action(
@@ -229,11 +286,7 @@ export const rematerializeOpacityLegend = action(
       .editGraphics({
         target: "opacityLegendLabels",
         property: "text",
-        value: formatContinuousValues(
-          layout.values,
-          scale.domain,
-          "quantitative"
-        )
+        value: layout.texts
       });
     next = editLegendBackground(
       next,

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

@@ -54,7 +54,7 @@ function editContinuous(program, kind, previous, args) {
     ? ["target", "position", "align", "offset", "title", "labels",
       "titleStyle", "border", "count", "gradient"]
     : ["target", "position", "align", "offset", "title", "symbol", "labels",
-      "titleStyle", "itemGap", "border", "count"];
+      "titleStyle", "titlePosition", "itemGap", "border", "count"];
   for (const key of Object.keys(args)) {
     if (!allowed.includes(key)) throw new Error(`${kind} legend does not accept ${key}.`);
   }
@@ -69,18 +69,25 @@ function editContinuous(program, kind, previous, args) {
   const title = titleMode === "auto"
     ? inferred
     : typeof titleMode === "string" ? titleMode : previous.title;
+  const titlePosition = args.titlePosition ?? previous.titlePosition;
+  const enteringInline = kind === "opacity" &&
+    titlePosition === "left" && previous.titlePosition !== "left";
+  const labels = mergeObject(previous.labels, args.labels);
   const normalized = normalizeContinuousLegend({
     target: previous.target,
     position: args.position ?? previous.position,
     align: args.align ?? previous.align,
     offset: args.offset ?? previous.offset,
     count: args.count ?? previous.count,
+    titlePosition,
     title,
-    labels: mergeObject(previous.labels, args.labels),
+    labels: enteringInline && args.labels?.offset === undefined
+      ? { ...labels, offset: 8 }
+      : labels,
     titleStyle: mergeObject(previous.titleStyle, args.titleStyle),
     border: mergeBorder(previous.border, args.border),
     ...(kind === "opacity" ? {
-      itemGap: args.itemGap ?? previous.itemGap,
+      itemGap: args.itemGap ?? (enteringInline ? 20 : previous.itemGap),
       symbol: args.symbol ?? previous.symbol
     } : {})
   }, kind);
@@ -112,9 +119,7 @@ function editContinuous(program, kind, previous, args) {
     before: kind === "gradient" ? "colorGradientStrips" : "opacityLegendSymbols"
   });
   next = reconcileGraphic(next, `${prefix}Title`, titleVisible, { type: "text" });
-  return kind === "gradient"
-    ? next.rematerializeGradientLegend()
-    : next.rematerializeOpacityLegend();
+  return next.rematerializeLegend();
 }
 
 function editInterval(program, previous, args) {
@@ -165,7 +170,7 @@ function editInterval(program, previous, args) {
   next = reconcileGraphic(next, "colorLegendTitle", titleVisible, {
     type: "text"
   });
-  return next.rematerializeIntervalLegend();
+  return next.rematerializeLegend();
 }
 
 function editStrokeWidth(program, previous, args) {
@@ -220,7 +225,7 @@ function editStrokeWidth(program, previous, args) {
   next = reconcileGraphic(next, "strokeWidthLegendTitle", titleVisible, {
     type: "text"
   });
-  return next.rematerializeStrokeWidthLegend();
+  return next.rematerializeLegend();
 }
 
 function categoricalSymbolIds(config) {