ggaction 0.0.9 → 0.0.11

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

@@ -8,6 +8,7 @@ import {
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
+  editMarkGraphic,
   materializeInheritedMark,
   resolveLayeredMarkInheritance,
   resolveMarkId,
@@ -26,12 +27,11 @@ import { resolveMarkGraphicPlacement } from
 import { rematerializeHighlightBaseline } from "../lifecycle.js";
 import { resolveAreaMaterialization } from "./materialize.js";
 
-const CREATE_OPTIONS = Object.freeze([
-  "id", "data", "fill", "opacity", "stroke", "strokeWidth", "curve"
-]);
-const EDIT_OPTIONS = Object.freeze([
-  "target", "fill", "opacity", "stroke", "strokeWidth", "curve"
+const AREA_OPTIONS = Object.freeze([
+  "fill", "opacity", "stroke", "strokeWidth", "curve"
 ]);
+const CREATE_OPTIONS = Object.freeze(["id", "data", ...AREA_OPTIONS]);
+const EDIT_OPTIONS = Object.freeze(["target", ...AREA_OPTIONS]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "scales"]);
 const STROKE_FROM_FILL_OPTIONS = Object.freeze(["id", "strokeWidth"]);
 
@@ -194,29 +194,20 @@ const rematerializeAreaMark = action(
     const removesOutline = !hasOutline && existingChildren.some(
       child => child.properties.stroke !== undefined
     );
-    let next = removesOutline
+    const next = removesOutline
       ? resolved
           .editGraphics({ target: id, property: "length", value: 0 })
-          .editGraphics({ target: id, property: "length", value: paths.length })
-      : resolved.editGraphics({ target: id, property: "length", value: paths.length });
-    next = next
-      .editGraphics({ target: id, property: "commands", value: paths })
-      .editGraphics({ target: id, property: "fill", value: fills })
-      .editGraphics({ target: id, property: "opacity", value: config.opacity });
-    if (hasOutline) {
-      next = next
-        .editGraphics({
-          target: id,
-          property: "stroke",
-          value: config.strokeFromFill === true ? fills : config.stroke
-        })
-        .editGraphics({
-          target: id,
-          property: "strokeWidth",
-          value: config.strokeWidth
-        });
-    }
-    return next;
+      : resolved;
+    return editMarkGraphic(next, id, {
+      length: paths.length,
+      commands: paths,
+      fill: fills,
+      opacity: config.opacity,
+      ...(hasOutline ? {
+        stroke: config.strokeFromFill === true ? fills : config.stroke,
+        strokeWidth: config.strokeWidth
+      } : {})
+    });
   }
 );
 
@@ -300,9 +291,10 @@ const editAreaMark = action(
 );
 
 export function registerAreaMarkActions(ProgramClass) {
-  ProgramClass.prototype.createAreaMark = createAreaMark;
-  ProgramClass.prototype.configureAreaStrokeFromFill =
-    configureAreaStrokeFromFill;
-  ProgramClass.prototype.editAreaMark = editAreaMark;
-  ProgramClass.prototype.rematerializeAreaMark = rematerializeAreaMark;
+  Object.assign(ProgramClass.prototype, {
+    createAreaMark,
+    configureAreaStrokeFromFill,
+    editAreaMark,
+    rematerializeAreaMark
+  });
 }

package/src/actions/marks/index.js

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

package/src/actions/marks/line/actions.js

@@ -8,6 +8,7 @@ import {
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
+  editMarkGraphic,
   materializeInheritedMark,
   resolveLayeredMarkInheritance,
   resolveMarkId,
@@ -28,6 +29,8 @@ import {
   resolveParallelLineMaterialization,
   resolvePositionedLineMaterialization
 } from "./materialize.js";
+import { resolveLineBins } from "../../../grammar/lineSeries.js";
+import { requireSemanticScale } from "../../../selectors/scales.js";
 
 const DEFAULT_LINE_STROKE = DEFAULT_COLORS.mark;
 const DEFAULT_LINE_WIDTH = 2;
@@ -68,6 +71,17 @@ function validatePolarLineConfig(layer, config) {
   }
 }
 
+function applyLineMaterialization(program, id, materialization, opacity) {
+  return editMarkGraphic(program, id, {
+    length: materialization.commands.length,
+    commands: materialization.commands,
+    stroke: materialization.strokes,
+    strokeWidth: materialization.strokeWidths,
+    strokeDash: materialization.strokeDashes,
+    ...(opacity === undefined ? {} : { opacity })
+  });
+}
+
 const createLineMark = action(
   {
     op: "createLineMark",
@@ -215,36 +229,12 @@ const rematerializeLineMark = action(
         existingChildren,
         defaults: { stroke: DEFAULT_LINE_STROKE, strokeWidth: DEFAULT_LINE_WIDTH }
       });
-      let next = resolved
-        .editGraphics({
-          target: id,
-          property: "length",
-          value: materialization.commands.length
-        })
-        .editGraphics({
-          target: id,
-          property: "commands",
-          value: materialization.commands
-        })
-        .editGraphics({ target: id, property: "stroke", value: materialization.strokes })
-        .editGraphics({
-          target: id,
-          property: "strokeWidth",
-          value: materialization.strokeWidths
-        })
-        .editGraphics({
-          target: id,
-          property: "strokeDash",
-          value: materialization.strokeDashes
-        });
-      if (config.opacity !== undefined) {
-        next = next.editGraphics({
-          target: id,
-          property: "opacity",
-          value: config.opacity
-        });
-      }
-      return next;
+      return applyLineMaterialization(
+        resolved,
+        id,
+        materialization,
+        config.opacity
+      );
     }
 
     if (
@@ -280,6 +270,13 @@ const rematerializeLineMark = action(
       rows: dataset.values,
       layer,
       resolvedScales: resolved.resolvedScales,
+      xBinBoundaries: layer.encoding?.x?.bin === undefined
+        ? undefined
+        : resolveLineBins(
+            dataset.values,
+            layer,
+            requireSemanticScale(resolved, xScaleId)
+          ).boundaries,
       bounds: resolveGraphicBounds(resolved),
       config,
       existingChildren,
@@ -287,28 +284,12 @@ const rematerializeLineMark = action(
       defaults: { stroke: DEFAULT_LINE_STROKE, strokeWidth: DEFAULT_LINE_WIDTH }
     });
 
-    let next = resolved
-      .editGraphics({
-        target: id,
-        property: "length",
-        value: materialization.commands.length
-      })
-      .editGraphics({ target: id, property: "commands", value: materialization.commands })
-      .editGraphics({ target: id, property: "stroke", value: materialization.strokes })
-      .editGraphics({ target: id, property: "strokeWidth", value: materialization.strokeWidths })
-      .editGraphics({
-        target: id,
-        property: "strokeDash",
-        value: materialization.strokeDashes
-      });
-    if (config.opacity !== undefined) {
-      next = next.editGraphics({
-        target: id,
-        property: "opacity",
-        value: config.opacity
-      });
-    }
-    return next;
+    return applyLineMaterialization(
+      resolved,
+      id,
+      materialization,
+      config.opacity
+    );
   }
 );
 

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

@@ -76,6 +76,7 @@ export function resolvePositionedLineMaterialization({
   rows,
   layer,
   resolvedScales,
+  xBinBoundaries,
   bounds,
   config,
   existingChildren,
@@ -86,11 +87,12 @@ export function resolvePositionedLineMaterialization({
   const yScaleId = layer.encoding?.y?.scale;
   const thetaScaleId = layer.encoding?.theta?.scale;
   const radiusScaleId = layer.encoding?.radius?.scale;
-  const derived = deriveLineSeries(
-    rows,
-    layer,
-    polar ? { thetaDomain: resolvedScales[thetaScaleId].domain } : undefined
-  );
+  const lineOptions = polar
+    ? { thetaDomain: resolvedScales[thetaScaleId].domain }
+    : layer.encoding?.x?.bin === undefined
+      ? undefined
+      : { xBinBoundaries };
+  const derived = deriveLineSeries(rows, layer, lineOptions);
   const commands = polar
     ? derived.series.map(series => buildPolarLinePathCommands({
         series: series.values,

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

@@ -78,8 +78,8 @@ function existingArea(child, parentType) {
   }
   if (
     type === "rect" &&
-    Number.isFinite(child.properties?.width) &&
-    Number.isFinite(child.properties?.height)
+    Number.isFinite(child?.properties?.width) &&
+    Number.isFinite(child?.properties?.height)
   ) {
     return child.properties.width * child.properties.height;
   }
@@ -354,7 +354,9 @@ export const rematerializePointMark = action(
         ? dataset.values.map((_, index) => {
           const existing = existingArea(existingChildren[index], graphic.type);
           return Math.sqrt(
-            existing ?? Math.PI * (config.radius ?? DEFAULT_POINT_RADIUS) ** 2
+            config.radius === undefined
+              ? existing ?? Math.PI * DEFAULT_POINT_RADIUS ** 2
+              : Math.PI * config.radius ** 2
           );
         })
         : area.map(value => Math.sqrt(value));

package/src/actions/marks/remove.js

@@ -138,6 +138,27 @@ function cleanupSelectionState(program, ids) {
   };
 }
 
+export function removeOwnedMark(program, id, partial = false) {
+  const layer = findLayer(program, id);
+  if (!partial && layer === undefined) return program;
+  const cleaned = cleanupSelectionState(program, [id]);
+  let next = cleaned.program;
+  if (layer !== undefined) {
+    next = next.editSemantic({ property: `layer[${id}]`, remove: true });
+  }
+  if (next.graphicSpec.objects[id] !== undefined) {
+    next = next.editGraphics({ target: id, remove: true });
+  }
+  return next
+    ._withoutMaterializationConfig(["marks", id])
+    ._withContext({
+      ...(program.context.currentMark === id ? { currentMark: undefined } : {}),
+      ...(cleaned.selectionIds.includes(program.context.currentSelection)
+        ? { currentSelection: undefined }
+        : {})
+    });
+}
+
 function hasScaleConsumer(program, channel, scale) {
   return program.semanticSpec.layers.some(
     layer => layer.encoding?.[channel]?.scale === scale

package/src/actions/marks/rule/actions.js

@@ -15,6 +15,7 @@ import { DEFAULT_COLORS } from "../../../theme/defaults.js";
 import {
   assertMarkAvailable,
   applyLayeredMarkInheritance,
+  editMarkGraphic,
   materializeInheritedMark,
   resolveLayeredMarkInheritance,
   resolveMarkData,
@@ -183,59 +184,59 @@ const rematerializeRuleMark = action(
     const x2 = [];
     const y2 = [];
     for (let index = 0; index < derived.length; index += 1) {
+      let startX;
+      let startY;
+      let endX;
+      let endY;
       if (mode === "vertical-span") {
-        x1.push(mapped.x[index]);
-        y1.push(bounds.y);
-        x2.push(mapped.x[index]);
-        y2.push(bounds.y + bounds.height);
+        startX = endX = mapped.x[index];
+        startY = bounds.y;
+        endY = bounds.y + bounds.height;
       } else if (mode === "horizontal-span") {
-        x1.push(bounds.x);
-        y1.push(mapped.y[index]);
-        x2.push(bounds.x + bounds.width);
-        y2.push(mapped.y[index]);
+        startX = bounds.x;
+        endX = bounds.x + bounds.width;
+        startY = endY = mapped.y[index];
       } else if (mode === "vertical-interval") {
-        x1.push(mapped.x[index]);
-        y1.push(mapped.y[index]);
-        x2.push(mapped.x[index]);
-        y2.push(mapped.y2[index]);
+        startX = endX = mapped.x[index];
+        startY = mapped.y[index];
+        endY = mapped.y2[index];
       } else if (mode === "horizontal-interval") {
-        x1.push(mapped.x[index]);
-        y1.push(mapped.y[index]);
-        x2.push(mapped.x2[index]);
-        y2.push(mapped.y[index]);
+        startX = mapped.x[index];
+        endX = mapped.x2[index];
+        startY = endY = mapped.y[index];
       } else if (mode === "box-span") {
         const owner = resolved.graphicSpec.objects[boxSpan];
         const box = owner?.items?.[index]?.properties;
         if (box === undefined) throw new Error(`Rule mark "${id}" requires box span owner "${boxSpan}".`);
         if (layer.encoding?.x?.fieldType === "quantitative") {
-          x1.push(mapped.x[index]);
-          y1.push(box.y);
-          x2.push(mapped.x[index]);
-          y2.push(box.y + box.height);
+          startX = endX = mapped.x[index];
+          startY = box.y;
+          endY = box.y + box.height;
         } else {
-          x1.push(box.x);
-          y1.push(mapped.y[index]);
-          x2.push(box.x + box.width);
-          y2.push(mapped.y[index]);
+          startX = box.x;
+          endX = box.x + box.width;
+          startY = endY = mapped.y[index];
         }
       } else if (mode === "fixed-span") {
         if (fixedSpan.orientation === "horizontal") {
-          x1.push(mapped.x[index] - fixedSpan.size / 2);
-          y1.push(mapped.y[index]);
-          x2.push(mapped.x[index] + fixedSpan.size / 2);
-          y2.push(mapped.y[index]);
+          startX = mapped.x[index] - fixedSpan.size / 2;
+          endX = mapped.x[index] + fixedSpan.size / 2;
+          startY = endY = mapped.y[index];
         } else {
-          x1.push(mapped.x[index]);
-          y1.push(mapped.y[index] - fixedSpan.size / 2);
-          x2.push(mapped.x[index]);
-          y2.push(mapped.y[index] + fixedSpan.size / 2);
+          startX = endX = mapped.x[index];
+          startY = mapped.y[index] - fixedSpan.size / 2;
+          endY = mapped.y[index] + fixedSpan.size / 2;
         }
       } else {
-        x1.push(mapped.x[index]);
-        y1.push(mapped.y[index]);
-        x2.push(mapped.x2[index]);
-        y2.push(mapped.y2[index]);
+        startX = mapped.x[index];
+        startY = mapped.y[index];
+        endX = mapped.x2[index];
+        endY = mapped.y2[index];
       }
+      x1.push(startX);
+      y1.push(startY);
+      x2.push(endX);
+      y2.push(endY);
     }
 
     const resolvedConfig = {
@@ -270,20 +271,17 @@ const rematerializeRuleMark = action(
           resolved.resolvedScales[strokeWidthEncoding.scale]
         );
 
-    return resolved
-      .editGraphics({ target: id, property: "length", value: derived.length })
-      .editGraphics({ target: id, property: "x1", value: x1 })
-      .editGraphics({ target: id, property: "y1", value: y1 })
-      .editGraphics({ target: id, property: "x2", value: x2 })
-      .editGraphics({ target: id, property: "y2", value: y2 })
-      .editGraphics({ target: id, property: "stroke", value: resolvedConfig.stroke })
-      .editGraphics({
-        target: id,
-        property: "strokeWidth",
-        value: strokeWidth
-      })
-      .editGraphics({ target: id, property: "strokeDash", value: strokeDash })
-      .editGraphics({ target: id, property: "opacity", value: opacity });
+    return editMarkGraphic(resolved, id, {
+      length: derived.length,
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: resolvedConfig.stroke,
+      strokeWidth,
+      strokeDash,
+      opacity
+    });
   }
 );
 
@@ -312,7 +310,9 @@ export const materializeRuleSpan = action(
 );
 
 export function registerRuleMarkActions(ProgramClass) {
-  ProgramClass.prototype.createRuleMark = createRuleMark;
-  ProgramClass.prototype.rematerializeRuleMark = rematerializeRuleMark;
-  ProgramClass.prototype.materializeRuleSpan = materializeRuleSpan;
+  Object.assign(ProgramClass.prototype, {
+    createRuleMark,
+    rematerializeRuleMark,
+    materializeRuleSpan
+  });
 }

package/src/actions/marks/shared.js

@@ -155,10 +155,7 @@ export function resolveCompatibleEncodings(program, source, markType) {
           };
           pending.delete(channel);
           break;
-        } catch {
-          // Try the next target-compatible policy subset. Another channel may
-          // also make a richer subset resolvable on the next pass.
-        }
+        } catch {}
       }
     }
   }
@@ -241,3 +238,10 @@ export function materializeInheritedMark(program, id) {
     : getMarkMaterializationStep(program, layer);
   return step === undefined ? program : program[step.op](step.args);
 }
+
+export function editMarkGraphic(program, target, properties) {
+  for (const [property, value] of Object.entries(properties)) {
+    program = program.editGraphics({ target, property, value });
+  }
+  return program;
+}

package/src/actions/marks/text/actions.js

@@ -4,7 +4,10 @@ import {
   DEFAULT_TEXT_MARK,
   normalizeTextMarkConfig
 } from "../../../grammar/text.js";
-import { canMaterializeText } from "../../../materialization/marks/index.js";
+import {
+  canMaterializeArc,
+  canMaterializeText
+} from "../../../materialization/marks/index.js";
 import { resolveTextGraphicItems } from "../../../materialization/text.js";
 import { findLayer, resolveEligibleLayer } from "../../../selectors/layers.js";
 import {
@@ -25,7 +28,7 @@ const STYLE_OPTIONS = Object.freeze([
 const CREATE_OPTIONS = Object.freeze(["id", "data", "text", ...STYLE_OPTIONS]);
 const EDIT_OPTIONS = Object.freeze(["target", ...STYLE_OPTIONS]);
 const REMATERIALIZE_OPTIONS = Object.freeze(["id", "replayLayout"]);
-const SOURCE_TYPES = new Set(["point", "bar", "rule", "rect"]);
+const SOURCE_TYPES = new Set(["point", "bar", "rule", "rect", "arc"]);
 
 function sourceMatchesData(program, layer, requestedData) {
   if (requestedData === undefined || layer?.data === requestedData) return true;
@@ -38,6 +41,7 @@ function eligibleSource(program, layer, requestedData) {
     layer.data === undefined ||
     !sourceMatchesData(program, layer, requestedData)
   ) return false;
+  if (layer.mark.type === "arc") return canMaterializeArc(program, layer);
   const encodings = resolveCompatibleEncodings(program, layer, "text");
   return encodings.x !== undefined && encodings.y !== undefined;
 }
@@ -64,7 +68,9 @@ function resolveTextInheritance(program, args) {
     source: source.id,
     data: source.data,
     coordinate: source.coordinate,
-    encoding: resolveCompatibleEncodings(program, source, "text")
+    encoding: source.mark.type === "arc"
+      ? {}
+      : resolveCompatibleEncodings(program, source, "text")
   };
 }
 
@@ -201,7 +207,9 @@ const editTextMark = action(
 );
 
 export function registerTextMarkActions(ProgramClass) {
-  ProgramClass.prototype.createTextMark = createTextMark;
-  ProgramClass.prototype.editTextMark = editTextMark;
-  ProgramClass.prototype.rematerializeTextMark = rematerializeTextMark;
+  Object.assign(ProgramClass.prototype, {
+    createTextMark,
+    editTextMark,
+    rematerializeTextMark
+  });
 }

package/src/actions/marks/text/layout.js

@@ -14,6 +14,7 @@ import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import { canMaterializeText } from "../../../materialization/marks/index.js";
 import { resolveTextGraphicEntries } from "../../../materialization/text.js";
 import { findLayer, resolveEligibleLayer } from "../../../selectors/layers.js";
+import { editMarkGraphic } from "../shared.js";
 
 const LAYOUT_OPTIONS = Object.freeze([
   "target", "axis", "padding", "maxDisplacement", "bounds", "leader"
@@ -170,42 +171,22 @@ function materializeLeaders(program, layer, config, resolved) {
   if (config.leader === false) return { program: next, count: 0 };
   const leaders = resolved.items.map(resolveLabelLeader).filter(Boolean);
   if (leaders.length === 0) return { program: next, count: 0 };
-  next = next
-    .createGraphics({
+  next = next.createGraphics({
       id: config.leaderId,
       type: "line",
       length: leaders.length,
       ...leaderPlacement(next, layer)
-    })
-    .editGraphics({
-      target: config.leaderId,
-      property: "x1",
-      value: leaders.map(line => line.x1)
-    })
-    .editGraphics({
-      target: config.leaderId,
-      property: "y1",
-      value: leaders.map(line => line.y1)
-    })
-    .editGraphics({
-      target: config.leaderId,
-      property: "x2",
-      value: leaders.map(line => line.x2)
-    })
-    .editGraphics({
-      target: config.leaderId,
-      property: "y2",
-      value: leaders.map(line => line.y2)
     });
-  for (const property of ["stroke", "strokeWidth", "strokeDash", "opacity"]) {
-    next = next.editGraphics({
-      target: config.leaderId,
-      property,
-      value: property === "strokeDash"
-        ? leaders.map(() => config.leader.strokeDash)
-        : config.leader[property]
-    });
-  }
+  next = editMarkGraphic(next, config.leaderId, {
+    x1: leaders.map(line => line.x1),
+    y1: leaders.map(line => line.y1),
+    x2: leaders.map(line => line.x2),
+    y2: leaders.map(line => line.y2),
+    stroke: config.leader.stroke,
+    strokeWidth: config.leader.strokeWidth,
+    strokeDash: leaders.map(() => config.leader.strokeDash),
+    opacity: config.leader.opacity
+  });
   return { program: next, count: leaders.length };
 }
 
@@ -237,17 +218,10 @@ const materializeLabelLayout = action(
       padding: config.padding,
       maxDisplacement: config.maxDisplacement
     });
-    next = next
-      .editGraphics({
-        target: id,
-        property: "x",
-        value: resolved.items.map(item => item.x)
-      })
-      .editGraphics({
-        target: id,
-        property: "y",
-        value: resolved.items.map(item => item.y)
-      });
+    next = editMarkGraphic(next, id, {
+      x: resolved.items.map(item => item.x),
+      y: resolved.items.map(item => item.y)
+    });
     const leaders = materializeLeaders(next, layer, config, resolved);
     next = leaders.program;
     return next._withMaterializationConfig(["labelLayouts", id], {
@@ -315,7 +289,9 @@ const removeLabelLayout = action(
 );
 
 export function registerTextLabelLayoutActions(ProgramClass) {
-  ProgramClass.prototype.layoutLabels = layoutLabels;
-  ProgramClass.prototype.removeLabelLayout = removeLabelLayout;
-  ProgramClass.prototype.materializeLabelLayout = materializeLabelLayout;
+  Object.assign(ProgramClass.prototype, {
+    layoutLabels,
+    removeLabelLayout,
+    materializeLabelLayout
+  });
 }