@visactor/vchart-extension 2.1.0-alpha.25 → 2.1.0-alpha.26

package/build/index.js

@@ -7563,9 +7563,14 @@
     const WING_BLOCK_IMAGE_SIZE = 160;
     const WING_TITLE_LINE_HEIGHT = 30;
     const WING_TITLE_FONT_SIZE = 22;
+    const WING_TITLE_MIN_FONT_SIZE = 14;
+    const WING_TITLE_MAX_FONT_SIZE = 30;
     const WING_CONTENT_LINE_HEIGHT = 17;
     const WING_CONTENT_FONT_SIZE = 12;
     const WING_TEXT_BOX_WIDTH = 240;
+    const WING_TEXT_BOX_MIN_WIDTH = 240;
+    const WING_TEXT_BOX_MAX_WIDTH = 360;
+    const WING_TEXT_BOX_WIDTH_RATIO = 0.24;
     const WING_TEXT_BOX_HEIGHT = 110;
     const WING_TITLE_TO_CONTENT_GAP = 4;
     const WING_TITLE_IMAGE_WIDTH_RATIO = 0.6;
@@ -7574,6 +7579,7 @@
     const WING_IMAGE_MIN_SCALE = 0.52;
     const WING_IMAGE_MAX_SCALE = 1.2;
     const WING_BOTTOM_TEXT_IMAGE_GAP_RATIO = 1.35;
+    const WING_PATH_EDGE_GAP = 8;
     const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
     const getWingDirection = (spec) => {
         return normalizeLayout(spec.layout).direction === 'right' ? 'right' : 'left';
@@ -7599,6 +7605,65 @@
         const endScale = clamp(endWidth / WING_DEFAULT_PATH_END_WIDTH, WING_IMAGE_MIN_SCALE, WING_IMAGE_MAX_SCALE);
         return startScale + (endScale - startScale) * getWingBlockPathRatio(spec, index);
     };
+    const getConfiguredTextBoxWidth = (spec) => {
+        var _a, _b, _c;
+        const style = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style;
+        const width = Number((_c = (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : style === null || style === void 0 ? void 0 : style.maxLineWidth) !== null && _c !== void 0 ? _c : WING_TEXT_BOX_WIDTH);
+        return Number.isFinite(width) && width > 0 ? width : WING_TEXT_BOX_WIDTH;
+    };
+    const getWingTextBoxWidth = (spec, ctx) => {
+        const { width } = getRegionGeometry(ctx, spec);
+        const configuredWidth = getConfiguredTextBoxWidth(spec);
+        const adaptiveWidth = Math.max(configuredWidth, Math.round(width * WING_TEXT_BOX_WIDTH_RATIO));
+        return clamp(adaptiveWidth, WING_TEXT_BOX_MIN_WIDTH, WING_TEXT_BOX_MAX_WIDTH);
+    };
+    const estimateTextWidth = (text, fontSize) => Array.from(text).reduce((sum, char) => {
+        if (char.trim().length === 0) {
+            return sum + fontSize * 0.32;
+        }
+        return sum + fontSize * (char.charCodeAt(0) > 255 ? 1.05 : 0.62);
+    }, 0);
+    const measureWingTitleWidth = (title, fontSize, style) => {
+        var _a;
+        if (!title) {
+            return 0;
+        }
+        try {
+            const size = vchart.measureText(title, {
+                fontSize,
+                fontFamily: style.fontFamily,
+                fontWeight: (_a = style.fontWeight) !== null && _a !== void 0 ? _a : 'bold'
+            });
+            return Number.isFinite(size.width) && size.width > 0 ? size.width : estimateTextWidth(title, fontSize);
+        }
+        catch (_err) {
+            return estimateTextWidth(title, fontSize);
+        }
+    };
+    const getMeasuredTitleLineCount = (title, fontSize, textWidth, style) => {
+        if (!title) {
+            return 0;
+        }
+        const measuredWidth = measureWingTitleWidth(title, fontSize, style);
+        return Math.max(1, Math.min(BLOCK_TITLE_MAX_LINES, Math.ceil(measuredWidth / Math.max(textWidth * 0.96, 1))));
+    };
+    const resolveWingTitleFontSize = (spec, index, textWidth) => {
+        var _a, _b, _c, _e;
+        const style = ((_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {});
+        const configuredFontSize = style.fontSize;
+        if (configuredFontSize != null) {
+            return Number(configuredFontSize);
+        }
+        const title = (_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c[index]) === null || _e === void 0 ? void 0 : _e.title;
+        const measuredWidth = measureWingTitleWidth(title, WING_TITLE_FONT_SIZE, style);
+        if (!measuredWidth) {
+            return WING_TITLE_FONT_SIZE;
+        }
+        const widthLimit = textWidth * BLOCK_TITLE_MAX_LINES * 0.96;
+        const measuredPerFont = measuredWidth / WING_TITLE_FONT_SIZE;
+        const fittedFontSize = Math.floor(widthLimit / Math.max(measuredPerFont, 1));
+        return clamp(fittedFontSize, WING_TITLE_MIN_FONT_SIZE, WING_TITLE_MAX_FONT_SIZE);
+    };
     const getWingArcGeometry = (spec, ctx) => {
         var _a, _b, _c;
         const { width, height, startX, startY } = getRegionGeometry(ctx);
@@ -7611,10 +7676,15 @@
         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 { startWidth, endWidth } = getWingPathWidthRange(spec);
+        const topPathWidth = direction === 'right' ? endWidth : startWidth;
+        const pathTopInset = Math.min(Math.max(innerHeight / 2 - 1, 0), Math.ceil(topPathWidth / 2 + WING_PATH_EDGE_GAP));
+        const arcHeight = Math.max(innerHeight - pathTopInset, 1);
+        const ry = (arcHeight / 2) * ratio;
         const rx = innerWidth * 0.6 * ratio;
+        const topSin = Math.min(Math.sin((startAngle / 180) * Math.PI), Math.sin((endAngle / 180) * Math.PI), 0);
         const cx = direction === 'right' ? startX + innerWidth - rx * 0.1 : startX + rx * 0.1;
-        const cy = startY + innerHeight / 2;
+        const cy = startY + pathTopInset - topSin * ry;
         return { cx, cy, rx, ry, startAngle, endAngle };
     };
     const getWingBlockCenter = (spec, ctx, index) => {
@@ -7722,7 +7792,29 @@
             name: 'storyline-wing-title-image',
             zIndex: vchart.LayoutZIndex.Mark + 8,
             children: [
-                Object.assign(Object.assign({ type: 'image', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { style: Object.assign({ x: (_d, ctx) => {
+                Object.assign(Object.assign({ type: 'rect', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { _debug_bounds: true, style: Object.assign({ _debug_bounds: true, x: (_d, ctx) => {
+                            const { width, height, startX } = getChartGeometry(ctx, spec);
+                            const size = getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            });
+                            return getWingDirection(spec) === 'right' ? startX : startX + width - size.width;
+                        }, fill: 'red', y: (_d, ctx) => {
+                            return getChartGeometry(ctx, spec).startY + 12;
+                        }, width: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).width;
+                        }, height: (_d, ctx) => {
+                            const { width, height } = getChartGeometry(ctx, spec);
+                            return getTitleImageSize(spec, width, height, {
+                                widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
+                                maxWidth: WING_TITLE_IMAGE_MAX_WIDTH
+                            }).height;
+                        }, image: spec.titleImage.image, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'contain', imagePosition: 'center' }, spec.titleImage.style) }),
+                Object.assign(Object.assign({ type: 'image', name: 'storyline-wing-title-image-node', interactive: false }, spec.titleImage), { _debug_bounds: true, style: Object.assign({ _debug_bounds: true, x: (_d, ctx) => {
                             const { width, height, startX } = getChartGeometry(ctx, spec);
                             const size = getTitleImageSize(spec, width, height, {
                                 widthRatio: WING_TITLE_IMAGE_WIDTH_RATIO,
@@ -7749,18 +7841,20 @@
     };
     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;
-        const titleFontSize = resolveTitleFontSize(spec, ctx, (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.title, WING_TEXT_BOX_WIDTH, WING_TITLE_FONT_SIZE, [8, 30]);
-        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style, WING_TITLE_LINE_HEIGHT, 1.3);
-        const titleHeight = getBlockTitleHeight(titleLineHeight, (_f = (_e = spec.data) === null || _e === void 0 ? void 0 : _e[index]) === null || _f === void 0 ? void 0 : _f.title, WING_TEXT_BOX_WIDTH, titleFontSize);
-        const contentFontSize = Number((_j = (_h = (_g = spec.content) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.fontSize) !== null && _j !== void 0 ? _j : WING_CONTENT_FONT_SIZE);
-        const contentLineHeight = Number((_m = (_l = (_k = spec.content) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.lineHeight) !== null && _m !== void 0 ? _m : WING_CONTENT_LINE_HEIGHT);
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const textWidth = getWingTextBoxWidth(spec, ctx);
+        const titleStyle = ((_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {});
+        const titleFontSize = resolveWingTitleFontSize(spec, index, textWidth);
+        const titleLineHeight = resolveAdaptiveLineHeight(titleFontSize, titleStyle, WING_TITLE_LINE_HEIGHT, 1.3);
+        const titleHeight = titleLineHeight * getMeasuredTitleLineCount((_e = (_c = spec.data) === null || _c === void 0 ? void 0 : _c[index]) === null || _e === void 0 ? void 0 : _e.title, titleFontSize, textWidth, titleStyle);
+        const contentFontSize = Number((_h = (_g = (_f = spec.content) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontSize) !== null && _h !== void 0 ? _h : WING_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_l = (_k = (_j = spec.content) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.lineHeight) !== null && _l !== void 0 ? _l : WING_CONTENT_LINE_HEIGHT);
         const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
         const textHeight = WING_TEXT_BOX_HEIGHT;
         const contentHeight = 100000;
         const imageScale = getWingBlockImageScale(spec, index);
-        const imageWidth = Math.round(Number((_p = (_o = spec.image) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : WING_BLOCK_IMAGE_SIZE) * imageScale);
-        const imageHeight = Math.round(Number((_r = (_q = spec.image) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : WING_BLOCK_IMAGE_SIZE) * imageScale);
+        const imageWidth = Math.round(Number((_o = (_m = spec.image) === null || _m === void 0 ? void 0 : _m.width) !== null && _o !== void 0 ? _o : WING_BLOCK_IMAGE_SIZE) * imageScale);
+        const imageHeight = Math.round(Number((_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE) * imageScale);
         const imageBox = {
             x: -imageWidth / 2,
             y: -imageHeight / 2,
@@ -7768,11 +7862,10 @@
             height: imageHeight
         };
         const direction = getWingDirection(spec);
-        const count = (_t = (_s = spec.data) === null || _s === void 0 ? void 0 : _s.length) !== null && _t !== void 0 ? _t : 0;
+        const count = (_s = (_r = spec.data) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : 0;
         const isSpecialBelow = (direction === 'right' && count > 0 && index === count - 1) || (direction === 'left' && index === 0);
         const isBottomAbove = isWingBottomBlock(spec, ctx, index);
         const isVerticalLayout = isBottomAbove || isSpecialBelow;
-        const textWidth = WING_TEXT_BOX_WIDTH;
         let textBox;
         let contentBox;
         let connectorBox;
@@ -7906,7 +7999,7 @@
                                     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, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleHeight, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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) => {
+                            }, y: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.y, width: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, maxLineWidth: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).textBox.width, text: block.title, height: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleHeight, heightLimit: (_d, ctx) => getWingBlockMetrics(spec, ctx, index).titleLineHeight * BLOCK_TITLE_MAX_LINES, lineClamp: BLOCK_TITLE_MAX_LINES, 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';
@@ -7952,19 +8045,27 @@
         var _a, _b, _c, _d;
         const LARGE = 100;
         const SMALL = 20;
+        const WING_BASE_PADDING = 40;
+        const WING_DIRECTION_PADDING = 100;
+        const WING_TITLE_IMAGE_BOTTOM = 4;
         const TEXT_RESERVE = 280;
         const arc = isArc(spec);
         const arcDown = arc && normalizeLayout(spec.layout).direction === 'down';
         const arcUp = arc && !arcDown;
         const portrait = isPortrait(spec);
         const wing = isWing(spec);
+        const wingDirection = wing ? normalizeLayout(spec.layout).direction : undefined;
+        const wingLeft = wing && wingDirection !== 'right';
+        const wingRight = wing && wingDirection === 'right';
+        const wingTopPadding = wingRight ? WING_DIRECTION_PADDING : WING_BASE_PADDING;
+        const wingBottomPadding = wingLeft ? WING_DIRECTION_PADDING : WING_BASE_PADDING;
         const clock = isClock(spec);
         const topTitleImageReserve = (() => {
             var _a, _b, _c, _d;
             if (arc || !((_a = spec.titleImage) === null || _a === void 0 ? void 0 : _a.image) || ((_b = spec.titleImage) === null || _b === void 0 ? void 0 : _b.visible) === false) {
                 return 0;
             }
-            return getTitleImageReservedHeight(spec, Number((_c = spec.width) !== null && _c !== void 0 ? _c : 1000), Number((_d = spec.height) !== null && _d !== void 0 ? _d : 600));
+            return getTitleImageReservedHeight(spec, Number((_c = spec.width) !== null && _c !== void 0 ? _c : 1000), Number((_d = spec.height) !== null && _d !== void 0 ? _d : 600), wing ? { bottom: WING_TITLE_IMAGE_BOTTOM } : undefined);
         })();
         const portraitBottomReserve = (() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -7986,13 +8087,13 @@
             const breath = 16;
             return Math.max(LARGE, Math.round(imageHeight / 2 + textGap + titleLineHeight + titleToContentGap + contentHeight + breath));
         })();
-        const defaultTop = Math.max(topTitleImageReserve, clock ? 40 : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
+        const defaultTop = Math.max(topTitleImageReserve, clock ? 40 : wing ? wingTopPadding : arcDown ? 0 : arcUp ? TEXT_RESERVE : SMALL);
         const defaultBottom = clock
             ? 60
             : portrait
                 ? portraitBottomReserve
                 : wing
-                    ? 300
+                    ? wingBottomPadding
                     : arcUp
                         ? 100
                         : arcDown