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

package/cjs/components/series-label/constant.js

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

package/cjs/components/series-label/index.js

@@ -46,4 +46,4 @@ Object.defineProperty(exports, "getSeriesLabelConfig", {
         return util_1.appendSeriesLabelConfig;
     }
 });
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/cjs/components/series-label/series-label.js

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

package/cjs/components/series-label/type.js

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

package/cjs/components/series-label/util.js

@@ -149,4 +149,4 @@ function appendSeriesLabelConfig(rawSpec, seriesLabelSpec) {
 
 exports.dodge = dodge, exports.dodgeHorizontal = dodgeHorizontal, exports.getSeriesLabelConfig = getSeriesLabelConfig, 
 exports.appendSeriesLabelConfig = appendSeriesLabelConfig;
-//# sourceMappingURL=util.js.map
+//# sourceMappingURL=util.js.map

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

@@ -15,4 +15,5 @@ import { registerCartesianTimeAxis3d } from "./time-axis";
 export const registerAxis3dPlugin = () => {
     register3DPlugin(), registerLayout3d(), registerCartesianBandAxis3d(), registerCartesianLinearAxis3d(), 
     registerCartesianTimeAxis3d(), registerCartesianSymlogAxis3d(), registerCartesianLogAxis3d();
-};
+};
+//# sourceMappingURL=index.js.map

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

@@ -8,4 +8,4 @@ export class Bar3dChartSpecTransformer extends BarChartSpecTransformer {
         seriesSpec;
     }
 }
-//# sourceMappingURL=chart-spec-transformer.js.map
+//# sourceMappingURL=chart-spec-transformer.js.map

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

@@ -22,4 +22,4 @@ Bar3dChart.type = "bar3d", Bar3dChart.seriesType = SeriesType3dEnum.bar3d, Bar3d
 export const registerBar3dChart = () => {
     register3DPlugin(), registerLayout3d(), registerBar3dSeries(), Factory.registerChart(Bar3dChart.type, Bar3dChart);
 };
-//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

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

@@ -7,5 +7,4 @@ export const bar3dSeriesMark = {
         name: "bar3d",
         type: "rect3d"
     }
-};
-//# sourceMappingURL=constant.js.map
+};

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

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

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

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

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

@@ -5,4 +5,4 @@ export class Bar3dSeriesSpecTransformer extends BarSeriesSpecTransformer {
         this._addMarkLabelSpec(spec, "bar3d");
     }
 }
-//# sourceMappingURL=series-spec-transformer.js.map
+//# sourceMappingURL=series-spec-transformer.js.map

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

@@ -27,4 +27,4 @@ export const registerBar3dSeries = () => {
     registerBar3dAnimation(), registerRect3dMark(), registerCartesianBandAxis(), registerCartesianLinearAxis(), 
     Factory.registerSeries(Bar3dSeries.type, Bar3dSeries);
 };
-//# sourceMappingURL=series.js.map
+//# sourceMappingURL=series.js.map

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

@@ -12,4 +12,4 @@ export const bar3d = {
         }
     }
 };
-//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

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

@@ -13,4 +13,4 @@ export class CandlestickChartSpecTransformer extends CartesianChartSpecTransform
         } ]), setDefaultCrosshairForCartesianChart(spec);
     }
 }
-//# sourceMappingURL=candlestick-transformer.js.map
+//# sourceMappingURL=candlestick-transformer.js.map

package/esm/charts/candlestick/candlestick.js

@@ -20,4 +20,4 @@ export const registerCandlestickChart = () => {
     registerDimensionTooltipProcessor(), registerMarkTooltipProcessor(), registerDimensionEvents(), 
     registerDimensionHover(), registerCandlestickSeries(), Factory.registerChart(CandlestickChart.type, CandlestickChart);
 };
-//# sourceMappingURL=candlestick.js.map
+//# sourceMappingURL=candlestick.js.map

package/esm/charts/candlestick/index.js

@@ -7,4 +7,4 @@ export * from "./candlestick-transformer";
 export * from "./series/candlestick";
 
 export * from "./util";
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/esm/charts/candlestick/interface.js

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

package/esm/charts/candlestick/util.js

@@ -1,4 +1,4 @@
 export function transformCandlestickSeriesSpec(spec) {
     spec.yField = [ spec.openField, spec.highField, spec.lowField, spec.closeField ];
 }
-//# 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 @@
-export { };
-//# sourceMappingURL=interface.js.map
+export { };

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/funnel-3d/series.js

@@ -80,5 +80,4 @@ Funnel3dSeries.builtInTheme = {
 
 export const registerFunnel3dSeries = () => {
     registerPyramid3dMark(), registerTextMark(), registerRuleMark(), Factory.registerSeries(Funnel3dSeries.type, Funnel3dSeries);
-};
-//# sourceMappingURL=series.js.map
+};

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

@@ -1,4 +1,4 @@
 import { getFunnelTheme } from "@visactor/vchart";
 
 export const funnel3d = getFunnelTheme(!0);
-//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

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

@@ -46,4 +46,4 @@ ElementHighlightByGraphicName.type = type;
 export const registerElementHighlightByGraphicName = () => {
     Factory.registerInteractionTrigger(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
 };
-//# sourceMappingURL=element-highlight-by-graphic-name.js.map
+//# sourceMappingURL=element-highlight-by-graphic-name.js.map

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

@@ -1,8 +1,8 @@
 import { LayoutZIndex } from "@visactor/vchart";
 
-import { buildRichContent, getImageBackgroundStyle, getRegionGeometry, getThemeColor, normalizeLayout, omitImageLayoutSpec, resolveAdaptiveLineHeight, resolveBlockWidth, resolveTitleFontSize, shouldShowImageBackground, withAlpha } from "./common";
+import { BLOCK_TITLE_MAX_LINES, buildPlainContent, getBlockTitleHeight, getImageBackgroundStyle, getRegionGeometry, getThemeColor, normalizeLayout, omitImageLayoutSpec, resolveAdaptiveLineHeight, resolveBlockWidth, resolveTitleFontSize, shouldShowImageBackground, withAlpha } from "./common";
 
-const 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" === normalizeLayout(spec.layout).direction, getArcTitleImageRect = (spec, ctx) => {
+const 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" === normalizeLayout(spec.layout).direction, getArcTitleImageRect = (spec, ctx) => {
     var _a, _b, _c, _e;
     const {width: width, height: height, startX: startX, startY: startY} = 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);
     return {
@@ -11,7 +11,7 @@ const ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HA
         width: w,
         height: h
     };
-}, getArcGeometry = (spec, ctx) => {
+}, getBaseArcGeometry = (spec, ctx) => {
     var _a, _b, _c;
     const {width: width, startX: startX} = getRegionGeometry(ctx), innerWidth = Math.max(width, 1), blockWidth = resolveBlockWidth(spec, width), layoutOpt = 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);
     let cy, ry;
@@ -32,19 +32,58 @@ const ARC_BLOCK_IMAGE_SIZE = 240, ARC_BLOCK_IMAGE_BORDER = 3, ARC_BLOCK_IMAGE_HA
         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
     };
-};
+}, getArcBlockBounds = (spec, arc, index, ctx) => {
+    const center = getArcBlockCenterByGeometry(spec, arc, index, ctx), metrics = getArcBlockMetrics(spec, index, ctx), halo = 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 = 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);
 
 export const buildArcMark = spec => {
     var _a;
@@ -103,18 +142,18 @@ export const buildArcTitleImageMark = spec => {
     } : null;
 };
 
-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 = 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 = 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 ? 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 = 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 = resolveAdaptiveLineHeight(titleFontSize, null === (_u = spec.title) || void 0 === _u ? void 0 : _u.style, 34), titleHeight = 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,
@@ -125,18 +164,27 @@ 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
     };
 };
 
 export const 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 = 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);
+    const hasImage = !!block.image, contentText = Array.isArray(block.content) ? block.content : block.content ? [ block.content ] : [], themeColor = 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}`,
@@ -152,10 +200,10 @@ export const buildArcBlockMark = (spec, block, index) => {
             interactive: !1,
             zIndex: 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
             }
@@ -166,11 +214,11 @@ export const buildArcBlockMark = (spec, block, index) => {
             zIndex: LayoutZIndex.Mark + 3
         }, omitImageLayoutSpec(spec.image)), {
             style: Object.assign({
-                x: metrics.imageBox.x,
-                y: metrics.imageBox.y,
-                width: metrics.imageBox.width,
-                height: metrics.imageBox.height,
-                cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2,
+                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",
@@ -185,7 +233,7 @@ export const buildArcBlockMark = (spec, block, index) => {
             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"
             }, getImageBackgroundStyle(spec))
         }, shouldShowImageBackground(spec) ? {
@@ -196,7 +244,7 @@ export const buildArcBlockMark = (spec, block, index) => {
             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: withAlpha(themeColor, .82),
@@ -209,19 +257,25 @@ export const buildArcBlockMark = (spec, block, index) => {
             zIndex: 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 * 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: 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",
@@ -229,22 +283,19 @@ export const buildArcBlockMark = (spec, block, index) => {
             interactive: !1,
             zIndex: 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: 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: 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"