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

package/build/index.js

@@ -6094,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;
@@ -6143,7 +6143,7 @@
             ? ((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]) => {
@@ -6330,7 +6330,17 @@
                 } }))), 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 buildPlainContent = (contentText) => contentText.join('\n');
-    const getBlockTitleHeight = (lineHeight, title) => title ? lineHeight * BLOCK_TITLE_MAX_LINES : 0;
+    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 {};
@@ -6524,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)}`;
@@ -6573,7 +6584,7 @@
                     }
                 },
             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) * 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) })
+                ? 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), { 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) })
@@ -6625,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 = getBlockTitleHeight(titleLineHeight, (_w = (_v = spec.data) === null || _v === void 0 ? void 0 : _v[index]) === null || _w === void 0 ? void 0 : _w.title);
+        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: {
@@ -6634,6 +6645,7 @@
             },
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -6678,7 +6690,7 @@
                     ? 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, 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) })
+                    ? 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), { 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) })
@@ -6727,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 = 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;
@@ -6806,16 +6820,19 @@
         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 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 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 { 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 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;
@@ -6827,13 +6844,11 @@
         const imageX = 0;
         const connectorX = imageX + blockWidth * LANDSCAPE_CONNECTOR_X_RATIO;
         const textX = connectorX + LANDSCAPE_TEXT_GAP_FROM_CONNECTOR;
-        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);
+        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 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 };
@@ -6844,13 +6859,12 @@
                 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 };
@@ -6861,16 +6875,19 @@
                 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,
+            minTextBandHeight,
+            bodyOriginY: body.originY,
             blockWidth: Math.max(blockWidth, textX + textWidth),
             imageBox,
             textBox,
@@ -6881,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;
@@ -6910,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
@@ -6957,7 +6991,7 @@
                     }
                 },
                 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, 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) })
+                    ? 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), { 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) })
@@ -7072,7 +7106,7 @@
         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 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 = titleHeight + titleToContentGap + contentHeight;
@@ -7107,6 +7141,7 @@
             onLeft,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             blockWidth,
@@ -7199,7 +7234,7 @@
                     ? 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, 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) })
+                    ? 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), { 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) })
@@ -7219,12 +7254,15 @@
     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;
@@ -7277,8 +7315,8 @@
             centerBottom
         };
     };
-    const getArcBlockCenterByGeometry = (spec, arc, index) => {
-        var _a, _b, _c, _e;
+    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 };
@@ -7292,13 +7330,13 @@
         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) => {
-        const center = getArcBlockCenterByGeometry(spec, arc, index);
-        const metrics = getArcBlockMetrics(spec, index);
+    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);
@@ -7311,13 +7349,13 @@
             bottom: center.y + maxY
         };
     };
-    const getArcBlocksBounds = (spec, arc) => {
+    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)).reduce((bounds, blockBounds) => ({
+        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),
@@ -7332,7 +7370,7 @@
     const getArcGeometry = (spec, ctx) => {
         const arc = getBaseArcGeometry(spec, ctx);
         const region = getRegionGeometry(ctx);
-        const bounds = getArcBlocksBounds(spec, arc);
+        const bounds = getArcBlocksBounds(spec, arc, ctx);
         const fit = {
             left: region.startX + ARC_FIT_MARGIN,
             right: region.startX + region.width - ARC_FIT_MARGIN,
@@ -7365,7 +7403,7 @@
         }
         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 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) {
@@ -7428,23 +7466,32 @@
             ]
         };
     };
-    const getArcBlockMetrics = (spec, index = 0) => {
+    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 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 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 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 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';
@@ -7454,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,
@@ -7476,7 +7525,8 @@
             textBox,
             contentBox,
             isDown,
-            textAlign
+            textAlign,
+            textAnchorX
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
@@ -7484,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}`,
@@ -7506,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)
                     ? {
@@ -7532,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),
@@ -7541,10 +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, 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) })
+                    ? 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), { 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) })
+                    ? 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)
         };
@@ -7700,7 +7757,7 @@
         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 titleHeight = getBlockTitleHeight(titleLineHeight, (_f = (_e = spec.data) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.title);
+        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;
@@ -7770,6 +7827,7 @@
             verticalAlign,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             imageBox,
@@ -7831,7 +7889,7 @@
                                     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, 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) => {
+                            }, 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';
@@ -7978,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 = getBlockTitleHeight(titleLineHeight, (_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title);
+        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: {
@@ -8036,7 +8095,7 @@
                     ? 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, 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 }) })
+                    ? 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), { 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 }) })
@@ -8136,7 +8195,7 @@
                 : wing
                     ? 300
                     : arcUp
-                        ? 0
+                        ? 100
                         : arcDown
                             ? TEXT_RESERVE
                             : LARGE;