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

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;
@@ -6138,7 +6139,9 @@
         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));
     };
@@ -6326,27 +6329,8 @@
                     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 getBlockTitleHeight = (lineHeight, title) => title ? lineHeight * BLOCK_TITLE_MAX_LINES : 0;
     const omitImageLayoutSpec = (imageSpec) => {
         if (!imageSpec) {
             return {};
@@ -6444,8 +6428,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 +6440,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);
@@ -6588,10 +6573,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 - getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES, text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, height: (_d, ctx) => getTitleLineHeight(ctx) * BLOCK_TITLE_MAX_LINES, 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 +6625,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);
         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: {
@@ -6693,14 +6678,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).titleLineHeight * BLOCK_TITLE_MAX_LINES, 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)
         };
@@ -6752,8 +6733,8 @@
     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 getLandscapeImageCenter = (spec, ctx, index) => {
         var _a, _b, _c, _e;
@@ -6821,20 +6802,21 @@
         };
     };
     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 titleHeight = getBlockTitleHeight(titleLineHeight, (_h = (_g = spec.data) === null || _g === void 0 ? void 0 : _g[index]) === null || _h === void 0 ? void 0 : _h.title);
+        const contentFontSize = Number((_l = (_k = (_j = spec.content) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.fontSize) !== null && _l !== void 0 ? _l : LANDSCAPE_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_p = (_o = (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) === null || _o === void 0 ? void 0 : _o.lineHeight) !== null && _p !== void 0 ? _p : LANDSCAPE_CONTENT_LINE_HEIGHT);
+        const imageHeight = Math.max((_r = (_q = spec.image) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : 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 titleToContentGap = LANDSCAPE_TITLE_TO_CONTENT_GAP;
-        const textHeight = titleLineHeight + titleToContentGap + contentHeight;
+        const textHeight = titleHeight + titleToContentGap + contentHeight;
         const textOnTop = index % 2 === 0;
         let textBox;
         let contentBox;
@@ -6845,17 +6827,19 @@
         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 { width: regionWidth } = getRegionGeometry(ctx, spec);
+        const blockCount = Math.max((_t = (_s = spec.data) === null || _s === void 0 ? void 0 : _s.length) !== null && _t !== void 0 ? _t : 1, 1);
+        const textWidth = Math.max(regionWidth / blockCount, 1);
         if (textOnTop) {
             const imageY = 0;
             const textY = imageY - connectorGap - textHeight;
             const connectorY1 = imageY;
-            const connectorY2 = textY + titleLineHeight / 2;
+            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
             };
@@ -6872,7 +6856,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
             };
@@ -6887,7 +6871,7 @@
             contentFontSize,
             contentLineHeight,
             contentHeight,
-            blockWidth,
+            blockWidth: Math.max(blockWidth, textX + textWidth),
             imageBox,
             textBox,
             contentBox,
@@ -6973,14 +6957,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).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: '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 +6968,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 +6980,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 +7023,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 +7064,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 +7072,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);
         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 +7087,7 @@
         const textWidth = imageWidth;
         const contentBox = {
             x: textX,
-            y: textY + titleLineHeight + titleToContentGap,
+            y: textY + titleHeight + titleToContentGap,
             width: textWidth,
             height: contentHeight
         };
@@ -7218,14 +7199,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).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: '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,8 +7214,8 @@
     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;
@@ -7247,6 +7224,7 @@
     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 isDownArc = (spec) => normalizeLayout(spec.layout).direction === 'down';
     const getArcTitleImageRect = (spec, ctx) => {
         var _a, _b, _c, _e;
@@ -7261,7 +7239,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 +7277,8 @@
             centerBottom
         };
     };
-    const getArcBlockCenter = (spec, ctx, index) => {
+    const getArcBlockCenterByGeometry = (spec, arc, index) => {
         var _a, _b, _c, _e;
-        const arc = getArcGeometry(spec, ctx);
         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 };
@@ -7319,6 +7296,76 @@
         const offset = imageHeight / 2;
         return { x: px + nx * offset, y: py + ny * offset };
     };
+    const getArcBlockBounds = (spec, arc, index) => {
+        const center = getArcBlockCenterByGeometry(spec, arc, index);
+        const metrics = getArcBlockMetrics(spec, index);
+        const halo = shouldShowImageBackground(spec) ? ARC_BLOCK_IMAGE_HALO_PADDING + ARC_BLOCK_IMAGE_BORDER : 0;
+        const minX = Math.min(metrics.imageBox.x - halo, metrics.textBox.x, metrics.contentBox.x);
+        const maxX = Math.max(metrics.imageBox.x + metrics.imageBox.width + halo, metrics.textBox.x + metrics.textBox.width, metrics.contentBox.x + metrics.contentBox.width);
+        const minY = Math.min(metrics.imageBox.y - halo, metrics.textBox.y, metrics.contentBox.y);
+        const maxY = Math.max(metrics.imageBox.y + metrics.imageBox.height + halo, metrics.textBox.y + metrics.textBox.height, metrics.contentBox.y + metrics.contentBox.height);
+        return {
+            left: center.x + minX,
+            right: center.x + maxX,
+            top: center.y + minY,
+            bottom: center.y + maxY
+        };
+    };
+    const getArcBlocksBounds = (spec, arc) => {
+        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)).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);
+        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);
     const buildArcMark = (spec) => {
         var _a;
         if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
@@ -7382,7 +7429,7 @@
         };
     };
     const getArcBlockMetrics = (spec, index = 0) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         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;
@@ -7396,8 +7443,9 @@
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_w = (_v = spec.data) === null || _v === void 0 ? void 0 : _v[index]) === null || _w === void 0 ? void 0 : _w.title);
         const textHeight = ARC_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
+        const contentHeight = Math.max(textHeight - titleHeight - titleToContentGap, contentLineHeight);
         const isLeftSide = index < count / 2;
         const textAlign = isLeftSide ? 'right' : 'left';
         const imageBox = {
@@ -7415,7 +7463,7 @@
         };
         const contentBox = {
             x: textBox.x,
-            y: textBox.y + titleLineHeight + titleToContentGap,
+            y: textBox.y + titleHeight + titleToContentGap,
             width: textBox.width,
             height: contentHeight
         };
@@ -7493,15 +7541,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: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, height: metrics.titleLineHeight * BLOCK_TITLE_MAX_LINES, heightLimit: metrics.titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.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: metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildPlainContent(contentText), fontSize: metrics.contentFontSize, lineHeight: metrics.contentLineHeight, textAlign: metrics.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 +7697,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);
+        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 +7715,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 +7730,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 +7750,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
             };
@@ -7787,28 +7831,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).titleLineHeight * BLOCK_TITLE_MAX_LINES, 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 +7866,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,7 +7978,7 @@
         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);
         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 },
@@ -7992,14 +8036,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).titleLineHeight * BLOCK_TITLE_MAX_LINES, 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)
         };