@visactor/vchart-extension 2.1.0-alpha.16 → 2.1.0-alpha.18

package/build/index.js

@@ -5822,2216 +5822,6 @@
         vchart.Factory.registerChart(TimelineChart.type, TimelineChart);
     };
 
-    const DEFAULT_LAYOUT = 'landscape';
-    const DEFAULT_PADDING = 24;
-    const normalizePadding = (padding) => {
-        var _a, _b, _c, _d;
-        if (Array.isArray(padding)) {
-            return {
-                top: (_a = padding[0]) !== null && _a !== void 0 ? _a : 0,
-                right: (_b = padding[1]) !== null && _b !== void 0 ? _b : 0,
-                bottom: (_c = padding[2]) !== null && _c !== void 0 ? _c : 0,
-                left: (_d = padding[3]) !== null && _d !== void 0 ? _d : 0
-            };
-        }
-        const value = padding !== null && padding !== void 0 ? padding : DEFAULT_PADDING;
-        return { top: value, right: value, bottom: value, left: value };
-    };
-    const normalizeLayout = (layout) => {
-        if (!layout) {
-            return { type: DEFAULT_LAYOUT };
-        }
-        if (typeof layout === 'string') {
-            return { type: layout };
-        }
-        return layout;
-    };
-    const computeStorylineLayout = (data, options) => {
-        var _a, _b, _c;
-        const layout = normalizeLayout(options.layout);
-        const padding = normalizePadding((_a = layout.padding) !== null && _a !== void 0 ? _a : options.padding);
-        const gap = (_b = options.gap) !== null && _b !== void 0 ? _b : 40;
-        const lineDistance = (_c = options.lineDistance) !== null && _c !== void 0 ? _c : 8;
-        const blocks = computeBlockPositions(data, layout, options.viewBox, options.block, padding, gap);
-        const circleGuide = layout.type === 'clock' ? computeClockCircleGuide(options.viewBox, options.block, padding, layout) : undefined;
-        return {
-            blocks,
-            links: computeLinks(blocks, lineDistance),
-            circleGuide
-        };
-    };
-    const computeBlockPositions = (data, layout, viewBox, block, padding, gap) => {
-        const count = data.length;
-        if (!count) {
-            return [];
-        }
-        const inner = {
-            x: padding.left,
-            y: padding.top,
-            width: Math.max(viewBox.width - padding.left - padding.right, block.width),
-            height: Math.max(viewBox.height - padding.top - padding.bottom, block.height)
-        };
-        const center = {
-            x: inner.x + inner.width / 2,
-            y: inner.y + inner.height / 2
-        };
-        let centers;
-        switch (layout.type) {
-            case 'portrait':
-                centers = lineCenters(count, center.x, inner.y + block.height / 2, center.x, inner.y + inner.height - block.height / 2);
-                break;
-            case 'up-ladder':
-                centers = lineCenters(count, inner.x + block.width / 2, inner.y + inner.height - block.height / 2, inner.x + inner.width - block.width / 2, inner.y + block.height / 2);
-                break;
-            case 'down-ladder':
-                centers = lineCenters(count, inner.x + block.width / 2, inner.y + block.height / 2, inner.x + inner.width - block.width / 2, inner.y + inner.height - block.height / 2);
-                break;
-            case 'pulse':
-                centers = alternatingHorizontalCenters(count, inner, block, gap);
-                break;
-            case 'spiral':
-                centers = alternatingVerticalCenters(count, inner, block, gap);
-                break;
-            case 'clock':
-                centers = circularCenters(count, viewBox, block, padding, layout);
-                break;
-            case 'bowl':
-                centers = arcCenters(count, inner, block, layout, 200, 340);
-                break;
-            case 'dome':
-                centers = arcCenters(count, inner, block, layout, 160, 20);
-                break;
-            case 'wing': {
-                const direction = layout.direction === 'right' ? 'right' : 'left';
-                const [s, e] = direction === 'right' ? [110, 250] : [-70, 70];
-                centers = arcCenters(count, inner, block, layout, s, e);
-                break;
-            }
-            case 'landscape':
-            default:
-                centers = lineCenters(count, inner.x + block.width / 2, center.y, inner.x + inner.width - block.width / 2, center.y);
-                break;
-        }
-        return centers.map((point, index) => {
-            var _a, _b;
-            return ({
-                id: (_b = (_a = data[index]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : index,
-                index,
-                datum: data[index],
-                width: block.width,
-                height: block.height,
-                x: point.x - block.width / 2,
-                y: point.y - block.height / 2,
-                center: point
-            });
-        });
-    };
-    const lineCenters = (count, x0, y0, x1, y1) => {
-        if (count === 1) {
-            return [{ x: (x0 + x1) / 2, y: (y0 + y1) / 2 }];
-        }
-        return Array.from({ length: count }, (_, index) => {
-            const t = index / (count - 1);
-            return {
-                x: x0 + (x1 - x0) * t,
-                y: y0 + (y1 - y0) * t
-            };
-        });
-    };
-    const alternatingHorizontalCenters = (count, inner, block, gap) => {
-        const baseY = inner.y + inner.height / 2;
-        const offset = Math.min(Math.max(block.height * 0.65 + gap / 2, 0), Math.max((inner.height - block.height) / 2, 0));
-        const points = lineCenters(count, inner.x + block.width / 2, baseY, inner.x + inner.width - block.width / 2, baseY);
-        return points.map((point, index) => ({
-            x: point.x,
-            y: point.y + (index % 2 === 0 ? -offset : offset)
-        }));
-    };
-    const alternatingVerticalCenters = (count, inner, block, gap) => {
-        const baseX = inner.x + inner.width / 2;
-        const offset = Math.min(Math.max(block.width * 0.65 + gap / 2, 0), Math.max((inner.width - block.width) / 2, 0));
-        const points = lineCenters(count, baseX, inner.y + block.height / 2, baseX, inner.y + inner.height - block.height / 2);
-        return points.map((point, index) => ({
-            x: point.x + (index % 2 === 0 ? -offset : offset),
-            y: point.y
-        }));
-    };
-    const circularCenters = (count, viewBox, block, padding, layout) => {
-        var _a;
-        const guide = computeClockCircleGuide(viewBox, block, padding, layout);
-        const startAngle = (_a = layout.startAngle) !== null && _a !== void 0 ? _a : -90;
-        const delta = 360;
-        if (count === 1) {
-            const angle = degreeToRadian(startAngle);
-            return [
-                {
-                    x: guide.center.x + Math.cos(angle) * guide.radius,
-                    y: guide.center.y + Math.sin(angle) * guide.radius
-                }
-            ];
-        }
-        return Array.from({ length: count }, (_, index) => {
-            const angle = degreeToRadian(startAngle + (delta * index) / count);
-            return {
-                x: guide.center.x + Math.cos(angle) * guide.radius,
-                y: guide.center.y + Math.sin(angle) * guide.radius
-            };
-        });
-    };
-    const computeClockCircleGuide = (viewBox, block, padding, layout) => {
-        var _a;
-        const innerWidth = Math.max(viewBox.width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(viewBox.height - padding.top - padding.bottom, 1);
-        const center = {
-            x: padding.left + innerWidth / 2,
-            y: padding.top + innerHeight / 2
-        };
-        const ratio = (_a = layout.radiusRatio) !== null && _a !== void 0 ? _a : 0.7;
-        const maxRadius = Math.max(Math.min(innerWidth - block.width, innerHeight - block.height) / 2, 1);
-        return {
-            center,
-            radius: Math.max(1, maxRadius * ratio)
-        };
-    };
-    const arcCenters = (count, inner, block, layout, fallbackStartAngle, fallbackEndAngle, defaultRatio = 0.88) => {
-        var _a, _b, _c, _d, _e;
-        const startAngle = (_b = (_a = layout.startAngle) !== null && _a !== void 0 ? _a : fallbackStartAngle) !== null && _b !== void 0 ? _b : -90;
-        const endAngle = (_d = (_c = layout.endAngle) !== null && _c !== void 0 ? _c : fallbackEndAngle) !== null && _d !== void 0 ? _d : 270;
-        const ratio = (_e = layout.radiusRatio) !== null && _e !== void 0 ? _e : defaultRatio;
-        const rx = Math.max((inner.width - block.width) / 2, 1) * ratio;
-        const ry = Math.max((inner.height - block.height) / 2, 1) * ratio;
-        const center = {
-            x: inner.x + inner.width / 2,
-            y: inner.y + inner.height / 2
-        };
-        if (count === 1) {
-            const angle = degreeToRadian((startAngle + endAngle) / 2);
-            return [{ x: center.x + Math.cos(angle) * rx, y: center.y + Math.sin(angle) * ry }];
-        }
-        return Array.from({ length: count }, (_, index) => {
-            const t = index / (count - 1);
-            const angle = degreeToRadian(startAngle + angleDelta(startAngle, endAngle) * t);
-            return {
-                x: center.x + Math.cos(angle) * rx,
-                y: center.y + Math.sin(angle) * ry
-            };
-        });
-    };
-    const angleDelta = (startAngle, endAngle) => {
-        const delta = endAngle - startAngle;
-        return Math.abs(delta) >= 360 ? 360 : delta;
-    };
-    const degreeToRadian = (degree) => (degree / 180) * Math.PI;
-    const computeLinks = (blocks, distance) => {
-        const links = [];
-        for (let i = 0; i < blocks.length - 1; i++) {
-            const from = blocks[i];
-            const to = blocks[i + 1];
-            const start = pointOnBlockEdge(from, to.center, distance);
-            const end = pointOnBlockEdge(to, from.center, distance);
-            links.push({
-                from,
-                to,
-                start,
-                end,
-                points: [start, end]
-            });
-        }
-        return links;
-    };
-    const pointOnBlockEdge = (block, toward, distance) => {
-        const dx = toward.x - block.center.x;
-        const dy = toward.y - block.center.y;
-        if (dx === 0 && dy === 0) {
-            return { x: block.center.x, y: block.center.y };
-        }
-        const scaleX = dx === 0 ? Number.POSITIVE_INFINITY : block.width / 2 / Math.abs(dx);
-        const scaleY = dy === 0 ? Number.POSITIVE_INFINITY : block.height / 2 / Math.abs(dy);
-        const scale = Math.min(scaleX, scaleY);
-        const length = Math.sqrt(dx * dx + dy * dy) || 1;
-        return {
-            x: block.center.x + dx * scale + (dx / length) * distance,
-            y: block.center.y + dy * scale + (dy / length) * distance
-        };
-    };
-
-    const DEFAULT_BLOCK_WIDTH = 180;
-    const DEFAULT_BLOCK_HEIGHT = 112;
-    const DEFAULT_BLOCK_WIDTH_RATIO = 0.24;
-    const DEFAULT_BLOCK_GAP = 36;
-    const DEFAULT_IMAGE_WIDTH = 48;
-    const DEFAULT_IMAGE_HEIGHT = 48;
-    const DEFAULT_IMAGE_GAP = 10;
-    const DEFAULT_THEME_COLOR = '#e8543d';
-    const isLandscape = (spec) => normalizeLayout(spec.layout).type === 'landscape';
-    const isPortrait = (spec) => normalizeLayout(spec.layout).type === 'portrait';
-    const isClock = (spec) => normalizeLayout(spec.layout).type === 'clock';
-    const isDome = (spec) => normalizeLayout(spec.layout).type === 'dome';
-    const isBowl = (spec) => normalizeLayout(spec.layout).type === 'bowl';
-    const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
-    const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
-    const withAlpha = (color, alpha) => {
-        const safeAlpha = Math.max(0, Math.min(1, alpha));
-        if (!color) {
-            return `rgba(0, 0, 0, ${safeAlpha})`;
-        }
-        const trimmed = color.trim();
-        if (trimmed.startsWith('#')) {
-            let hex = trimmed.slice(1);
-            if (hex.length === 3 || hex.length === 4) {
-                hex = hex
-                    .split('')
-                    .map(ch => ch + ch)
-                    .join('');
-            }
-            if (hex.length === 6 || hex.length === 8) {
-                const r = parseInt(hex.slice(0, 2), 16);
-                const g = parseInt(hex.slice(2, 4), 16);
-                const b = parseInt(hex.slice(4, 6), 16);
-                return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
-            }
-        }
-        const rgbMatch = trimmed.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
-        if (rgbMatch) {
-            return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${safeAlpha})`;
-        }
-        return trimmed;
-    };
-    const resolveBlockWidth = (spec, viewWidth) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if ((_a = spec.block) === null || _a === void 0 ? void 0 : _a.width) {
-            return spec.block.width;
-        }
-        const ratio = (_c = (_b = spec.block) === null || _b === void 0 ? void 0 : _b.widthRatio) !== null && _c !== void 0 ? _c : DEFAULT_BLOCK_WIDTH_RATIO;
-        const minWidth = (_e = (_d = spec.block) === null || _d === void 0 ? void 0 : _d.minWidth) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_WIDTH;
-        const maxWidth = (_g = (_f = spec.block) === null || _f === void 0 ? void 0 : _f.maxWidth) !== null && _g !== void 0 ? _g : Math.max(minWidth, 320);
-        return Math.max(minWidth, Math.min(maxWidth, Math.round(viewWidth * ratio)));
-    };
-    const getRegionGeometry = (ctx) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        const region = (_c = (_b = (_a = ctx.chart) === null || _a === void 0 ? void 0 : _a.getAllRegions) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[0];
-        const regionRect = (_d = region === null || region === void 0 ? void 0 : region.getLayoutRect) === null || _d === void 0 ? void 0 : _d.call(region);
-        const regionStart = (_e = region === null || region === void 0 ? void 0 : region.getLayoutStartPoint) === null || _e === void 0 ? void 0 : _e.call(region);
-        const chartRect = (_g = (_f = ctx.chart) === null || _f === void 0 ? void 0 : _f.getLayoutRect) === null || _g === void 0 ? void 0 : _g.call(_f);
-        const bounds = (_h = ctx.getLayoutBounds) === null || _h === void 0 ? void 0 : _h.call(ctx);
-        const width = Math.max((_m = (_k = (_j = regionRect === null || regionRect === void 0 ? void 0 : regionRect.width) !== null && _j !== void 0 ? _j : chartRect === null || chartRect === void 0 ? void 0 : chartRect.width) !== null && _k !== void 0 ? _k : (_l = bounds === null || bounds === void 0 ? void 0 : bounds.width) === null || _l === void 0 ? void 0 : _l.call(bounds)) !== null && _m !== void 0 ? _m : 0, 1);
-        const height = Math.max((_r = (_p = (_o = regionRect === null || regionRect === void 0 ? void 0 : regionRect.height) !== null && _o !== void 0 ? _o : chartRect === null || chartRect === void 0 ? void 0 : chartRect.height) !== null && _p !== void 0 ? _p : (_q = bounds === null || bounds === void 0 ? void 0 : bounds.height) === null || _q === void 0 ? void 0 : _q.call(bounds)) !== null && _r !== void 0 ? _r : 0, 1);
-        return {
-            width,
-            height,
-            startX: (_s = regionStart === null || regionStart === void 0 ? void 0 : regionStart.x) !== null && _s !== void 0 ? _s : 0,
-            startY: (_t = regionStart === null || regionStart === void 0 ? void 0 : regionStart.y) !== null && _t !== void 0 ? _t : 0
-        };
-    };
-    const getLayout = (spec, ctx) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        let blockWidth = resolveBlockWidth(spec, width);
-        let blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : DEFAULT_BLOCK_HEIGHT;
-        if (isLandscape(spec) && !((_c = spec.block) === null || _c === void 0 ? void 0 : _c.width)) {
-            const count = (_e = (_d = spec.data) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
-            if (count > 0) {
-                const padding = normalizePadding((_f = spec.block) === null || _f === void 0 ? void 0 : _f.padding);
-                const innerWidth = Math.max(width - padding.left - padding.right, 1);
-                const LANDSCAPE_IMAGE_GAP = 40;
-                const LANDSCAPE_IMAGE_MIN_WIDTH = 80;
-                const totalGap = LANDSCAPE_IMAGE_GAP * Math.max(count - 1, 0);
-                const adaptive = (innerWidth - totalGap) / count;
-                blockWidth = Math.max(LANDSCAPE_IMAGE_MIN_WIDTH, Math.floor(adaptive));
-            }
-        }
-        if (isPortrait(spec) && !((_g = spec.block) === null || _g === void 0 ? void 0 : _g.height)) {
-            const count = (_j = (_h = spec.data) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
-            if (count > 0) {
-                const padding = normalizePadding((_k = spec.block) === null || _k === void 0 ? void 0 : _k.padding);
-                const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-                blockHeight = Math.max(160, Math.floor(innerHeight / count));
-            }
-        }
-        const result = computeStorylineLayout((_l = spec.data) !== null && _l !== void 0 ? _l : [], {
-            layout: spec.layout,
-            viewBox: { width, height },
-            block: {
-                width: blockWidth,
-                height: blockHeight
-            },
-            gap: (_o = (_m = spec.block) === null || _m === void 0 ? void 0 : _m.gap) !== null && _o !== void 0 ? _o : DEFAULT_BLOCK_GAP,
-            padding: (_p = spec.block) === null || _p === void 0 ? void 0 : _p.padding,
-            lineDistance: (_q = spec.line) === null || _q === void 0 ? void 0 : _q.distance
-        });
-        if (!startX && !startY) {
-            return result;
-        }
-        return Object.assign(Object.assign({}, result), { blocks: result.blocks.map(block => (Object.assign(Object.assign({}, block), { x: block.x + startX, y: block.y + startY, center: {
-                    x: block.center.x + startX,
-                    y: block.center.y + startY
-                } }))), links: result.links.map(link => (Object.assign(Object.assign({}, link), { start: { x: link.start.x + startX, y: link.start.y + startY }, end: { x: link.end.x + startX, y: link.end.y + startY }, points: link.points.map(point => ({ x: point.x + startX, y: point.y + startY })) }))) });
-    };
-    const buildRichContent = (contentText, spec) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const fontSize = Number((_c = (_b = (_a = spec.content) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 12);
-        const lineHeight = Number((_f = (_e = (_d = spec.content) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null && _f !== void 0 ? _f : 18);
-        const fill = (_j = (_h = (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.fill) !== null && _j !== void 0 ? _j : '#596173';
-        return {
-            type: 'rich',
-            text: contentText.reduce((result, paragraph, index) => {
-                const suffix = index === contentText.length - 1 ? '' : '\n';
-                result.push({
-                    text: `${paragraph}${suffix}`,
-                    fontSize,
-                    lineHeight,
-                    fill
-                });
-                return result;
-            }, [])
-        };
-    };
-    const omitImageLayoutSpec = (imageSpec) => {
-        if (!imageSpec) {
-            return {};
-        }
-        const rest = __rest(imageSpec, ["width", "height", "position", "gap"]);
-        return rest;
-    };
-    const getImageBox = (position, blockWidth, blockHeight, padding, width, height, _gap, visible) => {
-        if (!visible) {
-            return { x: padding.left, y: padding.top, width: 0, height: 0 };
-        }
-        switch (position) {
-            case 'left':
-                return { x: padding.left, y: (blockHeight - height) / 2, width, height };
-            case 'right':
-                return { x: blockWidth - padding.right - width, y: (blockHeight - height) / 2, width, height };
-            case 'bottom':
-                return { x: (blockWidth - width) / 2, y: blockHeight - padding.bottom - height, width, height };
-            case 'top':
-            default:
-                return { x: (blockWidth - width) / 2, y: padding.top, width, height };
-        }
-    };
-    const getTextBox = (position, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage) => {
-        if (!hasImage) {
-            return {
-                x: padding.left,
-                y: padding.top,
-                width: blockWidth - padding.left - padding.right,
-                height: blockHeight - padding.top - padding.bottom
-            };
-        }
-        switch (position) {
-            case 'left':
-                return {
-                    x: padding.left + imageWidth + imageGap,
-                    y: padding.top,
-                    width: blockWidth - padding.left - padding.right - imageWidth - imageGap,
-                    height: blockHeight - padding.top - padding.bottom
-                };
-            case 'right':
-                return {
-                    x: padding.left,
-                    y: padding.top,
-                    width: blockWidth - padding.left - padding.right - imageWidth - imageGap,
-                    height: blockHeight - padding.top - padding.bottom
-                };
-            case 'bottom':
-                return {
-                    x: padding.left,
-                    y: padding.top,
-                    width: blockWidth - padding.left - padding.right,
-                    height: blockHeight - padding.top - padding.bottom - imageHeight - imageGap
-                };
-            case 'top':
-            default:
-                return {
-                    x: padding.left,
-                    y: padding.top + imageHeight + imageGap,
-                    width: blockWidth - padding.left - padding.right,
-                    height: blockHeight - padding.top - padding.bottom - imageHeight - imageGap
-                };
-        }
-    };
-    const buildSmoothCurvePath = (points) => {
-        var _a, _b;
-        if (points.length < 2) {
-            return '';
-        }
-        if (points.length === 2) {
-            return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
-        }
-        let d = `M ${points[0].x} ${points[0].y}`;
-        for (let i = 0; i < points.length - 1; i++) {
-            const p0 = (_a = points[i - 1]) !== null && _a !== void 0 ? _a : points[i];
-            const p1 = points[i];
-            const p2 = points[i + 1];
-            const p3 = (_b = points[i + 2]) !== null && _b !== void 0 ? _b : p2;
-            const c1x = p1.x + (p2.x - p0.x) / 6;
-            const c1y = p1.y + (p2.y - p0.y) / 6;
-            const c2x = p2.x - (p3.x - p1.x) / 6;
-            const c2y = p2.y - (p3.y - p1.y) / 6;
-            d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2.x} ${p2.y}`;
-        }
-        return d;
-    };
-
-    const CLOCK_CENTER_RADIUS_RATIO = 0.5;
-    const CLOCK_CENTER_IMAGE_INSET_RATIO = 0.86;
-    const CLOCK_ORBIT_RATIO = 0.58;
-    const CLOCK_DOT_RATIO = 0.58;
-    const CLOCK_TEXT_INNER_RATIO = 0.7;
-    const CLOCK_TEXT_MAX_WIDTH = 200;
-    const CLOCK_DOT_DIAMETER_RATIO = 0.24;
-    const CLOCK_LEAD_LINE_GAP = 6;
-    const CLOCK_TEXT_GAP_FROM_LEAD = 8;
-    const CLOCK_ORBIT_DASH = [4, 4];
-    const CLOCK_TITLE_FONT_SIZE = 13;
-    const CLOCK_TITLE_LINE_HEIGHT = 18;
-    const CLOCK_CONTENT_FONT_SIZE = 11;
-    const CLOCK_CONTENT_LINE_HEIGHT = 15;
-    const getClockGeometry = (spec, ctx) => {
-        var _a, _b, _c;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const cx = startX + padding.left + innerWidth / 2;
-        const cy = startY + padding.top + innerHeight / 2;
-        const R = Math.max(Math.min(innerWidth, innerHeight) / 2, 1);
-        const count = (_c = (_b = spec.data) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
-        const step = count > 0 ? (Math.PI * 2) / count : 0;
-        return { cx, cy, R, count, step };
-    };
-    const getClockBlockAngle = (geom, index) => -Math.PI / 2 + geom.step * (index + 0.5);
-    const polar = (cx, cy, r, angle) => ({
-        x: cx + Math.cos(angle) * r,
-        y: cy + Math.sin(angle) * r
-    });
-    const isOnLeftHalf = (angle) => Math.cos(angle) < 0;
-    const buildClockCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        if (((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) === false) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        return {
-            type: 'group',
-            name: 'storyline-clock-center',
-            zIndex: vchart.LayoutZIndex.Mark + 2,
-            children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-clock-center-halo',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getClockGeometry(spec, ctx).cx,
-                        y: (_d, ctx) => getClockGeometry(spec, ctx).cy,
-                        size: (_d, ctx) => {
-                            const g = getClockGeometry(spec, ctx);
-                            return g.R * CLOCK_CENTER_RADIUS_RATIO * 2.16;
-                        },
-                        symbolType: 'circle',
-                        fill: withAlpha(themeColor, 0.28),
-                        stroke: 'transparent'
-                    }
-                },
-                hasImage
-                    ? {
-                        type: 'image',
-                        name: 'storyline-clock-center-image',
-                        interactive: false,
-                        style: Object.assign({ x: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return g.cx - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, y: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return g.cy - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
-                                const g = getClockGeometry(spec, ctx);
-                                return [g.cx, g.cy];
-                            }, dx: (_d, ctx) => {
-                                var _a, _b;
-                                const g = getClockGeometry(spec, ctx);
-                                const rectW = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number' ? userWidth : rectW;
-                                return (rectW - w) / 2;
-                            }, dy: (_d, ctx) => {
-                                var _a, _b;
-                                const g = getClockGeometry(spec, ctx);
-                                const rectH = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number' ? userHeight : rectH;
-                                return (rectH - h) / 2;
-                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
-                    }
-                    : {
-                        type: 'symbol',
-                        name: 'storyline-clock-center-placeholder',
-                        interactive: false,
-                        style: {
-                            x: (_d, ctx) => getClockGeometry(spec, ctx).cx,
-                            y: (_d, ctx) => getClockGeometry(spec, ctx).cy,
-                            size: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * 2,
-                            symbolType: 'circle',
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
-                    }
-            ].filter(Boolean)
-        };
-    };
-    const buildClockArcMark = (spec) => {
-        const themeColor = getThemeColor(spec);
-        const orbitPath = (_d, ctx) => {
-            const g = getClockGeometry(spec, ctx);
-            const r = g.R * CLOCK_ORBIT_RATIO;
-            return [
-                `M ${(g.cx + r).toFixed(2)} ${g.cy.toFixed(2)}`,
-                `A ${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 ${(g.cx - r).toFixed(2)} ${g.cy.toFixed(2)}`,
-                `A ${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 ${(g.cx + r).toFixed(2)} ${g.cy.toFixed(2)}`
-            ].join(' ');
-        };
-        return {
-            type: 'group',
-            name: 'storyline-clock-orbit',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-clock-orbit-path',
-                    interactive: false,
-                    style: {
-                        path: orbitPath,
-                        stroke: withAlpha(themeColor, 0.7),
-                        lineWidth: 1,
-                        lineDash: CLOCK_ORBIT_DASH,
-                        fill: 'transparent',
-                        fillOpacity: 0
-                    }
-                }
-            ]
-        };
-    };
-    const getClockDotCenter = (spec, ctx, index) => {
-        const g = getClockGeometry(spec, ctx);
-        const angle = getClockBlockAngle(g, index);
-        const r = g.R * CLOCK_DOT_RATIO;
-        return Object.assign(Object.assign({}, polar(g.cx, g.cy, r, angle)), { diameter: g.R * CLOCK_DOT_DIAMETER_RATIO, angle });
-    };
-    const getClockLeadLine = (spec, ctx, index) => {
-        const g = getClockGeometry(spec, ctx);
-        const angle = getClockBlockAngle(g, index);
-        const dotR = (g.R * CLOCK_DOT_DIAMETER_RATIO) / 2;
-        const start = polar(g.cx, g.cy, g.R * CLOCK_DOT_RATIO + dotR + CLOCK_LEAD_LINE_GAP, angle);
-        const end = polar(g.cx, g.cy, g.R * CLOCK_TEXT_INNER_RATIO - CLOCK_TEXT_GAP_FROM_LEAD, angle);
-        return { start, end };
-    };
-    const getClockTextRect = (spec, ctx, index) => {
-        var _a;
-        const g = getClockGeometry(spec, ctx);
-        const { width: regionWidth, startX } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const angle = getClockBlockAngle(g, index);
-        const onLeft = isOnLeftHalf(angle);
-        const rInner = g.R * CLOCK_TEXT_INNER_RATIO;
-        const innerPoint = polar(g.cx, g.cy, rInner, angle);
-        const leftEdge = startX + padding.left;
-        const rightEdge = startX + regionWidth - padding.right;
-        const width = onLeft
-            ? Math.min(Math.max(innerPoint.x - leftEdge, 80), CLOCK_TEXT_MAX_WIDTH)
-            : Math.min(Math.max(rightEdge - innerPoint.x, 80), CLOCK_TEXT_MAX_WIDTH);
-        return { x: innerPoint.x, y: innerPoint.y, width, onLeft, anchorY: innerPoint.y };
-    };
-    const buildClockBlockMark = (spec, block, index) => {
-        var _a, _b, _c;
-        const hasImage = !!block.image;
-        const themeColor = getThemeColor(spec);
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const leadPath = (_d, ctx) => {
-            const { start, end } = getClockLeadLine(spec, ctx, index);
-            return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} L ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
-        };
-        const children = [
-            {
-                type: 'path',
-                name: `storyline-clock-lead-${index}`,
-                interactive: false,
-                style: {
-                    path: leadPath,
-                    stroke: withAlpha(themeColor, 0.7),
-                    lineWidth: 1,
-                    lineDash: [3, 3],
-                    fill: 'transparent',
-                    fillOpacity: 0
-                }
-            },
-            hasImage
-                ? {
-                    type: 'image',
-                    name: `storyline-clock-dot-${index}`,
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => {
-                            const dot = getClockDotCenter(spec, ctx, index);
-                            return dot.x - dot.diameter / 2;
-                        },
-                        y: (_d, ctx) => {
-                            const dot = getClockDotCenter(spec, ctx, index);
-                            return dot.y - dot.diameter / 2;
-                        },
-                        width: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
-                        height: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
-                        image: block.image,
-                        cornerRadius: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter / 2,
-                        repeatX: 'no-repeat',
-                        repeatY: 'no-repeat',
-                        imageMode: 'cover',
-                        imagePosition: 'center',
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                }
-                : {
-                    type: 'symbol',
-                    name: `storyline-clock-dot-${index}`,
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getClockDotCenter(spec, ctx, index).x,
-                        y: (_d, ctx) => getClockDotCenter(spec, ctx, index).y,
-                        size: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter,
-                        symbolType: 'circle',
-                        fill: themeColor,
-                        stroke: '#ffffff',
-                        lineWidth: 1.5
-                    }
-                },
-            block.title
-                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY - CLOCK_TITLE_LINE_HEIGHT, text: block.title, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, fontSize: CLOCK_TITLE_FONT_SIZE, lineHeight: CLOCK_TITLE_LINE_HEIGHT, fontWeight: 'bold', fill: themeColor, textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top' }, (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) })
-                : null,
-            contentText.length
-                ? Object.assign(Object.assign({ type: 'text', name: `storyline-clock-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getClockTextRect(spec, ctx, index).x, y: (_d, ctx) => getClockTextRect(spec, ctx, index).anchorY + 4, width: (_d, ctx) => getClockTextRect(spec, ctx, index).width, maxLineWidth: (_d, ctx) => getClockTextRect(spec, ctx, index).width, text: buildRichContent(contentText, spec), fontSize: CLOCK_CONTENT_FONT_SIZE, lineHeight: CLOCK_CONTENT_LINE_HEIGHT, fill: '#3a3f4d', textAlign: (_d, ctx) => getClockTextRect(spec, ctx, index).onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word' }, (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) })
-                : null
-        ];
-        return {
-            type: 'group',
-            id: `storyline-block-${(_c = block.id) !== null && _c !== void 0 ? _c : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            children: children.filter(Boolean)
-        };
-    };
-
-    const buildDefaultLineMark = (spec) => {
-        var _a, _b, _c, _d;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false || ((_c = (_b = spec.data) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) <= 1) {
-            return null;
-        }
-        return {
-            type: 'group',
-            name: 'storyline-links',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: ((_d = spec.data) !== null && _d !== void 0 ? _d : []).slice(1).map((_, index) => {
-                var _a;
-                const _b = (_a = spec.line) !== null && _a !== void 0 ? _a : {}, { style = {}, type = 'line', showArrow = false, arrowSize = 8 } = _b, rest = __rest(_b, ["style", "type", "showArrow", "arrowSize"]);
-                return Object.assign(Object.assign({ type: 'path', name: `storyline-link-${index}`, interactive: false }, rest), { style: Object.assign(Object.assign({ stroke: '#8a94a6', lineWidth: 1.5, fill: 'transparent', fillOpacity: 0 }, style), { path: (_datum, ctx) => {
-                            const link = getLayout(spec, ctx).links[index];
-                            if (!link) {
-                                return '';
-                            }
-                            return buildLinkPath(link.points, type, showArrow, arrowSize);
-                        } }) });
-            })
-        };
-    };
-    const getDefaultBlockMetrics = (spec, ctx, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-        const block = getLayout(spec, ctx).blocks[index];
-        const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
-        const imagePosition = (_d = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.position) !== null && _d !== void 0 ? _d : 'top';
-        const imageWidth = (_f = (_e = spec.image) === null || _e === void 0 ? void 0 : _e.width) !== null && _f !== void 0 ? _f : DEFAULT_IMAGE_WIDTH;
-        const imageHeight = (_h = (_g = spec.image) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : DEFAULT_IMAGE_HEIGHT;
-        const imageGap = (_k = (_j = spec.image) === null || _j === void 0 ? void 0 : _j.gap) !== null && _k !== void 0 ? _k : DEFAULT_IMAGE_GAP;
-        const hasImage = !!((_m = (_l = spec.data) === null || _l === void 0 ? void 0 : _l[index]) === null || _m === void 0 ? void 0 : _m.image);
-        const titleFontSize = Number((_q = (_p = (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.fontSize) !== null && _q !== void 0 ? _q : 14);
-        const titleLineHeight = Number((_t = (_s = (_r = spec.title) === null || _r === void 0 ? void 0 : _r.style) === null || _s === void 0 ? void 0 : _s.lineHeight) !== null && _t !== void 0 ? _t : Math.round(titleFontSize * 1.35));
-        const titleHeight = ((_v = (_u = spec.data) === null || _u === void 0 ? void 0 : _u[index]) === null || _v === void 0 ? void 0 : _v.title) ? titleLineHeight : 0;
-        const blockWidth = (_w = block === null || block === void 0 ? void 0 : block.width) !== null && _w !== void 0 ? _w : resolveBlockWidth(spec, 0);
-        const blockHeight = (_z = (_x = block === null || block === void 0 ? void 0 : block.height) !== null && _x !== void 0 ? _x : (_y = spec.block) === null || _y === void 0 ? void 0 : _y.height) !== null && _z !== void 0 ? _z : DEFAULT_BLOCK_HEIGHT;
-        const imageBox = getImageBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const textBox = getTextBox(imagePosition, blockWidth, blockHeight, padding, imageWidth, imageHeight, imageGap, hasImage);
-        const contentGap = ((_1 = (_0 = spec.data) === null || _0 === void 0 ? void 0 : _0[index]) === null || _1 === void 0 ? void 0 : _1.title) ? 8 : 0;
-        return {
-            block: {
-                width: blockWidth,
-                height: blockHeight
-            },
-            imageBox,
-            textBox,
-            contentBox: {
-                y: textBox.y + titleHeight + contentGap,
-                height: Math.max(0, textBox.height - titleHeight - contentGap)
-            }
-        };
-    };
-    const buildDefaultBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_f = (_e = (_d = spec.title) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null && _f !== void 0 ? _f : Math.round(titleFontSize * 1.35));
-        return {
-            type: 'group',
-            id: `storyline-block-${(_g = block.id) !== null && _g !== void 0 ? _g : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_datum, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; },
-                y: (_datum, ctx) => { var _a, _b; return (_b = (_a = getLayout(spec, ctx).blocks[index]) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; },
-                width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.width,
-                height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height
-            },
-            children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-bg-${index}`,
-                    interactive: false,
-                    style: Object.assign({ x: 0, y: 0, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style)
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.width, height: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).imageBox.height, image: block.image, cornerRadius: 6 }, (_j = spec.image) === null || _j === void 0 ? void 0 : _j.style) })
-                    : null,
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_k = spec.title) === null || _k === void 0 ? void 0 : _k.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.x, y: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.y, width: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, fontSize: 12, lineHeight: 18, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-    const buildLinkPath = (points, type, showArrow, arrowSize) => {
-        const start = points[0];
-        const end = points[points.length - 1];
-        if (!start || !end) {
-            return '';
-        }
-        let path;
-        if (type === 'curve') {
-            const dx = end.x - start.x;
-            const dy = end.y - start.y;
-            const curve = Math.max(Math.min(Math.sqrt(dx * dx + dy * dy) * 0.22, 80), 24);
-            path =
-                `M ${start.x} ${start.y} ` +
-                    `C ${start.x + dx / 2} ${start.y - curve} ${end.x - dx / 2} ${end.y + curve} ${end.x} ${end.y}`;
-        }
-        else if (type === 'polyline') {
-            const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
-            path = `M ${start.x} ${start.y} L ${mid.x} ${start.y} L ${mid.x} ${end.y} L ${end.x} ${end.y}`;
-        }
-        else {
-            path = `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
-        }
-        if (!showArrow) {
-            return path;
-        }
-        return `${path} ${buildArrowPath(start, end, arrowSize)}`;
-    };
-    const buildArrowPath = (start, end, size) => {
-        const angle = Math.atan2(end.y - start.y, end.x - start.x);
-        const left = {
-            x: end.x - Math.cos(angle - Math.PI / 6) * size,
-            y: end.y - Math.sin(angle - Math.PI / 6) * size
-        };
-        const right = {
-            x: end.x - Math.cos(angle + Math.PI / 6) * size,
-            y: end.y - Math.sin(angle + Math.PI / 6) * size
-        };
-        return `M ${left.x} ${left.y} L ${end.x} ${end.y} L ${right.x} ${right.y}`;
-    };
-
-    const LANDSCAPE_IMAGE_HEIGHT_RATIO = 0.42;
-    const LANDSCAPE_DETACHED_GAP = 64;
-    const LANDSCAPE_CONNECTOR_ARROW_SIZE = 9;
-    const LANDSCAPE_CONNECTOR_X_RATIO = 0.2;
-    const LANDSCAPE_TEXT_GAP_FROM_CONNECTOR = 12;
-    const LANDSCAPE_CONTENT_LINES = 4;
-    const LANDSCAPE_TITLE_LINE_HEIGHT = 19;
-    const LANDSCAPE_CONTENT_LINE_HEIGHT = 18;
-    const LANDSCAPE_CONTENT_FONT_SIZE = 12;
-    const LANDSCAPE_TITLE_TO_CONTENT_GAP = 4;
-    const getLandscapeImageCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
-        const lb = getLayout(spec, ctx).blocks[index];
-        if (!lb) {
-            return null;
-        }
-        const cx = (_b = (_a = lb.center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : lb.x + lb.width / 2;
-        const cy = (_e = (_c = lb.center) === null || _c === void 0 ? void 0 : _c.y) !== null && _e !== void 0 ? _e : lb.y + lb.height / 2;
-        const stagger = (index % 2 === 0 ? -1 : 1) * lb.height * 0.1;
-        return { x: cx, y: cy + stagger };
-    };
-    const buildLandscapeConnectingCurve = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h;
-        const themeColor = getThemeColor(spec);
-        const lineStyle = (_b = (_a = spec.line) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
-        const count = (_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c.length) !== null && _e !== void 0 ? _e : 0;
-        const symbolSize = 14;
-        const symbolChildren = [];
-        for (let i = 0; i < count; i++) {
-            const idx = i;
-            symbolChildren.push({
-                type: 'symbol',
-                name: `storyline-landscape-curve-symbol-${idx}`,
-                interactive: false,
-                style: {
-                    symbolType: 'circle',
-                    size: symbolSize,
-                    fill: themeColor,
-                    x: (_d, ctx) => { var _a, _b; return (_b = (_a = getLandscapeImageCenter(spec, ctx, idx)) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; },
-                    y: (_d, ctx) => { var _a, _b; return (_b = (_a = getLandscapeImageCenter(spec, ctx, idx)) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; }
-                }
-            });
-        }
-        return {
-            type: 'group',
-            name: 'storyline-landscape-curve',
-            zIndex: vchart.LayoutZIndex.Mark + 2,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-landscape-curve-path',
-                    interactive: false,
-                    style: {
-                        stroke: (_f = lineStyle.stroke) !== null && _f !== void 0 ? _f : themeColor,
-                        lineWidth: (_g = lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 4,
-                        lineDash: (_h = lineStyle.lineDash) !== null && _h !== void 0 ? _h : [6, 5],
-                        lineCap: 'round',
-                        fill: 'transparent',
-                        fillOpacity: 0,
-                        path: (_d, ctx) => {
-                            const points = [];
-                            for (let i = 0; i < count; i++) {
-                                const center = getLandscapeImageCenter(spec, ctx, i);
-                                if (center) {
-                                    points.push(center);
-                                }
-                            }
-                            return buildSmoothCurvePath(points);
-                        }
-                    }
-                },
-                ...symbolChildren
-            ]
-        };
-    };
-    const getLandscapeMetrics = (spec, blockWidth, blockHeight, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const padding = normalizePadding((_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding) !== null && _b !== void 0 ? _b : 12);
-        const titleFontSize = Number((_f = (_e = (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : 14);
-        const titleLineHeight = Number((_j = (_h = (_g = spec.title) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : Math.max(LANDSCAPE_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_m = (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fontSize) !== null && _m !== void 0 ? _m : LANDSCAPE_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_q = (_p = (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) === null || _p === void 0 ? void 0 : _p.lineHeight) !== null && _q !== void 0 ? _q : LANDSCAPE_CONTENT_LINE_HEIGHT);
-        const imageHeight = Math.max((_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : Math.round(blockHeight * LANDSCAPE_IMAGE_HEIGHT_RATIO), titleLineHeight + padding.top + padding.bottom);
-        const connectorGap = LANDSCAPE_DETACHED_GAP;
-        const contentHeight = LANDSCAPE_CONTENT_LINES * contentLineHeight;
-        const titleToContentGap = LANDSCAPE_TITLE_TO_CONTENT_GAP;
-        const textHeight = titleLineHeight + titleToContentGap + contentHeight;
-        const textOnTop = index % 2 === 0;
-        let textBox;
-        let contentBox;
-        let imageBox;
-        let connector;
-        let groupTop;
-        let groupHeight;
-        const imageX = 0;
-        const connectorX = imageX + blockWidth * LANDSCAPE_CONNECTOR_X_RATIO;
-        const textX = connectorX + LANDSCAPE_TEXT_GAP_FROM_CONNECTOR;
-        const textWidth = Math.max(blockWidth - (textX - imageX), 0);
-        if (textOnTop) {
-            const imageY = 0;
-            const textY = imageY - connectorGap - textHeight;
-            const connectorY1 = imageY;
-            const connectorY2 = textY + titleLineHeight / 2;
-            imageBox = { x: imageX, y: imageY, width: blockWidth, height: imageHeight };
-            textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
-            contentBox = {
-                x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
-                width: textWidth,
-                height: contentHeight
-            };
-            connector = { x1: connectorX, y1: connectorY1, x2: connectorX, y2: connectorY2 };
-            groupTop = textY;
-            groupHeight = imageHeight - groupTop;
-        }
-        else {
-            const imageY = 0;
-            const textY = imageY + imageHeight + connectorGap;
-            const connectorY1 = imageY + imageHeight;
-            const connectorY2 = textY + textHeight;
-            imageBox = { x: imageX, y: imageY, width: blockWidth, height: imageHeight };
-            textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
-            contentBox = {
-                x: textX,
-                y: textY + titleLineHeight + titleToContentGap,
-                width: textWidth,
-                height: contentHeight
-            };
-            connector = { x1: connectorX, y1: connectorY1, x2: connectorX, y2: connectorY2 };
-            groupTop = imageY;
-            groupHeight = textY + textHeight - imageY;
-        }
-        return {
-            padding,
-            titleFontSize,
-            titleLineHeight,
-            contentFontSize,
-            contentLineHeight,
-            contentHeight,
-            blockWidth,
-            imageBox,
-            textBox,
-            contentBox,
-            connector,
-            textOnTop,
-            groupTop,
-            groupHeight
-        };
-    };
-    const buildLandscapeBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.round(titleFontSize * 1.35));
-        const getMetrics = (ctx) => {
-            var _a, _b, _c, _e;
-            const layoutBlock = getLayout(spec, ctx).blocks[index];
-            const w = (_a = layoutBlock === null || layoutBlock === void 0 ? void 0 : layoutBlock.width) !== null && _a !== void 0 ? _a : resolveBlockWidth(spec, 0);
-            const h = (_e = (_b = layoutBlock === null || layoutBlock === void 0 ? void 0 : layoutBlock.height) !== null && _b !== void 0 ? _b : (_c = spec.block) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_HEIGHT;
-            return getLandscapeMetrics(spec, w, h, index);
-        };
-        const blockStyle = (_j = (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {};
-        const lineStyle = (_l = (_k = spec.line) === null || _k === void 0 ? void 0 : _k.style) !== null && _l !== void 0 ? _l : {};
-        const themeColor = getThemeColor(spec);
-        const connectorStroke = (_m = lineStyle.stroke) !== null && _m !== void 0 ? _m : themeColor;
-        const connectorLineWidth = (_o = lineStyle.lineWidth) !== null && _o !== void 0 ? _o : 2;
-        const connectorDash = (_p = lineStyle.lineDash) !== null && _p !== void 0 ? _p : [4, 4];
-        return {
-            type: 'group',
-            id: `storyline-block-${(_q = block.id) !== null && _q !== void 0 ? _q : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => {
-                    var _a;
-                    const lb = getLayout(spec, ctx).blocks[index];
-                    return (_a = lb === null || lb === void 0 ? void 0 : lb.x) !== null && _a !== void 0 ? _a : 0;
-                },
-                y: (_d, ctx) => {
-                    var _a, _b, _c, _e, _f, _g, _h;
-                    const lb = getLayout(spec, ctx).blocks[index];
-                    const m = getMetrics(ctx);
-                    const cy = (_b = (_a = lb === null || lb === void 0 ? void 0 : lb.center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : ((_c = lb === null || lb === void 0 ? void 0 : lb.y) !== null && _c !== void 0 ? _c : 0) + ((_e = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _e !== void 0 ? _e : 0) / 2;
-                    const blockH = (_h = (_f = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _f !== void 0 ? _f : (_g = spec.block) === null || _g === void 0 ? void 0 : _g.height) !== null && _h !== void 0 ? _h : DEFAULT_BLOCK_HEIGHT;
-                    const stagger = (index % 2 === 0 ? -1 : 1) * blockH * 0.1;
-                    return cy - m.imageBox.height / 2 + stagger;
-                },
-                width: (_d, ctx) => getMetrics(ctx).blockWidth,
-                height: (_d, ctx) => getMetrics(ctx).groupHeight
-            },
-            children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-image-bg-${index}`,
-                    interactive: false,
-                    style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, cornerRadius: 8, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_r = spec.image) === null || _r === void 0 ? void 0 : _r.style) })
-                    : null,
-                {
-                    type: 'path',
-                    name: `storyline-block-connector-${index}`,
-                    interactive: false,
-                    style: {
-                        stroke: connectorStroke,
-                        lineWidth: connectorLineWidth,
-                        lineDash: connectorDash,
-                        fill: connectorStroke,
-                        path: (_d, ctx) => {
-                            const m = getMetrics(ctx);
-                            const tipSize = LANDSCAPE_CONNECTOR_ARROW_SIZE;
-                            const x = m.connector.x1;
-                            const y0 = m.connector.y1;
-                            const y1 = m.connector.y2;
-                            const tipDir = y1 < y0 ? -1 : 1;
-                            const baseY = y1 - tipDir * tipSize;
-                            const dashLine = `M ${x} ${y0} L ${x} ${baseY}`;
-                            const triangle = `M ${x - tipSize / 2} ${baseY} L ${x + tipSize / 2} ${baseY} L ${x} ${y1} Z`;
-                            return `${dashLine} ${triangle}`;
-                        }
-                    }
-                },
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_s = spec.title) === null || _s === void 0 ? void 0 : _s.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec), fontSize: LANDSCAPE_CONTENT_FONT_SIZE, lineHeight: LANDSCAPE_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_t = spec.content) === null || _t === void 0 ? void 0 : _t.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
-    const PORTRAIT_AXIS_WIDTH = 64;
-    const PORTRAIT_AXIS_PADDING = 50;
-    const PORTRAIT_IMAGE_WIDTH = 180;
-    const PORTRAIT_IMAGE_HEIGHT = 110;
-    const PORTRAIT_IMAGE_GAP_FROM_AXIS = 24;
-    const PORTRAIT_SHADOW_OFFSET_X = 36;
-    const PORTRAIT_SHADOW_OFFSET_Y = 20;
-    const PORTRAIT_SHADOW_SCALE = 1.12;
-    const PORTRAIT_TEXT_GAP_FROM_IMAGE = 8;
-    const PORTRAIT_CONTENT_LINES = 3;
-    const PORTRAIT_TITLE_LINE_HEIGHT = 19;
-    const PORTRAIT_CONTENT_LINE_HEIGHT = 18;
-    const PORTRAIT_CONTENT_FONT_SIZE = 12;
-    const PORTRAIT_TITLE_TO_CONTENT_GAP = 4;
-    const getPortraitAxisRect = (spec, ctx) => {
-        const blocks = getLayout(spec, ctx).blocks;
-        if (!blocks.length) {
-            return { x: 0, y: 0, width: 0, height: 0 };
-        }
-        const firstCy = blocks[0].center.y;
-        const lastCy = blocks[blocks.length - 1].center.y;
-        const top = Math.min(firstCy, lastCy);
-        const bottom = Math.max(firstCy, lastCy);
-        const cx = blocks[0].center.x;
-        return {
-            x: cx - PORTRAIT_AXIS_WIDTH / 2,
-            y: top - PORTRAIT_AXIS_PADDING,
-            width: PORTRAIT_AXIS_WIDTH,
-            height: bottom - top + PORTRAIT_AXIS_PADDING * 2
-        };
-    };
-    const buildPortraitAxisMark = (spec) => {
-        var _a, _b, _c, _e, _f, _g;
-        const themeColor = getThemeColor(spec);
-        const lineStyle = (_b = (_a = spec.line) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
-        const defaultFill = {
-            gradient: 'linear',
-            x0: 0,
-            y0: 0,
-            x1: 0,
-            y1: 1,
-            stops: [
-                { offset: 0, color: withAlpha(themeColor, 0.2) },
-                { offset: 1, color: withAlpha(themeColor, 1) }
-            ]
-        };
-        return {
-            type: 'group',
-            name: 'storyline-portrait-axis',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'rect',
-                    name: 'storyline-portrait-axis-rect',
-                    interactive: false,
-                    style: {
-                        fill: (_c = lineStyle.fill) !== null && _c !== void 0 ? _c : defaultFill,
-                        stroke: (_e = lineStyle.stroke) !== null && _e !== void 0 ? _e : false,
-                        lineWidth: (_f = lineStyle.lineWidth) !== null && _f !== void 0 ? _f : 0,
-                        cornerRadius: (_g = lineStyle.cornerRadius) !== null && _g !== void 0 ? _g : 0,
-                        x: (_d, ctx) => getPortraitAxisRect(spec, ctx).x,
-                        y: (_d, ctx) => getPortraitAxisRect(spec, ctx).y,
-                        width: (_d, ctx) => getPortraitAxisRect(spec, ctx).width,
-                        height: (_d, ctx) => getPortraitAxisRect(spec, ctx).height
-                    }
-                }
-            ]
-        };
-    };
-    const getPortraitMetrics = (spec, blockWidth, _blockHeight, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : PORTRAIT_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : PORTRAIT_CONTENT_LINE_HEIGHT);
-        const contentHeight = PORTRAIT_CONTENT_LINES * contentLineHeight;
-        const titleToContentGap = PORTRAIT_TITLE_TO_CONTENT_GAP;
-        const textHeight = titleLineHeight + titleToContentGap + contentHeight;
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : PORTRAIT_IMAGE_WIDTH;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : PORTRAIT_IMAGE_HEIGHT;
-        const onLeft = index % 2 === 0;
-        const axisHalf = PORTRAIT_AXIS_WIDTH / 2;
-        const imageX = onLeft
-            ? -axisHalf - PORTRAIT_IMAGE_GAP_FROM_AXIS - imageWidth
-            : axisHalf + PORTRAIT_IMAGE_GAP_FROM_AXIS;
-        const imageY = -imageHeight / 2;
-        const textX = imageX;
-        const textY = imageY + imageHeight + PORTRAIT_TEXT_GAP_FROM_IMAGE;
-        const textWidth = imageWidth;
-        const contentBox = {
-            x: textX,
-            y: textY + titleLineHeight + titleToContentGap,
-            width: textWidth,
-            height: contentHeight
-        };
-        const shadowOffsetX = PORTRAIT_SHADOW_OFFSET_X;
-        const shadowOffsetY = PORTRAIT_SHADOW_OFFSET_Y;
-        const shadowWidth = imageWidth * PORTRAIT_SHADOW_SCALE;
-        const shadowHeight = imageHeight * PORTRAIT_SHADOW_SCALE;
-        const baseShadowX = imageX - (shadowWidth - imageWidth) / 2;
-        const baseShadowY = imageY - (shadowHeight - imageHeight) / 2;
-        const shadowBox = {
-            x: baseShadowX + (onLeft ? -shadowOffsetX : shadowOffsetX),
-            y: baseShadowY + shadowOffsetY,
-            width: shadowWidth,
-            height: shadowHeight
-        };
-        return {
-            onLeft,
-            titleFontSize,
-            titleLineHeight,
-            contentFontSize,
-            contentLineHeight,
-            blockWidth,
-            imageBox: { x: imageX, y: imageY, width: imageWidth, height: imageHeight },
-            shadowBox,
-            textBox: { x: textX, y: textY, width: textWidth, height: textHeight },
-            contentBox
-        };
-    };
-    const buildPortraitBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(PORTRAIT_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const getMetrics = (ctx) => {
-            var _a, _b, _c, _e;
-            const lb = getLayout(spec, ctx).blocks[index];
-            const w = (_a = lb === null || lb === void 0 ? void 0 : lb.width) !== null && _a !== void 0 ? _a : resolveBlockWidth(spec, 0);
-            const h = (_e = (_b = lb === null || lb === void 0 ? void 0 : lb.height) !== null && _b !== void 0 ? _b : (_c = spec.block) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DEFAULT_BLOCK_HEIGHT;
-            return getPortraitMetrics(spec, w, h, index);
-        };
-        const themeColor = getThemeColor(spec);
-        const blockStyle = (_j = (_h = spec.block) === null || _h === void 0 ? void 0 : _h.style) !== null && _j !== void 0 ? _j : {};
-        return {
-            type: 'group',
-            id: `storyline-block-${(_k = block.id) !== null && _k !== void 0 ? _k : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => {
-                    var _a, _b;
-                    const lb = getLayout(spec, ctx).blocks[index];
-                    return (_b = (_a = lb === null || lb === void 0 ? void 0 : lb.center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
-                },
-                y: (_d, ctx) => {
-                    var _a, _b;
-                    const lb = getLayout(spec, ctx).blocks[index];
-                    return (_b = (_a = lb === null || lb === void 0 ? void 0 : lb.center) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0;
-                }
-            },
-            children: [
-                hasImage
-                    ? {
-                        type: 'image',
-                        name: `storyline-block-shadow-image-${index}`,
-                        interactive: false,
-                        style: {
-                            x: (_d, ctx) => getMetrics(ctx).shadowBox.x,
-                            y: (_d, ctx) => getMetrics(ctx).shadowBox.y,
-                            width: (_d, ctx) => getMetrics(ctx).shadowBox.width,
-                            height: (_d, ctx) => getMetrics(ctx).shadowBox.height,
-                            image: block.image,
-                            cornerRadius: 8,
-                            repeatX: 'no-repeat',
-                            repeatY: 'no-repeat',
-                            imageMode: 'cover',
-                            imagePosition: 'center'
-                        }
-                    }
-                    : null,
-                hasImage
-                    ? {
-                        type: 'rect',
-                        name: `storyline-block-shadow-mask-${index}`,
-                        interactive: false,
-                        style: {
-                            x: (_d, ctx) => getMetrics(ctx).shadowBox.x,
-                            y: (_d, ctx) => getMetrics(ctx).shadowBox.y,
-                            width: (_d, ctx) => getMetrics(ctx).shadowBox.width,
-                            height: (_d, ctx) => getMetrics(ctx).shadowBox.height,
-                            cornerRadius: 8,
-                            stroke: false,
-                            lineWidth: 0,
-                            fill: {
-                                gradient: 'linear',
-                                x0: 0,
-                                y0: 0,
-                                x1: 0,
-                                y1: 1,
-                                stops: [
-                                    { offset: 0, color: withAlpha(themeColor, 0.2) },
-                                    { offset: 1, color: withAlpha(themeColor, 1) }
-                                ]
-                            }
-                        }
-                    }
-                    : null,
-                {
-                    type: 'rect',
-                    name: `storyline-block-image-bg-${index}`,
-                    interactive: false,
-                    style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, image: block.image, cornerRadius: 8, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
-                    : null,
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec), fontSize: PORTRAIT_CONTENT_FONT_SIZE, lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
-    const DOME_BLOCK_IMAGE_SIZE = 140;
-    const DOME_TEXT_GAP_FROM_IMAGE = 10;
-    const DOME_TITLE_LINE_HEIGHT = 19;
-    const DOME_CONTENT_LINE_HEIGHT = 17;
-    const DOME_CONTENT_FONT_SIZE = 12;
-    const DOME_TEXT_BOX_HEIGHT = 300;
-    const DOME_TITLE_TO_CONTENT_GAP = 4;
-    const DOME_TEXT_LEFT_PADDING = 20;
-    const DOME_CENTER_IMAGE_SIZE_RATIO = 0.4;
-    const DOME_ARC_TOP_GAP_FROM_CENTER_IMAGE = 300;
-    const getDomeCenterImageRect = (spec, ctx) => {
-        var _a, _b, _c, _e, _f;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const baseSize = Math.min(innerWidth, innerHeight) * DOME_CENTER_IMAGE_SIZE_RATIO;
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
-        const cx = startX + padding.left + innerWidth / 2;
-        const top = startY + padding.top + innerHeight - h;
-        return { x: cx - w / 2, y: top, width: w, height: h };
-    };
-    const getDomeArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
-        const { width, startX } = getRegionGeometry(ctx);
-        const blockPadding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - blockPadding.left - blockPadding.right, 1);
-        const blockWidth = resolveBlockWidth(spec, width);
-        const layoutOpt = normalizeLayout(spec.layout);
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : 200;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : 340;
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.88;
-        const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
-        const centerRect = getDomeCenterImageRect(spec, ctx);
-        const centerTop = centerRect.y;
-        const centerBottom = centerRect.y + centerRect.height;
-        const sinStart = Math.sin((startAngle / 180) * Math.PI);
-        const denom = Math.max(1 + sinStart, 0.05);
-        const ry = (centerRect.height + DOME_ARC_TOP_GAP_FROM_CENTER_IMAGE) / denom;
-        const cy = centerBottom - ry * sinStart;
-        return {
-            cx: startX + blockPadding.left + innerWidth / 2,
-            cy,
-            rx,
-            ry,
-            startAngle,
-            endAngle,
-            centerTop,
-            centerBottom
-        };
-    };
-    const getDomeBlockCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
-        const arc = getDomeArcGeometry(spec, ctx);
-        const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        if (count <= 0) {
-            return { x: arc.cx, y: arc.cy };
-        }
-        const t = count === 1 ? 0.5 : index / (count - 1);
-        const angle = ((arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180) * Math.PI;
-        const px = arc.cx + Math.cos(angle) * arc.rx;
-        const py = arc.cy + Math.sin(angle) * arc.ry;
-        const nxRaw = Math.cos(angle) / arc.rx;
-        const nyRaw = Math.sin(angle) / arc.ry;
-        const nLen = Math.hypot(nxRaw, nyRaw) || 1;
-        const nx = nxRaw / nLen;
-        const ny = nyRaw / nLen;
-        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : DOME_BLOCK_IMAGE_SIZE;
-        const offset = imageHeight / 2;
-        return { x: px + nx * offset, y: py + ny * offset };
-    };
-    const buildDomeArcMark = (spec) => {
-        var _a;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        return {
-            type: 'group',
-            name: 'storyline-dome-arc',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-dome-arc-path',
-                    interactive: false,
-                    style: {
-                        stroke: themeColor,
-                        lineWidth: 2,
-                        lineCap: 'round',
-                        fill: 'transparent',
-                        fillOpacity: 0,
-                        path: (_d, ctx) => {
-                            const arc = getDomeArcGeometry(spec, ctx);
-                            const span = arc.endAngle - arc.startAngle;
-                            const samples = 64;
-                            const segments = [];
-                            for (let i = 0; i <= samples; i++) {
-                                const t = i / samples;
-                                const angle = ((arc.startAngle + span * t) / 180) * Math.PI;
-                                const x = arc.cx + Math.cos(angle) * arc.rx;
-                                const y = arc.cy + Math.sin(angle) * arc.ry;
-                                segments.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
-                            }
-                            return segments.join(' ');
-                        }
-                    }
-                }
-            ]
-        };
-    };
-    const buildDomeCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        const visible = ((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) !== false;
-        if (!visible) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        const symbolGradient = {
-            gradient: 'linear',
-            x0: 0.5,
-            y0: 0,
-            x1: 0.5,
-            y1: 1,
-            stops: [
-                { offset: 0, color: withAlpha(themeColor, 0.15) },
-                { offset: 1, color: themeColor }
-            ]
-        };
-        return {
-            type: 'group',
-            name: 'storyline-dome-center',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-dome-center-symbol',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
-                            return r.x + r.width / 2;
-                        },
-                        y: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
-                            return r.y + r.height / 2;
-                        },
-                        size: (_d, ctx) => {
-                            const r = getDomeCenterImageRect(spec, ctx);
-                            return Math.max(r.width, r.height) * 1.1;
-                        },
-                        symbolType: 'circle',
-                        fill: symbolGradient,
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
-                {
-                    type: 'rect',
-                    name: 'storyline-dome-center-rect',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x,
-                        y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y,
-                        width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width,
-                        height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height,
-                        cornerRadius: 12,
-                        fill: '#ffffff',
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-dome-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x, y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y, width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width, height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
-                                const r = getDomeCenterImageRect(spec, ctx);
-                                return [r.x + r.width / 2, r.y + r.height / 2];
-                            }, dx: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getDomeCenterImageRect(spec, ctx);
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number' ? userWidth : r.width;
-                                return (r.width - w) / 2;
-                            }, dy: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getDomeCenterImageRect(spec, ctx);
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number' ? userHeight : r.height;
-                                return (r.height - h) / 2;
-                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-    const getDomeBlockMetrics = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(DOME_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : DOME_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : DOME_CONTENT_LINE_HEIGHT);
-        const titleToContentGap = DOME_TITLE_TO_CONTENT_GAP;
-        const textHeight = DOME_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : DOME_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : DOME_BLOCK_IMAGE_SIZE;
-        const imageBox = {
-            x: -imageWidth / 2,
-            y: -imageHeight / 2,
-            width: imageWidth,
-            height: imageHeight
-        };
-        const textBox = {
-            x: -imageWidth / 2 + DOME_TEXT_LEFT_PADDING,
-            y: imageBox.y - DOME_TEXT_GAP_FROM_IMAGE - textHeight,
-            width: imageWidth - DOME_TEXT_LEFT_PADDING,
-            height: textHeight
-        };
-        const contentBox = {
-            x: textBox.x,
-            y: textBox.y + titleLineHeight + titleToContentGap,
-            width: textBox.width,
-            height: contentHeight
-        };
-        return {
-            titleFontSize,
-            titleLineHeight,
-            contentFontSize,
-            contentLineHeight,
-            imageBox,
-            textBox,
-            contentBox
-        };
-    };
-    const buildDomeBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const themeColor = getThemeColor(spec);
-        const metrics = getDomeBlockMetrics(spec);
-        return {
-            type: 'group',
-            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => getDomeBlockCenter(spec, ctx, index).x,
-                y: (_d, ctx) => getDomeBlockCenter(spec, ctx, index).y
-            },
-            children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-connector-${index}`,
-                    interactive: false,
-                    style: {
-                        x: metrics.imageBox.x,
-                        y: metrics.textBox.y,
-                        width: 2,
-                        height: Math.max(metrics.imageBox.y - metrics.textBox.y, 0),
-                        fill: themeColor,
-                        fillOpacity: 0.6
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: themeColor, lineWidth: 2 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
-                    : {
-                        type: 'rect',
-                        name: `storyline-block-image-bg-${index}`,
-                        interactive: false,
-                        style: {
-                            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,
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
-                    },
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, 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: DOME_CONTENT_FONT_SIZE, lineHeight: DOME_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
-    const BOWL_BLOCK_IMAGE_SIZE = 140;
-    const BOWL_TEXT_GAP_FROM_IMAGE = 10;
-    const BOWL_TITLE_LINE_HEIGHT = 19;
-    const BOWL_CONTENT_LINE_HEIGHT = 17;
-    const BOWL_CONTENT_FONT_SIZE = 12;
-    const BOWL_TEXT_BOX_HEIGHT = 300;
-    const BOWL_TITLE_TO_CONTENT_GAP = 4;
-    const BOWL_TEXT_LEFT_PADDING = 20;
-    const BOWL_CENTER_IMAGE_SIZE_RATIO = 0.4;
-    const BOWL_ARC_BOTTOM_GAP_FROM_CENTER_IMAGE = 300;
-    const getBowlCenterImageRect = (spec, ctx) => {
-        var _a, _b, _c, _e, _f;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const baseSize = Math.min(innerWidth, innerHeight) * BOWL_CENTER_IMAGE_SIZE_RATIO;
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
-        const cx = startX + padding.left + innerWidth / 2;
-        const top = startY + padding.top;
-        return { x: cx - w / 2, y: top, width: w, height: h };
-    };
-    const getBowlArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
-        const { width, startX } = getRegionGeometry(ctx);
-        const blockPadding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - blockPadding.left - blockPadding.right, 1);
-        const blockWidth = resolveBlockWidth(spec, width);
-        const layoutOpt = normalizeLayout(spec.layout);
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : 20;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : 160;
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.88;
-        const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
-        const centerRect = getBowlCenterImageRect(spec, ctx);
-        const centerTop = centerRect.y;
-        const centerBottom = centerRect.y + centerRect.height;
-        const sinStart = Math.sin((startAngle / 180) * Math.PI);
-        const denom = Math.max(1 - sinStart, 0.05);
-        const ry = (centerRect.height + BOWL_ARC_BOTTOM_GAP_FROM_CENTER_IMAGE) / denom;
-        const cy = centerTop - ry * sinStart;
-        return {
-            cx: startX + blockPadding.left + innerWidth / 2,
-            cy,
-            rx,
-            ry,
-            startAngle,
-            endAngle,
-            centerTop,
-            centerBottom
-        };
-    };
-    const getBowlBlockCenter = (spec, ctx, index) => {
-        var _a, _b, _c, _e;
-        const arc = getBowlArcGeometry(spec, ctx);
-        const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        if (count <= 0) {
-            return { x: arc.cx, y: arc.cy };
-        }
-        const t = count === 1 ? 0.5 : index / (count - 1);
-        const angle = ((arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180) * Math.PI;
-        const px = arc.cx + Math.cos(angle) * arc.rx;
-        const py = arc.cy + Math.sin(angle) * arc.ry;
-        const nxRaw = Math.cos(angle) / arc.rx;
-        const nyRaw = Math.sin(angle) / arc.ry;
-        const nLen = Math.hypot(nxRaw, nyRaw) || 1;
-        const nx = nxRaw / nLen;
-        const ny = nyRaw / nLen;
-        const imageHeight = (_e = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : BOWL_BLOCK_IMAGE_SIZE;
-        const offset = imageHeight / 2;
-        return { x: px + nx * offset, y: py + ny * offset };
-    };
-    const buildBowlArcMark = (spec) => {
-        var _a;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) !== true) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        return {
-            type: 'group',
-            name: 'storyline-bowl-arc',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-bowl-arc-path',
-                    interactive: false,
-                    style: {
-                        stroke: themeColor,
-                        lineWidth: 2,
-                        lineCap: 'round',
-                        fill: 'transparent',
-                        fillOpacity: 0,
-                        path: (_d, ctx) => {
-                            const arc = getBowlArcGeometry(spec, ctx);
-                            const span = arc.endAngle - arc.startAngle;
-                            const samples = 64;
-                            const segments = [];
-                            for (let i = 0; i <= samples; i++) {
-                                const t = i / samples;
-                                const angle = ((arc.startAngle + span * t) / 180) * Math.PI;
-                                const x = arc.cx + Math.cos(angle) * arc.rx;
-                                const y = arc.cy + Math.sin(angle) * arc.ry;
-                                segments.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
-                            }
-                            return segments.join(' ');
-                        }
-                    }
-                }
-            ]
-        };
-    };
-    const buildBowlCenterImageMark = (spec) => {
-        var _a, _b, _c, _e;
-        const visible = ((_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.visible) !== false;
-        if (!visible) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const hasImage = !!((_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.image);
-        const symbolGradient = {
-            gradient: 'linear',
-            x0: 0.5,
-            y0: 0,
-            x1: 0.5,
-            y1: 1,
-            stops: [
-                { offset: 0, color: withAlpha(themeColor, 0.15) },
-                { offset: 1, color: themeColor }
-            ]
-        };
-        return {
-            type: 'group',
-            name: 'storyline-bowl-center',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'symbol',
-                    name: 'storyline-bowl-center-symbol',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return r.x + r.width / 2;
-                        },
-                        y: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return r.y + r.height / 2;
-                        },
-                        size: (_d, ctx) => {
-                            const r = getBowlCenterImageRect(spec, ctx);
-                            return Math.max(r.width, r.height) * 1.1;
-                        },
-                        symbolType: 'circle',
-                        fill: symbolGradient,
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-bowl-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x, y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y, width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width, height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imagePosition: 'center', anchor: (_d, ctx) => {
-                                const r = getBowlCenterImageRect(spec, ctx);
-                                return [r.x + r.width / 2, r.y + r.height / 2];
-                            }, dx: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getBowlCenterImageRect(spec, ctx);
-                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number' ? userWidth : r.width;
-                                return (r.width - w) / 2;
-                            }, dy: (_d, ctx) => {
-                                var _a, _b;
-                                const r = getBowlCenterImageRect(spec, ctx);
-                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number' ? userHeight : r.height;
-                                return (r.height - h) / 2;
-                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-    const getBowlBlockMetrics = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 14);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(BOWL_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.35)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : BOWL_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : BOWL_CONTENT_LINE_HEIGHT);
-        const titleToContentGap = BOWL_TITLE_TO_CONTENT_GAP;
-        const textHeight = BOWL_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : BOWL_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : BOWL_BLOCK_IMAGE_SIZE;
-        const imageBox = {
-            x: -imageWidth / 2,
-            y: -imageHeight / 2,
-            width: imageWidth,
-            height: imageHeight
-        };
-        const textBox = {
-            x: -imageWidth / 2 + BOWL_TEXT_LEFT_PADDING,
-            y: imageBox.y + imageHeight + BOWL_TEXT_GAP_FROM_IMAGE,
-            width: imageWidth - BOWL_TEXT_LEFT_PADDING,
-            height: textHeight
-        };
-        const contentBox = {
-            x: textBox.x,
-            y: textBox.y + titleLineHeight + titleToContentGap,
-            width: textBox.width,
-            height: contentHeight
-        };
-        return {
-            titleFontSize,
-            titleLineHeight,
-            contentFontSize,
-            contentLineHeight,
-            imageBox,
-            textBox,
-            contentBox
-        };
-    };
-    const buildBowlBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const themeColor = getThemeColor(spec);
-        const metrics = getBowlBlockMetrics(spec);
-        return {
-            type: 'group',
-            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => getBowlBlockCenter(spec, ctx, index).x,
-                y: (_d, ctx) => getBowlBlockCenter(spec, ctx, index).y
-            },
-            children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-connector-${index}`,
-                    interactive: false,
-                    style: {
-                        x: metrics.imageBox.x,
-                        y: metrics.imageBox.y + metrics.imageBox.height,
-                        width: 2,
-                        height: Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0),
-                        fill: themeColor,
-                        fillOpacity: 0.6
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: themeColor, lineWidth: 2 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
-                    : {
-                        type: 'rect',
-                        name: `storyline-block-image-bg-${index}`,
-                        interactive: false,
-                        style: {
-                            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,
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
-                    },
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: '#1f2430', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, 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: BOWL_CONTENT_FONT_SIZE, lineHeight: BOWL_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
-    const WING_BLOCK_IMAGE_SIZE = 96;
-    const WING_TEXT_GAP_FROM_IMAGE = 14;
-    const WING_TITLE_LINE_HEIGHT = 26;
-    const WING_TITLE_FONT_SIZE = 20;
-    const WING_CONTENT_LINE_HEIGHT = 17;
-    const WING_CONTENT_FONT_SIZE = 12;
-    const WING_TEXT_BOX_WIDTH = 240;
-    const WING_TEXT_BOX_HEIGHT = 110;
-    const WING_TITLE_TO_CONTENT_GAP = 4;
-    const getWingDirection = (spec) => {
-        var _a;
-        return (_a = normalizeLayout(spec.layout).direction) !== null && _a !== void 0 ? _a : 'left';
-    };
-    const getWingArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
-        const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const layoutOpt = normalizeLayout(spec.layout);
-        const direction = getWingDirection(spec);
-        const defaultStart = direction === 'right' ? 110 : -70;
-        const defaultEnd = direction === 'right' ? 250 : 70;
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : defaultStart;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : defaultEnd;
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.92;
-        const ry = (innerHeight / 2) * ratio;
-        const rx = innerWidth * 0.6 * ratio;
-        const cx = direction === 'right' ? startX + padding.left + innerWidth - rx * 0.1 : startX + padding.left + rx * 0.1;
-        const cy = startY + padding.top + innerHeight / 2;
-        return { cx, cy, rx, ry, startAngle, endAngle };
-    };
-    const getWingBlockCenter = (spec, ctx, index) => {
-        var _a, _b;
-        const arc = getWingArcGeometry(spec, ctx);
-        const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
-        if (count <= 0) {
-            return { x: arc.cx, y: arc.cy };
-        }
-        const t = count === 1 ? 0.5 : index / (count - 1);
-        const angle = ((arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180) * Math.PI;
-        return {
-            x: arc.cx + Math.cos(angle) * arc.rx,
-            y: arc.cy + Math.sin(angle) * arc.ry
-        };
-    };
-    const isTextOnLeft = (spec, index) => {
-        const direction = getWingDirection(spec);
-        return direction === 'right' ? index % 2 === 1 : index % 2 === 0;
-    };
-    const buildWingArcMark = (spec) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false) {
-            return null;
-        }
-        const themeColor = getThemeColor(spec);
-        const lineStyle = ((_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {});
-        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 2), 0.5);
-        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 18), startWidth);
-        return {
-            type: 'group',
-            name: 'storyline-wing-arc',
-            zIndex: vchart.LayoutZIndex.Mark,
-            children: [
-                {
-                    type: 'path',
-                    name: 'storyline-wing-arc-path',
-                    interactive: false,
-                    style: {
-                        stroke: false,
-                        lineWidth: 0,
-                        fill: (_j = (_h = lineStyle.fill) !== null && _h !== void 0 ? _h : lineStyle.stroke) !== null && _j !== void 0 ? _j : themeColor,
-                        opacity: 0.95,
-                        path: (_d, ctx) => {
-                            const arc = getWingArcGeometry(spec, ctx);
-                            const span = arc.endAngle - arc.startAngle;
-                            const samples = 96;
-                            const pts = [];
-                            for (let i = 0; i <= samples; i++) {
-                                const t = i / samples;
-                                const angle = ((arc.startAngle + span * t) / 180) * Math.PI;
-                                const cx = arc.cx + Math.cos(angle) * arc.rx;
-                                const cy = arc.cy + Math.sin(angle) * arc.ry;
-                                const nxRaw = Math.cos(angle) / arc.rx;
-                                const nyRaw = Math.sin(angle) / arc.ry;
-                                const nLen = Math.hypot(nxRaw, nyRaw) || 1;
-                                pts.push({
-                                    x: cx,
-                                    y: cy,
-                                    nx: nxRaw / nLen,
-                                    ny: nyRaw / nLen,
-                                    w: startWidth + (endWidth - startWidth) * t
-                                });
-                            }
-                            const segments = [];
-                            for (let i = 0; i < pts.length; i++) {
-                                const p = pts[i];
-                                const x = p.x + p.nx * (p.w / 2);
-                                const y = p.y + p.ny * (p.w / 2);
-                                segments.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
-                            }
-                            for (let i = pts.length - 1; i >= 0; i--) {
-                                const p = pts[i];
-                                const x = p.x - p.nx * (p.w / 2);
-                                const y = p.y - p.ny * (p.w / 2);
-                                segments.push(`L ${x.toFixed(2)} ${y.toFixed(2)}`);
-                            }
-                            segments.push('Z');
-                            return segments.join(' ');
-                        }
-                    }
-                }
-            ]
-        };
-    };
-    const getWingBlockMetrics = (spec, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : WING_TITLE_FONT_SIZE);
-        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(WING_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.3)));
-        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : WING_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : WING_CONTENT_LINE_HEIGHT);
-        const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
-        const textHeight = WING_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE;
-        const imageBox = {
-            x: -imageWidth / 2,
-            y: -imageHeight / 2,
-            width: imageWidth,
-            height: imageHeight
-        };
-        const onLeft = isTextOnLeft(spec, index);
-        const textWidth = WING_TEXT_BOX_WIDTH;
-        const textX = onLeft
-            ? -imageWidth / 2 - WING_TEXT_GAP_FROM_IMAGE - textWidth
-            : imageWidth / 2 + WING_TEXT_GAP_FROM_IMAGE;
-        const textY = -textHeight / 2;
-        const textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
-        const contentBox = {
-            x: textX,
-            y: textY + titleLineHeight + titleToContentGap,
-            width: textWidth,
-            height: contentHeight
-        };
-        return {
-            onLeft,
-            titleFontSize,
-            titleLineHeight,
-            contentFontSize,
-            contentLineHeight,
-            imageBox,
-            textBox,
-            contentBox
-        };
-    };
-    const buildWingBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e;
-        const hasImage = !!block.image;
-        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
-        const themeColor = getThemeColor(spec);
-        const metrics = getWingBlockMetrics(spec, index);
-        return {
-            type: 'group',
-            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
-            name: `storyline-block-${index}`,
-            zIndex: vchart.LayoutZIndex.Mark + 1,
-            style: {
-                x: (_d, ctx) => getWingBlockCenter(spec, ctx, index).x,
-                y: (_d, ctx) => getWingBlockCenter(spec, ctx, index).y
-            },
-            children: [
-                {
-                    type: 'symbol',
-                    name: `storyline-block-image-halo-${index}`,
-                    interactive: false,
-                    style: {
-                        x: 0,
-                        y: 0,
-                        size: Math.max(metrics.imageBox.width, metrics.imageBox.height) + 12,
-                        symbolType: 'circle',
-                        fill: withAlpha(themeColor, 0.18),
-                        stroke: themeColor,
-                        lineWidth: 1.5
-                    }
-                },
-                hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: '#ffffff', lineWidth: 3 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
-                    : {
-                        type: 'rect',
-                        name: `storyline-block-image-bg-${index}`,
-                        interactive: false,
-                        style: {
-                            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,
-                            fill: '#ffffff',
-                            stroke: themeColor,
-                            lineWidth: 2
-                        }
-                    },
-                block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: metrics.onLeft ? metrics.textBox.x + metrics.textBox.width : metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: themeColor, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
-                    : null,
-                contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.onLeft ? metrics.contentBox.x + metrics.contentBox.width : 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: WING_CONTENT_FONT_SIZE, lineHeight: WING_CONTENT_LINE_HEIGHT, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
-                    : null
-            ].filter(Boolean)
-        };
-    };
-
-    class StorylineChartSpecTransformer extends vchart.CommonChartSpecTransformer {
-        transformSpec(spec) {
-            var _a;
-            applyDefaultPadding(spec);
-            const storylineSpec = Object.assign(Object.assign({}, spec), { data: [...((_a = spec.data) !== null && _a !== void 0 ? _a : [])] });
-            spec.type = 'common';
-            spec.data = [];
-            spec.series = [];
-            spec.axes = [];
-            spec.customMark = buildStorylineMarks(storylineSpec);
-            delete spec.layout;
-            delete spec.title;
-            super.transformSpec(spec);
-        }
-    }
-    const applyDefaultPadding = (spec) => {
-        var _a, _b, _c, _d;
-        const LARGE = 100;
-        const SMALL = 20;
-        const bowl = isBowl(spec);
-        const defaultTop = bowl ? LARGE : SMALL;
-        const defaultBottom = bowl ? SMALL : LARGE;
-        const p = spec.padding;
-        if (p === undefined || p === null) {
-            spec.padding = [defaultTop, SMALL, defaultBottom, SMALL];
-            return;
-        }
-        if (typeof p === 'number') {
-            spec.padding = bowl ? [Math.max(p, LARGE), p, p, p] : [p, p, Math.max(p, LARGE), p];
-            return;
-        }
-        if (Array.isArray(p)) {
-            const [t, r = SMALL, b, l = SMALL] = p;
-            spec.padding = [t !== null && t !== void 0 ? t : defaultTop, r, b !== null && b !== void 0 ? b : defaultBottom, l];
-            return;
-        }
-        if (typeof p === 'object') {
-            spec.padding = {
-                top: (_a = p.top) !== null && _a !== void 0 ? _a : defaultTop,
-                right: (_b = p.right) !== null && _b !== void 0 ? _b : SMALL,
-                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : defaultBottom,
-                left: (_d = p.left) !== null && _d !== void 0 ? _d : SMALL
-            };
-        }
-    };
-    const buildStorylineMarks = (spec) => {
-        var _a;
-        const lineMark = buildLineMark(spec);
-        const blockMarks = ((_a = spec.data) !== null && _a !== void 0 ? _a : []).map((block, index) => buildBlockMark(spec, block, index));
-        if (isLandscape(spec)) {
-            return [...blockMarks, lineMark].filter(Boolean);
-        }
-        if (isPortrait(spec)) {
-            return [lineMark, ...blockMarks].filter(Boolean);
-        }
-        if (isDome(spec)) {
-            const centerImageMark = buildDomeCenterImageMark(spec);
-            const arcMark = buildDomeArcMark(spec);
-            return [centerImageMark, arcMark, ...blockMarks].filter(Boolean);
-        }
-        if (isBowl(spec)) {
-            const centerImageMark = buildBowlCenterImageMark(spec);
-            const arcMark = buildBowlArcMark(spec);
-            return [centerImageMark, arcMark, ...blockMarks].filter(Boolean);
-        }
-        if (isClock(spec)) {
-            const ringsMark = buildClockArcMark(spec);
-            const centerImageMark = buildClockCenterImageMark(spec);
-            return [ringsMark, ...blockMarks, centerImageMark].filter(Boolean);
-        }
-        if (isWing(spec)) {
-            const arcMark = buildWingArcMark(spec);
-            return [arcMark, ...blockMarks].filter(Boolean);
-        }
-        return [lineMark, ...blockMarks].filter(Boolean);
-    };
-    const buildLineMark = (spec) => {
-        var _a, _b, _c;
-        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false || ((_c = (_b = spec.data) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) <= 1) {
-            return null;
-        }
-        if (isLandscape(spec)) {
-            return buildLandscapeConnectingCurve(spec);
-        }
-        if (isPortrait(spec)) {
-            return buildPortraitAxisMark(spec);
-        }
-        return buildDefaultLineMark(spec);
-    };
-    const buildBlockMark = (spec, block, index) => {
-        if (isLandscape(spec)) {
-            return buildLandscapeBlockMark(spec, block, index);
-        }
-        if (isPortrait(spec)) {
-            return buildPortraitBlockMark(spec, block, index);
-        }
-        if (isDome(spec)) {
-            return buildDomeBlockMark(spec, block, index);
-        }
-        if (isBowl(spec)) {
-            return buildBowlBlockMark(spec, block, index);
-        }
-        if (isClock(spec)) {
-            return buildClockBlockMark(spec, block, index);
-        }
-        if (isWing(spec)) {
-            return buildWingBlockMark(spec, block, index);
-        }
-        return buildDefaultBlockMark(spec, block, index);
-    };
-
-    class StorylineChart extends vchart.BaseChart {
-        constructor() {
-            super(...arguments);
-            this.type = 'storyline';
-            this.transformerConstructor = StorylineChartSpecTransformer;
-        }
-        init() {
-            if (!this.isValid()) {
-                return;
-            }
-            super.init();
-        }
-        isValid() {
-            var _a, _b;
-            const { data } = this._spec;
-            if (!Array.isArray(data)) {
-                (_b = (_a = this._option).onError) === null || _b === void 0 ? void 0 : _b.call(_a, 'Data is required and should be an array for storyline chart');
-                return false;
-            }
-            return true;
-        }
-    }
-    StorylineChart.type = 'storyline';
-    StorylineChart.view = 'singleDefault';
-    StorylineChart.transformerConstructor = StorylineChartSpecTransformer;
-    const registerStorylineChart = (option) => {
-        vchart.registerCommonChart();
-        vchart.registerCustomMark();
-        vchart.registerGroupMark();
-        vchart.registerRectMark();
-        vchart.registerTextMark();
-        vchart.registerImageMark();
-        vchart.registerLineMark();
-        vchart.registerPathMark();
-        vchart.registerArcMark();
-        const vchartConstructor = (option === null || option === void 0 ? void 0 : option.VChart) || vchart.VChart;
-        if (vchartConstructor) {
-            vchartConstructor.useChart([StorylineChart]);
-        }
-    };
-
     const SERIES_BREAK = 'seriesBreak';
 
     function generateZigzagPath(start, end, size, angle, isVertical = false) {
@@ -10171,8 +7961,6 @@
     exports.SequenceScatterPixel = SequenceScatterPixel;
     exports.SeriesBreakComponent = SeriesBreakComponent;
     exports.SeriesLabelComponent = SeriesLabelComponent;
-    exports.StorylineChart = StorylineChart;
-    exports.StorylineChartSpecTransformer = StorylineChartSpecTransformer;
     exports.TimelineChart = TimelineChart;
     exports.WordCloud3dChart = WordCloud3dChart;
     exports.WordCloud3dChartSpecTransformer = WordCloud3dChartSpecTransformer;
@@ -10184,7 +7972,6 @@
     exports.appendSeriesBreakConfig = appendSeriesBreakConfig;
     exports.appendSeriesLabelConfig = appendSeriesLabelConfig;
     exports.clearSVGSource = clearSVGSource;
-    exports.computeStorylineLayout = computeStorylineLayout;
     exports.getBarLinkConfig = getBarLinkConfig;
     exports.getBarRegressionLineConfig = getBarRegressionLineConfig;
     exports.getHistogramRegressionLineConfig = getHistogramRegressionLineConfig;
@@ -10192,8 +7979,6 @@
     exports.getScatterRegressionLineConfig = getScatterRegressionLineConfig;
     exports.getSeriesBreakConfig = getSeriesBreakConfig;
     exports.getSeriesLabelConfig = getSeriesLabelConfig;
-    exports.normalizeLayout = normalizeLayout;
-    exports.normalizePadding = normalizePadding;
     exports.register3DPlugin = register3DPlugin;
     exports.registerAxis3dPlugin = registerAxis3dPlugin;
     exports.registerBar3dChart = registerBar3dChart;
@@ -10225,7 +8010,6 @@
     exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;
-    exports.registerStorylineChart = registerStorylineChart;
     exports.registerTimelineChart = registerTimelineChart;
     exports.registerWordCloud3dChart = registerWordCloud3dChart;
     exports.registerWordCloud3dSeries = registerWordCloud3dSeries;