@visactor/vchart-extension 2.1.0-alpha.21 → 2.1.0-alpha.22

package/cjs/charts/storyline/storyline-transformer.js

@@ -24,7 +24,11 @@ const applyDefaultPadding = spec => {
     var _a, _b, _c, _d;
     const arc = (0, common_1.isArc)(spec), arcDown = arc && "down" === (0, common_1.normalizeLayout)(spec.layout).direction, arcUp = arc && !arcDown, portrait = (0, 
     common_1.isPortrait)(spec), ladder = (0, common_1.isLadder)(spec), wing = (0, common_1.isWing)(spec), clock = (0, 
-    common_1.isClock)(spec), portraitBottomReserve = (() => {
+    common_1.isClock)(spec), topTitleImageReserve = (() => {
+        var _a, _b, _c, _d;
+        return arc || ladder || !(null === (_a = spec.titleImage) || void 0 === _a ? void 0 : _a.image) || !1 === (null === (_b = spec.titleImage) || void 0 === _b ? void 0 : _b.visible) ? 0 : (0, 
+        common_1.getTitleImageReservedHeight)(spec, Number(null !== (_c = spec.width) && void 0 !== _c ? _c : 1e3), Number(null !== (_d = spec.height) && void 0 !== _d ? _d : 600));
+    })(), portraitBottomReserve = (() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (!portrait) return 0;
         const count = null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0, canvasHeight = spec.height;
@@ -42,40 +46,40 @@ const applyDefaultPadding = spec => {
         if (!ladder) return 0;
         const blockHeight = null !== (_b = null === (_a = spec.block) || void 0 === _a ? void 0 : _a.height) && void 0 !== _b ? _b : 132, ideal = Math.round(3 * blockHeight), canvasHeight = spec.height, cap = canvasHeight ? Math.floor(.3 * canvasHeight) : ideal;
         return Math.min(ideal, cap);
-    })(), defaultTop = clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? 280 : 20, defaultBottom = clock ? 60 : portrait ? portraitBottomReserve : wing ? 300 : arcUp ? 0 : arcDown ? 280 : 100, arcHorizontalPadding = (() => {
+    })(), defaultTop = Math.max(topTitleImageReserve, clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? 280 : 20), defaultBottom = clock ? 60 : portrait ? portraitBottomReserve : wing ? 300 : arcUp ? 0 : arcDown ? 280 : 100, arcHorizontalPadding = (() => {
         var _a, _b;
         if (!arc) return 20;
         const count = Math.max(null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0, 1), canvasWidth = spec.width;
         return canvasWidth ? Math.round(canvasWidth / (count + 1)) : 20;
     })(), defaultLeft = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding, defaultRight = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding, p = spec.padding;
-    if (null != p) if (Array.isArray(p)) {
+    if (null != p) if ("number" != typeof p) if (Array.isArray(p)) {
         const [t, r = defaultRight, b, l = defaultLeft] = p;
-        spec.padding = [ null != t ? t : defaultTop, r, null != b ? b : defaultBottom, l ];
+        spec.padding = [ Math.max(null != t ? t : defaultTop, topTitleImageReserve), r, null != b ? b : defaultBottom, l ];
     } else "object" == typeof p && (spec.padding = {
-        top: null !== (_a = p.top) && void 0 !== _a ? _a : defaultTop,
+        top: Math.max(null !== (_a = p.top) && void 0 !== _a ? _a : defaultTop, topTitleImageReserve),
         right: null !== (_b = p.right) && void 0 !== _b ? _b : defaultRight,
         bottom: null !== (_c = p.bottom) && void 0 !== _c ? _c : defaultBottom,
         left: null !== (_d = p.left) && void 0 !== _d ? _d : defaultLeft
-    }); else spec.padding = [ defaultTop, defaultRight, defaultBottom, defaultLeft ];
+    }); else spec.padding = [ Math.max(p, topTitleImageReserve), p, p, p ]; else spec.padding = [ defaultTop, defaultRight, defaultBottom, defaultLeft ];
 }, buildStorylineMarks = spec => {
     var _a;
-    const lineMark = buildLineMark(spec), blockMarks = (null !== (_a = spec.data) && void 0 !== _a ? _a : []).map(((block, index) => buildBlockMark(spec, block, index)));
-    if ((0, common_1.isLandscape)(spec)) return [ ...blockMarks, lineMark ].filter(Boolean);
-    if ((0, common_1.isPortrait)(spec)) return [ lineMark, ...blockMarks ].filter(Boolean);
+    const lineMark = buildLineMark(spec), blockMarks = (null !== (_a = spec.data) && void 0 !== _a ? _a : []).map(((block, index) => buildBlockMark(spec, block, index))), titleImageMark = (0, 
+    common_1.buildTopTitleImageMark)(spec);
+    if ((0, common_1.isLandscape)(spec)) return [ titleImageMark, ...blockMarks, lineMark ].filter(Boolean);
+    if ((0, common_1.isPortrait)(spec)) return [ lineMark, titleImageMark, ...blockMarks ].filter(Boolean);
     if ((0, common_1.isArc)(spec)) {
-        return [ (0, arc_1.buildArcCenterImageMark)(spec), (0, arc_1.buildArcMark)(spec), ...blockMarks ].filter(Boolean);
+        return [ (0, arc_1.buildArcTitleImageMark)(spec), (0, arc_1.buildArcMark)(spec), ...blockMarks ].filter(Boolean);
     }
     if ((0, common_1.isClock)(spec)) {
-        const ringsMark = (0, clock_1.buildClockArcMark)(spec), centerImageMark = (0, clock_1.buildClockCenterImageMark)(spec);
-        return [ ringsMark, ...blockMarks, centerImageMark ].filter(Boolean);
+        return [ titleImageMark, (0, clock_1.buildClockArcMark)(spec), ...blockMarks ].filter(Boolean);
     }
     if ((0, common_1.isWing)(spec)) {
-        return [ (0, wing_1.buildWingArcMark)(spec), ...blockMarks ].filter(Boolean);
+        return [ (0, wing_1.buildWingArcMark)(spec), (0, wing_1.buildWingTitleImageMark)(spec), ...blockMarks ].filter(Boolean);
     }
     if ((0, common_1.isLadder)(spec)) {
         return [ (0, ladder_1.buildLadderDiagonalMark)(spec), (0, ladder_1.buildLadderHeadlineMark)(spec), ...blockMarks ].filter(Boolean);
     }
-    return [ lineMark, ...blockMarks ].filter(Boolean);
+    return [ titleImageMark, lineMark, ...blockMarks ].filter(Boolean);
 }, buildLineMark = spec => {
     var _a, _b, _c;
     return !1 === (null === (_a = spec.line) || void 0 === _a ? void 0 : _a.visible) || (null !== (_c = null === (_b = spec.data) || void 0 === _b ? void 0 : _b.length) && void 0 !== _c ? _c : 0) <= 1 ? null : (0, 

package/cjs/charts/storyline/storyline-transformer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/charts/storyline/storyline-transformer.ts"],"names":[],"mappings":"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","file":"storyline-transformer.js","sourcesContent":["import { CommonChartSpecTransformer, type IExtensionGroupMarkSpec } from '@visactor/vchart';\nimport type { IStorylineBlock, IStorylineSpec } from './interface';\nimport {\n  isArc,\n  isClock,\n  isLadder,\n  isLandscape,\n  isPortrait,\n  isWing,\n  normalizeLayout,\n  resolveBlockWidth,\n  DEFAULT_BLOCK_WIDTH,\n  DEFAULT_IMAGE_GAP\n} from './layouts/common';\nimport { buildClockArcMark, buildClockBlockMark, buildClockCenterImageMark } from './layouts/clock';\nimport { buildDefaultBlockMark, buildDefaultLineMark } from './layouts/default';\nimport { buildLandscapeBlockMark, buildLandscapeConnectingCurve } from './layouts/landscape';\nimport {\n  buildPortraitAxisMark,\n  buildPortraitBlockMark,\n  PORTRAIT_CONTENT_HEIGHT_RATIO,\n  PORTRAIT_IMAGE_HEIGHT_RATIO\n} from './layouts/portrait';\nimport { buildArcBlockMark, buildArcCenterImageMark, buildArcMark } from './layouts/arc';\nimport { buildWingArcMark, buildWingBlockMark } from './layouts/wing';\nimport { buildLadderBlockMark, buildLadderDiagonalMark, buildLadderHeadlineMark } from './layouts/ladder';\n\nexport class StorylineChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    applyDefaultPadding(spec);\n    const storylineSpec = {\n      ...spec,\n      data: [...(spec.data ?? [])]\n    } as IStorylineSpec;\n\n    spec.type = 'common' as any;\n    spec.data = [];\n    spec.series = [];\n    spec.axes = [];\n    spec.customMark = buildStorylineMarks(storylineSpec);\n    delete spec.layout;\n    delete spec.title;\n    super.transformSpec(spec as any);\n  }\n}\n\n/**\n * 图表默认 padding：\n * - arc up（dome 穹顶）：centerImage 贴底 + textBox 在弧线上方，所以默认底部留 100px、顶部留 280px 给 textBox + 弧线呼吸空间；\n * - arc down（bowl 碗形）：centerImage 贴顶 + textBox 在弧线下方，所以默认顶部留 100px、底部留 280px 给 textBox + 弧线呼吸空间；\n * - portrait：textBox 在 image 下方，最后一个 block 的 content 容易超出 region。底部 padding 默认 = 单个 block 的 content 高度\n *   （即 regionHeight / count * 0.6），保证最后一个 block 有完整的 content 展示空间；\n * - ladder：四周默认留出 content 文本宽度，避免 block 沿对角线\"挤\"到画布边缘；\n * 用户在 spec.padding 中显式指定的值会被保留，仅在缺省时生效。\n */\nconst applyDefaultPadding = (spec: any) => {\n  const LARGE = 100;\n  const SMALL = 20;\n  // 给 textBox（240px）+ 一定呼吸空间，避免内容超出画布\n  const TEXT_RESERVE = 280;\n  const arc = isArc(spec as IStorylineSpec);\n  const arcDown = arc && normalizeLayout((spec as IStorylineSpec).layout).direction === 'down';\n  const arcUp = arc && !arcDown;\n  const portrait = isPortrait(spec as IStorylineSpec);\n  const ladder = isLadder(spec as IStorylineSpec);\n  const wing = isWing(spec as IStorylineSpec);\n  const clock = isClock(spec as IStorylineSpec);\n  // clock 辐射式布局：底部和顶部 blocks 的文字会向外延伸，需要在四周围留空间\n  // portrait 底部 padding：精准预留最后一个 block 的 content 展示空间。\n  // portrait 几何（layouts/portrait.ts）：\n  //   - 每个 block center.y 等距放置\n  //   - image 中心 = block center；imageHeight ≈ slotHeight * PORTRAIT_IMAGE_HEIGHT_RATIO\n  //   - content 紧贴 image 下方：textY = image 底 + textGap；textHeight = titleLine + titleGap + contentHeight\n  //   - contentHeight ≈ slotHeight * PORTRAIT_CONTENT_HEIGHT_RATIO\n  // 最后一个 block center 到 canvas 底部需要至少 imageH/2 + textGap + titleLine + titleGap + contentH。\n  // transformSpec 阶段无法获得真实 region，使用 spec.height 估算 slotHeight；缺省回退到 LARGE。\n  const portraitBottomReserve = (() => {\n    if (!portrait) {\n      return 0;\n    }\n    const count = (spec as IStorylineSpec).data?.length ?? 0;\n    const canvasHeight = (spec as IStorylineSpec).height as number | undefined;\n    if (!count || !canvasHeight) {\n      return LARGE;\n    }\n    // 在 transformSpec 阶段还没经过 region 减去 padding 等步骤，\n    // 这里直接用 canvasHeight / (count + 1) 作为 slotHeight 的近似上界，\n    // 后续 layout 逻辑会基于真实 region 重新计算 imageH / contentH。\n    const slotHeight = canvasHeight / (count + 1);\n    const imageHeight = (spec as IStorylineSpec).image?.height ?? slotHeight * PORTRAIT_IMAGE_HEIGHT_RATIO;\n    const contentHeight = slotHeight * PORTRAIT_CONTENT_HEIGHT_RATIO;\n    const titleFontSize = Number((spec.title?.style as any)?.fontSize ?? 26);\n    const titleLineHeight = Number((spec.title?.style as any)?.lineHeight ?? Math.round(titleFontSize * 1.35));\n    const textGap = 8; // PORTRAIT_TEXT_GAP_FROM_IMAGE\n    const titleToContentGap = 4; // PORTRAIT_TITLE_TO_CONTENT_GAP\n    const breath = 16; // 额外呼吸空间\n    return Math.max(\n      LARGE,\n      Math.round(imageHeight / 2 + textGap + titleLineHeight + titleToContentGap + contentHeight + breath)\n    );\n  })();\n  // ladder：\n  // - 左右 padding ≈ block content 宽度 × 2（保证两端 block 沿对角线水平有呼吸）\n  // - 上下 padding ≈ block 高度 × 3（保证两端 block 沿对角线垂直留出充足画布留白）\n  // 由于 transformSpec 阶段还无法获取真实 viewWidth，这里直接用 spec 中的估值。\n  // 同时限制 padding 不超过 canvas 对应维度的 30%，否则 inner 区域会被挤压到不可见。\n  const ladderHorizontalPadding = (() => {\n    if (!ladder) {\n      return 0;\n    }\n    const blockWidth = (spec as IStorylineSpec).block?.minWidth ?? resolveBlockWidth(spec as IStorylineSpec, 0);\n    const imageWidth = (spec as IStorylineSpec).image?.width ?? 96; // UP_LADDER_BLOCK_IMAGE_SIZE\n    const imageGap = (spec as IStorylineSpec).image?.gap ?? DEFAULT_IMAGE_GAP;\n    const innerPadding = 12 * 2; // up-ladder 默认 block padding 12，左右共 24\n    const contentWidth = Math.max(blockWidth - imageWidth - imageGap - innerPadding, DEFAULT_BLOCK_WIDTH * 0.5);\n    const ideal = Math.round(contentWidth * 2);\n    const canvasWidth = (spec as IStorylineSpec).width as number | undefined;\n    const cap = canvasWidth ? Math.floor(canvasWidth * 0.3) : ideal;\n    return Math.min(ideal, cap);\n  })();\n  const ladderVerticalPadding = (() => {\n    if (!ladder) {\n      return 0;\n    }\n    const blockHeight = (spec as IStorylineSpec).block?.height ?? 132;\n    const ideal = Math.round(blockHeight * 3);\n    const canvasHeight = (spec as IStorylineSpec).height as number | undefined;\n    const cap = canvasHeight ? Math.floor(canvasHeight * 0.3) : ideal;\n    return Math.min(ideal, cap);\n  })();\n  // arc up（dome）: 顶部留给 textBox，底部紧贴（不要额外 padding）\n  // arc down（bowl）: 底部留给 textBox，顶部紧贴（不要额外 padding）\n  // portrait: 底部留给最后一个 block 的 content\n  // ladder: 四周均为 content 宽度\n  // 其它：保持原默认 [SMALL, SMALL, LARGE, SMALL]\n  const defaultTop = clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL;\n  const defaultBottom = clock\n    ? 60\n    : portrait\n      ? portraitBottomReserve\n      : wing\n        ? 300\n        : arcUp\n          ? 0\n          : arcDown\n            ? TEXT_RESERVE\n            : LARGE;\n  // arc：左右 padding = content 宽度（canvasWidth / (count + 1)），保证内容沿弧线均匀分布\n  const arcHorizontalPadding = (() => {\n    if (!arc) {\n      return SMALL;\n    }\n    const count = Math.max((spec as IStorylineSpec).data?.length ?? 0, 1);\n    const canvasWidth = (spec as IStorylineSpec).width as number | undefined;\n    if (!canvasWidth) {\n      return SMALL;\n    }\n    return Math.round(canvasWidth / (count + 1));\n  })();\n  const defaultLeft = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;\n  const defaultRight = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;\n\n  const p = spec.padding;\n  if (p == null) {\n    spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];\n    return;\n  }\n  if (Array.isArray(p)) {\n    const [t, r = defaultRight, b, l = defaultLeft] = p;\n    spec.padding = [t ?? defaultTop, r, b ?? defaultBottom, l];\n    return;\n  }\n  if (typeof p === 'object') {\n    spec.padding = {\n      top: p.top ?? defaultTop,\n      right: p.right ?? defaultRight,\n      bottom: p.bottom ?? defaultBottom,\n      left: p.left ?? defaultLeft\n    };\n  }\n};\n\nconst buildStorylineMarks = (spec: IStorylineSpec) => {\n  const lineMark = buildLineMark(spec);\n  const blockMarks = (spec.data ?? []).map((block, index) => buildBlockMark(spec, block, index));\n  // landscape：连接曲线绘制在所有 block 之上，避免被 image 遮挡\n  if (isLandscape(spec)) {\n    return [...blockMarks, lineMark].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // portrait：lineMark 是中轴 rect，作为底层背景先绘制\n  if (isPortrait(spec)) {\n    return [lineMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // arc：先绘制 centerImage（最底层视觉锚点），再绘制贯穿 block 的弧线，最后绘制 block；\n  // arc 不绘制 block 之间默认的连接线。direction = 'up' 时 centerImage 贴底（穹顶），\n  // direction = 'down' 时 centerImage 贴顶（碗形）\n  if (isArc(spec)) {\n    const centerImageMark = buildArcCenterImageMark(spec);\n    const arcMark = buildArcMark(spec);\n    return [centerImageMark, arcMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // clock：辐射式信息盘 —— 圆环骨架 + 径向分隔线 → centerImage（盘心）→ blocks（楔形 + 外圈文字）\n  if (isClock(spec)) {\n    const ringsMark = buildClockArcMark(spec);\n    const centerImageMark = buildClockCenterImageMark(spec);\n    return [ringsMark, ...blockMarks, centerImageMark].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // wing：椭圆弧脉络 + 弧线上的圆形 image + 左右交替排列的 title/content；\n  // 通过 layout.direction 控制翅膀朝向（'left' | 'right'）\n  if (isWing(spec)) {\n    const arcMark = buildWingArcMark(spec);\n    return [arcMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // ladder：参考 Bauhaus 信息图 —— 对角线 + 沿对角线倾斜的 headline 大字 + 两侧错落 block\n  if (isLadder(spec)) {\n    const diagonalMark = buildLadderDiagonalMark(spec);\n    const headlineMark = buildLadderHeadlineMark(spec);\n    return [diagonalMark, headlineMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  return [lineMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n};\n\nconst buildLineMark = (spec: IStorylineSpec): IExtensionGroupMarkSpec | null => {\n  if (spec.line?.visible === false || (spec.data?.length ?? 0) <= 1) {\n    return null;\n  }\n  if (isLandscape(spec)) {\n    return buildLandscapeConnectingCurve(spec);\n  }\n  if (isPortrait(spec)) {\n    return buildPortraitAxisMark(spec);\n  }\n  return buildDefaultLineMark(spec);\n};\n\nconst buildBlockMark = (spec: IStorylineSpec, block: IStorylineBlock, index: number): IExtensionGroupMarkSpec => {\n  if (isLandscape(spec)) {\n    return buildLandscapeBlockMark(spec, block, index);\n  }\n  if (isPortrait(spec)) {\n    return buildPortraitBlockMark(spec, block, index);\n  }\n  if (isArc(spec)) {\n    return buildArcBlockMark(spec, block, index);\n  }\n  if (isClock(spec)) {\n    return buildClockBlockMark(spec, block, index);\n  }\n  if (isWing(spec)) {\n    return buildWingBlockMark(spec, block, index);\n  }\n  if (isLadder(spec)) {\n    return buildLadderBlockMark(spec, block, index);\n  }\n\n  return buildDefaultBlockMark(spec, block, index);\n};\n"]}
+{"version":3,"sources":["../src/charts/storyline/storyline-transformer.ts"],"names":[],"mappings":"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","file":"storyline-transformer.js","sourcesContent":["import { CommonChartSpecTransformer, type IExtensionGroupMarkSpec } from '@visactor/vchart';\nimport type { IStorylineBlock, IStorylineSpec } from './interface';\nimport {\n  isArc,\n  isClock,\n  isLadder,\n  isLandscape,\n  isPortrait,\n  isWing,\n  normalizeLayout,\n  resolveBlockWidth,\n  DEFAULT_BLOCK_WIDTH,\n  DEFAULT_IMAGE_GAP,\n  buildTopTitleImageMark,\n  getTitleImageReservedHeight\n} from './layouts/common';\nimport { buildClockArcMark, buildClockBlockMark } from './layouts/clock';\nimport { buildDefaultBlockMark, buildDefaultLineMark } from './layouts/default';\nimport { buildLandscapeBlockMark, buildLandscapeConnectingCurve } from './layouts/landscape';\nimport {\n  buildPortraitAxisMark,\n  buildPortraitBlockMark,\n  PORTRAIT_CONTENT_HEIGHT_RATIO,\n  PORTRAIT_IMAGE_HEIGHT_RATIO\n} from './layouts/portrait';\nimport { buildArcBlockMark, buildArcMark, buildArcTitleImageMark } from './layouts/arc';\nimport { buildWingArcMark, buildWingBlockMark, buildWingTitleImageMark } from './layouts/wing';\nimport { buildLadderBlockMark, buildLadderDiagonalMark, buildLadderHeadlineMark } from './layouts/ladder';\n\nexport class StorylineChartSpecTransformer extends CommonChartSpecTransformer<any> {\n  transformSpec(spec: any): void {\n    applyDefaultPadding(spec);\n    const storylineSpec = {\n      ...spec,\n      data: [...(spec.data ?? [])]\n    } as IStorylineSpec;\n\n    spec.type = 'common' as any;\n    spec.data = [];\n    spec.series = [];\n    spec.axes = [];\n    spec.customMark = buildStorylineMarks(storylineSpec);\n    delete spec.layout;\n    delete spec.title;\n    super.transformSpec(spec as any);\n  }\n}\n\n/**\n * 图表默认 padding：\n * - arc up（dome 穹顶）：titleImage 贴底 + textBox 在弧线上方，所以默认底部留 100px、顶部留 280px 给 textBox + 弧线呼吸空间；\n * - arc down（bowl 碗形）：titleImage 贴顶 + textBox 在弧线下方，所以默认顶部留 100px、底部留 280px 给 textBox + 弧线呼吸空间；\n * - portrait：textBox 在 image 下方，最后一个 block 的 content 容易超出 region。底部 padding 默认 = 单个 block 的 content 高度\n *   （即 regionHeight / count * 0.6），保证最后一个 block 有完整的 content 展示空间；\n * - ladder：四周默认留出 content 文本宽度，避免 block 沿对角线\"挤\"到画布边缘；\n * 用户在 spec.padding 中显式指定的值会被保留；顶部 titleImage 会额外保证最小 top padding，避免覆盖 region 内容。\n */\nconst applyDefaultPadding = (spec: any) => {\n  const LARGE = 100;\n  const SMALL = 20;\n  // 给 textBox（240px）+ 一定呼吸空间，避免内容超出画布\n  const TEXT_RESERVE = 280;\n  const arc = isArc(spec as IStorylineSpec);\n  const arcDown = arc && normalizeLayout((spec as IStorylineSpec).layout).direction === 'down';\n  const arcUp = arc && !arcDown;\n  const portrait = isPortrait(spec as IStorylineSpec);\n  const ladder = isLadder(spec as IStorylineSpec);\n  const wing = isWing(spec as IStorylineSpec);\n  const clock = isClock(spec as IStorylineSpec);\n  const topTitleImageReserve = (() => {\n    if (\n      arc ||\n      ladder ||\n      !(spec as IStorylineSpec).titleImage?.image ||\n      (spec as IStorylineSpec).titleImage?.visible === false\n    ) {\n      return 0;\n    }\n    return getTitleImageReservedHeight(\n      spec as IStorylineSpec,\n      Number((spec as IStorylineSpec).width ?? 1000),\n      Number((spec as IStorylineSpec).height ?? 600)\n    );\n  })();\n  // clock 辐射式布局：底部和顶部 blocks 的文字会向外延伸，需要在四周围留空间\n  // portrait 底部 padding：精准预留最后一个 block 的 content 展示空间。\n  // portrait 几何（layouts/portrait.ts）：\n  //   - 每个 block center.y 等距放置\n  //   - image 中心 = block center；imageHeight ≈ slotHeight * PORTRAIT_IMAGE_HEIGHT_RATIO\n  //   - content 紧贴 image 下方：textY = image 底 + textGap；textHeight = titleLine + titleGap + contentHeight\n  //   - contentHeight ≈ slotHeight * PORTRAIT_CONTENT_HEIGHT_RATIO\n  // 最后一个 block center 到 canvas 底部需要至少 imageH/2 + textGap + titleLine + titleGap + contentH。\n  // transformSpec 阶段无法获得真实 region，使用 spec.height 估算 slotHeight；缺省回退到 LARGE。\n  const portraitBottomReserve = (() => {\n    if (!portrait) {\n      return 0;\n    }\n    const count = (spec as IStorylineSpec).data?.length ?? 0;\n    const canvasHeight = (spec as IStorylineSpec).height as number | undefined;\n    if (!count || !canvasHeight) {\n      return LARGE;\n    }\n    // 在 transformSpec 阶段还没经过 region 减去 padding 等步骤，\n    // 这里直接用 canvasHeight / (count + 1) 作为 slotHeight 的近似上界，\n    // 后续 layout 逻辑会基于真实 region 重新计算 imageH / contentH。\n    const slotHeight = canvasHeight / (count + 1);\n    const imageHeight = (spec as IStorylineSpec).image?.height ?? slotHeight * PORTRAIT_IMAGE_HEIGHT_RATIO;\n    const contentHeight = slotHeight * PORTRAIT_CONTENT_HEIGHT_RATIO;\n    const titleFontSize = Number((spec.title?.style as any)?.fontSize ?? 26);\n    const titleLineHeight = Number((spec.title?.style as any)?.lineHeight ?? Math.round(titleFontSize * 1.35));\n    const textGap = 8; // PORTRAIT_TEXT_GAP_FROM_IMAGE\n    const titleToContentGap = 4; // PORTRAIT_TITLE_TO_CONTENT_GAP\n    const breath = 16; // 额外呼吸空间\n    return Math.max(\n      LARGE,\n      Math.round(imageHeight / 2 + textGap + titleLineHeight + titleToContentGap + contentHeight + breath)\n    );\n  })();\n  // ladder：\n  // - 左右 padding ≈ block content 宽度 × 2（保证两端 block 沿对角线水平有呼吸）\n  // - 上下 padding ≈ block 高度 × 3（保证两端 block 沿对角线垂直留出充足画布留白）\n  // 由于 transformSpec 阶段还无法获取真实 viewWidth，这里直接用 spec 中的估值。\n  // 同时限制 padding 不超过 canvas 对应维度的 30%，否则 inner 区域会被挤压到不可见。\n  const ladderHorizontalPadding = (() => {\n    if (!ladder) {\n      return 0;\n    }\n    const blockWidth = (spec as IStorylineSpec).block?.minWidth ?? resolveBlockWidth(spec as IStorylineSpec, 0);\n    const imageWidth = (spec as IStorylineSpec).image?.width ?? 96; // UP_LADDER_BLOCK_IMAGE_SIZE\n    const imageGap = (spec as IStorylineSpec).image?.gap ?? DEFAULT_IMAGE_GAP;\n    const innerPadding = 12 * 2; // up-ladder 默认 block padding 12，左右共 24\n    const contentWidth = Math.max(blockWidth - imageWidth - imageGap - innerPadding, DEFAULT_BLOCK_WIDTH * 0.5);\n    const ideal = Math.round(contentWidth * 2);\n    const canvasWidth = (spec as IStorylineSpec).width as number | undefined;\n    const cap = canvasWidth ? Math.floor(canvasWidth * 0.3) : ideal;\n    return Math.min(ideal, cap);\n  })();\n  const ladderVerticalPadding = (() => {\n    if (!ladder) {\n      return 0;\n    }\n    const blockHeight = (spec as IStorylineSpec).block?.height ?? 132;\n    const ideal = Math.round(blockHeight * 3);\n    const canvasHeight = (spec as IStorylineSpec).height as number | undefined;\n    const cap = canvasHeight ? Math.floor(canvasHeight * 0.3) : ideal;\n    return Math.min(ideal, cap);\n  })();\n  // arc up（dome）: 顶部留给 textBox，底部紧贴（不要额外 padding）\n  // arc down（bowl）: 底部留给 textBox，顶部紧贴（不要额外 padding）\n  // portrait: 底部留给最后一个 block 的 content\n  // ladder: 四周均为 content 宽度\n  // 其它：保持原默认 [SMALL, SMALL, LARGE, SMALL]\n  const defaultTop = Math.max(\n    topTitleImageReserve,\n    clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL\n  );\n  const defaultBottom = clock\n    ? 60\n    : portrait\n      ? portraitBottomReserve\n      : wing\n        ? 300\n        : arcUp\n          ? 0\n          : arcDown\n            ? TEXT_RESERVE\n            : LARGE;\n  // arc：左右 padding = content 宽度（canvasWidth / (count + 1)），保证内容沿弧线均匀分布\n  const arcHorizontalPadding = (() => {\n    if (!arc) {\n      return SMALL;\n    }\n    const count = Math.max((spec as IStorylineSpec).data?.length ?? 0, 1);\n    const canvasWidth = (spec as IStorylineSpec).width as number | undefined;\n    if (!canvasWidth) {\n      return SMALL;\n    }\n    return Math.round(canvasWidth / (count + 1));\n  })();\n  const defaultLeft = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;\n  const defaultRight = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;\n\n  const p = spec.padding;\n  if (p == null) {\n    spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];\n    return;\n  }\n  if (typeof p === 'number') {\n    spec.padding = [Math.max(p, topTitleImageReserve), p, p, p];\n    return;\n  }\n  if (Array.isArray(p)) {\n    const [t, r = defaultRight, b, l = defaultLeft] = p;\n    spec.padding = [Math.max(t ?? defaultTop, topTitleImageReserve), r, b ?? defaultBottom, l];\n    return;\n  }\n  if (typeof p === 'object') {\n    spec.padding = {\n      top: Math.max(p.top ?? defaultTop, topTitleImageReserve),\n      right: p.right ?? defaultRight,\n      bottom: p.bottom ?? defaultBottom,\n      left: p.left ?? defaultLeft\n    };\n  }\n};\n\nconst buildStorylineMarks = (spec: IStorylineSpec) => {\n  const lineMark = buildLineMark(spec);\n  const blockMarks = (spec.data ?? []).map((block, index) => buildBlockMark(spec, block, index));\n  const titleImageMark = buildTopTitleImageMark(spec);\n  // landscape：连接曲线绘制在所有 block 之上，避免被 image 遮挡\n  if (isLandscape(spec)) {\n    return [titleImageMark, ...blockMarks, lineMark].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // portrait：lineMark 是中轴 rect，作为底层背景先绘制\n  if (isPortrait(spec)) {\n    return [lineMark, titleImageMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // arc：先绘制 titleImage（视觉锚点），再绘制贯穿 block 的弧线，最后绘制 block；\n  // arc 不绘制 block 之间默认的连接线。direction = 'up' 时 titleImage 贴底（穹顶），\n  // direction = 'down' 时 titleImage 贴顶（碗形）\n  if (isArc(spec)) {\n    const arcTitleImageMark = buildArcTitleImageMark(spec);\n    const arcMark = buildArcMark(spec);\n    return [arcTitleImageMark, arcMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // clock：辐射式信息盘 —— 圆环骨架 + 径向分隔线 + blocks（楔形 + 外圈文字）\n  if (isClock(spec)) {\n    const ringsMark = buildClockArcMark(spec);\n    return [titleImageMark, ringsMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // wing：椭圆弧脉络 + 弧线上的圆形 image + 左右交替排列的 title/content；\n  // 通过 layout.direction 控制翅膀朝向（'left' | 'right'）\n  if (isWing(spec)) {\n    const arcMark = buildWingArcMark(spec);\n    const wingTitleImageMark = buildWingTitleImageMark(spec);\n    return [arcMark, wingTitleImageMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  // ladder：参考 Bauhaus 信息图 —— 对角线 + 沿对角线倾斜的 headline 大字 + 两侧错落 block\n  if (isLadder(spec)) {\n    const diagonalMark = buildLadderDiagonalMark(spec);\n    const headlineMark = buildLadderHeadlineMark(spec);\n    return [diagonalMark, headlineMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n  }\n  return [titleImageMark, lineMark, ...blockMarks].filter(Boolean) as IExtensionGroupMarkSpec[];\n};\n\nconst buildLineMark = (spec: IStorylineSpec): IExtensionGroupMarkSpec | null => {\n  if (spec.line?.visible === false || (spec.data?.length ?? 0) <= 1) {\n    return null;\n  }\n  if (isLandscape(spec)) {\n    return buildLandscapeConnectingCurve(spec);\n  }\n  if (isPortrait(spec)) {\n    return buildPortraitAxisMark(spec);\n  }\n  return buildDefaultLineMark(spec);\n};\n\nconst buildBlockMark = (spec: IStorylineSpec, block: IStorylineBlock, index: number): IExtensionGroupMarkSpec => {\n  if (isLandscape(spec)) {\n    return buildLandscapeBlockMark(spec, block, index);\n  }\n  if (isPortrait(spec)) {\n    return buildPortraitBlockMark(spec, block, index);\n  }\n  if (isArc(spec)) {\n    return buildArcBlockMark(spec, block, index);\n  }\n  if (isClock(spec)) {\n    return buildClockBlockMark(spec, block, index);\n  }\n  if (isWing(spec)) {\n    return buildWingBlockMark(spec, block, index);\n  }\n  if (isLadder(spec)) {\n    return buildLadderBlockMark(spec, block, index);\n  }\n\n  return buildDefaultBlockMark(spec, block, index);\n};\n"]}

package/esm/charts/storyline/interface.d.ts

@@ -41,7 +41,7 @@ export interface IStorylineImageSpec extends IMarkSpec<IImageMarkSpec> {
     gap?: number;
     showBackground?: boolean;
 }
-export interface IStorylineCenterImageSpec extends IMarkSpec<IImageMarkSpec> {
+export interface IStorylineTitleImageSpec extends IMarkSpec<IImageMarkSpec> {
     width?: number;
     height?: number;
     visible?: boolean;
@@ -60,9 +60,9 @@ export interface IStorylineSpec extends Omit<IChartSpec, 'type' | 'data' | 'seri
     layout?: StorylineLayoutType | IStorylineLayoutOptions;
     block?: IStorylineBlockSpec;
     title?: IMarkSpec<ITextMarkSpec>;
+    titleImage?: IStorylineTitleImageSpec;
     content?: IMarkSpec<IComposedTextMarkSpec>;
     image?: IStorylineImageSpec;
-    centerImage?: IStorylineCenterImageSpec;
     line?: IStorylineLineSpec;
     marker?: IMarkSpec<ITextMarkSpec>;
     themeColor?: string;

package/esm/charts/storyline/interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/charts/storyline/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type {\n  IChartSpec,\n  IComposedTextMarkSpec,\n  IImageMarkSpec,\n  IMarkSpec,\n  IPathMarkSpec,\n  IRectMarkSpec,\n  ITextMarkSpec,\n  StringOrNumber\n} from '@visactor/vchart';\n\nexport type StorylineLayoutType = 'clock' | 'arc' | 'wing' | 'landscape' | 'portrait' | 'ladder' | 'spiral';\n\nexport type StorylineImagePosition = 'top' | 'left' | 'right' | 'bottom';\nexport type StorylineLineType = 'line' | 'polyline' | 'curve';\nexport type StorylineWingDirection = 'left' | 'right';\nexport type StorylineLadderDirection = 'up' | 'down';\nexport type StorylineArcDirection = 'up' | 'down';\n\nexport interface IStorylineBlock {\n  id?: StringOrNumber;\n  title?: string;\n  content?: string | string[];\n  image?: string | HTMLImageElement | HTMLCanvasElement;\n  /**\n   * 绘制在主 image 背后的装饰图（如 portrait 布局的错位 shadow image）。\n   * 若未配置，则不会绘制装饰 image。\n   */\n  subImage?: string | HTMLImageElement | HTMLCanvasElement;\n  /**\n   * 时间节点文本（如 \"2012\"）。\n   * 仅 portrait 布局生效：在中轴 rect 上沿每个 block 的 center.y 处纵向绘制。\n   * 配合 spec.marker 控制样式与显隐。\n   */\n  marker?: string;\n  datum?: unknown;\n}\n\nexport interface IStorylineLayoutOptions {\n  type: StorylineLayoutType;\n  /**\n   * 边缘留白，支持单值或 [top, right, bottom, left]。\n   */\n  padding?: number | [number, number, number, number];\n  /**\n   * 对 circular/arc 布局生效，控制半径占可用空间的比例。\n   */\n  radiusRatio?: number;\n  /**\n   * 对 circular/arc 布局生效，角度单位为度。\n   */\n  startAngle?: number;\n  /**\n   * 对 circular/arc 布局生效，角度单位为度。\n   */\n  endAngle?: number;\n  /**\n   * 方向控制：\n   * - wing 布局：'left' | 'right'，圆心锚位置；\n   * - ladder 布局：'up' | 'down'，'up' 表示左下→右上对角线（默认），'down' 表示左上→右下对角线；\n   * - arc 布局：'up' | 'down'，'up' 表示穹顶（centerImage 贴底，弧线在上方），'down' 表示碗形（centerImage 贴顶，弧线在下方）。\n   */\n  direction?: StorylineWingDirection | StorylineLadderDirection | StorylineArcDirection;\n  /**\n   * 对 ladder 布局生效：贯穿画布的倾斜大字 headline。\n   * 缺省时使用占位文本。倾斜方向自动跟随对角线。\n   */\n  headline?: string;\n}\n\nexport interface IStorylineBlockSpec {\n  width?: number;\n  widthRatio?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  height?: number;\n  padding?: number | [number, number, number, number];\n  gap?: number;\n  /**\n   * 是否展示 block 背后的卡片背景 rect（白底 + 描边 + 阴影）。\n   * 仅 up-ladder 等少数布局支持，默认 false（不展示）。\n   */\n  showBackground?: boolean;\n  style?: Partial<IRectMarkSpec>;\n}\n\nexport interface IStorylineImageSpec extends IMarkSpec<IImageMarkSpec> {\n  width?: number;\n  height?: number;\n  position?: StorylineImagePosition;\n  gap?: number;\n  /**\n   * 是否展示 image 背后的白色背景 rect（白底 + 主题色描边）。\n   * 所有布局支持。\n   * portrait / landscape 默认 false（不展示），其他布局默认 true（展示）。\n   * 注：不影响 subImage（错位装饰图元的显隐。\n   */\n  showBackground?: boolean;\n}\n\nexport interface IStorylineCenterImageSpec extends IMarkSpec<IImageMarkSpec> {\n  width?: number;\n  height?: number;\n  visible?: boolean;\n  image?: string | HTMLImageElement | HTMLCanvasElement;\n}\n\nexport interface IStorylineLineSpec extends IMarkSpec<IPathMarkSpec> {\n  visible?: boolean;\n  type?: StorylineLineType;\n  showArrow?: boolean;\n  arrowSize?: number;\n  /**\n   * 连接线和 block 边缘之间的距离。\n   */\n  distance?: number;\n}\n\nexport interface IStorylineSpec extends Omit<IChartSpec, 'type' | 'data' | 'series' | 'title' | 'layout'> {\n  type: 'storyline';\n  data: IStorylineBlock[];\n  layout?: StorylineLayoutType | IStorylineLayoutOptions;\n  block?: IStorylineBlockSpec;\n  title?: IMarkSpec<ITextMarkSpec>;\n  content?: IMarkSpec<IComposedTextMarkSpec>;\n  image?: IStorylineImageSpec;\n  centerImage?: IStorylineCenterImageSpec;\n  line?: IStorylineLineSpec;\n  /**\n   * 时间节点文本配置（仅 portrait 布局生效）。\n   * 当 spec.data[i].marker 有值时，在中轴 rect 上沿垂直方向绘制每个 block 的时间节点文本。\n   */\n  marker?: IMarkSpec<ITextMarkSpec>;\n  themeColor?: string;\n}\n"]}
+{"version":3,"sources":["../src/charts/storyline/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type {\n  IChartSpec,\n  IComposedTextMarkSpec,\n  IImageMarkSpec,\n  IMarkSpec,\n  IPathMarkSpec,\n  IRectMarkSpec,\n  ITextMarkSpec,\n  StringOrNumber\n} from '@visactor/vchart';\n\n/**\n * Storyline 图表支持的布局类型。\n */\nexport type StorylineLayoutType = 'clock' | 'arc' | 'wing' | 'landscape' | 'portrait' | 'ladder' | 'spiral';\n\n/**\n * block 内图片相对文本内容的摆放位置。\n */\nexport type StorylineImagePosition = 'top' | 'left' | 'right' | 'bottom';\n/**\n * block 之间连线的绘制方式。\n */\nexport type StorylineLineType = 'line' | 'polyline' | 'curve';\n/**\n * wing 布局的展开方向。\n */\nexport type StorylineWingDirection = 'left' | 'right';\n/**\n * ladder 布局的对角线方向。\n */\nexport type StorylineLadderDirection = 'up' | 'down';\n/**\n * arc 布局的弧形方向。\n */\nexport type StorylineArcDirection = 'up' | 'down';\n\n/**\n * Storyline 中单个叙事节点的数据配置。\n */\nexport interface IStorylineBlock {\n  /**\n   * 节点唯一标识。未配置时使用数据索引作为内部标识。\n   */\n  id?: StringOrNumber;\n  /**\n   * 节点标题文本。\n   */\n  title?: string;\n  /**\n   * 节点正文内容。传入数组时会按段落拼接为富文本内容。\n   */\n  content?: string | string[];\n  /**\n   * 节点主图片，支持图片 URL、HTMLImageElement 或 HTMLCanvasElement。\n   */\n  image?: string | HTMLImageElement | HTMLCanvasElement;\n  /**\n   * 绘制在主 image 背后的装饰图（如 portrait 布局的错位 shadow image）。\n   * 若未配置，则不会绘制装饰 image。\n   */\n  subImage?: string | HTMLImageElement | HTMLCanvasElement;\n  /**\n   * 时间节点文本（如 \"2012\"）。\n   * 仅 portrait 布局生效：在中轴 rect 上沿每个 block 的 center.y 处纵向绘制。\n   * 配合 spec.marker 控制样式与显隐。\n   */\n  marker?: string;\n  /**\n   * 绑定到该节点的原始业务数据，供外部交互或扩展逻辑使用。\n   */\n  datum?: unknown;\n}\n\n/**\n * Storyline 布局参数配置。\n */\nexport interface IStorylineLayoutOptions {\n  /**\n   * 布局类型。\n   */\n  type: StorylineLayoutType;\n  /**\n   * 边缘留白，支持单值或 [top, right, bottom, left]。\n   */\n  padding?: number | [number, number, number, number];\n  /**\n   * 对 circular/arc 布局生效，控制半径占可用空间的比例。\n   */\n  radiusRatio?: number;\n  /**\n   * 对 circular/arc 布局生效，角度单位为度。\n   */\n  startAngle?: number;\n  /**\n   * 对 circular/arc 布局生效，角度单位为度。\n   */\n  endAngle?: number;\n  /**\n   * 方向控制：\n   * - wing 布局：'left' | 'right'，圆心锚位置；\n   * - ladder 布局：'up' | 'down'，'up' 表示左下→右上对角线（默认），'down' 表示左上→右下对角线；\n   * - arc 布局：'up' | 'down'，'up' 表示穹顶（titleImage 贴底，弧线在上方），'down' 表示碗形（titleImage 贴顶，弧线在下方）。\n   */\n  direction?: StorylineWingDirection | StorylineLadderDirection | StorylineArcDirection;\n  /**\n   * 对 ladder 布局生效：贯穿画布的倾斜大字 headline。\n   * 缺省时使用占位文本。倾斜方向自动跟随对角线。\n   */\n  headline?: string;\n}\n\n/**\n * Storyline 节点 block 的尺寸、间距、背景和样式配置。\n */\nexport interface IStorylineBlockSpec {\n  /**\n   * block 的固定宽度。配置后优先级高于 widthRatio、minWidth、maxWidth。\n   */\n  width?: number;\n  /**\n   * block 宽度相对可用视图宽度的比例。\n   */\n  widthRatio?: number;\n  /**\n   * block 自适应宽度的最小值。\n   */\n  minWidth?: number;\n  /**\n   * block 自适应宽度的最大值。\n   */\n  maxWidth?: number;\n  /**\n   * block 的固定高度。\n   */\n  height?: number;\n  /**\n   * block 内边距，支持单值或 [top, right, bottom, left]。\n   */\n  padding?: number | [number, number, number, number];\n  /**\n   * block 之间的布局间距。\n   */\n  gap?: number;\n  /**\n   * 是否展示 block 背后的卡片背景 rect（白底 + 描边 + 阴影）。\n   * 仅 ladder 等少数布局支持，默认 false（不展示）。\n   */\n  showBackground?: boolean;\n  /**\n   * block 背景 rect 的图形样式配置。\n   */\n  style?: Partial<IRectMarkSpec>;\n}\n\n/**\n * Storyline 节点主图片配置。\n */\nexport interface IStorylineImageSpec extends IMarkSpec<IImageMarkSpec> {\n  /**\n   * 节点主图片宽度。\n   */\n  width?: number;\n  /**\n   * 节点主图片高度。\n   */\n  height?: number;\n  /**\n   * 节点主图片相对标题和正文的位置。\n   */\n  position?: StorylineImagePosition;\n  /**\n   * 节点主图片与文本内容之间的间距。\n   */\n  gap?: number;\n  /**\n   * 是否展示 image 背后的白色背景 rect（白底 + 主题色描边）。\n   * 所有布局支持。\n   * portrait / landscape 默认 false（不展示），其他布局默认 true（展示）。\n   * 注：不影响 subImage（错位装饰图元）的显隐。\n   */\n  showBackground?: boolean;\n}\n\n/**\n * Storyline 标题图片配置，用于在不同布局中放置主题图片或标题图。\n */\nexport interface IStorylineTitleImageSpec extends IMarkSpec<IImageMarkSpec> {\n  /**\n   * 标题图片宽度。未配置时由布局根据画布尺寸自适应计算。\n   */\n  width?: number;\n  /**\n   * 标题图片高度。未配置时由布局根据宽度和默认比例自适应计算。\n   */\n  height?: number;\n  /**\n   * 是否显示标题图片。\n   */\n  visible?: boolean;\n  /**\n   * 标题图片资源，支持图片 URL、HTMLImageElement 或 HTMLCanvasElement。\n   */\n  image?: string | HTMLImageElement | HTMLCanvasElement;\n}\n\n/**\n * Storyline 连接线配置。\n */\nexport interface IStorylineLineSpec extends IMarkSpec<IPathMarkSpec> {\n  /**\n   * 是否显示连接线或布局主轴线。\n   */\n  visible?: boolean;\n  /**\n   * 连接线类型。\n   */\n  type?: StorylineLineType;\n  /**\n   * 是否在线段末端显示箭头。\n   */\n  showArrow?: boolean;\n  /**\n   * 箭头尺寸。\n   */\n  arrowSize?: number;\n  /**\n   * 连接线和 block 边缘之间的距离。\n   */\n  distance?: number;\n}\n\n/**\n * Storyline 图表总配置。\n */\nexport interface IStorylineSpec extends Omit<IChartSpec, 'type' | 'data' | 'series' | 'title' | 'layout'> {\n  /**\n   * 图表类型，固定为 'storyline'。\n   */\n  type: 'storyline';\n  /**\n   * Storyline 节点数据数组。\n   */\n  data: IStorylineBlock[];\n  /**\n   * 布局类型或布局参数配置。\n   */\n  layout?: StorylineLayoutType | IStorylineLayoutOptions;\n  /**\n   * 节点 block 的尺寸、间距、背景和样式配置。\n   */\n  block?: IStorylineBlockSpec;\n  /**\n   * 节点标题文本 mark 配置。\n   */\n  title?: IMarkSpec<ITextMarkSpec>;\n  /**\n   * 图表标题图片配置。\n   */\n  titleImage?: IStorylineTitleImageSpec;\n  /**\n   * 节点正文富文本 mark 配置。\n   */\n  content?: IMarkSpec<IComposedTextMarkSpec>;\n  /**\n   * 节点主图片配置。\n   */\n  image?: IStorylineImageSpec;\n  /**\n   * 节点之间连接线或布局主轴线配置。\n   */\n  line?: IStorylineLineSpec;\n  /**\n   * 时间节点文本配置（仅 portrait 布局生效）。\n   * 当 spec.data[i].marker 有值时，在中轴 rect 上沿垂直方向绘制每个 block 的时间节点文本。\n   */\n  marker?: IMarkSpec<ITextMarkSpec>;\n  /**\n   * Storyline 主题色，用于连接线、轴、图片背景和强调元素的默认颜色。\n   */\n  themeColor?: string;\n}\n"]}

package/esm/charts/storyline/layouts/arc.d.ts

@@ -1,5 +1,5 @@
 import type { IExtensionGroupMarkSpec } from '@visactor/vchart';
 import type { IStorylineBlock, IStorylineSpec } from '../interface';
 export declare const buildArcMark: (spec: IStorylineSpec) => IExtensionGroupMarkSpec | null;
-export declare const buildArcCenterImageMark: (spec: IStorylineSpec) => IExtensionGroupMarkSpec | null;
+export declare const buildArcTitleImageMark: (spec: IStorylineSpec) => IExtensionGroupMarkSpec | null;
 export declare const buildArcBlockMark: (spec: IStorylineSpec, block: IStorylineBlock, index: number) => IExtensionGroupMarkSpec;

package/esm/charts/storyline/layouts/arc.js

@@ -1,10 +1,10 @@
 import { LayoutZIndex } from "@visactor/vchart";
 
-import { buildRichContent, getRegionGeometry, getThemeColor, normalizeLayout, omitImageLayoutSpec, resolveBlockWidth, shouldShowImageBackground, withAlpha } from "./common";
+import { buildRichContent, getImageBackgroundStyle, getRegionGeometry, getThemeColor, normalizeLayout, omitImageLayoutSpec, resolveAdaptiveLineHeight, resolveBlockWidth, resolveTitleFontSize, shouldShowImageBackground, withAlpha } from "./common";
 
-const ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HALO_PADDING = 6, ARC_TEXT_GAP_FROM_IMAGE = 10, ARC_TITLE_FONT_SIZE = 32, ARC_TITLE_LINE_HEIGHT = 34, ARC_CONTENT_LINE_HEIGHT = 26, ARC_CONTENT_FONT_SIZE = 20, ARC_TEXT_BOX_HEIGHT = 240, ARC_TITLE_TO_CONTENT_GAP = 4, ARC_TEXT_PADDING = 20, ARC_TEXT_BOX_MIN_WIDTH = 240, ARC_CENTER_IMAGE_SIZE_RATIO = .55, ARC_CENTER_IMAGE_TO_SYMBOL_RATIO = .8, ARC_GAP_FROM_CENTER_IMAGE = 200, isDownArc = spec => "down" === normalizeLayout(spec.layout).direction, getArcCenterImageRect = (spec, ctx) => {
+const ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HALO_PADDING = 6, ARC_TEXT_GAP_FROM_IMAGE = 10, ARC_TITLE_FONT_SIZE = 32, ARC_TITLE_LINE_HEIGHT = 34, ARC_CONTENT_LINE_HEIGHT = 26, ARC_CONTENT_FONT_SIZE = 20, ARC_TEXT_BOX_HEIGHT = 240, ARC_TITLE_TO_CONTENT_GAP = 4, ARC_TEXT_PADDING = 20, ARC_TEXT_BOX_MIN_WIDTH = 240, ARC_TITLE_IMAGE_WIDTH_RATIO = .68, ARC_TITLE_IMAGE_MAX_WIDTH = 900, ARC_TITLE_IMAGE_HEIGHT_RATIO = .34, ARC_GAP_FROM_TITLE_IMAGE = 200, isDownArc = spec => "down" === normalizeLayout(spec.layout).direction, getArcTitleImageRect = (spec, ctx) => {
     var _a, _b, _c, _e;
-    const {width: width, height: height, startX: startX, startY: startY} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), baseSize = .55 * Math.min(innerWidth, innerHeight), w = Math.max(null !== (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : baseSize, 80), h = Math.max(null !== (_e = null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : baseSize, 80);
+    const {width: width, height: height, startX: startX, startY: startY} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), baseWidth = Math.min(.68 * innerWidth, 900), w = Math.max(null !== (_b = null === (_a = spec.titleImage) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : baseWidth, 80), h = Math.max(null !== (_e = null === (_c = spec.titleImage) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : .34 * w, 40);
     return {
         x: startX + innerWidth / 2 - w / 2,
         y: isDownArc(spec) ? startY : startY + innerHeight - h,
@@ -13,14 +13,14 @@ const ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HA
     };
 }, getArcGeometry = (spec, ctx) => {
     var _a, _b, _c;
-    const {width: width, startX: startX} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), blockWidth = resolveBlockWidth(spec, width), layoutOpt = normalizeLayout(spec.layout), isDown = "down" === layoutOpt.direction, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : isDown ? 20 : 200, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : isDown ? 160 : 340, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .88, rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio, centerRect = getArcCenterImageRect(spec, ctx), centerTop = centerRect.y, centerBottom = centerRect.y + centerRect.height, sinStart = Math.sin(startAngle / 180 * Math.PI);
+    const {width: width, startX: startX} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), blockWidth = resolveBlockWidth(spec, width), layoutOpt = normalizeLayout(spec.layout), isDown = "down" === layoutOpt.direction, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : isDown ? 20 : 200, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : isDown ? 160 : 340, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .88, rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio, titleImageRect = getArcTitleImageRect(spec, ctx), centerTop = titleImageRect.y, centerBottom = titleImageRect.y + titleImageRect.height, sinStart = Math.sin(startAngle / 180 * Math.PI);
     let cy, ry;
     if (isDown) {
         const denom = Math.max(1 - sinStart, .05);
-        ry = (centerRect.height + 200) / denom, cy = centerTop - ry * sinStart;
+        ry = (titleImageRect.height + 200) / denom, cy = centerTop - ry * sinStart;
     } else {
         const denom = Math.max(1 + sinStart, .05);
-        ry = (centerRect.height + 200) / denom, cy = centerBottom - ry * sinStart;
+        ry = (titleImageRect.height + 200) / denom, cy = centerBottom - ry * sinStart;
     }
     return {
         cx: startX + innerWidth / 2,
@@ -77,97 +77,35 @@ export const buildArcMark = spec => {
     };
 };
 
-export const buildArcCenterImageMark = spec => {
-    var _a, _b, _c, _e;
-    if (!(!1 !== (null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.visible))) return null;
-    const themeColor = getThemeColor(spec), hasImage = !!(null === (_b = spec.centerImage) || void 0 === _b ? void 0 : _b.image), symbolGradient = {
-        gradient: "linear",
-        x0: .5,
-        y0: 0,
-        x1: .5,
-        y1: 1,
-        stops: [ {
-            offset: 0,
-            color: withAlpha(themeColor, .15)
-        }, {
-            offset: 1,
-            color: themeColor
-        } ]
-    };
-    return {
+export const buildArcTitleImageMark = spec => {
+    var _a;
+    return (null === (_a = spec.titleImage) || void 0 === _a ? void 0 : _a.image) && !1 !== spec.titleImage.visible ? {
         type: "group",
-        name: "storyline-arc-center",
-        zIndex: LayoutZIndex.Mark,
-        children: [ {
-            type: "symbol",
-            name: "storyline-arc-center-symbol",
-            interactive: !1,
-            style: {
-                x: (_d, ctx) => {
-                    const r = getArcCenterImageRect(spec, ctx);
-                    return r.x + r.width / 2;
-                },
-                y: (_d, ctx) => {
-                    const r = getArcCenterImageRect(spec, ctx);
-                    return r.y + r.height / 2;
-                },
-                size: (_d, ctx) => {
-                    const r = getArcCenterImageRect(spec, ctx);
-                    return Math.max(r.width, r.height);
-                },
-                symbolType: "circle",
-                fill: hasImage ? symbolGradient : "#ffffff",
-                stroke: themeColor,
-                lineWidth: 2
-            }
-        }, hasImage ? Object.assign(Object.assign({
+        name: "storyline-arc-title-image",
+        zIndex: LayoutZIndex.Mark + 6,
+        children: [ Object.assign(Object.assign({
             type: "image",
-            name: "storyline-arc-center-image",
+            name: "storyline-arc-title-image-node",
             interactive: !1
-        }, spec.centerImage), {
+        }, spec.titleImage), {
             style: Object.assign({
-                x: (_d, ctx) => {
-                    var _a, _b;
-                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width, w = "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height);
-                    return r.x + (r.width - w) / 2;
-                },
-                y: (_d, ctx) => {
-                    var _a, _b;
-                    const r = getArcCenterImageRect(spec, ctx), userHeight = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.height, h = "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
-                    return r.y + (r.height - h) / 2;
-                },
-                width: (_d, ctx) => {
-                    var _a, _b;
-                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width;
-                    return "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height);
-                },
-                height: (_d, ctx) => {
-                    var _a, _b;
-                    const r = getArcCenterImageRect(spec, ctx), userHeight = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.height;
-                    return "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
-                },
-                cornerRadius: (_d, ctx) => {
-                    var _a, _b, _c, _e;
-                    const r = getArcCenterImageRect(spec, ctx), userWidth = null === (_b = null === (_a = spec.centerImage) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.width, userHeight = null === (_e = null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.style) || void 0 === _e ? void 0 : _e.height, w = "number" == typeof userWidth ? userWidth : .8 * Math.max(r.width, r.height), h = "number" == typeof userHeight ? userHeight : .8 * Math.max(r.width, r.height);
-                    return Math.max(w, h) / 2;
-                },
-                image: null === (_c = spec.centerImage) || void 0 === _c ? void 0 : _c.image,
+                x: (_d, ctx) => getArcTitleImageRect(spec, ctx).x,
+                y: (_d, ctx) => getArcTitleImageRect(spec, ctx).y,
+                width: (_d, ctx) => getArcTitleImageRect(spec, ctx).width,
+                height: (_d, ctx) => getArcTitleImageRect(spec, ctx).height,
+                image: spec.titleImage.image,
                 repeatX: "no-repeat",
                 repeatY: "no-repeat",
-                imageMode: "cover",
-                imagePosition: "center",
-                anchor: (_d, ctx) => {
-                    const r = getArcCenterImageRect(spec, ctx);
-                    return [ r.x + r.width / 2, r.y + r.height / 2 ];
-                }
-            }, null === (_e = spec.centerImage) || void 0 === _e ? void 0 : _e.style)
-        }) : null ].filter(Boolean)
-    };
+                imageMode: "contain",
+                imagePosition: "center"
+            }, spec.titleImage.style)
+        }) ]
+    } : null;
 };
 
 const getArcBlockMetrics = (spec, index = 0) => {
-    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    const titleFontSize = Number(null !== (_c = null === (_b = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : 32), titleLineHeight = Number(null !== (_g = null === (_f = null === (_e = spec.title) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.lineHeight) && void 0 !== _g ? _g : Math.max(34, Math.round(1.35 * titleFontSize))), contentFontSize = Number(null !== (_k = null === (_j = null === (_h = spec.content) || void 0 === _h ? void 0 : _h.style) || void 0 === _j ? void 0 : _j.fontSize) && void 0 !== _k ? _k : 20), contentLineHeight = Number(null !== (_o = null === (_m = null === (_l = spec.content) || void 0 === _l ? void 0 : _l.style) || void 0 === _m ? void 0 : _m.lineHeight) && void 0 !== _o ? _o : 26), contentHeight = Math.max(240 - titleLineHeight - 4, contentLineHeight), imageDiameter = Math.max(null !== (_q = null === (_p = spec.image) || void 0 === _p ? void 0 : _p.width) && void 0 !== _q ? _q : 240, null !== (_s = null === (_r = spec.image) || void 0 === _r ? void 0 : _r.height) && void 0 !== _s ? _s : 240), imageWidth = imageDiameter, imageHeight = imageDiameter, isDown = isDownArc(spec), count = Math.max(null !== (_u = null === (_t = spec.data) || void 0 === _t ? void 0 : _t.length) && void 0 !== _u ? _u : 0, 1), canvasWidth = Number(null !== (_v = spec.width) && void 0 !== _v ? _v : imageWidth * count), defaultTextWidth = Math.round(canvasWidth / (count + 1)), textBoxWidth = Math.max(Number(null !== (_x = null === (_w = spec.block) || void 0 === _w ? void 0 : _w.width) && void 0 !== _x ? _x : defaultTextWidth), 240), isLeftSide = index < count / 2, imageBox = {
+    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    const contentFontSize = Number(null !== (_c = null === (_b = null === (_a = spec.content) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : 20), contentLineHeight = Number(null !== (_g = null === (_f = null === (_e = spec.content) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.lineHeight) && void 0 !== _g ? _g : 26), imageDiameter = Math.max(null !== (_j = null === (_h = spec.image) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 240, null !== (_l = null === (_k = spec.image) || void 0 === _k ? void 0 : _k.height) && void 0 !== _l ? _l : 240), imageWidth = imageDiameter, imageHeight = imageDiameter, isDown = isDownArc(spec), count = Math.max(null !== (_o = null === (_m = spec.data) || void 0 === _m ? void 0 : _m.length) && void 0 !== _o ? _o : 0, 1), canvasWidth = Number(null !== (_p = spec.width) && void 0 !== _p ? _p : imageWidth * count), defaultTextWidth = Math.round(canvasWidth / (count + 1)), textBoxWidth = Math.max(Number(null !== (_r = null === (_q = spec.block) || void 0 === _q ? void 0 : _q.width) && void 0 !== _r ? _r : defaultTextWidth), 240), titleFontSize = resolveTitleFontSize(spec, void 0, null === (_t = null === (_s = spec.data) || void 0 === _s ? void 0 : _s[index]) || void 0 === _t ? void 0 : _t.title, textBoxWidth, 32, [ 8, 40 ]), titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, null === (_u = spec.title) || void 0 === _u ? void 0 : _u.style, 34), contentHeight = Math.max(240 - titleLineHeight - 4, contentLineHeight), isLeftSide = index < count / 2, imageBox = {
         x: -imageWidth / 2,
         y: -imageHeight / 2,
         width: imageWidth,
@@ -236,7 +174,7 @@ export const buildArcBlockMark = (spec, block, index) => {
                 image: block.image,
                 repeatX: "no-repeat",
                 repeatY: "no-repeat",
-                imageMode: "cover",
+                imageMode: "contain",
                 imagePosition: "center"
             }, null === (_b = spec.image) || void 0 === _b ? void 0 : _b.style)
         }) : {
@@ -244,15 +182,12 @@ export const buildArcBlockMark = (spec, block, index) => {
             name: `storyline-block-image-bg-${index}`,
             interactive: !1,
             zIndex: LayoutZIndex.Mark + 3,
-            style: {
+            style: Object.assign({
                 x: 0,
                 y: 0,
                 size: Math.min(metrics.imageBox.width, metrics.imageBox.height),
-                symbolType: "circle",
-                fill: "#ffffff",
-                stroke: themeColor,
-                lineWidth: 2
-            }
+                symbolType: "circle"
+            }, getImageBackgroundStyle(spec))
         }, shouldShowImageBackground(spec) ? {
             type: "symbol",
             name: `storyline-block-image-halo-${index}`,
@@ -264,7 +199,7 @@ export const buildArcBlockMark = (spec, block, index) => {
                 size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + 12,
                 symbolType: "circle",
                 fill: "transparent",
-                stroke: themeColor,
+                stroke: withAlpha(themeColor, .82),
                 lineWidth: 3
             }
         } : null, block.title ? Object.assign(Object.assign({