@antv/infographic 0.2.11 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/infographic.min.js +1 -1
- package/dist/infographic.min.js.map +1 -1
- package/esm/designs/components/Btn.js +15 -4
- package/esm/designs/components/BtnsGroup.js +1 -1
- package/esm/designs/components/Illus.js +15 -3
- package/esm/designs/components/ItemDesc.js +17 -11
- package/esm/designs/components/ItemIcon.js +17 -18
- package/esm/designs/components/ItemLabel.js +17 -11
- package/esm/designs/components/ItemValue.js +17 -12
- package/esm/designs/components/ItemsGroup.js +1 -1
- package/esm/designs/components/ShapesGroup.js +1 -1
- package/esm/designs/components/Title.js +2 -2
- package/esm/designs/decorations/simple-arrow.js +14 -2
- package/esm/designs/decorations/triangle.js +14 -2
- package/esm/designs/defs/DropShadow.js +13 -2
- package/esm/designs/defs/LinearGradient.js +1 -1
- package/esm/designs/items/BadgeCard.js +2 -2
- package/esm/designs/items/CandyCardLite.js +1 -1
- package/esm/designs/items/CapsuleItem.js +3 -3
- package/esm/designs/items/CircleNode.js +1 -1
- package/esm/designs/items/CircularProgress.js +3 -2
- package/esm/designs/items/CompactCard.js +1 -1
- package/esm/designs/items/DoneList.js +1 -1
- package/esm/designs/items/HorizontalIconArrow.js +2 -2
- package/esm/designs/items/HorizontalIconLine.js +2 -2
- package/esm/designs/items/IconBadge.js +4 -3
- package/esm/designs/items/IndexedCard.js +1 -1
- package/esm/designs/items/LCornerCard.js +1 -1
- package/esm/designs/items/LetterCard.js +4 -3
- package/esm/designs/items/LinedText.js +6 -5
- package/esm/designs/items/PillBadge.js +2 -2
- package/esm/designs/items/PlainText.js +4 -4
- package/esm/designs/items/ProgressCard.js +4 -4
- package/esm/designs/items/QuarterCircular.js +1 -1
- package/esm/designs/items/QuarterSimpleCard.js +1 -1
- package/esm/designs/items/RibbonCard.js +2 -2
- package/esm/designs/items/RoundedRectNode.js +2 -2
- package/esm/designs/items/SimpleCircleNode.js +1 -1
- package/esm/designs/items/SimpleHorizontalArrow.js +2 -2
- package/esm/designs/items/SimpleIllusItem.js +1 -1
- package/esm/designs/items/SimpleItem.js +3 -3
- package/esm/designs/items/SimpleVerticalArrow.js +2 -2
- package/esm/designs/items/UnderlineText.js +1 -1
- package/esm/designs/items/VerticalIconArrow.js +2 -2
- package/esm/designs/layouts/Align.js +22 -15
- package/esm/designs/layouts/Flex.js +23 -16
- package/esm/designs/structures/chart-bar.js +7 -5
- package/esm/designs/structures/chart-column.js +3 -2
- package/esm/designs/structures/chart-line.js +7 -5
- package/esm/designs/structures/chart-pie.js +4 -3
- package/esm/designs/structures/chart-wordcloud.js +5 -14
- package/esm/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js +1 -1
- package/esm/designs/structures/compare-binary-horizontal/dividers/pros-cons-fold.js +1 -1
- package/esm/designs/structures/compare-binary-horizontal/dividers/types.js +2 -1
- package/esm/designs/structures/compare-hierarchy-left-right.js +6 -5
- package/esm/designs/structures/compare-hierarchy-row.js +3 -2
- package/esm/designs/structures/compare-quadrant.js +2 -3
- package/esm/designs/structures/hierarchy-mindmap.js +19 -19
- package/esm/designs/structures/hierarchy-structure.js +1 -1
- package/esm/designs/structures/hierarchy-tree.js +15 -24
- package/esm/designs/structures/list-sector.js +5 -6
- package/esm/designs/structures/list-zigzag.js +2 -1
- package/esm/designs/structures/relation-dagre-flow.js +30 -35
- package/esm/designs/structures/relation-network.js +2 -2
- package/esm/designs/structures/sequence-funnel.js +1 -1
- package/esm/designs/structures/sequence-mountain.js +4 -4
- package/esm/designs/structures/sequence-pyramid.js +1 -1
- package/esm/designs/structures/sequence-zigzag-steps.js +2 -1
- package/esm/designs/utils/color.js +8 -4
- package/esm/designs/utils/item.js +3 -2
- package/esm/editor/commands/Batch.js +21 -8
- package/esm/editor/commands/UpdateElement.js +25 -22
- package/esm/editor/commands/UpdateOptions.js +23 -10
- package/esm/editor/commands/UpdateText.js +24 -11
- package/esm/editor/interactions/brush-select.js +27 -13
- package/esm/editor/interactions/click-select.js +13 -3
- package/esm/editor/interactions/dblclick-edit-text.js +36 -20
- package/esm/editor/interactions/drag-element.js +23 -9
- package/esm/editor/interactions/hotkey-history.js +17 -7
- package/esm/editor/interactions/select-highlight.js +5 -9
- package/esm/editor/interactions/zoom-wheel.js +2 -1
- package/esm/editor/managers/command.js +45 -27
- package/esm/editor/managers/interaction.js +46 -33
- package/esm/editor/managers/state.js +1 -1
- package/esm/editor/plugins/edit-bar/components/color-picker.js +9 -6
- package/esm/editor/plugins/edit-bar/components/popover.js +15 -12
- package/esm/editor/plugins/edit-bar/components/select.js +10 -8
- package/esm/editor/plugins/edit-bar/edit-bar.js +7 -25
- package/esm/editor/plugins/edit-bar/edit-items/align-elements.js +5 -3
- package/esm/editor/plugins/edit-bar/edit-items/font-align.js +1 -1
- package/esm/editor/plugins/edit-bar/edit-items/font-color.js +2 -2
- package/esm/editor/plugins/edit-bar/edit-items/icon-color.js +2 -2
- package/esm/editor/plugins/resize-element.js +6 -4
- package/esm/editor/utils/click-handler.js +6 -3
- package/esm/editor/utils/coordinate.js +2 -1
- package/esm/editor/utils/element.js +2 -1
- package/esm/editor/utils/event.js +2 -1
- package/esm/editor/utils/extension.js +1 -1
- package/esm/editor/utils/hotkey.js +2 -1
- package/esm/exporter/font.js +106 -90
- package/esm/exporter/png.js +49 -37
- package/esm/exporter/svg.js +55 -38
- package/esm/jsx/components/Ellipse.js +5 -4
- package/esm/jsx/components/Path.js +2 -4
- package/esm/jsx/components/Polygon.js +15 -6
- package/esm/jsx/components/Text.js +21 -41
- package/esm/jsx/renderer.js +15 -7
- package/esm/jsx/utils/bounds.js +18 -16
- package/esm/jsx/utils/children.js +2 -1
- package/esm/jsx/utils/clone.js +13 -2
- package/esm/jsx/utils/element.js +2 -1
- package/esm/options/parser.js +45 -46
- package/esm/renderer/composites/background.js +3 -2
- package/esm/renderer/composites/icon.js +14 -19
- package/esm/renderer/composites/illus.js +17 -22
- package/esm/renderer/composites/shape.js +4 -2
- package/esm/renderer/composites/svg.js +2 -1
- package/esm/renderer/composites/text.js +5 -3
- package/esm/renderer/fonts/loader.js +4 -3
- package/esm/renderer/fonts/registry.js +1 -1
- package/esm/renderer/palettes/utils.js +3 -2
- package/esm/renderer/renderer.js +7 -5
- package/esm/renderer/stylize/gradient.js +3 -2
- package/esm/renderer/stylize/pattern.js +15 -8
- package/esm/renderer/stylize/rough.js +1 -1
- package/esm/resource/load-tracker.js +22 -10
- package/esm/resource/loader.js +80 -67
- package/esm/resource/loaders/image.js +71 -59
- package/esm/resource/loaders/remote.js +26 -15
- package/esm/resource/loaders/search.js +38 -25
- package/esm/resource/utils/parser.js +2 -1
- package/esm/runtime/Infographic.js +26 -13
- package/esm/runtime/utils.js +5 -8
- package/esm/ssr/renderer.js +42 -35
- package/esm/syntax/index.js +19 -6
- package/esm/syntax/mapper.js +2 -2
- package/esm/templates/built-in.js +96 -200
- package/esm/templates/hierarchy-mindmap.js +1 -5
- package/esm/templates/hierarchy-tree.js +1 -5
- package/esm/templates/relation-dagre-flow.js +4 -28
- package/esm/themes/generator.js +8 -14
- package/esm/utils/fetch.js +48 -35
- package/esm/utils/icon.js +1 -4
- package/esm/utils/is-browser.js +2 -2
- package/esm/utils/measure-text.js +2 -1
- package/esm/utils/padding.js +1 -1
- package/esm/utils/recognizer.js +2 -1
- package/esm/utils/text.js +14 -3
- package/esm/version.d.ts +1 -1
- package/esm/version.js +1 -1
- package/lib/designs/components/Btn.js +15 -4
- package/lib/designs/components/BtnsGroup.js +1 -1
- package/lib/designs/components/Illus.js +15 -3
- package/lib/designs/components/ItemDesc.js +17 -11
- package/lib/designs/components/ItemIcon.js +17 -18
- package/lib/designs/components/ItemLabel.js +17 -11
- package/lib/designs/components/ItemValue.js +17 -12
- package/lib/designs/components/ItemsGroup.js +1 -1
- package/lib/designs/components/ShapesGroup.js +1 -1
- package/lib/designs/components/Title.js +2 -2
- package/lib/designs/decorations/simple-arrow.js +14 -2
- package/lib/designs/decorations/triangle.js +14 -2
- package/lib/designs/defs/DropShadow.js +13 -2
- package/lib/designs/defs/LinearGradient.js +1 -1
- package/lib/designs/items/BadgeCard.js +2 -2
- package/lib/designs/items/CandyCardLite.js +1 -1
- package/lib/designs/items/CapsuleItem.js +3 -3
- package/lib/designs/items/CircleNode.js +1 -1
- package/lib/designs/items/CircularProgress.js +3 -2
- package/lib/designs/items/CompactCard.js +1 -1
- package/lib/designs/items/DoneList.js +1 -1
- package/lib/designs/items/HorizontalIconArrow.js +2 -2
- package/lib/designs/items/HorizontalIconLine.js +2 -2
- package/lib/designs/items/IconBadge.js +4 -3
- package/lib/designs/items/IndexedCard.js +1 -1
- package/lib/designs/items/LCornerCard.js +1 -1
- package/lib/designs/items/LetterCard.js +4 -3
- package/lib/designs/items/LinedText.js +6 -5
- package/lib/designs/items/PillBadge.js +2 -2
- package/lib/designs/items/PlainText.js +4 -4
- package/lib/designs/items/ProgressCard.js +4 -4
- package/lib/designs/items/QuarterCircular.js +1 -1
- package/lib/designs/items/QuarterSimpleCard.js +1 -1
- package/lib/designs/items/RibbonCard.js +2 -2
- package/lib/designs/items/RoundedRectNode.js +2 -2
- package/lib/designs/items/SimpleCircleNode.js +1 -1
- package/lib/designs/items/SimpleHorizontalArrow.js +2 -2
- package/lib/designs/items/SimpleIllusItem.js +1 -1
- package/lib/designs/items/SimpleItem.js +3 -3
- package/lib/designs/items/SimpleVerticalArrow.js +2 -2
- package/lib/designs/items/UnderlineText.js +1 -1
- package/lib/designs/items/VerticalIconArrow.js +2 -2
- package/lib/designs/layouts/Align.js +22 -15
- package/lib/designs/layouts/Flex.js +23 -16
- package/lib/designs/structures/chart-bar.js +7 -5
- package/lib/designs/structures/chart-column.js +3 -2
- package/lib/designs/structures/chart-line.js +7 -5
- package/lib/designs/structures/chart-pie.js +4 -3
- package/lib/designs/structures/chart-wordcloud.js +5 -14
- package/lib/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js +1 -1
- package/lib/designs/structures/compare-binary-horizontal/dividers/pros-cons-fold.js +1 -1
- package/lib/designs/structures/compare-binary-horizontal/dividers/types.js +2 -1
- package/lib/designs/structures/compare-hierarchy-left-right.js +6 -5
- package/lib/designs/structures/compare-hierarchy-row.js +3 -2
- package/lib/designs/structures/compare-quadrant.js +2 -3
- package/lib/designs/structures/hierarchy-mindmap.js +19 -19
- package/lib/designs/structures/hierarchy-structure.js +1 -1
- package/lib/designs/structures/hierarchy-tree.js +15 -24
- package/lib/designs/structures/list-sector.js +5 -6
- package/lib/designs/structures/list-zigzag.js +2 -1
- package/lib/designs/structures/relation-dagre-flow.js +30 -35
- package/lib/designs/structures/relation-network.js +2 -2
- package/lib/designs/structures/sequence-funnel.js +1 -1
- package/lib/designs/structures/sequence-mountain.js +4 -4
- package/lib/designs/structures/sequence-pyramid.js +1 -1
- package/lib/designs/structures/sequence-zigzag-steps.js +2 -1
- package/lib/designs/utils/color.js +8 -4
- package/lib/designs/utils/item.js +3 -2
- package/lib/editor/commands/Batch.js +21 -8
- package/lib/editor/commands/UpdateElement.js +25 -22
- package/lib/editor/commands/UpdateOptions.js +23 -10
- package/lib/editor/commands/UpdateText.js +24 -11
- package/lib/editor/interactions/brush-select.js +27 -13
- package/lib/editor/interactions/click-select.js +13 -3
- package/lib/editor/interactions/dblclick-edit-text.js +36 -20
- package/lib/editor/interactions/drag-element.js +23 -9
- package/lib/editor/interactions/hotkey-history.js +17 -7
- package/lib/editor/interactions/select-highlight.js +5 -9
- package/lib/editor/interactions/zoom-wheel.js +2 -1
- package/lib/editor/managers/command.js +43 -25
- package/lib/editor/managers/interaction.js +46 -33
- package/lib/editor/managers/state.js +1 -1
- package/lib/editor/plugins/edit-bar/components/color-picker.js +9 -6
- package/lib/editor/plugins/edit-bar/components/popover.js +15 -12
- package/lib/editor/plugins/edit-bar/components/select.js +10 -8
- package/lib/editor/plugins/edit-bar/edit-bar.js +7 -25
- package/lib/editor/plugins/edit-bar/edit-items/align-elements.js +5 -3
- package/lib/editor/plugins/edit-bar/edit-items/font-align.js +1 -1
- package/lib/editor/plugins/edit-bar/edit-items/font-color.js +2 -2
- package/lib/editor/plugins/edit-bar/edit-items/icon-color.js +2 -2
- package/lib/editor/plugins/resize-element.js +6 -4
- package/lib/editor/utils/click-handler.js +6 -3
- package/lib/editor/utils/coordinate.js +2 -1
- package/lib/editor/utils/element.js +2 -1
- package/lib/editor/utils/event.js +2 -1
- package/lib/editor/utils/extension.js +1 -1
- package/lib/editor/utils/hotkey.js +2 -1
- package/lib/exporter/font.js +106 -90
- package/lib/exporter/png.js +49 -37
- package/lib/exporter/svg.js +55 -38
- package/lib/jsx/components/Ellipse.js +5 -4
- package/lib/jsx/components/Path.js +2 -4
- package/lib/jsx/components/Polygon.js +15 -6
- package/lib/jsx/components/Text.js +21 -41
- package/lib/jsx/renderer.js +15 -7
- package/lib/jsx/utils/bounds.js +18 -16
- package/lib/jsx/utils/children.js +2 -1
- package/lib/jsx/utils/clone.js +13 -2
- package/lib/jsx/utils/element.js +2 -1
- package/lib/options/parser.js +45 -46
- package/lib/renderer/composites/background.js +3 -2
- package/lib/renderer/composites/icon.js +14 -19
- package/lib/renderer/composites/illus.js +17 -22
- package/lib/renderer/composites/shape.js +4 -2
- package/lib/renderer/composites/svg.js +2 -1
- package/lib/renderer/composites/text.js +5 -3
- package/lib/renderer/fonts/loader.js +4 -3
- package/lib/renderer/fonts/registry.js +1 -1
- package/lib/renderer/palettes/utils.js +3 -2
- package/lib/renderer/renderer.js +7 -5
- package/lib/renderer/stylize/gradient.js +3 -2
- package/lib/renderer/stylize/pattern.js +15 -8
- package/lib/renderer/stylize/rough.js +1 -1
- package/lib/resource/load-tracker.js +22 -10
- package/lib/resource/loader.js +80 -67
- package/lib/resource/loaders/image.js +71 -59
- package/lib/resource/loaders/remote.js +26 -15
- package/lib/resource/loaders/search.js +38 -25
- package/lib/resource/utils/parser.js +2 -1
- package/lib/runtime/Infographic.js +26 -13
- package/lib/runtime/utils.js +5 -8
- package/lib/ssr/renderer.js +42 -35
- package/lib/syntax/index.js +19 -6
- package/lib/syntax/mapper.js +2 -2
- package/lib/templates/built-in.js +96 -200
- package/lib/templates/hierarchy-mindmap.js +1 -5
- package/lib/templates/hierarchy-tree.js +1 -5
- package/lib/templates/relation-dagre-flow.js +4 -28
- package/lib/themes/generator.js +8 -14
- package/lib/utils/fetch.js +48 -35
- package/lib/utils/icon.js +1 -4
- package/lib/utils/is-browser.js +2 -2
- package/lib/utils/measure-text.js +2 -1
- package/lib/utils/padding.js +1 -1
- package/lib/utils/recognizer.js +2 -1
- package/lib/utils/text.js +14 -3
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/src/version.ts +1 -1
|
@@ -6,12 +6,13 @@ import { FlexLayout } from '../layouts/index.js';
|
|
|
6
6
|
import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils/index.js';
|
|
7
7
|
import { registerStructure } from './registry.js';
|
|
8
8
|
export const ChartPie = (props) => {
|
|
9
|
+
var _a;
|
|
9
10
|
const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, options, } = props;
|
|
10
11
|
const { title, desc, items = [] } = data;
|
|
11
12
|
const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
|
|
12
13
|
const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
|
|
13
14
|
// 获取 Item 的预估尺寸
|
|
14
|
-
const sampleDatum = items[0]
|
|
15
|
+
const sampleDatum = (_a = items[0]) !== null && _a !== void 0 ? _a : { label: '', value: 0 };
|
|
15
16
|
const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], datum: sampleDatum, data: data, positionH: "center", positionV: "middle" }));
|
|
16
17
|
const labelWidth = itemBounds.width || 140;
|
|
17
18
|
const labelHeight = itemBounds.height || 32;
|
|
@@ -32,12 +33,12 @@ export const ChartPie = (props) => {
|
|
|
32
33
|
if (items.length === 0) {
|
|
33
34
|
return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { width: totalWidth, height: totalHeight, children: _jsx(BtnsGroup, { children: _jsx(BtnAdd, { indexes: [0], x: centerX - btnBounds.width / 2, y: centerY - btnBounds.height / 2 }) }) })] }));
|
|
34
35
|
}
|
|
35
|
-
const totalValue = items.reduce((sum, item) => sum + Math.max(item.value
|
|
36
|
+
const totalValue = items.reduce((sum, item) => { var _a; return sum + Math.max((_a = item.value) !== null && _a !== void 0 ? _a : 0, 0); }, 0);
|
|
36
37
|
const colorPrimary = getColorPrimary(options);
|
|
37
38
|
const themeColors = getThemeColors(options.themeConfig);
|
|
38
39
|
// 1. 饼图生成器
|
|
39
40
|
const pieGenerator = pie()
|
|
40
|
-
.value((item) => Math.max(item.value
|
|
41
|
+
.value((item) => { var _a; return Math.max((_a = item.value) !== null && _a !== void 0 ? _a : 0, 0); })
|
|
41
42
|
.sort(null)
|
|
42
43
|
.startAngle(0)
|
|
43
44
|
.endAngle(Math.PI * 2);
|
|
@@ -54,13 +54,9 @@ function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
|
|
|
54
54
|
const x = centerX - rotated.width / 2;
|
|
55
55
|
const y = centerY - rotated.height / 2;
|
|
56
56
|
if (!hasCollision(x, y, rotated.width, rotated.height, placed, padding)) {
|
|
57
|
-
placedWord = {
|
|
58
|
-
...word,
|
|
59
|
-
angle,
|
|
57
|
+
placedWord = Object.assign(Object.assign({}, word), { angle,
|
|
60
58
|
centerX,
|
|
61
|
-
centerY,
|
|
62
|
-
box: { x, y, width: rotated.width, height: rotated.height },
|
|
63
|
-
};
|
|
59
|
+
centerY, box: { x, y, width: rotated.width, height: rotated.height } });
|
|
64
60
|
break;
|
|
65
61
|
}
|
|
66
62
|
}
|
|
@@ -72,18 +68,13 @@ function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
|
|
|
72
68
|
const centerX = farRadius * Math.cos(theta);
|
|
73
69
|
const centerY = farRadius * Math.sin(theta);
|
|
74
70
|
const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
|
|
75
|
-
placedWord = {
|
|
76
|
-
|
|
77
|
-
angle: fallbackAngle,
|
|
78
|
-
centerX,
|
|
79
|
-
centerY,
|
|
80
|
-
box: {
|
|
71
|
+
placedWord = Object.assign(Object.assign({}, word), { angle: fallbackAngle, centerX,
|
|
72
|
+
centerY, box: {
|
|
81
73
|
x: centerX - rotated.width / 2,
|
|
82
74
|
y: centerY - rotated.height / 2,
|
|
83
75
|
width: rotated.width,
|
|
84
76
|
height: rotated.height,
|
|
85
|
-
}
|
|
86
|
-
};
|
|
77
|
+
} });
|
|
87
78
|
}
|
|
88
79
|
placed.push(placedWord);
|
|
89
80
|
});
|
|
@@ -15,6 +15,6 @@ export const ProsConsArrow = (props) => {
|
|
|
15
15
|
fontWeight: 'bold',
|
|
16
16
|
fill: colorBg,
|
|
17
17
|
};
|
|
18
|
-
return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), _jsx("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), _jsx("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), _jsx(Text, { x: 40, y: 15,
|
|
18
|
+
return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), _jsx("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), _jsx("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), _jsx(Text, Object.assign({ x: 40, y: 15 }, textAttrs, { children: "Pros" })), _jsx(Text, Object.assign({ x: 70, y: 85 }, textAttrs, { children: "Cons" }))] }));
|
|
19
19
|
};
|
|
20
20
|
registerDivider('pros-cons-arrow', ProsConsArrow);
|
|
@@ -15,6 +15,6 @@ export const ProsConsFold = (props) => {
|
|
|
15
15
|
fontWeight: 'bold',
|
|
16
16
|
fill: colorBg,
|
|
17
17
|
};
|
|
18
|
-
return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M136.914 38.7755C137.303 38.7733 137.683 38.6617 138.011 38.4534C138.339 38.2451 138.602 37.9485 138.77 37.5977C138.937 37.247 139.002 36.8561 138.957 36.4701C138.913 36.084 138.76 35.7183 138.517 35.415L110.741 0.982313C110.548 0.735138 110.301 0.535238 110.018 0.397762C109.736 0.260286 109.426 0.188841 109.112 0.188841C108.798 0.188841 108.488 0.260286 108.206 0.397762C107.924 0.535238 107.676 0.735138 107.483 0.982313L79.7069 35.415C79.4639 35.7183 79.3113 36.084 79.2667 36.4701C79.222 36.8561 79.2871 37.247 79.4545 37.5977C79.6219 37.9485 79.8847 38.2451 80.213 38.4534C80.5412 38.6617 80.9216 38.7733 81.3104 38.7755H92.8965C93.0517 57.1293 97.5517 64.9878 105.259 73.7252C107.017 75.7932 108.983 77.8612 111.103 80.1361C113.276 82.4626 122.121 88.9252 131.069 95.181C129.362 88.7701 128.172 81.2218 127.293 73.7252C125.224 55.9918 125.017 38.7755 125.017 38.7755H136.914Z", fill: colorPositive, fillOpacity: 0.4 }), _jsx("path", { d: "M237.931 109.967C238.48 109.967 239.006 109.749 239.394 109.362C239.782 108.974 240 108.448 240 107.899V75.7932C240 75.2447 239.782 74.7187 239.394 74.3309C239.006 73.9431 238.48 73.7252 237.931 73.7252H127.241C128.172 81.2218 129.362 88.7701 131.069 95.181C138.182 100.171 145.337 105.1 152.534 109.967H237.931Z", fill: colorPositive }), _jsx("path", { d: "M152.586 109.967C152.586 109.967 141.724 102.678 131.069 95.181C124.122 90.5838 117.455 85.5772 111.103 80.1878C109.034 77.8612 107.017 75.7415 105.259 73.7252H48.6207V56.6639C48.6091 56.2797 48.4905 55.9063 48.2784 55.5857C48.0662 55.2651 47.7689 55.0099 47.4197 54.8488C47.0705 54.6878 46.6833 54.6271 46.3016 54.6738C45.9199 54.7204 45.5587 54.8725 45.2586 55.1129L1.50002 90.2694C1.26208 90.4633 1.07029 90.7078 0.938585 90.985C0.80688 91.2622 0.738558 91.5652 0.738558 91.8721C0.738558 92.179 0.80688 92.482 0.938585 92.7592C1.07029 93.0365 1.26208 93.2809 1.50002 93.4748L45.2586 128.631C45.5621 128.874 45.928 129.027 46.3142 129.071C46.7005 129.116 47.0914 129.051 47.4424 128.884C47.7933 128.716 48.09 128.454 48.2984 128.125C48.5068 127.797 48.6185 127.417 48.6207 127.029V109.967H152.586Z", fill: "#BFBFBF" }), _jsx("path", { d: "M36.1034 88.9252H28.9655V93.785H36.1034V101.85H41.4828V93.785H48.6207V88.8735H41.4828V81.1701H36.1034V88.9252Z", fill: "#404040" }), _jsx("path", { d: "M103.086 261.224C102.697 261.227 102.317 261.338 101.989 261.547C101.661 261.755 101.398 262.051 101.23 262.402C101.063 262.753 100.998 263.144 101.043 263.53C101.087 263.916 101.24 264.282 101.483 264.585L129.259 299.018C129.452 299.265 129.699 299.465 129.982 299.602C130.264 299.74 130.574 299.811 130.888 299.811C131.202 299.811 131.512 299.74 131.794 299.602C132.076 299.465 132.324 299.265 132.517 299.018L160.293 264.585C160.536 264.282 160.689 263.916 160.733 263.53C160.778 263.144 160.713 262.753 160.546 262.402C160.378 262.051 160.115 261.755 159.787 261.547C159.459 261.338 159.078 261.227 158.69 261.224H147.103C146.948 242.871 142.448 235.012 134.741 226.275C132.983 224.207 131.017 222.139 128.897 219.864C126.724 217.537 117.879 211.075 108.931 204.819C110.677 211.877 111.938 219.045 112.707 226.275C114.776 244.008 114.983 261.224 114.983 261.224H103.086Z", fill: colorNegative, fillOpacity: 0.4 }), _jsx("path", { d: "M2.06897 190.033C1.52025 190.033 0.993996 190.251 0.605989 190.638C0.217983 191.026 5.00679e-06 191.552 5.00679e-06 192.101V224.207C5.00679e-06 224.755 0.217983 225.281 0.605989 225.669C0.993996 226.057 1.52025 226.275 2.06897 226.275H112.759C111.828 218.778 110.638 211.23 108.931 204.819C99.9827 198.512 90.931 192.411 88.2414 190.55C87.7206 190.204 87.1077 190.024 86.4828 190.033H2.06897Z", fill: colorNegative }), _jsx("path", { d: "M87.4138 190.033C87.4138 190.033 98.2759 197.322 108.931 204.819C115.878 209.416 122.545 214.423 128.897 219.812C130.966 222.139 132.983 224.258 134.741 226.275H191.379V243.336C191.391 243.72 191.51 244.094 191.722 244.414C191.934 244.735 192.231 244.99 192.58 245.151C192.929 245.312 193.317 245.373 193.698 245.326C194.08 245.28 194.441 245.128 194.741 244.887L238.5 209.731C238.738 209.537 238.93 209.292 239.061 209.015C239.193 208.738 239.261 208.435 239.261 208.128C239.261 207.821 239.193 207.518 239.061 207.241C238.93 206.964 238.738 206.719 238.5 206.525L194.741 171.369C194.438 171.126 194.072 170.973 193.686 170.929C193.3 170.884 192.909 170.949 192.558 171.116C192.207 171.284 191.91 171.546 191.702 171.875C191.493 172.203 191.382 172.583 191.379 172.971V190.033H87.4138Z", fill: "#BFBFBF" }), _jsx("path", { d: "M192.414 205.905V210.816H212.069V205.905H192.414Z", fill: "#404040" })] }), _jsx(Text, { x: 153, y: 77,
|
|
18
|
+
return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx("path", { d: "M136.914 38.7755C137.303 38.7733 137.683 38.6617 138.011 38.4534C138.339 38.2451 138.602 37.9485 138.77 37.5977C138.937 37.247 139.002 36.8561 138.957 36.4701C138.913 36.084 138.76 35.7183 138.517 35.415L110.741 0.982313C110.548 0.735138 110.301 0.535238 110.018 0.397762C109.736 0.260286 109.426 0.188841 109.112 0.188841C108.798 0.188841 108.488 0.260286 108.206 0.397762C107.924 0.535238 107.676 0.735138 107.483 0.982313L79.7069 35.415C79.4639 35.7183 79.3113 36.084 79.2667 36.4701C79.222 36.8561 79.2871 37.247 79.4545 37.5977C79.6219 37.9485 79.8847 38.2451 80.213 38.4534C80.5412 38.6617 80.9216 38.7733 81.3104 38.7755H92.8965C93.0517 57.1293 97.5517 64.9878 105.259 73.7252C107.017 75.7932 108.983 77.8612 111.103 80.1361C113.276 82.4626 122.121 88.9252 131.069 95.181C129.362 88.7701 128.172 81.2218 127.293 73.7252C125.224 55.9918 125.017 38.7755 125.017 38.7755H136.914Z", fill: colorPositive, fillOpacity: 0.4 }), _jsx("path", { d: "M237.931 109.967C238.48 109.967 239.006 109.749 239.394 109.362C239.782 108.974 240 108.448 240 107.899V75.7932C240 75.2447 239.782 74.7187 239.394 74.3309C239.006 73.9431 238.48 73.7252 237.931 73.7252H127.241C128.172 81.2218 129.362 88.7701 131.069 95.181C138.182 100.171 145.337 105.1 152.534 109.967H237.931Z", fill: colorPositive }), _jsx("path", { d: "M152.586 109.967C152.586 109.967 141.724 102.678 131.069 95.181C124.122 90.5838 117.455 85.5772 111.103 80.1878C109.034 77.8612 107.017 75.7415 105.259 73.7252H48.6207V56.6639C48.6091 56.2797 48.4905 55.9063 48.2784 55.5857C48.0662 55.2651 47.7689 55.0099 47.4197 54.8488C47.0705 54.6878 46.6833 54.6271 46.3016 54.6738C45.9199 54.7204 45.5587 54.8725 45.2586 55.1129L1.50002 90.2694C1.26208 90.4633 1.07029 90.7078 0.938585 90.985C0.80688 91.2622 0.738558 91.5652 0.738558 91.8721C0.738558 92.179 0.80688 92.482 0.938585 92.7592C1.07029 93.0365 1.26208 93.2809 1.50002 93.4748L45.2586 128.631C45.5621 128.874 45.928 129.027 46.3142 129.071C46.7005 129.116 47.0914 129.051 47.4424 128.884C47.7933 128.716 48.09 128.454 48.2984 128.125C48.5068 127.797 48.6185 127.417 48.6207 127.029V109.967H152.586Z", fill: "#BFBFBF" }), _jsx("path", { d: "M36.1034 88.9252H28.9655V93.785H36.1034V101.85H41.4828V93.785H48.6207V88.8735H41.4828V81.1701H36.1034V88.9252Z", fill: "#404040" }), _jsx("path", { d: "M103.086 261.224C102.697 261.227 102.317 261.338 101.989 261.547C101.661 261.755 101.398 262.051 101.23 262.402C101.063 262.753 100.998 263.144 101.043 263.53C101.087 263.916 101.24 264.282 101.483 264.585L129.259 299.018C129.452 299.265 129.699 299.465 129.982 299.602C130.264 299.74 130.574 299.811 130.888 299.811C131.202 299.811 131.512 299.74 131.794 299.602C132.076 299.465 132.324 299.265 132.517 299.018L160.293 264.585C160.536 264.282 160.689 263.916 160.733 263.53C160.778 263.144 160.713 262.753 160.546 262.402C160.378 262.051 160.115 261.755 159.787 261.547C159.459 261.338 159.078 261.227 158.69 261.224H147.103C146.948 242.871 142.448 235.012 134.741 226.275C132.983 224.207 131.017 222.139 128.897 219.864C126.724 217.537 117.879 211.075 108.931 204.819C110.677 211.877 111.938 219.045 112.707 226.275C114.776 244.008 114.983 261.224 114.983 261.224H103.086Z", fill: colorNegative, fillOpacity: 0.4 }), _jsx("path", { d: "M2.06897 190.033C1.52025 190.033 0.993996 190.251 0.605989 190.638C0.217983 191.026 5.00679e-06 191.552 5.00679e-06 192.101V224.207C5.00679e-06 224.755 0.217983 225.281 0.605989 225.669C0.993996 226.057 1.52025 226.275 2.06897 226.275H112.759C111.828 218.778 110.638 211.23 108.931 204.819C99.9827 198.512 90.931 192.411 88.2414 190.55C87.7206 190.204 87.1077 190.024 86.4828 190.033H2.06897Z", fill: colorNegative }), _jsx("path", { d: "M87.4138 190.033C87.4138 190.033 98.2759 197.322 108.931 204.819C115.878 209.416 122.545 214.423 128.897 219.812C130.966 222.139 132.983 224.258 134.741 226.275H191.379V243.336C191.391 243.72 191.51 244.094 191.722 244.414C191.934 244.735 192.231 244.99 192.58 245.151C192.929 245.312 193.317 245.373 193.698 245.326C194.08 245.28 194.441 245.128 194.741 244.887L238.5 209.731C238.738 209.537 238.93 209.292 239.061 209.015C239.193 208.738 239.261 208.435 239.261 208.128C239.261 207.821 239.193 207.518 239.061 207.241C238.93 206.964 238.738 206.719 238.5 206.525L194.741 171.369C194.438 171.126 194.072 170.973 193.686 170.929C193.3 170.884 192.909 170.949 192.558 171.116C192.207 171.284 191.91 171.546 191.702 171.875C191.493 172.203 191.382 172.583 191.379 172.971V190.033H87.4138Z", fill: "#BFBFBF" }), _jsx("path", { d: "M192.414 205.905V210.816H212.069V205.905H192.414Z", fill: "#404040" })] }), _jsx(Text, Object.assign({ x: 153, y: 77 }, textAttrs, { children: "PROS" })), _jsx(Text, Object.assign({ x: 2, y: 193 }, textAttrs, { children: "CONS" }))] }));
|
|
19
19
|
};
|
|
20
20
|
registerDivider('pros-cons-fold', ProsConsFold);
|
|
@@ -3,7 +3,8 @@ export const registerDivider = (type, component) => {
|
|
|
3
3
|
dividerRegistry.set(type, component);
|
|
4
4
|
};
|
|
5
5
|
export const getDividerComponent = (type) => {
|
|
6
|
+
var _a;
|
|
6
7
|
if (!type)
|
|
7
8
|
return null;
|
|
8
|
-
return dividerRegistry.get(type)
|
|
9
|
+
return (_a = dividerRegistry.get(type)) !== null && _a !== void 0 ? _a : null;
|
|
9
10
|
};
|
|
@@ -12,19 +12,20 @@ const decorationWidthMap = {
|
|
|
12
12
|
'split-line': 5,
|
|
13
13
|
};
|
|
14
14
|
export const CompareHierarchyLeftRight = (props) => {
|
|
15
|
+
var _a, _b;
|
|
15
16
|
const { Title, Items, data, gap = 20, groupGap = 0, decoration = 'none', surround = true, flipRoot = false, flipLeaf = false, options, } = props;
|
|
16
17
|
const [RootItem, Item] = Items;
|
|
17
18
|
const { title, desc, items = [] } = data;
|
|
18
19
|
const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
|
|
19
20
|
const rootItemContent = (_jsx(RootItem, { indexes: [0], data: data, datum: data.items[0], themeColors: {} }));
|
|
20
|
-
const itemContent = (_jsx(Item, { indexes: [0, 0], data: data, datum: items[0]
|
|
21
|
+
const itemContent = (_jsx(Item, { indexes: [0, 0], data: data, datum: ((_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) || items[2] }));
|
|
21
22
|
const rootItemBounds = getElementBounds(rootItemContent);
|
|
22
23
|
const itemBounds = getElementBounds(itemContent);
|
|
23
24
|
const itemElements = [];
|
|
24
25
|
const decoElements = [];
|
|
25
26
|
const [leftRoot, rightRoot] = items;
|
|
26
|
-
const leftItems = leftRoot
|
|
27
|
-
const rightItems = rightRoot
|
|
27
|
+
const leftItems = (leftRoot === null || leftRoot === void 0 ? void 0 : leftRoot.children) || [];
|
|
28
|
+
const rightItems = (rightRoot === null || rightRoot === void 0 ? void 0 : rightRoot.children) || [];
|
|
28
29
|
const totalHeight = Math.max(rootItemBounds.height, leftItems.length * (itemBounds.height + gap) - gap, rightItems.length * (itemBounds.height + gap) - gap);
|
|
29
30
|
const decorationWidth = decorationWidthMap[decoration] || 0;
|
|
30
31
|
// create root items
|
|
@@ -52,10 +53,10 @@ export const CompareHierarchyLeftRight = (props) => {
|
|
|
52
53
|
colorBg: options.themeConfig.colorBg || '#fff',
|
|
53
54
|
};
|
|
54
55
|
if (decoration === 'split-line') {
|
|
55
|
-
decoElements.push(_jsx(SplitLine, {
|
|
56
|
+
decoElements.push(_jsx(SplitLine, Object.assign({}, props)));
|
|
56
57
|
}
|
|
57
58
|
else if (decoration === 'dot-line') {
|
|
58
|
-
decoElements.push(_jsx(DotLine, {
|
|
59
|
+
decoElements.push(_jsx(DotLine, Object.assign({}, props)));
|
|
59
60
|
}
|
|
60
61
|
};
|
|
61
62
|
if (surround) {
|
|
@@ -10,6 +10,7 @@ import { registerStructure } from './registry.js';
|
|
|
10
10
|
* 第二级:每个根节点下的子节点列表
|
|
11
11
|
*/
|
|
12
12
|
export const CompareHierarchyRow = (props) => {
|
|
13
|
+
var _a, _b;
|
|
13
14
|
const { Title, Items, data, gap = 0, itemGap = 20, columnWidth = 280, itemPadding = 5, showColumnBackground = true, columnBackgroundAlpha = 0.08, options, } = props;
|
|
14
15
|
const [RootItem, Item] = Items;
|
|
15
16
|
const { title, desc, items = [] } = data;
|
|
@@ -19,9 +20,9 @@ export const CompareHierarchyRow = (props) => {
|
|
|
19
20
|
const btnElements = [];
|
|
20
21
|
const childItemWidth = columnWidth - itemPadding * 2;
|
|
21
22
|
const rootItemBounds = getElementBounds(_jsx(RootItem, { indexes: [0], data: data, datum: items[0], width: columnWidth }));
|
|
22
|
-
const childItemBounds = getElementBounds(_jsx(Item, { indexes: [0, 0], data: data, datum: items[0]
|
|
23
|
+
const childItemBounds = getElementBounds(_jsx(Item, { indexes: [0, 0], data: data, datum: ((_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[0]) || {}, width: childItemWidth }));
|
|
23
24
|
const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
|
|
24
|
-
const maxChildrenCount = Math.max(...items.map((item) => item.children
|
|
25
|
+
const maxChildrenCount = Math.max(...items.map((item) => { var _a; return ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0; }), 0);
|
|
25
26
|
const columnHeight = rootItemBounds.height +
|
|
26
27
|
itemGap +
|
|
27
28
|
maxChildrenCount * (childItemBounds.height + itemGap);
|
|
@@ -23,9 +23,8 @@ export const Quadrant = (props) => {
|
|
|
23
23
|
: { width: 0, height: 0 };
|
|
24
24
|
// 基于 Item 包围盒计算默认象限尺寸
|
|
25
25
|
// 横向基于 Item 的宽,纵向基于 Item 的高,并加上额外的间距
|
|
26
|
-
const quadrantWidth = userQuadrantWidth
|
|
27
|
-
const quadrantHeight = userQuadrantHeight
|
|
28
|
-
itemBounds.height + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
26
|
+
const quadrantWidth = userQuadrantWidth !== null && userQuadrantWidth !== void 0 ? userQuadrantWidth : itemBounds.width + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
27
|
+
const quadrantHeight = userQuadrantHeight !== null && userQuadrantHeight !== void 0 ? userQuadrantHeight : itemBounds.height + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
29
28
|
// 计算象限位置 - 默认使用居中对齐
|
|
30
29
|
const quadrantPositions = calculateQuadrantPositions(quadrantWidth, quadrantHeight, itemBounds);
|
|
31
30
|
// itemElements
|
|
@@ -14,21 +14,19 @@ const DEFAULT_EDGE_WIDTH = 2;
|
|
|
14
14
|
const DEFAULT_COLOR_MODE = 'node';
|
|
15
15
|
const DEFAULT_EDGE_COLOR_MODE = 'solid';
|
|
16
16
|
const annotateTree = (node, parentIndexes = [], index = 0) => {
|
|
17
|
+
var _a, _b;
|
|
17
18
|
const indexes = [...parentIndexes, index];
|
|
18
|
-
return {
|
|
19
|
-
...node,
|
|
20
|
-
_indexes: indexes,
|
|
21
|
-
children: node.children?.map((child, childIndex) => annotateTree(child, indexes, childIndex)) ?? [],
|
|
22
|
-
};
|
|
19
|
+
return Object.assign(Object.assign({}, node), { _indexes: indexes, children: (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((child, childIndex) => annotateTree(child, indexes, childIndex))) !== null && _b !== void 0 ? _b : [] });
|
|
23
20
|
};
|
|
24
21
|
const collectNodes = (node, nodes, links, parent) => {
|
|
25
22
|
var _a;
|
|
23
|
+
var _b;
|
|
26
24
|
nodes.push(node);
|
|
27
|
-
(_a = node.data)._flatIndex
|
|
25
|
+
(_a = (_b = node.data)._flatIndex) !== null && _a !== void 0 ? _a : (_b._flatIndex = nodes.length - 1);
|
|
28
26
|
if (parent)
|
|
29
27
|
links.push({ parent, child: node });
|
|
30
28
|
const children = node.children;
|
|
31
|
-
children
|
|
29
|
+
children === null || children === void 0 ? void 0 : children.forEach((child) => collectNodes(child, nodes, links, node));
|
|
32
30
|
};
|
|
33
31
|
const createCurvePath = (sx, sy, tx, ty) => {
|
|
34
32
|
const offsetX = Math.abs(tx - sx) / 2;
|
|
@@ -67,6 +65,7 @@ const getEdgeAnchors = (parentLayout, childLayout, childSide, align = DEFAULT_ED
|
|
|
67
65
|
};
|
|
68
66
|
};
|
|
69
67
|
export const HierarchyMindmap = (props) => {
|
|
68
|
+
var _a, _b;
|
|
70
69
|
const { Title, Items, data, levelGap = DEFAULT_LEVEL_GAP, nodeGap = DEFAULT_NODE_GAP, edgeAlign = DEFAULT_EDGE_ALIGN, colorMode = DEFAULT_COLOR_MODE, edgeColorMode = DEFAULT_EDGE_COLOR_MODE, edgeType = DEFAULT_EDGE_TYPE, edgeWidth = DEFAULT_EDGE_WIDTH, options, } = props;
|
|
71
70
|
const { title, desc, items = [] } = data;
|
|
72
71
|
const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
|
|
@@ -74,7 +73,7 @@ export const HierarchyMindmap = (props) => {
|
|
|
74
73
|
const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
|
|
75
74
|
const groupColorIndexMap = new Map();
|
|
76
75
|
let nextGroupColorIndex = 0;
|
|
77
|
-
if (!items.length || !Items
|
|
76
|
+
if (!items.length || !(Items === null || Items === void 0 ? void 0 : Items.length)) {
|
|
78
77
|
return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
|
|
79
78
|
}
|
|
80
79
|
const root = annotateTree(items[0]);
|
|
@@ -82,8 +81,9 @@ export const HierarchyMindmap = (props) => {
|
|
|
82
81
|
const colorCache = new WeakMap();
|
|
83
82
|
const themeCache = new WeakMap();
|
|
84
83
|
const getNodeColorIndexes = (datum, depth) => {
|
|
84
|
+
var _a;
|
|
85
85
|
if (colorMode === 'group') {
|
|
86
|
-
const groupKey = String(datum.group
|
|
86
|
+
const groupKey = String((_a = datum.group) !== null && _a !== void 0 ? _a : '');
|
|
87
87
|
let groupIndex = groupColorIndexMap.get(groupKey);
|
|
88
88
|
if (groupIndex == null) {
|
|
89
89
|
groupIndex = nextGroupColorIndex;
|
|
@@ -146,10 +146,11 @@ export const HierarchyMindmap = (props) => {
|
|
|
146
146
|
const btnElements = [];
|
|
147
147
|
const layoutStore = new WeakMap();
|
|
148
148
|
layoutNodes.forEach((node) => {
|
|
149
|
+
var _a, _b;
|
|
149
150
|
const datum = node.data;
|
|
150
151
|
const measured = measureNode(datum);
|
|
151
|
-
const displayX = node.x + shiftX + (node.hgap
|
|
152
|
-
const displayY = node.y + shiftY + (node.vgap
|
|
152
|
+
const displayX = node.x + shiftX + ((_a = node.hgap) !== null && _a !== void 0 ? _a : 0);
|
|
153
|
+
const displayY = node.y + shiftY + ((_b = node.vgap) !== null && _b !== void 0 ? _b : 0);
|
|
153
154
|
const Component = getItemComponent(Items, node.depth);
|
|
154
155
|
const positionH = node.depth === 0 ? 'center' : node.side === 'left' ? 'flipped' : 'normal';
|
|
155
156
|
const themeColors = getNodeThemeColors(datum, node.depth);
|
|
@@ -164,6 +165,7 @@ export const HierarchyMindmap = (props) => {
|
|
|
164
165
|
});
|
|
165
166
|
});
|
|
166
167
|
nodeLinks.forEach((link) => {
|
|
168
|
+
var _a, _b, _c, _d;
|
|
167
169
|
const { parent, child } = link;
|
|
168
170
|
const childLayout = layoutStore.get(child);
|
|
169
171
|
const parentLayout = layoutStore.get(parent);
|
|
@@ -172,21 +174,19 @@ export const HierarchyMindmap = (props) => {
|
|
|
172
174
|
}
|
|
173
175
|
const childDatum = child.data;
|
|
174
176
|
const { sx, sy, tx, ty } = getEdgeAnchors(parentLayout, childLayout, child.side, edgeAlign);
|
|
175
|
-
const childColor = colorCache.get(childDatum)
|
|
176
|
-
|
|
177
|
-
const parentColor = colorCache.get(parent.data) ??
|
|
178
|
-
getPaletteColor(options, getNodeColorIndexes(parent.data, parent.depth));
|
|
177
|
+
const childColor = (_a = colorCache.get(childDatum)) !== null && _a !== void 0 ? _a : getPaletteColor(options, getNodeColorIndexes(childDatum, child.depth));
|
|
178
|
+
const parentColor = (_b = colorCache.get(parent.data)) !== null && _b !== void 0 ? _b : getPaletteColor(options, getNodeColorIndexes(parent.data, parent.depth));
|
|
179
179
|
const pathD = edgeType === 'straight'
|
|
180
180
|
? createStraightPath(sx, sy, tx, ty)
|
|
181
181
|
: createCurvePath(sx, sy, tx, ty);
|
|
182
182
|
const gradientId = `edge-gradient-${childDatum._indexes.join('-')}`;
|
|
183
183
|
decorElements.push(_jsx(Path, { d: pathD, stroke: edgeColorMode === 'gradient'
|
|
184
184
|
? `url(#${gradientId})`
|
|
185
|
-
: (childColor
|
|
185
|
+
: (childColor !== null && childColor !== void 0 ? childColor : colorPrimary), strokeWidth: edgeWidth, fill: "none" }));
|
|
186
186
|
if (edgeColorMode === 'gradient') {
|
|
187
|
-
defsElements.push(_jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [_jsx("stop", { offset: "0%", stopColor: parentColor
|
|
187
|
+
defsElements.push(_jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [_jsx("stop", { offset: "0%", stopColor: parentColor !== null && parentColor !== void 0 ? parentColor : colorPrimary }), _jsx("stop", { offset: "100%", stopColor: childColor !== null && childColor !== void 0 ? childColor : colorPrimary })] }));
|
|
188
188
|
}
|
|
189
|
-
const appendIndex = childDatum.children
|
|
189
|
+
const appendIndex = (_d = (_c = childDatum.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
|
|
190
190
|
const addIndexes = [...childDatum._indexes, appendIndex];
|
|
191
191
|
const btnX = childLayout.x + (childLayout.width - btnBounds.width) / 2;
|
|
192
192
|
const removeY = childLayout.y + childLayout.height + 8;
|
|
@@ -199,7 +199,7 @@ export const HierarchyMindmap = (props) => {
|
|
|
199
199
|
const rootLayout = layoutStore.get(mindmapRoot);
|
|
200
200
|
if (rootLayout) {
|
|
201
201
|
const rootDatum = mindmapRoot.data;
|
|
202
|
-
const appendIndex = rootDatum.children
|
|
202
|
+
const appendIndex = (_b = (_a = rootDatum.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
203
203
|
const addIndexes = [...rootDatum._indexes, appendIndex];
|
|
204
204
|
const btnX = rootLayout.x + (rootLayout.width - btnBounds.width) / 2;
|
|
205
205
|
const addY = rootLayout.y + rootLayout.height + 8 + btnBounds.height + 6;
|
|
@@ -56,7 +56,7 @@ export const HierarchyStructure = (props) => {
|
|
|
56
56
|
const labelWidth = labelBounds.width + labelPaddingX * 2;
|
|
57
57
|
const labelHeight = labelBounds.height + labelPaddingY * 2;
|
|
58
58
|
const children = layer.children || [];
|
|
59
|
-
const hasGroups = children.some((child) => (child.children
|
|
59
|
+
const hasGroups = children.some((child) => { var _a; return (((_a = child.children) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; });
|
|
60
60
|
if (hasGroups) {
|
|
61
61
|
const pillLabels = [];
|
|
62
62
|
children.forEach((child) => {
|
|
@@ -31,9 +31,10 @@ export const HierarchyTree = (props) => {
|
|
|
31
31
|
let nextGroupColorIndex = 0;
|
|
32
32
|
// 内置工具方法:数据预处理
|
|
33
33
|
const normalizeItems = (items) => {
|
|
34
|
+
var _a;
|
|
34
35
|
const list = [...items];
|
|
35
|
-
if (!list[0]
|
|
36
|
-
list[0] = {
|
|
36
|
+
if (!((_a = list[0]) === null || _a === void 0 ? void 0 : _a.children)) {
|
|
37
|
+
list[0] = Object.assign(Object.assign({}, list[0]), { children: list.slice(1) });
|
|
37
38
|
list.splice(1);
|
|
38
39
|
}
|
|
39
40
|
return list;
|
|
@@ -87,34 +88,22 @@ export const HierarchyTree = (props) => {
|
|
|
87
88
|
};
|
|
88
89
|
// 内置工具方法:构建层级数据
|
|
89
90
|
const buildHierarchyData = (list) => {
|
|
91
|
+
var _a;
|
|
90
92
|
if (!list.length)
|
|
91
93
|
return null;
|
|
92
94
|
const rootItem = list[0];
|
|
93
95
|
const buildNode = (node, parentIndexes = [], idx = 0) => {
|
|
96
|
+
var _a, _b;
|
|
94
97
|
const indexes = [...parentIndexes, idx];
|
|
95
|
-
return {
|
|
96
|
-
...node,
|
|
97
|
-
_originalIndex: indexes,
|
|
98
|
-
_depth: indexes.length - 1,
|
|
99
|
-
children: node.children?.map((c, i) => buildNode(c, indexes, i)) ??
|
|
100
|
-
[],
|
|
101
|
-
};
|
|
98
|
+
return Object.assign(Object.assign({}, node), { _originalIndex: indexes, _depth: indexes.length - 1, children: (_b = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map((c, i) => buildNode(c, indexes, i))) !== null && _b !== void 0 ? _b : [] });
|
|
102
99
|
};
|
|
103
|
-
return rootItem.children
|
|
100
|
+
return ((_a = rootItem.children) === null || _a === void 0 ? void 0 : _a.length)
|
|
104
101
|
? buildNode(rootItem)
|
|
105
|
-
: {
|
|
106
|
-
...rootItem,
|
|
107
|
-
_originalIndex: [0],
|
|
108
|
-
_depth: 0,
|
|
109
|
-
children: list.slice(1).map((child, i) => ({
|
|
110
|
-
...child,
|
|
111
|
-
_originalIndex: [i + 1],
|
|
112
|
-
_depth: 1,
|
|
113
|
-
})),
|
|
114
|
-
};
|
|
102
|
+
: Object.assign(Object.assign({}, rootItem), { _originalIndex: [0], _depth: 0, children: list.slice(1).map((child, i) => (Object.assign(Object.assign({}, child), { _originalIndex: [i + 1], _depth: 1 }))) });
|
|
115
103
|
};
|
|
116
104
|
// 内置工具方法:计算各层节点边界
|
|
117
105
|
const computeLevelBounds = (rootNode) => {
|
|
106
|
+
var _a, _b;
|
|
118
107
|
let maxWidth = 0, maxHeight = 0;
|
|
119
108
|
const levelBounds = new Map();
|
|
120
109
|
const sampleDatumByLevel = new Map();
|
|
@@ -126,8 +115,8 @@ export const HierarchyTree = (props) => {
|
|
|
126
115
|
});
|
|
127
116
|
for (let level = 0; level < rootNode.height + 1; level++) {
|
|
128
117
|
const ItemComponent = getItemComponent(Items, level);
|
|
129
|
-
const sampleDatum = sampleDatumByLevel.get(level)
|
|
130
|
-
const indexes = sampleDatum._originalIndex
|
|
118
|
+
const sampleDatum = (_a = sampleDatumByLevel.get(level)) !== null && _a !== void 0 ? _a : {};
|
|
119
|
+
const indexes = (_b = sampleDatum._originalIndex) !== null && _b !== void 0 ? _b : Array(level + 1).fill(0);
|
|
131
120
|
const bounds = getElementBounds(_jsx(ItemComponent, { indexes: indexes, data: data, datum: sampleDatum, positionH: "center" }));
|
|
132
121
|
levelBounds.set(level, bounds);
|
|
133
122
|
maxWidth = Math.max(maxWidth, bounds.width);
|
|
@@ -136,8 +125,9 @@ export const HierarchyTree = (props) => {
|
|
|
136
125
|
return { levelBounds, maxWidth, maxHeight };
|
|
137
126
|
};
|
|
138
127
|
const getNodeColorIndexes = (nodeData, depth) => {
|
|
128
|
+
var _a;
|
|
139
129
|
if (colorMode === 'group') {
|
|
140
|
-
const groupKey = String(nodeData
|
|
130
|
+
const groupKey = String((_a = nodeData === null || nodeData === void 0 ? void 0 : nodeData.group) !== null && _a !== void 0 ? _a : '');
|
|
141
131
|
let groupIndex = groupColorIndexMap.get(groupKey);
|
|
142
132
|
if (groupIndex == null) {
|
|
143
133
|
groupIndex = nextGroupColorIndex;
|
|
@@ -344,10 +334,11 @@ export const HierarchyTree = (props) => {
|
|
|
344
334
|
const renderSiblingBtns = (nodes, btnBounds, offsets) => {
|
|
345
335
|
const nodesByParent = new Map();
|
|
346
336
|
nodes.forEach((node) => {
|
|
337
|
+
var _a;
|
|
347
338
|
const key = node.parent
|
|
348
339
|
? node.parent.data._originalIndex.join('-')
|
|
349
340
|
: 'root';
|
|
350
|
-
(nodesByParent.get(key)
|
|
341
|
+
((_a = nodesByParent.get(key)) !== null && _a !== void 0 ? _a : nodesByParent.set(key, []).get(key)).push(node);
|
|
351
342
|
});
|
|
352
343
|
const btns = [];
|
|
353
344
|
nodesByParent.forEach((siblings) => {
|
|
@@ -22,6 +22,7 @@ export const ListSector = (props) => {
|
|
|
22
22
|
const totalUsableAngle = totalAngle - totalGapAngle;
|
|
23
23
|
const anglePerSector = items.length > 0 ? totalUsableAngle / items.length : 0;
|
|
24
24
|
items.forEach((item, index) => {
|
|
25
|
+
var _a;
|
|
25
26
|
const indexes = [index];
|
|
26
27
|
const currentStartAngle = startAngle + (anglePerSector + gapAngle) * index;
|
|
27
28
|
const currentEndAngle = currentStartAngle + anglePerSector;
|
|
@@ -65,12 +66,10 @@ export const ListSector = (props) => {
|
|
|
65
66
|
const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0], positionH: "center", width: maxWidth, height: maxHeight }));
|
|
66
67
|
const itemX = centerX + midRadius * Math.cos(midAngleRad) - itemBounds.width / 2;
|
|
67
68
|
const itemY = centerY + midRadius * Math.sin(midAngleRad) - itemBounds.height / 2;
|
|
68
|
-
itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "center", width: maxWidth, height: maxHeight, themeColors: {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}),
|
|
73
|
-
} }));
|
|
69
|
+
itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "center", width: maxWidth, height: maxHeight, themeColors: Object.assign({}, getThemeColors({
|
|
70
|
+
colorBg: getPaletteColor(options, indexes),
|
|
71
|
+
colorPrimary: ((_a = options.themeConfig) === null || _a === void 0 ? void 0 : _a.colorBg) || 'white',
|
|
72
|
+
})) }));
|
|
74
73
|
const btnRemoveRadius = outerRadius + 10;
|
|
75
74
|
const btnRemoveX = centerX + btnRemoveRadius * Math.cos(midAngleRad) - btnBounds.width / 2;
|
|
76
75
|
const btnRemoveY = centerY + btnRemoveRadius * Math.sin(midAngleRad) - btnBounds.height / 2;
|
|
@@ -135,6 +135,7 @@ const getUnitVector = (from, to) => {
|
|
|
135
135
|
const createListZigzag = (config) => {
|
|
136
136
|
const { presetRatios, arrowHeight, Arrow } = config;
|
|
137
137
|
const ListZigzag = (props) => {
|
|
138
|
+
var _a;
|
|
138
139
|
const { Title, Item, data, options, itemGap = 24 } = props;
|
|
139
140
|
const { title, desc, items = [] } = data;
|
|
140
141
|
const layoutCount = Math.min(items.length, MAX_ITEMS);
|
|
@@ -145,7 +146,7 @@ const createListZigzag = (config) => {
|
|
|
145
146
|
const colorShadow = themeColors.colorTextSecondary || '#737373';
|
|
146
147
|
const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
|
|
147
148
|
if (items.length === 0) {
|
|
148
|
-
const anchor = getPresetPoints(1, presetRatios, arrowHeight)
|
|
149
|
+
const anchor = (_a = getPresetPoints(1, presetRatios, arrowHeight)) === null || _a === void 0 ? void 0 : _a[0];
|
|
149
150
|
if (!anchor) {
|
|
150
151
|
return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(Arrow, { colorPrimary: colorPrimary, colorShadow: colorShadow }) })] }));
|
|
151
152
|
}
|
|
@@ -11,13 +11,14 @@ const DEFAULT_EDGE_SEP = 10;
|
|
|
11
11
|
const DEFAULT_EDGE_WIDTH = 2;
|
|
12
12
|
const DEFAULT_PADDING = 30;
|
|
13
13
|
const checkUndirectedCycle = (nodeIds, edges) => {
|
|
14
|
+
var _a, _b;
|
|
14
15
|
const adj = new Map();
|
|
15
16
|
nodeIds.forEach((id) => adj.set(id, []));
|
|
16
17
|
for (const edge of edges) {
|
|
17
18
|
if (edge.source === edge.target)
|
|
18
19
|
return true;
|
|
19
|
-
adj.get(edge.source)
|
|
20
|
-
adj.get(edge.target)
|
|
20
|
+
(_a = adj.get(edge.source)) === null || _a === void 0 ? void 0 : _a.push({ target: edge.target, edgeId: edge.id });
|
|
21
|
+
(_b = adj.get(edge.target)) === null || _b === void 0 ? void 0 : _b.push({ target: edge.source, edgeId: edge.id });
|
|
21
22
|
}
|
|
22
23
|
const visited = new Set();
|
|
23
24
|
const dfs = (u, parentEdgeId) => {
|
|
@@ -42,6 +43,7 @@ const checkUndirectedCycle = (nodeIds, edges) => {
|
|
|
42
43
|
return false;
|
|
43
44
|
};
|
|
44
45
|
export const RelationDagreFlow = (props) => {
|
|
46
|
+
var _a, _b;
|
|
45
47
|
const { Title, Item, data, rankdir = 'TB', nodesep = DEFAULT_NODE_SEP, ranksep = DEFAULT_RANK_SEP, edgesep = DEFAULT_EDGE_SEP, edgeWidth = DEFAULT_EDGE_WIDTH, showConnections = true, edgeColorMode = 'gradient', edgeStyle = 'solid', edgeDashPattern = '5,5', edgeCornerRadius = 12, edgeRouting = 'orth', showArrow = true, arrowType = 'triangle', padding = DEFAULT_PADDING, edgeAnimation = 'none', edgeAnimationSpeed = 1, options, } = props;
|
|
46
48
|
const { title, desc, items = [], relations = [] } = data;
|
|
47
49
|
const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
|
|
@@ -56,11 +58,12 @@ export const RelationDagreFlow = (props) => {
|
|
|
56
58
|
const colorGroupIndexMap = new Map();
|
|
57
59
|
let nextColorGroupIndex = 0;
|
|
58
60
|
const nodes = items.map((item, index) => {
|
|
61
|
+
var _a, _b;
|
|
59
62
|
const datum = item;
|
|
60
|
-
const id = String(datum.id
|
|
63
|
+
const id = String((_a = datum.id) !== null && _a !== void 0 ? _a : index);
|
|
61
64
|
const indexes = [index];
|
|
62
65
|
let primary;
|
|
63
|
-
const groupKey = String(datum.group
|
|
66
|
+
const groupKey = String((_b = datum.group) !== null && _b !== void 0 ? _b : '');
|
|
64
67
|
if (groupKey) {
|
|
65
68
|
let groupIndex = colorGroupIndexMap.get(groupKey);
|
|
66
69
|
if (groupIndex == null) {
|
|
@@ -123,7 +126,8 @@ export const RelationDagreFlow = (props) => {
|
|
|
123
126
|
edgesep,
|
|
124
127
|
controlPoints: true,
|
|
125
128
|
nodeSize: (node) => {
|
|
126
|
-
|
|
129
|
+
var _a;
|
|
130
|
+
const id = String((_a = node.id) !== null && _a !== void 0 ? _a : '');
|
|
127
131
|
const bounds = nodeSizeMap.get(id);
|
|
128
132
|
return bounds ? [bounds.width, bounds.height] : [0, 0];
|
|
129
133
|
},
|
|
@@ -131,24 +135,20 @@ export const RelationDagreFlow = (props) => {
|
|
|
131
135
|
layout.execute({ nodes, edges });
|
|
132
136
|
const nodeLayouts = [];
|
|
133
137
|
layout.forEachNode((node) => {
|
|
138
|
+
var _a, _b, _c, _d;
|
|
134
139
|
const id = String(node.id);
|
|
135
140
|
const meta = nodeMetaMap.get(id);
|
|
136
141
|
if (!meta)
|
|
137
142
|
return;
|
|
138
143
|
const bounds = nodeSizeMap.get(id);
|
|
139
|
-
const width = bounds
|
|
140
|
-
const height = bounds
|
|
141
|
-
const x = (node.x
|
|
142
|
-
const y = (node.y
|
|
143
|
-
nodeLayouts.push({
|
|
144
|
-
...meta,
|
|
145
|
-
x,
|
|
144
|
+
const width = (_a = bounds === null || bounds === void 0 ? void 0 : bounds.width) !== null && _a !== void 0 ? _a : 0;
|
|
145
|
+
const height = (_b = bounds === null || bounds === void 0 ? void 0 : bounds.height) !== null && _b !== void 0 ? _b : 0;
|
|
146
|
+
const x = ((_c = node.x) !== null && _c !== void 0 ? _c : 0) - width / 2;
|
|
147
|
+
const y = ((_d = node.y) !== null && _d !== void 0 ? _d : 0) - height / 2;
|
|
148
|
+
nodeLayouts.push(Object.assign(Object.assign({}, meta), { x,
|
|
146
149
|
y,
|
|
147
150
|
width,
|
|
148
|
-
height,
|
|
149
|
-
centerX: x + width / 2,
|
|
150
|
-
centerY: y + height / 2,
|
|
151
|
-
});
|
|
151
|
+
height, centerX: x + width / 2, centerY: y + height / 2 }));
|
|
152
152
|
});
|
|
153
153
|
if (nodeLayouts.length === 0) {
|
|
154
154
|
return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
|
|
@@ -165,21 +165,15 @@ export const RelationDagreFlow = (props) => {
|
|
|
165
165
|
const positionH = rankdir === 'LR' ? 'normal' : rankdir === 'RL' ? 'flipped' : 'center';
|
|
166
166
|
const positionV = rankdir === 'TB' ? 'normal' : rankdir === 'BT' ? 'flipped' : 'middle';
|
|
167
167
|
itemElements.push(_jsx(Item, { indexes: node.indexes, datum: node.datum, data: data, x: displayX, y: displayY, positionH: positionH, positionV: positionV, themeColors: node.themeColors }));
|
|
168
|
-
nodeLayoutById.set(node.id, {
|
|
169
|
-
...node,
|
|
170
|
-
x: displayX,
|
|
171
|
-
y: displayY,
|
|
172
|
-
centerX: displayX + node.width / 2,
|
|
173
|
-
centerY: displayY + node.height / 2,
|
|
174
|
-
});
|
|
168
|
+
nodeLayoutById.set(node.id, Object.assign(Object.assign({}, node), { x: displayX, y: displayY, centerX: displayX + node.width / 2, centerY: displayY + node.height / 2 }));
|
|
175
169
|
});
|
|
176
170
|
const defsElements = [];
|
|
177
171
|
const decorElements = [];
|
|
178
172
|
if (showConnections) {
|
|
179
173
|
const defaultStroke = getColorPrimary(options);
|
|
180
174
|
const themeColors = getThemeColors(options.themeConfig, options);
|
|
181
|
-
const labelBackground = themeColors
|
|
182
|
-
const labelTextColor = themeColors
|
|
175
|
+
const labelBackground = (_a = themeColors === null || themeColors === void 0 ? void 0 : themeColors.colorBg) !== null && _a !== void 0 ? _a : '#ffffff';
|
|
176
|
+
const labelTextColor = (_b = themeColors === null || themeColors === void 0 ? void 0 : themeColors.colorText) !== null && _b !== void 0 ? _b : defaultStroke;
|
|
183
177
|
const arrowSize = Math.max(10, edgeWidth * 4);
|
|
184
178
|
const isVertical = rankdir === 'TB' || rankdir === 'BT';
|
|
185
179
|
const enableAnimation = edgeAnimation === 'ant-line';
|
|
@@ -381,6 +375,7 @@ export const RelationDagreFlow = (props) => {
|
|
|
381
375
|
};
|
|
382
376
|
};
|
|
383
377
|
layout.forEachEdge((edge) => {
|
|
378
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
384
379
|
const normalizePoints = (rawPoints) => {
|
|
385
380
|
if (!Array.isArray(rawPoints))
|
|
386
381
|
return [];
|
|
@@ -411,7 +406,7 @@ export const RelationDagreFlow = (props) => {
|
|
|
411
406
|
: null;
|
|
412
407
|
const normalized = useOrthRouting ? [] : normalizePoints(edge.points);
|
|
413
408
|
const points = useOrthRouting
|
|
414
|
-
? (orthEdge
|
|
409
|
+
? ((_a = orthEdge === null || orthEdge === void 0 ? void 0 : orthEdge.points) !== null && _a !== void 0 ? _a : [])
|
|
415
410
|
: normalized.length
|
|
416
411
|
? normalized
|
|
417
412
|
: fallbackPoints();
|
|
@@ -420,14 +415,14 @@ export const RelationDagreFlow = (props) => {
|
|
|
420
415
|
const pointsOffsetX = useOrthRouting ? 0 : offsetX;
|
|
421
416
|
const pointsOffsetY = useOrthRouting ? 0 : offsetY;
|
|
422
417
|
const startPoint = useOrthRouting
|
|
423
|
-
? (orthEdge
|
|
418
|
+
? ((_b = orthEdge === null || orthEdge === void 0 ? void 0 : orthEdge.start) !== null && _b !== void 0 ? _b : points[0])
|
|
424
419
|
: points[0];
|
|
425
420
|
const endPoint = useOrthRouting
|
|
426
|
-
? (orthEdge
|
|
421
|
+
? ((_c = orthEdge === null || orthEdge === void 0 ? void 0 : orthEdge.end) !== null && _c !== void 0 ? _c : points[points.length - 1])
|
|
427
422
|
: points[points.length - 1];
|
|
428
|
-
const relation = edge._original
|
|
429
|
-
const sourceColor = nodeColorMap.get(String(edge.source))
|
|
430
|
-
const targetColor = nodeColorMap.get(String(edge.target))
|
|
423
|
+
const relation = (_d = edge._original) === null || _d === void 0 ? void 0 : _d.relation;
|
|
424
|
+
const sourceColor = (_e = nodeColorMap.get(String(edge.source))) !== null && _e !== void 0 ? _e : defaultStroke;
|
|
425
|
+
const targetColor = (_f = nodeColorMap.get(String(edge.target))) !== null && _f !== void 0 ? _f : defaultStroke;
|
|
431
426
|
const gradientKey = `edge-gradient-${String(sourceColor)}-${String(targetColor)}`.replace(/[^a-zA-Z0-9_-]/g, '');
|
|
432
427
|
const edgeStroke = edgeColorMode === 'gradient' ? `url(#${gradientKey})` : defaultStroke;
|
|
433
428
|
let pathD = '';
|
|
@@ -446,7 +441,7 @@ export const RelationDagreFlow = (props) => {
|
|
|
446
441
|
const end = endPoint;
|
|
447
442
|
defsElements.push(_jsxs("linearGradient", { id: gradientKey, gradientUnits: "userSpaceOnUse", x1: start[0] + pointsOffsetX, y1: start[1] + pointsOffsetY, x2: end[0] + pointsOffsetX, y2: end[1] + pointsOffsetY, children: [_jsx("stop", { offset: "0%", stopColor: sourceColor }), _jsx("stop", { offset: "100%", stopColor: targetColor })] }));
|
|
448
443
|
}
|
|
449
|
-
if (relation
|
|
444
|
+
if (relation === null || relation === void 0 ? void 0 : relation.label) {
|
|
450
445
|
let labelPoint = null;
|
|
451
446
|
const midPoint = getMidPoint(points);
|
|
452
447
|
if (midPoint) {
|
|
@@ -463,9 +458,9 @@ export const RelationDagreFlow = (props) => {
|
|
|
463
458
|
decorElements.push(_jsx(Text, { x: labelX, y: labelY, width: labelBounds.width, height: labelBounds.height, fontSize: 14, fontWeight: "normal", alignHorizontal: "center", alignVertical: "middle", fill: labelTextColor, backgroundColor: labelBackground, children: labelText }));
|
|
464
459
|
}
|
|
465
460
|
}
|
|
466
|
-
const effectiveShowArrow = relation
|
|
467
|
-
const direction = relation
|
|
468
|
-
const edgeArrowType = relation
|
|
461
|
+
const effectiveShowArrow = (_g = relation === null || relation === void 0 ? void 0 : relation.showArrow) !== null && _g !== void 0 ? _g : showArrow;
|
|
462
|
+
const direction = (_h = relation === null || relation === void 0 ? void 0 : relation.direction) !== null && _h !== void 0 ? _h : 'forward';
|
|
463
|
+
const edgeArrowType = (_j = relation === null || relation === void 0 ? void 0 : relation.arrowType) !== null && _j !== void 0 ? _j : arrowType;
|
|
469
464
|
const lastIndex = points.length - 1;
|
|
470
465
|
if (effectiveShowArrow && points.length > 1) {
|
|
471
466
|
if (direction === 'forward' || direction === 'both') {
|