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

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$1 = (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$1(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;
@@ -6584,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 - 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) })
+                ? 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) })
@@ -6690,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).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) })
+                    ? 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) })
@@ -6740,7 +6699,6 @@
 
     const LANDSCAPE_IMAGE_HEIGHT_RATIO = 0.42;
     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_TITLE_LINE_HEIGHT = 34;
@@ -6975,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).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) })
+                    ? 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) })
@@ -7234,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).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) })
+                    ? 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) })
@@ -7262,7 +7215,7 @@
     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 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;
@@ -7473,25 +7426,25 @@
         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 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 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 imageDiameter = Math.round(clamp$1(configuredImageDiameter * imageScale, 64, configuredImageDiameter));
         const imageWidth = imageDiameter;
         const imageHeight = imageDiameter;
         const isDown = isDownArc(spec);
         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 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, textBoxWidth, titleFontSize);
-        const textHeight = Math.round(clamp(ARC_TEXT_BOX_HEIGHT * textScale, 88, ARC_TEXT_BOX_HEIGHT));
+        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';
@@ -7598,7 +7551,7 @@
                     }
                     : 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: (_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) })
+                    ? 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: (_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) })
@@ -7610,16 +7563,107 @@
     const WING_BLOCK_IMAGE_SIZE = 160;
     const WING_TITLE_LINE_HEIGHT = 30;
     const WING_TITLE_FONT_SIZE = 22;
+    const WING_TITLE_MIN_FONT_SIZE = 14;
+    const WING_TITLE_MAX_FONT_SIZE = 30;
     const WING_CONTENT_LINE_HEIGHT = 17;
     const WING_CONTENT_FONT_SIZE = 12;
     const WING_TEXT_BOX_WIDTH = 240;
+    const WING_TEXT_BOX_MIN_WIDTH = 240;
+    const WING_TEXT_BOX_MAX_WIDTH = 360;
+    const WING_TEXT_BOX_WIDTH_RATIO = 0.24;
     const WING_TEXT_BOX_HEIGHT = 110;
     const WING_TITLE_TO_CONTENT_GAP = 4;
     const WING_TITLE_IMAGE_WIDTH_RATIO = 0.6;
     const WING_TITLE_IMAGE_MAX_WIDTH = 820;
+    const 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 WING_PATH_EDGE_GAP = 8;
+    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 getConfiguredTextBoxWidth = (spec) => {
+        var _a, _b, _c;
+        const style = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style;
+        const width = Number((_c = (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : style === null || style === void 0 ? void 0 : style.maxLineWidth) !== null && _c !== void 0 ? _c : WING_TEXT_BOX_WIDTH);
+        return Number.isFinite(width) && width > 0 ? width : WING_TEXT_BOX_WIDTH;
+    };
+    const getWingTextBoxWidth = (spec, ctx) => {
+        const { width } = getRegionGeometry(ctx, spec);
+        const configuredWidth = getConfiguredTextBoxWidth(spec);
+        const adaptiveWidth = Math.max(configuredWidth, Math.round(width * WING_TEXT_BOX_WIDTH_RATIO));
+        return clamp(adaptiveWidth, WING_TEXT_BOX_MIN_WIDTH, WING_TEXT_BOX_MAX_WIDTH);
+    };
+    const estimateTextWidth = (text, fontSize) => Array.from(text).reduce((sum, char) => {
+        if (char.trim().length === 0) {
+            return sum + fontSize * 0.32;
+        }
+        return sum + fontSize * (char.charCodeAt(0) > 255 ? 1.05 : 0.62);
+    }, 0);
+    const measureWingTitleWidth = (title, fontSize, style) => {
+        var _a;
+        if (!title) {
+            return 0;
+        }
+        try {
+            const size = vchart.measureText(title, {
+                fontSize,
+                fontFamily: style.fontFamily,
+                fontWeight: (_a = style.fontWeight) !== null && _a !== void 0 ? _a : 'bold'
+            });
+            return Number.isFinite(size.width) && size.width > 0 ? size.width : estimateTextWidth(title, fontSize);
+        }
+        catch (_err) {
+            return estimateTextWidth(title, fontSize);
+        }
+    };
+    const getMeasuredTitleLineCount = (title, fontSize, textWidth, style) => {
+        if (!title) {
+            return 0;
+        }
+        const measuredWidth = measureWingTitleWidth(title, fontSize, style);
+        return Math.max(1, Math.min(BLOCK_TITLE_MAX_LINES, Math.ceil(measuredWidth / Math.max(textWidth * 0.96, 1))));
+    };
+    const resolveWingTitleFontSize = (spec, index, textWidth) => {
+        var _a, _b, _c, _e;
+        const style = ((_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {});
+        const configuredFontSize = style.fontSize;
+        if (configuredFontSize != null) {
+            return Number(configuredFontSize);
+        }
+        const title = (_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c[index]) === null || _e === void 0 ? void 0 : _e.title;
+        const measuredWidth = measureWingTitleWidth(title, WING_TITLE_FONT_SIZE, style);
+        if (!measuredWidth) {
+            return WING_TITLE_FONT_SIZE;
+        }
+        const widthLimit = textWidth * BLOCK_TITLE_MAX_LINES * 0.96;
+        const measuredPerFont = measuredWidth / WING_TITLE_FONT_SIZE;
+        const fittedFontSize = Math.floor(widthLimit / Math.max(measuredPerFont, 1));
+        return clamp(fittedFontSize, WING_TITLE_MIN_FONT_SIZE, WING_TITLE_MAX_FONT_SIZE);
+    };
     const getWingArcGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
@@ -7632,10 +7676,15 @@
         const startAngle = (_a = layoutOpt.startAngle) !== null && _a !== void 0 ? _a : defaultStart;
         const endAngle = (_b = layoutOpt.endAngle) !== null && _b !== void 0 ? _b : defaultEnd;
         const ratio = (_c = layoutOpt.radiusRatio) !== null && _c !== void 0 ? _c : 0.92;
-        const ry = (innerHeight / 2) * ratio;
+        const { startWidth, endWidth } = getWingPathWidthRange(spec);
+        const topPathWidth = direction === 'right' ? endWidth : startWidth;
+        const pathTopInset = Math.min(Math.max(innerHeight / 2 - 1, 0), Math.ceil(topPathWidth / 2 + WING_PATH_EDGE_GAP));
+        const arcHeight = Math.max(innerHeight - pathTopInset, 1);
+        const ry = (arcHeight / 2) * ratio;
         const rx = innerWidth * 0.6 * ratio;
+        const topSin = Math.min(Math.sin((startAngle / 180) * Math.PI), Math.sin((endAngle / 180) * Math.PI), 0);
         const cx = direction === 'right' ? startX + innerWidth - rx * 0.1 : startX + rx * 0.1;
-        const cy = startY + innerHeight / 2;
+        const cy = startY + pathTopInset - topSin * ry;
         return { cx, cy, rx, ry, startAngle, endAngle };
     };
     const getWingBlockCenter = (spec, ctx, index) => {
@@ -7652,15 +7701,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',
@@ -7673,7 +7738,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);
@@ -7727,7 +7792,29 @@
             name: 'storyline-wing-title-image',
             zIndex: vchart.LayoutZIndex.Mark + 8,
             children: [
-                Object.assign(Object.assign({ type: 'image', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { style: Object.assign({ x: (_d, ctx) => {
+                Object.assign(Object.assign({ type: 'rect', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { _debug_bounds: true, style: Object.assign({ _debug_bounds: true, x: (_d, ctx) => {
+                            const { width, height, startX } = getChartGeometry(ctx, spec);
+                            const size = getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            });
+                            return getWingDirection(spec) === 'right' ? startX : startX + width - size.width;
+                        }, fill: 'red', y: (_d, ctx) => {
+                            return getChartGeometry(ctx, spec).startY + 12;
+                        }, width: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).width;
+                        }, height: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).height;
+                        }, image: spec.titleImage.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, spec.titleImage.style) }),
+                Object.assign(Object.assign({ type: 'image', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { _debug_bounds: true, style: Object.assign({ _debug_bounds: true, x: (_d, ctx) => {
                             const { width, height, startX } = getChartGeometry(ctx, spec);
                             const size = getTitleImageSize(spec, width, height, {
                                 widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
@@ -7754,17 +7841,20 @@
     };
     const WING_TEXT_IMAGE_GAP = 120;
     const getWingBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        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, 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);
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const textWidth = getWingTextBoxWidth(spec, ctx);
+        const titleStyle = ((_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {});
+        const titleFontSize = resolveWingTitleFontSize(spec, index, textWidth);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, titleStyle, WING_TITLE_LINE_HEIGHT, 1.3);
+        const titleHeight = titleLineHeight * getMeasuredTitleLineCount((_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c[index]) === null || _e === void 0 ? void 0 : _e.title, titleFontSize, textWidth, titleStyle);
+        const contentFontSize = Number((_h = (_g = (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontSize) !== null && _h !== void 0 ? _h : WING_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_l = (_k = (_j = spec.content) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.lineHeight) !== null && _l !== void 0 ? _l : 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((_o = (_m = spec.image) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : WING_BLOCK_IMAGE_SIZE) * imageScale);
+        const imageHeight = Math.round(Number((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE) * imageScale);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
@@ -7772,16 +7862,36 @@
             height: imageHeight
         };
         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 count = (_s = (_r = spec.data) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : 0;
         const isSpecialBelow = (direction === 'right' && count > 0 && index === count - 1) || (direction === 'left' && index === 0);
-        const isVerticalLayout = isSpecialBelow;
-        const textWidth = WING_TEXT_BOX_WIDTH;
+        const isBottomAbove = isWingBottomBlock(spec, ctx, index);
+        const isVerticalLayout = isBottomAbove || isSpecialBelow;
         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 };
@@ -7889,7 +7999,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).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) => {
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, 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';
@@ -7916,194 +8026,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, 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: {
-                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).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 }) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
     class StorylineChartSpecTransformer extends vchart.CommonChartSpecTransformer {
         transformSpec(spec) {
             var _a;
@@ -8123,23 +8045,27 @@
         var _a, _b, _c, _d;
         const LARGE = 100;
         const SMALL = 20;
+        const WING_BASE_PADDING = 40;
+        const WING_DIRECTION_PADDING = 100;
+        const WING_TITLE_IMAGE_BOTTOM = 4;
         const TEXT_RESERVE = 280;
         const arc = isArc(spec);
         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 wingDirection = wing ? normalizeLayout(spec.layout).direction : undefined;
+        const wingLeft = wing && wingDirection !== 'right';
+        const wingRight = wing && wingDirection === 'right';
+        const wingTopPadding = wingRight ? WING_DIRECTION_PADDING : WING_BASE_PADDING;
+        const wingBottomPadding = wingLeft ? WING_DIRECTION_PADDING : WING_BASE_PADDING;
         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));
+            return getTitleImageReservedHeight(spec, Number((_c = spec.width) !== null && _c !== void 0 ? _c : 1000), Number((_d = spec.height) !== null && _d !== void 0 ? _d : 600), wing ? { bottom: WING_TITLE_IMAGE_BOTTOM } : undefined);
         })();
         const portraitBottomReserve = (() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -8161,39 +8087,13 @@
             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 : wing ? wingTopPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
         const defaultBottom = clock
             ? 60
             : portrait
                 ? portraitBottomReserve
                 : wing
-                    ? 300
+                    ? wingBottomPadding
                     : arcUp
                         ? 100
                         : arcDown
@@ -8211,8 +8111,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];
@@ -8261,11 +8161,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) => {
@@ -8297,9 +8192,6 @@
         if (isWing(spec)) {
             return buildWingBlockMark(spec, block, index);
         }
-        if (isLadder(spec)) {
-            return buildLadderBlockMark(spec, block, index);
-        }
         return buildDefaultBlockMark(spec, block, index);
     };