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

package/build/index.js

@@ -5855,12 +5855,11 @@
         return layout;
     };
     const computeStorylineLayout = (data, options) => {
-        var _a, _b, _c;
+        var _a, _b;
         const layout = normalizeLayout(options.layout);
         const padding = normalizePadding((_a = layout.padding) !== null && _a !== void 0 ? _a : options.padding);
-        const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : 40;
-        const lineDistance = (_c = options.lineDistance) !== null && _c !== void 0 ? _c : 8;
-        const blocks = computeBlockPositions(data, layout, options.viewBox, options.block, padding, gap);
+        const lineDistance = (_b = options.lineDistance) !== null && _b !== void 0 ? _b : 8;
+        const blocks = computeBlockPositions(data, layout, options.viewBox, options.block, padding);
         const circleGuide = layout.type === 'clock' ? computeClockCircleGuide(options.viewBox, options.block, padding, layout) : undefined;
         return {
             blocks,
@@ -5868,7 +5867,7 @@
             circleGuide
         };
     };
-    const computeBlockPositions = (data, layout, viewBox, block, padding, gap) => {
+    const computeBlockPositions = (data, layout, viewBox, block, padding) => {
         const count = data.length;
         if (!count) {
             return [];
@@ -5888,34 +5887,6 @@
             case 'portrait':
                 centers = lineCenters(count, center.x, inner.y + block.height / 2, center.x, inner.y + inner.height - block.height / 2);
                 break;
-            case 'ladder': {
-                const isDown = layout.direction === 'down';
-                const x0 = inner.x + block.width / 2;
-                const x1 = inner.x + inner.width - block.width / 2;
-                const yTop = inner.y + block.height / 2;
-                const yBot = inner.y + inner.height - block.height / 2;
-                const y0 = isDown ? yTop : yBot;
-                const y1 = isDown ? yBot : yTop;
-                const anchors = lineCenters(count, x0, y0, x1, y1);
-                const dx = x1 - x0;
-                const dy = y1 - y0;
-                const len = Math.hypot(dx, dy) || 1;
-                const nx = -dy / len;
-                const ny = dx / len;
-                const headlineFontSize = Math.max(80, Math.min(240, Math.round(inner.height * 0.42)));
-                const offset = headlineFontSize * 1.2;
-                centers = anchors.map((p, i) => {
-                    const sign = i % 2 === 0 ? 1 : -1;
-                    return {
-                        x: p.x + nx * offset * sign,
-                        y: p.y + ny * offset * sign
-                    };
-                });
-                break;
-            }
-            case 'spiral':
-                centers = alternatingVerticalCenters(count, inner, block, gap);
-                break;
             case 'clock':
                 centers = circularCenters(count, viewBox, block, padding, layout);
                 break;
@@ -5962,15 +5933,6 @@
             };
         });
     };
-    const alternatingVerticalCenters = (count, inner, block, gap) => {
-        const baseX = inner.x + inner.width / 2;
-        const offset = Math.min(Math.max(block.width * 0.65 + gap / 2, 0), Math.max((inner.width - block.width) / 2, 0));
-        const points = lineCenters(count, baseX, inner.y + block.height / 2, baseX, inner.y + inner.height - block.height / 2);
-        return points.map((point, index) => ({
-            x: point.x + (index % 2 === 0 ? -offset : offset),
-            y: point.y
-        }));
-    };
     const circularCenters = (count, viewBox, block, padding, layout) => {
         var _a;
         const guide = computeClockCircleGuide(viewBox, block, padding, layout);
@@ -6073,7 +6035,6 @@
     const DEFAULT_BLOCK_WIDTH = 180;
     const DEFAULT_BLOCK_HEIGHT = 400;
     const DEFAULT_BLOCK_WIDTH_RATIO = 0.24;
-    const DEFAULT_BLOCK_GAP = 36;
     const DEFAULT_IMAGE_WIDTH = 48;
     const DEFAULT_IMAGE_HEIGHT = 48;
     const DEFAULT_IMAGE_GAP = 10;
@@ -6089,12 +6050,11 @@
     const isClock = (spec) => normalizeLayout(spec.layout).type === 'clock';
     const isArc = (spec) => normalizeLayout(spec.layout).type === 'arc';
     const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
-    const isLadder = (spec) => normalizeLayout(spec.layout).type === 'ladder';
     const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
     const shouldShowImageBackground = (spec) => { var _a, _b; return (_b = (_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) !== null && _b !== void 0 ? _b : !(isPortrait(spec) || isLandscape(spec)); };
     const TITLE_FONT_SCALE_ID = 'storylineTitleFontSize';
     const MARKER_FONT_SCALE_ID = 'storylineMarkerFontSize';
-    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const clamp$2 = (value, min, max) => Math.max(min, Math.min(max, value));
     const getTextWeight = (text) => {
         if (!text) {
             return 4;
@@ -6143,7 +6103,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$2(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]) => {
@@ -6285,7 +6245,7 @@
         };
     };
     const getLayout = (spec, ctx) => {
-        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;
         const { width, height, startX, startY } = getRegionGeometry(ctx, spec);
         let blockWidth = resolveBlockWidth(spec, width);
         let blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : (isLandscape(spec) ? 320 : DEFAULT_BLOCK_HEIGHT);
@@ -6317,9 +6277,8 @@
                 width: blockWidth,
                 height: blockHeight
             },
-            gap: (_p = (_o = spec.block) === null || _o === void 0 ? void 0 : _o.gap) !== null && _p !== void 0 ? _p : DEFAULT_BLOCK_GAP,
-            padding: (_q = spec.block) === null || _q === void 0 ? void 0 : _q.padding,
-            lineDistance: (_r = spec.line) === null || _r === void 0 ? void 0 : _r.distance
+            padding: (_o = spec.block) === null || _o === void 0 ? void 0 : _o.padding,
+            lineDistance: (_p = spec.line) === null || _p === void 0 ? void 0 : _p.distance
         });
         if (!startX && !startY) {
             return result;
@@ -6330,7 +6289,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 +6493,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 +6543,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, 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 +6595,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 +6604,7 @@
             },
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             imageBox,
             textBox,
             contentBox: {
@@ -6678,7 +6649,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, 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 +6698,26 @@
     };
 
     const LANDSCAPE_IMAGE_HEIGHT_RATIO = 0.42;
-    const LANDSCAPE_DETACHED_GAP = 64;
-    const LANDSCAPE_CONNECTOR_ARROW_SIZE = 9;
+    const LANDSCAPE_CONNECTOR_GAP = 8;
     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 +6778,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 +6802,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 +6817,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 +6833,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 +6856,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 +6907,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
@@ -6941,23 +6933,18 @@
                         stroke: connectorStroke,
                         lineWidth: connectorLineWidth,
                         lineDash: connectorDash,
-                        fill: connectorStroke,
+                        fill: false,
                         path: (_d, ctx) => {
                             const m = getMetrics(ctx);
-                            const tipSize = LANDSCAPE_CONNECTOR_ARROW_SIZE;
                             const x = m.connector.x1;
                             const y0 = m.connector.y1;
                             const y1 = m.connector.y2;
-                            const tipDir = y1 < y0 ? -1 : 1;
-                            const baseY = y1 - tipDir * tipSize;
-                            const dashLine = `M ${x} ${y0} L ${x} ${baseY}`;
-                            const triangle = `M ${x - tipSize / 2} ${baseY} L ${x + tipSize / 2} ${baseY} L ${x} ${y1} Z`;
-                            return `${dashLine} ${triangle}`;
+                            return `M ${x} ${y0} L ${x} ${y1}`;
                         }
                     }
                 },
                 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, 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 +7059,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 +7094,7 @@
             onLeft,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             blockWidth,
@@ -7199,7 +7187,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, 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 +7207,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$1 = (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 +7268,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 +7283,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 +7302,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 +7323,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 +7356,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 +7419,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$1(Math.min(regionWidth / Math.max(count * ARC_BLOCK_IMAGE_SIZE * 0.92, 1), regionHeight / 620), 0.42, 1);
+        const textScale = clamp$1(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$1(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$1(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$1(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 +7454,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 +7478,8 @@
             textBox,
             contentBox,
             isDown,
-            textAlign
+            textAlign,
+            textAnchorX
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
@@ -7484,12 +7487,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 +7515,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 +7541,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 +7551,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, 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)
         };
@@ -7560,9 +7570,35 @@
     const WING_TITLE_TO_CONTENT_GAP = 4;
     const WING_TITLE_IMAGE_WIDTH_RATIO = 0.6;
     const WING_TITLE_IMAGE_MAX_WIDTH = 820;
+    const WING_DEFAULT_PATH_END_WIDTH = 350;
+    const WING_IMAGE_MIN_SCALE = 0.52;
+    const WING_IMAGE_MAX_SCALE = 1.2;
+    const WING_BOTTOM_TEXT_IMAGE_GAP_RATIO = 1.35;
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
     const getWingDirection = (spec) => {
         return normalizeLayout(spec.layout).direction === 'right' ? 'right' : 'left';
     };
+    const getWingPathWidthRange = (spec) => {
+        var _a, _b, _c, _e, _f;
+        const lineStyle = ((_b = (_a = spec.line) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {});
+        const startWidth = Math.max(Number((_c = lineStyle.startWidth) !== null && _c !== void 0 ? _c : 50), 0.5);
+        const endWidth = Math.max(Number((_f = (_e = lineStyle.endWidth) !== null && _e !== void 0 ? _e : lineStyle.lineWidth) !== null && _f !== void 0 ? _f : WING_DEFAULT_PATH_END_WIDTH), startWidth);
+        return { startWidth, endWidth };
+    };
+    const getWingBlockPathRatio = (spec, index) => {
+        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 <= 1) {
+            return 0.5;
+        }
+        return index / (count - 1);
+    };
+    const getWingBlockImageScale = (spec, index) => {
+        const { startWidth, endWidth } = getWingPathWidthRange(spec);
+        const startScale = clamp(startWidth / WING_DEFAULT_PATH_END_WIDTH, WING_IMAGE_MIN_SCALE, WING_IMAGE_MAX_SCALE);
+        const endScale = clamp(endWidth / WING_DEFAULT_PATH_END_WIDTH, WING_IMAGE_MIN_SCALE, WING_IMAGE_MAX_SCALE);
+        return startScale + (endScale - startScale) * getWingBlockPathRatio(spec, index);
+    };
     const getWingArcGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
@@ -7595,15 +7631,31 @@
             y: arc.cy + Math.sin(angle) * arc.ry
         };
     };
+    const isWingBottomBlock = (spec, ctx, index) => {
+        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 false;
+        }
+        let bottomIndex = 0;
+        let bottomY = Number.NEGATIVE_INFINITY;
+        for (let i = 0; i < count; i++) {
+            const center = getWingBlockCenter(spec, ctx, i);
+            if (center.y > bottomY) {
+                bottomY = center.y;
+                bottomIndex = i;
+            }
+        }
+        return index === bottomIndex;
+    };
     const buildWingArcMark = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _e, _f;
         if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false) {
             return null;
         }
         const themeColor = getThemeColor(spec);
         const lineStyle = ((_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {});
-        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 50), 0.5);
-        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 350), startWidth);
+        const { startWidth, endWidth } = getWingPathWidthRange(spec);
         return {
             type: 'group',
             name: 'storyline-wing-arc',
@@ -7616,7 +7668,7 @@
                     style: {
                         stroke: false,
                         lineWidth: 0,
-                        fill: (_j = (_h = lineStyle.fill) !== null && _h !== void 0 ? _h : lineStyle.stroke) !== null && _j !== void 0 ? _j : themeColor,
+                        fill: (_f = (_e = lineStyle.fill) !== null && _e !== void 0 ? _e : lineStyle.stroke) !== null && _f !== void 0 ? _f : themeColor,
                         opacity: 0.95,
                         path: (_d, ctx) => {
                             const arc = getWingArcGeometry(spec, ctx);
@@ -7700,14 +7752,15 @@
         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;
         const textHeight = WING_TEXT_BOX_HEIGHT;
         const contentHeight = 100000;
-        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 imageScale = getWingBlockImageScale(spec, index);
+        const imageWidth = Math.round(Number((_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : WING_BLOCK_IMAGE_SIZE) * imageScale);
+        const imageHeight = Math.round(Number((_r = (_q = spec.image) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : WING_BLOCK_IMAGE_SIZE) * imageScale);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
@@ -7717,14 +7770,35 @@
         const direction = getWingDirection(spec);
         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 isBottomAbove = isWingBottomBlock(spec, ctx, index);
+        const isVerticalLayout = isBottomAbove || isSpecialBelow;
         const textWidth = WING_TEXT_BOX_WIDTH;
         let textBox;
         let contentBox;
         let connectorBox;
         let onLeft;
         let verticalAlign;
-        if (isVerticalLayout) {
+        if (isBottomAbove) {
+            const bottomTextImageGap = Math.round(WING_TEXT_IMAGE_GAP * WING_BOTTOM_TEXT_IMAGE_GAP_RATIO);
+            const textX = -textWidth / 2;
+            const textY = -imageHeight / 2 - bottomTextImageGap - textHeight;
+            textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
+            contentBox = {
+                x: textX,
+                y: textY + titleHeight + titleToContentGap,
+                width: textWidth,
+                height: contentHeight
+            };
+            connectorBox = {
+                x: -1,
+                y: textY + textHeight,
+                width: 2,
+                height: bottomTextImageGap
+            };
+            onLeft = false;
+            verticalAlign = 'above';
+        }
+        else if (isVerticalLayout) {
             const textX = -textWidth / 2;
             const textY = imageHeight / 2 + WING_TEXT_IMAGE_GAP;
             textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
@@ -7770,6 +7844,7 @@
             verticalAlign,
             titleFontSize,
             titleLineHeight,
+            titleHeight,
             contentFontSize,
             contentLineHeight,
             imageBox,
@@ -7831,7 +7906,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, 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';
@@ -7858,193 +7933,6 @@
         };
     };
 
-    const LADDER_HEADLINE_FONT_RATIO = 0.42;
-    const LADDER_HEADLINE_FONT_MIN = 80;
-    const LADDER_HEADLINE_FONT_MAX = 240;
-    const LADDER_DIAGONAL_LINE_WIDTH = 2;
-    const LADDER_DIAGONAL_DASH = [12, 8];
-    const LADDER_BLOCK_IMAGE_SIZE = 100;
-    const LADDER_TITLE_FONT_SIZE = 28;
-    const LADDER_TITLE_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;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerX = startX + padding.left;
-        const innerY = startY + padding.top;
-        const innerW = Math.max(width - padding.left - padding.right, 1);
-        const innerH = Math.max(height - padding.top - padding.bottom, 1);
-        const isDown = isDownLadder(spec);
-        const x0 = innerX;
-        const x1 = innerX + innerW;
-        const y0 = isDown ? innerY : innerY + innerH;
-        const y1 = isDown ? innerY + innerH : innerY;
-        const cx = (x0 + x1) / 2;
-        const cy = (y0 + y1) / 2;
-        const dx = x1 - x0;
-        const dy = y1 - y0;
-        const angleRad = (Math.atan2(dy, dx) / Math.PI) * 180;
-        const fontSize = Math.max(LADDER_HEADLINE_FONT_MIN, Math.min(LADDER_HEADLINE_FONT_MAX, Math.round(innerH * LADDER_HEADLINE_FONT_RATIO)));
-        return { x0, y0, x1, y1, cx, cy, angleRad, fontSize };
-    };
-    const getLadderHeadlineText = (spec) => {
-        var _a, _b;
-        const layoutOpt = normalizeLayout(spec.layout);
-        if (typeof layoutOpt.headline === 'string' && layoutOpt.headline.length > 0) {
-            return layoutOpt.headline;
-        }
-        const title = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.text;
-        if (typeof title === 'string' && title.length > 0) {
-            return title;
-        }
-        return 'storyline';
-    };
-    const buildLadderDiagonalMark = (spec) => {
-        const themeColor = getThemeColor(spec);
-        return {
-            type: 'group',
-            name: 'storyline-ladder-diagonal',
-            zIndex: vchart.LayoutZIndex.Mark - 1,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-ladder-diagonal-line',
-                    interactive: false,
-                    style: {
-                        path: (_d, ctx) => {
-                            const g = getLadderDiagonalGeometry(spec, ctx);
-                            return `M ${g.x0} ${g.y0} L ${g.x1} ${g.y1}`;
-                        },
-                        stroke: withAlpha(themeColor, 0.85),
-                        lineWidth: LADDER_DIAGONAL_LINE_WIDTH,
-                        lineDash: LADDER_DIAGONAL_DASH,
-                        fill: 'transparent'
-                    }
-                }
-            ]
-        };
-    };
-    const buildLadderHeadlineMark = (spec) => {
-        const text = getLadderHeadlineText(spec);
-        if (!text) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        return {
-            type: 'group',
-            name: 'storyline-ladder-headline',
-            zIndex: vchart.LayoutZIndex.Mark,
-            style: {
-                x: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).cx,
-                y: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).cy,
-                angle: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).angleRad
-            },
-            children: [
-                {
-                    type: 'text',
-                    name: 'storyline-ladder-headline-text',
-                    interactive: false,
-                    style: {
-                        x: 0,
-                        y: 0,
-                        text,
-                        fontSize: (_d, ctx) => getLadderDiagonalGeometry(spec, ctx).fontSize,
-                        fontWeight: 900,
-                        fontFamily: 'Impact, "Arial Black", sans-serif',
-                        fill: withAlpha(themeColor, 0.92),
-                        textAlign: 'center',
-                        textBaseline: 'middle'
-                    }
-                }
-            ]
-        };
-    };
-    const isOnLeft = (index) => index % 2 === 1;
-    const getLadderBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        const block = getLayout(spec, ctx).blocks[index];
-        const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
-        const imagePosition = isOnLeft(index) ? 'right' : 'left';
-        const imageWidth = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.width) !== null && _e !== void 0 ? _e : LADDER_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_g = (_f = spec.image) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : LADDER_BLOCK_IMAGE_SIZE;
-        const imageGap = (_j = (_h = spec.image) === null || _h === void 0 ? void 0 : _h.gap) !== null && _j !== void 0 ? _j : DEFAULT_IMAGE_GAP;
-        const hasImage = !!((_l = (_k = spec.data) === null || _k === void 0 ? void 0 : _k[index]) === null || _l === void 0 ? void 0 : _l.image);
-        const blockWidth = (_m = block === null || block === void 0 ? void 0 : block.width) !== null && _m !== void 0 ? _m : resolveBlockWidth(spec, 0);
-        const blockHeight = (_q = (_o = block === null || block === void 0 ? void 0 : block.height) !== null && _o !== void 0 ? _o : (_p = spec.block) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : DEFAULT_BLOCK_HEIGHT;
-        const imageBox = getImageBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const 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 contentGap = ((_x = (_w = spec.data) === null || _w === void 0 ? void 0 : _w[index]) === null || _x === void 0 ? void 0 : _x.title) ? 8 : 0;
-        return {
-            block: { width: blockWidth, height: blockHeight },
-            titleFontSize,
-            titleLineHeight,
-            imageBox,
-            textBox,
-            contentBox: {
-                y: textBox.y + titleHeight + contentGap,
-                height: Math.max(0, textBox.height - titleHeight - contentGap)
-            }
-        };
-    };
-    const buildLadderBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h;
-        const hasImage = !!block.image;
-        const onLeft = isOnLeft(index);
-        const align = onLeft ? 'right' : 'left';
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const showBackground = ((_a = spec.block) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
-        const showImageBackground = shouldShowImageBackground(spec);
-        const getTitleX = (ctx) => {
-            const m = getLadderBlockMetrics(spec, ctx, index);
-            return align === 'right' ? m.textBox.x + m.textBox.width : m.textBox.x;
-        };
-        return {
-            type: 'group',
-            id: `storyline-block-${(_b = block.id) !== null && _b !== void 0 ? _b : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; },
-                y: (_d, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; },
-                width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width,
-                height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height
-            },
-            children: [
-                showBackground
-                    ? {
-                        type: 'rect',
-                        name: `storyline-block-bg-${index}`,
-                        interactive: false,
-                        style: Object.assign({ x: 0, y: 0, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_c = spec.block) === null || _c === void 0 ? void 0 : _c.style)
-                    }
-                    : null,
-                showImageBackground
-                    ? {
-                        type: 'rect',
-                        name: `storyline-block-image-bg-${index}`,
-                        interactive: false,
-                        style: Object.assign(Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: 8 }, getImageBackgroundStyle(spec)), (_e = spec.block) === null || _e === void 0 ? void 0 : _e.style)
-                    }
-                    : null,
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_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 }) })
-                    : 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 }) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
     class StorylineChartSpecTransformer extends vchart.CommonChartSpecTransformer {
         transformSpec(spec) {
             var _a;
@@ -8069,15 +7957,11 @@
         const arcDown = arc && normalizeLayout(spec.layout).direction === 'down';
         const arcUp = arc && !arcDown;
         const portrait = isPortrait(spec);
-        const ladder = isLadder(spec);
         const wing = isWing(spec);
         const clock = isClock(spec);
         const topTitleImageReserve = (() => {
             var _a, _b, _c, _d;
-            if (arc ||
-                ladder ||
-                !((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) ||
-                ((_b = spec.titleImage) === null || _b === void 0 ? void 0 : _b.visible) === false) {
+            if (arc || !((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || ((_b = spec.titleImage) === null || _b === void 0 ? void 0 : _b.visible) === false) {
                 return 0;
             }
             return getTitleImageReservedHeight(spec, Number((_c = spec.width) !== null && _c !== void 0 ? _c : 1000), Number((_d = spec.height) !== null && _d !== void 0 ? _d : 600));
@@ -8102,33 +7986,7 @@
             const breath = 16;
             return Math.max(LARGE, Math.round(imageHeight / 2 + textGap + titleLineHeight + titleToContentGap + contentHeight + breath));
         })();
-        const ladderHorizontalPadding = (() => {
-            var _a, _b, _c, _d, _e, _f;
-            if (!ladder) {
-                return 0;
-            }
-            const blockWidth = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : resolveBlockWidth(spec, 0);
-            const imageWidth = (_d = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 96;
-            const imageGap = (_f = (_e = spec.image) === null || _e === void 0 ? void 0 : _e.gap) !== null && _f !== void 0 ? _f : DEFAULT_IMAGE_GAP;
-            const innerPadding = 12 * 2;
-            const contentWidth = Math.max(blockWidth - imageWidth - imageGap - innerPadding, DEFAULT_BLOCK_WIDTH * 0.5);
-            const ideal = Math.round(contentWidth * 2);
-            const canvasWidth = spec.width;
-            const cap = canvasWidth ? Math.floor(canvasWidth * 0.3) : ideal;
-            return Math.min(ideal, cap);
-        })();
-        const ladderVerticalPadding = (() => {
-            var _a, _b;
-            if (!ladder) {
-                return 0;
-            }
-            const blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 132;
-            const ideal = Math.round(blockHeight * 3);
-            const canvasHeight = spec.height;
-            const cap = canvasHeight ? Math.floor(canvasHeight * 0.3) : ideal;
-            return Math.min(ideal, cap);
-        })();
-        const defaultTop = Math.max(topTitleImageReserve, clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
+        const defaultTop = Math.max(topTitleImageReserve, clock ? 40 : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
         const defaultBottom = clock
             ? 60
             : portrait
@@ -8136,7 +7994,7 @@
                 : wing
                     ? 300
                     : arcUp
-                        ? 0
+                        ? 100
                         : arcDown
                             ? TEXT_RESERVE
                             : LARGE;
@@ -8152,8 +8010,8 @@
             }
             return Math.round(canvasWidth / (count + 1));
         })();
-        const defaultLeft = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;
-        const defaultRight = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;
+        const defaultLeft = clock ? 40 : arcHorizontalPadding;
+        const defaultRight = clock ? 40 : arcHorizontalPadding;
         const p = spec.padding;
         if (p == null) {
             spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];
@@ -8202,11 +8060,6 @@
             const wingTitleImageMark = buildWingTitleImageMark(spec);
             return [arcMark, wingTitleImageMark, ...blockMarks].filter(Boolean);
         }
-        if (isLadder(spec)) {
-            const diagonalMark = buildLadderDiagonalMark(spec);
-            const headlineMark = buildLadderHeadlineMark(spec);
-            return [diagonalMark, headlineMark, ...blockMarks].filter(Boolean);
-        }
         return [titleImageMark, lineMark, ...blockMarks].filter(Boolean);
     };
     const buildLineMark = (spec) => {
@@ -8238,9 +8091,6 @@
         if (isWing(spec)) {
             return buildWingBlockMark(spec, block, index);
         }
-        if (isLadder(spec)) {
-            return buildLadderBlockMark(spec, block, index);
-        }
         return buildDefaultBlockMark(spec, block, index);
     };