@visactor/vchart-extension 2.1.0-alpha.19 → 2.1.0-alpha.20

package/build/index.js

@@ -5825,7 +5825,7 @@
     const DEFAULT_LAYOUT = 'landscape';
     const DEFAULT_PADDING = 24;
     const normalizePadding = (padding) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (Array.isArray(padding)) {
             return {
                 top: (_a = padding[0]) !== null && _a !== void 0 ? _a : 0,
@@ -5834,7 +5834,15 @@
                 left: (_d = padding[3]) !== null && _d !== void 0 ? _d : 0
             };
         }
-        const value = padding !== null && padding !== void 0 ? padding : DEFAULT_PADDING;
+        if (padding && typeof padding === 'object' && 'top' in padding) {
+            return {
+                top: (_e = padding.top) !== null && _e !== void 0 ? _e : 0,
+                right: (_f = padding.right) !== null && _f !== void 0 ? _f : 0,
+                bottom: (_g = padding.bottom) !== null && _g !== void 0 ? _g : 0,
+                left: (_h = padding.left) !== null && _h !== void 0 ? _h : 0
+            };
+        }
+        const value = (_j = padding) !== null && _j !== void 0 ? _j : DEFAULT_PADDING;
         return { top: value, right: value, bottom: value, left: value };
     };
     const normalizeLayout = (layout) => {
@@ -6114,27 +6122,27 @@
         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 getRegionGeometry = (ctx, spec) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         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);
+        const width = Math.max((_o = (_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 : spec === null || spec === void 0 ? void 0 : spec.width) !== null && _o !== void 0 ? _o : 0, 1);
+        const height = Math.max((_t = (_s = (_q = (_p = regionRect === null || regionRect === void 0 ? void 0 : regionRect.height) !== null && _p !== void 0 ? _p : chartRect === null || chartRect === void 0 ? void 0 : chartRect.height) !== null && _q !== void 0 ? _q : (_r = bounds === null || bounds === void 0 ? void 0 : bounds.height) === null || _r === void 0 ? void 0 : _r.call(bounds)) !== null && _s !== void 0 ? _s : spec === null || spec === void 0 ? void 0 : spec.height) !== null && _t !== void 0 ? _t : 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
+            startX: (_u = regionStart === null || regionStart === void 0 ? void 0 : regionStart.x) !== null && _u !== void 0 ? _u : 0,
+            startY: (_v = regionStart === null || regionStart === void 0 ? void 0 : regionStart.y) !== null && _v !== void 0 ? _v : 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);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const { width, height, startX, startY } = getRegionGeometry(ctx, spec);
         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;
+        let blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : (isLandscape(spec) ? 320 : 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) {
@@ -6150,21 +6158,21 @@
         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 padding = normalizePadding((_l = (_k = spec.layout) === null || _k === void 0 ? void 0 : _k.padding) !== null && _l !== void 0 ? _l : (_m = spec.block) === null || _m === void 0 ? void 0 : _m.padding);
                 const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-                blockHeight = Math.max(DEFAULT_BLOCK_HEIGHT, Math.floor(innerHeight / count));
+                blockHeight = Math.max(120, Math.floor(innerHeight / (count + 1)));
             }
         }
-        const result = computeStorylineLayout((_l = spec.data) !== null && _l !== void 0 ? _l : [], {
+        const result = computeStorylineLayout((_o = spec.data) !== null && _o !== void 0 ? _o : [], {
             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
+            gap: (_q = (_p = spec.block) === null || _p === void 0 ? void 0 : _p.gap) !== null && _q !== void 0 ? _q : DEFAULT_BLOCK_GAP,
+            padding: (_r = spec.block) === null || _r === void 0 ? void 0 : _r.padding,
+            lineDistance: (_s = spec.line) === null || _s === void 0 ? void 0 : _s.distance
         });
         if (!startX && !startY) {
             return result;
@@ -6174,11 +6182,12 @@
                     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';
+    const buildRichContent = (contentText, spec, overrides) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const fontSize = Number((_d = (_a = overrides === null || overrides === void 0 ? void 0 : overrides.fontSize) !== null && _a !== void 0 ? _a : (_c = (_b = spec.content) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fontSize) !== null && _d !== void 0 ? _d : 18);
+        const lineHeight = Number((_h = (_e = overrides === null || overrides === void 0 ? void 0 : overrides.lineHeight) !== null && _e !== void 0 ? _e : (_g = (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.lineHeight) !== null && _h !== void 0 ? _h : 26);
+        const fill = (_m = (_j = overrides === null || overrides === void 0 ? void 0 : overrides.fill) !== null && _j !== void 0 ? _j : (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fill) !== null && _m !== void 0 ? _m : '#596173';
+        const align = (_o = overrides === null || overrides === void 0 ? void 0 : overrides.align) !== null && _o !== void 0 ? _o : 'left';
         return {
             type: 'rich',
             text: contentText.reduce((result, paragraph, index) => {
@@ -6187,7 +6196,8 @@
                     text: `${paragraph}${suffix}`,
                     fontSize,
                     lineHeight,
-                    fill
+                    fill,
+                    align
                 });
                 return result;
             }, [])
@@ -6280,20 +6290,20 @@
         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_CENTER_RADIUS_RATIO = 0.6;
+    const CLOCK_CENTER_IMAGE_INSET_RATIO = 0.9;
+    const CLOCK_ORBIT_RATIO = 0.68;
+    const CLOCK_DOT_RATIO = 0.68;
+    const CLOCK_TEXT_INNER_RATIO = 0.92;
+    const CLOCK_TEXT_MAX_WIDTH = 280;
+    const CLOCK_DOT_DIAMETER_RATIO = 0.32;
     const CLOCK_LEAD_LINE_GAP = 6;
     const CLOCK_TEXT_GAP_FROM_LEAD = 8;
     const CLOCK_ORBIT_DASH = [4, 4];
-    const CLOCK_TITLE_FONT_SIZE = 18;
-    const CLOCK_TITLE_LINE_HEIGHT = 24;
-    const CLOCK_CONTENT_FONT_SIZE = 11;
-    const CLOCK_CONTENT_LINE_HEIGHT = 15;
+    const CLOCK_TITLE_FONT_SIZE = 22;
+    const CLOCK_TITLE_LINE_HEIGHT = 28;
+    const CLOCK_CONTENT_FONT_SIZE = 16;
+    const CLOCK_CONTENT_LINE_HEIGHT = 22;
     const getClockGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
@@ -6302,7 +6312,11 @@
         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 textReserveX = CLOCK_TEXT_MAX_WIDTH;
+        const textReserveY = 4 + CLOCK_CONTENT_LINE_HEIGHT * 4;
+        const rMaxX = (innerWidth / 2 - textReserveX) / CLOCK_TEXT_INNER_RATIO;
+        const rMaxY = (innerHeight / 2 - textReserveY) / CLOCK_TEXT_INNER_RATIO;
+        const R = Math.max(Math.min(rMaxX, rMaxY), 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 };
@@ -6352,7 +6366,7 @@
                             }, 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, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                            }, 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, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, anchor: (_d, ctx) => {
                                 const g = getClockGeometry(spec, ctx);
                                 return [g.cx, g.cy];
                             }, dx: (_d, ctx) => {
@@ -6493,7 +6507,8 @@
                         repeatX: 'no-repeat',
                         repeatY: 'no-repeat',
                         imageMode: 'cover',
-                        imagePosition: 'center'
+                        imagePosition: 'center',
+                        cornerRadius: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter / 2
                     }
                 }
                 : {
@@ -6579,7 +6594,7 @@
         };
     };
     const buildDefaultBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         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 : 18);
@@ -6596,20 +6611,26 @@
                 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)
-                },
+                ((_h = spec.block) === null || _h === void 0 ? void 0 : _h.showBackground) === true
+                    ? {
+                        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)' }, (_j = spec.block) === null || _j === void 0 ? void 0 : _j.style)
+                    }
+                    : null,
                 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 }, (_j = spec.image) === null || _j === void 0 ? void 0 : _j.style) })
+                    ? 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 }, (_k = spec.image) === null || _k === void 0 ? void 0 : _k.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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_k = spec.title) === null || _k === void 0 ? void 0 : _k.style) })
+                    ? 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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_l = spec.title) === null || _l === void 0 ? void 0 : _l.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) })
+                    ? 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, {
+                                fontSize: 18,
+                                lineHeight: 26,
+                                fill: '#596173'
+                            }), maxLineWidth: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_datum, ctx) => getDefaultBlockMetrics(spec, ctx, index).contentBox.height, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_m = spec.content) === null || _m === void 0 ? void 0 : _m.style) })
                     : null
             ].filter(Boolean)
         };
@@ -6659,10 +6680,10 @@
     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_CONTENT_LINES = 10;
+    const LANDSCAPE_TITLE_LINE_HEIGHT = 34;
+    const LANDSCAPE_CONTENT_LINE_HEIGHT = 26;
+    const LANDSCAPE_CONTENT_FONT_SIZE = 18;
     const LANDSCAPE_TITLE_TO_CONTENT_GAP = 4;
     const getLandscapeImageCenter = (spec, ctx, index) => {
         var _a, _b, _c, _e;
@@ -6732,13 +6753,16 @@
     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 : 18);
+        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 : 26);
         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 canvasHeight = spec.height;
+        const contentHeight = canvasHeight
+            ? Math.max(contentLineHeight * 2, Math.round(canvasHeight / 4))
+            : LANDSCAPE_CONTENT_LINES * contentLineHeight;
         const titleToContentGap = LANDSCAPE_TITLE_TO_CONTENT_GAP;
         const textHeight = titleLineHeight + titleToContentGap + contentHeight;
         const textOnTop = index % 2 === 0;
@@ -6807,7 +6831,7 @@
         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 : 18);
+        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 : 26);
         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;
@@ -6839,7 +6863,7 @@
                     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;
+                    const stagger = m.textOnTop ? blockH * 0.1 : -blockH * 0.1;
                     return cy - m.imageBox.height / 2 + stagger;
                 },
                 width: (_d, ctx) => getMetrics(ctx).blockWidth,
@@ -6882,25 +6906,32 @@
                     ? 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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', 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) })
+                    ? 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,
+                                fill: '#596173'
+                            }), 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_WIDTH = 96;
     const PORTRAIT_AXIS_PADDING = 50;
-    const PORTRAIT_IMAGE_WIDTH = 180;
-    const PORTRAIT_IMAGE_HEIGHT = 110;
+    const PORTRAIT_MARKER_FONT_SIZE = 40;
+    const PORTRAIT_MARKER_LINE_HEIGHT = 28;
+    const PORTRAIT_MARKER_AXIS_PADDING = 6;
+    const PORTRAIT_IMAGE_HEIGHT_RATIO = 0.6;
+    const PORTRAIT_CONTENT_HEIGHT_RATIO = 1;
     const PORTRAIT_IMAGE_GAP_FROM_AXIS = 24;
     const PORTRAIT_SHADOW_OFFSET_X = 24;
     const PORTRAIT_SHADOW_OFFSET_Y = 16;
     const PORTRAIT_SHADOW_SCALE = 1;
     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_LINE_HEIGHT = 34;
+    const PORTRAIT_CONTENT_LINE_HEIGHT = 26;
+    const PORTRAIT_CONTENT_FONT_SIZE = 18;
     const PORTRAIT_TITLE_TO_CONTENT_GAP = 4;
     const getPortraitAxisRect = (spec, ctx) => {
         const blocks = getLayout(spec, ctx).blocks;
@@ -6920,7 +6951,7 @@
         };
     };
     const buildPortraitAxisMark = (spec) => {
-        var _a, _b, _c, _e, _f, _g;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         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 = {
@@ -6934,6 +6965,43 @@
                 { offset: 1, color: withAlpha(themeColor, 1) }
             ]
         };
+        const markerFontSize = Number((_f = (_e = (_c = spec.marker) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.fontSize) !== null && _f !== void 0 ? _f : PORTRAIT_MARKER_FONT_SIZE);
+        const markerLineHeight = Number((_j = (_h = (_g = spec.marker) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.lineHeight) !== null && _j !== void 0 ? _j : PORTRAIT_MARKER_LINE_HEIGHT);
+        const markerVisible = ((_k = spec.marker) === null || _k === void 0 ? void 0 : _k.visible) !== false;
+        const markerMarks = markerVisible
+            ? ((_l = spec.data) !== null && _l !== void 0 ? _l : [])
+                .map((block, index) => {
+                var _a;
+                if (!block.marker) {
+                    return null;
+                }
+                const onLeft = index % 2 === 0;
+                const axisHalf = PORTRAIT_AXIS_WIDTH / 2;
+                const markerOffsetX = onLeft
+                    ? -axisHalf + PORTRAIT_MARKER_AXIS_PADDING
+                    : axisHalf - PORTRAIT_MARKER_AXIS_PADDING;
+                const markerTextAlign = onLeft ? 'left' : 'right';
+                return Object.assign(Object.assign({ type: 'text', textType: 'rich', name: `storyline-portrait-marker-${index}`, interactive: false }, spec.marker), { style: Object.assign({ 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) + markerOffsetX;
+                        }, 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;
+                        }, text: {
+                            type: 'rich',
+                            text: block.marker.split('').map((char, i, arr) => ({
+                                text: char + (i < arr.length - 1 ? '\n' : ''),
+                                fontSize: markerFontSize,
+                                lineHeight: markerLineHeight,
+                                fill: '#fff',
+                                align: markerTextAlign
+                            }))
+                        }, fontWeight: 'bold', lineJoin: 'round', shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 8, shadowOffsetX: 0, shadowOffsetY: 5, textAlign: markerTextAlign, textBaseline: 'middle' }, (_a = spec.marker) === null || _a === void 0 ? void 0 : _a.style) });
+            })
+                .filter(Boolean)
+            : [];
         return {
             type: 'group',
             name: 'storyline-portrait-axis',
@@ -6944,30 +7012,31 @@
                     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,
+                        fill: (_m = lineStyle.fill) !== null && _m !== void 0 ? _m : defaultFill,
+                        stroke: (_o = lineStyle.stroke) !== null && _o !== void 0 ? _o : false,
+                        lineWidth: (_p = lineStyle.lineWidth) !== null && _p !== void 0 ? _p : 0,
+                        cornerRadius: (_q = lineStyle.cornerRadius) !== null && _q !== void 0 ? _q : 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
                     }
-                }
+                },
+                ...markerMarks
             ]
         };
     };
     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 : 18);
+        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 : 26);
         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 titleToContentGap = PORTRAIT_TITLE_TO_CONTENT_GAP;
-        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 imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : Math.max(blockWidth, 80);
+        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : Math.round(blockHeight * PORTRAIT_IMAGE_HEIGHT_RATIO);
         const minContentHeight = PORTRAIT_CONTENT_LINES * contentLineHeight;
-        const contentHeight = Math.max(minContentHeight, blockHeight - imageHeight / 2 - PORTRAIT_TEXT_GAP_FROM_IMAGE - titleLineHeight - titleToContentGap);
+        const contentHeight = Math.max(minContentHeight, Math.round(blockHeight * PORTRAIT_CONTENT_HEIGHT_RATIO));
         const textHeight = titleLineHeight + titleToContentGap + contentHeight;
         const onLeft = index % 2 === 0;
         const axisHalf = PORTRAIT_AXIS_WIDTH / 2;
@@ -7014,9 +7083,8 @@
         const hasImage = !!block.image;
         const hasSubImage = !!block.subImage;
         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 : 18);
+        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 : 26);
         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 showBackground = ((_h = spec.image) === null || _h === void 0 ? void 0 : _h.showBackground) === true;
         const getMetrics = (ctx) => {
             var _a, _b, _c, _e;
             const lb = getLayout(spec, ctx).blocks[index];
@@ -7025,10 +7093,10 @@
             return getPortraitMetrics(spec, w, h, index);
         };
         const themeColor = getThemeColor(spec);
-        const blockStyle = (_k = (_j = spec.block) === null || _j === void 0 ? void 0 : _j.style) !== null && _k !== void 0 ? _k : {};
+        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-${(_l = block.id) !== null && _l !== void 0 ? _l : index}`,
+            id: `storyline-block-${(_k = block.id) !== null && _k !== void 0 ? _k : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7044,7 +7112,7 @@
                 }
             },
             children: [
-                hasSubImage && showBackground
+                hasSubImage
                     ? {
                         type: 'image',
                         name: `storyline-block-shadow-image-${index}`,
@@ -7062,12 +7130,14 @@
                         }
                     }
                     : 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)
-                },
+                ((_l = spec.image) === null || _l === void 0 ? void 0 : _l.showBackground) === true
+                    ? {
+                        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)
+                    }
+                    : null,
                 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, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_m = spec.image) === null || _m === void 0 ? void 0 : _m.style) })
                     : null,
@@ -7075,53 +7145,55 @@
                     ? 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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_o = spec.title) === null || _o === void 0 ? void 0 : _o.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' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style) })
+                    ? 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,
+                                fill: '#596173'
+                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style) })
                     : null
             ].filter(Boolean)
         };
     };
 
-    const ARC_BLOCK_IMAGE_SIZE = 140;
+    const ARC_BLOCK_IMAGE_SIZE = 240;
+    const ARC_BLOCK_IMAGE_BORDER = 3;
+    const ARC_BLOCK_IMAGE_HALO_PADDING = 6;
     const ARC_TEXT_GAP_FROM_IMAGE = 10;
-    const ARC_TITLE_LINE_HEIGHT = 19;
-    const ARC_CONTENT_LINE_HEIGHT = 17;
-    const ARC_CONTENT_FONT_SIZE = 12;
+    const ARC_TITLE_FONT_SIZE = 32;
+    const ARC_TITLE_LINE_HEIGHT = 34;
+    const ARC_CONTENT_LINE_HEIGHT = 26;
+    const ARC_CONTENT_FONT_SIZE = 20;
     const ARC_TEXT_BOX_HEIGHT = 240;
     const ARC_TITLE_TO_CONTENT_GAP = 4;
-    const ARC_TEXT_LEFT_PADDING = 20;
-    const ARC_TEXT_BOX_MIN_WIDTH = 200;
-    const ARC_CENTER_IMAGE_SIZE_RATIO = 0.4;
+    const ARC_TEXT_PADDING = 20;
+    const ARC_TEXT_BOX_MIN_WIDTH = 240;
+    const ARC_CENTER_IMAGE_SIZE_RATIO = 0.55;
+    const ARC_CENTER_IMAGE_TO_SYMBOL_RATIO = 0.8;
     const ARC_GAP_FROM_CENTER_IMAGE = 200;
     const isDownArc = (spec) => normalizeLayout(spec.layout).direction === 'down';
     const getArcCenterImageRect = (spec, ctx) => {
-        var _a, _b, _c, _e, _f;
+        var _a, _b, _c, _e;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
-        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
-        const innerWidth = Math.max(width - padding.left - padding.right, 1);
-        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
+        const innerWidth = Math.max(width, 1);
+        const innerHeight = Math.max(height, 1);
         const baseSize = Math.min(innerWidth, innerHeight) * ARC_CENTER_IMAGE_SIZE_RATIO;
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
-        const cx = startX + padding.left + innerWidth / 2;
+        const w = Math.max((_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : baseSize, 80);
+        const h = Math.max((_e = (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.height) !== null && _e !== void 0 ? _e : baseSize, 80);
+        const cx = startX + innerWidth / 2;
         const isDown = isDownArc(spec);
-        const top = isDown
-            ?
-                startY + padding.top
-            :
-                startY + padding.top + innerHeight - h;
+        const top = isDown ? startY : startY + innerHeight - h;
         return { x: cx - w / 2, y: top, width: w, height: h };
     };
     const getArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
+        var _a, _b, _c;
         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 innerWidth = Math.max(width, 1);
         const blockWidth = resolveBlockWidth(spec, width);
         const layoutOpt = normalizeLayout(spec.layout);
         const isDown = layoutOpt.direction === 'down';
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : (isDown ? 20 : 200);
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : (isDown ? 160 : 340);
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.88;
+        const startAngle = (_a = layoutOpt.startAngle) !== null && _a !== void 0 ? _a : (isDown ? 20 : 200);
+        const endAngle = (_b = layoutOpt.endAngle) !== null && _b !== void 0 ? _b : (isDown ? 160 : 340);
+        const ratio = (_c = layoutOpt.radiusRatio) !== null && _c !== void 0 ? _c : 0.88;
         const rx = Math.max((innerWidth - blockWidth) / 2, 1) * ratio;
         const centerRect = getArcCenterImageRect(spec, ctx);
         const centerTop = centerRect.y;
@@ -7140,7 +7212,7 @@
             cy = centerBottom - ry * sinStart;
         }
         return {
-            cx: startX + blockPadding.left + innerWidth / 2,
+            cx: startX + innerWidth / 2,
             cy,
             rx,
             ry,
@@ -7249,56 +7321,93 @@
                         },
                         size: (_d, ctx) => {
                             const r = getArcCenterImageRect(spec, ctx);
-                            return Math.max(r.width, r.height) * 1.1;
+                            return Math.max(r.width, r.height);
                         },
                         symbolType: 'circle',
-                        fill: symbolGradient,
+                        fill: hasImage ? symbolGradient : '#ffffff',
                         stroke: themeColor,
                         lineWidth: 2
                     }
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-arc-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getArcCenterImageRect(spec, ctx).x, y: (_d, ctx) => getArcCenterImageRect(spec, ctx).y, width: (_d, ctx) => getArcCenterImageRect(spec, ctx).width, height: (_d, ctx) => getArcCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-arc-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => {
+                                var _a, _b;
                                 const r = getArcCenterImageRect(spec, ctx);
-                                return [r.x + r.width / 2, r.y + r.height / 2];
-                            }, dx: (_d, ctx) => {
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number'
+                                    ? userWidth
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                                return r.x + (r.width - w) / 2;
+                            }, y: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getArcCenterImageRect(spec, ctx);
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number'
+                                    ? userHeight
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                                return r.y + (r.height - h) / 2;
+                            }, width: (_d, ctx) => {
                                 var _a, _b;
                                 const r = getArcCenterImageRect(spec, ctx);
                                 const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
-                                const w = typeof userWidth === 'number' ? userWidth : r.width;
-                                return (r.width - w) / 2;
-                            }, dy: (_d, ctx) => {
+                                return typeof userWidth === 'number'
+                                    ? userWidth
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                            }, height: (_d, ctx) => {
                                 var _a, _b;
                                 const r = getArcCenterImageRect(spec, ctx);
                                 const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
-                                const h = typeof userHeight === 'number' ? userHeight : r.height;
-                                return (r.height - h) / 2;
+                                return typeof userHeight === 'number'
+                                    ? userHeight
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                            }, cornerRadius: (_d, ctx) => {
+                                var _a, _b, _c, _e;
+                                const r = getArcCenterImageRect(spec, ctx);
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const userHeight = (_e = (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.style) === null || _e === void 0 ? void 0 : _e.height;
+                                const w = typeof userWidth === 'number'
+                                    ? userWidth
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                                const h = typeof userHeight === 'number'
+                                    ? userHeight
+                                    : Math.max(r.width, r.height) * ARC_CENTER_IMAGE_TO_SYMBOL_RATIO;
+                                return Math.max(w, h) / 2;
+                            }, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const r = getArcCenterImageRect(spec, ctx);
+                                return [r.x + r.width / 2, r.y + r.height / 2];
                             } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
     };
-    const getArcBlockMetrics = (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 : 18);
+    const getArcBlockMetrics = (spec, index = 0) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        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 : ARC_TITLE_FONT_SIZE);
         const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(ARC_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 : ARC_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 : ARC_CONTENT_LINE_HEIGHT);
         const titleToContentGap = ARC_TITLE_TO_CONTENT_GAP;
         const textHeight = ARC_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 : ARC_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : ARC_BLOCK_IMAGE_SIZE;
+        const imageDiameter = Math.max((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : ARC_BLOCK_IMAGE_SIZE, (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : ARC_BLOCK_IMAGE_SIZE);
+        const imageWidth = imageDiameter;
+        const imageHeight = imageDiameter;
         const isDown = isDownArc(spec);
+        const count = Math.max((_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 0, 1);
+        const canvasWidth = Number((_v = spec.width) !== null && _v !== void 0 ? _v : imageWidth * count);
+        const defaultTextWidth = Math.round(canvasWidth / (count + 1));
+        const textBoxWidth = Math.max(Number((_x = (_w = spec.block) === null || _w === void 0 ? void 0 : _w.width) !== null && _x !== void 0 ? _x : defaultTextWidth), ARC_TEXT_BOX_MIN_WIDTH);
+        const isLeftSide = index < count / 2;
+        const textAlign = isLeftSide ? 'right' : 'left';
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
             width: imageWidth,
             height: imageHeight
         };
-        const textBoxWidth = Math.max(imageWidth - ARC_TEXT_LEFT_PADDING, ARC_TEXT_BOX_MIN_WIDTH);
+        const textBoxX = isLeftSide ? -ARC_TEXT_PADDING : ARC_TEXT_PADDING;
         const textBox = {
-            x: -imageWidth / 2 + ARC_TEXT_LEFT_PADDING,
+            x: textBoxX,
             y: isDown ? imageBox.y + imageHeight + ARC_TEXT_GAP_FROM_IMAGE : imageBox.y - ARC_TEXT_GAP_FROM_IMAGE - textHeight,
             width: textBoxWidth,
             height: textHeight
@@ -7317,19 +7426,21 @@
             imageBox,
             textBox,
             contentBox,
-            isDown
+            isDown,
+            textAlign
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e;
+        var _a, _b, _c, _e, _f;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const metrics = getArcBlockMetrics(spec);
+        const metrics = getArcBlockMetrics(spec, index);
         const connectorY = metrics.isDown ? metrics.imageBox.y + metrics.imageBox.height : metrics.textBox.y;
         const connectorHeight = metrics.isDown
             ? Math.max(metrics.textBox.y + metrics.textBox.height - (metrics.imageBox.y + metrics.imageBox.height), 0)
             : Math.max(metrics.imageBox.y - metrics.textBox.y, 0);
+        const connectorX = -1;
         return {
             type: 'group',
             id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
@@ -7344,8 +7455,9 @@
                     type: 'rect',
                     name: `storyline-block-connector-${index}`,
                     interactive: false,
+                    zIndex: vchart.LayoutZIndex.Mark + 2,
                     style: {
-                        x: metrics.imageBox.x,
+                        x: connectorX,
                         y: connectorY,
                         width: 2,
                         height: connectorHeight,
@@ -7354,34 +7466,55 @@
                     }
                 },
                 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, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 3 }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
                     : {
-                        type: 'rect',
+                        type: 'symbol',
                         name: `storyline-block-image-bg-${index}`,
                         interactive: false,
+                        zIndex: vchart.LayoutZIndex.Mark + 3,
                         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,
+                            x: 0,
+                            y: 0,
+                            size: Math.min(metrics.imageBox.width, metrics.imageBox.height),
+                            symbolType: 'circle',
                             fill: '#ffffff',
                             stroke: themeColor,
                             lineWidth: 2
                         }
                     },
+                ((_c = spec.image) === null || _c === void 0 ? void 0 : _c.showBackground) === true
+                    ? {
+                        type: 'symbol',
+                        name: `storyline-block-image-halo-${index}`,
+                        interactive: false,
+                        zIndex: vchart.LayoutZIndex.Mark + 3,
+                        style: {
+                            x: 0,
+                            y: 0,
+                            size: Math.min(metrics.imageBox.width, metrics.imageBox.height) + ARC_BLOCK_IMAGE_HALO_PADDING * 2,
+                            symbolType: 'circle',
+                            fill: 'transparent',
+                            stroke: themeColor,
+                            lineWidth: ARC_BLOCK_IMAGE_BORDER
+                        }
+                    }
+                    : null,
                 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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 5 }, 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', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.textAlign, textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.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: ARC_CONTENT_FONT_SIZE, lineHeight: ARC_CONTENT_LINE_HEIGHT, textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 4 }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec, {
+                                fontSize: metrics.contentFontSize,
+                                lineHeight: metrics.contentLineHeight,
+                                fill: '#596173',
+                                align: metrics.textAlign
+                            }), textAlign: metrics.textAlign, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
                     : null
             ].filter(Boolean)
         };
     };
 
-    const WING_BLOCK_IMAGE_SIZE = 96;
-    const WING_TEXT_GAP_FROM_IMAGE = 14;
+    const WING_BLOCK_IMAGE_SIZE = 160;
     const WING_TITLE_LINE_HEIGHT = 30;
     const WING_TITLE_FONT_SIZE = 22;
     const WING_CONTENT_LINE_HEIGHT = 17;
@@ -7394,22 +7527,21 @@
         return (_a = normalizeLayout(spec.layout).direction) !== null && _a !== void 0 ? _a : 'left';
     };
     const getWingArcGeometry = (spec, ctx) => {
-        var _a, _b, _c, _e;
+        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 innerWidth = Math.max(width, 1);
+        const innerHeight = Math.max(height, 1);
         const layoutOpt = normalizeLayout(spec.layout);
         const direction = getWingDirection(spec);
         const defaultStart = direction === 'right' ? 110 : -70;
         const defaultEnd = direction === 'right' ? 250 : 70;
-        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : defaultStart;
-        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : defaultEnd;
-        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.92;
+        const startAngle = (_a = layoutOpt.startAngle) !== null && _a !== void 0 ? _a : defaultStart;
+        const endAngle = (_b = layoutOpt.endAngle) !== null && _b !== void 0 ? _b : defaultEnd;
+        const ratio = (_c = layoutOpt.radiusRatio) !== null && _c !== void 0 ? _c : 0.92;
         const ry = (innerHeight / 2) * ratio;
         const rx = innerWidth * 0.6 * ratio;
-        const cx = direction === 'right' ? startX + padding.left + innerWidth - rx * 0.1 : startX + padding.left + rx * 0.1;
-        const cy = startY + padding.top + innerHeight / 2;
+        const cx = direction === 'right' ? startX + innerWidth - rx * 0.1 : startX + rx * 0.1;
+        const cy = startY + innerHeight / 2;
         return { cx, cy, rx, ry, startAngle, endAngle };
     };
     const getWingBlockCenter = (spec, ctx, index) => {
@@ -7426,10 +7558,6 @@
             y: arc.cy + Math.sin(angle) * arc.ry
         };
     };
-    const isTextOnLeft = (spec, index) => {
-        const direction = getWingDirection(spec);
-        return direction === 'right' ? index % 2 === 1 : index % 2 === 0;
-    };
     const buildWingArcMark = (spec) => {
         var _a, _b, _c, _e, _f, _g, _h, _j;
         if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false) {
@@ -7437,8 +7565,8 @@
         }
         const themeColor = getThemeColor(spec);
         const lineStyle = ((_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {});
-        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 2), 0.5);
-        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 18), startWidth);
+        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 50), 0.5);
+        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 350), startWidth);
         return {
             type: 'group',
             name: 'storyline-wing-arc',
@@ -7495,45 +7623,86 @@
             ]
         };
     };
-    const getWingBlockMetrics = (spec, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const WING_TEXT_IMAGE_GAP = 120;
+    const getWingBlockMetrics = (spec, ctx, index) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
         const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : WING_TITLE_FONT_SIZE);
         const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(WING_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.3)));
         const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : WING_CONTENT_FONT_SIZE);
         const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : WING_CONTENT_LINE_HEIGHT);
         const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
         const textHeight = WING_TEXT_BOX_HEIGHT;
-        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
-        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE;
-        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE;
+        const contentHeight = 100000;
+        const imageWidth = Number((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE);
+        const imageHeight = Number((_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
             width: imageWidth,
             height: imageHeight
         };
-        const onLeft = isTextOnLeft(spec, index);
+        const direction = getWingDirection(spec);
+        const count = (_u = (_t = spec.data) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 0;
+        const isSpecialBelow = (direction === 'right' && count > 0 && index === count - 1) || (direction === 'left' && index === 0);
+        const isVerticalLayout = isSpecialBelow;
         const textWidth = WING_TEXT_BOX_WIDTH;
-        const textX = onLeft
-            ? -imageWidth / 2 - WING_TEXT_GAP_FROM_IMAGE - textWidth
-            : imageWidth / 2 + WING_TEXT_GAP_FROM_IMAGE;
-        const textY = -textHeight / 2;
-        const textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
-        const contentBox = {
-            x: textX,
-            y: textY + titleLineHeight + titleToContentGap,
-            width: textWidth,
-            height: contentHeight
-        };
+        let textBox;
+        let contentBox;
+        let connectorBox;
+        let onLeft;
+        let verticalAlign;
+        if (isVerticalLayout) {
+            const textX = -textWidth / 2;
+            const textY = imageHeight / 2 + WING_TEXT_IMAGE_GAP;
+            textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
+            contentBox = {
+                x: textX,
+                y: textY + titleLineHeight + titleToContentGap,
+                width: textWidth,
+                height: contentHeight
+            };
+            connectorBox = {
+                x: -1,
+                y: imageHeight / 2,
+                width: 2,
+                height: WING_TEXT_IMAGE_GAP
+            };
+            onLeft = false;
+            verticalAlign = 'below';
+        }
+        else {
+            const textOnLeft = direction === 'right';
+            const textX = textOnLeft ? -imageWidth / 2 - WING_TEXT_IMAGE_GAP - textWidth : imageWidth / 2 + WING_TEXT_IMAGE_GAP;
+            const textY = -textHeight / 2;
+            textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
+            contentBox = {
+                x: textX,
+                y: textY + titleLineHeight + titleToContentGap,
+                width: textWidth,
+                height: contentHeight
+            };
+            const imageEdgeX = textOnLeft ? -imageWidth / 2 : imageWidth / 2;
+            const textEdgeX = textOnLeft ? textX + textWidth : textX;
+            connectorBox = {
+                x: Math.min(imageEdgeX, textEdgeX),
+                y: 0,
+                width: Math.abs(textEdgeX - imageEdgeX),
+                height: 2
+            };
+            onLeft = textOnLeft;
+            verticalAlign = null;
+        }
         return {
             onLeft,
+            verticalAlign,
             titleFontSize,
             titleLineHeight,
             contentFontSize,
             contentLineHeight,
             imageBox,
             textBox,
-            contentBox
+            contentBox,
+            connectorBox
         };
     };
     const buildWingBlockMark = (spec, block, index) => {
@@ -7541,7 +7710,6 @@
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const metrics = getWingBlockMetrics(spec, index);
         const showBackground = ((_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
         return {
             type: 'group',
@@ -7553,6 +7721,20 @@
                 y: (_d, ctx) => getWingBlockCenter(spec, ctx, index).y
             },
             children: [
+                {
+                    type: 'rect',
+                    name: `storyline-block-connector-${index}`,
+                    interactive: false,
+                    zIndex: vchart.LayoutZIndex.Mark + 2,
+                    style: {
+                        x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).connectorBox.x,
+                        y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).connectorBox.y,
+                        width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).connectorBox.width,
+                        height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).connectorBox.height,
+                        fill: themeColor,
+                        opacity: 0.6
+                    }
+                },
                 showBackground
                     ? {
                         type: 'symbol',
@@ -7561,7 +7743,7 @@
                         style: {
                             x: 0,
                             y: 0,
-                            size: Math.max(metrics.imageBox.width, metrics.imageBox.height) + 12,
+                            size: (_d, ctx) => Math.max(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) + 12,
                             symbolType: 'circle',
                             fill: withAlpha(themeColor, 0.18),
                             stroke: themeColor,
@@ -7570,27 +7752,51 @@
                     }
                     : null,
                 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, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_c = spec.image) === null || _c === void 0 ? void 0 : _c.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2, image: block.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_c = spec.image) === null || _c === void 0 ? void 0 : _c.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,
+                            x: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.x,
+                            y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.y,
+                            width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.width,
+                            height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).imageBox.height,
+                            cornerRadius: (_d, ctx) => Math.min(getWingBlockMetrics(spec, ctx, index).imageBox.width, getWingBlockMetrics(spec, ctx, index).imageBox.height) / 2,
                             fill: '#ffffff',
                             stroke: themeColor,
                             lineWidth: 2
                         }
                     },
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: metrics.onLeft ? metrics.textBox.x + metrics.textBox.width : metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: (_d, ctx) => {
+                                const m = getWingBlockMetrics(spec, ctx, index);
+                                if (m.verticalAlign) {
+                                    return m.textBox.x + m.textBox.width / 2;
+                                }
+                                return m.onLeft ? m.textBox.x + m.textBox.width : m.textBox.x;
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight, fontWeight: 'bold', fill: themeColor, stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: (_d, ctx) => {
+                                const m = getWingBlockMetrics(spec, ctx, index);
+                                if (m.verticalAlign) {
+                                    return 'center';
+                                }
+                                return m.onLeft ? 'right' : 'left';
+                            }, textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
                     : null,
                 contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.onLeft ? metrics.contentBox.x + metrics.contentBox.width : metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: WING_CONTENT_FONT_SIZE, lineHeight: WING_CONTENT_LINE_HEIGHT, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => {
+                                const m = getWingBlockMetrics(spec, ctx, index);
+                                if (m.verticalAlign) {
+                                    return m.contentBox.x + m.contentBox.width / 2;
+                                }
+                                return m.onLeft ? m.contentBox.x + m.contentBox.width : m.contentBox.x;
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.width, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentBox.height, text: buildRichContent(contentText, spec), fontSize: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentFontSize, lineHeight: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).contentLineHeight, textAlign: (_d, ctx) => {
+                                const m = getWingBlockMetrics(spec, ctx, index);
+                                if (m.verticalAlign) {
+                                    return 'center';
+                                }
+                                return m.onLeft ? 'right' : 'left';
+                            }, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7601,11 +7807,11 @@
     const LADDER_HEADLINE_FONT_MAX = 240;
     const LADDER_DIAGONAL_LINE_WIDTH = 2;
     const LADDER_DIAGONAL_DASH = [12, 8];
-    const LADDER_BLOCK_IMAGE_SIZE = 96;
+    const LADDER_BLOCK_IMAGE_SIZE = 100;
     const LADDER_TITLE_FONT_SIZE = 28;
-    const LADDER_TITLE_LINE_HEIGHT = 36;
-    const LADDER_CONTENT_FONT_SIZE = 16;
-    const LADDER_CONTENT_LINE_HEIGHT = 24;
+    const LADDER_TITLE_LINE_HEIGHT = 26;
+    const LADDER_CONTENT_FONT_SIZE = 18;
+    const LADDER_CONTENT_LINE_HEIGHT = 26;
     const isDownLadder = (spec) => normalizeLayout(spec.layout).direction === 'down';
     const getLadderDiagonalGeometry = (spec, ctx) => {
         var _a;
@@ -7768,7 +7974,11 @@
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textBaseline: 'top' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style), { textAlign: align }) })
                     : null,
                 contentText.length
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, fontSize: LADDER_CONTENT_FONT_SIZE, lineHeight: LADDER_CONTENT_LINE_HEIGHT, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style), { textAlign: align }) })
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign(Object.assign({ x: (_d, ctx) => getTitleX(ctx), y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, text: buildRichContent(contentText, spec, {
+                                fontSize: LADDER_CONTENT_FONT_SIZE,
+                                lineHeight: LADDER_CONTENT_LINE_HEIGHT,
+                                align: align
+                            }), maxLineWidth: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).textBox.width, heightLimit: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).contentBox.height, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style), { textAlign: align }) })
                     : null
             ].filter(Boolean)
         };
@@ -7794,12 +8004,33 @@
         const LARGE = 100;
         const SMALL = 20;
         const TEXT_RESERVE = 280;
-        const PORTRAIT_BOTTOM_RESERVE = 160;
         const arc = isArc(spec);
         const arcDown = arc && normalizeLayout(spec.layout).direction === 'down';
         const arcUp = arc && !arcDown;
         const portrait = isPortrait(spec);
         const ladder = isLadder(spec);
+        const wing = isWing(spec);
+        const clock = isClock(spec);
+        const portraitBottomReserve = (() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            if (!portrait) {
+                return 0;
+            }
+            const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+            const canvasHeight = spec.height;
+            if (!count || !canvasHeight) {
+                return LARGE;
+            }
+            const slotHeight = canvasHeight / (count + 1);
+            const imageHeight = (_d = (_c = spec.image) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : slotHeight * PORTRAIT_IMAGE_HEIGHT_RATIO;
+            const contentHeight = slotHeight * PORTRAIT_CONTENT_HEIGHT_RATIO;
+            const titleFontSize = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fontSize) !== null && _g !== void 0 ? _g : 26);
+            const titleLineHeight = Number((_k = (_j = (_h = spec.title) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : Math.round(titleFontSize * 1.35));
+            const textGap = 8;
+            const titleToContentGap = 4;
+            const breath = 16;
+            return Math.max(LARGE, Math.round(imageHeight / 2 + textGap + titleLineHeight + titleToContentGap + contentHeight + breath));
+        })();
         const ladderHorizontalPadding = (() => {
             var _a, _b, _c, _d, _e, _f;
             if (!ladder) {
@@ -7810,42 +8041,53 @@
             const imageGap = (_f = (_e = spec.image) === null || _e === void 0 ? void 0 : _e.gap) !== null && _f !== void 0 ? _f : DEFAULT_IMAGE_GAP;
             const innerPadding = 12 * 2;
             const contentWidth = Math.max(blockWidth - imageWidth - imageGap - innerPadding, DEFAULT_BLOCK_WIDTH * 0.5);
-            return Math.round(contentWidth * 2);
+            const ideal = Math.round(contentWidth * 2);
+            const canvasWidth = spec.width;
+            const cap = canvasWidth ? Math.floor(canvasWidth * 0.3) : ideal;
+            return Math.min(ideal, cap);
         })();
         const ladderVerticalPadding = (() => {
             var _a, _b;
             if (!ladder) {
                 return 0;
             }
-            const blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : DEFAULT_BLOCK_HEIGHT;
-            const chartHeight = spec.height;
-            const heightCap = typeof chartHeight === 'number' && chartHeight > 0 ? Math.max(SMALL, Math.round(chartHeight * 0.18)) : Infinity;
-            return Math.round(Math.min(blockHeight * 3, heightCap));
+            const blockHeight = (_b = (_a = spec.block) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 132;
+            const ideal = Math.round(blockHeight * 3);
+            const canvasHeight = spec.height;
+            const cap = canvasHeight ? Math.floor(canvasHeight * 0.3) : ideal;
+            return Math.min(ideal, cap);
         })();
-        const defaultTop = ladder ? ladderVerticalPadding : arcDown ? LARGE : arcUp ? TEXT_RESERVE : SMALL;
-        const defaultBottom = ladder
-            ? ladderVerticalPadding
-            : arcDown
-                ? TEXT_RESERVE
-                : portrait
-                    ? PORTRAIT_BOTTOM_RESERVE
-                    : LARGE;
-        const defaultLeft = ladder ? ladderHorizontalPadding : SMALL;
-        const defaultRight = ladder ? ladderHorizontalPadding : SMALL;
+        const defaultTop = clock ? 40 : ladder ? ladderVerticalPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL;
+        const defaultBottom = clock
+            ? 60
+            : portrait
+                ? portraitBottomReserve
+                : wing
+                    ? 300
+                    : arcUp
+                        ? 0
+                        : arcDown
+                            ? TEXT_RESERVE
+                            : LARGE;
+        const arcHorizontalPadding = (() => {
+            var _a, _b;
+            if (!arc) {
+                return SMALL;
+            }
+            const count = Math.max((_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0, 1);
+            const canvasWidth = spec.width;
+            if (!canvasWidth) {
+                return SMALL;
+            }
+            return Math.round(canvasWidth / (count + 1));
+        })();
+        const defaultLeft = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;
+        const defaultRight = clock ? 40 : ladder ? ladderHorizontalPadding : arcHorizontalPadding;
         const p = spec.padding;
-        if (p === undefined || p === null) {
+        if (p == null) {
             spec.padding = [defaultTop, defaultRight, defaultBottom, defaultLeft];
             return;
         }
-        if (typeof p === 'number') {
-            spec.padding = [
-                Math.max(p, defaultTop),
-                Math.max(p, defaultRight),
-                Math.max(p, defaultBottom),
-                Math.max(p, defaultLeft)
-            ];
-            return;
-        }
         if (Array.isArray(p)) {
             const [t, r = defaultRight, b, l = defaultLeft] = p;
             spec.padding = [t !== null && t !== void 0 ? t : defaultTop, r, b !== null && b !== void 0 ? b : defaultBottom, l];