tvision-charts-component 3.3.24

package/dist/esm/basicTopo/_example/GroupLinkTopo.js

@@ -0,0 +1,875 @@
+import { __assign, __read } from "tslib";
+import React, { useRef, useMemo, useState } from 'react';
+import { BasicTopo } from '@tencent/tcharts-component';
+import { Button, Alert } from '@tencent/tea-component';
+export default function GroupLinkTopo() {
+    var chartDom = useRef(null);
+    var _a = __read(useState(false), 2), showMsg = _a[0], setShowMsg = _a[1];
+    var options = {
+        grid: { left: 300, right: 0, bottom: 0, top: 300, containLabel: true },
+        hooks: {
+            locationChanged: function (pipelines) {
+                console.log(pipelines);
+            },
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: function (items) {
+                var content = "\u8282\u70B9ID: ".concat(items.id, "<br />");
+                return content;
+            },
+        },
+        chartRef: function (chart) {
+            chartDom.current = chart;
+            chart.network.registerImages([
+                {
+                    id: 'cdn',
+                    path: 'M851.6 661.5l-3.1-306.7c-0.1-6-0.9-11.8-2.3-17.4l-0.1-8.7c-0.1-8.9-4.9-17.1-12.7-21.5l-7.6-4.3c-4.2-4-9-7.5-14.1-10.4L544.5 141.8c-5.2-2.9-10.6-5.2-16.3-6.7l-8.4-4.7c-7.8-4.4-17.3-4.3-25 0.3l-10 5.9c-4.4 1.6-8.7 3.5-12.9 6L208 298.5c-4.1 2.4-7.9 5.2-11.4 8.4l-11.5 6.8c-7.7 4.5-12.4 12.8-12.3 21.8l0.2 16.5c-0.4 3.2-0.6 6.4-0.6 9.6l3.1 306.7c0 3.2 0.3 6.5 0.7 9.6l0.2 17.4c0.1 8.9 4.9 17.1 12.7 21.5l15.1 8.5c2.6 1.9 5.3 3.7 8.1 5.3l267.1 150.7c2.8 1.6 5.8 3 8.7 4.2l14.4 8.1c3.8 2.2 8 3.2 12.3 3.2 4.4 0 8.8-1.2 12.7-3.5l11.5-6.8c4.4-1.6 8.8-3.5 12.9-6l264.1-156c4.1-2.4 8-5.3 11.5-8.4l9.9-5.9c7.7-4.5 12.4-12.8 12.3-21.8l-0.1-9.6c1.4-5.5 2.1-11.3 2-17.3z m-55 14.9L519.1 840.3c-3.3 0.6-6.8 0.4-10.1-0.5L232.6 684c-3.1-2.9-5.4-6.7-6.4-10.9L223 355.8c0.8-3.3 2.3-6.5 4.5-9.1l277.4-163.9c1.3-0.2 2.7-0.4 4-0.4 0.5 0 1.1 0 1.6 0.1l283.8 160.1c0.7 1 1.4 2.1 1.9 3.2l3.3 325.8c-0.7 1.7-1.8 3.3-2.9 4.8zM681.7 426.2c-0.1-8.9-4.9-17.1-12.7-21.5L472.4 293.8c-12-6.8-27.3-2.5-34.1 9.5s-2.5 27.3 9.5 34.1l184 103.8 2.1 211.2c0.1 13.7 11.3 24.7 25 24.7h0.3c13.8-0.1 24.9-11.4 24.7-25.2l-2.2-225.7zM565.9 493.6c-0.1-8.9-4.9-17.1-12.7-21.5L360.8 363.6c-4.4-3.7-10.1-5.9-16.3-5.8-13.8 0.1-24.9 11.4-24.7 25.2l2.3 225.7c0.1 8.9 4.9 17.1 12.7 21.5L531.2 741c0.1 0 0.1 0.1 0.2 0.1 3.9 2.2 8.1 3.2 12.3 3.2 8.7 0 17.2-4.6 21.8-12.7 3.1-5.5 3.9-11.7 2.7-17.4l-2.3-220.6z m-195.7-67.3L516 508.5l1.7 167.5-145.8-82.2-1.7-167.5z',
+                    color: '#8a8a8a',
+                    width: 24,
+                    height: 24,
+                },
+                {
+                    id: 'subnet',
+                    path: 'M659.2 67.648a64 64 0 0 1 64 64V302.08h167.936a64 64 0 0 1 64 64v526.272a64 64 0 0 1-64 64H364.8a64 64 0 0 1-64-64V721.92H132.8a64 64 0 0 1-64-64V131.648a64 64 0 0 1 64-64H659.2z m104.384 361.92h-40.448l0.064 228.352a64 64 0 0 1-64 64H428.288v42.88a64 64 0 0 0 56.576 63.616l7.488 0.448h271.232a64 64 0 0 0 63.552-56.576l0.448-7.424V493.568a64 64 0 0 0-56.512-63.552l-7.488-0.448z',
+                    color: '#1296db',
+                    width: 24,
+                    height: 24,
+                },
+                {
+                    id: 'attachment',
+                    path: 'M939.52 331.38A465.39 465.39 0 1 0 976 512a462.4 462.4 0 0 0-36.48-180.62zM512 896c-211.74 0-384-172.26-384-384a382.29 382.29 0 0 1 90.31-247.12l540.81 540.81A382.29 382.29 0 0 1 512 896z m302.65-147.92L275.92 209.35A382.1 382.1 0 0 1 512 128c211.74 0 384 172.26 384 384a382.1 382.1 0 0 1-81.35 236.08z',
+                    color: '#d81e06',
+                    width: 12,
+                    height: 12,
+                },
+            ]);
+            chart.network.add([
+                {
+                    group: 'groups',
+                    data: {
+                        id: 'oc_union',
+                        name: 'OC层',
+                        collapsed: false,
+                    },
+                    style: {
+                        image: 'subnet',
+                        width: 1000,
+                        height: 100,
+                        border: 3,
+                        color: '#BBBBBB',
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'groups',
+                    data: {
+                        id: 'soc_union',
+                        name: '中间源层',
+                        collapsed: false,
+                    },
+                    style: {
+                        image: 'subnet',
+                        width: 1000,
+                        height: 100,
+                        border: 3,
+                        color: '#BBBBBB',
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'groups',
+                    data: {
+                        id: 'final_union',
+                        name: '最终回源层',
+                        collapsed: false,
+                    },
+                    style: {
+                        image: 'subnet',
+                        width: 1000,
+                        height: 100,
+                        border: 3,
+                        color: '#BBBBBB',
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'groups',
+                    data: {
+                        id: 'domain',
+                        name: '客户源站',
+                        collapsed: false,
+                    },
+                    style: {
+                        image: 'subnet',
+                        width: 1000,
+                        height: 100,
+                        border: 3,
+                        color: '#BBBBBB',
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'groups',
+                    data: {
+                        id: 'no_path',
+                        name: 'no_path',
+                        collapsed: false,
+                    },
+                    style: {
+                        image: 'subnet',
+                        width: 1000,
+                        height: 100,
+                        border: 3,
+                        color: '#BBBBBB',
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '81',
+                        parentId: 'soc_union',
+                        name: '[xx云][点播DC中间源VMid1]',
+                    },
+                    position: {
+                        y: 520,
+                        x: 350,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#2fad53',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '87',
+                        parentId: 'oc_union',
+                        name: '[xx云][点播快手平台]',
+                    },
+                    position: {
+                        y: 100,
+                        x: 350,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#006eff',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '98',
+                        parentId: 'final_union',
+                        name: '[xx云][点播DC三级源L3V1]',
+                    },
+                    position: {
+                        y: 840,
+                        x: 550,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#D2514C',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '117',
+                        parentId: 'final_union',
+                        name: '[xx云][点播DC三级源L3V2]',
+                    },
+                    position: {
+                        y: 840,
+                        x: 350,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#D2514C',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '95',
+                        parentId: 'oc_union',
+                        name: '[xx云][长视频存储]',
+                    },
+                    position: {
+                        y: 250,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#006eff',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '40',
+                        parentId: 'oc_union',
+                        name: '[xx云][短视频存储]',
+                    },
+                    position: {
+                        y: 250,
+                        x: 350,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#006eff',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '17',
+                        parentId: 'soc_union',
+                        name: '[xx云][点播三通接入3]',
+                    },
+                    position: {
+                        y: 520,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#2fad53',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '18',
+                        parentId: 'soc_union',
+                        name: '[xx云][点播三通存储3]',
+                    },
+                    position: {
+                        y: 670,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#2fad53',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '19',
+                        parentId: 'final_union',
+                        name: '[xx云][点播三通回源3]',
+                    },
+                    position: {
+                        y: 840,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#D2514C',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: '42',
+                        parentId: 'oc_union',
+                        name: '[xx云][点播快手乐高]',
+                    },
+                    position: {
+                        y: 100,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#006eff',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+                        parentId: 'domain',
+                        name: 'test1.kwai-ap-beijing.myqcloud.com',
+                    },
+                    position: {
+                        y: 1110,
+                        x: 150,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#F0A139',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+                        parentId: 'domain',
+                        name: 'domain--test-cdn.ap-beijing.myqcloud.com',
+                    },
+                    position: {
+                        y: 1110,
+                        x: 350,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#F0A139',
+                    },
+                },
+                {
+                    group: 'nodes',
+                    data: {
+                        id: 'domain--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com',
+                        parentId: 'domain',
+                        name: 'gifshowbak-test.cos.kuaishou-ap-beijing.myqcloud.com',
+                    },
+                    position: {
+                        y: 1110,
+                        x: 550,
+                    },
+                    style: {
+                        width: 60,
+                        height: 60,
+                        image: 'cdn',
+                        imageStyle: 'auto',
+                        color: '#F0A139',
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '81--117--target',
+                        source: '81',
+                        target: '117',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '95--81--target',
+                        source: '95',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '95--17--target',
+                        source: '95',
+                        target: '17',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '40--81--target',
+                        source: '40',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '40--17--target',
+                        source: '40',
+                        target: '17',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '19--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com--target',
+                        source: '19',
+                        target: 'domain--gifshowbak-test108.cos.kuaishou-ap-beijing.myqcloud.com',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '117--test.kwai-ap-beijing.myqcloud.com--target',
+                        source: '117',
+                        target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '98--test1.kwai-ap-beijing.myqcloud.com--target',
+                        source: '98',
+                        target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--95--group_target',
+                        source: '87',
+                        target: '95',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--40--group_target',
+                        source: '87',
+                        target: '40',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '17--18--group_target',
+                        source: '17',
+                        target: '18',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '18--19--group_target',
+                        source: '18',
+                        target: '19',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--95--group_target',
+                        source: '42',
+                        target: '95',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--40--group_target',
+                        source: '42',
+                        target: '40',
+                        name: '分组回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '81--98--back_target',
+                        source: '81',
+                        target: '98',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--81--back_target',
+                        source: '87',
+                        target: '81',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--17--back_target',
+                        source: '87',
+                        target: '17',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '95--81--back_target',
+                        source: '95',
+                        target: '81',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '95--17--back_target',
+                        source: '95',
+                        target: '17',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '40--81--back_target',
+                        source: '40',
+                        target: '81',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '40--17--back_target',
+                        source: '40',
+                        target: '17',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--81--back_target',
+                        source: '42',
+                        target: '81',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--17--back_target',
+                        source: '42',
+                        target: '17',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '19--test1.kwai-ap-beijing.myqcloud.com--back_target',
+                        source: '19',
+                        target: 'domain--test1.kwai-ap-beijing.myqcloud.com',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '117--gifshowbak-test108.cos-cdn.ap-beijing.myqcloud.com--back_target',
+                        source: '117',
+                        target: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '98--gifshowbak-test108.cos-cdn.ap-beijing.myqcloud.com--back_target',
+                        source: '98',
+                        target: 'domain--test2-cdn.ap-beijing.myqcloud.com',
+                        name: '备份回源',
+                    },
+                    style: {
+                        color: '#AAAAAA',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--81--target',
+                        source: '87',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '87--17--target',
+                        source: '87',
+                        target: '17',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '17--81--target',
+                        source: '17',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '18--81--target',
+                        source: '18',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--81--target',
+                        source: '42',
+                        target: '81',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+                {
+                    group: 'edges',
+                    data: {
+                        id: '42--17--target',
+                        source: '42',
+                        target: '17',
+                        name: '回源',
+                    },
+                    style: {
+                        color: '#49a9ee',
+                        width: 1,
+                        lineDash: [2, 2],
+                    },
+                },
+            ]);
+        },
+    };
+    function bindClick(e) {
+        switch (e) {
+            case 'zoomOut':
+                chartDom.current.network.zoomOut();
+                break;
+            case 'zoomIn':
+                chartDom.current.network.zoomIn();
+                break;
+            case 'zoomReset':
+                chartDom.current.network.zoomReset();
+                break;
+            case 'remove':
+                chartDom.current.network.remove('n0');
+                break;
+            case 'highlight':
+                chartDom.current.dispatchAction({
+                    type: 'highlight',
+                    seriesName: ['n0', 'n1', 'e0'],
+                });
+                break;
+            case 'downplay':
+                chartDom.current.dispatchAction({
+                    type: 'downplay',
+                });
+                break;
+            case 'dagreH':
+                chartDom.current.network.layout('dagre', { rankDir: 'LR' });
+                break;
+            case 'dagreV':
+                chartDom.current.network.layout('dagre', { rankDir: 'TB' });
+                break;
+            case 'FruchtermanLayout':
+                setShowMsg(true);
+                chartDom.current.network.layout('FruchtermanLayout', null, {
+                    onLayoutEnd: function () {
+                        setShowMsg(false);
+                    },
+                });
+                break;
+            case 'ForceLayout':
+                chartDom.current.network.layout('ForceLayout');
+                break;
+            case 'springy':
+                chartDom.current.network.layout('springy');
+                break;
+            default:
+                break;
+        }
+    }
+    var mapRender = useMemo(function () { return React.createElement(BasicTopo, __assign({ height: 1200 }, options)); }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { title: "Dagre\u5E03\u5C40-\u6C34\u5E73", onClick: function () { return bindClick('dagreH'); } }, "Dagre\u5E03\u5C40-\u6C34\u5E73"),
+        React.createElement(Button, { title: "Dagre\u5E03\u5C40-\u7AD6\u76F4", onClick: function () { return bindClick('dagreV'); } }, "Dagre\u5E03\u5C40-\u7AD6\u76F4"),
+        React.createElement(Button, { title: "FruchtermanLayout\u5E03\u5C40", onClick: function () { return bindClick('FruchtermanLayout'); } }, "FruchtermanLayout\u5E03\u5C40"),
+        React.createElement(Button, { title: "ForceLayout\u5E03\u5C40", onClick: function () { return bindClick('ForceLayout'); } }, "ForceLayout\u5E03\u5C40"),
+        React.createElement(Button, { title: "\u653E\u5927", onClick: function () { return bindClick('zoomOut'); } }, "\u653E\u5927"),
+        React.createElement(Button, { title: "\u7F29\u5C0F", onClick: function () { return bindClick('zoomIn'); } }, "\u7F29\u5C0F"),
+        React.createElement(Button, { title: "\u9AD8\u4EAE\u8DEF\u5F84", onClick: function () { return bindClick('highlight'); } }, "\u9AD8\u4EAE\u8DEF\u5F84"),
+        React.createElement(Button, { title: "\u53D6\u6D88\u9AD8\u4EAE\u8DEF\u5F84", onClick: function () { return bindClick('downplay'); } }, "\u53D6\u6D88\u9AD8\u4EAE\u8DEF\u5F84"),
+        React.createElement(Button, { title: "\u5220\u9664", onClick: function () { return bindClick('remove'); } }, "\u5220\u9664\u8282\u70B9"),
+        showMsg && React.createElement(Alert, null, "FruchtermanLayout\u5E03\u5C40\u8BA1\u7B97\u4E2D..."),
+        mapRender));
+}
+//# sourceMappingURL=GroupLinkTopo.js.map