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

package/build/index.js

@@ -6078,6 +6078,11 @@
     const DEFAULT_IMAGE_HEIGHT = 48;
     const DEFAULT_IMAGE_GAP = 10;
     const DEFAULT_THEME_COLOR = '#e8543d';
+    const DEFAULT_TITLE_IMAGE_WIDTH_RATIO = 0.52;
+    const DEFAULT_TITLE_IMAGE_MAX_WIDTH = 720;
+    const DEFAULT_TITLE_IMAGE_HEIGHT_RATIO = 0.36;
+    const DEFAULT_TITLE_IMAGE_TOP = 12;
+    const DEFAULT_TITLE_IMAGE_BOTTOM = 24;
     const isLandscape = (spec) => normalizeLayout(spec.layout).type === 'landscape';
     const isPortrait = (spec) => normalizeLayout(spec.layout).type === 'portrait';
     const isClock = (spec) => normalizeLayout(spec.layout).type === 'clock';
@@ -6085,6 +6090,144 @@
     const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
     const isLadder = (spec) => normalizeLayout(spec.layout).type === 'ladder';
     const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
+    const shouldShowImageBackground = (spec) => { var _a, _b; return (_b = (_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) !== null && _b !== void 0 ? _b : !(isPortrait(spec) || isLandscape(spec)); };
+    const TITLE_FONT_SCALE_ID = 'storylineTitleFontSize';
+    const MARKER_FONT_SCALE_ID = 'storylineMarkerFontSize';
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const getTextWeight = (text) => {
+        if (!text) {
+            return 4;
+        }
+        return Math.max(Array.from(text).reduce((sum, char) => {
+            if (char.trim().length === 0) {
+                return sum + 0.32;
+            }
+            return sum + (char.charCodeAt(0) > 255 ? 1.05 : 0.62);
+        }, 0), 1);
+    };
+    const getScaleRange = (spec, scaleId, fallback) => {
+        var _a;
+        const scales = spec.scales;
+        const range = (_a = scales === null || scales === void 0 ? void 0 : scales.find(scale => scale.id === scaleId || scale.type === scaleId)) === null || _a === void 0 ? void 0 : _a.range;
+        if (Array.isArray(range) && range.length >= 2 && typeof range[0] === 'number' && typeof range[1] === 'number') {
+            return [Math.min(range[0], range[1]), Math.max(range[0], range[1])];
+        }
+        return fallback;
+    };
+    const getSpecGeometry = (spec, ctx) => {
+        var _a, _b;
+        if (ctx) {
+            return getRegionGeometry(ctx, spec);
+        }
+        return {
+            width: Math.max(Number((_a = spec.width) !== null && _a !== void 0 ? _a : 0), 1),
+            height: Math.max(Number((_b = spec.height) !== null && _b !== void 0 ? _b : 0), 1),
+            startX: 0,
+            startY: 0
+        };
+    };
+    const resolveAdaptiveFontSize = (spec, ctx, text, options) => {
+        var _a;
+        const configuredFontSize = (_a = options.style) === null || _a === void 0 ? void 0 : _a.fontSize;
+        if (configuredFontSize != null) {
+            return Number(configuredFontSize);
+        }
+        const [minFontSize, maxFontSize] = getScaleRange(spec, options.scaleId, options.range);
+        const { width, height } = getSpecGeometry(spec, ctx);
+        const textWeight = getTextWeight(text);
+        const canvasSize = Math.sqrt(width * height) * options.canvasRatio;
+        const lengthFactor = Math.sqrt(8 / Math.max(textWeight, 4));
+        const adaptiveSize = width <= 1 && height <= 1 ? options.fallback : canvasSize * lengthFactor;
+        const boxWidthLimit = options.boxWidth && options.boxWidth > 0 ? (options.boxWidth / textWeight) * 0.96 : Number.POSITIVE_INFINITY;
+        const boxHeightLimit = options.boxHeight && options.boxHeight > 0 ? options.boxHeight / Math.max(textWeight, 1) : Number.POSITIVE_INFINITY;
+        return Math.floor(clamp(Math.min(adaptiveSize, boxWidthLimit, boxHeightLimit), minFontSize, maxFontSize));
+    };
+    const resolveAdaptiveLineHeight = (fontSize, style, fallback, ratio = 1.35) => { var _a; return Number((_a = style === null || style === void 0 ? void 0 : style.lineHeight) !== null && _a !== void 0 ? _a : Math.round((Number.isFinite(fontSize) ? fontSize : fallback) * ratio)); };
+    const resolveTitleFontSize = (spec, ctx, title, boxWidth, fallback, range = [16, 34]) => {
+        var _a;
+        return resolveAdaptiveFontSize(spec, ctx, title, {
+            style: (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style,
+            scaleId: TITLE_FONT_SCALE_ID,
+            fallback,
+            range,
+            canvasRatio: 0.038,
+            boxWidth
+        });
+    };
+    const resolveMarkerFontSize = (spec, ctx, marker, boxHeight, fallback, range = [18, 46]) => {
+        var _a;
+        return resolveAdaptiveFontSize(spec, ctx, marker, {
+            style: (_a = spec.marker) === null || _a === void 0 ? void 0 : _a.style,
+            scaleId: MARKER_FONT_SCALE_ID,
+            fallback,
+            range,
+            canvasRatio: 0.052,
+            boxHeight
+        });
+    };
+    const getImageBackgroundStyle = (spec) => {
+        const themeColor = getThemeColor(spec);
+        return {
+            fill: {
+                gradient: 'linear',
+                x0: 0,
+                y0: 0,
+                x1: 1,
+                y1: 1,
+                stops: [
+                    { offset: 0, color: '#ffffff' },
+                    { offset: 0.58, color: withAlpha(themeColor, 0.12) },
+                    { offset: 1, color: withAlpha(themeColor, 0.32) }
+                ]
+            },
+            stroke: withAlpha(themeColor, 0.78),
+            lineWidth: 2,
+            shadowColor: withAlpha(themeColor, 0.18),
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowOffsetY: 4
+        };
+    };
+    const getTitleImageSize = (spec, width, height, options) => {
+        var _a, _b, _c, _e, _f, _g, _h;
+        const defaultWidth = Math.min(Math.max(width * ((_a = options === null || options === void 0 ? void 0 : options.widthRatio) !== null && _a !== void 0 ? _a : DEFAULT_TITLE_IMAGE_WIDTH_RATIO), 1), (_b = options === null || options === void 0 ? void 0 : options.maxWidth) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_IMAGE_MAX_WIDTH);
+        const imageWidth = Math.max(Number((_e = (_c = spec.titleImage) === null || _c === void 0 ? void 0 : _c.width) !== null && _e !== void 0 ? _e : defaultWidth), 1);
+        const imageHeight = Math.max(Number((_g = (_f = spec.titleImage) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : Math.min(height, imageWidth * ((_h = options === null || options === void 0 ? void 0 : options.heightRatio) !== null && _h !== void 0 ? _h : DEFAULT_TITLE_IMAGE_HEIGHT_RATIO))), 1);
+        return { width: imageWidth, height: imageHeight };
+    };
+    const getTitleImageReservedHeight = (spec, width, height, options) => {
+        var _a, _b, _c;
+        if (!((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || spec.titleImage.visible === false) {
+            return 0;
+        }
+        const size = getTitleImageSize(spec, width, height, options);
+        return Math.ceil(((_b = options === null || options === void 0 ? void 0 : options.y) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_IMAGE_TOP) + size.height + ((_c = options === null || options === void 0 ? void 0 : options.bottom) !== null && _c !== void 0 ? _c : DEFAULT_TITLE_IMAGE_BOTTOM));
+    };
+    const getChartGeometry = (ctx, spec) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m;
+        const chartRect = (_b = (_a = ctx.chart) === null || _a === void 0 ? void 0 : _a.getLayoutRect) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const bounds = (_c = ctx.getLayoutBounds) === null || _c === void 0 ? void 0 : _c.call(ctx);
+        const width = Math.max((_h = (_g = (_e = chartRect === null || chartRect === void 0 ? void 0 : chartRect.width) !== null && _e !== void 0 ? _e : (_f = bounds === null || bounds === void 0 ? void 0 : bounds.width) === null || _f === void 0 ? void 0 : _f.call(bounds)) !== null && _g !== void 0 ? _g : spec === null || spec === void 0 ? void 0 : spec.width) !== null && _h !== void 0 ? _h : 0, 1);
+        const height = Math.max((_m = (_l = (_j = chartRect === null || chartRect === void 0 ? void 0 : chartRect.height) !== null && _j !== void 0 ? _j : (_k = bounds === null || bounds === void 0 ? void 0 : bounds.height) === null || _k === void 0 ? void 0 : _k.call(bounds)) !== null && _l !== void 0 ? _l : spec === null || spec === void 0 ? void 0 : spec.height) !== null && _m !== void 0 ? _m : 0, 1);
+        return { width, height, startX: 0, startY: 0 };
+    };
+    const buildTopTitleImageMark = (spec, options) => {
+        var _a;
+        if (!((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || spec.titleImage.visible === false) {
+            return null;
+        }
+        return Object.assign(Object.assign({ type: 'image', name: 'storyline-title-image', interactive: false, zIndex: vchart.LayoutZIndex.Mark + 8 }, spec.titleImage), { style: Object.assign({ x: (_d, ctx) => {
+                    const { width, height, startX } = getChartGeometry(ctx, spec);
+                    const size = getTitleImageSize(spec, width, height, options);
+                    return startX + (width - size.width) / 2;
+                }, y: (_d, ctx) => { var _a; return getChartGeometry(ctx, spec).startY + ((_a = options === null || options === void 0 ? void 0 : options.y) !== null && _a !== void 0 ? _a : DEFAULT_TITLE_IMAGE_TOP); }, width: (_d, ctx) => {
+                    const { width, height } = getChartGeometry(ctx, spec);
+                    return getTitleImageSize(spec, width, height, options).width;
+                }, height: (_d, ctx) => {
+                    const { width, height } = getChartGeometry(ctx, spec);
+                    return getTitleImageSize(spec, width, height, options).height;
+                }, image: spec.titleImage.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, spec.titleImage.style) });
+    };
     const withAlpha = (color, alpha) => {
         const safeAlpha = Math.max(0, Math.min(1, alpha));
         if (!color) {
@@ -6113,40 +6256,40 @@
         return trimmed;
     };
     const resolveBlockWidth = (spec, viewWidth) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _e, _f, _g, _h;
         if ((_a = spec.block) === null || _a === void 0 ? void 0 : _a.width) {
             return spec.block.width;
         }
         const ratio = (_c = (_b = spec.block) === null || _b === void 0 ? void 0 : _b.widthRatio) !== null && _c !== void 0 ? _c : DEFAULT_BLOCK_WIDTH_RATIO;
-        const minWidth = (_e = (_d = spec.block) === null || _d === void 0 ? void 0 : _d.minWidth) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_WIDTH;
-        const maxWidth = (_g = (_f = spec.block) === null || _f === void 0 ? void 0 : _f.maxWidth) !== null && _g !== void 0 ? _g : Math.max(minWidth, 320);
+        const minWidth = (_f = (_e = spec.block) === null || _e === void 0 ? void 0 : _e.minWidth) !== null && _f !== void 0 ? _f : DEFAULT_BLOCK_WIDTH;
+        const maxWidth = (_h = (_g = spec.block) === null || _g === void 0 ? void 0 : _g.maxWidth) !== null && _h !== void 0 ? _h : Math.max(minWidth, 320);
         return Math.max(minWidth, Math.min(maxWidth, Math.round(viewWidth * ratio)));
     };
     const getRegionGeometry = (ctx, spec) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         const region = (_c = (_b = (_a = ctx.chart) === null || _a === void 0 ? void 0 : _a.getAllRegions) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[0];
-        const regionRect = (_d = region === null || region === void 0 ? void 0 : region.getLayoutRect) === null || _d === void 0 ? void 0 : _d.call(region);
-        const regionStart = (_e = region === null || region === void 0 ? void 0 : region.getLayoutStartPoint) === null || _e === void 0 ? void 0 : _e.call(region);
-        const chartRect = (_g = (_f = ctx.chart) === null || _f === void 0 ? void 0 : _f.getLayoutRect) === null || _g === void 0 ? void 0 : _g.call(_f);
-        const bounds = (_h = ctx.getLayoutBounds) === null || _h === void 0 ? void 0 : _h.call(ctx);
-        const width = Math.max((_o = (_m = (_k = (_j = regionRect === null || regionRect === void 0 ? void 0 : regionRect.width) !== null && _j !== void 0 ? _j : chartRect === null || chartRect === void 0 ? void 0 : chartRect.width) !== null && _k !== void 0 ? _k : (_l = bounds === null || bounds === void 0 ? void 0 : bounds.width) === null || _l === void 0 ? void 0 : _l.call(bounds)) !== null && _m !== void 0 ? _m : spec === null || spec === void 0 ? void 0 : spec.width) !== null && _o !== void 0 ? _o : 0, 1);
-        const height = Math.max((_t = (_s = (_q = (_p = regionRect === null || regionRect === void 0 ? void 0 : regionRect.height) !== null && _p !== void 0 ? _p : chartRect === null || chartRect === void 0 ? void 0 : chartRect.height) !== null && _q !== void 0 ? _q : (_r = bounds === null || bounds === void 0 ? void 0 : bounds.height) === null || _r === void 0 ? void 0 : _r.call(bounds)) !== null && _s !== void 0 ? _s : spec === null || spec === void 0 ? void 0 : spec.height) !== null && _t !== void 0 ? _t : 0, 1);
+        const regionRect = (_e = region === null || region === void 0 ? void 0 : region.getLayoutRect) === null || _e === void 0 ? void 0 : _e.call(region);
+        const regionStart = (_f = region === null || region === void 0 ? void 0 : region.getLayoutStartPoint) === null || _f === void 0 ? void 0 : _f.call(region);
+        const chartRect = (_h = (_g = ctx.chart) === null || _g === void 0 ? void 0 : _g.getLayoutRect) === null || _h === void 0 ? void 0 : _h.call(_g);
+        const bounds = (_j = ctx.getLayoutBounds) === null || _j === void 0 ? void 0 : _j.call(ctx);
+        const width = Math.max((_p = (_o = (_l = (_k = regionRect === null || regionRect === void 0 ? void 0 : regionRect.width) !== null && _k !== void 0 ? _k : chartRect === null || chartRect === void 0 ? void 0 : chartRect.width) !== null && _l !== void 0 ? _l : (_m = bounds === null || bounds === void 0 ? void 0 : bounds.width) === null || _m === void 0 ? void 0 : _m.call(bounds)) !== null && _o !== void 0 ? _o : spec === null || spec === void 0 ? void 0 : spec.width) !== null && _p !== void 0 ? _p : 0, 1);
+        const height = Math.max((_u = (_t = (_r = (_q = regionRect === null || regionRect === void 0 ? void 0 : regionRect.height) !== null && _q !== void 0 ? _q : chartRect === null || chartRect === void 0 ? void 0 : chartRect.height) !== null && _r !== void 0 ? _r : (_s = bounds === null || bounds === void 0 ? void 0 : bounds.height) === null || _s === void 0 ? void 0 : _s.call(bounds)) !== null && _t !== void 0 ? _t : spec === null || spec === void 0 ? void 0 : spec.height) !== null && _u !== void 0 ? _u : 0, 1);
         return {
             width,
             height,
-            startX: (_u = regionStart === null || regionStart === void 0 ? void 0 : regionStart.x) !== null && _u !== void 0 ? _u : 0,
-            startY: (_v = regionStart === null || regionStart === void 0 ? void 0 : regionStart.y) !== null && _v !== void 0 ? _v : 0
+            startX: (_v = regionStart === null || regionStart === void 0 ? void 0 : regionStart.x) !== null && _v !== void 0 ? _v : 0,
+            startY: (_w = regionStart === null || regionStart === void 0 ? void 0 : regionStart.y) !== null && _w !== void 0 ? _w : 0
         };
     };
     const getLayout = (spec, ctx) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const { width, height, startX, startY } = getRegionGeometry(ctx, spec);
         let blockWidth = resolveBlockWidth(spec, width);
         let blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : (isLandscape(spec) ? 320 : DEFAULT_BLOCK_HEIGHT);
         if (isLandscape(spec) && !((_c = spec.block) === null || _c === void 0 ? void 0 : _c.width)) {
-            const count = (_e = (_d = spec.data) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
+            const count = (_f = (_e = spec.data) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
             if (count > 0) {
-                const padding = normalizePadding((_f = spec.block) === null || _f === void 0 ? void 0 : _f.padding);
+                const padding = normalizePadding((_g = spec.block) === null || _g === void 0 ? void 0 : _g.padding);
                 const innerWidth = Math.max(width - padding.left - padding.right, 1);
                 const LANDSCAPE_IMAGE_GAP = 40;
                 const LANDSCAPE_IMAGE_MIN_WIDTH = 80;
@@ -6155,24 +6298,25 @@
                 blockWidth = Math.max(LANDSCAPE_IMAGE_MIN_WIDTH, Math.floor(adaptive));
             }
         }
-        if (isPortrait(spec) && !((_g = spec.block) === null || _g === void 0 ? void 0 : _g.height)) {
-            const count = (_j = (_h = spec.data) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
+        if (isPortrait(spec) && !((_h = spec.block) === null || _h === void 0 ? void 0 : _h.height)) {
+            const count = (_k = (_j = spec.data) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : 0;
             if (count > 0) {
-                const padding = normalizePadding((_l = (_k = spec.layout) === null || _k === void 0 ? void 0 : _k.padding) !== null && _l !== void 0 ? _l : (_m = spec.block) === null || _m === void 0 ? void 0 : _m.padding);
+                const layoutPadding = typeof spec.layout === 'object' ? spec.layout.padding : undefined;
+                const padding = normalizePadding(layoutPadding !== null && layoutPadding !== void 0 ? layoutPadding : (_l = spec.block) === null || _l === void 0 ? void 0 : _l.padding);
                 const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
                 blockHeight = Math.max(120, Math.floor(innerHeight / (count + 1)));
             }
         }
-        const result = computeStorylineLayout((_o = spec.data) !== null && _o !== void 0 ? _o : [], {
+        const result = computeStorylineLayout((_m = spec.data) !== null && _m !== void 0 ? _m : [], {
             layout: spec.layout,
             viewBox: { width, height },
             block: {
                 width: blockWidth,
                 height: blockHeight
             },
-            gap: (_q = (_p = spec.block) === null || _p === void 0 ? void 0 : _p.gap) !== null && _q !== void 0 ? _q : DEFAULT_BLOCK_GAP,
-            padding: (_r = spec.block) === null || _r === void 0 ? void 0 : _r.padding,
-            lineDistance: (_s = spec.line) === null || _s === void 0 ? void 0 : _s.distance
+            gap: (_p = (_o = spec.block) === null || _o === void 0 ? void 0 : _o.gap) !== null && _p !== void 0 ? _p : DEFAULT_BLOCK_GAP,
+            padding: (_q = spec.block) === null || _q === void 0 ? void 0 : _q.padding,
+            lineDistance: (_r = spec.line) === null || _r === void 0 ? void 0 : _r.distance
         });
         if (!startX && !startY) {
             return result;
@@ -6183,11 +6327,11 @@
                 } }))), links: result.links.map(link => (Object.assign(Object.assign({}, link), { start: { x: link.start.x + startX, y: link.start.y + startY }, end: { x: link.end.x + startX, y: link.end.y + startY }, points: link.points.map(point => ({ x: point.x + startX, y: point.y + startY })) }))) });
     };
     const buildRichContent = (contentText, spec, overrides) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const fontSize = Number((_d = (_a = overrides === null || overrides === void 0 ? void 0 : overrides.fontSize) !== null && _a !== void 0 ? _a : (_c = (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : 18);
-        const lineHeight = Number((_h = (_e = overrides === null || overrides === void 0 ? void 0 : overrides.lineHeight) !== null && _e !== void 0 ? _e : (_g = (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.lineHeight) !== null && _h !== void 0 ? _h : 26);
-        const fill = (_m = (_j = overrides === null || overrides === void 0 ? void 0 : overrides.fill) !== null && _j !== void 0 ? _j : (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fill) !== null && _m !== void 0 ? _m : '#596173';
-        const align = (_o = overrides === null || overrides === void 0 ? void 0 : overrides.align) !== null && _o !== void 0 ? _o : 'left';
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const fontSize = Number((_e = (_a = overrides === null || overrides === void 0 ? void 0 : overrides.fontSize) !== null && _a !== void 0 ? _a : (_c = (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _e !== void 0 ? _e : 18);
+        const lineHeight = Number((_j = (_f = overrides === null || overrides === void 0 ? void 0 : overrides.lineHeight) !== null && _f !== void 0 ? _f : (_h = (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : 26);
+        const fill = (_o = (_k = overrides === null || overrides === void 0 ? void 0 : overrides.fill) !== null && _k !== void 0 ? _k : (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.fill) !== null && _o !== void 0 ? _o : '#596173';
+        const align = (_p = overrides === null || overrides === void 0 ? void 0 : overrides.align) !== null && _p !== void 0 ? _p : 'left';
         return {
             type: 'rich',
             text: contentText.reduce((result, paragraph, index) => {
@@ -6290,8 +6434,6 @@
         return d;
     };
 
-    const CLOCK_CENTER_RADIUS_RATIO = 0.6;
-    const CLOCK_CENTER_IMAGE_INSET_RATIO = 0.9;
     const CLOCK_ORBIT_RATIO = 0.68;
     const CLOCK_DOT_RATIO = 0.68;
     const CLOCK_TEXT_INNER_RATIO = 0.92;
@@ -6327,81 +6469,6 @@
         y: cy + Math.sin(angle) * r
     });
     const isOnLeftHalf = (angle) => Math.cos(angle) < 0;
-    const buildClockCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        if (((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) === false) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        return {
-            type: 'group',
-            name: 'storyline-clock-center',
-            zIndex: vchart.LayoutZIndex.Mark + 2,
-            children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-clock-center-halo',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getClockGeometry(spec, ctx).cx,
-                        y: (_d, ctx) => getClockGeometry(spec, ctx).cy,
-                        size: (_d, ctx) => {
-                            const g = getClockGeometry(spec, ctx);
-                            return g.R * CLOCK_CENTER_RADIUS_RATIO * 2.16;
-                        },
-                        symbolType: 'circle',
-                        fill: withAlpha(themeColor, 0.28),
-                        stroke: 'transparent'
-                    }
-                },
-                hasImage
-                    ? {
-                        type: 'image',
-                        name: 'storyline-clock-center-image',
-                        interactive: false,
-                        style: Object.assign({ x: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return g.cx - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, y: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return g.cy - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, anchor: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return [g.cx, g.cy];
-                            }, dx: (_d, ctx) => {
-                                var _a, _b;
-                                const g = getClockGeometry(spec, ctx);
-                                const rectW = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number' ? userWidth : rectW;
-                                return (rectW - w) / 2;
-                            }, dy: (_d, ctx) => {
-                                var _a, _b;
-                                const g = getClockGeometry(spec, ctx);
-                                const rectH = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number' ? userHeight : rectH;
-                                return (rectH - h) / 2;
-                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
-                    }
-                    : {
-                        type: 'symbol',
-                        name: 'storyline-clock-center-placeholder',
-                        interactive: false,
-                        style: {
-                            x: (_d, ctx) => getClockGeometry(spec, ctx).cx,
-                            y: (_d, ctx) => getClockGeometry(spec, ctx).cy,
-                            size: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * 2,
-                            symbolType: 'circle',
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
-                    }
-            ].filter(Boolean)
-        };
-    };
     const buildClockArcMark = (spec) => {
         const themeColor = getThemeColor(spec);
         const orbitPath = (_d, ctx) => {
@@ -6465,10 +6532,13 @@
         return { x: innerPoint.x, y: innerPoint.y, width, onLeft, anchorY: innerPoint.y };
     };
     const buildClockBlockMark = (spec, block, index) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const themeColor = getThemeColor(spec);
+        const showImageBackground = shouldShowImageBackground(spec);
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
+        const getTitleFontSize = (ctx) => resolveTitleFontSize(spec, ctx, block.title, getClockTextRect(spec, ctx, index).width, CLOCK_TITLE_FONT_SIZE, [8, 30]);
+        const getTitleLineHeight = (ctx) => { var _a; return resolveAdaptiveLineHeight(getTitleFontSize(ctx), (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style, CLOCK_TITLE_LINE_HEIGHT, 1.28); };
         const leadPath = (_d, ctx) => {
             const { start, end } = getClockLeadLine(spec, ctx, index);
             return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} L ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
@@ -6487,30 +6557,22 @@
                     fillOpacity: 0
                 }
             },
-            hasImage
+            showImageBackground
                 ? {
-                    type: 'image',
-                    name: `storyline-clock-dot-${index}`,
+                    type: 'symbol',
+                    name: `storyline-clock-dot-bg-${index}`,
                     interactive: false,
-                    style: {
-                        x: (_d, ctx) => {
+                    style: Object.assign({ x: (_d, ctx) => getClockDotCenter(spec, ctx, index).x, y: (_d, ctx) => getClockDotCenter(spec, ctx, index).y, size: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter + 10, symbolType: 'circle' }, getImageBackgroundStyle(spec))
+                }
+                : null,
+            hasImage
+                ? Object.assign(Object.assign({ type: 'image', name: `storyline-clock-dot-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => {
                             const dot = getClockDotCenter(spec, ctx, index);
                             return dot.x - dot.diameter / 2;
-                        },
-                        y: (_d, ctx) => {
+                        }, y: (_d, ctx) => {
                             const dot = getClockDotCenter(spec, ctx, index);
                             return dot.y - dot.diameter / 2;
-                        },
-                        width: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
-                        height: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
-                        image: block.image,
-                        repeatX: 'no-repeat',
-                        repeatY: 'no-repeat',
-                        imageMode: 'cover',
-                        imagePosition: 'center',
-                        cornerRadius: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter / 2
-                    }
-                }
+                        }, width: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter, height: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center', cornerRadius: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter / 2 }, (_a = spec.image) === null || _a === void 0 ? void 0 : _a.style) })
                 : {
                     type: 'symbol',
                     name: `storyline-clock-dot-${index}`,
@@ -6526,15 +6588,15 @@
                     }
                 },
             block.title
-                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY - CLOCK_TITLE_LINE_HEIGHT, text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, fontSize: CLOCK_TITLE_FONT_SIZE, lineHeight: CLOCK_TITLE_LINE_HEIGHT, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top' }, (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) })
+                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY - getTitleLineHeight(ctx), text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, fontSize: (_d, ctx) => getTitleFontSize(ctx), lineHeight: (_d, ctx) => getTitleLineHeight(ctx), fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top' }, (_b = spec.title) === null || _b === void 0 ? void 0 : _b.style) })
                 : null,
             contentText.length
-                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY + 4, width: (_d, ctx) => getClockTextRect(spec, ctx, index).width, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, text: buildRichContent(contentText, spec), fontSize: CLOCK_CONTENT_FONT_SIZE, lineHeight: CLOCK_CONTENT_LINE_HEIGHT, fill: '#3a3f4d', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word' }, (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) })
+                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY + 4, width: (_d, ctx) => getClockTextRect(spec, ctx, index).width, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, text: buildRichContent(contentText, spec), fontSize: CLOCK_CONTENT_FONT_SIZE, lineHeight: CLOCK_CONTENT_LINE_HEIGHT, fill: '#3a3f4d', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word' }, (_c = spec.content) === null || _c === void 0 ? void 0 : _c.style) })
                 : null
         ];
         return {
             type: 'group',
-            id: `storyline-block-${(_c = block.id) !== null && _c !== void 0 ? _c : index}`,
+            id: `storyline-block-${(_e = block.id) !== null && _e !== void 0 ? _e : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             children: children.filter(Boolean)
@@ -6564,7 +6626,7 @@
         };
     };
     const getDefaultBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         const block = getLayout(spec, ctx).blocks[index];
         const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
         const imagePosition = (_d = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.position) !== null && _d !== void 0 ? _d : 'top';
@@ -6572,19 +6634,21 @@
         const imageHeight = (_h = (_g = spec.image) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : DEFAULT_IMAGE_HEIGHT;
         const imageGap = (_k = (_j = spec.image) === null || _j === void 0 ? void 0 : _j.gap) !== null && _k !== void 0 ? _k : DEFAULT_IMAGE_GAP;
         const hasImage = !!((_m = (_l = spec.data) === null || _l === void 0 ? void 0 : _l[index]) === null || _m === void 0 ? void 0 : _m.image);
-        const titleFontSize = Number((_q = (_p = (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.fontSize) !== null && _q !== void 0 ? _q : 18);
-        const titleLineHeight = Number((_t = (_s = (_r = spec.title) === null || _r === void 0 ? void 0 : _r.style) === null || _s === void 0 ? void 0 : _s.lineHeight) !== null && _t !== void 0 ? _t : Math.round(titleFontSize * 1.35));
-        const titleHeight = ((_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title) ? titleLineHeight : 0;
-        const blockWidth = (_w = block === null || block === void 0 ? void 0 : block.width) !== null && _w !== void 0 ? _w : resolveBlockWidth(spec, 0);
-        const blockHeight = (_z = (_x = block === null || block === void 0 ? void 0 : block.height) !== null && _x !== void 0 ? _x : (_y = spec.block) === null || _y === void 0 ? void 0 : _y.height) !== null && _z !== void 0 ? _z : DEFAULT_BLOCK_HEIGHT;
+        const blockWidth = (_o = block === null || block === void 0 ? void 0 : block.width) !== null && _o !== void 0 ? _o : resolveBlockWidth(spec, 0);
+        const blockHeight = (_r = (_p = block === null || block === void 0 ? void 0 : block.height) !== null && _p !== void 0 ? _p : (_q = spec.block) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : DEFAULT_BLOCK_HEIGHT;
         const imageBox = getImageBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
         const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const contentGap = ((_1 = (_0 = spec.data) === null || _0 === void 0 ? void 0 : _0[index]) === null || _1 === void 0 ? void 0 : _1.title) ? 8 : 0;
+        const titleFontSize = resolveTitleFontSize(spec, ctx, (_t = (_s = spec.data) === null || _s === void 0 ? void 0 : _s[index]) === null || _t === void 0 ? void 0 : _t.title, textBox.width, 18, [8, 28]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_u = spec.title) === null || _u === void 0 ? void 0 : _u.style, Math.round(18 * 1.35));
+        const titleHeight = ((_w = (_v = spec.data) === null || _v === void 0 ? void 0 : _v[index]) === null || _w === void 0 ? void 0 : _w.title) ? titleLineHeight : 0;
+        const contentGap = ((_y = (_x = spec.data) === null || _x === void 0 ? void 0 : _x[index]) === null || _y === void 0 ? void 0 : _y.title) ? 8 : 0;
         return {
             block: {
                 width: blockWidth,
                 height: blockHeight
             },
+            titleFontSize,
+            titleLineHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -6594,14 +6658,12 @@
         };
     };
     const buildDefaultBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
-        const titleLineHeight = Number((_f = (_e = (_d = spec.title) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null && _f !== void 0 ? _f : Math.round(titleFontSize * 1.35));
         return {
             type: 'group',
-            id: `storyline-block-${(_g = block.id) !== null && _g !== void 0 ? _g : index}`,
+            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -6611,26 +6673,34 @@
                 height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height
             },
             children: [
-                ((_h = spec.block) === null || _h === void 0 ? void 0 : _h.showBackground) === true
+                ((_b = spec.block) === null || _b === void 0 ? void 0 : _b.showBackground) === true
                     ? {
                         type: 'rect',
                         name: `storyline-block-bg-${index}`,
                         interactive: false,
-                        style: Object.assign({ x: 0, y: 0, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_j = spec.block) === null || _j === void 0 ? void 0 : _j.style)
+                        style: Object.assign({ x: 0, y: 0, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_c = spec.block) === null || _c === void 0 ? void 0 : _c.style)
+                    }
+                    : null,
+                shouldShowImageBackground(spec)
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        style: Object.assign(Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: 8 }, getImageBackgroundStyle(spec)), (_d = spec.block) === null || _d === void 0 ? void 0 : _d.style)
                     }
                     : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_k = spec.image) === null || _k === void 0 ? void 0 : _k.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_e = spec.image) === null || _e === void 0 ? void 0 : _e.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_l = spec.title) === null || _l === void 0 ? void 0 : _l.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).titleFontSize, lineHeight: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_f = spec.title) === null || _f === void 0 ? void 0 : _f.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec, {
                                 fontSize: 18,
                                 lineHeight: 26,
                                 fill: '#596173'
-                            }), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) })
+                            }), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
                     : null
             ].filter(Boolean)
         };
@@ -6750,14 +6820,14 @@
             ]
         };
     };
-    const getLandscapeMetrics = (spec, blockWidth, blockHeight, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const getLandscapeMetrics = (spec, blockWidth, blockHeight, index, ctx) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
-        const titleFontSize = Number((_f = (_e = (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 26);
-        const titleLineHeight = Number((_j = (_h = (_g = spec.title) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : Math.max(LANDSCAPE_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_m = (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fontSize) !== null && _m !== void 0 ? _m : LANDSCAPE_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_q = (_p = (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.lineHeight) !== null && _q !== void 0 ? _q : LANDSCAPE_CONTENT_LINE_HEIGHT);
-        const imageHeight = Math.max((_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : Math.round(blockHeight * LANDSCAPE_IMAGE_HEIGHT_RATIO), titleLineHeight + padding.top + padding.bottom);
+        const titleFontSize = resolveTitleFontSize(spec, ctx, (_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c[index]) === null || _e === void 0 ? void 0 : _e.title, blockWidth, 26, [8, 34]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_f = spec.title) === null || _f === void 0 ? void 0 : _f.style, LANDSCAPE_TITLE_LINE_HEIGHT);
+        const contentFontSize = Number((_j = (_h = (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.fontSize) !== null && _j !== void 0 ? _j : LANDSCAPE_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_m = (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.lineHeight) !== null && _m !== void 0 ? _m : LANDSCAPE_CONTENT_LINE_HEIGHT);
+        const imageHeight = Math.max((_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : Math.round(blockHeight * LANDSCAPE_IMAGE_HEIGHT_RATIO), titleLineHeight + padding.top + padding.bottom);
         const connectorGap = LANDSCAPE_DETACHED_GAP;
         const canvasHeight = spec.height;
         const contentHeight = canvasHeight
@@ -6828,27 +6898,25 @@
         };
     };
     const buildLandscapeBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 26);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.round(titleFontSize * 1.35));
         const getMetrics = (ctx) => {
             var _a, _b, _c, _e;
             const layoutBlock = getLayout(spec, ctx).blocks[index];
             const w = (_a = layoutBlock === null || layoutBlock === void 0 ? void 0 : layoutBlock.width) !== null && _a !== void 0 ? _a : resolveBlockWidth(spec, 0);
             const h = (_e = (_b = layoutBlock === null || layoutBlock === void 0 ? void 0 : layoutBlock.height) !== null && _b !== void 0 ? _b : (_c = spec.block) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_HEIGHT;
-            return getLandscapeMetrics(spec, w, h, index);
+            return getLandscapeMetrics(spec, w, h, index, ctx);
         };
-        const blockStyle = (_j = (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {};
-        const lineStyle = (_l = (_k = spec.line) === null || _k === void 0 ? void 0 : _k.style) !== null && _l !== void 0 ? _l : {};
+        const blockStyle = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
+        const lineStyle = (_e = (_c = spec.line) === null || _c === void 0 ? void 0 : _c.style) !== null && _e !== void 0 ? _e : {};
         const themeColor = getThemeColor(spec);
-        const connectorStroke = (_m = lineStyle.stroke) !== null && _m !== void 0 ? _m : themeColor;
-        const connectorLineWidth = (_o = lineStyle.lineWidth) !== null && _o !== void 0 ? _o : 2;
-        const connectorDash = (_p = lineStyle.lineDash) !== null && _p !== void 0 ? _p : [4, 4];
+        const connectorStroke = (_f = lineStyle.stroke) !== null && _f !== void 0 ? _f : themeColor;
+        const connectorLineWidth = (_g = lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 2;
+        const connectorDash = (_h = lineStyle.lineDash) !== null && _h !== void 0 ? _h : [4, 4];
         return {
             type: 'group',
-            id: `storyline-block-${(_q = block.id) !== null && _q !== void 0 ? _q : index}`,
+            id: `storyline-block-${(_j = block.id) !== null && _j !== void 0 ? _j : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -6870,14 +6938,16 @@
                 height: (_d, ctx) => getMetrics(ctx).groupHeight
             },
             children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-image-bg-${index}`,
-                    interactive: false,
-                    style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
-                },
+                shouldShowImageBackground(spec)
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        style: Object.assign(Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8 }, getImageBackgroundStyle(spec)), blockStyle)
+                    }
+                    : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_r = spec.image) === null || _r === void 0 ? void 0 : _r.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, (_k = spec.image) === null || _k === void 0 ? void 0 : _k.style) })
                     : null,
                 {
                     type: 'path',
@@ -6903,26 +6973,26 @@
                     }
                 },
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_s = spec.title) === null || _s === void 0 ? void 0 : _s.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: (_d, ctx) => getMetrics(ctx).titleFontSize, lineHeight: (_d, ctx) => getMetrics(ctx).titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_l = spec.title) === null || _l === void 0 ? void 0 : _l.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec, {
                                 fontSize: LANDSCAPE_CONTENT_FONT_SIZE,
                                 lineHeight: LANDSCAPE_CONTENT_LINE_HEIGHT,
                                 fill: '#596173'
-                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_t = spec.content) === null || _t === void 0 ? void 0 : _t.style) })
+                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) })
                     : null
             ].filter(Boolean)
         };
     };
 
     const PORTRAIT_AXIS_WIDTH = 96;
-    const PORTRAIT_AXIS_PADDING = 50;
+    const PORTRAIT_AXIS_PADDING = 120;
     const PORTRAIT_MARKER_FONT_SIZE = 40;
     const PORTRAIT_MARKER_LINE_HEIGHT = 28;
     const PORTRAIT_MARKER_AXIS_PADDING = 6;
     const PORTRAIT_IMAGE_HEIGHT_RATIO = 0.6;
-    const PORTRAIT_CONTENT_HEIGHT_RATIO = 1;
+    const PORTRAIT_CONTENT_HEIGHT_RATIO = 1.25;
     const PORTRAIT_IMAGE_GAP_FROM_AXIS = 24;
     const PORTRAIT_SHADOW_OFFSET_X = 24;
     const PORTRAIT_SHADOW_OFFSET_Y = 16;
@@ -6933,27 +7003,10 @@
     const PORTRAIT_CONTENT_LINE_HEIGHT = 26;
     const PORTRAIT_CONTENT_FONT_SIZE = 18;
     const PORTRAIT_TITLE_TO_CONTENT_GAP = 4;
-    const getPortraitAxisRect = (spec, ctx) => {
-        const blocks = getLayout(spec, ctx).blocks;
-        if (!blocks.length) {
-            return { x: 0, y: 0, width: 0, height: 0 };
-        }
-        const firstCy = blocks[0].center.y;
-        const lastCy = blocks[blocks.length - 1].center.y;
-        const top = Math.min(firstCy, lastCy);
-        const bottom = Math.max(firstCy, lastCy);
-        const cx = blocks[0].center.x;
-        return {
-            x: cx - PORTRAIT_AXIS_WIDTH / 2,
-            y: top - PORTRAIT_AXIS_PADDING,
-            width: PORTRAIT_AXIS_WIDTH,
-            height: bottom - top + PORTRAIT_AXIS_PADDING * 2
-        };
-    };
     const buildPortraitAxisMark = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const themeColor = getThemeColor(spec);
-        const lineStyle = (_b = (_a = spec.line) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k;
+        const themeColor = (_a = spec.themeColor) !== null && _a !== void 0 ? _a : '#e8543d';
+        const lineStyle = (_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {};
         const defaultFill = {
             gradient: 'linear',
             x0: 0,
@@ -6965,11 +7018,9 @@
                 { offset: 1, color: withAlpha(themeColor, 1) }
             ]
         };
-        const markerFontSize = Number((_f = (_e = (_c = spec.marker) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : PORTRAIT_MARKER_FONT_SIZE);
-        const markerLineHeight = Number((_j = (_h = (_g = spec.marker) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : PORTRAIT_MARKER_LINE_HEIGHT);
-        const markerVisible = ((_k = spec.marker) === null || _k === void 0 ? void 0 : _k.visible) !== false;
+        const markerVisible = ((_e = spec.marker) === null || _e === void 0 ? void 0 : _e.visible) !== false;
         const markerMarks = markerVisible
-            ? ((_l = spec.data) !== null && _l !== void 0 ? _l : [])
+            ? ((_f = spec.data) !== null && _f !== void 0 ? _f : [])
                 .map((block, index) => {
                 var _a;
                 if (!block.marker) {
@@ -6989,15 +7040,21 @@
                             var _a, _b;
                             const lb = getLayout(spec, ctx).blocks[index];
                             return (_b = (_a = lb === null || lb === void 0 ? void 0 : lb.center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
-                        }, text: {
-                            type: 'rich',
-                            text: block.marker.split('').map((char, i, arr) => ({
-                                text: char + (i < arr.length - 1 ? '\n' : ''),
-                                fontSize: markerFontSize,
-                                lineHeight: markerLineHeight,
-                                fill: '#fff',
-                                align: markerTextAlign
-                            }))
+                        }, text: (_d, ctx) => {
+                            var _a, _b, _c;
+                            const axis = getPortraitAxisRect(spec, ctx);
+                            const markerFontSize = resolveMarkerFontSize(spec, ctx, block.marker, axis.height / Math.max((_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1, 1), PORTRAIT_MARKER_FONT_SIZE);
+                            const markerLineHeight = resolveAdaptiveLineHeight(markerFontSize, (_c = spec.marker) === null || _c === void 0 ? void 0 : _c.style, PORTRAIT_MARKER_LINE_HEIGHT, 0.9);
+                            return {
+                                type: 'rich',
+                                text: block.marker.split('').map((char, i, arr) => ({
+                                    text: char + (i < arr.length - 1 ? '\n' : ''),
+                                    fontSize: markerFontSize,
+                                    lineHeight: markerLineHeight,
+                                    fill: '#fff',
+                                    align: markerTextAlign
+                                }))
+                            };
                         }, fontWeight: 'bold', lineJoin: 'round', shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 8, shadowOffsetX: 0, shadowOffsetY: 5, textAlign: markerTextAlign, textBaseline: 'middle' }, (_a = spec.marker) === null || _a === void 0 ? void 0 : _a.style) });
             })
                 .filter(Boolean)
@@ -7012,10 +7069,10 @@
                     name: 'storyline-portrait-axis-rect',
                     interactive: false,
                     style: {
-                        fill: (_m = lineStyle.fill) !== null && _m !== void 0 ? _m : defaultFill,
-                        stroke: (_o = lineStyle.stroke) !== null && _o !== void 0 ? _o : false,
-                        lineWidth: (_p = lineStyle.lineWidth) !== null && _p !== void 0 ? _p : 0,
-                        cornerRadius: (_q = lineStyle.cornerRadius) !== null && _q !== void 0 ? _q : 0,
+                        fill: (_g = lineStyle.fill) !== null && _g !== void 0 ? _g : defaultFill,
+                        stroke: (_h = lineStyle.stroke) !== null && _h !== void 0 ? _h : false,
+                        lineWidth: (_j = lineStyle.lineWidth) !== null && _j !== void 0 ? _j : 0,
+                        cornerRadius: (_k = lineStyle.cornerRadius) !== null && _k !== void 0 ? _k : 0,
                         x: (_d, ctx) => getPortraitAxisRect(spec, ctx).x,
                         y: (_d, ctx) => getPortraitAxisRect(spec, ctx).y,
                         width: (_d, ctx) => getPortraitAxisRect(spec, ctx).width,
@@ -7026,15 +7083,15 @@
             ]
         };
     };
-    const getPortraitMetrics = (spec, blockWidth, blockHeight, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 26);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : PORTRAIT_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : PORTRAIT_CONTENT_LINE_HEIGHT);
+    const getPortraitMetrics = (spec, blockWidth, blockHeight, index, ctx) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const contentFontSize = Number((_c = (_b = (_a = spec.content) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : PORTRAIT_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_g = (_f = (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : PORTRAIT_CONTENT_LINE_HEIGHT);
         const titleToContentGap = PORTRAIT_TITLE_TO_CONTENT_GAP;
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : Math.max(blockWidth, 80);
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : Math.round(blockHeight * PORTRAIT_IMAGE_HEIGHT_RATIO);
+        const imageWidth = (_j = (_h = spec.image) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : Math.max(blockWidth, 80);
+        const imageHeight = (_l = (_k = spec.image) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : Math.round(blockHeight * PORTRAIT_IMAGE_HEIGHT_RATIO);
+        const titleFontSize = resolveTitleFontSize(spec, ctx, (_o = (_m = spec.data) === null || _m === void 0 ? void 0 : _m[index]) === null || _o === void 0 ? void 0 : _o.title, imageWidth, 26, [8, 34]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_p = spec.title) === null || _p === void 0 ? void 0 : _p.style, PORTRAIT_TITLE_LINE_HEIGHT);
         const minContentHeight = PORTRAIT_CONTENT_LINES * contentLineHeight;
         const contentHeight = Math.max(minContentHeight, Math.round(blockHeight * PORTRAIT_CONTENT_HEIGHT_RATIO));
         const textHeight = titleLineHeight + titleToContentGap + contentHeight;
@@ -7078,25 +7135,44 @@
             contentBox
         };
     };
+    const getPortraitAxisRect = (spec, ctx) => {
+        const blocks = getLayout(spec, ctx).blocks;
+        if (!blocks.length) {
+            return { x: 0, y: 0, width: 0, height: 0 };
+        }
+        let top = Number.POSITIVE_INFINITY;
+        let bottom = Number.NEGATIVE_INFINITY;
+        blocks.forEach((block, index) => {
+            const metrics = getPortraitMetrics(spec, block.width, block.height, index, ctx);
+            const localTop = Math.min(metrics.imageBox.y, metrics.shadowBox.y, metrics.textBox.y, metrics.contentBox.y);
+            const localBottom = Math.max(metrics.imageBox.y + metrics.imageBox.height, metrics.shadowBox.y + metrics.shadowBox.height, metrics.textBox.y + metrics.textBox.height, metrics.contentBox.y + metrics.contentBox.height);
+            top = Math.min(top, block.center.y + localTop);
+            bottom = Math.max(bottom, block.center.y + localBottom);
+        });
+        const cx = blocks[0].center.x;
+        return {
+            x: cx - PORTRAIT_AXIS_WIDTH / 2,
+            y: top - PORTRAIT_AXIS_PADDING,
+            width: PORTRAIT_AXIS_WIDTH,
+            height: bottom - top + PORTRAIT_AXIS_PADDING * 2
+        };
+    };
     const buildPortraitBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _e, _f, _g;
         const hasImage = !!block.image;
         const hasSubImage = !!block.subImage;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 26);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
         const getMetrics = (ctx) => {
             var _a, _b, _c, _e;
             const lb = getLayout(spec, ctx).blocks[index];
             const w = (_a = lb === null || lb === void 0 ? void 0 : lb.width) !== null && _a !== void 0 ? _a : resolveBlockWidth(spec, 0);
             const h = (_e = (_b = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _b !== void 0 ? _b : (_c = spec.block) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_HEIGHT;
-            return getPortraitMetrics(spec, w, h, index);
+            return getPortraitMetrics(spec, w, h, index, ctx);
         };
-        const themeColor = getThemeColor(spec);
-        const blockStyle = (_j = (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {};
+        const blockStyle = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
         return {
             type: 'group',
-            id: `storyline-block-${(_k = block.id) !== null && _k !== void 0 ? _k : index}`,
+            id: `storyline-block-${(_c = block.id) !== null && _c !== void 0 ? _c : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7125,31 +7201,31 @@
                             image: block.subImage,
                             repeatX: 'no-repeat',
                             repeatY: 'no-repeat',
-                            imageMode: 'cover',
+                            imageMode: 'contain',
                             imagePosition: 'center'
                         }
                     }
                     : null,
-                ((_l = spec.image) === null || _l === void 0 ? void 0 : _l.showBackground) === true
+                shouldShowImageBackground(spec)
                     ? {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
                         interactive: false,
-                        style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
+                        style: Object.assign(Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8 }, getImageBackgroundStyle(spec)), blockStyle)
                     }
                     : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_m = spec.image) === null || _m === void 0 ? void 0 : _m.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, (_e = spec.image) === null || _e === void 0 ? void 0 : _e.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: (_d, ctx) => getMetrics(ctx).titleFontSize, lineHeight: (_d, ctx) => getMetrics(ctx).titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_f = spec.title) === null || _f === void 0 ? void 0 : _f.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec, {
                                 fontSize: PORTRAIT_CONTENT_FONT_SIZE,
                                 lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT,
                                 fill: '#596173'
-                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style) })
+                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7167,18 +7243,19 @@
     const ARC_TITLE_TO_CONTENT_GAP = 4;
     const ARC_TEXT_PADDING = 20;
     const ARC_TEXT_BOX_MIN_WIDTH = 240;
-    const ARC_CENTER_IMAGE_SIZE_RATIO = 0.55;
-    const ARC_CENTER_IMAGE_TO_SYMBOL_RATIO = 0.8;
-    const ARC_GAP_FROM_CENTER_IMAGE = 200;
+    const ARC_TITLE_IMAGE_WIDTH_RATIO = 0.68;
+    const ARC_TITLE_IMAGE_MAX_WIDTH = 900;
+    const ARC_TITLE_IMAGE_HEIGHT_RATIO = 0.34;
+    const ARC_GAP_FROM_TITLE_IMAGE = 200;
     const isDownArc = (spec) => normalizeLayout(spec.layout).direction === 'down';
-    const getArcCenterImageRect = (spec, ctx) => {
+    const getArcTitleImageRect = (spec, ctx) => {
         var _a, _b, _c, _e;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
         const innerWidth = Math.max(width, 1);
         const innerHeight = Math.max(height, 1);
-        const baseSize = Math.min(innerWidth, innerHeight) * ARC_CENTER_IMAGE_SIZE_RATIO;
-        const w = Math.max((_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : baseSize, 80);
-        const h = Math.max((_e = (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : baseSize, 80);
+        const baseWidth = Math.min(innerWidth * ARC_TITLE_IMAGE_WIDTH_RATIO, ARC_TITLE_IMAGE_MAX_WIDTH);
+        const w = Math.max((_b = (_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : baseWidth, 80);
+        const h = Math.max((_e = (_c = spec.titleImage) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : w * ARC_TITLE_IMAGE_HEIGHT_RATIO, 40);
         const cx = startX + innerWidth / 2;
         const isDown = isDownArc(spec);
         const top = isDown ? startY : startY + innerHeight - h;
@@ -7195,20 +7272,20 @@
         const endAngle = (_b = layoutOpt.endAngle) !== null && _b !== void 0 ? _b : (isDown ? 160 : 340);
         const ratio = (_c = layoutOpt.radiusRatio) !== null && _c !== void 0 ? _c : 0.88;
         const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
-        const centerRect = getArcCenterImageRect(spec, ctx);
-        const centerTop = centerRect.y;
-        const centerBottom = centerRect.y + centerRect.height;
+        const titleImageRect = getArcTitleImageRect(spec, ctx);
+        const centerTop = titleImageRect.y;
+        const centerBottom = titleImageRect.y + titleImageRect.height;
         const sinStart = Math.sin((startAngle / 180) * Math.PI);
         let cy;
         let ry;
         if (isDown) {
             const denom = Math.max(1 - sinStart, 0.05);
-            ry = (centerRect.height + ARC_GAP_FROM_CENTER_IMAGE) / denom;
+            ry = (titleImageRect.height + ARC_GAP_FROM_TITLE_IMAGE) / denom;
             cy = centerTop - ry * sinStart;
         }
         else {
             const denom = Math.max(1 + sinStart, 0.05);
-            ry = (centerRect.height + ARC_GAP_FROM_CENTER_IMAGE) / denom;
+            ry = (titleImageRect.height + ARC_GAP_FROM_TITLE_IMAGE) / denom;
             cy = centerBottom - ry * sinStart;
         }
         return {
@@ -7282,121 +7359,45 @@
             ]
         };
     };
-    const buildArcCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        const visible = ((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) !== false;
-        if (!visible) {
+    const buildArcTitleImageMark = (spec) => {
+        var _a;
+        if (!((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || spec.titleImage.visible === false) {
             return null;
         }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        const symbolGradient = {
-            gradient: 'linear',
-            x0: 0.5,
-            y0: 0,
-            x1: 0.5,
-            y1: 1,
-            stops: [
-                { offset: 0, color: withAlpha(themeColor, 0.15) },
-                { offset: 1, color: themeColor }
-            ]
-        };
         return {
             type: 'group',
-            name: 'storyline-arc-center',
-            zIndex: vchart.LayoutZIndex.Mark,
+            name: 'storyline-arc-title-image',
+            zIndex: vchart.LayoutZIndex.Mark + 6,
             children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-arc-center-symbol',
-                    interactive: false,
-                    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({ type: 'image', name: 'storyline-arc-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getArcCenterImageRect(spec, ctx);
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number'
-                                    ? userWidth
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                                return r.x + (r.width - w) / 2;
-                            }, y: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getArcCenterImageRect(spec, ctx);
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number'
-                                    ? userHeight
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                                return r.y + (r.height - h) / 2;
-                            }, width: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getArcCenterImageRect(spec, ctx);
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                return typeof userWidth === 'number'
-                                    ? userWidth
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                            }, height: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getArcCenterImageRect(spec, ctx);
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                return typeof userHeight === 'number'
-                                    ? userHeight
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                            }, cornerRadius: (_d, ctx) => {
-                                var _a, _b, _c, _e;
-                                const r = getArcCenterImageRect(spec, ctx);
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const userHeight = (_e = (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.height;
-                                const w = typeof userWidth === 'number'
-                                    ? userWidth
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                                const h = typeof userHeight === 'number'
-                                    ? userHeight
-                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
-                                return Math.max(w, h) / 2;
-                            }, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.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];
-                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
+                Object.assign(Object.assign({ type: 'image', name: 'storyline-arc-title-image-node', interactive: false }, spec.titleImage), { style: Object.assign({ x: (_d, ctx) => {
+                            return getArcTitleImageRect(spec, ctx).x;
+                        }, y: (_d, ctx) => {
+                            return getArcTitleImageRect(spec, ctx).y;
+                        }, width: (_d, ctx) => {
+                            return getArcTitleImageRect(spec, ctx).width;
+                        }, height: (_d, ctx) => {
+                            return getArcTitleImageRect(spec, ctx).height;
+                        }, image: spec.titleImage.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, spec.titleImage.style) })
+            ]
         };
     };
     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((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : ARC_TITLE_FONT_SIZE);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(ARC_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : ARC_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : ARC_CONTENT_LINE_HEIGHT);
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        const contentFontSize = Number((_c = (_b = (_a = spec.content) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : ARC_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_g = (_f = (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : ARC_CONTENT_LINE_HEIGHT);
         const titleToContentGap = ARC_TITLE_TO_CONTENT_GAP;
-        const textHeight = ARC_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageDiameter = Math.max((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : ARC_BLOCK_IMAGE_SIZE, (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : ARC_BLOCK_IMAGE_SIZE);
+        const imageDiameter = Math.max((_j = (_h = spec.image) === null || _h === void 0 ? void 0 : _h.width) !== null && _j !== void 0 ? _j : ARC_BLOCK_IMAGE_SIZE, (_l = (_k = spec.image) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : ARC_BLOCK_IMAGE_SIZE);
         const imageWidth = imageDiameter;
         const imageHeight = imageDiameter;
         const isDown = isDownArc(spec);
-        const count = Math.max((_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 0, 1);
-        const canvasWidth = Number((_v = spec.width) !== null && _v !== void 0 ? _v : imageWidth * count);
+        const count = Math.max((_o = (_m = spec.data) === null || _m === void 0 ? void 0 : _m.length) !== null && _o !== void 0 ? _o : 0, 1);
+        const canvasWidth = Number((_p = spec.width) !== null && _p !== void 0 ? _p : imageWidth * count);
         const defaultTextWidth = Math.round(canvasWidth / (count + 1));
-        const textBoxWidth = Math.max(Number((_x = (_w = spec.block) === null || _w === void 0 ? void 0 : _w.width) !== null && _x !== void 0 ? _x : defaultTextWidth), ARC_TEXT_BOX_MIN_WIDTH);
+        const textBoxWidth = Math.max(Number((_r = (_q = spec.block) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : defaultTextWidth), ARC_TEXT_BOX_MIN_WIDTH);
+        const titleFontSize = resolveTitleFontSize(spec, undefined, (_t = (_s = spec.data) === null || _s === void 0 ? void 0 : _s[index]) === null || _t === void 0 ? void 0 : _t.title, textBoxWidth, ARC_TITLE_FONT_SIZE, [8, 40]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_u = spec.title) === null || _u === void 0 ? void 0 : _u.style, ARC_TITLE_LINE_HEIGHT);
+        const textHeight = ARC_TEXT_BOX_HEIGHT;
+        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
         const isLeftSide = index < count / 2;
         const textAlign = isLeftSide ? 'right' : 'left';
         const imageBox = {
@@ -7431,7 +7432,7 @@
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f;
+        var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
@@ -7466,23 +7467,15 @@
                     }
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 3 }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 3 }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
                     : {
                         type: 'symbol',
                         name: `storyline-block-image-bg-${index}`,
                         interactive: false,
                         zIndex: vchart.LayoutZIndex.Mark + 3,
-                        style: {
-                            x: 0,
-                            y: 0,
-                            size: Math.min(metrics.imageBox.width, metrics.imageBox.height),
-                            symbolType: 'circle',
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
+                        style: Object.assign({ x: 0, y: 0, size: Math.min(metrics.imageBox.width, metrics.imageBox.height), symbolType: 'circle' }, getImageBackgroundStyle(spec))
                     },
-                ((_c = spec.image) === null || _c === void 0 ? void 0 : _c.showBackground) === true
+                shouldShowImageBackground(spec)
                     ? {
                         type: 'symbol',
                         name: `storyline-block-image-halo-${index}`,
@@ -7494,13 +7487,13 @@
                             size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + ARC_BLOCK_IMAGE_HALO_PADDING * 2,
                             symbolType: 'circle',
                             fill: 'transparent',
-                            stroke: themeColor,
+                            stroke: withAlpha(themeColor, 0.82),
                             lineWidth: ARC_BLOCK_IMAGE_BORDER
                         }
                     }
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 5 }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.textAlign, textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 5 }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.textAlign, textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 4 }, spec.content), { textType: 'rich', style: Object.assign({ 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, {
@@ -7508,7 +7501,7 @@
                                 lineHeight: metrics.contentLineHeight,
                                 fill: '#596173',
                                 align: metrics.textAlign
-                            }), textAlign: metrics.textAlign, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
+                            }), textAlign: metrics.textAlign, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7522,9 +7515,10 @@
     const WING_TEXT_BOX_WIDTH = 240;
     const WING_TEXT_BOX_HEIGHT = 110;
     const WING_TITLE_TO_CONTENT_GAP = 4;
+    const WING_TITLE_IMAGE_WIDTH_RATIO = 0.6;
+    const WING_TITLE_IMAGE_MAX_WIDTH = 820;
     const getWingDirection = (spec) => {
-        var _a;
-        return (_a = normalizeLayout(spec.layout).direction) !== null && _a !== void 0 ? _a : 'left';
+        return normalizeLayout(spec.layout).direction === 'right' ? 'right' : 'left';
     };
     const getWingArcGeometry = (spec, ctx) => {
         var _a, _b, _c;
@@ -7623,18 +7617,53 @@
             ]
         };
     };
+    const buildWingTitleImageMark = (spec) => {
+        var _a;
+        if (!((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || spec.titleImage.visible === false) {
+            return null;
+        }
+        return {
+            type: 'group',
+            name: 'storyline-wing-title-image',
+            zIndex: vchart.LayoutZIndex.Mark + 8,
+            children: [
+                Object.assign(Object.assign({ type: 'image', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { style: Object.assign({ x: (_d, ctx) => {
+                            const { width, height, startX } = getChartGeometry(ctx, spec);
+                            const size = getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            });
+                            return getWingDirection(spec) === 'right' ? startX : startX + width - size.width;
+                        }, y: (_d, ctx) => {
+                            return getChartGeometry(ctx, spec).startY + 12;
+                        }, width: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).width;
+                        }, height: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).height;
+                        }, image: spec.titleImage.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, spec.titleImage.style) })
+            ]
+        };
+    };
     const WING_TEXT_IMAGE_GAP = 120;
     const getWingBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : WING_TITLE_FONT_SIZE);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(WING_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.3)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : WING_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : WING_CONTENT_LINE_HEIGHT);
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const titleFontSize = resolveTitleFontSize(spec, ctx, (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.title, WING_TEXT_BOX_WIDTH, WING_TITLE_FONT_SIZE, [8, 30]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style, WING_TITLE_LINE_HEIGHT, 1.3);
+        const contentFontSize = Number((_g = (_f = (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fontSize) !== null && _g !== void 0 ? _g : WING_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : WING_CONTENT_LINE_HEIGHT);
         const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
         const textHeight = WING_TEXT_BOX_HEIGHT;
         const contentHeight = 100000;
-        const imageWidth = Number((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE);
-        const imageHeight = Number((_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE);
+        const imageWidth = Number((_m = (_l = spec.image) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : WING_BLOCK_IMAGE_SIZE);
+        const imageHeight = Number((_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : WING_BLOCK_IMAGE_SIZE);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
@@ -7642,7 +7671,7 @@
             height: imageHeight
         };
         const direction = getWingDirection(spec);
-        const count = (_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 0;
+        const count = (_r = (_q = spec.data) === null || _q === void 0 ? void 0 : _q.length) !== null && _r !== void 0 ? _r : 0;
         const isSpecialBelow = (direction === 'right' && count > 0 && index === count - 1) || (direction === 'left' && index === 0);
         const isVerticalLayout = isSpecialBelow;
         const textWidth = WING_TEXT_BOX_WIDTH;
@@ -7706,14 +7735,14 @@
         };
     };
     const buildWingBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f;
+        var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const showBackground = ((_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
+        const showBackground = shouldShowImageBackground(spec);
         return {
             type: 'group',
-            id: `storyline-block-${(_b = block.id) !== null && _b !== void 0 ? _b : index}`,
+            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7740,33 +7769,16 @@
                         type: 'symbol',
                         name: `storyline-block-image-halo-${index}`,
                         interactive: false,
-                        style: {
-                            x: 0,
-                            y: 0,
-                            size: (_d, ctx) => Math.max(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) + 12,
-                            symbolType: 'circle',
-                            fill: withAlpha(themeColor, 0.18),
-                            stroke: themeColor,
-                            lineWidth: 1.5
-                        }
+                        style: Object.assign(Object.assign({ x: 0, y: 0, size: (_d, ctx) => Math.max(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) + 12, symbolType: 'circle' }, getImageBackgroundStyle(spec)), { lineWidth: 1.5 })
                     }
                     : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_c = spec.image) === null || _c === void 0 ? void 0 : _c.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
                     : {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
                         interactive: false,
-                        style: {
-                            x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x,
-                            y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y,
-                            width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width,
-                            height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height,
-                            cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2,
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
+                        style: Object.assign({ x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2 }, getImageBackgroundStyle(spec))
                     },
                 block.title
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: (_d, ctx) => {
@@ -7781,7 +7793,7 @@
                                     return 'center';
                                 }
                                 return m.onLeft ? 'right' : 'left';
-                            }, textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
+                            }, textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => {
@@ -7796,7 +7808,7 @@
                                     return 'center';
                                 }
                                 return m.onLeft ? 'right' : 'left';
-                            }, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
+                            }, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7908,7 +7920,7 @@
     };
     const isOnLeft = (index) => index % 2 === 1;
     const getLadderBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         const block = getLayout(spec, ctx).blocks[index];
         const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
         const imagePosition = isOnLeft(index) ? 'right' : 'left';
@@ -7916,16 +7928,18 @@
         const imageHeight = (_g = (_f = spec.image) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : LADDER_BLOCK_IMAGE_SIZE;
         const imageGap = (_j = (_h = spec.image) === null || _h === void 0 ? void 0 : _h.gap) !== null && _j !== void 0 ? _j : DEFAULT_IMAGE_GAP;
         const hasImage = !!((_l = (_k = spec.data) === null || _k === void 0 ? void 0 : _k[index]) === null || _l === void 0 ? void 0 : _l.image);
-        const titleFontSize = Number((_p = (_o = (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) === null || _o === void 0 ? void 0 : _o.fontSize) !== null && _p !== void 0 ? _p : LADDER_TITLE_FONT_SIZE);
-        const titleLineHeight = Number((_s = (_r = (_q = spec.title) === null || _q === void 0 ? void 0 : _q.style) === null || _r === void 0 ? void 0 : _r.lineHeight) !== null && _s !== void 0 ? _s : Math.round(titleFontSize * (LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE)));
-        const titleHeight = ((_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t[index]) === null || _u === void 0 ? void 0 : _u.title) ? titleLineHeight : 0;
-        const blockWidth = (_v = block === null || block === void 0 ? void 0 : block.width) !== null && _v !== void 0 ? _v : resolveBlockWidth(spec, 0);
-        const blockHeight = (_y = (_w = block === null || block === void 0 ? void 0 : block.height) !== null && _w !== void 0 ? _w : (_x = spec.block) === null || _x === void 0 ? void 0 : _x.height) !== null && _y !== void 0 ? _y : DEFAULT_BLOCK_HEIGHT;
+        const blockWidth = (_m = block === null || block === void 0 ? void 0 : block.width) !== null && _m !== void 0 ? _m : resolveBlockWidth(spec, 0);
+        const blockHeight = (_q = (_o = block === null || block === void 0 ? void 0 : block.height) !== null && _o !== void 0 ? _o : (_p = spec.block) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : DEFAULT_BLOCK_HEIGHT;
         const imageBox = getImageBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
         const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const contentGap = ((_0 = (_z = spec.data) === null || _z === void 0 ? void 0 : _z[index]) === null || _0 === void 0 ? void 0 : _0.title) ? 8 : 0;
+        const titleFontSize = resolveTitleFontSize(spec, ctx, (_s = (_r = spec.data) === null || _r === void 0 ? void 0 : _r[index]) === null || _s === void 0 ? void 0 : _s.title, textBox.width, LADDER_TITLE_FONT_SIZE, [8, 34]);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_t = spec.title) === null || _t === void 0 ? void 0 : _t.style, LADDER_TITLE_LINE_HEIGHT, LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE);
+        const titleHeight = ((_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title) ? titleLineHeight : 0;
+        const contentGap = ((_x = (_w = spec.data) === null || _w === void 0 ? void 0 : _w[index]) === null || _x === void 0 ? void 0 : _x.title) ? 8 : 0;
         return {
             block: { width: blockWidth, height: blockHeight },
+            titleFontSize,
+            titleLineHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -7935,21 +7949,20 @@
         };
     };
     const buildLadderBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _e, _f, _g, _h;
         const hasImage = !!block.image;
         const onLeft = isOnLeft(index);
         const align = onLeft ? 'right' : 'left';
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : LADDER_TITLE_FONT_SIZE);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.round(titleFontSize * (LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE)));
-        const showBackground = ((_h = spec.block) === null || _h === void 0 ? void 0 : _h.showBackground) === true;
+        const showBackground = ((_a = spec.block) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
+        const showImageBackground = shouldShowImageBackground(spec);
         const getTitleX = (ctx) => {
             const m = getLadderBlockMetrics(spec, ctx, index);
             return align === 'right' ? m.textBox.x + m.textBox.width : m.textBox.x;
         };
         return {
             type: 'group',
-            id: `storyline-block-${(_j = block.id) !== null && _j !== void 0 ? _j : index}`,
+            id: `storyline-block-${(_b = block.id) !== null && _b !== void 0 ? _b : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7964,21 +7977,29 @@
                         type: 'rect',
                         name: `storyline-block-bg-${index}`,
                         interactive: false,
-                        style: Object.assign({ x: 0, y: 0, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_k = spec.block) === null || _k === void 0 ? void 0 : _k.style)
+                        style: Object.assign({ x: 0, y: 0, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_c = spec.block) === null || _c === void 0 ? void 0 : _c.style)
+                    }
+                    : null,
+                showImageBackground
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        style: Object.assign(Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: 8 }, getImageBackgroundStyle(spec)), (_e = spec.block) === null || _e === void 0 ? void 0 : _e.style)
                     }
                     : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_f = spec.image) === null || _f === void 0 ? void 0 : _f.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textBaseline: 'top' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style), { textAlign: align }) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).titleFontSize, lineHeight: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textBaseline: 'top' }, (_g = spec.title) === null || _g === void 0 ? void 0 : _g.style), { textAlign: align }) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec, {
                                 fontSize: LADDER_CONTENT_FONT_SIZE,
                                 lineHeight: LADDER_CONTENT_LINE_HEIGHT,
                                 align: align
-                            }), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style), { textAlign: align }) })
+                            }), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style), { textAlign: align }) })
                     : null
             ].filter(Boolean)
         };
@@ -8011,6 +8032,16 @@
         const ladder = isLadder(spec);
         const wing = isWing(spec);
         const clock = isClock(spec);
+        const topTitleImageReserve = (() => {
+            var _a, _b, _c, _d;
+            if (arc ||
+                ladder ||
+                !((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) ||
+                ((_b = spec.titleImage) === null || _b === void 0 ? void 0 : _b.visible) === false) {
+                return 0;
+            }
+            return getTitleImageReservedHeight(spec, Number((_c = spec.width) !== null && _c !== void 0 ? _c : 1000), Number((_d = spec.height) !== null && _d !== void 0 ? _d : 600));
+        })();
         const portraitBottomReserve = (() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if (!portrait) {
@@ -8057,7 +8088,7 @@
             const cap = canvasHeight ? Math.floor(canvasHeight * 0.3) : ideal;
             return Math.min(ideal, cap);
         })();
-        const defaultTop = clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL;
+        const defaultTop = Math.max(topTitleImageReserve, clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
         const defaultBottom = clock
             ? 60
             : portrait
@@ -8088,14 +8119,18 @@
             spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];
             return;
         }
+        if (typeof p === 'number') {
+            spec.padding = [Math.max(p, topTitleImageReserve), p, p, p];
+            return;
+        }
         if (Array.isArray(p)) {
             const [t, r = defaultRight, b, l = defaultLeft] = p;
-            spec.padding = [t !== null && t !== void 0 ? t : defaultTop, r, b !== null && b !== void 0 ? b : defaultBottom, l];
+            spec.padding = [Math.max(t !== null && t !== void 0 ? t : defaultTop, topTitleImageReserve), r, b !== null && b !== void 0 ? b : defaultBottom, l];
             return;
         }
         if (typeof p === 'object') {
             spec.padding = {
-                top: (_a = p.top) !== null && _a !== void 0 ? _a : defaultTop,
+                top: Math.max((_a = p.top) !== null && _a !== void 0 ? _a : defaultTop, topTitleImageReserve),
                 right: (_b = p.right) !== null && _b !== void 0 ? _b : defaultRight,
                 bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : defaultBottom,
                 left: (_d = p.left) !== null && _d !== void 0 ? _d : defaultLeft
@@ -8106,32 +8141,33 @@
         var _a;
         const lineMark = buildLineMark(spec);
         const blockMarks = ((_a = spec.data) !== null && _a !== void 0 ? _a : []).map((block, index) => buildBlockMark(spec, block, index));
+        const titleImageMark = buildTopTitleImageMark(spec);
         if (isLandscape(spec)) {
-            return [...blockMarks, lineMark].filter(Boolean);
+            return [titleImageMark, ...blockMarks, lineMark].filter(Boolean);
         }
         if (isPortrait(spec)) {
-            return [lineMark, ...blockMarks].filter(Boolean);
+            return [lineMark, titleImageMark, ...blockMarks].filter(Boolean);
         }
         if (isArc(spec)) {
-            const centerImageMark = buildArcCenterImageMark(spec);
+            const arcTitleImageMark = buildArcTitleImageMark(spec);
             const arcMark = buildArcMark(spec);
-            return [centerImageMark, arcMark, ...blockMarks].filter(Boolean);
+            return [arcTitleImageMark, arcMark, ...blockMarks].filter(Boolean);
         }
         if (isClock(spec)) {
             const ringsMark = buildClockArcMark(spec);
-            const centerImageMark = buildClockCenterImageMark(spec);
-            return [ringsMark, ...blockMarks, centerImageMark].filter(Boolean);
+            return [titleImageMark, ringsMark, ...blockMarks].filter(Boolean);
         }
         if (isWing(spec)) {
             const arcMark = buildWingArcMark(spec);
-            return [arcMark, ...blockMarks].filter(Boolean);
+            const wingTitleImageMark = buildWingTitleImageMark(spec);
+            return [arcMark, wingTitleImageMark, ...blockMarks].filter(Boolean);
         }
         if (isLadder(spec)) {
             const diagonalMark = buildLadderDiagonalMark(spec);
             const headlineMark = buildLadderHeadlineMark(spec);
             return [diagonalMark, headlineMark, ...blockMarks].filter(Boolean);
         }
-        return [lineMark, ...blockMarks].filter(Boolean);
+        return [titleImageMark, lineMark, ...blockMarks].filter(Boolean);
     };
     const buildLineMark = (spec) => {
         var _a, _b, _c;