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

package/build/index.js

@@ -6085,6 +6085,7 @@
     const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
     const isLadder = (spec) => normalizeLayout(spec.layout).type === 'ladder';
     const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
+    const shouldShowImageBackground = (spec) => { var _a, _b; return (_b = (_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) !== null && _b !== void 0 ? _b : !(isPortrait(spec) || isLandscape(spec)); };
     const withAlpha = (color, alpha) => {
         const safeAlpha = Math.max(0, Math.min(1, alpha));
         if (!color) {
@@ -6468,6 +6469,7 @@
         var _a, _b, _c;
         const hasImage = !!block.image;
         const themeColor = getThemeColor(spec);
+        const showImageBackground = shouldShowImageBackground(spec);
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const leadPath = (_d, ctx) => {
             const { start, end } = getClockLeadLine(spec, ctx, index);
@@ -6487,6 +6489,22 @@
                     fillOpacity: 0
                 }
             },
+            showImageBackground
+                ? {
+                    type: 'symbol',
+                    name: `storyline-clock-dot-bg-${index}`,
+                    interactive: false,
+                    style: {
+                        x: (_d, ctx) => getClockDotCenter(spec, ctx, index).x,
+                        y: (_d, ctx) => getClockDotCenter(spec, ctx, index).y,
+                        size: (_d, ctx) => getClockDotCenter(spec, ctx, index).diameter + 10,
+                        symbolType: 'circle',
+                        fill: '#ffffff',
+                        stroke: themeColor,
+                        lineWidth: 2
+                    }
+                }
+                : null,
             hasImage
                 ? {
                     type: 'image',
@@ -6594,11 +6612,12 @@
         };
     };
     const buildDefaultBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : 18);
         const titleLineHeight = Number((_f = (_e = (_d = spec.title) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.lineHeight) !== null && _f !== void 0 ? _f : Math.round(titleFontSize * 1.35));
+        const themeColor = getThemeColor(spec);
         return {
             type: 'group',
             id: `storyline-block-${(_g = block.id) !== null && _g !== void 0 ? _g : index}`,
@@ -6619,18 +6638,26 @@
                         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,
+                shouldShowImageBackground(spec)
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        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, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, (_k = spec.block) === null || _k === void 0 ? void 0 : _k.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 }, (_k = spec.image) === null || _k === void 0 ? void 0 : _k.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 }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_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) })
+                    ? 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' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_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) })
+                            }), 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' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) })
                     : null
             ].filter(Boolean)
         };
@@ -6870,12 +6897,14 @@
                 height: (_d, ctx) => getMetrics(ctx).groupHeight
             },
             children: [
-                {
-                    type: 'rect',
-                    name: `storyline-block-image-bg-${index}`,
-                    interactive: false,
-                    style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).imageBox.x, y: (_d, ctx) => getMetrics(ctx).imageBox.y, width: (_d, ctx) => getMetrics(ctx).imageBox.width, height: (_d, ctx) => getMetrics(ctx).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, blockStyle)
-                },
+                shouldShowImageBackground(spec)
+                    ? {
+                        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' }, (_r = spec.image) === null || _r === void 0 ? void 0 : _r.style) })
                     : null,
@@ -7079,7 +7108,7 @@
         };
     };
     const buildPortraitBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const hasImage = !!block.image;
         const hasSubImage = !!block.subImage;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
@@ -7130,7 +7159,7 @@
                         }
                     }
                     : null,
-                ((_l = spec.image) === null || _l === void 0 ? void 0 : _l.showBackground) === true
+                shouldShowImageBackground(spec)
                     ? {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
@@ -7139,17 +7168,17 @@
                     }
                     : 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) })
+                    ? 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' }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
                     : null,
                 block.title
-                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false }, spec.title), { style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).textBox.x, y: (_d, ctx) => getMetrics(ctx).textBox.y, text: block.title, maxLineWidth: (_d, ctx) => getMetrics(ctx).textBox.width, fontSize: titleFontSize, lineHeight: titleLineHeight, fontWeight: 'bold', fill: '#1f2430', stroke: '#fff', lineWidth: 5, lineJoin: 'round', textAlign: 'left', textBaseline: 'top' }, (_o = spec.title) === null || _o === void 0 ? void 0 : _o.style) })
+                    ? 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' }, (_m = spec.title) === null || _m === void 0 ? void 0 : _m.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => getMetrics(ctx).contentBox.x, y: (_d, ctx) => getMetrics(ctx).contentBox.y, width: (_d, ctx) => getMetrics(ctx).contentBox.width, height: (_d, ctx) => getMetrics(ctx).contentBox.height, maxLineWidth: (_d, ctx) => getMetrics(ctx).contentBox.width, heightLimit: (_d, ctx) => getMetrics(ctx).contentBox.height, text: buildRichContent(contentText, spec, {
                                 fontSize: PORTRAIT_CONTENT_FONT_SIZE,
                                 lineHeight: PORTRAIT_CONTENT_LINE_HEIGHT,
                                 fill: '#596173'
-                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style) })
+                            }), textAlign: 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_o = spec.content) === null || _o === void 0 ? void 0 : _o.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7431,7 +7460,7 @@
         };
     };
     const buildArcBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f;
+        var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
@@ -7482,7 +7511,7 @@
                             lineWidth: 2
                         }
                     },
-                ((_c = spec.image) === null || _c === void 0 ? void 0 : _c.showBackground) === true
+                shouldShowImageBackground(spec)
                     ? {
                         type: 'symbol',
                         name: `storyline-block-image-halo-${index}`,
@@ -7500,7 +7529,7 @@
                     }
                     : null,
                 block.title
-                    ? 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) })
+                    ? 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' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 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, {
@@ -7508,7 +7537,7 @@
                                 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) })
+                            }), textAlign: metrics.textAlign, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#596173' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7706,14 +7735,14 @@
         };
     };
     const buildWingBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f;
+        var _a, _b, _c, _e;
         const hasImage = !!block.image;
         const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
         const themeColor = getThemeColor(spec);
-        const showBackground = ((_a = spec.image) === null || _a === void 0 ? void 0 : _a.showBackground) === true;
+        const showBackground = shouldShowImageBackground(spec);
         return {
             type: 'group',
-            id: `storyline-block-${(_b = block.id) !== null && _b !== void 0 ? _b : index}`,
+            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
             name: `storyline-block-${index}`,
             zIndex: vchart.LayoutZIndex.Mark + 1,
             style: {
@@ -7752,7 +7781,7 @@
                     }
                     : null,
                 hasImage
-                    ? 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) })
+                    ? 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' }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
                     : {
                         type: 'rect',
                         name: `storyline-block-image-bg-${index}`,
@@ -7781,7 +7810,7 @@
                                     return 'center';
                                 }
                                 return m.onLeft ? 'right' : 'left';
-                            }, textBaseline: 'top' }, (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) })
+                            }, textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
                     : null,
                 contentText.length
                     ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: (_d, ctx) => {
@@ -7796,7 +7825,7 @@
                                     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) })
+                            }, textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7935,7 +7964,7 @@
         };
     };
     const buildLadderBlockMark = (spec, block, index) => {
-        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const hasImage = !!block.image;
         const onLeft = isOnLeft(index);
         const align = onLeft ? 'right' : 'left';
@@ -7943,6 +7972,8 @@
         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 : LADDER_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.round(titleFontSize * (LADDER_TITLE_LINE_HEIGHT / LADDER_TITLE_FONT_SIZE)));
         const showBackground = ((_h = spec.block) === null || _h === void 0 ? void 0 : _h.showBackground) === true;
+        const showImageBackground = shouldShowImageBackground(spec);
+        const themeColor = getThemeColor(spec);
         const getTitleX = (ctx) => {
             const m = getLadderBlockMetrics(spec, ctx, index);
             return align === 'right' ? m.textBox.x + m.textBox.width : m.textBox.x;
@@ -7967,18 +7998,26 @@
                         style: Object.assign({ x: 0, y: 0, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).block.height, cornerRadius: 8, fill: '#ffffff', stroke: '#d7dce5', lineWidth: 1, shadowBlur: 6, shadowColor: 'rgba(0, 0, 0, 0.08)' }, (_k = spec.block) === null || _k === void 0 ? void 0 : _k.style)
                     }
                     : null,
+                showImageBackground
+                    ? {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, cornerRadius: 8, fill: '#ffffff', stroke: themeColor, lineWidth: 2 }, (_l = spec.block) === null || _l === void 0 ? void 0 : _l.style)
+                    }
+                    : null,
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_l = spec.image) === null || _l === void 0 ? void 0 : _l.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.x, y: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.y, width: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.width, height: (_d, ctx) => getLadderBlockMetrics(spec, ctx, index).imageBox.height, image: block.image }, (_m = spec.image) === null || _m === void 0 ? void 0 : _m.style) })
                     : null,
                 block.title
-                    ? 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 }) })
+                    ? 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' }, (_o = spec.title) === null || _o === void 0 ? void 0 : _o.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, {
                                 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 }) })
+                            }), 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' }, (_p = spec.content) === null || _p === void 0 ? void 0 : _p.style), { textAlign: align }) })
                     : null
             ].filter(Boolean)
         };