ggaction 0.0.13 → 0.0.16

package/src/actions/guides/legends/categorical/symbols.js

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
 import {
   activeConfig,
@@ -11,6 +12,18 @@ import {
 } from "./layout.js";
 import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 import { createPointShapeGraphic } from "../../../../grammar/pointShapes.js";
+import {
+  materializeRectItem,
+  requestedRectStyleDetails
+} from "../../../../grammar/roundedRect.js";
+import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
+import { replaceGraphicItems } from "../../../primitives/editGraphics.js";
+
+function applyLayerOpacity(program, id, opacity) {
+  return opacity === undefined
+    ? program
+    : program.editGraphics({ target: id, property: "opacity", value: opacity });
+}
 
 function makeEditSymbol(type) {
   const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[type];
@@ -19,20 +32,23 @@ function makeEditSymbol(type) {
     { op, description: `Rematerialize categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
+      const { config } = activeConfig(this, args.kind);
       const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       const dynamicPoint = type === "point" && config.channels.includes("shape");
-      const expected = dynamicPoint
+      const styledSwatch = type === "swatch" && Object.hasOwn(layer, "cornerRadius");
+      const expected = dynamicPoint || styledSwatch
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
-      if (this.graphicSpec.objects[id]?.type !== expected) {
+      const actual = this.graphicSpec.objects[id]?.type;
+      const compatibleStyledSwatch = styledSwatch && ["rect", "collection"].includes(actual);
+      if (actual !== expected && !compatibleStyledSwatch) {
         throw new Error(`${op} requires existing ${type} symbols.`);
       }
       const layout = resolveLayout(this, config);
       const appearance = resolveAppearance(this, config);
       let next = this;
-      if (!dynamicPoint) {
+      if (!dynamicPoint && !styledSwatch) {
         next = next.editGraphics({
           target: id,
           property: "length",
@@ -43,18 +59,29 @@ function makeEditSymbol(type) {
         const x1 = layout.symbolX.map(
           value => value + (symbolWidth(config) - layer.length) / 2
         );
-        return next
-          .editGraphics({ target: id, property: "x1", value: x1 })
-          .editGraphics({ target: id, property: "y1", value: layout.itemY })
+        next = editGraphicProperties(editGraphicProperties(editGraphicProperties(next, id, {
+          x1: x1,
+          y1: layout.itemY
+        }), id, {
+          x2: x1.map(value => value + layer.length),
+          y2: layout.itemY
+        })
           .editGraphics({
             target: id,
-            property: "x2",
-            value: x1.map(value => value + layer.length)
-          })
-          .editGraphics({ target: id, property: "y2", value: layout.itemY })
-          .editGraphics({ target: id, property: "stroke", value: appearance.colors })
-          .editGraphics({ target: id, property: "strokeWidth", value: layer.lineWidth })
-          .editGraphics({ target: id, property: "strokeDash", value: appearance.dashes });
+            property: "stroke",
+            value: layer.stroke ?? (config.channels.includes("stroke")
+              ? appearance.strokes
+              : appearance.colors)
+          }), id, {
+          strokeWidth: layer.lineWidth,
+          strokeDash: appearance.dashes
+        });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend line symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       if (type === "point") {
         const x = layout.symbolX.map(value => value + symbolWidth(config) / 2);
@@ -67,8 +94,12 @@ function makeEditSymbol(type) {
               y: layout.itemY[index],
               area: Math.PI * layer.size ** 2,
               fill,
-              stroke: layer.stroke,
-              strokeWidth: layer.strokeWidth
+              stroke: config.channels.includes("stroke")
+                ? appearance.strokes[index]
+                : layer.stroke,
+              strokeWidth: layer.strokeWidth,
+              opacity: layer.opacity,
+              ...requestedStrokeDetails(layer, "Legend point symbol")
             });
           });
           return next.editGraphics({
@@ -77,33 +108,53 @@ function makeEditSymbol(type) {
             value: items
           });
         }
-        return next
-          .editGraphics({ target: id, property: "x", value: x })
-          .editGraphics({ target: id, property: "y", value: layout.itemY })
-          .editGraphics({ target: id, property: "radius", value: layer.size })
+        next = editGraphicProperties(next, id, {
+          x: x,
+          y: layout.itemY,
+          radius: layer.size,
+          fill: layer.fill ?? appearance.colors
+        })
           .editGraphics({
             target: id,
-            property: "fill",
-            value: layer.fill ?? appearance.colors
+            property: "stroke",
+            value: config.channels.includes("stroke")
+              ? appearance.strokes
+              : layer.stroke
           })
-          .editGraphics({ target: id, property: "stroke", value: layer.stroke })
           .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+        for (const [property, value] of Object.entries(
+          requestedStrokeDetails(layer, "Legend point symbol")
+        )) {
+          next = next.editGraphics({ target: id, property, value });
+        }
+        return applyLayerOpacity(next, id, layer.opacity);
       }
       const x = layout.symbolX.map(
         value => value + (symbolWidth(config) - layer.width) / 2
       );
-      return next
-        .editGraphics({ target: id, property: "x", value: x })
-        .editGraphics({
-          target: id,
-          property: "y",
-          value: layout.itemY.map(value => value - layer.height / 2)
-        })
-        .editGraphics({ target: id, property: "width", value: layer.width })
-        .editGraphics({ target: id, property: "height", value: layer.height })
-        .editGraphics({ target: id, property: "fill", value: appearance.colors })
-        .editGraphics({ target: id, property: "stroke", value: layer.stroke })
-        .editGraphics({ target: id, property: "strokeWidth", value: layer.strokeWidth });
+      const details = requestedRectStyleDetails(layer, "Legend swatch symbol");
+      const fills = layer.fill === undefined
+        ? appearance.colors
+        : config.domain.map(() => layer.fill);
+      const strokes = config.channels.includes("stroke")
+        ? appearance.strokes
+        : config.domain.map(() => layer.stroke);
+      return replaceGraphicItems(
+        next,
+        id,
+        "rect",
+        config.domain.map((_, index) => materializeRectItem({
+          x: x[index],
+          y: layout.itemY[index] - layer.height / 2,
+          width: layer.width,
+          height: layer.height,
+          fill: fills[index],
+          stroke: strokes[index],
+          strokeWidth: layer.strokeWidth,
+          ...(layer.opacity === undefined ? {} : { opacity: layer.opacity }),
+          ...requestedStrokeDetails(details, "Legend swatch symbol")
+        }, details.cornerRadius ?? 0))
+      );
     }
   );
 }
@@ -115,13 +166,14 @@ function makeCreateSymbol(type, edit) {
     { op, description: `Create categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config } = activeConfig(this);
-      layerFor(config, type);
+      const { config } = activeConfig(this, args.kind);
+      const layer = layerFor(config, type);
       const id = symbolGraphic(config, type);
       if (this.graphicSpec.objects[id] !== undefined) {
         throw new Error(`${op} requires missing ${type} symbols.`);
       }
-      const graphicType = type === "point" && config.channels.includes("shape")
+      const graphicType = type === "point" && config.channels.includes("shape") ||
+        type === "swatch" && (layer.cornerRadius ?? 0) > 0
         ? "collection"
         : { line: "line", point: "circle", swatch: "rect" }[type];
       return this
@@ -136,32 +188,32 @@ function makeCreateSymbol(type, edit) {
             ? {}
             : { length: config.domain.length })
         })
-        [edit]();
+        [edit]({ kind: config.kind });
     }
   );
 }
 
-export const rematerializeLegendSymbolLines = makeEditSymbol("line");
-export const rematerializeLegendSymbolPoints = makeEditSymbol("point");
-export const rematerializeLegendSymbolSwatches = makeEditSymbol("swatch");
-export const createLegendSymbolLines = makeCreateSymbol(
+export const rematerializeLegendSymbolLines = /* @__PURE__ */ makeEditSymbol("line");
+export const rematerializeLegendSymbolPoints = /* @__PURE__ */ makeEditSymbol("point");
+export const rematerializeLegendSymbolSwatches = /* @__PURE__ */ makeEditSymbol("swatch");
+export const createLegendSymbolLines = /* @__PURE__ */ makeCreateSymbol(
   "line",
   "rematerializeLegendSymbolLines"
 );
-export const createLegendSymbolPoints = makeCreateSymbol(
+export const createLegendSymbolPoints = /* @__PURE__ */ makeCreateSymbol(
   "point",
   "rematerializeLegendSymbolPoints"
 );
-export const createLegendSymbolSwatches = makeCreateSymbol(
+export const createLegendSymbolSwatches = /* @__PURE__ */ makeCreateSymbol(
   "swatch",
   "rematerializeLegendSymbolSwatches"
 );
 
-export const createLegendSymbols = action(
+export const createLegendSymbols = /* @__PURE__ */ action(
   { op: "createLegendSymbols", description: "Create layered legend symbols." },
   function (args = {}) {
     noOptions(args, "createLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -169,17 +221,17 @@ export const createLegendSymbols = action(
         point: "createLegendSymbolPoints",
         swatch: "createLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }
 );
 
-export const rematerializeLegendSymbols = action(
+export const rematerializeLegendSymbols = /* @__PURE__ */ action(
   { op: "rematerializeLegendSymbols", description: "Rematerialize layered legend symbols." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendSymbols");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     let next = this;
     for (const layer of config.symbol.layers) {
       const operation = {
@@ -187,13 +239,13 @@ export const rematerializeLegendSymbols = action(
         point: "rematerializeLegendSymbolPoints",
         swatch: "rematerializeLegendSymbolSwatches"
       }[layer.type];
-      next = next[operation]();
+      next = next[operation]({ kind: config.kind });
     }
     return next;
   }
 );
 
-export const rematerializeBasicLegendHighlights = action(
+export const rematerializeBasicLegendHighlights = /* @__PURE__ */ action(
   {
     op: "rematerializeLegendHighlights",
     description: "Reflect exact categorical mark highlights in legend symbols."

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

@@ -25,9 +25,12 @@ import { findLayer } from "../../../../selectors/layers.js";
 import { isOpacityLegendLayer } from "../../../../materialization/legends.js";
 import { findCanvasGraphic } from
   "../../../../materialization/graphicHierarchy.js";
+import { normalizeLegendSampling } from "../sampling.js";
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 
 const OPTIONS = [
   "target", "channels", "position", "align", "offset", "title", "count",
+  "values",
   "gradient", "symbol", "labels", "titleStyle", "itemGap", "border",
   "direction", "columns", "titlePosition"
 ];
@@ -61,12 +64,7 @@ const DEFAULT_BORDER = {
 export const validatePositive = validatePositiveFinite;
 export const validateNonNegative = validateNonNegativeFinite;
 
-export function editGraphicProperties(program, target, properties) {
-  for (const [property, value] of Object.entries(properties)) {
-    program = program.editGraphics({ target, property, value });
-  }
-  return program;
-}
+export { editGraphicProperties };
 
 export function normalizeLegendTextOptions(value, label, defaults) {
   if (value === undefined) return { ...defaults };
@@ -129,13 +127,24 @@ export function normalizeContinuousLegend(args, kind) {
   if (["left", "right"].includes(position) && align !== "center") {
     throw new Error("Side continuous legends require center alignment.");
   }
-  const count = args.count ?? 5;
-  if (!Number.isInteger(count) || count < 2) {
-    throw new RangeError(
-      "Continuous legend count must be an integer of at least 2."
-    );
+  if (kind === "gradient" && Object.hasOwn(args, "values")) {
+    throw new Error("Gradient legends do not support exact sample values.");
+  }
+  const sampling = kind === "opacity"
+    ? normalizeLegendSampling(args, {
+        operation: "create",
+        label: "Opacity legend"
+      })
+    : undefined;
+  const count = kind === "gradient" ? args.count ?? 5 : undefined;
+  if (kind === "gradient") {
+    if (!Number.isInteger(count) || count < 2) {
+      throw new RangeError(
+        "Continuous legend count must be an integer of at least 2."
+      );
+    }
+    validateGeneratedItemLimit(count, "Continuous legend count");
   }
-  validateGeneratedItemLimit(count, "Continuous legend count");
   const offset = args.offset ?? 30;
   validateNonNegative(offset, "Legend offset");
   const titlePosition = args.titlePosition ?? "top";
@@ -171,7 +180,7 @@ export function normalizeContinuousLegend(args, kind) {
     position,
     align,
     offset,
-    count,
+    ...(kind === "gradient" ? { count } : { sampling }),
     title: args.title,
     inferredTitle: args.title === undefined,
     labels: normalizeLegendTextOptions(
@@ -218,18 +227,23 @@ export function resolveContinuousLegendLayer(program, requested, channel) {
   return layer;
 }
 
-export function resolveContinuousColorLayer(program, requested) {
+export function resolveContinuousColorLayer(program, requested, channel = "color") {
   const layer = selectLegendLayer(
     program,
     requested,
-    candidate => ["point", "bar", "rect"].includes(candidate.mark?.type) &&
-      candidate.encoding?.color?.scale !== undefined
+    candidate => (channel === "stroke"
+      ? ["point", "line", "area", "bar", "rect", "arc", "rule", "tick"]
+      : ["point", "bar", "rect"]
+    ).includes(candidate.mark?.type) &&
+      candidate.encoding?.[channel]?.scale !== undefined
   );
   if (layer === undefined) {
     throw new Error(
       requested === undefined
-        ? "color legend requires one eligible point, bar, or rect mark."
-        : `Unknown color legend target "${requested}".`
+        ? channel === "color"
+          ? "color legend requires one eligible point, bar, or rect mark."
+          : "stroke legend requires one eligible mark."
+        : `Unknown ${channel} legend target "${requested}".`
     );
   }
   return layer;
@@ -300,7 +314,7 @@ export function styleContinuousText(
   });
 }
 
-export function resolveLegendTextBounds(position, text, style) {
+export function resolveLegendTextBounds(position, text, style, profile) {
   return resolveTextBounds({
     x: position.x,
     y: position.y,
@@ -308,7 +322,7 @@ export function resolveLegendTextBounds(position, text, style) {
     ...style,
     textAlign: position.align ?? "left",
     textBaseline: "middle"
-  });
+  }, profile);
 }
 
 export function assertLegendBoundsInsideCanvas(bounds, canvas, label, config) {
@@ -389,3 +403,45 @@ export function normalizeItemLegendLayout(args) {
   validatePositive(itemGap, "Legend itemGap");
   return { position, layout, align, direction, columns, titlePosition, offset, itemGap };
 }
+
+export function materializeItemLegend(program, kind, config, layout, {
+  symbols, optional = {}, text = layout.labels,
+  labels = layout.config.labels, titleStyle = layout.config.titleStyle
+}) {
+  const prefix = `${kind}Legend`;
+  let next = program
+    .editSemantic({ property: `guide.legend.${kind}.scale`, value: config.scale })
+    .editSemantic({ property: `guide.legend.${kind}.title`, value: config.title })
+    ._withLegendConfig(kind, config);
+  next = editGraphicProperties(next, `${prefix}Symbols`, {
+    length: text.length,
+    ...symbols
+  });
+  next = editGraphicProperties(next, `${prefix}Labels`, {
+    length: text.length, x: layout.labelX, y: layout.itemY, text
+  });
+  next = editLegendBackground(next, `${prefix}Background`, layout.background, config.border);
+  next = editGraphicProperties(next, `${prefix}Symbols`, Object.fromEntries(
+    Object.entries(optional).filter(([, value]) => value !== undefined)
+  ));
+  next = styleContinuousText(next, `${prefix}Labels`, labels);
+  const effective = layout.config;
+  if (effective.titleVisible === false) return next;
+  next = editGraphicProperties(next, `${prefix}Title`, {
+    x: layout.title.x, y: layout.title.y, text: effective.title
+  });
+  return styleContinuousText(next, `${prefix}Title`, titleStyle, { align: layout.title.align });
+}
+
+export function createItemLegendGraphics(program, kind, config, count, type, placement) {
+  const prefix = `${kind}Legend`;
+  let next = program
+    .editSemantic({ property: `guide.legend.${kind}.scale`, value: config.scale })
+    .editSemantic({ property: `guide.legend.${kind}.title`, value: config.title })
+    ._withLegendConfig(kind, config);
+  if (config.border !== false) next = next.createGraphics({ id: `${prefix}Background`, type: "rect", ...placement });
+  next = next.createGraphics({ id: `${prefix}Symbols`, type, length: count, ...placement })
+    .createGraphics({ id: `${prefix}Labels`, type: "text", length: count, ...placement });
+  if (config.titleVisible !== false) next = next.createGraphics({ id: `${prefix}Title`, type: "text", ...placement });
+  return next;
+}