ggaction 0.0.13 → 0.0.16

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

@@ -26,6 +26,11 @@ import {
   resolveTarget,
   sameValues
 } from "./resolve.js";
+import { readLegendSampling } from "../sampling.js";
+import {
+  reconcileLegendBlockTitleGraphic,
+  resolveEffectiveLegendBlockConfig
+} from "../blocks.js";
 
 function finishLegend(program) {
   return hasLegendLane(program) ? program.rematerializeLegend() : program;
@@ -45,30 +50,40 @@ function resolveStandaloneLegendStep(args, kind) {
   return { op: kind === "size" ? "createSizeLegend" : "createStrokeWidthLegend", args: options };
 }
 
-export const rematerializeLegend = action(
+export const rematerializeLegend = /* @__PURE__ */ action(
   { op: "rematerializeLegend", description: "Rematerialize every existing legend component." },
   withGuideLayoutValidation(function (args = {}) {
     noOptions(args, "rematerializeLegend");
     let next = this;
-    const hasCategorical =
-      this.guideConfigs.legend?.series !== undefined ||
-      this.guideConfigs.legend?.color !== undefined;
-    if (hasCategorical) {
-      const { kind, config } = activeConfig(this);
-      const definition = resolveCurrentDefinition(this, config);
-      const symbol = config.inferredSymbol
-        ? normalizeRecipe(resolveLegendSymbol(this, findLayer(this, config.target), definition.channels), kind)
-        : config.symbol;
-      const symbolChanged = !sameGuideValue(symbol, config.symbol);
+    const categoricalKinds = ["series", "color", "stroke"].filter(
+      kind => this.guideConfigs.legend?.[kind] !== undefined
+    );
+    for (const kind of categoricalKinds) {
+      const stored = next.guideConfigs.legend[kind];
+      const definition = resolveCurrentDefinition(next, stored);
+      const symbol = stored.inferredSymbol
+        ? normalizeRecipe(
+            resolveLegendSymbol(
+              next,
+              findLayer(next, stored.target),
+              definition.channels,
+              undefined,
+              kind
+            ),
+            kind,
+            { internal: true }
+          )
+        : stored.symbol;
+      const symbolChanged = !sameGuideValue(symbol, stored.symbol);
       const changed = symbolChanged ||
-        !sameValues(config.channels, definition.channels) ||
-        !sameValues(config.domain, definition.domain) ||
-        !sameValues(config.scales, definition.scales) ||
-        config.field !== definition.field ||
-        config.title !== definition.title;
+        !sameValues(stored.channels, definition.channels) ||
+        !sameValues(stored.domain, definition.domain) ||
+        !sameValues(stored.scales, definition.scales) ||
+        stored.field !== definition.field ||
+        stored.title !== definition.title;
       next = changed
-        ? this._withLegendConfig(kind, {
-            ...config,
+        ? next._withLegendConfig(kind, {
+            ...stored,
             symbol,
             channels: definition.channels,
             scales: definition.scales,
@@ -76,10 +91,17 @@ export const rematerializeLegend = action(
             title: definition.title,
             domain: definition.domain
           })
-        : this;
+        : next;
+      const config = resolveEffectiveLegendBlockConfig(
+        next,
+        kind,
+        next.guideConfigs.legend[kind]
+      );
+      next = reconcileLegendBlockTitleGraphic(next, kind,
+        config.titleVisible !== false);
       if (kind === "series") {
         if (!sameValues(
-          this.semanticSpec.guides.legend.series.scales,
+          next.semanticSpec.guides.legend.series.scales,
           definition.scales
         )) {
           next = next.editSemantic({
@@ -87,45 +109,56 @@ export const rematerializeLegend = action(
             value: definition.scales
           });
         }
-        if (this.semanticSpec.guides.legend.series.title !== definition.title) {
+        if (next.semanticSpec.guides.legend.series.title !== definition.title) {
           next = next.editSemantic({
             property: "guide.legend.series.title",
             value: definition.title
           });
         }
       } else {
-        if (this.semanticSpec.guides.legend.color.scale !== definition.scales[0]) {
+        if (next.semanticSpec.guides.legend[kind].scale !== definition.scales[0]) {
           next = next.editSemantic({
-            property: "guide.legend.color.scale",
+            property: `guide.legend.${kind}.scale`,
             value: definition.scales[0]
           });
         }
-        if (this.semanticSpec.guides.legend.color.title !== definition.title) {
+        if (next.semanticSpec.guides.legend[kind].title !== definition.title) {
           next = next.editSemantic({
-            property: "guide.legend.color.title",
+            property: `guide.legend.${kind}.title`,
             value: definition.title
           });
         }
       }
       if (symbolChanged) {
-        resolveLayout(next, next.guideConfigs.legend[kind]);
-        next = reconcileCategoricalSymbols(next, config, next.guideConfigs.legend[kind]);
+        resolveLayout(next, config);
+        next = reconcileCategoricalSymbols(next, stored, config);
+      }
+      if (config.border !== false) {
+        next = next.rematerializeLegendBackground({ kind });
       }
-      if (config.border !== false) next = next.rematerializeLegendBackground();
       next = next
-        .rematerializeLegendSymbols()
-        .rematerializeLegendLabels();
-      if (config.titleVisible !== false) next = next.rematerializeLegendTitle();
+        .rematerializeLegendSymbols({ kind })
+        .rematerializeLegendLabels({ kind });
+      if (config.titleVisible !== false) {
+        next = next.rematerializeLegendTitle({ kind });
+      }
       const hasHighlight = Object.values(
         next.materializationConfigs.highlights ?? {}
       ).some(highlight => highlight.target === config.target);
-      if (hasHighlight) next = next.rematerializeLegendHighlights();
+      if (hasHighlight) next = next.rematerializeLegendHighlights({ kind });
     }
     for (const policy of legendResourcePolicies()) {
       if (
         policy.rematerializeOp !== undefined &&
         this.guideConfigs.legend?.[policy.kind] !== undefined
       ) {
+        const config = resolveEffectiveLegendBlockConfig(
+          next,
+          policy.kind,
+          next.guideConfigs.legend[policy.kind]
+        );
+        next = reconcileLegendBlockTitleGraphic(next, policy.kind,
+          config.titleVisible !== false);
         next = next[policy.rematerializeOp]();
       }
     }
@@ -148,14 +181,21 @@ export function resolveCategoricalLegendConfig(program, args = {}) {
     args.title,
     args.order === undefined ? undefined : normalizeLegendOrder(args.order)
   );
+  const inferredSymbol = args.symbol === undefined || args.symbol === "auto";
   const options = normalizeOptions({ ...args,
-    symbol: resolveLegendSymbol(program, layer, definition.channels, args.symbol)
-  }, definition.kind);
+    symbol: resolveLegendSymbol(
+      program,
+      layer,
+      definition.channels,
+      args.symbol,
+      definition.kind
+    )
+  }, definition.kind, { internalSymbol: inferredSymbol });
   const config = {
     target: layer.id,
     ...definition,
     inferredTitle: !Object.hasOwn(args, "title"),
-    inferredSymbol: args.symbol === undefined || args.symbol === "auto",
+    inferredSymbol,
     position: options.position,
     align: options.align,
     direction: options.direction,
@@ -173,15 +213,14 @@ export function resolveCategoricalLegendConfig(program, args = {}) {
   return config;
 }
 
-export const createCategoricalLegend = action(
+export const createCategoricalLegend = /* @__PURE__ */ action(
   { op: "createCategoricalLegend", description: "Create one categorical legend block." },
   withGuideLayoutValidation(function (args = {}) {
     const config = resolveCategoricalLegendConfig(this, args);
-    if (
-      this.semanticSpec.guides.legend?.series !== undefined ||
-      this.semanticSpec.guides.legend?.color !== undefined
-    ) {
-      throw new Error("createCategoricalLegend requires a missing legend.");
+    if (this.semanticSpec.guides.legend?.[config.kind] !== undefined) {
+      throw new Error(
+        `createCategoricalLegend requires a missing legend for ${config.kind}.`
+      );
     }
     resolveLayout(this, config);
     return createCategoricalLegendFromConfig(this, config,
@@ -195,12 +234,12 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
   const channels = args.channels;
   if (channels !== undefined) validateLegendChannels(channels, "createLegend");
   const standalone = [
-    ["size", isSizeLegendPoint, ["color", "shape", "strokeDash", "opacity"]],
+    ["size", isSizeLegendPoint, ["color", "stroke", "shape", "strokeDash", "opacity"]],
     ["strokeWidth", isStrokeWidthLegendLayer, args.target === undefined
-      ? ["color", "shape", "strokeDash", "size", "opacity"]
-      : ["color", "shape", "strokeDash", "opacity"]],
+      ? ["color", "stroke", "shape", "strokeDash", "size", "opacity"]
+      : ["color", "stroke", "shape", "strokeDash", "opacity"]],
     ["opacity", isOpacityLegendLayer,
-      ["color", "shape", "strokeDash", "size"]]
+      ["color", "stroke", "shape", "strokeDash", "size"]]
   ];
   for (const [kind, eligible, otherChannels] of standalone) {
     const explicit = channels?.length === 1 && channels[0] === kind;
@@ -240,6 +279,47 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
   ) {
     return { steps: [{ op: "createIntervalLegend", args }], finish: "auto" };
   }
+  const continuousStrokeCandidates = candidates.filter(layer => {
+    const scale = findSemanticScale(program, layer.encoding?.stroke?.scale);
+    return scale?.type === "sequential";
+  });
+  const continuousStroke = requestedCandidate(
+    program,
+    args.target,
+    continuousStrokeCandidates
+  );
+  if (
+    (channels?.length === 1 && channels[0] === "stroke" && continuousStroke) ||
+    (channels === undefined && continuousStroke &&
+      !["color", "shape", "strokeDash", "size", "opacity", "strokeWidth"].some(
+        channel => continuousStroke.encoding?.[channel]?.scale !== undefined
+      ))
+  ) {
+    return {
+      steps: [{ op: "createStrokeGradientLegend", args: {
+        ...args,
+        channels: ["stroke"]
+      } }],
+      finish: "auto"
+    };
+  }
+  const intervalStrokeCandidates = candidates.filter(layer => {
+    const scale = findSemanticScale(program, layer.encoding?.stroke?.scale);
+    return ["quantize", "quantile", "threshold"].includes(scale?.type);
+  });
+  if (
+    (channels?.length === 1 && channels[0] === "stroke" &&
+      intervalStrokeCandidates.length > 0) ||
+    (channels === undefined && intervalStrokeCandidates.length === 1)
+  ) {
+    return {
+      steps: [{ op: "createStrokeIntervalLegend", args: {
+        ...args,
+        channels: ["stroke"]
+      } }],
+      finish: "auto"
+    };
+  }
   const wantsShape = channels?.includes("shape") === true;
   const wantsSize = channels?.includes("size") === true;
   const pointCandidates = candidates.filter(layer =>
@@ -247,7 +327,7 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
     (channels === undefined
       ? ["color", "shape"].some(channel => layer.encoding?.[channel]?.scale !== undefined)
       : (wantsShape || wantsSize) && channels.every(channel =>
-        ["color", "shape", "size"].includes(channel) && layer.encoding?.[channel]?.scale !== undefined))
+        ["color", "stroke", "shape", "size"].includes(channel) && layer.encoding?.[channel]?.scale !== undefined))
   );
   const requestedPoint = requestedCandidate(program, args.target, pointCandidates);
   const inferredSize = channels === undefined && pointCandidates.some(isSizeLegendPoint);
@@ -255,6 +335,11 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
     throw new Error("Combined size legend requires one eligible point mark or an explicit target.");
   }
   if (requestedPoint !== undefined) {
+    if (Object.hasOwn(args, "values")) {
+      throw new Error(
+        "Combined and categorical legends require a channel block selector for exact values."
+      );
+    }
     const { count, ...categoricalArgs } = args;
     const combined = requestedPoint.encoding?.size?.scale !== undefined &&
       (channels === undefined || wantsSize);
@@ -264,7 +349,7 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
     if (combined && categoricalArgs.layout === "legacy-bottom") {
       throw new Error('Combined size legends require layout "edge".');
     }
-    const inferredChannels = ["color", "shape"].filter(
+    const inferredChannels = ["color", "stroke", "shape"].filter(
       channel => requestedPoint.encoding?.[channel]?.scale !== undefined
     );
     const { format: sizeFormat, ...categoricalLabels } = categoricalArgs.labels ?? {};
@@ -294,7 +379,8 @@ export function resolveLegendCreationPlan(program, args = {}, layers = program.s
       if (existing !== undefined && existing.target !== size.target) {
         throw new Error("Combined point series legend requires the active size legend to share its target.");
       }
-      if (existing !== undefined && count !== undefined && existing.count !== count) {
+      if (existing !== undefined && count !== undefined &&
+        readLegendSampling(existing).count !== count) {
         throw new Error("Existing size legend count must be edited before recreating the categorical block.");
       }
     }
@@ -317,28 +403,28 @@ export function applyLegendCreationPlan(program, plan) {
     : plan.finish === "auto" ? finishLegend(next) : next;
 }
 
-export const createLegend = action(
+export const createLegend = /* @__PURE__ */ action(
   { op: "createLegend", description: "Create an inferred legend for selected channels." },
   withGuideLayoutValidation(function (args = {}) {
     return applyLegendCreationPlan(this, resolveLegendCreationPlan(this, args));
   })
 );
 
-export const removeCategoricalLegend = action(
+export const removeCategoricalLegend = /* @__PURE__ */ action(
   {
     op: "removeCategoricalLegend",
     description: "Remove the active categorical legend and its concrete components."
   },
   withGuideLayoutValidation(function (args = {}) {
     noOptions(args, "removeCategoricalLegend");
-    const entries = ["series", "color"]
+    const entries = ["series", "color", "stroke"]
       .filter(kind => this.guideConfigs.legend?.[kind] !== undefined);
     if (entries.length === 0) return this;
     if (entries.length !== 1) {
       throw new Error("removeCategoricalLegend requires one active categorical legend.");
     }
     const kind = entries[0];
-    const prefix = kind === "series" ? "seriesLegend" : "colorLegend";
+    const prefix = `${kind}Legend`;
     const targets = Object.keys(this.graphicSpec.objects)
       .filter(id => id.startsWith(prefix));
     let next = this.editSemantic({

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

@@ -1,41 +1,49 @@
+import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
-import { formatVisibleText } from "../../../../core/textMetrics.js";
-import { activeConfig, graphic, noOptions, resolveLayout } from "./layout.js";
+import {
+  activeConfig,
+  categoricalLegendLabels,
+  graphic,
+  noOptions,
+  resolveLayout
+} from "./layout.js";
 import { resolveCategoricalLegendPlacement } from "../lifecycle.js";
 
-export const rematerializeLegendLabels = action(
+export const rematerializeLegendLabels = /* @__PURE__ */ 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.");
     }
     const layout = resolveLayout(this, config);
-    return this
-      .editGraphics({ target: id, property: "length", value: config.domain.length })
-      .editGraphics({ target: id, property: "x", value: layout.labelX })
-      .editGraphics({ target: id, property: "y", value: layout.itemY })
+    return editGraphicProperties(editGraphicProperties(this, id, {
+      length: config.domain.length,
+      x: layout.labelX,
+      y: layout.itemY
+    })
       .editGraphics({
         target: id,
         property: "text",
-        value: config.domain.map(formatVisibleText)
-      })
-      .editGraphics({ target: id, property: "fill", value: config.labels.color })
-      .editGraphics({ target: id, property: "fontSize", value: config.labels.fontSize })
-      .editGraphics({ target: id, property: "fontFamily", value: config.labels.fontFamily })
-      .editGraphics({ target: id, property: "fontWeight", value: config.labels.fontWeight })
-      .editGraphics({ target: id, property: "textAlign", value: "left" })
-      .editGraphics({ target: id, property: "textBaseline", value: "middle" });
+        value: categoricalLegendLabels(config)
+      }), id, {
+      fill: config.labels.color,
+      fontSize: config.labels.fontSize,
+      fontFamily: config.labels.fontFamily,
+      fontWeight: config.labels.fontWeight,
+      textAlign: "left",
+      textBaseline: "middle"
+    });
   }
 );
 
-export const createLegendLabels = action(
+export const createLegendLabels = /* @__PURE__ */ 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.");
@@ -47,28 +55,29 @@ export const createLegendLabels = action(
         length: config.domain.length,
         ...resolveCategoricalLegendPlacement(this)
       })
-      .rematerializeLegendLabels();
+      .rematerializeLegendLabels({ kind: config.kind });
   }
 );
 
-export const rematerializeLegendTitle = action(
+export const rematerializeLegendTitle = /* @__PURE__ */ 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.");
     }
     const layout = resolveLayout(this, config);
-    return this
-      .editGraphics({ target: id, property: "x", value: layout.titleX })
-      .editGraphics({ target: id, property: "y", value: layout.titleY })
-      .editGraphics({ target: id, property: "text", value: config.title })
-      .editGraphics({ target: id, property: "fill", value: config.titleStyle.color })
-      .editGraphics({ target: id, property: "fontSize", value: config.titleStyle.fontSize })
-      .editGraphics({ target: id, property: "fontFamily", value: config.titleStyle.fontFamily })
-      .editGraphics({ target: id, property: "fontWeight", value: config.titleStyle.fontWeight })
+    return editGraphicProperties(this, id, {
+      x: layout.titleX,
+      y: layout.titleY,
+      text: config.title,
+      fill: config.titleStyle.color,
+      fontSize: config.titleStyle.fontSize,
+      fontFamily: config.titleStyle.fontFamily,
+      fontWeight: config.titleStyle.fontWeight
+    })
       .editGraphics({
         target: id,
         property: "textAlign",
@@ -81,11 +90,11 @@ export const rematerializeLegendTitle = action(
   }
 );
 
-export const createLegendTitle = action(
+export const createLegendTitle = /* @__PURE__ */ 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.");
@@ -96,15 +105,15 @@ export const createLegendTitle = action(
         type: "text",
         ...resolveCategoricalLegendPlacement(this)
       })
-      .rematerializeLegendTitle();
+      .rematerializeLegendTitle({ kind: config.kind });
   }
 );
 
-export const rematerializeLegendBackground = action(
+export const rematerializeLegendBackground = /* @__PURE__ */ 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.");
     }
@@ -113,22 +122,23 @@ export const rematerializeLegendBackground = action(
       throw new Error("rematerializeLegendBackground requires an existing background.");
     }
     const layout = resolveLayout(this, config).background;
-    return this
-      .editGraphics({ target: id, property: "x", value: layout.x })
-      .editGraphics({ target: id, property: "y", value: layout.y })
-      .editGraphics({ target: id, property: "width", value: layout.width })
-      .editGraphics({ target: id, property: "height", value: layout.height })
-      .editGraphics({ target: id, property: "fill", value: config.border.background })
-      .editGraphics({ target: id, property: "stroke", value: config.border.color })
-      .editGraphics({ target: id, property: "strokeWidth", value: config.border.lineWidth });
+    return editGraphicProperties(this, id, {
+      x: layout.x,
+      y: layout.y,
+      width: layout.width,
+      height: layout.height,
+      fill: config.border.background,
+      stroke: config.border.color,
+      strokeWidth: config.border.lineWidth
+    });
   }
 );
 
-export const createLegendBackground = action(
+export const createLegendBackground = /* @__PURE__ */ 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.");
@@ -139,6 +149,6 @@ export const createLegendBackground = action(
         type: "rect",
         ...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;