@antv/infographic 0.2.11 → 0.2.13
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 +98 -94
- 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.d.ts +25 -0
- package/esm/designs/structures/chart-pie.js +186 -26
- 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/index.d.ts +1 -0
- package/esm/designs/utils/index.js +1 -0
- package/esm/designs/utils/item.js +3 -2
- package/esm/designs/utils/normalize-percent.d.ts +19 -0
- package/esm/designs/utils/normalize-percent.js +32 -0
- 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.d.ts +3 -0
- package/esm/editor/interactions/zoom-wheel.js +46 -22
- package/esm/editor/managers/command.js +45 -27
- package/esm/editor/managers/interaction.js +46 -33
- package/esm/editor/managers/state.js +9 -3
- 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 +91 -269
- package/esm/templates/chart-pie.d.ts +2 -0
- package/esm/templates/chart-pie.js +87 -0
- 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/utils/viewbox.d.ts +20 -0
- package/esm/utils/viewbox.js +10 -0
- 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.d.ts +25 -0
- package/lib/designs/structures/chart-pie.js +186 -25
- 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/index.d.ts +1 -0
- package/lib/designs/utils/index.js +1 -0
- package/lib/designs/utils/item.js +3 -2
- package/lib/designs/utils/normalize-percent.d.ts +19 -0
- package/lib/designs/utils/normalize-percent.js +35 -0
- 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.d.ts +3 -0
- package/lib/editor/interactions/zoom-wheel.js +45 -21
- package/lib/editor/managers/command.js +43 -25
- package/lib/editor/managers/interaction.js +46 -33
- package/lib/editor/managers/state.js +9 -3
- 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 +91 -269
- package/lib/templates/chart-pie.d.ts +2 -0
- package/lib/templates/chart-pie.js +90 -0
- 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/utils/viewbox.d.ts +20 -0
- package/lib/utils/viewbox.js +12 -0
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -2
- package/src/designs/structures/chart-pie.tsx +259 -26
- package/src/designs/utils/index.ts +1 -0
- package/src/designs/utils/normalize-percent.ts +33 -0
- package/src/editor/interactions/zoom-wheel.ts +64 -22
- package/src/editor/managers/state.ts +10 -5
- package/src/templates/built-in.ts +2 -81
- package/src/templates/chart-pie.ts +89 -0
- package/src/utils/viewbox.ts +23 -0
- package/src/version.ts +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ChartPie = void 0;
|
|
4
|
+
exports.distributeLabels = distributeLabels;
|
|
4
5
|
const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
|
|
5
6
|
const d3_1 = require("d3");
|
|
6
7
|
const jsx_1 = require("../../jsx");
|
|
@@ -8,24 +9,47 @@ const components_1 = require("../components");
|
|
|
8
9
|
const layouts_1 = require("../layouts");
|
|
9
10
|
const utils_1 = require("../utils");
|
|
10
11
|
const registry_1 = require("./registry");
|
|
12
|
+
// === 连线布局常量 ===
|
|
13
|
+
/** 连线水平拉伸系数:控制拐点相对于外半径的延伸比例 */
|
|
14
|
+
const EXTENSION_FACTOR = 1.35;
|
|
15
|
+
/** 文本与连线终点之间的水平间距 */
|
|
16
|
+
const TEXT_GAP = 8;
|
|
17
|
+
/** 平滑系数:控制 Y 轴偏移对 X 轴补偿的影响幅度 */
|
|
18
|
+
const SMOOTH_FACTOR = 0.3;
|
|
19
|
+
/** 最大预期偏移系数:相对于外半径的比例 */
|
|
20
|
+
const MAX_EXPECTED_SHIFT_FACTOR = 0.2;
|
|
21
|
+
/** 文本锚点与拐点之间的固定间距 */
|
|
22
|
+
const FIXED_TEXT_RADIUS_GAP = 20;
|
|
23
|
+
/** 连线拐点半径系数:相对于外半径的比例 */
|
|
24
|
+
const ELBOW_RADIUS_FACTOR = 1.15;
|
|
25
|
+
/** 百分比文本位置系数:从内半径到外半径的比例 (0.5 = 中间) */
|
|
26
|
+
const PERCENT_TEXT_POSITION = 0.5;
|
|
27
|
+
/** 删除按钮半径系数:相对于外半径的比例 */
|
|
28
|
+
const DELETE_BUTTON_RADIUS_FACTOR = 0.85;
|
|
29
|
+
/** 添加按钮半径系数:相对于外半径的比例 */
|
|
30
|
+
const ADD_BUTTON_RADIUS_FACTOR = 1.0;
|
|
31
|
+
/** 连线透明度 */
|
|
32
|
+
const CONNECTOR_STROKE_OPACITY = 0.45;
|
|
33
|
+
/** 连线宽度 */
|
|
34
|
+
const CONNECTOR_STROKE_WIDTH = 2;
|
|
11
35
|
const ChartPie = (props) => {
|
|
12
|
-
|
|
36
|
+
var _a;
|
|
37
|
+
const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, avoidLabelOverlap = false, minShowLabelPercent: rawMinShowLabelPercent = 0, options, } = props;
|
|
38
|
+
// 规范化百分比阈值
|
|
39
|
+
const minShowLabelPercent = (0, utils_1.normalizePercent)(rawMinShowLabelPercent);
|
|
13
40
|
const { title, desc, items = [] } = data;
|
|
14
41
|
const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
|
|
15
42
|
const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
|
|
16
43
|
// 获取 Item 的预估尺寸
|
|
17
|
-
const sampleDatum = items[0]
|
|
44
|
+
const sampleDatum = (_a = items[0]) !== null && _a !== void 0 ? _a : { label: '', value: 0 };
|
|
18
45
|
const itemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], datum: sampleDatum, data: data, positionH: "center", positionV: "middle" }));
|
|
19
46
|
const labelWidth = itemBounds.width || 140;
|
|
20
47
|
const labelHeight = itemBounds.height || 32;
|
|
21
48
|
// 基础半径设置
|
|
22
49
|
const outerRadius = Math.max(radius, 60);
|
|
23
|
-
// 连线水平拉伸的系数
|
|
24
|
-
const extensionFactor = 1.35;
|
|
25
|
-
const textGap = 8;
|
|
26
50
|
// 计算画布中心和总尺寸
|
|
27
51
|
// 水平方向:半径 * 系数 + 间距 + 标签宽度 + 边缘padding
|
|
28
|
-
const maxHorizontalDistance = outerRadius *
|
|
52
|
+
const maxHorizontalDistance = outerRadius * EXTENSION_FACTOR + TEXT_GAP + labelWidth;
|
|
29
53
|
const maxVerticalDistance = outerRadius;
|
|
30
54
|
const centerX = padding + maxHorizontalDistance;
|
|
31
55
|
const centerY = padding + maxVerticalDistance;
|
|
@@ -35,12 +59,12 @@ const ChartPie = (props) => {
|
|
|
35
59
|
if (items.length === 0) {
|
|
36
60
|
return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsx)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: centerX - btnBounds.width / 2, y: centerY - btnBounds.height / 2 }) }) })] }));
|
|
37
61
|
}
|
|
38
|
-
const totalValue = items.reduce((sum, item) => sum + Math.max(item.value
|
|
62
|
+
const totalValue = items.reduce((sum, item) => { var _a; return sum + Math.max((_a = item.value) !== null && _a !== void 0 ? _a : 0, 0); }, 0);
|
|
39
63
|
const colorPrimary = (0, utils_1.getColorPrimary)(options);
|
|
40
64
|
const themeColors = (0, utils_1.getThemeColors)(options.themeConfig);
|
|
41
65
|
// 1. 饼图生成器
|
|
42
66
|
const pieGenerator = (0, d3_1.pie)()
|
|
43
|
-
.value((item) => Math.max(item.value
|
|
67
|
+
.value((item) => { var _a; return Math.max((_a = item.value) !== null && _a !== void 0 ? _a : 0, 0); })
|
|
44
68
|
.sort(null)
|
|
45
69
|
.startAngle(0)
|
|
46
70
|
.endAngle(Math.PI * 2);
|
|
@@ -56,24 +80,24 @@ const ChartPie = (props) => {
|
|
|
56
80
|
.outerRadius(outerRadius);
|
|
57
81
|
// 连线拐点
|
|
58
82
|
const outerArc = (0, d3_1.arc)()
|
|
59
|
-
.innerRadius(outerRadius *
|
|
60
|
-
.outerRadius(outerRadius *
|
|
61
|
-
const percentTextRadius = innerRadius + (outerRadius - innerRadius) *
|
|
83
|
+
.innerRadius(outerRadius * ELBOW_RADIUS_FACTOR)
|
|
84
|
+
.outerRadius(outerRadius * ELBOW_RADIUS_FACTOR);
|
|
85
|
+
const percentTextRadius = innerRadius + (outerRadius - innerRadius) * PERCENT_TEXT_POSITION;
|
|
62
86
|
const percentageArc = (0, d3_1.arc)()
|
|
63
87
|
.innerRadius(percentTextRadius)
|
|
64
88
|
.outerRadius(percentTextRadius);
|
|
65
89
|
// 删除按钮位置
|
|
66
90
|
const deleteButtonArc = (0, d3_1.arc)()
|
|
67
|
-
.innerRadius(outerRadius *
|
|
68
|
-
.outerRadius(outerRadius *
|
|
91
|
+
.innerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR)
|
|
92
|
+
.outerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR);
|
|
69
93
|
const sliceElements = [];
|
|
70
94
|
const percentElements = [];
|
|
71
95
|
const connectorElements = [];
|
|
72
96
|
const itemElements = [];
|
|
73
97
|
const btnElements = [];
|
|
98
|
+
const labelItems = [];
|
|
74
99
|
// 3. 遍历生成图形
|
|
75
100
|
arcData.forEach((arcDatum) => {
|
|
76
|
-
const currentItem = arcDatum.data;
|
|
77
101
|
const originalIndex = arcDatum.index;
|
|
78
102
|
const color = (0, utils_1.getPaletteColor)(options, [originalIndex]) ||
|
|
79
103
|
themeColors.colorPrimary ||
|
|
@@ -83,20 +107,77 @@ const ChartPie = (props) => {
|
|
|
83
107
|
sliceElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, fill: color, stroke: themeColors.colorBg, strokeWidth: 1, "data-element-type": "shape", width: outerRadius * 2, height: outerRadius * 2 }));
|
|
84
108
|
// --- 计算关键点 ---
|
|
85
109
|
const midAngle = arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
|
|
86
|
-
const
|
|
87
|
-
|
|
110
|
+
const normalizedAngle = midAngle < 0 ? midAngle + Math.PI * 2 : midAngle;
|
|
111
|
+
const isRight = normalizedAngle < Math.PI;
|
|
112
|
+
// 计算扇形占比,如果小于 minShowLabelPercent 则跳过生成连线和标签
|
|
113
|
+
const slicePercent = totalValue > 0 ? (arcDatum.value / totalValue) * 100 : 0;
|
|
114
|
+
if (slicePercent < minShowLabelPercent) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const centroid = outerArc.centroid(arcDatum);
|
|
118
|
+
labelItems.push({
|
|
119
|
+
arcDatum,
|
|
120
|
+
originalIndex,
|
|
121
|
+
x: centroid[0],
|
|
122
|
+
y: centroid[1], // 中心点 Y 坐标
|
|
123
|
+
height: labelHeight,
|
|
124
|
+
isRight,
|
|
125
|
+
color,
|
|
126
|
+
});
|
|
127
|
+
});
|
|
128
|
+
let finalLabels = labelItems;
|
|
129
|
+
if (avoidLabelOverlap) {
|
|
130
|
+
// 标签中心点的上下边界(中心点不能超出此范围)
|
|
131
|
+
const labelMinY = -maxVerticalDistance * EXTENSION_FACTOR;
|
|
132
|
+
const labelMaxY = maxVerticalDistance * EXTENSION_FACTOR;
|
|
133
|
+
const leftItems = labelItems.filter((item) => !item.isRight);
|
|
134
|
+
const rightItems = labelItems.filter((item) => item.isRight);
|
|
135
|
+
const labelSpacing = labelHeight;
|
|
136
|
+
const adjustedRight = distributeLabels(rightItems, labelSpacing, labelMinY, labelMaxY);
|
|
137
|
+
const adjustedLeft = distributeLabels(leftItems, labelSpacing, labelMinY, labelMaxY);
|
|
138
|
+
finalLabels = [...adjustedLeft, ...adjustedRight];
|
|
139
|
+
}
|
|
140
|
+
finalLabels.forEach((item) => {
|
|
141
|
+
const { arcDatum, originalIndex, isRight, color, y: adjustedY } = item;
|
|
142
|
+
// 1. P0: 连线起点 (内部扇形质心)
|
|
88
143
|
const p0 = innerArc.centroid(arcDatum);
|
|
89
|
-
// 2.
|
|
144
|
+
// 2. P1: 第一拐点 (外部扇形质心)
|
|
90
145
|
const p1 = outerArc.centroid(arcDatum);
|
|
91
|
-
//
|
|
92
|
-
|
|
93
|
-
const
|
|
146
|
+
// 计算因避障算法导致的 Y 轴偏移量
|
|
147
|
+
// adjustedY 已经是中心点坐标
|
|
148
|
+
const labelCenterY = adjustedY;
|
|
149
|
+
const deltaY = Math.abs(labelCenterY - p1[1]);
|
|
150
|
+
// --- 动态补偿策略 (Dynamic Compensation) ---
|
|
151
|
+
// 根据 Y 轴的偏移量动态向外推移 X 轴,以缓解连线折角过于陡峭的问题
|
|
152
|
+
const dynamicShift = deltaY * SMOOTH_FACTOR;
|
|
153
|
+
// 计算基础拐点半径
|
|
154
|
+
const baseElbowRadius = outerRadius * EXTENSION_FACTOR;
|
|
155
|
+
// 计算实际拐点半径 (基础半径 + 动态补偿)
|
|
156
|
+
const currentElbowRadius = baseElbowRadius + dynamicShift;
|
|
157
|
+
// 设定文本锚点的固定半径,确保所有标签在垂直方向上对齐
|
|
158
|
+
const maxExpectedShift = outerRadius * MAX_EXPECTED_SHIFT_FACTOR;
|
|
159
|
+
const fixedTextRadius = baseElbowRadius + maxExpectedShift + FIXED_TEXT_RADIUS_GAP;
|
|
160
|
+
// 计算 P2 X 坐标 (注意方向性)
|
|
161
|
+
// 限制 Elbow X 不超过文本锚点半径,防止连线出现回折
|
|
162
|
+
const elbowRadiusClamped = Math.min(currentElbowRadius, fixedTextRadius);
|
|
163
|
+
const elbowX = elbowRadiusClamped * (isRight ? 1 : -1);
|
|
164
|
+
// 计算文本锚点 X 坐标 (始终对齐)
|
|
165
|
+
const textX = fixedTextRadius * (isRight ? 1 : -1);
|
|
166
|
+
// 3. P2: 第二拐点 (动态调整后的 Elbow 位置)
|
|
167
|
+
// 连线终点对齐标签垂直中心
|
|
168
|
+
const p2 = [elbowX, labelCenterY];
|
|
169
|
+
// 4. P3: 终点 (文本锚点)
|
|
170
|
+
const p3 = [textX, labelCenterY];
|
|
94
171
|
// --- 绘制连线 ---
|
|
95
|
-
connectorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]}
|
|
172
|
+
connectorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]}
|
|
173
|
+
L${centerX + p1[0]} ${centerY + p1[1]}
|
|
174
|
+
L${centerX + p2[0]} ${centerY + p2[1]}
|
|
175
|
+
L${centerX + p3[0]} ${centerY + p3[1]}
|
|
176
|
+
`, stroke: color, strokeOpacity: CONNECTOR_STROKE_OPACITY, strokeWidth: CONNECTOR_STROKE_WIDTH, fill: "none", "data-element-type": "shape" }));
|
|
96
177
|
// --- 绘制 Item ---
|
|
97
|
-
const itemX = centerX +
|
|
98
|
-
const itemY = centerY +
|
|
99
|
-
itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: [originalIndex], datum:
|
|
178
|
+
const itemX = centerX + p3[0] + (isRight ? TEXT_GAP : -TEXT_GAP - labelWidth);
|
|
179
|
+
const itemY = centerY + adjustedY - labelHeight / 2; // 转换为顶部坐标用于渲染
|
|
180
|
+
itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: [originalIndex], datum: arcDatum.data, data: data, x: itemX, y: itemY, width: labelWidth, height: labelHeight, positionH: isRight ? 'normal' : 'flipped', positionV: "middle", themeColors: (0, utils_1.getThemeColors)({ colorPrimary: color }, options) }));
|
|
100
181
|
// --- 绘制百分比 ---
|
|
101
182
|
if (showPercentage && totalValue > 0) {
|
|
102
183
|
const percentPos = percentageArc.centroid(arcDatum);
|
|
@@ -117,7 +198,7 @@ const ChartPie = (props) => {
|
|
|
117
198
|
const currentEnd = arcDatum.endAngle;
|
|
118
199
|
const nextStart = arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
|
|
119
200
|
const midAngle = (currentEnd + nextStart) / 2;
|
|
120
|
-
const btnR = outerRadius *
|
|
201
|
+
const btnR = outerRadius * ADD_BUTTON_RADIUS_FACTOR;
|
|
121
202
|
const btnX = Math.sin(midAngle) * btnR;
|
|
122
203
|
const btnY = -Math.cos(midAngle) * btnR;
|
|
123
204
|
btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: centerX + btnX - btnBounds.width / 2, y: centerY + btnY - btnBounds.height / 2 }));
|
|
@@ -129,3 +210,83 @@ exports.ChartPie = ChartPie;
|
|
|
129
210
|
component: exports.ChartPie,
|
|
130
211
|
composites: ['title', 'item'],
|
|
131
212
|
});
|
|
213
|
+
/**
|
|
214
|
+
* 核心避障逻辑:蜘蛛腿算法 (Spider Leg Layout)
|
|
215
|
+
*
|
|
216
|
+
* 注意:y 坐标表示标签的中心点坐标
|
|
217
|
+
*
|
|
218
|
+
* @param items 待处理的标签数组(y 为中心点坐标)
|
|
219
|
+
* @param spacing 垂直最小间距(标签边缘之间的间距)
|
|
220
|
+
* @param minY 标签中心点的上边界
|
|
221
|
+
* @param maxY 标签中心点的下边界
|
|
222
|
+
*/
|
|
223
|
+
function distributeLabels(items, spacing, minY, maxY) {
|
|
224
|
+
// 避免除零风险
|
|
225
|
+
if (items.length <= 1)
|
|
226
|
+
return items.map((item) => (Object.assign({}, item)));
|
|
227
|
+
// 按照 Y 坐标排序 (从上到下)
|
|
228
|
+
const sorted = items.map((item) => (Object.assign({}, item))).sort((a, b) => a.y - b.y);
|
|
229
|
+
// === 预检测:是否需要退避 ===
|
|
230
|
+
// 检查是否有任何标签重叠或超出边界
|
|
231
|
+
const hasOverlap = sorted.some((item, i) => {
|
|
232
|
+
if (i === 0)
|
|
233
|
+
return false;
|
|
234
|
+
const prev = sorted[i - 1];
|
|
235
|
+
// 中心点间距 < 两个半高度之和 → 有重叠
|
|
236
|
+
return item.y - prev.y < (prev.height + item.height) / 2;
|
|
237
|
+
});
|
|
238
|
+
const firstItem = sorted[0];
|
|
239
|
+
const lastItem = sorted[sorted.length - 1];
|
|
240
|
+
const isOutOfBounds = firstItem.y - firstItem.height / 2 < minY ||
|
|
241
|
+
lastItem.y + lastItem.height / 2 > maxY;
|
|
242
|
+
// 如果没有重叠且都在边界内,直接返回原位置
|
|
243
|
+
if (!hasOverlap && !isOutOfBounds) {
|
|
244
|
+
return sorted;
|
|
245
|
+
}
|
|
246
|
+
// === 第一步:计算总高度需求,动态调整间距 ===
|
|
247
|
+
const totalLabelsHeight = sorted.reduce((sum, item) => sum + item.height, 0);
|
|
248
|
+
const availableSpace = maxY - minY;
|
|
249
|
+
const requiredSpaceWithIdealSpacing = totalLabelsHeight + spacing * (sorted.length - 1);
|
|
250
|
+
// 如果理想间距放不下,动态压缩间距(最小为0)
|
|
251
|
+
let actualSpacing = spacing;
|
|
252
|
+
if (requiredSpaceWithIdealSpacing > availableSpace) {
|
|
253
|
+
const excessSpace = availableSpace - totalLabelsHeight;
|
|
254
|
+
actualSpacing = Math.max(0, excessSpace / (sorted.length - 1));
|
|
255
|
+
}
|
|
256
|
+
// === 第二步:向下挤压 (Downwards push) ===
|
|
257
|
+
// y 为中心点坐标
|
|
258
|
+
// 当前标签中心 必须 >= 前一标签中心 + 两个半高度之和 + 间距
|
|
259
|
+
for (let i = 1; i < sorted.length; i++) {
|
|
260
|
+
const prev = sorted[i - 1];
|
|
261
|
+
const curr = sorted[i];
|
|
262
|
+
const minAllowedY = prev.y + (prev.height + curr.height) / 2 + actualSpacing;
|
|
263
|
+
if (curr.y < minAllowedY) {
|
|
264
|
+
curr.y = minAllowedY;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
// === 第三步:边界钳制 + 向上回推 (Upwards push) ===
|
|
268
|
+
// 如果最后一个标签超出下边界,从下往上回推
|
|
269
|
+
const lastIdx = sorted.length - 1;
|
|
270
|
+
const last = sorted[lastIdx];
|
|
271
|
+
if (last.y + last.height / 2 > maxY) {
|
|
272
|
+
// 先把最后一个钳制到边界内(中心点 = 下边界 - 半高度)
|
|
273
|
+
last.y = maxY - last.height / 2;
|
|
274
|
+
// 然后从下往上检查,如果上一个标签被挤到了,就往上推
|
|
275
|
+
for (let i = lastIdx - 1; i >= 0; i--) {
|
|
276
|
+
const next = sorted[i + 1];
|
|
277
|
+
const curr = sorted[i];
|
|
278
|
+
const maxAllowedY = next.y - (next.height + curr.height) / 2 - actualSpacing;
|
|
279
|
+
if (curr.y > maxAllowedY) {
|
|
280
|
+
curr.y = maxAllowedY;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
// === 第四步:上边界钳制 ===
|
|
285
|
+
// 如果向上回推后,第一个标签超出上边界,整体往下移
|
|
286
|
+
const first = sorted[0];
|
|
287
|
+
if (first.y - first.height / 2 < minY) {
|
|
288
|
+
const shift = minY - (first.y - first.height / 2);
|
|
289
|
+
sorted.forEach((item) => (item.y += shift));
|
|
290
|
+
}
|
|
291
|
+
return sorted;
|
|
292
|
+
}
|
|
@@ -57,13 +57,9 @@ function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
|
|
|
57
57
|
const x = centerX - rotated.width / 2;
|
|
58
58
|
const y = centerY - rotated.height / 2;
|
|
59
59
|
if (!hasCollision(x, y, rotated.width, rotated.height, placed, padding)) {
|
|
60
|
-
placedWord = {
|
|
61
|
-
...word,
|
|
62
|
-
angle,
|
|
60
|
+
placedWord = Object.assign(Object.assign({}, word), { angle,
|
|
63
61
|
centerX,
|
|
64
|
-
centerY,
|
|
65
|
-
box: { x, y, width: rotated.width, height: rotated.height },
|
|
66
|
-
};
|
|
62
|
+
centerY, box: { x, y, width: rotated.width, height: rotated.height } });
|
|
67
63
|
break;
|
|
68
64
|
}
|
|
69
65
|
}
|
|
@@ -75,18 +71,13 @@ function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
|
|
|
75
71
|
const centerX = farRadius * Math.cos(theta);
|
|
76
72
|
const centerY = farRadius * Math.sin(theta);
|
|
77
73
|
const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
|
|
78
|
-
placedWord = {
|
|
79
|
-
|
|
80
|
-
angle: fallbackAngle,
|
|
81
|
-
centerX,
|
|
82
|
-
centerY,
|
|
83
|
-
box: {
|
|
74
|
+
placedWord = Object.assign(Object.assign({}, word), { angle: fallbackAngle, centerX,
|
|
75
|
+
centerY, box: {
|
|
84
76
|
x: centerX - rotated.width / 2,
|
|
85
77
|
y: centerY - rotated.height / 2,
|
|
86
78
|
width: rotated.width,
|
|
87
79
|
height: rotated.height,
|
|
88
|
-
}
|
|
89
|
-
};
|
|
80
|
+
} });
|
|
90
81
|
}
|
|
91
82
|
placed.push(placedWord);
|
|
92
83
|
});
|
|
@@ -18,7 +18,7 @@ const ProsConsArrow = (props) => {
|
|
|
18
18
|
fontWeight: 'bold',
|
|
19
19
|
fill: colorBg,
|
|
20
20
|
};
|
|
21
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 40, y: 15,
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, Object.assign({ x: 40, y: 15 }, textAttrs, { children: "Pros" })), (0, jsx_runtime_1.jsx)(jsx_1.Text, Object.assign({ x: 70, y: 85 }, textAttrs, { children: "Cons" }))] }));
|
|
22
22
|
};
|
|
23
23
|
exports.ProsConsArrow = ProsConsArrow;
|
|
24
24
|
(0, types_1.registerDivider)('pros-cons-arrow', exports.ProsConsArrow);
|
|
@@ -18,7 +18,7 @@ const ProsConsFold = (props) => {
|
|
|
18
18
|
fontWeight: 'bold',
|
|
19
19
|
fill: colorBg,
|
|
20
20
|
};
|
|
21
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.1034 88.9252H28.9655V93.785H36.1034V101.85H41.4828V93.785H48.6207V88.8735H41.4828V81.1701H36.1034V88.9252Z", fill: "#404040" }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M192.414 205.905V210.816H212.069V205.905H192.414Z", fill: "#404040" })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 153, y: 77,
|
|
21
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M36.1034 88.9252H28.9655V93.785H36.1034V101.85H41.4828V93.785H48.6207V88.8735H41.4828V81.1701H36.1034V88.9252Z", fill: "#404040" }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { d: "M192.414 205.905V210.816H212.069V205.905H192.414Z", fill: "#404040" })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, Object.assign({ x: 153, y: 77 }, textAttrs, { children: "PROS" })), (0, jsx_runtime_1.jsx)(jsx_1.Text, Object.assign({ x: 2, y: 193 }, textAttrs, { children: "CONS" }))] }));
|
|
22
22
|
};
|
|
23
23
|
exports.ProsConsFold = ProsConsFold;
|
|
24
24
|
(0, types_1.registerDivider)('pros-cons-fold', exports.ProsConsFold);
|
|
@@ -7,8 +7,9 @@ const registerDivider = (type, component) => {
|
|
|
7
7
|
};
|
|
8
8
|
exports.registerDivider = registerDivider;
|
|
9
9
|
const getDividerComponent = (type) => {
|
|
10
|
+
var _a;
|
|
10
11
|
if (!type)
|
|
11
12
|
return null;
|
|
12
|
-
return dividerRegistry.get(type)
|
|
13
|
+
return (_a = dividerRegistry.get(type)) !== null && _a !== void 0 ? _a : null;
|
|
13
14
|
};
|
|
14
15
|
exports.getDividerComponent = getDividerComponent;
|
|
@@ -15,19 +15,20 @@ const decorationWidthMap = {
|
|
|
15
15
|
'split-line': 5,
|
|
16
16
|
};
|
|
17
17
|
const CompareHierarchyLeftRight = (props) => {
|
|
18
|
+
var _a, _b;
|
|
18
19
|
const { Title, Items, data, gap = 20, groupGap = 0, decoration = 'none', surround = true, flipRoot = false, flipLeaf = false, options, } = props;
|
|
19
20
|
const [RootItem, Item] = Items;
|
|
20
21
|
const { title, desc, items = [] } = data;
|
|
21
22
|
const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
|
|
22
23
|
const rootItemContent = ((0, jsx_runtime_1.jsx)(RootItem, { indexes: [0], data: data, datum: data.items[0], themeColors: {} }));
|
|
23
|
-
const itemContent = ((0, jsx_runtime_1.jsx)(Item, { indexes: [0, 0], data: data, datum: items[0]
|
|
24
|
+
const itemContent = ((0, jsx_runtime_1.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] }));
|
|
24
25
|
const rootItemBounds = (0, jsx_1.getElementBounds)(rootItemContent);
|
|
25
26
|
const itemBounds = (0, jsx_1.getElementBounds)(itemContent);
|
|
26
27
|
const itemElements = [];
|
|
27
28
|
const decoElements = [];
|
|
28
29
|
const [leftRoot, rightRoot] = items;
|
|
29
|
-
const leftItems = leftRoot
|
|
30
|
-
const rightItems = rightRoot
|
|
30
|
+
const leftItems = (leftRoot === null || leftRoot === void 0 ? void 0 : leftRoot.children) || [];
|
|
31
|
+
const rightItems = (rightRoot === null || rightRoot === void 0 ? void 0 : rightRoot.children) || [];
|
|
31
32
|
const totalHeight = Math.max(rootItemBounds.height, leftItems.length * (itemBounds.height + gap) - gap, rightItems.length * (itemBounds.height + gap) - gap);
|
|
32
33
|
const decorationWidth = decorationWidthMap[decoration] || 0;
|
|
33
34
|
// create root items
|
|
@@ -55,10 +56,10 @@ const CompareHierarchyLeftRight = (props) => {
|
|
|
55
56
|
colorBg: options.themeConfig.colorBg || '#fff',
|
|
56
57
|
};
|
|
57
58
|
if (decoration === 'split-line') {
|
|
58
|
-
decoElements.push((0, jsx_runtime_1.jsx)(SplitLine, {
|
|
59
|
+
decoElements.push((0, jsx_runtime_1.jsx)(SplitLine, Object.assign({}, props)));
|
|
59
60
|
}
|
|
60
61
|
else if (decoration === 'dot-line') {
|
|
61
|
-
decoElements.push((0, jsx_runtime_1.jsx)(DotLine, {
|
|
62
|
+
decoElements.push((0, jsx_runtime_1.jsx)(DotLine, Object.assign({}, props)));
|
|
62
63
|
}
|
|
63
64
|
};
|
|
64
65
|
if (surround) {
|
|
@@ -13,6 +13,7 @@ const registry_1 = require("./registry");
|
|
|
13
13
|
* 第二级:每个根节点下的子节点列表
|
|
14
14
|
*/
|
|
15
15
|
const CompareHierarchyRow = (props) => {
|
|
16
|
+
var _a, _b;
|
|
16
17
|
const { Title, Items, data, gap = 0, itemGap = 20, columnWidth = 280, itemPadding = 5, showColumnBackground = true, columnBackgroundAlpha = 0.08, options, } = props;
|
|
17
18
|
const [RootItem, Item] = Items;
|
|
18
19
|
const { title, desc, items = [] } = data;
|
|
@@ -22,9 +23,9 @@ const CompareHierarchyRow = (props) => {
|
|
|
22
23
|
const btnElements = [];
|
|
23
24
|
const childItemWidth = columnWidth - itemPadding * 2;
|
|
24
25
|
const rootItemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(RootItem, { indexes: [0], data: data, datum: items[0], width: columnWidth }));
|
|
25
|
-
const childItemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0, 0], data: data, datum: items[0]
|
|
26
|
+
const childItemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.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 }));
|
|
26
27
|
const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
|
|
27
|
-
const maxChildrenCount = Math.max(...items.map((item) => item.children
|
|
28
|
+
const maxChildrenCount = Math.max(...items.map((item) => { var _a; return ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) || 0; }), 0);
|
|
28
29
|
const columnHeight = rootItemBounds.height +
|
|
29
30
|
itemGap +
|
|
30
31
|
maxChildrenCount * (childItemBounds.height + itemGap);
|
|
@@ -26,9 +26,8 @@ const Quadrant = (props) => {
|
|
|
26
26
|
: { width: 0, height: 0 };
|
|
27
27
|
// 基于 Item 包围盒计算默认象限尺寸
|
|
28
28
|
// 横向基于 Item 的宽,纵向基于 Item 的高,并加上额外的间距
|
|
29
|
-
const quadrantWidth = userQuadrantWidth
|
|
30
|
-
const quadrantHeight = userQuadrantHeight
|
|
31
|
-
itemBounds.height + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
29
|
+
const quadrantWidth = userQuadrantWidth !== null && userQuadrantWidth !== void 0 ? userQuadrantWidth : itemBounds.width + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
30
|
+
const quadrantHeight = userQuadrantHeight !== null && userQuadrantHeight !== void 0 ? userQuadrantHeight : itemBounds.height + QUADRANT_CONFIG.defaultExtraSpacing;
|
|
32
31
|
// 计算象限位置 - 默认使用居中对齐
|
|
33
32
|
const quadrantPositions = calculateQuadrantPositions(quadrantWidth, quadrantHeight, itemBounds);
|
|
34
33
|
// itemElements
|
|
@@ -17,21 +17,19 @@ const DEFAULT_EDGE_WIDTH = 2;
|
|
|
17
17
|
const DEFAULT_COLOR_MODE = 'node';
|
|
18
18
|
const DEFAULT_EDGE_COLOR_MODE = 'solid';
|
|
19
19
|
const annotateTree = (node, parentIndexes = [], index = 0) => {
|
|
20
|
+
var _a, _b;
|
|
20
21
|
const indexes = [...parentIndexes, index];
|
|
21
|
-
return {
|
|
22
|
-
...node,
|
|
23
|
-
_indexes: indexes,
|
|
24
|
-
children: node.children?.map((child, childIndex) => annotateTree(child, indexes, childIndex)) ?? [],
|
|
25
|
-
};
|
|
22
|
+
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 : [] });
|
|
26
23
|
};
|
|
27
24
|
const collectNodes = (node, nodes, links, parent) => {
|
|
28
25
|
var _a;
|
|
26
|
+
var _b;
|
|
29
27
|
nodes.push(node);
|
|
30
|
-
(_a = node.data)._flatIndex
|
|
28
|
+
(_a = (_b = node.data)._flatIndex) !== null && _a !== void 0 ? _a : (_b._flatIndex = nodes.length - 1);
|
|
31
29
|
if (parent)
|
|
32
30
|
links.push({ parent, child: node });
|
|
33
31
|
const children = node.children;
|
|
34
|
-
children
|
|
32
|
+
children === null || children === void 0 ? void 0 : children.forEach((child) => collectNodes(child, nodes, links, node));
|
|
35
33
|
};
|
|
36
34
|
const createCurvePath = (sx, sy, tx, ty) => {
|
|
37
35
|
const offsetX = Math.abs(tx - sx) / 2;
|
|
@@ -70,6 +68,7 @@ const getEdgeAnchors = (parentLayout, childLayout, childSide, align = DEFAULT_ED
|
|
|
70
68
|
};
|
|
71
69
|
};
|
|
72
70
|
const HierarchyMindmap = (props) => {
|
|
71
|
+
var _a, _b;
|
|
73
72
|
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;
|
|
74
73
|
const { title, desc, items = [] } = data;
|
|
75
74
|
const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
|
|
@@ -77,7 +76,7 @@ const HierarchyMindmap = (props) => {
|
|
|
77
76
|
const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
|
|
78
77
|
const groupColorIndexMap = new Map();
|
|
79
78
|
let nextGroupColorIndex = 0;
|
|
80
|
-
if (!items.length || !Items
|
|
79
|
+
if (!items.length || !(Items === null || Items === void 0 ? void 0 : Items.length)) {
|
|
81
80
|
return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
|
|
82
81
|
}
|
|
83
82
|
const root = annotateTree(items[0]);
|
|
@@ -85,8 +84,9 @@ const HierarchyMindmap = (props) => {
|
|
|
85
84
|
const colorCache = new WeakMap();
|
|
86
85
|
const themeCache = new WeakMap();
|
|
87
86
|
const getNodeColorIndexes = (datum, depth) => {
|
|
87
|
+
var _a;
|
|
88
88
|
if (colorMode === 'group') {
|
|
89
|
-
const groupKey = String(datum.group
|
|
89
|
+
const groupKey = String((_a = datum.group) !== null && _a !== void 0 ? _a : '');
|
|
90
90
|
let groupIndex = groupColorIndexMap.get(groupKey);
|
|
91
91
|
if (groupIndex == null) {
|
|
92
92
|
groupIndex = nextGroupColorIndex;
|
|
@@ -149,10 +149,11 @@ const HierarchyMindmap = (props) => {
|
|
|
149
149
|
const btnElements = [];
|
|
150
150
|
const layoutStore = new WeakMap();
|
|
151
151
|
layoutNodes.forEach((node) => {
|
|
152
|
+
var _a, _b;
|
|
152
153
|
const datum = node.data;
|
|
153
154
|
const measured = measureNode(datum);
|
|
154
|
-
const displayX = node.x + shiftX + (node.hgap
|
|
155
|
-
const displayY = node.y + shiftY + (node.vgap
|
|
155
|
+
const displayX = node.x + shiftX + ((_a = node.hgap) !== null && _a !== void 0 ? _a : 0);
|
|
156
|
+
const displayY = node.y + shiftY + ((_b = node.vgap) !== null && _b !== void 0 ? _b : 0);
|
|
156
157
|
const Component = (0, utils_1.getItemComponent)(Items, node.depth);
|
|
157
158
|
const positionH = node.depth === 0 ? 'center' : node.side === 'left' ? 'flipped' : 'normal';
|
|
158
159
|
const themeColors = getNodeThemeColors(datum, node.depth);
|
|
@@ -167,6 +168,7 @@ const HierarchyMindmap = (props) => {
|
|
|
167
168
|
});
|
|
168
169
|
});
|
|
169
170
|
nodeLinks.forEach((link) => {
|
|
171
|
+
var _a, _b, _c, _d;
|
|
170
172
|
const { parent, child } = link;
|
|
171
173
|
const childLayout = layoutStore.get(child);
|
|
172
174
|
const parentLayout = layoutStore.get(parent);
|
|
@@ -175,21 +177,19 @@ const HierarchyMindmap = (props) => {
|
|
|
175
177
|
}
|
|
176
178
|
const childDatum = child.data;
|
|
177
179
|
const { sx, sy, tx, ty } = getEdgeAnchors(parentLayout, childLayout, child.side, edgeAlign);
|
|
178
|
-
const childColor = colorCache.get(childDatum)
|
|
179
|
-
|
|
180
|
-
const parentColor = colorCache.get(parent.data) ??
|
|
181
|
-
(0, utils_1.getPaletteColor)(options, getNodeColorIndexes(parent.data, parent.depth));
|
|
180
|
+
const childColor = (_a = colorCache.get(childDatum)) !== null && _a !== void 0 ? _a : (0, utils_1.getPaletteColor)(options, getNodeColorIndexes(childDatum, child.depth));
|
|
181
|
+
const parentColor = (_b = colorCache.get(parent.data)) !== null && _b !== void 0 ? _b : (0, utils_1.getPaletteColor)(options, getNodeColorIndexes(parent.data, parent.depth));
|
|
182
182
|
const pathD = edgeType === 'straight'
|
|
183
183
|
? createStraightPath(sx, sy, tx, ty)
|
|
184
184
|
: createCurvePath(sx, sy, tx, ty);
|
|
185
185
|
const gradientId = `edge-gradient-${childDatum._indexes.join('-')}`;
|
|
186
186
|
decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, stroke: edgeColorMode === 'gradient'
|
|
187
187
|
? `url(#${gradientId})`
|
|
188
|
-
: (childColor
|
|
188
|
+
: (childColor !== null && childColor !== void 0 ? childColor : colorPrimary), strokeWidth: edgeWidth, fill: "none" }));
|
|
189
189
|
if (edgeColorMode === 'gradient') {
|
|
190
|
-
defsElements.push((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: parentColor
|
|
190
|
+
defsElements.push((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: parentColor !== null && parentColor !== void 0 ? parentColor : colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: childColor !== null && childColor !== void 0 ? childColor : colorPrimary })] }));
|
|
191
191
|
}
|
|
192
|
-
const appendIndex = childDatum.children
|
|
192
|
+
const appendIndex = (_d = (_c = childDatum.children) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
|
|
193
193
|
const addIndexes = [...childDatum._indexes, appendIndex];
|
|
194
194
|
const btnX = childLayout.x + (childLayout.width - btnBounds.width) / 2;
|
|
195
195
|
const removeY = childLayout.y + childLayout.height + 8;
|
|
@@ -202,7 +202,7 @@ const HierarchyMindmap = (props) => {
|
|
|
202
202
|
const rootLayout = layoutStore.get(mindmapRoot);
|
|
203
203
|
if (rootLayout) {
|
|
204
204
|
const rootDatum = mindmapRoot.data;
|
|
205
|
-
const appendIndex = rootDatum.children
|
|
205
|
+
const appendIndex = (_b = (_a = rootDatum.children) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
206
206
|
const addIndexes = [...rootDatum._indexes, appendIndex];
|
|
207
207
|
const btnX = rootLayout.x + (rootLayout.width - btnBounds.width) / 2;
|
|
208
208
|
const addY = rootLayout.y + rootLayout.height + 8 + btnBounds.height + 6;
|
|
@@ -59,7 +59,7 @@ const HierarchyStructure = (props) => {
|
|
|
59
59
|
const labelWidth = labelBounds.width + labelPaddingX * 2;
|
|
60
60
|
const labelHeight = labelBounds.height + labelPaddingY * 2;
|
|
61
61
|
const children = layer.children || [];
|
|
62
|
-
const hasGroups = children.some((child) => (child.children
|
|
62
|
+
const hasGroups = children.some((child) => { var _a; return (((_a = child.children) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0; });
|
|
63
63
|
if (hasGroups) {
|
|
64
64
|
const pillLabels = [];
|
|
65
65
|
children.forEach((child) => {
|