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

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

@@ -10,4 +10,5 @@ const layout_1 = require("../3d/layout"), plugin_1 = require("../3d/plugin"), ba
     (0, symlog_axis_1.registerCartesianSymlogAxis3d)(), (0, log_axis_1.registerCartesianLogAxis3d)();
 };
 
-exports.registerAxis3dPlugin = registerAxis3dPlugin;
+exports.registerAxis3dPlugin = registerAxis3dPlugin;
+//# sourceMappingURL=index.js.map

package/cjs/charts/bar-3d/chart-spec-transformer.js

@@ -16,4 +16,4 @@ class Bar3dChartSpecTransformer extends vchart_1.BarChartSpecTransformer {
 }
 
 exports.Bar3dChartSpecTransformer = Bar3dChartSpecTransformer;
-//# sourceMappingURL=chart-spec-transformer.js.map
+//# sourceMappingURL=chart-spec-transformer.js.map

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

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

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

@@ -11,5 +11,4 @@ Object.defineProperty(exports, "__esModule", {
         name: "bar3d",
         type: "rect3d"
     }
-};
-//# sourceMappingURL=constant.js.map
+};

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

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

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

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

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

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

package/cjs/charts/bar-3d/series.js

@@ -25,4 +25,4 @@ const registerBar3dSeries = () => {
 };
 
 exports.registerBar3dSeries = registerBar3dSeries;
-//# sourceMappingURL=series.js.map
+//# sourceMappingURL=series.js.map

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

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

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

@@ -21,4 +21,4 @@ class CandlestickChartSpecTransformer extends vchart_1.CartesianChartSpecTransfo
 }
 
 exports.CandlestickChartSpecTransformer = CandlestickChartSpecTransformer;
-//# sourceMappingURL=candlestick-transformer.js.map
+//# sourceMappingURL=candlestick-transformer.js.map

package/cjs/charts/candlestick/candlestick.js

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

package/cjs/charts/candlestick/index.js

@@ -20,4 +20,4 @@ Object.defineProperty(exports, "__esModule", {
 }), __exportStar(require("./candlestick"), exports), __exportStar(require("./interface"), exports), 
 __exportStar(require("./candlestick-transformer"), exports), __exportStar(require("./series/candlestick"), exports), 
 __exportStar(require("./util"), exports);
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/cjs/charts/candlestick/interface.js

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

package/cjs/charts/candlestick/util.js

@@ -7,4 +7,4 @@ function transformCandlestickSeriesSpec(spec) {
 Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.transformCandlestickSeriesSpec = void 0, exports.transformCandlestickSeriesSpec = transformCandlestickSeriesSpec;
-//# 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

@@ -2,5 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
     value: !0
-});
-//# 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/funnel-3d/series.js

@@ -79,5 +79,4 @@ const registerFunnel3dSeries = () => {
     vchart_1.registerRuleMark)(), vchart_1.Factory.registerSeries(Funnel3dSeries.type, Funnel3dSeries);
 };
 
-exports.registerFunnel3dSeries = registerFunnel3dSeries;
-//# sourceMappingURL=series.js.map
+exports.registerFunnel3dSeries = registerFunnel3dSeries;

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

@@ -7,4 +7,4 @@ Object.defineProperty(exports, "__esModule", {
 const vchart_1 = require("@visactor/vchart");
 
 exports.funnel3d = (0, vchart_1.getFunnelTheme)(!0);
-//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/cjs/charts/pictogram/element-highlight-by-graphic-name.js

@@ -50,4 +50,4 @@ const registerElementHighlightByGraphicName = () => {
 };
 
 exports.registerElementHighlightByGraphicName = registerElementHighlightByGraphicName;
-//# sourceMappingURL=element-highlight-by-graphic-name.js.map
+//# sourceMappingURL=element-highlight-by-graphic-name.js.map

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
     value: !0
 }), exports.buildArcBlockMark = exports.buildArcTitleImageMark = exports.buildArcMark = void 0;
 
-const vchart_1 = require("@visactor/vchart"), common_1 = require("./common"), ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HALO_PADDING = 6, ARC_TEXT_GAP_FROM_IMAGE = 10, ARC_TITLE_FONT_SIZE = 32, ARC_TITLE_LINE_HEIGHT = 34, ARC_CONTENT_LINE_HEIGHT = 26, ARC_CONTENT_FONT_SIZE = 20, ARC_TEXT_BOX_HEIGHT = 240, ARC_TITLE_TO_CONTENT_GAP = 4, ARC_TEXT_PADDING = 20, ARC_TEXT_BOX_MIN_WIDTH = 240, ARC_TITLE_IMAGE_WIDTH_RATIO = .68, ARC_TITLE_IMAGE_MAX_WIDTH = 900, ARC_TITLE_IMAGE_HEIGHT_RATIO = .34, ARC_GAP_FROM_TITLE_IMAGE = 200, isDownArc = spec => "down" === (0, 
+const vchart_1 = require("@visactor/vchart"), common_1 = require("./common"), ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HALO_PADDING = 6, ARC_TEXT_GAP_FROM_IMAGE = 10, ARC_TITLE_FONT_SIZE = 32, ARC_TITLE_LINE_HEIGHT = 34, ARC_CONTENT_LINE_HEIGHT = 24, ARC_CONTENT_FONT_SIZE = 18, ARC_TEXT_BOX_HEIGHT = 240, ARC_TITLE_TO_CONTENT_GAP = 4, ARC_TEXT_PADDING = 20, ARC_TEXT_BOX_MIN_WIDTH = 96, ARC_TEXT_BOX_ABSOLUTE_MIN_WIDTH = 64, ARC_TEXT_BOX_MAX_WIDTH = 260, ARC_TITLE_IMAGE_WIDTH_RATIO = .68, ARC_TITLE_IMAGE_MAX_WIDTH = 900, ARC_TITLE_IMAGE_HEIGHT_RATIO = .34, ARC_GAP_FROM_TITLE_IMAGE = 200, ARC_FIT_MARGIN = 8, clamp = (value, min, max) => Math.max(min, Math.min(max, value)), isDownArc = spec => "down" === (0, 
 common_1.normalizeLayout)(spec.layout).direction, getArcTitleImageRect = (spec, ctx) => {
     var _a, _b, _c, _e;
     const {width: width, height: height, startX: startX, startY: startY} = (0, common_1.getRegionGeometry)(ctx), innerWidth = Math.max(width, 1), innerHeight = Math.max(height, 1), baseWidth = Math.min(.68 * innerWidth, 900), w = Math.max(null !== (_b = null === (_a = spec.titleImage) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : baseWidth, 80), h = Math.max(null !== (_e = null === (_c = spec.titleImage) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : .34 * w, 40);
@@ -14,7 +14,7 @@ common_1.normalizeLayout)(spec.layout).direction, getArcTitleImageRect = (spec,
         width: w,
         height: h
     };
-}, getArcGeometry = (spec, ctx) => {
+}, getBaseArcGeometry = (spec, ctx) => {
     var _a, _b, _c;
     const {width: width, startX: startX} = (0, common_1.getRegionGeometry)(ctx), innerWidth = Math.max(width, 1), blockWidth = (0, 
     common_1.resolveBlockWidth)(spec, width), layoutOpt = (0, common_1.normalizeLayout)(spec.layout), isDown = "down" === layoutOpt.direction, startAngle = null !== (_a = layoutOpt.startAngle) && void 0 !== _a ? _a : isDown ? 20 : 200, endAngle = null !== (_b = layoutOpt.endAngle) && void 0 !== _b ? _b : isDown ? 160 : 340, ratio = null !== (_c = layoutOpt.radiusRatio) && void 0 !== _c ? _c : .88, rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio, titleImageRect = getArcTitleImageRect(spec, ctx), centerTop = titleImageRect.y, centerBottom = titleImageRect.y + titleImageRect.height, sinStart = Math.sin(startAngle / 180 * Math.PI);
@@ -36,19 +36,59 @@ common_1.normalizeLayout)(spec.layout).direction, getArcTitleImageRect = (spec,
         centerTop: centerTop,
         centerBottom: centerBottom
     };
-}, getArcBlockCenter = (spec, ctx, index) => {
-    var _a, _b, _c, _e;
-    const arc = getArcGeometry(spec, ctx), count = null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
+}, getArcBlockCenterByGeometry = (spec, arc, index, ctx) => {
+    var _a, _b;
+    const count = null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
     if (count <= 0) return {
         x: arc.cx,
         y: arc.cy
     };
-    const t = 1 === count ? .5 : index / (count - 1), angle = (arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180 * Math.PI, px = arc.cx + Math.cos(angle) * arc.rx, py = arc.cy + Math.sin(angle) * arc.ry, nxRaw = Math.cos(angle) / arc.rx, nyRaw = Math.sin(angle) / arc.ry, nLen = Math.hypot(nxRaw, nyRaw) || 1, nx = nxRaw / nLen, ny = nyRaw / nLen, offset = (null !== (_e = null === (_c = spec.image) || void 0 === _c ? void 0 : _c.height) && void 0 !== _e ? _e : 240) / 2;
+    const t = 1 === count ? .5 : index / (count - 1), angle = (arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180 * Math.PI, px = arc.cx + Math.cos(angle) * arc.rx, py = arc.cy + Math.sin(angle) * arc.ry, nxRaw = Math.cos(angle) / arc.rx, nyRaw = Math.sin(angle) / arc.ry, nLen = Math.hypot(nxRaw, nyRaw) || 1, nx = nxRaw / nLen, ny = nyRaw / nLen, offset = getArcBlockMetrics(spec, index, ctx).imageBox.height / 2;
     return {
         x: px + nx * offset,
         y: py + ny * offset
     };
-}, buildArcMark = spec => {
+}, getArcBlockBounds = (spec, arc, index, ctx) => {
+    const center = getArcBlockCenterByGeometry(spec, arc, index, ctx), metrics = getArcBlockMetrics(spec, index, ctx), halo = (0, 
+    common_1.shouldShowImageBackground)(spec) ? 9 : 0, minX = Math.min(metrics.imageBox.x - halo, metrics.textBox.x, metrics.contentBox.x), maxX = Math.max(metrics.imageBox.x + metrics.imageBox.width + halo, metrics.textBox.x + metrics.textBox.width, metrics.contentBox.x + metrics.contentBox.width), minY = Math.min(metrics.imageBox.y - halo, metrics.textBox.y, metrics.contentBox.y), maxY = Math.max(metrics.imageBox.y + metrics.imageBox.height + halo, metrics.textBox.y + metrics.textBox.height, metrics.contentBox.y + metrics.contentBox.height);
+    return {
+        left: center.x + minX,
+        right: center.x + maxX,
+        top: center.y + minY,
+        bottom: center.y + maxY
+    };
+}, getArcBlocksBounds = (spec, arc, ctx) => {
+    var _a, _b;
+    const count = null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0;
+    return count ? Array.from({
+        length: count
+    }, ((_, index) => getArcBlockBounds(spec, arc, index, ctx))).reduce(((bounds, blockBounds) => ({
+        left: Math.min(bounds.left, blockBounds.left),
+        right: Math.max(bounds.right, blockBounds.right),
+        top: Math.min(bounds.top, blockBounds.top),
+        bottom: Math.max(bounds.bottom, blockBounds.bottom)
+    })), {
+        left: Number.POSITIVE_INFINITY,
+        right: Number.NEGATIVE_INFINITY,
+        top: Number.POSITIVE_INFINITY,
+        bottom: Number.NEGATIVE_INFINITY
+    }) : {
+        left: arc.cx,
+        right: arc.cx,
+        top: arc.cy,
+        bottom: arc.cy
+    };
+}, getArcGeometry = (spec, ctx) => {
+    const arc = getBaseArcGeometry(spec, ctx), region = (0, common_1.getRegionGeometry)(ctx), bounds = getArcBlocksBounds(spec, arc, ctx), fit_left = region.startX + 8, fit_right = region.startX + region.width - 8, fit_top = region.startY + 8, fit_bottom = region.startY + region.height - 8;
+    let shiftX = 0, shiftY = 0;
+    const boundsWidth = bounds.right - bounds.left, boundsHeight = bounds.bottom - bounds.top, fitHeight = fit_bottom - fit_top;
+    return boundsWidth > fit_right - fit_left ? shiftX = (fit_left + fit_right - bounds.left - bounds.right) / 2 : bounds.left < fit_left ? shiftX = fit_left - bounds.left : bounds.right > fit_right && (shiftX = fit_right - bounds.right), 
+    boundsHeight > fitHeight ? shiftY = (fit_top + fit_bottom - bounds.top - bounds.bottom) / 2 : bounds.top < fit_top ? shiftY = fit_top - bounds.top : bounds.bottom > fit_bottom && (shiftY = fit_bottom - bounds.bottom), 
+    shiftX || shiftY ? Object.assign(Object.assign({}, arc), {
+        cx: arc.cx + shiftX,
+        cy: arc.cy + shiftY
+    }) : arc;
+}, getArcBlockCenter = (spec, ctx, index) => getArcBlockCenterByGeometry(spec, getArcGeometry(spec, ctx), index, ctx), buildArcMark = spec => {
     var _a;
     if (!0 !== (null === (_a = spec.line) || void 0 === _a ? void 0 : _a.visible)) return null;
     const themeColor = (0, common_1.getThemeColor)(spec);
@@ -109,20 +149,21 @@ const buildArcTitleImageMark = spec => {
 
 exports.buildArcTitleImageMark = buildArcTitleImageMark;
 
-const getArcBlockMetrics = (spec, index = 0) => {
-    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    const contentFontSize = Number(null !== (_c = null === (_b = null === (_a = spec.content) || void 0 === _a ? void 0 : _a.style) || void 0 === _b ? void 0 : _b.fontSize) && void 0 !== _c ? _c : 20), contentLineHeight = Number(null !== (_g = null === (_f = null === (_e = spec.content) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.lineHeight) && void 0 !== _g ? _g : 26), imageDiameter = Math.max(null !== (_j = null === (_h = spec.image) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 240, null !== (_l = null === (_k = spec.image) || void 0 === _k ? void 0 : _k.height) && void 0 !== _l ? _l : 240), imageWidth = imageDiameter, imageHeight = imageDiameter, isDown = isDownArc(spec), count = Math.max(null !== (_o = null === (_m = spec.data) || void 0 === _m ? void 0 : _m.length) && void 0 !== _o ? _o : 0, 1), canvasWidth = Number(null !== (_p = spec.width) && void 0 !== _p ? _p : imageWidth * count), defaultTextWidth = Math.round(canvasWidth / (count + 1)), textBoxWidth = Math.max(Number(null !== (_r = null === (_q = spec.block) || void 0 === _q ? void 0 : _q.width) && void 0 !== _r ? _r : defaultTextWidth), 240), titleFontSize = (0, 
-    common_1.resolveTitleFontSize)(spec, void 0, null === (_t = null === (_s = spec.data) || void 0 === _s ? void 0 : _s[index]) || void 0 === _t ? void 0 : _t.title, textBoxWidth, 32, [ 8, 40 ]), titleLineHeight = (0, 
-    common_1.resolveAdaptiveLineHeight)(titleFontSize, null === (_u = spec.title) || void 0 === _u ? void 0 : _u.style, 34), contentHeight = Math.max(240 - titleLineHeight - 4, contentLineHeight), isLeftSide = index < count / 2, imageBox = {
+const getArcBlockMetrics = (spec, index = 0, ctx) => {
+    var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    const region = ctx ? (0, common_1.getRegionGeometry)(ctx, spec) : void 0, count = Math.max(null !== (_b = null === (_a = spec.data) || void 0 === _a ? void 0 : _a.length) && void 0 !== _b ? _b : 0, 1), regionWidth = Math.max(null !== (_c = null == region ? void 0 : region.width) && void 0 !== _c ? _c : Number(null !== (_e = spec.width) && void 0 !== _e ? _e : 240 * count), 1), regionHeight = Math.max(null !== (_f = null == region ? void 0 : region.height) && void 0 !== _f ? _f : Number(null !== (_g = spec.height) && void 0 !== _g ? _g : 240), 1), slotWidth = regionWidth / (count + 1), imageScale = clamp(Math.min(regionWidth / Math.max(240 * count * .92, 1), regionHeight / 620), .42, 1), textScale = clamp(Math.min(slotWidth / 180, imageScale), .48, 1), styleContent = null === (_h = spec.content) || void 0 === _h ? void 0 : _h.style, contentFontSize = Number(null !== (_j = null == styleContent ? void 0 : styleContent.fontSize) && void 0 !== _j ? _j : Math.round(18 * textScale)), contentLineHeight = Number(null !== (_k = null == styleContent ? void 0 : styleContent.lineHeight) && void 0 !== _k ? _k : Math.round(Math.max(1.35 * contentFontSize, 24 * textScale))), configuredImageDiameter = Math.max(null !== (_m = null === (_l = spec.image) || void 0 === _l ? void 0 : _l.width) && void 0 !== _m ? _m : 240, null !== (_p = null === (_o = spec.image) || void 0 === _o ? void 0 : _o.height) && void 0 !== _p ? _p : 240), imageDiameter = Math.round(clamp(configuredImageDiameter * imageScale, 64, configuredImageDiameter)), imageWidth = imageDiameter, imageHeight = imageDiameter, isDown = isDownArc(spec), configuredTextWidth = Number(null !== (_r = null === (_q = spec.block) || void 0 === _q ? void 0 : _q.width) && void 0 !== _r ? _r : 260), defaultTextWidth = Math.round(.96 * slotWidth), minTextWidth = Math.min(96, Math.max(Math.round(.72 * slotWidth), 64)), textBoxWidth = Math.round(clamp(Math.min(configuredTextWidth, defaultTextWidth), minTextWidth, 260)), titleFontSize = (0, 
+    common_1.resolveTitleFontSize)(spec, ctx, null === (_t = null === (_s = spec.data) || void 0 === _s ? void 0 : _s[index]) || void 0 === _t ? void 0 : _t.title, textBoxWidth, Math.round(32 * textScale), [ 10, 40 ]), titleLineHeight = (0, 
+    common_1.resolveAdaptiveLineHeight)(titleFontSize, null === (_u = spec.title) || void 0 === _u ? void 0 : _u.style, 34), titleHeight = (0, 
+    common_1.getBlockTitleHeight)(titleLineHeight, null === (_w = null === (_v = spec.data) || void 0 === _v ? void 0 : _v[index]) || void 0 === _w ? void 0 : _w.title, textBoxWidth, titleFontSize), textHeight = Math.round(clamp(240 * textScale, 88, 240)), contentHeight = Math.max(textHeight - titleHeight - 4, contentLineHeight), isLeftSide = index < count / 2, textAlign = isLeftSide ? "right" : "left", imageBox = {
         x: -imageWidth / 2,
         y: -imageHeight / 2,
         width: imageWidth,
         height: imageHeight
-    }, textBox = {
-        x: isLeftSide ? -20 : 20,
-        y: isDown ? imageBox.y + imageHeight + 10 : imageBox.y - 10 - 240,
+    }, textPadding = Math.round(20 * textScale), textBox = {
+        x: isLeftSide ? -textPadding - textBoxWidth : textPadding,
+        y: isDown ? imageBox.y + imageHeight + 10 : imageBox.y - 10 - textHeight,
         width: textBoxWidth,
-        height: 240
+        height: textHeight
     };
     return {
         titleFontSize: titleFontSize,
@@ -133,17 +174,26 @@ const getArcBlockMetrics = (spec, index = 0) => {
         textBox: textBox,
         contentBox: {
             x: textBox.x,
-            y: textBox.y + titleLineHeight + 4,
+            y: textBox.y + titleHeight + 4,
             width: textBox.width,
             height: contentHeight
         },
         isDown: isDown,
-        textAlign: isLeftSide ? "right" : "left"
+        textAlign: textAlign,
+        textAnchorX: isLeftSide ? -textPadding : textPadding
     };
 }, buildArcBlockMark = (spec, block, index) => {
     var _a, _b, _c, _e;
     const hasImage = !!block.image, contentText = Array.isArray(block.content) ? block.content : block.content ? [ block.content ] : [], themeColor = (0, 
-    common_1.getThemeColor)(spec), metrics = getArcBlockMetrics(spec, index), connectorY = metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y, connectorHeight = metrics.isDown ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0) : Math.max(metrics.imageBox.y - metrics.textBox.y, 0);
+    common_1.getThemeColor)(spec), getMetrics = ctx => getArcBlockMetrics(spec, index, ctx), getConnectorBox = ctx => {
+        const metrics = getMetrics(ctx);
+        return {
+            x: -1,
+            y: metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y,
+            width: 2,
+            height: metrics.isDown ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0) : Math.max(metrics.imageBox.y - metrics.textBox.y, 0)
+        };
+    };
     return {
         type: "group",
         id: `storyline-block-${null !== (_a = block.id) && void 0 !== _a ? _a : index}`,
@@ -159,10 +209,10 @@ const getArcBlockMetrics = (spec, index = 0) => {
             interactive: !1,
             zIndex: vchart_1.LayoutZIndex.Mark + 2,
             style: {
-                x: -1,
-                y: connectorY,
-                width: 2,
-                height: connectorHeight,
+                x: (_d, ctx) => getConnectorBox(ctx).x,
+                y: (_d, ctx) => getConnectorBox(ctx).y,
+                width: (_d, ctx) => getConnectorBox(ctx).width,
+                height: (_d, ctx) => getConnectorBox(ctx).height,
                 fill: themeColor,
                 fillOpacity: .6
             }
@@ -173,11 +223,11 @@ const getArcBlockMetrics = (spec, index = 0) => {
             zIndex: vchart_1.LayoutZIndex.Mark + 3
         }, (0, common_1.omitImageLayoutSpec)(spec.image)), {
             style: Object.assign({
-                x: metrics.imageBox.x,
-                y: metrics.imageBox.y,
-                width: metrics.imageBox.width,
-                height: metrics.imageBox.height,
-                cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2,
+                x: (_d, ctx) => getMetrics(ctx).imageBox.x,
+                y: (_d, ctx) => getMetrics(ctx).imageBox.y,
+                width: (_d, ctx) => getMetrics(ctx).imageBox.width,
+                height: (_d, ctx) => getMetrics(ctx).imageBox.height,
+                cornerRadius: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).imageBox.height) / 2,
                 image: block.image,
                 repeatX: "no-repeat",
                 repeatY: "no-repeat",
@@ -192,7 +242,7 @@ const getArcBlockMetrics = (spec, index = 0) => {
             style: Object.assign({
                 x: 0,
                 y: 0,
-                size: Math.min(metrics.imageBox.width, metrics.imageBox.height),
+                size: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).imageBox.height),
                 symbolType: "circle"
             }, (0, common_1.getImageBackgroundStyle)(spec))
         }, (0, common_1.shouldShowImageBackground)(spec) ? {
@@ -203,7 +253,7 @@ const getArcBlockMetrics = (spec, index = 0) => {
             style: {
                 x: 0,
                 y: 0,
-                size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + 12,
+                size: (_d, ctx) => Math.min(getMetrics(ctx).imageBox.width, getMetrics(ctx).imageBox.height) + 12,
                 symbolType: "circle",
                 fill: "transparent",
                 stroke: (0, common_1.withAlpha)(themeColor, .82),
@@ -216,19 +266,25 @@ const getArcBlockMetrics = (spec, index = 0) => {
             zIndex: vchart_1.LayoutZIndex.Mark + 5
         }, spec.title), {
             style: Object.assign({
-                x: metrics.textBox.x,
-                y: metrics.textBox.y,
+                x: (_d, ctx) => getMetrics(ctx).textAnchorX,
+                y: (_d, ctx) => getMetrics(ctx).textBox.y,
                 text: block.title,
-                maxLineWidth: metrics.textBox.width,
-                fontSize: metrics.titleFontSize,
-                lineHeight: metrics.titleLineHeight,
+                maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width,
+                height: (_d, ctx) => getMetrics(ctx).titleLineHeight * common_1.BLOCK_TITLE_MAX_LINES,
+                heightLimit: (_d, ctx) => getMetrics(ctx).titleLineHeight * common_1.BLOCK_TITLE_MAX_LINES,
+                lineClamp: common_1.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: metrics.textAlign,
-                textBaseline: "top"
+                textAlign: (_d, ctx) => getMetrics(ctx).textAlign,
+                textBaseline: "top",
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                ellipsis: "..."
             }, null === (_c = spec.title) || void 0 === _c ? void 0 : _c.style)
         }) : null, contentText.length ? Object.assign(Object.assign({
             type: "text",
@@ -236,22 +292,19 @@ const getArcBlockMetrics = (spec, index = 0) => {
             interactive: !1,
             zIndex: vchart_1.LayoutZIndex.Mark + 4
         }, spec.content), {
-            textType: "rich",
             style: Object.assign({
-                x: metrics.contentBox.x,
-                y: metrics.contentBox.y,
-                width: metrics.contentBox.width,
-                height: metrics.contentBox.height,
-                maxLineWidth: metrics.contentBox.width,
-                heightLimit: metrics.contentBox.height,
-                text: (0, common_1.buildRichContent)(contentText, spec, {
-                    fontSize: metrics.contentFontSize,
-                    lineHeight: metrics.contentLineHeight,
-                    fill: "#596173",
-                    align: metrics.textAlign
-                }),
-                textAlign: metrics.textAlign,
+                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: (0, common_1.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"