feat: enhance padding and fontsize

Author: skie1997

packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts

@@ -151,11 +151,11 @@ const createPortraitSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
 // arc：弧形布局，通过 direction 切换 dome（'up'）/ bowl（'down'）
 const createArcSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
   type: 'storyline',
-  padding: [50, 20, 100, 20],
+  // padding: 0,
   width: WIDTH,
   height: HEIGHT,
   data: buildData(layout),
-  layout: { type: 'arc', direction: 'down' },
+  layout: { type: 'arc', direction: 'up' },
   titleImage,
   themeColor
 });
@@ -165,7 +165,7 @@ const createClockSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
   type: 'storyline',
   height: HEIGHT,
   width: WIDTH,
-  padding: [20, 20, 50, 20],
+  // padding: [20, 20, 50, 20],
   layout: 'clock',
   titleImage,
   themeColor,
@@ -227,7 +227,7 @@ const createClockSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
 
 const createDefaultSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
   type: 'storyline',
-  padding: 20,
+  // padding: 20,
   data: buildData(layout),
   layout,
   titleImage,
@@ -250,7 +250,7 @@ const createDefaultSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
 // wing：椭圆弧时间线（参考残奥历史信息图），通过 layout.direction 切换左/右翅膀
 const createWingSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
   type: 'storyline',
-  padding: [40, 40, 40, 40],
+  // padding: [40, 40, 40, 40],
   height: WIDTH,
   width: HEIGHT,
   data: buildData(layout),
@@ -265,7 +265,7 @@ const createLadderSpec = (layout: StorylineLayoutType): IStorylineSpec => ({
   type: 'storyline',
   width: 1600,
   height: 900,
-  padding: 20,
+  // padding: 20,
   layout: { type: 'ladder', direction: 'down', headline: 'ladder' },
   themeColor: '#C8102E',
   background: 'transparent',
@@ -376,7 +376,7 @@ const run = () => {
     window.vchart = cs;
   };
 
-  select.value = 'clock';
+  select.value = 'arc';
   render(select.value as StorylineLayoutType);
 
   select.addEventListener('change', () => {

packages/vchart-extension/src/charts/storyline/layouts/arc.ts

@@ -5,7 +5,9 @@ import {
   type ICustomMarkSpec,
   type LayoutContext,
   type StorylinePoint,
-  buildRichContent,
+  BLOCK_TITLE_MAX_LINES,
+  buildPlainContent,
+  getBlockTitleHeight,
   getImageBackgroundStyle,
   getRegionGeometry,
   getThemeColor,
@@ -30,9 +32,9 @@ const ARC_BLOCK_IMAGE_HALO_PADDING = 6;
 const ARC_TEXT_GAP_FROM_IMAGE = 10;
 const ARC_TITLE_FONT_SIZE = 32;
 const ARC_TITLE_LINE_HEIGHT = 34;
-const ARC_CONTENT_LINE_HEIGHT = 26;
-const ARC_CONTENT_FONT_SIZE = 20;
-// title + content 区域总高度（默认 240px，溢出由富文本 heightLimit + ellipsis 自动截断）
+const ARC_CONTENT_LINE_HEIGHT = 24;
+const ARC_CONTENT_FONT_SIZE = 18;
+// title + content 区域总高度（默认 240px，溢出由 heightLimit + ellipsis 自动截断）
 const ARC_TEXT_BOX_HEIGHT = 240;
 const ARC_TITLE_TO_CONTENT_GAP = 4;
 // 引导线与 title/content 之间的水平间距
@@ -45,9 +47,21 @@ const ARC_TITLE_IMAGE_MAX_WIDTH = 900;
 const ARC_TITLE_IMAGE_HEIGHT_RATIO = 0.34;
 // 弧线最高/最低点距离 titleImage 顶部/底部的距离
 const ARC_GAP_FROM_TITLE_IMAGE = 200;
+const ARC_FIT_MARGIN = 8;
 
 const isDownArc = (spec: IStorylineSpec) => normalizeLayout(spec.layout).direction === 'down';
 
+type ArcGeometry = {
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+  startAngle: number;
+  endAngle: number;
+  centerTop: number;
+  centerBottom: number;
+};
+
 /**
  * 计算 arc 布局 titleImage 的 box：水平居中。
  * - up（dome）：垂直贴底（位于 inner 区域底部）
@@ -84,7 +98,7 @@ const getArcTitleImageRect = (spec: IStorylineSpec, ctx: LayoutContext) => {
  * → ry = (GAP + titleImageHeight) / (1 - sin(startAngle))
  *   cy = titleImageTop - ry * sin(startAngle)
  */
-const getArcGeometry = (spec: IStorylineSpec, ctx: LayoutContext) => {
+const getBaseArcGeometry = (spec: IStorylineSpec, ctx: LayoutContext): ArcGeometry => {
   const { width, startX } = getRegionGeometry(ctx);
   // width 已经是 VChart 减去 spec.padding 后的 region 宽度
   const innerWidth = Math.max(width, 1);
@@ -130,8 +144,7 @@ const getArcGeometry = (spec: IStorylineSpec, ctx: LayoutContext) => {
  * 同时让 block 沿弧线径向向外偏移 imageHeight/2，
  * 使 image 内边贴在弧线上，image + text 整体位于弧线外侧。
  */
-const getArcBlockCenter = (spec: IStorylineSpec, ctx: LayoutContext, index: number): StorylinePoint => {
-  const arc = getArcGeometry(spec, ctx);
+const getArcBlockCenterByGeometry = (spec: IStorylineSpec, arc: ArcGeometry, index: number): StorylinePoint => {
   const count = spec.data?.length ?? 0;
   if (count <= 0) {
     return { x: arc.cx, y: arc.cy };
@@ -151,6 +164,90 @@ const getArcBlockCenter = (spec: IStorylineSpec, ctx: LayoutContext, index: numb
   return { x: px + nx * offset, y: py + ny * offset };
 };
 
+const getArcBlockBounds = (spec: IStorylineSpec, arc: ArcGeometry, index: number) => {
+  const center = getArcBlockCenterByGeometry(spec, arc, index);
+  const metrics = getArcBlockMetrics(spec, index);
+  const halo = shouldShowImageBackground(spec) ? ARC_BLOCK_IMAGE_HALO_PADDING + ARC_BLOCK_IMAGE_BORDER : 0;
+  const minX = Math.min(metrics.imageBox.x - halo, metrics.textBox.x, metrics.contentBox.x);
+  const maxX = Math.max(
+    metrics.imageBox.x + metrics.imageBox.width + halo,
+    metrics.textBox.x + metrics.textBox.width,
+    metrics.contentBox.x + metrics.contentBox.width
+  );
+  const minY = Math.min(metrics.imageBox.y - halo, metrics.textBox.y, metrics.contentBox.y);
+  const maxY = Math.max(
+    metrics.imageBox.y + metrics.imageBox.height + halo,
+    metrics.textBox.y + metrics.textBox.height,
+    metrics.contentBox.y + metrics.contentBox.height
+  );
+  return {
+    left: center.x + minX,
+    right: center.x + maxX,
+    top: center.y + minY,
+    bottom: center.y + maxY
+  };
+};
+
+const getArcBlocksBounds = (spec: IStorylineSpec, arc: ArcGeometry) => {
+  const count = spec.data?.length ?? 0;
+  if (!count) {
+    return { left: arc.cx, right: arc.cx, top: arc.cy, bottom: arc.cy };
+  }
+  return Array.from({ length: count }, (_, index) => getArcBlockBounds(spec, arc, index)).reduce(
+    (bounds, blockBounds) => ({
+      left: Math.min(bounds.left, blockBounds.left),
+      right: Math.max(bounds.right, blockBounds.right),
+      top: Math.min(bounds.top, blockBounds.top),
+      bottom: Math.max(bounds.bottom, blockBounds.bottom)
+    }),
+    {
+      left: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      top: Number.POSITIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY
+    }
+  );
+};
+
+const getArcGeometry = (spec: IStorylineSpec, ctx: LayoutContext): ArcGeometry => {
+  const arc = getBaseArcGeometry(spec, ctx);
+  const region = getRegionGeometry(ctx);
+  const bounds = getArcBlocksBounds(spec, arc);
+  const fit = {
+    left: region.startX + ARC_FIT_MARGIN,
+    right: region.startX + region.width - ARC_FIT_MARGIN,
+    top: region.startY + ARC_FIT_MARGIN,
+    bottom: region.startY + region.height - ARC_FIT_MARGIN
+  };
+  let shiftX = 0;
+  let shiftY = 0;
+  const boundsWidth = bounds.right - bounds.left;
+  const boundsHeight = bounds.bottom - bounds.top;
+  const fitWidth = fit.right - fit.left;
+  const fitHeight = fit.bottom - fit.top;
+
+  if (boundsWidth > fitWidth) {
+    shiftX = (fit.left + fit.right - bounds.left - bounds.right) / 2;
+  } else if (bounds.left < fit.left) {
+    shiftX = fit.left - bounds.left;
+  } else if (bounds.right > fit.right) {
+    shiftX = fit.right - bounds.right;
+  }
+
+  if (boundsHeight > fitHeight) {
+    shiftY = (fit.top + fit.bottom - bounds.top - bounds.bottom) / 2;
+  } else if (bounds.top < fit.top) {
+    shiftY = fit.top - bounds.top;
+  } else if (bounds.bottom > fit.bottom) {
+    shiftY = fit.bottom - bounds.bottom;
+  }
+
+  return shiftX || shiftY ? { ...arc, cx: arc.cx + shiftX, cy: arc.cy + shiftY } : arc;
+};
+
+const getArcBlockCenter = (spec: IStorylineSpec, ctx: LayoutContext, index: number): StorylinePoint =>
+  getArcBlockCenterByGeometry(spec, getArcGeometry(spec, ctx), index);
+
 /**
  * 贯穿所有 block 的弧线 mark（path 通过沿椭圆采样实现，与 arc block 的弧形布局完全重合）
  *
@@ -265,9 +362,10 @@ const getArcBlockMetrics = (spec: IStorylineSpec, index: number = 0) => {
     [8, 40]
   );
   const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, spec.title?.style as any, ARC_TITLE_LINE_HEIGHT);
+  const titleHeight = getBlockTitleHeight(titleLineHeight, spec.data?.[index]?.title);
   // text 区域总高度固定为 ARC_TEXT_BOX_HEIGHT，content 占除 title 与间距外的全部高度
   const textHeight = ARC_TEXT_BOX_HEIGHT;
-  const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
+  const contentHeight = Math.max(textHeight - titleHeight - titleToContentGap, contentLineHeight);
 
   // 前 1/2 为左侧（奇数 count 时中间块也算左侧），右侧为后 1/2；
   // 左侧 title/content 右对齐（贴引导线），右侧 title/content 左对齐（贴引导线）
@@ -293,7 +391,7 @@ const getArcBlockMetrics = (spec: IStorylineSpec, index: number = 0) => {
   };
   const contentBox = {
     x: textBox.x,
-    y: textBox.y + titleLineHeight + titleToContentGap,
+    y: textBox.y + titleHeight + titleToContentGap,
     width: textBox.width,
     height: contentHeight
   };
@@ -419,6 +517,9 @@ export const buildArcBlockMark = (
               y: metrics.textBox.y,
               text: block.title,
               maxLineWidth: metrics.textBox.width,
+              height: metrics.titleLineHeight * BLOCK_TITLE_MAX_LINES,
+              heightLimit: metrics.titleLineHeight * BLOCK_TITLE_MAX_LINES,
+              lineClamp: BLOCK_TITLE_MAX_LINES,
               fontSize: metrics.titleFontSize,
               lineHeight: metrics.titleLineHeight,
               fontWeight: 'bold',
@@ -428,6 +529,9 @@ export const buildArcBlockMark = (
               lineJoin: 'round',
               textAlign: metrics.textAlign,
               textBaseline: 'top',
+              whiteSpace: 'normal',
+              wordBreak: 'break-word',
+              ellipsis: '...',
               ...spec.title?.style
             }
           } as ICustomMarkSpec<'text'>)
@@ -439,22 +543,19 @@ export const buildArcBlockMark = (
             interactive: false,
             zIndex: LayoutZIndex.Mark + 4,
             ...spec.content,
-            textType: 'rich',
             style: {
               x: metrics.contentBox.x,
               y: metrics.contentBox.y,
               width: metrics.contentBox.width,
               height: metrics.contentBox.height,
               maxLineWidth: metrics.contentBox.width,
               heightLimit: metrics.contentBox.height,
-              text: buildRichContent(contentText, spec, {
-                fontSize: metrics.contentFontSize,
-                lineHeight: metrics.contentLineHeight,
-                fill: '#596173',
-                align: metrics.textAlign
-              }),
+              text: buildPlainContent(contentText),
+              fontSize: metrics.contentFontSize,
+              lineHeight: metrics.contentLineHeight,
               textAlign: metrics.textAlign,
               textBaseline: 'top',
+              whiteSpace: 'normal',
               wordBreak: 'break-word',
               ellipsis: '...',
               fill: '#596173',

packages/vchart-extension/src/charts/storyline/layouts/clock.ts

@@ -4,7 +4,8 @@ import type { IStorylineBlock, IStorylineSpec } from '../interface';
 import {
   type ICustomMarkSpec,
   type LayoutContext,
-  buildRichContent,
+  BLOCK_TITLE_MAX_LINES,
+  buildPlainContent,
   getImageBackgroundStyle,
   getRegionGeometry,
   getThemeColor,
@@ -53,8 +54,9 @@ const CLOCK_ORBIT_DASH = [4, 4];
 // ===== 文字 =====
 const CLOCK_TITLE_FONT_SIZE = 22;
 const CLOCK_TITLE_LINE_HEIGHT = 28;
-const CLOCK_CONTENT_FONT_SIZE = 16;
-const CLOCK_CONTENT_LINE_HEIGHT = 22;
+const CLOCK_CONTENT_FONT_SIZE = 14;
+const CLOCK_CONTENT_LINE_HEIGHT = 20;
+const CLOCK_CONTENT_LINES = 4;
 
 // ===== 几何 =====
 
@@ -78,7 +80,7 @@ const getClockGeometry = (spec: IStorylineSpec, ctx: LayoutContext): ClockGeomet
   // - content 在 anchor 远离圆心一侧，需要预留 content 的高度
   // - 水平方向：text 从 0.92R 向外延伸 CLOCK_TEXT_MAX_WIDTH
   const textReserveX = CLOCK_TEXT_MAX_WIDTH;
-  const textReserveY = 4 + CLOCK_CONTENT_LINE_HEIGHT * 4;
+  const textReserveY = 4 + CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES;
   const rMaxX = (innerWidth / 2 - textReserveX) / CLOCK_TEXT_INNER_RATIO;
   const rMaxY = (innerHeight / 2 - textReserveY) / CLOCK_TEXT_INNER_RATIO;
   const R = Math.max(Math.min(rMaxX, rMaxY), 1);
@@ -383,7 +385,7 @@ export const buildClockBlockMark = (
             lineWidth: 1.5
           }
         } as ICustomMarkSpec<'symbol'>),
-    // title：文字段的第一行
+    // title：最多两行
     block.title
       ? ({
           type: 'text',
@@ -393,9 +395,12 @@ export const buildClockBlockMark = (
           style: {
             x: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).x,
             y: (_d: unknown, ctx: LayoutContext) =>
-              getClockTextRect(spec, ctx, index).anchorY - getTitleLineHeight(ctx),
+              getClockTextRect(spec, ctx, index).anchorY - getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES,
             text: block.title,
             maxLineWidth: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).width,
+            height: (_d: unknown, ctx: LayoutContext) => getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES,
+            heightLimit: (_d: unknown, ctx: LayoutContext) => getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES,
+            lineClamp: BLOCK_TITLE_MAX_LINES,
             fontSize: (_d: unknown, ctx: LayoutContext) => getTitleFontSize(ctx),
             lineHeight: (_d: unknown, ctx: LayoutContext) => getTitleLineHeight(ctx),
             fontWeight: 'bold',
@@ -406,30 +411,35 @@ export const buildClockBlockMark = (
             textAlign: (_d: unknown, ctx: LayoutContext) =>
               getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left',
             textBaseline: 'top',
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            ellipsis: '...',
             ...spec.title?.style
           }
         } as ICustomMarkSpec<'text'>)
       : null,
-    // content：富文本，title 下方
+    // content：普通文本，title 下方
     contentText.length
       ? ({
           type: 'text',
           name: `storyline-clock-content-${index}`,
           interactive: false,
           ...spec.content,
-          textType: 'rich',
           style: {
             x: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).x,
             y: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).anchorY + 4,
             width: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).width,
+            height: CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES,
             maxLineWidth: (_d: unknown, ctx: LayoutContext) => getClockTextRect(spec, ctx, index).width,
-            text: buildRichContent(contentText, spec),
+            heightLimit: CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES,
+            text: buildPlainContent(contentText),
             fontSize: CLOCK_CONTENT_FONT_SIZE,
             lineHeight: CLOCK_CONTENT_LINE_HEIGHT,
             fill: '#3a3f4d',
             textAlign: (_d: unknown, ctx: LayoutContext) =>
               getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left',
             textBaseline: 'top',
+            whiteSpace: 'normal',
             wordBreak: 'break-word',
             ...spec.content?.style
           }