ggaction 0.0.18 → 0.0.19

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

@@ -1,3 +1,4 @@
+import {validateLegendLayerOpacity}from"../../../../grammar/legendOpacity.js";
 import { isPlainObject } from "../../../../core/immutable.js";
 import {
   nonEmptyString,
@@ -16,21 +17,23 @@ import {
 import { findLayerMatching } from "../../../../selectors/layers.js";
 
 const LAYER_OPTIONS = Object.freeze({
-  line: Object.freeze(["type", "length", "lineWidth"]),
+  line: Object.freeze(["type", "length", "lineWidth", "opacity"]),
   point: Object.freeze([
     "type",
     "shape",
     "size",
     "fill",
     "stroke",
-    "strokeWidth"
+    "strokeWidth",
+    "opacity"
   ]),
   swatch: Object.freeze([
     "type",
     "width",
     "height",
     "stroke",
-    "strokeWidth"
+    "strokeWidth",
+    "opacity"
   ])
 });
 const INTERNAL_LAYER_OPTIONS = Object.freeze({
@@ -145,6 +148,7 @@ function defaultRecipe(kind) {
 }
 
 function normalizeLayer(layer, internal) {
+  validateLegendLayerOpacity(layer?.opacity);
   if (!isPlainObject(layer) || !Object.hasOwn(LAYER_OPTIONS, layer.type)) {
     throw new Error("Legend symbol layer type must be line, point, or swatch.");
   }

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

@@ -1,3 +1,4 @@
+import { resolveSizeShapeMapping } from "../../../../grammar/legendCombinations.js";
 import { requireDataset } from "../../../../selectors/datasets.js";
 import { readNominalField } from "../../../../grammar/scales/fields.js";
 import { resolveLegendOrderDomain } from "../../../../grammar/categoryOrder.js";
@@ -85,11 +86,15 @@ export function resolveDefinition(program, layer, requestedChannels, requestedTi
   const channels = requestedChannels ?? CHANNELS.filter(
     channel => layer.encoding?.[channel]?.scale !== undefined
   );
+  const sizeShape = channels?.length === 2 && channels.includes("size") && channels.includes("shape");
+  if (sizeShape && (layer.mark.type !== "point" || !["nominal", "ordinal"].includes(layer.encoding.size?.fieldType))) {
+    throw new Error("Combined size-shape requires one categorical point owner.");
+  }
   const kind = resolveLegendKind(layer, channels);
   if (
     !Array.isArray(channels) ||
     channels.length === 0 ||
-    !channels.every(channel => CHANNELS.includes(channel)) ||
+    !channels.every(channel => CHANNELS.includes(channel) || sizeShape && channel === "size") ||
     new Set(channels).size !== channels.length
   ) {
     throw new Error(
@@ -129,7 +134,9 @@ export function resolveDefinition(program, layer, requestedChannels, requestedTi
     field,
     title: nonEmptyString(requestedTitle ?? field, "Legend title"),
     domain: resolveLegendOrderDomain(resolved.domain, order, linked,
-      order?.values === undefined ? undefined : readNominalField(requireDataset(program, layer.data).values, field))
+      order?.values === undefined ? undefined : readNominalField(requireDataset(program, layer.data).values, field)),
+    ...(sizeShape ? {combine:"size-shape",...resolveSizeShapeMapping({layer,
+      scales:program.resolvedScales,order,rows:requireDataset(program,layer.data).values})} : {})
   };
 }
 

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

@@ -1,3 +1,4 @@
+import{hasLegendClipGraphics,applyLegendClipGraphics}from"../../../../materialization/legendClip.js";
 import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
 import { action } from "../../../../core/action.js";
 import {
@@ -21,10 +22,17 @@ import {
 import { requestedStrokeDetails } from "../../../../grammar/strokeStyle.js";
 import { replaceGraphicItems } from "../../../primitives/editGraphics.js";
 
-function applyLayerOpacity(program, id, opacity) {
-  return opacity === undefined
-    ? program
-    : program.editGraphics({ target: id, property: "opacity", value: opacity });
+function applyLayerOpacity(program,id,opacity,normal=false) {
+  const owner=program.graphicSpec.objects[id];
+  if(!normal&&!owner.items.some(item=>item.properties.blend!==undefined)){
+    if(opacity!==undefined)return program.editGraphics({target:id,property:"opacity",value:opacity});
+    if(!owner.items.some(item=>item.properties.opacity!==undefined))return program;
+  }
+  return program.editGraphics({target:id,property:"items",value:owner.items.map(item=>{
+    const {opacity:_old,blend:_blend,...properties}=item.properties;
+    return {type:item.type??owner.type,properties:{...properties,
+      ...(opacity===undefined?{}:{opacity}),...(normal?{blend:"normal"}:{})}};
+  })});
 }
 
 function makeEditSymbol(type) {
@@ -34,9 +42,12 @@ function makeEditSymbol(type) {
     { op, description: `Rematerialize categorical legend ${type} symbols.` },
     function (args = {}) {
       noOptions(args, op);
-      const { config: stored } = activeConfig(this, args.kind);
+      if(hasLegendClipGraphics(this))return this.rematerializeLegend();
+      const { kind, config: stored } = activeConfig(this, args.kind);
       const config = categoricalLegendView(stored);
       const layer = layerFor(config, type);
+      const explicitRecipeOpacity = this.guideConfigs.legend[kind].symbol.layers
+        .some(sample=>sample.type===type&&sample.opacity!==undefined);
       const id = symbolGraphic(config, type);
       const dynamicPoint = type === "point" && config.channels.includes("shape");
       const styledSwatch = type === "swatch" && hasRectRadius(layer);
@@ -91,11 +102,11 @@ function makeEditSymbol(type) {
         if (dynamicPoint) {
           const items = config.domain.map((_, index) => {
             const fill = layer.fill ?? appearance.colors[index];
-            return createPointShapeGraphic({
+            const graphic = createPointShapeGraphic({
               shape: appearance.shapes[index],
               x: x[index],
               y: layout.itemY[index],
-              area: Math.PI * layer.size ** 2,
+              area: appearance.areas?.[index] ?? Math.PI * layer.size ** 2,
               fill,
               stroke: config.channels.includes("stroke")
                 ? appearance.strokes[index]
@@ -104,6 +115,7 @@ function makeEditSymbol(type) {
               opacity: layer.opacity ?? appearance.opacity,
               ...requestedStrokeDetails(layer, "Legend point symbol")
             });
+            return !explicitRecipeOpacity?graphic:{...graphic,properties:{...graphic.properties,blend:"normal"}};
           });
           return next.editGraphics({
             target: id,
@@ -130,7 +142,7 @@ function makeEditSymbol(type) {
         )) {
           next = next.editGraphics({ target: id, property, value });
         }
-        return applyLayerOpacity(next, id, layer.opacity ?? appearance.opacity);
+        return applyLayerOpacity(next, id, layer.opacity ?? appearance.opacity, explicitRecipeOpacity);
       }
       const x = layout.symbolX.map(
         value => value + (symbolWidth(config) - layer.width) / 2
@@ -155,6 +167,7 @@ function makeEditSymbol(type) {
           stroke: strokes[index],
           strokeWidth: layer.strokeWidth,
           ...((layer.opacity ?? appearance.opacity) === undefined ? {} : { opacity: layer.opacity ?? appearance.opacity }),
+          ...(!explicitRecipeOpacity?{}:{blend:"normal"}),
           ...requestedStrokeDetails(details, "Legend swatch symbol")
         }, details))
       );
@@ -236,6 +249,7 @@ export const rematerializeLegendSymbols = /* @__PURE__ */ action(
   { op: "rematerializeLegendSymbols", description: "Rematerialize layered legend symbols." },
   function (args = {}) {
     noOptions(args, "rematerializeLegendSymbols");
+    if (hasLegendClipGraphics(this)) return this.rematerializeLegend();
     const { config: stored } = activeConfig(this, args.kind);
     const config = categoricalLegendView(stored);
     let next = this;

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

@@ -0,0 +1,110 @@
+import {findLayer} from '../../../selectors/layers.js';
+import {findCoordinate} from '../../../selectors/coordinates.js';
+import {legendBlockChannels} from '../../../grammar/legendBlocks.js';
+import {mergeLegendTitleStyle} from '../../../grammar/legendTitleStyle.js';
+import {validateOptionObject} from '../../../core/validation.js';
+import {resolveColorSizeMapping,normalizeColorSizeSymbol,isColorSizeChannels} from '../../../grammar/colorSizeLegend.js';
+import {mapSizeValues} from '../../../grammar/scales/size.js';
+import {mapScaleConsumerValues} from '../../../materialization/scales/map.js';
+import {intrinsicLegendConfig} from '../../../materialization/legendGroups.js';
+import {resolveDisplayLabel} from '../../../grammar/displayLabels.js';
+import {clippedSampleBounds,validateLegendClip} from '../../../grammar/legendClip.js';
+import {resolveLegendItemLayout} from '../../../layout/legendItems.js';
+import {resolveLegendGraphicPlacement} from '../../../materialization/graphicHierarchy.js';
+import {normalizeItemLegendConfig,ITEM_LEGEND_OPTIONS,resolveContinuousBounds,formatContinuousValues,assertLegendBoundsInsideCanvas,resolveLegendBackgroundFromBounds,editLegendBackground,styleContinuousText,editGraphicProperties} from './continuous/common.js';
+import {normalizeLegendSampling,resolveLegendSampleValues,validateSamplingAgainstScale,readLegendSampling} from './sampling.js';
+import {resolveEffectiveLegendBlockConfig} from './blocks.js';
+import {applyLegendClipGraphics} from '../../../materialization/legendClip.js';
+
+export function resolveColorSizeOwner(program,target) {
+ const candidates=(target===undefined?program.semanticSpec.layers:[findLayer(program,target)]).filter(layer=>layer?.mark?.type==='point'&&layer.encoding?.color&&layer.encoding?.size);
+ const mapping=layer=>resolveColorSizeMapping({layer,scales:program.resolvedScales,pointConfig:program.markConfigs[layer.id],
+  coordinate:findCoordinate(program,layer.coordinate)});
+ if(target!==undefined){if(candidates.length!==1)throw new Error('Color-size combination requires one point owner or an explicit target.');return mapping(candidates[0]);}
+ const eligible=[];for(const layer of candidates){try{eligible.push(mapping(layer));}catch{/* Ineligible owners do not participate in inference. */}}
+ if(eligible.length!==1){if(candidates.length===1)return mapping(candidates[0]);throw new Error('Color-size combination requires one eligible point owner or an explicit target.');}
+ return eligible[0];
+}
+
+export function resolveColorSizeConfig(program,args={}) {
+ validateOptionObject(args,[...ITEM_LEGEND_OPTIONS.filter(key=>key!=='overflow'),'channels','combine','symbol','blockLayout','at'],'Color-size legend');
+ if(args.channels!==undefined&&!isColorSizeChannels(args.channels))throw new Error('Color-size combination requires exactly color and size channels.');
+ const mapping=resolveColorSizeOwner(program,args.target);
+ return {...mapping,...normalizeItemLegendConfig(args,{field:mapping.field},40),
+  sampling:normalizeLegendSampling(args,{label:'Color-size legend'}),symbol:normalizeColorSizeSymbol(args.symbol),combine:'color-size'};
+}
+
+export function refreshColorSizeConfig(program,stored) {
+ const mapping=resolveColorSizeOwner(program,stored.target);
+ if(mapping.field!==stored.field)throw new Error('Color-size combination field changed; explicitly recreate the block.');
+ return {...stored,...mapping,title:stored.inferredTitle?mapping.field:stored.title};
+}
+
+export function resolveColorSizeLayout(program,stored) {
+ validateLegendClip('colorSize',stored);
+ const config=intrinsicLegendConfig(program,resolveEffectiveLegendBlockConfig(program,'colorSize',stored));
+ const color=program.resolvedScales[stored.colorScale],size=program.resolvedScales[stored.sizeScale];
+ const sampling=readLegendSampling(config);validateSamplingAgainstScale(sampling,color,'Color-size samples');validateSamplingAgainstScale(sampling,size,'Color-size samples');
+ const values=resolveLegendSampleValues(config,size,'Color-size legend');
+ const colors=mapScaleConsumerValues(values,color,'color'),areas=mapSizeValues(values,size),radii=areas.map(area=>Math.sqrt(area/Math.PI));
+ const labels=formatContinuousValues(values,stored.domain,'quantitative',config.labels.format)
+  .map((text,index)=>resolveDisplayLabel(values[index],config.labelMap,()=>text));
+ const radius=Math.max(...radii),stroke=config.symbol.strokeWidth/2,width=2*(radius+stroke),height=Math.min(width,config.clipHeight??Infinity);
+ const {plot,canvas}=resolveContinuousBounds(program);
+ const layout=resolveLegendItemLayout(plot,config,labels,{width,height,itemBounds:radii.map(r=>clippedSampleBounds({left:width/2-r-stroke,right:width/2+r+stroke,top:-r-stroke,bottom:r+stroke},config.clipHeight))},canvas,program.materializationConfigs.textMetrics);
+ assertLegendBoundsInsideCanvas(layout.bounds,canvas,'Color-size legend',config);
+ const background=resolveLegendBackgroundFromBounds(layout.bounds,config.border,canvas,'Color-size legend',config);
+ return {...layout,background,values,colors,areas,radii,text:labels,config,symbolX:layout.symbolX.map(x=>x+width/2)};
+}
+
+function writeSemantic(program,config) {
+ return program.editSemantic({property:'guide.legend.colorSize.colorScale',value:config.colorScale})
+  .editSemantic({property:'guide.legend.colorSize.sizeScale',value:config.sizeScale})
+  .editSemantic({property:'guide.legend.colorSize.title',value:config.title})._withLegendConfig('colorSize',config);
+}
+
+export function materializeColorSizeLegend(program,stored) {
+ const config=refreshColorSizeConfig(program,stored),layout=resolveColorSizeLayout(program,config),effective=layout.config;
+ let next=writeSemantic(program,config);
+ next=editGraphicProperties(next,'colorSizeLegendSymbols',{length:layout.values.length,x:layout.symbolX,y:layout.itemY,radius:layout.radii,
+  fill:layout.colors,stroke:effective.symbol.stroke??layout.colors,strokeWidth:effective.symbol.strokeWidth,opacity:effective.symbol.opacity});
+ const visible=layout.text.flatMap((text,index)=>text===''?[]:[index]);
+ next=editGraphicProperties(next,'colorSizeLegendLabels',{length:visible.length,x:visible.map(i=>layout.labelX[i]),y:visible.map(i=>layout.itemY[i]),text:visible.map(i=>layout.text[i])});
+ next=editLegendBackground(next,'colorSizeLegendBackground',layout.background,effective.border);
+ next=styleContinuousText(next,'colorSizeLegendLabels',effective.labels);
+ if(effective.titleVisible!==false){
+  next=editGraphicProperties(next,'colorSizeLegendTitle',{x:layout.title.x,y:layout.title.y,text:effective.title});
+  next=styleContinuousText(next,'colorSizeLegendTitle',effective.titleStyle,{align:layout.title.align});
+ }
+ return applyLegendClipGraphics(next);
+}
+
+export function createColorSizeLegendFromConfig(program,config) {
+ if(Object.entries(program.guideConfigs.legend??{}).some(([kind,stored])=>stored.target===config.target&&legendBlockChannels(kind,stored).some(channel=>['color','size'].includes(channel))))throw new Error('Color-size content already has a legend; edit its combination explicitly.');
+ const layout=resolveColorSizeLayout(program,config),placement=resolveLegendGraphicPlacement(program);
+ let next=writeSemantic(program,config);
+ if(config.border!==false)next=next.createGraphics({id:'colorSizeLegendBackground',type:'rect',...placement});
+ next=next.createGraphics({id:'colorSizeLegendSymbols',type:'circle',length:layout.values.length,...placement})
+  .createGraphics({id:'colorSizeLegendLabels',type:'text',length:layout.values.length,...placement});
+ if(config.titleVisible!==false)next=next.createGraphics({id:'colorSizeLegendTitle',type:'text',...placement});
+ return materializeColorSizeLegend(next,config);
+}
+
+export function resolveColorSizeEdit(program,previous,args) {
+ validateOptionObject(args,[...ITEM_LEGEND_OPTIONS.filter(key=>key!=='overflow'),'symbol'],'Color-size legend edit');
+ const {count:_count,values:_values,title:_title,...layoutArgs}=args;
+ const title=args.title==='auto'?previous.field:typeof args.title==='string'?args.title:previous.title;
+ const border=args.border===undefined?previous.border:args.border===false||args.border===true?args.border:
+  {...(previous.border===false?{}:previous.border),...args.border};
+ const normalized=normalizeItemLegendConfig({...previous,...layoutArgs,title,
+  ...(args.position!==undefined&&args.position!==previous.position&&args.direction===undefined?{direction:undefined}:{}),
+  labels:{...previous.labels,...args.labels},titleStyle:mergeLegendTitleStyle(previous.titleStyle,args.titleStyle,{edit:true}),border},
+  {field:previous.field},40);
+ const config={...previous,...normalized,title,
+  inferredTitle:args.title==='auto'?true:typeof args.title==='string'?false:previous.inferredTitle,
+  titleVisible:args.title===false?false:args.title===undefined?previous.titleVisible:true,
+  symbol:normalizeColorSizeSymbol(args.symbol,previous.symbol),
+  sampling:normalizeLegendSampling(args,{previous,operation:'edit',label:'Color-size legend'})};
+ resolveColorSizeLayout(program,config);
+ return config;
+}

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

@@ -0,0 +1,37 @@
+import {prepareLegendGroup} from "./group.js";
+import {sameOrderedValues} from '../../../core/validation.js';
+
+export {validateLegendCombine} from "../../../grammar/legendCombinations.js";
+import {validateMappedSizeShapeSymbol} from "../../../grammar/legendCombinations.js";
+
+export function resolveSizeShapeCreation(program,args,layers,standard,internalChannels) {
+  const explicit=args.channels;
+  if (internalChannels===undefined && explicit!==undefined &&
+      !(explicit.length===2&&explicit.includes('shape')&&explicit.includes('size'))) {
+    throw new Error('size-shape combine requires exactly shape and size channels.');
+  }
+  const candidates=layers.filter(layer=>layer.mark?.type==='point'&&layer.encoding?.shape&&layer.encoding?.size&&
+    (args.target===undefined||layer.id===args.target));
+  if(candidates.length!==1)throw new Error('size-shape combine requires one point owner or an explicit target.');
+  const layer=candidates[0],shape=layer.encoding.shape,size=layer.encoding.size;
+  const shapeScale=program.resolvedScales[shape.scale],sizeScale=program.resolvedScales[size.scale];
+  if(shape.field!==size.field||!['nominal','ordinal'].includes(size.fieldType)||
+      shapeScale?.type!=='ordinal'||sizeScale?.type!=='ordinal'||
+      !sameOrderedValues(shapeScale.domain,sizeScale.domain)) {
+    throw new Error('size-shape combine requires one categorical field and identical ordered ordinal domains.');
+  }
+  if(sizeScale.range.some(area=>!Number.isFinite(area)||area<0))throw new Error('Combined size areas must be finite and nonnegative.');
+  validateMappedSizeShapeSymbol(args.symbol);
+  const {combine:_combine,channels:_channels,...common}=args;
+  const steps=[{op:'createCategoricalLegend',args:{...common,target:layer.id,channels:['shape','size']}}];
+  const others=internalChannels??explicit??(layer.encoding.color?['color']:[]);
+  for(const channel of others.filter(channel=>!['shape','size'].includes(channel))){
+    const color={target:layer.id,channels:[channel]};
+    for(const key of ['position','align','offset','title','labels','titleStyle','border'])if(Object.hasOwn(common,key))color[key]=common[key];
+    steps.push(...standard(program,color,layers).steps);
+  }
+  const position=common.position??'right';
+  const blockLayout=program.guideConfigs.legendGroups?.[layer.id]?.blockLayout??(['left','right'].includes(position)?'column':'row');
+  const prepared=prepareLegendGroup(program,{...common,blockLayout},layer.id,{creation:true,nativeOffset:8});
+  return {steps,finish:'always',legendGroup:{target:layer.id,config:prepared.program.guideConfigs.legendGroups[layer.id]}};
+}

package/src/actions/guides/legends/continuous/colorSymbols.js

@@ -1 +1 @@
-import{validateOptionObject as h,validatePositiveFinite as k,validateNonNegativeFinite as x,validateNonEmptyString as v}from"../../../../core/validation.js";import{intrinsicLegendConfig as L}from"../../../../materialization/legendGroups.js";import{mapScaleConsumerValues as C}from"../../../../materialization/scales/map.js";import{transformedTicks as G}from"../../../../grammar/scales/index.js";import{resolveLegendItemLayout as _}from"../../../../layout/legendItems.js";import{editGraphicProperties as u}from"../../../primitives/graphicProperties.js";import{normalizeLegendSampling as z,readLegendSampling as W,validateSamplingAgainstScale as w,resolveLegendSampleValues as B}from"../sampling.js";import{normalizeContinuousLegend as T,normalizeItemLegendLayout as P,resolveContinuousBounds as V,formatContinuousValues as E,assertLegendBoundsInsideCanvas as F,resolveLegendBackgroundFromBounds as I,editLegendBackground as N,styleContinuousText as y}from"./common.js";function q(t){if(t===void 0||t==="auto")return{type:"point",radius:7,strokeWidth:1};if(h(t,["type","radius","stroke","strokeWidth"],"Sampled color symbol"),t.type!==void 0&&t.type!=="point")throw new Error("Sampled color symbol requires type point.");const e={type:"point",radius:7,strokeWidth:1,...t};return k(e.radius,"Sampled color symbol radius"),x(e.strokeWidth,"Sampled color symbol strokeWidth"),e.stroke!==void 0&&v(e.stroke,"Sampled color symbol stroke"),e}function Q(t,e,i="create"){if(t.gradient!==void 0)throw new Error("Symbol color legends do not accept gradient dimensions.");const{representation:l,values:r,count:s,symbol:o,columns:d,direction:n,itemGap:a,layout:p,titlePosition:c,...m}=t,b=T(m,"gradient"),g=["left","right","top-left","top-right","bottom-left","bottom-right"].includes(t.position??"right"),S=P({...t,itemGap:t.itemGap??(g?18:20)},{multiColumnSide:!0}),{count:X,...f}=b;return{...f,...S,representation:"symbols",sampling:z(t,{previous:e,operation:i,label:"Sampled color legend"}),symbol:q(t.symbol)}}function O(t,e,i){e=L(t,e);const{plot:l,canvas:r}=V(t),s=w(W(e),i,"Sampled color legend");let o=s.mode==="auto"&&["log","sqrt","symlog"].includes(i.type)?G(i.type,i.domain,s.count,i.type==="log"?{base:i.base}:i.type==="symlog"?{constant:i.constant}:{}):B(e,i,"Sampled color legend");s.mode==="auto"&&i.midpoint!==void 0&&!o.includes(i.midpoint)&&(o=[...o,i.midpoint].sort((c,m)=>c-m));let d=E(o,i.domain,e.fieldType,e.labels.format);const n=e.symbol.radius+e.symbol.strokeWidth/2,a=_(l,e,d,{width:n*2,height:n*2},r,t.materializationConfigs.textMetrics);F(a.bounds,r,"Sampled color legend",e);const p=I(a.bounds,e.border,r,"Sampled color legend",e);return{...a,background:p,values:o,texts:d,extent:n,config:e}}function R(t,e,i){const l=i,{scale:r,encoding:s}=e,o=O(t,l,r),d=C(o.values,r,"color");let n=t.editSemantic({property:"guide.legend.color.scale",value:s.scale}).editSemantic({property:"guide.legend.color.title",value:l.title})._withLegendConfig("gradient",e.config);return n=u(n,"colorGradientSymbols",{length:o.values.length,x:o.symbolX.map(a=>a+o.extent),y:o.itemY,radius:l.symbol.radius,fill:d,stroke:l.symbol.stroke??d,strokeWidth:l.symbol.strokeWidth,opacity:l.blockSymbol?.opacity??1}),n=u(n,"colorGradientLabels",{length:o.values.length,x:o.labelX,y:o.itemY,text:o.texts}),n=N(n,"colorGradientBackground",o.background,l.border),n=y(n,"colorGradientLabels",l.labels),l.titleVisible===!1?n:(n=u(n,"colorGradientTitle",{x:o.title.x,y:o.title.y,text:l.title}),y(n,"colorGradientTitle",l.titleStyle,{align:o.title.align}))}export{R as materializeColorSymbols,q as normalizeColorSymbol,Q as normalizeColorSymbols,O as resolveColorSymbolsLayout};
+import{validateLegendClip as k}from"../../../../grammar/legendClip.js";import{applyLegendClipGraphics as c}from"../../../../materialization/legendClip.js";import{validateOptionObject as x,validatePositiveFinite as L,validateNonNegativeFinite as v,validateNonEmptyString as C}from"../../../../core/validation.js";import{intrinsicLegendConfig as G}from"../../../../materialization/legendGroups.js";import{mapScaleConsumerValues as _}from"../../../../materialization/scales/map.js";import{transformedTicks as w}from"../../../../grammar/scales/index.js";import{resolveLegendItemLayout as z}from"../../../../layout/legendItems.js";import{editGraphicProperties as p}from"../../../primitives/graphicProperties.js";import{normalizeLegendSampling as W,readLegendSampling as B,validateSamplingAgainstScale as T,resolveLegendSampleValues as I}from"../sampling.js";import{normalizeContinuousLegend as P,normalizeItemLegendLayout as V,resolveContinuousBounds as E,formatContinuousValues as F,assertLegendBoundsInsideCanvas as N,resolveLegendBackgroundFromBounds as q,editLegendBackground as M,styleContinuousText as b}from"./common.js";function O(t){if(t===void 0||t==="auto")return{type:"point",radius:7,strokeWidth:1};if(x(t,["type","radius","stroke","strokeWidth"],"Sampled color symbol"),t.type!==void 0&&t.type!=="point")throw new Error("Sampled color symbol requires type point.");const e={type:"point",radius:7,strokeWidth:1,...t};return L(e.radius,"Sampled color symbol radius"),v(e.strokeWidth,"Sampled color symbol strokeWidth"),e.stroke!==void 0&&C(e.stroke,"Sampled color symbol stroke"),e}function $(t,e,i="create"){if(t.gradient!==void 0)throw new Error("Symbol color legends do not accept gradient dimensions.");const{representation:l,values:r,count:s,symbol:o,columns:d,direction:n,itemGap:a,layout:u,titlePosition:y,...m}=t,g=P(m,"gradient"),S=["left","right","top-left","top-right","bottom-left","bottom-right"].includes(t.position??"right"),f=V({...t,itemGap:t.itemGap??(S?18:20)},{multiColumnSide:!0}),{count:Y,...h}=g;return{...h,...f,representation:"symbols",sampling:W(t,{previous:e,operation:i,label:"Sampled color legend"}),symbol:O(t.symbol)}}function X(t,e,i){k("gradient",e),e=G(t,e);const{plot:l,canvas:r}=E(t),s=T(B(e),i,"Sampled color legend");let o=s.mode==="auto"&&["log","pow","sqrt","symlog"].includes(i.type)?w(i.type,i.domain,s.count,i.type==="log"?{base:i.base}:i.type==="pow"?{exponent:i.exponent}:i.type==="symlog"?{constant:i.constant}:{}):I(e,i,"Sampled color legend");s.mode==="auto"&&i.midpoint!==void 0&&!o.includes(i.midpoint)&&(o=[...o,i.midpoint].sort((y,m)=>y-m));let d=F(o,i.domain,e.fieldType,e.labels.format);const n=e.symbol.radius+e.symbol.strokeWidth/2,a=z(l,e,d,{width:n*2,height:Math.min(n*2,e.clipHeight??1/0)},r,t.materializationConfigs.textMetrics);N(a.bounds,r,"Sampled color legend",e);const u=q(a.bounds,e.border,r,"Sampled color legend",e);return{...a,background:u,values:o,texts:d,extent:n,config:e}}function ee(t,e,i){const l=i,{scale:r,encoding:s}=e,o=X(t,l,r),d=_(o.values,r,"color");let n=t.editSemantic({property:"guide.legend.color.scale",value:s.scale}).editSemantic({property:"guide.legend.color.title",value:l.title})._withLegendConfig("gradient",e.config);return n=p(n,"colorGradientSymbols",{length:o.values.length,x:o.symbolX.map(a=>a+o.extent),y:o.itemY,radius:l.symbol.radius,fill:d,stroke:l.symbol.stroke??d,strokeWidth:l.symbol.strokeWidth,opacity:l.blockSymbol?.opacity??1}),n=p(n,"colorGradientLabels",{length:o.values.length,x:o.labelX,y:o.itemY,text:o.texts}),n=M(n,"colorGradientBackground",o.background,l.border),n=b(n,"colorGradientLabels",l.labels),l.titleVisible===!1?c(n):(n=p(n,"colorGradientTitle",{x:o.title.x,y:o.title.y,text:l.title}),c(b(n,"colorGradientTitle",l.titleStyle,{align:o.title.align})))}export{ee as materializeColorSymbols,O as normalizeColorSymbol,$ as normalizeColorSymbols,X as resolveColorSymbolsLayout};

package/src/actions/guides/legends/continuous/common.js

@@ -1 +1 @@
-import{LEGEND_TITLE_STYLE_KEYS as A,mergeLegendTitleStyle as W,validateLegendTitleAlignment as x}from"../../../../grammar/legendTitleStyle.js";import{PLOT_LEGEND_POSITIONS as k,isPlotLegend as p}from"../../../../layout/legend.js";import{isContinuousColorScaleType as D}from"../../../../grammar/scales/types.js";import{isPlainObject as T}from"../../../../core/immutable.js";import{resolveTextBounds as U}from"../../../../core/textMetrics.js";import{resolveLegendTitleText as R}from"../../../../layout/legendText.js";import{materializeLegendTitleLines as M}from"../../../../materialization/legendText.js";import{validateKeys as S,validateFontWeight as q,validateOptionObject as O,validateNonEmptyString as h,validateNonNegativeFinite as V,validatePositiveFinite as Y,validateGeneratedItemLimit as K}from"../../../../core/validation.js";import{formatTimeTick as X}from"../../../../grammar/ticks.js";import{formatValue as H,validateValueFormat as $}from"../../../../grammar/valueFormat.js";import{formatDistinctNumericSamples as J,sampleNumericRange as Q}from"../../../../grammar/numeric.js";import{resolveGraphicBounds as Z,canvasOverflowError as v}from"../../../../layout/canvas.js";import{isHorizontalEdgeLegend as I}from"../../../../layout/legendLane.js";import{DEFAULT_COLORS as m,DEFAULT_FONT_FAMILY as G,DEFAULT_VERTICAL_LEGEND_ITEM_GAP as L}from"../../../../theme/defaults.js";import{findLayer as ee}from"../../../../selectors/layers.js";import{isOpacityLegendLayer as te}from"../../../../materialization/legends.js";import{findCanvasGraphic as ne}from"../../../../materialization/graphicHierarchy.js";import{normalizeLegendSampling as ie}from"../sampling.js";import{editGraphicProperties as u}from"../../../primitives/graphicProperties.js";const oe=["target","channels","position","align","offset","title","count","values","gradient","symbol","labels","titleStyle","itemGap","border","direction","columns","titlePosition"],ze=Object.freeze(["target","count","values","position","layout","align","direction","columns","titlePosition","offset","itemGap","title","labels","titleStyle","border","overflow"]),re=["offset","color","fontSize","fontFamily","fontWeight","format"],le=["color","lineWidth","padding","background"],_=["right","left","top","bottom",...k],b={offset:12,color:m.text,fontSize:12,fontFamily:G,fontWeight:"normal"},z={color:m.text,fontSize:13,fontFamily:G,fontWeight:600},de=Object.freeze(b),se=Object.freeze({...z,color:m.strongText});function N(e,t){return e!==void 0&&e!==!1&&h(e,"Legend title"),{title:e===!1||e===void 0?t:e,inferredTitle:e===!1||e===void 0,titleVisible:e!==!1}}function Ne(e,t,n){const i=["right","left"].includes(e.position??"right")||p(e),r=(e.direction??(i?"vertical":"horizontal"))==="vertical"?L:n;return{...ce({...e,itemGap:e.itemGap??r}),...N(e.title,t.field),labels:w(e.labels,"createLegend.labels",de),titleStyle:C(e.titleStyle,"createLegend.titleStyle",se),border:F(e.border)}}const ae={color:m.border,lineWidth:1,padding:12,background:"transparent"},y=Y,g=V;function w(e,t,n){if(e===void 0)return{...n};if(!T(e))throw new TypeError(`${t} must be a plain object.`);S(e,re,t);const i={...n,...e};Object.hasOwn(i,"offset")&&g(i.offset,`${t} offset`),y(i.fontSize,`${t} fontSize`);for(const o of["color","fontFamily"])h(i[o],`${t} ${o}`);return q(i.fontWeight,`${t} fontWeight`,"finite number"),Object.hasOwn(i,"format")&&(i.format=$(i.format,`${t} format`)),i}function C(e,t,n,i=!1){e!==void 0&&O(e,A,t);const o=W(n,e,{edit:i}),{align:r,...d}=o;return{...w(d,t,{}),...r===void 0?{}:{align:r}}}function F(e){if(e===void 0||e===!1)return!1;if(e!==!0&&!T(e))throw new TypeError("createLegend.border must be a boolean or plain object.");e!==!0&&S(e,le,"createLegend.border");const t={...ae,...e===!0?{}:e};for(const n of["color","background"])h(t[n],`Legend border ${n}`);return g(t.lineWidth,"Legend border lineWidth"),g(t.padding,"Legend border padding"),t}function Ce(e,t){O(e,oe,"createLegend");const n=e.position??"right";if(!_.includes(n))throw new Error(`Unsupported legend position "${n}".`);const i=e.align??"center";if(!["left","center","right"].includes(i))throw new Error(`Unsupported legend alignment "${i}".`);if(["left","right"].includes(n)&&i!=="center")throw new Error("Side continuous legends require center alignment.");if(t==="gradient"&&Object.hasOwn(e,"values"))throw new Error("Gradient legends do not support exact sample values.");const o=t==="opacity"?ie(e,{operation:"create",label:"Opacity legend"}):void 0,r=t==="gradient"?e.count??5:void 0;if(t==="gradient"){if(!Number.isInteger(r)||r<2)throw new RangeError("Continuous legend count must be an integer of at least 2.");K(r,"Continuous legend count")}const d=e.offset??(p({position:n})?8:30);g(d,"Legend offset");const l=e.titlePosition??"top";if(x(e.titleStyle,l),!["top","left"].includes(l))throw new Error(`Unsupported legend titlePosition "${l}".`);if(l==="left"&&(!["top","bottom"].includes(n)||t!=="opacity"))throw new Error("Only horizontal opacity legends support left titlePosition.");const a=e.itemGap??(t==="opacity"&&(["right","left"].includes(n)||p({position:n}))?L:l==="left"?20:28);if(y(a,"Legend itemGap"),t==="gradient"){for(const s of["symbol","columns","direction","itemGap"])if(Object.hasOwn(e,s))throw new Error(`Gradient legend does not accept ${s}.`)}else for(const s of["columns","direction","gradient"])if(Object.hasOwn(e,s))throw new Error(`Opacity legend does not accept ${s}.`);return{target:e.target,position:n,align:i,offset:d,...t==="gradient"?{count:r}:{sampling:o},...N(e.title),labels:w(e.labels,"createLegend.labels",l==="left"?{...b,offset:8}:b),titleStyle:C(e.titleStyle,"createLegend.titleStyle",z),itemGap:a,titlePosition:l,border:F(e.border)}}function P(e,t,n){const i=e.semanticSpec.layers.filter(n);if(t===void 0)return i.length===1?i[0]:void 0;const o=ee(e,t);return i.includes(o)?o:void 0}function Fe(e,t,n){const i=P(e,t,n==="opacity"?te:o=>o.mark?.type==="point"&&o.encoding?.[n]?.scale!==void 0);if(i===void 0)throw new Error(t===void 0?`${n} legend requires one eligible ${n==="opacity"?"point, line or bar":"point"} mark.`:`Unknown ${n} legend target "${t}".`);return i}function Pe(e,t,n="color"){const i=P(e,t,o=>(n==="stroke"?["point","line","area","bar","rect","arc","rule","tick"]:["point","bar","rect","text"]).includes(o.mark?.type)&&o.encoding?.[n]?.scale!==void 0);if(i===void 0)throw new Error(t===void 0?n==="color"?"color legend requires one eligible point, bar, or rect mark.":"stroke legend requires one eligible mark.":`Unknown ${n} legend target "${t}".`);return i}function Be(e,t,n){const i=e.resolvedScales[t];if(n==="sequential"?!D(i?.type):i?.type!==n)throw new Error(`Legend requires resolved ${n} scale "${t}".`);return i}function je(e,t="Continuous legend layout requires Canvas bounds."){const n=Z(e),i=ne(e);if(n===void 0||![n.x,n.y,n.width,n.height].every(Number.isFinite)||i?.type!=="canvas"||!Number.isFinite(i.properties.width)||!Number.isFinite(i.properties.height))throw new Error(t);return{plot:n,canvas:i.properties}}function Ae(e,t){return Q(e[0],e[1],t,"Continuous legend domain")}function We(e,t,n,i="auto"){const o=$(i,"Legend label format");return o==="auto"?n==="temporal"?e.map(r=>X(r,t)):J(e):e.map(r=>H(r,{format:o,valueType:n==="temporal"?"temporal":"quantitative",label:"Legend label format"}))}function B(e,t,n,{align:i="left"}={}){const o=u(e,t,{fill:n.color,fontSize:n.fontSize,fontFamily:n.fontFamily,fontWeight:n.fontWeight,textAlign:i,textBaseline:"middle"});return t.endsWith("Title")?M(o,t,o.graphicSpec.objects[t].properties.text,n):o}function ke(e,t,n,i,{hardBreaks:o=!1}={}){return U({x:e.x,y:e.y,text:String(t),...n,...o?{lines:R(t,n,i).lines}:{},textAlign:e.align??"left",textBaseline:"middle"},i)}function De(e,t,n,i){if(!(i?.groupIntrinsic||I(i)||["left","right"].includes(i?.position))&&e.some(o=>o.left<0||o.right>t.width||o.top<0||o.bottom>t.height))throw v(`${n} requires more Canvas margin space.`,e,t)}function Ue(e,t,n,i,o){if(t===!1)return;const r=t.lineWidth/2;let d=1/0,l=1/0,a=-1/0,s=-1/0;for(const c of e)d=Math.min(d,c.left),l=Math.min(l,c.top),a=Math.max(a,c.right),s=Math.max(s,c.bottom);if(d-=t.padding,l-=t.padding,a+=t.padding,s+=t.padding,!o?.groupIntrinsic&&!I(o)&&!["left","right"].includes(o?.position)&&(d-r<0||l-r<0||a+r>n.width||s+r>n.height))throw v(`${i} background requires more Canvas margin space.`,[{left:d-r,right:a+r,top:l-r,bottom:s+r}],n);return{x:d,y:l,width:a-d,height:s-l}}function fe(e,t,n,i){return n===void 0?e:u(e,t,{...n,fill:i.background,stroke:i.color,strokeWidth:i.lineWidth})}function ce(e,{multiColumnSide:t=!1}={}){const n=e.position??"right";if(!_.includes(n))throw new Error(`Unsupported legend position "${n}".`);const i=["left","right"].includes(n)||p({position:n}),o=e.layout===void 0?"edge":e.layout;if(o!=="edge")throw new Error('This legend requires layout "edge".');const r=e.align??"center";if(!["left","center","right"].includes(r))throw new Error(`Unsupported legend alignment "${r}".`);const d=e.direction??(i?"vertical":"horizontal");if(!["horizontal","vertical"].includes(d))throw new Error(`Unsupported legend direction "${d}".`);const l=e.columns;if(l!==void 0&&(!Number.isInteger(l)||l<1))throw new RangeError("Legend columns must be a positive integer.");const a=e.titlePosition??"top";if(x(e.titleStyle,a),!["top","left"].includes(a))throw new Error(`Unsupported legend titlePosition "${a}".`);if(i&&(r!=="center"||a!=="top"||!t&&(d!=="vertical"||l!==void 0&&l!==1)))throw new Error("Side item legends require vertical direction, center alignment, top title and one column.");const s=e.offset??(p({position:n})?8:30),c=e.itemGap??(d==="vertical"?L:28);return g(s,"Legend offset"),y(c,"Legend itemGap"),{position:n,layout:o,align:r,direction:d,columns:l,titlePosition:a,offset:s,itemGap:c}}function Re(e,t,n,i,{symbols:o,optional:r={},text:d=i.labels,labels:l=i.config.labels,titleStyle:a=i.config.titleStyle}){const s=`${t}Legend`,c=Object.values(o).find(Array.isArray)?.length??d.length;let f=e.editSemantic({property:`guide.legend.${t}.scale`,value:n.scale}).editSemantic({property:`guide.legend.${t}.title`,value:n.title})._withLegendConfig(t,n);f=u(f,`${s}Symbols`,{length:c,...o}),f=u(f,`${s}Labels`,{length:d.length,x:i.labelX,y:i.itemY,text:d}),f=fe(f,`${s}Background`,i.background,n.border),f=u(f,`${s}Symbols`,Object.fromEntries(Object.entries(r).filter(([,j])=>j!==void 0))),f=B(f,`${s}Labels`,l);const E=i.config;return E.titleVisible===!1?f:(f=u(f,`${s}Title`,{x:i.title.x,y:i.title.y,text:E.title}),B(f,`${s}Title`,a,{align:i.title.align}))}function Me(e,t,n,i,o,r){const d=`${t}Legend`;let l=e.editSemantic({property:`guide.legend.${t}.scale`,value:n.scale}).editSemantic({property:`guide.legend.${t}.title`,value:n.title})._withLegendConfig(t,n);return n.border!==!1&&(l=l.createGraphics({id:`${d}Background`,type:"rect",...r})),l=l.createGraphics({id:`${d}Symbols`,type:o,length:i,...r}).createGraphics({id:`${d}Labels`,type:"text",length:i,...r}),n.titleVisible!==!1&&(l=l.createGraphics({id:`${d}Title`,type:"text",...r})),l}export{de as ITEM_LEGEND_LABELS,ze as ITEM_LEGEND_OPTIONS,se as ITEM_LEGEND_TITLE_STYLE,De as assertLegendBoundsInsideCanvas,Me as createItemLegendGraphics,u as editGraphicProperties,fe as editLegendBackground,We as formatContinuousValues,Re as materializeItemLegend,Ce as normalizeContinuousLegend,N as normalizeInitialLegendTitle,Ne as normalizeItemLegendConfig,ce as normalizeItemLegendLayout,F as normalizeLegendBorder,w as normalizeLegendTextOptions,C as normalizeLegendTitleOptions,Be as requireResolvedLegendScale,je as resolveContinuousBounds,Pe as resolveContinuousColorLayer,Fe as resolveContinuousLegendLayer,Ue as resolveLegendBackgroundFromBounds,ke as resolveLegendTextBounds,Ae as sampleContinuousValues,P as selectLegendLayer,B as styleContinuousText,g as validateNonNegative,y as validatePositive};
+import{normalizeLegendClipHeight as O}from"../../../../grammar/legendClip.js";import{applyLegendClipGraphics as $}from"../../../../materialization/legendClip.js";import{normalizeGradientDirection as H}from"../../../../grammar/legendGradient.js";import{normalizeLegendBorderDash as R}from"../../../../grammar/legendBorder.js";import{materializeLegendBorder as M}from"../../../../materialization/legendBorder.js";import{LEGEND_TITLE_STYLE_KEYS as q,mergeLegendTitleStyle as V,validateLegendTitleAlignment as v}from"../../../../grammar/legendTitleStyle.js";import{PLOT_LEGEND_POSITIONS as Y,isPlotLegend as m}from"../../../../layout/legend.js";import{isContinuousColorScaleType as K}from"../../../../grammar/scales/types.js";import{isPlainObject as I}from"../../../../core/immutable.js";import{resolveTextBounds as X}from"../../../../core/textMetrics.js";import{resolveLegendTitleText as J}from"../../../../layout/legendText.js";import{materializeLegendTitleLines as Q}from"../../../../materialization/legendText.js";import{validateKeys as G,validateFontWeight as Z,validateOptionObject as z,validateNonEmptyString as y,validateNonNegativeFinite as ee,validatePositiveFinite as te,validateGeneratedItemLimit as ne}from"../../../../core/validation.js";import{formatTimeTick as ie}from"../../../../grammar/ticks.js";import{formatValue as oe,validateValueFormat as C}from"../../../../grammar/valueFormat.js";import{formatDistinctNumericSamples as re,sampleNumericRange as le}from"../../../../grammar/numeric.js";import{resolveGraphicBounds as de,canvasOverflowError as _}from"../../../../layout/canvas.js";import{isHorizontalEdgeLegend as N}from"../../../../layout/legendLane.js";import{DEFAULT_COLORS as h,DEFAULT_FONT_FAMILY as F,DEFAULT_VERTICAL_LEGEND_ITEM_GAP as w}from"../../../../theme/defaults.js";import{findLayer as se}from"../../../../selectors/layers.js";import{isOpacityLegendLayer as ae}from"../../../../materialization/legends.js";import{findCanvasGraphic as ce}from"../../../../materialization/graphicHierarchy.js";import{normalizeLegendSampling as fe}from"../sampling.js";import{editGraphicProperties as p}from"../../../primitives/graphicProperties.js";const pe=["clipHeight","target","channels","position","align","offset","title","count","values","gradient","symbol","labels","titleStyle","itemGap","border","direction","columns","titlePosition"],Re=Object.freeze(["clipHeight","target","count","values","position","layout","align","direction","columns","titlePosition","offset","itemGap","title","labels","titleStyle","border","overflow"]),ue=["offset","color","fontSize","fontFamily","fontWeight","format"],me=["color","lineWidth","padding","background","strokeDash"],P=["right","left","top","bottom",...Y],E={offset:12,color:h.text,fontSize:12,fontFamily:F,fontWeight:"normal"},D={color:h.text,fontSize:13,fontFamily:F,fontWeight:600},ge=Object.freeze(E),he=Object.freeze({...D,color:h.strongText});function B(e,t){return e!==void 0&&e!==!1&&y(e,"Legend title"),{title:e===!1||e===void 0?t:e,inferredTitle:e===!1||e===void 0,titleVisible:e!==!1}}function Me(e,t,n){const i=["right","left"].includes(e.position??"right")||m(e),r=(e.direction??(i?"vertical":"horizontal"))==="vertical"?w:n;return{...e.clipHeight===void 0?{}:{clipHeight:O(e.clipHeight)},...ye({...e,itemGap:e.itemGap??r}),...B(e.title,t.field),labels:T(e.labels,"createLegend.labels",ge),titleStyle:A(e.titleStyle,"createLegend.titleStyle",he),border:j(e.border)}}const Le={color:h.border,lineWidth:1,padding:12,background:"transparent"},x=te,g=ee;function T(e,t,n){if(e===void 0)return{...n};if(!I(e))throw new TypeError(`${t} must be a plain object.`);G(e,ue,t);const i={...n,...e};Object.hasOwn(i,"offset")&&g(i.offset,`${t} offset`),x(i.fontSize,`${t} fontSize`);for(const o of["color","fontFamily"])y(i[o],`${t} ${o}`);return Z(i.fontWeight,`${t} fontWeight`,"finite number"),Object.hasOwn(i,"format")&&(i.format=C(i.format,`${t} format`)),i}function A(e,t,n,i=!1){e!==void 0&&z(e,q,t);const o=V(n,e,{edit:i}),{align:r,...d}=o;return{...T(d,t,{}),...r===void 0?{}:{align:r}}}function j(e){if(e===void 0||e===!1)return!1;if(e!==!0&&!I(e))throw new TypeError("createLegend.border must be a boolean or plain object.");e!==!0&&G(e,me,"createLegend.border");const t={...Le,...e===!0?{}:e};for(const i of["color","background"])y(t[i],`Legend border ${i}`);g(t.lineWidth,"Legend border lineWidth"),g(t.padding,"Legend border padding");const n=R(t.strokeDash);return{...t,...n===void 0?{}:{strokeDash:n}}}function qe(e,t){z(e,pe,"createLegend");const n=e.position??"right";if(!P.includes(n))throw new Error(`Unsupported legend position "${n}".`);const i=e.align??"center";if(!["left","center","right"].includes(i))throw new Error(`Unsupported legend alignment "${i}".`);if(["left","right"].includes(n)&&i!=="center")throw new Error("Side continuous legends require center alignment.");if(t==="gradient"&&Object.hasOwn(e,"values"))throw new Error("Gradient legends do not support exact sample values.");const o=t==="opacity"?fe(e,{operation:"create",label:"Opacity legend"}):void 0,r=t==="gradient"?e.count??5:void 0;if(t==="gradient"){if(!Number.isInteger(r)||r<2)throw new RangeError("Continuous legend count must be an integer of at least 2.");ne(r,"Continuous legend count")}const d=e.offset??(m({position:n})?8:30);g(d,"Legend offset");const l=e.titlePosition??"top";if(v(e.titleStyle,l),!(t==="gradient"?["top","left","bottom"]:["top","left"]).includes(l))throw new Error(`Unsupported legend titlePosition "${l}".`);if(l==="left"&&(!["top","bottom"].includes(n)||t!=="opacity"))throw new Error("Only horizontal opacity legends support left titlePosition.");const a=e.itemGap??(t==="opacity"&&(["right","left"].includes(n)||m({position:n}))?w:l==="left"?20:28);if(x(a,"Legend itemGap"),t==="gradient"){for(const s of["symbol","columns","itemGap"])if(Object.hasOwn(e,s))throw new Error(`Gradient legend does not accept ${s}.`)}else for(const s of["columns","direction","gradient"])if(Object.hasOwn(e,s))throw new Error(`Opacity legend does not accept ${s}.`);return{...e.clipHeight===void 0?{}:{clipHeight:O(e.clipHeight)},target:e.target,position:n,align:i,offset:d,...t==="gradient"?{count:r,...e.direction===void 0?{}:{gradientDirection:H(e.direction)}}:{sampling:o},...B(e.title),labels:T(e.labels,"createLegend.labels",l==="left"?{...E,offset:8}:E),titleStyle:A(e.titleStyle,"createLegend.titleStyle",D),itemGap:a,titlePosition:l,border:j(e.border)}}function U(e,t,n){const i=e.semanticSpec.layers.filter(n);if(t===void 0)return i.length===1?i[0]:void 0;const o=se(e,t);return i.includes(o)?o:void 0}function Ve(e,t,n){const i=U(e,t,n==="opacity"?ae:o=>o.mark?.type==="point"&&o.encoding?.[n]?.scale!==void 0);if(i===void 0)throw new Error(t===void 0?`${n} legend requires one eligible ${n==="opacity"?"point, line or bar":"point"} mark.`:`Unknown ${n} legend target "${t}".`);return i}function Ye(e,t,n="color"){const i=U(e,t,o=>(n==="stroke"?["point","line","area","bar","rect","arc","rule","tick"]:["point","bar","rect","text"]).includes(o.mark?.type)&&o.encoding?.[n]?.scale!==void 0);if(i===void 0)throw new Error(t===void 0?n==="color"?"color legend requires one eligible point, bar, or rect mark.":"stroke legend requires one eligible mark.":`Unknown ${n} legend target "${t}".`);return i}function Ke(e,t,n){const i=e.resolvedScales[t];if(n==="sequential"?!K(i?.type):i?.type!==n)throw new Error(`Legend requires resolved ${n} scale "${t}".`);return i}function Xe(e,t="Continuous legend layout requires Canvas bounds."){const n=de(e),i=ce(e);if(n===void 0||![n.x,n.y,n.width,n.height].every(Number.isFinite)||i?.type!=="canvas"||!Number.isFinite(i.properties.width)||!Number.isFinite(i.properties.height))throw new Error(t);return{plot:n,canvas:i.properties}}function Je(e,t){return le(e[0],e[1],t,"Continuous legend domain")}function Qe(e,t,n,i="auto"){const o=C(i,"Legend label format");return o==="auto"?n==="temporal"?e.map(r=>ie(r,t)):re(e):e.map(r=>oe(r,{format:o,valueType:n==="temporal"?"temporal":"quantitative",label:"Legend label format"}))}function k(e,t,n,{align:i="left"}={}){const o=p(e,t,{fill:n.color,fontSize:n.fontSize,fontFamily:n.fontFamily,fontWeight:n.fontWeight,textAlign:i,textBaseline:"middle"});return t.endsWith("Title")?Q(o,t,o.graphicSpec.objects[t].properties.text,n):o}function Ze(e,t,n,i,{hardBreaks:o=!1}={}){return X({x:e.x,y:e.y,text:String(t),...n,...o?{lines:J(t,n,i).lines}:{},textAlign:e.align??"left",textBaseline:"middle"},i)}function et(e,t,n,i){if(!(i?.groupIntrinsic||N(i)||["left","right"].includes(i?.position))&&e.some(o=>o.left<0||o.right>t.width||o.top<0||o.bottom>t.height))throw _(`${n} requires more Canvas margin space.`,e,t)}function tt(e,t,n,i,o){if(t===!1)return;const r=t.lineWidth/2;let d=1/0,l=1/0,a=-1/0,s=-1/0;for(const f of e)d=Math.min(d,f.left),l=Math.min(l,f.top),a=Math.max(a,f.right),s=Math.max(s,f.bottom);if(d-=t.padding,l-=t.padding,a+=t.padding,s+=t.padding,!o?.groupIntrinsic&&!N(o)&&!["left","right"].includes(o?.position)&&(d-r<0||l-r<0||a+r>n.width||s+r>n.height))throw _(`${i} background requires more Canvas margin space.`,[{left:d-r,right:a+r,top:l-r,bottom:s+r}],n);return{x:d,y:l,width:a-d,height:s-l}}function be(e,t,n,i){return n===void 0?e:M(e,t,n,i)}function ye(e,{multiColumnSide:t=!1}={}){const n=e.position??"right";if(!P.includes(n))throw new Error(`Unsupported legend position "${n}".`);const i=["left","right"].includes(n)||m({position:n}),o=e.layout===void 0?"edge":e.layout;if(o!=="edge")throw new Error('This legend requires layout "edge".');const r=e.align??"center";if(!["left","center","right"].includes(r))throw new Error(`Unsupported legend alignment "${r}".`);const d=e.direction??(i?"vertical":"horizontal");if(!["horizontal","vertical"].includes(d))throw new Error(`Unsupported legend direction "${d}".`);const l=e.columns;if(l!==void 0&&(!Number.isInteger(l)||l<1))throw new RangeError("Legend columns must be a positive integer.");const a=e.titlePosition??"top";if(v(e.titleStyle,a),!["top","left"].includes(a))throw new Error(`Unsupported legend titlePosition "${a}".`);if(i&&(r!=="center"||a!=="top"||!t&&(d!=="vertical"||l!==void 0&&l!==1)))throw new Error("Side item legends require vertical direction, center alignment, top title and one column.");const s=e.offset??(m({position:n})?8:30),f=e.itemGap??(d==="vertical"?w:28);return g(s,"Legend offset"),x(f,"Legend itemGap"),{position:n,layout:o,align:r,direction:d,columns:l,titlePosition:a,offset:s,itemGap:f}}function nt(e,t,n,i,{symbols:o,optional:r={},text:d=i.labels,labels:l=i.config.labels,titleStyle:a=i.config.titleStyle}){const s=`${t}Legend`,f=Object.values(o).find(Array.isArray)?.length??d.length;let c=e.editSemantic({property:`guide.legend.${t}.scale`,value:n.scale}).editSemantic({property:`guide.legend.${t}.title`,value:n.title})._withLegendConfig(t,n);c=p(c,`${s}Symbols`,{length:f,...o});const L=i.labelItemIndices,b=u=>L===void 0||!Array.isArray(u)?u:L.map(W=>u[W]);c=p(c,`${s}Labels`,{length:L?.length??d.length,x:b(i.labelX),y:b(i.itemY),text:b(d)}),c=be(c,`${s}Background`,i.background,n.border),c=p(c,`${s}Symbols`,Object.fromEntries(Object.entries(r).filter(([,u])=>u!==void 0))),c=k(c,`${s}Labels`,l);const S=i.config;return S.titleVisible===!1?$(c):(c=p(c,`${s}Title`,{x:i.title.x,y:i.title.y,text:S.title}),$(k(c,`${s}Title`,a,{align:i.title.align})))}function it(e,t,n,i,o,r){const d=`${t}Legend`;let l=e.editSemantic({property:`guide.legend.${t}.scale`,value:n.scale}).editSemantic({property:`guide.legend.${t}.title`,value:n.title})._withLegendConfig(t,n);return n.border!==!1&&(l=l.createGraphics({id:`${d}Background`,type:"rect",...r})),l=l.createGraphics({id:`${d}Symbols`,type:o,length:i,...r}).createGraphics({id:`${d}Labels`,type:"text",length:i,...r}),n.titleVisible!==!1&&(l=l.createGraphics({id:`${d}Title`,type:"text",...r})),l}export{ge as ITEM_LEGEND_LABELS,Re as ITEM_LEGEND_OPTIONS,he as ITEM_LEGEND_TITLE_STYLE,et as assertLegendBoundsInsideCanvas,it as createItemLegendGraphics,p as editGraphicProperties,be as editLegendBackground,Qe as formatContinuousValues,nt as materializeItemLegend,qe as normalizeContinuousLegend,B as normalizeInitialLegendTitle,Me as normalizeItemLegendConfig,ye as normalizeItemLegendLayout,j as normalizeLegendBorder,T as normalizeLegendTextOptions,A as normalizeLegendTitleOptions,Ke as requireResolvedLegendScale,Xe as resolveContinuousBounds,Ye as resolveContinuousColorLayer,Ve as resolveContinuousLegendLayer,tt as resolveLegendBackgroundFromBounds,Ze as resolveLegendTextBounds,Je as sampleContinuousValues,U as selectLegendLayer,k as styleContinuousText,g as validateNonNegative,x as validatePositive};

package/src/actions/guides/legends/continuous/gradient.js

@@ -1,3 +1,5 @@
+import{validateLegendClip}from"../../../../grammar/legendClip.js";
+import{hasLegendClipGraphics}from"../../../../materialization/legendClip.js";
 import { normalizeColorSymbols, resolveColorSymbolsLayout, materializeColorSymbols } from "./colorSymbols.js";
 import { alignLegendTitle, resolveLegendTitleText } from "../../../../layout/legendText.js";
 import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
@@ -29,10 +31,14 @@ import { resolveEffectiveLegendBlockConfig } from "../blocks.js";
 export const DEFAULT_GRADIENT_SIZE = DEFAULT_LEGEND_GRADIENT;
 
 export function resolveGradientLayout(program, config, scale, label = "Gradient legend", stripStrokeWidth = 0) {
+  validateLegendClip("gradient",config);
   if (config.representation === "symbols") return resolveColorSymbolsLayout(program, config, scale);
   config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
-  const vertical = ["right", "left"].includes(config.position);
+  const vertical = config.gradientDirection === undefined
+    ? ["right", "left"].includes(config.position) : config.gradientDirection === "vertical";
+  const stripWidth = vertical ? config.gradient.thickness : config.gradient.length;
+  const stripHeight = vertical ? config.gradient.length : config.gradient.thickness;
   const length = config.gradient.length;
   const thickness = config.gradient.thickness;
   const titleText = config.titleVisible === false ? { height: 0, extraHeight: 0 }
@@ -44,29 +50,31 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
     x = plot.x + plot.width + config.offset;
     y = plot.y + 46 + titleGap - 12 + titleText.extraHeight / 2;
   } else if (config.position === "left") {
-    x = plot.x - config.offset - thickness;
+    x = plot.x - config.offset - stripWidth;
     y = plot.y + 46 + titleGap - 12 + titleText.extraHeight / 2;
   } else {
     x = config.align === "left" ? plot.x
-      : config.align === "right" ? plot.x + plot.width - length
-        : plot.x + (plot.width - length) / 2;
+      : config.align === "right" ? plot.x + plot.width - stripWidth
+        : plot.x + (plot.width - stripWidth) / 2;
     y = config.position === "top"
-      ? plot.y - config.offset - thickness - config.labels.offset -
+      ? plot.y - config.offset - stripHeight - config.labels.offset -
         config.labels.fontSize
       : plot.y + plot.height + config.offset +
         (config.titleVisible === false ? 0 : titleText.height + titleGap);
   }
   let title = vertical
-    ? { x, y: plot.y + 20, align: "left" }
+    ? { x, y: ["right", "left"].includes(config.position) ? plot.y + 20
+      : y - titleGap - titleText.height / 2, align: "left" }
     : {
         x: x + length / 2,
         y: y - titleGap - titleText.height / 2,
         align: "center"
       };
-  const transformed = ["log", "sqrt", "symlog"].includes(scale.type);
+  const transformed = ["log", "pow", "sqrt", "symlog"].includes(scale.type);
   const values = transformed
     ? transformedTicks(scale.type, scale.domain, config.count,
         scale.type === "log" ? {base: scale.base}
+          : scale.type === "pow" ? {exponent: scale.exponent}
           : scale.type === "symlog" ? {constant: scale.constant} : {})
     : [...sampleContinuousValues(scale.domain, config.count)];
   if (scale.midpoint !== undefined && !values.includes(scale.midpoint)) {
@@ -86,11 +94,10 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
   const labelOffset = config.labels.offset;
   const labels = vertical
     ? fractions.map(fraction => ({
-        x: config.position === "right"
-          ? x + thickness + labelOffset
-          : x - labelOffset,
+        x: config.position === "left"
+          ? x - labelOffset : x + thickness + labelOffset,
         y: y + length * (1 - fraction),
-        align: config.position === "right" ? "left" : "right"
+        align: config.position === "left" ? "right" : "left"
       }))
     : fractions.map(fraction => ({
         x: x + length * fraction,
@@ -99,9 +106,9 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
       }));
   const ticks = vertical
     ? labels.map(label => ({
-        x1: config.position === "right" ? x + thickness : x,
+        x1: config.position === "left" ? x : x + thickness,
         y1: label.y,
-        x2: config.position === "right" ? x + thickness + 6 : x - 6,
+        x2: config.position === "left" ? x - 6 : x + thickness + 6,
         y2: label.y
       }))
     : labels.map(label => ({
@@ -125,6 +132,12 @@ export function resolveGradientLayout(program, config, scale, label = "Gradient
   const labelBounds = labels.map((label, index) =>
     resolveLegendTextBounds(label, texts[index], config.labels, program.materializationConfigs.textMetrics)
   );
+  if (config.titlePosition === "bottom" && config.titleVisible !== false) {
+    const bottom = Math.max(stripBounds.bottom + stripStrokeWidth / 2,
+      ...tickBounds.map(bounds => bounds.bottom), ...labelBounds.map(bounds => bounds.bottom));
+    title = { x: vertical ? x : x + length / 2,
+      y: bottom + titleGap + titleText.height / 2, align: vertical ? "left" : "center" };
+  }
   if (config.titleVisible !== false) title = alignLegendTitle(title, config.title, config.titleStyle,
     [{ left: stripBounds.left - stripStrokeWidth / 2, right: stripBounds.right + stripStrokeWidth / 2,
       top: stripBounds.top - stripStrokeWidth / 2, bottom: stripBounds.bottom + stripStrokeWidth / 2 },
@@ -244,6 +257,7 @@ export const rematerializeGradientLegend = /* @__PURE__ */ closedAction(
     description: "Rematerialize a continuous color gradient legend."
   }, [],
   function (args = {}) {
+    if(hasLegendClipGraphics(this))return this.rematerializeLegend();
     const stored = this.guideConfigs.legend?.gradient;
     if (stored === undefined) {
       throw new Error("Gradient legend requires stored configuration.");

package/src/actions/guides/legends/continuous/opacity.js

@@ -1,3 +1,5 @@
+import{validateLegendClip}from"../../../../grammar/legendClip.js";
+import{hasLegendClipGraphics,applyLegendClipGraphics}from"../../../../materialization/legendClip.js";
 import { intrinsicLegendConfig } from "../../../../materialization/legendGroups.js";
 import { alignLegendTitle, resolveLegendTitleText } from "../../../../layout/legendText.js";
 import { editGraphicProperties } from "../../../primitives/graphicProperties.js";
@@ -88,6 +90,7 @@ function resolveOpacityConfig(program, config) {
 }
 
 function resolveOpacityLayout(program, config, scale) {
+  validateLegendClip("opacity",config);
   config = intrinsicLegendConfig(program, config);
   const { plot, canvas } = resolveContinuousBounds(program);
   const vertical = ["right", "left"].includes(config.position);
@@ -99,6 +102,7 @@ function resolveOpacityLayout(program, config, scale) {
     config.labels.format
   );
   const symbolExtent = config.symbol.radius + (config.symbol.strokeWidth ?? 0) / 2;
+  const visibleExtent=Math.min(symbolExtent,config.clipHeight===undefined?Infinity:config.clipHeight/2);
   const titleText = config.titleVisible === false ? { width: 0, height: 0 }
     : resolveLegendTitleText(config.title, config.titleStyle, program.materializationConfigs.textMetrics);
   const labelWidths = texts.map(text => measureTextWidth(text, config.labels, program.materializationConfigs.textMetrics));
@@ -109,7 +113,7 @@ function resolveOpacityLayout(program, config, scale) {
     const baseX = config.position === "right"
       ? plot.x + plot.width + config.offset
       : plot.x - config.offset;
-    const itemHeight = Math.max(symbolExtent * 2, legendLabelLineHeight(config.labels.fontSize));
+    const itemHeight = Math.max(visibleExtent * 2, legendLabelLineHeight(config.labels.fontSize));
     const pitch = Math.max(config.itemGap, itemHeight);
     const firstY = Math.max(plot.y + 46, config.titleVisible === false ? plot.y + 46
       : plot.y + 20 + titleText.height / 2 + 12 + itemHeight / 2);
@@ -142,7 +146,7 @@ function resolveOpacityLayout(program, config, scale) {
       : config.align === "right" ? plot.x + plot.width - width
         : plot.x + (plot.width - width) / 2;
     const height = Math.max(
-      symbolExtent * 2,
+      visibleExtent * 2,
       config.labels.fontSize,
       titleText.height
     );
@@ -171,9 +175,9 @@ function resolveOpacityLayout(program, config, scale) {
     const labelHalf = config.labels.fontSize / 2;
     const y = config.position === "top"
       ? plot.y - config.offset - config.labels.fontSize -
-        config.labels.offset - symbolExtent
+        config.labels.offset - visibleExtent
       : plot.y + plot.height + config.offset +
-        (config.titleVisible === false ? 0 : titleText.height + 12) + symbolExtent;
+        (config.titleVisible === false ? 0 : titleText.height + 12) + visibleExtent;
     const samplePitch = values.length === 1 ? 0 : width / (values.length - 1);
     symbols = values.map((_, index) => ({
       x: startX + index * samplePitch,
@@ -181,12 +185,12 @@ function resolveOpacityLayout(program, config, scale) {
     }));
     labels = symbols.map(symbol => ({
       x: symbol.x,
-      y: symbol.y + symbolExtent + config.labels.offset + labelHalf,
+      y: symbol.y + visibleExtent + config.labels.offset + labelHalf,
       align: "center"
     }));
     title = {
       x: startX + width / 2,
-      y: y - symbolExtent - 12 - titleHalf,
+      y: y - visibleExtent - 12 - titleHalf,
       align: "center"
     };
   }
@@ -196,8 +200,8 @@ function resolveOpacityLayout(program, config, scale) {
   const symbolBounds = symbols.map(symbol => ({
     left: symbol.x - symbolExtent,
     right: symbol.x + symbolExtent,
-    top: symbol.y - symbolExtent,
-    bottom: symbol.y + symbolExtent
+    top: symbol.y - visibleExtent,
+    bottom: symbol.y + visibleExtent
   }));
   if (config.titleVisible !== false) title = alignLegendTitle(title, config.title, config.titleStyle,
     [...labelBounds, ...symbolBounds], program.materializationConfigs.textMetrics);
@@ -227,6 +231,7 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ closedAction(
     description: "Rematerialize a field-opacity sample legend."
   }, [],
   function (args = {}) {
+    if(hasLegendClipGraphics(this))return this.rematerializeLegend();
     const stored = this.guideConfigs.legend?.opacity;
     if (stored === undefined) {
       throw new Error("Opacity legend requires stored configuration.");
@@ -286,18 +291,18 @@ export const rematerializeOpacityLegend = /* @__PURE__ */ closedAction(
       config.labels,
       { align: layout.labels[0].align }
     );
-    if (config.titleVisible === false) return next;
+    if (config.titleVisible === false) return applyLegendClipGraphics(next);
     next = editGraphicProperties(next, "opacityLegendTitle", {
       x: layout.title.x,
       y: layout.title.y,
       text: config.title
     });
-    return styleContinuousText(
+    return applyLegendClipGraphics(styleContinuousText(
       next,
       "opacityLegendTitle",
       config.titleStyle,
       { align: layout.title.align }
-    );
+    ));
   }
 );