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

package/esm/charts/3d/plugin.js

@@ -28,4 +28,4 @@ export const register3DPlugin = () => {
     registerChartPlugin(VChart3dPlugin), registerDirectionalLight(), registerOrthoCamera(), 
     registerViewTransform3dPlugin();
 };
-//# sourceMappingURL=plugin.js.map
+//# sourceMappingURL=plugin.js.map

package/esm/charts/3d/pyramid-3d.js

@@ -21,4 +21,4 @@ export const registerPyramid3dMark = () => {
     Factory.registerMark(Pyramid3dMark.type, Pyramid3dMark), registerShadowRoot(), registerPyramid3d(), 
     registerPolygonAnimation(), Factory.registerGraphicComponent("pyramid3d", createPyramid3d);
 };
-//# sourceMappingURL=pyramid-3d.js.map
+//# sourceMappingURL=pyramid-3d.js.map

package/esm/charts/3d/rect-3d.js

@@ -27,4 +27,4 @@ export const registerRect3dMark = () => {
     Factory.registerMark(Rect3dMark.type, Rect3dMark), registerShadowRoot(), registerRect3d(), 
     registerRectAnimation(), Factory.registerGraphicComponent("rect3d", createRect3d);
 };
-//# sourceMappingURL=rect-3d.js.map
+//# sourceMappingURL=rect-3d.js.map

package/esm/charts/3d/util.js

@@ -7,4 +7,4 @@ export const is3DChart = spec => {
     !0);
     var type;
 };
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

package/esm/charts/axis-3d/axis-3d-mixin.js

@@ -56,4 +56,4 @@ export class Axis3dMixin {
         return getUpdateAttributeOfZAxis(this, ignoreGrid);
     }
 }
-//# sourceMappingURL=axis-3d-mixin.js.map
+//# sourceMappingURL=axis-3d-mixin.js.map

package/esm/charts/axis-3d/band-axis.js

@@ -13,4 +13,4 @@ export const registerCartesianBandAxis3d = () => {
         axisZ: Object.assign(Object.assign({}, CartesianBandAxis.builtInTheme.axisX), axisZ)
     }), mixin(AxisCls, Axis3dMixin);
 };
-//# sourceMappingURL=band-axis.js.map
+//# sourceMappingURL=band-axis.js.map

package/esm/charts/axis-3d/index.js

@@ -16,4 +16,4 @@ export const registerAxis3dPlugin = () => {
     register3DPlugin(), registerLayout3d(), registerCartesianBandAxis3d(), registerCartesianLinearAxis3d(), 
     registerCartesianTimeAxis3d(), registerCartesianSymlogAxis3d(), registerCartesianLogAxis3d();
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/axis-3d/linear-axis.js

@@ -12,5 +12,4 @@ export const registerCartesianLinearAxis3d = () => {
     AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), {
         axisZ: Object.assign(Object.assign({}, CartesianLinearAxis.builtInTheme.axisX), axisZ)
     }), mixin(AxisCls, Axis3dMixin);
-};
-//# sourceMappingURL=linear-axis.js.map
+};

package/esm/charts/axis-3d/log-axis.js

@@ -13,4 +13,4 @@ export const registerCartesianLogAxis3d = () => {
         axisZ: Object.assign(Object.assign({}, CartesianLogAxis.builtInTheme.axisX), axisZ)
     }), mixin(AxisCls, Axis3dMixin);
 };
-//# sourceMappingURL=log-axis.js.map
+//# sourceMappingURL=log-axis.js.map

package/esm/charts/axis-3d/symlog-axis.js

@@ -13,4 +13,4 @@ export const registerCartesianSymlogAxis3d = () => {
         axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ)
     }), mixin(AxisCls, Axis3dMixin);
 };
-//# sourceMappingURL=symlog-axis.js.map
+//# sourceMappingURL=symlog-axis.js.map

package/esm/charts/axis-3d/theme.js

@@ -3,4 +3,4 @@ export const axisZ = {
         space: 0
     }
 };
-//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/esm/charts/axis-3d/time-axis.js

@@ -13,4 +13,4 @@ export const registerCartesianTimeAxis3d = () => {
         axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ)
     }), mixin(AxisCls, Axis3dMixin);
 };
-//# sourceMappingURL=time-axis.js.map
+//# sourceMappingURL=time-axis.js.map

package/esm/charts/axis-3d/util.js

@@ -37,4 +37,4 @@ export const getUpdateAttributeOfZAxis = (axis, ignoreGrid) => {
         anchor3d: anchor3d
     }), attrs;
 };
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

package/esm/charts/combination-candlestick/combination-candlestick-transformer.js

@@ -196,4 +196,4 @@ export class CombinationCandlestickChartSpecTransformer extends CartesianChartSp
         };
     }
 }
-//# sourceMappingURL=combination-candlestick-transformer.js.map
+//# sourceMappingURL=combination-candlestick-transformer.js.map

package/esm/charts/combination-candlestick/combination-candlestick.js

@@ -26,4 +26,4 @@ mixin(CombinationCandlestickChart, StackChartMixin);
 export const registerCombinationCandlestickChart = () => {
     registerCandlestickSeries(), Factory.registerChart(CombinationCandlestickChart.type, CombinationCandlestickChart);
 };
-//# sourceMappingURL=combination-candlestick.js.map
+//# sourceMappingURL=combination-candlestick.js.map

package/esm/charts/combination-candlestick/constant.js

@@ -1,2 +1,2 @@
 export const CombinationCandlestickChart_TYPE = "combinationCandlestick";
-//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

package/esm/charts/combination-candlestick/index.js

@@ -3,4 +3,4 @@ export * from "./combination-candlestick";
 export * from "./interface";
 
 export * from "./constant";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/combination-candlestick/interface.js

@@ -1,2 +1,2 @@
 export { };
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

package/esm/charts/conversion-funnel/arrow-data-transform.js

@@ -91,4 +91,4 @@ function computeIndex(arrow, totalArrows) {
     }
     return index;
 }
-//# sourceMappingURL=arrow-data-transform.js.map
+//# sourceMappingURL=arrow-data-transform.js.map

package/esm/charts/conversion-funnel/constants.js

@@ -22,4 +22,4 @@ export const DEFAULT_ARROW_TEXT_MARK_STYLE = {
 export const DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {
     fill: "#eff1f9"
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.js.map

package/esm/charts/conversion-funnel/conversion-funnel-transformer.js

@@ -190,4 +190,4 @@ function addFunnelBackgroundMark(funnelBackground) {
         })
     });
 }
-//# sourceMappingURL=conversion-funnel-transformer.js.map
+//# sourceMappingURL=conversion-funnel-transformer.js.map

package/esm/charts/conversion-funnel/conversion-funnel.js

@@ -54,4 +54,4 @@ export const registerConversionFunnelChart = option => {
     const vchartConstructor = (null == option ? void 0 : option.VChart) || VChart;
     vchartConstructor && (vchartConstructor.useChart([ ConversionFunnelChart ]), vchartConstructor.useSeries([ ConversionFunnelSeries ]));
 };
-//# sourceMappingURL=conversion-funnel.js.map
+//# sourceMappingURL=conversion-funnel.js.map

package/esm/charts/conversion-funnel/index.js

@@ -1,4 +1,4 @@
 export * from "./interface";
 
 export * from "./conversion-funnel";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/conversion-funnel/interface.js

@@ -1,2 +1,2 @@
 export { };
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

package/esm/charts/conversion-funnel/util.js

@@ -7,4 +7,4 @@ export function isSameArrow(arrow1, arrow2) {
     const {from: from1, to: to1} = arrow1, {from: from2, to: to2} = arrow2;
     return from1 === from2 && to1 === to2;
 }
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

package/esm/charts/funnel-3d/chart.js

@@ -22,4 +22,4 @@ export const registerFunnel3dChart = () => {
     registerMarkTooltipProcessor(), register3DPlugin(), registerLayout3d(), registerFunnel3dSeries(), 
     Factory.registerChart(Funnel3dChart.type, Funnel3dChart);
 };
-//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

package/esm/charts/funnel-3d/constant.js

@@ -22,4 +22,4 @@ export const funnel3dSeriesMark = Object.assign(Object.assign({}, baseSeriesMark
         type: "rule"
     }
 });
-//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

package/esm/charts/funnel-3d/index.js

@@ -5,4 +5,4 @@ export * from "./series";
 export * from "./series-spec-transformer";
 
 export * from "./interface";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/funnel-3d/interface.js

@@ -1,2 +1,2 @@
 export { };
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

package/esm/charts/funnel-3d/series-spec-transformer.js

@@ -5,4 +5,4 @@ export class Funnel3dSeriesSpecTransformer extends FunnelSeriesSpecTransformer {
         this._addMarkLabelSpec(spec, "funnel3d"), spec.isTransform && this._addMarkLabelSpec(spec, "transform3d", "transformLabel");
     }
 }
-//# sourceMappingURL=series-spec-transformer.js.map
+//# sourceMappingURL=series-spec-transformer.js.map

package/esm/charts/histogram-3d/chart.js

@@ -26,5 +26,4 @@ export const registerHistogram3dChart = () => {
     registerGroupTooltipProcessor(), registerDimensionTooltipProcessor(), registerMarkTooltipProcessor(), 
     registerDimensionEvents(), registerDimensionHover(), register3DPlugin(), registerLayout3d(), 
     registerBar3dSeries(), Factory.registerChart(Histogram3dChart.type, Histogram3dChart);
-};
-//# sourceMappingURL=chart.js.map
+};

package/esm/charts/histogram-3d/index.js

@@ -1,4 +1,4 @@
 export * from "./chart";
 
 export * from "./interface";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/histogram-3d/interface.js

@@ -1,2 +1,2 @@
 export { };
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

package/esm/charts/storyline/layouts/wing.js

@@ -1,8 +1,8 @@
-import { LayoutZIndex } from "@visactor/vchart";
+import { LayoutZIndex, measureText } from "@visactor/vchart";
 
-import { BLOCK_TITLE_MAX_LINES, buildPlainContent, getBlockTitleHeight, getImageBackgroundStyle, getChartGeometry, getRegionGeometry, getThemeColor, getTitleImageSize, normalizeLayout, omitImageLayoutSpec, resolveAdaptiveLineHeight, resolveTitleFontSize, shouldShowImageBackground } from "./common";
+import { BLOCK_TITLE_MAX_LINES, buildPlainContent, getImageBackgroundStyle, getChartGeometry, getRegionGeometry, getThemeColor, getTitleImageSize, normalizeLayout, omitImageLayoutSpec, resolveAdaptiveLineHeight, shouldShowImageBackground } from "./common";
 
-const WING_BLOCK_IMAGE_SIZE = 160, WING_TEXT_GAP_FROM_IMAGE = 14, WING_TITLE_LINE_HEIGHT = 30, WING_TITLE_FONT_SIZE = 22, WING_CONTENT_LINE_HEIGHT = 17, WING_CONTENT_FONT_SIZE = 12, WING_TEXT_BOX_WIDTH = 240, WING_TEXT_BOX_HEIGHT = 110, WING_TITLE_TO_CONTENT_GAP = 4, WING_TITLE_IMAGE_WIDTH_RATIO = .6, WING_TITLE_IMAGE_MAX_WIDTH = 820, WING_DEFAULT_PATH_END_WIDTH = 350, WING_IMAGE_MIN_SCALE = .52, WING_IMAGE_MAX_SCALE = 1.2, WING_BOTTOM_TEXT_IMAGE_GAP_RATIO = 1.35, clamp = (value, min, max) => Math.max(min, Math.min(max, value)), getWingDirection = spec => "right" === normalizeLayout(spec.layout).direction ? "right" : "left", getWingPathWidthRange = spec => {
+const WING_BLOCK_IMAGE_SIZE = 160, WING_TEXT_GAP_FROM_IMAGE = 14, WING_TITLE_LINE_HEIGHT = 30, WING_TITLE_FONT_SIZE = 22, WING_TITLE_MIN_FONT_SIZE = 14, WING_TITLE_MAX_FONT_SIZE = 30, WING_CONTENT_LINE_HEIGHT = 17, WING_CONTENT_FONT_SIZE = 12, WING_TEXT_BOX_WIDTH = 240, WING_TEXT_BOX_MIN_WIDTH = 240, WING_TEXT_BOX_MAX_WIDTH = 360, WING_TEXT_BOX_WIDTH_RATIO = .24, WING_TEXT_BOX_HEIGHT = 110, WING_TITLE_TO_CONTENT_GAP = 4, WING_TITLE_IMAGE_WIDTH_RATIO = .6, WING_TITLE_IMAGE_MAX_WIDTH = 820, WING_DEFAULT_PATH_END_WIDTH = 350, WING_IMAGE_MIN_SCALE = .52, WING_IMAGE_MAX_SCALE = 1.2, WING_BOTTOM_TEXT_IMAGE_GAP_RATIO = 1.35, WING_PATH_EDGE_GAP = 8, clamp = (value, min, max) => Math.max(min, Math.min(max, value)), getWingDirection = spec => "right" === normalizeLayout(spec.layout).direction ? "right" : "left", getWingPathWidthRange = spec => {
     var _a, _b, _c, _e, _f;
     const lineStyle = null !== (_b = null === (_a = spec.line) || void 0 === _a ? void 0 : _a.style) && void 0 !== _b ? _b : {}, startWidth = Math.max(Number(null !== (_c = lineStyle.startWidth) && void 0 !== _c ? _c : 50), .5);
     return {
@@ -16,14 +16,46 @@ const WING_BLOCK_IMAGE_SIZE = 160, WING_TEXT_GAP_FROM_IMAGE = 14, WING_TITLE_LIN
 }, getWingBlockImageScale = (spec, index) => {
     const {startWidth: startWidth, endWidth: endWidth} = getWingPathWidthRange(spec), startScale = clamp(startWidth / 350, .52, 1.2);
     return startScale + (clamp(endWidth / 350, .52, 1.2) - startScale) * getWingBlockPathRatio(spec, index);
+}, getConfiguredTextBoxWidth = spec => {
+    var _a, _b, _c;
+    const style = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.style, width = Number(null !== (_c = null !== (_b = null == style ? void 0 : style.width) && void 0 !== _b ? _b : null == style ? void 0 : style.maxLineWidth) && void 0 !== _c ? _c : 240);
+    return Number.isFinite(width) && width > 0 ? width : 240;
+}, getWingTextBoxWidth = (spec, ctx) => {
+    const {width: width} = getRegionGeometry(ctx, spec), configuredWidth = getConfiguredTextBoxWidth(spec), adaptiveWidth = Math.max(configuredWidth, Math.round(.24 * width));
+    return clamp(adaptiveWidth, 240, 360);
+}, estimateTextWidth = (text, fontSize) => Array.from(text).reduce(((sum, char) => 0 === char.trim().length ? sum + .32 * fontSize : sum + fontSize * (char.charCodeAt(0) > 255 ? 1.05 : .62)), 0), measureWingTitleWidth = (title, fontSize, style) => {
+    var _a;
+    if (!title) return 0;
+    try {
+        const size = measureText(title, {
+            fontSize: fontSize,
+            fontFamily: style.fontFamily,
+            fontWeight: null !== (_a = style.fontWeight) && void 0 !== _a ? _a : "bold"
+        });
+        return Number.isFinite(size.width) && size.width > 0 ? size.width : estimateTextWidth(title, fontSize);
+    } catch (_err) {
+        return estimateTextWidth(title, fontSize);
+    }
+}, 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(.96 * textWidth, 1))));
+}, resolveWingTitleFontSize = (spec, index, textWidth) => {
+    var _a, _b, _c, _e;
+    const style = null !== (_b = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.style) && void 0 !== _b ? _b : {}, configuredFontSize = style.fontSize;
+    if (null != configuredFontSize) return Number(configuredFontSize);
+    const title = null === (_e = null === (_c = spec.data) || void 0 === _c ? void 0 : _c[index]) || void 0 === _e ? void 0 : _e.title, measuredWidth = measureWingTitleWidth(title, 22, style);
+    if (!measuredWidth) return 22;
+    const widthLimit = textWidth * BLOCK_TITLE_MAX_LINES * .96, measuredPerFont = measuredWidth / 22, fittedFontSize = Math.floor(widthLimit / Math.max(measuredPerFont, 1));
+    return clamp(fittedFontSize, 14, 30);
 }, getWingArcGeometry = (spec, ctx) => {
     var _a, _b, _c;
-    const {width: width, height: height, startX: startX, startY: startY} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), layoutOpt = normalizeLayout(spec.layout), direction = getWingDirection(spec), defaultStart = "right" === direction ? 110 : -70, defaultEnd = "right" === direction ? 250 : 70, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : defaultStart, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : defaultEnd, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .92, rx = .6 * innerWidth * ratio;
+    const {width: width, height: height, startX: startX, startY: startY} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), layoutOpt = normalizeLayout(spec.layout), direction = getWingDirection(spec), defaultStart = "right" === direction ? 110 : -70, defaultEnd = "right" === direction ? 250 : 70, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : defaultStart, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : defaultEnd, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .92, {startWidth: startWidth, endWidth: endWidth} = getWingPathWidthRange(spec), topPathWidth = "right" === direction ? endWidth : startWidth, pathTopInset = Math.min(Math.max(innerHeight / 2 - 1, 0), Math.ceil(topPathWidth / 2 + 8)), ry = Math.max(innerHeight - pathTopInset, 1) / 2 * ratio, rx = .6 * innerWidth * ratio;
     return {
         cx: "right" === direction ? startX + innerWidth - .1 * rx : startX + .1 * rx,
-        cy: startY + innerHeight / 2,
+        cy: startY + pathTopInset - Math.min(Math.sin(startAngle / 180 * Math.PI), Math.sin(endAngle / 180 * Math.PI), 0) * ry,
         rx: rx,
-        ry: innerHeight / 2 * ratio,
+        ry: ry,
         startAngle: startAngle,
         endAngle: endAngle
     };
@@ -103,11 +135,50 @@ export const buildWingTitleImageMark = spec => {
         name: "storyline-wing-title-image",
         zIndex: LayoutZIndex.Mark + 8,
         children: [ Object.assign(Object.assign({
+            type: "rect",
+            name: "storyline-wing-title-image-node",
+            interactive: !1
+        }, spec.titleImage), {
+            _debug_bounds: !0,
+            style: Object.assign({
+                _debug_bounds: !0,
+                x: (_d, ctx) => {
+                    const {width: width, height: height, startX: startX} = getChartGeometry(ctx, spec), size = getTitleImageSize(spec, width, height, {
+                        widthRatio: .6,
+                        maxWidth: 820
+                    });
+                    return "right" === getWingDirection(spec) ? startX : startX + width - size.width;
+                },
+                fill: "red",
+                y: (_d, ctx) => getChartGeometry(ctx, spec).startY + 12,
+                width: (_d, ctx) => {
+                    const {width: width, height: height} = getChartGeometry(ctx, spec);
+                    return getTitleImageSize(spec, width, height, {
+                        widthRatio: .6,
+                        maxWidth: 820
+                    }).width;
+                },
+                height: (_d, ctx) => {
+                    const {width: width, height: height} = getChartGeometry(ctx, spec);
+                    return getTitleImageSize(spec, width, height, {
+                        widthRatio: .6,
+                        maxWidth: 820
+                    }).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: !1
         }, spec.titleImage), {
+            _debug_bounds: !0,
             style: Object.assign({
+                _debug_bounds: !0,
                 x: (_d, ctx) => {
                     const {width: width, height: height, startX: startX} = getChartGeometry(ctx, spec), size = getTitleImageSize(spec, width, height, {
                         widthRatio: .6,
@@ -141,25 +212,25 @@ export const buildWingTitleImageMark = spec => {
 };
 
 const WING_TEXT_IMAGE_GAP = 120, 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, null === (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a[index]) || void 0 === _b ? void 0 : _b.title, 240, 22, [ 8, 30 ]), titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, null === (_c = spec.title) || void 0 === _c ? void 0 : _c.style, 30, 1.3), titleHeight = getBlockTitleHeight(titleLineHeight, null === (_f = null === (_e = spec.data) || void 0 === _e ? void 0 : _e[index]) || void 0 === _f ? void 0 : _f.title, 240, titleFontSize), contentFontSize = Number(null !== (_j = null === (_h = null === (_g = spec.content) || void 0 === _g ? void 0 : _g.style) || void 0 === _h ? void 0 : _h.fontSize) && void 0 !== _j ? _j : 12), contentLineHeight = Number(null !== (_m = null === (_l = null === (_k = spec.content) || void 0 === _k ? void 0 : _k.style) || void 0 === _l ? void 0 : _l.lineHeight) && void 0 !== _m ? _m : 17), imageScale = getWingBlockImageScale(spec, index), imageWidth = Math.round(Number(null !== (_p = null === (_o = spec.image) || void 0 === _o ? void 0 : _o.width) && void 0 !== _p ? _p : 160) * imageScale), imageHeight = Math.round(Number(null !== (_r = null === (_q = spec.image) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 160) * imageScale), imageBox = {
+    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const textWidth = getWingTextBoxWidth(spec, ctx), titleStyle = null !== (_b = null === (_a = spec.title) || void 0 === _a ? void 0 : _a.style) && void 0 !== _b ? _b : {}, titleFontSize = resolveWingTitleFontSize(spec, index, textWidth), titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, titleStyle, 30, 1.3), titleHeight = titleLineHeight * getMeasuredTitleLineCount(null === (_e = null === (_c = spec.data) || void 0 === _c ? void 0 : _c[index]) || void 0 === _e ? void 0 : _e.title, titleFontSize, textWidth, titleStyle), contentFontSize = Number(null !== (_h = null === (_g = null === (_f = spec.content) || void 0 === _f ? void 0 : _f.style) || void 0 === _g ? void 0 : _g.fontSize) && void 0 !== _h ? _h : 12), contentLineHeight = Number(null !== (_l = null === (_k = null === (_j = spec.content) || void 0 === _j ? void 0 : _j.style) || void 0 === _k ? void 0 : _k.lineHeight) && void 0 !== _l ? _l : 17), imageScale = getWingBlockImageScale(spec, index), imageWidth = Math.round(Number(null !== (_o = null === (_m = spec.image) || void 0 === _m ? void 0 : _m.width) && void 0 !== _o ? _o : 160) * imageScale), imageHeight = Math.round(Number(null !== (_q = null === (_p = spec.image) || void 0 === _p ? void 0 : _p.height) && void 0 !== _q ? _q : 160) * imageScale), imageBox = {
         x: -imageWidth / 2,
         y: -imageHeight / 2,
         width: imageWidth,
         height: imageHeight
-    }, direction = getWingDirection(spec), count = null !== (_t = null === (_s = spec.data) || void 0 === _s ? void 0 : _s.length) && void 0 !== _t ? _t : 0, isSpecialBelow = "right" === direction && count > 0 && index === count - 1 || "left" === direction && 0 === index, isBottomAbove = isWingBottomBlock(spec, ctx, index), isVerticalLayout = isBottomAbove || isSpecialBelow;
+    }, direction = getWingDirection(spec), count = null !== (_s = null === (_r = spec.data) || void 0 === _r ? void 0 : _r.length) && void 0 !== _s ? _s : 0, isSpecialBelow = "right" === direction && count > 0 && index === count - 1 || "left" === direction && 0 === index, isBottomAbove = isWingBottomBlock(spec, ctx, index), isVerticalLayout = isBottomAbove || isSpecialBelow;
     let textBox, contentBox, connectorBox, onLeft, verticalAlign;
     if (isBottomAbove) {
-        const bottomTextImageGap = Math.round(162), textX = -120, textY = -imageHeight / 2 - bottomTextImageGap - 110;
+        const bottomTextImageGap = Math.round(162), textX = -textWidth / 2, textY = -imageHeight / 2 - bottomTextImageGap - 110;
         textBox = {
             x: textX,
             y: textY,
-            width: 240,
+            width: textWidth,
             height: 110
         }, contentBox = {
             x: textX,
             y: textY + titleHeight + 4,
-            width: 240,
+            width: textWidth,
             height: 1e5
         }, connectorBox = {
             x: -1,
@@ -168,16 +239,16 @@ const WING_TEXT_IMAGE_GAP = 120, getWingBlockMetrics = (spec, ctx, index) => {
             height: bottomTextImageGap
         }, onLeft = !1, verticalAlign = "above";
     } else if (isVerticalLayout) {
-        const textX = -120, textY = imageHeight / 2 + 120;
+        const textX = -textWidth / 2, textY = imageHeight / 2 + 120;
         textBox = {
             x: textX,
             y: textY,
-            width: 240,
+            width: textWidth,
             height: 110
         }, contentBox = {
             x: textX,
             y: textY + titleHeight + 4,
-            width: 240,
+            width: textWidth,
             height: 1e5
         }, connectorBox = {
             x: -1,
@@ -186,19 +257,19 @@ const WING_TEXT_IMAGE_GAP = 120, getWingBlockMetrics = (spec, ctx, index) => {
             height: 120
         }, onLeft = !1, verticalAlign = "below";
     } else {
-        const textOnLeft = "right" === direction, textX = textOnLeft ? -imageWidth / 2 - 120 - 240 : imageWidth / 2 + 120, textY = -55;
+        const textOnLeft = "right" === direction, textX = textOnLeft ? -imageWidth / 2 - 120 - textWidth : imageWidth / 2 + 120, textY = -55;
         textBox = {
             x: textX,
             y: textY,
-            width: 240,
+            width: textWidth,
             height: 110
         }, contentBox = {
             x: textX,
             y: textY + titleHeight + 4,
-            width: 240,
+            width: textWidth,
             height: 1e5
         };
-        const imageEdgeX = textOnLeft ? -imageWidth / 2 : imageWidth / 2, textEdgeX = textOnLeft ? textX + 240 : textX;
+        const imageEdgeX = textOnLeft ? -imageWidth / 2 : imageWidth / 2, textEdgeX = textOnLeft ? textX + textWidth : textX;
         connectorBox = {
             x: Math.min(imageEdgeX, textEdgeX),
             y: 0,
@@ -298,6 +369,8 @@ export const buildWingBlockMark = (spec, block, index) => {
                     return m.verticalAlign ? m.textBox.x + m.textBox.width / 2 : m.onLeft ? m.textBox.x + m.textBox.width : m.textBox.x;
                 },
                 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,