ggaction 0.0.11 → 0.0.13

package/src/actions/guides/applicability.js

@@ -1,3 +1,4 @@
+import { isSourceOwnedText } from "../../grammar/text.js";
 import {
   BAR_ORIENTATIONS,
   resolveBarOrientation
@@ -8,6 +9,7 @@ import {
 } from "../../core/vocabulary.js";
 import { findSemanticScale } from "../../selectors/scales.js";
 import { findDataset } from "../../selectors/datasets.js";
+import { isOpacityLegendLayer } from "../../materialization/legends.js";
 import { findUpstreamTransform } from
   "../../materialization/dataProvenance.js";
 
@@ -19,8 +21,8 @@ function isHorizonLayer(program, layer) {
   ) !== undefined;
 }
 
-function hasEncoding(program, channel, { scaled = false, grid = false } = {}) {
-  return program.semanticSpec.layers.some(layer => {
+function hasEncoding(program, layers, channel, { scaled = false, grid = false } = {}) {
+  return layers.some(layer => {
     if (isHorizonLayer(program, layer) && channel !== "x") return false;
     const encoding = layer.encoding?.[channel];
     if (!scaled && !grid) return encoding !== undefined;
@@ -31,23 +33,22 @@ function hasEncoding(program, channel, { scaled = false, grid = false } = {}) {
   });
 }
 
-function positionalApplicability(program, channels) {
+function positionalApplicability(program, layers, channels) {
   return Object.freeze(Object.fromEntries(
     channels.map(channel => [
       channel,
       Object.freeze({
-        axis: hasEncoding(program, channel),
-        grid: hasEncoding(program, channel, { grid: true })
+        axis: hasEncoding(program, layers, channel),
+        grid: hasEncoding(program, layers, channel, { grid: true })
       })
     ])
   ));
 }
 
-export function hasInferableLegend(program) {
-  return program.semanticSpec.layers.some(layer =>
+export function hasInferableLegend(program, layers = program.semanticSpec.layers) {
+  return layers.some(layer =>
     !isHorizonLayer(program, layer) && (
-      (layer.mark?.type === "point" &&
-        layer.encoding?.opacity?.scale !== undefined) ||
+      isOpacityLegendLayer(layer) ||
       (layer.mark?.type === "point" &&
         layer.encoding?.size?.scale !== undefined) ||
       (layer.mark?.type === "point" &&
@@ -66,13 +67,14 @@ export function hasInferableLegend(program) {
   );
 }
 
-export function resolveGuideApplicability(program) {
+export function resolveGuideApplicability(program, layers = program.semanticSpec.layers) {
   const cartesian = positionalApplicability(
     program,
+    layers,
     CARTESIAN_POSITION_CHANNELS
   );
-  const polar = positionalApplicability(program, POLAR_POSITION_CHANNELS);
-  const parallel = program.semanticSpec.layers.some(layer =>
+  const polar = positionalApplicability(program, layers, POLAR_POSITION_CHANNELS);
+  const parallel = layers.some(layer =>
     layer.encoding?.parallel?.dimensions?.length >= 2
   );
   return Object.freeze({
@@ -101,12 +103,13 @@ export function resolveGuideApplicability(program) {
         radial: polar.radius.grid
       })
     }),
-    legend: hasInferableLegend(program)
+    legend: hasInferableLegend(program, layers)
   });
 }
 
-export function resolveAutomaticGridOptions(program) {
-  const applicability = resolveGuideApplicability(program);
+export function resolveAutomaticGridOptions(program, layers = program.semanticSpec.layers) {
+  layers = layers.filter(layer => !isSourceOwnedText(layer));
+  const applicability = resolveGuideApplicability(program, layers);
   const directions = applicability.grid.directions;
   if (applicability.grid.polar && !applicability.grid.cartesian) {
     return Object.freeze({
@@ -118,10 +121,10 @@ export function resolveAutomaticGridOptions(program) {
     return Object.freeze({ horizontal: false, vertical: {} });
   }
 
-  const barOrientations = program.semanticSpec.layers
+  const barOrientations = layers
     .map(resolveBarOrientation)
     .filter(Boolean);
-  const positionedLayers = program.semanticSpec.layers.filter(
+  const positionedLayers = layers.filter(
     layer => layer.encoding?.x !== undefined && layer.encoding?.y !== undefined
   );
   const horizontalQuantitative = positionedLayers.length > 0 &&

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

@@ -1,3 +1,4 @@
+import { isSourceOwnedText } from "../../../grammar/text.js";
 import { action } from "../../../core/action.js";
 import { isPlainObject } from "../../../core/immutable.js";
 import { validateUserId } from "../../../core/identifiers.js";
@@ -19,7 +20,7 @@ function validateAxisOption(value, channel) {
   }
 }
 
-function validateArgs(args) {
+export function validateAxesArgs(args) {
   validateOptionObject(args, TOP_OPTIONS, "createAxes");
   validateAxisOption(args.x, "x");
   validateAxisOption(args.y, "y");
@@ -189,9 +190,9 @@ const createAxes = action(
     description: "Read a semantic coordinate and create its Cartesian axes."
   },
   function (args = {}) {
-    const coordinateDescriptor = validateArgs(args);
+    const coordinateDescriptor = validateAxesArgs(args);
     const { cartesianLayers, polarLayers, parallelLayers } = inspectChannels(
-      this.semanticSpec.layers
+      this.semanticSpec.layers.filter(layer => !isSourceOwnedText(layer))
     );
     const requestedCoordinateType = coordinateDescriptor.id === undefined
       ? undefined

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

@@ -1,8 +1,11 @@
+import { isSourceOwnedText } from "../../../grammar/text.js";
+import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { isPlainObject } from "../../../core/immutable.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import { validateKeys } from "../../../core/validation.js";
 import { hasCoordinate } from "../../../selectors/index.js";
+import { validateEnabledAxisComponents } from "./components.js";
 
 const TOP_OPTIONS = Object.freeze([
   "scale",
@@ -38,14 +41,15 @@ function validateNested(value, supported, label) {
   validateKeys(value, supported, label);
 }
 
-function validateArgs(args, operation) {
+export function validateAxisArgs(args, operation) {
   validateKeys(args, TOP_OPTIONS, operation);
 
-  if (Object.hasOwn(args, "line")) {
+  validateEnabledAxisComponents(args, operation);
+  if (Object.hasOwn(args, "line") && args.line !== false) {
     validateNested(args.line, LINE_OPTIONS, `${operation}.line`);
   }
 
-  if (Object.hasOwn(args, "ticksAndLabels")) {
+  if (Object.hasOwn(args, "ticksAndLabels") && args.ticksAndLabels !== false) {
     validateNested(
       args.ticksAndLabels,
       TICK_GROUP_OPTIONS,
@@ -53,7 +57,7 @@ function validateArgs(args, operation) {
     );
   }
 
-  if (Object.hasOwn(args, "title")) {
+  if (Object.hasOwn(args, "title") && args.title !== false) {
     validateNested(args.title, TITLE_OPTIONS, `${operation}.title`);
   }
 }
@@ -76,8 +80,8 @@ function makeCreateAxis(channel) {
       op: operation.create,
       description: `Create the complete ${channel}-axis.`
     },
-    function (args = {}) {
-      validateArgs(args, operation.create);
+    withGuideLayoutValidation(function (args = {}) {
+      validateAxisArgs(args, operation.create);
       const shared = {};
       if (Object.hasOwn(args, "scale")) shared.scale = args.scale;
       if (Object.hasOwn(args, "position")) shared.position = args.position;
@@ -89,7 +93,7 @@ function makeCreateAxis(channel) {
         const exists = hasCoordinate(next, coordinate);
         const hasConsumer = next.semanticSpec.layers.some(
           layer =>
-            layer.coordinate === coordinate &&
+            !isSourceOwnedText(layer) && layer.coordinate === coordinate &&
             layer.encoding?.[channel]?.scale === scale
         );
 
@@ -108,17 +112,13 @@ function makeCreateAxis(channel) {
         });
       }
 
-      return next[operation.line]({
-        ...shared,
-        ...(args.line ?? {})
-      })[operation.ticksAndLabels]({
-        ...shared,
-        ...(args.ticksAndLabels ?? {})
-      })[operation.title]({
-        ...shared,
-        ...(args.title ?? {})
-      });
-    }
+      for (const component of ["line", "ticksAndLabels", "title"]) {
+        if (args[component] !== false) {
+          next = next[operation[component]]({ ...shared, ...(args[component] ?? {}) });
+        }
+      }
+      return next;
+    })
   );
 }
 

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

@@ -0,0 +1,43 @@
+import { axisGraphicIds } from "../../../materialization/guides/resources.js";
+
+export const AXIS_COMPONENTS = Object.freeze(["line", "ticks", "labels", "title"]);
+
+export function axisComponentId(channel, component) {
+  return axisGraphicIds(channel)[AXIS_COMPONENTS.indexOf(component)];
+}
+
+export function axisComponentDisabled(args, component) {
+  return args[component === "ticks" || component === "labels"
+    ? "ticksAndLabels" : component] === false;
+}
+
+export function validateEnabledAxisComponents(args, operation) {
+  if (AXIS_COMPONENTS.every(component => axisComponentDisabled(args, component))) {
+    throw new Error(`${operation} requires at least one enabled axis component.`);
+  }
+}
+
+export function hasAxisComponent(program, channel, component) {
+  return program.graphicSpec.objects[axisComponentId(channel, component)] !== undefined ||
+    program.guideConfigs.axis?.[channel]?.[component] !== undefined ||
+    (component === "title" &&
+      program.semanticSpec.guides.axis?.[channel]?.title !== undefined);
+}
+
+export function assertRemovableAxisComponent(program, channel, component, operation) {
+  if (!hasAxisComponent(program, channel, component)) {
+    throw new Error(`${operation}.${component} requires an existing ${channel}-axis ${component}.`);
+  }
+}
+
+export function removeAxisComponent(program, channel, component) {
+  const id = axisComponentId(channel, component);
+  let next = program;
+  if (component === "title" && next.semanticSpec.guides.axis?.[channel]?.title !== undefined) {
+    next = next.editSemantic({ property: `guide.axis.${channel}.title`, remove: true });
+  }
+  if (next.graphicSpec.objects[id] !== undefined) {
+    next = next.editGraphics({ target: id, remove: true });
+  }
+  return next._withoutMaterializationConfig(["guides", "axis", channel, component]);
+}

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

@@ -1,7 +1,16 @@
+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 {
+  AXIS_COMPONENTS,
+  axisComponentId as graphicId,
+  hasAxisComponent as hasComponent,
+  assertRemovableAxisComponent as assertRemovable,
+  removeAxisComponent as removeComponent
+} from "./components.js";
+
 const OPTIONS = Object.freeze([
   "position", "line", "ticks", "labels", "ticksAndLabels", "title"
 ]);
@@ -11,19 +20,14 @@ const TICK_OPTIONS = Object.freeze([
 ]);
 const LABEL_OPTIONS = Object.freeze([
   "count", "values", "offset", "format", "color", "fontSize",
-  "fontFamily", "fontWeight"
+  "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
+  "lineHeight", "overlap"
 ]);
 const GROUP_OPTIONS = Object.freeze(["count", "values", "ticks", "labels"]);
 const TITLE_OPTIONS = Object.freeze([
   "text", "at", "offset", "rotation", "color", "fontSize",
   "fontFamily", "fontWeight"
 ]);
-const COMPONENTS = Object.freeze({
-  line: Object.freeze({ suffix: "Line", config: "line" }),
-  ticks: Object.freeze({ suffix: "Ticks", config: "ticks" }),
-  labels: Object.freeze({ suffix: "Labels", config: "labels" }),
-  title: Object.freeze({ suffix: "Title", config: "title" })
-});
 
 function validateNested(args, key, options, operation, { allowFalse = false } = {}) {
   if (!Object.hasOwn(args, key)) return;
@@ -59,7 +63,8 @@ function validateArgs(args, operation) {
   }
   if (args.ticksAndLabels !== false && args.ticksAndLabels?.labels !== undefined) {
     validateNested(args.ticksAndLabels, "labels", [
-      "offset", "format", "color", "fontSize", "fontFamily", "fontWeight"
+      "offset", "format", "color", "fontSize", "fontFamily", "fontWeight",
+      "rotation", "maxWidth", "wrap", "lineHeight", "overlap"
     ], `${operation}.ticksAndLabels`);
   }
 }
@@ -77,46 +82,6 @@ function names(channel) {
   };
 }
 
-function graphicId(channel, component) {
-  return `${channel}Axis${COMPONENTS[component].suffix}`;
-}
-
-function hasComponent(program, channel, component) {
-  return program.graphicSpec.objects[graphicId(channel, component)] !== undefined ||
-    program.guideConfigs.axis?.[channel]?.[COMPONENTS[component].config] !== undefined ||
-    (component === "title" &&
-      program.semanticSpec.guides.axis?.[channel]?.title !== undefined);
-}
-
-function assertRemovable(program, channel, component, operation) {
-  if (!hasComponent(program, channel, component)) {
-    throw new Error(
-      `${operation}.${component} requires an existing ${channel}-axis ${component}.`
-    );
-  }
-}
-
-function removeComponent(program, channel, component) {
-  const id = graphicId(channel, component);
-  let next = program;
-
-  if (
-    component === "title" &&
-    next.semanticSpec.guides.axis?.[channel]?.title !== undefined
-  ) {
-    next = next.editSemantic({
-      property: `guide.axis.${channel}.title`,
-      remove: true
-    });
-  }
-  if (next.graphicSpec.objects[id] !== undefined) {
-    next = next.editGraphics({ target: id, remove: true });
-  }
-  return next._withoutMaterializationConfig([
-    "guides", "axis", channel, COMPONENTS[component].config
-  ]);
-}
-
 function buildPlan(program, channel, args, operation) {
   const shared = Object.hasOwn(args, "position")
     ? { position: args.position }
@@ -168,7 +133,7 @@ function applyPlan(program, channel, plan, operation) {
       : next[step.operation](step.args);
   }
 
-  const hasRetainedGraphic = Object.keys(COMPONENTS).some(
+  const hasRetainedGraphic = AXIS_COMPONENTS.some(
     component => next.graphicSpec.objects[graphicId(channel, component)] !== undefined
   );
   if (!hasRetainedGraphic && (
@@ -187,7 +152,7 @@ function makeEditAxis(channel) {
       op: operation.operation,
       description: `Edit selected existing ${channel}-axis components.`
     },
-    function (args = {}) {
+    withGuideLayoutValidation(function (args = {}) {
       validateArgs(args, operation.operation);
       const plan = buildPlan(this, channel, args, operation);
 
@@ -195,7 +160,7 @@ function makeEditAxis(channel) {
       // later leaf failure cannot begin the returned action trace or state.
       applyPlan(this, channel, plan, operation);
       return applyPlan(this, channel, plan, operation);
-    }
+    })
   );
 }
 

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

@@ -1,3 +1,4 @@
+import { withGuideLayoutValidation } from "../../../materialization/guides/layout.js";
 import { action } from "../../../core/action.js";
 import { validateUserId } from "../../../core/identifiers.js";
 import {
@@ -16,6 +17,7 @@ import {
   mapOrdinalPositionValues
 } from "../../../grammar/scales/index.js";
 import { formatTimeTick, formatTimeTicks } from "../../../grammar/ticks.js";
+import { resolveRotation } from "../../../grammar/rotation.js";
 import { valuesFromTickConfig } from "../tickValues.js";
 import { DEFAULT_COLORS, DEFAULT_FONT_FAMILY } from
   "../../../theme/defaults.js";
@@ -35,10 +37,12 @@ import {
 } from "../../../core/textMetrics.js";
 import { resolveConcreteGraphicBounds } from
   "../../../grammar/schemas/graphicBounds.js";
+import { wrapText } from "../../../layout/text.js";
 
 const OPTIONS = [
   "scale", "position", "count", "values", "offset", "format", "color",
-  "fontSize", "fontFamily", "fontWeight"
+  "fontSize", "fontFamily", "fontWeight", "rotation", "maxWidth", "wrap",
+  "lineHeight", "overlap"
 ];
 
 const DEFAULTS = {
@@ -46,9 +50,30 @@ const DEFAULTS = {
   color: DEFAULT_COLORS.text,
   fontSize: 12,
   fontFamily: DEFAULT_FONT_FAMILY,
-  fontWeight: "normal"
+  fontWeight: "normal",
+  rotation: 0,
+  overlap: "error"
 };
 
+function normalizeLabelLayout(config, args, operation) {
+  const next = { ...config };
+  next.rotation = Object.hasOwn(args, "rotation")
+    ? resolveRotation(args.rotation, `${operation} rotation`)
+    : next.rotation ?? 0;
+  next.overlap ??= "error";
+  if (args.maxWidth === false) {
+    if (Object.hasOwn(args, "wrap") || Object.hasOwn(args, "lineHeight")) {
+      throw new Error(`${operation} cannot combine maxWidth false with wrap or lineHeight.`);
+    }
+    delete next.maxWidth;
+    delete next.wrap;
+    delete next.lineHeight;
+  } else if (next.maxWidth !== undefined) {
+    next.wrap ??= "word";
+  }
+  return next;
+}
+
 export function validateAxisTextStyle(config, label) {
   validateNonEmptyString(config.color, `${label} color`);
   validatePositiveFinite(config.fontSize, `${label} fontSize`);
@@ -90,6 +115,25 @@ function validateConfig(channel, config) {
   validateNonNegativeFinite(config.offset, "Label offset");
   validateAxisTextStyle(config, "Label");
   validateAxisFormat(config.format);
+  if (!Number.isFinite(config.rotation)) {
+    throw new TypeError("Label rotation must resolve to finite radians.");
+  }
+  if (config.maxWidth !== undefined) {
+    validatePositiveFinite(config.maxWidth, "Label maxWidth");
+    if (!["word", "character"].includes(config.wrap)) {
+      throw new Error(`Unsupported axis label wrap "${config.wrap}".`);
+    }
+  } else if (config.wrap !== undefined || config.lineHeight !== undefined) {
+    throw new Error("Axis label wrap and lineHeight require maxWidth.");
+  }
+  if (config.lineHeight !== undefined && (
+    !Number.isFinite(config.lineHeight) || config.lineHeight < config.fontSize
+  )) {
+    throw new RangeError("Axis label lineHeight must cover fontSize.");
+  }
+  if (!["error", "allow"].includes(config.overlap)) {
+    throw new Error(`Unsupported axis label overlap policy "${config.overlap}".`);
+  }
 }
 
 function assertTickCompatibility(ticks, config, operation) {
@@ -99,6 +143,59 @@ function assertTickCompatibility(ticks, config, operation) {
   if (config.mode === "values" && !sameOrderedValues(ticks.values, config.values)) throw new Error(`${operation} conflicts with axis ticks.`);
 }
 
+function expandWrappedLabels(resolved, text, config, channel) {
+  if (config.maxWidth === undefined) {
+    return {
+      ...resolved,
+      text,
+      groups: text.map((_, index) => index)
+    };
+  }
+  const style = {
+    fontSize: config.fontSize,
+    fontFamily: config.fontFamily,
+    fontWeight: config.fontWeight
+  };
+  const lineHeight = config.lineHeight ?? config.fontSize * 1.2;
+  const expanded = { text: [], x: [], y: [], groups: [] };
+  for (let index = 0; index < text.length; index += 1) {
+    const lines = wrapText(text[index], {
+      maxWidth: config.maxWidth,
+      mode: config.wrap,
+      style
+    });
+    validateGeneratedItemLimit(
+      expanded.text.length + lines.length,
+      "Axis label line count"
+    );
+    const baseX = Array.isArray(resolved.x) ? resolved.x[index] : resolved.x;
+    const baseY = Array.isArray(resolved.y) ? resolved.y[index] : resolved.y;
+    for (let line = 0; line < lines.length; line += 1) {
+      expanded.text.push(lines[line]);
+      expanded.x.push(baseX);
+      expanded.y.push(channel === "x"
+        ? baseY + (resolved.textBaseline === "top" ? line : -line) * lineHeight
+        : baseY + (line - (lines.length - 1) / 2) * lineHeight);
+      expanded.groups.push(index);
+    }
+  }
+  return { ...resolved, ...expanded };
+}
+
+function unionLabelBounds(records) {
+  const byGroup = new Map();
+  for (const { bounds, group } of records) {
+    const previous = byGroup.get(group);
+    byGroup.set(group, previous === undefined ? bounds : {
+      left: Math.min(previous.left, bounds.left),
+      right: Math.max(previous.right, bounds.right),
+      top: Math.min(previous.top, bounds.top),
+      bottom: Math.max(previous.bottom, bounds.bottom)
+    });
+  }
+  return [...byGroup.values()];
+}
+
 function resolve(program, channel, config) {
   const scale = program.resolvedScales[config.scale];
   const bounds = resolveGraphicBounds(program);
@@ -132,9 +229,8 @@ function resolve(program, channel, config) {
             ? formatTransformedTick(scale.type, item)
             : String(item)
       ));
-  const resolved = {
+  const geometry = {
     values,
-    text,
     ...resolveAxisLabelGeometry({
       bounds,
       channel,
@@ -143,8 +239,9 @@ function resolve(program, channel, config) {
       offset: config.offset
     })
   };
+  const resolved = expandWrappedLabels(geometry, text, config, channel);
   const canvas = findCanvasGraphic(program)?.properties;
-  const labelBounds = text.map((value, index) => resolveTextBounds({
+  const labelBounds = 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,
@@ -152,15 +249,20 @@ function resolve(program, channel, config) {
     fontFamily: config.fontFamily,
     fontWeight: config.fontWeight,
     textAlign: resolved.textAlign,
-    textBaseline: resolved.textBaseline
+    textBaseline: resolved.textBaseline,
+    rotation: config.rotation
   }));
-  const orderedBounds = [...labelBounds].sort((left, right) => channel === "x"
+  const groupedBounds = unionLabelBounds(labelBounds.map((bounds, index) => ({
+    bounds,
+    group: resolved.groups[index]
+  })));
+  const orderedBounds = groupedBounds.sort((left, right) => channel === "x"
     ? left.left - right.left
     : left.top - right.top);
   if (!canvas || !labelBounds.every(item => textBoundsFitCanvas(item, canvas))) {
     throw new Error(`The ${channel}-axis labels do not fit the Canvas margin.`);
   }
-  if (orderedBounds.some((item, index) => index > 0 &&
+  if (config.overlap === "error" && orderedBounds.some((item, index) => index > 0 &&
     textBoundsIntersect(orderedBounds[index - 1], item))) {
     throw new Error(`The ${channel}-axis labels overlap each other.`);
   }
@@ -177,7 +279,7 @@ function resolve(program, channel, config) {
 
 function makeEdit(channel) {
   const op = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
-  return action({ op, description: `Edit concrete ${channel}-axis labels.` }, function (args = {}) {
+  return action({ op, description: `Edit concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, false);
     const id = `${channel}AxisLabels`;
     if (this.graphicSpec.objects[id]?.type !== "text") throw new Error(`${op} requires existing axis labels.`);
@@ -192,20 +294,20 @@ function makeEdit(channel) {
     const mode = Object.hasOwn(args, "values") || inferredValues !== undefined
       ? "values"
       : Object.hasOwn(args, "count") ? "count" : previous.mode;
-    const config = {
+    const config = normalizeLabelLayout({
       ...previous,
       ...args,
       ...(inferredValues === undefined ? {} : { values: inferredValues }),
       ...(explicitMode ? { inferredValues: false } : {}),
       mode
-    };
+    }, 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);
-    for (const [property, value] of Object.entries({
-      length: resolved.values.length,
+    const properties = {
+      length: resolved.text.length,
       x: resolved.x,
       y: resolved.y,
       text: resolved.text,
@@ -215,14 +317,20 @@ function makeEdit(channel) {
       fontWeight: config.fontWeight,
       textAlign: resolved.textAlign,
       textBaseline: resolved.textBaseline
-    })) next = next.editGraphics({ target: id, property, value });
+    };
+    if (config.rotation !== 0 || this.graphicSpec.objects[id].items.some(
+      item => Object.hasOwn(item.properties, "rotation")
+    )) properties.rotation = config.rotation;
+    for (const [property, value] of Object.entries(properties)) {
+      next = next.editGraphics({ target: id, property, value });
+    }
     const titleConfig = next.guideConfigs.axis?.[channel]?.title;
     if (titleConfig?.inferredOffset === true) {
       const editTitle = channel === "x" ? "editXAxisTitle" : "editYAxisTitle";
       next = next[editTitle]();
     }
     return next;
-  });
+  }));
 }
 
 const editXAxisLabels = makeEdit("x");
@@ -231,7 +339,7 @@ const editYAxisLabels = makeEdit("y");
 function makeCreate(channel) {
   const op = channel === "x" ? "createXAxisLabels" : "createYAxisLabels";
   const edit = channel === "x" ? "editXAxisLabels" : "editYAxisLabels";
-  return action({ op, description: `Create concrete ${channel}-axis labels.` }, function (args = {}) {
+  return action({ op, description: `Create concrete ${channel}-axis labels.` }, withGuideLayoutValidation(function (args = {}) {
     validateOptions(args, op, true);
     const scale = validateUserId(args.scale ?? channel, "Scale id");
     const guideScale = this.semanticSpec.guides.axis?.[channel]?.scale;
@@ -242,7 +350,7 @@ function makeCreate(channel) {
     const hasValues = Object.hasOwn(args, "values");
     const hasCount = Object.hasOwn(args, "count");
     const mode = hasValues ? "values" : hasCount ? "count" : ticks?.mode ?? "count";
-    const config = {
+    const config = normalizeLabelLayout({
       scale,
       position: defaultAxisPosition(channel),
       offset: channel === "x" ? 18 : 12,
@@ -251,10 +359,12 @@ function makeCreate(channel) {
       fontSize: DEFAULTS.fontSize,
       fontFamily: DEFAULTS.fontFamily,
       fontWeight: DEFAULTS.fontWeight,
+      rotation: DEFAULTS.rotation,
+      overlap: DEFAULTS.overlap,
       ...args,
       inferredValues: !hasValues && !hasCount && ticks?.inferredValues === true,
       mode
-    };
+    }, args, op);
     if (mode === "values") config.values ??= ticks?.values; else config.count ??= ticks?.count ?? DEFAULTS.count;
     validateConfig(channel, config);
     assertTickCompatibility(ticks, config, op);
@@ -267,7 +377,7 @@ function makeCreate(channel) {
         ...resolvePlotGraphicPlacement(this)
       })
       ._withGuideConfig(channel, "labels", config)[edit]();
-  });
+  }));
 }
 
 const createXAxisLabels = makeCreate("x");