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

package/build/index.js

@@ -6078,6 +6078,7 @@
     const DEFAULT_IMAGE_HEIGHT = 48;
     const DEFAULT_IMAGE_GAP = 10;
     const DEFAULT_THEME_COLOR = '#e8543d';
+    const BLOCK_TITLE_MAX_LINES = 2;
     const DEFAULT_TITLE_IMAGE_WIDTH_RATIO = 0.52;
     const DEFAULT_TITLE_IMAGE_MAX_WIDTH = 720;
     const DEFAULT_TITLE_IMAGE_HEIGHT_RATIO = 0.36;
@@ -6093,7 +6094,7 @@
     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 clamp$1 = (value, min, max) => Math.max(min, Math.min(max, value));
     const getTextWeight = (text) => {
         if (!text) {
             return 4;
@@ -6138,9 +6139,11 @@
         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 boxWidthLimit = options.boxWidth && options.boxWidth > 0
+            ? ((options.boxWidth * BLOCK_TITLE_MAX_LINES) / 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));
+        return Math.floor(clamp$1(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]) => {
@@ -6326,27 +6329,18 @@
                     y: block.center.y + startY
                 } }))), 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, _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) => {
-                const suffix = index === contentText.length - 1 ? '' : '\n';
-                result.push({
-                    text: `${paragraph}${suffix}`,
-                    fontSize,
-                    lineHeight,
-                    fill,
-                    align
-                });
-                return result;
-            }, [])
-        };
+    const buildPlainContent = (contentText) => contentText.join('\n');
+    const getBlockTitleLineCount = (title, boxWidth, fontSize) => {
+        if (!title) {
+            return 0;
+        }
+        if (!boxWidth || boxWidth <= 0 || !fontSize || fontSize <= 0) {
+            return 1;
+        }
+        const estimatedWidth = getTextWeight(title) * fontSize;
+        return Math.max(1, Math.min(BLOCK_TITLE_MAX_LINES, Math.ceil(estimatedWidth / Math.max(boxWidth * 0.96, 1))));
     };
+    const getBlockTitleHeight = (lineHeight, title, boxWidth, fontSize) => lineHeight * getBlockTitleLineCount(title, boxWidth, fontSize);
     const omitImageLayoutSpec = (imageSpec) => {
         if (!imageSpec) {
             return {};
@@ -6444,8 +6438,9 @@
     const CLOCK_ORBIT_DASH = [4, 4];
     const CLOCK_TITLE_FONT_SIZE = 22;
     const CLOCK_TITLE_LINE_HEIGHT = 28;
-    const CLOCK_CONTENT_FONT_SIZE = 16;
-    const CLOCK_CONTENT_LINE_HEIGHT = 22;
+    const CLOCK_CONTENT_FONT_SIZE = 14;
+    const CLOCK_CONTENT_LINE_HEIGHT = 20;
+    const CLOCK_CONTENT_LINES = 4;
     const getClockGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
@@ -6455,7 +6450,7 @@
         const cx = startX + padding.left + innerWidth / 2;
         const cy = startY + padding.top + innerHeight / 2;
         const textReserveX = CLOCK_TEXT_MAX_WIDTH;
-        const textReserveY = 4 + CLOCK_CONTENT_LINE_HEIGHT * 4;
+        const textReserveY = 4 + CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES;
         const rMaxX = (innerWidth / 2 - textReserveX) / CLOCK_TEXT_INNER_RATIO;
         const rMaxY = (innerHeight / 2 - textReserveY) / CLOCK_TEXT_INNER_RATIO;
         const R = Math.max(Math.min(rMaxX, rMaxY), 1);
@@ -6539,6 +6534,7 @@
         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 getTitleHeight = (ctx) => getBlockTitleHeight(getTitleLineHeight(ctx), block.title, getClockTextRect(spec, ctx, index).width, getTitleFontSize(ctx));
         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)}`;
@@ -6588,10 +6584,10 @@
                     }
                 },
             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 - 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) })
+                ? 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 - getTitleHeight(ctx), text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, height: (_d, ctx) => getTitleHeight(ctx), heightLimit: (_d, ctx) => getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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' }, (_c = spec.content) === null || _c === void 0 ? void 0 : _c.style) })
+                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-content-${index}`, interactive: false }, spec.content), { 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, height: CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, heightLimit: CLOCK_CONTENT_LINE_HEIGHT * CLOCK_CONTENT_LINES, text: buildPlainContent(contentText), fontSize: CLOCK_CONTENT_FONT_SIZE, lineHeight: CLOCK_CONTENT_LINE_HEIGHT, fill: '#3a3f4d', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word' }, (_c = spec.content) === null || _c === void 0 ? void 0 : _c.style) })
                 : null
         ];
         return {
@@ -6640,7 +6636,7 @@
         const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_w = (_v = spec.data) === null || _v === void 0 ? void 0 : _v[index]) === null || _w === void 0 ? void 0 : _w.title, textBox.width, titleFontSize);
         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: {
@@ -6649,6 +6645,7 @@
             },
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -6693,14 +6690,10 @@
                     ? 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: (_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) })
+                    ? 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, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).titleHeight, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { 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, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, text: buildPlainContent(contentText), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, fontSize: 16, lineHeight: 23, textAlign: 'left', textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
                     : null
             ].filter(Boolean)
         };
@@ -6746,25 +6739,27 @@
     };
 
     const LANDSCAPE_IMAGE_HEIGHT_RATIO = 0.42;
-    const LANDSCAPE_DETACHED_GAP = 64;
+    const LANDSCAPE_CONNECTOR_GAP = 8;
     const LANDSCAPE_CONNECTOR_ARROW_SIZE = 9;
     const LANDSCAPE_CONNECTOR_X_RATIO = 0.2;
     const LANDSCAPE_TEXT_GAP_FROM_CONNECTOR = 12;
-    const LANDSCAPE_CONTENT_LINES = 10;
     const LANDSCAPE_TITLE_LINE_HEIGHT = 34;
-    const LANDSCAPE_CONTENT_LINE_HEIGHT = 26;
-    const LANDSCAPE_CONTENT_FONT_SIZE = 18;
+    const LANDSCAPE_CONTENT_LINE_HEIGHT = 23;
+    const LANDSCAPE_CONTENT_FONT_SIZE = 16;
     const LANDSCAPE_TITLE_TO_CONTENT_GAP = 4;
+    const LANDSCAPE_BODY_MARGIN = 8;
+    const LANDSCAPE_IMAGE_BAND_RATIO = 0.28;
+    const LANDSCAPE_IMAGE_BAND_MAX_RATIO = 0.42;
     const getLandscapeImageCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
         const lb = getLayout(spec, ctx).blocks[index];
         if (!lb) {
             return null;
         }
-        const cx = (_b = (_a = lb.center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : lb.x + lb.width / 2;
-        const cy = (_e = (_c = lb.center) === null || _c === void 0 ? void 0 : _c.y) !== null && _e !== void 0 ? _e : lb.y + lb.height / 2;
-        const stagger = (index % 2 === 0 ? -1 : 1) * lb.height * 0.1;
-        return { x: cx, y: cy + stagger };
+        const m = getLandscapeMetrics(spec, lb.width, lb.height, index, ctx);
+        return {
+            x: lb.x + m.imageBox.x + m.imageBox.width / 2,
+            y: m.bodyOriginY + m.imageBox.y + m.imageBox.height / 2
+        };
     };
     const buildLandscapeConnectingCurve = (spec) => {
         var _a, _b, _c, _e, _f, _g, _h;
@@ -6821,20 +6816,24 @@
         };
     };
     const getLandscapeMetrics = (spec, blockWidth, blockHeight, index, ctx) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
         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
-            ? Math.max(contentLineHeight * 2, Math.round(canvasHeight / 4))
-            : LANDSCAPE_CONTENT_LINES * contentLineHeight;
+        const { width: regionWidth } = getRegionGeometry(ctx, spec);
+        const blockCount = Math.max((_p = (_o = spec.data) === null || _o === void 0 ? void 0 : _o.length) !== null && _p !== void 0 ? _p : 1, 1);
+        const textWidth = Math.max(regionWidth / blockCount, 1);
+        const titleHeight = getBlockTitleHeight(titleLineHeight, (_r = (_q = spec.data) === null || _q === void 0 ? void 0 : _q[index]) === null || _r === void 0 ? void 0 : _r.title, textWidth, titleFontSize);
+        const rawImageHeight = Math.max((_t = (_s = spec.image) === null || _s === void 0 ? void 0 : _s.height) !== null && _t !== void 0 ? _t : Math.round(blockHeight * LANDSCAPE_IMAGE_HEIGHT_RATIO), titleLineHeight + padding.top + padding.bottom);
         const titleToContentGap = LANDSCAPE_TITLE_TO_CONTENT_GAP;
-        const textHeight = titleLineHeight + titleToContentGap + contentHeight;
+        const minTextBandHeight = titleHeight + titleToContentGap + contentLineHeight * 2;
+        const body = getLandscapeBodyGeometry(ctx, spec, rawImageHeight, blockHeight, minTextBandHeight);
+        const imageHeight = body.imageHeight;
+        const textBandHeight = body.textBandHeight;
+        const contentHeight = Math.max(0, textBandHeight - titleHeight - titleToContentGap);
+        const textHeight = titleHeight + titleToContentGap + contentHeight;
         const textOnTop = index % 2 === 0;
         let textBox;
         let contentBox;
@@ -6845,49 +6844,51 @@
         const imageX = 0;
         const connectorX = imageX + blockWidth * LANDSCAPE_CONNECTOR_X_RATIO;
         const textX = connectorX + LANDSCAPE_TEXT_GAP_FROM_CONNECTOR;
-        const textWidth = Math.max(blockWidth - (textX - imageX), 0);
+        const waveOffset = (textOnTop ? -1 : 1) * body.waveAmplitude;
+        const imageY = body.imageBandTop + body.imageBandHeight / 2 + waveOffset - imageHeight / 2;
         if (textOnTop) {
-            const imageY = 0;
-            const textY = imageY - connectorGap - textHeight;
-            const connectorY1 = imageY;
-            const connectorY2 = textY + titleLineHeight / 2;
+            const textY = body.upperTextTop;
+            const connectorY1 = Math.max(imageY - LANDSCAPE_CONNECTOR_GAP, body.upperTextTop);
+            const connectorY2 = textY + Math.max(titleHeight, titleLineHeight) / 2;
             imageBox = { x: imageX, y: imageY, width: blockWidth, height: imageHeight };
             textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
             contentBox = {
                 x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
+                y: textY + titleHeight + titleToContentGap,
                 width: textWidth,
                 height: contentHeight
             };
             connector = { x1: connectorX, y1: connectorY1, x2: connectorX, y2: connectorY2 };
-            groupTop = textY;
-            groupHeight = imageHeight - groupTop;
+            groupTop = 0;
+            groupHeight = body.height;
         }
         else {
-            const imageY = 0;
-            const textY = imageY + imageHeight + connectorGap;
-            const connectorY1 = imageY + imageHeight;
+            const textY = body.lowerTextTop;
+            const connectorY1 = Math.min(imageY + imageHeight + LANDSCAPE_CONNECTOR_GAP, body.height);
             const connectorY2 = textY + textHeight;
             imageBox = { x: imageX, y: imageY, width: blockWidth, height: imageHeight };
             textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
             contentBox = {
                 x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
+                y: textY + titleHeight + titleToContentGap,
                 width: textWidth,
                 height: contentHeight
             };
             connector = { x1: connectorX, y1: connectorY1, x2: connectorX, y2: connectorY2 };
-            groupTop = imageY;
-            groupHeight = textY + textHeight - imageY;
+            groupTop = 0;
+            groupHeight = body.height;
         }
         return {
             padding,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             contentHeight,
-            blockWidth,
+            minTextBandHeight,
+            bodyOriginY: body.originY,
+            blockWidth: Math.max(blockWidth, textX + textWidth),
             imageBox,
             textBox,
             contentBox,
@@ -6897,6 +6898,28 @@
             groupHeight
         };
     };
+    const getLandscapeBodyGeometry = (ctx, spec, rawImageHeight, blockHeight, minTextBandHeight) => {
+        const region = getRegionGeometry(ctx, spec);
+        const margin = Math.min(LANDSCAPE_BODY_MARGIN, Math.max(region.height * 0.04, 0));
+        const height = Math.max(region.height - margin * 2, 1);
+        const textBandReserve = Math.min(minTextBandHeight, Math.max((height - 48) / 2, 0));
+        const maxImageBandHeight = Math.max(height - textBandReserve * 2, height * 0.18);
+        const imageBandHeight = Math.min(Math.max(rawImageHeight + 24, height * LANDSCAPE_IMAGE_BAND_RATIO), Math.max(1, Math.min(maxImageBandHeight, height * LANDSCAPE_IMAGE_BAND_MAX_RATIO)));
+        const imageHeight = Math.min(rawImageHeight, Math.max(imageBandHeight - 16, 1));
+        const textBandHeight = Math.max((height - imageBandHeight) / 2, 1);
+        const imageBandTop = textBandHeight;
+        return {
+            originY: region.startY + margin,
+            height,
+            textBandHeight,
+            imageBandTop,
+            imageBandHeight,
+            imageHeight,
+            upperTextTop: 0,
+            lowerTextTop: imageBandTop + imageBandHeight,
+            waveAmplitude: Math.min(imageBandHeight * 0.18, blockHeight * 0.1)
+        };
+    };
     const buildLandscapeBlockMark = (spec, block, index) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m;
         const hasImage = !!block.image;
@@ -6926,13 +6949,8 @@
                     return (_a = lb === null || lb === void 0 ? void 0 : lb.x) !== null && _a !== void 0 ? _a : 0;
                 },
                 y: (_d, ctx) => {
-                    var _a, _b, _c, _e, _f, _g, _h;
-                    const lb = getLayout(spec, ctx).blocks[index];
                     const m = getMetrics(ctx);
-                    const cy = (_b = (_a = lb === null || lb === void 0 ? void 0 : lb.center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : ((_c = lb === null || lb === void 0 ? void 0 : lb.y) !== null && _c !== void 0 ? _c : 0) + ((_e = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _e !== void 0 ? _e : 0) / 2;
-                    const blockH = (_h = (_f = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _f !== void 0 ? _f : (_g = spec.block) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : DEFAULT_BLOCK_HEIGHT;
-                    const stagger = m.textOnTop ? blockH * 0.1 : -blockH * 0.1;
-                    return cy - m.imageBox.height / 2 + stagger;
+                    return m.bodyOriginY;
                 },
                 width: (_d, ctx) => getMetrics(ctx).blockWidth,
                 height: (_d, ctx) => getMetrics(ctx).groupHeight
@@ -6973,14 +6991,10 @@
                     }
                 },
                 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: (_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) })
+                    ? 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, height: (_d, ctx) => getMetrics(ctx).titleHeight, heightLimit: (_d, ctx) => getMetrics(ctx).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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' }, (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { 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: buildPlainContent(contentText), fontSize: (_d, ctx) => getMetrics(ctx).contentFontSize, lineHeight: (_d, ctx) => getMetrics(ctx).contentLineHeight, textAlign: 'left', textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) })
                     : null
             ].filter(Boolean)
         };
@@ -6988,8 +7002,8 @@
 
     const PORTRAIT_AXIS_WIDTH = 96;
     const PORTRAIT_AXIS_PADDING = 120;
-    const PORTRAIT_MARKER_FONT_SIZE = 40;
-    const PORTRAIT_MARKER_LINE_HEIGHT = 28;
+    const PORTRAIT_MARKER_FONT_SIZE = 34;
+    const PORTRAIT_MARKER_LINE_HEIGHT = 24;
     const PORTRAIT_MARKER_AXIS_PADDING = 6;
     const PORTRAIT_IMAGE_HEIGHT_RATIO = 0.6;
     const PORTRAIT_CONTENT_HEIGHT_RATIO = 1.25;
@@ -7000,8 +7014,8 @@
     const PORTRAIT_TEXT_GAP_FROM_IMAGE = 8;
     const PORTRAIT_CONTENT_LINES = 3;
     const PORTRAIT_TITLE_LINE_HEIGHT = 34;
-    const PORTRAIT_CONTENT_LINE_HEIGHT = 26;
-    const PORTRAIT_CONTENT_FONT_SIZE = 18;
+    const PORTRAIT_CONTENT_LINE_HEIGHT = 23;
+    const PORTRAIT_CONTENT_FONT_SIZE = 16;
     const PORTRAIT_TITLE_TO_CONTENT_GAP = 4;
     const buildPortraitAxisMark = (spec) => {
         var _a, _b, _c, _e, _f, _g, _h, _j, _k;
@@ -7043,7 +7057,7 @@
                         }, 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 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, [16, 38]);
                             const markerLineHeight = resolveAdaptiveLineHeight(markerFontSize, (_c = spec.marker) === null || _c === void 0 ? void 0 : _c.style, PORTRAIT_MARKER_LINE_HEIGHT, 0.9);
                             return {
                                 type: 'rich',
@@ -7084,7 +7098,7 @@
         };
     };
     const getPortraitMetrics = (spec, blockWidth, blockHeight, index, ctx) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         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;
@@ -7092,9 +7106,10 @@
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_r = (_q = spec.data) === null || _q === void 0 ? void 0 : _q[index]) === null || _r === void 0 ? void 0 : _r.title, imageWidth, titleFontSize);
         const minContentHeight = PORTRAIT_CONTENT_LINES * contentLineHeight;
         const contentHeight = Math.max(minContentHeight, Math.round(blockHeight * PORTRAIT_CONTENT_HEIGHT_RATIO));
-        const textHeight = titleLineHeight + titleToContentGap + contentHeight;
+        const textHeight = titleHeight + titleToContentGap + contentHeight;
         const onLeft = index % 2 === 0;
         const axisHalf = PORTRAIT_AXIS_WIDTH / 2;
         const imageX = onLeft
@@ -7106,7 +7121,7 @@
         const textWidth = imageWidth;
         const contentBox = {
             x: textX,
-            y: textY + titleLineHeight + titleToContentGap,
+            y: textY + titleHeight + titleToContentGap,
             width: textWidth,
             height: contentHeight
         };
@@ -7126,6 +7141,7 @@
             onLeft,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             blockWidth,
@@ -7218,14 +7234,10 @@
                     ? 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: (_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) })
+                    ? 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, height: (_d, ctx) => getMetrics(ctx).titleHeight, heightLimit: (_d, ctx) => getMetrics(ctx).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { 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: buildPlainContent(contentText), fontSize: PORTRAIT_CONTENT_FONT_SIZE, lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7237,16 +7249,20 @@
     const ARC_TEXT_GAP_FROM_IMAGE = 10;
     const ARC_TITLE_FONT_SIZE = 32;
     const ARC_TITLE_LINE_HEIGHT = 34;
-    const ARC_CONTENT_LINE_HEIGHT = 26;
-    const ARC_CONTENT_FONT_SIZE = 20;
+    const ARC_CONTENT_LINE_HEIGHT = 24;
+    const ARC_CONTENT_FONT_SIZE = 18;
     const ARC_TEXT_BOX_HEIGHT = 240;
     const ARC_TITLE_TO_CONTENT_GAP = 4;
     const ARC_TEXT_PADDING = 20;
-    const ARC_TEXT_BOX_MIN_WIDTH = 240;
+    const ARC_TEXT_BOX_MIN_WIDTH = 96;
+    const ARC_TEXT_BOX_ABSOLUTE_MIN_WIDTH = 64;
+    const ARC_TEXT_BOX_MAX_WIDTH = 260;
     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 ARC_FIT_MARGIN = 8;
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
     const isDownArc = (spec) => normalizeLayout(spec.layout).direction === 'down';
     const getArcTitleImageRect = (spec, ctx) => {
         var _a, _b, _c, _e;
@@ -7261,7 +7277,7 @@
         const top = isDown ? startY : startY + innerHeight - h;
         return { x: cx - w / 2, y: top, width: w, height: h };
     };
-    const getArcGeometry = (spec, ctx) => {
+    const getBaseArcGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, startX } = getRegionGeometry(ctx);
         const innerWidth = Math.max(width, 1);
@@ -7299,9 +7315,8 @@
             centerBottom
         };
     };
-    const getArcBlockCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
-        const arc = getArcGeometry(spec, ctx);
+    const getArcBlockCenterByGeometry = (spec, arc, index, ctx) => {
+        var _a, _b;
         const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         if (count <= 0) {
             return { x: arc.cx, y: arc.cy };
@@ -7315,10 +7330,80 @@
         const nLen = Math.hypot(nxRaw, nyRaw) || 1;
         const nx = nxRaw / nLen;
         const ny = nyRaw / nLen;
-        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : ARC_BLOCK_IMAGE_SIZE;
+        const imageHeight = getArcBlockMetrics(spec, index, ctx).imageBox.height;
         const offset = imageHeight / 2;
         return { x: px + nx * offset, y: py + ny * offset };
     };
+    const getArcBlockBounds = (spec, arc, index, ctx) => {
+        const center = getArcBlockCenterByGeometry(spec, arc, index, ctx);
+        const metrics = getArcBlockMetrics(spec, index, ctx);
+        const halo = shouldShowImageBackground(spec) ? ARC_BLOCK_IMAGE_HALO_PADDING + ARC_BLOCK_IMAGE_BORDER : 0;
+        const minX = Math.min(metrics.imageBox.x - halo, metrics.textBox.x, metrics.contentBox.x);
+        const maxX = Math.max(metrics.imageBox.x + metrics.imageBox.width + halo, metrics.textBox.x + metrics.textBox.width, metrics.contentBox.x + metrics.contentBox.width);
+        const minY = Math.min(metrics.imageBox.y - halo, metrics.textBox.y, metrics.contentBox.y);
+        const maxY = Math.max(metrics.imageBox.y + metrics.imageBox.height + halo, metrics.textBox.y + metrics.textBox.height, metrics.contentBox.y + metrics.contentBox.height);
+        return {
+            left: center.x + minX,
+            right: center.x + maxX,
+            top: center.y + minY,
+            bottom: center.y + maxY
+        };
+    };
+    const getArcBlocksBounds = (spec, arc, ctx) => {
+        var _a, _b;
+        const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (!count) {
+            return { left: arc.cx, right: arc.cx, top: arc.cy, bottom: arc.cy };
+        }
+        return Array.from({ length: count }, (_, index) => getArcBlockBounds(spec, arc, index, ctx)).reduce((bounds, blockBounds) => ({
+            left: Math.min(bounds.left, blockBounds.left),
+            right: Math.max(bounds.right, blockBounds.right),
+            top: Math.min(bounds.top, blockBounds.top),
+            bottom: Math.max(bounds.bottom, blockBounds.bottom)
+        }), {
+            left: Number.POSITIVE_INFINITY,
+            right: Number.NEGATIVE_INFINITY,
+            top: Number.POSITIVE_INFINITY,
+            bottom: Number.NEGATIVE_INFINITY
+        });
+    };
+    const getArcGeometry = (spec, ctx) => {
+        const arc = getBaseArcGeometry(spec, ctx);
+        const region = getRegionGeometry(ctx);
+        const bounds = getArcBlocksBounds(spec, arc, ctx);
+        const fit = {
+            left: region.startX + ARC_FIT_MARGIN,
+            right: region.startX + region.width - ARC_FIT_MARGIN,
+            top: region.startY + ARC_FIT_MARGIN,
+            bottom: region.startY + region.height - ARC_FIT_MARGIN
+        };
+        let shiftX = 0;
+        let shiftY = 0;
+        const boundsWidth = bounds.right - bounds.left;
+        const boundsHeight = bounds.bottom - bounds.top;
+        const fitWidth = fit.right - fit.left;
+        const fitHeight = fit.bottom - fit.top;
+        if (boundsWidth > fitWidth) {
+            shiftX = (fit.left + fit.right - bounds.left - bounds.right) / 2;
+        }
+        else if (bounds.left < fit.left) {
+            shiftX = fit.left - bounds.left;
+        }
+        else if (bounds.right > fit.right) {
+            shiftX = fit.right - bounds.right;
+        }
+        if (boundsHeight > fitHeight) {
+            shiftY = (fit.top + fit.bottom - bounds.top - bounds.bottom) / 2;
+        }
+        else if (bounds.top < fit.top) {
+            shiftY = fit.top - bounds.top;
+        }
+        else if (bounds.bottom > fit.bottom) {
+            shiftY = fit.bottom - bounds.bottom;
+        }
+        return shiftX || shiftY ? Object.assign(Object.assign({}, arc), { cx: arc.cx + shiftX, cy: arc.cy + shiftY }) : arc;
+    };
+    const getArcBlockCenter = (spec, ctx, index) => getArcBlockCenterByGeometry(spec, getArcGeometry(spec, ctx), index, ctx);
     const buildArcMark = (spec) => {
         var _a;
         if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
@@ -7381,23 +7466,33 @@
             ]
         };
     };
-    const getArcBlockMetrics = (spec, index = 0) => {
-        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 getArcBlockMetrics = (spec, index = 0, ctx) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        const region = ctx ? getRegionGeometry(ctx, spec) : undefined;
+        const count = Math.max((_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, 1);
+        const regionWidth = Math.max((_c = region === null || region === void 0 ? void 0 : region.width) !== null && _c !== void 0 ? _c : Number((_e = spec.width) !== null && _e !== void 0 ? _e : ARC_BLOCK_IMAGE_SIZE * count), 1);
+        const regionHeight = Math.max((_f = region === null || region === void 0 ? void 0 : region.height) !== null && _f !== void 0 ? _f : Number((_g = spec.height) !== null && _g !== void 0 ? _g : ARC_TEXT_BOX_HEIGHT), 1);
+        const slotWidth = regionWidth / (count + 1);
+        const imageScale = clamp(Math.min(regionWidth / Math.max(count * ARC_BLOCK_IMAGE_SIZE * 0.92, 1), regionHeight / 620), 0.42, 1);
+        const textScale = clamp(Math.min(slotWidth / 180, imageScale), 0.48, 1);
+        const styleContent = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style;
+        const contentFontSize = Number((_j = styleContent === null || styleContent === void 0 ? void 0 : styleContent.fontSize) !== null && _j !== void 0 ? _j : Math.round(ARC_CONTENT_FONT_SIZE * textScale));
+        const contentLineHeight = Number((_k = styleContent === null || styleContent === void 0 ? void 0 : styleContent.lineHeight) !== null && _k !== void 0 ? _k : Math.round(Math.max(contentFontSize * 1.35, ARC_CONTENT_LINE_HEIGHT * textScale)));
         const titleToContentGap = ARC_TITLE_TO_CONTENT_GAP;
-        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 configuredImageDiameter = Math.max((_m = (_l = spec.image) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : ARC_BLOCK_IMAGE_SIZE, (_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : ARC_BLOCK_IMAGE_SIZE);
+        const imageDiameter = Math.round(clamp(configuredImageDiameter * imageScale, 64, configuredImageDiameter));
         const imageWidth = imageDiameter;
         const imageHeight = imageDiameter;
         const isDown = isDownArc(spec);
-        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((_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 configuredTextWidth = Number((_r = (_q = spec.block) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : ARC_TEXT_BOX_MAX_WIDTH);
+        const defaultTextWidth = Math.round(slotWidth * 0.96);
+        const minTextWidth = Math.min(ARC_TEXT_BOX_MIN_WIDTH, Math.max(Math.round(slotWidth * 0.72), ARC_TEXT_BOX_ABSOLUTE_MIN_WIDTH));
+        const textBoxWidth = Math.round(clamp(Math.min(configuredTextWidth, defaultTextWidth), minTextWidth, ARC_TEXT_BOX_MAX_WIDTH));
+        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, textBoxWidth, Math.round(ARC_TITLE_FONT_SIZE * textScale), [10, 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 titleHeight = getBlockTitleHeight(titleLineHeight, (_w = (_v = spec.data) === null || _v === void 0 ? void 0 : _v[index]) === null || _w === void 0 ? void 0 : _w.title, textBoxWidth, titleFontSize);
+        const textHeight = Math.round(clamp(ARC_TEXT_BOX_HEIGHT * textScale, 88, ARC_TEXT_BOX_HEIGHT));
+        const contentHeight = Math.max(textHeight - titleHeight - titleToContentGap, contentLineHeight);
         const isLeftSide = index < count / 2;
         const textAlign = isLeftSide ? 'right' : 'left';
         const imageBox = {
@@ -7406,7 +7501,9 @@
             width: imageWidth,
             height: imageHeight
         };
-        const textBoxX = isLeftSide ? -ARC_TEXT_PADDING : ARC_TEXT_PADDING;
+        const textPadding = Math.round(ARC_TEXT_PADDING * textScale);
+        const textBoxX = isLeftSide ? -textPadding - textBoxWidth : textPadding;
+        const textAnchorX = isLeftSide ? -textPadding : textPadding;
         const textBox = {
             x: textBoxX,
             y: isDown ? imageBox.y + imageHeight + ARC_TEXT_GAP_FROM_IMAGE : imageBox.y - ARC_TEXT_GAP_FROM_IMAGE - textHeight,
@@ -7415,7 +7512,7 @@
         };
         const contentBox = {
             x: textBox.x,
-            y: textBox.y + titleLineHeight + titleToContentGap,
+            y: textBox.y + titleHeight + titleToContentGap,
             width: textBox.width,
             height: contentHeight
         };
@@ -7428,7 +7525,8 @@
             textBox,
             contentBox,
             isDown,
-            textAlign
+            textAlign,
+            textAnchorX
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
@@ -7436,12 +7534,18 @@
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const metrics = getArcBlockMetrics(spec, index);
-        const connectorY = metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y;
-        const connectorHeight = metrics.isDown
-            ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0)
-            : Math.max(metrics.imageBox.y - metrics.textBox.y, 0);
-        const connectorX = -1;
+        const getMetrics = (ctx) => getArcBlockMetrics(spec, index, ctx);
+        const getConnectorBox = (ctx) => {
+            const metrics = getMetrics(ctx);
+            return {
+                x: -1,
+                y: metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y,
+                width: 2,
+                height: metrics.isDown
+                    ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0)
+                    : Math.max(metrics.imageBox.y - metrics.textBox.y, 0)
+            };
+        };
         return {
             type: 'group',
             id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
@@ -7458,22 +7562,22 @@
                     interactive: false,
                     zIndex: vchart.LayoutZIndex.Mark + 2,
                     style: {
-                        x: connectorX,
-                        y: connectorY,
-                        width: 2,
-                        height: connectorHeight,
+                        x: (_d, ctx) => getConnectorBox(ctx).x,
+                        y: (_d, ctx) => getConnectorBox(ctx).y,
+                        width: (_d, ctx) => getConnectorBox(ctx).width,
+                        height: (_d, ctx) => getConnectorBox(ctx).height,
                         fill: themeColor,
                         fillOpacity: 0.6
                     }
                 },
                 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: 'contain', 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: (_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: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).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: Object.assign({ x: 0, y: 0, size: Math.min(metrics.imageBox.width, metrics.imageBox.height), symbolType: 'circle' }, getImageBackgroundStyle(spec))
+                        style: Object.assign({ x: 0, y: 0, size: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).imageBox.height), symbolType: 'circle' }, getImageBackgroundStyle(spec))
                     },
                 shouldShowImageBackground(spec)
                     ? {
@@ -7484,7 +7588,8 @@
                         style: {
                             x: 0,
                             y: 0,
-                            size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + ARC_BLOCK_IMAGE_HALO_PADDING * 2,
+                            size: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).imageBox.height) +
+                                ARC_BLOCK_IMAGE_HALO_PADDING * 2,
                             symbolType: 'circle',
                             fill: 'transparent',
                             stroke: withAlpha(themeColor, 0.82),
@@ -7493,15 +7598,10 @@
                     }
                     : 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' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.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: (_d, ctx) => getMetrics(ctx).textAnchorX, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, height: (_d, ctx) => getMetrics(ctx).titleLineHeight * BLOCK_TITLE_MAX_LINES, heightLimit: (_d, ctx) => getMetrics(ctx).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, fontSize: (_d, ctx) => getMetrics(ctx).titleFontSize, lineHeight: (_d, ctx) => getMetrics(ctx).titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => getMetrics(ctx).textAlign, textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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, {
-                                fontSize: metrics.contentFontSize,
-                                lineHeight: metrics.contentLineHeight,
-                                fill: '#596173',
-                                align: metrics.textAlign
-                            }), textAlign: metrics.textAlign, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 4 }, spec.content), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textAnchorX, 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: buildPlainContent(contentText), fontSize: (_d, ctx) => getMetrics(ctx).contentFontSize, lineHeight: (_d, ctx) => getMetrics(ctx).contentLineHeight, textAlign: (_d, ctx) => getMetrics(ctx).textAlign, textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7654,16 +7754,17 @@
     };
     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;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_f = (_e = spec.data) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.title, WING_TEXT_BOX_WIDTH, titleFontSize);
+        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 : WING_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 : WING_CONTENT_LINE_HEIGHT);
         const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
         const textHeight = WING_TEXT_BOX_HEIGHT;
         const contentHeight = 100000;
-        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 imageWidth = Number((_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : WING_BLOCK_IMAGE_SIZE);
+        const imageHeight = Number((_r = (_q = spec.image) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : WING_BLOCK_IMAGE_SIZE);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
@@ -7671,7 +7772,7 @@
             height: imageHeight
         };
         const direction = getWingDirection(spec);
-        const count = (_r = (_q = spec.data) === null || _q === void 0 ? void 0 : _q.length) !== null && _r !== void 0 ? _r : 0;
+        const count = (_t = (_s = spec.data) === null || _s === void 0 ? void 0 : _s.length) !== null && _t !== void 0 ? _t : 0;
         const isSpecialBelow = (direction === 'right' && count > 0 && index === count - 1) || (direction === 'left' && index === 0);
         const isVerticalLayout = isSpecialBelow;
         const textWidth = WING_TEXT_BOX_WIDTH;
@@ -7686,7 +7787,7 @@
             textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
             contentBox = {
                 x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
+                y: textY + titleHeight + titleToContentGap,
                 width: textWidth,
                 height: contentHeight
             };
@@ -7706,7 +7807,7 @@
             textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
             contentBox = {
                 x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
+                y: textY + titleHeight + titleToContentGap,
                 width: textWidth,
                 height: contentHeight
             };
@@ -7726,6 +7827,7 @@
             verticalAlign,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             imageBox,
@@ -7787,28 +7889,28 @@
                                     return m.textBox.x + m.textBox.width / 2;
                                 }
                                 return m.onLeft ? m.textBox.x + m.textBox.width : m.textBox.x;
-                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => {
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleHeight, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => {
                                 const m = getWingBlockMetrics(spec, ctx, index);
                                 if (m.verticalAlign) {
                                     return 'center';
                                 }
                                 return m.onLeft ? 'right' : 'left';
-                            }, textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
+                            }, textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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) => {
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { style: Object.assign({ x: (_d, ctx) => {
                                 const m = getWingBlockMetrics(spec, ctx, index);
                                 if (m.verticalAlign) {
                                     return m.contentBox.x + m.contentBox.width / 2;
                                 }
                                 return m.onLeft ? m.contentBox.x + m.contentBox.width : m.contentBox.x;
-                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, text: buildRichContent(contentText, spec), fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentLineHeight, textAlign: (_d, ctx) => {
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, text: buildPlainContent(contentText), fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentLineHeight, textAlign: (_d, ctx) => {
                                 const m = getWingBlockMetrics(spec, ctx, index);
                                 if (m.verticalAlign) {
                                     return 'center';
                                 }
                                 return m.onLeft ? 'right' : 'left';
-                            }, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                            }, textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7822,8 +7924,8 @@
     const LADDER_BLOCK_IMAGE_SIZE = 100;
     const LADDER_TITLE_FONT_SIZE = 28;
     const LADDER_TITLE_LINE_HEIGHT = 26;
-    const LADDER_CONTENT_FONT_SIZE = 18;
-    const LADDER_CONTENT_LINE_HEIGHT = 26;
+    const LADDER_CONTENT_FONT_SIZE = 16;
+    const LADDER_CONTENT_LINE_HEIGHT = 23;
     const isDownLadder = (spec) => normalizeLayout(spec.layout).direction === 'down';
     const getLadderDiagonalGeometry = (spec, ctx) => {
         var _a;
@@ -7934,12 +8036,13 @@
         const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title, textBox.width, titleFontSize);
         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,
+            titleHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -7992,14 +8095,10 @@
                     ? 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: (_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 }) })
+                    ? 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, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).titleHeight, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...' }, (_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' }, (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style), { textAlign: align }) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { 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, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, text: buildPlainContent(contentText), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, fontSize: LADDER_CONTENT_FONT_SIZE, lineHeight: LADDER_CONTENT_LINE_HEIGHT, textBaseline: 'top', whiteSpace: 'normal', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style), { textAlign: align }) })
                     : null
             ].filter(Boolean)
         };
@@ -8096,7 +8195,7 @@
                 : wing
                     ? 300
                     : arcUp
-                        ? 0
+                        ? 100
                         : arcDown
                             ? TEXT_RESERVE
                             : LARGE;