feat(title): auto layout

antvis · Jul 20, 2023 · 03616a5 · 03616a5
1 parent 682885b
commit 03616a5
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 0 deletions.
diff --git a/__tests__/integration/snapshots/static/alphabetIntervalTitleAuto.png b/__tests__/integration/snapshots/static/alphabetIntervalTitleAuto.png
diff --git a/__tests__/plots/static/alphabet-interval-title-auto.ts b/__tests__/plots/static/alphabet-interval-title-auto.ts
@@ -0,0 +1,32 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalTitleAuto(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    title: {
+      title: 'Use frequency of keyboard keys',
+      subtitle: 'The mostest frequency letter are E, T, A.',
+      titleFontSize: 30,
+      subtitleFontSize: 20,
+    },
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    axis: {
+      y: { labelFormatter: '.0%' },
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
@@ -273,3 +273,4 @@ export { alphabetIntervalAutoPaddingSlider } from './alphabet-interval-auto-padd
 export { countriesBubbleLegendSize } from './countries-bubble-legend-size';
 export { cars2PointOrdinalSize } from './cars2-point-ordinal-size';
 export { cars2PointConstantColorSize } from './cars2-point-constant-color-size';
+export { alphabetIntervalTitleAuto } from './alphabet-interval-title-auto';
diff --git a/src/component/title.ts b/src/component/title.ts
@@ -69,6 +69,7 @@ const Title = createComponent<TitleStyleProps>({
       .node();
 
     const bounds = mainTitle.getLocalBounds();
+    console.log(bounds.max[1], y, spacing);
     maybeAppend(container, '.sub-title', 'text')
       .attr('className', 'sub-title')
       .call((selection) => {

diff --git a/src/runtime/component.ts b/src/runtime/component.ts
@@ -584,6 +584,7 @@ export function computeComponentSize(
     if (t.startsWith('legendContinuous')) return computeContinuousLegendSize;
     if (t === 'legendCategory') return computeCategoryLegendSize;
     if (t.startsWith('slider')) return computeSliderSize;
+    if (t === 'title') return computeTitleSize;
     return () => {};
   };
   return createCompute()(
@@ -625,6 +626,32 @@ function computeGroupSize(
   children.forEach((d) => (d.size = maxSize));
 }
 
+function computeTitleSize(
+  component: G2GuideComponentOptions,
+  crossSize: number,
+  crossPadding: [number, number],
+  position: GCP,
+  theme: G2Theme,
+  library: G2Library,
+) {
+  const {
+    title,
+    subtitle,
+    spacing = 0,
+    ...style
+  } = deepMix({}, theme.title, component);
+  if (title) {
+    const titleStyle = subObject(style, 'title');
+    const titleBBox = computeLabelSize(title, titleStyle);
+    component.size = titleBBox.height;
+  }
+  if (subtitle) {
+    const subtitleStyle = subObject(style, 'subtitle');
+    const subtitleBBox = computeLabelSize(subtitle, subtitleStyle);
+    component.size += spacing + subtitleBBox.height;
+  }
+}
+
 function computeSliderSize(
   component: G2GuideComponentOptions,
   crossSize: number,

diff --git a/src/theme/classic.ts b/src/theme/classic.ts
@@ -408,6 +408,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
       thumbHighlightedFillOpacity: 0.2,
     },
     title: {
+      spacing: 8,
       titleFill: COLORS.BLACK,
       titleFillOpacity: 0.85,
       titleFontSize: 14,