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

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

@@ -32,4 +32,4 @@ const register3DPlugin = () => {
 };
 
 exports.register3DPlugin = register3DPlugin;
-//# sourceMappingURL=plugin.js.map
+//# sourceMappingURL=plugin.js.map

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

@@ -27,4 +27,4 @@ const registerPyramid3dMark = () => {
 };
 
 exports.registerPyramid3dMark = registerPyramid3dMark;
-//# sourceMappingURL=pyramid-3d.js.map
+//# sourceMappingURL=pyramid-3d.js.map

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

@@ -33,4 +33,4 @@ const registerRect3dMark = () => {
 };
 
 exports.registerRect3dMark = registerRect3dMark;
-//# sourceMappingURL=rect-3d.js.map
+//# sourceMappingURL=rect-3d.js.map

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

@@ -16,4 +16,4 @@ const is3DChart = spec => !!spec && ((0, exports.is3DChartType)(spec.type) || (0
 exports.is3DAxisChart)(spec), !0);
 
 exports.is3DChart = is3DChart;
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

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

@@ -63,4 +63,4 @@ class Axis3dMixin {
 }
 
 exports.Axis3dMixin = Axis3dMixin;
-//# sourceMappingURL=axis-3d-mixin.js.map
+//# sourceMappingURL=axis-3d-mixin.js.map

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

@@ -13,4 +13,4 @@ const vchart_1 = require("@visactor/vchart"), theme_1 = require("./theme"), vcha
 };
 
 exports.registerCartesianBandAxis3d = registerCartesianBandAxis3d;
-//# sourceMappingURL=band-axis.js.map
+//# sourceMappingURL=band-axis.js.map

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

@@ -11,4 +11,4 @@ const layout_1 = require("../3d/layout"), plugin_1 = require("../3d/plugin"), ba
 };
 
 exports.registerAxis3dPlugin = registerAxis3dPlugin;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -12,5 +12,4 @@ const vchart_1 = require("@visactor/vchart"), theme_1 = require("./theme"), vcha
     }), (0, vchart_2.mixin)(AxisCls, axis_3d_mixin_1.Axis3dMixin);
 };
 
-exports.registerCartesianLinearAxis3d = registerCartesianLinearAxis3d;
-//# sourceMappingURL=linear-axis.js.map
+exports.registerCartesianLinearAxis3d = registerCartesianLinearAxis3d;

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

@@ -13,4 +13,4 @@ const vchart_1 = require("@visactor/vchart"), theme_1 = require("./theme"), vcha
 };
 
 exports.registerCartesianLogAxis3d = registerCartesianLogAxis3d;
-//# sourceMappingURL=log-axis.js.map
+//# sourceMappingURL=log-axis.js.map

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

@@ -13,4 +13,4 @@ const vchart_1 = require("@visactor/vchart"), theme_1 = require("./theme"), vcha
 };
 
 exports.registerCartesianSymlogAxis3d = registerCartesianSymlogAxis3d;
-//# sourceMappingURL=symlog-axis.js.map
+//# sourceMappingURL=symlog-axis.js.map

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

@@ -7,4 +7,4 @@ Object.defineProperty(exports, "__esModule", {
         space: 0
     }
 };
-//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

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

@@ -13,4 +13,4 @@ const vchart_1 = require("@visactor/vchart"), theme_1 = require("./theme"), vcha
 };
 
 exports.registerCartesianTimeAxis3d = registerCartesianTimeAxis3d;
-//# sourceMappingURL=time-axis.js.map
+//# sourceMappingURL=time-axis.js.map

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

@@ -43,4 +43,4 @@ const vchart_1 = require("@visactor/vchart"), getUpdateAttributeOfZAxis = (axis,
 };
 
 exports.getUpdateAttributeOfZAxis = getUpdateAttributeOfZAxis;
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

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

@@ -201,4 +201,4 @@ class CombinationCandlestickChartSpecTransformer extends vchart_1.CartesianChart
 }
 
 exports.CombinationCandlestickChartSpecTransformer = CombinationCandlestickChartSpecTransformer;
-//# sourceMappingURL=combination-candlestick-transformer.js.map
+//# sourceMappingURL=combination-candlestick-transformer.js.map

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

@@ -28,4 +28,4 @@ const registerCombinationCandlestickChart = () => {
 };
 
 exports.registerCombinationCandlestickChart = registerCombinationCandlestickChart;
-//# sourceMappingURL=combination-candlestick.js.map
+//# sourceMappingURL=combination-candlestick.js.map

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.CombinationCandlestickChart_TYPE = void 0, exports.CombinationCandlestickChart_TYPE = "combinationCandlestick";
-//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

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

@@ -19,4 +19,4 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), __exportStar(require("./combination-candlestick"), exports), __exportStar(require("./interface"), exports), 
 __exportStar(require("./constant"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

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

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

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

@@ -21,4 +21,4 @@ exports.DEFAULT_ARROW_MARK_STYLE = {
 }, exports.DEFAULT_FUNNEL_BACKGROUND_MARK_STYLE = {
     fill: "#eff1f9"
 };
-//# sourceMappingURL=constants.js.map
+//# sourceMappingURL=constants.js.map

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

@@ -193,5 +193,5 @@ function addFunnelBackgroundMark(funnelBackground) {
     });
 }
 
-exports.ConversionFunnelChartSpecTransformer = ConversionFunnelChartSpecTransformer;
 //# sourceMappingURL=conversion-funnel-transformer.js.map
+exports.ConversionFunnelChartSpecTransformer = ConversionFunnelChartSpecTransformer;

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

@@ -59,4 +59,4 @@ const registerConversionFunnelChart = option => {
 };
 
 exports.registerConversionFunnelChart = registerConversionFunnelChart;
-//# sourceMappingURL=conversion-funnel.js.map
+//# sourceMappingURL=conversion-funnel.js.map

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

@@ -18,4 +18,4 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), __exportStar(require("./interface"), exports), __exportStar(require("./conversion-funnel"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

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

@@ -14,4 +14,4 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.isSameArrow = exports.isArrowCross = void 0, exports.isArrowCross = isArrowCross, 
 exports.isSameArrow = isSameArrow;
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

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

@@ -22,4 +22,4 @@ const registerFunnel3dChart = () => {
 };
 
 exports.registerFunnel3dChart = registerFunnel3dChart;
-//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

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

@@ -28,4 +28,4 @@ exports.funnel3dSeriesMark = Object.assign(Object.assign({}, vchart_1.baseSeries
         type: "rule"
     }
 });
-//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

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

@@ -19,4 +19,4 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), __exportStar(require("./chart"), exports), __exportStar(require("./series"), exports), 
 __exportStar(require("./series-spec-transformer"), exports), __exportStar(require("./interface"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

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

@@ -13,4 +13,4 @@ class Funnel3dSeriesSpecTransformer extends vchart_1.FunnelSeriesSpecTransformer
 }
 
 exports.Funnel3dSeriesSpecTransformer = Funnel3dSeriesSpecTransformer;
-//# sourceMappingURL=series-spec-transformer.js.map
+//# sourceMappingURL=series-spec-transformer.js.map

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

@@ -27,5 +27,4 @@ const registerHistogram3dChart = () => {
     (0, series_1.registerBar3dSeries)(), vchart_1.Factory.registerChart(Histogram3dChart.type, Histogram3dChart);
 };
 
-exports.registerHistogram3dChart = registerHistogram3dChart;
-//# sourceMappingURL=chart.js.map
+exports.registerHistogram3dChart = registerHistogram3dChart;

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

@@ -18,4 +18,4 @@ var __createBinding = this && this.__createBinding || (Object.create ? function(
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), __exportStar(require("./chart"), exports), __exportStar(require("./interface"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
     value: !0
 });
-//# sourceMappingURL=interface.js.map
+//# sourceMappingURL=interface.js.map

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.buildWingBlockMark = exports.buildWingTitleImageMark = exports.buildWingArcMark = void 0;
 
-const vchart_1 = require("@visactor/vchart"), common_1 = require("./common"), 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" === (0, 
+const vchart_1 = require("@visactor/vchart"), common_1 = require("./common"), 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" === (0, 
 common_1.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);
@@ -19,15 +19,47 @@ common_1.normalizeLayout)(spec.layout).direction ? "right" : "left", getWingPath
 }, 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} = (0, common_1.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 = (0, vchart_1.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(common_1.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 * common_1.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} = (0, common_1.getRegionGeometry)(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), layoutOpt = (0, 
-    common_1.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;
+    common_1.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
     };
@@ -107,11 +139,51 @@ const buildWingTitleImageMark = spec => {
         name: "storyline-wing-title-image",
         zIndex: vchart_1.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} = (0, common_1.getChartGeometry)(ctx, spec), size = (0, 
+                    common_1.getTitleImageSize)(spec, width, height, {
+                        widthRatio: .6,
+                        maxWidth: 820
+                    });
+                    return "right" === getWingDirection(spec) ? startX : startX + width - size.width;
+                },
+                fill: "red",
+                y: (_d, ctx) => (0, common_1.getChartGeometry)(ctx, spec).startY + 12,
+                width: (_d, ctx) => {
+                    const {width: width, height: height} = (0, common_1.getChartGeometry)(ctx, spec);
+                    return (0, common_1.getTitleImageSize)(spec, width, height, {
+                        widthRatio: .6,
+                        maxWidth: 820
+                    }).width;
+                },
+                height: (_d, ctx) => {
+                    const {width: width, height: height} = (0, common_1.getChartGeometry)(ctx, spec);
+                    return (0, common_1.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} = (0, common_1.getChartGeometry)(ctx, spec), size = (0, 
                     common_1.getTitleImageSize)(spec, width, height, {
@@ -148,27 +220,26 @@ const buildWingTitleImageMark = spec => {
 exports.buildWingTitleImageMark = buildWingTitleImageMark;
 
 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 = (0, common_1.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 = (0, 
-    common_1.resolveAdaptiveLineHeight)(titleFontSize, null === (_c = spec.title) || void 0 === _c ? void 0 : _c.style, 30, 1.3), titleHeight = (0, 
-    common_1.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 = (0, 
+    common_1.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,
@@ -177,16 +248,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,
@@ -195,19 +266,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,
@@ -306,6 +377,8 @@ const WING_TEXT_IMAGE_GAP = 120, getWingBlockMetrics = (spec, ctx, 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 * common_1.BLOCK_TITLE_MAX_LINES,