ggaction 0.0.2 → 0.0.4

package/src/actions/marks/{area.js → area/actions.js}

@@ -1,35 +1,39 @@
-import { action } from "../../core/action.js";
-import { validateUserId } from "../../core/identifiers.js";
+import { action } from "../../../core/action.js";
+import { validateUserId } from "../../../core/identifiers.js";
 import {
   validateNonEmptyString,
   validateNonNegativeFinite,
   validateUnitInterval
-} from "../../core/validation.js";
+} from "../../../core/validation.js";
 import {
   deriveAreaSeries,
   deriveDensityAreaSeries,
   layoutDensityAreaSeries
-} from "../../grammar/areaSeries.js";
-import { mapContinuousScaleValues, mapOrdinalValues } from "../../grammar/scales.js";
+} from "../../../grammar/areaSeries.js";
+import { mapContinuousScaleValues, mapOrdinalValues } from "../../../grammar/scales/index.js";
 import {
   assertMarkAvailable,
+  applyLayeredMarkInheritance,
+  materializeInheritedMark,
+  resolveLayeredMarkInheritance,
   resolveMarkId,
   resolveMarkData,
   validateMarkOptions
-} from "./shared.js";
-import { DEFAULT_COLORS } from "../../theme/defaults.js";
-import { findDataset } from "../../selectors/datasets.js";
-import { findLayer } from "../../selectors/layers.js";
+} from "../shared.js";
+import { DEFAULT_COLORS } from "../../../theme/defaults.js";
+import { findDataset } from "../../../selectors/datasets.js";
+import { findLayer } from "../../../selectors/layers.js";
 import {
   buildAreaCurvePathCommands,
   validateCurveInterpolation
-} from "../../grammar/curveCommands.js";
-import { buildLinearPathCommands } from "../../grammar/pathCommands.js";
-import { resolveEligibleLayer } from "../../selectors/layers.js";
-import { canMaterializeArea } from "../../materialization/marks.js";
-import { findUpstreamTransform } from "../../materialization/dataProvenance.js";
+} from "../../../grammar/curveCommands.js";
+import { buildLinearPathCommands } from "../../../grammar/pathCommands.js";
+import { resolveEligibleLayer } from "../../../selectors/layers.js";
+import { canMaterializeArea } from "../../../materialization/marks/index.js";
+import { findUpstreamTransform } from "../../../materialization/dataProvenance.js";
 import { resolveMarkGraphicPlacement } from
-  "../../materialization/graphicHierarchy.js";
+  "../../../materialization/graphicHierarchy.js";
+import { rematerializeHighlightBaseline } from "../lifecycle.js";
 
 const CREATE_OPTIONS = Object.freeze([
   "id", "data", "fill", "opacity", "stroke", "strokeWidth", "curve"
@@ -37,7 +41,7 @@ const CREATE_OPTIONS = Object.freeze([
 const EDIT_OPTIONS = Object.freeze([
   "target", "fill", "opacity", "stroke", "strokeWidth", "curve"
 ]);
-const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
 export function validateAreaCreateOutline(args, operation = "createAreaMark") {
   if (Object.hasOwn(args, "strokeWidth") && !Object.hasOwn(args, "stroke")) {
@@ -67,20 +71,27 @@ const createAreaMark = action(
       markType: "area",
       operation: "createAreaMark"
     });
-    const { data } = resolveMarkData(this, args);
+    const inherited = resolveLayeredMarkInheritance(this, args, "area");
+    const { data } = resolveMarkData(this, {
+      ...args,
+      ...(args.data === undefined && this.context.currentData === undefined &&
+        inherited?.data !== undefined ? { data: inherited.data } : {})
+    });
     const fill = validateNonEmptyString(args.fill ?? DEFAULT_COLORS.mark, "Area fill");
     const opacity = validateUnitInterval(args.opacity ?? 0.2, "Area opacity");
     const curve = validateCurveInterpolation(args.curve ?? "linear");
     const { stroke, strokeWidth } = validateAreaCreateOutline(args);
     assertMarkAvailable(this, id);
-    return this
+    let created = this
       .editSemantic({ property: `layer[${id}].mark.type`, value: "area" })
-      .editSemantic({ property: `layer[${id}].data`, value: data })
+      .editSemantic({ property: `layer[${id}].data`, value: data });
+    created = applyLayeredMarkInheritance(created, id, inherited);
+    created = created
       .createGraphics({
         id,
         type: "path",
         length: 0,
-        ...resolveMarkGraphicPlacement(this, { data, markType: "area" })
+        ...resolveMarkGraphicPlacement(created, { data, markType: "area" })
       })
       ._withMarkConfig(id, {
         fill,
@@ -88,6 +99,7 @@ const createAreaMark = action(
         ...(Object.hasOwn(args, "curve") ? { curve } : {}),
         ...(stroke === undefined ? {} : { stroke, strokeWidth })
       });
+    return materializeInheritedMark(created, id);
   }
 );
 
@@ -98,20 +110,17 @@ const rematerializeAreaMark = action(
   },
   function (args = {}) {
     validateMarkOptions(args, REMATERIALIZE_OPTIONS, "rematerializeAreaMark");
-    const id = validateUserId(args.id, "Area mark id");
-    const highlights = Object.entries(
-      this.materializationConfigs.highlights ?? {}
-    ).filter(([, config]) => config.target === id);
-    if (highlights.length > 0) {
-      let baseline = this;
-      for (const [highlightId] of highlights) {
-        baseline = baseline._withoutMaterializationConfig(["highlights", highlightId]);
-      }
-      return baseline
-        .editGraphics({ target: id, property: "length", value: 0 })
-        .rematerializeAreaMark({ id })
-        .rematerializeMarkHighlights({ target: id, highlights });
+    if (args.scales !== undefined && typeof args.scales !== "boolean") {
+      throw new TypeError("rematerializeAreaMark scales must be a boolean.");
     }
+    const id = validateUserId(args.id, "Area mark id");
+    const highlighted = rematerializeHighlightBaseline(this, {
+      target: id,
+      operation: "rematerializeAreaMark",
+      resetProperty: "length",
+      resetValue: 0
+    });
+    if (highlighted !== undefined) return highlighted;
     const layer = findLayer(this, id);
     const dataset = findDataset(this, layer?.data);
     if (layer?.mark?.type !== "area" || this.graphicSpec.objects[id]?.type !== "path") {
@@ -148,10 +157,12 @@ const rematerializeAreaMark = action(
     const derived = densityTransform === undefined
       ? rawDerived
       : layoutDensityAreaSeries(rawDerived, layout);
-    let resolved = this
-      .rematerializeScale({ id: xScaleId })
-      .rematerializeScale({ id: yScaleId });
-    if (colorEncoding?.scale !== undefined) {
+    let resolved = args.scales === false
+      ? this
+      : this
+          .rematerializeScale({ id: xScaleId })
+          .rematerializeScale({ id: yScaleId });
+    if (args.scales !== false && colorEncoding?.scale !== undefined) {
       resolved = resolved.rematerializeScale({ id: colorEncoding.scale });
     }
     const xScale = resolved.resolvedScales[xScaleId];
@@ -259,7 +270,9 @@ const rematerializeAreaMark = action(
       );
     });
     const config = this.markConfigs[id];
-    const fills = colorEncoding?.scale === undefined
+    const fills = config.errorBand?.fill !== undefined
+      ? paths.map(() => config.errorBand.fill)
+      : colorEncoding?.scale === undefined
       ? paths.map(() => config.fill)
       : mapOrdinalValues(
           derived.series.map(series => series.key[colorEncoding.field]),

package/src/actions/marks/area/index.js

@@ -0,0 +1,4 @@
+export {
+  registerAreaMarkActions,
+  validateAreaCreateOutline
+} from "./actions.js";

package/src/actions/marks/bar/create.js

@@ -1,6 +1,9 @@
 import { action } from "../../../core/action.js";
 import {
   assertMarkAvailable,
+  applyLayeredMarkInheritance,
+  materializeInheritedMark,
+  resolveLayeredMarkInheritance,
   resolveMarkId,
   resolveMarkData,
   validateMarkOptions
@@ -8,7 +11,9 @@ import {
 import { resolveMarkGraphicPlacement } from
   "../../../materialization/graphicHierarchy.js";
 
-const CREATE_OPTIONS = Object.freeze(["id", "data"]);
+const CREATE_OPTIONS = Object.freeze([
+  "id", "data", "fill", "opacity", "stroke", "strokeWidth"
+]);
 
 export const createBarMark = action(
   {
@@ -23,11 +28,16 @@ export const createBarMark = action(
       markType: "bar",
       operation: "createBarMark"
     });
-    const { data } = resolveMarkData(this, args);
+    const inherited = resolveLayeredMarkInheritance(this, args, "bar");
+    const { data } = resolveMarkData(this, {
+      ...args,
+      ...(args.data === undefined && this.context.currentData === undefined &&
+        inherited?.data !== undefined ? { data: inherited.data } : {})
+    });
 
     assertMarkAvailable(this, id);
 
-    return this
+    let created = this
       .editSemantic({
         property: `layer[${id}].mark.type`,
         value: "bar"
@@ -35,12 +45,23 @@ export const createBarMark = action(
       .editSemantic({
         property: `layer[${id}].data`,
         value: data
-      })
+      });
+    created = applyLayeredMarkInheritance(created, id, inherited);
+    created = created
       .createGraphics({
         id,
         type: "rect",
         length: 0,
-        ...resolveMarkGraphicPlacement(this, { data, markType: "bar" })
+        ...resolveMarkGraphicPlacement(created, { data, markType: "bar" })
       });
+    created = materializeInheritedMark(created, id);
+    const appearance = Object.fromEntries(
+      ["fill", "opacity", "stroke", "strokeWidth"]
+        .filter(property => Object.hasOwn(args, property))
+        .map(property => [property, args[property]])
+    );
+    return Object.keys(appearance).length === 0
+      ? created
+      : created.editBarMark({ target: id, ...appearance });
   }
 );

package/src/actions/marks/bar/edit.js

@@ -5,7 +5,7 @@ import {
   validateNonNegativeFinite,
   validateUnitInterval
 } from "../../../core/validation.js";
-import { canMaterializeBar } from "../../../materialization/marks.js";
+import { canMaterializeBar } from "../../../materialization/marks/index.js";
 import { DEFAULT_BAR_STROKE_WIDTH } from "../../../materialization/bars/resolve.js";
 import { resolveEligibleLayer } from "../../../selectors/layers.js";
 import { validateMarkOptions } from "../shared.js";

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

@@ -5,9 +5,13 @@ import { deriveAggregateRectangles } from "../../../materialization/bars/aggrega
 import { deriveHistogramRectangles } from "../../../materialization/bars/histogram.js";
 import { requireCompleteBar } from "../../../materialization/bars/resolve.js";
 import { deriveRangedRectangles } from "../../../materialization/bars/ranged.js";
-import { BAR_GRAINS } from "../../../grammar/bars/policy.js";
+import {
+  BAR_GRAINS,
+  resolveBarOffsetChannel
+} from "../../../grammar/bars/policy.js";
+import { rematerializeHighlightBaseline } from "../lifecycle.js";
 
-const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 
 function editRectangles(program, id, rectangles) {
   let next = program
@@ -69,45 +73,36 @@ export const rematerializeBarMark = action(
       "rematerializeBarMark"
     );
     const id = validateUserId(args.id, "Bar mark id");
-    const highlights = Object.entries(
-      this.materializationConfigs.highlights ?? {}
-    ).filter(([, config]) => config.target === id);
-    if (highlights.length > 0) {
-      let baseline = this;
-      for (const [highlightId] of highlights) {
-        baseline = baseline._withoutMaterializationConfig([
-          "highlights",
-          highlightId
-        ]);
-      }
-      return baseline
-        .editGraphics({ target: id, property: "length", value: 0 })
-        .rematerializeBarMark({ id })
-        .rematerializeMarkHighlights({ target: id, highlights });
+    if (args.scales !== undefined && typeof args.scales !== "boolean") {
+      throw new TypeError("rematerializeBarMark scales must be a boolean.");
     }
+    const highlighted = rematerializeHighlightBaseline(this, {
+      target: id,
+      operation: "rematerializeBarMark",
+      resetProperty: "length",
+      resetValue: 0
+    });
+    if (highlighted !== undefined) return highlighted;
     const required = requireCompleteBar(this, id);
-    let resolved = this
-      .rematerializeScale({ id: required.xEncoding.scale })
-      .rematerializeScale({ id: required.yEncoding.scale });
+    let resolved = this;
+    if (args.scales !== false) {
+      resolved = resolved
+        .rematerializeScale({ id: required.xEncoding.scale })
+        .rematerializeScale({ id: required.yEncoding.scale });
+    }
 
     const colorScaleId = required.layer.encoding?.color?.scale;
-    if (colorScaleId !== undefined) {
+    if (colorScaleId !== undefined && args.scales !== false) {
       resolved = resolved.rematerializeScale({ id: colorScaleId });
     }
 
     if (required.materialization === "aggregate") {
-      const offsetScaleId = required.layer.encoding?.xOffset?.scale;
-      if (offsetScaleId !== undefined) {
+      const offsetChannel = resolveBarOffsetChannel(required.layer);
+      const offsetScaleId = required.layer.encoding?.[offsetChannel]?.scale;
+      if (offsetScaleId !== undefined && args.scales !== false) {
         resolved = resolved.rematerializeScale({ id: offsetScaleId });
       }
       const width = resolved.markConfigs[id]?.barWidth;
-      if (width === undefined) {
-        return resolved.editGraphics({
-          target: id,
-          property: "length",
-          value: 0
-        });
-      }
       return editRectangles(
         resolved,
         id,
@@ -117,7 +112,6 @@ export const rematerializeBarMark = action(
 
     if (required.materialization === BAR_GRAINS.ranged) {
       const width = resolved.markConfigs[id]?.barWidth;
-      if (width === undefined) return resolved.editGraphics({ target: id, property: "length", value: 0 });
       return editRectangles(resolved, id, deriveRangedRectangles(required, resolved, width));
     }
 

package/src/actions/marks/index.js

@@ -1,13 +1,21 @@
 import { registerBarMarkActions } from "./bar/index.js";
-import { registerAreaMarkActions } from "./area.js";
-import { registerLineMarkActions } from "./line.js";
-import { registerPointMarkActions } from "./point.js";
-import { registerRuleMarkActions } from "./rule.js";
+import { registerAreaMarkActions } from "./area/index.js";
+import { registerArcMarkActions } from "./arc/index.js";
+import { registerLineMarkActions } from "./line/index.js";
+import { registerPointMarkActions } from "./point/index.js";
+import { registerRectMarkActions } from "./rect/index.js";
+import { registerRuleMarkActions } from "./rule/index.js";
+import { registerTextMarkActions } from "./text/index.js";
+import { removeMark } from "./remove.js";
 
 export function registerMarkActions(ProgramClass) {
   registerPointMarkActions(ProgramClass);
+  registerRectMarkActions(ProgramClass);
   registerAreaMarkActions(ProgramClass);
+  registerArcMarkActions(ProgramClass);
   registerLineMarkActions(ProgramClass);
   registerBarMarkActions(ProgramClass);
   registerRuleMarkActions(ProgramClass);
+  registerTextMarkActions(ProgramClass);
+  ProgramClass.prototype.removeMark = removeMark;
 }

package/src/actions/marks/lifecycle.js

@@ -0,0 +1,27 @@
+export function rematerializeHighlightBaseline(program, {
+  target,
+  operation,
+  resetProperty,
+  resetValue
+}) {
+  const highlights = Object.entries(
+    program.materializationConfigs.highlights ?? {}
+  ).filter(([, config]) => config.target === target);
+  if (highlights.length === 0) return undefined;
+
+  let baseline = program;
+  for (const [highlightId] of highlights) {
+    baseline = baseline._withoutMaterializationConfig([
+      "highlights",
+      highlightId
+    ]);
+  }
+  return baseline
+    .editGraphics({
+      target,
+      property: resetProperty,
+      value: resetValue
+    })
+    [operation]({ id: target })
+    .rematerializeMarkHighlights({ target, highlights });
+}