ggaction 0.0.18 → 0.0.19

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

@@ -1,7 +1,9 @@
+import { selectCartesianAxis, axisTargetArgs, assertCartesianAxisSideAvailable } from "../../../selectors/axes.js";
+import { validateAxisPosition } from "./policy.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { isPlainObject } from "../../../core/immutable.js";
-import { validateKeys, validateOptionObject } from "../../../core/validation.js";
+import { validateKeys, validateOptionObject, validateNonNegativeFinite } from "../../../core/validation.js";
 
 import {
   AXIS_COMPONENTS,
@@ -12,21 +14,21 @@ import {
 } from "./components.js";
 
 const OPTIONS = Object.freeze([
-  "position", "line", "ticks", "labels", "ticksAndLabels", "title"
+  "target", "position", "line", "ticks", "labels", "ticksAndLabels", "title", "offset"
 ]);
 const LINE_OPTIONS = Object.freeze(["color", "lineWidth"]);
 const TICK_OPTIONS = Object.freeze([
-  "count", "values", "length", "color", "lineWidth", "alongOffset"
+  "count", "values", "length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"
 ]);
 const LABEL_OPTIONS = Object.freeze([
   "count", "values", "offset", "format", "color", "fontSize",
   "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
-  "lineHeight", "overlap", "alongOffset", "labelMap", "flush", "colorMap"
+  "lineHeight", "overlap", "alongOffset", "labelMap", "flush", "colorMap", "align"
 ]);
 const GROUP_OPTIONS = Object.freeze(["count", "values", "ticks", "labels"]);
 const TITLE_OPTIONS = Object.freeze([
   "text", "at", "offset", "rotation", "color", "fontSize",
-  "fontFamily", "fontWeight"
+  "fontFamily", "fontWeight", "alongOffset", "align", "baseline"
 ]);
 
 function validateNested(args, key, options, operation, { allowFalse = false } = {}) {
@@ -40,6 +42,7 @@ function validateNested(args, key, options, operation, { allowFalse = false } =
 }
 
 function validateArgs(args, operation) {
+  if (Object.hasOwn(args, "offset")) validateNonNegativeFinite(args.offset, "Axis frame offset");
   validateOptionObject(args, OPTIONS, operation, {
     allowEmpty: false,
     emptyMessage: `${operation} requires at least one axis change.`,
@@ -59,12 +62,12 @@ function validateArgs(args, operation) {
     );
   }
   if (args.ticksAndLabels !== false && args.ticksAndLabels?.ticks !== undefined) {
-    validateNested(args.ticksAndLabels, "ticks", ["length", "color", "lineWidth", "alongOffset"], `${operation}.ticksAndLabels`);
+    validateNested(args.ticksAndLabels, "ticks", ["length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"], `${operation}.ticksAndLabels`);
   }
   if (args.ticksAndLabels !== false && args.ticksAndLabels?.labels !== undefined) {
     validateNested(args.ticksAndLabels, "labels", [
       "offset", "format", "color", "fontSize", "fontFamily", "fontWeight",
-      "rotation", "maxWidth", "wrap", "lineHeight", "overlap", "alongOffset", "labelMap", "flush", "colorMap"
+      "rotation", "maxWidth", "wrap", "lineHeight", "overlap", "alongOffset", "labelMap", "flush", "colorMap", "align"
     ], `${operation}.ticksAndLabels`);
   }
 }
@@ -82,27 +85,26 @@ function names(channel) {
   };
 }
 
-function buildPlan(program, channel, args, operation) {
-  const shared = Object.hasOwn(args, "position")
-    ? { position: args.position }
-    : {};
+function buildPlan(program, channel, args, operation, axisId = channel) {
+  const shared = { ...axisTargetArgs(axisId, channel),
+    ...(Object.hasOwn(args, "position") ? { position: args.position } : {}) };
   const plan = [];
   const addLeaf = (component, edit) => {
     const value = args[component];
     if (value === false) {
-      assertRemovable(program, channel, component, operation.operation);
+      assertRemovable(program, channel, component, operation.operation, axisId);
       plan.push({ kind: "remove", component });
     } else if (value !== undefined) {
       plan.push({ kind: "edit", operation: edit, args: { ...shared, ...value } });
-    } else if (args.position !== undefined && hasComponent(program, channel, component)) {
+    } else if ((args.position !== undefined || Object.hasOwn(args, "offset")) && hasComponent(program, channel, component, axisId)) {
       plan.push({ kind: "edit", operation: edit, args: shared });
     }
   };
 
   addLeaf("line", operation.line);
   if (args.ticksAndLabels === false) {
-    assertRemovable(program, channel, "ticks", operation.operation);
-    assertRemovable(program, channel, "labels", operation.operation);
+    assertRemovable(program, channel, "ticks", operation.operation, axisId);
+    assertRemovable(program, channel, "labels", operation.operation, axisId);
     plan.push(
       { kind: "remove", component: "ticks" },
       { kind: "remove", component: "labels" }
@@ -125,22 +127,22 @@ function buildPlan(program, channel, args, operation) {
   return plan;
 }
 
-function applyPlan(program, channel, plan, operation) {
+function applyPlan(program, channel, plan, operation, axisId = channel) {
   let next = program;
   for (const step of plan) {
     next = step.kind === "remove"
-      ? removeComponent(next, channel, step.component)
+      ? removeComponent(next, channel, step.component, axisId)
       : next[step.operation](step.args);
   }
 
   const hasRetainedGraphic = AXIS_COMPONENTS.some(
-    component => next.graphicSpec.objects[graphicId(channel, component)] !== undefined
+    component => next.graphicSpec.objects[graphicId(channel, component, axisId)] !== undefined
   );
   if (!hasRetainedGraphic && (
-    next.semanticSpec.guides.axis?.[channel] !== undefined ||
-    next.guideConfigs.axis?.[channel] !== undefined
+    next.semanticSpec.guides.axis?.[axisId] !== undefined ||
+    next.guideConfigs.axis?.[axisId] !== undefined
   )) {
-    next = next[operation.remove]();
+    next = next[operation.remove](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
   }
   return next;
 }
@@ -154,12 +156,22 @@ function makeEditAxis(channel) {
     },
     withGuideLayoutValidation(function (args = {}) {
       validateArgs(args, operation.operation);
-      const plan = buildPlan(this, channel, args, operation);
+      const selected = selectCartesianAxis(this, channel, args, { whole: true });
+      const axisId = selected.id; args = selected.options;
+      let source = this;
+      if (selected.owner?.named && args.position !== undefined) {
+        const position = validateAxisPosition(channel, args.position);
+        assertCartesianAxisSideAvailable(this, { id: axisId, channel,
+          coordinate: selected.owner.coordinate, position });
+        source = source.editSemantic({ property: `guide.axis.${axisId}.position`, value: position });
+      }
+      if (Object.hasOwn(args, "offset")) source = source._withGuideConfig(axisId, "frame", { offset: args.offset });
+      const plan = buildPlan(source, channel, args, operation, axisId);
 
       // Run the complete proposal against an immutable speculative branch so a
       // later leaf failure cannot begin the returned action trace or state.
-      applyPlan(this, channel, plan, operation);
-      return applyPlan(this, channel, plan, operation);
+      applyPlan(source, channel, plan, operation, axisId);
+      return applyPlan(source, channel, plan, operation, axisId);
     })
   );
 }

package/src/actions/guides/axes/labels.js

@@ -1,4 +1,7 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
 import { axisThemeTypography } from "../../theme/state.js";
+import { validateAxisTextPlacement } from "../../../grammar/axisTextPlacement.js";
 import { canvasOverflowError } from "../../../layout/canvas.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
@@ -11,7 +14,7 @@ import {
   validateNonNegativeFinite,
   validatePositiveFinite
 } from "../../../core/validation.js";
-import { resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import {
   isTransformedScaleType,
   mapContinuousScaleValues,
@@ -48,9 +51,9 @@ import {
 } from "../../../grammar/displayLabels.js";
 
 const OPTIONS = [
-  "scale", "position", "count", "values", "offset", "format", "color",
+  "target", "scale", "position", "count", "values", "offset", "format", "color",
   "fontSize", "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
-  "lineHeight", "overlap", "labelMap", "alongOffset", "flush", "colorMap"
+  "lineHeight", "overlap", "labelMap", "alongOffset", "flush", "colorMap", "align"
 ];
 
 const DEFAULTS = {
@@ -85,6 +88,7 @@ function normalizeLabelLayout(config, args, operation) {
 export { validateTextStyle as validateAxisTextStyle };
 
 function validateOptions(args, operation, create) {
+  validateAxisTextPlacement(args);
   validateOptionObject(
     args,
     create ? OPTIONS : OPTIONS.filter(key => key !== "scale"),
@@ -98,6 +102,7 @@ function validateOptions(args, operation, create) {
 }
 
 function validateConfig(channel, config) {
+  validateAxisTextPlacement(config);
   validateAxisPosition(channel, config.position);
   if (config.mode === "count") {
     if (!Number.isInteger(config.count) || config.count <= 0) throw new RangeError("Label count must be a positive integer.");
@@ -224,13 +229,9 @@ function unionLabelBounds(records) {
   return [...byGroup.values()];
 }
 
-function resolve(program, channel, config) {
+function resolve(program, channel, config, axisId = channel) {
   const scale = program.resolvedScales[config.scale];
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: config.scale,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, config.position, config.scale, axisId);
   const discrete = ["ordinal", "band", "point"].includes(scale?.type);
   validateAxisLabelMapScale(config, scale);
   if ((
@@ -292,7 +293,7 @@ function resolve(program, channel, config) {
     resolved.textBaseline = "middle";
   }
   const canvas = findCanvasGraphic(program)?.properties;
-  let labelBounds = resolved.text.map((value, index) => resolveTextBounds({
+  const measuredBounds = () => resolved.text.map((value, index) => resolveTextBounds({
     x: Array.isArray(resolved.x) ? resolved.x[index] : resolved.x,
     y: Array.isArray(resolved.y) ? resolved.y[index] : resolved.y,
     text: value,
@@ -303,6 +304,7 @@ function resolve(program, channel, config) {
     textBaseline: resolved.textBaseline,
     rotation: config.rotation
   }, program.materializationConfigs.textMetrics));
+  let labelBounds = measuredBounds();
   if (program.materializationConfigs.canvas?.plot !== undefined || config.rotation !== 0) {
     const horizontal = channel === "x";
     const near = ["bottom", "right"].includes(config.position);
@@ -343,6 +345,10 @@ function resolve(program, channel, config) {
       return { ...item, [lowKey]: item[lowKey] + delta, [highKey]: item[highKey] + delta };
     });
   }
+  if (config.align !== undefined) {
+    resolved.textAlign = config.align;
+    labelBounds = measuredBounds();
+  }
   const rotatedOverlap = config.rotation !== 0;
   const collisionBounds = rotatedOverlap ? resolved.text.map((text, index) => {
     const x = Array.isArray(resolved.x) ? resolved.x[index] : resolved.x;
@@ -369,11 +375,11 @@ function resolve(program, channel, config) {
     : index > 0 && textBoundsIntersect(orderedBounds[index - 1], item))) {
     throw new Error(`The ${channel}-axis labels overlap each other.`);
   }
-  const title = program.graphicSpec.objects[`${channel}AxisTitle`]
-    ? resolveConcreteGraphicBounds(program.graphicSpec, `${channel}AxisTitle`, program.materializationConfigs.textMetrics)
+  const title = program.graphicSpec.objects[axisGraphicIds(channel, axisId)[3]]
+    ? resolveConcreteGraphicBounds(program.graphicSpec, axisGraphicIds(channel, axisId)[3], program.materializationConfigs.textMetrics)
     : undefined;
   if (title &&
-    program.guideConfigs.axis?.[channel]?.title?.inferredOffset !== true &&
+    program.guideConfigs.axis?.[axisId]?.title?.inferredOffset !== true &&
     labelBounds.some(item => textBoundsIntersect(item, title))) {
     throw new Error(`The ${channel}-axis labels overlap the axis title.`);
   }
@@ -384,12 +390,14 @@ function makeEdit(channel) {
   const op = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
   return action({ op, description: `Edit concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, false);
-    const id = `${channel}AxisLabels`;
+    const selected = selectCartesianAxis(this, channel, args, { create: false });
+    const axisId = selected.id; args = selected.options;
+    const id = axisGraphicIds(channel, axisId)[2];
     if (this.graphicSpec.objects[id]?.type !== "text") throw new Error(`${op} requires existing axis labels.`);
-    const previous = this.guideConfigs.axis?.[channel]?.labels;
+    const previous = this.guideConfigs.axis?.[axisId]?.labels;
     if (!previous) throw new Error(`${op} requires label configuration.`);
     const explicitMode = Object.hasOwn(args, "values") || Object.hasOwn(args, "count");
-    const ticks = this.guideConfigs.axis?.[channel]?.ticks;
+    const ticks = this.guideConfigs.axis?.[axisId]?.ticks;
     const inferredValues = !explicitMode && previous.inferredValues === true &&
       ticks?.mode === "values"
       ? ticks.values
@@ -407,9 +415,9 @@ function makeEdit(channel) {
     config = normalizeAxisLabelMaps(this, config, args, op);
     if (mode === "values") delete config.count; else delete config.values;
     validateConfig(channel, config);
-    assertTickCompatibility(this.guideConfigs.axis?.[channel]?.ticks, config, op);
-    const resolved = resolve(this, channel, config);
-    let next = this._withGuideConfig(channel, "labels", config);
+    assertTickCompatibility(this.guideConfigs.axis?.[axisId]?.ticks, config, op);
+    const resolved = resolve(this, channel, config, axisId);
+    let next = this._withGuideConfig(axisId, "labels", config);
     const properties = {
       length: resolved.text.length,
       x: resolved.x,
@@ -430,10 +438,10 @@ function makeEdit(channel) {
     for (const [property, value] of Object.entries(properties)) {
       next = next.editGraphics({ target: id, property, value });
     }
-    const titleConfig = next.guideConfigs.axis?.[channel]?.title;
+    const titleConfig = next.guideConfigs.axis?.[axisId]?.title;
     if (titleConfig?.inferredOffset === true) {
       const editTitle = channel === "x" ? "editXAxisTitle" : "editYAxisTitle";
-      next = next[editTitle]();
+      next = next[editTitle](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
     }
     return next;
   }));
@@ -447,12 +455,14 @@ function makeCreate(channel) {
   const edit = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
   return action({ op, description: `Create concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, true);
+    const selected = selectCartesianAxis(this, channel, args, { create: true });
+    const axisId = selected.id; args = selected.options;
     const scale = validateUserId(args.scale ?? channel, "Scale id");
-    const guideScale = this.semanticSpec.guides.axis?.[channel]?.scale;
+    const guideScale = this.semanticSpec.guides.axis?.[axisId]?.scale;
     if (guideScale && guideScale !== scale) throw new Error(`${op} conflicts with the existing axis scale.`);
-    const id = `${channel}AxisLabels`;
+    const id = axisGraphicIds(channel, axisId)[2];
     if (this.graphicSpec.objects[id]) throw new Error(`${op} requires missing axis labels.`);
-    const ticks = this.guideConfigs.axis?.[channel]?.ticks;
+    const ticks = this.guideConfigs.axis?.[axisId]?.ticks;
     const hasValues = Object.hasOwn(args, "values");
     const hasCount = Object.hasOwn(args, "count");
     const resolvedScale = this.resolvedScales[scale];
@@ -488,15 +498,15 @@ function makeCreate(channel) {
     }
     validateConfig(channel, config);
     assertTickCompatibility(ticks, config, op);
-    resolve(this, channel, config);
-    return this.editSemantic({ property: `guide.axis.${channel}.scale`, value: scale })
+    resolve(this, channel, config, axisId);
+    return this.editSemantic({ property: `guide.axis.${axisId}.scale`, value: scale })
       .createGraphics({
         id,
         type: "text",
         length: 0,
         ...resolvePlotGraphicPlacement(this)
       })
-      ._withGuideConfig(channel, "labels", config)[edit]();
+      ._withGuideConfig(axisId, "labels", config)[edit](axisId === channel ? undefined : axisTargetArgs(axisId, channel));
   }));
 }
 

package/src/actions/guides/axes/lines.js

@@ -1,3 +1,5 @@
+import { selectCartesianAxis, axisTargetArgs } from "../../../selectors/axes.js";
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
 import { requireSemanticScale } from "../../../selectors/scales.js";
 import { editGraphicProperties } from "../../primitives/graphicProperties.js";
 import { isSourceOwnedText } from "../../../grammar/text.js";
@@ -9,7 +11,7 @@ import {
   validateNonEmptyString,
   validateNonNegativeFinite
 } from "../../../core/validation.js";
-import { axisScaleBindings, resolveGuideCoordinateBounds } from "../../../materialization/coordinateBounds.js";
+import { axisScaleBindings, resolveCartesianAxisFrameBounds } from "../../../materialization/coordinateBounds.js";
 import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import {
   defaultAxisPosition,
@@ -20,8 +22,8 @@ import { resolvePlotGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 
 const DEFAULT_STYLE = Object.freeze({ color: DEFAULT_COLORS.text, lineWidth: 1 });
-const CREATE_OPTIONS = Object.freeze(["scale", "position", "color", "lineWidth"]);
-const EDIT_OPTIONS = Object.freeze(["position", "color", "lineWidth"]);
+const CREATE_OPTIONS = Object.freeze(["target", "scale", "position", "color", "lineWidth"]);
+const EDIT_OPTIONS = Object.freeze(["target", "position", "color", "lineWidth"]);
 
 function validateStyle({ color, lineWidth }) {
   validateNonEmptyString(color, "Axis line color");
@@ -42,7 +44,7 @@ function resolveLineRange(resolvedScale, bounds, channel, explicitRange) {
     : plotRange.reverse();
 }
 
-function resolveGeometry(program, channel, scaleId, position) {
+function resolveGeometry(program, channel, scaleId, position, axisId = channel) {
   const hasConsumer = program.semanticSpec.layers.some(
     layer => !isSourceOwnedText(layer) && layer.encoding?.[channel]?.scale === scaleId
   );
@@ -55,11 +57,7 @@ function resolveGeometry(program, channel, scaleId, position) {
 
   const resolvedScale = program.resolvedScales[scaleId];
   const range = resolvedScale?.range;
-  const bounds = resolveGuideCoordinateBounds(program, {
-    coordinate: program.semanticSpec.guides.axis?.[channel]?.coordinate,
-    scale: scaleId,
-    channel
-  });
+  const bounds = resolveCartesianAxisFrameBounds(program, channel, position, scaleId, axisId);
 
   if (!Array.isArray(range) || range.length !== 2 || !range.every(Number.isFinite)) {
     throw new Error(`Axis line requires a resolved numeric scale "${scaleId}".`);
@@ -80,10 +78,10 @@ function resolveGeometry(program, channel, scaleId, position) {
   );
 }
 
-function axisIds(channel) {
+function axisIds(channel, axisId = channel) {
   return {
-    graphic: `${channel}AxisLine`,
-    guidePath: `guide.axis.${channel}.scale`
+    graphic: axisGraphicIds(channel, axisId)[0],
+    guidePath: `guide.axis.${axisId}.scale`
   };
 }
 
@@ -94,24 +92,26 @@ function createEditAxisLine(channel) {
     { op: operation, description: `Edit the concrete ${channel}-axis line.` },
     withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, EDIT_OPTIONS, operation);
-      const { graphic } = axisIds(channel);
+      const selected = selectCartesianAxis(this, channel, args, { create: false });
+      const axisId = selected.id; args = selected.options;
+      const { graphic } = axisIds(channel, axisId);
       const line = this.graphicSpec.objects[graphic];
 
       if (line?.type !== "line") {
         throw new Error(`${operation} requires an existing ${channel}-axis line.`);
       }
 
-      const previous = this.guideConfigs.axis?.[channel]?.line;
+      const previous = this.guideConfigs.axis?.[axisId]?.line;
       const position = validateAxisPosition(
         channel,
         args.position ?? previous?.position ?? defaultAxisPosition(channel)
       );
-      const scaleId = this.semanticSpec.guides.axis?.[channel]?.scale;
-      const geometry = resolveGeometry(this, channel, scaleId, position);
+      const scaleId = this.semanticSpec.guides.axis?.[axisId]?.scale;
+      const geometry = resolveGeometry(this, channel, scaleId, position, axisId);
       const color = args.color ?? line.properties.stroke;
       const lineWidth = args.lineWidth ?? line.properties.strokeWidth;
       validateStyle({ color, lineWidth });
-      let next = this._withGuideConfig(channel, "line", {
+      let next = this._withGuideConfig(axisId, "line", {
         position,
         color,
         lineWidth
@@ -140,6 +140,8 @@ function createAxisLine(channel) {
     { op: operation, description: `Create the concrete ${channel}-axis line.` },
     withGuideLayoutValidation(function (args = {}) {
       validateKeys(args, CREATE_OPTIONS, operation);
+      const selected = selectCartesianAxis(this, channel, args, { create: true });
+      const axisId = selected.id; args = selected.options;
       const scale = validateUserId(args.scale ?? channel, "Scale id");
       const position = validateAxisPosition(
         channel,
@@ -148,8 +150,8 @@ function createAxisLine(channel) {
       const color = args.color ?? DEFAULT_STYLE.color;
       const lineWidth = args.lineWidth ?? DEFAULT_STYLE.lineWidth;
       validateStyle({ color, lineWidth });
-      resolveGeometry(this, channel, scale, position);
-      const { graphic, guidePath } = axisIds(channel);
+      resolveGeometry(this, channel, scale, position, axisId);
+      const { graphic, guidePath } = axisIds(channel, axisId);
 
       if (this.graphicSpec.objects[graphic] !== undefined) {
         throw new Error(`${operation} requires a missing ${channel}-axis line.`);
@@ -162,7 +164,7 @@ function createAxisLine(channel) {
           type: "line",
           ...resolvePlotGraphicPlacement(this)
         })
-        [editOperation]({ position, color, lineWidth });
+        [editOperation]({ ...axisTargetArgs(axisId, channel), position, color, lineWidth });
     })
   );
 }

package/src/actions/guides/axes/remove.js

@@ -1,3 +1,4 @@
+import { selectCartesianAxis } from "../../../selectors/axes.js";
 import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { validateKeys } from "../../../core/validation.js";
@@ -15,16 +16,19 @@ function makeRemoveAxis(channel) {
         ? "Theta"
         : "Radial";
   const operation = `remove${prefix}Axis`;
-  const graphicIds = axisGraphicIds(channel);
   return action(
     {
       op: operation,
       description: `Remove the complete ${channel}-axis resource.`
     },
     withGuideLayoutValidation(function (args = {}) {
-      validateKeys(args, OPTIONS, operation);
-      const semantic = this.semanticSpec.guides.axis?.[channel];
-      const config = this.guideConfigs.axis?.[channel];
+      const cartesian = ["x", "y"].includes(channel);
+      validateKeys(args, cartesian ? [...OPTIONS, "target"] : OPTIONS, operation);
+      const selected = cartesian ? selectCartesianAxis(this, channel, args, { whole: true }) : { id: channel, options: args };
+      const axisId = selected.id; args = selected.options;
+      const graphicIds = axisGraphicIds(channel, axisId);
+      const semantic = this.semanticSpec.guides.axis?.[axisId];
+      const config = this.guideConfigs.axis?.[axisId];
       const hasGraphic = graphicIds.some(
         id => this.graphicSpec.objects[id] !== undefined
       );
@@ -42,7 +46,7 @@ function makeRemoveAxis(channel) {
       let next = semantic === undefined
         ? this
         : this.editSemantic({
-            property: `guide.axis.${channel}`,
+            property: `guide.axis.${axisId}`,
             remove: true
           });
       for (const id of graphicIds) {
@@ -50,7 +54,7 @@ function makeRemoveAxis(channel) {
           next = next.editGraphics({ target: id, remove: true });
         }
       }
-      return next._withoutMaterializationConfig(["guides", "axis", channel]);
+      return next._withoutMaterializationConfig(["guides", "axis", axisId]);
     })
   );
 }

package/src/actions/guides/axes/tickGroups.js

@@ -3,7 +3,7 @@ import { action } from "../../../core/action.js";
 import { isPlainObject } from "../../../core/immutable.js";
 import { validateKeys, validateOptionObject } from "../../../core/validation.js";
 
-const CREATE_OPTIONS = Object.freeze([
+const CREATE_OPTIONS = Object.freeze(["target",
   "scale",
   "position",
   "count",
@@ -11,14 +11,14 @@ const CREATE_OPTIONS = Object.freeze([
   "ticks",
   "labels"
 ]);
-const EDIT_OPTIONS = Object.freeze([
+const EDIT_OPTIONS = Object.freeze(["target",
   "position",
   "count",
   "values",
   "ticks",
   "labels"
 ]);
-const TICK_OPTIONS = Object.freeze(["length", "color", "lineWidth", "alongOffset"]);
+const TICK_OPTIONS = Object.freeze(["length", "color", "lineWidth", "alongOffset", "strokeDash", "strokeDashMap"]);
 const LABEL_OPTIONS = Object.freeze([
   "offset",
   "format",
@@ -34,10 +34,11 @@ const LABEL_OPTIONS = Object.freeze([
   "labelMap",
   "alongOffset",
   "flush",
-  "colorMap"
+  "colorMap",
+  "align"
 ]);
-const SHARED_CREATE = Object.freeze(["scale", "position", "count", "values"]);
-const SHARED_EDIT = Object.freeze(["position", "count", "values"]);
+const SHARED_CREATE = Object.freeze(["target", "scale", "position", "count", "values"]);
+const SHARED_EDIT = Object.freeze(["target", "position", "count", "values"]);
 
 function validateNested(value, supported, label) {
   if (!isPlainObject(value)) {
@@ -104,7 +105,7 @@ function makeCreate(channel) {
       const shared = select(args, SHARED_CREATE);
       const tickArgs = { ...shared, ...(args.ticks ?? {}) };
       const labelArgs = {
-        ...select(shared, ["scale", "position"]),
+        ...select(shared, ["target", "scale", "position"]),
         ...(args.labels ?? {})
       };