ggaction 0.0.15 → 0.0.16

package/src/actions/guides/grids/grid.js

@@ -1,10 +1,7 @@
-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 {
-  noOptions,
-  validateKeys,
-  validateOptionObject
-} from "../../../core/validation.js";
+import { noOptions, validateOptionObject } from "../../../core/validation.js";
 import {
   gridNames,
   editGridConfig,
@@ -75,17 +72,10 @@ function makeRematerialize(direction) {
           value: geometry[property]
         });
       }
-      return next
-        .editGraphics({
-          target: operation.graphic,
-          property: "stroke",
-          value: config.color
-        })
-        .editGraphics({
-          target: operation.graphic,
-          property: "strokeWidth",
-          value: config.lineWidth
-        })
+      return editGraphicProperties(next, operation.graphic, {
+        stroke: config.color,
+        strokeWidth: config.lineWidth
+      })
         .editGraphics({
           target: operation.graphic,
           property: "strokeDash",
@@ -176,14 +166,14 @@ function normalizeDirection(value, direction) {
   return value;
 }
 
-const rematerializeHorizontalGrid = makeRematerialize("horizontal");
-const rematerializeVerticalGrid = makeRematerialize("vertical");
-const createHorizontalGrid = makeCreate("horizontal");
-const createVerticalGrid = makeCreate("vertical");
-const editHorizontalGrid = makeEdit("horizontal");
-const editVerticalGrid = makeEdit("vertical");
+const rematerializeHorizontalGrid = /* @__PURE__ */ makeRematerialize("horizontal");
+const rematerializeVerticalGrid = /* @__PURE__ */ makeRematerialize("vertical");
+const createHorizontalGrid = /* @__PURE__ */ makeCreate("horizontal");
+const createVerticalGrid = /* @__PURE__ */ makeCreate("vertical");
+const editHorizontalGrid = /* @__PURE__ */ makeEdit("horizontal");
+const editVerticalGrid = /* @__PURE__ */ makeEdit("vertical");
 
-const editGrid = action(
+const editGrid = /* @__PURE__ */ action(
   {
     op: "editGrid",
     description: "Edit selected existing Cartesian grid directions."
@@ -253,7 +243,7 @@ export function resolveGridOptions(program, args = {}, layers = program.semantic
   return { horizontal, vertical, theta, radial };
 }
 
-const createGrid = action(
+const createGrid = /* @__PURE__ */ action(
   {
     op: "createGrid",
     description: "Create selected Cartesian grid directions."
@@ -273,7 +263,7 @@ const createGrid = action(
   }
 );
 
-const rematerializeGrid = action(
+const rematerializeGrid = /* @__PURE__ */ action(
   {
     op: "rematerializeGrid",
     description: "Recompute every existing grid direction."
@@ -305,13 +295,12 @@ const rematerializeGrid = action(
   }
 );
 
-const removeGrid = action(
+const removeGrid = /* @__PURE__ */ closedAction(
   {
     op: "removeGrid",
     description: "Remove selected Cartesian grid directions."
-  },
+  }, AGGREGATE_OPTIONS,
   function (args = {}) {
-    validateOptionObject(args, AGGREGATE_OPTIONS, "removeGrid");
     for (const direction of AGGREGATE_OPTIONS) {
       if (
         Object.hasOwn(args, direction) &&

package/src/actions/guides/guides.js

@@ -123,7 +123,7 @@ export function resolveGuideOptions(program, args = {}, layers = program.semanti
   return { axes, grid, legend };
 }
 
-const createGuides = action(
+const createGuides = /* @__PURE__ */ action(
   {
     op: "createGuides",
     description: "Create applicable axes, grid, and legend."

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

@@ -353,7 +353,7 @@ function normalizeBlockPatch(args, descriptor) {
   return patch;
 }
 
-export const editLegendBlock = action(
+export const editLegendBlock = /* @__PURE__ */ action(
   {
     op: "editLegendBlock",
     description: "Edit one logical legend block selected by channel."

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

@@ -50,7 +50,7 @@ function resolveStandaloneLegendStep(args, kind) {
   return { op: kind === "size" ? "createSizeLegend" : "createStrokeWidthLegend", args: options };
 }
 
-export const rematerializeLegend = action(
+export const rematerializeLegend = /* @__PURE__ */ action(
   { op: "rematerializeLegend", description: "Rematerialize every existing legend component." },
   withGuideLayoutValidation(function (args = {}) {
     noOptions(args, "rematerializeLegend");
@@ -213,7 +213,7 @@ export function resolveCategoricalLegendConfig(program, args = {}) {
   return config;
 }
 
-export const createCategoricalLegend = action(
+export const createCategoricalLegend = /* @__PURE__ */ action(
   { op: "createCategoricalLegend", description: "Create one categorical legend block." },
   withGuideLayoutValidation(function (args = {}) {
     const config = resolveCategoricalLegendConfig(this, args);
@@ -403,14 +403,14 @@ export function applyLegendCreationPlan(program, plan) {
     : plan.finish === "auto" ? finishLegend(next) : next;
 }
 
-export const createLegend = action(
+export const createLegend = /* @__PURE__ */ action(
   { op: "createLegend", description: "Create an inferred legend for selected channels." },
   withGuideLayoutValidation(function (args = {}) {
     return applyLegendCreationPlan(this, resolveLegendCreationPlan(this, args));
   })
 );
 
-export const removeCategoricalLegend = action(
+export const removeCategoricalLegend = /* @__PURE__ */ action(
   {
     op: "removeCategoricalLegend",
     description: "Remove the active categorical legend and its concrete components."

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

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
 import {
   activeConfig,
@@ -8,7 +9,7 @@ import {
 } from "./layout.js";
 import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 
-export const rematerializeLegendLabels = action(
+export const rematerializeLegendLabels = /* @__PURE__ */ action(
   { op: "rematerializeLegendLabels", description: "Rematerialize categorical legend labels." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendLabels");
@@ -18,25 +19,27 @@ export const rematerializeLegendLabels = action(
       throw new Error("rematerializeLegendLabels requires existing legend labels.");
     }
     const layout = resolveLayout(this, config);
-    return this
-      .editGraphics({ target: id, property: "length", value: config.domain.length })
-      .editGraphics({ target: id, property: "x", value: layout.labelX })
-      .editGraphics({ target: id, property: "y", value: layout.itemY })
+    return editGraphicProperties(editGraphicProperties(this, id, {
+      length: config.domain.length,
+      x: layout.labelX,
+      y: layout.itemY
+    })
       .editGraphics({
         target: id,
         property: "text",
         value: categoricalLegendLabels(config)
-      })
-      .editGraphics({ target: id, property: "fill", value: config.labels.color })
-      .editGraphics({ target: id, property: "fontSize", value: config.labels.fontSize })
-      .editGraphics({ target: id, property: "fontFamily", value: config.labels.fontFamily })
-      .editGraphics({ target: id, property: "fontWeight", value: config.labels.fontWeight })
-      .editGraphics({ target: id, property: "textAlign", value: "left" })
-      .editGraphics({ target: id, property: "textBaseline", value: "middle" });
+      }), id, {
+      fill: config.labels.color,
+      fontSize: config.labels.fontSize,
+      fontFamily: config.labels.fontFamily,
+      fontWeight: config.labels.fontWeight,
+      textAlign: "left",
+      textBaseline: "middle"
+    });
   }
 );
 
-export const createLegendLabels = action(
+export const createLegendLabels = /* @__PURE__ */ action(
   { op: "createLegendLabels", description: "Create categorical legend labels." },
   function (args = {}) {
     noOptions(args, "createLegendLabels");
@@ -56,7 +59,7 @@ export const createLegendLabels = action(
   }
 );
 
-export const rematerializeLegendTitle = action(
+export const rematerializeLegendTitle = /* @__PURE__ */ action(
   { op: "rematerializeLegendTitle", description: "Rematerialize the categorical legend title." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendTitle");
@@ -66,14 +69,15 @@ export const rematerializeLegendTitle = action(
       throw new Error("rematerializeLegendTitle requires an existing legend title.");
     }
     const layout = resolveLayout(this, config);
-    return this
-      .editGraphics({ target: id, property: "x", value: layout.titleX })
-      .editGraphics({ target: id, property: "y", value: layout.titleY })
-      .editGraphics({ target: id, property: "text", value: config.title })
-      .editGraphics({ target: id, property: "fill", value: config.titleStyle.color })
-      .editGraphics({ target: id, property: "fontSize", value: config.titleStyle.fontSize })
-      .editGraphics({ target: id, property: "fontFamily", value: config.titleStyle.fontFamily })
-      .editGraphics({ target: id, property: "fontWeight", value: config.titleStyle.fontWeight })
+    return editGraphicProperties(this, id, {
+      x: layout.titleX,
+      y: layout.titleY,
+      text: config.title,
+      fill: config.titleStyle.color,
+      fontSize: config.titleStyle.fontSize,
+      fontFamily: config.titleStyle.fontFamily,
+      fontWeight: config.titleStyle.fontWeight
+    })
       .editGraphics({
         target: id,
         property: "textAlign",
@@ -86,7 +90,7 @@ export const rematerializeLegendTitle = action(
   }
 );
 
-export const createLegendTitle = action(
+export const createLegendTitle = /* @__PURE__ */ action(
   { op: "createLegendTitle", description: "Create the categorical legend title." },
   function (args = {}) {
     noOptions(args, "createLegendTitle");
@@ -105,7 +109,7 @@ export const createLegendTitle = action(
   }
 );
 
-export const rematerializeLegendBackground = action(
+export const rematerializeLegendBackground = /* @__PURE__ */ action(
   { op: "rematerializeLegendBackground", description: "Rematerialize the legend background." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendBackground");
@@ -118,18 +122,19 @@ export const rematerializeLegendBackground = action(
       throw new Error("rematerializeLegendBackground requires an existing background.");
     }
     const layout = resolveLayout(this, config).background;
-    return this
-      .editGraphics({ target: id, property: "x", value: layout.x })
-      .editGraphics({ target: id, property: "y", value: layout.y })
-      .editGraphics({ target: id, property: "width", value: layout.width })
-      .editGraphics({ target: id, property: "height", value: layout.height })
-      .editGraphics({ target: id, property: "fill", value: config.border.background })
-      .editGraphics({ target: id, property: "stroke", value: config.border.color })
-      .editGraphics({ target: id, property: "strokeWidth", value: config.border.lineWidth });
+    return editGraphicProperties(this, id, {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height,
+      fill: config.border.background,
+      stroke: config.border.color,
+      strokeWidth: config.border.lineWidth
+    });
   }
 );
 
-export const createLegendBackground = action(
+export const createLegendBackground = /* @__PURE__ */ action(
   { op: "createLegendBackground", description: "Create the legend background rect." },
   function (args = {}) {
     noOptions(args, "createLegendBackground");

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

@@ -152,7 +152,7 @@ export function resolveLayout(program, config) {
   const width = symbolWidth(config);
   const layout = resolveLegendItemLayout(plot, config, categoricalLegendLabels(config), {
     width, height: 0, itemBounds: resolveSampleBounds(program, config, width)
-  }, canvas);
+  }, canvas, program.materializationConfigs.textMetrics);
   assertLegendBoundsInsideCanvas(layout.bounds, canvas, "Categorical legend layout", config);
   const background = resolveLegendBackgroundFromBounds(layout.bounds, config.border, canvas,
     "Categorical legend", config);

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,
@@ -58,24 +59,23 @@ function makeEditSymbol(type) {
         const x1 = layout.symbolX.map(
           value => value + (symbolWidth(config) - layer.length) / 2
         );
-        next = next
-          .editGraphics({ target: id, property: "x1", value: x1 })
-          .editGraphics({ target: id, property: "y1", value: layout.itemY })
-          .editGraphics({
-            target: id,
-            property: "x2",
-            value: x1.map(value => value + layer.length)
-          })
-          .editGraphics({ target: id, property: "y2", 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: "stroke",
             value: layer.stroke ?? (config.channels.includes("stroke")
               ? appearance.strokes
               : appearance.colors)
-          })
-          .editGraphics({ target: id, property: "strokeWidth", value: layer.lineWidth })
-          .editGraphics({ target: id, property: "strokeDash", value: appearance.dashes });
+          }), id, {
+          strokeWidth: layer.lineWidth,
+          strokeDash: appearance.dashes
+        });
         for (const [property, value] of Object.entries(
           requestedStrokeDetails(layer, "Legend line symbol")
         )) {
@@ -108,15 +108,12 @@ function makeEditSymbol(type) {
             value: items
           });
         }
-        next = next
-          .editGraphics({ target: id, property: "x", value: x })
-          .editGraphics({ target: id, property: "y", value: layout.itemY })
-          .editGraphics({ target: id, property: "radius", value: layer.size })
-          .editGraphics({
-            target: id,
-            property: "fill",
-            value: layer.fill ?? appearance.colors
-          })
+        next = editGraphicProperties(next, id, {
+          x: x,
+          y: layout.itemY,
+          radius: layer.size,
+          fill: layer.fill ?? appearance.colors
+        })
           .editGraphics({
             target: id,
             property: "stroke",
@@ -196,23 +193,23 @@ function makeCreateSymbol(type, edit) {
   );
 }
 
-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");
@@ -230,7 +227,7 @@ export const createLegendSymbols = action(
   }
 );
 
-export const rematerializeLegendSymbols = action(
+export const rematerializeLegendSymbols = /* @__PURE__ */ action(
   { op: "rematerializeLegendSymbols", description: "Rematerialize layered legend symbols." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendSymbols");
@@ -248,7 +245,7 @@ export const rematerializeLegendSymbols = action(
   }
 );
 
-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

@@ -26,6 +26,7 @@ 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",
@@ -63,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 };
@@ -318,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,
@@ -326,7 +322,7 @@ export function resolveLegendTextBounds(position, text, style) {
     ...style,
     textAlign: position.align ?? "left",
     textBaseline: "middle"
-  });
+  }, profile);
 }
 
 export function assertLegendBoundsInsideCanvas(bounds, canvas, label, config) {
@@ -407,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;
+}