ggaction 0.0.12 → 0.0.15

package/src/actions/guides/legends/categorical/components.js

@@ -1,14 +1,18 @@
 import { action } from "../../../../core/action.js";
-import { formatVisibleText } from "../../../../core/textMetrics.js";
-import { activeConfig, graphic, noOptions, resolveLayout } from "./layout.js";
-import { resolveLegendGraphicPlacement } from
-  "../../../../materialization/graphicHierarchy.js";
+import {
+  activeConfig,
+  categoricalLegendLabels,
+  graphic,
+  noOptions,
+  resolveLayout
+} from "./layout.js";
+import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 
 export const rematerializeLegendLabels = action(
   { op: "rematerializeLegendLabels", description: "Rematerialize categorical legend labels." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendLabels");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     const id = graphic(config, "Labels");
     if (this.graphicSpec.objects[id]?.type !== "text") {
       throw new Error("rematerializeLegendLabels requires existing legend labels.");
@@ -21,7 +25,7 @@ export const rematerializeLegendLabels = action(
       .editGraphics({
         target: id,
         property: "text",
-        value: config.domain.map(formatVisibleText)
+        value: categoricalLegendLabels(config)
       })
       .editGraphics({ target: id, property: "fill", value: config.labels.color })
       .editGraphics({ target: id, property: "fontSize", value: config.labels.fontSize })
@@ -36,7 +40,7 @@ export const createLegendLabels = action(
   { op: "createLegendLabels", description: "Create categorical legend labels." },
   function (args = {}) {
     noOptions(args, "createLegendLabels");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     const id = graphic(config, "Labels");
     if (this.graphicSpec.objects[id] !== undefined) {
       throw new Error("createLegendLabels requires missing legend labels.");
@@ -46,9 +50,9 @@ export const createLegendLabels = action(
         id,
         type: "text",
         length: config.domain.length,
-        ...resolveLegendGraphicPlacement(this)
+        ...resolveCategoricalLegendPlacement(this)
       })
-      .rematerializeLegendLabels();
+      .rematerializeLegendLabels({ kind: config.kind });
   }
 );
 
@@ -56,7 +60,7 @@ export const rematerializeLegendTitle = action(
   { op: "rematerializeLegendTitle", description: "Rematerialize the categorical legend title." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendTitle");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     const id = graphic(config, "Title");
     if (this.graphicSpec.objects[id]?.type !== "text") {
       throw new Error("rematerializeLegendTitle requires an existing legend title.");
@@ -86,7 +90,7 @@ export const createLegendTitle = action(
   { op: "createLegendTitle", description: "Create the categorical legend title." },
   function (args = {}) {
     noOptions(args, "createLegendTitle");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     const id = graphic(config, "Title");
     if (this.graphicSpec.objects[id] !== undefined) {
       throw new Error("createLegendTitle requires a missing legend title.");
@@ -95,9 +99,9 @@ export const createLegendTitle = action(
       .createGraphics({
         id,
         type: "text",
-        ...resolveLegendGraphicPlacement(this)
+        ...resolveCategoricalLegendPlacement(this)
       })
-      .rematerializeLegendTitle();
+      .rematerializeLegendTitle({ kind: config.kind });
   }
 );
 
@@ -105,7 +109,7 @@ export const rematerializeLegendBackground = action(
   { op: "rematerializeLegendBackground", description: "Rematerialize the legend background." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendBackground");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     if (config.border === false) {
       throw new Error("rematerializeLegendBackground requires border configuration.");
     }
@@ -129,7 +133,7 @@ export const createLegendBackground = action(
   { op: "createLegendBackground", description: "Create the legend background rect." },
   function (args = {}) {
     noOptions(args, "createLegendBackground");
-    const { config } = activeConfig(this);
+    const { config } = activeConfig(this, args.kind);
     const id = graphic(config, "Background");
     if (this.graphicSpec.objects[id] !== undefined) {
       throw new Error("createLegendBackground requires a missing background.");
@@ -138,8 +142,8 @@ export const createLegendBackground = action(
       .createGraphics({
         id,
         type: "rect",
-        ...resolveLegendGraphicPlacement(this)
+        ...resolveCategoricalLegendPlacement(this)
       })
-      .rematerializeLegendBackground();
+      .rematerializeLegendBackground({ kind: config.kind });
   }
 );

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

@@ -68,40 +68,44 @@ function createLegendHighlightAction() {
     },
     function (args = {}) {
       noOptions(args, "rematerializeLegendHighlights");
-      const hasCategorical =
-        this.guideConfigs.legend?.series !== undefined ||
-        this.guideConfigs.legend?.color !== undefined;
-      if (!hasCategorical) return this;
-      const { config } = activeConfig(this);
-      const highlights = Object.values(
-        this.materializationConfigs.highlights ?? {}
-      ).map(highlight => ({
-        highlight,
-        states: exactLegendSelection(this, config, highlight)
-      })).filter(entry => entry.states !== undefined);
-      if (highlights.length === 0) return this;
+      const kinds = args.kind === undefined
+        ? ["series", "color", "stroke"].filter(
+            kind => this.guideConfigs.legend?.[kind] !== undefined
+          )
+        : [args.kind];
+      let next = this;
+      for (const kind of kinds) {
+        const { config } = activeConfig(next, kind);
+        const highlights = Object.values(
+          next.materializationConfigs.highlights ?? {}
+        ).map(highlight => ({
+          highlight,
+          states: exactLegendSelection(next, config, highlight)
+        })).filter(entry => entry.states !== undefined);
+        if (highlights.length === 0) continue;
 
-      let next = this.rematerializeLegendSymbols();
-      for (const { highlight, states } of highlights) {
-        for (const layer of config.symbol.layers) {
-          const id = symbolGraphic(config, layer.type);
-          const graphic = next.graphicSpec.objects[id];
-          const selectedStyle = legendLayerStyle(layer, highlight.style);
-          const dimOpacity = highlight.dimOthers === false
-            ? undefined
-            : highlight.dimOthers.opacity;
-          next = next.editGraphics({
-            target: id,
-            property: "items",
-            value: graphic.items.map((child, index) => ({
-              type: child.type ?? graphic.type,
-              properties: states[index]
-                ? { ...child.properties, ...selectedStyle }
-                : dimOpacity === undefined
-                  ? child.properties
-                  : { ...child.properties, opacity: dimOpacity }
-            }))
-          });
+        next = next.rematerializeLegendSymbols({ kind: config.kind });
+        for (const { highlight, states } of highlights) {
+          for (const layer of config.symbol.layers) {
+            const id = symbolGraphic(config, layer.type);
+            const graphic = next.graphicSpec.objects[id];
+            const selectedStyle = legendLayerStyle(layer, highlight.style);
+            const dimOpacity = highlight.dimOthers === false
+              ? undefined
+              : highlight.dimOthers.opacity;
+            next = next.editGraphics({
+              target: id,
+              property: "items",
+              value: graphic.items.map((child, index) => ({
+                type: child.type ?? graphic.type,
+                properties: states[index]
+                  ? { ...child.properties, ...selectedStyle }
+                  : dimOpacity === undefined
+                    ? child.properties
+                    : { ...child.properties, opacity: dimOpacity }
+              }))
+            });
+          }
         }
       }
       return next;