ggaction 0.0.12 → 0.0.15

package/src/actions/guides/legends/index.js

@@ -4,6 +4,7 @@ import { registerSizeLegendActions } from "./size.js";
 import { registerStrokeWidthLegendActions } from "./strokeWidth.js";
 import { registerFocusedLegendActions } from "./focused.js";
 import { removeLegend } from "./remove.js";
+import { editLegendBlock } from "./blocks.js";
 
 export function registerLegendActions(ProgramClass) {
   registerCategoricalLegendActions(ProgramClass);
@@ -11,5 +12,6 @@ export function registerLegendActions(ProgramClass) {
   registerSizeLegendActions(ProgramClass);
   registerStrokeWidthLegendActions(ProgramClass);
   registerFocusedLegendActions(ProgramClass);
+  ProgramClass.prototype.editLegendBlock = editLegendBlock;
   ProgramClass.prototype.removeLegend = removeLegend;
 }

package/src/actions/guides/legends/lane.js

@@ -1,3 +1,4 @@
+import { editLegendBackground, resolveLegendBackgroundFromBounds } from "./continuous/common.js";
 import { action } from "../../../core/action.js";
 import { noOptions } from "../../../core/validation.js";
 import {
@@ -8,6 +9,9 @@ import { finiteMidpoint } from "../../../grammar/numeric.js";
 import { resolveGraphicBounds } from "../../../layout/canvas.js";
 import {
   resolveHorizontalLegendLane,
+  resolveHorizontalLegendGroup,
+  resolveSingleHorizontalLegendPlacement,
+  isHorizontalEdgeLegend,
   resolveSideLegendLane
 } from "../../../layout/legendLane.js";
 import { findCanvasGraphic } from
@@ -18,31 +22,31 @@ import { legendResourcePolicy } from
 const FAMILY_ORDER = Object.freeze({
   series: 0,
   color: 0,
+  stroke: 0,
   gradient: 0,
   interval: 0,
+  strokeGradient: 0,
+  strokeInterval: 0,
   size: 1,
   opacity: 2,
   strokeWidth: 3
 });
 
 function categoricalFor(program, target) {
-  return ["series", "color"]
+  return ["series", "color", "stroke"]
     .map(kind => program.guideConfigs.legend?.[kind])
     .find(config => config?.target === target);
 }
 
 function legendPosition(program, kind, config) {
   if (kind === "size") {
-    return categoricalFor(program, config.target)?.position ?? "right";
+    return categoricalFor(program, config.target)?.position ?? config.position;
   }
-  if (kind === "strokeWidth" || kind === "interval") return "right";
   return config.position;
 }
 
-function requestedOffset(kind, config) {
-  return ["size", "strokeWidth"].includes(kind)
-    ? 30
-    : config.offset;
+function requestedOffset(config) {
+  return config.offset;
 }
 
 function existingIds(program, kind) {
@@ -62,6 +66,41 @@ function componentIds(program, kind) {
   return { titleId, labelId, backgroundId, symbolIds };
 }
 
+function legendGraphicBounds(program, id) {
+  let bounds = resolveConcreteGraphicBounds(program.graphicSpec, id);
+  const graphic = program.graphicSpec.objects[id];
+  if (!id.includes("LegendSymbol") || graphic?.type !== "line") return bounds;
+  const properties = graphic.items?.map(item => item.properties) ??
+    [graphic.properties];
+  for (const item of properties) {
+    if (
+      Object.hasOwn(item, "lineCap") ||
+      typeof item.stroke !== "string" ||
+      !(item.strokeWidth > 0)
+    ) continue;
+    const extent = item.strokeWidth / 2;
+    bounds = {
+      left: Math.min(bounds.left, Math.min(item.x1, item.x2) - extent),
+      right: Math.max(bounds.right, Math.max(item.x1, item.x2) + extent),
+      top: Math.min(bounds.top, Math.min(item.y1, item.y2) - extent),
+      bottom: Math.max(bounds.bottom, Math.max(item.y1, item.y2) + extent)
+    };
+  }
+  return bounds;
+}
+
+function unionLegendBounds(program, ids) {
+  return ids.map(id => legendGraphicBounds(program, id))
+    .reduce((result, bounds) => result === undefined
+      ? bounds
+      : {
+          left: Math.min(result.left, bounds.left),
+          right: Math.max(result.right, bounds.right),
+          top: Math.min(result.top, bounds.top),
+          bottom: Math.max(result.bottom, bounds.bottom)
+        }, undefined);
+}
+
 function textAnchor(program, id) {
   const graphic = program.graphicSpec.objects[id];
   const properties = graphic.items?.[0]?.properties ?? graphic.properties;
@@ -78,18 +117,12 @@ function blockDescriptor(program, kind, config) {
     components.labelId,
     ...(components.titleId === undefined ? [] : [components.titleId])
   ];
-  const bounds = unionConcreteGraphicBounds(program.graphicSpec, foregroundIds);
-  const symbolAnchorIds = kind === "gradient"
-    ? ["colorGradientStrips"]
+  const bounds = unionLegendBounds(program, foregroundIds);
+  const symbolAnchorIds = ["gradient", "strokeGradient"].includes(kind)
+    ? [kind === "gradient" ? "colorGradientStrips" : "strokeGradientStrips"]
     : components.symbolIds;
-  const symbolAnchor = unionConcreteGraphicBounds(
-    program.graphicSpec,
-    symbolAnchorIds
-  );
-  const symbolBounds = unionConcreteGraphicBounds(
-    program.graphicSpec,
-    components.symbolIds
-  );
+  const symbolAnchor = unionLegendBounds(program, symbolAnchorIds);
+  const symbolBounds = unionLegendBounds(program, components.symbolIds);
   const labels = resolveConcreteGraphicBounds(
     program.graphicSpec,
     components.labelId
@@ -117,7 +150,8 @@ function blockDescriptor(program, kind, config) {
     id: kind,
     kind,
     target: config.target,
-    offset: requestedOffset(kind, config),
+    border: borderFor(kind, config),
+    offset: requestedOffset(config),
     bounds,
     title,
     symbol: {
@@ -130,19 +164,20 @@ function blockDescriptor(program, kind, config) {
       x: textAnchor(program, components.labelId),
       width: labels.right - labels.left
     },
-    occupiedBounds: components.backgroundId === undefined
-      ? bounds
-      : resolveConcreteGraphicBounds(
-          program.graphicSpec,
-          components.backgroundId
-        ),
+    occupiedBounds: unionLegendBounds(program, [
+      ...foregroundIds,
+      ...(components.backgroundId === undefined ? [] : [components.backgroundId])
+    ]),
     ...components,
     foregroundIds
   };
 }
 
 function borderFor(kind, config) {
-  return ["series", "color", "gradient", "opacity"].includes(kind)
+  return [
+    "series", "color", "stroke", "gradient", "strokeGradient", "opacity",
+    "interval", "strokeInterval", "strokeWidth", "size"
+  ].includes(kind)
     ? config.border
     : false;
 }
@@ -154,12 +189,13 @@ function groupBlocks(blocks, configs) {
     const config = configs[block.kind];
     const next = blocks[index + 1];
     if (
-      ["series", "color"].includes(block.kind) &&
+      ["series", "color", "stroke"].includes(block.kind) &&
       next?.kind === "size" && next.target === block.target
     ) {
       groups.push({
         id: `${block.kind}+size`,
-        blocks: [block, next],
+        blocks: [block, next.backgroundId === undefined ? next : { ...next,
+          bounds: next.occupiedBounds, inset: next.border.padding + next.border.lineWidth / 2 }],
         border: borderFor(block.kind, config),
         backgroundId: block.backgroundId
       });
@@ -193,13 +229,15 @@ export function hasMultiSideLegendLane(program) {
   return ["right", "left"].some(side => edgeKinds(program, side).length > 1);
 }
 
-export function hasMultiHorizontalLegendLane(program) {
-  return ["top", "bottom"].some(edge => edgeKinds(program, edge).length > 1);
+export function hasHorizontalLegendLane(program) {
+  return ["top", "bottom"].some(edge => edgeKinds(program, edge).some(
+    ([, config]) => isHorizontalEdgeLegend({ ...config, position: edge })
+  ));
 }
 
-export function hasMultiLegendLane(program) {
+export function hasLegendLane(program) {
   return hasMultiSideLegendLane(program) ||
-    hasMultiHorizontalLegendLane(program);
+    hasHorizontalLegendLane(program);
 }
 
 function translateCommands(commands, dx, dy) {
@@ -269,35 +307,20 @@ function translateGraphic(program, id, dx, dy) {
   return next;
 }
 
-function yAxisBounds(program) {
-  const ids = ["yAxisLine", "yAxisTicks", "yAxisLabels", "yAxisTitle"]
-    .filter(id => program.graphicSpec.objects[id] !== undefined);
-  return ids.length === 0
-    ? undefined
-    : unionConcreteGraphicBounds(program.graphicSpec, ids);
-}
-
-function horizontalCollisionBounds(program, edge) {
-  const ids = edge === "top"
-    ? ["chartTitle", "chartSubtitle"]
-    : ["xAxisLine", "xAxisTicks", "xAxisLabels", "xAxisTitle"];
-  return ids
-    .filter(id => program.graphicSpec.objects[id] !== undefined)
-    .map(id => resolveConcreteGraphicBounds(program.graphicSpec, id))
-    .filter(bounds => bounds !== undefined);
-}
-
 function horizontalGroups(program, groups) {
   return groups.map(group => {
     const representative = group.blocks[0];
     const config = program.guideConfigs.legend?.[representative.kind];
-    const titleId = representative.titleId;
+    const atomic = group.blocks.length > 1;
+    const titleId = atomic ? undefined : representative.titleId;
     const contentIds = group.blocks.flatMap(block => block.foregroundIds)
       .filter(id => id !== titleId);
-    const content = unionConcreteGraphicBounds(program.graphicSpec, contentIds);
-    const foreground = unionConcreteGraphicBounds(
-      program.graphicSpec,
-      group.blocks.flatMap(block => block.foregroundIds)
+    if (atomic) contentIds.push(...group.blocks.slice(1).flatMap(block =>
+      block.backgroundId === undefined ? [] : [block.backgroundId]));
+    const content = unionLegendBounds(program, contentIds);
+    const foreground = unionLegendBounds(
+      program,
+      [...contentIds, ...(titleId === undefined ? [] : [titleId])]
     );
     if (content === undefined || foreground === undefined) {
       throw new Error(`Legend lane could not measure ${group.id} content.`);
@@ -308,11 +331,12 @@ function horizontalGroups(program, groups) {
       : border.padding + border.lineWidth / 2;
     return {
       id: group.id,
+      atomic,
       titleId,
       contentIds,
-      title: representative.title,
+      title: atomic ? undefined : representative.title,
       inline: config?.titlePosition === "left",
-      element: representative.symbol.bounds,
+      element: atomic ? foreground : representative.symbol.bounds,
       content,
       horizontal: { left: foreground.left, right: foreground.right,
         top: foreground.top, bottom: foreground.bottom },
@@ -323,6 +347,33 @@ function horizontalGroups(program, groups) {
   });
 }
 
+function applyHorizontalPlan(program, groups, plan) {
+  let next = program;
+  const byId = new Map(groups.map(group => [group.id, group]));
+  for (const placement of plan.placements) {
+    const group = byId.get(placement.id);
+    if (group.titleId !== undefined) {
+      next = translateGraphic(next, group.titleId, placement.dx, placement.titleDy);
+    }
+    for (const id of group.contentIds) {
+      next = translateGraphic(next, id, placement.dx, placement.contentDy);
+    }
+    if (placement.background !== undefined) {
+      for (const property of ["x", "y", "width", "height"]) {
+        next = next.editGraphics({ target: placement.background.id, property,
+          value: placement.background[property] });
+      }
+    }
+  }
+  if (plan.background !== undefined) {
+    for (const property of ["x", "y", "width", "height"]) {
+      next = next.editGraphics({ target: plan.background.id, property,
+        value: plan.background[property] });
+    }
+  }
+  return next;
+}
+
 export const rematerializeSideLegendLane = action(
   {
     op: "rematerializeSideLegendLane",
@@ -346,8 +397,7 @@ export const rematerializeSideLegendLane = action(
         side,
         plot,
         canvas,
-        groups: groupBlocks(blocks, configs),
-        axisBounds: yAxisBounds(this)
+        groups: groupBlocks(blocks, configs)
       });
       return [{ plan, blocks }];
     });
@@ -387,6 +437,12 @@ export const rematerializeSideLegendLane = action(
           value: "left"
         });
       }
+      for (const block of blocks) {
+        if (block.backgroundId === undefined || plan.backgrounds.some(item => item.id === block.backgroundId)) continue;
+        const bounds = unionLegendBounds(next, block.foregroundIds);
+        const background = resolveLegendBackgroundFromBounds([bounds], block.border, canvas, "Legend");
+        next = editLegendBackground(next, block.backgroundId, background, block.border);
+      }
       for (const background of plan.backgrounds) {
         for (const property of ["x", "y", "width", "height"]) {
           next = next.editGraphics({
@@ -414,55 +470,46 @@ export const rematerializeHorizontalLegendLane = action(
       throw new Error("Legend lane requires resolved Canvas and plot bounds.");
     }
     const configs = this.guideConfigs.legend ?? {};
-    const plans = ["top", "bottom"].flatMap(edge => {
-      const entries = edgeKinds(this, edge);
-      if (entries.length < 2) return [];
-      const blocks = entries.map(([kind, config]) =>
-        blockDescriptor(this, kind, config)
+    let next = this;
+    for (const edge of ["top", "bottom"]) {
+      const entries = edgeKinds(next, edge).filter(
+        ([, config]) => isHorizontalEdgeLegend({ ...config, position: edge })
       );
-      const groups = groupBlocks(blocks, configs);
-      if (groups.length < 2) return [];
-      const horizontal = horizontalGroups(this, groups);
+      if (entries.length === 0) continue;
+      if (entries.length === 1) {
+        const [kind, config] = entries[0];
+        const ids = existingIds(next, kind);
+        const bounds = unionConcreteGraphicBounds(next.graphicSpec, ids);
+        const { dx, dy } = resolveSingleHorizontalLegendPlacement({
+          plot, canvas, config, bounds
+        });
+        for (const id of ids) next = translateGraphic(next, id, dx, dy);
+        continue;
+      }
+      let groups = groupBlocks(entries.map(([kind, config]) =>
+        blockDescriptor(next, kind, config)), configs);
+      for (const group of groups.filter(group => group.blocks.length > 1)) {
+        const config = configs[group.blocks[0].kind];
+        const children = horizontalGroups(next, group.blocks.map((block, index) => ({
+          id: block.id, blocks: [block], border: index === 0 ? false : block.border,
+          backgroundId: index === 0 ? undefined : block.backgroundId
+        }))).map(child => ({ ...child, element: child.content }));
+        const plan = resolveHorizontalLegendGroup({ edge, plot, canvas, groups: children,
+          align: config.align, offset: config.offset, border: group.border,
+          backgroundId: group.backgroundId });
+        next = applyHorizontalPlan(next, children, plan);
+      }
+      if (groups.length < 2) continue;
+      groups = groupBlocks(entries.map(([kind, config]) =>
+        blockDescriptor(next, kind, config)), configs);
+      const horizontal = horizontalGroups(next, groups);
       const plan = resolveHorizontalLegendLane({
         edge,
         plot,
         canvas,
-        groups: horizontal,
-        collisionBounds: horizontalCollisionBounds(this, edge)
+        groups: horizontal
       });
-      return [{ plan, groups: horizontal }];
-    });
-    let next = this;
-    for (const { plan, groups } of plans) {
-      const byId = new Map(groups.map(group => [group.id, group]));
-      for (const placement of plan.placements) {
-        const group = byId.get(placement.id);
-        if (group.titleId !== undefined) {
-          next = translateGraphic(
-            next,
-            group.titleId,
-            placement.dx,
-            placement.titleDy
-          );
-        }
-        for (const id of group.contentIds) {
-          next = translateGraphic(
-            next,
-            id,
-            placement.dx,
-            placement.contentDy
-          );
-        }
-        if (placement.background !== undefined) {
-          for (const property of ["x", "y", "width", "height"]) {
-            next = next.editGraphics({
-              target: placement.background.id,
-              property,
-              value: placement.background[property]
-            });
-          }
-        }
-      }
+      next = applyHorizontalPlan(next, horizontal, plan);
     }
     return next;
   }

package/src/actions/guides/legends/lifecycle.js

@@ -0,0 +1,143 @@
+import {
+  legendGraphicIds, legendResourcePolicy, legendResourcePolicies
+} from "../../../materialization/guides/resources.js";
+import { findLayer } from "../../../selectors/layers.js";
+import { resolveDefinition } from "./categorical/resolve.js";
+import { normalizeRecipe, resolveLegendSymbol } from "./categorical/recipes.js";
+import { resolveLayout, symbolGraphic } from "./categorical/layout.js";
+import { resolveLegendGraphicPlacement } from "../../../materialization/graphicHierarchy.js";
+
+export function removeLegendKinds(program, kinds) {
+  const removed = new Set(kinds);
+  const retainedSemanticKinds = new Set(
+    Object.entries(program.guideConfigs.legend ?? {})
+      .filter(([kind]) => !removed.has(kind))
+      .map(([kind]) => legendResourcePolicy(kind).semanticKind)
+  );
+  const semanticKinds = new Set(
+    kinds.map(kind => legendResourcePolicy(kind).semanticKind)
+  );
+  let next = program;
+  for (const kind of semanticKinds) {
+    if (
+      !retainedSemanticKinds.has(kind) &&
+      next.semanticSpec.guides.legend?.[kind] !== undefined
+    ) {
+      next = next.editSemantic({
+        property: `guide.legend.${kind}`,
+        remove: true
+      });
+    }
+  }
+  for (const id of new Set(kinds.flatMap(legendGraphicIds))) {
+    if (next.graphicSpec.objects[id] !== undefined) {
+      next = next.editGraphics({ target: id, remove: true });
+    }
+  }
+  for (const kind of kinds) {
+    next = next._withoutMaterializationConfig(["guides", "legend", kind]);
+  }
+  return next;
+}
+
+export function resolveCategoricalLegendRevision(program, kind, previous, channels, {
+  order = program.semanticSpec.guides.legend?.[kind]?.order, validateLayout = true
+} = {}) {
+  const layer = findLayer(program, previous.target);
+  const definition = resolveDefinition(program, layer, channels,
+    previous.inferredTitle ? undefined : previous.title, order);
+  const config = {
+    ...previous,
+    ...definition,
+    symbol: normalizeRecipe(resolveLegendSymbol(
+      program,
+      layer,
+      channels,
+      previous.inferredSymbol ? undefined : previous.symbol,
+      definition.kind
+    ), definition.kind, { internal: previous.inferredSymbol })
+  };
+  if (validateLayout) resolveLayout(program, config);
+  return { kind, config, order };
+}
+
+export function createCategoricalLegendFromConfig(program, config, order) {
+  const { kind } = config;
+  let next = program;
+  if (kind === "series") {
+    next = next
+      .editSemantic({
+        property: "guide.legend.series.channels",
+        value: config.channels
+      })
+      .editSemantic({
+        property: "guide.legend.series.scales",
+        value: config.scales
+      })
+      .editSemantic({
+        property: "guide.legend.series.title",
+        value: config.title
+      });
+  } else {
+    next = next
+      .editSemantic({
+        property: `guide.legend.${kind}.scale`,
+        value: config.scales[0]
+      })
+      .editSemantic({
+        property: `guide.legend.${kind}.title`,
+        value: config.title
+      });
+  }
+  if (order !== undefined && order !== "scale") {
+    next = next.editSemantic({
+      property: `guide.legend.${kind}.order`,
+      value: order
+    });
+  }
+  next = next._withLegendConfig(kind, config);
+  if (config.border !== false) {
+    next = next.createLegendBackground({ kind });
+  }
+  next = next
+    .createLegendSymbols({ kind })
+    .createLegendLabels({ kind });
+  return config.titleVisible === false
+    ? next
+    : next.createLegendTitle({ kind });
+}
+
+// Categorical content precedes its sampled companions in both creation and revision.
+export function resolveCategoricalLegendPlacement(program) {
+  const companions = new Set(legendResourcePolicies()
+    .filter(policy => policy.family !== "categorical" && program.guideConfigs.legend?.[policy.kind] !== undefined)
+    .flatMap(policy => legendGraphicIds(policy.kind)));
+  const before = program.graphicSpec.objects.canvas?.children?.find(id => companions.has(id));
+  return resolveLegendGraphicPlacement(program, before === undefined ? {} : { before });
+}
+
+export function categoricalSymbolIds(config) {
+  return new Set(config.symbol.layers.map(layer => symbolGraphic(config, layer.type)));
+}
+
+export function reconcileCategoricalSymbols(program, previous, config) {
+  const oldSymbols = categoricalSymbolIds(previous);
+  const newSymbols = categoricalSymbolIds(config);
+  const sameOrder = oldSymbols.size === newSymbols.size &&
+    [...oldSymbols].every((id, index) => id === [...newSymbols][index]);
+  let next = program;
+  if (!sameOrder) {
+    for (const id of oldSymbols) {
+      if (next.graphicSpec.objects[id] !== undefined) {
+        next = next.editGraphics({ target: id, remove: true });
+      }
+    }
+  }
+  for (const layer of config.symbol.layers) {
+    if (next.graphicSpec.objects[symbolGraphic(config, layer.type)] === undefined) {
+      const suffix = { line: "Lines", point: "Points", swatch: "Swatches" }[layer.type];
+      next = next[`createLegendSymbol${suffix}`]({ kind: config.kind });
+    }
+  }
+  return next;
+}