ggaction 0.0.13 → 0.0.16

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";
@@ -14,13 +15,14 @@ import {
   resolveContinuousLegendLayer,
   resolveLegendBackgroundFromBounds,
   resolveLegendTextBounds,
-  sampleContinuousValues,
   styleContinuousText,
   validateNonNegative,
   validatePositive
 } from "./common.js";
 import { resolveLegendGraphicPlacement } from
   "../../../../materialization/graphicHierarchy.js";
+import { resolveLegendSampleValues } from "../sampling.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 
 const SYMBOL_OPTIONS = Object.freeze([
   "type", "radius", "fill", "stroke", "strokeWidth"
@@ -85,7 +87,7 @@ function resolveOpacityConfig(program, config) {
 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 values = resolveLegendSampleValues(config, scale, "Opacity legend");
   const texts = formatContinuousValues(
     values,
     scale.domain,
@@ -93,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;
@@ -123,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,
@@ -166,8 +168,9 @@ function resolveOpacityLayout(program, config, scale) {
         config.labels.offset - symbolExtent
       : plot.y + plot.height + config.offset +
         (config.titleVisible === false ? 0 : config.titleStyle.fontSize + 12) + symbolExtent;
+    const samplePitch = values.length === 1 ? 0 : width / (values.length - 1);
     symbols = values.map((_, index) => ({
-      x: startX + index * width / (values.length - 1),
+      x: startX + index * samplePitch,
       y
     }));
     labels = symbols.map(symbol => ({
@@ -185,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,
@@ -210,23 +213,23 @@ 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.");
     }
-    const { encoding, scale, config } = resolveOpacityConfig(this, stored);
+    const { encoding, scale, config: currentConfig } = resolveOpacityConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "opacity", currentConfig);
     const layout = resolveOpacityLayout(this, config, scale);
     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
@@ -235,57 +238,20 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ action(
         property: "guide.legend.opacity.title",
         value: config.title
       })
-      ._withLegendConfig("opacity", config)
-      .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",
@@ -313,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",
@@ -416,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",

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

@@ -0,0 +1,225 @@
+import { action, closedAction } from "../../../../core/action.js";
+
+import { resolveLegendGraphicPlacement } from
+  "../../../../materialization/graphicHierarchy.js";
+import { findLayer } from "../../../../selectors/layers.js";
+import { DEFAULT_COLORS } from "../../../../theme/defaults.js";
+import {
+  editGraphicProperties,
+  editLegendBackground,
+  resolveContinuousColorLayer,
+  styleContinuousText,
+  validateNonNegative,
+} from "./common.js";
+import { materializeGradientLegend, resolveGradientConfig, resolveGradientLegendCreation, createGradientLegendFromConfig } from "./gradient.js";
+import { normalizeIntervalLegend, resolveIntervalLayout, resolveIntervalConfig } from "./interval.js";
+import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
+
+function requireChannels(args, operation) {
+  if (
+    !Array.isArray(args.channels) ||
+    args.channels.length !== 1 ||
+    args.channels[0] !== "stroke"
+  ) {
+    throw new Error(`${operation} requires channels: ["stroke"].`);
+  }
+}
+
+function strokeWidth(program, target) {
+  const config = program.markConfigs[target] ?? {};
+  return config.barAppearance?.strokeWidth ?? config.strokeWidth ?? ({
+    point: 1,
+    line: 2,
+    area: 1,
+    bar: 0.5,
+    rect: 1,
+    arc: 1,
+    rule: 2,
+    tick: 2
+  }[findLayer(program, target)?.mark?.type] ?? 1);
+}
+
+function sampleFill(program, target) {
+  const graphic = program.graphicSpec.objects[target];
+  const properties = graphic?.items?.[0]?.properties ?? graphic?.properties;
+  return properties?.fill ?? DEFAULT_COLORS.mark;
+}
+
+export function resolveStrokeGradientLegendCreation(program, args = {}) {
+  requireChannels(args, "Stroke gradient legend");
+  return resolveGradientLegendCreation(program, args, "stroke");
+}
+
+export const rematerializeStrokeGradientLegend = /* @__PURE__ */ closedAction(
+  {
+    op: "rematerializeStrokeGradientLegend",
+    description: "Rematerialize a continuous stroke gradient legend."
+  }, [],
+  function (args = {}) {
+    const stored = this.guideConfigs.legend?.strokeGradient;
+    if (stored === undefined) {
+      throw new Error("Stroke gradient legend requires stored configuration.");
+    }
+    const resolved = resolveGradientConfig(this, stored, "stroke");
+    return materializeGradientLegend(this, resolved, {
+      fill: sampleFill(this, resolved.config.target),
+      strokeWidth: strokeWidth(this, resolved.config.target)
+    });
+  }
+);
+
+export function createStrokeGradientLegendFromConfig(program, config) {
+  return createGradientLegendFromConfig(program, config, "stroke");
+}
+
+export const createStrokeGradientLegend = /* @__PURE__ */ action(
+  {
+    op: "createStrokeGradientLegend",
+    description: "Create a continuous stroke gradient legend."
+  },
+  function (args = {}) {
+    const resolved = resolveStrokeGradientLegendCreation(this, args);
+    if (this.guideConfigs.legend?.strokeGradient !== undefined) {
+      throw new Error("createStrokeGradientLegend requires a missing stroke legend.");
+    }
+    return createStrokeGradientLegendFromConfig(this, resolved.config);
+  }
+);
+
+export function resolveStrokeIntervalConfig(program, stored) {
+  const resolved = resolveIntervalConfig(program, stored, "stroke");
+  if (stored.inferredStrokeWidth !== true) return resolved;
+  return { ...resolved, config: { ...resolved.config,
+    symbol: { ...stored.symbol, strokeWidth: strokeWidth(program, resolved.config.target) }
+  } };
+}
+
+export function resolveStrokeIntervalLayout(program, config, scale) {
+  return resolveIntervalLayout(program, config, scale, "Stroke interval legend");
+}
+
+export function resolveStrokeIntervalLegendCreation(program, args = {}) {
+  requireChannels(args, "Stroke interval legend");
+  const config = normalizeIntervalLegend({ ...args, channels: undefined });
+  const layer = resolveContinuousColorLayer(program, config.target, "stroke");
+  config.symbol = {
+    ...config.symbol,
+    ...(args.symbol?.strokeWidth === undefined
+      ? { strokeWidth: strokeWidth(program, layer.id) }
+      : {})
+  };
+  config.inferredStrokeWidth = args.symbol?.strokeWidth === undefined;
+  validateNonNegative(config.symbol.strokeWidth, "Legend symbol strokeWidth");
+  return resolveStrokeIntervalConfig(program, config);
+}
+
+export const rematerializeStrokeIntervalLegend = /* @__PURE__ */ closedAction(
+  {
+    op: "rematerializeStrokeIntervalLegend",
+    description: "Rematerialize a discretized stroke interval legend."
+  }, [],
+  function (args = {}) {
+    const stored = this.guideConfigs.legend?.strokeInterval;
+    if (stored === undefined) {
+      throw new Error("Stroke interval legend requires stored configuration.");
+    }
+    const { encoding, scale, config: currentConfig } = resolveStrokeIntervalConfig(this, stored);
+    const config = resolveEffectiveLegendBlockConfig(this, "strokeInterval", currentConfig);
+    const layout = resolveStrokeIntervalLayout(this, config, scale);
+    const fill = config.blockSymbol?.fill ?? sampleFill(this, config.target);
+    let next = this
+      .editSemantic({ property: "guide.legend.stroke.scale", value: encoding.scale })
+      .editSemantic({ property: "guide.legend.stroke.title", value: config.title })
+      ._withLegendConfig("strokeInterval", currentConfig);
+    next = editGraphicProperties(next, "strokeIntervalSymbols", {
+      length: scale.range.length,
+      x: layout.symbolX,
+      y: layout.itemY.map(value => value - config.symbol.height / 2),
+      width: config.symbol.width,
+      height: config.symbol.height,
+      fill,
+      stroke: scale.range,
+      strokeWidth: config.symbol.strokeWidth,
+      ...(config.blockSymbol?.opacity === undefined
+        ? {}
+        : { opacity: config.blockSymbol.opacity })
+    });
+    next = editGraphicProperties(next, "strokeIntervalLabels", {
+      length: layout.labels.length,
+      x: layout.labelX,
+      y: layout.itemY,
+      text: layout.labels
+    });
+    next = editLegendBackground(
+      next,
+      "strokeIntervalBackground",
+      layout.background,
+      config.border
+    );
+    next = styleContinuousText(next, "strokeIntervalLabels", config.labels);
+    if (config.titleVisible === false) return next;
+    next = editGraphicProperties(next, "strokeIntervalTitle", {
+      x: layout.title.x,
+      y: layout.title.y,
+      text: config.title
+    });
+    return styleContinuousText(next, "strokeIntervalTitle", config.titleStyle, {
+      align: layout.title.align
+    });
+  }
+);
+
+export function createStrokeIntervalLegendFromConfig(program, config) {
+  const resolved = resolveStrokeIntervalConfig(program, config);
+  resolveStrokeIntervalLayout(program, resolved.config, resolved.scale);
+  let next = program
+    .editSemantic({
+      property: "guide.legend.stroke.scale",
+      value: resolved.encoding.scale
+    })
+    .editSemantic({
+      property: "guide.legend.stroke.title",
+      value: resolved.config.title
+    })
+    ._withLegendConfig("strokeInterval", resolved.config);
+  const placement = resolveLegendGraphicPlacement(next);
+  if (resolved.config.border !== false) {
+    next = next.createGraphics({ id: "strokeIntervalBackground", type: "rect",
+      ...placement });
+  }
+  next = next
+    .createGraphics({ id: "strokeIntervalSymbols", type: "rect", length: 0,
+      ...resolveLegendGraphicPlacement(next, resolved.config.border === false
+        ? {}
+        : { after: "strokeIntervalBackground" }) })
+    .createGraphics({ id: "strokeIntervalLabels", type: "text", length: 0,
+      ...placement });
+  if (resolved.config.titleVisible !== false) {
+    next = next.createGraphics({ id: "strokeIntervalTitle", type: "text",
+      ...placement });
+  }
+  return next.rematerializeStrokeIntervalLegend();
+}
+
+export const createStrokeIntervalLegend = /* @__PURE__ */ closedAction(
+  {
+    op: "createStrokeIntervalLegend",
+    description: "Create a discretized stroke interval legend."
+  }, undefined,
+  function (args = {}) {
+    const resolved = resolveStrokeIntervalLegendCreation(this, args);
+    if (this.guideConfigs.legend?.strokeInterval !== undefined) {
+      throw new Error("createStrokeIntervalLegend requires a missing stroke legend.");
+    }
+    return createStrokeIntervalLegendFromConfig(this, resolved.config);
+  }
+);
+
+export function registerStrokeColorLegendActions(ProgramClass) {
+  Object.assign(ProgramClass.prototype, {
+    createStrokeGradientLegend,
+    rematerializeStrokeGradientLegend,
+    createStrokeIntervalLegend,
+    rematerializeStrokeIntervalLegend
+  });
+}

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

@@ -4,6 +4,10 @@ import { resolveOpacityLegendCreation } from "./continuous/opacity.js";
 import { normalizeIntervalLegend, resolveIntervalConfig } from "./continuous/interval.js";
 import { resolveSizeLegendConfig } from "./size.js";
 import { resolveStrokeWidthLegendConfig } from "./strokeWidth.js";
+import {
+  resolveStrokeGradientLegendCreation,
+  resolveStrokeIntervalLegendCreation
+} from "./continuous/stroke.js";
 
 export function resolveLegendStepConfig(program, step) {
   switch (step.op) {
@@ -21,7 +25,16 @@ export function resolveLegendStepConfig(program, step) {
       return { kind: "size", config: resolveSizeLegendConfig(program, step.args) };
     case "createStrokeWidthLegend":
       return { kind: "strokeWidth", config: resolveStrokeWidthLegendConfig(program, step.args) };
+    case "createStrokeGradientLegend":
+      return {
+        kind: "strokeGradient",
+        config: resolveStrokeGradientLegendCreation(program, step.args).config
+      };
+    case "createStrokeIntervalLegend":
+      return {
+        kind: "strokeInterval",
+        config: resolveStrokeIntervalLegendCreation(program, step.args).config
+      };
     default: throw new Error(`Unsupported legend creation owner "${step.op}".`);
   }
 }
-