ggaction 0.0.13 → 0.0.16

package/src/actions/marks/point/materialize.js

@@ -1,3 +1,4 @@
+import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import { getPointGraphicType } from "../../../grammar/schemas/mark.js";
@@ -15,9 +16,12 @@ import {
   normalizePointPackingPolicy,
   resolvePointPacking
 } from "../../../grammar/pointPacking.js";
-import { polarToCartesian, resolvePolarFrame } from "../../../grammar/polar.js";
+import { polarToCartesian } from "../../../grammar/polar.js";
 import { resolveDirectionValues } from "../../../grammar/direction.js";
-import { resolveGraphicBounds } from "../../../layout/canvas.js";
+import {
+  resolveCoordinateBounds,
+  resolveCoordinatePolarFrame
+} from "../../../materialization/coordinateBounds.js";
 import { validateMarkOptions } from "../shared.js";
 import {
   DEFAULT_COLORS,
@@ -34,6 +38,8 @@ import {
   "../../../materialization/rowEncoding.js";
 import { offsetCategoryPositions } from
   "../../../materialization/categorySlotOffset.js";
+import { requestedStrokeDetails } from
+  "../../../grammar/strokeStyle.js";
 
 const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
 const DEFAULT_POINT_FILL = DEFAULT_COLORS.mark;
@@ -52,7 +58,7 @@ function resolvePointPositions(program, layer, dataset) {
   if (theta === undefined || radius === undefined) {
     return { x: undefined, y: undefined };
   }
-  const frame = resolvePolarFrame(resolveGraphicBounds(program));
+  const frame = resolveCoordinatePolarFrame(program, layer.coordinate);
   const positions = theta.map((angle, index) => {
     const distance = radius[index];
     return Number.isFinite(angle) && Number.isFinite(distance)
@@ -76,7 +82,11 @@ function incompleteShapeGraphic(shape, properties, angle) {
     ? "path"
     : getPointGraphicType(shape);
   const incomplete = type === "path"
-    ? { fill: properties.fill, opacity: properties.opacity }
+    ? {
+        fill: properties.fill,
+        opacity: properties.opacity,
+        ...requestedStrokeDetails(properties, "Point mark")
+      }
     : properties;
   return { type, properties: compactProperties(incomplete) };
 }
@@ -180,7 +190,7 @@ function applyPointJitter(program, {
       `Point jitter on "${id}" requires a resolved ${policy.channel} scale.`
     );
   }
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const entries = resolveJitterEntries({
     policy,
     dataset,
@@ -270,7 +280,7 @@ function applyPointPacking(program, {
       fixedHalfExtent: extent[policy.channel === "x" ? "y" : "x"]
     }];
   });
-  const bounds = resolveGraphicBounds(program);
+  const bounds = resolveCoordinateBounds(program, layer.coordinate);
   const resolution = resolvePointPacking({
     target: id,
     policy,
@@ -291,7 +301,7 @@ function applyPointPacking(program, {
   };
 }
 
-export const rematerializePointMark = action(
+export const rematerializePointMark = /* @__PURE__ */ action(
   {
     op: "rematerializePointMark",
     description: "Recompute concrete point geometry and appearance."
@@ -338,6 +348,7 @@ export const rematerializePointMark = action(
 
     const positions = resolvePointPositions(resolved, layer, dataset);
     const mappedFill = resolveRowEncodingValues(resolved, layer, dataset, "color");
+    const mappedStroke = resolveRowEncodingValues(resolved, layer, dataset, "stroke");
     const area = resolveRowEncodingValues(resolved, layer, dataset, "size");
     const encodedShape = resolveRowEncodingValues(resolved, layer, dataset, "shape");
     const encodedOpacity = resolveRowEncodingValues(
@@ -348,6 +359,7 @@ export const rematerializePointMark = action(
     );
     const angles = resolveDirectionValues(dataset.values, layer.encoding?.angle);
     const config = resolved.markConfigs[id] ?? {};
+    const strokeDetails = requestedStrokeDetails(config, "Point mark");
     const fill = mappedFill ?? config.fill ?? DEFAULT_POINT_FILL;
     const shapes = encodedShape ?? dataset.values.map(() => config.shape ?? "circle");
     const existingChildren = graphic.items ?? [];
@@ -417,7 +429,8 @@ export const rematerializePointMark = action(
             x: centerX,
             y: centerY,
             fill: color,
-            opacity
+            opacity,
+            ...strokeDetails
           }, angle);
         }
         return createPointShapeGraphic({
@@ -426,12 +439,15 @@ export const rematerializePointMark = action(
           y: centerY,
           area: resolvedArea,
           fill: color,
-          ...(typeof config.stroke === "string" ? { stroke: config.stroke } : {}),
-          ...(config.strokeWidth === undefined
-            ? {}
-            : { strokeWidth: config.strokeWidth }),
+          ...(typeof (mappedStroke?.[index] ?? config.stroke) === "string"
+            ? { stroke: mappedStroke?.[index] ?? config.stroke }
+            : {}),
+          ...((mappedStroke !== undefined || config.strokeWidth !== undefined)
+            ? { strokeWidth: config.strokeWidth ?? 1 }
+            : {}),
           opacity,
-          angle
+          angle,
+          ...strokeDetails
         });
       });
       return jittered.program.editGraphics({
@@ -500,21 +516,28 @@ export const rematerializePointMark = action(
           value: centersY.map((value, index) => value - (Array.isArray(sides) ? sides[index] : sides) / 2)
         });
       }
-      next = next
-        .editGraphics({ target: id, property: "width", value: sides })
-        .editGraphics({ target: id, property: "height", value: sides })
-        .editGraphics({ target: id, property: "stroke", value: fill ?? DEFAULT_POINT_FILL })
-        .editGraphics({ target: id, property: "strokeWidth", value: 0 });
+      next = editGraphicProperties(next, id, {
+        width: sides,
+        height: sides,
+        stroke: mappedStroke ?? fill ?? DEFAULT_POINT_FILL,
+        strokeWidth: mappedStroke === undefined ? 0 : config.strokeWidth ?? 1
+      });
     }
     if (config.opacity !== undefined) {
       next = next.editGraphics({ target: id, property: "opacity", value: config.opacity });
     } else if (encodedOpacity !== undefined) {
       next = next.editGraphics({ target: id, property: "opacity", value: encodedOpacity });
     }
-    if (config.stroke === false) {
-      next = next
-        .editGraphics({ target: id, property: "stroke", value: "transparent" })
-        .editGraphics({ target: id, property: "strokeWidth", value: 0 });
+    if (mappedStroke !== undefined) {
+      next = editGraphicProperties(next, id, {
+        stroke: mappedStroke,
+        strokeWidth: config.strokeWidth ?? 1
+      });
+    } else if (config.stroke === false) {
+      next = editGraphicProperties(next, id, {
+        stroke: "transparent",
+        strokeWidth: 0
+      });
     } else if (config.stroke !== undefined) {
       next = next.editGraphics({ target: id, property: "stroke", value: config.stroke });
       next = next.editGraphics({
@@ -523,6 +546,9 @@ export const rematerializePointMark = action(
         value: config.strokeWidth
       });
     }
+    for (const [property, value] of Object.entries(strokeDetails)) {
+      next = next.editGraphics({ target: id, property, value });
+    }
     return next;
   }
 );

package/src/actions/marks/point/packing.js

@@ -1,6 +1,6 @@
-import { action } from "../../../core/action.js";
+import { closedAction } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
-import { validateKeys } from "../../../core/validation.js";
+
 import { normalizePointPackingPolicy } from "../../../grammar/pointPacking.js";
 import { findCoordinate } from "../../../selectors/coordinates.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
@@ -28,10 +28,9 @@ function target(program, requested, channel) {
   });
 }
 
-export const packPoints = action(
-  { op: "packPoints", description: "Pack point glyphs deterministically within categorical slots." },
+export const packPoints = /* @__PURE__ */ closedAction(
+  { op: "packPoints", description: "Pack point glyphs deterministically within categorical slots." }, OPTIONS,
   function (args = {}) {
-    validateKeys(args, OPTIONS, "packPoints");
     const policy = normalizePointPackingPolicy(args);
     const layer = target(this, args.target, policy.channel);
     if (this.materializationConfigs.jitters?.[layer.id] !== undefined) {
@@ -43,10 +42,9 @@ export const packPoints = action(
   }
 );
 
-export const removePointPacking = action(
-  { op: "removePointPacking", description: "Remove point packing and restore semantic positions." },
+export const removePointPacking = /* @__PURE__ */ closedAction(
+  { op: "removePointPacking", description: "Remove point packing and restore semantic positions." }, REMOVE_OPTIONS,
   function (args = {}) {
-    validateKeys(args, REMOVE_OPTIONS, "removePointPacking");
     const requested = args.target === undefined
       ? undefined
       : validateUserId(args.target, "Point packing target");

package/src/actions/marks/rect/actions.js

@@ -19,12 +19,20 @@ import {
   resolveMarkId,
   validateMarkOptions
 } from "../shared.js";
+import { replaceGraphicItems } from "../../primitives/editGraphics.js";
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
+import { rematerializeExistingLegend } from "../../encodings/shared.js";
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
+import {
+  requestedRectStyleDetails
+} from "../../../grammar/roundedRect.js";
+import { STROKE_STYLE_PROPERTIES } from
+  "../../../grammar/strokeStyle.js";
 
 const STYLE_OPTIONS = Object.freeze([
-  "fill", "opacity", "stroke", "strokeWidth"
+  "fill", "opacity", "stroke", "strokeWidth", "cornerRadius",
+  ...STROKE_STYLE_PROPERTIES
 ]);
 const CREATE_OPTIONS = Object.freeze(["id", "data", ...STYLE_OPTIONS]);
 const EDIT_OPTIONS = Object.freeze(["target", ...STYLE_OPTIONS]);
@@ -41,10 +49,11 @@ function requireRectLayer(program, requested, operation) {
   });
 }
 
-const createRectMark = action(
+const createRectMark = /* @__PURE__ */ action(
   { op: "createRectMark", description: "Create a semantic rectangular cell layer." },
   function (args = {}) {
     validateMarkOptions(args, CREATE_OPTIONS, "createRectMark");
+    requestedRectStyleDetails(args, "createRectMark");
     const id = resolveMarkId(this, args.id, {
       defaultId: "rect",
       label: "Rect mark id",
@@ -81,7 +90,7 @@ const createRectMark = action(
   }
 );
 
-const rematerializeRectMark = action(
+const rematerializeRectMark = /* @__PURE__ */ action(
   { op: "rematerializeRectMark", description: "Recompute concrete rectangular cells." },
   function (args = {}) {
     validateMarkOptions(args, REMATERIALIZE_OPTIONS, "rematerializeRectMark");
@@ -99,7 +108,13 @@ const rematerializeRectMark = action(
     const layer = findLayer(this, id);
     const graphic = this.graphicSpec.objects[id];
     if (layer?.mark?.type !== "rect") throw new Error(`Unknown rect mark "${id}".`);
-    if (graphic?.type !== "rect" || !Array.isArray(graphic.items)) {
+    const roundedCollection = graphic?.type === "collection" &&
+      Object.hasOwn(this.markConfigs[id] ?? {}, "cornerRadius") &&
+      graphic.items?.every(item => ["rect", "path"].includes(item.type));
+    if (
+      (graphic?.type !== "rect" && !roundedCollection) ||
+      !Array.isArray(graphic.items)
+    ) {
       throw new Error(`Rect mark "${id}" requires rect collection graphics.`);
     }
     if (this.markConfigs[id]?.gradientPlot?.materialized === true) {
@@ -110,13 +125,11 @@ const rematerializeRectMark = action(
       throw new Error(`Rect mark "${id}" requires an existing dataset.`);
     }
     if (!canMaterializeRect(this, layer)) {
-      return graphic.items.length === 0
-        ? this
-        : this.editGraphics({ target: id, property: "items", value: [] });
+      return replaceGraphicItems(this, id, "rect", []);
     }
     let next = this;
     if (args.scales !== false) {
-      const ids = new Set(["x", "y", "x2", "y2", "color"].flatMap(channel => {
+      const ids = new Set(["x", "y", "x2", "y2", "color", "stroke"].flatMap(channel => {
         const scale = layer.encoding?.[channel]?.scale;
         return scale === undefined ? [] : [scale];
       }));
@@ -124,18 +137,20 @@ const rematerializeRectMark = action(
         next = next.rematerializeScale({ id: scale, marks: false });
       }
     }
-    return next.editGraphics({
-      target: id,
-      property: "items",
-      value: resolveRectGraphicItems(next, layer, dataset)
-    });
+    return replaceGraphicItems(
+      next,
+      id,
+      "rect",
+      resolveRectGraphicItems(next, layer, dataset)
+    );
   }
 );
 
-const editRectMark = action(
+const editRectMark = /* @__PURE__ */ action(
   { op: "editRectMark", description: "Edit rectangular cell appearance." },
   function (args = {}) {
     validateMarkOptions(args, EDIT_OPTIONS, "editRectMark");
+    requestedRectStyleDetails(args, "editRectMark");
     if (!STYLE_OPTIONS.some(option => Object.hasOwn(args, option))) {
       throw new Error("editRectMark requires at least one editable property.");
     }
@@ -143,6 +158,11 @@ const editRectMark = action(
     if (Object.hasOwn(args, "fill") && layer.encoding?.color !== undefined) {
       throw new Error("editRectMark fill cannot be combined with a color encoding.");
     }
+    if (Object.hasOwn(args, "stroke") && layer.encoding?.stroke !== undefined) {
+      throw new Error(
+        "editRectMark stroke conflicts with a field encoding; use encodeStroke with value to replace it."
+      );
+    }
     const next = this._withMarkConfig(
       layer.id,
       {
@@ -155,9 +175,10 @@ const editRectMark = action(
           : this.markConfigs[layer.id]?.fillExplicit ?? false
       }
     );
-    return canMaterializeRect(next, layer)
+    const materialized = canMaterializeRect(next, layer)
       ? next.rematerializeRectMark({ id: layer.id })
       : next;
+    return rematerializeExistingLegend(materialized);
   }
 );