@visactor/vchart-extension 2.1.0-alpha.13 → 2.1.0-alpha.15

package/build/index.js

@@ -5822,6 +5822,1960 @@
         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 'left-wing':
+                centers = arcCenters(count, inner, block, layout, 250, 110);
+                break;
+            case 'right-wing':
+                centers = arcCenters(count, inner, block, layout, -70, 70);
+                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 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' }, (_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_WIDTH_RATIO = 0.32;
+    const DOME_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
+    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 w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * DOME_CENTER_IMAGE_WIDTH_RATIO, 80);
+        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * DOME_CENTER_IMAGE_HEIGHT_RATIO, 60);
+        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' }, (_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_WIDTH_RATIO = 0.32;
+    const BOWL_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
+    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 w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * BOWL_CENTER_IMAGE_WIDTH_RATIO, 80);
+        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * BOWL_CENTER_IMAGE_HEIGHT_RATIO, 60);
+        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
+                    }
+                },
+                {
+                    type: 'rect',
+                    name: 'storyline-bowl-center-rect',
+                    interactive: false,
+                    style: {
+                        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,
+                        cornerRadius: 12,
+                        fill: '#ffffff',
+                        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', imageMode: 'cover', imagePosition: 'center' }, (_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)
+        };
+    };
+
+    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 DEFAULT_BOTTOM = 100;
+        const DEFAULT_OTHER = 20;
+        const p = spec.padding;
+        if (p === undefined || p === null) {
+            spec.padding = [DEFAULT_OTHER, DEFAULT_OTHER, DEFAULT_BOTTOM, DEFAULT_OTHER];
+            return;
+        }
+        if (typeof p === 'number') {
+            spec.padding = [p, p, Math.max(p, DEFAULT_BOTTOM), p];
+            return;
+        }
+        if (Array.isArray(p)) {
+            const [t = DEFAULT_OTHER, r = DEFAULT_OTHER, b, l = DEFAULT_OTHER] = p;
+            spec.padding = [t, r, b !== null && b !== void 0 ? b : DEFAULT_BOTTOM, l];
+            return;
+        }
+        if (typeof p === 'object') {
+            spec.padding = {
+                top: (_a = p.top) !== null && _a !== void 0 ? _a : DEFAULT_OTHER,
+                right: (_b = p.right) !== null && _b !== void 0 ? _b : DEFAULT_OTHER,
+                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : DEFAULT_BOTTOM,
+                left: (_d = p.left) !== null && _d !== void 0 ? _d : DEFAULT_OTHER
+            };
+        }
+    };
+    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);
+        }
+        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);
+        }
+        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) {
@@ -7961,6 +9915,8 @@
     exports.SequenceScatterPixel = SequenceScatterPixel;
     exports.SeriesBreakComponent = SeriesBreakComponent;
     exports.SeriesLabelComponent = SeriesLabelComponent;
+    exports.StorylineChart = StorylineChart;
+    exports.StorylineChartSpecTransformer = StorylineChartSpecTransformer;
     exports.TimelineChart = TimelineChart;
     exports.WordCloud3dChart = WordCloud3dChart;
     exports.WordCloud3dChartSpecTransformer = WordCloud3dChartSpecTransformer;
@@ -7972,6 +9928,7 @@
     exports.appendSeriesBreakConfig = appendSeriesBreakConfig;
     exports.appendSeriesLabelConfig = appendSeriesLabelConfig;
     exports.clearSVGSource = clearSVGSource;
+    exports.computeStorylineLayout = computeStorylineLayout;
     exports.getBarLinkConfig = getBarLinkConfig;
     exports.getBarRegressionLineConfig = getBarRegressionLineConfig;
     exports.getHistogramRegressionLineConfig = getHistogramRegressionLineConfig;
@@ -7979,6 +9936,8 @@
     exports.getScatterRegressionLineConfig = getScatterRegressionLineConfig;
     exports.getSeriesBreakConfig = getSeriesBreakConfig;
     exports.getSeriesLabelConfig = getSeriesLabelConfig;
+    exports.normalizeLayout = normalizeLayout;
+    exports.normalizePadding = normalizePadding;
     exports.register3DPlugin = register3DPlugin;
     exports.registerAxis3dPlugin = registerAxis3dPlugin;
     exports.registerBar3dChart = registerBar3dChart;
@@ -8010,6 +9969,7 @@
     exports.registerSequenceScatterPixel = registerSequenceScatterPixel;
     exports.registerSeriesBreak = registerSeriesBreak;
     exports.registerSeriesLabel = registerSeriesLabel;
+    exports.registerStorylineChart = registerStorylineChart;
     exports.registerTimelineChart = registerTimelineChart;
     exports.registerWordCloud3dChart = registerWordCloud3dChart;
     exports.registerWordCloud3dSeries = registerWordCloud3dSeries;